/**
 * Mobile Stylesheet
 * All Mobile Sizes (devices and browser)
 * iPad CSS width 768px (from 768px and up, use desktop view)
 */
@media screen and (max-width: 767px) {

    /**
     * Framework layout
     */
    .wrapperLayout {
        width: 100%;
    }
    .contentLayout {
        width: 98%; /* some gap on left/right of mobile */
        margin: 20px auto 0 auto; /* push down content 20px due to add New Launch FOR HE FOR SHE navi in between */
        float: none; /* needed or else cannot margin-left/right: auto because basic float: left; */
    }
    .sidebarLayout {
        width: 100%; /* needed for FOR HE FOR SHE navi to be in place @top */
    }

    /**
     * Top navigation
     */
    .wrapperNavRed {
        height: 44px; /* same height as .containerNav .logo */
        background-image:url('/images/navi/top-red-mobile.jpg'); /* reduced size */
    }
    .containerNav {
        width: 100%;
        /*white-space: nowrap;
        overflow-y:hidden;
        overflow-x:scroll;*/ /* will cause scroll bar 'lines' */
        /*-webkit-overflow-scrolling:touch;*/
    }
    .containerNav .logo {
        width: 114px;
        height: 44px; /* same height as .wrapperNavRed */
    }
    .containerNav .url {
        display: none;
    }

    .topnav li{
        padding-right: 10px; /* equal space vs desktop version */
    }

    #contact {
        display: none; /* hide clearance sale */
    }

    /**
     * Banners wholesale / clearance
     */
    .bannerTop {
        margin: 30px 0 0 1%;
        width:98%;
        height:auto;
        border:0;
    }


    /**
     * Landing
     */
    #landing_contentLayout {
        width: 98%; /* no .contentLayout in index so use this to padding left/right */
    }

    #banner-slide img {
        width: 100%;
        height: auto;
        margin-top: -45px; /* put the images up to hide lleitmotif newsletter header */
    }

    #subscribe {
        display: block;
        height: 120px;
    }
    #subscribeText, #subscribeInput {
        width: 96%;
        padding: 0;
        margin: 0 auto;
    }

    #subscribeText {
        height: 55px;
        display: block;
        margin: 0 auto;
        padding: 10px 0;
        text-align: center;
    }
    /**
     * CSS - dynamic length text input field and submit button in one row
     * http://stackoverflow.com/questions/17175038/css-dynamic-length-text-input-field-and-submit-button-in-one-row
     */
    #subscribeInput {
        display: table;
    }
    .subscribeInput_cell {
        display: table-cell;
        vertical-align: top; /* or else text box and subscribe button will not be inline in cell */
    }
    .subscribeInput_cell:first-child, input[type="text"] {
        width: 100%;
    }
    #subscribeInput input {
        box-sizing: border-box; /* this is the key */
        width: 100%;
    }


    /**
     * Product List and Detail
     */
    .floatLeft {
        width: 60%; /* long product name will flow 2nd line but not start under RED vertical || */
    }

    h1.headerProduct {
        margin: 3px 0 0 3px; /* red | will not touch the start of screen */
    }

    .productCell {
        width: 50%; /* 2 products per row */
        height: 210px; /* just enu to display 4th line: 'Out of Stock' */
        /*height: auto;*/ /* don't use this or else product image will flow 2nd row */
    }
    .productCell img {
        /* prevent image tee sleeve cut-off for windows phone */
        width: 90% !important; /* less 100% give more gap between the tees sleeve-to-sleeve */
        height: auto;
    }
    .pdListDetails {
        width: 90%; /* width== productCell img + prevent long product name overflow to right product */
    }

    /* hide paging number links */
    .paging_num {
        display: none !important;
    }


    /**
     * Product details
     */
    #imageFront, #imageBack {
        width: 96%; /* less 100% can push up the BUY buttons more due to horizontal view */
        height: auto;
        margin-top: -180px; /* push up FRONT, BACK images */
    }

    #pdDetail-tbl {
        width: 100%;
        margin-top: -180px; /* -180px will cause BUY buttons overlap images FRONT */
    }

    /* .verticalLineR - hide about, size chart, gender image */
    .verticalLineR, #pdDesc, #imagePopup1, #imagePopup2, #shareBtns, #pdRecommend3 {
        display: none;
    }

    .recTablePos {
        width: 96%; /* expand full width 98% or less */
        left: 0; /* cancel the 2.5mm */
        margin-left: auto;
        margin-right: auto;
    }

    #pdRecommend0 img, #pdRecommend1 img, #pdRecommend2 img {
        width: 96% !important; /* resize to fit or else 3rd product will overflow out of screen */
        height: auto;
    }
    #pdRecommend0, #pdRecommend1, #pdRecommend2 {
        width: 33%; /* no longer desktop 25% as hide 4th product */
        height: 180px;
    }


    /**
     * Minicart
     */
    .miniCart table {
        display: none;
        width: 50%; /* occupy 50% width (2<td>/<tr> hard to convert full width with > 2<td>) from default 150px */
        margin-top: 30px; /* pushed down make space for Pagination relocated to bottom */
    }

    #checkoutBtn1 {
        display: none; /* hide desktop version */
    }
    #checkoutBtn2 {
        display: inline; /* show mobile version */
        position: absolute;
        top: 5px;
        right: 5px;
        width: 97px;
        height: 33px;
        border: 0;
    }


    /**
     * Special discount
     */
    #special_discount {
        display: none; /* hide in mobile version */
    }

    /**
     * Search color
     */
    .div-table {
        display: none; /* hide in mobile version */
    }


    /**
     * Footer
     */
    #footer_banner {
        width: 98%; /* as per .contentLayout for padding left/right */
        margin-bottom: 10px; /* more space between banners and FB Like */
        margin-top: 20px; /* push up nearer to bottom pagination */
        /*text-align: center; /* center the 2 banner in mobile version */
    }
    #footer_banner2, #footer_banner3 {
        display: none;
    }

    #footerlmt {
        width: 100%;
        height: 80px; /* overflow to 4 rows assume mobile min-width 320px */
    }

    .footer_links {
        width: 100%;
    }

    #copyright {
        margin: 10px 0 0 1%; /* as per .contentLayout for padding left/right 2% is 1% on each side */
        float: left;
    }


    /**
     * Right navi
     */
    .rightNav {
        width: 100%;
        margin: 0;
        position: absolute;
        top: 66px;
        font-size: 13px;
    }
    .rightNav a {
        padding: 4px 0 3px; /* same height as black top navi */
    }
    .rightNav ul {
        background-color: #FFF; /* needed because expanded menu now displayed over content */
    }

    .styleNewArrival, .styleFORHE, .styleFORSHE {
        width: 33%;
        float: left; /* vertically to horizontal */
    }
    .styleNewArrival {
        width: 34% !important; /* as above 100% not diviable by 3 */
    }

    #menu_body2, #menu_body3 {
        margin-top: 20px; /* push down the SHOW ALL (basically the level 2 categories) as it is displayed beside FOR HE */
    }


    /**
     * Contact
     */
    #contact_complaints {
        display: none;
    }

    .tsc_form_contact_light .form-input, textarea.form-input, label {
        width: 88% !important;
    }

    /**
     * Enquiries
     */
    .enquiriesHeaderYel, .enquiriesHeaderRed, .enquiriesHeaderGreen, .enquiriesHeaderBlue {
        width: 70%;
        padding: 0;
    }
    .enquiriesHeaderYel_click, .enquiriesHeaderRed_click, .enquiriesHeaderGreen_click, .enquiriesHeaderBlue_click {
        width: 30%;
    }

    .termsUse {
        width: 96%;
        padding: 0; /* ignore padding-left:20px desktop ver */
        margin: 0 auto 0 auto; /* center display */
    }


    /**
     * Shopping guide
     */
    #shopping-guide img{
        width: 100%;
        height: auto;
    }

    /**
     * Testimonials
     */
    .containerTestimonial {
        width: 100%;
    }

    .triangle-right, .triangle-left {
        width: 80%;
    }


    /**
     * Checkout Step 1 2 3
     */
    /* Step 1 */
    #frmCart { /* kill wufoo spacing */
        margin: 0;
        padding: 0;
    }
    #checkoutStatus {
        display: none;
    }
    .entryTableHeader {
        display: none;
    }

    .cartReviewTable {
        width: 100% !important;
        border: 1px solid #000;
    }
    .cartReviewTable td {
        /* border: 1px solid #000; */
        display: block;
        text-align: left !important; /* or else bottom Subtotal, Discount etc. will not align */
    }
    .cartReviewTable .rowDivider td { border: 0; }
    .cartReviewTable .rowDivider { border-bottom: 1px solid #dcddde; }



    .cartReviewTable .image {

    }
    .cartReviewTable .name {

    }
    .cartReviewTable .price {

    }
    .cartReviewTable .quantity {

    }
    .cartReviewTable .amount {

    }

    .cartReviewTable .image img {
        width: 100%;
        height: auto;
    }

    .cartReviewTable .price_qty {
        padding: 0;
    }
    .cartReviewTable .remove {
        margin: 0;
        padding-bottom: 20px; /* space after next item */
    }

    /* mobile use only */
    .cartReviewTable .borderBottom {
        border-bottom: 1px solid #dcddde; /* draw line after main item (e.g. Subtotal) each row */
    }

    .cartReviewTable p {
        width: 40%; /* Add a gift card message for that special someone at only SGD$0.50 */
    }

    .cartReviewTable .arrow-left {
        margin-left: 0;
    }
    .cartReviewTable .deliverytime {
        float: left;
        background-color:#F6C240;
    width:40%;
    line-height:21px;
    margin:5px 0 5px;

    }


    /**
     * Success - Thank you
     */
    #thankyou {
        width: 100%;
        margin: 0 auto 0 auto;
        padding-top: 0;
    }

    #thankyou img {
        width: 90%;
        height: auto;
    }

    #paynow, #bow, #faqs{
        display: none;
    }

    #successConfirmation {
        margin: 20px auto 0 auto;
        width: 92%;
        height: 140px;
        padding: 10px;
        border: 1px solid #C0C0C0;
        float: none;
    }

    #orderNo {
        padding-top: 5px; /* overflow 2 lines so use this to mid */
    }
    #orderNo p {
        line-height: 15px; /* overflow 2 lines so must reduce to fix same height 35px */
        width: 190px; /* just enough for "Your order has been processed." to be in 1st line */
        margin: 0 auto 0 auto;
    }

    #receiptGdbye {
        margin: 20px auto 0 auto;
        width: 98%;
    }

    #noteSpam {
        margin: 30px 0 0 1%;
    }

    #shortcutsBank {
        width: 100%;
        margin-left: 1%;
    }

}


