/******************************************************************
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 is also called within that base file.

we'll also need to call the mixins here so they apply to the
rest of the stylesheets.
*/

@import "mixins.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.
*/

@import "481up.less";
@import "768up.less";
@import "1030up.less";
@import "1240up.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.
******************************************************************/
@media only screen and (min-width: 481px) {
	
	/* styles in 481up.less */
	.481up();

} /* end of media query */

/******************************************************************
TABLET & SMALLER LAPTOPS
This is where the iPad styles kick in. You can start 
using a grid system here and begin laying things
out like a traditional site.
******************************************************************/
@media only screen and (min-width: 768px) {
	
	/* styles in 768up.less */
	.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.less */
	.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.less */
	.1240up();

} /* end of media query */

/******************************************************************
PRINT STYLESHEET
Feel free to customize this. Remember to add 
things that won't make sense to print at the bottom. 
Things like nav, ads, and forms should be set to 
display none.
******************************************************************/
@media print { 
	* { 
		background: transparent !important; 
		color: black !important; 
		text-shadow: none !important; 
		filter:none !important; 
		-ms-filter: none !important; 
	} 
	
	a, a:visited { 
		color: #444 !important; 
		text-decoration: underline; 
		
		/* show links on printed pages */
		&:after { 
			content: " (" attr(href) ")"; 
		}
		
		/* show title too */
		abbr[title]:after { 
			content: " (" attr(title) ")"; 
		}
	} 
	
	.ir a:after, 
	a[href^="javascript:"]:after, 
	a[href^="#"]:after { 
		content: ""; 
	} 
	
	pre, blockquote { 
		border: 1px solid #999; 
		page-break-inside: avoid; 
	} 
	
	thead { 
		display: table-header-group; 
	} 
	
	tr, img { 
		page-break-inside: avoid; 
	} 
	
	img { 
		max-width: 100% !important; 
	}
    
    @page { 
    	margin: 0.5cm;
    } 
    
    p, h2, h3 { 
    	orphans: 3; 
    	widows: 3; 
    } 
    
    h2, 
    h3 { 
    	page-break-after: avoid; 
    }
    
    /* hide content people who print don't need to see */
    .sidebar,
    .page-navigation, 
    .wp-prev-next,
    .respond-form,
    nav {
    	display: none;
    }
}