updated LESS files to be more in-depth

library/less/1030up.less

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

library/less/1240up.less

@@ -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/less/2x.less

@@ -0,0 +1,42 @@
+/******************************************************************
+Site Name: 
+Author: 
+
+Stylesheet: Retina Screens & Devices Stylesheet
+
+When handling retina screens you need to make adjustments, especially
+if you're not using font icons. Here you can add them in one neat
+place.
+
+******************************************************************/
+
+/* 
+
+EXAMPLE 
+Let's say you have an image and you need to make sure it looks ok
+on retina screens. Let's say we have an icon which dimension are
+24px x 24px. In your regular stylesheets, it would look something
+like this:
+
+.icon {
+	width: 24px;
+	height: 24px;
+	background: url(img/test.png) no-repeat;
+}
+
+For retina screens, we have to make some adjustments, so that image
+doesn't look blurry. So, taking into account the image above and the
+dimensions, this is what we would put in our retina stylesheet:
+
+.icon {
+	background: url(img/test@2x.png) no-repeat;
+	background-size: 24px 24px;
+}
+
+So, you would create the same icon, but at double the resolution, meaning 
+it would be 48px x 48px. You'd name it the same, but with a @2x at the end
+(this is pretty standard practice). Set the background image so it matches
+the original dimensions and you are good to go. 
+
+*/
+

library/less/481up.less

