﻿
/****************************************************/
/********** City of Santa Barbara Main CSS **********/
/****************************************************/

@media print {
div:not(.reveal-modal) {
  display: inherit !important;
}
#charm-bar, #top-nav, #charm-toggle, #alert {
  display: none !important;
}
#dynamic-bg, #header-right, #top-nav, #sidenav-col, #bcrumbs, #social-media-center, #goog-gt-tt, img.footer-logo, input.submit-btn, #dynamic-top-nav {
  display: none !important;
}
#page-footer, #page-body {
  display: block !important;
  float: left !important;
  clear: both !important;
  position: relative !important;
}
}
.fontsize a {
  float: none !important;
  height: 22px;
  margin: 5px 0px 0px 0px !important;
  text-decoration: underline;
}
.fontsize a.selected {
  text-decoration: none;
}
#fontsize0 {
  font-size: 1em; /*=10px*/
}
#fontsize1 {
  font-size: 1.1em; /*=11px*/
}
#fontsize2 {
  font-size: 1.3em; /*=13px*/
}
/*------------.size0 */   
.size0 {
  font-size: 1.2em;
}
#side-nav.size0 .sf-menu a {
  font-size: 1.1em;
}
/*-------------.size1 */
.size1 {
  font-size: 1.4em;
}
#side-nav.size1 .sf-menu a {
  font-size: 1.0em;
}
/*-----------.size2 */
.size2 {
  font-size: 1.6em;
}
#side-nav.size2 .sf-menu a {
  font-size: 1.1em;
}
/******************************************************************
base.css
-------------------------------------------------------------------
Stylesheet: Base Mobile
-------------------------------------------------------------------

Be light and don't over-style since everything here will be
loaded by mobile devices. You want to keep it as minimal as
possible. These styles will be applied across all viewports.

******************************************************************/

/*
------------------------------------------------------------------
--> Foundation Columns
------------------------------------------------------------------*/

/* --> Column Padding --------------------------------------------*/

.row .column, .row .columns {
  padding: 0 8px;
}
/*
------------------------------------------------------------------
--> Scalable Background Image
------------------------------------------------------------------*/

#big-bg-image {
  display: none;
}
/*
------------------------------------------------------------------
--> Dynamic Header Logo
------------------------------------------------------------------*/

#dynamic-head-logo {
  position: absolute;
  top: -7px;
  display: none;
}
#dynamic-head-logo .mm-button-link {
  display: block;
  width: 140px;
  height: 140px;
}
/*
------------------------------------------------------------------
--> Branding Styles
------------------------------------------------------------------*/

/* --> Defaults --------------------------------------------------*/

body {
  font-family: Verdana, sans-serif;
  font-size: 62.5%; /* Sets base font-size to 10px so 1.0em = 10px */
  color: #1a1a1a;
}
/* Set default font-size to 14px */
p, a, span, .button, .button-blue-dark {
  /*font-size: 1.4em;*/
  font-size: 14px;
  transition: font-size .3s ease-in-out;
  -o-transition: font-size .3s ease-in-out;
  -moz-transition: font-size .3s ease-in-out;
  -webkit-transition: font-size .3s ease-in-out;
}
/* Make sure that links in paragraphs are not larger */
p a {
  font-size: inherit;
}
/* --> Anchors ---------------------------------------------------*/

a, a:visited {
  color: #08518C;
  transition: color .3s ease-in-out;
  -o-transition: color .3s ease-in-out;
  -moz-transition: color .3s ease-in-out;
  -webkit-transition: color .3s ease-in-out;
}
a:hover, a:focus {
  color: #0d7dd9;
  text-decoration: underline;
}
a:active {
  color: #ff0f0f;
}
.cvCalendar3 a {
  font-size: 1.0em;
}
.cvCalendar3 ul {
  margin-bottom: 1.0em;
}
.cal3-back {
  font-size: 1.375em !important;
  font-weight: bold;
}
/* --> Headings --------------------------------------------------*/

/* All headings */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: Verdana, sans-serif;
  font-weight: normal;
}
h1, .h1 {
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 3.6em;
}
h2, .h2 {
  font-size: 3.2em;
}
h3, .h3 {
  font-size: 2.8em;
}
h4, .h4 {
  font-size: 2.4em;
}
h5, .h5 {
  font-size: 1.6em;
  font-weight: bold;
}
h6, .h6 {
  font-size: 1.4em;
  font-weight: bold;
}
/* --> Tables ----------------------------------------------------*/

table {
  background: none;
  border: 0;
  margin: 0;
}
/* Default scale for <table> elements */
table tr th, table tr td {
  font-size: inherit;
}
/* Override background color from Foundation */
table tr.even, table tr.alt, table tr:nth-of-type(even) {
  background: none;
}
caption {
  font-family: "AbadiMTW01-LightCondens", Arial, sans-serif;
  font-size: 2.2em;
  font-weight: normal;
  line-height: normal;
  background-color: #104467;
  color: #FFFFFF;
  border-top: 1px solid #104467;
  border-bottom: 1px solid #104467;
  border-left: 1px solid #104467;
  border-right: 1px solid #104467;
  margin-bottom: 5px;/*border-top: 1px solid #104467;
  border-bottom: 1px solid #aac3d5;
  border-left: 1px solid #104467;
  border-right: 1px solid #104467;*/
}
/*
------------------------------------------------------------------
--> Custom Widget Style
------------------------------------------------------------------*/
.imagecenter img {
  display: block;
  margin-left: auto;
  margin-right: auto
}
.imageright img {
  display: block;
  position: relative;
  float: right;
}
.imageleft img {
  display: block;
  position: relative;
  float: left;
}
/*
------------------------------------------------------------------
--> Charm Bar
------------------------------------------------------------------*/

#charm-toggle {
  position: fixed;
  color: #fff;
  right: 0;
  top: 40px;
  padding: 0 8px 6px 8px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border: 2px solid #fff;
  border-right: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  font-size: 1.0em;
  box-shadow: 0 2px 6px #000;
  z-index: 500;
}
#charm-toggle:hover {
  text-decoration: none;
  background: #000;
}
#charm-toggle span {
  display: block;
  font-size: 2.6em;
}
#charm-bar {
  display: none;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  z-index: 500;
}
/* --> Temperature -----------------------------------------------*/

.weather-cont {
  float: left;
  width: 100%;
  margin: 25px 15px 30px 4%;
 
}
/* Temperature Image Link */
a.forcast-link {
  float: left;
  display: block;
 pointer-events: none;
}
a.forcast-link img {
  display: block;
}
/* Temperature text */
.temperature {
  float: left;
  display: block;
  color: #fff;
  font-size: 2.0em;
  font-weight: bold;
  margin-top: 8px;
  margin-left: 10px;
}
/* --> Charms ----------------------------------------------------*/

#close-charms {
  position: absolute;
  top: 25px;
  right: 4%;
  color: #fff;
  font-size: 1.5em;
  background: #000;
  border-radius: 9999px;
  padding: 8px 10px;
  border: 1px solid #ddd;
}
#close-charms:hover {
  text-decoration: none;
  background: #666;
}
#dynamic-charms {
  margin-top: 20px;
}
#static-charms {
  margin-top: 20px;
}
/* Link wrapper */
#dynamic-charms .mm-button-link, #static-charms .mm-button-link, #dynamic-charms .portal-myIcon-wrap, #portal-charms .portal-myIcon-wrap {
  float: left;
  display: block;
  width: 44%;
  height: 100px;
  padding: 10px;
  background-color: #999;
  border: 1px solid #ccc;
  margin-left: 4%;
  margin-bottom: 4%;
  max-width: 200px;
}
#dynamic-charms .mm-button-link:hover, #static-charms .mm-button-link:hover, #dynamic-charms .portal-myIcon-wrap:hover, #portal-charms .portal-myIcon-wrap:hover {
  background-color: #bbb;
  text-decoration: none;
}
/* Charm icon image */
#dynamic-charms .mm-button-img, #static-charms .mm-button-img, #dynamic-charms .portal-myIcon-img, #portal-charms .portal-myIcon-img {
  display: block;
  margin: 0 auto;
}
/* Charm text */
#dynamic-charms .mm-button-txt, #static-charms .mm-button-txt, #dynamic-charms .portal-myIcon-text, #portal-charms .portal-myIcon-text {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 1.2em;
}
/* Charm Notifications */
.library_notifications {
  background: url(/img/00/bookicon.png) no-repeat 3px 3px;
  position: relative;
}
.air_notifications {
  background: url(/img/00/airplainicon.png) no-repeat 3px 3px;
  position: relative;
}
/* --> Charms Color ----------------------------------------------*/

