@charset 'utf-8';

/* set no margins and no padding as cascading defaults; set basic font and font-size. */
body {
	margin: 0px;
	padding: 0px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 8px;
}
/* highlight the active section page in the menus and the footer */
/* body-id and link-id pairs are set to highlight */
body#homepage a#home, body#homepage a#home2,
body#aboutpage a#about, body#aboutstaffpage a#about, body#aboutpage a#about2,
body#section8page a#section8, body#section8page a#section82,
body#voucherspage a#vouchers, body#voucherspage a#vouchers2,
body#publicpage a#public, body#publicpage a#public2,
body#servicespage a#services, body#servicespage a#services2,
body#homeownership a#homeownership, body#homeownership a#homeownership2,
body#fsspage a#fss,
body#fsspage a#fss2,
body#contactus a#contactus,
body#contactus a#contactus2
 {
	background-color: #7b7fb7;
	color: white;
	}
	
/* set basic font color and weight, line-height, and text-margins without changing normal font-sizes */
h1, h2, h3, h4, h5, h6, p {
	color: #373c73;
	line-height: 1.1em;
	margin-top: .3em;
	margin-bottom: .1em;
	font-weight: normal;
	}
	
/* set a basic font-size of 80% of basic font-size */
p {
	font-size: .8em;
	}

/* div#topNavigation is positioned absolutely within its containing div#top */
/* it is 100px from the left of the div#top in order to clear the div#logo */
#topNavigation, #landlordhandbookpage #topNavigation {
	position: absolute;
	width: 700px;
	left: 100px;
	height: 31px;
	bottom: 0px;
	z-index: 2;
	} 
.form #topNavigation {
	width: 900px;
	}

/* the div#mainContainer holds everything except the footer and centers on the viewport */	
div#mainContainer {
	font: normal medium Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
	background: #ffffdd;
	position: relative; 
	margin: 0px auto;
	padding: 0px;
	height: 565px;
	width: 800px;
	z-index: 0;
	border: 4px solid #373c73;
	margin-top: 10px;
}
.form div#mainContainer {
	width: 1100px;
	}

/* div#top sets a broad border at the bottom of the top section, and has a background image that repeats L-R */
div#top {
	height: 98px;
	width: 100%;
	border-bottom: 6px solid #9d9fd9;
	position: relative;
	z-index: 1;
	background: #FFFFDD url(../images/top_bg.gif) repeat-x;
}

/* div#logo is positioned absolutely within the relatively-positioned div#top */
#logo {
	height: 90px;
	width: 90px;
	position: absolute;
	z-index: 1;
	visibility: visible;
	left: 7px;
	top: 7px;
	background: #FFFFDD url(../images/top_bg.gif) repeat-x;
}

/* the name of the Portland Housing Authority is an image positioned relatively within div#top */
#mainContainer #top img#pha {
	left: 115px;
	top: 25px;
	height: 34px;
	width: 410px;
	position: relative;
	z-index: 1;
}

/*    The photo div id="photos" is 300px deep; div id="photoband" is 100px deep.
Insert photos of the appropriate height and width (300x197) or (100x100).
For large photos, use img class="largephoto", for small photos, img class="smallphoto".
It is not necessary to put the images into separate divs as they are in this layout, but keep them within the 'TemplateBeginEditable name="Photos"' and the 'TemplateEndEditable'  */

div#photos { /* index page and pages with larger photos (development site home pages) */
	background: #CCCCCC;
	border-bottom: 6px solid #9D9FD9;
	width: 100%;
	height: 300px;
	margin: 0px;
	padding: 0px;
}
div#photoband {	/* inner pages with small photos */
	background: #7b7fb7;
	border-bottom: 6px solid #373c73;
	width: 100%;
	height: 100px;
	float: right;
	}

/* the small photos float to the right, hence they build up from right to left
the title on these pages is inserted after the photos, and appears on the left side. 
If there are too many photos to allow the title to be on one line, eliminate a photo or two. */
div.smallphoto, div.smallphoto2, div.smallphoto65 {
	height: 100px;
	width: 100px;
	float: right;
	border-left: 1px solid #595e95;
	}
div.smallphoto2 {
	width: 71px;
}
div.smallphoto65 {
	width: 65px;
}
/* use h2 within the div#photoband for the title of the page. It will center within the remaining space after the photos are inserted. */
div#photoband h2, div#photoband h3 {
	color: #bfbffb;
	text-align: center;
	margin-top: 30px;
	}

/* the class 'photohere' serves as a photo placeholder on the pages with large images. It is not an image but a background.
If it interferes with the actual placement of images, comment out the background-image line. */
.photohere {
	background-image:url(../images/phot.gif);
	background-repeat: repeat;
	height: 300px;
	width: 197px;
	float: left;
	border: 1px solid #9d9fd9;
	text-align: center;
	z-index: 0;
	 }

