added support for .sass syntax

nice!

library/sass/1030up.sass

@@ -0,0 +1,10 @@
+//
+// Site Name: 
+// Author: 
+// 
+// Stylesheet: DESKTOP
+// 
+// This is the desktop size. It's larger than an iPad so it will only
+// be seen on the Desktop. 
+// 
+//

library/sass/1240up.sass

@@ -0,0 +1,11 @@
+//
+// Site Name: 
+// Author: 
+// 
+// Stylesheet: LARGE VIEWING SIZE 
+// 
+// You can add some advanced styles here if you like. This kicks in
+// on larger screens.
+//
+//
+

library/sass/481up.sass

@@ -0,0 +1,446 @@
+//
+// Site Name: 
+// Author: 
+//
+// Stylesheet: TABLET & SMALLER LAPTOPS
+//
+// This stylesheet is loaded for larger mobile devices. It's set to 
+// 481px because at 480px it would load on a landscaped iPhone.
+// This isn't ideal because then you would be loading all those
+// extra styles on that same mobile connection. 
+//
+// A word of warning. This size COULD be a larger mobile device,
+// so you still want to keep it pretty light and simply expand
+// upon your base.less styles.
+//
+//
+
+
+//
+// GENERAL STYLES
+//
+
+body 
+
+//
+// LAYOUT & GRID STYLES
+//
+
+.wrap
+
+//
+// HEADER SYTLES
+//
+
+.header 
+
+#logo
+	
+//
+// NAVIGATION STYLES
+//
+
+
+			
+//
+// POSTS & CONTENT STYLES
+//
+
+#content 
+
+// want to style individual post classes? Booya!
+.hentry             // standard post class
+.post-id            // post by id (i.e. post-3)
+.post               // general post style 
+.page               // general article on a page style 
+.attachment         // general style on an attatchment 
+.sticky             // sticky post style 
+.hentry             // hentry class 
+.category-slug      // style by category (i.e. category-videos)
+.tag-slug           // style by tag (i.e. tag-news) 
+	
+.article-header     // the header element inside each post
+.article-footer     // the footer element inside each post
+		
+.single-title,      // the title (h1) on each single post or page
+.page-title 
+		
+.single-title 		// the title (h1) on single posts
+.page-title         // the title (h1) on pages
+.archive-title      // the archive title on archive / category pages
+	
+		
+// post meta
+.meta
+	
+	time
+			
+// post content
+.post-content
+			
+	p		
+			
+	ul, ol, table, dl
+			
+	ul, ol
+				
+		li
+					
+	ul
+		li
+			
+	ol
+			
+		li 
+			
+	blockquote
+				
+		&:before
+			
+	dl
+			
+	dt
+			
+	dd 
+			
+	img 
+			
+	//
+	// image alignment on a screen this size may be
+	// a bit difficult. It's set to start aligning 
+	// and floating images at the next breakpoint,
+	// but it's up to you. Feel free to change it up.
+	//
+	.alignleft, img.alignleft
+		margin-right: 1.5em
+		display: inline
+		float: left
+		
+	.alignright, img.alignright
+		margin-left: 1.5em
+		display: inline 
+		float: right 
+	
+	.aligncenter, img.aligncenter
+		margin-right: auto
+		margin-left: auto
+		display: block
+		clear: both
+			
+	video, object
+			
+	pre, code 
+			
+// end .post-content
+			
+.wp-caption
+			
+	// images inside wp-caption
+	img
+			
+	p.wp-caption-text
+	
+// end .wp-caption 
+			
+// image gallery styles
+.gallery
+			
+	dl
+				
+		a
+			
+		img
+			
+	dt
+			
+	dd 
+		
+// end .gallery 
+		
+// gallery caption styles	
+.gallery-caption
+		
+.size-full
+.size-large 
+.size-medium 
+.size-thumbnail
+
+//
+// PAGE NAVI STYLES
+//
+
+.page-navigation, 
+.wp-prev-next
+	
+.bones_page_navi
+	
+	li 
+			
+		a 
+				
+			&:hover, 
+			&:focus 
+				
+// end .bones_page_navi
+		
+// current page link 
+li.bpn-current
+		
+	a
+	// hovering on current page link
+		&:hover,
+		&:focus
+
+		
+// common styles for page-navi links
+li.bpn-prev-link, 
+li.bpn-next-link
+		
+	a
+		
+// remove the bg on end links
+li.bpn-prev-link a:hover, 
+li.bpn-next-link a:hover, 
+li.bpn-first-page-link a:hover, 
+li.bpn-last-page-link a:hover
+
+		
+// previous link
+li.bpn-prev-link 
+	a 
+		&:hover,
+		&:focus 
+		
+// next page link		
+li.bpn-next-link 
+	a 
+		&:hover,
+		&:focus 
+				
+// first page link 
+li.bpn-first-page-link 
+	a 
+		&:hover,
+		&:focus 
+		
+// last page link
+li.bpn-last-page-link
+	a 
+		&:hover,
+		&:focus 
+	
+// fallback previous & next links
+.wp-prev-next
+		
+	ul
+		
+	.prev-link
+		
+	.next-link
+		
+// end .wp-prev-next 
+
+//
+// COMMENT STYLES
+//
+
+// h3 comment title
+#comments	
+	// number of comments span
+	span 
+	
+.comment-nav
+	
+	ul
+	
+		li
+
+// end .comment-nav
+		
+// comment styles
+.commentlist
+	
+	li
+		
+		&:last-child
+		
+		ul.children
+			
+			li
+	
+	li[class*=depth-]
+			
+	li.depth-1
+	
+	li:not(.depth-1)
+	
+	li.depth-2
+	li.depth-3
+	li.depth-4
+	li.depth-5
+	
+	.odd
+	.even
+
+	// wordpress comment classes
+	.comment                         // regular comment class (present on all)
+	.alt                             // an alt comment
+	.parent                          // a parent comment
+	.children                        // a child comment
+	.pingback                        // a pingback
+	.bypostauthor                    // a comment by the post author
+	.comment-author                  // a comment by the author
+	.comment-author-admin            // a comment by the author who is admin
+	.thread-alt                      // a comment inside a thread alt
+	.thread-odd                      // an odd comment inside thread
+	.thread-even 	                 // an even comment inside thread
+			
+	/// comment vcard
+	.vcard
+		
+		// comment author name
+		cite.fn
+			
+			// author link url
+			a.url
+		
+		// comment date
+		time
+		
+			a
+				
+				&:hover
+		
+		// the comment gravatar
+		img.avatar
+			
+// end .commentlist
+	
+
+// comment meta
+.comment-meta
+		
+	a
+		
+// comment meta data
+.commentmetadata
+		
+	a
+	
+// comment content
+.comment_content
+			
+	p
+		
+// end .comment_content
+	
+// comment reply link
+.comment-reply-link 
+	
+	&:hover,
+	&:focus
+		
+// end .comment-reply-link 
+					
+
+//
+// COMMENT FORM STYLES
+//
+
+.respond-form 
+	
+	form
+		
+		li
+			
+			label,
+			small
+		
+		input[type=text], 
+		input[type=email], 
+		input[type=url], 
+		textarea 
+		
+			&:focus
+			
+			// form validation 
+			&:invalid 
+		
+		input[type=text],
+		input[type=email], 
+		input[type=url]
+		
+		textarea
+
+// end .respond-form
+	
+// comment submit button
+#submit
+	
+// comment form title
+#comment-form-title 
+	
+// cancel comment reply link
+#cancel-comment-reply 
+	a
+			
+// logged in comments
+.comments-logged-in-as
+		
+// allowed tags 
+#allowed_tags 	
+	
+// no comments
+.nocomments 
+	
+	
+//
+// SIDEBARS & ASIDES
+//
+
+.sidebar
+
+.widgettitle
+
+.widget
+		
+	ul
+		
+		li 
+			
+			&:first-child
+				
+			&:last-child 
+				
+			a 
+				
+			// deep nesting 
+			ul
+			
+// end .widget 
+
+//
+// FOOTER STYLES
+//
+
+.footer
+	
+//
+// if you checked out the link above:
+// http://www.alistapart.com/articles/organizing-mobile/
+// you'll want to style the footer nav
+// a bit more in-depth. Remember to keep
+// it simple because you'll have to 
+// override these styles for the desktop
+// view.
+//
+.footer-links
+	
+	ul
+		
+		li
+		
+// end .footer-links
+			
+.attribution
+	

