﻿/******************************************************************
megaMenus.css
-------------------------------------------------------------------
Stylesheet: Mega-Menu Styles
-------------------------------------------------------------------

Styles for all Mega-Menus go here.

******************************************************************/

/* --> Mega-Menu Columns -----------------------------------------*/

    .mm-col { float: left; }

    .mm-cols-1, .mm-cols-2, .mm-cols-3,
    .mm-cols-4, .mm-cols-5, .mm-cols-6,
    .mm-cols-7, .mm-cols-8, .mm-cols-9,
    .mm-cols-10, .mm-cols-11, .mm-cols-12 {
    width: 100%;
    }

/* --> Main Navigation Mega-Menu ---------------------------------*/

    nav.main-nav .mega-menu {
    width: 100%;
    background-color: #fff;
    }

    /* Inner Mega-Menu Wrap */
    nav.main-nav .mega-menu-inner {
    float: left;
    width: 100%;
    padding: 10px 7px;
    }

    /* Mega-Menu List Container */
    nav.main-nav .mega-menu-list-cont {
    float: left;
    width: 100%;
    background: none;
    padding: 7px 15px;
    }

    /* Mega Menu List */
    nav.main-nav ul.mega-menu-list {
    background: none;
    }

    /* Mega-Menu Section Heading */
    nav.main-nav li.nav-item .section-heading {
    font-size: 1em;
    margin-top: 0;
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 10px;
    }

    /* Mega-Menu Section Heading Link */
    nav.main-nav li.nav-item .section-heading a {
    display: block;
    background: none;
    font-weight: bold;
    padding-left: 0;
    padding-bottom: 10px;
    line-height: 24px;
    font-size: inherit;
    border-bottom: 1px solid #ccc;
    }

    nav.main-nav li.nav-item .section-heading a:hover {
    background: none;
    border-color: #aaac00;
    }

    /* Mega-Menu List Link */
    nav.main-nav ul.mega-menu-list li.nav-item a {
    color: #1a1a1a;
    background: none;
    padding: 10px 0;
    font-weight: bold;
    border-color: #ccc;
    }

    nav.main-nav ul.mega-menu-list li.nav-item a:hover {
    color: #aaac00;
    background: none;
    padding-left: 0;
    padding-right: 0;

    transition: none;
    -o-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    }

    #services-extra-col {
    height: 100%;
    margin: 0 2em 0 0;
    padding: 0 0 0 2em;
    width: 100%;
    }

    #services-extra-col .heading {
    border-bottom: 2px solid #CCCCCC;
    clear: both;
    display: block;
    font-family: 'Bebas','Helvetica Neue',Arial Narrow,Sans-Serif;
    font-size: 2em;
    margin-bottom: 5px;
    margin-top: 0;
    text-transform: uppercase;
    width: 100%;
    }

    input#service {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #F9F9F9;
    border-color: #7192AB -moz-use-text-color #7192AB #7192AB;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 1px 0 1px 1px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    display: block;
    float: left;
    font-size: 1.3em;
    height: 40px;
    margin: 0 0 15px;
    outline: medium none;
    padding: 0 0 0 8px;
    transition: box-shadow 0.6s ease-in-out 0s;
    width: 70%;
    }

    a.service-go {
    background: url("/img/00/layout/search-glass.png") no-repeat scroll center center #7192AB !important;
    clear: right;
    display: block;
    float: left;
    font-size: 0 !important;
    height: 40px;
    margin-top: 8px;
    padding: 0 !important;
    width: 28%;
    }

    a.service-go:hover {
    background-color: #224D73 !important;
    border: 1px solid #224D73;
    text-decoration: none;
    }

    #featured-cont a {
    clear: both;
    color: #488A8D;
    display: block;
    float: left;
    font-family: Arial;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1.5em !important;
    padding-bottom: 5px !important;
    text-transform: capitalize;
    width: 100%;
    }

    #featured-cont a:hover {
    color: #FFFFFF;
    }

    /* Default */
    nav.main-nav .has-mega-menu div.mega-menu {
    width: 706px;
    overflow: hidden;
    left: -531px;
    }

    /* Mega Menu Mobile */
    @media screen and (max-width: 767px) {
        nav.main-nav .has-mega-menu div.mega-menu {
            left: 100%;
            width: 100%;
            background-color: #333;
        }
        nav.main-nav li.nav-item .section-heading a, nav.main-nav ul.mega-menu-list li.nav-item a {
            color: #fff;
        }
        nav.main-nav li.nav-item .section-heading a {
            font-weight: 700;
        }
        nav.main-nav li.nav-item .section-heading a:hover {
            color: #aaac00;
        }
        nav.main-nav li.nav-item .section-heading a:hover, nav.main-nav ul.mega-menu-list li.nav-item a:hover {
            padding-left: 30px;
            -o-transition: background-color .9s ease-out, color .6s ease-out, padding .6s ease-out, font-size .3s ease-out;
            -moz-transition: background-color .9s ease-out, color .6s ease-out, padding .6s ease-out, font-size .3s ease-out;
            -webkit-transition: background-color .9s ease-out, color .6s ease-out, padding .6s ease-out, font-size .3s ease-out;
            transition: background-color .9s ease-out, color .6s ease-out, padding .6s ease-out, font-size .3s ease-out;
        }
        nav.main-nav .mega-menu li.title h5 a {
            color: #fff;
        }
        nav.main-nav .mega-menu li.title.back h5 a:hover {
            text-decoration: none;
            background: #666
        }
    }    

