added more documentation, refined some of the styles and kept pushing on the organization. Still need to work on testing the hell out of it and then cleaning and deploying

documentation-assets/docs.css

@@ -1,5 +1,5 @@
 /* 
-* Skeleton V0.1
+* Skeleton V1.0
 * Created by Dave Gamache
 * www.skeleton.gs
 * 4/30/2011
@@ -9,32 +9,46 @@
 /* Documentation Styles
 ================================================== */
 	div.container {
-		padding-top: 40px; }
+		padding-top: 60px; }
 		
 	/* Doc nav */
 	nav { 
-		margin-left: 10px;
-		position: fixed; }
+		position: fixed;
+		width: inherit; }
 	#logo {
-		margin-bottom: 30px; }
+		margin-bottom: 30px;
+		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+		letter-spacing: -1px;
+		font-weight: bold;
+		text-align: right;  }
 	nav ul { 
-		margin-left: 40px;
-		overflow: hidden; }
+		float: right;  }
 	nav ul li {
+		text-align: right;
+		display: block;
 		margin-bottom: 10px; }
 	nav ul li a {
-		font-size: 15px;
-		color:#5f5f5f;
+		font-size: 14px;
+		color: #555;
 		text-decoration: none;
-		font-weight: normal; }
-	nav ul li a.active {
-		font-weight: bold; 
-		color: #000; }
-	header p {
-		font-size: 40px;
-		line-height: 45px;
-		font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-		color: #8d8d8d; }
+		font-weight: bold;
+		padding: 3px 8px;
+		position: relative;
+		right: -8px;
+		-moz-border-radius: 2px;
+		 -webkit-border-radius: 2px;
+		 border-radius: 2px; }
+	nav ul li a:hover {
+		color: #fff;
+		background: #222; }
+	nav .button { 
+		float: right; }
+	header h1 {
+		font-size: 52px;
+		line-height: 61px;
+		letter-spacing: -1px;
+		font-weight: normal;
+		font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; }
 	hr.large { 
 		border: none;
 		height: 8px; 
@@ -43,6 +57,9 @@
 	div.doc-section {
 		margin: 30px 0; }
 
+	#whatAndWhy .row { 
+		padding: 30px 0 0; }
+
 	#typography blockquote {
 		margin-top: 20px; }
 		
@@ -51,34 +68,72 @@
 		color: #999; }
 	.hidden-code>div {
 		display: none; }
+		
+	figure { 
+		float: left;
+		height: 220px;
+		margin: 10px 24px 20px 0; 
+		position: relative; }
+	figure:last-child { 
+		margin-right: 0; }
+	figure img { 
+		position: absolute;
+		bottom: 26px; }
+	figure figcaption {
+		margin: 0 auto; 
+		position: absolute; 
+		bottom: 0; 
+		font-size: 13px; 
+		line-height: 30px; 
+		font-weight: bold;}
+	figure.iphone { 
+		width: 119px; }
+	figure.ipad { 
+		width: 232px; }
+	figure.laptop { 
+		width: 301px; }
 
 	/* Grid */
 	#grid .column,
 	#grid .columns { 
-		background: #222; 
+		background: #ddd; 
 		height: 25px;
 		line-height: 25px;
 		margin-bottom: 10px;
 		text-align: center;
 		text-transform: uppercase; 
-		color: #fff; 
+		color: #555; 
 		font-size: 12px; 
 		font-weight: bold;
 		-moz-border-radius: 2px;
 		 -webkit-border-radius: 2px;
 		 border-radius: 2px; }
+	#grid .column:hover,
+	#grid .columns:hover { 
+		background: #bbb; 
+		color: #333; }
 	#grid .example-grid { overflow: hidden; }
+	
+	
+	.resize { 
+		position: fixed; 
+		bottom: 0; 
+		right: 0; 
+		height: 80px; 
+		width: 80px; 
+		background: url(images/resize.png); }
+		
+	.gist-meta { display: none !important;}
 		 
 		 
 	/* Mobile */
 	@media only screen and (max-width: 767px) {
-		header p { font-size: 25px; line-height: 30px;}
+		header h1 { font-size: 34px; line-height: 37px; }
 		nav { position: relative; }
 		nav ul { display: none; }
-		#logo { 
-			width: 100px;
-			display: block;
-			margin: 0 auto;  }
+		#logo { text-align: left; }
+/* 		#whatAndWhy img { display: none; } */
+		nav .button { display: none; }
 	}
 	
 	/* Mobile Landscape */
@@ -89,8 +144,10 @@
 	/* Non 960 */
 	@media only screen and (max-width: 969px) {
 		#logo { 
-			max-width: 130px; }
-		nav ul { margin-left: 10px; }
+			font-size: 21px;
+			margin-bottom: 15px; }
+		nav .button { 
+			padding: 9px 20px 11px; }
 	}
 	
 	
@@ -105,6 +162,7 @@
 	
 	/* Anything smaller than standard 960 */
 	@media only screen and (max-width: 959px) {}
+
 	
 	/* iPad Portrait Only */
 	@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}
@@ -113,10 +171,11 @@
 	@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}
 	
 	/* Mobile Landscape Only */
-	@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {
-		header p { 
-			font-size: 25px;
-			line-height: 30px; }
+	@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}
+	
+	/* Anything smaller than standard 960 on a device */
+	@media only screen and (max-width: 959px) and (max-device-width: 1000px) {
+		.resize { display: none; }
 	}