/**************************************************************************
*	@name		    Zozo UI Grid
*	@descripton	    Lightweight, Responsive and Mobile  Grid
*	@version	    0.1 (beta)
*	@copyright      Copyright (c) 2013 Zozo UI
*   @author         Zozo UI
*   @URL:           http://www.zozoui.com
**************************************************************************/


/*#region ==========================================================================
    Zozo Grid  (Common-optional)
========================================================================== */

.z-grid { margin : 0 auto; padding : 0 0 0 1%; }
.z-grid-1200 { max-width : 1220px; }
.z-grid-1000 { max-width : 1020px; }

/*#endregion*/



/*#region ==========================================================================
    Zozo Grid - Rows 
========================================================================== */
.z-row { clear : both; padding : 0 10px;}

    .z-row:after
    {
        content: " ";
        height: 0;
        clear: both;
        visibility: hidden;
    }
.z-row { zoom : 1; }

/*#endregion*/



/*#region ==========================================================================
    Zozo Grid - columns 
========================================================================== */

    .z-row > [class*="col"]
    {
        margin-left: 1.81818%;
        float: left;
        display: block;
        margin: 1% 0 1% 1.6%;
        margin: 0 0 0 1.6%;
        min-height: 1px;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-bottom: 20px;
    }


.col12  { width : 100%; }
.col11  { width : 91.46%; }
.col10  { width : 83%; }
.col9   { width : 74.54%; }
.col8   { width : 66.08%; }
.col7   { width : 57.62%; }
.col6   { width : 49.16%; }
.col5   { width : 40.7%; }
.col4   { width : 32.24%; }
.col3   { width : 23.78%; }
.col2   { width : 15.32%; }
.col1   { width : 6.86%; }

.z-row > [class*="col"]:first-child { margin-left : 0; }
.z-row > [class*="col"] img { width : 100%; height : auto; display : block; }

/*#endregion*/



/*#region ==========================================================================
    Zozo Grid - Responsive and Mobile
========================================================================== */

@media all and (min-width: 1024px) 
{
	.z-grid-1000 {max-width: 1000px;}
	.z-grid-1000 .z-row {padding: 0;}
}

@media all and (max-width: 768px)
{
    .z-row > [class*="col"]{ float : none; width : auto; margin : 10px 0 10px 0; }       
}

/*#endregion*/