/*
 * IVORY Framework
 *
 * A simple, flexible, powerful and fully responsive grid based front-end web framework 
 * makes your web development faster and easier, & it takes you all the way from 1200px on down to 320px.
 *
 * Developed by Lakshmikanth Vallampati - kanth.vallampati@gmail.com
 * Licensed under GPLv2 
 * http://weice.in/ivory
 *
 */

/* --------------------------------------- Clearfixes ------------------------------------------ */
.row:before,.row:after,.clearfix:before,.clearfix:after{content:'';display:table}
.row:after,.clearfix:after{clear:both}
.row,.clearfix{zoom:1}
/* --------------------------------------- GRID Layout ----------------------------------------- */
*{box-sizing:border-box;-ms-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
body{margin:0 auto; color:#666666;}
.grid{margin:0 auto;max-width:1200px;width:100%;} /* You can choose the grid 1200 or 1140 or 1024 or 960 as per your requirement */
.g1140{margin:0 auto;max-width:1140px;width:100%;}
.g1024{margin:0 auto;max-width:1024px;width:100%;}
.g960{margin:0 auto;max-width:960px;width:100%;}
.row{width:100%; margin: 0 auto;}
.c1{width:8.33%}
.c2{width:16.66%}
.c3{width:25%}
.c4{width:33.33%}
.c5{width:41.66%}
.c6{width:50%}
.c7{width:58.33%}
.c8{width:66.66%}
.c9{width:75%}
.c10{width:83.33%}
.c11{width:91.66%}
.c12{width:100%}
.c1-5{width:20%}/* This column can be used as a one fifth of the row */
.c1-8{width:12.5%}/* This column can be used as a one eigth of the row */ 
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12,.c1-5,.c1-8 {min-height:1px; float:left; padding-left:10px; padding-right:10px; position:relative}
.row .row{margin-left:-10px;}

/* =Media query for 960 Screens - sets nested grids to 100%
-------------------------------------------------------------- */
@media only screen and (max-width:960px){
.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12,.row .row .c1-5,.row .row .c1-8{width:100%;margin-bottom:20px;margin-left:0px;margin-right:0px; }
.row .row > div:last-child{margin-bottom:0 !important}
}

/* =Media query for iPad and tablets
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
body{font-size:90%}
.row{margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12,.c1-5,.c1-8{width:100%;margin-right:0;margin-left:0;margin-bottom:20px}
}