Refactored SASS, mobile first

_/scss/_forms.scss

@@ -1,34 +0,0 @@
-input, select, textarea, button {
-	display: inline-block;
-	font-family: $baseFontStack;
-	font-size: 1em;
-	line-height: marginBottom + px;
-	color: #222;
-	padding: ($marginBottom / 2) - 1px;
-	background-color: $inputBackgroundColour;
-	border: solid 1px $inputBorderColour;
-	@include border-radius(3px);
-	margin-right: 5px;
-}
-
-.control-group {
-	margin-bottom: $marginBottom + px;
-}
-
-.control-label {
-	float: left;
-	width: 140px;
-}
-
-.controls {
-	margin-left: 160px;
-}
-
-.btn {
-	display: inline-block;
-	background-color: $btnBackgroundColour;
-	border: solid 1px $btnBorderColour;
-	padding: ($marginBottom / 2) - 1px;
-	@include border-radius(3px);
-	@include box-shadow(3px);
-}

_/scss/_mixins.scss

@@ -1,29 +0,0 @@
-@mixin border-radius ($radius: 5px) {
-	-webkit-border-radius: $radius;
-	   -moz-border-radius: $radius;
-	     -o-border-radius: $radius;
-	        border-radius: $radius;
-
-}
-
-@mixin col-width ($span: 1) {
-	width: ( $columnWidth * $span ) + ( ( $span - 1 ) * $columnGutter ) * 1px;
-}
-
-@mixin box-sizing ($box-model: 'border-box') {
-	-webkit-box-sizing: $box-model;
-       -moz-box-sizing: $box-model;
-            box-sizing: $box-model;
-}
-
-@mixin box-shadow($x-axis: 0, $y-axis: 2px, $blur: 2px, $alpha: 0.1) {
-	-webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-	   -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-	        box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-}
-
-@mixin transition($duration:0.2s, $ease:ease-out) {
-	-webkit-transition: all $duration $ease;
-	   -moz-transition: all $duration $ease;
-	        transition: all $duration $ease;
-}

_/scss/_normalise.scss

@@ -1,49 +0,0 @@
-html {
-	background-color: $bodyBackgroundColour;
-	color: $color;
-	font-family: $baseFontStack;
-	font-size: ($baseFontSize / 16) * 1em;
-	line-height: $baseLineHeight;
-}
-
-h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
-	margin-bottom: $marginBottom * 1px;
-}
-
-h1 {
-	font-size: ($h1FontSize / $baseFontSize) * 1em;
-	line-height: ($marginBottom / $h1FontSize ) * 1em;
-}
-
-h2 {
-	font-size: ($h2FontSize / $baseFontSize) * 1em;
-	line-height: ($marginBottom / $h2FontSize ) * 1em;
-}
-
-h3 {
-	font-size: ($h3FontSize / $baseFontSize) * 1em;
-	line-height: ($marginBottom / $h3FontSize ) * 1em;
-}
-
-h4 {
-	font-size: ($h4FontSize / $baseFontSize) * 1em;
-	line-height: ($marginBottom / $h4FontSize ) * 1em;
-}
-
-h5 {
-	font-size: ($h5FontSize / $baseFontSize) * 1em;
-	line-height: ($marginBottom / $h5FontSize ) * 1em;
-}
-
-h6 {
-	font-size: ($h6FontSize / $baseFontSize) * 1em;
-	line-height: ($marginBottom / $h6FontSize ) * 1em;
-}
-
-ul, ol {
-	margin-left: $listMarginLeft * 1px;
-}
-
-ul ul, ol ol {
-	margin-bottom: 0;
-}

_/scss/_scaffolding.scss

