/*
  Running Squiz Matrix
  Developed by Squiz - http://www.squiz.net
  Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd
  Page generated: 21 December 2014 16:38:56
*/


/**
 * Liverpool City Council - Responsive Style Sheet
 *
 * responsive.css
 * author: Squiz Australia
 */

/*
 * Table of Contents
 *
 *
 *  1. Mobile
 *     1.1 Mobile (landscape)
 *     1.2 Mobile (portrait)
 *
 *  2. Tablet
 *
 *  3. Desktop
 */

/* 1. Mobile  ----------- */
@media (max-width: 1190px) {
        #MasterContent .row-fluid .span4.intro {
             width: 29%;
        }
}
@media (max-width: 767px) {
    /* layout */
    .inside iframe {
        display: none;
    }
    #MasterContent .row-fluid .span4 {
        margin-bottom: 20px;
        padding-bottom: 10px;
    }
    .row-fluid #main-content-wrapper.span8,
    .safari .row-fluid .span4 {
        width: 100%;
    }
    #main-content {
        padding: 5px;
        min-height: 300px;
    }
    .breadcrumbs {
        padding: 0 5px;
    }
    #MasterContent div.inside-banner-wrapper div.inside-banner {
        float: none;
    }
    #MasterContent .row-fluid:last-child {
        margin-bottom: 0;
    }
    #MasterFooter {
        height: 100%; // 55px;
    }
        ul#nav-footer {
            position: relative;
            top: 0px;
            right: 0px;
        }
    #MasterContent .row-fluid .span4:last-child {
        margin-bottom: 0;
    }
    #MasterContent .row-fluid #sub-nav.span4 {
        margin-top: 0;
    }
    /*--- Header ---*/
    /* Search Box */
    header{
        position: relative;
    }
        header form {
            position: absolute;
            top: 42px;
            right: 0;
        }
    /* Social Media */
    ul.social-media {
        width: 100%;
        float: left;
        padding: 10px 0;
        background-color: #ffffff;
    }
    ul.social-media li {
        background-color: transparent;
    }
    ul.social-media li:first-child {
        margin-left: 34%;
    }
        ul.social-media li a {
            background-image: none;
            float: left;
            border: 0;
        }
            ul.social-media li a:hover {
                background-color: transparent;
            }
    /* Intro */
    #MasterContent .row-fluid .span4.intro {
        padding-bottom: 8px;
        margin-bottom: 0;
        height: auto !important;
    }
    .intro-text {
        margin: 10px 0 0;
        padding: 10px;
    }
    .safari .intro-text {
        margin-top: 65px;
    }
        .intro h1, .h1 {
            font-size: 1.5em;
        }
        .intro h1 {
            margin-bottom: 5px;
        }
        .intro p {
            margin-top: 1%;
        }
    .row-fluid .carousel h2 {
        font-size: 1.3em;
    }
    /* Elements to hide */
    ul.tools,
    ul.sub-nav,
    /*.row-fluid .carousel_wrapper.span8,
    .carousel_wrapper .caroufredsel_wrapper ul,*/
    #thumbs-wrapper,
    span.generator {
        display: none;
    }
    #MasterContent .row-fluid .intro.span4 {
        width: 100%;
        height: auto;
        padding-top: 10px;
        width: 94%;
    }
    #MasterContent [class*="span"],
    .row-fluid [class*="span"] {
        float: left;
    }
    .home #MasterContent .row-fluid:first-child .span12,
    .feature a.span12 {
        float: none;
    }
    #MasterContent .row-fluid .span4.grey_bkgrnd,
    #MasterContent .row-fluid #sub-nav.span4 {
        width: 100%;
    }
    /* buttons */
    .btn.white.span7,
    .row-fluid .red.btn {
        font-size: 1em;
        text-indent: 0;
        line-height: 2.8em;
        margin-top: 3%;
        width: auto;
    }
    .btn.white.span7 {
        padding: 0 10% 0 2%;
    }
    .row-fluid .red.btn {
        padding: 0 8% 0 2%;
    }
    .btn.twitter,
    .btn.fb {
        width: auto;
        padding-right: 2%;
        text-indent: 27px;
    }
    #MasterContent .row-fluid .span12.dv_link,
    #MasterContent .row-fluid .span12.sa_link {
        float: none;
    }
    /* Navigation */
    nav ul li {
        display: none;
        width: auto;
        float: none;
    }
        nav ul li a {
            padding-left: 5%;
        }
        nav.row-fluid > ul > li:first-child {
            width: auto;
        }
            nav>ul>li>a {
                text-align: left;
                padding: 0 0 0 5%;
                margin: 0;
                line-height: 58px;
            }
            nav>ul>li:first-child>a {
                text-indent: 15%;
            }
        nav .expand-menu a {
            background: url(http://www.liverpool.nsw.gov.au/__data/assets/image/0006/45564/nav_main_expand.png?v=0.2.1) no-repeat 21px 19px;
            display: block;
            color: #ffffff;
        }
                nav ul li:hover ul {
                    display: none;
                }
        /* Home Page Elements */
        #MasterContent .row-fluid .tabbed-news .menu ul li.span3,
        #MasterContent .row-fluid .tabbed-news .menu h2 {
            width: 25%;
        }
            /* Facebook feature box */
            .fb span {
                width: 100%;
                margin: 10px 0;
            }
        /* twitter feature box */
        .box.social-media article.twitter {
            width: 88%;
        }
        /* News Items */
        .news-item span {
            float: none;
            margin-bottom: 10px;
            display: block;
         }
        .news-item h2 {
            display: block;
        }
        .news-item .image img {
            height: 100%;
        }
        .safari .tabbed-news .menu ul li:last-child a {
            padding-right: 3px;
        }
        .touch .tabbed-news .menu ul li:last-child a {
            padding-right: 2px;
        }
}
/* 1.1. Mobile (landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 767px) and (orientation : landscape) {
html {
        -webkit-text-size-adjust: none;
     }
}
/* 1.2. Mobile (portrait) ----------- */
@media only screen and (min-width : 320px) and (max-width : 767px) and (orientation : portrait) {
    .span3.rhs-column{
        width: 100%;
    }
    .grey_bkgrnd {
        margin-bottom: 3.5%;
    }
}
@media (max-width: 550px) {
    .row-fluid #main-content-wrapper.span8 {
        width: 100%
    }
    header {
        height: auto;
    }
        header #tool-bar {
            width: 100%;
        }
            header img {
                margin: 18px 15px;
            }
            header form {
                position: relative;
                margin: 0;
                top: 0;
                width: 100%;
            }
                header form #queries_all_query {
                    width: 86%;
                    font-size: 1.2em;
                    margin-bottom: 1em;
                }
                header form .submit {
                    width: 14%;
                    position: absolute;
                    margin-left: 0;
                }
    .span3.rhs-column{
        width: 100%;
    }
    .grey_bkgrnd {
        margin-bottom: 3.5%;
    }
}
/* 3. Tablet (portrait)----------- */
@media (min-width: 768px) and (max-width: 979px) {
    .intro h1, .h1 {
        font-size: 1.8em;
    }
    .row-fluid .carousel h2 {
        font-size: 1.3em;
    }
    .btn.white.span7 {
        font-size: 1.4em;
    }
    nav {
    height: 100%;
    }
    nav .expand-menu,
    .current_thumb,
    #thumb_shadow,
    .carousel_wrapper {
        display: none;
    }
        nav>ul>li {
            width: 11%;
        }
        nav ul li a {
            font-size: 0.8em;
            line-height: 1.4em;
        }
    #sub-nav h2 {
        font-size: 1.3em;
    }
    #thumbs-wrapper {
        display: none;
    }
    .row-fluid .pagination-wrapper.span12 {
        display: block;
    }
    #MasterContent .row-fluid .span12.dv_link,
    #MasterContent .row-fluid .span12.sa_link {
        font-size: 1.2em;
    }
    #MasterContent .row-fluid .span4 {
        width: 32%;
    }
    .tabbed-news .menu h2 {
        font-size: 1.2em;
    }
    .tabbed-news .menu ul li a {
        font-size: .8em;
    }
