mockup for tute front page refresh. With tabs. Huzzah

src/site/scss/_tutorial.scss

 /* tutorial styles */
 
 #tutorial-side {
   width: 200px;
   position: fixed;
-  top: 85px;
+  top: 129px;
 }
 
 /* Large desktop */
 @media (min-width: 1200px) {
   #tutorial-side {
     width: 258px;
   }
 }
  
 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 979px) { 
   #tutorial-side {
     width: 158px;
   }
 }
  
 /* Landscape phone to portrait tablet */
 @media (max-width: 767px) { #tutorial-side {position: static; width:100%;} }
  
 /* Landscape phones and down */
 @media (max-width: 480px) { #tutorial-side {position: static; width:100%;} }
 
 
 
+/* DELETE ME: I think this isn't used anymore */
 #tutorial-toc {
   list-style-type: square;
   font-size: 9pt;
 
   padding: 10px;
-  background-color: #DDFFDD;
+  background-color: #e6E6FA;
   border-radius: 10px;
 
   margin: 0px 0px 15px 0px;
 
   ul {
     margin: 0px 0px 0px 15px;
   }
 
   li {
     line-height: 120%;
@@ skipping 34 matching lines @@
 /*$green-dark: #00D2B8;*/
 /*$green-light: #55DDCA;*/
 
 }
 
 #code-links {
   list-style-type: square;
   font-size: 9pt;
 
   padding: 10px;
-  background-color: #FFE4E1;
+  background-color: #DDFFDD;
   border-radius: 10px;
   line-height: 120%;
 
   margin: 10px 0px 15px 0px;
 
   p {
     font-size: 9pt;
     line-height: 120%;
   }
 
@@ skipping 28 matching lines @@
   h3 {
     font-weight: bold;
     font-size: 16pt;
   }
 
   .icon-wrench {
     font-size: 24pt;
   }
 }
 
+/* DELETE ME: this was used on front page to group Web UI targets */
 #target-group {
   background-color: #F5E2FF;
   border-radius: 10px;
   border-width: 1px;
   margin: 15px 10px 15px 10px;
   padding: 10px;
 
   h3 {
     font-weight: bold;
     font-size: 16pt;
   }
 
   .icon-wrench {
     font-size: 24pt;
   }
 }
 
 .running-app-frame {
   border-style:solid;
   border-width:1px;
   border-radius:7px;
   background-color:WhiteSmoke;
   padding:5px;
 }
+
+.tute-tabs {
+  margin-top: 40px;
+  h4 {
+    margin-top: 20px;
+  }
+}
+
+.tute-target-title {
+  padding: 20px;
+  border-radius: 10px;
+  margin-bottom: 30px;
+
+  background-color: #D8ECFD; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(right, #D8ECFD, #DDFFDD, #e6E6FA); /* For Chrome and Safari */
+  background-image:    -moz-linear-gradient(right, #D8ECFD, #DDFFDD, #e6E6FA); /* For old Fx (3.6 to 15) */
+  background-image:     -ms-linear-gradient(right, #D8ECFD, #DDFFDD, #e6E6FA); /* For pre-releases of IE 10*/
+  background-image:      -o-linear-gradient(right, #D8ECFD, #DDFFDD, #e6E6FA); /* For old Opera (11.1 to 12.0) */ 
+  background-image:         linear-gradient(to right, #D8ECFD, #DDFFDD, #e6E6FA); /* Standard syntax; must be last */
+
+  h1 {
+    font-size: 56px;
+  }
+
+  h3 {
+    padding-top: 15px;
+    font-size: 28px;
+  }
+}