updated .scss files to reflect new markup

library/scss/1030up.scss

@@ -0,0 +1,14 @@
+/******************************************************************
+Site Name: 
+Author: 
+
+Stylesheet: Just larger than iPad
+
+This is the desktop size. It's larger than an iPad so it will only
+be seen on the Desktop. 
+
+******************************************************************/
+
+.wrap {
+	max-width: 1140px;
+}

library/scss/1240up.scss

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

library/scss/481up.scss

@@ -0,0 +1,443 @@
+/******************************************************************
+Site Name: 
+Author: 
+
+Stylesheet: 481px and Up Stylesheet
+
+This stylesheet is loaded for larger 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
+*********************/
+
+.nav {}
+
+	/* .menu is clearfixed inside mixins.less */
+	.menu {
+		ul {
+			li {
+				a {
+					
+					/*
+					you can use hover styles here even though this size
+					has the possibility of bieng a mobile device.
+					*/
+					&:hover, &:focus {
+					
+					}
+				}
+				
+				&:first-child {}
+				&:last-child {}
+				
+				/*
+				plan your menus and drop-downs wisely.
+				*/
+				ul.sub-menu,
+				ul.children {
+					li {
+						a {
+							&:hover,
+							&:focus {}
+							&:link {}
+						}
+						&:first-child {}
+						&:last-child {}
+					}
+				}
+			} /* end .menu ul li */
+			
+			/* highlight current page */
+			li.current-menu-item, 
+			li.current_page_item,
+			li.current-page-ancestor {
+				a {}
+			}  /* end current highlighters */
+		} /* end .menu ul */
+	} /* end .menu */
+
+/*********************
+POSTS & CONTENT STYLES
+*********************/
+
+#content {}
+	
+		.hentry {
+			header {}
+			footer {}
+		} /* end .hentry */
+		
+		.single-title, 
+		.page-title {}
+		.single-title {}
+		.page-title {}
+		.archive_title { }
+	
+		/* want to style individual post classes? Booya! */
+		.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) */
+	
+		/* 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 {}
+			
+			/* at this larger size, we can start to align images */
+			.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 {}
+			}
+		}
+		
+		/* current page link */	
+		li.bpn-current { 
+			a {
+				/* hovering on current page link */
+				&:hover,
+				&:focus {}
+			}
+		} /* end .bones_page_navi .bpn-current */
+		
+		/* 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 {}
+		} 
+	} /* end .bones_page_navi */
+	
+	/* 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 {}
+	}
+}
+		
+.commentlist {	
+	li { 
+		&:last-child {}
+		
+		ul.children {
+			li {}
+			
+			/* variations */
+			.comment {}
+			.alt {}
+			.odd {}
+			.even {}
+			.depth-1 {} /* change number for different depth */
+			.byuser {}
+			.bypostauthor {}
+			.comment-author-admin {}
+		
+		} /* end .commentlist li ul.children */
+	}
+	
+	li[class*=depth-] {}
+	li.depth-1 {}
+	
+	li:not(.depth-1) {}
+	
+	li.depth-2 {}
+	li.depth-3 {}
+	li.depth-4 {}
+	li.depth-5 {}
+	
+	/* general comment classes */
+	.alt {}
+	.odd {}
+	.even {}
+	.parent {}
+	.comment {}
+	.children {}
+	.pingback {}
+	.bypostauthor {}
+	.comment-author {}
+	.comment-author-admin {}
+	.thread-alt {}
+	.thread-odd {}
+	.thread-even {}	
+			
+	/* vcard */
+	.vcard { 
+		
+		cite.fn {
+			a.url {}
+		}
+		
+		time {
+			a {
+				&:hover {}
+			}
+		}
+		
+		img.photo {}
+		img.avatar {}
+	} /* end .commentlist .vcard */
+
+	/* comment meta */
+	.comment-meta {
+		a {}
+	} 
+	.commentmetadata {
+		a {}
+	}
+	
+	/* comment content */
+	.comment_content {
+		p {}
+	} /* end .commentlist .comment_content */
+	
+	/* comment reply link */
+	.comment-reply-link {
+		&:hover,
+		&:focus {}
+	} /* end .commentlist .comment-reply-link */
+		
+} /* end .commentlist */
+
+/******************************************************************
+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 {}
+	}
+}
+	
+	/* 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 {}
+			}
+		}
+	}
+
+/*********************
+FOOTER STYLES
+*********************/
+
+.footer {}
+	
+	/*
+	check your menus here. do they look good?
+	do they need tweaking?
+	*/
+	.footer-links {
+		ul {
+			li {}
+		}
+	} /* end .footer-links */
+			
+	.attribution {}
+	

