
/* #Base 960 Grid
================================================== */
	html, body { width: 100%; margin: 0; padding: 0; }
	
    .container { position: relative; width: 950px; margin: 0 auto; padding: 0; }
    


/* big desktops, not laptops @ 1368 width but shorter height  */   /* GRAY */
@media only screen and (min-width: 1500px) {    
	.container { width: 1280px; }				/* this can be set to 1100, 990 or whatever client wants as max-width */

}

/* larger than 1080 but smaller than 1500 (devices and browsers) - laptop screens & landscape tablet */  /*ORANGE*/
@media only screen and (min-width: 1080px) and (max-width: 1499px) {
	
	.container { width: 1060px; }				/* set lower if necessary based on the above setting */
	
}
	
/* larger than 960 but smaller than 1080 (devices and browsers) - small laptop screens & landscape ipad */  /*PURPLE*/
@media only screen and (min-width: 960px) and (max-width: 1079px) {

	.container { width: 940px; }
	
}

/* IF YOU DON'T WANT TO SEPARATE LEVELS @ ORANGE AND PURPLE BUT JUST SIMPLY ORANGE FOR LAPTOPS & LANDSCAPE TABLET */
/*larger than 960 but smaller than 1500 (devices and browsers) - laptop screens & landscape tablet */  /*ORANGE*/
/*@media only screen and (min-width: 960px) and (max-width: 1499px) {
	
	.container { width: 950px; }				
	
}*/

/* Tablet Portrait size to standard 960 (devices and browsers) */      /* BLUE */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	.container { width: 750px; }

}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	.container { width: 300px; }
	
}
	

/* Mobile Large Phone, Phablet, mini-ipad (devices and browsers) */       /* GREEN PLUS */
@media only screen and (min-width: 580px) and (max-width: 767px) {

	.container { width: 530px; }
    
}	


/* Mobile Landscape to large phone (devices and browsers) */       /* GREEN */
@media only screen and (min-width: 480px) and (max-width: 579px) {

	.container { width: 420px; }
	
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */      /* RED */
@media only screen and (max-width: 479px) {
	
	/* defaults to "all-mobile" setting above */
}