added retina, base, and mixins

added imports at top
moved base styles inside this main stylesheet
updated media query descriptions
added retina stylesheet & media queries

library/less/style.less

@@ -5,57 +5,54 @@ 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.
+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.
 ******************************************************************/
 
-/*
-Base.css contains the main mobile styles and is called in the 
-header. This way mobile devices get ONLY the styles that apply
-to them. No muss, no fuss.
 
-normalize.css is also called within that base file.
-
-we'll also need to call the mixins here so they apply to the
-rest of the stylesheets.
-*/
+/*********************
+IMPORTING STYLES
+*********************/
 
+/* import normalize */
+@import "normalize.less";
+/* import mixins */
 @import "mixins.less";
 
-/*
-let's now call the FUNCTIONS for these different stylesets. This
-doesn't load the CSS, the CSS is loaded inside the media queries.
-*/
+/******************************************************************
+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.
+******************************************************************/
 
-@import "481up.less";
-@import "768up.less";
-@import "1030up.less";
-@import "1240up.less";
+/* styles in base.less */
+@import "base.less";
 
 /******************************************************************
-SMALL SCREENS
-This is just a bit larger than the iPhone 3/4/4s screen.
-You can expand upon the mobile styles here, but 
-remember to keep it simple.
+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 */
-	.481up();
+	@import "481up.less";
 
 } /* end of media query */
 
 /******************************************************************
 TABLET & SMALLER LAPTOPS
-This is where the iPad styles kick in. You can start 
-using a grid system here and begin laying things
-out like a traditional site.
+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 */
-	.768up();
+	@import "768up.less";
 
 } /* end of media query */
 
@@ -68,28 +65,42 @@ you can add resource intensive styles.
 @media only screen and (min-width: 1030px) {
 	
 	/* styles in 1030up.less */
-	.1030up();
+	@import "1030up.less";
 
 } /* end of media query */
 
 /******************************************************************
 LARGE VIEWING SIZE 
-This is for the larger monitors and possibly full 
-screen viewers. 
+This is for the larger monitors and possibly full screen viewers.
 ******************************************************************/
 @media only screen and (min-width: 1240px) {
 	
 	/* styles in 1240up.less */
-	.1240up();
+	@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.
+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 { 
 	* {