/* Hitachi Responsive stylesheet

Using fluid layouts for responsiveness and natural breakpoints.

We're using 4 breakpoints:
    < 960px
    820px (for scaling navigation)
    640px
    < 480px
*/

/********************************* Small Desktop **************************************/

@media screen and (min-width: 960px) {
    nav#primary {
        display:block !important;
    }
    #home-carousel li {
        margin-right:2%;
        width:23% !important;
    }
}

@media screen and (max-width: 960px) {

    /* General spacing */

    #document-header,
    .site-search,
    #document-footer,
    #home-news-container,
    #projects-container,
    #top-container,
    #products-container,
    #services-container,
    #footer-links {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        padding:0 15px;
        width:100%;
    }

    #wrapper, #nav-container,
    #main-container {
        width:100%;
    }

    /* Header */

    nav#primary ul li.first a{
        padding-left:15px;
    }

    .touch nav#primary a:hover {
        background:none;
    }

    nav#primary ul li.nochildren a:hover {
        background:#333;
    }

    /* Footer */

    #footer-container {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        padding-bottom:10px;
        width:100%;
    }

    #document-footer {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        padding:15px;
    }

    /* Home page layout */

    .home-news, #projects, #products {
        width:100%;
    }

        .home-news .wrapper {
            background:none;
        }

        .home-news article, #projects article {
            background:#beb9b9;
            border:solid 1px #A59C9D;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing:border-box;
            margin-right:2%;
            width:48%;
        }

    #homewrapper #top-container {
        padding:0;
    }

    #top-container {
        margin-bottom:10px;
        padding-bottom:12px;
    }

    /* Home page hero */

     #hero {
        height:auto;
    }

        #hero .hero-nav {
            display:none;
        }


    #hero-main {
        margin-left:23%;
        width:75%;
    }

        #hero-main img {
            height:auto;
            max-width:100%;
        }

        #hero-main div {
            position:relative;
        }

        #hero-main div.hero-block-text {
            background: #8A1400;
            height: auto;
            left: 0;
            top:0;
            width:100%;
        }

        #hero-main h1 {
            background:none;
            font-size:2.8em;
            position:relative;
            margin-left:0;
        }

        #hero-main p.standfirst {
            box-shadow:none;
            font-size:1.4em;
            padding:5px 10px;
            margin-left:0;
        }

        #hero ul.hero-nav {
            display:block;
            float: left;
            padding:0 2%;
            position: absolute;
            width: 21%;
        }

            #hero ul.hero-nav li {
                height:auto;
            }

            #hero ul.hero-nav li a {
                background:url('../images/hero-tab-bg.jpg');
                border-bottom:solid 1px #696969;
                float:none;
                font-size:1.7em;
                line-height:1.5em;
                padding:20px 10px;
            }

            #hero ul li.active a, #hero ul li:hover a {
                background:url(../images/hero-tab-active2.jpg) repeat-x;
            }

            #hero ul.mobile-hero-nav li:last-child a {
                padding-right:0;
            }

            #hero ul li.active, #hero ul li:hover {
                background:none;
                width:100%;
            }

            #hero-main div.hero-block-text {

            }

            #hero-main .hero-block-text:hover .standfirst
            {
                background-color: #600;
            }

            #hero-main .hero-block-text:hover h1 {
                background: #600;
            }

            #hero-main div.hero-block-text:hover {
                background:#600;
            }

    /* Home page slider */

    .elastislide-horizontal nav span {
        top: 50%;
        left: 10px;
        margin-top: -11px;
    }

    .elastislide-horizontal nav span.elastislide-next {
        right: 5px;
        left: auto;
    }

    /* General content */

    #main-content {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        padding:24px 15px 0 15px;
        width:100%;
    }

    #right-nav {
        padding-left:15px;
        width:20%;
    }

    #general-main,
    #product-left {
        padding-right:0;
        width:75%;
    }

    #general-top,
    #general-wide{
        width:100%;
    }

        #general-top img {
            max-width:100%;
        }

     #general-left {
        float:left;
        margin-right:0;
        width:65%;
    }

    .calloutright {
        width:100%;
    }

    #rhcol {
        float:right;
        width:28%;
    }

    div.crumbtrail {
        font-size:12px;
        line-height:17px;
        width:100%;
    }

    ol.crumbtrail {
        height:auto;
    }

    /* Projects, products and services page */

    ul#hitachi-experience {
        width:100%;
    }

        ul#hitachi-experience li {
            margin-left:0;
            margin-right:3%;
            width:47%;
        }

        /* Prevent odd floating due to content length */

        ul#hitachi-experience li:nth-child(odd) {
            clear:left;
        }

        ul#hitachi-experience li.last {
            margin-right:0;
        }

    #projects article {
        margin-left:0;
    }

        #products .htmltext,
        #service-list ul {
            margin-left:0;
            padding-left:0;
        }

        #projects img {
            max-width:36%;
        }

        #projects .project-info {
            width:60%;
        }

        #projects .more-info {
            width:35%;
        }

    #product-detail {
        width:100%;
    }

    /* Project page */

    .videocontainer,
    .videotitletext,
    .videocontainer a.videoimagelink,
    .videocontainer img,
    .fullsize img {
        max-width:100%;
    }

    /* Product page */

    #product-left article {
        width:65%;
    }

    #product-left .summaryimage {
        width:30%;
    }

        #product-left .summaryimage img {
            max-width:100%;
        }

    #factfile {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        width:100%;
    }

    /* List four block section */

    #services, .oneleft #rail-systems {
        width:100%;
    }

    /* Resources (and press listing) */

    #resource-listing {
        padding-right:0;
        width:100%;
    }

        #resource-listing h2 {
            font-size:1.8em;
            line-height:1.3em;
        }

        .list-image {
            width:25%;
        }

            .list-image img{
                -webkit-box-sizing:border-box;
                -moz-box-sizing:border-box;
                box-sizing:border-box;
                max-width:100%;
            }

            .list-image h4 {
                font-size:1.2em;
                height:auto;
                width:100%;
                -webkit-box-sizing:border-box;
                -moz-box-sizing:border-box;
                box-sizing:border-box;
            }

            .image-label {
                font-size:1.3em;
            }

        .resource-item .resource-info {
            width:40%;
        }

        .resource-meta {
            width:23%;
        }

    /* Press release listing */

    .press-list-item .article-details h4 {
        margin-bottom:5px;
    }

    /* Press release page (with centre column) */

    .press-release-page #general-left {
        width:46%;
    }

    .press-release-page #centre-column {
        width:22%;
        margin-left:3%;
        margin-right:0;
    }

}