@@ -1,70 +0,0 @@
-.container {
-	width: $containerWidth * 1px;
-	margin-left: auto;
-	margin-right: auto;
-	padding: 0 $containerPadding * 1px;
-	@media (max-width: 767px) {
-		width: auto;
-	}
-}
-
-.container-fluid {
-	@media (max-width: 767px) {
-		padding: 0;
-	}
-}
-
-.row {
-	margin-left: -$columnGutter * 1px;
-	*zoom: 1;
-	@media (max-width: 767px) {
-	 margin-left: 0;
-	}
-}
-
-.row:before,
-.row:after {
-	display: table;
-	line-height: 0;
-	content: "";
-}
-
-.row:after {
-	clear: both;
-}
-
-.row-fluid {
-	@media (max-width: 767px) {
-		padding: 0;
-	}
-}
-
-.col {
-	display: inline-block;
-	*display: inline;
-	float: left;
-	margin-left: $columnGutter * 1px;
-	img {
-		width: 100%;
-	}
-	@media (max-width: 767px) {
-		display: block;
-    float: none;
-    width: 100%;
-    margin-left: 0;
-    @include box-sizing(border-box);
-	}
-}
-
-.col1  { @include col-width(); }
-.col2  { @include col-width(2); }
-.col3  { @include col-width(3); }
-.col4  { @include col-width(4); }
-.col5  { @include col-width(5); }
-.col6  { @include col-width(6); }
-.col7  { @include col-width(7); }
-.col8  { @include col-width(8); }
-.col9  { @include col-width(9); }
-.col10 { @include col-width(10); }
-.col11 { @include col-width(11); }
-.col12 { @include col-width(12); }

_/scss/_utilities.scss

@@ -1,21 +0,0 @@
-.alignleft {
-	float: left;
-}
-
-img.alignleft {
-	margin-right: $columnGutter * 1px;
-}
-
-.alignright {
-	float: right;
-}
-
-img.alignright {
-	margin-left	: $columnGutter * 1px;
-}
-
-.aligncenter {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}

_/scss/_variables.scss

@@ -1,38 +0,0 @@
-// Base
-
-$color: 									#333;
-$bodyBackgroundColour: 		#fff;
-
-$baseFontStack: 					'Helvetica Neue', Helvetica, Arial, sans-serif;
-$baseFontSize: 						14;
-$baseLineHeight: 					1.5;
-$marginBottom: 						($baseFontSize * $baseLineHeight);
-
-$h1FontSize: 							28;
-$h2FontSize: 							24;
-$h3FontSize: 							21;
-$h4FontSize: 							18;
-$h5FontSize: 							16;
-$h6FontSize: 							16;
-
-// Lists
-
-$listMarginLeft:					24;
-
-// Scaffolding
-
-$containerWidth:					940;
-$containerPadding:				40;
-$columnGutter:						20;
-$columnCount:							12;
-$columnWidth:							( ( $containerWidth + $columnGutter ) - ( $columnGutter * $columnCount ) ) / $columnCount;
-
-// Tables
-
-$tableBorderColour:				#ddd;
-
-// Forms
-$inputBorderColour: 			#ccc;
-$inputBackgroundColour:		#fff;
-$btnBorderColour:					#ccc;
-$btnBackgroundColour:			#eee;

_/scss/_vars.scss

@@ -0,0 +1,37 @@
+// Base
+
+$base-colour: 							#333;
+$base-background-colour: 		#fff;
+
+$base-font-stack: 					'Helvetica Neue', Helvetica, Arial, sans-serif;
+$base-font-size: 						14;
+$base-line-height: 					1.5;
+$base-margin-bottom: 				($base-font-size * $base-line-height);
+
+$h1-font-size: 							28;
+$h2-font-size: 							24;
+$h3-font-size: 							21;
+$h4-font-size: 							18;
+$h5-font-size: 							16;
+$h6-font-size: 							16;
+
+// Lists
+
+$list-margin-left:					24;
+
+// Scaffolding
+
+$column-gutter:							20;
+$column-count:							12;
+$container-max-width:				1200;
+
+// Tables
+
+$table-border-colour:				#ddd;
+
+// Forms
+$input-border: 							solid 1px #ccc;
+$input-background:					#fff;
+$btn-border:								solid 1px #ccc;
+$btn-background:						#eee;
+$btn-color:									#333;

