/* MOBILE CSS - 2013 */

/* MEDIUM SIZE */

@media (max-width: 900px)
{
    .row
    {
        margin: -20px -10px 0 -10px;
    }

    .row .col
    {
        padding: 0 10px;
    }    
    
    .row .m-1
    {
        width: 8.3333%;
    }

    .row .m-2
    {
        width: 16.6667%;
    }

    .row .m-3
    {
        width: 25%;
    }

    .row .m-4
    {
        width: 33.3333%;
    }

    .row .m-5
    {
        width: 41.6667%;
    }

    .row .m-6
    {
        width: 50%;
    }

    .row .m-7
    {
        width: 58.3333%;
    }

    .row .m-8
    {
        width: 66.6667%;
    }

    .row .m-9
    {
        width: 75%;
    }

    .row .m-10
    {
        width: 83.3333%;
    }

    .row .m-11
    {
        width: 91.67%;
    }

    .row .m-12
    {
        width: 100%;
    }

    .row .l-br
    {
        clear: none;
    }

    .row .m-br
    {
        clear: both;
    }
    
    .l-hide
    {
        display: block;
    }
    
    .m-hide
    {
        display: none;
    }
    
    body 
    {
        background-color: #ffffff;
    }

    div#adminArea-bg
    {
        display: none;
    }

    div#page
    {
        padding: 10px; 
    }

    div#topselectors
    {
        display: none;
    }
    
    div#logo
    {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .page-width
    {
        width: auto;
    }

    div#header-bg
    {
        margin-bottom: 20px;
    }
    
    div#page.design-wide .page-width
    {
        padding: 0 10px;
    }
    
    nav#extramenu, div#searchbox
    {
        display: none;
    }

    div#mobilemenu-control a
    {
        display: block;
    }
    
    nav#headermenu
    {
        margin-top: 15px;
        display: block;
    }
   
    div#headermenu-dropdown-bg
    {
        display: block;
    } 
    
    div#content-middle
    {
        margin-bottom: 0;
    }

    section#content-center
    {
        margin-bottom: 20px;
    }

    header
    {
        min-height: 70px !important;
    }
    
    div#logo
    {
        position: static;
        float: left;
        margin-bottom: 0;
    }

    div#logo span.image
    {
        width: 128px;
        height: 40px;
    }
    
    nav#extramenu
    {
        margin: 0 0 10px 0;
    }

    div#searchbox
    {
        bottom: 10px;
    }

    div#topmenu-bg
    {
        border: none;
        display: none;
    }

    nav#path
    {
        padding: 0;
    }
    
    section#content-left
    {
        display: none;
    }

    section#content-right
    {
        width: 33.3333%;
    }

    section#content-left nav#sidemenu
    {
        display: none;
    }
    
    section#content-center
    {
        padding-left: 0;
    }
    
   
    /* CONTENT */

    div.slideshow
    {
    }
    
    div.slideshow img
    {
        width: 100% !important;
        height: auto !important;
    }

    div.class-slidebanner div.banner-overlay
    {
        background-color: #f0f0f0;
        position: static;
    }

    div.class-slidebanner .hovershow
    {
        display: block !important;
    }
    
    div.mobile-crop
    {
        width: auto;
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
        position: relative;
    }
    
    div.mobile-crop img
    {
        width: 200% !important;
        position: relative;
        left: -50%;
    }

    div.class-frontpagebanner div.attribute-title h2
    {
        font-size: 1.6rem;
        font-weight: normal;
        padding: 5px 10px;
    }
    
    div.class-frontpagebanner div.attribute-short p
    {
        font-size: 1.3rem;
        padding: 0 10px 10px 10px;
    }
   
    div.infobox
    {
        font-size: 1.3rem;
        margin: 0 0 20px 0;
    }
    
    section#content-right div.infobox:last-child
    {
        margin-bottom: 0;
    }
    
    div.content-view-box div.attribute-title h3
    {
        font-weight: normal;
    }

    div.attribute-link
    {
        font-size: 1.3rem;
    }

     .m-1 div.content-view-block div.attribute-title h2, .m-2 div.content-view-block div.attribute-title h2
    {
        font-size: 1.3rem;
    }
    
    .m-3 div.content-view-block div.attribute-title h2, .m-4 div.content-view-block div.attribute-title h2
    {
        font-size: 1.6rem;
    }
}


/* MINIMUM SIZE */

@media (max-width: 600px)
{

    .row
    {
        margin: -20px -5px 0 -5px;
    }

    .row .col
    {
        padding: 0 5px;
    }    
    
    .row .s-1
    {
        width: 8.3333%;
    }

    .row .s-2
    {
        width: 16.6667%;
    }

    .row .s-3
    {
        width: 25%;
    }

    .row .s-4
    {
        width: 33.3333%;
    }

    .row .s-5
    {
        width: 41.6667%;
    }

    .row .s-6
    {
        width: 50%;
    }

    .row .s-7
    {
        width: 58.3333%;
    }

    .row .s-8
    {
        width: 66.6667%;
    }

    .row .s-9
    {
        width: 75%;
    }

    .row .s-10
    {
        width: 83.3333%;
    }

    .row .s-11
    {
        width: 91.67%;
    }

    .row .s-12
    {
        width: 100%;
    }

    .row .l-br, .row .m-br
    {
        clear: none;
    }

    .row .s-br
    {
        clear: both;
    }

    .m-hide
    {
        display: block;
    }

    .s-hide
    {
        display: none;
    }

    table.responsive-transform tr:first-child th
    {
        display: none;
    }

    table.responsive-transform tr
    {
        display: block;
        position: relative;
    }

    table.responsive-transform tr:nth-child(2n+0)
    {
        background-image: linear-gradient( to right, #a0a0a0, #a0a0a0 50%, #f0f0f0 50.0%);
    }

    table.responsive-transform tr:nth-child(2n+1)
    {
        background-image: linear-gradient( to right, #a0a0a0, #a0a0a0 50%, #d0d0d0 50.0%);
    }

    table.responsive-transform td:before, table.responsive-transform td > div
    {
        display: inline-block;
        vertical-align: middle;
    }

    table.responsive-transform td:before
    {
        content: attr(data-th);
        width: 100%;
        font-weight: bold;
        color: #ffffff;
        margin-left: -100%;
        padding-right: 10px;
    }

    table.responsive-transform td
    {
        padding-left: 50%;
        display: block;
        border-bottom: 1px solid #808080;
    }

    table.responsive-transform td > div:before
    {
        content: '';
        width: 1px;
        background-color: #808080;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 50%;
    }

    table.responsive-transform td > div
    {
        padding-left: 10px;
    }

    div#page
    {
        padding-right: 10px;
        padding-left: 10px;
    }

    div#topselectors
    {
        display: none;
    }

    section#content-center, section#content-right
    {
        width: auto;
        display: block;
    }
    
    section#content-center
    {
        padding-right: 0;
    }
    
    section#content-right
    {
        padding-left: 0;
    }
    
    section#content-right div.row div.col.s-6:nth-child(odd)
    {
        clear: left;
    }

    div.mobile-crop
    {
        width: 100%;
    }

    div.content-view-line div.attribute-image
    {
        width: 40%;
    }
   
    nav#extramenu li
    {
        border: none;
        float: none;
    }
    
    div#usermenu-dropdown div.grid-table, div#usermenu-dropdown div.row-table, div#usermenu-dropdown div.col-table
    {
        display: block;
    }

    div#usermenu-dropdown div.row-table + div.row-table
    {
        margin-top: 15px;
    }
   
    div#usermenu-dropdown div.col-table
    {
        width: 100%;
        padding: 0 !important;
    }

    div#usermenu-dropdown div.col-table + div.col-table
    {
        margin-top: 10px;
    }
    
    div#usermenu-dropdown div.col-table.width-min
    {
        margin-top: 15px;
    }

    .s-12 div.content-view-block div.attribute-title h2
    {
        font-size: 2rem;
    }
    
    .s-6 div.content-view-block div.attribute-title h2
    {
        font-size: 1.6rem;
    }
}

@media (max-width: 400px)
{
    .row .xs-1
    {
        width: 8.3333%;
    }

    .row .xs-2
    {
        width: 16.6667%;
    }

    .row .xs-3
    {
        width: 25%;
    }

    .row .xs-4
    {
        width: 33.3333%;
    }

    .row .xs-5
    {
        width: 41.6667%;
    }

    .row .xs-6
    {
        width: 50%;
    }

    .row .xs-7
    {
        width: 58.3333%;
    }

    .row .xs-8
    {
        width: 66.6667%;
    }

    .row .xs-9
    {
        width: 75%;
    }

    .row .xs-10
    {
        width: 83.3333%;
    }

    .row .xs-11
    {
        width: 91.67%;
    }

    .row .xs-12
    {
        width: 100%;
    }
}