﻿@media screen {
	body {
		font-size: 12px;
		font-family: Verdana, Arial, Sans-Serif;
		color: black;
		
		background: #054d8b;
		margin: 0; margin-bottom: 12px;
	}

	a { color: blue; }
	a:visited { color: purple; }
	a:hover, a:visited:hover { color: red; }
	
	ul li {
		list-style-type: square;
		margin-left: -20px;
		margin-bottom: 10px;
	}
	
	li ul { margin-top: 10px; }

	a img { border: 0; }

	/* ===================== Usable Classes */
	.bold { font-weight: bold; }
	.underline { text-decoration: underline; }
	.center { text-align: center; }
	.red { color: red; }
	.printonly { display: none; }

	/* =============== Content Elements */
	#content h2 { font-size: 14px; margin-top: 0; }
	#content h3 { font-size: 12px; margin-top: 0; }

	#content table.datatable 
	{
		width: auto; 
		border-collapse: collapse;
		border: 2px solid #8787c5;
	}
	#content table.datatable tr { }
	#content table.datatable th { text-align: center; color: white; background-color: #8787c5; height: 20px; }
	#content table.datatable td 
	{ 
		padding: 5px; 
		width: 200px; 
		font-size: 12px;
		border: 1px solid #8787c5;
		margin: 0px;
	}
	
	/* =============== Income Guidelines Table */
	#incomeguidelines {
		width: 583px; height: 400px;
		border: 2px solid #8787c5;
		border-collapse: collapse;
		font-size: 14px;
		background-image: url('images/incomeguidelinesbg.jpg');
	}
	
	#incomeguidelines .householdsize { width: 150px; }
	#incomeguidelines .verylow {  }
	#incomeguidelines .low {  }
	#incomeguidelines .moderate {  }
	
	#incomeguidelines td,
	#incomeguidelines th { border: 1px solid #8787c5; text-align: center; background-image: none; }
	
	#incomeguidelines #incomeguidelinestop,
	#incomeguidelines #incomeguidelinesbottom { vertical-align: middle; font-weight: bold; background-color: #8787c5; color: white; }
	
	#incomeguidelines #incomeguidelinestop { font-size: 16px; }
	#incomeguidelines #incomeguidelinesbottom { text-align: right; padding-right: 5px; }

	/* =============== Right Pane Elements */
	#right h2 { font-size: 14px; margin: 3px; }
	#right h3 { font-size: 12px; margin: 3px; }
	#right li { margin-bottom: 3px; }
	
	/* =============== Containers */
	#page {
		width: 900px;
		min-height: 500px;
		margin: 0 auto;
		
		border-left: 1px solid black;
		border-right: 1px solid black;
		border-bottom: 1px solid black;
		background: white;
	}
	
	#banner img { width: 900px; height: 62px; }

	#contenttable {
		border-collapse: collapse;
		border-top: 5px solid #333399;
		width: 100%; min-height: 420px;
		height: 420px; /* IE7, FF, Ch, Sf need */
	}

	#contenttable td { vertical-align: top; padding: 0; }
	
	.section { margin-bottom: 10px; }
	.section .icon img { margin-right: 5px; }

	/* =============== Sections */
	#top {
		background: #333399;
	}

	#banner {
		position: relative;
	}
	
	#ocflbutton {
		width: 197px; height: 35px;
		background-image: url('images/button-ocfl.png');
		text-align: center; text-decoration: none;
		
		position: absolute; top: 0; right: 100px;
	}

	#ocflbutton:hover { background-image: url('images/button-ocfl-hover.png'); }
	
	.espbutton {
		font-size: 11px; font-weight: bold; color: #980000;
		width: 100px; height: 35px;
		background-image: url('images/button-esp.png');
		margin-left: 3px;
		text-align: center; text-decoration: none;
		
		position: absolute; top: 0; right: 0;
	}

	.espbutton:hover { color: #980000; background-image: url('images/button-esp-hover.png'); }
	
	.hideespbutton, .hideespbutton:hover { background-image: none; color: White; padding-top: 6px; }

	#housingdivbutton { display: inline-block; vertical-align: top; width: 900px; height: 21px; background-image: url('images/housingdivbutton.png'); }
	#housingdivbutton:hover { background-image: url('images/housingdivbutton-hover.png'); }
	
	#bannerbutton { display: inline-block; vertical-align: top; width: 900px; height: 62px; background-image: url('images/bannerbutton.png'); }
	#bannerbutton:hover { background-image: url('images/bannerbutton-hover.png'); }
	
	#contenttable #middle {
		font-size: 12px;
	}

	/* =============== Navigation */
	#contenttable #middle #navigation {
		vertical-align: top;
	}	

	#navigation a {
		width: 120px; height: 18px;
		background-image: url('images/button.png');
		display: inline-block;
		
		color: white;
		text-align: center;
		text-decoration: none;
		padding-top: 2px;
		vertical-align: top;
	}

	#navigation a:hover { background-image: url('images/button-hover.png'); }

	#navigation #salebutton {
		width: 143px; height: 27px;
		background-image: url('images/salebutton.png');
		font-size: 14px; font-weight: bold; color: #343399;
		padding-top: 7px;
	}
	
	#navigation #salebutton:hover { background-image: url('images/salebutton-hover.png'); }

	/* =============== Content */
	#contenttable #middle #content {
		padding: 10px;
	}
	
	#content li {
		line-height: 20px; 
	}
	
	#content p { line-height: 20px; }
	
	.question { font-weight: bold; }
	.answer { display: list-item; margin-left: 21px; list-style-type: square; }
	
	/* =============== Middle Pane */
	#affordable-energy-logo, #largeimage, #noimage, #bottomimage { text-align: center; }
	
	#affordable-energy-logo img { border: 1px solid black; margin-bottom: 1em; }
	
	#largeimage img, #noimage img {
		max-width: 500px; max-height: 500px;
		border: 1px solid black;
		border-width: 1px !important; /* override default 0px */
	}

	#largeimage .imagenotice {
		width: 480px;
		color: white; background-color: #ff9029;
		border: 1px solid black;
		font-weight: bold;
		font-size: 32px;
		
		position: absolute; top: 45%; left: 15%; display: block;
	}
	
	/* scrolling thumbnails
	#thumbnails { width: 679px; height: 100px; overflow: auto; white-space: nowrap; }
	*/
	
	#thumbnails input {
		height: 75px;
		border: 1px solid blue;
		border-width: 1px !important; /* override default 0px */
		margin-right: 4px;
		margin-top: 4px;
	}
	
	#thumbnails input:hover { border-color: red; }

	/* =============== Right Pane */
	#contenttable #right {
		background: #6060b8;
		width: 200px;
		border-left: 1px solid #8d1416;
		padding-bottom: 6px;
		padding-top: 5px;
		
		font-size: 10px;
		color: white;
	}
	
	#right a { color: #CCCCFF; }
	#right a:hover { color: #4B0082; }
	#right p { margin-left: 5px; margin-right: 5px; }
	#right li { font-size: 12px; }
	
	#right .infomapbutton {
		display: inline-block;
		width: 170px; height: 50px;
		background-image: url('images/button-infomap.jpg');
	}
	
	#homeprice {
		width: 200px;
		background-color: #85c523;
		text-align: center;
		padding-bottom: 5px;
		margin-bottom: 20px;
	}
	
	#homeprice h2 { margin: 0; }
	
	#homeprice p {
		background-color: white;
		color: #6060b8;
		margin: 0;
		font-size: 28px; font-weight: bold;
	}

	#right .infomapbutton:hover { background-image: url('images/button-infomap-hover.jpg'); }
	
	#features { font-family: Arial; }
	#features li { font-size: 14px; }

	/* =============== Footer */
	#footer {
		margin-top: 10px;
		color: white;
		text-align: center;
	}
	
	#resolutionnotice { margin-bottom: 0; }
	#footerlinks { margin-top: 5px; margin-bottom: 0; }
	#copyright { margin-top: 5px; }
	#contactnotice { width: 900px; margin: 5px auto; font-size: 11px; }

	#footer a { color: white; }
	#footer a:hover { color: #99BADD; }
	
	/* =============== Hide in Screen */
	#printfooter { display: none; }

}

