@import url('../css/custom.css');

.header {background:transparent url(../_gfx/dept_images/Civil_Service/home_page/csc_header.jpg) no-repeat scroll center top; clear:both; height:98px; margin:0px;}

body#main-body .leftnav_menu{display:none;}

ul {padding: 0; margin: 0;}
/*-------------------------------------------------------------
	Left Nav Styles
-------------------------------------------------------------*/

.leftnav {
	margin: 30px 10px 0 20px;
	padding: 0;
	width: 215px;
	}

.leftnav_top {
	padding: 0;
	margin: 0;
	height: 8px;
	background: url(../_gfx/dept_images/Civil_Service/nav/top.gif) no-repeat left top;
	border-bottom: none 0;}
	
#menu1 {
	background: #fbfbfb;
	border-left: 1px solid #cecece;
	border-right: 1px solid #cecece;
	margin: 0px 0px 0px;
	padding: 0;
	list-style: none;}

#menu1 li {
	font-size: 12px;
	line-height: 1;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #cecece;
	font-family: Helvetica, Arial, san-serif !important;
	background: #fbfbfb url(../_gfx/dept_images/Civil_Service/nav/arrow.gif) no-repeat 9px 13px;}

#menu1 li.active {
	background: #fbfbfb url(../_gfx/dept_images/Civil_Service/nav/arrow_open.gif) no-repeat 9px 13px;}

#menu1 li a {
	margin: 0;
	padding: 12px 0 10px 22px;
	color:#4f4f4f; 
	display: block;}

#menu1 li a:hover {
	color:#0071B6; }

#menu1 li ul {
	border: 0 none;
	margin: 0; 
	padding: 0;
	list-style: none;}

#menu1 li li {
	font-size: 11px;
	line-height: 1.2;
	text-transform: none;
	font-weight: normal;
	border: 0px none;
	padding: 2px 0 5px;
	background-image: none;}

#menu1 li li a, #menu1 li li a:visited {
	background-image: none;
	text-decoration: none;
	color: #0071B6;
	padding: 0 5px 5px 22px;}

#menu1 li li a:hover, #menu1 li li a:active, #menu1 li li a:focus {
	text-decoration: underline;}

#menu1 li li a.current {
	font-weight: bold;
	text-decoration: none;}

#menu1 li li a.current:after {
	content:"\0020 \25BA";
	font-size: 9px;
	vertical-align: center;}

a.dropdownitemlevel2:hover, a.dropdownitemlevel2:focus  {
	background: transparent !important;}

.leftnav_bottom {
	display: none;}

.mainSpan_wrapper .container {
	float: right;
	width: 688px;
	padding: 0 15px 0;
	position: relative;}

/************************************************
Content Styles
************************************************/

.mainSpan_wrapper .container h1 {
	color: #0071B6;}
	
.mainSpan_wrapper .container h2 {
	color: #0071B6;
	font-size: 1.2em;
	padding-bottom: 10px;}

.mainSpan_wrapper .container h3 {
	color: #4f4f4f;
	margin: 0;
	font-size: 1.1em;
	padding-bottom: 10px;}

.mainSpan_wrapper .container h4 {
    color: #0071B6;
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 10px;}
	
.mainSpan_wrapper ul li {
    list-style-image: none;
    list-style-position: outside;
    margin: 0;}
	
.mainSpan_wrapper table {
	width: 98%;
	margin-bottom: 25px;}
	
.mainSpan_wrapper th {
	font-weight: bold;
	padding: 5px 10px;
	background-color: #0071B6;
    color: #fff;
	text-align: center;}

.mainSpan_wrapper td {
	font-weight: normal;
	padding: 5px 10px;
	text-align: left;}
	
table.rules td:first-child {
	white-space:nowrap;}	
	
table.rules td{border:1px solid black;border-width:1px 1px 0 0px;}
table.rules tr:last-child td{border-bottom-width:1px;}
table.rules td:first-child{border-left-width:1px;}
table.rules th{border:1px solid white;border-width:0 0 0 1px;}
table.rules th:first-child{border-left:0;}

/************************************************
Home Page
************************************************/                          

.mainSpan_wrapper .content {
	padding: 15px 0;}

.title {
	margin: 0;
	border-bottom: 1px solid #ccc;}
	
.title_left {
	margin-top: 30px;
	padding: 0;}

.title_right {
	margin:  6px 0 0;
	padding: 0;
	width: 200px;
	position: absolute;
	top: 1px;
	right: 20px;}

#toolbar {
	margin: 0;
	padding: 0;}
	
#slideshow {
	margin: 0;
	padding: 0;
	width: 688px;
	height: 260px;
	background: #fff;
	position: absolute;
	top: 30px;
	left: 15px;
	z-index: 3;}

#slideshow a {border:0px none;}

#slideshow img{display:none;}

#slideshow img:first-child{display:inline;}

#pager {
	top: 260px;
	right: 35px;
	height: 16px;
	position: absolute;
	margin: 0;
	padding: 0;
	text-align:right;
	padding-right:20px;
	width:95%;
	overflow:hidden;
	z-index: 4;}

#pager a {
	background: url(../_gfx/dept_images/Civil_Service/slideshow_controls/slidemarker_off.gif) no-repeat left top;
	display:inline-block;
	overflow:hidden;
	margin:0 5px 0 0;
	padding-top:30px;
	height:16px;
	width:17px;
	text-decoration: none;}
	
#pager a.activeSlide { 
	background: url(../_gfx/dept_images/Civil_Service/slideshow_controls/slidemarker_on.gif);}

#pager a:focus {
	outline: none;}
	
