/*
Theme Name: SFERS
Theme URI:
Description:
Version:
Author: 10up
Author URI: http://10up.com/
Tags:
*/

body {
    background: #F1F1F1 url(images/new-background.jpg) 0 183px repeat-x;
    color: #666;
    font-family: Georgia;
    font-size: 12px;
    margin: 0;
    padding: 0;
    position: relative;
}

h1, h2, h3, h4, p, ul, ol, li, input {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

a {
    color: #4695B9;
    text-decoration: none;
}
a:active{outline: none;}
a:focus{-moz-outline-style: none;}

img {
    border: none;
	max-width: 100%;
	height: auto;
}

label {
	margin: 0 10px 10px 0;
	padding: 0;
	display: inline-block;
	line-height: 120%;
}

input[type="text"], input[type="password"], textarea {
    border: none;
    background: #FFF;
    color: #333;
    font-family: Arial;
    font-size: 12px;
    margin: 0;
    padding: 0 5px;
}

.memberContainer ::-webkit-input-placeholder { /* WebKit browsers */
	color: #333;
}
.memberContainer :-moz-placeholder { /* Firefox 18- */
	color: #333;
	opacity: 1;
}
.memberContainer ::-moz-placeholder {  /* Firefox 19+ */
	color: #333;
	opacity: 1;
}
.memberContainer :-ms-input-placeholder {  /* Internet Explorer 10+ */
	color: #333;
}

.clearfix {
    clear: both;
}
.group:after,
.container:after,
.partners:after,
#content:after,
#sidebar:after,
#sidebar .bucket:after,
.buckets:after {
    content: "";
    display: table;
    clear: both;
}

#page {
    background: url(images/page_bg.png) 0 130px no-repeat;
    margin: 0 auto;
    padding: 0 17px;
    position: relative;
}


/*  SFGov Menu
	------------------------------------------------------------------------ */
.sf_nav ul{
	padding:0;
	margin:0;
}
.mobile-logo {
	display:none;
}
#sf_header {
	margin-bottom:5px;
}
#sf_header .sf_header_logo {
	float:left;
	background:url(https://www6.sfgov.org/ftp/sfsoap/images/global/Bheader_left.gif) top left no-repeat;
	margin-top: -28px;
}
#sf_header .sf_header_logo a {
	display:block;
	width:147px;
	height:28px;
}
#sf_header .sf_header_logo a span{display:none;}

#sf_header .sf_header_nav
{
	height:28px;
	background:url(https://www6.sfgov.org/ftp/sfsoap/images/global/Bheader_mid.gif) top left repeat-x;
	margin-left: 147px;
	margin-right: 8px;
}
#sf_header .sf_header_nav li{margin-top:7px;float:left}
#sf_header .sf_header_nav li.help{float:right;margin-right:20px; background: none;}
#sf_header .sf_header_nav li, #sf_header .sf_header_nav a{display:block;text-indent:-9999px;overflow:hidden;}
#sf_header .sf_header_nav a{height:21px;background-image:url(https://www6.sfgov.org/ftp/sfsoap/images/global/headerblue_nav.gif);background-repeat:no-repeat;}
#sf_header_home a{width:71px;background-position:0px 0px;}
#sf_header_home a:hover,#sf_header_home a:active, #sf_header_home a:focus{background-position:0px -29px;}
#sf_header_residents a{width:90px;background-position:-72px 0px;}
#sf_header_residents a:hover,#sf_header_residents a:active, #sf_header_residents a:focus{background-position:-72px -29px;}
#sf_header_business a{width:85px;background-position:-162px 0px;}
#sf_header_business a:hover,#sf_header_business a:active, #sf_header_business a:focus{background-position:-162px -29px;}
#sf_header_government a{width:100px;background-position:-247px 0px;}
#sf_header_government a:hover,#sf_header_government a:active, #sf_header_government a:focus{background-position:-247px -29px;}
#sf_header_visitor a{width:70px;background-position:-347px 0px;}
#sf_header_visitor a:hover,#sf_header_visitor a:active, #sf_header_visitor a:focus{background-position:-347px -29px;}
#sf_header_online a{width:110px;background-position:-417px 0px;}
#sf_header_online a:hover,#sf_header_online a:active, #sf_header_online a:focus{background-position:-417px -29px;}
#sf_header_help a{width:60px;background-position:-740px 0px;}
#sf_header_help a:hover,#sf_header_help a:active, #sf_header_help a:focus{background-position:-740px -29px;}

#sf_header .sf_header_end
{
	width:8px;
	height:28px;
	float:right;
	background:url(https://www6.sfgov.org/ftp/sfsoap/images/global/Bheader_right.gif) top right no-repeat;
	margin-top: -28px;
}



/*** Header ***/

.top_links {
    background: url(images/container_top.png) 0 100% no-repeat;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    text-align: right;
    height: 30px;
    padding: 10px 35px 0 0;
}
@media (max-width: 999px) {
	.top_links {
		background: none;
	}
}
.top_links a {
    color: #334353;
}

.top_links a:hover {
    text-decoration: underline;
}

.displaymobile {
    display: none;
}

#header {
    background: #FFF;
    width: 100%;
    height: 110px;
    position: relative;
}

#header .logo {
    position: absolute;
}

