New images, affix troubleshooting

home.html

@@ -207,7 +207,7 @@
 		</ul>
         <!-- Wrapper for slides -->
         <div class="carousel-inner">
-            <div class="item active">
+            <div class="item active health-use">
                 <h3>Health</h3>
                 <div class="carousel-content">
                 <div class="sampletasks">
@@ -223,6 +223,7 @@
 					<div style="width:19em; background-color: rgb(255, 242, 204); color: rgb(51, 51, 51); text-align:center; padding: 0px; font-size: 1.41em; line-height: 1.62765; list-style: none outside none; padding: 0px; height: 2.3em; min-height: 1.62765em; margin-bottom:0.75em; margin:0px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) inset;">
 					<div style="display: inline-block; width: 1.62765em; height: 1.62765em; padding: 0px; margin:0px; font-size: 1.41em; line-height: 1.62765; text-align: center; color: rgb(34, 34, 34); float:left; cursor: pointer; vertical-align: top; left:0px; position:relative; background-color: rgb(255, 207, 66); border-right: 1px solid rgba(0, 0, 0, 0.25);">+</div>&#160;<div style="display: inline-block; font-family: Lato,sans-serif; padding: 0.6em 0px 0em 1em; font-size: .8em; letter-spacing: normal; float:left; word-wrap: break-word;">Break a Sweat for 1 hr</div></div>
                 </div>
+
             <!--insert use case background image-->
 				
 			<div class="usetweet-group">
@@ -238,7 +239,7 @@
 	        </div>
       		</div>
             <!-- End Item -->
-            <div class="item">
+            <div class="item housework-use">
                 <h3>Housework</h3>
                 <div class="carousel-content">
                 <div class="sampletasks">
@@ -269,7 +270,7 @@
 	        </div>
       		</div>
             <!-- End Item -->
-            <div class="item">
+            <div class="item improvement-use">
                 <h3>Self-improvement</h3>
                 <div class="carousel-content">
                 <div class="sampletasks">
@@ -300,7 +301,7 @@
 	        </div>
       		</div>
             <!-- End Item -->
-            <div class="item">
+            <div class="item school-use">
                 <h3>School</h3>
                 <div class="carousel-content">
                 <div class="sampletasks">
@@ -331,7 +332,7 @@
 	        </div>
       		</div>
             <!-- End Item -->
-            <div class="item">
+            <div class="item work-use">
                 <h3>Work<br/><small><a href="/business.html">Use HabitRPG at your business</a></small></h3>
                 <div class="carousel-content">
                 <div class="sampletasks">

style.css

@@ -43,6 +43,10 @@ h1, h2, h3, h4, p.sectioninfo {
   max-width:400px;
 }
 
+img#myAvatar.affix-top {
+  margin-left:50%;
+  left:-75px;
+}
 
 button.gamifybutton {
   margin: 20px;
@@ -96,6 +100,26 @@ button.gamifybutton {
     display:block;
 }
 
+.health-use .carousel-content {
+  background:#ffffff url("images/uses/meditation-bkgd.png") no-repeat fixed center;
+}
+
+.housework-use .carousel-content {
+  background:#ffffff url("images/uses/dusting-bkgd.png") no-repeat fixed center;
+}
+
+.improvement-use .carousel-content {
+  background:#ffffff url("images/uses/achievement-bkgd.png") no-repeat fixed center;
+}
+
+.school-use .carousel-content {
+  background:#ffffff url("images/uses/reading.png") no-repeat fixed center;
+}
+
+.work-use .carousel-content {
+  background:#ffffff url("images/uses/coding.png") no-repeat fixed center;
+}
+
 .sampletasks {
   display:block;
   float:left;
@@ -103,7 +127,7 @@ button.gamifybutton {
   padding:20px;
 }
 .usetweet-group {
-  width:40%;
+  width:30%;
   float:right;
 }
 .carousel-content .usetweet {
@@ -125,3 +149,4 @@ button.gamifybutton {
   background-color:#eee;
   padding:20px 0;
 }
+