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

.homepageBtn{ float: right; }

.block-head a.button.homepageBtn {
    font-size: 15px;
    float: right;
    margin-top: 15px;
    margin-right: 1em;
    margin-bottom: 0;
    padding: 10px;
    text-transform: capitalize;
    top: -5px;
}

/* 2 column layouts - Moves buttons to opposite side for desktop views */
#col2Content{
float: right;
}
/* -->  HOMEPAGE ROW SPACER -------------------------------*/
div#folsomHp2 { margin: 25px 0 0 0; }

/* --> Homepage slideshow ---------------------------------*/
.orbit-container .orbit-prev, .orbit-container .orbit-next {
display: block;
}

.orbit-caption p{ 
  font-size: 1.825em;
}

.orbit-caption h3.caption{ font-weight: normal; font-size: 3em; }

/* --> Homepage News Alert ---------------------------------*/
div#folsomNewsWrapper {
    height: 948px;
    overflow: hidden;
}

div#folsomNews{
    height: 900px;
}

.event-title{ font-size: 1.325em; }
.event-time{ font-size: inherit; }

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

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

#bgGraphics .mm-button-link {
width: 100%;
/*height: 956px*/
height: 100%;
}

/* --> HOMEPAGE CALENDAR ---------------------------------*/
#cal_left h1 { font-size: 7em; }
#cal_left h3 {
    padding: 21px 8px 21px 0px;
    font-size: 1.2em;
}

#cal_left {  width: 28.666%;}
#hp-cal #smlCal002_Head td, #hp-cal #smlCal002 td a { font-size: .833em; }

/* --> Homepage Buttons ---------------------------------*/

#dynamic-home-btns a.mm-button-link .mm-button-txt-wrap {
background: rgba(20,96,155,.7) url(/img/00/layout/btnarrow.png) no-repeat top center ;
display: inline-block;
padding: 40px 8px 0 8px;
position: absolute;
top: 88%;

transition:  top .5s ease-in-out, background-image .5s ease-in-out;
-o-transition:  top .5s ease-in-out, background-image .5s ease-in-out;
-moz-transition:  top .5s ease-in-out, background-image .5s ease-in-out;
-webkit-transition:  top .5s ease-in-out, background-image .5s ease-in-out;
}
#dynamic-home-btns a.mm-button-link .mm-button-txt {
font-size: 1.825em;
}

#dynamic-home-btns a.mm-button-link:hover { color: #fff; }

#dynamic-home-btns a.mm-button-link{ overflow: hidden; }

#dynamic-home-btns a.mm-button-link:hover .mm-button-txt-wrap {
top: 0%;
background-image: none;
}


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

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

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


/* --> Homepage Icon Tray ---------------------------------*/

    #hp-icon-wrapper .bx-viewport{ margin: 0 26px; }

    #services-tray{
    margin: 14px 0 0 0;
    }



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

/* --> 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 {
width: 100%;
background: none;
}


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


#dynamic-top-nav {
display: inline-block;
vertical-align: top;
width: 100%;
text-align: right;
}

nav.main-nav ul.nav-list > li.nav-item {
width: 14.4%;
margin-right: 1.666%;
text-align: center;
float: none;
display: inline-block;
vertical-align: top;
}

nav.main-nav ul.nav-list > li.nav-item > a {
text-align: center;
border-radius: 4px;
height: 100%;
line-height: 1em;
padding: 64px 0 10px 5px;
min-height: 104px;
}

nav.main-nav ul.nav-list > li.nav-item.last {margin-right: 0;}

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

nav.main-nav ul li.nav-item a{ font-size: .8em; }

nav.main-nav ul.nav-list > .nav-item.nav-item-1 > a { background: url(/img/00/nav/man.png) center 10px no-repeat #004589; }    
nav.main-nav ul.nav-list > .nav-item.nav-item-2 > a { background: url(/img/00/nav/shop.png) center 10px no-repeat #004589; }
nav.main-nav ul.nav-list > .nav-item.nav-item-3 > a { background: url(/img/00/nav/service.png) center 10px no-repeat #004589; }
nav.main-nav ul.nav-list > .nav-item.nav-item-4 > a { background: url(/img/00/nav/govt.png) center 10px no-repeat #004589; }
nav.main-nav ul.nav-list > .nav-item.nav-item-5 > a { background: url(/img/00/nav/marker.png) center 10px no-repeat #004589; }
nav.main-nav ul.nav-list > .nav-item.nav-item-6 > a { background: url(/img/00/nav/howdoi.png) center 10px no-repeat#004589; }

nav.main-nav ul.nav-list > .nav-item.nav-item-1 > a:hover { background: url(/img/00/nav/man.png) center 10px no-repeat #68B5DE; }    
nav.main-nav ul.nav-list > .nav-item.nav-item-2 > a:hover { background: url(/img/00/nav/shop.png) center 10px no-repeat #68B5DE;  }
nav.main-nav ul.nav-list > .nav-item.nav-item-3 > a:hover { background: url(/img/00/nav/service.png) center 10px no-repeat #68B5DE;  }
nav.main-nav ul.nav-list > .nav-item.nav-item-4 > a:hover { background: url(/img/00/nav/govt.png) center 10px no-repeat #68B5DE;  }
nav.main-nav ul.nav-list > .nav-item.nav-item-5 > a:hover { background: url(/img/00/nav/marker.png) center 10px no-repeat #68B5DE;  }
nav.main-nav ul.nav-list > .nav-item.nav-item-6 > a:hover { background: url(/img/00/nav/howdoi.png) center 10px no-repeat #68B5DE;  }

nav.main-nav ul.mega-menu-list li.nav-item a {
font-size: 0.6em;
padding: 4px 0;
}

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

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

/* Dropdown Item Link */
nav.main-nav .dropdown li.nav-item a {
background: #fff;
border-color: #fff;
color: #004589;
}
nav.main-nav .dropdown li.nav-item a:hover{
padding-left:15px;
}


