@charset "utf-8";
/*****************************************/
/* Customize base styles for             */
/* City of Long Beach District 2 Pages   */
/*****************************************/
/* Warning: changing attributes like:    */
/* width, height, float, position,       */
/* margin, etc                           */
/* will effect the responsive layout     */
/* and may break the appearance on       */
/* mobile or tablet devices.             */
/*****************************************/
/* Font-Weight Guide:                    */
/* Don't use 'bold'                      */
/* font-weight: 200; <-- Thin            */
/* font-weight: 300; <-- Light           */
/* font-weight: 400; <-- Normal          */
/* font-weight: 500; <-- Medium          */
/* font-weight: 600; <-- Semi-Bold       */
/* font-weight: 700; <-- Bold            */
/*****************************************/

/* Background Fall-Back for mobile, smaller tablets and older browsers (IE8 and down) */
html {
    background: #326378;
    background: url('/globalassets/common-content/media-library/dept-hero-images/d2bg.jpg') no-repeat fixed center center \9;
    background-size: cover \9;
}
body {
	background: none;
}

/* Background for larger tablets and desktop devices */
@media all and (min-width: 768px) { 
    html {
        background: url('/globalassets/common-content/media-library/dept-hero-images/d2bg.jpg') no-repeat fixed center center;
        background-size: cover;
    }
}

.dept-branding img {
    margin-top: 18px;
    width: 77px;
}
.dept-header {
  background: none repeat scroll 0 0 #fff;
  height: 115px;
  margin-bottom: 72px;
}

.main-content a {
    color: #046077;
}
.main-content a:hover {
	background-color: rgba(255,255,255,.3) !important;
    color:#046077 !important;
    text-decoration:underline !important;
}
.dept-right-col {
    background: #dae3ec;
    background: rgba(209, 232, 245, 0.9);
}

#dept-nav > ul > li > a {
    color: #fff;
    border-left: 1px solid #ADD0E4;
}
#dept-nav > ul > li.lastItem a {
    border-right: 1px solid #ADD0E4;
}

.dept-menu-wrap {
	background-color: rgba(0,122,154, 0.95)!important;
}
#dept-nav .top-nav-mega-full-width h1, #dept-nav .top-nav-mega-full-width h2, #dept-nav .top-nav-mega-full-width h3, #dept-nav .top-nav-mega-full-width h4, #dept-nav .top-nav-mega-full-width h5, #dept-nav .top-nav-mega-full-width h6, #dept-nav .top-nav-mega-full-width a, #dept-nav .top-nav-mega-full-width ul li a, #dept-nav .top-nav-mega-full-width ol li a {
    color:#fff !important;
}
.main-content h1, .main-content h1 a, .main-content .h1, .main-content .h1 a, .main-content h2, .main-content h2 a, .main-content .h2, .main-content .h2 a, .main-content h3, .main-content h3 a, .main-content .h3, .main-content .h3 a, .main-content h4, .main-content h4 a, .main-content .h4, .main-content .h4 a, .main-content h5, .main-content h5 a, .main-content .h5, .main-content .h5 a, .main-content h6, .main-content h6 a, .main-content .h6, .main-content .h6 a {
    text-transform: capitalize;
}
#dept-nav .top-nav-mega-full-width {
    background: #0097BA;
    background-color: rgba(0, 153, 189, 0.95);
}
#dept-nav > ul > li:hover > a, #dept-nav .fw-hovered {
    background: rgba(0, 153, 189, 0.95) !important;
}

.dept-content .main-content a.lrg-button-grey {
    background-color: #c7dfed;
    color: #046077;
    padding: 12px;
    margin-top:0;
    margin-bottom:2px;
}
.dept-content .main-content a.lrg-button-grey:hover {
    color: #c7dfed !important;
    background-color: #046077 !important;
    padding: 12px;
    text-decoration: none !important
}
.dept-content .main-content .content-inner .col-md-7 h2 + h3 {
    position: relative;
    top: -27px;
}
.dept-content .main-content .content-inner h2, .dept-content .main-content .content-inner h2 a {
    margin-bottom: 28px;
}