library/sass/768up.sass

@@ -0,0 +1,611 @@
+//
+// Site Name: 
+// Author: 
+//
+// Stylesheet: TABLET & SMALLER LAPTOPS
+// 
+// Here's where you can start getting into the good stuff.
+// This size will work on iPads, other tablets, and desktops.
+// So you can start working with more styles, background images,
+// and other resources. You'll also notice the grid starts to
+// come into play. Have fun!
+// 
+//
+
+
+//
+// GENERAL STYLES
+//
+
+body
+
+//
+// WORDPRESS BODY CLASSES
+// style a page via class
+//
+
+.rtl                                // right to left like hebrew
+.home                               // home page 
+.blog                               // blog page 
+.archive                            // archive page 
+.date                               // date archive page 
+.date-paged-1                       // replace the number to the corresponding page number 
+.search                             // search page 
+.search-results                     // search result page 
+.search-no-results                  // no results search page 
+.search-paged-1                     // individual paged search (i.e. body.search-paged-3) 
+.error404                           // 404 page 
+.single                             // single post page 
+.postid-1                           // individual post page by id (i.e. body.postid-73) 
+.single-paged-1                     // individual paged single (i.e. body.single-paged-3) 
+.attachment                         // attatchment page 
+.attachmentid-1                     // individual attatchment page (i.e. body.attachmentid-763) 
+.attachment-mime-type               // style mime type pages 
+.author                             // author page 
+.author-nicename                    // user nicename (i.e. body.author-samueladams) 
+.author-paged-1                     // paged author archives (i.e. body.author-paged-4) for page 4 
+.category                           // category page 
+.category-1                         // individual category page (i.e. body.category-6) 
+.category-paged-1                   // replace the number to the corresponding page number 
+.tag                                // tag page 
+.tag-slug                           // individual tag page (i.e. body.tag-news) 
+.tag-paged-1                        // replace the number to the corresponding page number 
+.page-template                      // custom page template page 
+.page-template-page-php             // individual page template (i.e. body.page-template-contact-php 
+.page-paged-1                       // replace the number to the corresponding page number 
+.page-parent                        // parent page
+.page-child                         // child page
+.parent-pageid-1                    // replace the number to the corresponding page number 
+.logged-in                          // if user is logged in 
+.paged                              // paged items like search results or archives 
+.paged-1                            // individual paged (i.e. body.paged-3)
+
+//
+// LAYOUT & GRID STYLES
+//
+
+.wrap
+	max-width: 1000px
+	
+//
+// This is a combination of the 1140 grid and Twitter Boostrap.
+// I liked 1140 but Boostrap's grid was way more detailed so
+// I merged them together, let's see how this works out.
+// If you want to use 1140, the original values are commented
+// out on each line.
+//
+
+.onecol
+	width: 5.801104972%        // grid_1
+.twocol
+	width: 14.364640883%       // grid_2
+.threecol
+	width: 22.928176794%       // grid_3
+.fourcol
+	width: 31.491712705%       // grid_4
+.fivecol
+	width: 40.055248616%       // grid_5
+.sixcol
+	width: 48.618784527%       // grid_6
+.sevencol
+	width: 57.182320438000005% // grid_7
+.eightcol
+	width: 65.74585634900001%  // grid_8
+.ninecol
+	width: 74.30939226%        // grid_9
+.tencol
+	width: 82.87292817100001%  // grid_10
+.elevencol
+	width: 91.436464082%       // grid_11
+.twelvecol
+	width: 99.999999993%       // grid_12
+	
+// layout & column defaults
+.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol 
+	position: relative
+	float: left
+	margin-left:  2.762430939%
+	
+.first
+	margin-left:  0
+	
+.last
+	float:  right
+
+//
+// HEADER SYTLES
+//
+
+.header 
+
+#logo
+	
+//
+// NAVIGATION STYLES
+//
+
+
+			
+//
+// POSTS & CONTENT STYLES
+//
+
+#content 
+
+// want to style individual post classes? Booya!
+.hentry             // standard post class
+.post-id            // post by id (i.e. post-3)
+.post               // general post style 
+.page               // general article on a page style 
+.attachment         // general style on an attatchment 
+.sticky             // sticky post style 
+.hentry             // hentry class 
+.category-slug      // style by category (i.e. category-videos)
+.tag-slug           // style by tag (i.e. tag-news) 
+	
+.article-header     // the header element inside each post
+.article-footer     // the footer element inside each post
+		
+.single-title,      // the title (h1) on each single post or page
+.page-title 
+		
+.single-title 		// the title (h1) on single posts
+.page-title         // the title (h1) on pages
+.archive-title      // the archive title on archive / category pages
+	
+		
+// post meta
+.meta
+	
+	time
+			
+// post content
+.post-content
+			
+	p		
+			
+	ul, ol, table, dl
+			
+	ul, ol
+				
+		li
+					
+	ul
+		li
+			
+	ol
+		li 
+			
+	blockquote
+				
+		&:before
+			
+	dl
+			
+	dt
+			
+	dd 
+			
+	img 
+	
+	.alignleft, img.alignleft
+	.alignright, img.alignright
+	.aligncenter, img.aligncenter
+			
+	video, object
+			
+	pre, code 
+			
+// end .post-content
+			
+.wp-caption
+			
+	// images inside wp-caption
+	img
+			
+	p.wp-caption-text
+	
+// end .wp-caption 
+			
+// image gallery styles
+.gallery
+			
+	dl
+				
+		a
+			
+		img
+			
+	dt
+			
+	dd 
+		
+// end .gallery 
+		
+// gallery caption styles	
+.gallery-caption
+		
+.size-full
+.size-large 
+.size-medium 
+.size-thumbnail
+
+//
+// PAGE NAVI STYLES
+//
+
+.page-navigation, 
+.wp-prev-next
+	
+.bones_page_navi
+	
+	li 
+			
+		a 
+				
+			&:hover, 
+			&:focus 
+				
+// end .bones_page_navi
+		
+// current page link 
+li.bpn-current
+		
+	a
+	// hovering on current page link
+		&:hover,
+		&:focus
+
+		
+// common styles for page-navi links
+li.bpn-prev-link, 
+li.bpn-next-link
+		
+	a
+		
+// remove the bg on end links
+li.bpn-prev-link a:hover, 
+li.bpn-next-link a:hover, 
+li.bpn-first-page-link a:hover, 
+li.bpn-last-page-link a:hover
+
+		
+// previous link
+li.bpn-prev-link 
+	a 
+		&:hover,
+		&:focus 
+		
+// next page link		
+li.bpn-next-link 
+	a 
+		&:hover,
+		&:focus 
+				
+// first page link 
+li.bpn-first-page-link 
+	a 
+		&:hover,
+		&:focus 
+		
+// last page link
+li.bpn-last-page-link
+	a 
+		&:hover,
+		&:focus 
+	
+// fallback previous & next links
+.wp-prev-next
+		
+	ul
+		
+	.prev-link
+		
+	.next-link
+		
+// end .wp-prev-next 
+
+//
+// COMMENT STYLES
+//
+
+// h3 comment title
+#comments	
+	// number of comments span
+	span 
+	
+.comment-nav
+	
+	ul
+	
+		li
+
+// end .comment-nav
+		
+// comment styles
+.commentlist
+	
+	li
+		
+		&:last-child
+		
+		ul.children
+			
+			li
+	
+	li[class*=depth-]
+			
+	li.depth-1
+	
+	li:not(.depth-1)
+	
+	li.depth-2
+	li.depth-3
+	li.depth-4
+	li.depth-5
+	
+	.odd
+	.even
+
+	// wordpress comment classes
+	.comment                         // regular comment class (present on all)
+	.alt                             // an alt comment
+	.parent                          // a parent comment
+	.children                        // a child comment
+	.pingback                        // a pingback
+	.bypostauthor                    // a comment by the post author
+	.comment-author                  // a comment by the author
+	.comment-author-admin            // a comment by the author who is admin
+	.thread-alt                      // a comment inside a thread alt
+	.thread-odd                      // an odd comment inside thread
+	.thread-even 	                 // an even comment inside thread
+			
+	/// comment vcard
+	.vcard
+		
+		// comment author name
+		cite.fn
+			
+			// author link url
+			a.url
+		
+		// comment date
+		time
+		
+			a
+				
+				&:hover
+		
+		// the comment gravatar
+		img.avatar
+			
+// end .commentlist
+	
+
+// comment meta
+.comment-meta
+		
+	a
+		
+// comment meta data
+.commentmetadata
+		
+	a
+	
+// comment content
+.comment_content
+			
+	p
+		
+// end .comment_content
+	
+// comment reply link
+.comment-reply-link 
+	
+	&:hover,
+	&:focus
+		
+// end .comment-reply-link 
+					
+
+//
+// COMMENT FORM STYLES
+//
+
+.respond-form 
+	
+	form
+		
+		li
+			
+			label,
+			small
+		
+		input[type=text], 
+		input[type=email], 
+		input[type=url], 
+		textarea 
+		
+			&:focus
+			
+			// form validation 
+			&:invalid 
+		
+		input[type=text],
+		input[type=email], 
+		input[type=url]
+		
+		textarea
+
+// end .respond-form
+	
+// comment submit button
+#submit
+	
+// comment form title
+#comment-form-title 
+	
+// cancel comment reply link
+#cancel-comment-reply 
+	a
+			
+// logged in comments
+.comments-logged-in-as
+		
+// allowed tags 
+#allowed_tags 	
+	
+// no comments
+.nocomments 
+
+	
+//
+// SIDEBARS & ASIDES
+//
+
+.sidebar
+
+.widgettitle
+	border-bottom: 4px double #ccc
+	margin-bottom: 0.75em
+	font-weight:  300
+
+.widget
+	padding: 0 10px
+	margin: 2.2em 0
+		
+	ul
+		
+		li 
+			margin-bottom: 0.75em
+			
+			&:first-child
+				
+			&:last-child 
+				
+			a 
+				
+			// deep nesting 
+			ul
+				margin-top: 0.75em
+				padding-left: 1em
+			
+// end .widget 
+
+// links widget
+.widget_links 
+	ul
+		li
+			a 
+	
+// meta widget 
+.widget_links 
+	ul
+		li
+			a 
+	
+// pages widget 
+.widget_links 
+	ul
+		li
+			a 
+	
+// recent-posts widget 
+.widget_recent_entries 
+	ul
+		li
+			a 
+	
+// archives widget 
+.widget_archive 
+	ul
+		li
+			a 
+	select 
+	option 
+
+// tag-cloud widget 
+.widget_links
+	ul
+		li
+			&:before
+			&:after
+            
+			a
+            
+			&:before
+			&:after
+	
+// calendar widget
+.widget_calendar 
+#calendar_wrap 
+	th
+		td 
+#wp-calendar 
+	tr 
+	td
+	caption 
+	a 
+	#today
+	#prev
+		a 
+	#next
+		a 
+	
+// category widget
+.widget_categories 
+	ul
+	li 
+        
+	ul.children
+    
+	a 
+	select
+	#cat
+	.postform
+	option
+	.level-0
+	.level-1
+	.level-2
+	.level-3
+    
+	
+// recent-comments widget
+.recentcomments 
+#recentcomments 
+	li 
+		a 
+.widget_recent_comments 
+	
+// search widget 
+#searchform 
+.widget_search 
+.screen-reader-text 
+	
+// text widget 
+.textwidget 
+	p 
+.widget_text 	
+
+
+//
+// FOOTER STYLES
+//
+
+	
+//
+// you'll probably need to do quite a bit
+// of overriding here if you styled them for
+// mobile. Make sure to double check these!
+//
+
+.footer-links
+	
+	ul
+		
+		li
+		
+// end .footer-links
+			
+.attribution
+	