library/scss/768up.scss

@@ -0,0 +1,666 @@
+/******************************************************************
+Site Name: 
+Author: 
+
+Stylesheet: Tablet & Small Desktop Stylesheet
+
+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 {}
+.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 {}
+	.page-child {}
+	.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: 1140px;
+}
+	/*
+		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%;  }       /* 4.85%;  } /* grid_1  */
+	.twocol    { width: 14.364640883%; }       /* 13.45%; } /* grid_2  */
+	.threecol  { width: 22.928176794%; }       /* 22.05%; } /* grid_3  */
+	.fourcol   { width: 31.491712705%; }       /* 30.75%; } /* grid_4  */
+	.fivecol   { width: 40.055248616%; }       /* 39.45%; } /* grid_5  */
+	.sixcol    { width: 48.618784527%; }       /* 48%;    } /* grid_6  */
+	.sevencol  { width: 57.182320438000005%; } /* 56.75%; } /* grid_7  */
+	.eightcol  { width: 65.74585634900001%; }  /* 65.4%;  } /* grid_8  */
+	.ninecol   { width: 74.30939226%; }        /* 74.05%; } /* grid_9  */
+	.tencol    { width: 82.87292817100001%; }  /* 82.7%;  } /* grid_10 */
+	.elevencol { width: 91.436464082%; }       /* 91.35%; } /* grid_11 */
+	.twelvecol { width: 99.999999993%; }       /* 100%;   } /* 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
+*********************/
+
+.nav {}
+
+	/* .menu is clearfixed inside mixins.less */
+	.menu {
+		ul {
+			background: #eee; 
+			
+			li {
+				float: left;
+				position: relative;
+				
+				a {
+					border-bottom: 0;
+					
+					/*
+					you can use hover styles here even though this size
+					has the possibility of bieng a mobile device.
+					*/
+					&:hover, &:focus {
+						background-color: #dedede;
+					
+					}
+				}
+				
+				&:first-child {}
+				&:last-child {}
+				
+				/*
+				plan your menus and drop-downs wisely.
+				*/
+				ul.sub-menu,
+				ul.children {
+					width: 200px;
+					border: 1px solid #ccc;
+					border-top: 0;
+					position: absolute;
+					display: none;
+					z-index: 8999;
+						
+					li {
+						a {
+							padding-left: 10px;
+							border-right: 0;
+							display: block;
+							width: 180px;
+							border-bottom: 1px solid #ccc;
+							
+							&:hover,
+							&:focus {}
+							&:link {}
+						}
+						&:first-child {}
+						&:last-child {
+							a {
+								border-bottom: 0;
+							}
+						}
+						
+						/*
+						if you need to go deeper, go nuts
+						just remember deeper menus suck
+						for usability. k, bai.
+						*/
+						ul {}
+					}
+					
+					/* highlight sub-menu current page */
+					li.current-menu-item, 
+					li.current_page_item,
+					li.current-page-ancestor {
+						a {}
+					}
+				}
+				
+				/* showing sub-menus */
+				&:hover ul {
+					top: auto;
+					display: block;
+				}
+				
+			} /* end .menu ul li */
+			
+			/* highlight current page */
+			li.current-menu-item, 
+			li.current_page_item,
+			li.current-page-ancestor {
+				a {}
+			}  /* end current highlighters */
+		} /* end .menu ul */
+	} /* end .menu */
+
+/*********************
+POSTS & CONTENT STYLES
+*********************/
+
+#content {}
+	
+		.hentry {
+			header {}
+			footer {}
+		} /* end .hentry */
+		
+		.single-title, 
+		.page-title {}
+		.single-title {}
+		.page-title {}
+		.archive_title { }
+	
+		/* want to style individual post classes? Booya! */
+		.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) */
+	
+		/* 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 {}
+			
+			/* at this larger size, we can start to align images */
+			.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 {}
+			}
+		}
+		
+		/* current page link */	
+		li.bpn-current { 
+			a {
+				/* hovering on current page link */
+				&:hover,
+				&:focus {}
+			}
+		} /* end .bones_page_navi .bpn-current */
+		
+		/* 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 {}
+		} 
+	} /* end .bones_page_navi */
+	
+	/* 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 {}
+	}
+}
+		
+.commentlist {	
+	li { 
+		&:last-child {}
+		
+		ul.children {
+			li {}
+			
+			/* variations */
+			.comment {}
+			.alt {}
+			.odd {}
+			.even {}
+			.depth-1 {} /* change number for different depth */
+			.byuser {}
+			.bypostauthor {}
+			.comment-author-admin {}
+		
+		} /* end .commentlist li ul.children */
+	}
+	
+	li[class*=depth-] {}
+	li.depth-1 {}
+	
+	li:not(.depth-1) {}
+	
+	li.depth-2 {}
+	li.depth-3 {}
+	li.depth-4 {}
+	li.depth-5 {}
+	
+	/* general comment classes */
+	.alt {}
+	.odd {}
+	.even {}
+	.parent {}
+	.comment {}
+	.children {}
+	.pingback {}
+	.bypostauthor {}
+	.comment-author {}
+	.comment-author-admin {}
+	.thread-alt {}
+	.thread-odd {}
+	.thread-even {}	
+			
+	/* vcard */
+	.vcard { 
+		
+		cite.fn {
+			a.url {}
+		}
+		
+		time {
+			a {
+				&:hover {}
+			}
+		}
+		
+		img.photo {}
+		img.avatar {}
+	} /* end .commentlist .vcard */
+
+	/* comment meta */
+	.comment-meta {
+		a {}
+	} 
+	.commentmetadata {
+		a {}
+	}
+	
+	/* comment content */
+	.comment_content {
+		p {}
+	} /* end .commentlist .comment_content */
+	
+	/* comment reply link */
+	.comment-reply-link {
+		&:hover,
+		&:focus {}
+	} /* end .commentlist .comment-reply-link */
+		
+} /* end .commentlist */
+
+
+/******************************************************************
+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 {}
+	}
+}
+	
+	/* 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 {
+	margin-top: 2.2em;
+}
+
+	.widgettitle {
+		border-bottom: 2px solid #444;
+		margin-bottom: 0.75em;
+	}
+
+	.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;
+				}
+			}
+		}
+	}
+
+
+	/* links widget */
+	.widget_links {}
+	.widget_links ul {}
+	.widget_links ul li {}
+	.widget_links ul li a {}
+	
+	/* meta widget */
+	.widget_meta {}
+	.widget_meta ul {}
+	.widget_meta ul li {}
+	.widget_meta ul li a {}
+	
+	/* pages widget */
+	.widget_pages {}
+	.widget_pages ul {}
+	.widget_pages ul li {}
+	.widget_pages ul li a {}
+	
+	/* recent-posts widget */
+	.widget_recent_entries {}
+	.widget_recent_entries ul {}
+	.widget_recent_entries ul li {}
+	.widget_recent_entries ul li a {}
+	
+	/* archives widget */
+	.widget_archive {}
+	.widget_archive ul {}
+	.widget_archive ul li {} 
+	.widget_archive ul li a {}
+	.widget_archive select {}
+	.widget_archive option {}
+	
+	/* tag-cloud widget */
+	.widget_links {}
+	.widget_links li:after {}
+	.widget_links li:before {}
+	.widget_tag_cloud {}
+	.widget_tag_cloud a {}
+	.widget_tag_cloud a:after {}
+	.widget_tag_cloud a:before {}
+	
+	/* calendar widget */
+	.widget_calendar {}
+	#calendar_wrap {}
+	#calendar_wrap th {}
+	#calendar_wrap td {}
+	#wp-calendar tr td {}
+	#wp-calendar caption {}
+	#wp-calendar a {}
+	#wp-calendar #today {}
+	#wp-calendar #prev {}
+	#wp-calendar #next {}
+	#wp-calendar #next a {}
+	#wp-calendar #prev a {}
+	
+	/* category widget */
+	.widget_categories {}
+	.widget_categories ul {}
+	.widget_categories ul li {} 
+	.widget_categories ul ul.children {}
+	.widget_categories a {}
+	.widget_categories select{}
+	.widget_categories select#cat {}
+	.widget_categories select.postform {}
+	.widget_categories option {}
+	.widget_categories .level-0 {}
+	.widget_categories .level-1 {}
+	.widget_categories .level-2 {}
+	.widget_categories .level-3 {}
+	
+	/* recent-comments widget */
+	.recentcomments {}
+	#recentcomments {}
+	#recentcomments li {}
+	#recentcomments li a {}
+	.widget_recent_comments {}
+	
+	/* search widget */
+	#searchform {}
+	.widget_search {}
+	.screen-reader-text {}
+	
+	/* text widget */
+	.textwidget {}
+	.widget_text {}
+	.textwidget p {}
+	
+
+/*********************
+FOOTER STYLES
+*********************/
+
+.footer {}
+	
+	/*
+	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 {
+				a {
+					&:hover {}
+				}
+				/* 
+				be careful with the depth of your menus.
+				it's very rare to have multi-depth menus in
+				the footer.
+				*/
+				ul {}
+			}
+		}
+	} /* end .footer-links */
+			
+	.attribution {}

