/* ====================================================
  FOR MOST CUSTOM INTERFACES,  
 it should be enough to modify this stuff up top  
==================================================== */

/* ==== COLORS ==== */
html, body { margin:0; padding:0;}
body {
	color: #333333; 
	background:#fff; 
}

#navBar   {  
	background:#244c74; 
}

.desktop-view #navBar {
	background: transparent; 
}

.desktop-view {
	background:url('../images/navback.gif') repeat-x top left #fff; 
}
.VALIDATEME {
	/* DO NOT DELETE!! */
	background:url('../images/bookmark.png') repeat-x top left #fff; 
}

a:link:active { color: #ae4e09;}
a:link:hover { color: #ae4e09;}
a:link { color: #dc6712;}
a:link:visited, a:visited { color: #ae4e09;}

/* all text inside #navBar - because of link defaults, these have to be set explicitly */
 a.cityCodeName, a.cityCodeName:hover, a.cityCodeName:visited, 
 a.codetab, span.codetab  { 
	color:white;
}

input.color { 
	background:#355b80; 
	color:#d8e2ed; 
}

input.color:hover {  
	color:#355b80; 
	background:#d8e2ed; 
}

input.color, #AdvancedSearch, #savealert2  {
	border: 1px solid #355b80; 
}
 
#searchHeader, #tocHeader, #printSaveToggle {
	background: #d8e2ed;
    color: #355b80;
}

/* for the expandable search options box */
#AdvancedSearch {
	color:white;
	background:#355b80;
}

/*in IE, the <legend> element needs to have its color styled explicitly*/
#AdvancedSearch legend { color:white; }

#SearchResults, #browseCode { 
	background:#e0e8f0;
}

#cityname, #codification, .codified, .cpc,
#Manage, #ScopeManage legend, #help,
a.toggleSearch:hover, a.toggleSearch,
.no-js #leftSidebar p.resultLink:hover a,
.no-js #leftSidebar p.resultLink a:hover, 
.no-js p.resultLink:hover,
#formControls a, #leftSidebar a.file, 
#leftSidebar a#viewAllResults { 
	color:#355b80; 
}

#leftSidebar a {color:black}
 
  
/* ==== FONTS ==== */

html, body {	
	font-family: 	"museo-sans-rounded",​ Arial, sans-serif;
}

#SearchResults div, #browseCode div {
	font-family: "museo-sans-rounded",​Tahoma, Verdana, Arial, sans-serif;
}


/* and some font sizes that you might want to change */
/* if you were using different fonts */

#leftSidebar p, .revised, .updated, #viewAllResults  { 
	font-size: 9pt;  line-height: 11pt;
}

#SearchForm p, #SearchForm label,
input.color, fieldset.options {
	font-size:11px;  
}

#SearchForm input.color, .pdf, #crumbs, #searchtabs, .clearSaveAsForm,
#AdvancedSearch select, #AdvancedSearch select option, #AdvancedSearch legend,
#cluetip, #cluetip p, #cluetip h3 { 
	font-size:12px; 
}

#codetabs {
	font-size:13px;
	font-weight: 300;
	text-transform: uppercase;
}

#SearchForm p.littleLink,#searchHeader, #tocHeader, #printSaveToggle, #hitcount {
	font-size:14px;
}

h1.cityCodeName {
	font-size: 19px;
}


/* ==== SOME LAYOUT STUFF ==== */
/*  THIS IS WHERE YOU CHANGE FIXED/FLUID WIDTH! */

/* DO NOT CHANGE THIS ONE*/
#wrapper { min-width:700px; } 
/* OK to change, depending on what you have to fit in navbar/banner area */
 #navBar { min-width:965px; }

.desktop-view #navBar, 
.desktop-view #wrapper {
/* settings for fixed width:
	IMPORANT to use max-width so #wrapper can fit a small window 	*/
	max-width:1370px;
	margin:0px auto;
	padding: 0 5.3%;
}

