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


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

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

	.zerogrid .col01,.zerogrid .col02,.zerogrid .col03,.zerogrid .col04,.zerogrid .col05,.zerogrid .col06,.zerogrid .col07,.zerogrid .col08,
	.zerogrid .col09,.zerogrid .col10,.zerogrid .col11,.zerogrid .col12,.zerogrid .col13 ,.zerogrid .col14,.zerogrid .col15 ,.zerogrid .col16,
	.zerogrid .col-1-3,.zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4   { float: left; display: inline; margin:10px;}
	
    /* Base Grid */
	.zerogrid .col01                    { width: 40px;  }
    .zerogrid .col02                    { width: 100px; }
    .zerogrid .col03                    { width: 160px; }
    .zerogrid .col04                    { width: 125px; }
    .zerogrid .col05                    { width: 280px; }
    .zerogrid .col06                    { width: 340px; }
    .zerogrid .col07                    { width: 400px; }
    .zerogrid .col08                    { width: 460px; }
    .zerogrid .col09                    { width: 520px; }
    .zerogrid .col10                    { width: 580px; }
    .zerogrid .col11                    { width: 640px; }
    .zerogrid .col12                    { width: 700px; }
    .zerogrid .col13                    { width: 760px; }
    .zerogrid .col14                    { width: 820px; }
    .zerogrid .col15                    { width: 880px; }
    .zerogrid .col16                    { width: 940px; }

    .zerogrid .col-1-3                  { width: 300px; }
    .zerogrid .col-1-4                  { width: 220px; }
    .zerogrid .col-2-3                  { width: 620px; }
    .zerogrid .col-2-4                  { width: 700px; }

    /* Offsets */
    .zerogrid .offset01                   { margin-left: 60px;  }
    .zerogrid .offset02                   { margin-left: 120px; }
    .zerogrid .offset03                   { margin-left: 180px; }
    .zerogrid .offset04                   { margin-left: 240px; }
    .zerogrid .offset05                   { margin-left: 300px; }
    .zerogrid .offset06                   { margin-left: 360px; }
    .zerogrid .offset07                   { margin-left: 420px; }
    .zerogrid .offset08                   { margin-left: 480px; }
    .zerogrid .offset09                   { margin-left: 540px; }
    .zerogrid .offset10                   { margin-left: 600px; }
    .zerogrid .offset11                   { margin-left: 660px; }
    .zerogrid .offset12                   { margin-left: 720px; }
    .zerogrid .offset13                   { margin-left: 780px; }
    .zerogrid .offset14                   { margin-left: 840px; }
    .zerogrid .offset15                   { margin-left: 900px; }