_/scss/generic/_mixins.scss

@@ -0,0 +1,49 @@
+@mixin breakpoint($point) {
+  @if $point == desktop {
+    @media (min-width: 1200px) { @content; }
+  }
+  @else if $point == tablet-landscape {
+    @media (min-width: 1024px) { @content; }
+  }
+  @else if $point == tablet-portrait {
+    @media (min-width: 768px)  { @content; }
+  }
+}
+
+@mixin border-radius ($radius: 5px) {
+	-webkit-border-radius: $radius;
+	   -moz-border-radius: $radius;
+	     -o-border-radius: $radius;
+	        border-radius: $radius;
+}
+
+@mixin col-width ($span: 1) {
+	//width: ((($container-width / $column-count) * $span) - $column-gutter) / $container-width * 100%;
+	width: ((100 / $column-count) * $span) - ($column-gutter / $container-max-width) * 100%;
+}
+
+@mixin box-sizing ($box-model: 'border-box') {
+	-webkit-box-sizing: $box-model;
+     -moz-box-sizing: $box-model;
+          box-sizing: $box-model;
+}
+
+@mixin box-shadow($x-axis: 0, $y-axis: 2px, $blur: 2px, $alpha: 0.1) {
+	-webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+	   -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+	        box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+}
+
+@mixin transition($duration:0.2s, $ease:ease-out) {
+	-webkit-transition: all $duration $ease;
+	   -moz-transition: all $duration $ease;
+	        transition: all $duration $ease;
+}
+
+@mixin gradient($from, $to) {
+  background-color: $from;
+	background-image: -webkit-linear-gradient($from, $to);
+	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
+  background-image: -moz-linear-gradient($from, $to);
+	background-image: -o-linear-gradient($from, $to);	
+}

_/scss/generic/_normalise.scss

@@ -0,0 +1,53 @@
+html {
+	background-color: $base-background-colour;
+	color: $base-colour;
+	font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
+}
+
+h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
+	margin-bottom: $base-margin-bottom * 1px;
+}
+
+h1 {
+	font-size: ($h1-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h1-font-size ) * 1em;
+}
+
+h2 {
+	font-size: ($h2-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h2-font-size ) * 1em;
+}
+
+h3 {
+	font-size: ($h3-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h3-font-size ) * 1em;
+}
+
+h4 {
+	font-size: ($h4-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h4-font-size ) * 1em;
+}
+
+h5 {
+	font-size: ($h5-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h5-font-size ) * 1em;
+}
+
+h6 {
+	font-size: ($h6-font-size / $base-font-size) * 1em;
+	line-height: ($base-margin-bottom / $h6-font-size ) * 1em;
+}
+
+ul, ol {
+	margin-left: $list-margin-left * 1px;
+}
+
+ul ul, ol ol {
+	margin-bottom: 0;
+}
+
+img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}

_/scss/generic/_utilities.scss

