From df85ee4450b07f6c5b946b03f8fb2689046100fd Mon Sep 17 00:00:00 2001
From: Mike Francis <castblackjacket@gmail.com>
Date: Tue, 1 Jan 2013 18:11:50 +0000
Subject: [PATCH] Conversion to SASS

See updated README.md for details.
---
 README.md              |   9 +-
 css/_main.css          |   7 +
 scss/_base.scss        |  93 ++++++++++++
 scss/_forms.scss       |  34 +++++
 scss/_icons.scss       |   8 ++
 scss/_mixins.scss      |  29 ++++
 scss/_nav.scss         |  36 +++++
 scss/_normalise.scss   |  49 +++++++
 scss/_scaffolding.scss |  96 +++++++++++++
 scss/_tables.scss      |  21 +++
 scss/_variables.scss   |  38 +++++
 scss/style.scss        |  24 ++++
 style.css              | 318 ++++++++++-------------------------------
 13 files changed, 513 insertions(+), 249 deletions(-)
 create mode 100644 css/_main.css
 create mode 100644 scss/_base.scss
 create mode 100644 scss/_forms.scss
 create mode 100644 scss/_icons.scss
 create mode 100644 scss/_mixins.scss
 create mode 100644 scss/_nav.scss
 create mode 100644 scss/_normalise.scss
 create mode 100644 scss/_scaffolding.scss
 create mode 100644 scss/_tables.scss
 create mode 100644 scss/_variables.scss
 create mode 100644 scss/style.scss
 mode change 100755 => 100644 style.css

diff --git a/README.md b/README.md
index 42bb37c..902cac9 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,12 @@
 # barebones
 
-A lightweight, skinny skeletal WordPress theme for HTML5 and beyond. Great as a starting point for any project with powerful features to encourage rapid development for most projects.
+A lightweight, skeletal, responsive WordPress theme for HTML5 and beyond. Great as a starting point for any project with powerful features to encourage rapid development for most projects.
 
 ## Features
 
 * Reset, normalisation and base font/form styles
+* Responsive elements, mobile/tablet ready
+* Built using SASS - semantically named files all compiled into a single file
 * Includes Google HTML5 shiv
 * Semantic use of HTML5 elements
 * WAI-ARIA role ready
@@ -12,6 +14,7 @@ A lightweight, skinny skeletal WordPress theme for HTML5 and beyond. Great as a
 * Comes pre-bundled with latest CDN version of jQuery and fallback
 * index.php Loop template
 * Customised functions.php adding theme support for high customisation
+* Minimised HTTP requests for high Web Performance
 
 ## WordPress Support
 
@@ -23,8 +26,8 @@ The basic features are all tested from IE7+. Yet to be tested in any other brows
 
 ## Preprocessors
 
-barebones doesn't come bundled with any CSS preprocessor files however the main stylesheet is compiled from SASS. To use a preprocessor, just add another folder containing your files into the ./_ directory and set your files to compile to ./style.css
+Although barebones now utilises the powerful SASS CSS preprocessor, you don't have to use it. The main style.css file is not compressed so can be easily changed in a Text Editor.
 
 ## Credits
 