/* CSS for Table */
.datagrid table { border-collapse: collapse; text-align: left; width: 400px; } 
.datagrid {width: 400px; margin:10px 0 0 40px;  font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #8C8C8C; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.datagrid table td, .datagrid table th { padding: 3px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8064A2), color-stop(1, #8064A2) );background:-moz-linear-gradient( center top, #8C8C8C 5%, #8064A2 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');background-color:#8C8C8C; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #A3A3A3; }
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td { color: #7D7D7D; border-left: 1px solid #DBDBDB;font-size: 14px;font-weight: normal; }
.datagrid table tbody .alt td { background: #EBEBEB; color: #7D7D7D; }
.datagrid table tbody td:first-child { border-left: none; width: 280px; }
.datagrid table tbody tr:last-child td { border-bottom: none; }

/* CSS for Table */






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

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

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .zerogrid                          { width: 768px; }

		.zerogrid .col01,.zerogrid .col02,.zerogrid .col03,.zerogrid .col04,.zerogrid .col05,.zerogrid .col06,.zerogrid .col07,.zerogrid .col08,
		.zerogrid .col09,.zerogrid .col10,.zerogrid .col11,.zerogrid .col12,.zerogrid .col13 ,.zerogrid .col14,.zerogrid .col15 ,.zerogrid .col16,
		.zerogrid .col-1-3,.zerogrid .col-2-3, .zerogrid .col-1-4 { margin: 10px;  }
		
        .zerogrid .col01                   { width: 28px; }
        .zerogrid .col02                   { width: 76px; }
        .zerogrid .col03                   { width: 124px; }
        .zerogrid .col04                   { width: 100px; }
        .zerogrid .col05                   { width: 220px; }
        .zerogrid .col06                   { width: 268px; }
        .zerogrid .col07                   { width: 316px; }
        .zerogrid .col08                   { width: 364px; }
        .zerogrid .col09                   { width: 412px; }
        .zerogrid .col10                   { width: 460px; }
        .zerogrid .col11                   { width: 508px; }
        .zerogrid .col12                   { width: 556px; }
        .zerogrid .col13                   { width: 604px; }
        .zerogrid .col14                   { width: 652px; }
        .zerogrid .col15                   { width: 700px; }
        .zerogrid .col16                   { width: 748px; }

        .zerogrid .col-1-3                { width: 236px; }
        .zerogrid .col-2-3                { width: 492px; }

        /* Offsets */ 
        .zerogrid .offset01                 { margin-left: 48px; }
        .zerogrid .offset02                 { margin-left: 96px; }
        .zerogrid .offset03                 { margin-left: 144px; }
        .zerogrid .offset04                 { margin-left: 192px; }
        .zerogrid .offset05                 { margin-left: 240px; }
        .zerogrid .offset06                 { margin-left: 288px; }
        .zerogrid .offset07                 { margin-left: 336px; }
        .zerogrid .offset08                 { margin-left: 384px; }
        .zerogrid .offset09                 { margin-left: 432px; }
        .zerogrid .offset10                 { margin-left: 480px; }
        .zerogrid .offset11                 { margin-left: 528px; }
        .zerogrid .offset12                 { margin-left: 576px; }
        .zerogrid .offset13                 { margin-left: 624px; }
        .zerogrid .offset14                 { margin-left: 672px; }
        .zerogrid .offset15                 { margin-left: 720px; }
    }


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

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

    @media only screen and (max-width: 767px) {
        .zerogrid { width: 300px; }

		.zerogrid .col01,.zerogrid .col02,.zerogrid .col03,.zerogrid .col04,.zerogrid .col05,.zerogrid .col06,.zerogrid .col07,.zerogrid .col08,
		.zerogrid .col09,.zerogrid .col10,.zerogrid .col11,.zerogrid .col12,.zerogrid .col13 ,.zerogrid .col14,.zerogrid .col15 ,.zerogrid .col16,
		.zerogrid .col-1-3,.zerogrid .col-2-3, .zerogrid .col-1-4 {margin: 10px 0; }
		
        .zerogrid .col01,
        .zerogrid .col02,
        .zerogrid .col03,
        .zerogrid .col04,
        .zerogrid .col05,
        .zerogrid .col06,
        .zerogrid .col07,
        .zerogrid .col08,
        .zerogrid .col09,
        .zerogrid .col10,
        .zerogrid .col11,
        .zerogrid .col12,
        .zerogrid .col13,
        .zerogrid .col14,
        .zerogrid .col15,
        .zerogrid .col16,
        .zerogrid .col-1-3,
        .zerogrid .col-2-3  { width: 300px; }

        /* Offsets */
        .zerogrid .offset01,
        .zerogrid .offset02,
        .zerogrid .offset03,
        .zerogrid .offset04,
        .zerogrid .offset05,
        .zerogrid .offset06,
        .zerogrid .offset07,
        .zerogrid .offset08,
        .zerogrid .offset09,
        .zerogrid .offset10,
        .zerogrid .offset11,
        .zerogrid .offset12,
        .zerogrid .offset13,
        .zerogrid .offset14,
        .zerogrid .offset15 { margin-left: 0; }
        
        /* CSS for Table */
.datagrid table { border-collapse: collapse; text-align: left; width: 300px; } 
.datagrid {width: 300px; margin:10px 0 0 2px;  font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #8C8C8C; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.datagrid table td, .datagrid table th { padding: 3px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8064A2), color-stop(1, #8064A2) );background:-moz-linear-gradient( center top, #8C8C8C 5%, #8064A2 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');background-color:#8C8C8C; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #A3A3A3; }
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td { color: #7D7D7D; border-left: 1px solid #DBDBDB;font-size: 14px;font-weight: normal; }
.datagrid table tbody .alt td { background: #EBEBEB; color: #7D7D7D; }
.datagrid table tbody td:first-child { border-left: none; width: 180px; }
.datagrid table tbody tr:last-child td { border-bottom: none; }
        /* CSS for Table */
        
       

    }


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

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

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .zerogrid { width: 420px; }
		
        .zerogrid .col01,.zerogrid .col02,.zerogrid .col03,.zerogrid .col04,.zerogrid .col05,.zerogrid .col06,.zerogrid .col07,.zerogrid .col08,
		.zerogrid .col09,.zerogrid .col10,.zerogrid .col11,.zerogrid .col12,.zerogrid .col13 ,.zerogrid .col14,.zerogrid .col15 ,.zerogrid .col16,
		.zerogrid .col-1-3,.zerogrid .col-2-3, .zerogrid .col-1-4 {margin: 10px 0; }

        .zerogrid .col01,
        .zerogrid .col02,
        .zerogrid .col03,
        .zerogrid .col04,
        .zerogrid .col05,
        .zerogrid .col06,
        .zerogrid .col07,
        .zerogrid .col08,
        .zerogrid .col09,
        .zerogrid .col10,
        .zerogrid .col11,
        .zerogrid .col12,
        .zerogrid .col13,
        .zerogrid .col14,
        .zerogrid .col15,
        .zerogrid .col16,
        .zerogrid .col-1-3,
        .zerogrid .col-2-3 { width: 420px; }
 

/* CSS for Table */
.datagrid table { border-collapse: collapse; text-align: left; width: 300px; } 
.datagrid {width: 300px; margin:10px 0 0 2px;  font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #8C8C8C; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.datagrid table td, .datagrid table th { padding: 3px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8064A2), color-stop(1, #8064A2) );background:-moz-linear-gradient( center top, #8C8C8C 5%, #8064A2 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');background-color:#8C8C8C; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #A3A3A3; }
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td { color: #7D7D7D; border-left: 1px solid #DBDBDB;font-size: 14px;font-weight: normal; }
.datagrid table tbody .alt td { background: #EBEBEB; color: #7D7D7D; }
.datagrid table tbody td:first-child { border-left: none; width: 180px; }
.datagrid table tbody tr:last-child td { border-bottom: none; }    
/* CSS for Table */
    
    }
	

/* #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;
}