/*
//
// ***** This file applies responsive styles for the Aug '13 redesign only *****
//
*/

/* Homepage columns wrap from 4 to 3 */
@media screen and (max-width: 975px) {

    .home #main-content {

        width: 100%;

    }

    .promo-items {

        /* One promo item is 220px wide with 20px of margin */
        width: 720px;
        margin: 0 auto;

    }

    .promo-items li {

        /* Equalise margin on left/right of each promo block */
        margin: 0 10px 13px 10px;

    }

    /* Move footer from 4 columns to 3 */
    #document-footer {

        width: 720px;
        padding-left: 0;
        padding-right: 0;

    }

    /* Stop the search box from covering the screen yet */
    .footer-search {

        width: 700px;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 30px;

    }

    /* Expand the search input field */
    .footer-search input {

        width: 85%;

    }

    /* Equalise footer margins */
    .footer-search, .footer-content-block {

        margin-left: 10px;
        margin-right: 10px;

    }

    /* Gap to separate Connect and Location panels */
    #document-footer .connect { margin-bottom: 30px; }

    /* Separate copyright notice and final list of links, so list can wrap */
    #document-footer .copy {

        float: none;
        margin-bottom: 10px;

    }

    /* Vertically separate links if they do wrap */
    .footer-links li {

        margin-bottom: 6px;

    }

}

/* Less than 960px 'desktop' width */
@media screen and (max-width: 960px) {

    nav#primary {

        /* Main nav, no longer fixed width */
        margin: 0 14px;
        width: auto;

    }

    nav#primary ul li.first a {

        /* Old styles gave some left padding, kill it to retain centring */
        padding-left: 0px;

    }

    nav#primary ul li.nochildren a:hover {

        /* Old styles override - retain white hover */
        background: #fff;

    }

    nav#primary ul li, nav#primary ul li.nochildren {

        width: 20%;

    }

    nav#primary ul li a {

        font-size: 15px;

    }

    nav#primary .subnav {

        /* Realign the subnav to the now less-tall main nav */
        top: 40px;

    }

    nav#primary .subnav ul {

        /* Remove fixed width from subnav */
        width: auto;

    }

    nav#primary .subnav ul li a span {

        /* Reduce font-size in subnav links, reduce space between each one */
        font-size: 14px;
        padding: 0 15px;

    }

    nav#primary .subnav.multipleChildren ul.first {

        /* Multilevel subnav - remove background photo and padding it caused */
        background: none;
        padding-left: 0;

    }

    #top-container {

        /* Remove lower margin added in old responsive styles */
        margin-bottom: 0px;

    }

    /*  Captions in hero block */
    .hero-caption {

        width: auto;
        margin: 0 14px;

        /*  Align to top not bottom */
        bottom: 0;
        top: 20px;

    }

    /* Remove width restriction on captions */
    .hero-more-title {


        font-size: 40px;
        margin-bottom: 20px;

    }

    .hero-more-title span{
        line-height: 60px;
    }

}

/* Tablet portrait (ish, remeber to account for orientation) */
@media screen and (max-width: 768px) {

    /* Shrink caption size further and reposition */
    .hero-caption {

        top: 10px;

    }

    .hero-more-title {

        font-size: 30px;
        margin-bottom: 20px;

    }

    .hero-more-title span{
        line-height: 48px;
    }

    /* Homepage columns wrap from 3 to 2 */
    .promo-items {

        /* One promo item is 220px wide with 20px of margin */
        width: 480px;

    }

    /* Same for footer columns */
    #document-footer { width: 480px; }
    .footer-search { width: 460px; }

}

/* Mobile nav kicks in */
@media screen and (max-width: 640px) {

    /* Keep global links in header in position related to the logo */
    #globallinks { margin-right: 231px; }

    .site-search a.global-link {

        padding-right: 0px;
        padding-top: 11px;
        margin-left: 8px;

    }

    #nav-container {

        /* Remove lower black border that appeared under the nav */
        border: none;

    }

    /* Restore mobile nav dropdown styles */
    nav#primary { margin: 0; }

    nav#primary ul li, nav#primary ul li.nochildren { width: 100%; text-align: left; }

    nav#primary ul li a, nav#primary ul li.nochildren a {

        border: none;
        padding-left: 18px;
        text-transform: none;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
        color: #fff;

    }

    nav#primary ul li.nochildren a:hover {

        /* Override the override (!) - restore grey hover on nochildren items */
        background: #2c2c2c;

    }

    nav#primary ul li.lastlink a {

        border-right: none;

    }

    nav#primary ul li a.active {

        /* Override white background on active links (only used on desktop) */
        background: #363636;

    }

    nav#primary ul li a.active:hover {

        background: #2c2c2c;

    }

    .mobile-nav-controls {

        /* Mobile nav overflowing due to missing vendor prefixes in Bootstrap */
        -webkit-box-sizing: border-box;
        -moz-box-sizing:    border-box;
        box-sizing:         border-box;

        border-bottom: solid 1px #ccc;
        border-top: none;
    }

    /* Move hero captions to below the hero image */
    .hero-caption {

        position: static;
        background: #cdcccc;
        margin: 0;

        /* Enough bottom padding to reveal the inline more-link button below */
        padding: 0 14px 26px 14px;

    }

    .hero-more-title {
        padding: 10px 0 13px;
        max-width: 100%;
    }

    .hero-more-title span {

        background: none;
        line-height: 36px;
        display: block;
        padding: 0px 0 0px 0;
        
    }

    .hero-more-title br {
        display: none;
    }

    /* Fix gap under footer search */
    .site-search.footer-search {

        margin-bottom: 30px;

    }


}