-* [Twitter Bootstrap](http://getbootstrap.com "Twitter Bootstrap")
\ No newline at end of file
+* [Twitter Bootstrap](http://getbootstrap.com "Twitter Bootstrap") for a modified version of their grid.
\ No newline at end of file
diff --git a/css/_main.css b/css/_main.css
new file mode 100644
index 0000000..94617ed
--- /dev/null
+++ b/css/_main.css
@@ -0,0 +1,7 @@
+.icon {
+  display: inline-block;
+  *display: inline;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
+  background: red; }
diff --git a/scss/_base.scss b/scss/_base.scss
new file mode 100644
index 0000000..53fc20f
--- /dev/null
+++ b/scss/_base.scss
@@ -0,0 +1,93 @@
+// Yaho YUI Reset
+
+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;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+fieldset, img { 
+	border: 0;
+}
+
+address, caption, cite, dfn, th, var {
+	font-style: normal;
+	font-weight: normal;
+}
+
+caption, th {
+	text-align: left;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-size: 100%;
+	font-weight: bold;
+}
+
+q:before, q:after {
+	content: '';
+}
+
+abbr, acronym {
+	border: 0;
+}
+
+// Normalisation
+
+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;
+}
+
+ul ul, ol ol {
+	margin-bottom: 0;
+}
+
+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;
+}
+
+a {
+	text-decoration: none;
+}
\ No newline at end of file
diff --git a/scss/_forms.scss b/scss/_forms.scss
new file mode 100644
index 0000000..c5d5d04
--- /dev/null
+++ b/scss/_forms.scss
@@ -0,0 +1,34 @@
+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);
+}
\ No newline at end of file
diff --git a/scss/_icons.scss b/scss/_icons.scss
new file mode 100644
index 0000000..c16af4b
--- /dev/null
+++ b/scss/_icons.scss
@@ -0,0 +1,8 @@
+.icon {
+	 display: inline-block;
+	*display: inline;
+	width: 16px;
+	height: 16px;
+	vertical-align: text-top;
+	background: red;
+}
\ No newline at end of file
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
new file mode 100644
index 0000000..1c4bbf8
--- /dev/null
+++ b/scss/_mixins.scss
@@ -0,0 +1,29 @@
+@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;
+}
\ No newline at end of file
diff --git a/scss/_nav.scss b/scss/_nav.scss
new file mode 100644
index 0000000..67b02be
--- /dev/null
+++ b/scss/_nav.scss
@@ -0,0 +1,36 @@
+.nav {
+	list-style: none;
+	margin-left: 0;
+}
+
+	.nav > li, .nav > li > a {
+		 display: inline-block;
+		*display: inline;
+	}
+	
+.nav-list {
+	border: solid 1px #ddd;
+	@include border-radius();
+	@include box-shadow();
+}
+
+	.nav-list > li, .nav-list > li > a {
+		display: block;
+	}
+	
+	.nav-list > li {
+		border-bottom: solid 1px #ddd;
+	}
+	
+	.nav-list > li:last-child {
+		border-bottom: none;
+	}
+	
+		.nav-list > li > a {
+			padding: 10px;
+			@include transition();
+		}
+		
+		.nav-list > li > a:hover {
+			background-color: #fafafa;
+		}
\ No newline at end of file
diff --git a/scss/_normalise.scss b/scss/_normalise.scss
new file mode 100644
index 0000000..63e037d
--- /dev/null
+++ b/scss/_normalise.scss
@@ -0,0 +1,49 @@
+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;
+}
+
+ul ul, ol ol {
+	margin-bottom: 0;
+}
+
+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;
+}
\ No newline at end of file
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
new file mode 100644
index 0000000..a0ce39c
--- /dev/null
+++ b/scss/_scaffolding.scss
@@ -0,0 +1,96 @@
+// Utils
+
+.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;
+}
+
+// Grid
+
+.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); }
\ No newline at end of file
diff --git a/scss/_tables.scss b/scss/_tables.scss
new file mode 100644
index 0000000..2d99316
--- /dev/null
+++ b/scss/_tables.scss
@@ -0,0 +1,21 @@
+.table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+	.table th, 
+	.table td {
+		text-align: left;
+		vertical-align: top;
+		border-top: 1px solid $tableBorderColour;
+		padding: ($marginBottom / 2) * 1px 10px;
+	}
+	
+	.table th {
+		font-weight: bold;
+		border-top: 0;
+	}
+
+	.table thead th {
+	  vertical-align: bottom;
+	}
\ No newline at end of file
diff --git a/scss/_variables.scss b/scss/_variables.scss
new file mode 100644
index 0000000..4c553a8
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,38 @@
+// Base
+
+$color: 									#222;
+$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:					1200;
+$containerPadding:				40;
+$columnGutter:						20;
+$columnCount:							12;
+$columnWidth:							( ( $containerWidth + $columnGutter ) - ( $columnGutter * $columnCount ) ) / $columnCount;
+
+// Tables
+
+$tableBorderColour:				#ddd;
+
+// Forms
+$inputBorderColour: 			#ccc;
+$inputBackgroundColour:		#fff;
+$btnBorderColour:					#ccc;
+$btnBackgroundColour:			#eee;
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
new file mode 100644
index 0000000..a510992
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,24 @@
+/*
+Theme Name: Bare Bones
+Theme URI: http://github.com/mikefrancis/barebones
+Author:  Mike Francis
+*/
+
+// Variables, Mixins (setup)
+@import "variables";
+@import "mixins";
+
+// Base (SMCSS)
+@import "base";
+
+// Main
+@import "scaffolding";
+@import "nav";
+@import "tables";
+@import "forms";
+@import "icons";
+
+body {
+	background: url(http://basehold.it/i/#{$marginBottom});
+	//background: url(http://basehold.it/i/21);
+}
\ No newline at end of file
diff --git a/style.css b/style.css
old mode 100755
new mode 100644
index 0af7064..248eb2d
--- a/style.css
+++ b/style.css
@@ -3,304 +3,130 @@ Theme Name: Bare Bones
 Theme URI: http://github.com/mikefrancis/barebones
 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; }
 