/* these styles apply to images. 
Use large images (height="300px" and width="197px") or small images (height="100px" and width="100px").
The large ones float to the left; small ones float to the right.
The large are bordered all the way around; the small only on the left (to set a little space between photos).
 */
img.largephoto, img.smallphoto {
	height: 300px;
	width: 197px;
	float: left;
	border: 1px solid #9d9fd9;
	text-align: center;
	z-index: 0;
	}
/* this style overrides height, width, float, and border of previous style */
img.smallphoto {
	height: 100px;
	width: 100px;
	float: right;
	border-left: 1px solid #595e95;
	}
.photo {
	width: 150px;
	height: auto;
	border: 1px solid #9d9fd9;
}	
/* this styles the div#instructionsHere for the forms pages */
#instructionsHere {
	margin: 0 auto 10px;
	height: 460px;
	width: 99%;
	overflow: auto;
	}
/* the div#pdfPage extends full width of the containing div, with a little leeway, and sits 10px down and centered horizontally */
#pdfPage {
	width: 99%;
	margin: 10px auto 0;
	}

/* this is the div on the home page that sits below the photos */
#mainContainer #hometext {
	padding: 0px 0px 10px 10px;
	width: 450px;
	height: 150px;
	position: relative;
	z-index: 0;
}

/* this div#columntext is set up to hold text columns, and sits below photoband (smaller photos) on inner pages.
When the text is deeper than the allowed height of 340px, scroll bars appear.
this div is set off from the bottom and left by 10px. */
#mainContainer #columntext {
	padding: 0px 0px 10px 10px;
	width: 98%;
	height: 340px;
	position: relative;
	background-color: white;
	clear: both;
	overflow: auto;
	z-index: 0;
	}
	
/* basic formatting of text columns includes a 2% right margin so they don't run into each other.
Each floats left, so they are 'built up' from left to right in the layout.
They may be used in any order or combination desired.
Scroll bars appear as needed automatically. */
.quartercolumnLeft,
.thirdcolumnLeft,
.halfcolumnLeft,
.twothirdscolumnLeft,
.threequartercolumnLeft, .fullwidth {
	width: 22%;
	margin-right: 2%;
	float: left;
	height: 340px;
	overflow: auto;
	z-index: 1;
	}
.thirdcolumnLeft {
	width: 30%;
	}
.halfcolumnLeft {
	width: 47%;
	}
.halfcolumnLeft2 {
	width: 47%;
	overflow: hidden;
}
.twothirdscolumnLeft {
	width: 64%;
	}
.threequartercolumnLeft {
	width: 72%;
	text-align: justify;
	padding-right: 1%;
	}


/* table header format */
#staff th {
	vertical-align: top;
	text-align: right;
	padding-right: 5px;
	width: 25%;
	}
/* text is top and left aligned within div#staff table cell (td) */
#staff td {
	text-align: left;
	vertical-align: top;
	}

/* use this to lightly tint a table row. */
tr.bk {
	background-color: #EEE;
	}

/* use this to make a table row background white */
tr.bkw {
	background-color: white;
	}

/* table specs for small, incidental tables */
body#section8page table {
	border: 1px solid lightgrey;
	}
/* the div#announcement is an optional element on the home page and on development site home pages. */
div#announcement {
	background: #FFFFFF;
	padding: 5px;
	height: 130px;
	width: 300px;
	position: absolute;
	right: 6px;
	bottom: 6px;
	border: 1px solid #9D9FD9;
	z-index: 0;
	}

/* basic formatting of footer */
#footer, #footer a {
	width: 800px;
	margin: 0 auto;
	color: #666666;
	text-align: center;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	}

/* basic link format/color */
a {
	text-decoration: underline;
	color: #373c73;
	}

/* pseudo-element hover styling: background with white text. */
#footer a:hover, a:hover {
	background-color: #9d9fdd;
	color: white;
	}
/* active link styling */
#footer a:active {
	background-color: #ddd;
	color: black;
	}
#section8index ul {
	padding-left: 18px;
	margin-top: 1px;
	list-style-type: circle;
	}
#contactus #mainContainer #columntext {
	text-align: center;
}

#publicpage .halfcolumnLeft img {
	border: 1px solid #ccc;
	text-align: center;
}
#footer p {
	font-size: 1.3em;
}
#eeo {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 52px;
}
.textul {
	margin-top: 0px;
}
#fsspage #mainContainer #columntext div h4 ul {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 3px;
	margin-left: 0px;
}
#fsspage #mainContainer #columntext h3 {
	text-align: center;
	color: #595e95;
}
.hilight {
	background-color: #bfbffb;
	padding: 5px;
	border: solid 1px #666;
	margin: 0 10px 10px 5px;
	text-align: center;
}
.blue {
	color: #373CFF;
}
.blue a:hover {
	color: white;
	background-color: #aeaeea;
}
#pbvfaq {
	height: auto;
}
.notopmargin {
	margin-top: 0px;
}
.fullwidth {
	width: 98%;
}