#header .logo a {
    outline: none;
}

#header .menu {
    position: absolute;
    top: 30px;
    right: 20px;
}

#header .menu .main-menu-trigger {
    display: none;
    background: url("images/mobile-menu.png") center no-repeat;
    width: 45px;
    height: 38px;
    cursor: pointer;
	position: absolute;
	right: 20px;
	top: -110px;
}

#header .menu > ul > li {
    float: left;
    font-size: 13px;
    font-style: italic;
    position: relative;
}

#header .menu > ul > li > a {
    display: block;
    line-height: 16px;
    height: 16px;
    color: #666;
    padding: 0 10px;
}

#header .menu > ul > li > a:hover {
    color: #000;
}

#header .menu ul ul {
    display: none;
    border: 1px solid #717171;
    background: #252525;
    position: absolute;
    width: 200px;
    top: 40px;
    left: 0;
}

#header .menu ul ul li a {
    display: block;
    color: #FFF;
    line-height: 170%;
    padding: 0 10px;
}

#header .menu a:hover {
    color: #0099FF;
}

#header .menu2 {
    background: url(images/shadow.png) 0 0 no-repeat;
    height: 30px;
    padding: 20px 0 0 17px;
    position: absolute;
    left: 250px;
    bottom: 0;
}

#header .menu2 li {
    float: left;
    margin-left: 30px;
}

#header .menu2 li:first-child {
    margin-left: 0;
}

#header .menu2 li a {
    outline: none;
}

#header .menu2 li.calculator {
    display: none;
}


/*** Banner ***/

.banner {
    background: url(images/new-background.jpg) 0 100% repeat-x;
    height: 386px;
    overflow: hidden;
}
.banner img {
    display: block;
    margin: auto;
}

body.page-template-retired-php .banner {
    background: url(images/banner_bg3.jpg) 0 100% repeat-x;
}

body.page-template-active-php .banner {
    background: url(images/banner_bg2-v2.jpg) 0 100% repeat-x;
}

.banner > .alignleft {
    border: 1px solid #fff;
    width: 198px;
    height: 68px;
    margin-top: 15px;
    padding: 10px 14px 0;
}

body.home .banner .alignleft, body.page-template-banner-php .banner .alignleft {
    height: 243px;
    padding-top: 25px;
}