/* Header content starts to wrap */
@media screen and (max-width: 530px) {

    /* Stop global links wrapping */
    #globallinks { margin-right: 0; }

    /* Reduce the size of the logo and re-align it */
    #document-header .hitachi-logo {

        width: 131px;
        margin-top: 0px;

    }

}

/* Homepage columns wrap from 2 to 1 */
@media screen and (max-width: 512px) {

    .promo-items {

        /* One promo item is 220px wide with 20px of margin */
        width: 240px;

    }

    /* Remove forced height in single column display. Add bottom margin to give space for the absolutely positioned link */
    .promo-items a {
        height: inherit;
        margin-bottom: 40px;
    }
    /* Double width promo block forced back to single width */
    .promo-items li.doublewidth {
        width: 220px;
    }
    .promo-items li.doublewidth img {
        overflow: hidden;
        width: inherit;
        height: 100%;
    }
    .homepromosubtitle {
        display: none;
    }

    /* Switch to the standard width images */
    .doublewidth img.single {
        display: block;
    }
    .doublewidth img.double {
        display: none;
    }

    /* Same for footer columns */
    #document-footer { width: 240px; }
    .footer-search { width: 220px; }
    .footer-search input { width: 170px; }

}

/* Mobile phone landscape (not desktop!) */
@media only screen and (device-width : 320px) and (orientation : landscape) {

    /* Make home promo blocks fit into two columns */
    .promo-items { width: 480px; }
    .promo-items li { margin-left: 0; margin-right: 10px; }

    /* Same for the footer */
    #document-footer { width: 480px; }
    .footer-search { width: 460px; }
    .footer-search input { width: 85%; }

}

/* Mobile phone landscape */
@media screen and (max-width: 480px) {

    /* Reduce left borders in header */
    #siteswitcher { margin-left: 0; }
    #document-header .hitachi-logo-main { margin-left: 0; }

    /* Override styles in hitatchi-responsive.css that further shrink the logo */
    #globallinks {

        width: auto;
        float: none;

    }

    .hitachi-logo img {

        width: auto;

    }

    #document-header img {

        padding-bottom: 0;

    }

    .home #main-content {

        /* No need to reduce gap above main content on homepage */
        padding-top: 24px;

    }

}

/* Header needs to wrap */
@media screen and (max-width: 380px) {

    /* Shrink the Rail logo */
    #document-header .hitachi-logo-main {

        width: 150px;
        height: auto;
        padding-top: 2px;
        padding-bottom: 16px;

    }

}

/* Really small phones */
@media screen and (max-width: 320px) {

    body {

        /* Override Bootstrap minimum width, for old phones less than 240px */
        min-width: 240px;

    }

    #document-header .hitachi-logo-main {

        /* Centre the rail logo */
        margin: 0 auto;
        float: none;
        width: 185px;

    }

    #document-header .hitachi-logo {

        /* Centre the Hitachi logo */
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;

    }

    #document-header img {

        float: none;

    }

    .hitachi-logo img {

        width: 131px;

    }

}

/* Mobile phone potrait (not desktop!) */
@media only screen and (device-width : 320px) and (orientation : portrait) {

    #document-header .hitachi-logo-main {

        float: left;
        width: 135px;

    }

    #document-header .hitachi-logo {

        /* Align the Hitachi logo right */
        float: right;

    }

}

/* Global links at top will wrap */
@media screen and (max-width: 260px) {

    #globallinks {

        float: right;
        margin: 10px 0 13px 0;

    }

    .site-search a.global-link {

        float: right;
        display: block;
        height: auto;
        padding-top: 3px;

    }

}