/*    .span3.rhs-column{
        width: 100%;
    }*/

        form .news-search .dates-range .dt-range {
            width: 82%;
        }
        form .news-search .dates-range select {
            width: 37%;
        }
            form .news-search .dates-range select:first-child {
                width: 31%;
            }
        form .news-search input[type="text"] {
            height: 39px;
            width: 22%;
        }
        form .news-search .dates-range td.datepicker {
            width: 15%;
        }
}
@media (min-width: 768px) {
    form .search-results .styled-select {
        display: inline-block;
        float: none;
        width: 40%;
    }
    .search-results .submit {
        display: inline-block;
        margin-left: 0.9em;
        padding-top: 0;
        width: auto;
    }
    .search-results input[type="submit"] {
        height: 36px;
        line-height: 37px;
        background-position: right -442px;
    }
}
/* 3. Desktop ----------- */
@media (min-width: 980px) {


  #MasterContent .row-fluid {
    margin-bottom: 20px;
  }
  #main-content-wrapper {
      margin: 0 2.7%;
  }
    .device-pagination a span {
        display: none;
    }
  nav .expand-menu {
    display: none;
  }

}
@media (min-width: 980px) {
    nav .expand-menu {
    display: none;
  }

}
@media (min-width: 1200px) {
    .safari .row-fluid .span4 {
        width: 31.7%;
    }
    .span3.rhs-column{
        margin-left: 0;
        width: 24%;
    }
}
/* General fixes for devices*/