library/sass/base.sass

@@ -0,0 +1,673 @@
+//
+// Site Name: 
+// Author: 
+// 
+// Stylesheet: Base Mobile Stylesheet
+// 
+// Be light and don't over style since everything here will be
+// loaded by mobile devices. You want to keep it as minimal as
+// possible. This is called by itself and is the only one called 
+// for devices that are smaller than 480px so that the mobile 
+// version pulls ONLY the css it needs. This means it's screamingly 
+// fast on mobile connections.
+//
+// For more info, check out this great link on the topic:
+// http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
+//
+//
+
+//
+// IMPORTING STYLES
+//
+
+// import reset
+@import "normalize"
+// import mixins
+@import "mixins"
+
+//
+// GENERAL STYLES
+//
+
+body 
+	font-family: Georgia, serif
+	font-size: 14px
+	line-height: 1.5
+	color: #565656
+	background: #fefefe
+
+//
+// WORDPRESS BODY CLASSES
+// style a page via class
+//
+
+.rtl                       // for sites that are read right to left (i.e. hebrew) 
+.home                      // home page 
+.blog                      // blog template page 
+.archive                   // archive page 
+.date                      // date archive page 
+.date-paged-1              // replace the number to the corresponding page number 
+.search                    // search page 
+.search-results            // search result page 
+.search-no-results         // no results search page 
+.search-paged-1            // individual paged search (i.e. body.search-paged-3) 
+.error404                  // 404 page 
+.single                    // single post page 
+.postid-1                  // individual post page by id (i.e. body.postid-73) 
+.single-paged-1            // individual paged single (i.e. body.single-paged-3) 
+.attachment                // attatchment page 
+.attachmentid-1            // individual attatchment page (i.e. body.attachmentid-763)
+.attachment-mime-type      // style mime type pages 
+.author                    // author page */
+.author-nicename           // user nicename (i.e. body.author-samueladams) 
+.author-paged-1            // paged author archives (i.e. body.author-paged-4) for page 4
+.category                  // category page 
+.category-1                // individual category page (i.e. body.category-6) 
+.category-paged-1          // replace the number to the corresponding page number 
+.tag                       // tag page 
+.tag-slug                  // individual tag page (i.e. body.tag-news) 
+.tag-paged-1               // replace the number to the corresponding page number 
+.page-template             // custom page template page 
+.page-template-page-php    // individual page template (i.e. body.page-template-contact-php 
+.page-paged-1              // replace the number to the corresponding page number 
+.page-parent               // parent page template 
+.page-child                // child page template 
+.parent-pageid-1           // replace the number to the corresponding page number 
+.logged-in                 // if user is logged in 
+.paged                     // paged items like search results or archives 
+.paged-1                   // individual paged (i.e. body.paged-3) 
+
+//
+// LAYOUT & GRID STYLES
+//
+
+.wrap 
+	width: 90%
+	margin: 0 auto
+
+//
+// No Grid? Say Whaaaat?
+// There's really no need for all that
+// extraneous grid css since floating 
+// columns wouldn't really fit on such a 
+// small screen, so let's only bring it in
+// when we're ready for it.
+//
+
+//
+// LINK STYLES
+//
+
+a, a:visited
+	color: #f01d4f
+
+	// on hover
+	&:hover, &:focus
+		color: #f05e81
+	
+	// on click
+	&:active 
+	
+	// mobile tap color 
+	&:link
+		//
+		// this highlights links on iPhones/iPads. 
+		// so it basically works like the :hover selector
+		// for mobile devices.
+		// 
+		-webkit-tap-highlight-color : rgba(0,0,0,0)
+
+
+//
+// H1, H2, H3, H4, H5 STYLES
+//
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 
+	font-family: sans-serif
+	font-weight: 500
+	//
+	// if you're going to use webfonts, be sure to check your weights 
+	// http://css-tricks.com/watch-your-font-weight/
+	//
+	
+	// removing text decoration from all headline links
+	a
+		text-decoration: none
+
+
+h1, .h1 
+	font-size: 2.5em
+	line-height: 1.333em
+
+h2, .h2 
+	font-size: 1.75em 
+	line-height: 1.4em
+	margin-bottom: 0.375em
+
+h3, .h3
+	font-size: 1.125em
+
+h4, .h4 
+	font-size: 1.1em 
+	font-weight: 700
+
+h5, .h5
+	font-size: 0.846em
+	line-height: 2.09em
+	text-transform: uppercase 
+	letter-spacing: 2px
+
+
+//
+// HEADER SYTLES
+//
+
+.header
+
+#logo
+	
+//
+// NAVIGATION STYLES
+//
+
+
+
+//
+// POSTS & CONTENT STYLES
+//
+
+#content 
+	margin-top: 2.2em
+
+// want to style individual post classes? Booya!
+.hentry             // standard post class
+	border-bottom: 4px double #ccc
+.post-id            // post by id (i.e. post-3)
+.post               // general post style 
+.page               // general article on a page style 
+.attachment         // general style on an attatchment 
+.sticky             // sticky post style 
+.hentry             // hentry class 
+.category-slug      // style by category (i.e. category-videos)
+.tag-slug           // style by tag (i.e. tag-news) 
+	
+.article-header     // the header element inside each post
+.article-footer     // the footer element inside each post
+		
+.single-title,      // the title (h1) on each single post or page
+.page-title 
+		
+.single-title 		// the title (h1) on single posts
+.page-title         // the title (h1) on pages
+.archive-title      // the archive title on archive / category pages
+	
+		
+// post meta
+.meta
+	color: #999
+	
+	time
+			
+// post content
+.post-content
+			
+	p		
+			
+	ul, ol, table, dl
+			
+	ul, ol
+				
+		li
+					
+	ul
+		li
+			
+	ol
+			
+		li 
+			
+	blockquote
+				
+		&:before
+			
+	dl
+			
+	dt
+			
+	dd 
+		margin-left: 0
+		font-size: 0.9em
+		color: #787878
+		margin-bottom: 1.5em
+			
+	img 
+		margin: 0 0 1.5em 0 
+		max-width: 100% 
+		height:  auto
+			
+	//
+	// image alignment on a screen this size may be
+	// a bit difficult. It's set to start aligning 
+	// and floating images at the next breakpoint,
+	// but it's up to you. Feel free to change it up.
+	//
+	.alignleft, img.alignleft
+	.alignright, img.alignright
+	.aligncenter, img.aligncenter
+			
+	video, object
+		max-width: 100%
+			
+	pre, code 
+		background: #eee
+		border: 1px solid #cecece
+		padding: 10px
+			
+// end .post-content
+			
+.wp-caption
+	background: #eee
+	padding: 5px
+			
+	// images inside wp-caption
+	img
+		margin-bottom: 0
+		width: 100%
+			
+	p.wp-caption-text
+		font-size: 0.85em
+		margin: 4px 0 7px
+		text-align: center
+	
+// end .wp-caption 
+			
+// image gallery styles
+.gallery
+			
+	dl
+				
+		a
+			
+		img
+			
+	dt
+			
+	dd 
+		
+// end .gallery 
+		
+// gallery caption styles	
+.gallery-caption
+		
+.size-full
+.size-large 
+.size-medium 
+.size-thumbnail
+
+//
+// PAGE NAVI STYLES
+//
+
+.page-navigation, 
+.wp-prev-next
+	margin: 1.1em 0 2.2em
+	
+.bones_page_navi
+	
+	li 
+		float: left
+		margin-left: 10px
+			
+		a 
+			padding: 3px 6px 
+			display: block
+			text-decoration: none 
+			position: relative
+				
+			&:hover, 
+			&:focus 
+				color: #f01d4f
+				text-decoration: underline
+				
+// end .bones_page_navi
+		
+// current page link 
+li.bpn-current
+	padding: 3px 6px
+	border-bottom: 2px solid #f01d4f
+	position: relative
+		
+	a
+	// hovering on current page link
+		&:hover,
+		&:focus
+
+		
+// common styles for page-navi links
+li.bpn-prev-link, 
+li.bpn-next-link
+	font-weight: 700 
+		
+	a
+		padding: 0
+		
+// remove the bg on end links
+li.bpn-prev-link a:hover, 
+li.bpn-next-link a:hover, 
+li.bpn-first-page-link a:hover, 
+li.bpn-last-page-link a:hover
+	background: none
+
+		
+// previous link
+li.bpn-prev-link 
+	a 
+		&:hover,
+		&:focus 
+		
+// next page link		
+li.bpn-next-link 
+	a 
+		&:hover,
+		&:focus 
+				
+// first page link 
+li.bpn-first-page-link 
+	a 
+		&:hover,
+		&:focus 
+		
+// last page link
+li.bpn-last-page-link
+	a 
+		&:hover,
+		&:focus 
+	
+// fallback previous & next links
+.wp-prev-next
+		
+	ul
+		
+	.prev-link
+		float: left
+		
+	.next-link
+		float: right
+		
+// end .wp-prev-next 
+
+//
+// COMMENT STYLES
+//
+
+// h3 comment title
+#comments	
+	// number of comments span
+	span 
+	
+.comment-nav
+	
+	ul
+	
+		li
+
+// end .comment-nav
+		
+// comment styles
+.commentlist
+	
+	li
+		position: relative 
+		clear: both
+		overflow: hidden
+		list-style-type: none 
+		margin-bottom: 1.5em
+		padding: 0.7335em 10px
+		
+		&:last-child
+			margin-bottom: 0
+		
+		ul.children
+			margin: 0
+			
+			li
+	
+	li[class*=depth-]
+		margin-top: 1.1em
+			
+	li.depth-1
+		margin-left: 0 
+		margin-top: 0
+	
+	li:not(.depth-1)
+		margin-right: -10px 
+		margin-left: -10px
+		margin-top: 0
+		padding-bottom: 0
+	
+	li.depth-2
+	li.depth-3
+	li.depth-4
+	li.depth-5
+	
+	.odd
+		background: #eee
+	.even
+		background: #fefefe
+
+	// wordpress comment classes
+	.comment                         // regular comment class (present on all)
+	.alt                             // an alt comment
+	.parent                          // a parent comment
+	.children                        // a child comment
+	.pingback                        // a pingback
+	.bypostauthor                    // a comment by the post author
+	.comment-author                  // a comment by the author
+	.comment-author-admin            // a comment by the author who is admin
+	.thread-alt                      // a comment inside a thread alt
+	.thread-odd                      // an odd comment inside thread
+	.thread-even 	                 // an even comment inside thread
+			
+	/// comment vcard
+	.vcard
+		margin-left: 50px
+		
+		// comment author name
+		cite.fn
+			font-weight: 700
+			font-style: normal
+			
+			// author link url
+			a.url
+		
+		// comment date
+		time
+			float: right
+		
+			a
+				color: #999
+				text-decoration: none
+				
+				&:hover
+					text-decoration: underline
+		
+		// the comment gravatar
+		img.avatar
+			position: absolute
+			left: 10px
+			padding: 2px
+			border: 1px solid #cecece 
+			background: #fff
+			
+// end .commentlist
+	
+
+// comment meta
+.comment-meta
+		
+	a
+		
+// comment meta data
+.commentmetadata
+		
+	a
+	
+// comment content
+.comment_content
+	margin-left: 50px
+			
+	p
+		margin: 0.7335em 0 1.5em 
+		font-size: 1em
+		line-height: 1.5em
+		
+// end .comment_content
+	
+// comment reply link
+.comment-reply-link 
+	text-decoration: none 
+	float: right
+	background: #4598bb 
+	padding: 3px 5px 
+	color: $white
+	opacity: 0.65
+	margin-bottom: 10px 
+	font-weight: 700 
+	font-size: 0.9em
+	
+	&:hover,
+	&:focus
+		opacity: 1
+		
+// end .comment-reply-link 
+					
+
+//
+// COMMENT FORM STYLES
+//
+
+.respond-form 
+	margin: 1.5em 10px
+	padding-bottom: 2.2em
+	
+	form
+		margin: 0.75em 0
+		
+		li
+			list-style-type: none 
+			clear: both
+			margin-bottom: 0.7335em
+			
+			label,
+			small
+				display: none
+		
+		input[type=text], 
+		input[type=email], 
+		input[type=url], 
+		textarea 
+			padding: 3px 6px
+			background: #efefef 
+			border: 2px solid #cecece
+			line-height: 1.5em
+		
+			&:focus
+				background: $white 
+			
+			// form validation 
+			&:invalid 
+				outline: none 
+				border-color: #fbc2c4 
+				background-color: #f6e7eb
+				-webkit-box-shadow: none 
+				-moz-box-shadow: none  
+				-ms-box-shadow: none
+				box-shadow: none 
+		
+		input[type=text],
+		input[type=email], 
+		input[type=url]
+			max-width: 400px 
+			min-width: 250px 
+		
+		textarea
+			resize: none 
+			width: 97.3% 
+			height: 150px
+
+// end .respond-form
+	
+// comment submit button
+#submit
+	
+// comment form title
+#comment-form-title 
+	margin: 0 0 1.1em
+	
+// cancel comment reply link
+#cancel-comment-reply 
+	a
+			
+// logged in comments
+.comments-logged-in-as
+		
+// allowed tags 
+#allowed_tags 
+	margin: 1.5em 10px 0.7335em 0		
+	
+// no comments
+.nocomments 
+	margin: 0 20px 1.1em
+	
+	
+//
+// SIDEBARS & ASIDES
+//
+
+.sidebar
+
+.widgettitle
+
+.widget
+		
+	ul
+		
+		li 
+			
+			&:first-child
+				
+			&:last-child 
+				
+			a 
+				
+			// deep nesting 
+			ul
+			
+// end .widget 
+
+//
+// FOOTER STYLES
+//
+
+.footer
+	clear: both
+	
+//
+// if you checked out the link above:
+// http://www.alistapart.com/articles/organizing-mobile/
+// you'll want to style the footer nav
+// a bit more in-depth. Remember to keep
+// it simple because you'll have to 
+// override these styles for the desktop
+// view.
+//
+.footer-links
+	
+	ul
+		
+		li
+		
+// end .footer-links
+			
+.attribution
+	