-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;
-}
+table { border-collapse: collapse; border-spacing: 0; }
 
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
+fieldset, img { border: 0; }
 
-fieldset, img { 
-	border: 0;
-}
+address, caption, cite, dfn, th, var { font-style: normal; font-weight: normal; }
 
-address, caption, cite, dfn, th, var {
-	font-style: normal;
-	font-weight: normal;
-}
+caption, th { text-align: left; }
 
-caption, th {
-	text-align: left;
-}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: bold; }
 
-h1, h2, h3, h4, h5, h6 {
-	font-size: 100%;
-	font-weight: normal;
-}
+q:before, q:after { content: ''; }
 
-q:before, q:after {
-	content: '';
-}
+abbr, acronym { border: 0; }
 
-abbr, acronym {
-	border: 0;
-}
+html { background-color: white; color: #222222; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.875em; line-height: 1.5; }
 
-/* =Normalisation
--------------------------------------------------------------- */
+h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset { margin-bottom: 21px; }
 
-html {
-	background-color: #fff;
-	font: 1em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
+ul ul, ol ol { margin-bottom: 0; }
 
-h1, h2, h3, h4, h5, h6, p, ol, ul, address, table, pre, blockquote {
-	margin-bottom: 24px;
-}
+h1 { font-size: 2em; line-height: 0.75em; }
 
-h1 {
-  font-size: 1.5em;
-  line-height: 1em;
-}
+h2 { font-size: 1.71429em; line-height: 0.875em; }
 
-h2 {
-  font-size: 1.375em;
-  line-height: 1.0909em;
-}
+h3 { font-size: 1.5em; line-height: 1em; }
 
-h3 {
-  font-size: 1.25em;
-  line-height: 1.2em;
-}
+h4 { font-size: 1.28571em; line-height: 1.16667em; }
 
-h4 {
-  font-size: 1.125em;
-  line-height: 1.333em;
-}
+h5 { font-size: 1.14286em; line-height: 1.3125em; }
 
-h5, h6 {
-  font-size: 1em;
-  line-height: 1.5em;
-}
+h6 { font-size: 1.14286em; line-height: 1.3125em; }
 
-ul, ol, cite {
-	margin-left: 20px;
-}
+ul, ol { margin-left: 24px; }
 
-blockquote {
-	padding-left: 15px;
-	border-left: solid 5px #ddd;
-}
+a { text-decoration: none; }
 
-cite {
-	font-weight: bold;
-}
+.alignleft { float: left; }
 
-a {
-	color: #222;
-	text-decoration: none;
-}
+img.alignleft { margin-right: 20px; }
 
-/* =Forms
--------------------------------------------------------------- */
+.alignright { float: right; }
 
-label {
-	display: inline-block;
-}
+img.alignright { margin-left: 20px; }
 
-input, select, textarea {
-	display: inline-block;
-	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 1em;
-	font-weight: normal;
-	line-height: 1.5em;
-	border: solid 1px #000;
-	padding: 4px;
-	color: #000;
-	width: 220px;
-}
+.aligncenter { display: block; margin-left: auto; margin-right: auto; }
 
-select {
-	height: 24px;
-	line-height: 24px;
-	width: 220px;
-}
+.container { width: 1200px; margin-left: auto; margin-right: auto; padding: 0 40px; }
+@media (max-width: 767px) { .container { width: auto; } }
 
-.control-label {
-	float: left;
-	width: 160px;
-}
+@media (max-width: 767px) { .container-fluid { padding: 0; } }
 
-.controls {
-	margin-left: 160px;
-}
+.row { margin-left: -20px; *zoom: 1; }
+@media (max-width: 767px) { .row { margin-left: 0; } }
 
-.btn {
-	display: inline-block;
-	background-color: #999;
-	border: solid 1px #999;
-	box-shadow: none;
-	font-size: 12px;
-	color: #fff;
-	cursor: pointer;
-	font-weight: bold;
-	padding: 4px 18px;
-	width: auto;
-}
+.row:before, .row:after { display: table; line-height: 0; content: ""; }
 
-/* =Ulility Classes
--------------------------------------------------------------- */
+.row:after { clear: both; }
 
-.alignleft {
-	float: left;
-}
+@media (max-width: 767px) { .row-fluid { padding: 0; } }
 
-img.alignleft {
-	margin: 0 20px 24px 0;
-}
+.col { display: inline-block; *display: inline; float: left; margin-left: 20px; }
+.col img { width: 100%; }
+@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; } }
 