.desktop-view #navBar {
    height: 210px;
	/* settings for fluid width 
	position:fixed;
	top:0px;
	left:0px;
	width:100%;*/
}

/* wraps around both the TOC and the search results (when they appear) */
.desktop-view #leftSidebar { 
	width:278px;
/* settings for fluid width
	position:fixed;
	height:100%;
	left:0px;
	top:190px;
	overflow:auto; */
/* settings for fixed width: */
	float:left; 
}

.desktop-view #wrapper {
/* comment this out for fixed-width; 
	margin-top:190px; */
}


/* These three divs will disappear in mobile view.
By default they are empty; fill/style for a big picture banner, links to pages of the City website, etc. */

#topBanner {
	float:left;display: block; width: 158px; height: 190; }
#cityDiv { }
#cityLinks { }

/* wraps around all content below #navBar */
/* you'll probably add colors/background for custom interfaces */
.desktop-view #wrapper {  }

 #mainBody {
	margin-right:30px;
	clear:right; 
	margin-left:300px;
}

h1.cityCodeName {
	float:left;
	text-align:left;
	padding:0;
	margin:0 0 0 10px;
	line-height:50px;
	text-transform: uppercase;
	font-weight:300;
}

.desktop-view h1.cityCodeName {
	margin-left:20px;
	margin-top:20px;
	float:left;
	font-size: 28px;
}

#formInputs{
	float:right; 
	margin-right:30px;
	margin-top:48px;
	clear:right;
	text-align:right;
	border:0; 
}
.desktop-view #SearchForm #request {
	border: 0px;
	color: white;
	background: #31577d;
	font-size: 1.1em;
	float:left;
	font-style:italic;
}
.desktop-view .imagebutton{ float:left}
.desktop-view #innerFormInputs{
	display: block;
	border-bottom: 3px solid #85b2de;
	height: 32px;
	margin-bottom: 10px;
}

.desktop-view #formInputs{
	text-align:left;
	border:0; 
}

/*==============================================================*/
/*=====  Assorted defaults that you shouldn't have to change ======*/
/*=====  except in the weird special cases that always happen ======*/
/*==============================================================*/
 
/* ensures that #wrapper extgends all the way around both #leftSidebar and #mainBody--
useful in fixed-width codes, where #wrapper may have a different background color from <body> */
#mainBody:after {
	content: "."; 
	display: block;
	height: 0; 
	clear: both; 
	visibility: hidden;
}

html, body {
	padding:0;
	margin:0;
	text-align:center;
}

a:link.skip {									
	position:absolute;
	left:-500em;
	text-decoration:none; 
	background: #000;	
	padding:4px;
	color:white;
	font-weight:bold;
}

a:link.cityCodeName:hover { text-decoration:none;}
a.skip:focus { left:0;}
.pdf { width:60%; font-weight:bold; float:left; 	margin:0.5em 1.5em; }
.no-js  div:after { content: ".";  display: block; height: 0;  	clear: both;  visibility: hidden; }

/* ClueTip CSS */ 

#cluetip b{ color:red;}
#cluetip h3 { font-weight:bold }
#cluetip{ padding:10px; background:#eee; border:1px solid black;}
#cluetip, #cluetip p, #cluetip h3{ color: #000 !important; text-align:left;  }

.cluetip-title {float:right; line-height:1em; margin:5px;}

#SearchForm p.littleLink {
	text-align:right;
	width:100%;
	margin:4px 0px 0px 0px;
}
a.toggleSearch{
	text-decoration:none;
	font-weight:bold; 
}

input.color { -webkit-appearance: none;}
form {display:inline;}


/* =============================================================== */
/* =========        Now some interface stuff!      =========== */

.click, .end { cursor: pointer; }
.popLabel { display:inline}
#viewAllResults, #noFilesMsg { display: block; }
#AdvancedSearch select, #AdvancedSearch select option {color:black ; }
#SearchResults div, #browseCode form{
	margin:10px;
}
.hideMe {display:none;}
#searchToggle:hover, #tocToggle:hover, #searchRemove:hover, .toggleSearch { cursor:pointer;}
#searchRemove { float:right;margin-right:5px;}
#searchHeader,#tocHeader {text-indent:10px;}
#searchHeader, #tocHeader, #printSaveToggle {
	width:100%;
	padding:4px 0;
	text-align:left;
	font-weight:bold;
	margin:0;
}