/* Red (Add to Favorites color) */
#dynamic-charms .mm-button-link.charm-red, #static-charms .mm-button-link.charm-red, .portal-myIcon-wrap.charm-red {
  background-color: #9c2800 !important;
  border: 1px solid #cf3400 !important;
}
#dynamic-charms .mm-button-link.charm-red:hover, #static-charms .mm-button-link.charm-red:hover, .portal-myIcon-wrap.charm-red:hover {
  background-color: #b52d00 !important;
}
/* Blue - pos 1 */
#dynamic-charms .mm-button-link.charm-blue, #dynamic-charms .mm-link-1, .pool-charm .mm-link-1, #dynamic-charms .mm-link-8, .pool-charm .mm-link-8, #dynamic-charms .mm-link-15, .pool-charm .mm-link-15, #dynamic-charms .mm-link-22, .pool-charm .mm-link-22, #dynamic-charms .mm-link-29, .pool-charm .mm-link-29, #static-charms .mm-button-link.charm-blue, .portal-myIcon-wrap.charm-blue {
  background-color: #18679a !important;
  border: 1px solid #2187cc !important;
}
#dynamic-charms .mm-button-link.charm-blue:hover, #dynamic-charms .mm-link-1:hover, .pool-charm .mm-link-1:hover, #dynamic-charms .mm-link-8:hover, .pool-charm .mm-link-8:hover, #dynamic-charms .mm-link-15:hover, .pool-charm .mm-link-15:hover, #dynamic-charms .mm-link-22:hover, .pool-charm .mm-link-22:hover, #dynamic-charms .mm-link-29:hover, .pool-charm .mm-link-29:hover, #static-charms .mm-button-link.charm-blue:hover, .portal-myIcon-wrap.charm-blue:hover {
  background-color: #1d77b3 !important;
}
/* Gold - pos 2 */
#dynamic-charms .mm-button-link.charm-gold, #dynamic-charms .mm-link-2, .pool-charm .mm-link-2, #dynamic-charms .mm-link-9, .pool-charm .mm-link-9, #dynamic-charms .mm-link-16, .pool-charm .mm-link-16, #dynamic-charms .mm-link-23, .pool-charm .mm-link-23, #dynamic-charms .mm-link-30, .pool-charm .mm-link-30, #static-charms .mm-button-link.charm-gold, .portal-myIcon-wrap.charm-gold {
  background-color: #a49864 !important;
  border: 1px solid #d6c783 !important;
}
#dynamic-charms .mm-button-link.charm-gold:hover, #dynamic-charms .mm-link-2:hover, .pool-charm .mm-link-2:hover, #dynamic-charms .mm-link-9:hover, .pool-charm .mm-link-9:hover, #dynamic-charms .mm-link-16:hover, .pool-charm .mm-link-16:hover, #dynamic-charms .mm-link-23:hover, .pool-charm .mm-link-23:hover, #dynamic-charms .mm-link-30:hover, .pool-charm .mm-link-30:hover, #static-charms .mm-button-link.charm-gold:hover, .portal-myIcon-wrap.charm-gold:hover {
  background-color: #d6c783 !important;
}
/* Purple - pos 3 */
#dynamic-charms .mm-button-link.charm-purple, #dynamic-charms .mm-link-3, .pool-charm .mm-link-3, #dynamic-charms .mm-link-10, .pool-charm .mm-link-10, #dynamic-charms .mm-link-17, .pool-charm .mm-link-17, #dynamic-charms .mm-link-24, .pool-charm .mm-link-24, #dynamic-charms .mm-link-31, .pool-charm .mm-link-31, #static-charms .mm-button-link.charm-purple, .portal-myIcon-wrap.charm-purple {
  background-color: #917897 !important;
  border: 1px solid #c19fc9 !important;
}
#dynamic-charms .mm-button-link.charm-purple:hover, #dynamic-charms .mm-link-3:hover, .pool-charm .mm-link-3:hover, #dynamic-charms .mm-link-10:hover, .pool-charm .mm-link-10:hover, #dynamic-charms .mm-link-17:hover, .pool-charm .mm-link-17:hover, #dynamic-charms .mm-link-24:hover, .pool-charm .mm-link-24:hover, #dynamic-charms .mm-link-31:hover, .pool-charm .mm-link-31:hover, #static-charms .mm-button-link.charm-purple:hover, .portal-myIcon-wrap.charm-purple:hover {
  background-color: #a98bb0 !important;
}
/* Green - pos 4 */
#dynamic-charms .mm-button-link.charm-green, #dynamic-charms .mm-link-4, .pool-charm .mm-link-4, #dynamic-charms .mm-link-11, .pool-charm .mm-link-11, #dynamic-charms .mm-link-18, .pool-charm .mm-link-18, #dynamic-charms .mm-link-25, .pool-charm .mm-link-25, #dynamic-charms .mm-link-32, .pool-charm .mm-link-32, #static-charms .mm-button-link.charm-green, .portal-myIcon-wrap.charm-green {
  background-color: #255833 !important;
  border: 1px solid #3b8c51 !important;
}
#dynamic-charms .mm-button-link.charm-green:hover, #dynamic-charms .mm-link-4:hover, .pool-charm .mm-link-4:hover, #dynamic-charms .mm-link-11:hover, .pool-charm .mm-link-11:hover, #dynamic-charms .mm-link-18:hover, .pool-charm .mm-link-18:hover, #dynamic-charms .mm-link-25:hover, .pool-charm .mm-link-25:hover, #dynamic-charms .mm-link-32:hover, .pool-charm .mm-link-32:hover, #static-charms .mm-button-link.charm-green:hover, .portal-myIcon-wrap.charm-green:hover {
  background-color: #307342 !important;
}
/* Light Green - pos 5 */
#dynamic-charms .mm-button-link.charm-lightgreen, #dynamic-charms .mm-link-5, .pool-charm .mm-link-5, #dynamic-charms .mm-link-12, .pool-charm .mm-link-12, #dynamic-charms .mm-link-19, .pool-charm .mm-link-19, #dynamic-charms .mm-link-26, .pool-charm .mm-link-26, #dynamic-charms .mm-link-33, .pool-charm .mm-link-33, #static-charms .mm-button-link.charm-lightgreen, .portal-myIcon-wrap.charm-lightgreen {
  background-color: #92a497 !important;
  border: 1px solid #bfd6c5 !important;
}
#dynamic-charms .mm-button-link.charm-lightgreen:hover, #dynamic-charms .mm-link-5:hover, .pool-charm .mm-link-5:hover, #dynamic-charms .mm-link-12:hover, .pool-charm .mm-link-12:hover, #dynamic-charms .mm-link-19:hover, .pool-charm .mm-link-19:hover, #dynamic-charms .mm-link-26:hover, .pool-charm .mm-link-26:hover, #dynamic-charms .mm-link-33:hover, .pool-charm .mm-link-33:hover, #static-charms .mm-button-link.charm-lightgreen:hover, .portal-myIcon-wrap.charm-lightgreen:hover {
  background-color: #a8bdae !important;
}
/* Blue Purple - pos 6 */
#dynamic-charms .mm-button-link.charm-bluepurple, #dynamic-charms .mm-link-6, .pool-charm .mm-link-6, #dynamic-charms .mm-link-13, .pool-charm .mm-link-13, #dynamic-charms .mm-link-20, .pool-charm .mm-link-20, #dynamic-charms .mm-link-27, .pool-charm .mm-link-27, #dynamic-charms .mm-link-34, .pool-charm .mm-link-34, #static-charms .mm-button-link.charm-bluepurple, .portal-myIcon-wrap.charm-bluepurple {
  background-color: #5d6889 !important;
  border: 1px solid #808fbd !important;
}
#dynamic-charms .mm-button-link.charm-bluepurple:hover, #dynamic-charms .mm-link-6:hover, .pool-charm .mm-link-6:hover, #dynamic-charms .mm-link-13:hover, .pool-charm .mm-link-13:hover, #dynamic-charms .mm-link-20:hover, .pool-charm .mm-link-20:hover, #dynamic-charms .mm-link-27:hover, .pool-charm .mm-link-27:hover, #dynamic-charms .mm-link-34:hover, .pool-charm .mm-link-34:hover, #static-charms .mm-button-link.charm-bluepurple:hover, .portal-myIcon-wrap.charm-bluepurple:hover {
  background-color: #6f7ca3 !important;
}
/* Dark Yellow - pos 7 */
#dynamic-charms .mm-button-link.charm-darkyellow, #dynamic-charms .mm-link-7, .pool-charm .mm-link-7, #dynamic-charms .mm-link-14, .pool-charm .mm-link-14, #dynamic-charms .mm-link-21, .pool-charm .mm-link-21, #dynamic-charms .mm-link-28, .pool-charm .mm-link-28, #dynamic-charms .mm-link-35, .pool-charm .mm-link-35, #static-charms .mm-button-link.charm-darkyellow, .portal-myIcon-wrap.charm-darkyellow {
  background-color: #a38f3b !important;
  border: 1px solid #d6bb4d !important;
}
#dynamic-charms .mm-button-link.charm-darkyellow:hover, #dynamic-charms .mm-link-7:hover, .pool-charm .mm-link-7:hover, #dynamic-charms .mm-link-14:hover, .pool-charm .mm-link-14:hover, #dynamic-charms .mm-link-21:hover, .pool-charm .mm-link-21:hover, #dynamic-charms .mm-link-28:hover, .pool-charm .mm-link-28:hover, #dynamic-charms .mm-link-35:hover, .pool-charm .mm-link-35:hover, #static-charms .mm-button-link.charm-darkyellow:hover, .portal-myIcon-wrap.charm-darkyellow:hover {
  background-color: #bda544 !important;
}
.charm-fav-selected {
  border-color: #ffd200 !important;
  background: #ff9000 !important;
}
.charm-fav-selected:hover {
  background: #e58200 !important;
}
/* Charm ADA styles */

#myicons-selected-holder .pool-charm a, #myicons-pool-holder .pool-charm a {
  opacity: 0.75;
}
.pool-charm a.active {
  border: 1px solid #cf3400 !important;
  box-shadow: 0 0 8px #000;
  opacity: 1 !important;
}
.drag-arrow-cont {
  width: 100%;
}
.drag-arrow-holder {
  width: 190px;
  margin: 0 auto;
}
#drag-arrow-left {
  margin-left: 20px;
}
.drag-arrow {
  float: left;
  padding: 6px;
  background: #ccc;
  border: 1px solid #999;
  border-radius: 3px;
  font-size: 2.0em;
  cursor: pointer;
  color: #333;
  text-shadow: 0 1px 0 #fff;
  margin: 5px;
  margin-top: 20px;
}
.drag-arrow:hover {
  text-decoration: none;
}
/*
------------------------------------------------------------------
--> Page Header
------------------------------------------------------------------*/

/* --> Header Base -----------------------------------------------*/

