/* CSS Document supporting responsive web design */
body { background:#f3f3f3 url(/graphics/backgroundMain.png) repeat-x top center; padding-top:0; }
body.popup { background:#fff; padding:.25em 2% 1em; }
#banner, #footer {}
#banner { background:#fff; color:#363639; border-bottom:30px solid #005dab/* #0039a6 */; position:relative; min-height:160px; }
#footer { background:#f3f3f3 url(/graphics/footerBorder.png) repeat-x top center; padding-top:1.5em; clear:both; overflow:hidden; color:#363639; }
#footer.police { /* background-image:none; border-top:4px solid #434343; */}
#simpleMain, #ec_simple { max-width:1110px/* 1440px */; margin-left:auto; margin-right:auto; position:relative; background:#fff; color:#232323; padding:.5em 2em 2em; margin-top:20px; /* overflow:hidden; */min-height:450px; }
#appQuestions { max-width:1110px/* 1440px */; margin-left:auto; margin-right:auto; margin-bottom:2.25em; background:#fff; color:#232323; padding:.5em 2em 2em; }
#banner #top { max-width:1170px; position:relative; margin-left:auto; margin-right:auto; }
#banner h1 { background:#005dab; color:#fff; text-align:center; margin-bottom:-1.25em; margin-top:0; padding:.25em -.25em; border:none; }
header.appTitle #banner { border-bottom:none; min-height:130px; }
header.appTitle h1 { margin-top:0; margin-bottom:0; color:#fff; background-color:#005dab; text-align:center; text-transform:none; border:none; }
#footer h2 { color:#363639; margin-bottom:.2em; font-weight:normal; }
.bannerPhone { float:right; font-size:1em; margin-top:100px; margin-right:2em; font-weight:bold; }
ul.footerLinks { list-style:none; padding-left:0; margin-left:0; max-width:1170px; margin-left:auto; margin-right:auto; }
ul.footerLinks li { float:left; width:20%; padding-right:4.9%; /*  3 cols: width:28%; padding-right:5.2%; */}
ul.footerLinks li.doubleWide { float:left; width:45%; padding-right:4.9%; }
ul.footerLinks li ul.linkList{ list-style:none; padding-left:0; margin-left:0; }
ul.footerLinks li ul.linkList li { float:none; width:99%; padding-right:0; }
img.footerLogo { float:left; padding-bottom:10px; width:90px; max-width:25%; }
.imageContainer img { max-width:100%; height:auto; }
img.responsive { max-width:100%; height:auto; }
img.left { float:left; margin:0 1em 1em 0; }
img.right { float:right; margin:0 0 1em 1em; }

/*  ---- NAVIGATION - works with show/hide menu icon ----  */
.nav-mobile {
    display:none; /* Hide from browsers that don't support media queries */
    cursor:pointer;
    position:absolute;
    top:.5em; /* top:1.8em; */
    right:2%;
    background:#468513/* updated for ADA: #58a618 */ url(/graphics/menu_icon.png) no-repeat 10px center; 
    height:40px;
    width:100px/* made wider to accomodate "Menu" 40px */;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
.nav-mobile:after { content: "Menu"; display:block; padding-top:.5em; padding-left:40px; }

/* 	Overrides show/hide for menu in browsers that do not support document.querySelector (JavaScript).
	Add style to element dynamically:  document.getElementById('navMenu').className = "nav nav-display";  */
.nav-display, .nav-display .nav-list { display:block!important; }

/*  ----  FEATURE COLUMN STYLES - CAN USE FOR NAVIGATION  ---- */
#feature_col, 
.nav { float:right; max-width:40%; width:15em; overflow:hidden; margin:0 0 1.5em 5%; }
#feature_col h2, 
.nav h2 { background:#007ac9; color:#fff; text-transform:uppercase; text-align:center; font-size:1.2em; margin-top:0; padding:1em 0; }
#navMenu h2 { background:#007ac9; color:#fff; text-transform:uppercase; text-align:center; font-size:1.2em; margin-top:0; padding:1em 0; }
#navMenu h2 a:link, #navMenu h2 a:visited, 
#feature_col h2 a:link, #feature_col h2 a:visited { display:block; color:#fff; background:#468513/* updated for ADA: #58a618 */; text-decoration:none; margin:-1em 0; padding:1em 0; }
#navMenu h2 a:hover, #navMenu h2 a:active, 
#feature_col h2 a:hover, #feature_col h2 a:active { display:block; text-decoration:underline; background:#005dab; }

#feature_col ul, 
ul.nav-list { list-style-type:none; margin-bottom:.5em; margin-left:0; padding-left:0; }
ul.nav-list { margin-bottom:1em; }
#feature_col li, 
ul.nav-list li { border-bottom:1px solid #929497; }
ul.nav-list li ul.nav-list2 { list-style:none; padding-left:1em; margin:0; } 
ul.nav-list li ul.nav-list2 li { border-bottom:none; margin:0; }

#feature_col li a, #feature_col li p,
ul.nav-list li a, ul.nav-list li p { display:block; padding:0 0 .75em; margin:0; }
ul.nav-list li.button { border-bottom:none; }/* Assuming this will be the last item in ul.nav-list */
#navMenu { margin-top:1.8em; }

ul.col321, ul.col21 { clear:left; overflow:hidden; list-style:none; padding-left:0; margin-left:0; }
ul.col321 li.newRow, ul.col21 li.newRow { clear:left; }
ul.col321 li { float:left; width:30.8%; padding-right:2.5%; }
ul.col21 li  { clear:none; float:left; width:47.45%; padding-right:2.5%; padding-bottom:1em; }
.flex { float:left; width:auto; margin-right:2.5%; }
ul.flexColumns, ol.flexColumns { list-style:none; padding-left:0; margin-left:0; margin-bottom:1em; overflow:hidden; }
li.half, li.third, li.fourth, li.twoThirds, li.threeFourths { list-style:none; padding-left:0; margin-left:0; margin-bottom:1em; }
.half  { float:left; width:47.45%; margin-right:2.5%; }
.third { float:left; width:30.8%; margin-right:2.5%; }
.fourth { float:left; width:22.475%; margin-right:2.5%; }
.twoThirds { float:left; width:64.1%; margin-right:2.5%; }
.threeFourths { float:left; width:72.425%; margin-right:2.5%; }

div.responsive, fieldset.responsive { overflow:hidden; }
div.responsive p, fieldset.responsive p { clear:both; }
div.responsive p label, fieldset.responsive p label { float:left; width:12em; padding-right:.25em; }
div.responsive.wideCol p label, fieldset.responsive.wideCol p label, div.responsive p label.wideCol { width:15em; } 
div.responsive.narrow p label, fieldset.responsive.narrow p label, div.responsive p label.narrow { width:7em; }
div.responsive p label.secondary { text-align:right; }
div.responsive p, fieldset.responsive p { clear:left; }
div.responsive p label.noFloat, fieldset.responsive p label.noFloat { float:none; width:auto; }
fieldset.inlineLegend { margin:0 0 .5em; padding-left:0; border:none; }
fieldset.inlineLegend legend { float:left; margin:0; padding:0; width:12em; }
fieldset.inlineLegend legend.wideCol, .responsive.wideCol fieldset.inlineLegend legend { width:15em; }
fieldset.inlineLegend legend.narrow, .responsive.narrow fieldset.inlineLegend legend { width:7em; }

legend { display:block; max-width:99%; padding-bottom:.1em; }
.radlist label { white-space:nowrap; }

/* Inputs not shrinking within fieldset:  http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content */
fieldset { min-width:0; }
@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

/* HTML5 input types - some need special styling */
input[type="number"] { width:2.5em; }

/* Show/Hide panel - use instead of fixed-size pop-up window */
.popinForm { margin:0 4px 1em 0; background-color:#fff; box-shadow:4px 4px 4px 0 rgba(146,148,151,1); padding:1em; border:1px solid #ccc; }
.popinForm h2, .popinForm h3, .popinForm h4 { margin-top:0; }

.group { overflow:hidden; }
/* clear fix style from Dan Cederholm, Handcrafted CSS */
.group:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }
/* IE6 */
* html .group { height: 1%; }
/* IE7 */
*:first-child+html .group { min-height: 1px; }

@media screen and (max-width: 1200px) {
	#footer { padding-left:2em; padding-right:2em; }
}

@media screen and (max-width: 950px) {
	body { background:none; padding-left:0; }
	#banner h1 { margin-bottom:.25em; margin-left:-5%; margin-right:-5%; }
	#simpleMain { margin-top:0; }
	ul.footerLinks li { float:left; width:45%; padding-right:4.9%; }
	ul.footerLinks li:nth-child(odd) { clear:left; }
	#footer { padding-left:2em; }
}

@media screen and (max-width: 850px) {
	.bannerPhone { float:none; margin:.5em 2em .5em; }
}

/*  MOBILE NAVIGATION STYLES:  https://toddmotto.com/building-an-html5-responsive-menu-with-media-queries-javascript */
@media screen and (max-width: 767px) { 
	body { font-size:1.1em; }/* TSE 5/5/2015 */
	body.popup div.closeButton { margin:.25em 0 .5em; }
	body.popup div.closeButton input { display:block; width:100%; }
	#simpleMain, #ec-simple, #appQuestions { margin:0; padding:.5em 2% 1em; min-height:auto; }
	#simpleMain h1 { margin-top:0; }
	#banner { border-bottom:none; }
	#banner h1 { clear:right; }
	
	.nav {
		width:100%; max-width:100%; float:none;
		padding:0; margin:0 0 1em;
	}

	.nav-mobile {
		display:block; 
		font-size:18px;
	}
	.nav-list {
		display:none;
	}
	.nav-item, .nav-list li {
		width:100%;
		float:none;
	}	
	.nav-active {
		display:block;
	}
	.nav-mobile-open {
		border-radius:5px/* 5px 0 0 */;
		-webkit-border-radius:5px/* 5px 0 0 */;
		-moz-border-radius:5px/* 5px 0 0 */;
		background-color:#007ac9;
	}
	
	.nav { background:#007ac9; color:#fff; }
	.nav h2, .nav h3 { display:none; }
	ul.nav-list li { padding:0; margin:0; border-color:#ddd; }
	ul.nav-list2 { margin:0 0 0 1em; padding:0; list-style:none; }
	ul.nav-list li a, ul.nav-list li p
	 { display:block; padding:.2em .2em .2em .7em; background:#007ac9; color:#fff; text-decoration:none; }
	ul.nav-list li:last-child { border-bottom:none; }
	ul.nav-list li a:hover, li.nav-item a:hover, ul.nav-list li a.current, li.nav-item a.current { background:#468513/* updated for ADA, was #58a618 */; color:#fff; }
	ul.nav-list li span { color:#fdc13b; font-size:.8em; padding-left:.2em; } 
	.nav input.logout[type="submit"] { background-image:none; background:#fff; display:block; width:99%; margin:0 auto; padding:.1em 0; }
		
	input.primary[type="submit"], input.submit[type="submit"], input.submit[type="button"] { white-space:normal!important; width:auto; padding-left:2%; padding-right:2%; }
	
	
	h1 { padding-right:110px; }/* padding added to accomodate menu button */
	
	ul.col321, ul.col21 { margin:0; padding:0; }
	ul.col321 li, ul.col21 li { clear:both; float:none; width:100%; margin:0; padding:0; list-style-type:none; }
	/* .flex { float:none; margin-right:0; } */
	.half, .third, .fourth, .twoThirds, .threeFourths { float:none; width:100%; padding-right:0;}
	
	/*  ---- FORM FIELD FIXES ---- */	
	table.radlist { overflow:hidden; }
	table.radlist tr { display:inline; }
	table.radlist td { float:left; }
	
	input[type="text"], input[type="password"], textarea, fieldset { max-width:95%!important; }
	fieldset input[type="text"] fieldset input[type="password"], fieldset textarea { max-width:95%!important; }
	fieldset .charLeft input[type="text"] { width:3em!important; }
	/* HTML5 input types */
	input[type="email"], input[type="tel"], input[type="number"] { max-width:95%!important; }
	fieldset input[type="email"], fieldset input[type="tel"], fieldset input[type="number"] { max-width:95%!important; }
	
	input[type="button"], input[type="submit"], input[type="reset"] { width:99%!important; margin-bottom:.5em; }
	
	div.responsive p label, fieldset.responsive p label, fieldset.inlineLegend legend, fieldset.inlineLegend p label { display:block; float:none; padding-left:0; }
	.verifyBlock label { float:none; display:block; }
	span.subGroup { display:block; padding-top:.5em; }/* for fields like Zip on same line as another field, e.g. State */
	
	#footer { line-height:1.5; padding-left:2%; padding-right:2%; padding-top:.5em; }
	#appQuestions { padding-bottom:.5em; padding-left:2%; padding-right:2%; }
	figure { max-width:35%; }
	figure.fullWidth { max-width:99%; }
	figure img { width:100%; height:auto; }
	
	a figure { max-width:99%; }
	a.floatBlockLeft { float:left; margin:0 .5em .5em 0px; }
	a.floatBlockRight { float:right; margin:0 0 .5em .5em; }
}

@media screen and (max-width: 580px) {
	ul.footerLinks li { float:none; width:100%; padding-right:0; }
	#feature_col, .nav { float:none; width:100%; max-width:100%; padding-right:0; margin:0 0 1em; }
	#feature_col h2, .nav h2 { padding:.25em; }
}

@media screen and (max-width: 51em) {
	/* See http://codepen.io/pixelchar/full/rfuqK */
	/* Good for wider, multiple column tables. */
	.responsive-table thead th { 
		position: absolute;
		top: -9999px;
		left: -9999px; 
	}
	.responsive-table tbody th[scope='row']{
		background:#396fb7; color:#fff; font-weight:bold;
	}
	.responsive-table tbody td { float: left; width: 95%!important; border:none; }
	.responsive-table tbody td[data-title]:before {
	  content: attr(data-title);
	  float: left;
	  font-size: .8em;
	  width:8em;
	}
	.responsive-table tbody td input[type="text"] { width:70%; }
	.responsive-table tbody td:last-child { padding-bottom:1.5em; border-bottom:1px solid #396fb7; }
}

@media screen and (max-width: 32em) {
	.responsive-table tbody td input[type="text"] { width:99%; }
}

@media screen and (max-width: 400px) {
table.radlist td { float:none; display:block; }
img.right, img.left { float:none; display:block; margin:0 auto 1em; }

/* Best for narrow and 2 column tables. */
table.mobileOneColumn td { float: left; width: 99%!important; border:none; text-align:left!important; }
table.mobileOneColumn tr.header th { 
	position: absolute;
	top: -9999px;
	left: -9999px; 
}
/* See also https://css-tricks.com/responsive-data-tables/ 
	and http://codepen.io/pixelchar/full/rfuqK */
}

/*  =print styles */
@media print {
@page { margin: 1cm 2cm; }
html, body { margin:0; padding:0; background:none; font-family:"Century Gothic", Arial, Helvetica, sans-serif; }
#container, #ec_simple, #simpleMain, #appQuestions, #footerContainer, #footer { margin:0; padding:0; background:transparent; color:#333; width:auto; }
#appQuestions { padding-top:1em; }
#footer { text-align:center; }
#footerContainer, #footer { padding-bottom:0; margin-bottom:0; }
#banner, p.appQuestionsNav, .footerLinks, #feature_col, div.nav { display:none; }
#container:before { content: "City of Beaverton, www.BeavertonOregon.gov"; font-size:20pt; color:#000; display:block; }

#simpleMain, #ec_simple { min-height:50px; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }

p.pointerRight, p.pointerLeft { display:none; }
.noPrint { display:none; }
/* Hide McAfee Secure icon when printing */ .trustedsite-floating-element { position:absolute; left:0px; top:-999px; width:1px; height:1px; border:none; overflow:hidden; }
body.popup div.closeButton { display:none; }
}

@media print and (min-width: 768px) {
ul.col321 li, ul.col21 li  { clear:none; float:left; width:47.45%; padding-right:2.5%; padding-bottom:1em; }
ul.col321 li.newRow, ul.col21 li.newRow { clear:left; }
}