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

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

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


 #navBar   {  
	color:white;
	background:#2c597e; 
	height:auto;
}
input.color:hover {  
	color:white;
	background:#237921; 
}
input.color:hover, #navBar  h1, #navBar  h1 a, #codetabs * { 
	color:white;
}
input.color { 
	background:#4db84a; 
	color:#fff; 
}

input.color, #AdvancedSearch, #savealert2  {
	border: 1px solid #4DB84A; 
}

h1#cityname, #codification, .codified, .cpc,
#Manage, #ScopeManage legend, a#help,
a.toggleSearch:hover, a.toggleSearch,
.no-js #divTOC p.resultLink:hover a,
.no-js #divTOC p.resultLink a:hover, 
.no-js p.resultLink:hover,
#formControls a, #divTOC a.file { 
	color:#2c597e; 
}
  #divTOC a {color:black}
/* ==== FONTS ==== */

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

#SearchResults div, #browseCode div {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}


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

#divTOC p,#cluetip, #cluetip p, #cluetip h3, .revised, .updated { 
	font-size: 8pt !important;  line-height: 10pt;
}

#navBar h1 {
	float:left;
	font-size: 14pt;
}

input.color, fieldset.options{
	font-size:11px;  
}

#SearchForm input.color, .pdf, #crumbs, #searchtabs, #formControls a ,
#AdvancedSearch select, #AdvancedSearch select option, #AdvancedSearch legend { 
	font-size:12px; 
}

#codetabs {
	font-size:13px;
}

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


/* ==== SOME LAYOUT STUFF ==== */

/* First, the widths */
 #wrapper, #topBanner, #navBar  { min-width:700px; } /* 2px difference because they don't have borders */
#divTOC { 
	width:278px;
	float:left;
	clear: left;
    float: left;
    padding: 0;
	background:none;
	padding-top:60px;
	}
#SearchResults, #browseCode {  border-left: 5px solid #7094b4; border-right: 1px solid #7094b4;}
span.hide, span.ajx {font-size:13px;font-weight:bold}
body { background:url('../images/back.jpg') top left no-repeat #FFFFFF;}
#topBanner {
/* this div will disappear in mobile view. Style for a big picture banner*/
/*	margin:0px auto;
	min-height:60px; */
}
#SearchDiv ,
#mainBody {
	margin-right:30px;
	clear:right; 
	margin-left:300px;
}


#wrapper {
	margin:10px auto 1em auto;
	border-top:0px;
}

#navBar h1 a:hover{ text-decoration:none;}
#navBar h1 {
	text-align:left;
	padding:0;
	margin:0 0 0 10px;
	line-height:50px;
}
	
#navBar {
    height: 50px;
	margin:0px 0 0 140px;
	clear:both;
}

a#cityName{  }
#cityName img { }
#cityLinks {  }
#cityLinks a { }


/*==============================================================*/
/*=====  Assorted defaults that you shouldn't have to change ======*/
/*=====  except in the weird special cases that always happen ======*/
/*==============================================================*/
 
html, body {
	padding:0;
	margin:0;
	text-align:center;
}

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

}
a.skip:focus {	position:static; }

.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;  }

#SearchForm p.littleLink {
	text-align:right;
	width:100%;

	float:right;
	margin:5px 0 5px 0;
	clear:both;
}
a.toggleSearch{
	text-decoration:none;
	font-weight:bold; 
}

input.color { -webkit-appearance: none;}


#SearchForm {display:inline;}
#formInputs{
	float:right; 
	margin:5px; 
	clear:right;
	text-align:right;
	border:0;
	}


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

span.click, span.end {
    cursor: pointer;
}
#AdvancedSearch, #AdvancedSearch p , #AdvancedSearch legend {color:white;}
div.popLabel { display:inline}
#AdvancedSearch select, #AdvancedSearch select option {color:black !important; }
#SearchResults div, #browseCode form{
	margin:10px;
}
.hideMe {display:none;}
#searchToggle:hover, #tocToggle:hover, #closePDF:hover, #searchRemove:hover, .toggleSearch { cursor:pointer;}
#searchRemove { float:right;margin-right:5px;}
#searchHeader {border-bottom:1px solid white; text-indent:7px;}
#tocHeader {border-bottom:1px solid white; text-indent:20px;}
#searchHeader, #tocHeader, #printSaveToggle {
	width:100%;
	padding:4px 0;
	text-align:left;
	background: none repeat scroll 0 0 #7094b4;
    color: #FFFFFF;
	font-weight:bold;
}

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


