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


    /*--> header utilities  --------------------------------*/
    div#header-row {
    margin: 0 20px;
    padding: 15px 0 0 0;
    }

    #hp-news{
    width: 65%;
    }

    #hp-buttons{
    width: 34.5%;
    }

    div#hp-news-cont {
    margin: 0 0 20px 0;
    }

    a#site-search-btn{
    right: 0;
    }

    #hp-featured{margin-right: 14px; width: 100%;}

    #header-right{ 
    padding:6px 8px 0 8px;
    float: none;
    width: 100%;
    margin:10px 0;
    text-align: center;
    display: inline-block;  
    }

    #header-left { 
    padding: 0 5px 0 15px;
    float: none;
    width: 100%;
    margin: 10px 0 0 0;
    text-align: center;
    display: inline-block; 
    }

    #header-utilities { 
    padding: 0 8px 0 6px;
    display: inline-block;
    float: none;
    position: relative;
    width: auto;
    }

    #utilities-google{
    display: inline-block;
    float: none;
    width: 100%;
    max-width: 255px;
    position: relative;
    }

    #header-links-left {
    display: inline-block;
    position: relative;
    float: none;
    padding: 0;
    width: 178px;
    text-align: left;
    }

    .search_inbox form {
    margin: 0 0 1em;
    }

    ul.head-links {
    float: right;
    width: 202px;
    }

    li.lograph {
    margin-left: 10px;
    margin-top: 2px;
    }

    #hp-services{
    width: 100%;
    margin-bottom: 20px;
    }

    #hp-slideshow{
    width: 100%;
    padding: 0 8px;
    }

    #dynamic-hp-slider{
    max-width: none;
    float: none;
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
    }

    .nivo-caption{
    position:  absolute;
    background: rgba(3,54,104,0.6);
    }

	
    #sidenav-col{
    padding: 0 0 0 12px;
    }

    #side-content{
    padding: 0 12px;
    }

    #google_translate_element {
    max-width: 185px; 
    }

    #alert .title{
    margin-bottom: 0;
    }


    /* Image Captions --------------------------------------------------------------------------*/

    .caption_left{
    padding: 0 15px 0 0;
    }

    .caption_right{
    float: right;
    padding: 0 0 0 15px;
    }

    span.caption_text{
    width: 95.4%;
    }

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

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

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

    section#top-nav {
    border-top: 2px solid #0f65ad;
    background: rgb(0,64,128); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(0,64,128,1) 31%, rgba(15,101,173,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,rgba(0,64,128,1)), color-stop(100%,rgba(15,101,173,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,64,128,1) 31%,rgba(15,101,173,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,64,128,1) 31%,rgba(15,101,173,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0,64,128,1) 31%,rgba(15,101,173,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0,64,128,1) 31%,rgba(15,101,173,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004080', endColorstr='#0f65ad',GradientType=0 ); /* IE6-9 */
    }


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

    .nav-fixed{
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    max-width: 1128px;
    border-bottom: 3px solid #0b4b80;
    }

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

    nav.main-nav{
    }

    nav.main-nav ul {
    width: 95%;
    background: none;
    margin-left: 4%;
    }

    /*hide the last nav item divider*/
    li#nav-li5 { visibility: hidden; }


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

    nav.main-nav ul.nav-list > li.nav-item {
    width: 18.4%;
    font-size: .8em;
    }

    nav.main-nav ul.nav-list > li.nav-item > a {
    padding: 5px 0 !important;
    text-align: center;
    }

    nav.main-nav ul.nav-list > li.nav-item:hover > a {
    background: #005fbe;
    }


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

    nav.main-nav ul li.nav-item > a {
    font-size: 1.2em;
    padding-right: 5px !important;
    }

    /* Dropdown Item Link */
    nav.main-nav .dropdown li.nav-item a {
    background: #004181;
    border-color: #003d7b;
    }


    /* --> Main Navigation Dropdown Container ------------------------*/
    .top-bar-section .dropdown li .dropdown{
    left: 96%;
    }

    nav.main-nav .dropdown {
    width: 200px;
    box-shadow: 0 3px 10px #000;
    left: -4px;
    }

    /* 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: 25px;
    background: #005fbe; 
    }

    /* Flyout Link */
    .top-bar .has-dropdown .dropdown li.has-dropdown > a {
    background: #004181;
    }

    /* Flyout Icon (text arrows) */
    .top-bar .has-dropdown .dropdown li.has-dropdown > a:after {
    content: ""; /* "»00bb" */
    }

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



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

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

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


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

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

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

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

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

    /* Edit */
    #btn-edit { background-position: 5px 2px; }

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


    /*
    ------------------------------------------------------------------
    --> Home Page Elements
    ------------------------------------------------------------------*/
    /*Start: Homepage Calendar */

    /* End: Homepage Calendar */
    #leo-wrapper{
    border-left: 8px solid #f6fafb;
    border-right: 8px solid #f6fafb;
    border-bottom:  8px solid #f6fafb;
    border-top: 0;   
    }

    /*
    ------------------------------------------------------------------
    --> Tab
    ------------------------------------------------------------------*/
    #hp-events-city, 
    #hp-events-public,
    #hp-events-other {
    width: 49%;
    }

    #hp-cal-cont.ui-tabs .ui-tabs-nav li a span { 
    font-size: 1em;
    }

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

    /* Footer Widths */
    #logo-footer{width: 100%; text-align: center;}
    #address-footer{width: 100%; text-align: center;}
    #nav-footer{width: 100%; padding: 0 0 0 5px;  text-align: center; margin-top: 20px;}
    #power-footer{ width: 100%; float: left; margin-top: 20px;}

    /* --> Footer Address -----------------------------------------*/
    div.footer-address-cont {
    padding-left: 10px;
    margin: 0 0 0 6px;
    }

    a#pats-directions{top:2px;}
    /* --> Google Translate ------------------------------------------*/


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

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


    /* --> Powered by Civica -----------------------------------------*/

    /* 'Powered by' text */
    span.powered-by-civica { margin-left: -10px; }

    /* Civica logo */
    #civica-foot-logo { 
    margin-left: -10px;
    text-align: center; }

    /*
    ------------------------------------------------------------------
    --> Photo Manager and Photo Book Styles
    ------------------------------------------------------------------*/
    #caption_wrap{
    position: absolute;
    background: rgba(1, 78, 153, 0.8);
    }

}