Image preloading and some minor css fixes

apps/desktop/templates/desktop/dashboard.html

@@ -38,6 +38,7 @@
     	{% include 'desktop/popups/your-account.html' %}
     	
 		<div id="mask"></div>
+		<img src="{{ MEDIA_URL }}img/badge-popup-bg.png" class="preload" alt="">
 {% endblock %}
 
 {% block script %}

apps/desktop/templates/desktop/sections/share.html

@@ -32,7 +32,7 @@
     </div>
     <div class="sub-section">
         <h4>{{ _('Personal link') }}</h4>
-        <p>
+        <p id="personal-link">
             <a class="button" href="#">{{ _('Share your URL') }}</a>
             {% set alternate_copy = _('Copy your URL') %}
 

apps/mobile/templates/mobile/badges.html

@@ -24,6 +24,8 @@
             <button ontouchstart="">{{ _('Share my badge') }}</button>
         </div>
     </li>
+    <img src="{{ MEDIA_URL }}img/mobile/badge-label-bg.png" alt="" class="preload">
+    <img src="{{ MEDIA_URL }}img/mobile/badge-label-arrow.png" alt="" class="preload">
 {% endblock %}
 
 {% block script %}

media/css/screen.css

@@ -162,6 +162,10 @@ div.clearfix {
     clear:both;
 }
 
+img.preload {
+    display:none;
+}
+
 /* Typography and Colors */
 
 body {
@@ -1265,6 +1269,7 @@ div.level.locked:hover {
 
 #challenges-list .level-details li p {
     color:#999;
+    width:650px;
 }
 
 #challenges-list .level-details .checkbox {
@@ -1294,6 +1299,10 @@ div.level.locked:hover {
     min-width:188px;
 }
 
+#personal-link a {
+    display:block;
+}
+
 /* Personal Page - logged out*/
 
 #personal #stats {

templates/mobile/page.html

@@ -76,6 +76,7 @@
             </div>
 	    </div>
 	</div> <!-- end menu wrapper -->
+	<img src="{{ MEDIA_URL }}img/mobile/badge-label-bg.png" alt="" class="preload">
 	{% endif %}
 
 {% endblock %}