/**
 * LANDSCAPE (mainly for ANDROID)
 * overwrite above (add-on) if at least (min-width: 480px)
 * still cap (max-width: 767px), anything more = desktop view
 */
@media screen and (min-width: 480px) and (max-width: 767px) {

    /**
     * Framework layout
     */
    /*.contentLayout {
        margin: 20px auto 0 auto; /* push down content 20px due to add New Launch FOR HE FOR SHE navi in between */
    /*}*/

    /**
     * Top navigation
     */
    #contact {
        display: inline; /* unhide clearance sale in landscape */
    }

    /**
     * Product details
     */
    #imageFront, #imageBack {
        width: 96%; /* less 100% can push up the BUY buttons more due to horizontal view */
        height: auto;
        margin-top: -80px; /* push up FRONT, BACK images */
    }

    #pdDetail-tbl {
        width: 100%;
        margin-top: -80px; /* -180px will cause BUY buttons overlap images FRONT */
    }

    .productCell {
        width: 25%; /* 4 products per row */
        height: 200px;
        /*height: auto;*/ /* don't use this or else product image will flow 2nd row */
    }
    .productCell img {
        /* prevent image tee sleeve cut-off for windows phone */
        width: 90% !important; /* less 100% give more gap between the tees sleeve-to-sleeve */
        height: auto;
    }

    #pdRecommend0, #pdRecommend1, #pdRecommend2 {
        height: 250px; /* more height as bigger image cause below text to hide */
    }
}


/**
 * PORTRAIT (mainly for WINDOWS MOBILE)
 * 1320 black navi overflow 2 rows
 * after testing, max-width: 320px is a fix whereby Xperia S portrait is not affected by below CSS
 */
@media screen and (max-width: 320px) {

    /**
     * Top navigation
     */
    #whatsnew, #contact {
        display: none; /* hide in portrait */
    }
}