library/sass/ie.sass

@@ -0,0 +1,53 @@
+//
+// Site Name: 
+// Author: 
+// 
+// Stylesheet: IE Stylesheet
+// 
+// So instead of using the respond.js file to add media query support
+// to IE, we're going to use LESS to create an easily readable css file.
+// Here, we import all the styles the standard stylesheet gets, only
+// without the media queries. No need to worry about editing anything!
+// 
+//
+
+//
+// Base.css contains the main mobile styles and is called in the 
+// header. This way mobile devices get ONLY the styles that apply
+// to them. No muss, no fuss.
+//
+// normalize.css and the mixins are also called within that base file 
+//
+// Now we call the files that contain all the CSS. This means
+// you don't have to maintain an IE stylesheet AND a standard 
+// responsive stylesheet.
+//
+
+@import "481up"
+@import "768up"
+@import "1030up"
+
+//
+// you can call the larger styles if you want, but there's really no need 
+//
+
+
+//
+// ADDITIONAL IE FIXES
+// These fixes are now ONLY seen by IE, so you don't have to worry
+// about using prefixes, although it's best practice. For more info
+// on using Modernizr classes, check out this link:
+// http://www.modernizr.com/docs/
+// 
+
+//
+// For example, you can use something like:
+//
+// 
+// .no-textshadow .class { ... }
+// 
+// You can also target specific versions by using something like:
+// 
+// .ie7 .class { ... }
+// 
+//

