/*
*************************************************
Grid V1.6
Zulfikar Mohammed
16/05/2013
*************************************************
*/

.container{ position:relative;margin:0 auto;padding:0 1%;width:1200px;}
.ie .container {width:978px;}
.row{ clear:both;padding:0;margin-bottom:10px;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .third, .two-third { float:left;margin:0 2% 0 0;}
.col1.lastCol, .col2.lastCol, .col3.lastCol, .col4.lastCol, .col5.lastCol, .col6.lastCol, .col7.lastCol, .col8.lastCol, .col9.lastCol, .col10.lastCol, .col11.lastCol, .col12.lastCol, .col13.lastCol, .col14.lastCol, .col15.lastCol, .col16.lastCol, .col17.lastCol, .col18.lastCol, .col19.lastCol, .col20, .third.lastCol, .two-third.lastCol { margin:0;}
.col1 { width:3.1%;}
.col2 { width:8.2%;}
.col3 { width:13.3%;}
.col4 { width:18.4%;}
.col5 { width:23.5%;}
.col6 { width:28.6%;}
.col7 { width:33.7%;}
.col8 { width:38.8%;}
.col9 { width:43.9%;}
.col10 { width:49%;}
.col11 { width:54.1%;}
.col12 { width:59.2%;}
.col13 { width:64.3%;}
.col14 { width:69.4%;}
.col15 { width:74.5%;}
.col16 { width:79.6%;}
.col17 { width:84.7%;}
.col18 { width:89.8%;}
.col19 { width:94.9%;}
.col20 { width:100%;margin:0;}
.third {width:32%;}
.two-third {width:66%;}
.offset-1{margin-left:5.1%;}
.offset-2{margin-left:10.2%;}
.offset-3{margin-left:15.3%;}
.offset-4{margin-left:20.4%;}
.offset-5{margin-left:25.5%;}
.offset-6{margin-left:30.6%;}
/* #Tablet (Landscape)
================================================== */
@media only screen and (min-width:480px) and (max-width:1199px) { .container{ width:98%;}
.ie .container {width:978px;}
}
/*  #Mobile (Portrait)
================================================== */
    @media only screen and (max-width:479px) { .container{ width:98%;}
.ie .container { width:978px;}
.row { margin-bottom:0;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .third, .two-third { width:100%;margin-bottom:10px;}
.col1.lastCol, .col2.lastCol, .col3.lastCol, .col4.lastCol, .col5.lastCol, .col6.lastCol, .col7.lastCol, .col8.lastCol, .col9.lastCol, .col10.lastCol, .col11.lastCol, .col12.lastCol, .col13.lastCol, .col14.lastCol, .col15.lastCol, .col16.lastCol, .col17.lastCol, .col18.lastCol, .col19.lastCol, .col20, .third.lastCol, .two-third.lastCol { margin-bottom:10px;}
}
/*  #Mobile (fix minimum screen for mobile)
================================================== */
    @media only screen and (max-width:320px) { .container{ padding:0;width:300px;}
.ie .container { width:978px;}
.row { margin-bottom:0;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .third, .two-third { width:100%;}
}
/* #Clearing
================================================== */

    
    .container:after { content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.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;}
.clear {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
/*
*************************************************
Grid V1.2
Zulfikar Mohammed
22/04/2013
*************************************************
*/

.container{ position:relative;margin:0 auto;padding:0 1%;width:862px;}
.ie .container {width:862px;}
.row{ clear:both;padding:0;margin-bottom:10px;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .third, .two-third { float:left;margin:0 2% 0 0;}
.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12.last, .col13.last, .col14.last, .col15.last, .col16.last, .col17.last, .col18.last, .col19.last, .col20, .third.last, .two-third.last { margin:0;}
.col1 { width:3.1%;}
.col2 { width:8.2%;}
.col3 { width:13.3%;}
.col4 { width:18.4%;}
.col5 { width:23.5%;}
.col6 { width:28.6%;}
.col7 { width:33.7%;}
.col8 { width:38.8%;}
.col9 { width:43.9%;}
.col10 { width:49%;}
.col11 { width:54.1%;}
.col12 { width:59.2%;}
.col13 { width:64.3%;}
.col14 { width:69.4%;}
.col15 { width:74.5%;}
.col16 { width:79.6%;}
.col17 { width:84.7%;}
.col18 { width:89.8%;}
.col19 { width:94.9%;}
.col20 { width:100%;margin:0;}
.third {width:32%;}
.two-third {width:66%;}
.offset-1{margin-left:5.1%;}
.offset-2{margin-left:10.2%;}
.offset-3{margin-left:15.3%;}
.offset-4{margin-left:20.4%;}
.offset-5{margin-left:25.5%;}
.offset-6{margin-left:30.6%;}
/* #Tablet (Landscape)
================================================== */
@media only screen and (min-width:480px) and (max-width:861px) { .container{ width:98%;}
.ie .container {width:862px;}
}
/*  #Mobile (Portrait)
================================================== */
    @media only screen and (max-width:479px) { .container{ width:98%;}
.ie .container { width:978px;}
.row { margin-bottom:0;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .third, .two-third { width:100%;margin-bottom:10px;}
.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12.last, .col13.last, .col14.last, .col15.last, .col16.last, .col17.last, .col18.last, .col19.last, .col20, .third.last, .two-third.last { margin-bottom:10px;}
}
/*  #Mobile (fix minimum screen for mobile)
================================================== */
    @media only screen and (max-width:320px) { .container{ padding:0;width:300px;}
.ie .container { width:978px;}
.row { margin-bottom:0;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19, .col20, .third, .two-third { width:100%;}
}
/* #Clearing
================================================== */

    
    .container:after { content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
.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;}
.clear {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}