#AdvancedSearch {
	border-width:2px;
	border-style:solid;
	padding-top:5px;
	margin-bottom:10px;
	float:right;
	width:100%;
	z-index: 99;
}

.desktop-view #AdvancedSearch {
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.75);
    display: none;
    float: none;
    left: 0;
    position: absolute;
    top: 120px;
    width: 280px;
}

#navTop #crumbs a:hover {text-decoration:underline}
/*for fixed-width codes */
#navTop #crumbs { float:left; width:60%;  text-align:left;} 
/*for fluid-width codes */
#navBar #crumbs {
	/*
	margin-top:65px;
    margin-left: 140px;*/
    position: absolute;
    top: 150px;
    left: 220px;
	padding-right:10px;
    height: 55px;
    overflow: hidden;
    text-align: left;
}
#crumbs div {margin-left:1em;}

#SearchForm #request {  
	border: 2px solid #D5D5D5;
    height: 20px;
    line-height: 20px;
    margin: 2px 0 0 0;
    padding: 0;
    vertical-align: top;
    width: 250px;
}

/* Styles the  navigation links */
#codetabs{
  	display: block;
	float:right;
	padding-top:17px;
	margin-top:17px;
	white-space:nowrap;
}

.addspan, .codetab { 
	padding: 0 10px; 
}

#searchtabs {
  	display: block;
	text-align: left;
	font-weight:bold;
	width:100%;
	background:#3D3D3D;
	padding: 5px 0;
	white-space:nowrap;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;

}
#searchtabs  span#hitcount {color:yellow; }
#searchtabs span {
	padding: 0 10px;
	text-align:left;
	color:#fff;
}
#searchtabs.sticky {  position: fixed;  top: 0px;}
.revised { color:blue; font-weight:normal; background:yellow; padding: 0 2px;  }
.updated { color:#FF0000; font-weight:normal; background:yellow; padding: 0 2px;}


/* =============================== */
/* a bunch of TOC stuff */

#leftSidebar a, #navBar a  { text-decoration: none; }
#leftSidebar a:hover, #codetabs a:hover, span.click:hover { text-decoration: underline; }

/* =============================== */
/*Some TOC styles */
 
  #leftSidebar p.codeHead {
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
}
.hide { display:none; font-size:115%; font-weight:bold; } 
.ajx { margin-left: -0.12em; cursor: pointer; }
/*checkbox height must be specificed so IE doesn't make them huge
then vertical-align must be specifice so FireFox won't push them to the top of the line*/
#AdvancedSearch p { margin-bottom:0; text-indent: -2em; margin-left:2em;}
#AdvancedSearch p input,
#browseCodeInner p input { height:1.2em; vertical-align:middle; margin-right:4px; }
#browseCodeInner p {	
	margin: 3px; 
	margin-left:3.3em; 
	text-indent: -3.3em; 
}

#browseCode div  { margin-left:1em; }
#browseCodeInner   { margin-right:0.5em; }

/* =============================== */

#formControls {
	margin: 0;
	padding: 0;
}
.clearSaveAsForm { 
	padding-left:6px;
}
#formControls p { 
	text-indent:0; 
	margin-left:0;
}
#formControls div{
	padding:0.5em;
	margin:0.5em 1em 0.5em 0;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