library/scss/base.scss

@@ -0,0 +1,853 @@
+/******************************************************************
+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;
+}
+
+/********************
+WORDPRESS BODY CLASSES
+style a page via class
+********************/
+
+.rtl {}
+.home {} /* home page */
+.blog {} 
+.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 {}
+	.page-child {}
+	.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
+*********************/
+
+.nav {}
+
+	/* .menu is clearfixed inside mixins.less */
+	.menu {
+		margin: 1.1em 0; 
+	
+		ul {
+			
+			li {
+			
+				a {
+					display: block;
+					text-decoration: none;
+					padding: 10px 10px;
+					background-color: #eee;
+					border-bottom: 1px solid #ccc; 
+					
+					/*
+					remember this is for mobile ONLY, so there's no need
+					to even declare hover styles here, you can do it in
+					the style.less file where it's relevant. We want to 
+					keep this file as small as possible!
+					*/
+					&:hover, &:focus {
+					
+					}
+				}
+				
+				&:first-child {}
+				
+				&:last-child {}
+				
+				/*
+				so you really have to rethink your dropdowns for mobile.
+				you don't want to have it expand too much because the
+				screen is so small. How you manage your menu should
+				depend on the project. Here's some great info on it:
+				http://www.alistapart.com/articles/organizing-mobile/
+				*/
+				ul.sub-menu,
+				ul.children {
+					
+					li {
+						
+						a {
+							padding-left: 30px;
+							
+							&:hover,
+							&:focus {}
+							
+							&:link {}
+							
+						}
+						
+						&:first-child {}
+						
+						&:last-child {}
+						
+					}
+					
+				}
+				
+			} /* end .menu ul li */
+			
+			/* highlight current page */
+			li.current-menu-item, 
+			li.current_page_item,
+			li.current-page-ancestor {
+				
+				a {}
+				
+			}  /* end current highlighters */
+			
+		} /* end .menu ul */
+		
+	} /* end .menu */
+
+
+/*********************
+POSTS & CONTENT STYLES
+*********************/
+
+#content { 
+	margin-top: 2.2em; 
+}
+	
+		.hentry {
+		
+			header {}
+			
+			footer {}
+		
+		} /* end .hentry */
+		
+		.single-title, 
+		.page-title {}
+		
+		.single-title {}
+		
+		.page-title {}
+		
+		.archive_title { }
+	
+		/* want to style individual post classes? Booya! */
+		.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) */
+	
+		/* 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%; 
+			}
+			
+			/*
+			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; 
+				}
+			}
+		
+		}
+		
+		/* current page link */	
+		li.bpn-current { 
+			padding: 3px 6px; 
+			border-bottom: 2px solid #f01d4f; 
+			position: relative; 
+		
+			a {
+				/* hovering on current page link */
+				&:hover,
+				&:focus {}
+			
+			}
+			
+		} /* end .bones_page_navi .bpn-current */
+		
+		/* 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 {}
+			}
+		} 
+		
+	} /* end .bones_page_navi */
+	
+	/* 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 {}
+	
+	}
+}
+
+		
+.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 {}
+			
+			/* variations */
+			.comment {}
+			.alt {}
+			.odd {}
+			.even {}
+			.depth-1 {} /* change number for different depth */
+			.byuser {}
+			.bypostauthor {}
+			.comment-author-admin {}
+		
+		} /* end .commentlist li ul.children */
+	}
+	
+	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 {}
+	
+	/* general comment classes */
+	.alt {}
+	.odd { 
+		background: #eee; 
+	}
+	.even { 
+		background: #fefefe; 
+	}
+	.parent {}
+	.comment {}
+	.children {}
+	.pingback {}
+	.bypostauthor {}
+	.comment-author {}
+	.comment-author-admin {}
+	.thread-alt {}
+	.thread-odd {}
+	.thread-even {}	
+			
+	/* vcard */
+	.vcard { 
+		margin-left: 50px; 
+		
+		cite.fn {
+			font-weight: 700; 
+			font-style: normal; 
+			
+			a.url {}
+			
+		}
+		
+		time {
+			float: right;
+		
+			a {
+				color: #999; 
+				text-decoration: none; 
+				
+				&:hover {
+					text-decoration: underline;
+				}
+				
+			}
+			
+		}
+		
+		img.photo {}
+		
+		img.avatar {
+			position: absolute; 
+			left: 10px; 
+			padding: 2px; 
+			border: 1px solid #cecece; 
+			background: #fff; 		
+		}
+			
+	} /* end .commentlist .vcard */
+	
+
+	/* comment meta */
+	.comment-meta {
+		
+		a {}
+		
+	} 
+	
+	.commentmetadata {
+		
+		a {}
+		
+	}
+	
+	/* comment content */
+	.comment_content { 
+		margin-left: 50px; 
+			
+		p {
+			margin: 0.7335em 0 1.5em; 
+			font-size: 1em; 
+			line-height: 1.5em; 	
+		}
+		
+	} /* end .commentlist .comment_content */
+	
+	/* comment reply link */
+	.comment-reply-link { 
+		text-decoration: none; 
+		float: right;  
+		background: #4598bb; 
+		padding: 3px 5px; 
+		color: #fff; 
+		opacity: 0.65; 
+		margin-bottom: 10px; 
+		font-weight: 700; 
+		font-size: 0.9em; 
+	
+		&:hover,
+		&:focus {
+			opacity: 1;
+		}
+		
+	} /* end .commentlist .comment-reply-link */
+					
+} /* end .commentlist */
+
+/******************************************************************
+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: #fff; 
+			}
+			
+			/* 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; 
+		}
+		
+	}
+}
+	
+	/* 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 {}
+			
+			}
+		
+		}
+	
+	}
+
+/*********************
+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/scss/ie.scss

@@ -0,0 +1,51 @@
+/******************************************************************
+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/scss/login.scss

@@ -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/scss/mixins.scss

@@ -0,0 +1,299 @@
+/******************************************************************
+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('library/fonts/font-name.eot');
+    	src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
+             url('library/fonts/font-name.woff') format('woff'),
+             url('library/fonts/font-name.ttf') format('truetype'),
+             url('library/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/scss/normalize.scss

@@ -0,0 +1,477 @@
+/*! 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/scss/style.scss

@@ -0,0 +1,152 @@
+/******************************************************************
+Site Name: 
+Author: 
+
+Stylesheet: Main Stylesheet
+
+Here's where the magic happens. Here, you'll see we are calling in
+the seperate 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 and the mixins are also called within that base file 
+*/
+
+/* import mixins */
+@import "mixins";
+
+/******************************************************************
+AVERAGE VIEWING SIZE 
+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: 481px) {
+	
+	/* styles in 481up.scss */
+	@import "481up";
+
+} /* end of media query */
+
+/******************************************************************
+TABLET & SMALLER LAPTOPS
+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: 768px) {
+	
+	/* styles in 768up.scss */
+	@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.scss */
+	@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.scss */
+	@import "1240up";
+
+} /* end of media query */
+
+/******************************************************************
+PRINT STYLESHEET
+******************************************************************/
+/******************************************************************
+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;
+    }
+}