/******************************************************************
768up.css
-------------------------------------------------------------------
Stylesheet: Tablet & Small Desktop
-------------------------------------------------------------------

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/


/* These styles are applied for viewports 768px and higher */
@media only screen and (min-width: 768px) {


    #dynamic-side-nav { display: none; }

    /* 

    Full Screen widths - aka elements not contained inside a parent with the ROW class 

    They all float left, the column class with foundation over rides the last-child with a float right.

    */

    .large-1-full{position:relative;width:8.33333%; float:left; padding: 0px 8px;}
    .large-2-full{position:relative;width:16.66667%; float:left; padding: 0px 8px;}
    .large-3-full{position:relative;width:25%; float:left; padding: 0px 8px;}
    .large-4-full{position:relative;width:33.33333%; float:left; padding: 0px 8px;}
    .large-5-full{position:relative;width:41.66667%; float:left; padding: 0px 8px;}
    .large-6-full{position:relative;width:50%; float:left; padding: 0px 8px;}
    .large-7-full{position:relative;width:58.33333%; float:left; padding: 0px 8px;}
    .large-8-full{position:relative;width:66.66667%; float:left; padding: 0px 8px;}
    .large-9-full{position:relative;width:75%; float:left; padding: 0px 8px;}
    .large-10-full{position:relative;width:83.33333%; float:left; padding: 0px 8px;}
    .large-11-full{position:relative;width:91.66667%; float:left; padding: 0px 8px;}
    .large-12-full{position:relative;width:100%; float:left; padding: 0px 8px;}


    /* 2 column layouts - Moves buttons to opposite side for desktop views */
    #col2Content{
        float: right;
    }

    .code_snippet_box{
    margin-bottom: 1.25em;
    width: 49%;
    margin-right: 1.25em;
    }
 
    .details_right{
    float: right;
    width: 48%;
    }

    .details_box {
    padding-top: 0;
    }
    
    /* --> Homepage News Alert ---------------------------------*/

    #alert_overlay {
    right: 68px;
    width: 62%;
    }

    #alert-overlay-inner h3{
    font-size: 1.8em;
    }

/*------------------------------------------------------------------
--> Header
------------------------------------------------------------------*/
    
    div#header-left a{ margin: 20px 0 0 0;}

    ul.head-links { background: transparent; } 


    .dropdownDepts {
    background: url(/img/00/departmentarrow.png) no-repeat 10px 10px #839260;
    width: auto;
    max-width: 40%;
    margin: 0;
    }


    .dropdownDepts ul li{ padding: 0; text-align: left; }
    .dropdownDepts:hover .dropdown-content{ margin: 40px 0 0 0; }

    /* Icon Tray */

    .iconTrayWrapper .bx-controls-direction { left: 0px; }



    /* --> Home News --------------------------------------------*/    
    div#newsHeaderWrap{ padding: 20px 0 0 0; }

    /* --> Home News Slideshow --------------------------------------------*/     
    #slideshow-cont .bx-wrapper img { max-height: 392px; width: auto;}
    #slideshow-cont .bx-wrapper .bx-viewport { height: 364px !important;}

    #slideshow-cont .bx-controls{
    position: absolute;
    width: 100%;
    margin-top: 8px;
    }

    div#slideshow-cont {
    margin: 15px 0;
    }

   #slideshow-cont ul.bxslider li {
    max-height: 350px;
    max-width: 500px;
    overflow: hidden;
    }

    /* --> Home stay connected --------------------------------------------*/    
    
    div#enews {text-align: left; }
    div#newsletter {width: 70%;}
    div#socialIcons {  width: 28%; margin: 0;}
   
    div#eLinks ul li{ margin: 5px 0; }
    div#eLinks ul { border-left: 2px solid #dcdbdb; } 

    /* Social Icons */
    #hpSocialIcons a.mm-button-link {
    width: 34px;
    height: 34px;
    }

    /* --> Home MV connect - Email form ---------------------------------*/

    div#newsletter { height: 50px;}
    
    .MVConnectEmail {
    border-top-right-radius: 0px;
    width: 66.666%;
    float: left;
    margin-bottom: 0;
    }
    
    .MVConnectSubmit{ 
    width: 32.333%;
    float: left;
    padding: 8px 0;
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 40px;
    font-size: 15px;
    }

    /** Hp Calendar
    ===================================*/

    #hp-cal{
    width: 100%;
    padding: 0;
    padding-top: 5px;
    margin: 25px 0 0 0;
    }


    #hp-events-city,
    #hp-events-local,
    #hp-events-special {
    float: left;
    width:  100%;
    }

    #cal_right{
    width: 51.6%;
    }

    #cal_left{
    width: 38.2%;
    margin: 0 3px;
    }

    #cal_right:before{
    content: '';
    background: url('/img/00/layout/springs.png') no-repeat top center;
    width: 45px;
    height: 268px;
    margin:32px 0 0 -24px;
    }

    #hp-cal .smlCal002_wrap{
    padding: 20px;
    }


    div#calWrapper { min-height: 840px; }


    #cal_left{ min-height: 334px;}

    .calenders-tab { width: auto; }
    #tab-container { border-bottom: 2px solid #000;}

    #hp-events-city,
    #hp-events-local,
    #hp-events-special
    {
    padding: 0 25px; 
    }

   
    p.mobilehelp { display: none; }
    .iconTrayWrapper a.bx-next,
    .iconTrayWrapper a.bx-prev{display: block;}