library/sass/login.sass

@@ -0,0 +1,75 @@
+/******************************************************************
+Site Name: 
+Author: 
+
+Stylesheet: Login Stylesheet
+
+This stylesheet is loaded (if admin.php is setup in your 
+functions file) on the login page. This way you can style 
+the login page. It won't affect any other page, admin or front-end.
+
+For more info, check out the codex:
+http://codex.wordpress.org/Creating_Admin_Themes
+
+******************************************************************/
+
+
+body.login {} 
+
+
+#login {} /* the form box */
+
+/*
+This is the Wordpress logo in the admin area.
+You'll have to load your own images and mess
+with the width and height.
+*/
+h1 a {
+	background: url(../images/login-logo.png) no-repeat top center; /* make sure to replace this! */
+	width: 326px;
+	height: 67px;
+	text-indent: -9999px;
+	overflow: hidden;
+	padding-bottom: 15px;
+	display: block;
+}
+
+form {
+	margin-left: 8px;
+	padding: 26px 24px 46px;
+	font-weight: normal;
+	background: white;
+	border: 1px solid #E5E5E5;
+	-webkit-border-radius: 3px;
+	 -khtml-border-radius: 3px;
+	   -moz-border-radius: 3px;
+			border-radius: 3px;
+	-webkit-box-shadow: none;
+	 -khtml-box-shadow: none;
+	   -moz-box-shadow: none;
+			box-shadow: none;
+}
+
+body form .input {
+	font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
+	font-weight: 200;
+	font-size: 24px;
+	width: 97%;
+	padding: 3px;
+	margin-top: 2px;
+	margin-right: 6px;
+	margin-bottom: 16px;
+	border: 1px solid #E5E5E5;
+	background: #FBFBFB;
+	outline: none;
+	-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
+	   -moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
+			box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
+}
+
+/*
+You'll have to override some of the default styles
+but since we're referencing the id, it should be easy.
+*/
+#wp-submit {} /* login button*/
+