.dept-content .main-content .content-inner h3, .dept-content .main-content .content-inner h3 a {
    color:#4e9eb6;
}
.dept-content .main-content .content-inner h4, .dept-content .main-content .content-inner h4 a {
    text-transform: capitalize;
    color: #a3a7aa;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    text-transform: capitalize;
}
.main-content h5, .main-content h5 a, .main-content .h5, .main-content .h5 a {
    font-size: 14px;
    color:#519FB9;
}
.dept-content .dept-right-col .update-block h5 {
    text-transform: capitalize;
    color:#046077 ;
    font-weight: 300;
    font-size: 18px;
    background:transparent;
}
.dept-content .dept-right-col .update-block hr  {
    border-bottom: 1px solid #fff;
    border-top: 0 none;
    clear: both;
    color: #fff;
    height: 1px;
    margin: 12px 0 24px 10px;
    opacity: .5;
}
.dept-content .dept-right-col .update-block .box {
    background: -moz-linear-gradient(top, rgba(4,121,151,0.55) 0%, rgba(4,121,151,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(4,121,151,0.55)), color-stop(100%,rgba(4,121,151,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(4,121,151,0.55) 0%,rgba(4,121,151,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(4,121,151,0.55) 0%,rgba(4,121,151,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(4,121,151,0.55) 0%,rgba(4,121,151,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(4,121,151,0.55) 0%,rgba(4,121,151,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c047997', endColorstr='#b3047997',GradientType=0 ); /* IE6-9 */
    padding: 23px 0 23px 4px;
    color: #fff;
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px;
}
.dept-content .dept-right-col .update-block .box p + p {
    margin-top:14px;
}
.dept-content .dept-right-col .update-block .box a {
    color:#c9e1ef;
}
.custom-social {
	margin-left: 8px;
}
.custom-social img {
	height: 30px;
	margin-right: 8px
}
.custom-social a:hover {
	background: transparent !important;

}
.custom-social img:hover {
	opacity: .8;
}
/* HIDE PRESS RELEASES */

.announcement-widget {
	/*display: none;*/
	margin-top:10px;

}
.news-widget {
	margin-bottom: 15px;
}

/* SIDEBAR ANNOUNCEMENTS */
.dept-content .dept-right-col .dept-announcement {
	background:#96C4DB; /* fall back */
	background:rgba(1, 119, 152,.5);
	border-color:#7094A4; /* fall back */
	border-color:rgba(0,0,0,.2); 
    padding:28px 28px 28px 28px;
}
.dept-content .dept-right-col .dept-announcement h3.announce-h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
	text-transform: none;
}
.dept-content .dept-right-col .dept-announcement p {
    color:#fff;

}
.dept-content .dept-right-col .dept-announcement p a {
    color:#fff;
	text-decoration: underline;
}
.dept-content .dept-right-col .dept-announcement p a:hover {
	color: #fff !important;
	text-decoration: none !important;
	background: rgba (255,255,255,.2);
}
.dept-content .dept-right-col h1, .dept-content .dept-right-col h2, .dept-content .dept-right-col h3, .dept-content .dept-right-col h4, .dept-content .dept-right-col h5 {
	color: #046077;
}
.dept-content .dept-right-col p {
	line-height: 1.35;
	margin-top: 12px;
}
.dept-content .dept-right-col .side-events h3 { 
	padding-left: 0px;
}
.dept-content .dept-right-col .sidebar-content {
  padding: 28px 0 28px 21px;
}

/* Responsive Styles */
@media all and (max-width: 959px) {
    .main-content-wrap.dept-content {
        margin-bottom: 0;
        margin-top: 0;
    }
}
@media all and (max-width: 768px) {
    html {
        background: #fff;
    }
    .dept-header { 
        margin-bottom:15px;
    }
    #dept-nav {
        width: 100% !important;
        max-width: 100% !important;
    }
    #dept-nav > ul > li {
        background: #036882;
        border-top: 1px solid #0B7D99;
    }
    #dept-nav > ul > li a {
        color: #fff !important;
	   border: 0;
    }
    #dept-nav .top-nav-mega-full-width {
        background-color: #1790B2;
    }
    #dept-nav > ul > .top-nav-mega-full-width, #dept-nav > ul > li + .top-nav-mega-full-width {
        padding-left: 24px !important;
        left: 0 !important; 
    }
    #dept-nav > ul > li:active > a, #dept-nav > ul > li > a.fw-hovered,
    #dept-nav > ul > li:hover > a {
        color: #fff !important;
        background: #036882 !important;
    }
    .dept-breadcrumbs {
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 1.5;
        padding-right: 24px;
    }
    #dept-nav > ul > .top-nav-mega-full-width .col-md-4 {
        padding-top: 14px;
	max-width: 100% !important;
        width: 100% !important;
    }
		.main-content .row img {
		float: none;
		display: block;
		margin-left: 0px !important;
		margin-right:  0px !important;
	}
}
@media all and (max-width: 599px) {
    .dept-branding img {
        margin: 11px 6% 0;
        max-width: none;
        width: 71px;
    }
    #dept-nav > ul > .top-nav-mega-full-width .col-md-4 {
        width: 100%;
    }
    .top-nav-mega-full-width h3, .top-nav-mega-full-width h3 a {
        margin-left: 0;
    }
    .top-nav-mega-full-width ul, .top-nav-mega-full-width ol {
        margin-left: 16px;
    }
}

/*Trumba Calendar Styles*/
.flex-container-cal {
  width:100%;
background: #ffffff;
}

.maincol {
flex: 4;


  padding: 20px;
}
.filters {
flex: 1;
padding: 20px 20px 0px;
background-color: #ffffff;
margin: 0px 0px;
}

.maincalendar {
width: 100%;
border-top: 1px solid #ddd;
  padding: 0px;
}

.panel-group .panel-heading + .panel-collapse .panel-body {
padding: 15px 0px;
}
.panel-default > .panel-heading {
background-color: #ffffff;
padding: 10px 0px;
}

h3.panel-title {
font-size: 20px;
margin-top:0 !important;
margin-bottom:0 !important;
}

h3.panel-title a {
	background: transparent !important;
}

h3.panel-title a:hover {
	text-decoration: underline !important;
}

.collapsing{-webkit-transition:height .0s;}

@media screen and (max-width: 700px) {
  .flex-container{   
    flex-direction: column;
  }
}

@media screen and (min-width: 700px) {
#filter {
width:37%;
float:left;
margin-right:20px;
}
#eventtype {
width:37%;
float:left;
margin-right:20px;
margin-top:10px;
clear:both;
}
#calendarsearch {
float:left;
margin-top:10px;
}
#location {
float:left;
margin-top:0px;
}
}