header#page-header {
  width: 100%;
  background: #e3dfce url('/img/00/sbb_header.jpg') no-repeat left top; /* for silly IE8 fallback */
  background: url('/img/00/noise/verylight.png') repeat, #e3dfce url('/img/00/sbb_header.jpg') no-repeat left top;
  border-bottom: 1px solid #99978b;
}
#header-right {
  margin-top: 5px;
}
/* --> Header Logo -----------------------------------------------*/

#header-logo {
  display: inline-block;
  transition: margin .3s ease-in-out;
  -o-transition: margin .3s ease-in-out;
  -moz-transition: margin .3s ease-in-out;
  -webkit-transition: margin .3s ease-in-out;
}
#header-logo img {
  width: 100%;
}
/* --> Header Links ----------------------------------------------*/

ul.head-links {
  list-style: none;
  background: #636158;
  border-radius: 6px;
  padding: 6px 10px 12px;
  margin-bottom: 20px;
}
ul.head-links li {
  float: left;
  margin-right: 20px;
}
ul.head-links li.last {
  margin-right: 0;
}
ul.head-links a.head-link {
  float: left;
  display: inline-block;
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  margin-left: 5px;
  margin-top: 8px;
}
.has-arrs span {
  float: left;
  display: inline-block;
  width: 10px;
  height: 20px;
  margin-top: 8px;
}
.link-content span {
  background: url('/img/00/sbb_sprite_ui.png') no-repeat -198px -17px;
}
.link-footer span {
  background: url('/img/00/sbb_sprite_ui.png') no-repeat -218px -20px;
}
#header-notify-txt {
 /* display: block;
  margin-top: 10px;
  margin-bottom: 20px;
 change to hide city office open notice during COVID */
 display: none;
 
  color: #57554f;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
  line-height: 18px;
}
#header-notify-txt span.mm-button-subtxt {
  font-size: inherit;
}
/*
------------------------------------------------------------------
--> Site Search
------------------------------------------------------------------*/

/* --> Search Input ----------------------------------------------*/

input#site-search {
  margin: 0;
  padding: 0 0 0 8px;
  font-size: 1.5em;
  border: 1px solid #b0ada0;
  border-right: 0;
  margin-bottom: 10px;
  outline: none;
  height: 40px;
  background: #fff url('/img/00/sbb_sprite_ui.png') no-repeat -280px -65px;
  padding-left: 40px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 0 0 8px #bbb;
  transition: box-shadow .6s ease-in-out;
  -o-transition: box-shadow .6s ease-in-out;
  -moz-transition: box-shadow .6s ease-in-out;
  -webkit-transition: box-shadow .6s ease-in-out;
}
input#site-search:hover {
  border-color: #999;
}
input#site-search:focus {
  box-shadow: 0 0 10px #999;
}

/* Set search text placeholder color */
::-webkit-input-placeholder {
 color: #7d98a9;
}

:-moz-placeholder { /* Firefox 18- */
 color: #7d98a9;
}

::-moz-placeholder {  /* Firefox 19+ */
 color: #7d98a9;
}

:-ms-input-placeholder {
 color: #7d98a9;
}
/* --> Search Button ---------------------------------------------*/

a#site-search-btn {
  font-weight: normal;
  font-size: 1.8em;
  height: 40px;
  border: 1px solid #691a00;
  margin: 0;
  line-height: 36px;
  background: #9c2800 url('/img/00/noise/light.png') repeat;
  box-shadow: 0 0 8px #bbb;
  transition: background-color .6s ease-in-out;
  -o-transition: background-color .6s ease-in-out;
  -moz-transition: background-color .6s ease-in-out;
  -webkit-transition: background-color .6s ease-in-out;
}
a#site-search-btn:hover {
  text-decoration: none;
  background-color: #18679a;
  border-color: #104466;
}
/*
------------------------------------------------------------------
--> Main Navigation
------------------------------------------------------------------*/

/* --> Main Navigation Container ---------------------------------*/

section#top-nav {
  background: #104467 url('/img/00/noise/verylight.png') repeat;
  border-bottom: 1px solid #16547d;
  min-height: 50px;
}
/* Remove menu padding for mobile */
section#top-nav .nav-row .columns {
  padding: 0;
}
/* Remove Foundation default background color for top-bar */
nav.main-nav, nav.main-nav.expanded {
  background: none;
  width: 100%;
}
/* --> Main Navigation Title -------------------------------------*/

/* Show the navigation Title for mobile */
nav.main-nav .name {
  display: block;
}
nav.main-nav .toggle-topbar.menu-icon a span {
  font-size: 1.0em;
}
/* --> Main Navigation Item Link ---------------------------------*/

/* Root-level nav items only */
nav.main-nav ul li.nav-item-root > a {
  line-height: 25px !important;
  padding-top: 13px;
  text-shadow: 0 1px 0 #04111a;
}
nav.main-nav ul li.nav-item a {
  font-family: Verdana, sans-serif;
  font-size: 1.4em;
  font-weight: normal;
  white-space: normal;
  background: #104467;
  transition: background-color .9s ease-out, color .6s ease-out, padding .6s ease-out, font-size .3s ease-out;
  -o-transition: background-color .9s ease-out, color .6s ease-out, padding .6s ease-out, font-size .3s ease-out;
  -moz-transition: background-color .9s ease-out, color .6s ease-out, padding .6s ease-out, font-size .3s ease-out;
  -webkit-transition: background-color .9s ease-out, color .6s ease-out, padding .6s ease-out, font-size .3s ease-out;
}
nav.main-nav ul li.nav-item a:hover {
  text-decoration: none;
  background: #145580;
}
/* Active Item Link */
nav.main-nav ul li.active a {
  background: #000;
}
/* --> Main Navigation Mobile Styles -----------------------------*/

/* Main Navigation Title */
.main-nav ul.title-area .mainnav-mobile-title {
  font-family: Verdana, sans-serif;
  font-weight: normal;
  text-transform: none;
  line-height: 50px;
}
.main-nav ul.title-area .mainnav-mobile-title:hover {
  background: none;
}
/* Menu collapse/expand link icon */
nav.main-nav .toggle-topbar.menu-icon a {
  font-size: 1.4em;
  font-weight: normal;
  text-indent: -70px;
  line-height: 31px;
}
nav.main-nav .toggle-topbar.menu-icon a:hover {
  background: none;
}
/* Mobile Display Back Link */
nav.main-nav .dropdown li.title h5 a {
  color: #fff;
  font-size: 1.2em;
}
/* Mobile Display Back Link (Mega-Menu) */
nav.main-nav div.mega-menu li.title h5 a:hover {
  background: #145580;
}
/* Mobile-Mode Back Link (Mega-Menu) */
nav.main-nav .mega-menu li.title h5 a {
  color: #fff;
  font-size: 1.2em;
}
/* Divider between navigation items */
nav.main-nav .divider {
  border-top-color: #186699;
  border-bottom-color: #082233;
}
/*
------------------------------------------------------------------
--> Main Navigation Menus
------------------------------------------------------------------*/

/* Dropdown Menu Item Link */
nav.main-nav .dropdown li.nav-item a {
  text-transform: none;
  font-size: 1.0em;
  line-height: 18px;
  background: none;
  padding: 10px 12px;
  border-bottom: 1px solid #444;
}
nav.main-nav .dropdown li.nav-item a:hover {
  background-color: #145580;
}
/* --> Main Navigation Dropdown Container ------------------------*/

nav.main-nav .dropdown {
  border: 1px solid #0c334d;
  box-shadow: 0 3px 10px #000;
}
/* Dropdown Menu Last Item Link */
nav.main-nav .dropdown li.nav-item.last a {
  border-bottom: 0;
}
/*
------------------------------------------------------------------
--> Side Navigation
------------------------------------------------------------------*/

/* --> Side Navigation Column ------------------------------------*/

#sidebar-blu {
  position: absolute;
  background: url('/img/00/bluparency.png') repeat;
}
/* --> Side Navigation Wrapper -----------------------------------*/

.side-nav-wrap {
  padding: 0 15px 15px;
  background-color: #393d40;
  margin-bottom: 15px;
}
/* --> Side Navigation Heading -----------------------------------*/

.page-nav-heading {
  cursor: default;
  color: #a38f3b;
  font-family: 'AbadiCon_Light', sans-serif;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 3.8em;
  text-indent: 8px;
  text-transform: uppercase;
}
/* --> Side Navigation List ---------------------------------------*/

nav#side-nav ul.side-nav-list {
}
/* --> Side Navigation Item ---------------------------------------*/

nav#side-nav .sf-vertical, nav#side-nav .sf-vertical li {
  width: 100%;
}
nav#side-nav .sf-menu li {
  background: none;
}
nav#side-nav .sf-menu li {
  background: #393D40;
}
/* --> Side Navigation Item Link ----------------------------------*/

nav#side-nav .sf-menu a {
  color: #fff;
  font-size: 1.5em;
  border: 0;
  line-height: 20px;
  padding: 8px 20px 8px 10px;
  border-bottom: 1px solid #666;
  transition: background-color .6s ease-out;
  -o-transition: background-color .6s ease-out;
  -moz-transition: background-color .6s ease-out;
  -webkit-transition: background-color .6s ease-out;
}
nav#side-nav .sf-menu a:hover {
  background: #4f5559;
  text-decoration: none;
}
/* Last Item Link */
nav#side-nav .sf-menu li.last a {
  border-bottom: 0;
}
/* --> Side Navigation Flyout Menu -------------------------------*/

nav#side-nav .sf-menu ul {
  left: -9999px;
  width: 220px;
  border: 1px solid #666;
}
/* Flyout Indicator (Arrow) */
nav#side-nav .sf-sub-indicator {
  display: none;
}
/*
------------------------------------------------------------------
--> BreadCrumbs / System Buttons
------------------------------------------------------------------*/

/* --> Breadcrumbs ----------------------------------------------*/