library/sass/mixins.sass

@@ -0,0 +1,279 @@
+//
+// Site Name: 
+// Author: 
+// 
+// Stylesheet: Mixins & Constants Stylesheet
+// 
+// This is where you can take advantage of LESS' great features: 
+// Mixins & Constants. I won't go in-depth on how they work exactly,
+// there are a few articles below that will help do that. What I will
+// tell you is that this will help speed up simple changes like
+// changing a color or adding CSS3 techniques like box shadow and
+// border-radius.
+// 
+// A WORD OF WARNING: It's very easy to overdo it here. Be careful and
+// remember less is more. 
+//
+//
+
+//
+// CLEARFIXIN'
+//
+
+// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ 
+.clearfix 
+	&:before,
+	&:after
+		content: ""
+		display: table
+	
+	&:after
+		clear: both
+	
+	zoom: 1
+
+
+//
+// TOOLS
+//
+
+// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+.image-replacement
+	text-indent: 100%
+	white-space: nowrap
+	overflow: hidden
+
+
+//
+// COLORS
+// Need help w/ choosing your colors? Try this site out:
+// http://0to255.com/
+//
+
+$yellow:            #ebe16f
+$red:               #fbe3e4
+$green:             #e6efc2
+$blue:              #d5edf8
+
+$black:             #000
+$grayDark:          lighten($black, 25%)
+$gray:              lighten($black, 50%)
+$grayLight:         lighten($black, 75%)
+$grayLighter:       lighten($black, 90%)
+$white:             #fff
+
+// this is pulled from Bootstrap
+$baseColor:         $black                 // Set a base color
+$complement:        spin($baseColor, 180)  // Determine a complementary color
+$split1:            spin($baseColor, 158)  // Split complements
+$split2:            spin($baseColor, -158)
+$triad1:            spin($baseColor, 135)  // Triads colors
+$triad2:            spin($baseColor, -135)
+$tetra1:            spin($baseColor, 90)   // Tetra colors
+$tetra2:            spin($baseColor, -90)
+$analog1:           spin($baseColor, 22)   // Analogs colors
+$analog2:           spin($baseColor, -22)
+	
+//
+// TYPOGRAPHY
+//
+
+$sans-serif:        "Helvetica Neue", Helvetica, Arial, sans-serif
+$serif:             "Georgia", Cambria, Times New Roman, Times, serif
+
+
+// 	To embed your own fonts, use this syntax
+//	and place your fonts inside the 
+//	library/fonts folder. For more information
+//	on embedding fonts, go to:
+//	http://www.fontsquirrel.com/
+//	Be sure to remove the comment brackets.
+//
+
+//	@font-face
+//    	font-family: 'Font Name'
+//    	src: url('../fonts/font-name.eot')
+//    	src: url('../fonts/font-name.eot?#iefix') format('embedded-opentype'),
+//            url('../fonts/font-name.woff') format('woff'),
+//             url('../fonts/font-name.ttf') format('truetype'),
+//             url('../fonts/font-name.svg#font-name') format('svg')
+//   	font-weight: normal
+//    	font-style: normal
+//
+//
+
+// 
+// use the best ampersand 
+// http://simplebits.com/notebook/2008/08/14/ampersands-2/
+
+span.amp 
+	font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif
+	font-style: italic
+
+// text alignment 
+.text-left
+	text-align: left
+.text-center
+	text-align: center
+.text-right
+	text-align: right
+
+// alerts & notices 
+.help, .info, .error, .success 
+	margin: 10px
+	padding: 5px 18px 
+	border: 1px solid
+
+.help
+	border-color: darken($yellow, 5%) 
+	background: $yellow
+
+.info
+	border-color: darken($blue, 5%) 
+	background: $blue
+
+.error 
+	border-color: darken($red, 5%) 
+	background: $red
+
+.success  
+	border-color: darken($green, 5%) 
+	background: $green
+
+
+//
+// BORDER RADIUS
+//
+
+// @include borderRadius(4px);
+@mixin borderRadius($radius: 4px)
+	-webkit-border-radius: $radius
+	-moz-border-radius: $radius
+	-ms-border-radius: $radius
+	-o-border-radius: $radius
+	border-radius: $radius
+
+// @include borderTopRadius(4px);
+@mixin borderTopRadius($radius: 4px)
+	-webkit-border-top-right-radius: $radius
+	-webkit-border-top-left-radius: $radius
+	-moz-border-radius-topright: $radius
+	-moz-border-radius-topleft: $radius
+	border-top-right-radius: $radius
+	border-top-left-radius: $radius
+
+// @include borderRightRadius(4px); 
+@mixin borderRightRadius($radius: 4px) 
+	-webkit-border-top-right-radius: $radius
+	-webkit-border-bottom-right-radius: $radius
+	-moz-border-radius-topright: $radius
+	-moz-border-radius-bottomright: $radius
+	border-top-right-radius: $radius
+	border-bottom-right-radius: $radius
+
+// @include borderBottomRadius(4px);
+@mixin borderBottomRadius($radius: 4px)
+	-webkit-border-bottom-right-radius: $radius
+	-webkit-border-bottom-left-radius: $radius
+	-moz-border-radius-bottomright: $radius
+	-moz-border-radius-bottomleft: $radius
+	border-bottom-right-radius: $radius
+	border-bottom-left-radius: $radius
+
+// @include borderLeftRadius(4px);
+@mixin borderLeftRadius($radius: 4px)
+	-webkit-border-top-left-radius: $radius
+	-webkit-border-bottom-left-radius: $radius
+	-moz-border-radius-topleft: $radius
+	-moz-border-radius-bottomleft: $radius
+	border-top-left-radius: $radius
+	border-bottom-left-radius: $radius
+
+//
+// BOX SHADOWS
+//
+
+// @include box-shadow(5px, 5px, 10px, #000);
+@mixin box-shadow ($shadow-1, $shadow-2: false, $shadow-3: false, $shadow-4: false, $shadow-5: false, $shadow-6: false, $shadow-7: false, $shadow-8: false, $shadow-9: false)
+	$full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9)
+	-webkit-box-shadow: $full
+	-moz-box-shadow: $full
+	-ms-box-shadow: $full
+	-o-box-shadow: $full
+	box-shadow: $full
+
+
+//
+// CSS3 GRADIENTS
+// Be careful with these since they can 
+// really slow down your CSS. Don't overdue it.
+//
+
+// @include css-gradient(#dfdfdf,#f8f8f8); 
+@mixin css-gradient($from: #dfdfdf, $to: #f8f8f8)
+	background-color: $to
+	background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to))
+	background-image: -webkit-linear-gradient(top, $from, $to)
+	background-image: -moz-linear-gradient(top, $from, $to)
+	background-image: -o-linear-gradient(top, $from, $to)
+	background-image: -ms-linear-gradient(top, $from, $to)
+	background-image: linear-gradient(top, $from, $to)
+
+
+//
+// BOX SIZING
+//
+
+// @include boxSizing(border-box);
+@mixin boxSizing($type: border-box)
+	-webkit-box-sizing: $type
+	-moz-box-sizing: $type
+	-ms-box-sizing: $type
+	-o-box-sizing: $type 
+	box-sizing: $type 
+
+
+//
+// BOX SHADOW
+//
+
+// @include boxShadow(0 0 4px #444); 
+@mixin boxShadow($x: 0, $y: 0, $radius: 4px, $spread: 0, $color: rgba(0,0,0,0.5))
+	-webkit-box-shadow: $x $y $radius $spread $color
+	-moz-box-shadow: $x $y $radius $spread $color
+	-ms-box-shadow: $x $y $radius $spread $color
+	-o-box-shadow: $x $y $radius $spread $color 
+	box-shadow: $x $y $radius $spread $color 
+
+
+//
+// BUTTONS
+//
+
+.button, .button:visited
+	border: 1px solid darken($blue, 13%)
+	border-top-color: darken($blue, 7%)
+	border-left-color: darken($blue, 7%)
+	padding: 4px 12px
+	color: $white
+	display: inline-block
+	font-size: 11px
+	font-weight: bold
+	text-decoration: none
+	text-shadow: 0 1px rgba(0,0,0, .75)
+	cursor: pointer
+	margin-bottom: 20px
+	line-height: 21px
+	@include borderRadius(4px)
+	@include css-gradient($blue,darken($blue, 5%))
+
+	&:hover, &:focus
+		color: $white
+		border: 1px solid darken($blue, 13%)
+		border-top-color: darken($blue, 20%)
+		border-left-color: darken($blue, 20%)
+		@include css-gradient(darken($blue, 5%),darken($blue, 10%))
+	
+	&:active
+		@include css-gradient(darken($blue, 5%),$blue)
+		

