/* ============================================================
   ROSLER INTERNATIONAL - RESPONSIVE CSS
   Upload to: /public_html/stylesheets/responsive.css
   Link in:   /public_html/style/rosler/headerinclude.tpl
   ============================================================ */


/* ============================================================
   TABLET - max 960px
   ============================================================ */
@media screen and (max-width: 960px) {

    .container {
        width: 100% !important;
        max-width: 960px;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* Footer was hardcoded to 960px */
    footer {
        width: 100% !important;
    }

    /* Footer boxes - 2 per row */
    #contact .box {
        width: 45% !important;
        box-sizing: border-box;
    }

    #contact .box:first-child {
        padding-right: 10px;
    }

    /* Product description box hardcoded to 918px */
    #product .description-box p {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Checkout heading hardcoded to 600px */
    .checkout > h2 {
        width: 100% !important;
    }
}


/* ============================================================
   MOBILE - max 768px
   ============================================================ */
@media screen and (max-width: 768px) {

    /* --- SKELETON GRID: Force all columns to full width --- */
    .one.column,
    .one.columns,
    .two.columns,
    .three.columns,
    .four.columns,
    .five.columns,
    .six.columns,
    .seven.columns,
    .eight.columns,
    .nine.columns,
    .ten.columns,
    .eleven.columns,
    .twelve.columns,
    .thirteen.columns,
    .fourteen.columns,
    .fifteen.columns,
    .sixteen.columns,
    .one-third.column,
    .two-thirds.column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    .alpha { margin-left: 0 !important; }
    .omega { margin-right: 0 !important; }

    .offset-by-one, .offset-by-two, .offset-by-three,
    .offset-by-four, .offset-by-five, .offset-by-six,
    .offset-by-seven, .offset-by-eight, .offset-by-nine,
    .offset-by-ten, .offset-by-eleven, .offset-by-twelve,
    .offset-by-thirteen, .offset-by-fourteen, .offset-by-fifteen {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .container {
        width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
        overflow: visible !important;
    }

    /* Kill the overflow:scroll on .container:after from style.css */
    .container:after {
        overflow: visible !important;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    .main-wrapper {
        overflow-x: hidden;
    }

    /* All images responsive by default */
    img {
        max-width: 100%;
        height: auto;
    }


    /* ============================================================
       HEADER GRADIENT BAR
       (position:absolute, height:138px in style.css)
       ============================================================ */
    .header-gradient {
        position: relative !important;
        height: auto !important;
        display: none;
    }


    /* ============================================================
       HEADER
       (height:138px in style.css)
       ============================================================ */
    header {
        height: auto !important;
        padding: 10px 0;
    }

    /* LOGO - background image on h1, text hidden via text-indent
       style.css: text-indent:-99999px, background:url(logo.png), height:66px */
    header #logo,
    h1#logo,
    h1#logo.four.columns.alpha {
        width: 200px !important;
        height: 50px !important;
        margin: 0 auto 10px auto !important;
        float: none !important;
        display: block;
        text-indent: -99999px !important;
        background: url('../images/logo.png') no-repeat center !important;
        background-size: contain !important;
    }

    /* RIGHT BOX - override inline style="width:360px;padding-left:340px" */
    header .right-box,
    .six.columns.offset-by-six.omega.right-box {
        width: 100% !important;
        padding-left: 0 !important;
        padding-top: 10px !important;
        margin-left: 0 !important;
        float: none !important;
        clear: both;
    }

    /* SEARCH BAR - override width:260px and margin-left:70px */
    header #form-search {
        width: 90% !important;
        max-width: 320px;
        margin: 0 auto 8px auto !important;
        box-sizing: border-box;
    }

    header .search-field {
        width: 85% !important;
        box-sizing: border-box;
    }

    /* LOGIN BOX - override inline style="width:360px" */
    header #login-box,
    #login-box.six.columns.alpha.omega {
        width: 100% !important;
        text-align: center !important;
        font-size: 12px;
        line-height: 1.8;
    }


    /* ============================================================
       BREADCRUMB
       ============================================================ */
    .breadcrumb {
        font-size: 11px;
        padding: 8px 0;
        word-wrap: break-word;
    }


    /* ============================================================
       NAVIGATION
       style.css: nav > ul > li > a width:145px, float:left
       last-child has float:right
       ============================================================ */
    nav {
        padding-top: 5px !important;
    }

    nav > ul {
        padding: 0;
        margin: 0;
    }

    nav > ul > li {
        float: none !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }

    nav > ul > li:last-child {
        float: none !important;
    }

    nav > ul > li > a {
        width: 100% !important;
        box-sizing: border-box;
        border-radius: 5px;
        padding: 12px 10px !important;
        font-size: 14px;
    }

    /* Sub-navigation dropdowns */
    nav > ul > li > .subnav-cont {
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    .subnav-cont > ul {
        margin-top: 0 !important;
    }

    .subnav-cont > ul > li a {
        width: 100% !important;
        box-sizing: border-box;
        padding: 8px 15px !important;
    }


    /* ============================================================
       SIDEBAR CATEGORIES (#category)
       ============================================================ */
    #category {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px;
    }

    #category > ul > li > a {
        width: 100% !important;
        box-sizing: border-box;
    }

    #category > ul > li > ul li a {
        width: 100% !important;
        box-sizing: border-box;
    }


    /* ============================================================
       PRODUCT DETAIL PAGE (PDP)
       ============================================================ */
    #product {
        width: 100% !important;
    }

    /* Product chart image - override JS: data-width * 0.30 */
    #prodchart {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .product-image-box,
    #product .product-image-box {
        width: 100% !important;
        float: none !important;
        overflow-x: auto;
        text-align: center;
        margin-bottom: 15px;
    }

    .product-info,
    #product .product-info {
        width: 100% !important;
        float: none !important;
        clear: both;
        position: relative;
    }

    #product .product-info h2 {
        float: none !important;
        font-size: 24px;
    }

    #product .product-specs {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    #product .product-specs label {
        width: 40% !important;
    }

    .product-specs li select.prodsel {
        max-width: 55%;
    }

    #product .product-price-box {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
    }

    #product .price-box {
        padding-top: 15px;
    }

    /* Order box - override width:200px and floated children */
    #product .order-box {
        width: 100% !important;
        float: none !important;
        clear: both;
        padding: 15px !important;
        box-sizing: border-box;
        text-align: center;
    }

    #product .order-box label,
    #product .order-box input,
    #product .order-box button,
    #product .order-box span {
        float: none !important;
        display: inline-block;
    }

    #product .order-box button {
        width: 100%;
        max-width: 280px;
        margin-top: 8px;
    }

    /* Description box - override width:918px */
    #product .description-box,
    .description-box.sixteen.columns {
        width: 100% !important;
        float: none !important;
        clear: both;
        margin-top: 15px;
    }

    #product .description-box p {
        width: 100% !important;
        box-sizing: border-box;
    }

    ul#small-category {
        margin-top: 15px;
    }


    /* ============================================================
       PRODUCT LISTING / CATEGORY PAGES
       ============================================================ */
    #product-list {
        width: 100% !important;
    }

    .product-box {
        width: 70px !important;
        height: auto !important;
        margin-bottom: 20px;
    }

    .product-box > a > img {
        max-width: 50px;
    }

    #product-list h2 {
        height: auto !important;
    }


    /* ============================================================
       CART PAGE
       style.css: #shoppingcart .col1 width:500px
       ============================================================ */
    #shoppingcart .col1 {
        width: auto !important;
        max-width: 60%;
    }

    #shoppingcart .col2,
    #shoppingcart .col3,
    #shoppingcart .col4,
    #shoppingcart .col5 {
        width: auto !important;
        min-width: 50px;
    }

    #shoppingcart .row div {
        font-size: 11px;
    }

    .info-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* ============================================================
       POPUP CARTS
       style.css: .popupcart width:500px
       .histpopupcart width:700px, height:600px
       ============================================================ */
    .popupcart {
        width: 95% !important;
        max-width: 500px;
        left: 2.5% !important;
        right: 2.5% !important;
        position: fixed !important;
        top: 10px !important;
        max-height: 90vh;
        overflow-y: auto !important;
        z-index: 9999;
        box-sizing: border-box;
    }

    .histpopupcart,
    .histpopupcart_edit {
        width: 95% !important;
        max-width: 700px;
        height: auto !important;
        max-height: 90vh;
        left: 2.5% !important;
        right: 2.5% !important;
        position: fixed !important;
        top: 10px !important;
        overflow-y: auto !important;
        z-index: 9999;
        box-sizing: border-box;
    }

    .box-cattitle h2.col1,
    #shoppingcart .info-box .box-cattitle h2 {
        width: 100% !important;
    }

    #shoppingcart_edit .col1 {
        width: auto !important;
        max-width: 60%;
    }


    /* ============================================================
       LOGIN PAGE
       ============================================================ */
    #login {
        width: 100% !important;
    }

    #login h1 {
        font-size: 24px;
    }


    /* ============================================================
       REGISTER PAGE
       style.css: #register ul.form li float:left, margin-right:100px
       ============================================================ */
    #register {
        width: 100% !important;
    }

    #register ul.form li,
    #edit ul.form li {
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }

    /* Form inputs - override width:300px, 730px, 320px */
    input.form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    input.form.long {
        width: 100% !important;
        box-sizing: border-box;
    }

    select.form {
        width: 100% !important;
        box-sizing: border-box;
    }


    /* ============================================================
       DASHBOARD
       ============================================================ */
    #dashboard {
        width: 100% !important;
    }

    #dashboard-menu,
    #dashboard-content {
        width: 100% !important;
        float: none !important;
    }

    .box1 {
        float: none !important;
        width: 100% !important;
    }

    .box1:first-child {
        margin-right: 0 !important;
        margin-bottom: 15px;
    }


    /* ============================================================
       CHECKOUT
       style.css: various fixed widths (500px, 200px, 100px)
       ============================================================ */
    .checkout {
        width: 100% !important;
    }

    .checkout > h2 {
        width: 100% !important;
        font-size: 18px;
    }

    .ckform input {
        width: auto !important;
    }

    .ckform > #difshipadd > #address,
    .ckform > #bilshipadd > #address {
        width: 100% !important;
        box-sizing: border-box;
    }

    .ckform > #difshipadd > #name,
    .ckform > #difshipadd > #city,
    .ckform > #difshipadd > #zipcode,
    .ckform > #difshipadd > #state,
    .ckform > #bilshipadd > #name,
    .ckform > #bilshipadd > #city,
    .ckform > #bilshipadd > #zipcode,
    .ckform > #bilshipadd > #state {
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 8px;
    }


    /* ============================================================
       SEARCH / ADVANCED SEARCH
       ============================================================ */
    #advsearch li input {
        width: 100% !important;
        box-sizing: border-box;
    }

    .searchsel {
        width: 100% !important;
        box-sizing: border-box;
    }

    #srch_filter {
        width: 100% !important;
        box-sizing: border-box;
    }


    /* ============================================================
       SPECIALS / STATIC PAGES / SLIDESHOW
       ============================================================ */
    #content {
        width: 100% !important;
        padding-top: 15px;
    }

    #slideshow {
        height: auto !important;
    }


    /* ============================================================
       FOOTER
       style.css: footer width:960px !important
       #contact .box width:168px, float:left
       .footer-bg height:180px
       .main-wrapper margin-bottom:-168px
       ============================================================ */
    .main-wrapper {
        margin-bottom: 0 !important;
    }

    .main-wrapper:after {
        height: auto !important;
    }

    .footer-bg {
        height: auto !important;
    }

    footer,
    footer.sixteen.columns {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 15px 12px !important;
        box-sizing: border-box;
    }

    #contact {
        width: 100% !important;
    }

    #contact .box {
        width: 100% !important;
        float: none !important;
        padding: 10px 0 !important;
        box-sizing: border-box;
    }

    #contact .box:first-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #contact .box .box-header {
        height: auto !important;
    }

    .footer-note {
        text-align: center;
        padding: 10px 0;
    }

    /* Tables */
    table {
        max-width: 100%;
    }

    .form-ordered {
        overflow-x: auto;
    }
}


/* ============================================================
   SMALL MOBILE - max 480px
   ============================================================ */
@media screen and (max-width: 480px) {

    .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Logo smaller */
    header #logo,
    h1#logo {
        width: 160px !important;
        height: 40px !important;
    }

    header #form-search {
        width: 95% !important;
    }

    header .search-field {
        width: 80% !important;
    }

    header #login-box {
        font-size: 11px;
    }

    nav > ul > li > a {
        font-size: 13px;
        padding: 10px 8px !important;
    }

    #product .product-info h2 {
        font-size: 20px;
    }

    #product .price-box {
        font-size: 14px;
    }

    #product .order-box button {
        width: 100%;
    }

    #contact .box {
        text-align: center;
    }

    footer address {
        text-align: center;
    }
}