/* CSS Document */

/* General Default Rules for Entire Template */
html { 
	margin: 0; 
	padding: 0; 
	height: 100%; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 0.8125em;; 
}

body {
	background-color: #69878E;
	margin: 3em auto 0; 
	padding: 0;
}

.clearfix { clear: both }

hr.dottedline {
	border: none 0;
	border-top: 1px dotted #C3B58A;/*the border*/
	width: 90%;
	height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
	margin: 15px auto
}

/* Default Link Rules */
a img { border: none; }
a {	color: #336666; }
a:link, a:active { text-decoration: underline }
a:visited {	color: #996633;	text-decoration: none }
a:hover { color: #860C29; text-decoration: underline }

.largerarrow {
	font-size: 120%;
	font-weight: bold
}
/* Centers content at 760px within 100% width divs */	
div.centerer { position: relative; width: 760px; margin: 0 auto; padding: 0 }

/* ################### PAGE CONTAINER ################### */
/* Outermost white page container rule */
#container {
	width:768px;
	height: 100%;
	padding-top: 9px;
	background: url(/images/bkgd_faux.gif) repeat-y;
	z-index: 0;
}

/* ################### HEADER ################### */

/* Graphical Banner Area - To replace with new image, 
resave file as banner_bkgd.jpg with EXACT SAME dimensions 742px w x 285px h AND
remove building.gif code */

#banner {
	width: 742px !important;
	height: 285px !important;
	margin: 0 auto;
	border-top: 1px solid #fff;
	background: url(/images/banner_bkgd.jpg) no-repeat;
}

/* BPA Logo Placement, positioning & z-index matters! */
#logo { 
	position: absolute;
	top: 12px;
	left: 25px;
	z-index: 99;

}

/* Scroll image and mission statement, positioning matters!*/
#mission {
	position: absolute;
	left: 17px;
	top: 101px
} 

/* Image of Building, positioning & z-index matters! */
.building { 
	position: relative;
	margin-top: -72px;
	z-index: 20;
}

/* ################### NAVIGATION ################### */
/* Floating navigation bar, positioning & z-index matter! */
#navigation {
	position: relative;
	top: 65px;
	width: 742px;
	height: 35px;
	margin: 0 auto;
	background: url(/images/nav_bkgd.gif) no-repeat;
	text-align: right;
	z-index: 50;
}

/* Navigation Links */
#navigation ul {
	position: relative;
	top: 11px;
	list-style-type: none;
	margin: 0;
	padding: 0 2px 0 5px;
}

#navigation ul li {
	display: inline;
} 

/* Navigation Rollover Effect */
#navigation ul li a:link, #navigation ul li a:visited {
	display: inline;
	margin: 0 0 -20px 0;
	padding: 0 18px 0 15px;
	background: url(/images/nav_circle.gif);
	background-repeat: no-repeat;
	background-position: 5px 0;
} 


#navigation ul li a:hover {
	display: inline;
	margin: 0 0 -20px 0;
	padding: 0 18px 0 15px;
	background: url(/images/nav_circle_on.gif);
	background-repeat: no-repeat;
	background-position: 5px 0;
} 

/* ################### CONTENT - TWO COLUMNS ################### */


/* This sets the background image of the content area */
#content {
	width: 742px;
	margin: 0 auto;
	padding: 0 0 15px 0;
	background: url(/images/bkgd_content.gif) repeat;
	overflow: auto;
}

/* Sets the Left Content Column & Rules that apply within the Left column */
#projects {
	width: 457px;
	float: left;
	display: inline;
}

/* Floats image to the left with proper padding */
.projectimage {
	margin: 8px 10px 8px 18px;
	float: left;
	display: inline
}

/* Smaller font size is used for the text next to image */
p.projsummary {
	font-size: 90%;
	margin: 5px 15px 8px 175px;
}

.projsummary strong {
	color: #3D575D
}

/* Larger font size is used for the text BELOW image */
p.projdescription {
	font-size: 95%;
	margin: 15px 10px 10px 18px;
	clear: both;
}

p.learnmore {
	font-size: 85%;
	margin: 0 15px 0 0;
}

/* Sets the Right Content Column & Rules that apply within the Right column */
#news {
	width: 285px;
	float: left;
	display: inline;
	clear: right;
}

#news p {
	font-size: 85%;
	margin: 5px 8px 15px 25px;
}

/* Smaller font size & gray color used for BPA News date */
.date {
	font-size: 90%;
	color: #666
}

/* ################### FOOTER ################### */
/* Rules that apply to the footer area */
#footerbox {
	width:768px;
	height: 95px;
	margin: 0 auto;
	background: url(/images/page_border_btm.gif) no-repeat  bottom;
	
}

#footer {
	width: 742px;
	margin: 0 auto;
	background: #860C29;
	border-top: 1px solid #860C29;
	border-bottom: 2px solid #860C29;
}

#footer p {	
	font-size: 8pt;
	line-height: 10pt;
	margin: 0;
	padding: .7em 1em 0 1em;
	color: #fff;
	background: #860C29;
}

/* BPA Contact Info rules */
.bpaInfo { color: #fff; }
.bpaInfo a { color: #fff; text-decoration: none }
.bpaInfo a:visited { color: #fff; text-decoration: none }
.bpaInfo a:hover { color: #fff; text-decoration: underline }

/* Matrix Design Credit rules */
.matrix {  font-size: 8pt; margin-left: 165px; color: #C3B58A }
.matrix a { color: #C3B58A; text-decoration: none }
.matrix a:visited { color: #C3B58A; text-decoration: none }
.matrix a:hover { color: #C3B58A; text-decoration: underline }