/******************************************************************
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-right {
/*width:46%;*/
}

#header-left {
/*width:45%;*/
}

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

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

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

/* Right element in header */
#header-right { margin-bottom: 10px; margin-top: 8px;}

section#top-nav {
background-color: transparent;
border-top: none;
border-bottom: none;
min-height: 30px;
}

.hp-headlines{ font-size: 2.8em; }
#hp-welcome { height: 291px; }

section#hp-news a.read-more{ background-color: transparent !important; }

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

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

nav.main-nav ul {
width: 100%;
background: none;
}
nav.main-nav ul li.nav-item a { font-size: 0.925em; }

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

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

nav.main-nav, nav.main-nav.expanded {
height: 30px !important;
line-height: 1.25em;
}

nav.main-nav ul.nav-list > li.nav-item > a {
padding: 5px 0 8px 0;
text-align: center;
line-height: 1.25em;
font-size: .885em;
letter-spacing: 0.05em;
font-weight: 600;
text-shadow: 0px 2px 3px #29608E;
}

nav.main-nav ul.nav-list > li.nav-item > a:hover {
/*background: #0C7FAC;*/
line-height: 1.25em;
background: rgb(38,133,208); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(38,133,208) 0%, rgb(12,60,96) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(38,133,208)), color-stop(100%,rgb(12,60,96))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(38,133,208) 0%,rgb(12,60,96) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(38,133,208) 0%,rgb(12,60,96) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(38,133,208) 0%,rgb(12,60,96) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(38,133,208) 0%,rgb(12,60,96) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2685d0', endColorstr='#0c3c60',GradientType=0 ); /* IE6-9 */

}

/*#sidenav-col{ max-width: 186px; }*/


/* --> 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: #0C7FAC;
border-color: #1D94C2;
}


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

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

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

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

/* 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 {
font-size: 1.0em;
margin: 10px 0 0 0;
}

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

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

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


nav#side-nav .sf-menu ul{ /*margin-top: -50%; */}

/* top nav last divider*/
ul.nav-list li.divider:last-child { display: none !important; }

/* Secondary Page Titlebar */
h1.content-title { font-size: 3.75em; width: 74%; background: rgba( 255, 255, 255, .0); }


/* Oceanside Portal */
div#portalHome {
width: 65%;
margin: 0 auto;
box-shadow: 0px 2px 10px #ccc;
border-radius: 8px;
}

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


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

/*#google_translate_element {
width: 80%;
} */


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

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


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

/* Civica logo */
#civica-foot-logo { text-align: center; }

/* Button Title */
#hp-buttons span.mm-button-txt { 
font-size: 3.3em;
text-align: left; 
}

#dynamic-service-btn .mm-button-wrap { font-size: 2.625em; }
#dynamic-service-btn .mm-button-subtxt{ display: block; }

#dynamic-photo-btn .mm-button-txt-wrap{ width: 60%; }

#hp-news-photo { width: 50%; }
#hp-popular { width: 50%; }
/*section#hp-calendar a#cal-archive{ top: 20px; }*/

.surf-conditions, #translate { text-align: left; }
#google_translate_element {margin: 0 auto; }

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

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


#pm-gallery00 {
height:auto !important;
position: relative;
}


#pm-gallery00 .scrollable {

position:relative;
overflow:hidden;
width: 440px;
height:120px;
}


#pm-gallery00 .scrollable .items {
width:20000em;
position:absolute;
clear:both;
}

#pm-gallery00 .items div {
float:left;
width:640px;
}

#pm-gallery00 .scrollable div.img-wrap {
float:left;
margin:19px -14px 19px 12px;
padding:0px;
width: 102px;
height: 77px;
overflow: hidden;
}

#pm-gallery00 .scrollable img {
border:1px solid #ccc;
}


#pm-gallery00 .scrollable .active {
border:1px solid #000;
position:relative;
cursor:default;
}


#pm-gallery00 .scrollable {
float:left;	
}


#pm-gallery00 a.browse {
background:url(/custom/photomanager/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:40px 0px;
cursor:pointer;
font-size:1px;
}


#pm-gallery00 a.right 			{ background-position: 0 -40px; clear:right; margin-right: 0px; float: left !important;}
#pm-gallery00 a.right:hover 		{ background-position:-30px -40px; }
#pm-gallery00 a.right:active 	{ background-position:-60px -40px; } 


#pm-gallery00 a.left				{ margin-left: 10px; } 
#pm-gallery00 a.left:hover  		{ background-position:-30px 0; }
#pm-gallery00 a.left:active  	{ background-position:-60px 0; }


/*
#pm-gallery00 a.disabled {
visibility:hidden !important;		
} 	
*/

#pm-gallery00 #image_wrap {

width:100%;
min-height:400px;
height:auto !important;
height:400px;
margin:0 0 0 0;
text-align:center;

}

#pm-gallery00 #image_wrap_g {

width:100%;
min-height:400px;
height:auto !important;
height:400px;
margin:0 0 0 0;
text-align:center;

}

#pm-gallery00 #scrollable_wrap {

width: 760px;
margin: 0 0 0 0;
border-top: 1px solid #ccc;
}

#pm-gallery00 #text_wrap {

width: 100%;
margin: 0 0 0 95;
text-align: center;
}

#pm-gallery00 h1, #pm-gallery00 h2, #pm-gallery00 h3
{
margin: 0 auto 5px auto;
text-align: center;
}

#pm-gallery00 #overlay
{
width: 300px;
height: 240px;
background: #e4e2e3;
display: none;
font: normal normal normal 13px/125% tahoma,sans-serif;
color: #000;
}

#pm-gallery00 #overlay #edtdiv
{
font: normal normal normal 13px/125% tahoma,sans-serif;
color: #c00;
}

#pm-gallery00 #overlay #title font
{
font: normal normal bold 27px/33px Garamond, Times, serif;
color:#b4b08c;
display:block;
font-variant: small-caps;
}



/***************************************************************************
Overlay
/**************************************************************************/
div#cvOvrlyWrapper {
width: 100%;
height: 550px;
overflow: hidden;
margin: 5% 0 0 !important;
}



p.footer-title{ display: block; }

#dynamic-side-btns .mm-button-wrap{ margin: 0px 0 15px 0;}

.edtdiv .Table_Center td {
	text-align: center;	
	
}

table.Table_Center td:first-child{ white-space: nowrap !important; text-align: left; }


/* #open-hours {
	float: none;
	text-align: right;
	margin-top:1em;
	padding-left:6px;
	color: #eee;
	line-height: 150%;
	font-size: 1.1em;
} */
#translate {
	float: none;
	margin-top: 1.5em;
	text-align: center;
}

}