.banner .alignleft h2 {
    color: #FFF;
    color: #4695B9;
    font-family: Georgia;
    font-size: 17px;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.page-template-retired-php .banner .alignleft h2,
.page-template-active-php .banner .alignleft h2 {
    color: #fff;
}

.banner .alignleft h2 a {
    color: #FFF;
    color: #4695B9;
}

.banner .login {
    float: left;
    border-bottom: 1px dotted #fff;
    font-size: 11px;
    line-height: 147%;
    /*margin-bottom: 15px;
    padding-bottom: 25px;*/
    margin-bottom: 5px;
    padding-bottom: 10px;
}

.banner .login form div {
    clear: both;
}

.banner .login input[type=text], .banner .login input[type="password"] {
    border: none;
    background: #FFF;
    color: #333;
    font-family: Arial;
    font-size: 11px;
    width: 190px;
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
}

.banner .login input[type="password"] {
    background: #FFF url("images/member/password-bg.gif") no-repeat 6px 7px;
}

.banner .login p {
    margin-bottom: 9px;
}

.banner .login .login_links {
    float: left;
}

.banner .login .login_links a:hover {
    text-decoration: none;
}

.banner .login input[type=image] {
    float: right;
    width: 76px;
    height: 32px;
}

.banner .login span.wpcf7-not-valid-tip {
    width: 180px !important;
    left: 50px !important;
}

.banner .login .wpcf7-response-output {
    clear: both;
    background: #FFF;
}

.banner a {
    color: #fff;
    color: #4695B9;
    text-decoration: underline;
}

.banner .why-register {
    border-bottom: 1px dotted #fff;
    margin-bottom: 10px;
    padding-bottom: 20px;
}

.banner .why-register a {
    background: url("images/why_register_btn_new.jpg");
    padding-right: 197px;
    padding-bottom: 16px;
    color: transparent;
}

.banner .search {
    /*clear: both;*/
    float: left;
}

.banner .search input[type=text] {
    float: left;
    font-size: 11px;
    width: 168px;
    height: 22px;
    line-height: 22px;
}

.banner .search input[type=image] {
    float: left;
    width: 20px;
    height: 22px;
    margin: 0;
    padding: 0;
}

.banner > .alignright {
    max-width: 710px;
    height: 78px;
    padding: 15px 0 15px 10px;
	float: left;
	margin-left: 12px;
}

body.home .banner > .alignright, body.page-template-banner-php .banner > .alignright {
    height: 270px;
}

.banner img {
    position: relative;
    height: auto;
}

.banner .alignright img:first-child {
    display: block;
}

.banner .alignright h1 {
    color: #fff;
    font-size: 38px;
    font-weight: normal;
    font-style: italic;
    font-weight: normal;
    padding: 15px 0 0 15px;
}

/*** Buckets ***/

.buckets {
    /*clear: both;
    float: left;*/
    background: #eee;
    min-height: 195px;
    padding: 6px 0px;
}

.buckets li {
    float: left;
    background: #FFF;
    color: #333;
    font-size: 11px;
    text-align: center;
    width: 300px;
    height: 220px;
    margin-left: 10px;
    padding: 5px 10px 0;
}

.buckets li:first-child {
    margin-left: 0;
}

.buckets li h2 {
    /*font-family: "Trebuchet MS";*/
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.buckets li a {
    color: #4695B9;
    text-decoration: underline;
}

.buckets li p {
    font-family: Georgia;
    font-size: 14px;
}

.buckets li h2 a {
    color: #4695B9;
    text-decoration: none;
}

.buckets li img {
    display: block;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

/*** Content ***/

.container {
    background: #FFF;
}

.container_bottom .container {
    max-width: 980px;
    background: none;
    margin: 0 auto;
}

#content {
    box-sizing: border-box;
    float: left;
    font-size: 14px;
    min-height: 400px;
    padding: 20px 20px 30px 30px;
    position: relative;
}

body.page-template-three-column-php #content {
    width: 440px;
}

#content h1 {
    color: #4695B9;
    font-size: 20px;
    margin: 0 0 20px -10px;
    padding: 0 0 5px 10px;
}

body.page-template-three-column-php #content h1 {
    width: 450px;
}

#content h2 {
    color: #333;
    font-size: 16px;
    margin-bottom: 10px;
}

body.home #content h2 {
    font-size: 14px;
    text-transform: uppercase;
    color: #28566B;
}

#content h3 {
    font-size: 16px;
    margin-bottom: 20px;
}

#content p {
    line-height: 140%;
    margin-bottom: 20px;
}