h4.nav-item.nav-item-1.section-heading {
    display: none;
}

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

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

/* 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: 5px;
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: 95%;
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:none; 
}

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


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

div#sidenav-col {
width: calc(24% - 15px);
}

#footerBtn1 a.mm-button-link, 
#footerBtn2 a.mm-button-link {
font-size: 1.5em;
padding: 21px 0 0 12px;
}


/* Side Nav Flyout Placement */
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: #ffffff;
border-width: 5px;
}



/* --> Header  -----------------------------------------------*/
header#page-header {
z-index: 10;
position: relative;
background: url(/img/01/layout/hdr-wave.png) 0 0 no-repeat transparent;
}


div#header-row { 
height: 192px;
padding: 0;
margin: 0 0 0 0;
}

#header-right {
margin-top: 12px;
}


div.utils{ height: 18px;}

ul.head-links{
text-align:right;
}

ul.head-links li {
width: auto;
}

#socialUtils a.mm-button-link { margin: 0px 0 0 5px; }

a#cityLogo{ margin-top: 0;margin-left: 15px; }

div#searchSizer {
margin-right: 30px;
float: right;
max-width: 350px;
padding:15px 0 0 0;
}

section#slideshow-home {
    margin: -160px 0 0 0;
    z-index: 1;
    position: relative;
}

div#searchSizer.secondarypage { 
float: right;
max-width: 350px;
padding:15px 0 0 15px;
}

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

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

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

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

/* Breadcrumb List */
ul.bcrumb-list {
font-size: .8em;
margin: 0;
padding: 0 0 0 15px;
color: #888;
width: 89%;
}

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

/* System Button Item */
ul.system-btns-list > li {
width: auto;
margin-bottom: 0;
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;
}


/*------------------------------------------------------------------
--> 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 -----------------------------------------------*/
#eventsList {
    margin: 30px 0 0 0;
    height: 350px;
    overflow: hidden;
}

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

.footerMenu a { font-size: 1.4em; }

div#footerBtn1,
div#footerBtn2 {
margin-top: 20px;
}

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

#google_translate_element {
margin-bottom: 0px;
}

#google_translate_element .goog-te-gadget {
height: 17px;
}

select.goog-te-combo {
height: 20px;
padding: 0;
margin: 0;
border: none;
color: #004589;
}

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

/* Civica logo */
#civica-foot-logo {
    margin-left: 0;
    max-width: 55px; 
}

/*  Photobook Styles  */

.Photosizer{
overflow: hidden;
max-height: 200px;
max-width:250px;
}

.Photosizer img {
display: block;
height: 190px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-height: 210px;
max-width: 250px;
overflow: hidden;
width: 200px;
}

.PhotoBG {
width: 250px;
height: 210px;
}


/*------------------------------------------------------------------
--> Photo Manager and Photo Book Styles
------------------------------------------------------------------*/

#jqGalleryDiv h2{
margin-left: 25%;
}

#image_wrap img{
cursor: default;
padding-bottom: 10px;
margin-left:10px;
}

#image_wrap_g img{
cursor: default;
padding-bottom: 10px;
margin-left:10px;
}

.img-wrap:hover{
cursor:pointer;
}

.img-wrap {
float: left;
height: 100px;
overflow: hidden;
padding: 10px;
width: 100px;
}

#galBackOuter > div {
margin-left: 10px;
margin-top: 20px;
}

}