input.color {
	margin:3px; 
	padding:1px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#ScopeManage legend { margin: 0 auto; display:block; }
#clearAll {display:block; text-align:center;}

fieldset.scope { border: 0; display:inline; }
.scope legend { text-align:center; width:190px; }
fieldset.options{ border: 0; padding:0.5em; font-weight:normal; text-align:left; float:left; width:240px; margin-left:15px;}
#Manage { border: 0; padding:0.5em;  float:left; width:200px; margin-top:0;}
.options legend { padding-top:0.5em; }
fieldset legend{	font-weight:bold; }

/* so that scope search checkboxes will be nicely formatted like the TOC */
p.i {  text-indent: -2.95em; 	margin: 0 0.5em 0.3em 3em; }
p.i input { height:1.2em; vertical-align:middle; }

/*  styles for the Saved Search alert -- these don't ever change */
#shadow {
	/* IE in quirks mode can't do position:fixed but it also ignores !important */
	position:fixed;
	top:0px; left:0px; z-index:300;
	width:100%; height:100%;
	margin: 0; padding: 0;
	text-align:center; background:#ffffff;
}

div.fadewrap {
	position:fixed;
	top:0px; left:0px; z-index:400;
	width:100%; height:100%;
	margin: 0; padding: 0;
	text-align:center; background:none;
}

div.fadewrap div {
	padding:1em;  margin:14em auto 0 auto;
	width:200px; 
	color:#000000; background: #ffffff;
}

#swapFormat {
	display:block;
	width:120px;
    background: white;
    border: 1px solid #ccc;
    margin: 1em auto;
    padding: 4px;
    text-decoration: none;
}

/*======= Search result styles =========*/
.NextLink, .PrevLink { margin: 0; font-weight: bold; width: 55px; }
.PrevLink {  float: left; }
.NextLink { float: right; }
.SearchSubTitle { text-align:center; font-weight: bold; }
p.resultLink { padding: 2px; margin:0;}
a.file {display:block; padding: 2px;} 
#leftSidebar p.resultLink:hover a {color:white}

#leftSidebar a.file:hover {text-decoration:none;}
p.resultLink:hover { background: none repeat scroll 0 0 #5C5C5C;  color: #FFFFFF; } 

.hit {background-color: #FFFF00; font-weight:bold; border:1px solid#FFFF00; }
.hitHere {border:1px solid red; }
a#viewAllResults {
	font-weight:bold;
	 cursor: pointer; 
}

#AdvancedSearch select, #AdvancedSearch select option {
	max-width:240px;
}


/* this is for the _form.html page that gets loaded sans javascript*/
.SimpleSearchHeader { 	margin:1em; font-size:16px;}
#search p { margin: 1em;}
.boldLink {font-weight:bold; font-size:12px; text-align:left;}

/*======= disclaimer! =========*/
#current { font-weight: bold; }
#disclaimer { margin-bottom: .5em; }
#pgFooter p { font-size:9pt; }
#pgFooter { margin:0.5em; }


p.errorMessage {
    background: none repeat scroll 0 0 #FFC0CB;
    border: 1px solid red;
    border-radius: 5px 5px 5px 5px;
    display: block;
    font-weight: bold;
    margin: 0em auto 1em auto !important;
    max-width: 500px;
    padding: 0.5em;
    text-align: center;
}


#mainBodyInner {width:100%;  padding-top:10px;}
/* ================================================ */
/* =========        MOBILE STYLES       =========== */

.no-js #browseCodeInner  { margin-top: 0;}
.no-js #browseCodeInner a { padding:0.5em 0;}
.no-js #browseCodeInner p {
	padding:0.5em;
	text-indent:0;
	margin:1em 0;
}
.no-js #browseCodeInner .ajx, .no-js #browseCodeInner .input  {float:left}

.no-js #wrapper, .no-js #topBanner, .no-js #navBar  { min-width:10px; }
 
 /* For the mobile view, largePrint class keeps track of whether this is the front-page TOC or not */
.no-js div.largePrint  {
	margin:1.5em 0;
}
.no-js div.largePrint a {
	font-weight:bold;
	font-size:1.3em;
	line-height:1em;
}
.no-js .ajx {
	font-weight:bold;
	font-size:1.8em;
	}
.no-js #leftSidebar {
	width:100%;
	float:left;
	clear:left;
	margin-top: 0;
	padding: 0;
	background:#fff;
}