#content ul, #content ol {
    line-height: 140%;
    margin-bottom: 20px;
}

#content ul, #content ol {
    padding-left: 30px;
}
#content .column ul {
	padding-left: 0;
}

#content .column {
    float: left;
    width: 400px;
    padding: 20px;
}

#content a:hover {
    color: #000;
}

body.search #content .hentry, body.category #content .hentry, body.archive #content .hentry {
    clear: both;
    border-bottom: 1px dotted #CCC;
    padding-top: 10px;
}

#content .search {
    clear: both;
    float: left;
    border: 1px solid #708091;
    background: #354658;
    color: #FFF;
    padding: 10px 14px;
}

#content .search input[type=text] {
    float: left;
    font-size: 11px;
    width: 278px;
    height: 22px;
}

#content .search input[type=image] {
    float: left;
    width: 20px;
    height: 22px;
    margin: 0;
    padding: 0;
}

body.search #content > h1 {
    margin-bottom: 0;
}

#wp_page_numbers {
    margin-top: 0 !important;
}

#wp_page_numbers ul {
    float: right;
    border-top: none !important;
    width: auto !important;
    margin: 0 auto !important;
}

#wp_page_numbers a:hover {
    border-top: 2px solid #000 !important;
    color: #000 !important
}

#wp_page_numbers li.active_page a:hover {
    border-top: 2px solid #666 !important;
    color: #666 !important
}

/*** Homepage ***/

#content ul.events {
    font-family: Aria;
    font-size: 11px;
    line-height: 120%;
    margin-bottom: 0;
    padding: 0 20px 15px 0;
    position: relative;
}

#content ul.events a.more {
    color: #4695B9;
    font-size: 11px;
    text-decoration: underline;
    position: absolute;
    bottom: 10px;
    right: 80px;
}

#content ul.events a.more:hover {
    color: #35728E;
}

#content ul.events li {
    margin-bottom: 5px;
}

#content ul.events h3, #content ul.announcements h3 {
    font-family: Georgia;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    margin-bottom: 5px;
}

#content ul.events h3 a {
    color: #666;
}

#content table#wp-calendar {
    border: none;
    font-family: Arial;
    width: 260px;
}

#content table#wp-calendar td {
    border: 1px solid #FFF;
    background: #EEE;
    text-align: left;
    vertical-align: top;
}

#content #wp-calendar #todayWidget {
    border-radius: 0 0 0 0 !important;
    -moz-border-radius: 0 0 0 0 !important;
    border-width: 2px !important;
}

#content table#wp-calendar td.pad, #content table#wp-calendar td#prev, #content table#wp-calendar td#next {
    border: 1px solid #FFF !important;
    background: #FFF;
}

#content #calendar_wrap span {
    visibility: hidden !important;
}

#content #calendar_wrap table span {
    visibility: visible !important;
}

#content table#wp-calendar td#EC_loadingPane img {
    display: none !important;
}

#content #calendar_wrap span.EC-tt-widget-clickdate {
    color: #0099FF !important;
}

#content #calendar_wrap #EC_previousMonth:hover {
    color: #000 !important;
}

#content #calendar_wrap #EC_nextMonth:hover {
    color: #000 !important;
}

.tooltip {
    border: 1px solid #CCC;
    background: #FFF;
    padding: 5px;
}

.tooltip .EC-tt-widget-day-event-detail {
    margin-left: 5px;
}

#content ul.announcements h3 a {
    color: #4695B9;
}

#content ul.announcements {
    color: #999;
    line-height: 120%;
}

#content ul.announcements img {
    width: 100% !important;
    height: auto !important;
}

#content ul.announcements li {
    margin-bottom: 10px;
}
#content ul.announcements p {
	display: inline;
}
#content ul.announcements .excerptlink {
	display: inline;
}
#content ul.thumbnails li {
    float: left;
    width: 220px;
    height: 200px;
    margin: 0 5px 20px;
    position: relative;
    overflow: hidden;
}