/* Breadcrumb Span */
section#bcrumbs {
  width: 100%;
  margin-top: -20px;
  margin-bottom: 20px;
}
/* Breadcrumb List */
ul.bcrumb-list {
  float: left;
  margin-left: 12px;
  margin-bottom: 0;
  list-style: none;
  font-size: 1.2em;
}
/* Breadcrumb Item */
ul.bcrumb-list li {
  float: left;
  margin-right: 5px;
}
/* Breadcrumb Item Link */
ul.bcrumb-list li a {
  color: #4c4c4c;
  text-decoration: underline;
}
ul.bcrumb-list li a:hover {
  color: #808080;
}
/* Breadcrumb Home Item */
ul.bcrumb-list li.home {
  background: url('/img/00/icons_system.png') no-repeat -5px -230px;
  padding-left: 25px;
}
/* Breadcrumb Item Arrow & Current Item */
ul.bcrumb-list li.arr, ul.bcrumb-list li.current {
  font-size: 1.4em;
  color: #4c4c4c;
  cursor: default;
}
/* --> Widget Breadcrumb Row ---------------------------------------*/

.widget-breadcrumb-row section#bcrumbs {
  margin-top: 10px;
  margin-bottom: 0;
}
.widget-breadcrumb-row section#bcrumbs .row {
  padding: 10px;
  border-radius: 6px;
  padding-bottom: 5px;
  background: #fff;
  background: rgba(255, 255, 255, 0.85);
}
/* --> System Buttons ----------------------------------------------*/

/* Column that contains the system buttons */
.columns.system-btns-col {
  padding: 0;
}
/* Email, Edit, Print List Container */
ul.system-btns-list {
  float: left;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 0;
  list-style: none;
}
/* System Button Item */
ul.system-btns-list > li {
  float: left;
  margin: 0 auto;
  width: 50%;
  margin-bottom: 15px;
  padding: 0 10px;
}
/* System Button Link Text */
ul.system-btns-list li a.button {
  margin-bottom: 0;
  text-align: left;
}
/* Inner text */
ul.system-btns-list li a span {
  font-size: 1.6em;
  font-weight: bold;
}
/* System Button Styles */
.button.system-button {
  width: 100%;
  color: #333;
  background-color: #fff;
  border-color: #999;
  padding: 10px 10px;
  box-shadow: none;
  border-radius: 0;
  transition: background-color .6s ease-out, box-shadow .6s ease-out;
  -o-transition: background-color .6s ease-out, box-shadow .6s ease-out;
  -moz-transition: background-color .6s ease-out, box-shadow .6s ease-out;
  -webkit-transition: background-color .6s ease-out, box-shadow .6s ease-out;
}
.button.system-button:hover, .button.system-button.hover {
  background-color: #fff !important;
  box-shadow: 0 0 8px #666;
}
/* System Button Dropdown Menu */
ul.system-menu {
  list-style: none;
  display: none;
  position: absolute;
  width: inherit;
  background-color: #fff;
  border: 1px solid #666;
  margin: 0;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 2px 4px #000;
  left: 0;
  z-index: 90;
}
/* Show dropdown menu on hover */
li:hover ul.system-menu {
  display: block;
}
/* System Button Dropdown Menu Item Link */
ul.system-menu li a {
  display: block;
  padding: 6px 0;
  color: #333;
  text-indent: 35px;
  border: 1px solid transparent;
}
ul.system-menu li a:hover {
  color: #0f8cf2;
  text-decoration: none;
  border-color: #ddd;
  border-radius: 6px;
}
/* Email */
#btn-email {
  background: #eee url('/img/00/icons_system.png') no-repeat 5px 4px;
  padding-left: 40px;
}
/* Edit */
#btn-edit {
  background: #eee url('/img/00/icons_system.png') no-repeat 5px -66px;
  padding-left: 40px;
}
/* Print */
#btn-print {
  background: #eee url('/img/00/icons_system.png') no-repeat 5px -146px;
  padding-left: 40px;
}
/* Alter styles of system buttons that have a dropdown menu */
#btn-email:hover, #btn-email.hover, #btn-edit:hover, #btn-edit.hover {
  border-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* Send A Link */
ul.system-menu li.send-link {
  background: url('/img/00/icons/icon-email-send.png') no-repeat 0 center;
}
/* Contact Us */
ul.system-menu li.contact-us {
  background: url('/img/00/icons/icon-email-contact.png') no-repeat 0 center;
}
/* HTML Editor */
ul.system-menu li.html-editor {
  background: url('/img/00/icons/icon-edit-html.png') no-repeat 0 center;
}
/* Workflow - Submit for Approval */
.link-HtmlEditor {
  padding-left: 32px !important;
  text-indent: 0 !important;
  background: url('/img/00/icons/icon-edit-approval.png') no-repeat 0 center;
}
/* Layout */
ul.system-menu li.layout {
  background: url('/img/00/icons/icon-edit-layout.png') no-repeat 0 center;
}
/* Navbuilder */
ul.system-menu li.navbuilder {
  background: url('/img/00/icons/icon-edit-navbuilder.png') no-repeat 0 center;
}
/* Services */
ul.system-menu li.services {
  background: url('/img/00/icons/icon-edit-services.png') no-repeat 0 center;
}
/* Status */
ul.system-menu li.status-not-done, ul.system-menu li.status-done {
  background: url('/img/00/icons/icon-edit-status.png') no-repeat 0 center;
}
/* Site Notes */
ul.system-menu li.site-notes {
  background: url('/img/00/icons/icon-edit-notes.png') no-repeat 0 center;
}
/* Issue */
ul.system-menu li.issue {
  background: url('/img/00/icons/icon-edit-issue.png') no-repeat 0 center;
}
/* Admin */
ul.system-menu li.admin {
  background: url('/img/00/icons/icon-edit-admin.png') no-repeat 0 center;
}
/* AddThis */
.addthis_toolbox {
  float: right;
  margin-top: 1px;
  margin-right: 20px;
}
.widget-cont-html .addthis_toolbox {
  margin-right: 0;
}
.atm-s a span {
  font-size: 0.9em;
}
a#atic_usersettings span {
  font-size: 0.9em;
}
.addthis_counter.addthis_pill_style a.addthis_button_expanded {
  width: 38px !important;
}
/*
------------------------------------------------------------------
--> Page Body Section
------------------------------------------------------------------*/

#page-body {
  width: 100%;
  background: #9eb8c1;
}
/* All secondary pages have their content wrapped in a row
   with either of these classes. */
.content-row, .widget-layout-row {
  padding-top: 30px;
}
/*
------------------------------------------------------------------
--> HTML Content
------------------------------------------------------------------*/

/* --> Page Title ----------------------------------------------*/

/* Page title container */
.pgtitle {
  width: 100%;
}
h1.content-title {
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 4.2em;
  padding-bottom: 10px;
  margin: 0;
  border-bottom: 1px solid #666;
  cursor: default;
}
/* Department text indicator */
.department-txt {
  font-size: inherit;
  float: right;
  color: #999;
}
/* Radial Gradient below page title */
.title-radial-grad {
  width: 100%;
  height: 38px;
  background: url('/img/00/pgtitle-radial-grad.png') no-repeat center top;
}
/* --> Page Content ----------------------------------------------*/

section#page-content {
  margin-bottom: 50px;
  background: #fff;
  padding: 20px;
  border-top: 5px solid #9a3310;
  border-bottom: 2px solid #366647;
}
/*
------------------------------------------------------------------
--> Homepage Contents
------------------------------------------------------------------*/

/* --> Home Row --------------------------------------------------*/
.row-home {
  padding-top: 30px;
}
/* --> Home Content Row ------------------------------------------*/

.row.home-content {
  margin-bottom: 50px;
  background: #fff;
  background: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border-top: 5px solid #9a3310;
  border-bottom: 2px solid #366647;
  width: 98%;
  margin-left: 1%;
  margin-top: 10px;
}
/* --> Home Galleria Slideshow -----------------------------------*/

#dynamic-home-slideshow {
  height: 270px;
}
#dynamic-home-slideshow #galleria {
  height: 270px;
}
#dynamic-home-slideshow .galleria-container {
  background: none;
  overflow: visible;
}
/* Slide Arrows */
#dynamic-home-slideshow .galleria-image-nav-left {
  width: 18px;
  height: 18px;
  background: url('/img/00/sbb_sprite_ui.png') no-repeat -195px -55px;
  opacity: 1 !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 20;
}
#dynamic-home-slideshow .galleria-image-nav-left:hover {
  background-position: -195px -78px;
}
#dynamic-home-slideshow .galleria-image-nav-right {
  width: 18px;
  height: 18px;
  background: url('/img/00/sbb_sprite_ui.png') no-repeat -215px -55px;
  opacity: 1 !important;
  right: 0% !important;
  bottom: 0 !important;
  z-index: 20;
}
#dynamic-home-slideshow .galleria-image-nav-right:hover {
  background-position: -215px -78px;
}
#dynamic-home-slideshow .galleria-counter {
  display: none;
}
/* Slide Title */
#dynamic-home-slideshow .galleria-info-title {
  color: #145580;
  font-weight: normal;
  font-size: 2em;
  margin-bottom: 10px;
}
/* Description text box */
#dynamic-home-slideshow .galleria-info {
  float: left;
  width: 100%;
  top: 100%;
  left: inherit;
  z-index: 99;
}
/* Description text container */
#dynamic-home-slideshow .galleria-info-text {
  padding: 3%;
  background: #fff;
}
#dynamic-home-slideshow .galleria-images {
  width: 100% !important;
  z-index: 100;
}
/* Left & Right Arrows */
#dynamic-home-slideshow .galleria-image-nav {
  display: none;
}
/* Slide Images */
#dynamic-home-slideshow .galleria-container img {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: 0 0 10px #000;
}
#dynamic-home-slideshow .galleria-thumbnails-container {
  display: none;
}
#dynamic-home-slideshow .galleria-stage {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: visible;
}
#dynamic-home-slideshow .galleria-info-description {
  font-family: Verdana, sans-serif;
  font-size: 1.3em;
  line-height: 1.8em;
  font-style: normal;
  color: #1a1a1a;
}
#dynamic-home-slideshow .galleria-image {
  overflow: visible !important;
  width: 100% !important;
}
.galleria-read-more {
  left: 0;
  line-height: 2.1em;
  position: absolute;
  text-align: right;
  width: 100%;
  top: 90%;
}
.galleria-read-more a, .galleria-read-more a:visited {
  background: none repeat scroll 0 0 #9C2800;
  color: #FFFFFF !important;
  font-size: 1.1em;
  line-height: 2.1em;
  margin-right: 2%;
  padding: 1%;
  text-align: center;
}
/* --> Home Headings ---------------------------------------------*/