#home_slide_controls {
	top: 260px;
	right: 15px; 
	height: 16px;
	position: absolute;
	margin: 0;
	padding: 0;
	text-align: right;
	width: 95%;
	z-index: 4;
}
	
#csc_control {
	top: 260px;
	right: 35px;
	height: 17px;
	position: absolute;	
	width: 17px;
	z-index: 4;
	overflow: hidden;
}

/*#home_slide_controls #pause {
    background: url(http://www.sfgov3.org/ftp/_gfx/dept_images/Civil_Service/slideshow_controls/slidemarker_pause_sq.gif) no-repeat scroll 0 0 transparent;}

#home_slide_controls #resume {
    background: url(../_gfx/dept_images/Civil_Service/slideshow_controls/slidemarker_resume.gif) no-repeat scroll 0 0 transparent;}

#home_slide_controls #resume, #home_slide_controls #pause {   
	display: inline-block;
    height: 16px;
    margin: 0 10px 0 0;
    padding-top: 30px;
    text-decoration: none;
    width: 16px;}	*/

.csc_home_wrapper {
	padding: 0;
	margin: 0;
	margin: 200px 0 15px;}

.welcome {
	width: 30%;
	float: left;
	margin-top: 15px;
	padding: 0 15px 15px 0;
	line-height: 1.3px;
	border-right: 1px dotted #666;}
	
.mainSpan_wrapper .container h2 {
	margin: 0;
	padding-bottom: 10px;
	clear: none;}

.highlights {
	width: 65%;
	float: right;
	margin-top: 15px;
	padding: 0 0 15px 0;}
	
.mainSpan_wrapper .highlights ul li {
	margin: 0;
	list-style-image: none;
    list-style-position: outside;}
	
.img_more {
	float: right;}
	
.more {
	font-size: 1em;
	font-weight: bold;
	color: #0071B6;
	display: inline-block;
	padding: 10px 30px 10px 0;
	background: url(../_gfx/dept_images/Civil_Service/home_page/more_arrow.png) no-repeat right center;}
	
.mainSpan_wrapper .container .content a {
    color: #0071B6;
}	

.mainSpan_wrapper, .container, .content, a:hover img {
	border-bottom: none;}

/************************************************
Sub-Level Page
************************************************/ 

.contentheader h1 {
	padding: 0 0 5px 0;}
	
.headshots {
	padding: 0 60px 30px 0;
	text-align: center;
	float: left;
	display: block;}	

.mainSpan_wrapper .container .content a:hover {
	border-bottom: none;}

.headshots p {
	color: #0c6e9d;}
	
.commissioners {
	padding: 20px 20px 20px 0;
	border-top: 1px #0C6E9D solid;
	clear: both;}	

.commissioners img {
	float: left;
	padding: 0 20px 20px 0;}

.mainSpan_wrapper .container .commissioners h2, .mainSpan_wrapper .container .commissioners h3 {
	clear: none;
	margin: 0;
	padding: 0;
	font-size: 1.3em;}

.mainSpan_wrapper .container .commissioners h3 {
	font-weight: normal;
	font-style: italic;
	font-size: 1.1em;
	margin: 0;
	padding: 0 0 10px 0;}
	
	
  /*-------------------------------------------------------------
Downlaodable Viewer Toobar
 -------------------------------------------------------------*/
 #sf_plugins {
	 padding-top: 60px;
 }		
	
/*-------------------------------------------------------------
CSC stay connected and 311
 -------------------------------------------------------------*/

#csc_side_content {
    display: block!important;  /*turn side content ON*/
	padding-bottom: 50px;}

.csc_stay_connected_box {
	display: block!important;
	width: 213px;
	border: 1px #cecece solid;
	text-align: center;
	margin: 15px 0 15px;
	padding-bottom: 10px;}

.subtitle_blue {
	text-transform: uppercase;
	color: #4f4f4f;
	font-size: 12px;	
	margin: 0 0 15px 0;
	padding: 8px;
	text-align: left;
	background-color: #eee;}

.icon_one {
	margin-left: 28px;
	float: left;}

.icon_two {
	margin-left: 28px;
	float: left;}

.icon_three {
	margin-left: 28px;
	float: left;}

.icon_one a, .icon_two a, .icon_three a {
    color: #144f91;
    text-decoration: none;
	line-height: 1.2em;}

.icon_one a:hover {color: #000; text-decoration: none;}
.icon_two a:hover {color: #000; text-decoration: none;}
.icon_three a:hover {color: #000; text-decoration: none;}

#csc_311 {
   display: block!important;
   margin: 15px 0 7px;}
   
/*-------------------------------------------------------------
footer
 -------------------------------------------------------------*/
 .footer_wrapper {
	display: block;
}
 .footer {
	background: #fff;
	border-right: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	border-left: 1px solid #cecece;
	width: 972px;
	padding: 10px 0;
	margin: 0 auto;
	text-align: center;}
	
#csc_footer 
{
    color: #333333;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    /* margin-bottom: 20px;
    margin-top: 30px;
    text-align: right;
    vertical-align: middle;
    width: 770px;*/
    display: block !important;
    padding: 0;
	margin: 0 auto;
    }
	


#csc_footer li {
	padding: 10px 0;
	margin: 0 5px 0 0;
	display: inline;}
 
 /*-------------------------------------------------------------
turn off general gsa style
 -------------------------------------------------------------*/

	
.give_feedback_box {
	display: none;}

div.leftnav_bottom	{
	display: none;}

.leftnav {
	background: none;}

#img_311, .div311, .csc_give_feedback_box {
	display:none;}
	
.leftnav_bottom {display: none;}