#content ul.thumbnails li h3 {
    background: #666;
    color: #FFF;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    /*line-height: 40px;*/
    width: 220px;
    /*height: 40px;*/
    position: absolute;
    bottom: 0;
    /*New*/
    font-size: 14px;
    z-index: 0;
    padding: 10px 0;
    margin-bottom: 0px;
}

#content ul.thumbnails li a img {
    position: absolute;
}

body.page-template-active-php #content ul.thumbnails li:hover h3 {
    background: #006100;
}

body.page-template-active-php #content h1 {
    color: #009F1E;
}

body.page-template-retired-php #content ul.thumbnails li:hover h3 {
    background: #2272C1;
}

body #content ul.thumbnails li:hover h3 {
    background: #4695B9;
}


/*** Sidebar ***/

#sidebar {
    float: left;
    width: 230px;
    margin: 0 10px;
    padding-top: 10px;
    position: relative;
}

#sidebar ul li {
    padding-top: 20px;
    position: relative;
}

#sidebar h2, #sidebar2 h2 {
    color: #4695B9;
    font-size: 14px;
    font-style: normal !important;
    text-transform: uppercase;
}

#sidebar h2 a, #sidebar2 h2 a {
    color: #4695B9;
}

#sidebar h2 a:hover, #sidebar2 h2 a:hover {
    color: #000;
}

#sidebar .subpages {
    margin-bottom: 50px;
}

#sidebar .subpages h2 {
    border-bottom: 3px solid #E2DED6;
    color: #000;
    font-size: 18px;
    font-style: italic;
    text-transform: none;
    margin-bottom: 5px;
    padding: 0 0 5px 10px;
}

#sidebar .subpages h2 a {
    color: #000;
}

#sidebar .subpages li {
    border-top: 1px dashed #CCC;
    padding: 6px 0 5px 10px;
    position: relative;
}

#sidebar .subpages > ul > li:first-child {
    border-top: none;
}

#sidebar .subpages li a {
    color: #4695B9;
}

#sidebar .subpages li a:hover {
    color: #000;
}

#sidebar .subpages li.current_page_item a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

#sidebar .subpages ul ul li {
    margin: 5px 0 0 -10px;
    padding-left: 20px;
    padding-bottom: 0;
}

#sidebar .subpages a.toggle {
    display: block;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    width: 10px;
    line-height: 16px;
    height: 19px;
    position: absolute;
    top: 4px;
    left: -2px;
    outline: none;
}

#sidebar .subpages ul.children {
    display: none;
    margin-bottom: 0;
}

#sidebar2 {
    float: right;
    background: url(images/shadow2.png) 0 -80px no-repeat;
    width: 230px;
    padding: 10px 0 0 10px;
    margin-right: 10px;
    position: relative;
}

#sidebar2 .actions {
    border-bottom: 3px solid #E2DED6;
    color: #999;
    font-size: 16px;
    font-style: italic;
    height: 24px;
    margin-bottom: 10px;
}

#sidebar2 .actions a {
    color: #999;
    margin-left: 10px;
}

#sidebar2 .actions a:hover {
    color: #000;
}

#sidebar2 > ul > li {
    clear: both;
    margin-bottom: 20px;
}

#sidebar .bucket, #sidebar2 .bucket {
    font-style: italic;
    margin-bottom: 30px;
}

#sidebar .bucket img, #sidebar2 .bucket img {
    display: block;
    margin-bottom: 10px;
}

#sidebar .mobile-about {
    display: none;
    background: url(/wp-content/themes/sfers/images/mobile-menu-blue.png) center no-repeat;
    width: 35px;
    height: 22px;
    cursor: pointer;
    margin: -2px 15px 0;
    float: right;
}

/*** Images ***/

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.aligncenter {
    display: block;
    margin: 0 auto;
}

/*** Footer ***/

.container_bottom {
    clear: both;
    background: #35728E;
    width: 100%;
}

.quick_links {
    clear: both;
    float: left;
    background: #4695B9;
    max-width: 980px;
    margin: 0 auto;
}

.container_bottom .quick_links {
    background: #455E76;
}

