/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
        @media only screen and (max-width: 959px) {
            
        }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
        @media only screen and (min-width: 768px) and (max-width: 959px) {           
            .subpage .subpage-wrapper {
                background: none;
            }
            .container .columns.sidebar {
                width:172px; 
            }
            #subnav {
                background-color:#DDDDDD
            }
            #mainnav a {
                font-size: 16px;
                margin: 0 12px;
            }
            .left-banner-panel h2, .right-banner-panel h2 {
                font-size: 22px;
            }
            .banner .details h3, .banner .details p {
                line-height: 22px;
                margin: 0;
            }
        }

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
   #mainnav {
        display:none
    }
    .slicknav_menu {
  display:block;
}
    .banner {
        background-image:none !important;
        background-color:#fff;
        height:auto;
    }
    .banner-widget {
        left: 0;
        top:80px;
        width: 100%;
        z-index: 1;
    }
    #home-page .banner {
        display:none;
        height:auto;
    }
   #header a.logo {
        margin: 0 auto;
        position: relative;
        top: -30px;
    }
    div.breadcrumbs {
        display:none;
    }
    #header,
    .top-utiltites {
        background-color: #FFFFFF;
        box-shadow: none;
    }
    #header {
        height:255px;
    }
    #home-page #header {
        height: 155px;
    }
    .top-utiltites {
        position: relative;
        top: 210px;
        z-index: 100;
    }
    #header .search ul {
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    .banner-bottom,
    .footer-map,
    .subpage .subpage-wrapper {
        background: none repeat scroll 0 0 #fff;
    }
    .footer-map,
    .map-contact .columns h2 {
        background-color: #003C85;
    }
    .footer-navbar .utilities a {
        white-space: nowrap;
    }
    footer .nav {
        text-align: center;
    }
/*    h1#menu-toggle,
    #home-page h1#menu-toggle {
        background: url("/images/nav-icon.png") no-repeat scroll 67px 11px #3E8F01;
        color: #FFFFFF;
        content: "";
        cursor: pointer;
        display: inline-block;
        font-family: "Open Sans",Arial,sans-serif;
        font-size: 18px;
        height: 29px;
        padding: 2px 10px 10px;
        position: absolute;
        right: 0;
        text-align: left;
        top: -45px;
        width: 74px;
    }*/
/*    #mainnav .children ul {
	left: auto;
    }*/
    #subnav {
        display: none;
    }
/*    #mainnav {
        background-color: #0C50A5;
        box-shadow: 15px 5px 15px -9px rgba(0, 0, 0, 0.3);
        height: auto;
        left: 0;
        margin: 0;
        overflow:hidden;
        padding: 0;
        position: absolute;
        top:-5px;
        width: 100%;
        z-index: 101;
    }
    #mainnav li {
        width:100%
    }
    #mainnav .sub-menu, #mainnav .children {
        border-style: none;
        display: block;
        margin-left: 30px;
        position:inherit;
    }
    #mainnav li a {
        line-height: 20px;
        margin:0;
        padding: 8px 20px;
        text-align: left;
        width: 100%;
    }
    #mainnav li ul a {  
        padding: 5px 20px 5px 40px;
        width: 100%;
    }
    #mainnav li a,
    #mainnav li ul a,
    #mainnav li li a {
        background-color: #0C50A5;
        color: #FFFFFF;
        display: block;
    }
    #mainnav li a:hover,
    #mainnav li ul a:hover,
    #mainnav li:hover ul a:hover {
        background-color:#3E8F01;
        color:#fff;
    }
    #mainnav li li {
    border-bottom: none;
    }
    #mainnav li a {
        border-bottom: 1px solid #327546;
    }
    #mainnav li ul a  {
        padding-left:20px;
    }
    #mainnav li:hover ul ul {  
        display: block;
    }
     #mainnav ul {
            width: 100%;
            display: block;
            height: auto;
    }
    #mainnav li ul {
        display:block;
        position: inherit;
        left:0;
        top: 0;
        width: auto;
    }
    
    #mainnav #mainnav-contact:hover ul {
        margin-left: 0;
    }*/
    
}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/