﻿/* MEDIA QUERIES */

@media (min-width: 481px) {
  .vertical-toggle-header, .page-title-mobile,
  .nav-utility-res{
    display: none;
  }
  .vertical-menu .vertical-collapse {
    height:auto;
  }
  .sec-nav {
    display:none;
  }
}
@media (max-width: 480px) {
  .container,
  .banner {
    max-width: 100%;
  }
  .nav-utility,
  .intro,
  .desktop-header,
  .page-title {
    display: none;
  }
  .withcrumbs,
  .copyright {
    max-width:100%;
  }
  header {
    height: auto;
  }
  ul li.sec-nav {
    display:initial;
    
  } 
  ul li.sec-nav a {
      font-size:13.5px;
  }
  ul.sec-nav {
    border-top:1px solid black ;
  }

  header,
    footer,
    .navigation,
    .banner,
    .crumbs,
    .copyright,
    .slideshow {
        min-width: 240px;
    }
  .branding {
    display: block;
    margin-top:  15px;
    margin-bottom: 7px;
    margin-left: 15px !important;
    width: 198px;
/* KN Original height - changed on Oct 22, 2015
    height: 40px;
*/
    height: 31px;
    text-indent: -9000px;
    background: transparent url(/image-structure/full_logo_mobile.png) no-repeat;
    
  }
 header .branding:first-child {
    padding-right: 0;
    margin-right: 0px;
  }
  header .branding a {
    width: 99px;
    height: 40px;
  }
  header .icon-search {
    display: inline-block;
    width: 24px;
    height: 100%;
    margin-top:-1px;
    background: transparent url("/image-structure/icon_search.png"); 
  }
  .branding
  .navigation,
  .menu {
    background: #e6e6e6;
    height: auto;
  }
  .navigation {
    border:0;
  }
  .nav-search-inner {
    background-color:#74AA50;
   
  }
  .nav-search-inner form {
    margin:0;
    width:90%;
    padding:5%;
  }
  .nav-search .nav-search-inner .search {
    width:90%;
    margin:0;
    padding:5px 5%;
    /*margin:5px;*/
  }
  .menu h2 {
    display: none;
  }
  .menu, .banner {
    background: none;
  }
  .menu {
    border-top: 3px solid #74AA50;
  }
  .banner img {
    display: block;
    border: 0;
    max-width: 100%;
    height: auto;
  }
  .navbar-inner {
    padding-left: 0;
  }
  .menu li a {
    font-weight: 300 !important;
  }
  .menu ul.nav li.dropdown > a.dropdown-toggle {
    border:0;
    text-align:left;
    padding-left: 16px;
    width:100%;
  }
  .menu ul.nav li.dropdown > a.dropdown-toggle:hover {
    background-color:#74AA50;
    color:#fff;
  }
  .navbar .nav li.dropdown > .dropdown-toggle .caret,
  .menu ul.nav li.dropdown ul.dropdown-menu {
    display:none;
  }

/* KN 20160229 - to show sub navigation menu items in mobile view */

  .open > .dropdown-menu {
    display: block !important;
  }
  .menu .dropdown-menu > li > a {
    color:#000;
    border: none;
    border-bottom: 1px solid #ddd;
    padding-left: 20px;
  }
  .navbar .nav li.dropdown.open > .dropdown-toggle:hover {
    background-color:#74AA50 !important;
  } 

/* -- End Code for sub navigation menu items in mobile view -- */


  /*HOMEPAGE*/
  .ags-banner .banner-img {
    width: 100%;
    height:240px;
  }
  .ags-banner .ags-description {
    position:absolute;
/* KN Oct 22, 2015 - Made this rule important because it otherwise gets overridden by the non-mobile rule */
    bottom:0px !important;
    padding:10px 10px;
    padding-top:0px;
  }
  .ags-description h1 {
/* KN Feb 23, 2016 - Made these two rules important because they otherwise get overridden by the non-mobile rules */
    font-size:30px !important;
    margin-bottom:10px !important;
    margin-top:5px;
  }
  .activities-highlights .highlights {
    padding-bottom:0px;
  }
  .container h2{
    margin-top: 0px
  }
  .hero-unit h1,.hero-unit p  {
    color:#fff;
  }
  .hero-unit p{
    font-size:15px;
    font-weight:600;
  }
  .highlights .gu4 {
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
  .highlights .col:nth-child(2), .highlights .col:nth-child(1) {
    margin-bottom:0px;
  }
  .gu4:last-child,
  .gu8 {
    padding-bottom:0px;
  }
  footer {
    padding-bottom:0px;
  }
  /*END HOMEPAGE*/
/*  div.interactive-maps,
  div.table-of-information,
  div.news-and-events {
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
  }*/

  /*
  .menu ul li a.applications,
  .menu ul li a.compliance,
  .menu ul li a.abandonment,
  .menu ul li a.rules,
  .menu ul li a.data,
  .menu ul li a.about {
    width: 100%;
    padding: 2px 0 2px 15px;
  }
  .menu .dropdown-menu > li > a {
    color: #fff;
    padding: 5px 20px 5px 5px;
    margin-left: 17px;
    margin-right: 17px;
    border: none;
  }*/
   /* gridframework */
    .row {position:relative; margin-left: 0;}
    .gu1 .row,
    .gu2 .row,
    .gu3 .row,
    .gu3r .row,
    .gu4 .row,
    .gu4r .row,
    .gu5 .row,
    .gu6 .row,
    .gu7 .row,
    .gu8 .row,
    .gu9 .row,
    .gu10 .row,
    .gu11 .row,
    .gu12 .row {
    width: 100%;
    max-width: 100%;
    }
    
    .col {
        padding-left: 0;
        float:none;
        position:relative;
        }
    .gu1,
    .gu2,
    .gu3,
    .gu4,
    .gu5,
    .gu6,
    .gu7,
    .gu8,
    .gu9,
    .gu10,
    .gu11,
    .gu12{
    width: 90%;
    max-width: 100%;
    padding: 1% 5% 5% 5%;
    }
    
    .gu3r,
    .gu4r {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
  .crumbs .col {
    padding:0% 5% 0%;
  }
  body {
    padding-top: 0;
  }
  .lists-container .search-area .search {
    max-width:100%;
    /*padding:4px 0px;*/
  }
    .lists-container .list-results .search-refine .form-inline {
    float:left;
  }
  .lists-container .list-results .search-refine p {
    clear:both;
  }
  .download-pdf {
    text-align: center;
    margin-bottom:7px;
  }

  .vertical-toggle .btn {
    border: 0px none;
    background-color: #fff;
    background-image: none;
  }
  .vertical-toggle .btn .icon-bar {
    display: block;
    width: 15px;
    height: 4px;
    background-color: #CCC;
    border-radius: 1px; 
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
  }
  .whats-new .item-title {
    display: block;
  }
  
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    position: static;
  }
  .navbar-fixed-top {
    margin-bottom: 20px;
  }
  .navbar-fixed-bottom {
    margin-top: 20px;
  }
  .navbar-fixed-top .navbar-inner,
  .navbar-fixed-bottom .navbar-inner {
    padding: 5px;
  }
  .navbar {
    margin-bottom: 0;
  }
  .navbar .container {
    width: auto;
    padding: 0;
  }
  .navbar .brand {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 0 0 -5px;
  }
  .nav-collapse {
    clear: both;
  }
  .nav-collapse .nav {
    float: none;
    margin: 0 0 0px;
  }
  .nav-collapse .nav > li {
    float: none;
  }
  .nav-collapse .nav > li > a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > .divider-vertical {
    display: none;
  }
  .nav-collapse .nav .nav-header {
    color: #777777;
    text-shadow: none;
  }
  .nav-collapse .nav > li > a,
  .nav-collapse .dropdown-menu a {
    padding: 9px 15px;
    font-weight: bold;
   /* -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;*/
  }
  .nav-collapse .btn {
    padding: 4px 10px 4px;
    font-weight: normal;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  .nav-collapse .dropdown-menu li + li a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > li > a:hover,
  .nav-collapse .nav > li > a:focus,
  .nav-collapse .dropdown-menu a:hover,
  .nav-collapse .dropdown-menu a:focus {
    background-color: #f2f2f2;
  }
  .navbar-inverse .nav-collapse .nav > li > a,
  .navbar-inverse .nav-collapse .dropdown-menu a {
    color: #999999;
  }
  .navbar-inverse .nav-collapse .nav > li > a:hover,
  .navbar-inverse .nav-collapse .nav > li > a:focus,
  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
    background-color: #111111;
  }
  .nav-collapse.in .btn-group {
    margin-top: 5px;
    padding: 0;
  }
  .nav-collapse .dropdown-menu {
    position: static;
    top: auto;
    left: auto;
    float: none;
    display: none;
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .nav-collapse .open > .dropdown-menu {
    display: block;
  }
  .nav-collapse .dropdown-menu:before,
  .nav-collapse .dropdown-menu:after {
    display: none;
  }
  .nav-collapse .dropdown-menu .divider {
    display: none;
  }
  .nav-collapse .nav > li > .dropdown-menu:before,
  .nav-collapse .nav > li > .dropdown-menu:after {
    display: none;
  }
  .nav-collapse .navbar-form,
  .nav-collapse .navbar-search {
    float: none;
    padding: 10px 15px;
    margin: 10px 0;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
  }
  .navbar-inverse .nav-collapse .navbar-form,
  .navbar-inverse .nav-collapse .navbar-search {
    border-top-color: #111111;
    border-bottom-color: #111111;
  }
  .navbar .nav-collapse .nav.pull-right {
    float: none;
    margin-left: 0;
  }
  .nav-collapse,
  .nav-collapse.collapse {
    overflow: hidden;
    height: 0;
  }
  .navbar .btn-navbar {
    display: block;
  }
  .navbar-static .navbar-inner {
    padding-left: 10px;
    padding-right: 10px;
  }
  .nav-utility-res {
      display: block;
      width: 100%;
      background: #005a90;
      border-bottom: 6px solid #0071b4;
  }
  
  .nav-utility-res ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .nav-utility-res ul li a {
      display: block;
      padding: 5px 25px 5px 16px;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 700 !important;
      font-size: 11px;
      color: #fff;
      border-top: 1px solid #1a6b9b;
  }
  .nav-utility-res ul li a:hover {
      background-color: #004a75;
      color: #fff;
  }
  .nav-utility-res ul li:first-child a {
      border-top: 1px solid transparent;
  }
  .crumbs .container .breadcrumb {
    padding:3px 0px;
  }
  .page-title-mobile {
    display:initial;
    position:relative;
    top:10px;
  }
  .sub-content h1.page-title-mobile {
    font-size:25px;
  }
  .sub-content {
    position:relative;
  }
  .sub-content .page-title {
    position: absolute;
    top:10px;
  }
  .sub-content .third-col {
    margin-top: 40px;
  }
  .content-column {
    padding-top:10px;
  }
  .line-break {
    display:block;
    margin-top:4px;
  }
/*  .copyright .copyright-disclaimer{
    text-align:right;
  }*/
  .sitemap {
    text-align:left;
  }
}
/*@media (max-width: 359px) {
  .logos {
    display: block;
    width: 100%;
  }
  header .btn-navbar {
    margin: 0;
  }
  .mobile-header {
    display: block;
  }
  .mobile-header {
      width: 100%;
  }
  .mobile-header button {
    display: inline-block;
    width: 50%;
  }
  .icon-bar {
      text-align: center;
  }
}*/
@media (max-width:979px) {
  .navigation,
  footer,
  .copyright {
    width:978px;
  }
  header .branding {
    margin-left: 30px;
  }
}
@media (min-width:481px) {
  .navigation,
  footer,
  .copyright,
  .crumbs,
  .sub-content {
    width:978px;
  }
  button.btn-navbar {
    display:none;
  }
}
@media (min-width: 980px) {
  .nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }
  .navigation,
  footer,
  .copyright,
  .crumbs,
  .sub-content{
    width:100%;
  }
}
 
 
 
 
 
 
 
 
 
 
 