#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: 250px;
}


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

#codetabs span { 
	padding:0px 10px; 
	text-align:left;
}

#searchtabs {
  	display: block;
	text-align: left;
	font-weight:bold;
	width:690px;
	background:#3D3D3D;
	padding:5px 0px;
	margin-left:10px;
	white-space:nowrap;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	
}
#searchtabs  span#hitcount {color:yellow; }
#searchtabs span {
	padding:0px 10px;
	text-align:left;
	color:#fff;
}
.sticky {  position: fixed;  top: 0;}
.revised { color:blue; font-weight:normal; background:yellow; padding:0px 2px;  }
.updated { color:#FF0000; font-weight:normal; background:yellow; padding:0px 2px;}


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

#divTOC a, #navBar a  { text-decoration: none; }
#divTOC a:hover, #navBar a:hover { text-decoration: underline; }

/* =============================== */
/*Some TOC styles */

.hide { display:none; }
span.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*/
.ptoc p input { height:1.2em; vertical-align:middle; margin-right:4px; }

.ptoc p {	
	margin: 3px; 
	margin-left:3.3em; 
	text-indent: -3.3em; 
	 
}
.ptoc div { margin-left:1em; }

/* =============================== */
/* Search Form styles */
#formControls {
	margin: 0;
	padding: 0;
}
#formControls a { 
	padding-left:6px;
}
#formControls p { 
	text-indent:0; 
	margin-left:0;
}
#formControls div{
	padding:0.5em;
	margin: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: 0em auto; display:block; }
#SearchForm p, #SearchForm label {font-size:1em;}
a#clearAll {display:block; text-align:center;}

fieldset.scope { border:0px; display:inline; }
.scope legend { text-align:center; width:190px; }
fieldset.options{ border:0px; padding:0.5em; font-weight:normal; text-align:left; float:left; width:200px; margin-left:25px;}
#Manage { border:0px; 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: 0em 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 !important; position:absolute;
	top:0px; left:0px; z-index:300;
	width:100%; height:100%;
	margin:0px; padding:0px;
	text-align:center; background:#ffffff;
}

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

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

/*======= 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:4px 2px;margin:0px;} 
#divTOC p.resultLink:hover a {color:white}

#divTOC 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*/
body#search * { margin: 0; padding: 0;}
body#search #CodeName { height:80px;	}
body#search #CodeName , body#search #navBar, body#search #wrapper {  margin:0 auto;}
body#search #navBar h1 {padding:10px; line-height:1em;}
body#search #content {padding:1em;} 
body#search h2 {  text-align:left;	margin:1em;}
body#search p {  text-align:left;	margin:1em;}
body#search label {  font-weight:bold}
body#search fieldset.options {
	font-size:12px;
	display:block;
	width:25%;
	margin-left:5%;
	float:left;
	min-width:200px;
}
body#search a.boldLink {font-weight:bold; font-size:12px;float:right;margin-right:1em;}
body#search form {text-align:left;}
body#search .help p {font-size:11px;}

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


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;
}



/* ================================================ */
/* =========        MOBILE STYLES       =========== */

body.no-js{ background:white;}
.no-js .ptoc a { padding:0.5em 0;}
.no-js .ptoc p {
	padding:0.5em;
	text-indent:0;
	margin:1em 0;
	border-bottom:1px solid #ddd;
}
.no-js .ptoc .ajx, .no-js .ptoc .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 #divTOC {
	width:100%;
	float:left;
	clear:left;
	margin-top:0px;
	padding:0px;
	background: transparent;
    border: 0px;
}

.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 #mainContent {margin:1em;padding:0 0 1em 0;}
.no-js #topBanner, .no-js #codetabs {display:none !important;}
.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:0em; 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 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:0px; }

.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:0px  !important; }
	#searchtabs, #codetabs, #SearchForm, #navTop, #navBottom, .pdf, #navBar, 
	#divTOC, #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; }

}



#swapFormat {
    background: none repeat scroll 0 0 white;
    border: 1px solid #ccc;
    margin: 1em auto;
    padding: 4px;
    text-decoration: none;
}