h2.section-heading {
  color: #5d6889;
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 4.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
  margin-bottom: 10px;
  cursor: default;
}
h2.section-heading span.curly {
  color: #1a1a1a;
  font-family: 'FreestyleScriptW01-Regu', sans-serif;
  font-size: inherit;
  text-transform: none;
}
/* --> Most Popular ----------------------------------------------*/

.page-nav-heading span {
  font-family: 'FreestyleScriptW01-Regu', sans-serif;
  font-size: 1.1em;
  color: #fff;
  text-transform: none;
}
/* Most Popular list */
.home-mostpop ul.az-list {
  list-style: none;
}
/* Most Popular list item */
.home-mostpop ul.az-list li {
  margin-bottom: 5px;
  padding-left: 20px;
  background: url('/img/00/sbb_sprite_ui.png') no-repeat -290px -13px;
}
/* Most Popular list item link */
.home-mostpop ul.az-list li a {
  display: block;
  padding: 3px 8px;
  font-size: 1.5em;
  color: #fff;
}
/* --> Home Side Buttons -----------------------------------------*/

.home-side-btns {
  float: left;
  width: 100%;
}
#dynamic-side-btns.home-side-btns .mm-button-wrap {
  width: 100%;
}
/* Side Button Wrapper */
#dynamic-side-btns.home-side-btns .mm-button-wrap {
  border: 3px solid #4a6b85;
  border-color: rgba(255, 255, 255, 0.3);
}
#dynamic-side-btns.home-side-btns .mm-button-subtxt {
  margin-top: 8px;
  margin-left: 0;
}
/* Side Button Link */

/* Subtext container */
#dynamic-side-btns.home-side-btns .mm-button-subtxt {
  font-size: 0.8em;
}
/* Subtext paragraphs */
#dynamic-side-btns.home-side-btns .mm-button-subtxt p {
  float: left;
  margin: 15px 15px 10px 15px;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 1px;
  font-size: 1.8em;
}
/* --> Grid Calendar ---------------------------------------------*/

#aj-calwrapper {
  margin-bottom: 30px;
}
#aj-calwrapper #month {
  color: #333;
  margin-bottom: 10px;
}
#aj-calwrapper #month a {
  font-size: 1.9em;
  font-weight: bold;
}
#aj-calwrapper #month a:hover {
  text-decoration: none;
}
#smlCal002_Head {
  font-weight: bold;
  font-size: 1.2em;
}
.chooser-date {
  font-weight: bold;
  margin: 0 10px;
}
#smlCal002_Head .long {
  display: none;
}
.smlCal002_Table td {
  text-align: center;
  padding: 10px 0 10px 0;
}
.smlCal002_Table .CurrentDay {
  background: #145580;
}
.smlCal002_Table .CurrentDay a {
  color: #fff;
}
.smlCal002_Table .Day {
  background: #c5ddec;
}
.smlCal002_Table td a {
  color: #333;
}
.calTitle a.prev, .calTitle a.next {
  font-size: 1.6em;
  font-weight: bold;
}
.calTitle a.prev:hover, .calTitle a.next:hover {
  text-decoration: none;
}
.calTitle .cal-curr-date {
  margin: 0 25px;
}
.calTitle {
  display: block;
  margin-bottom: 10px;
}
/* --> Events List -----------------------------------------------*/

/* Event title */
.event-title {
  font-size: 1.1em;
  margin: 5px 0;
  line-height: 20px;
}
/* Event Time */
.event-time {
  font-size: 1.2em;
}
/* Date section heading */
.events-datesection {
  font-size: 1.5em;
  line-height: 20px;
  margin-top: 0;
  margin-bottom: 5px;
}
/* Style for 'Today' indicator */
.events-datesection span.today {
  color: #666;
  text-transform: uppercase;
  font-size: 0.7em;
}
/* Style on text if there are no events */
.no-events {
  color: #666;
  font-style: italic;
}
/* Separator between events */
hr.events-sep {
  margin: 15px 0;
  border-color: #9db3c1;
}
/* --> What's New ------------------------------------------------*/

.whatsnew-tab-cont {
  float: right;
}
.home-whatsnew-tab.active {
  text-decoration: none;
  color: #fff;
  background: #18679a;
  text-shadow: 0 1px 0 #0c334d;
  cursor: default;
}
.home-whatsnew-tab.active:hover {
  text-decoration: none;
  background: #18679a;
  color: #fff;
}
.home-whatsnew-tab {
  float: left;
  /*font-size: 0.5em;*/
  font-size: 28px;
  color: #18679a;
  padding: 4px 8px;
  margin-left: 10px;
  background: #fff;
  box-shadow: 0 0 10px #bbb;
  text-decoration: none;
}
.home-whatsnew-tab:hover {
  text-decoration: none;
  background: #666;
  color: #eee;
  text-shadow: none;
}
.ajax-cont {
  width: 100%;
}
#ajax-video {
  display: none;
}
#ajax-video .mm-buttongen-cont {
  width: 100%;
}
#ajax-video .mm-button-wrap {
  float: left;
  width: 100%;
  margin: 10px;
}
#ajax-video .mm-button-img {
  float: left;
  width: 25%;
  display: block;
  border: 2px solid transparent;
}
#ajax-video .mm-button-txt-wrap {
  float: left;
  width: 72%;
  margin-left: 3%;
  font-size: 0.7em;
}
#ajax-video a.mm-button-link:hover .mm-button-img {
  border-color: #18679a;
}
#ajax-video a.mm-button-link:hover {
  text-decoration: none;
}
#ajax-video .mm-button-txt {
  float: left;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 5px;
}
#ajax-video .mm-button-subtxt {
  float: left;
  line-height: 18px;
}
/*
------------------------------------------------------------------
--> Secondary Pages
------------------------------------------------------------------*/

/* --> Side Buttons ----------------------------------------------*/

/* Side Button Wrapper */
#dynamic-side-btns .mm-buttongen-cont {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
/* Side Button Wrapper */
#dynamic-side-btns .mm-button-wrap {
  float: left;
  width: 100%;
  border: 3px solid #4a6b85;
  border-color: rgba(255, 255, 255, 0.3);
  margin-bottom: 15px;
}
/* Side Button Link Wrapper */
#dynamic-side-btns a.mm-button-link {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 1.6em;
  padding: 15px;
  background: #145580 url('/img/00/noise/verylight.png') repeat;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}
#dynamic-side-btns a.mm-button-link:hover {
  background-color: #1d77b3;
  transition: background-color .6s ease-out;
  -o-transition: background-color .6s ease-out;
  -moz-transition: background-color .6s ease-out;
  -webkit-transition: background-color .6s ease-out;
}
/* Clearfix the side button link wrapper! */
#dynamic-side-btns a.mm-button-link:before, #dynamic-side-btns a.mm-button-link:after {
  content: " ";
  display: table;
}
#dynamic-side-btns a.mm-button-link:after {
  clear: both;
}
/* Side Button Icon */
#dynamic-side-btns .mm-button-img {
  float: left;
}
/* Side Button Text Wrapper */
#dynamic-side-btns .mm-button-txt-wrap {
  float: left;
  width: 70%;
  margin-left: 5%;
}
/* Side Button Text */
#dynamic-side-btns .mm-button-txt {
  display: block;
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 1.8em;
  margin-top: 10px;
  text-shadow: 0 0 8px #000;
  letter-spacing: 1px;
}
#dynamic-side-btns .mm-button-txt.has-img {
/*margin-left: 5px;*/
}
/* Side Button Sub-Text */
#dynamic-side-btns .mm-button-subtxt {
  display: block;
  margin-top: 8px;
  font-size: 1.0em;
  text-shadow: 0 0 6px #000;
}
/* --> Side Buttons - Colors -------------------------------------*/

/* Color 2 */
#dynamic-side-btns .mm-button-2 a.mm-button-link {
  background-color: #9c2800;
}
#dynamic-side-btns .mm-button-2 a.mm-button-link:hover {
  background-color: #cf3400;
}
/* Color 3 */
#dynamic-side-btns .mm-button-3 a.mm-button-link {
  background-color: #255833;
}
#dynamic-side-btns .mm-button-3 a.mm-button-link:hover {
  background-color: #3b8c51;
}
/* Color 4 */
#dynamic-side-btns .mm-button-4 a.mm-button-link {
  background-color: #917897;
}
#dynamic-side-btns .mm-button-4 a.mm-button-link:hover {
  background-color: #c19fc9;
}
/* Color 5 */
#dynamic-side-btns .mm-button-5 a.mm-button-link {
  background-color: #5d6889;
}
#dynamic-side-btns .mm-button-5 a.mm-button-link:hover {
  background-color: #808fbd;
}
/*
------------------------------------------------------------------
--> Page Footer
------------------------------------------------------------------*/

/* --> Footer Base -----------------------------------------------*/

footer#page-footer {
  position: absolute;
  width: 100%;
  background: #082234 url('/img/00/noise/verylight.png') repeat;
  color: #fff;
  padding-bottom: 20px;
}
/* --> Footer Navigation -----------------------------------------*/

