/******************************************************************
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) {*/


    /* 2 column layouts - Moves buttons to opposite side for desktop views */
    #col2Content{
    float: right;
    max-width: 711px;
    min-height: 560px;
    }

    .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;
    } 

    .civica-top {
    right: 20px;
    bottom: 20px;
    }


    /* Header */
    header#page-header{ background: url(/img/00/layout/header_rep.png) repeat-x top transparent; }
    #header-right {
    margin-top: 20px;
    margin-bottom: 13px;
    }
    
    h1#header-logo a { position: absolute;     margin: 0 0; }

    .lowGraphicWrap ul.head-links { 
            position: relative;
    float: right;
    margin: 0px 18px 0 0;
    }

/*------------------------------------------------------------------
--> Main Navigation
------------------------------------------------------------------*/
    section#top-nav {
    background-color: transparent;
    border-top: 0px solid #273238;
}

.top-bar{ height: 42px; }


h1.content-title {
    margin: 17px 0 0 10px;
    width: 78%;
}

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

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


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

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

    nav.main-nav ul.nav-list {
    width: 70%;
    text-align: center;
    background: none;
    float: right !important;
    text-align: right !important;
    border: 1px solid red;
    padding: 0;
    margin: 0;
    }

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

/* --> Main Navigation Item --------------------------------------*/
    
    nav.main-nav ul.nav-list { border: 0px solid transparent; }

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

    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: #517227;
    }


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

    nav.main-nav ul li.nav-item > a {
    font-size: 1em;
    padding: 0;
    line-height: 0;
    color: #387c2c;
    font-weight: bold;
    font-family: arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    background: transparent;
    padding-right: 0 !important;
    letter-spacing: -.03em;
    /*padding: 0 12px !important;*/
    }

    /* Dropdown Item Link */
    nav.main-nav .dropdown li.nav-item a {
    text-transform: none;
    background: #fff;
    padding: 5px 7px 5px 8px;
    text-align: left;
    border-bottom: 1px solid #ccc;
    color: #333;
    margin: 0px 0px 0px 0px;
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 185px center;
    font-family: tahoma, sans-serif;
    font-family: Arial, Sans-Serif;
    font-size: 11px;
    line-height: 15px;
    }

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

    nav.main-nav .dropdown li.flyout-left a {
    padding: 5px 7px 5px 105px;
    border: 1px solid lime;
    }
    


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

    nav.main-nav .dropdown {
    width: 200px;
    text-align: left;
    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);
    margin: 0px 0px 0px 0px;
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
    font-family: tahoma, sans-serif;
    font-family: Arial, Sans-Serif;
    font-size: 11px;
    line-height: 15px;
    }

    /* 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: 8px;
    padding-right: 0px !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: #b9b9b9;
    border-width: 5px;
    margin-top: -5px;
    display: block;
    }

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

    .top-bar li.flyout-left .dropdown li.has-dropdown > a:hover {
    padding-left: 30px;
    }

    .top-bar li.flyout-left .dropdown li.has-dropdown > a:after {
    left: 7px;
    border-color: transparent;
    border-right-color: #b9b9b9;
    border-left-color: transparent;
    }

    /* Hide navigation dividers */
    li.divider.first,
    li.divider:last-child{
        display: none;
    }

    /* Navigation items */
    nav.main-nav .top-bar-section > ul > .divider {
    border-bottom: 0;
    border-top: 0;
    border-right: solid 0px #b1b1b1;
    border-left: solid 1px transparent;
    margin: 0 14px;
    clear: none;
    height: 21px;
    width: 0;
    background: url(/img/00/divider.png) top center no-repeat;
    }

/* Side Nav Column */
div#sidenav-col {
    border-right: 1px solid #ccc;
    margin: 20px 0 20px 10px;
    background: url(/img/00/layout/leftnav_sidefade.png) no-repeat right top;
    padding: 0 10px 0 0;
    min-height: 300px;
    display: block;
    clear: both;
}

div.fader{
    position: absolute;
    bottom: 0;
    height: 30px;
    display: none;
    width: 100%; 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

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

nav#side-nav .sf-menu li {
    background: transparent;
}

ul.side-nav-flyout {
    background: #fff;
}

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

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

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

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


    /* 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;
    }

/* --> Breadcrumbs ----------------------------------------------*/

    /* Breadcrumb List */
    ul.bcrumb-list {
   
    margin: 4px 0 0 10px;
    }

    ul.bcrumb-list li.arr, ul.bcrumb-list li.current{ margin-top: 4px; }

/* --> 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: 0px;
    padding: 0;
    }

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

    /* 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: url(/img/00/icons/email-icon.png) no-repeat 0px -41px;
        padding-left: 16px;
    border: 0px solid transparent;
     }

    /* Edit */
    #btn-edit { 
    background: transparent url(/img/00/icons/edit-icon.png) no-repeat -1px -42px;
    padding-left: 0;
    color: transparent;
    width: 46px;
    }

    /* Print */
    #btn-print { 
        background: url(/img/00/icons/print-icon.png) no-repeat 0px -41px;
                padding-left: 19px;
    border: 0px solid transparent;

     }

     #btn-email:hover,
     #btn-email.hover{ background: url(/img/00/icons/email-icon.png) no-repeat 0px -1px; box-shadow: none; }  

     #btn-print:hover { background: url(/img/00/icons/print-icon.png) no-repeat 0px -1px #000; }

     #btn-edit:hover{ background: url(/img/00/icons/edit-icon.png) transparent -1px -2px !important; }



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

/* News */
div#hpNewsCol {
    border-right: 1px solid #bebebe;
}
div#hpEventsCol{
    padding: 0 4px 0 10px;
}

/* Sitewide Background Image */
div#big-bg-image {
    position: absolute;
    width: 100%;
    height: 831px;
    max-height: 831px;
    top: 0;
    left: 0;
    z-index: -1;
    display: none;
}

#big-bg-image a {
    display: block;
    width: 100%;
     min-width: 1200px;/* Remove for responsive behaviour */
    height: 831px;
    background-position: center center !important;
}


div#homeWrapper {
background: #fff;
margin: 8px auto 20px auto;
width: 994px;
width: 974px;
}

/* --> 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;
    }

/*------------------------------------------------------------------
--> Content Area 
------------------------------------------------------------------*/
.content-row{ 
    background: #fff url(/img/00/layout/pgbot.png) no-repeat bottom center;    
    margin: 4px 0 20px 0;
    padding: 0px 0 20px 0;
    max-width: 968px;
    }

.pgtitle {
    padding: 0;
    background: url(/img/00/layout/pgtitle-1a.jpg) no-repeat;
    margin: 10px 0px 0px 0px;
    text-shadow:-2px 1px 4px #000;
    background-size: cover !important;
    min-height: 90px;
    padding: 2px 0 0 0px;
}

/*------------------------------------------------------------------
--> 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;
    }


/* --> Google Translate ------------------------------------------*/
#google_translate_element {
    display: inline-block;
}

/* 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; }

/*}*/