@@ -0,0 +1,33 @@
+.alignleft {
+	float: left;
+}
+
+img.alignleft {
+	margin-right: $column-gutter * 1px;
+}
+
+.alignright {
+	float: right;
+}
+
+img.alignright {
+	margin-left	: $column-gutter * 1px;
+}
+
+.aligncenter {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.clearfix {
+	*zoom:1;
+	&:before,
+	&:after{
+		content: " ";
+		display: table;
+	}
+	&:after{
+		clear: both;
+	}
+}

_/scss/objects/_forms.scss

@@ -0,0 +1,42 @@
+input, select, textarea, button {
+	display: inline-block;
+	font-family: $base-font-stack;
+	font-size: 1em;
+	line-height: $base-margin-bottom + px;
+	padding: 2.5px 5px;
+	color: $base-colour;
+	background: $input-background;
+	border: $input-border;
+	@include border-radius(3px);
+	margin-right: 5px;
+	margin-bottom: -1px;
+	width: 208px;
+}
+
+.control-group {
+	margin-bottom: $base-margin-bottom + px;
+}
+
+.control-label {
+	float: left;
+	width: 140px;
+}
+
+.controls {
+	margin-left: 160px;
+	@extend .clearfix;
+}
+
+.btn {
+	cursor: pointer;
+	display: inline-block;
+	background: $btn-background;
+	color: $btn-color;
+	line-height: $base-margin-bottom + px;
+	border: $btn-border;
+	@include border-radius(3px);
+	@include gradient(#fff, #eee);
+	&:hover {
+		@include gradient(#eee, #fff);
+	}
+}

_/scss/objects/_scaffolding.scss

@@ -0,0 +1,29 @@
+.container {
+	padding: 0 ($column-gutter * 2) * 1px;
+	max-width: $container-max-width * 1px;
+	margin: 0 auto;
+	@extend .clearfix;
+}
+
+.row {
+	@include breakpoint(tablet-portrait) { margin-left: -($column-gutter / $container-max-width) * 100%; }
+	@extend .clearfix;
+}
+
+.col {
+	display: block;
+	float: none;
+	width: auto;
+	@include breakpoint(tablet-portrait) { 
+		float: left;
+		margin-left: ($column-gutter / $container-max-width) * 100%;
+	}
+}
+
+@for $i from 1 through $column-count {
+  .col#{$i} { 
+		@include breakpoint(tablet-portrait) { 
+			@include col-width($i); 
+		}
+	}
+}

_/scss/objects/_tables.scss

@@ -7,8 +7,8 @@
 	.table td {
 		text-align: left;
 		vertical-align: top;
-		border-top: 1px solid $tableBorderColour;
+		border-top: 1px solid $table-border-colour;
-		padding: ($marginBottom / 2) * 1px 10px;
+		padding: ($base-margin-bottom / 2) * 1px 10px;
 	}
 	
 	.table th {

_/scss/style.scss

@@ -1,24 +1,23 @@
 /*
 Theme Name: Bare Bones
 Theme URI: http://github.com/mikefrancis/barebones
-Author:  Mike Francis
+Author: Mike Francis
 */
 
 // Variables, Mixins
 
-@import "variables";
+@import 'vars';
-@import "mixins";
+@import 'generic/mixins';
 
-// Base
+// Generic
 
-@import "reset";
+@import 'generic/reset';
-@import "normalise";
+@import 'generic/normalise';
-@import "utilities";
+@import 'generic/utilities';
 
-// Main
+// Objects
 
-@import "scaffolding";
+@import 'objects/scaffolding';
-@import "nav";
+@import 'objects/nav';
-@import "tables";
+@import 'objects/tables';
-@import "forms";
+@import 'objects/forms';
-//@import "icons"; Still in development

style.css

@@ -1,335 +1,270 @@
 /*
 Theme Name: Bare Bones
 Theme URI: http://github.com/mikefrancis/barebones
-Author:  Mike Francis
+Author: Mike Francis
 */
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
   margin: 0;
-  padding: 0;
+  padding: 0; }
-}
 
 table {
   border-collapse: collapse;
-  border-spacing: 0;
+  border-spacing: 0; }
-}
 
 fieldset, img {
-  border: 0;
+  border: 0; }
-}
 
 address, caption, cite, dfn, th, var {
   font-style: normal;
-  font-weight: normal;
+  font-weight: normal; }
-}
 
 caption, th {
-  text-align: left;
+  text-align: left; }
-}
 
 h1, h2, h3, h4, h5, h6 {
   font-size: 100%;
-  font-weight: bold;
+  font-weight: bold; }
-}
 
 q:before, q:after {
-  content: '';
+  content: ''; }
-}
 
 abbr, acronym {
-  border: 0;
+  border: 0; }
-}
 
 html {
   background-color: white;
   color: #333333;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font: 0.875em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
-  font-size: 0.875em;
-  line-height: 1.5;
-}
 
 h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