.quick_links .alignleft {
    width: 230px;
    padding-top: 45px;
}

.quick_links .alignleft img {
    display: block;
    margin: 0 auto;
}

.quick_links .alignright {
    background: url(images/shadow2.png) 0 10px no-repeat;
    padding: 20px 0 20px 15px;
    position: relative;
}

.container_bottom .quick_links .alignright {
    background-position: 0 -180px;
}

.quick_links .alignright ul {
    float: left;
    line-height: 200%;
    width: 100%;
}

.quick_links .alignright li {
    float: left;
    width: 33%;
}
@media (max-width: 767px) {
	.quick_links .alignright li {
		width: 50%;
	}
}

.quick_links a {
    color: #FFF;
}

.quick_links a:hover {
    text-decoration: underline;
}

.partners {
    background: #FFF;
    max-width: 980px;
    height: 90px;
    padding-top: 20px;
    margin: 0 auto;
}

.partners li img {
    margin-left: 40px;
    margin-right: -40px;
    margin-top: auto;
    margin-bottom: auto;
}

.partners li a img:hover {
    opacity: 0.7
}

.partners li {
    float: left;
    text-align: center;
    /*width: 16%;*/
    width: 19%;
}

.partners .affiliate {
    clear: both;
    background: #FFF;
    width: 212px;
    height: 60px;
    padding-top: 20px;
    margin: 0 auto;
}

.partners .affiliate img {
    margin-right: auto;
    margin-left: auto;
}

.container_bottom .copyright {
    clear: both;
    background: url(images/container_bottom.png) 0 0 no-repeat;
    color: #58A3FF;
    font-family: Georgia;
    font-size: 14px;
    text-align: center;
    margin: 0 auto;
    padding: 30px 0 20px;
}

#footer {
    clear: both;
    background: #28566B;
    color: #FFF;
    text-align: center;
    width: 100%;
    position: relative;
}

#footer .footer_ctn {
    font-family: Georgia;
    font-size: 14px;
    max-width: 980px;
    margin: 0 auto;
    padding: 25px 0 30px;
    position: relative;
}

#footer a {
    color: #FFF;
}

#footer a:hover {
    text-decoration: underline;
}

#footer .links {
    text-transform: uppercase;
    margin-bottom: 10px;
}

#footer .copyright {
    color: #CCC;
}

.GoogleMap {
    float: right;
    position: absolute;
    margin-top: 60px;
    margin-left: 650px;
}

.bucket_arrows img {
    float: right;
}

.checkbox {
    word-spacing: 1em;
}

.page-id-2112 #content h2 {
    color: #3399CC;
}

span.wpcf7-list-item {
    display: block;
}

/* new styles */

.blue {
    color: #4695B9 !important;
}

.page-id-2152 #content .w450 p {
    margin-left: 30px;
}

#content .thumbnails {
    padding-left: 0;
}

body.page #content .thumbnails li {
    padding-bottom: 0;
}

body.page #content li {
    padding-bottom: 5px;
}

body.page #content p img {
    padding: 5px 10px;
}

body.page #content table tr td {
    padding: 5px;
}

body.page #content table {
    margin-bottom: 10px;
}

body.page #content small {
    font-size: 11px;
}

.wpcf7 input[type="text"], textarea {
    border: 1px solid #E2DED6;
}

.ui-dialog {
	background: #344557 !important;
	min-width: 325px;
}
.ui-dialog-titlebar {
	background: #fff !important;
	color: #344557 !important;
}
.ui-dialog-titlebar-close span {
	margin: -8px 0 0 -8px !important;
}
.ui-dialog-content {
	color: #fff !important;
	font-size: 14px !important;
}
.ui-dialog-content p {
	padding-top: 5px;
}

.page-template-page-login-php .memberContainer input[type="password"] {
    background: #FFF url("images/member/password-bg.gif") no-repeat 6px 7px;
}
.page-template-page-login-php .memberContainer select {
	color:#333;
	font-size: 11px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#wp-calendar th {
    background-color: #4695B9 !important;
}