/* Large desktop */
@media (min-width: 1200px) {
    /* Tabs */
    ul.nav-tabs li a {
        min-width:60px;
    }
    /* Top hat nav */
    #tophat ul li a { margin: 0 15px; }
    #tophat, #footer-container #footer { width:1170px; }
}
  
/* tablet and down */
@media (max-width: 979px) {
    footer, #footer-container #footer {width:100%;}
    html body{padding:0}
    .container{padding:0 10px}
    /* Tabs */
    ul.nav-tabs li a {
        min-width:40px;
    }    
    div.nav-tabs-container {
        display:block;
        width:100%;
    }
    ul.nav-tabs {
        display:block;
        width:100%;
        height:auto;
    }
    ul.nav-tabs li {
        display:block;
        width:100%;
        height:36px;
        float:left;
    }
    ul.nav-tabs li.active {
        height:45px;
    }
    ul.nav-tabs li.active:after {
        display:none;
    }
    /* Top hat nav */
    #tophat {width:100%}
    #tophat-logo {float:left;display:inline;margin-left:5px}
    #tophat.tophat-small #tophat-logo {
        display: block;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 30px 30px;
        background-image: url('http://d1qqc1e9kvmdh8.cloudfront.net/img/ngux-tophat/logos/l_logo_70_white.png') !important;
        float: left;
        margin:8px 0 0 0;
        padding: 0;
    }
    #tophat hr {height:4px;padding:0;margin:0 0 4px 0;border:0;background-color:#FFF}
    #tophat-dropdown {
        display:inline;
        width:25px;
        height:25px;
        float:left;
        margin:13px 4px 0 13px;
        cursor:pointer;
    }
    #tophat ul li ul {display:none !important}
    #tophat ul {display:none;position:absolute;top:50px;background:#00758d;margin:0;padding:0;list-style:none;width:auto;z-index:99999999999999999;background:#282828}
    #tophat ul li{float:none;line-height:32px;text-align:left}
    #tophat ul li a{line-height:32px}
    /* Headlines */
    h1 {
        font-size: 48px;
        line-height: 48px;
    }
    h2 {
        font-size: 27px;
        line-height: 27px;
    }
    p {
        font-size: 16px;
        line-height:26px;
    }
    /* Outfits */
    .outfit h3 {
        font-size:26px;
    }
    .outfit .overline {
        width: 120px;
        border-top: 8px solid #111;
    }
    /* Dropcap */
    .dropcap {
        font-size: 85px;
        line-height: 0.88em;
        margin-right: 0.115em;
        margin-bottom:-0.20em;
    }
    /* Section headers */
    .section-header .bar {
        top: 23px;
    }
    .section-header h1 {
        font-size:30px;
        line-height:30px;
        height:30px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    #tophat.tophat-small .navbar-search {
        display:block;
        width:100%;
        clear: both;
        margin: 0 !important;
        padding: 0;
        background: #282828;
        height:50px;
        z-index:999;
    }
    #tophat.tophat-small .navbar-search input {
        width:81%;
        padding:1% 11% 1% 5% !important;
        margin-left:1%;
    }
    #tophat.tophat-small .navbar-search .LATSearch01 {
        margin-top:13px;
        margin-left:14px;
    }
    /* Tabs */
    ul.nav-tabs li {
        width: 100%;
        background-color: black;
        height:45px;
    }
    ul.nav-tabs li a {
        height: 45px;
        box-sizing: border-box;
        padding-top:12px;
    }
    div.nav-tabs-container .collapsed .active:after {
        content: "\ef";
        float: right;
        display: block;
        position: relative;
        top: -27px;
        margin-right: 0;
        font-family: 'LAiconsA';
        font-size: 13px;
        color: white;
        right: 0;
        left: -13px;
    }
    div.nav-tabs-container .collapsed li {
        display:none;
    }
    div.nav-tabs-container .collapsed li.active {
        display:block;
        height:45px;
    }
    ul.nav-tabs li a:hover {
        background-color:#191919;
    }
    /* Footer */
    footer {
        width:100%;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    /* Navbar search */
    #tophat.tophat-small .navbar-search input{
        width:81%;
        padding:1% 8% !important;
        margin-left:1%;
        height: 22px;
    }
    #tophat.tophat-small .navbar-search .LATSearch01 {
        margin-top:11px;
        margin-left:12px;
    }
    /* Copy */
    h1 {
        font-size: 34px;
        line-height: 34px;
    }
    h2 {
        font-size: 22px;
        line-height: 22px;
    }
    h3 {
        font-size: 19px;
        line-height: 19px;
    }
    p {
        font-size: 15px;
        line-height: 24px;
    }
    /* Outfits */
    .outfit h3 {
        font-size:23px;
    }
    .outfit .overline {
        width: 120px;
        border-top: 8px solid #111;
    }
    /* Dropcap */
    .dropcap {
        font-size: 65px;
        line-height: 0.8em;
        margin-right: 0.1em;
        margin-bottom:-0.20em;
    }
    /* Section headers */
    .section-header .bar {
        top: 19px;
    }
    .section-header h1 {
        font-size:24px;
        line-height:24px;
        height:24px;
    }
    /* Footer */
    #footer-container .sub-logo {
        margin:0;
        padding:0;
    }
    #footer-container #tos {
        float:none;
        padding-top:5px;
    }
}

/* high rez screens */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
    #tophat-logo{
        background-size: 156px 20px;
        background-image:url('http://www.latimes.com/includes/projects/img/lat_logo_312_white.jpg');
    }
}