/* These styles are applied for viewports 768px and higher */
@media only screen and (min-width: 768px) {

/* --> Mega-Menu Columns -----------------------------------------*/

    .mm-cols-12 { width: 8.33%;  }
    .mm-cols-11 { width: 9.09%;  }
    .mm-cols-10 { width: 10%;    }
    .mm-cols-9  { width: 11.11%; }
    .mm-cols-8  { width: 12.5%;  }
    .mm-cols-7  { width: 14.28%; }
    .mm-cols-6  { width: 16.66%; }
    .mm-cols-5  { width: 20%;    }
    .mm-cols-4  { width: 25%;    }
    .mm-cols-3  { width: 33.33%; }
    .mm-cols-4.services,.mm-cols-2  { width: 50%;    }
    .mm-cols-1  { width: 100%;   }


    /* Mega-Menu List Link */
    nav.main-nav ul.mega-menu-list li.nav-item a {
    font-size: 0.8em;
    padding: 5px 0;
    font-weight: normal;
    border: 0;
    }
    
    .mega-menu .mm-col:first-child .mega-menu-list-cont:first-child {
    display: none;
    }

/* --> Main Navigation Mega-Menus --------------------------------*/


/* How Do I - Mega-Menu ------------------------------------------*/

    nav.main-nav
    .has-mega-menu.nav-item-3 div.mega-menu {
    width: 980px;
    left: 0;
    }

/* City Hall - Mega-Menu -----------------------------------------*/

    nav.main-nav
    .has-mega-menu.nav-item-5 div.mega-menu {
    width: 700px;
    left: -200px;
    }

    nav.main-nav
    .has-mega-menu.nav-item-5 .mega-menu-list-cont {
    padding-top: 5px;
    padding-bottom: 5px;
    }

    nav.main-nav
    .has-mega-menu.nav-item-5 .mega-menu-list-cont .section-heading a {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    text-transform: none;
    line-height: 20px;
    }

}

@media only screen and (min-width: 1030px) { 

    /* Default */
    nav.main-nav .has-mega-menu div.mega-menu {
    width: 1017px !important;
    overflow: hidden;
    right: -22.5em !important;
    left: auto !important;
    }

    nav.main-nav .has-mega-menu div.mega-menu-2 {
    right: -15em !important;
    }

    nav.main-nav .has-mega-menu div.mega-menu-3 {
    right: -7.5em !important;
    }

    nav.main-nav .has-mega-menu div.mega-menu-4 {
    right: -1em !important;
    }


}


/*Services mega menu*/

    #search-cont .ui-helper-hidden-accessible {
    border: 0 none;
    clip: rect(0px, 0px, 0px, 0px);
    display: block;
    font-size: 1em;
    font-style: italic;
    font-weight: bold;
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    width: auto;
    }