-  margin-bottom: 21px;
+  margin-bottom: 21px; }
-}
 
 h1 {
   font-size: 2em;
-  line-height: 0.75em;
+  line-height: 0.75em; }
-}
 
 h2 {
   font-size: 1.71429em;
-  line-height: 0.875em;
+  line-height: 0.875em; }
-}
 
 h3 {
   font-size: 1.5em;
-  line-height: 1em;
+  line-height: 1em; }
-}
 
 h4 {
   font-size: 1.28571em;
-  line-height: 1.16667em;
+  line-height: 1.16667em; }
-}
 
 h5 {
   font-size: 1.14286em;
-  line-height: 1.3125em;
+  line-height: 1.3125em; }
-}
 
 h6 {
   font-size: 1.14286em;
-  line-height: 1.3125em;
+  line-height: 1.3125em; }
-}
 
 ul, ol {
-  margin-left: 24px;
+  margin-left: 24px; }
-}
 
 ul ul, ol ol {
-  margin-bottom: 0;
+  margin-bottom: 0; }
-}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto; }
 
 .alignleft {
-  float: left;
+  float: left; }
-}
 
 img.alignleft {
-  margin-right: 20px;
+  margin-right: 20px; }
-}
 
 .alignright {
-  float: right;
+  float: right; }
-}
 
 img.alignright {
-  margin-left: 20px;
+  margin-left: 20px; }
-}
 
 .aligncenter {
   display: block;
   margin-left: auto;
-  margin-right: auto;
+  margin-right: auto; }
-}
+
+.clearfix, .container, .row, .controls {
+  *zoom: 1; }
+  .clearfix:before, .container:before, .row:before, .controls:before, .clearfix:after, .container:after, .row:after, .controls:after {
+    content: " ";
+    display: table; }
+  .clearfix:after, .container:after, .row:after, .controls:after {
+    clear: both; }
 
 .container {
-  width: 940px;
-  margin-left: auto;
-  margin-right: auto;
   padding: 0 40px;
-}
+  max-width: 1200px;
-@media (max-width: 767px) {
+  margin: 0 auto; }
-  .container {
-    width: auto;
-  }
-}
 