.foot-logo-address {
}
.foot-nav-wrap {
  float: left;
  width: 100%;
  padding: 20px 0;
  background: #04101a;
}
.foot-nav-wrap .foot-nav-col {
  float: left;
  width: 50%;
}
.sm-civica-logo {
}
/* Column Container */
.foot-nav-col {
}
/* Navigation list container */
nav.foot-nav {
  width: 100%;
  margin-top: 10px;
}
/* Navigation list */
nav.foot-nav ul.az-list {
  width: 98%;
  list-style: none;
  margin-left: 2%;
}
/* Navigation list item */
nav.foot-nav ul li {
  margin-bottom: 3px;
}
/* Navigation list item link */
nav.foot-nav ul.az-list li a {
  color: #fff;
  font-size: 1.4em;
}
/* --> Footer Logo, City Seal & Address --------------------------*/

img.footer-logo {
  width: 100%;
  display: block;
  margin: 10px auto;
}
.city-seal-foot {
  float: left;
  clear: left;
  width: 100px;
  height: 100px;
  background: url('/img/00/sbb_sprite_ui.png') no-repeat -260px -100px;
}
.footer-address-cont {
  float: left;
  width: 50%;
  font-size: 1.1em;
  line-height: 20px;
  margin: 10px 0 20px 10px;
}
.footer-address-cont a.title-email {
  display: block;
  margin-bottom: 5px;
}
.footer-address-cont .mailing-address {
  float: left;
  margin-top: 20px;
  font-size: inherit;
}
/* --> Google Translate ------------------------------------------*/

#google_translate_element {
  width: 100%;
  margin-left: 5px;
}
.goog-te-gadget-simple {
  background: none !important;
  border: 0 !important;
  height: 20px !important;
}
.goog-te-gadget-simple .goog-te-menu-value span {
  font-family: Verdana, sans-serif;
  color: #fff;
  font-weight: bold;
}
.goog-te-menu-value {
  line-height: 20px;
}
.goog-te-menu-value:hover {
  text-decoration: none;
}
.goog-te-menu-value span {
  font-size: 11px;
}
select.goog-te-combo {
  padding: 5px;
}
#google_translate_element .goog-te-gadget {
  color: #fff;
}
#google_translate_element .goog-te-gadget a.goog-logo-link {
  color: #eaf6ff;
}
/* --> Social Media Center ---------------------------------------*/

#social-media-center .sm-center-btn-cont {
  max-width: 260px;
  margin-bottom: 30px;
}
/* Button container */
.sm-center-btn-cont {
  float: left;
  width: 100%;
}
/* Containing link box */
.sm-center-btn-cont .mm-button-link {
  display: block;
  width: 100%;
  background-color: #114568 !important;
  border: 1px solid #1a6699;
}
.sm-center-btn-cont .mm-button-link:hover {
  background-color: #155682 !important;
  border-color: #1e77b3;
  text-decoration: none;
}
.sm-center-btn-cont .mm-button-img {
  float: right;
  margin-top: 35px;
  margin-right: 30px;
}
/* 'Social Media Center' text */
.sm-center-btn-cont .mm-button-subtxt {
  display: block;
  color: #fff;
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 2.6em;
  text-transform: uppercase;
  padding: 10px 20px;
}
/* 'SOCIAL' special script text */
.sm-center-btn-cont .mm-button-subtxt span {
  display: block;
  font-family: 'FreestyleScriptW01-Regu', sans-serif;
  font-size: 1.2em;
  text-transform: none;
}
/* --> Powered by Civica -----------------------------------------*/

/* Wrapping container */
.powered-by-cont {
  float: left;
  width: 140px;
  margin-top: 30px;
}
/* 'Powered by' text */
span.powered-by-civica {
  display: block;
  float: right;
  color: #fff;
  font-size: 1.3em;
  margin-right: 6px;
  margin-bottom: 5px;
}
/* Civica logo */
#civica-foot-logo {
  display: block;
  float: right;
}
/*
------------------------------------------------------------------
--> Map Alerts
------------------------------------------------------------------*/

/* Alert Box */

#alert_block {
  background: #e2f3ff;
  border: 1px solid #8fb2c9;
  padding: 10px;
  margin-bottom: 20px;
}
#alert_block #status_headline {
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 3.4em;
  margin-bottom: 10px;
}
#alert_block #status_description {
  margin: 0;
}
/* Alert Aggregate Page */

.date_formatted {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.Status .entry-name {
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 2.4em;
  margin-bottom: 5px;
}
.StatusDiv .Status {
  padding-bottom: 5px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ccc;
}
/*
------------------------------------------------------------------
--> Additional
------------------------------------------------------------------*/

/*Code snippets*/
.edt-side-content-custom {
  background: #F0EDDF;
}
.custom-gray {
  background: #E4E4E4;
}
/* -->Snippet Galleria --------------------------------------------------*/

#custom_slideshow .galleria-info-text {
  display: block;
}
#custom_slideshow .galleria-info-description {
  font-size: inherit;
}
#custom_slideshow .galleria-info-description h1, #custom_slideshow .galleria-info-description h2, #custom_slideshow .galleria-info-description h3, #custom_slideshow .galleria-info-description h4, #custom_slideshow .galleria-info-description h5, #custom_slideshow .galleria-info-description h6 {
  color: #fff;
}
#custom_slideshow .galleria-height-200 #galleria {
  height: 200px !important;
}
#custom_slideshow .galleria-height-300 #galleria {
  height: 300px !important;
}
#custom_slideshow .galleria-height-400 #galleria {
  height: 400px !important;
}
#custom_slideshow .galleria-height-500 #galleria {
  height: 500px !important;
}
#custom_slideshow .galleria-container {
  background: #393d40;
}
#custom_slideshow .galleria-stage {
  top: 0;
  left: 0;
  right: 0;
}
#custom_slideshow .galleria-info {
  width: 100%;
  top: 0;
  left: 0;
}
#custom_slideshow .galleria-info-title {
  font-family: 'AbadiMTW01-LightCondens', sans-serif;
  font-size: 2.6em;
  font-weight: normal;
  color: #fff;
}
#custom_slideshow .galleria-info-link {
  display: none;
}
#custom_slideshow .galleria-info-description {
  color: #eee;
  font-family: Verdana, sans-serif;
  font-size: 1.2em;
  font-style: normal;
  line-height: 18px;
}
#custom_slideshow .galleria-info-text {
  background: url('/img/blackTransparency.png') repeat top center transparent;
}
#custom_slideshow .galleria-thumbnails .galleria-image:hover {
  border-color: #fff;
}
#custom_slideshow .galleria-thumbnails .galleria-image.active {
  border-color: #cf3400;
}
#custom_slideshow .galleria-image img {
  margin: 0 !important;
}
#custom_slideshow .galleria-read-more {
  visibility: hidden;
}
.water-report-cont {
  background: #fff;
  padding: 12px;
  margin-top: 15px !important;
  border: 1px solid #ccc;
  box-shadow: 0 0 8px #ccc;
}
.report-water-head {
  font-size: 1.6em;
  margin-top: 8px;
  text-align: right;
  padding-right: 10%;
}
.water-phone-line {
  display: inline-block;
  margin: 0 10px 0 10px;
  padding: 11px;
  text-align: right;
  font-size: 1.2em;
}
.water-report-right {
  border-left: 1px solid #ccc;
}
/* Galleria slideshows require a defined height */
#galleria, #pageHTML #galleria {
  height: 452px;
}

/* Begin section for "In Content" Galleria slideshow responsive design */
@media screen and (min-width:871px) and (max-width:1040px) {
#pageHTML #galleria {
  height: 390px;
}
}

@media screen and (min-width:768px) and (max-width:870px) {
#pageHTML #galleria {
  height: 320px;
}
}

@media screen and (min-width:641px) and (max-width:767px) {
#pageHTML #galleria {
  height: 400px;
}
}

@media screen and (min-width:521px) and (max-width:640px) {
#pageHTML #galleria {
  height: 330px;
}
}

@media screen and (min-width:421px) and (max-width:520px) {
#pageHTML #galleria {
  height: 265px;
}
#pageHTML .galleria-info, #pageHTML .galleria-info-text {
  display: none !important;
}
}

@media screen and (min-width:321px) and (max-width:420px) {
#pageHTML #galleria {
  height: 265px;
}
#pageHTML .galleria-info, #pageHTML .galleria-info-text {
  display: none !important;
}
}

@media screen and (max-width:320px) {
#pageHTML #galleria {
  height: 175px;
}
#pageHTML .galleria-info, #pageHTML .galleria-info-text {
  display: none !important;
}
}
/* End section for "In Content" Galleria slideshow responsive design */

/* Foundation tooltip styles */
.tooltip {
  font-size: 1.4em;
}
/* Foundation Reveal modal - Close 'X' */
.reveal-modal .close-reveal-modal {
  font-size: 2.0em;
}
.not-found-pgtitle {
  float: left;
  width: 100%;
  font-size: 1.6em;
  margin: 10px 0 30px;
}
/* Foundation button override */

.button, .button-blue-dark {
  border: 0;
  font-weight: normal;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
.button:hover, .button-blue-dark:hover {
  text-decoration: none;
}
.button.secondary {
  color: #fff;
  background: #666;
}
.button.secondary:hover {
  color: #fff;
  background: #555;
}
/*  Photobook Styles  */

.PhotoBG {
  /*background-image: url('/custom/photomanager/images/gallery_set_Background.png');*/
  background: #fff;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
  width: 150px;
  height: 150px;
}
.floater {
  float: left;
  margin: 0;
}
.Photosizer img {
  overflow: hidden;
  max-height: 150px;
  max-width: 150px;
}
/* Search result Pagination Style */
a.youreHere {
  cursor: default;
  font-weight: bold;
}
a.youreHere:hover {
  text-decoration: none;
}
/** Imported from M.Segura's CSS**/

#page-last-updated {
  clear: both;
}
#media-bucket-0 .galleria-read-more {
  display: none;
}
/**Project Map CSS**/