@media print {

	body {
		font-family: "Times New Roman";
		font-size: 12pt;
	}

	a { color: blue; text-decoration: none; }
	a img { border: 0; }
	
	p { line-height: 16pt; }
	h2 { font-size: 14pt; }
	li { margin-left: -30px; margin-bottom: 6pt; }
	table.datatable { width: 95%; }
	table.datatable td { vertical-align: top; text-align: center; }
	
	#page { border: 1px solid black; }
	
	#incomeguidelines { width: 95%; }
	#incomeguidelines td { text-align: center; }
	#incomeguidelinestop { font-weight: bold; text-align: center; }
	#incomeguidelinesbottom { font-weight: bold; text-align: right; }

	.bold { font-weight: bold; }
	.underline { text-decoration: underline; }
	
	##affordable-energy-logo img, #largeimage img, #thumbnails img { border: 1px solid black; }
	.center, #affordable-energy-logo, #largeimage, #noimage, #bottomimage { text-align: center; }
	.icon { vertical-align: top; }
	
	#banner img { width: 99.9%; }
	
	/* =============== Sections */
	#contenttable { width: 100%; }
	
	#middle {
		vertical-align: top;
	}
	
	#right {
		font-size: 11pt;
		padding-left: 10px;
		vertical-align: top;
		width: 200px;
		border-left: 1px solid black;
	}
	
	#homeprice {
		width: 190px;
		background-color: #85c523;
		text-align: center;
		padding-bottom: 5px;
		border: 1px solid black;
	}
	
	#homeprice h2 { margin: 0; }
	
	#homeprice p {
		background-color: white;
		color: #6060b8;
		margin: 0;
		font-size: 28px; font-weight: bold;
		line-height: 32px;
	}
	
	/* =============== Hide in Print */
	#navigation, #footer, #ocflbutton, .espbutton, .hideinprint { display: none; }
	
	
	/*
	body {
		font-family: Verdana;
	}
	
	#middle, #right { vertical-align: top; }
	#contenttable { position: absolute; top: 1.1in; left: 0; }
	

	#banner, #navigation, #footer, .hideinprint,
	#affordable-energy-logo, #contactinformation,
	#bottomimage, #dpaimg, #eohimg, #resources, #homeprice { display: none; }
	

	#page, #bannerPrint, #contenttable, #footerPrint { width: 9.5in; }
	#bannerPrint img, #footerPrint img { width: 9.5in; }
	
	#middle { width: 7in; }
	#right { width: 2.5in; }
	

	#bannerPrint {  }
	

	#middle {  }
	
	#homepricePrint { border-collapse: collapse; }
	#homeforsale { font-size: 48px; font-weight: bold; }
	#priceprintcontainer { font-size: 32px; font-weight: bold; width: 55%; }
	#priceprintnote { font-size: 12px; }
	
	#largeimage, #noimage { text-align: center; }
	#largeimage img { height: 2.75in; width: auto; }
	
	#thumbnail { margin-top: 10px; }
	

	#right { padding-top: .4in; }
	#right h2 { font-size: 20px; margin: 0; }
	
	#area { font-size: 20px; }	
	#address { font-size: 16px; margin-top: 0; }
	
	#features { margin-left: 18px; margin-top: 0; font-weight: bold; }
	

	#footerPrint { position: absolute; bottom: 0; left: 0; }
	*/
}