-@media (max-width: 767px) {
+@media (min-width: 768px) {
-  .container-fluid {
-    padding: 0;
-  }
-}
-
-.row {
-  margin-left: -20px;
-  *zoom: 1;
-}
-@media (max-width: 767px) {
   .row {
-    margin-left: 0;
+    margin-left: -1.66667%; } }
-  }
-}
-
-.row:before,
-.row:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.row:after {
-  clear: both;
-}
-
-@media (max-width: 767px) {
-  .row-fluid {
-    padding: 0;
-  }
-}
 
 .col {
-  display: inline-block;
+  display: block;
-  *display: inline;
+  float: none;
-  float: left;
+  width: auto; }
-  margin-left: 20px;
+  @media (min-width: 768px) {
-}
+    .col {
-.col img {
+      float: left;
-  width: 100%;
+      margin-left: 1.66667%; } }
-}
-@media (max-width: 767px) {
-  .col {
-    display: block;
-    float: none;
-    width: 100%;
-    margin-left: 0;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-}
 
-.col1 {
+@media (min-width: 768px) {
-  width: 60px;
+  .col1 {
-}
+    width: 6.66667%; } }
 
-.col2 {
+@media (min-width: 768px) {
-  width: 140px;
+  .col2 {
-}
+    width: 15.0%; } }
 
-.col3 {
+@media (min-width: 768px) {
-  width: 220px;
+  .col3 {
-}
+    width: 23.33333%; } }
 
-.col4 {
+@media (min-width: 768px) {
-  width: 300px;
+  .col4 {
-}
+    width: 31.66667%; } }
 
-.col5 {
+@media (min-width: 768px) {
-  width: 380px;
+  .col5 {
-}
+    width: 40.0%; } }
 
-.col6 {
+@media (min-width: 768px) {
-  width: 460px;
+  .col6 {
-}
+    width: 48.33333%; } }
 
-.col7 {
+@media (min-width: 768px) {
-  width: 540px;
+  .col7 {
-}
+    width: 56.66667%; } }
 
-.col8 {
+@media (min-width: 768px) {
-  width: 620px;
+  .col8 {
-}
+    width: 65%; } }
 
-.col9 {
+@media (min-width: 768px) {
-  width: 700px;
+  .col9 {
-}
+    width: 73.33333%; } }
 
-.col10 {
+@media (min-width: 768px) {
-  width: 780px;
+  .col10 {
-}
+    width: 81.66667%; } }
 
-.col11 {
+@media (min-width: 768px) {
-  width: 860px;
+  .col11 {
-}
+    width: 90%; } }
 
-.col12 {
+@media (min-width: 768px) {
-  width: 940px;
+  .col12 {
-}
+    width: 98.33333%; } }
 
 .nav {
   list-style: none;
-  margin-left: 0;
+  margin-left: 0; }
-}
 
 .nav > li, .nav > li > a {
   display: inline-block;
-  *display: inline;
+  *display: inline; }
-}
 
 .nav-list {
-  border: solid 1px #ddd;
+  border: solid 1px #dddddd;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); }
-}
 
 .nav-list > li, .nav-list > li > a {
-  display: block;
+  display: block; }
-}
 
 .nav-list > li {
-  border-bottom: solid 1px #ddd;
+  border-bottom: solid 1px #dddddd; }
-}
 
 .nav-list > li:last-child {
-  border-bottom: none;
+  border-bottom: none; }
-}
 
 .nav-list > li > a {
   padding: 10px;
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
-  transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out; }
-}
 
 .nav-list > li > a:hover {
-  background-color: #fafafa;
+  background-color: #fafafa; }
-}
 
 .table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: collapse; }
-}
 
 .table th,
 .table td {
   text-align: left;
   vertical-align: top;
   border-top: 1px solid #dddddd;
-  padding: 10.5px 10px;
+  padding: 10.5px 10px; }
-}
 
 .table th {
   font-weight: bold;
-  border-top: 0;
+  border-top: 0; }
-}
 
 .table thead th {
-  vertical-align: bottom;
+  vertical-align: bottom; }
-}
 
 input, select, textarea, button {
   display: inline-block;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1em;
-  line-height: marginBottompx;
+  line-height: 21px;
-  color: #222;
+  padding: 2.5px 5px;
-  padding: 9.5px;
+  color: #333333;
-  background-color: white;
+  background: white;
   border: solid 1px #cccccc;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
   margin-right: 5px;
-}
+  margin-bottom: -1px;
+  width: 208px; }
 
 .control-group {
-  margin-bottom: 21px;
+  margin-bottom: 21px; }
-}
 
 .control-label {
   float: left;
-  width: 140px;
+  width: 140px; }
-}
 
 .controls {
-  margin-left: 160px;
+  margin-left: 160px; }
-}
 
 .btn {
+  cursor: pointer;
   display: inline-block;
-  background-color: #eeeeee;
+  background: #eeeeee;
+  color: #333333;
+  line-height: 21px;
   border: solid 1px #cccccc;
-  padding: 9.5px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
-  -webkit-box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1);
+  background-color: white;
-  -moz-box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1);
+  background-image: -webkit-linear-gradient(white, #eeeeee);
-  box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1);
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#eeeeee));
-}
+  background-image: -moz-linear-gradient(white, #eeeeee);
+  background-image: -o-linear-gradient(white, #eeeeee); }
+  .btn:hover {
+    background-color: #eeeeee;
+    background-image: -webkit-linear-gradient(#eeeeee, white);
+    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(white));
+    background-image: -moz-linear-gradient(#eeeeee, white);
+    background-image: -o-linear-gradient(#eeeeee, white); }