#projectMap {
  position: relative;
  height: auto;
}
#projectMap .hide-for-small {
  display: block;
  height: 95%;
  left: 2%;
  position: absolute;
  top: 2%;
  width: 74%;
}
#projectMap #Picture1 {
  width: 74%;
}
#projectMap .hide-for-small a {
  position: absolute;
  line-height: 0px;
}
#projectMap .hide-for-small img {
  margin: 0px;
  width: 100%;
  height: 100%;
}
#projectMap .hide-for-small a:hover {
  position: absolute;
  border: 1px dashed #366647;
  text-decoration: none;
}
#projectMap .hide-for-small a.parking {
  height: 2.6%;
  left: 17.8%;
  top: 19.5%;
  width: 2.3%;
}
#projectMap .hide-for-small a.current_ops {
  height: 5%;
  left: 80%;
  top: 80%;
  width: 5%;
}
#projectMap .hide-for-small a.parking_improv {
  height: 1.2%;
  left: 41.5%;
  top: 58.4%;
  width: 2.5%;
}
#projectMap .hide-for-small a.retail {
  height: 9.5%;
  left: 39%;
  top: 28%;
  width: 4.5%;
}
/*SITE WIDE ALERT*/

header#page-header {
  position: relative;
}
#alert {
  background: url("/img/00/noise/light.png") repeat scroll 0 0 #9C2800;
  border: 1px solid #691A00;
  box-shadow: 0 0 8px #BBBBBB;
  font-size: 1.4em;
  font-weight: normal;
  height: 5%;
  line-height: 25px;
  margin: 0;
  transition: background-color 0.6s ease-in-out 0s;
  max-width: 100%;
  width: 100%;
}
#alert .title {
  font-size: 0.8em;
  color: #efefef;
  text-align: center;
  line-height: 1em;
}
#alert .title img {
  margin-top: 0;
}
#alert .title span {
  position: relative;
  top: -10px;
  font-size: 1.1em;
}
#alert .body a {
  background: none repeat scroll 0 0 #580300;
  color: #FECA00;
  display: block;
  font-size: 0.85em;
  margin-bottom: 0.2%;
  margin-top: 0.2%;
  width: 90%;
  padding-left: 1%;
  -webkit-box-shadow: inset 0px 0px 5px 0px #360100;
  box-shadow: inset 0px 0px 5px 0px #360100;
}
#alert .body .date {
  font-size: 1em;
  color: #DBB900;
}
/** Imported from R.Sapp's CSS**/


#pm-gallery-sml00 .scrollable div.img-wrap {
  height: 60px;
  border-bottom: 1px solid #000;
}
ul.faq-upper-links {
  list-style: none;
}
ul.faq-upper-links a:hover {
  text-decoration: none;
}
.auto-height {
  height: auto;
}
input.submit-btn {
  font-weight: normal;
  font-size: 1.4em;
  color: #fff;
  height: 40px;
  border: 1px solid #691a00;
  margin: 0;
  line-height: 36px;
  background: #9c2800 url('/img/00/noise/light.png') repeat;
  box-shadow: 0 0 8px #bbb;
  transition: background-color .6s ease-in-out;
  -o-transition: background-color .6s ease-in-out;
  -moz-transition: background-color .6s ease-in-out;
  -webkit-transition: background-color .6s ease-in-out;
}
input.submit-btn:hover {
  text-decoration: none;
  background-color: #18679a;
  border-color: #104466;
  cursor: pointer;
}
.invisible {
  display: none;
}
/*  ------------------------------------------------------------------
    --> Simple Forms Styles
    ------------------------------------------------------------------*/
#sfmQuestionForm form button[name=reset] {
  display: none;
}
/* Foundation v2.1.4 http://foundation.zurb.com */
/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */
.edtdiv table th {
  font-size: 14px;
}