/* ----------------- SCALING NAVIGATION ----------------- */


@media screen and (max-width: 820px) {

    nav#primary ul li {
        font-size:1.3em;
        padding:0;
    }

    nav#primary {
        display:block;
    }

}


/* ----------------- SMALL TABLET -> PHONE ----------------- */

@media screen and (max-width: 640px) {

    /* Header */

    .site-search a.global-link {
        background:none;
        float:right;
        font-weight:normal;
        padding:0;
        margin-left:15px;
    }

        .site-search a.global-link:hover {
            background:none;
        }

    #globallinks {
        margin-right:0;
    }

    /* Primary navigation */

    #nav-container {
        border-top:0;
        border-bottom:solid 1px #666;
        width:100%;
    }

    nav#primary {
        display:none;
        width:100%;
    }

        nav#primary ul li{
            display:block;
            float:none;
            height:auto;
        }

        nav#primary ul li a,
        nav#primary ul li.nochildren a {
            background:#363636;
            margin-left:0;
            margin-top:0;
            padding:10px 15px;
            width:100%;
        }

        nav#primary ul li a:hover,
        nav#primary ul li.active a,
        nav#primary ul li.nochildren a:hover,
        nav#primary ul li.nochildren.active a {
            background:#2c2c2c;
            color:#fff;
        }

    .mobile-nav-controls {
        border-bottom:solid 1px #333;
        border-top:solid 1px #CCC;
        box-sizing:border-box;
        display:block;
        padding:0 15px;
    }

    .subnav {
        display:none !important; /* I'm sorry */
    }

    #toggle-nav {
        background:url('../images/nav-slide-icon.png') left no-repeat;
        float:right;
        padding:14px 0;
        text-decoration:none;
        width:100%;
    }

        #toggle-nav span {
            color:#fff;
            display:block;
            font-size:1.3em;
            font-weight:bold;
            padding:3px 0 0 30px;
        }

    /* Home page */

    .home-news article, #projects article {
        float:left;
        margin-bottom:10px;
        width:100%;
    }

    /* Hero */

    #hero-main {
        margin-left:0;
        width:100%;
    }

    #hero-main h1 {
        font-size:2.8em;
    }

    #hero-main p.standfirst {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        font-size:1.4em;
    }

    #hero ul.hero-nav {
        display:none;
    }

    #hero ul.mobile-hero-nav {
        display:block;
        padding:0 15px
        position:relative;
        width:100%;
    }

        #hero ul.mobile-hero-nav li {
            height:auto;
        }

    #hero ul.mobile-hero-nav li a {
        background:#444;
        display:block;
        float:left;
        font-size:1.4em;
        font-weight:500;
        padding:15px 10px;
        margin:0;
    }

    /* Home slider */



    /* General news page */

    #general-left,
    #general-main {
        width:100%;
    }

    #rhcol {
        float:left;
        margin-bottom:30px;
        width:100%;
    }

    #right-nav {
        border:0;
        float:left;
        padding:0;
        width:100%;
    }

    .callout {
        font-size:1.7em;
        line-height:1.5em;
    }

        .calloutbyline {
            margin-top:10px;
        }

    /* Search */

    .header-search form{
        display:none;
    }

    .site-search.footer-search{
        display:block;
        margin-bottom:10px;
    }

    /* Projects, products and services */

    span.standfirst {
        font-size:1.9em;
        line-height:1.3em;
        width:100%;
    }

    #projects .more-info {
        clear:both;
        float:left;
    }

    /* Product page */

    #product-left {
        padding:0;
        width:100%;
    }

        #factfile img {
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
        }

        #product-left .summaryimage {
            float:left;
            margin:0 0 15px 0;
            width:100%;
        }

            #product-left .summaryimage img,
            #product-left article  {
                width:100%;
            }

    /* Resource listing */

    #resource-listing .resource-item h2 {
        font-size:1.9em;
        line-height:1.3em;
    }

    /* Press listing */

    .press-release-item .list-image {
        width:40%;
    }

    .press-release-item .resource-meta,
    .press-release-item .list-image img {
        width:100%;
    }

    .press-release-item .resource-info {
        border:0;
        padding-right:0;
        margin-right:0;
        width:55%;
    }

    .press-release-item .resource-meta h4 {
        margin-bottom:5px;
    }

    /* Press release page */

    .press-release-page #general-left {
        width:65%;
    }

    .press-release-page #centre-column {
        width:30%;
    }

}


