/***************************************/
/* Customize base styles for           */
/* City of Long Beach Department 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           */
/***************************************/

@import url(http://fonts.googleapis.com/css?family=Mr+Dafoe);

/************  Page background  ************/

html {
    background:#395EAE;
}
/* IE8 version */
@media all\0 { 
    html { background:url(/uploadedImages/Pages/Departments/Utility_Services/Development_Assets/utility_bg.jpg) no-repeat fixed left;
    }
}
@media all and (min-width: 768px) { 
    html { 
        background:url(/uploadedImages/Pages/Departments/Utility_Services/Development_Assets/utility_bg.jpg) no-repeat fixed left;
        background-size: cover;
        height: 100%;
    }
	#button-wrap {
	width: 35%;
	display: inline-block;
	padding: 15px;
	margin-top: 6px;
	vertical-align: top;
	float: right;
}
#online-copy-wrap {
	display: inline-block;
	width: 55%;
	float: left;
	vertical-align: top;
}
.box-container {
  width: 48%;
}
	
}
body {
    background:none;
    min-height: 100%;
}


/************  Content Backgrounds  ************/


/* dept menu background */
.dept-menu-wrap {
    background-color: #2d2d2d; 
    
}



/* dept menu dropdown background*/
#dept-nav .top-nav-mega-full-width {
background: -moz-linear-gradient(top, rgba(45,45,45,0.99) 0%, rgba(60,60,60,0.97) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,0.99)), color-stop(100%,rgba(60,60,60,0.97))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(45,45,45,0.99) 0%,rgba(60,60,60,0.97) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(45,45,45,0.99) 0%,rgba(60,60,60,0.97) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(45,45,45,0.99) 0%,rgba(60,60,60,0.97) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(45,45,45,0.99) 0%,rgba(60,60,60,0.97) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#535353', endColorstr='#414141',GradientType=0 ); /* IE6-9 */
}

*::-moz-selection {
    background: none repeat scroll 0 0 #535353;
    color: #fff;
}

/* right column background */
.dept-right-col {
    background:transparent;
    z-index: 1;
	color: #fff;
}

.dept-right-col::after {
    content: "";
    background:rgba(45, 45, 45, .9);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

/* right column link boxes */
.dept-content .dept-right-col ul.article-links {
    background:rgba(55, 95, 126, 0.3);
    padding-top:42px;
}

/* page content background */
.dept-content .main-content .content-inner {
    background:#fff;
}

/* right column link background boxes */
.dept-content .dept-right-col ul.article-links, body .dept-content .dept-right-col .update-block h5 {
    background:rgba(211, 190, 145, .8);
    border-radius: 0;
}

/************  Navigation  ************/


#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;
}

/************  Headers  ************/
.dept-content .dept-right-col .update-block h5 {
    color:#2D2C29;
}
.dept-content .main-content .content-inner h3 {
    color:#799ea5;
    margin-top:36px;
}
.dept-content .main-content .content-inner h3 a {
    text-decoration: none;
}

.dept-content .main-content .content-inner li h3 {
    margin-top:14px;
}
.dept-content .main-content h2 + h2 {
    color: #333;
    margin-top: 0px;
    font-weight: 600;
    position: relative;
    top: -8px;
}
.dept-content .main-content h2 + h2 + h3 {
    margin-top:18px !important;
}

/************  Links  ************/

/* breadcrumb links */
.dept-breadcrumbs a {
    color:#77858d; /* for older browsers */
    color:rgba(0,0,0,.6);
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
}

/* dept menu links and hover */
.dept-content .dept-right-col, .dept-content .dept-right-col p {
    color:#fff;
}
#dept-nav > ul > li > a { 
    color:#fff;
    border-left:1px solid rgba(228, 223, 210, 0.5);
    min-width: 80px;
}
#dept-nav > ul > li.lastItem {
    border-right:1px solid rgba(228, 223, 210, 0.5);
}
#dept-nav > ul > li:hover > a, #dept-nav > ul > li > a.fw-hovered {
	background: transparent;
    color: #1abdda;
    text-decoration: none !important;
}
.dept-content .dept-right-col .link-list a, .dept-content .main-content .dept-right-col a {
	text-decoration: none;
}
.dept-content .dept-right-col .link-list a, .dept-content .main-content .dept-right-col a:hover {
	text-decoration: none;
}

.dept-content .main-content a:hover {
    text-decoration: none !important;
}
.dept-content .dept-right-col .link-list a:hover {
    background:rgba(80, 15, 11, .2) !important;
}

.dept-content .main-content a.lrg-button-grey {
	color: #767579;
    border-radius: 0 0 0 0;
    background: #e8ecef;
}
.dept-content .main-content a.lrg-button-grey:hover {
    color: #f3a149;
    background: #dddfe1 !important;
    text-decoration: none;
}

/************  Dept Unique Classes and alterations ************/

.dept-right-col::after {
  background: rgba(0, 0, 0, .8);
}

