@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
/* ====================================================
  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; 
}
.no-js #navBar {
	background-color: #2c597e;}
.desktop-view  {
	background: url('../images/green.gif') top left repeat-x #fff;
}

.desktop-view  #wrap2{
	position:absolute;
	top:145px;
	left:0px;
	width:100%;
	z-index:-90;
	height:800px;
	min-width:1150px;
	background:url('../images/document.jpg') no-repeat top center #fff; 
}

a:link:active { color: #1263be;}
a:link:hover { color: #1263be;}
a:link { color: #02397c;}
a:link:visited, a:visited { color: #1263be;}

/* 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 ,
#SearchForm p.littleLink { 
	font-family: "Source Sans Pro";
	color:#90699f;
}

input.color { 
	background:#90699f; 
	color:#fff; 
}

input.color:hover {  
	background:#90699f; 
}

input.color, #AdvancedSearch, #savealert2  {
	border: 1px solid #90699f; 
}
 
#searchHeader, #tocHeader {padding-top:8px;}
#searchHeader, #tocHeader, #printSaveToggle {
	background: #2c597e;
	background: #7ec4a0;
    color: #FFFFFF;
	
	background-color: #7dc4a0;
    background-position: left top;
    background-repeat: no-repeat;
    border-color: #abe1c6;
    border-style: solid;
    border-width: 4px;
	color: #438a66;
	font-family: "Source Sans Pro";
}

/* for the expandable search options box */
#AdvancedSearch {
	z-index:99;
	color:white;
	background:#2C597E;
}

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

#SearchResults, #browseCode {  
	background-color: #78a3b7;
	}

#cityname, #codification, .codified, .cpc {color:#90699f;}
#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{ 
	color:#78a3b7 ; 
	color:#90699f ; 
}

#leftSidebar p,
#leftSidebar a,
#formControls a, #leftSidebar a.file  {color:white}
 
  
/* ==== FONTS ==== */

html, body {	
	font-family: Arial, sans-serif;
}

#SearchResults div, #browseCode div {
	font-family: 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 { 
	font-size: 8pt;  line-height: 10pt;
}

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,
#SearchForm p.littleLink, #hitcount {
	font-size:14px;
}

#searchHeader, #tocHeader, #printSaveToggle {
	font-size:17px;
}

.desktop-view #SearchDiv {float:right;}
.desktop-view #desktopHide {display:none; }

#SearchForm p, #SearchForm label {font-size:1em;}

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

 #wrapper,#navBar  {
	min-width:780px; /* prevent stuff from getting jumbled up if the user shrings the window */
/* settings for fixed width:*/
	width:1150px;
	margin:0px auto;		
}
#mainBody {background:white;}
.desktop-view #navBar {
    height: 120px;
	/* 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:120px;
	overflow:auto; */
/* settings for fixed width: */
	float:left; 
}

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


/* 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 { }
#cityDiv {float:left; }
.no-js #cityDiv {display:none;}
#cityLinks a {
font-family:"Source Sans Pro";
font-size:20px;
text-decoration:none;
 padding: 0.7em;
 margin-left:15px;
 padding-top:5px;
 color: #77a2b7;
 border-bottom:4px solid #fff;
	display:block;
	float:left;
}
#cityBanner {float:left; margin-top:15px;}
#cityLinks a:active,#cityLinks a:hover {
text-decoration:none;
	border-color: #90699f ;
}

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

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

h1.cityCodeName {
	float:left;
	text-align:left;
	padding:0;
	margin:0 0 0 10px;
	line-height:50px;
	font-size: 26px;
}

.no-js h1.cityCodeName * {color:white;}
.no-js h1.cityCodeName {
	width:100%;
	background:#7ec4a0;
	font-size: 26px;
	line-height: 34px;
	margin:0px;
	
}
.desktop-view h1.cityCodeName {
	margin-left:16px;

	font-size: 36px;
	margin-top:31px;

}

.desktop-view #formInputsInner{
	background:#77a2b7;
	padding:7px;
	display:block;
}

#formInputs{
	float:right; 
	margin-top:15px;
	clear:right;
	text-align:right;
	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 {

	padding:4px 0;
	text-align:left;
	font-weight:bold;
	margin:0;
}

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

.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}
#crumbs { float:left; width:60%;  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: 283px;
}
.desktop-view #SearchForm #request {  
	background:#77a2b7;
	color:white;
	border:0px;
}

/* Styles the  navigation links */
#codetabs{
  	display: block;
	font-weight:bold;
	float:right;
	padding-top:24px;
	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; z-index:999;}
#leftSidebar.sticky { position: fixed;  top: 0px; z-index:999;}
.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 */

.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*/
#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:200px; margin-left:25px;}
#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 {
    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; }
.hide {display: none; }


/* 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: 1em auto;
    max-width: 500px;
    padding: 0.5em;
    text-align: center;
}


#mainBodyInner {width:100%; padding-top:0.7em;}
/* ================================================ */
/* =========        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%; padding-top:6px; }
.no-js #formInputs a { color:white; }
.no-js #formInputsInner { display:inline }
.no-js #formInputs input { margin:5px; clear:none; float:left;}
.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:auto;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{margin:0;padding:0;background:white !important; width:100% !important; }
	#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; }

}