.no-js #navBar {clear:both;}
.no-js #formInputs {min-height:30px;}
.no-js #navBar,  .no-js #wrapper ,  .no-js #mainBody,  .no-js #AdvancedSearch {width:100%; border:0; margin:0; }
.no-js #mainBodyInner {padding-top:5px;}
.no-js #mainContent {margin:1em;padding:0 0 1em 0;}
.no-js #topBanner, .no-js #codetabs {display:none;}
.no-js img {max-width:100%; height: auto;}
.no-js #navBar {height: auto; margin:0; }
.no-js input#request {max-width:80%;}

.no-js #formControls  {display:none;}
.no-js #formControls  * {font-size:12px !important; }
.no-js p.resultLink:hover { background: none ;  } 
.no-js #pgFooter div.right, .no-js #pgFooter div.left { float:none; margin-left:1em; width:auto;}
.no-js #pgFooter { padding-top:0; float:none; }
.no-js #SearchForm #request { width:auto; max-width:250px; }
.no-js #formInputs { margin:0; width:98%; }
.no-js #formInputs a { color:white; }
.no-js #formInputs input { margin:5px; clear:none; float:left;}
.no-js #formInputs input.color { margin-top: 0;}
.no-js #formInputs p.littleLink  { width:auto; padding: 0 10px; margin:0; font-size:28px; clear:none;line-height:30px;}
.no-js #formInputs p.littleLink  a {text-decoration:none;}
.no-js fieldset.options {width:200px; font-size:14px;}

.no-js #searchtabs { width:100%; margin-left: 0; }

.no-js #SearchDiv, .no-js  #mainBody { clear:both;  margin: 0; }
/*################ Print Stylesheet! ##################### */
/*Ensures that the document prints at the right font size and without nav buttons */

@media print {
	html,body,#wrapper, #mainBody, #mainBodyInner{
		margin:0;
		padding:0;
		background:white !important; 
		width:100% !important;
		box-shadow: 0px 0px 0px 0px !important;
		border:  0px 0px 0px 0px !important;
		}
	#swapFormat, #wrapper, #mainBody, #mainContent {border: 0  !important; }
	#searchtabs, #codetabs, #SearchForm, #navTop, #navBottom, .pdf, #navBar, 
	#leftSidebar, #topBanner, #pgFooter, #mainContent h3 a.addthis_button, #mainContent h3 img {
		display:none !important;
	}
	thead { display:table-header-group !important; }
	tbody {  display:table-row-group !important; }
	td,   tr{   background:white; }
	table.hovercraft {display:none !important;}
	img, td, tr { page-break-inside: avoid !important; }

}



/* ========  bookmark feature CSS ======== */
#overlay {
	position:fixed !important;
	position:absolute;
	top:30%;
	left:0;
	width:100%;
	display:none;
	height:1px;
	z-index:9999999999999;
}

#contentWrap {
	max-width:450px;
	margin:0px auto;
	background-color:#fff;
	padding:15px;
	text-align:center;
	border:2px solid #333;
	height:auto;
	border-radius:6px;
	-border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	box-shadow: 0 0 50px #ccc;
	-box-shadow: 0 0 50px #ccc;
	-webkit-box-shadow: 0 0 50px #ccc;
	-moz-box-shadow: 0 0 50px #ccc;
}
#contentWrap textarea {
	max-width:95%;}

#contentWrap #addthis_button { float:right;}
#contentWrap #addthis_button img{ border:0;}
#contentWrap textarea { margin:.75em auto;}

/* default close button positioned on upper right corner */
#overlay a.close {
	position:relative;
	top:15px;
	display:block;
	background:url('../images/close.png') no-repeat top right;
	cursor:pointer;
	margin:0px auto 0px auto;
	height:35px;
	max-width:515px;
}

p.Article:hover, p.Division:hover, h3.Cite:hover {background:#eee;}
#mainContent img.bookmarkIMG {
	margin:0px; padding:2px; float:right;
}
 img.bookmarkIMG:hover {
cursor:pointer;
}