.content-inner .col-md-5, .content-inner .col-sm-5 {
	display: none;
}
.dept-content .main-content .content-inner .col-md-7 {
  padding: 0px;
  width: 100%;
}
.sidebar-content-bg p:last-child {
	margin-bottom: 0px;
}
.script {
    font-family: "Mr Dafoe";
    font-size: 24px;
}
.em-dim {
    color: #799ea5;
    color: #A59A87;
    display: block;
}
.col-md-7.col-sm-7 + hr {
    display: none;
}

.dept-content .main-content .col-md-12 + .dept-right-col {
  padding: 28px 0px 28px 28px;
}

.dept-content .main-content .col-md-12 + .dept-right-col h3 {
	color: #fff;
	font-weight: 600;
	font-family: 'Open Sans';
	border-bottom: 1px solid #1abdda;
	font-size: 13px;
	text-transform: lowercase;
	padding-bottom: 7px;
	padding-left: 7px;
}
/*.main-content a {
    color: #4475ca;
    text-decoration: underline;
}
.main-content a:hover {
	color: #3d62a2 !important;
}
*/
.online-wrap {
	border-bottom: 5px solid #333;
	border-top: 5px solid #333;
	padding: 12px 0px 16px 0px;
	margin-top: 20px;
	margin-bottom: 27px;
	overflow: hidden;
}
	
#button-wrap {
	background: #1abdda;
}
.payonline-button, .main-content .payonline-button a {
	display: block;
	color: #333;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Raleway';
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1px;
	
	text-align: center;
}
.main-content .payonline-button a {
	padding: 10px 0px 10px 0px;
}
.main-content .payonline-button a:hover {
	background: #00070e !important;
	color: #fff !important;
	text-decoration: none !important;
}

.dept-content .main-content .content-inner h2 + h3 {
    margin-top: 18px;
}
.dept-content .main-content .content-inner h3 {
color: #025f91;
margin-top: 28px;
text-transform: none;
font-weight: 600;
font-size: 14px;
line-height: 1.5;
}
.dept-content .main-content .content-inner .col-md-7 h2 {

	font-weight: 700;
	margin-bottom: 0px;
	line-height: 1;
}

.box-container {
  background-color: white;
  display: inline-block;
  position: relative;
}
.img-wrapper {
  position: relative;
}
.title {
  position: absolute;
  bottom: 18px;
  z-index: 2;
  background: #025f91;
  color: #fff;
  font-family: 'Open Sans';
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  padding: 5px 10px 5px 15px;
}
.desc-container, .desc-container a {
  background-color: white;
  width: 100%;
  vertical-align: middle;
  padding: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.box-container img {
	margin-bottom: 0px;
}
.sidebar-content-bg, .sidebar-button-bg {
	background: #025f91;
	padding: 10px;
	margin-top: 12px !important;
}

 .sidebar-button-bg img {
 	margin-right: 8px;
 	margin-bottom: 0px;
 }
.sidebar-content-bg a, .sidebar-button-bg a {
	color: #fff !important;
	text-transform: none;
	background: transparent !important;
}
 .sidebar-content-bg a:hover {
	 color: #1abdda !important;
 }
 .sidebar-button-bg:hover {
	 background: #1abdda;
 }
 a .sidebar-button-bg  {
	color: #fff;

}
.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 {
color: #757d82;
display: block;
line-height: 1.1;
margin-top: 24px;
margin-bottom: 8px;
text-transform: uppercase;
}
.main-content h2 {
	color: #333;
	margin-top: 0px !important;
	font-weight: 600;
}
.main-content h4 {
	font-weight: 600;
	letter-spacing: 1px;
	font-family: 'open sans';
	color: #333;
}
.main-content table {
  margin-top: 0px;
}
.main-content ul li, .main-content ol li {
line-height: 1.4;
margin-left: 28px;
padding-bottom: 8px;
}
.dept-content .dept-right-col .dept-announcement {
    padding:12px 18px 2px;
}
.dept-content .dept-right-col .side-events a.event-link {
    border-top: 1px solid #fff;
}
.main-content table td {
border-bottom: 1px solid #c6bfb8;
border-top: 1px solid #c6bfb8;;
border-right: 0px;
border-left: 0px;
    font-size: 14px;
    padding: 7px 5px;
    vertical-align: middle;
}
.main-content table tr:nth-child(2n+1) {
    background: none;
}
.main-content table td:nth-child(3) {
	text-align: right;
}

/* 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;
    }
	#button-wrap {
	display: block;
	padding: 15px;
	margin-top: 6px;
}
	#online-copy-wrap {

	vertical-align: top;
	margin-bottom: 20px;
}
    .dept-breadcrumbs {
        padding-top:5px;
        padding-bottom:5px;
        line-height: 1.5;
        padding-right:24px;
    }
	.dept-content .main-content .content-inner .col-md-7 h2 {
  margin-top: 0px;
}
.box-container {
  width: 100%;
  margin-bottom: 20px;
}

}
@media all and (max-width: 599px) {
    .dept-branding img {
        margin: 11px 6% 0;
        max-width: none;
        width: 71px;
    }

}
.dept-content .dept-right-col .sidebar-content {
padding: 10px 0 28px 0px;
}