/* CSS Document */
/* Branding Colors:
Blue:  #0039a6   RGB  000,057,166
Green: #58a618   RGB  088,166,024
Medium Gray: #929497  RGB  146,148,151
Orange:#e98300   RGB  233,131,000
Purple:#80379b   RGB  128,055,155
Cyan:  #007ac9   RGB  000,122,201
Yellow:#ffb612   RGB  255,182,018 
Default text color (CivicPlus site): #232323
Adjustments for ADA: 
--Green for text: #397508; Green for background: #468513 
*/
@import "boilerplate.css";
body { font-family:Arial, Helvetica, sans-serif; color:#232323; /* #14140c; */}
p, ul, ol, dl, dd, table, fieldset { margin-top:0; margin-bottom:1em; }
table, td, th { border:none; }
th, td { padding:.5em; vertical-align:top; text-align:left; }
th.center, td.center { text-align:center; }
th.right, td.right { text-align:right; }
blockquote, .indentedBlock { margin:1em 2em 1.5em; overflow:hidden; }
#printer_banner { display:none; }

#divMenu {
	width: auto;
	max-width: 1170px;
	min-height: 30px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: -30px;
}

.shadowBox {
	padding: 10px;
	border: 2px solid #e4e4e4;
	-webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
	box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.75);
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background: #fff;
	color: #232323;
	padding: 0em 2em 2em;
	margin-top: 0px;
	min-height: 200px;
}

