@charset "utf-8";

/*****************************************/
/* Customize base styles for             */
/* City of District ALL 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            */
/*****************************************/

/** CITY COUNCIL **/
html {
    background: #326378;
    background: url('/uploadedImages/Common_Content/Media_Library/Dept_Hero_Images/CouncilChambersBW.jpg') no-repeat fixed center center \9;
    background-size: cover \9;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/uploadedImages/Common_Content/Media_Library/Dept_Hero_Images/CouncilChambersBW.jpg', sizingMethod='scale')";
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/uploadedimages/Pages/Departments/District1/Media_Library/images/ports-of-la-and-long-beach.jpg', sizingMethod='scale');
}
body {
	background: none;
}
@media all and (min-width: 768px) { 
    html {
        background: url('/uploadedImages/Common_Content/Media_Library/Dept_Hero_Images/CouncilChambersBW.jpg') no-repeat fixed center center;
        background-size: cover;
    }
}
.dept-header {
    background: rgba(255,255,255,.95);
    height: 115px;
    margin-bottom: 72px;
}
.dept-branding img {
    margin-top: 18px;
    width: 77px;
}
.main-content .content-inner a:hover {
	background: none !important;
    color:#1abfdc !important;
    text-decoration: underline !important;
}
.dept-right-col {
    background: #171717;
    background: rgba(0, 0, 0, 0.7);
}
.dept-content .dept-right-col .sidebar-content {
  padding: 12px 0 28px 12px;
}
.main-content h2, .main-content h2 a, .main-content .h2, .main-content .h2 a {
	color: #1d1d1d;
	font-weight: 500;
}
.dept-content .main-content .content-inner h3, .dept-content .main-content .content-inner h3 a {
  color: #1abfdc;
}

.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: #778187;
}
.dept-breadcrumbs, .dept-breadcrumbs a {
    background: #1abfdc;
	color: #fff;
}
.main-content table td {
	border: none;
	vertical-align: middle;
}
.main-content table td:first-child {
	font-weight: 600;
}
.main-content table tr:nth-child(odd) {
	background: transparent;
	border-top: 1px solid #1abfdc;
	border-bottom: 1px solid #1abfdc;
}
	
/***********************************************************************/
/************************ DEPARTMENT LEVEL MENU ************************/
/************************** BORDERS AND COLORS *************************/
#dept-nav > ul > li > a {
    color: #fff;
    border-left: 1px solid #6a7273;
}
#dept-nav > ul > li.lastItem a {
    border-right: 1px solid #6a7273;
}
/********************** BACKGROUND OF ENTIRE MENU **********************/
.dept-menu-wrap {
	background: #171717;
    background: rgba(0, 0, 0, 0.8);
}
/*#dept-nav .top-nav-mega-full-width {
    background-color: rgba(0, 153, 189, 0.95);
}*/
/****** UL LI AND ANCHOR TAGS INVOLVED IN THE SYTLING OF THE MENU ******/

#dept-nav > ul > li:hover > a, #dept-nav > ul > li > a.fw-hovered {
    background: rgba(60,60,60,0.8);

    color: #fff;
}


/********************* DEPARTMENTAL BODY BUTTONS *********************/
.dept-content .main-content a.lrg-button-grey {
    color: #007A9A;
    background-color: #ADD0E4;
}
.dept-content .main-content a.lrg-button-grey:hover {
    color: #ADD0E4;
    background-color: #007A9A;
}
.box-shadow {
	margin-left: 10px;
	padding-top: 8px;
	padding-bottom: 8px;

}
.dept-content .dept-right-col .update-block .box-shadow h5 {
	padding: 0px;
	margin-bottom: 0px;
}

/************* STYLES RELATED TO TEXT WITHIN THE SIDEBAR *************/
.right-col-inner h4 {
    font-weight: 300!important;
    font-size: 18px!important;
    margin-left: 0!important;
}
.dept-content .dept-right-col .update-block h5 { 
   color: #333;
  font-size: 13px;
  font-weight: 600;
  background: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.main-content .right-col-inner ul {
    padding-right:0 !important;
}
.main-content .right-col-inner ul li {
    padding-bottom:0 !important;
    border-bottom:1px solid #4B94BA;
    border-bottom:1px solid rgba(75,148,186,.3);
    
}
.main-content .right-col-inner ul li:last-child {
	border-bottom: none;
}
.main-content .right-col-inner a { color: #fff; text-decoration: none;padding:7px 8px 7px;}
.main-content .right-col-inner a strong {color: #1abfdc;}
.main-content .right-col-inner li a:hover { background-color: rgba(255,255,255,.2) !important;}

/* SIDEBAR ANNOUNCEMENTS */
.dept-content .dept-right-col .dept-announcement {
	background:#E1CFA9; /* fall back */
	background:rgba(232, 183, 88, .3);
	border-color:#988D73; /* fall back */
	border-color:rgba(0,0,0,.3); 
}
.dept-content .dept-right-col .dept-announcement h3.announce-h3 {
    color:#055c7f;
}

/* For Full Page */
.col-md-7.col-sm-7 {
    width: 100%;
}
.dept-content .main-content .content-inner .col-md-7 {
    padding-left: 0px;
    padding-right: 0px;
}

/* 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:36px;
    }
    #dept-nav {
        width: 100% !important;
        max-width: 100% !important;
    }
    #dept-nav > ul > li {
        background: #003E57 !important;
        border-top: 1px solid #326378;
    }
    #dept-nav > ul > li a {
        color: #fff !important;
	    border: 0;
    }
    #dept-nav .top-nav-mega-full-width {
        background-color: rgba(0, 153, 189, 0.95);
    }
    #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 > a: hover, #dept-nav > ul > li > a: active, #dept-nav > ul > li > a.fw-hovered {
        color: #fff !important;
        background: #003E57 !important;
        border-top: 1px solid #326378 !important;
    }
    #dept-nav > ul > li#lastItem a {
        border-right-color:#003E57;
    }
    .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;
    }
}
@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: 0;
    }
}