/* Mobile */
@media only screen and (max-width: 767px) {
table.responsive {
  margin-bottom: 0;
}
.scrollable.swipeMsg::before {
  background: rgba(255, 200, 0, 0.2) none repeat scroll 0 0;
  border: 1px solid #ffcc00;
  border-radius: 5px;
  color: #666;
  content: "<< Swipe for more content >>";
  display: block;
  font-size: 0.8em;
  margin: 0.3em 0;
  padding: 0.2em;
  text-align: center;
  width: 100%;
}
.pinned {
  background: #fff none repeat scroll 0 0;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  left: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  position: absolute;
  top: 0;
  width: 35%;
}
.pinned table {
  border-left: medium none;
  border-right: medium none;
  width: 100%;
}
.pinned table th, .pinned table td {
  white-space: nowrap;
}
.pinned td:last-child {
  border-bottom: 0 none;
}
div.table-wrapper {
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
div.table-wrapper div.scrollable {
  overflow-x: scroll;
  overflow-y: hidden;
}
table.responsive td, table.responsive th {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
}
/*  ------------------------------------------------------------------
    --> Photo Manager and Photo Book Styles
    ------------------------------------------------------------------*/
#jqGalleryDiv {
  width: 100%;
}
#img-wrap {
  margin-bottom: 10px;
}
#image_wrap img {
  cursor: default;
  width: 200px;
  padding-bottom: 10px;
  padding-left: 5px;
}
#image_wrap_g img {
  cursor: default;
  /*width: 200px;*/
  padding-bottom: 10px;
  padding-left: 5px;
}
.img-wrap {
  float: left;
  width: 20%;
  height: 50px;
  margin: 8px;
  overflow: hidden;
}
#galBackOuter {
  margin: 15px 0 0 5px;
}
/****************************************************************************/
/******************** Begin Santa Barbara Styles Section ********************/
/****************************************************************************/
#sfmQuestionForm p {
  font-size: .8em;
  text-align: left;
  margin: 0;
  padding: 0;
}
.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  -ms-word-break: break-all !important;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all !important;
  /* Instead use this non-standard one: */
  word-break: break-word !important;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
}
.imageShadow {
  border: 7px solid #ffffff;
  border-image: none;
  box-shadow: 0px 5px 8px 2px #666666;
}
.cv-photo-gallery {
  margin-bottom: 30px;
}
/********** Santa Barbara Contact Us Styles **********/
.contactUsButton {
  font-size: 14px !important;
}
.form-container input.text {
  font-size: 14px !important;
}
/********** Santa Barbara Button Styles **********/
a.buttonRed {
  text-align: center;
  display: inline-block;
  padding-top: .75em;
  padding-right: 1.5em;
  padding-bottom: .8125em;
  padding-left: 1.5em;
  word-wrap: break-word;
}
a.buttonRed:link, a.buttonRed:visited {
  color: #FFF !important;
  background-color: #ee1111;
  text-decoration: none;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
a.buttonRed:hover, a.buttonRed:active {
  color: #FFF !important;
  background-color: #ce1010;
  text-decoration: none;
}
a.buttonBlue {
  text-align: center;
  display: inline-block;
  padding-top: .75em;
  padding-right: 1.5em;
  padding-bottom: .8125em;
  padding-left: 1.5em;
  word-wrap: break-word;
}
a.buttonBlue:link, a.buttonBlue:visited {
  color: #FFF !important;
  background-color: #2b5797;
  text-decoration: none;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
a.buttonBlue:hover, a.buttonBlue:active {
  color: #FFF !important;
  background-color: #214170;
  text-decoration: none;
}
a.buttonMagenta {
  text-align: center;
  display: inline-block;
  padding-top: .75em;
  padding-right: 1.5em;
  padding-bottom: .8125em;
  padding-left: 1.5em;
  word-wrap: break-word;
}
a.buttonMagenta:link, a.buttonMagenta:visited {
  color: #FFF !important;
  background-color: #ff0097;
  text-decoration: none;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
a.buttonMagenta:hover, a.buttonMagenta:active {
  color: #FFF !important;
  background-color: #ca0479;
  text-decoration: none;
}
a.buttonLightGreen {
  text-align: center;
  display: inline-block;
  padding-top: .75em;
  padding-right: 1.5em;
  padding-bottom: .8125em;
  padding-left: 1.5em;
  word-wrap: break-word;
}
a.buttonLightGreen:link, a.buttonLightGreen:visited {
  color: #FFF !important;
  background-color: #99b433;
  text-decoration: none;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
a.buttonLightGreen:hover, a.buttonLightGreen:active {
  color: #FFF !important;
  background-color: #738726;
  text-decoration: none;
}
a.buttonDarkPurple {
  text-align: center;
  display: inline-block;
  padding-top: .75em;
  padding-right: 1.5em;
  padding-bottom: .8125em;
  padding-left: 1.5em;
  word-wrap: break-word;
}
a.buttonDarkPurple:link, a.buttonDarkPurple:visited {
  color: #FFF !important;
  background-color: #603cba;
  text-decoration: none;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
a.buttonDarkPurple:hover, a.buttonDarkPurple:active {
  color: #FFF !important;
  background-color: #482e8b;
  text-decoration: none;
}
a.buttonYellow {
  text-align: center;
  display: inline-block;
  padding-top: .75em;
  padding-right: 1.5em;
  padding-bottom: .8125em;
  padding-left: 1.5em;
  word-wrap: break-word;
}
a.buttonYellow:link, a.buttonYellow:visited {
  color: #000 !important;
  background-color: #ffc40d;
  text-decoration: none;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
a.buttonYellow:hover, a.buttonYellow:active {
  color: #000 !important;
  background-color: #d5a40b;
  text-decoration: none;
}
.relatedLinks {
  border: 1px solid #999999;
  border-image: none;
  text-align: center;
  padding-right: 10px;
  padding-left: 10px;
  float: right;
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 5px 8px #666666;
  box-shadow: 0px 5px 8px #666666;
}
.button {
  border-radius: 3px;
}

@media screen and (max-width:680px) {
.relatedLinks {
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 15px;
}
}
.audioButton {
  padding: 5px 14px 6px;
  border: 1px solid #c2c3fc;
  border-image: none;
  font-size: 1.18em;
  display: inline-block;
  background-color: #cecffd;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
a.audioButton:hover, a.audioButton:active {
  text-decoration: none;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  color: #FFF;
  background-color: #2284a1;
}
.exploreList {
  margin-top: 15px;
  margin-bottom: 0px;
}
.faq-combined-links {
  list-style: none !important;
  margin-left: 0px !important;
}
.faq-combined-links .category-bucket {
  margin-top: 15px !important;
}
.category-header {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal !important;
  font-size: 1.714em !important;
  color: #444;
  margin: 5px 0 15px 0 !important;
}
.well {
  min-height: 20px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

@media screen and (max-width:768px) {
.centerPhone {
  text-align: center;
}
}
/********** Begin HPWA Styles **********/
.hpwa_iframe {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
}
.hpwa_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/********** End HPWA Styles **********/
/********** Begin Elections Styles **********/
.candidateImage {
  float: right;
  display: inline-block;
  margin-left: 20px;
  -webkit-box-shadow: 0px 3px 12px #000000;
  box-shadow: 0px 3px 12px #000000;
}
figure.electionImage {
  width: 100%;
  text-align: center;
  margin: 0px;
}
figure.electionImage a {
  width: 100%;
  max-width: 250px;
}
figure.electionImage img {
  display: inline-block;
  width: 100%;
  padding: 0px !important;
  margin: 0px !important;
  max-width: 250px;
}
figcaption.electionImage {
  width: 100%;
  text-align: center;
  margin: 0px !important;
  background-color: #C33E40;
}

@media screen and (max-width:768px) {
.candidateImage {
  float: none;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}
}
/********** End Elections Styles **********/
/********** Begin Feature Button Styles **********/
a.smallFeatureButton div.mm-button-txt-wrap span.mm-button-txt {
  font-size: 18px !important;
  margin-top: 0px !important;
}

@media screen and (max-width:768px) {
a.smallFeatureButton div.mm-button-txt-wrap span.mm-button-txt {
  font-size: 28px !important;
  margin-top: 10px !important;
}
}
/********** End Feature Button Styles **********/
/********** End Thomas Fire Styles **********/
.sbcContent {
  display: block;
  width: 95% !important;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.sbcContent ul, .sbcContent li {
  text-align: left;
}
.sbcContent li {
  margin-bottom: 15px;
}
.sbcContent li a {
  font-weight: bold;
}
/*.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
*/.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-warning {
  color: #6c4a00;
  background-color: #f9f1c6;
  border: 1px solid #6c4a00;
  border-radius: 4px;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: 0px !important;
  margin-right: 0px !important;
}
div.sbcContent img {
  border: 1px solid #e3e3e3;
  border-radius: 4px;
}
div.sbcContent h3 {
  margin-bottom: 0px;
}
.panel-body {
  margin-top: 20px;
}
.alert-danger:hover {
  color: #a82824;
}
.alert-danger {
  color: #d2322d;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.panel {
  border-radius: 4px;
}
.panel-info>.panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 4px;
  font-size: 16px;
  color: inherit;
}
.lead {
  margin-bottom: 20px;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1.4;
  text-align: left;
}

@media (min-width: 992px) {
}

@media (min-width: 768px) {
.col-md-6 {
  width: 50%;
}
.col-md-6 {
  float: left;
}
.col-sm-9 {
  width: 75%;
}
.col-sm-3 {
  width: 25%;
}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  float: left;
}
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
/********** End Thomas Fire Styles **********/

/********** Begin Interactive Tile Link Styles **********/
div.sbBox {
  /*float: left;*/
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 10px;
  margin-right: 10px;
  display: inline-block;
}
div.sbBox a {
  border: none;
  padding: 0;
  margin: 0;
  display: block;
}
div.sbBoxInner {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  overflow: hidden;
  width: 160px;
  height: 150px;
}
div.sbBoxInner img {
  width: 150px;
  height: 150px;
  border: none;
  margin: 0px !important;
  padding: 0px !important;
}
a div.sbBoxTitle {
  text-decoration: none;
}
div.sbBoxInner .sbBoxTitle {
  width: 150px;
  height: 160px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: -134px;
  color: #000000;
  padding: 5px;
  text-align: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  /*background: rgba(224,228,255,0.90);*/
  background: rgba(255,255,255,0.90);
  background-color: rgba(255,255,255,0.90);
  line-height: 18px;
}
div.sbBoxInner:hover .sbBoxTitle, div.sbBoxInner.touchFocus div.sbBoxTitle {
  margin-bottom: -10px;
}
/********** End Interactive Tile Link Styles **********/

/********** Start Santa Barbara Tiles for Complaints **********/
.sbTile {
  width: 90%;
  min-height: 307px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 20px;
  display: block;
  text-align: center;
  border: solid 1px #CCC;
  background-color: #EEE;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a.sbTile {
  display: block;
  text-decoration: none;
}
figcaption.sbTileTitle {
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 24px;
  margin-top: 10px !important;
}
.sbTile img {
  border-radius: 75px;
  max-width: 90%;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}
.sbTile figcaption {
  margin-top: 5px;
  margin-bottom: 7px;
  margin-left: 5px;
  margin-right: 5px;
}
.sbTile:hover, .sbTile:active {
  border: solid 1px #ABABAB;
  -webkit-box-shadow: 0px 5px 20px #474747;
  box-shadow: 0px 5px 20px #474747;
  background-color: #FFF;
}
/********** End Santa Barbara Tiles for Complaints **********/

/********** Start Santa Barbara Tiles for Measure C **********/
.sbTileMeasureC {
  width: 98%;
  min-height: 220px;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 20px;
  display: block;
  text-align: center;
  border: solid 1px #255833 !important;
  background-color: #EEE;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
a.sbTileMeasureC {
  display: block;
  text-decoration: none;
}
figcaption.sbTileMeasureCTitle {
  font-family: 'AbadiCon_Light', sans-serif;
  font-size: 18px;
  margin-top: 10px !important;
}
.sbTileMeasureC img {
  border-radius: 75px;
  max-width: 90%;
  margin-top: 15px !important;
  margin-bottom: 5px !important;
  border: solid 1px #255833 !important;
}
.sbTileMeasureC figcaption {
  margin-top: 5px;
  margin-bottom: 7px;
  margin-left: 5px;
  margin-right: 5px;
}
.sbTileMeasureC:hover, .sbTileMeasureC:active {
  /*border: solid 1px #ABABAB;*/
  -webkit-box-shadow: 0px 5px 20px #474747;
  box-shadow: 0px 5px 20px #474747;
  background-color: #FFF;
}
/********** End Santa Barbara Tiles for Measure C **********/

div.edtdiv-news img.mainimg {
  border: 7px solid #ffffff;
  border-image: none;
  box-shadow: 0px 5px 8px 2px #666666;
}
/********** Reduces Space Between HTML and File Display **********/
#FileDisplay {
  margin-top: -30px;
}

/*********** Hide Elements on Smaller Viewports ***********/
/*********** Laptop ***********/
@media screen and (max-width:1024px) {
.noLaptop {
  display: none !important;
}
.sbTile {
  min-height: 351px;
}
}

/*********** Tablet ***********/
@media screen and (max-width:768px) {
.noTablet {
  display: none !important;
}
.sbTile {
  min-height: 263px;
}
}

/*********** Phone Large ***********/
@media screen and (max-width:425px) {
.noPhoneLarge {
  display: none !important;
}
.sbTile {
  min-height: inherit;
}
}

/*********** Phone Medium ***********/
@media screen and (max-width:375px) {
.noPhoneMedium {
  display: none !important;
}
}

/*********** Phone Small ***********/
@media screen and (max-width:320px) {
.noPhoneSmall {
  display: none !important;
}
}

/*********** Hide Elements on Larger Viewports ***********/
/*********** Laptop ***********/
@media screen and (min-width:1024px) {
.yesLaptop {
  display: none !important;
}
}

/*********** Tablet ***********/
@media screen and (min-width:768px) {
.yesTablet {
  display: none !important;
}
div.edtdiv-news img.mainimg {
  margin-top: 5px;
  margin-left: 0px;
  margin-bottom: 15px;
  margin-right: 15px;
}
}

/*********** Phone Large ***********/
@media screen and (min-width:425px) {
.yesPhoneLarge {
  display: none !important;
}
}

/*********** Phone Medium ***********/
@media screen and (min-width:375px) {
.yesPhoneMedium {
  display: none !important;
}
}

/*********** Phone Small ***********/
@media screen and (min-width:320px) {
.yesPhoneSmall {
  display: none !important;
}
}
/*********** Fix Photo Gallery Main Image ***********/
#image_wrap img {
  width: auto;
}
.mailto {
  margin: 0px !important;
  padding: 0px !important;
}
/*********** Begin Send Email Links ***********/
a.SendEmail {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 30px;
  padding-right: 6px;
  margin: 0px;
  color: #FFFFFF;
  background-color: #2ba6cb;
  border: none;
  border-radius: 3px;
  text-decoration: none;
  background-image: url(/img/00/mailtoWhite.png);
  background-repeat: no-repeat;
  background-position: left center;
  transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
a.SendEmail:link, a.SendEmail:visited {
}
a.SendEmail:active, a.SendEmail:hover  {
  background-color: #2284a1;
}
/*********** End Send Email Links ***********/
.radius {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.padding20w100 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  width: 100% !important;
  line-height: normal !important;
}
/**************************************************************************/
/******************** End Santa Barbara Styles Section ********************/
/**************************************************************************/
