/*
* Zerogrid V1.0
* Copyright 2012, Kimmy | wwww.zerotheme.com
*/


/*--------------Table of Contents
 #Base 960 Grid
 #Tablet (Portrait)
 #Mobile (Portrait)
 #Mobile (Landscape)
*/
/*--------------Base 960 Grid*/

  body,	.zerogrid { position: relative; width: 900px; margin: 0 auto; padding: 0;}
 .zerogrid .row { margin-bottom: 10px;}
	
	.zerogrid .offleft					 	 { margin-left: 0px!important;}
	.zerogrid .offright					 { margin-right: 0px!important;}
	.zerogrid .offtop						 { margin-top: 0px!important;}
	.zerogrid .offbottom					 { margin-bottom: 0px!important;}

 section {width:inherit;}
	.wide{display:inline-block;}
	.wide_middle{display:inline-block;}
	.middle{display:none;}
	.middle_narrow{display:none;}
	.narrow{ display:none; }

	.zerogrid .col03, .zerogrid .col04, .zerogrid .col05, .zerogrid .col06, .zerogrid .col07, .zerogrid .col08, .zerogrid .col09, .zerogrid .col10, .zerogrid .col15 { float: left; display: inline-block; margin:10px;}
	
 /* Base Grid */
 .zerogrid .col03 { width: 160px; }
	.zerogrid .col04 { width: 220px; }
 .zerogrid .col05 { width: 280px; }
	.zerogrid .col06 { width: 340px; }
	.zerogrid .col07 { width: 400px; }
	.zerogrid .col08 { width: 460px; }
	.zerogrid .col09 { width: 520px; }
 .zerogrid .col10 { width: 580px; }
 	table { width: 580px; }
	.zerogrid .col15 { width: 880px; }

/*--------------Tablet (Portrait)*/

 /* Note: Design for a width of 768px */

 @media only screen and (min-width: 768px) and (max-width: 940px) {

 body, .zerogrid { width: 580px; }
	.wide{display:none;}
	.wide_middle{display:inline-block;}
	.middle{display:inline-block;}
	.middle_narrow{display:block;}
	.narrow{display:none;}

 .zerogrid .col03, .zerogrid .col04, .zerogrid .col05, .zerogrid .col06, .zerogrid .col07, .zerogrid .col08, .zerogrid .col09, .zerogrid .col10, .zerogrid .col15, table { width: 580px; }

 }


/*--------------Mobile (Landscape)*/

 @media only screen and (min-width: 591px) and (max-width: 767px) {
 
	body, .zerogrid { width: 580px; }
	.wide{ display:none; }
	.wide_middle{display:inline-block;}
	.middle{display:inline-block;}
	.middle_narrow{display:block;}
	.narrow{display:none;}

 .zerogrid .col03, .zerogrid .col04, .zerogrid .col05, .zerogrid .col06, .zerogrid .col07, .zerogrid .col08, .zerogrid .col09, .zerogrid .col10, .zerogrid .col15, table { width: 580px; }

 }
	
	/*--------------Mobile (Landscape)*/

 /* Note: Design for a width of 420px */

 @media only screen and (min-width: 320px) and (max-width: 590px) {
 
	body, .zerogrid { width: 320px; }
	.wide{ display:none; }
	.wide_middle{display:none;}
	.middle{display:none;}
	.middle_narrow{display:block;}
	.narrow{ display:block; }
	
 .zerogrid .col03, .zerogrid .col04, .zerogrid .col05, .zerogrid .col06, .zerogrid .col07, .zerogrid .col08, .zerogrid .col09, .zerogrid .col10, .zerogrid .col15, table { width: 320px; }
	
 }
	

/*--------------Mobile (Portrait)*/

 /* Note: Design for a width of 320px */

 @media only screen and (max-width: 320px) {
 
	body, .zerogrid { width: 320px; }
	.wide{ display:none; }
	.wide_middle{display:none;}
	.middle{display:none;}
	.middle_narrow{display:block;}
	.narrow{display:block;}

 .zerogrid .col03, .zerogrid .col04, .zerogrid .col05, .zerogrid .col06, .zerogrid .col07, .zerogrid .col08, .zerogrid .col09, .zerogrid .col10, .zerogrid .col15, table { width: 320px; }

 }

/* #Clearing
================================================== */

/* Self Clearing Goodness */
.zerogrid:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
 content: '\0020';
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0; }
.row:after,
.clearfix:after {
 clear: both; }
.row,
.clearfix {
 zoom: 1; }

/* You can also use a <br class="clear"> to clear columns */
.clear {
 clear: both;
 display: block;
 overflow: hidden;
 visibility: hidden;
 width: 0;
 height: 0;
}