/* Fixes for safari */
.safari .current_thumb span.selected {
    margin-left: 1px;
}
.safari .news-item .image img {
    height: auto;
}
    /*  Mobile (portrait) ----------- */
      @media only screen and (max-width : 320px) {
        .span8.grey_bkgrnd.box{
            width:100%;
        }
        .gateway-1{
            clear: both;
            width: 100%;
        }
        .gateway-2{
            clear: both;
            width: 100%;
        }
        .gateway-3{
            clear: both;
            width: 100%;
        }
        .gateway-4{
            clear: both;
            width: 100%;
        }
        .listing .news a{
           display: block;
        }

    }
    /*  Mobile (landscape) ----------- */
      @media only screen and (min-width : 321px) and (max-width : 767px) {
        .span8.grey_bkgrnd.box{
            width:100%;
        }
        .gateway-1{
            width: 49%;
        }
        .gateway-2{
            width: 50%;
        }
        .gateway-3{
            clear: both;
            width: 49%;
        }
        .gateway-4{
            width: 50%;
        }
        .span8.box {
            width: 100%;
         }
        .span8.banner-container{
            /*display: none;*/
            margin-bottom: 2em;
        }

        #MasterContent .carousel,
        #MasterContent .carousel_wrapper,
        #MasterContent .span8.banner-container{
            float: none;
        }


        #MasterContent .row-fluid .span4{
            width: 100%;
        }
        .listing .news a{
           display: block;
        }
        form #queries_news_query {
           width: 78%;
        }
        .news-query {
           background-color: #f5f5f5;
        }
    }

    /* Tablet (portrait)----------- */
    @media only screen and (min-width : 768px) and (max-width: 979px)and (orientation : portrait) {
        .gateway-1{
            width: 49%;
        }
        .gateway-2{
            width: 50%;
        }
        .gateway-3{
            clear: both;
            width: 49%;
        }
        .gateway-4{
            width: 50%;
        }
        #MasterContent .row-fluid .listing.span4 {
            width: 31.9%;
        }
        .dates-range .datepicker {
            position: absolute;
            right: 0;
        }

    }