/* ----------------- MOBILE ----------------- */

@media screen and (max-width: 480px) {

    /* Type */

    .htmltext, .mainblock-text {
        font-size:1.4em;
    }

    h1.general,
    h1.project,
    h2.general {
        font-size:3em;
        padding-top:20px;
        margin-bottom:10px;
    }

    #main-content h2 {
        font-size:1.9em;
        line-height:1.4em;
        padding-bottom:7px;
    }

    .standfirst,
    .standfirst p,
    span.standfirst {
        font-size:16px;
        line-height:1.5em;
    }

    /* Header and Footer */

    #globallinks {
        float: right;
        display: block;
        width: 100%;
    }

    .main-logo {
        width:185px;
    }

    .hitachi-logo img{
        width:100px;
    }

    #document-header img {
        padding-bottom:5px;
    }

        #document-header .hitachi-logo {
            background:#fff;
        }

    #document-footer ul li {
        margin-left:0;
        margin-top:5px;
    }

    /* Home page */

    /* Hero */

    #hero-main div.hero-block-text {
        height:135px;
    }



    /* Carousel */

    .elastislide-wrapper nav span {
        position: absolute;
        background: #666 url(../images/mobile-nav-left.png) center no-repeat;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        text-indent: -9000px;
        cursor: pointer;
        opacity: 0.8;
    }

    .elastislide-horizontal nav span.elastislide-next {
        background:#666 url('../images/mobile-nav-right.png') center no-repeat;
    }

    /* Responsive images - to an extent */

    .imagecontainer img {
        max-width:100%;
    }

        .imagecontainer.largesize.wide {
            margin:0 auto 15px auto;
            text-align:center;
            width:100%;
        }

    .imageright, .imageleft {
        margin:0;
        margin-bottom:5px;
    }

    .imagecontainer.largesize {
        width:100%;
    }

    /* General layout */

    #main-content {
        padding-top:4px;
    }

    div.crumbtrail span:first-child {
        display:none;
    }

    ol.crumbtrail li {
        margin-left:0;
        margin-right:4px;
    }

    .callout-img {
        margin-bottom: 10px;
        width: 100%;
    }

    .callout-content {
        width: 100%;
    }

    /* Projects, Products and Services */

    ul#hitachi-experience li {
        margin-left:0;
        margin-right:0;
        width:100%;
    }

    #projects .more-info {
        clear:none;
        float:right;
    }

    #projects .project-info {
        width:100%;
    }

    #projects img {
        float:left;
        max-width:auto;
        margin-bottom:0;
    }

    #projects .more-info {
        clear:both;
        float:left;
    }

    a.more-info span {
        padding:5px;
    }

    /* Product page */

    #product-left {
        width:100%;
    }

    /* Product listing */

    ul#product-images li,
    #service-list ul li,
    #rail-systems ul li,
    ul#product-images img,
    #service-list ul li img,
    #rail-systems img,
    .oneleft #service-list {
        width:100%;
    }

    ul#product-images .title,
    #service-list ul li .title,
    #rail-systems ul li .title {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        padding:0;
        width:100%;
    }

    .title a {
        padding:7px 10px;
    }

    /* Product page */

    ul.tabs li {
        border-radius:0;
        float:none;
        margin:4px 0;
        padding:10px 5px;
    }

    /* Image gallery */

    .gallery_images img {
        height:auto;
        margin-right:2%;
        width:47%;
    }

    /* Resource and press listing */

    #resource-listing .resource-item h2 {
        font-size:1.6em;
        line-height:1.4em;
        margin-bottom:5px;
        padding:0;
    }

    .resource-item .resource-info{
        border:0;
        margin-right:0;
        padding-right:0;
        width:65%;
    }

    .list-image {
        margin-bottom:10px;
    }

    .resource-item {
        margin-bottom:15px;
    }

    .resource-meta {
        clear:both;
        float:left;
        width: 65%;
        margin-left: 25%;
        padding:10px 0 0 20px;
    }

        .resource-meta h4 {
            font-size:1.2em;
            margin-bottom:5px;
        }

        .resource-meta ul.related li {
            float:left;
            font-size:1.15em;
        }

    span.location-date {
        font-size:1.15em;
    }

    /* Press release listing */

    .press-release-item .list-image,
    .press-release-item .list-image img,
    .press-release-item .resource-info {
        width:100%;
    }

    .press-release-item .resource-info {
        margin-left:0;
    }

    .press-release-item .resource-meta {
        margin:15px 0 0 0;
        padding:0;
    }

    /* Press release page */

     .press-release-page #general-left {
        width:100%;
    }

    .press-release-page #centre-column {
        margin:5px 0 20px 0;
        width:100%
    }

    /* Forms */

    .dynform form .radiooption label {
        float:left;
        width:80%;
    }

    .dynform form div {
        clear:both;
    }

    .dynform form textarea {
        width:100%;
    }

    .dynform form {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        width:100%;
    }

}