//
//  12-column grid system
//



//
//  Common
//  _____________________________________________

& when (@media-common = true) {



/* Grid units
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.grid12-1,
.grid12-2,
.grid12-3,
.grid12-4,
.grid12-5,
.grid12-6,
.grid12-7,
.grid12-8,
.grid12-9,
.grid12-10,
.grid12-11,
.grid12-12,
.grid-full, /* Alias for full-width unit */

/* Special grid units */
.grid-col2-sidebar,
.grid-col2-main
{ 
    /*position:relative;*/
    display:inline;
    float:left;
    margin-left:1%;
    margin-right:1%;
}

/* Basic grid units width */
.grid12-1   { width:6.33%; }
.grid12-2   { width:14.66%; }
.grid12-3   { width:23%; }
.grid12-4   { width:31.33%; }
.grid12-5   { width:39.67%; }
.grid12-6   { width:48%; }
.grid12-7   { width:56.33%; }
.grid12-8   { width:64.67%; }
.grid12-9   { width:73%; }
.grid12-10  { width:81.33%; }
.grid12-11  { width:89.67%; }
.grid12-12,
.grid-full  { width:98%; }

/* Grid units without left gutter (margin) */
.no-left-gutter.grid12-1    { margin-left:0; width:7.33%; }
.no-left-gutter.grid12-2    { margin-left:0; width:15.66%; }
.no-left-gutter.grid12-3    { margin-left:0; width:24%; }
.no-left-gutter.grid12-4    { margin-left:0; width:32.33%; }
.no-left-gutter.grid12-5    { margin-left:0; width:40.67%; }
.no-left-gutter.grid12-6    { margin-left:0; width:49%; }
.no-left-gutter.grid12-7    { margin-left:0; width:57.33%; }
.no-left-gutter.grid12-8    { margin-left:0; width:65.67%; }
.no-left-gutter.grid12-9    { margin-left:0; width:74%; }
.no-left-gutter.grid12-10   { margin-left:0; width:82.33%; }
.no-left-gutter.grid12-11   { margin-left:0; width:90.67%; }
.no-left-gutter.grid12-12,
.no-left-gutter.grid-full   { margin-left:0; width:99%; }

/* Grid units without right gutter (margin) */
.no-right-gutter.grid12-1   { margin-right:0; width:7.33%; }
.no-right-gutter.grid12-2   { margin-right:0; width:15.66%; }
.no-right-gutter.grid12-3   { margin-right:0; width:24%; }
.no-right-gutter.grid12-4   { margin-right:0; width:32.33%; }
.no-right-gutter.grid12-5   { margin-right:0; width:40.67%; }
.no-right-gutter.grid12-6   { margin-right:0; width:49%; }
.no-right-gutter.grid12-7   { margin-right:0; width:57.33%; }
.no-right-gutter.grid12-8   { margin-right:0; width:65.67%; }
.no-right-gutter.grid12-9   { margin-right:0; width:74%; }
.no-right-gutter.grid12-10  { margin-right:0; width:82.33%; }
.no-right-gutter.grid12-11  { margin-right:0; width:90.67%; }
.no-right-gutter.grid12-12,
.no-right-gutter.grid-full  { margin-right:0; width:99%; }

/* Grid units without any gutter (margin) */
.no-gutter.grid12-1     { margin-left:0; margin-right:0; width:8.33%; }
.no-gutter.grid12-2     { margin-left:0; margin-right:0; width:16.66%; }
.no-gutter.grid12-3     { margin-left:0; margin-right:0; width:25%; }
.no-gutter.grid12-4     { margin-left:0; margin-right:0; width:33.33%; }
.no-gutter.grid12-5     { margin-left:0; margin-right:0; width:41.67%; }
.no-gutter.grid12-6     { margin-left:0; margin-right:0; width:50%; }
.no-gutter.grid12-7     { margin-left:0; margin-right:0; width:58.33%; }
.no-gutter.grid12-8     { margin-left:0; margin-right:0; width:66.67%; }
.no-gutter.grid12-9     { margin-left:0; margin-right:0; width:75%; }
.no-gutter.grid12-10    { margin-left:0; margin-right:0; width:83.33%; }
.no-gutter.grid12-11    { margin-left:0; margin-right:0; width:91.67%; }
.no-gutter.grid12-12,
.no-gutter.grid-full    { margin-left:0; margin-right:0; width:100%; }


/* Utility classes
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* Units with no gutter (margin): alpha - first unit in a row, omega - last unit in a row */
.alpha { margin-left:0; }
.omega { margin-right:0; }

/* Hide element if screen width is lower than the width specified in the class name */
.hide-below-1680 { display:none !important; }
.hide-below-1440 { display:none !important; }
.hide-below-1360 { display:none !important; }
.hide-below-1280 { display:none !important; }


/* Grid units containers
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* Grid units container:
   clears floats (place grid units inside "div" with this class)
-------------------------------------------------------------- */
.grid-container { *zoom: 1; clear: both; }
.grid-container:before,
.grid-container:after { display: table; line-height: 0; content: ""; }
.grid-container:after { clear: both; }

/* Grid unit container:
   clears floats and adds vertical margin between units
-------------------------------------------------------------- */
.grid-container-spaced { *zoom: 1; clear: both; }
.grid-container-spaced:before,
.grid-container-spaced:after { display: table; line-height: 0; content: ""; }
.grid-container-spaced:after { clear: both; }
.grid-container-spaced .grid12-1,
.grid-container-spaced .grid12-2,
.grid-container-spaced .grid12-3,
.grid-container-spaced .grid12-4,
.grid-container-spaced .grid12-5,
.grid-container-spaced .grid12-6,
.grid-container-spaced .grid12-7,
.grid-container-spaced .grid12-8,
.grid-container-spaced .grid12-9,
.grid-container-spaced .grid12-10,
.grid-container-spaced .grid12-11,
.grid-container-spaced .grid12-12,
.grid-container-spaced .grid-full
{
    margin-bottom: 2%;
}

/* Grid presentation
-------------------------------------------------------------- */
.show-grid [class*="grid12-"] {
    background-color: #eee;
    text-align: center;
    min-height: 40px;
    line-height: 40px;
    transition:         all 300ms ease-in-out;
    -moz-transition:    all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition:      all 300ms ease-in-out;
}
.show-grid [class*="grid12-"]:hover {
    background-color: #F08080;
}



} /* end: media-common */