@@ -0,0 +1,111 @@
+/******************************************************************
+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.scss styles.
+
+******************************************************************/
+
+
+	
+/*********************
+NAVIGATION STYLES
+*********************/
+
+.nav {}
+
+	/* .menu is clearfixed inside mixins.scss */
+	.menu {
+		ul {
+			li {
+				a {
+					
+					/*
+					you can use hover styles here even though this size
+					has the possibility of being 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
+*********************/
+
+/* post content */
+.post-content {
+			
+	
+	/* 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; 
+	}
+			
+} /* end .post-content */
+
+/*********************
+FOOTER STYLES
+*********************/
+	
+/*
+check your menus here. do they look good?
+do they need tweaking?
+*/
+.footer-links {
+	ul {
+		li {}
+	}
+} /* end .footer-links */
+			

library/less/768up.less

@@ -0,0 +1,357 @@
+/******************************************************************
+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 {
+	background: #eee; 
+	border: 0;
+			
+	li {
+		float: left;
+		position: relative;
+				
+		a {
+			border-bottom: 0;
+					
+			/*
+			you can use hover styles here even though this size
+			has the possibility of being 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 .nav */
+	
+/*********************
+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
+*********************/
+
+/*
+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 */
+			

library/less/base.less

@@ -0,0 +1,842 @@
+/******************************************************************
+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 at the top of the main stylsheet
+and will be used across all viewports.
+
+******************************************************************/
+
+/*********************
+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 {}                           /* 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: @bones-pink;
+
+	/* on hover */
+	&:hover, &:focus {
+		color: lighten(@bones-pink, 9%);
+	}
+	
+	/* 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; 
+	text-rendering : optimizelegibility;
+	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
+*********************/
+
+/* 
+all navs have a .nav class applied via
+the wp_menu function, this is so we can
+easily just write on group of styles for
+the navs on the site and our css is cleaner
+and moe scalable.
+*/
+
+.nav {
+	border: 1px solid #ccc;
+	border-bottom: 0;
+
+	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 li */
+			
+	/* highlight current page */
+	li.current-menu-item, 
+	li.current_page_item,
+	li.current-page-ancestor {
+				
+		a {}
+				
+	}  /* end current highlighters */
+			
+} /* end .nav */
+
+
+/*********************
+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/less/ie.less

@@ -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!
+
+******************************************************************/
+
+/*
+Remember, all the BASE styles are called already since IE can
+read those. Below, we need to import only the stuff IE can't 
+understand (what's inside the media queries). We also need to
+import the mixins file so LESS can understand the variables.
+*/
+
+/* import mixins */
+@import "mixins.less";
+
+@import "481up.less";
+@import "768up.less";
+@import "1030up.less";
+
+/* 
+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 the classes applied to
+the html element. These can sometimes change, so take a look inside the
+header.php file to see what they are:
+
+
+.lt-ie8 .class { ... }
+
+*/

library/less/login.less

@@ -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.
+*/
+.login 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/less/mixins.less

@@ -0,0 +1,293 @@
+/******************************************************************
+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;
+	}
+	/* for IE */
+	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;
+@white:             #fff;
+
+@bones-pink:        #f01d4f;
+@bones-blue:        #1990db;
+
+/*********************
+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 */
+.alert { 
+	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
+*********************/
+
+/* .rounded(4px); */
+.rounded(@radius: 4px) {
+  -webkit-border-radius: @radius;
+     -moz-border-radius: @radius;
+      -ms-border-radius: @radius;
+       -o-border-radius: @radius;
+          border-radius: @radius;
+}
+
+/* .rounded-left(4px); */
+.rounded-left(@radius: 4px) {
+	-webkit-border-bottom-left-radius: @radius;
+  	   -webkit-border-top-left-radius: @radius;
+		-moz-border-radius-bottomleft: @radius;
+		   -moz-border-radius-topleft: @radius;
+			border-bottom-left-radius: @radius;
+			   border-top-left-radius: @radius;
+}
+
+/* .rounded-right(4px); */
+.rounded-right(@radius: 4px) {
+	-webkit-border-bottom-right-radius: @radius;
+  	   -webkit-border-top-right-radius: @radius;
+		-moz-border-radius-bottomright: @radius;
+		   -moz-border-radius-topright: @radius;
+			border-bottom-right-radius: @radius;
+			   border-top-right-radius: @radius;
+}
+
+/* .rounded-bottom(4px); */
+.rounded-bottom(@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;
+}
+
+/* .rounded-top(4px); */
+.rounded-top(@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;
+}
+
+/*********************
+TRANISTION
+*********************/
+
+/* .transition(all,2s); */
+.transition(@what: all, @time: 0.2s) {
+	-webkit-transition: @what @time ease-out;
+	   -moz-transition: @what @time ease-out;
+ 	    -ms-transition: @what @time ease-out;
+	     -o-transition: @what @time ease-out;
+	        transition: @what @time ease-out;
+}
+
+/*********************
+CSS3 GRADIENTS
+Be careful with these since they can 
+really slow down your CSS. Don't overdue it.
+*********************/
+
+/* .css-gradient(#dfdfdf,#f8f8f8); */
+.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
+*********************/
+
+/* .boxSizing(border-box); */
+.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
+*********************/
+
+/* .boxShadow(0 0 4px #444); */
+.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(@bones-pink, 13%);
+	border-top-color: darken(@bones-pink, 7%);
+	border-left-color: darken(@bones-pink, 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;
+	.transition();
+	.borderRadius(4px);
+	.css-gradient(@bones-pink,darken(@bones-pink, 5%));
+
+	&:hover, &:focus {
+		color: @white;
+	  	border: 1px solid darken(@bones-pink, 13%);
+	  	border-top-color: darken(@bones-pink, 20%);
+	 	border-left-color: darken(@bones-pink, 20%);
+		.css-gradient(darken(@bones-pink, 5%),darken(@bones-pink, 10%));
+	}
+	
+	&:active {
+		.css-gradient(darken(@bones-pink, 5%),@bones-pink);
+	}	
+}
+
+.blue-button, .blue-button:visited {
+	border-color: darken(@bones-blue, 10%);
+	text-shadow: 0 1px 1px darken(@bones-blue, 10%);
+	@include css-gradient( @bones-blue, darken(@bones-blue, 5%) );
+	-webkit-box-shadow: inset 0 0 3px lighten(@bones-blue, 16%);
+       -moz-box-shadow: inset 0 0 3px lighten(@bones-blue, 16%);
+   	        box-shadow: inset 0 0 3px lighten(@bones-blue, 16%);
+	&:hover, &:focus {
+		border-color: darken(@bones-blue, 15%);
+		@include css-gradient( darken(@bones-blue, 4%), darken(@bones-blue, 10%) );
+	}
+	&:active {
+		@include css-gradient( darken(@bones-blue, 5%), @bones-blue );
+	}
+}

library/less/normalize.less

@@ -0,0 +1,504 @@
+/*! normalize.css 2012-03-11T12:53 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,
+summary {
+    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
+ * Remove excess height in iOS5 devices
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * 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. 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 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Addresses font-family inconsistency between 'textarea' and other form elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+/*
+ * Addresses margins handled incorrectly in IE6/7
+ */
+
+body {
+    margin: 0;
+}
+
+
+/* =============================================================================
+   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
+   ========================================================================== */
+
+/*
+ * Addresses font sizes and margins set differently in IE6/7
+ * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+}
+
+h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+}
+
+h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+}
+
+h6 {
+    font-size: 0.75em;
+    margin: 2.33em 0;
+}
+
+/*
+ * 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;
+}
+
+/*
+ * Addresses margins set differently in IE6/7
+ */
+
+p,
+pre {
+    margin: 1em 0;
+}
+
+/*
+ * 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
+   ========================================================================== */
+
+/*
+ * Addresses margins set differently in IE6/7
+ */
+
+dl,
+menu,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE6/7
+ */
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE7
+ */
+
+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 text not wrapping in FF3
+ * 3. Corrects alignment displayed oddly in IE6/7
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 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 */
+}
+
+/*
+ * Re-set default cursor for disabled elements
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9
+ * 2. Removes excess padding in IE8/9
+ * 3. Removes excess padding in IE7
+      Known issue: excess padding remains in IE6
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/*
+ * 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 and search cancel button in S5, Chrome on OS X
+ */
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -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;
+}

library/less/style.less

@@ -0,0 +1,174 @@
+/******************************************************************
+Site Name: 
+Author: 
+
+Stylesheet: Main Stylesheet
+
+Here's where the magic happens. Here, you'll see we are calling in
+the separate media queries. The base mobile goes outside any query
+and is called at the beginning, after that we call the rest
+of the styles inside media queries.
+******************************************************************/
+
+
+/*********************
+IMPORTING STYLES
+*********************/
+
+/* import normalize */
+@import "normalize.less";
+/* import mixins */
+@import "mixins.less";
+
+/******************************************************************
+BASE (MOBILE) 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.
+******************************************************************/
+
+/* styles in base.less */
+@import "base.less";
+
+/******************************************************************
+LARGER MOBILE DEVICES
+This is for devices like the Galaxy Note or something that's 
+larger than in iPhone but smaller than a tablet. Let's call them
+tweeners.
+******************************************************************/
+@media only screen and (min-width: 481px) {
+	
+	/* styles in 481up.less */
+	@import "481up.less";
+
+} /* 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.less */
+	@import "768up.less";
+
+} /* 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.less */
+	@import "1030up.less";
+
+} /* 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.less */
+	@import "1240up.less";
+
+} /* end of media query */
+
+/******************************************************************
+RETINA (2x RESOLUTION DEVICES)
+This applies to the retina iPhone (4s) and iPad (2,3) along with 
+other displays with a 2x resolution. You can also create a media
+query for retina AND a certain size if you want. Go Nuts.
+******************************************************************/
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+       only screen and (min--moz-device-pixel-ratio: 1.5),
+       only screen and (min-device-pixel-ratio: 1.5) {
+	
+	/* styles in 2x.less */
+	@import "2x.less"; 
+
+} /* 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;
+    }
+}