-.alignright {
-	float: right;
-}
+.col1 { width: 81.66667px; }
 
-img.alignright {
-	margin: 0 0 24px 20px;
-}
+.col2 { width: 183.33333px; }
 
-/* =Nav Abstraction
--------------------------------------------------------------- */
+.col3 { width: 285px; }
 
-.nav {
-	list-style: none;
-	margin-left: 0;
-}
+.col4 { width: 386.66667px; }
 
-	.nav > li {
-		display: inline-block;
-		*display: inline;
-	}
-	
-		.nav > li > a {
-			display: block;
-		}
+.col5 { width: 488.33333px; }
 
-/* =Scaffolding
--------------------------------------------------------------- */
+.col6 { width: 590px; }
 
-.row {
-	margin-left: -20px;
-	*zoom: 1;
-}
+.col7 { width: 691.66667px; }
 
-.row:before, .row:after {
-	display: table;
-	content: "";
-}
+.col8 { width: 793.33333px; }
 
-.row:after {
-	clear: both;
-}
+.col9 { width: 895px; }
 
-[class*="span"] {
-	float: left;
-	margin-left: 20px;
-}
+.col10 { width: 996.66667px; }
 
-/* IE 6/7 fix */
-.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
-	float: left;
-	display: inline;
-	margin-left: 20px;
-}
+.col11 { width: 1098.33333px; }
 
-.span12 { width: 940px; }
-.span11 { width: 860px; }
-.span10 { width: 780px; }
-.span9  { width: 700px; }
-.span8  { width: 620px; }
-.span7  { width: 540px; }
-.span6  { width: 460px; }
-.span5  { width: 380px; }
-.span4  { width: 300px; }
-.span3  { width: 220px; }
-.span2  { width: 140px; }
-.span1  { width: 60px; }
+.col12 { width: 1200px; }
 