library/sass/normalize.sass

@@ -0,0 +1,396 @@
+// normalize.css 2011-11-04T15:38 UTC - http://github.com/necolas/normalize.css 
+
+//
+// HTML5 display definitions
+//
+
+//
+// Corrects block display not defined in IE6/7/8/9 & FF3
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section
+	display: block
+
+
+// Corrects inline-block display not defined in IE6/7/8/9 & FF3
+
+audio,
+canvas,
+video 
+	display: inline-block
+	*display: inline
+	*zoom: 1
+
+
+
+// Prevents modern browsers from displaying 'audio' without controls
+
+audio:not([controls])
+	display: none
+
+// Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
+// Known issue: no IE6 support
+
+[hidden]
+	display: none
+
+
+//
+// Base
+//
+
+//
+// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+//    http://clagnut.com/blog/348/#c790
+// 2. Keeps page centred in all browsers regardless of content height
+// 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
+//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+//
+
+html
+	font-size: 100%                // 1
+	overflow-y: scroll             // 2
+	-webkit-text-size-adjust: 100% // 3
+	-ms-text-size-adjust: 100%     // 3 
+
+// Addresses margins handled incorrectly in IE6/7
+
+body
+	margin: 0
+
+// Addresses font-family inconsistency between 'textarea' and other form elements.
+
+body,
+button,
+input,
+select,
+textarea
+	font-family: sans-serif
+
+
+//
+// Links
+//
+
+// Addresses outline displayed oddly in Chrome
+
+a:focus
+	outline: thin dotted
+
+// Improves readability when focused and also mouse hovered in all browsers
+// people.opera.com/patrickl/experiments/keyboard/test
+
+a:hover,
+a:active
+	outline: 0
+
+
+//
+// Typography
+//
+
+
+// Neutralise smaller font-size in 'section' and 'article' in FF4+, Chrome, S5
+
+h1
+	font-size: 2em
+
+// Addresses styling not present in IE7/8/9, S5, Chrome
+
+abbr[title]
+	border-bottom: 1px dotted
+
+// Addresses style set to 'bolder' in FF3+, S4/5, Chrome
+
+b, 
+strong 
+	font-weight: bold
+
+blockquote
+	margin: 1em 40px
+
+// Addresses styling not present in S5, Chrome
+
+dfn
+	font-style: italic
+
+
+// Addresses styling not present in IE6/7/8/9
+
+mark
+	background: #ff0
+	color: #000
+
+// Corrects font family set oddly in IE6, S4/5, Chrome
+// en.wikipedia.org/wiki/User:Davidgothberg/Test59
+
+pre,
+code,
+kbd,
+samp
+	font-family: monospace, serif
+	_font-family: 'courier new', monospace
+	font-size: 1em
+
+// Improves readability of pre-formatted text in all browsers
+
+pre
+	white-space: pre
+	white-space: pre-wrap
+	word-wrap: break-word
+
+//
+// 1. Addresses CSS quotes not supported in IE6/7
+// 2. Addresses quote property not supported in S4
+//
+
+// 1
+
+q
+	quotes: none
+
+// 2
+
+q:before,
+q:after
+	content: ''
+	content: none
+
+small
+	font-size: 75%
+
+//
+// Prevents sub and sup affecting line-height in all browsers
+// gist.github.com/413930
+//
+
+sub,
+sup
+	font-size: 75%
+	line-height: 0
+	position: relative
+	vertical-align: baseline
+
+sup
+	top: -0.5em
+
+sub
+	bottom: -0.25em
+
+
+//
+// Lists
+//
+
+ul,
+ol
+	margin-left: 0
+	padding: 0 0 0 40px
+
+dd
+	margin: 0 0 0 40px
+
+nav ul,
+nav ol
+	list-style: none
+	list-style-image: none
+
+
+// 
+// Embedded content
+//
+
+//
+// 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
+// 2. Improves image quality when scaled in IE7
+//    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+//
+
+img
+	border: 0                        // 1
+	-ms-interpolation-mode: bicubic  // 2
+
+// Corrects overflow displayed oddly in IE9 
+
+svg:not(:root)
+	overflow: hidden
+
+
+//
+// Figures
+//
+
+// Addresses margin not present in IE6/7/8/9, S5, O11
+
+figure
+	margin: 0
+
+
+//
+// Forms
+//
+
+// Corrects margin displayed oddly in IE6/7
+
+form
+	margin: 0
+
+// Define consistent border, margin, and padding
+
+fieldset
+	border: 1px solid #c0c0c0
+	margin: 0 2px
+	padding: 0.35em 0.625em 0.75em
+
+//
+// 1. Corrects color not being inherited in IE6/7/8/9
+// 2. Corrects alignment displayed oddly in IE6/7
+//
+
+legend
+	border: 0           // 1 
+	*margin-left: -7px  // 2 
+
+//
+// 1. Corrects font size not being inherited in all browsers
+// 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
+// 3. Improves appearance and consistency in all browsers
+//
+
+button,
+input,
+select,
+textarea
+	font-size: 100%          // 1
+	margin: 0                // 2
+	vertical-align: baseline // 3
+	*vertical-align: middle  // 3 
+
+//
+// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
+//
+
+button,
+input
+	line-height: normal   // 1
+
+//
+// 1. Improves usability and consistency of cursor style between image-type 'input' and others
+// 2. Corrects inability to style clickable 'input' types in iOS
+// 3. Removes inner spacing in IE7 without affecting normal text inputs
+//    Known issue: inner spacing remains in IE6
+//
+
+button,
+input[type="button"], 
+input[type="reset"], 
+input[type="submit"]
+	cursor: pointer            // 1 
+	-webkit-appearance: button // 2
+	*overflow: visible         // 3
+
+//
+// 1. Addresses box sizing set to content-box in IE8/9
+// 2. Removes excess padding in IE8/9
+//
+
+input[type="checkbox"],
+input[type="radio"] 
+	box-sizing: border-box   // 1
+	padding: 0               // 2 
+
+//
+// 1. Addresses appearance set to searchfield in S5, Chrome
+// 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
+//
+
+input[type="search"]
+	-webkit-appearance: textfield     // 1
+	-moz-box-sizing: content-box
+	-webkit-box-sizing: content-box   // 2
+	box-sizing: content-box
+
+//
+// Removes inner padding that is displayed in S5, Chrome on OS X
+//
+
+input[type="search"]::-webkit-search-decoration
+	-webkit-appearance: none
+
+//
+// Removes inner padding and border in FF3+
+// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner
+	border: 0
+	padding: 0
+
+//
+// 1. Removes default vertical scrollbar in IE6/7/8/9
+// 2. Improves readability and alignment in all browsers
+//
+
+textarea
+	overflow: auto        // 1
+	vertical-align: top   // 2
+
+//
+// Tables
+//
+
+// Remove most spacing between table cells
+
+table 
+	border-collapse: collapse
+	border-spacing: 0
+
+//
+// CUSTOMIZED RESET VALUES
+// I added these extra styles as a more personalized reset. Feel free
+// to remove them if you like or add your own. If you want to update
+// the normalize styles, make sure to edit from this point up.
+//
+
+ul, ol
+	padding: 0
+	list-style-type: none
+
+dd
+	margin: 0
+
+.sidebar ul,
+.sidebar ol,
+.commentlist 
+	list-style: none
+
+// proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens) 
+p 
+	-webkit-hyphens: auto 
+	-moz-hyphens: auto 
+	-epub-hyphens: auto 
+	hyphens: auto
+
+b, 
+strong, 
+.strong
+	font-weight: bold
+
+dfn, 
+em, 
+.em 
+	font-style: italic
+
+small, .small
+	font-size: 75%
+