/*------------------------------------------------------------------
--> Main Navigation
------------------------------------------------------------------*/
    


/* --> Main Navigation Container ---------------------------------*/

    section#top-nav .nav-row .columns {
    padding: 0 8px;
    }

    .nav-row{ margin-left: 6px; }

    .nav-utils {
        width: 75%;
        margin: 15px 0  0 25%;
    }

/*--> Nav wrapper (inside container) --*/
    .nav-inner{
        float: left;
        width: 100%;
    }    

    section#top-nav{        
        display: inline-block;
        width: 100%;
        padding: 12px 0 0 0;   
    }

/* --> Main Navigation Title -------------------------------------*/

    nav.main-nav .name {
    display: none;
    }

    nav.main-nav ul {
    width: 100%;
    background: none;
    }

    .top-bar-section ul li {
    display: inline-block;
    float: none;
    }

/* --> Main Navigation Item --------------------------------------*/

    nav.main-nav ul.nav-list > li.nav-item {
    width: 12.4%;
    }

    nav.main-nav ul.nav-list > li.nav-item-1 { width: 23.4%; }
    nav.main-nav ul.nav-list > li.nav-item-2 { width: 15.0%; }
    nav.main-nav ul.nav-list > li.nav-item-3 { width: 15.0%; }
    nav.main-nav ul.nav-list > li.nav-item-4 { width: 15.0%; }
    nav.main-nav ul.nav-list > li.nav-item-5 { width: 15.0%; }
    nav.main-nav ul.nav-list > li.nav-item-6 { width: 14.0%; }

    nav.main-nav ul.nav-list > li.nav-item > a {
    text-align: center;
    }

    nav.main-nav ul.nav-list > li.nav-item > a:hover {
    background: transparent;
    color: #ececad;
    }


/* --> Main Navigation Item Link ---------------------------------*/

    nav.main-nav ul li.nav-item > a {
    font-size: 1em;
    padding: 12px 0 14px 0 !important;
    text-align: center;
    display: block;
    
    }

    /* Dropdown Item Link */
    nav.main-nav .dropdown li.nav-item a {
    text-transform: none;
    font-size: 0.7em;
    line-height: 1.25em;
    background: #fff;
    padding: 10px 25px 10px 10px !important;
    text-align: left;
    border-bottom: 1px solid #ccc;
    color: #333;
    }

	nav.main-nav .dropdown li.nav-item a:hover{
    padding-left:15px;
	}
   

/* --> Main Navigation Dropdown Container ------------------------*/
    nav.main-nav li.nav-item .section-heading a { font-size: 16px; }

    nav.main-nav .dropdown {
    width: 200px;
    text-align: left;
    border-top: 3px solid #F5F5B4;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background: white;
    -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.4);
    }

    /* Has-Dropdown Arrow */
    nav.main-nav .has-dropdown > a:after {
    display: none;
    }

    /* Flyout to Left */
    .top-bar li.flyout-left .dropdown li .dropdown {
    left: -200px;
    width: 200px;
    }

    /* Flyout to Left Link */
    .top-bar li.flyout-left .dropdown li.has-dropdown > a {
    padding-left: 40px;
    padding-right: 15px !important;
    }

    .top-bar li.flyout-left .dropdown li.has-dropdown > a:hover {
    padding-left: 5px;
    }
/* 
    Flyout Link 
    .top-bar .has-dropdown .dropdown li.has-dropdown > a {
    background: #333;
    }*/

    /* Flyout Icon (text arrows) */
    .top-bar .has-dropdown .dropdown li.has-dropdown > a:after {
    left: 91%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-left-color: #ccc;
    border-width: 5px;
    margin-top: -5px;
    display: block;
    }

    /* Hide navigation dividers */
    nav.main-nav .top-bar-section > ul > .divider {
    display: none;
    }


    /* Side Navigation 
    #side-nav.size1 .sf-menu a{ font-size: 1.4em; }*/

    nav#side-nav .sf-menu ul {
    left: 100%;
    position: absolute;
    width: 200px;
    }


    #dynamic-side-btns .mm-buttongen-cont {
    }

     #dynamic-side-btns .mm-button-wrap {
    }

    /* Side Button Link Wrapper */
    #dynamic-side-btns a.mm-button-link { 
    float: left;
    margin: 0 0 15px 0;  
    }



    /* Flyout Indicator (Arrow) */
    nav#side-nav .sf-sub-indicator {
    border: solid transparent;
    border-color: transparent;
    border-top-color: transparent;
    border-left-color: #ccc;
    border-width: 5px;
    }