-.offset12 {	margin-left: 980px; }
-.offset11 {	margin-left: 900px; }
-.offset10 {	margin-left: 820px; }
-.offset9  {	margin-left: 740px; }
-.offset8  {	margin-left: 660px; }
-.offset7  {	margin-left: 580px; }
-.offset6  {	margin-left: 500px; }
-.offset5  {	margin-left: 420px; }
-.offset4  {	margin-left: 340px; }
-.offset3  {	margin-left: 260px; }
-.offset2  {	margin-left: 180px; }
-.offset1  {	margin-left: 100px; }
+.nav { list-style: none; margin-left: 0; }
 
-.row-fluid {
-	width: 100%;
-	*zoom: 1;
-}
+.nav > li, .nav > li > a { display: inline-block; *display: inline; }
 
-.row-fluid:before, .row-fluid:after {
-	display: table;
-	content: "";
-}
+.nav-list { border: solid 1px #ddd; -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); }
 
-.row-fluid:after {
-	clear: both;
-}
+.nav-list > li, .nav-list > li > a { display: block; }
 
-.row-fluid > [class*="span"] {
-	float: left;
-	margin-left: 2.127659574%;
-}
+.nav-list > li { border-bottom: solid 1px #ddd; }
 
-.row-fluid > [class*="span"]:first-child {
-	margin-left: 0;
-}
+.nav-list > li:last-child { border-bottom: none; }
 
-.row-fluid > .span12 { width: 99.99999998999999%; }
-.row-fluid > .span11 { width: 91.489361693%; }
-.row-fluid > .span10 { width: 82.97872339599999%; }
-.row-fluid > .span9  { width: 74.468085099%; }
-.row-fluid > .span8  { width: 65.95744680199999%; }
-.row-fluid > .span7  { width: 57.446808505%; }
-.row-fluid > .span6  { width: 48.93617020799999%; }
-.row-fluid > .span5  { width: 40.425531911%; }
-.row-fluid > .span4  { width: 31.914893614%; }
-.row-fluid > .span3  { width: 23.404255317%; }
-.row-fluid > .span2  { width: 14.89361702%; }
-.row-fluid > .span1  { width: 6.382978723%; }
+.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; }
 
-.container {
-	position: relative;
-	margin-left: auto;
-	margin-right: auto;
-	width: 940px;
-	padding: 0 20px;
-	*zoom: 1;
-}
-.container:before, .container:after {
-	display: table;
-	content: "";
-}
+.nav-list > li > a:hover { background-color: #fafafa; }
 
-.container:after {
-	clear: both;
-}
+.table { width: 100%; border-collapse: collapse; }
 
-.container-fluid {
-	padding-left: 20px;
-	padding-right: 20px;
-	*zoom: 1;
-}
+.table th, .table td { text-align: left; vertical-align: top; border-top: 1px solid #dddddd; padding: 10.5px 10px; }
 
-.container-fluid:before,
-.container-fluid:after {
-	display: table;
-	content: "";
-}
+.table th { font-weight: bold; border-top: 0; }
 
-.container-fluid:after {
-	clear: both;
-}
+.table thead th { vertical-align: bottom; }
 
-/* =Layout
--------------------------------------------------------------- */
\ No newline at end of file
+input, select, textarea, button { display: inline-block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em; line-height: marginBottompx; color: #222; padding: 9.5px; background-color: white; border: solid 1px #cccccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; margin-right: 5px; }
+
+.control-group { margin-bottom: 21px; }
+
+.control-label { float: left; width: 140px; }
+
+.controls { margin-left: 160px; }
+
+.btn { display: inline-block; background-color: #eeeeee; 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); -moz-box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1); box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.1); }
+
+.icon { display: inline-block; *display: inline; width: 16px; height: 16px; vertical-align: text-top; background: red; }
+
+body { background: url(http://basehold.it/i/21); }