//
// Site Name: 
// Author: 
// 
// Stylesheet: Main Stylesheet
// 
// Here's where the magic happens. Here, you'll see we are calling in
// the separate functions for each media query. The base mobile 
// stylesheet is called in the header, so here we're working up from 
// there. To edit the css, just find the corresponding LESS file.
//

//
// Base.css contains the main mobile styles and is called in the 
// header. This way mobile devices get ONLY the styles that apply
// to them. No muss, no fuss.
//
// normalize.css is also called within that base file.
//
// we'll also need to call the mixins here so they apply to the
// rest of the stylesheets.
//

@import "mixins"

//
// let's now call the FUNCTIONS for these different stylesets. This
// doesn't load the CSS, the CSS is loaded inside the media queries.
//

//
// SMALL SCREENS
// This is just a bit larger than the iPhone 3/4/4s screen.
// You can expand upon the mobile styles here, but 
// remember to keep it simple.
//
@media only screen and (min-width: 481px)
	
	// styles in 481up.sass
	@import "481up"

// end of media query 

//
// TABLET & SMALLER LAPTOPS
// This is where the iPad styles kick in. You can start 
// using a grid system here and begin laying things
// out like a traditional site.
//
@media only screen and (min-width: 768px)
	
	// styles in 768up.sass 
	@import "768up"

// end of media query 

//
// DESKTOP 
// This is the average viewing window. So Desktops, Laptops, and 
// in general anyone not viewing on a mobile device. Here's where
// you can add resource intensive styles.
//
@media only screen and (min-width: 1030px)
	
	// styles in 1030up.sass 
	@import "1030up"

// end of media query

//
// LARGE VIEWING SIZE 
// This is for the larger monitors and possibly full 
// screen viewers. 
//
@media only screen and (min-width: 1240px)
	
	// styles in 1240up.sass
	@import "1240up"

// end of media query

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