library/sass/style.sass

@@ -0,0 +1,147 @@
+//
+// Site Name: 
+// Author: 
+// 
+// Stylesheet: Main Stylesheet
+// 
+// Here's where the magic happens. Here, you'll see we are calling in
+// the separate functions for each media query. The base mobile 
+// stylesheet is called in the header, so here we're working up from 
+// there. To edit the css, just find the corresponding LESS file.
+//
+
+//
+// Base.css contains the main mobile styles and is called in the 
+// header. This way mobile devices get ONLY the styles that apply
+// to them. No muss, no fuss.
+//
+// normalize.css is also called within that base file.
+//
+// we'll also need to call the mixins here so they apply to the
+// rest of the stylesheets.
+//
+
+@import "mixins"
+
+//
+// let's now call the FUNCTIONS for these different stylesets. This
+// doesn't load the CSS, the CSS is loaded inside the media queries.
+//
+
+//
+// SMALL SCREENS
+// This is just a bit larger than the iPhone 3/4/4s screen.
+// You can expand upon the mobile styles here, but 
+// remember to keep it simple.
+//
+@media only screen and (min-width: 481px)
+	
+	// styles in 481up.sass
+	@import "481up"
+
+// end of media query 
+
+//
+// TABLET & SMALLER LAPTOPS
+// This is where the iPad styles kick in. You can start 
+// using a grid system here and begin laying things
+// out like a traditional site.
+//
+@media only screen and (min-width: 768px)
+	
+	// styles in 768up.sass 
+	@import "768up"
+
+// end of media query 
+
+//
+// DESKTOP 
+// This is the average viewing window. So Desktops, Laptops, and 
+// in general anyone not viewing on a mobile device. Here's where
+// you can add resource intensive styles.
+//
+@media only screen and (min-width: 1030px)
+	
+	// styles in 1030up.sass 
+	@import "1030up"
+
+// end of media query
+
+//
+// LARGE VIEWING SIZE 
+// This is for the larger monitors and possibly full 
+// screen viewers. 
+//
+@media only screen and (min-width: 1240px)
+	
+	// styles in 1240up.sass
+	@import "1240up"
+
+// end of media query
+
+//
+// PRINT STYLESHEET
+// Feel free to customize this. Remember to add 
+// things that won't make sense to print at the bottom. 
+// Things like nav, ads, and forms should be set to 
+// display none.
+//
+@media print 
+	* 
+		background: transparent !important
+		color: black !important
+		text-shadow: none !important
+		filter: none !important
+		-ms-filter: none !important
+	
+	a, a:visited
+		color: #444 !important
+		text-decoration: underline
+		
+		// show links on printed pages
+		&:after
+			content: " (" attr(href) ")"
+		
+		// show title too
+		abbr[title]:after
+			content: " (" attr(title) ")"
+	
+	.ir a:after, 
+	a[href^="javascript:"]:after, 
+	a[href^="#"]:after 
+		content: "" 
+	
+	pre, 
+	blockquote 
+		border: 1px solid #999
+		page-break-inside: avoid
+	
+	thead
+		display: table-header-group
+	
+	tr, img
+		page-break-inside: avoid
+		
+	img 
+		max-width: 100% !important	
+    
+	@page 
+		margin: 0.5cm
+    
+	p, 
+	h2, 
+	h3
+		orphans: 3 
+		widows: 3
+    
+	h2, 
+	h3  
+		page-break-after: avoid
+    
+	// hide content people who print don't need to see
+	.sidebar,
+	.page-navigation, 
+	.wp-prev-next,
+	.respond-form,
+	nav
+		display: none