/*------------------------------------------------------------------
--> Navigation Department Select Utility
------------------------------------------------------------------*/
ul.head-links{ 
    width: 43%; 
    float: left; 
    padding-top: 6px;
    display: block; 
    }

a.head-link {
    float: left;
    display: inline-block;
    color: #FFF;
    margin-right: 10px;
    margin-bottom: 0px;
    font-size: 12px;
}

li.divder { 
    float: right !important;

    height: 23px;
    display: block;
    width: 1px;
    margin: 2px 5%;
}

.head-links .fontsize { margin-right: 0px; }

div#deptSelect {
    float: left;
    width: 47%;
    height: 44px;
    overflow: hidden;
    background: url(/img/00/departmentarrow.png) no-repeat 10px 10px #839260;
    border: 0px solid transparent;
}

p.intro {
    color: #fff;
    font-family: 'open sans', sans-serif;
    font-size: 13px;
    position: absolute;
    top: 0px;
    padding: 4px 0 0 38px;
    text-align: left;
}



/*------------------------------------------------------------------
--> BreadCrumbs / System Buttons
------------------------------------------------------------------*/

/* --> System Buttons ----------------------------------------------*/

    /* Column that contains the system buttons */
    .columns.system-btns-col { padding: 0 8px; }


/* --> Breadcrumbs ----------------------------------------------*/
    section#bcrumbs{ height: 48px; }

    /* Breadcrumb List */
    ul.bcrumb-list {
    font-size: 1.0em;
    margin: 8px 0;
    }

/* --> System Buttons ----------------------------------------------*/

    /* Email, Edit, Print List Container */
    ul.system-btns-list {
    float: right;
    width: auto;
    margin: 0;
    }

    /* System Button Item */
    ul.system-btns-list > li {
    width: auto;
    margin-bottom: 0;
    margin-left: 15px;
    padding: 0;
    }

    /* System Button Dropdown Menu */
    ul.system-menu {
    width: 180px;
    }

    /* System Button Link Text */
    ul.system-btns-list > li a.button {
    font-size: 1.0em;
    }

    /* System Button Style */
    .button.system-button { width: auto; }

    /* Email */
    #btn-email {background-position: 5px 8px;pointer-events: none;cursor: default;}
    
    /* Edit */
    #btn-edit { background-position: 5px 8px; }

    /* Print */
    #btn-print { background-position: 5px 8px; }


    /* Content area row */
    .content-row {
    padding-top: 0px;
    }    


/*------------------------------------------------------------------
--> Home Contents
------------------------------------------------------------------*/

/* --> Home Buttons ----------------------------------------------*/

    /* Hide separator that appeared below the buttons on the homepage */
    #dynamic-home-btns hr.home-btn-sep { display: none; }


/* --> Most Popular ----------------------------------------------*/

    /* Most Popular list */
    section#home-mostpop ul.az-list {
    width: 92%;
    padding-left: 8%;
    }

    /* Most Popular list item link */
    section#home-mostpop ul.az-list li a {
    font-size: 1.4em;
    }


/* --> Events List -----------------------------------------------*/

    /* Description for event */
    p.events-description {
    font-size: 1.3em;
    }


/*------------------------------------------------------------------
--> Page Footer
------------------------------------------------------------------*/

/* --> Footer Navigation -----------------------------------------*/

    /* Navigation list */
    nav.foot-nav ul.foot-nav-list {
    margin-left: 0;
    }

    /* Navigation list item link */
    nav.foot-nav ul.foot-nav-list li a {
    font-size: 1.3em;
    }


     div#footerNav ul.foot-nav-list li{   width: 16.666%;}


     div#footerNav ul li a{ font-size: 1.3em; }

    div#PageContacts .footerHeadings {
    text-align: left;
    padding: 0 0 0 10%;
    }


    /* --> Footer Contacts -----------------------------------------*/
    div#PageContacts p {
    text-align: left;}

    /* --> Google Translate ------------------------------------------*/

    div#translater { padding: 10px 0px; }

    p.TranslatePrompt {
    margin: 10px 10px;
    float: left;
    width: 49%;
    text-align: right;
    }

/* Civica logo ------------------------------------------*/

    #civica-foot-logo { 
    float: right;
    width: 26.66667%;
    }

    #civica-foot-logo a{
    text-align: right;
    width: 100%;
    }

/* --> Copyright -------------------------------------------------*/

    #copyright-span p.copyright {
    text-align: left;
    }

/* --> Divider (Mobile only)--------------------------------------*/

    /* Hide the divider for desktop */
    hr.footer-divider { display: none; }

}