/* ul, ol { overflow:hidden; } BULLETS DISAPPEAR IN IE 8! keeps bullets from bumping up against floated elements, like images */
h1, h2, h3, h4, h5 { margin-top:1em; margin-bottom:.5em; }
h2 + p, h3 + p, h4 + p, h5 + p, td h2, td h3, td h4, td h5 { margin-top:0; }
h2 + h3, h3 + h4, h4 + h5 { margin-top:.2em; }
p + ul, p + ol { margin-top:0; } /* -5em would work better, assumes preceding paragraph has margin-bottom:1em; */
li, dt { margin-bottom:.5em; }
li ul, li ol { margin-top:.5em; }
a:link, a:visited { color: #0039a6;/* #005dab #015cad; */ text-decoration:underline; }
a:hover, a:active { color: #005dab;/* #007ac9 not dark enought with zebra-stripe table row colors; replaced for ADA, was #58a618 */ text-decoration:none; }
a:focus { outline:2px dashed #80379b; padding:.25em; text-decoration:none; }
input:focus, textarea:focus, select:focus { outline:2px solid #80379b; }

/*#footer a:link, #footer a:visited { color:#363639; text-decoration:none; }
#footer a:hover, #footer a:active { color:#005dab;*//* #0039a6; */ /*text-decoration:underline; }*/


h1 { color:#3c3c39; font-weight:normal; font-size:1.8em; text-transform:uppercase; border-bottom:1px solid #e0dfdc; overflow:hidden; }
h2 { color:#005dab; font-weight:bold; font-size:1.5em; }
h3 { color:#397508; font-weight:bold; font-size:1.2em; }
h4 { color:#3c3d39; font-weight:bold; font-size:1em; }
h5 { color:#002264; font-weight:normal; font-style:italic; font-size:1em; }
h2.step { text-align:center; }
h2.warning, h3.warning, h4.warning { color:#990000; }

#simpleMain fieldset, #simpleMain p, textarea, div.extraInfo, div.important, div.sustainable, div.warning { max-width:64em; }
#simpleMain td fieldset, #simpleMain td p, td textarea { width:auto; }

/*  MAY NOT NEED appQuestions BUT KEEPING FOR LEGACY FORMS  */
#appQuestions { background:#fff; color:#232323; padding-top:1.5em; }
#appQuestions p { text-align:center; border-top:1px solid #929497; margin:0em; padding:1em .5em 1em; }
#appQuestions p.last { border:none; padding-top:0; }

div.pointerGroup { overflow:hidden; margin-bottom:0; }
div.pointerGroup + h1 { margin-top:.5em; }
div.pointerGroup + h2 { margin-top:0; }
span.pointer {color:#e98300; background:url(/graphics/pointerOrange.gif) center right no-repeat; padding-right:12px; margin-bottom:0; }
p.pointerRight, #simpleMain p.pointerRight { text-align:right; color:#e98300; background:url(/graphics/pointerOrange.gif) center right no-repeat; padding-right:12px; margin-bottom:0; max-width:99%; }
p.pointerRight + h1, p.pointerRight + h2 { margin-top:0; }
p.pointerLeft { text-align:left; color:inherit; background:url(/graphics/pointerOrange.gif) center left no-repeat; padding-left:12px; }
p.pointerRight a:link, p.pointerRight a:visited { color:#db7b00/* or b06300 updated for ADA, was #e98300 */; text-decoration:none; font-weight:bold; }
p.toTop { text-align:left; background:url(/graphics/pointerBlue_up.gif) top left no-repeat; padding-left:13px; }
p.pointerRight a:hover, p.pointerRight a:active { text-decoration:underline; font-weight:bold; }

/* 	================== BOXED MESSAGE AREAS ===============  */
p.warning, div.warning { border:2px solid #990000; background-color:#fff0cd; padding:.5em 1em; margin:.5em 0 1em; overflow:hidden; }
p.important, div.important, caption.important { border:2px solid #e98300; background:#fff; /* #fcf2ea; */ padding:.5em 1em; margin:.5em 0 1em; overflow:hidden; }
div.extraInfo, p.extraInfo, p.nonhtmlStyle { padding:.5em 1em; background:#fff; /* #f3fbfe; */ border:2px solid #007ac9; margin:.5em 0 1em; overflow:hidden; }
div.warning p, div.important p, div.extraInfo p { margin-top:.2em; margin-bottom:.2em; }
div.sustainable, p.sustainable { background:#fff; /* #f4fcee; */ border:2px solid #58a618; margin:.5em 0 1em; padding:.5em 1em; overflow:hidden; }
div.important h2, div.important h3 { margin-top:.5em; }
div.disclaimer, p.disclaimer { font-size:.8em; margin-top:2em; border-top:1px solid #929497; color:#333333; padding:.5em .5em 0; }

div.warning h2, div.warning h3, div.warning h4 { color:#990000/* color replaced for ADA, was #f00 */; margin-top:0; }
div.important h2, div.important h3, div.important h4 { color:#005dab; margin-top:0; }
div.extraInfo h2, div.extraInfo h3, div.extraInfo h4 { color:#007ac9; margin-top:0; }
div.sustainable h2, div.sustainable h3, div.sustainable h4 { margin-top:0; }

.highlightBlock { background:#d9e7f2; color:#222; padding:.5em 1em; margin:.5em 0 1em; overflow:hidden; }

/*  ================= FORMS - COMMON FORM STYLES ===============  */
input[type="button"], input[type="submit"], input[type="reset"] { margin:.2em; }
input.reset, input[type="reset"], input[type="button"] { background-color:#fff; color:#565658; font-weight:normal; padding:.5em; text-transform:uppercase; border-width:2px; border-style:solid; border-color:#dedfe0 #929497 #929497 #dedfe0; }
input.reset:hover, input[type="reset"]:hover, input[type="button"]:hover { border-color:#929497 #dedfe0 #dedfe0  #929497; }

input[type="submit"].primary, input[type="submit"].submit, input[type="button"].submit { background-color:#468513/* updated for ADA: #58a618 */; color:#fff; font-weight:bold; text-transform:uppercase; padding:.5em 2em; border-width:2px; border-style:solid; border-color:#64bd1b #2a4f0b #2a4f0b #64bd1b; }
input[type="submit"].primary:hover, input[type="submit"].submit:hover, input[type="button"].submit:hover { border-color:#2a4f0b #64bd1b #64bd1b #2a4f0b; }

input[type="submit"].secondary, input[type="submit"].continue, input[type="button"].secondary, input[type="button"].continue { background-color:#007ac9; color:#fff; font-weight:bold; text-transform:uppercase; padding:.5em 2em; border-width:2px; border-style:solid; border-color:#66afdf #004979 #004979 #66afdf; }
input[type="submit"].secondary:hover, input[type="submit"].continue:hover, input[type="button"].secondary:hover, input[type="button"].continue:hover { border-color:#004979 #66afdf #66afdf #004979; }

input[type="submit"].cancel, input[type="button"].cancel { background-color:#e20000; color:#fff; font-weight:bold; text-transform:uppercase; padding:.5em 2em; border-width:2px; border-style:solid; border-color:#ff5d5d #830000 #830000 #ff5d5d; }
input[type="submit"].cancel:hover, input[type="button"].cancel:hover { border-color:#830000 #ff5d5d #ff5d5d #830000; }

input[type="submit"].small, input[type="button"].small, input[type="reset"].small { padding:.2em .5em; }
input[type="submit"].reset.small, input[type="button"].reset.small, input[type="submit"].cancel.small,  input[type="button"].cancel.small { padding:.2em; }

h2.thankyou, h3.thankyou { color:#db7b00/* or b06300 updated for ADA, was #e98300 */; font-size:1.8em; }

p.updateSuccessful, div.updateSuccessful { background:#468513/* replaced for ADA, was #58a618 */; color:#fff; font-weight:bold; padding:.2em 1em .5em; margin:0 0 1em; text-align:center; overflow:hidden; }
p.updateSuccessful a, div.updateSuccessful a { color:#fff!important; }
p.deleteSuccessful, div.deleteSuccessful { color:#e20000/* replaced for ADA, was #ff0000 */; font-weight:bold; text-transform:uppercase; text-align:center; padding:.5em 1em .2em; border-bottom:1px solid #e20000/* replaced for ADA, was #ff0000 */; overflow:hidden; }

#ValSum, #valSum, .valSum, div.extraValSum { background:#fff8e7/* replaced for ADA, was #fff6db */; color:#e20000!important/* replaced for ADA, was #ff0000 */; border:1px solid #ffca05; font-weight:bold; text-align:left; padding:.5em; margin-bottom:1em; overflow:hidden; }
#ValSum ul, #valSum ul, .valSum ul, div.extraValSum ul { font-weight:normal; }
#ValSum a,  #valSum a, .valSum a { color:#e20000/* replaced for ADA, was #ff0000 */; font-weight:bold; }

form.color { margin:0 0 1em; padding:1em; background:#f3fbfe; border-width:1px; border-color:#bbdde7; border-style:solid; 
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-raduis:4px; 
}
form.color h2 { margin-top:0; }
form.color hr { display: block; height:1px; border: 0; border-top: 1px solid #007fc5; margin-bottom:1em; padding: 0; }

ul.buttonList { text-align:center; margin-bottom:.5em; list-style-type:none; }
ul.buttonList li, ul.buttonList li form { list-style-type:none; margin-left:0; padding-left:0; display:inline; margin-bottom:0; }
label { font-weight:bold; color:#3c3d38; /* #374972; */ }
fieldset label { font-weight:normal; color:#232323; }

/* These 2 styles are obsolete, have been replaced. */
span.MaxChar { color:#990000; font-size:.8em; }
span.CharLeft, label.CharLeft { font-size:.8em; }

/* TSE added 4/23/2015 - replace MaxChar and CharLeft - code layout should change, too! */
.maxChar { color:#990000; font-size:.85em; white-space:nowrap; padding-right:1em; }
.charLeft { font-size:.85em; white-space:nowrap; }
.charLeft input { width:2.5em; font-size:.85em; }
.charLeft label { float:none!important; font-weight:normal; }

span.formNote { display:inline-block; padding-left:.5em; font-size:.8em; color:#3c3d38; /* #374972; */ }
p.formNote, div.formNote { font-size:.8em; color:#3c3d38; /* #374972; */ }
span.formNoteRed { padding-left:.5em; font-size:.8em; color:#900; }
p.formNoteRed, div.formNoteRed { font-size:.8em; color:#900; }

input[type="checkbox"], input[type="radio"] { margin-right:3px; }
.radlist label { font-weight:normal; padding-right:10px; }
.radlistVertical td { font-weight:normal; padding-bottom:1em; }
.required { color:#e20000/* replaced for ADA, was #ff0000 */; }
label .required { font-weight:normal; }
fieldset { padding:.5em; border:1px solid #ccc;/* border spec for Chrome */ }
fieldset fieldset { border:none; margin-top:1em;  }
fieldset table { margin-bottom:0; }
legend { color:#3c3d38; /* #374972; */ font-weight:bold; /* removed 10/24/2017: padding-bottom:.5em; */}
legend.h2 { margin:0; color:#397508; font-weight:bold; font-size:1.2em; }
legend.h2 span.required { font-size:.85em; font-weight:normal; }
legend span.required { font-weight:normal; }
legend img { display:inline; }/* for required asterisk as image */
label.required, legend.required { color:inherit; font-weight:inherit; font-weight:bold; }
label.required:before, legend.required:before, .required label:before { content: "*"; color:#f00; font-size:1.2em; font-weight:bold; }

.approved { color:#397508; font-weight:bold; font-size:1.1em; }/* #58a618 #468513 */
.cancelled { color:#e20000/* replaced for ADA, was #ff0000 */; font-weight:bold; text-transform:uppercase; }
.denied { color:#e20000/* replaced for ADA, was #ff0000 */; font-size:1.1em; }
.red, .red label { color:#e20000/* replaced for ADA, was #f00 */; font-weight:bold; }
.emphasizered { color:#990000; font-size: 1.2em; font-weight: bold; }
p.emphasize, span.emphasize { background:#feebdc; padding:.2em; }
.bigText { font-size:1.2em; }
.colored_text { color:#007ac9; font-weight:bold; }
.citation { display:block; padding:0 1em; text-align:right; }
/* Example of use of citation class: 
	<span class="citation">&mdash;&nbsp;<cite>Mayor Denny Doyle, City of Beaverton</cite></span>  */
.extraInfo cite, .extraInfo .citation { color:#007ac9; font-weight:bold; }

/* =verfication block - details stand out more than labels */
.verifyBlock { font-weight:bold; font-size:1.1em; }
.verifyBlock label, .verifyBlock th { font-weight:normal; font-size:.85em; text-align:left; }

/* 	============== TABLE STYLES ======================= */
caption, .caption { background:#005dab;/* #0039a6; */ border-bottom:1px solid #fff; color:#ffffff; font-weight:bold; font-size:1.1em; text-align:center; padding:5px; }
caption span.highlight { color:#ffd571; font-weight:normal; }
caption.plain { background:none; border:none; color:#000; font-weight:bold; text-align:left; }


tr.alt1, td.alt1, div.alt1 { background:#eef6fa; /* #e5ebf6; */}
tr.alt3, td.alt3, tr.alt2, td.alt2, div.alt2 { background:#dfeff8; /* #ccd7ed; */}
tr.borderTop td, tr.borderTop th { border-top:1px solid #ccc; padding-top:.5em; }
table.layout td { padding:0; }
/* table.data { border-bottom:1px solid #005dab; overflow:hidden; } */
table.dataSimple th { border-bottom:1px solid #005dab; }
table.dataSimple td { border-bottom:1px solid #ccc; }
fieldset table td { padding-top:0; }

table.formSimple { border-bottom:1px solid #404040; border-top:1px solid #404040; border-collapse:separate; }
table.formSimple td, table.formSimple th { border-bottom:2px solid #fff; color:#333; background:#e5ebf6; }
table.formSimple th[scope="col"], tr.headerSimple th  { text-align:left; color:#404040; background:#fff; border-bottom:1px solid #005dab; }
table.formSimple.rowHeader th { text-align:right; color:#fff; background:#005dab; width:10em; }
table.formSimple.rowHeader caption { background:#fff; color:#333; border-top:1px solid #404040; border-collapse:separate; }

div.formSimple { background:#f2f5fa; border-bottom:1px solid #404040; padding:0 1em 1em; margin-top:1em; margin-bottom:2em; }
div.formSimple .caption { color:#fff; background:#005dab; font-weight:bold; margin-bottom:.5em; margin-left:-1em; margin-right:-1em; }

tr.emptyRow td { background:#fff; color:#333; border:2px solid #007ac9 !important; text-align:center !important; font-weight:bold; }
tr.emptyRow.tall td { background:#fff; color:#333; border:1px solid #007ac9 !important; text-align:center !important; font-weight:bold; padding:2em .5em; }
/*.footerRow { border-bottom:2px solid #005dab; background:#fff; color:#005dab; font-weight:bold; }*/
.emptyListView { display:block; margin:.5em 0 1em; border:1px solid #007ac9 !important; text-align:center !important; font-weight:bold; padding: .5em; }

/*  =============== IMAGES ====================  */
img.imageRight, img.imageLeft, img.imageBlock { background:#fff; border-width:1px; border-style:solid; border-color:#ddd #aaa #aaa #ddd; padding:2px; }
img.imageRight { float:right; margin:0 12px 24px 24px; }
img.imageLeft { float:left; margin:0 24px 24px 12px; }
/*  =============== IMAGE WITH CAPTION ==================
	Enclose img tag in div block with class=figure; caption enclosed in paragraph following the img.
	=====================================================  */
div.figure, figure { float:left; margin:0 24px 24px 0px; background:#fff; border-width:1px; border-style:solid; border-color:#ddd #aaa #aaa #ddd; padding:12px; }
div.figure.right, figure.right { float:right; margin:0 12px 24px 24px; }
figure.fullWidth { float:none; display:inline-block; }
div.figure p, figcaption { margin:.2em; font-size:.8em; text-align:center; }
a:link figcaption, a:visited figcaption { text-decoration:underline; }
a:hover figcaption, a:focus figcaption { text-decoration:none; }

/* Handling outline on links when link contains block level element like figure (now allowed under HTML5). */
a figure { float:none; margin:0; display:inline-block; }
a.floatBlockLeft { float:left; margin:0 24px 24px 0px; }
a.floatBlockRight { float:right; margin:0 12px 24px 24px; }

/* 	============== IMAGE IN DROPSHADOW ================ 
	Enclose img tag in div block with class=dropShadow190 image should be 190px wide 
	==================================================== */
div.dropShadow190 { background:url(/graphics/bg_dropshadow_190bottom.gif) bottom left no-repeat; }
div.dropShadow190 img {  background:url(/graphics/bg_dropshadow_190top.gif) top left no-repeat; padding:6px; }

/*  ============= MISCELLANEOUS =============== */
.hide { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
#skip a
{
padding: 6px;
	position: absolute;
	top: -40px;
	left: 0px;
	color: white;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	border-bottom-right-radius: 8px;
	background: transparent;
	-webkit-transition: top 1s ease-out, background 1s linear;
	transition: top 1s ease-out, background 1s linear;
	z-index: 100;
}
#skip a:focus
{
	position: absolute;
	left: 0px;
	top: 0px;
	background: #80379b; color:#fff; 
	outline: 0;	
	-webkit-transition: top .1s ease-in, background .5s linear;
	transition: top .1s ease-in, background .5s linear;
}