/*
		Better Barrhead site redesign
*/

*, body { 
	margin: 0px; 
	padding: 0px;
}
body {
	background: #e6effd url(bb_bd_bg.jpg) top left repeat-x; 
	color: #333; 
	font: normal 0.85em/1.1em "Trebuchet MS", verdana, geneva, sans-serif; 
	text-align: center;
}
.clear {
	clear: both; 
	height: 0;
}
#pagecontainer {
	margin: 0px auto; 
	width: 780px;
	margin-bottom: 20px; 
	background: #fff url(content_strips.jpg) top left repeat-y; 
	color: #333;
	border-right: 1px solid #82a9ba;
}
#page {
	background: transparent; 
	color: #333; 
	z-index: 20; 
	text-align: left;
 	min-height: 700px;
}

/*	header	*/
#header {
	position: relative; 
	z-index: 2; 
	padding: 0.5em 0; 
	color: #fff; 
	background: #4e5c65; 
}
#swoosh {
	position: absolute;	
	z-index: 200; 
	top: 0; 
	left: 0;
	background: transparent url(swoosh.gif) top left no-repeat; 
	color: #111; 
	display: block; 
	width: 110px; 
	height: 425px;
}
#header h1 { 
	position: relative; 
	top: 0; 
	left: 0; 
	width: 25em; 
	line-height: 1.1em; 
	font-size: 1.5em; 
	font-weight: normal; 
	text-align: right; 
}
#header .green {background: transparent; color: #b8d551;}
#header .lilac {background: transparent; color: #c2a0cb;}
#header .blue {background: transparent; color: #a6dff6;}

/*	header search		*/

#searchbox { position: absolute; top: 0; left: 50em; margin: 0; width: 12.5em; padding: 0.3em 0.5em; font-size: 0.9em; border-left: 3px solid #b8d551; background: transparent; color: #fff; }
#searchbox form fieldset { border: none; padding: 0.2em 0; }
#searchbox form fieldset div { position: relative; }
#searchbox form fieldset div label {width: 1em;  line-height: 1.75em; ;}
#searchbox form fieldset div input {width: 5em; }
#searchbox form fieldset div input.submit{width: 2.2em; height: 1.75em; text-align: center;}

#headerimg { 
	height: 116px; 
	background: transparent url(hdr.jpg) top right no-repeat; 
	color: #000;
}
#navigation { 
	clear: both; 
	height: 1.7em; 
	color: #333; background: #deecb1; 
}
#navigation ul {list-style-type: none; margin-left: 8em;}
#navigation li {float: left; margin: 0 1px;}
#navigation li a {  display: block; text-align: center; text-decoration: none; color: #333; background: #deecb1; font-size: 0.8em; padding: 0.35em 0.6em; }
#navigation li a:focus {background: #d6f0fa; color: #000;}
#navigation li a:hover { background: #8d6d95; color: #fff; text-decoration: underline;}
#navigation li a:active {background: #d6f0fa; color: #000;}

#navigation li.on a {  display: block; background: #fff; color: #333; }
#navigation li.on a:hover { background: #8d6d95; color: #fff; text-decoration: underline;}

#stripes {
	height: 20px; 
	background: transparent url(stripes.jpg) top left repeat-x; 
	color: #000;
}

/*	content area	*/
#contentarea {clear: both; text-align: left;background: transparent url(leftbox.gif) bottom left no-repeat; color: #000; height: 100%;}

/*	LEFT BOX		*/
#leftbox {float: left; width: 14em; background: transparent; color: #000; min-height: 485px; height: 100%; }
#leftbox p {text-align: center; font-size: 1.8em; }
#leftbox p.green {background: transparent; color: #b8d551; margin: 3.3em 0 1em;}
#leftbox p.lilac {background: transparent; color: #c2a0cb; margin: 1em 0;}
#leftbox p.blue {background: transparent; color: #a6dff6; margin: 1em 0;}

/*	subnav	*/
#leftbox #subnav ul { position: relative;	z-index: 300;  top: 10px; list-style: none;}
#leftbox #subnav li {margin: 0.5em 0 0.5em 4.5em;font-size: 0.8em;  }
#leftbox #subnav li a {display: block; padding: 0.5em 0 0.5em 1em;  background: #51889e; color: #fff; text-decoration: none;}
#leftbox #subnav li a:hover {text-decoration: underline;}

#leftbox #subnav li.active a {display: block; padding: 0.5em 0 0.5em 1em;  background: #fff; color: #51889e; text-decoration: none; border: 1px solid #51889e;}
#leftbox #subnav li.active a:hover {text-decoration: underline;}

/*	CONTENT SECTION	*/
#homecontent {float: left; width: 28em; }
#fullcontent {float: left; width: 40em; border: 1px solid white;}
#content { padding: 1em; font-size: 0.95em; }
#content h2, #content h3, #content h4 {font-weight: normal;}
#content h2 {font-size: 1.5em; line-height: 1.4em; background: transparent; color: #b8d551; margin-bottom: 0.6em;}
#content h3 {font-size: 1.3em; line-height: 1.2em; background: transparent; color: #c2a0cb; margin-top: 1.1em;}
#content h4 {font-size: 1.1em; line-height: 1.1em; background: transparent; color: #4e5c65; }
#content p, #content li {line-height: normal; padding: 0 0 5px;}
#content ol, #content ul {padding: 0 0 0 25px;}

/*	images	*/
#content .right img {float: right; width: auto; border: 2px solid #888; margin: 0 0 10px 20px;}
#content #mapbox {margin: 10px auto; width: 500px; padding: 0; border: 2px solid #888}
#mapbox ul {
	position: relative; 
	top: 0; 
	left: 0; 
	height: 324px; 
	width: 500px; 
	padding: 0; 
	margin: 0; 
	list-style: none; 
	background: transparent url(barrhead_aerial_500.jpg) top left no-repeat; 
	color: #fff;
}

/*	Interactive Map	*/
#site1 a, #site2 a, #site3 a, #site4 a, #site5 a, #site6 a, #site7 a, #site8 a, #site9 a, #site10 a, #site11 a, #site12 a     {
	font-size: 0em; 
	background: transparent; 
	color: #becbd3; 
	text-decoration: none;
}
/*	site 1	*/
#site1 a { position: absolute; z-index: 24; top: 1px; left: 1px; height: 1px; width: 1px; background: transparent; color: #fff; }
#site1 a:hover { background: transparent; color: #fff; } 
#site1 span { display: none; }

/*	site 2	*/
#site2 a { position: absolute; z-index: 25; top: 82px; left: 119px; height: 21px; width: 25px; background: transparent url(site2.jpg) top left no-repeat; color: #fff; }
#site2 a:hover { background: transparent url(site2hover.jpg) top left no-repeat; color: #fff; cursor: help;} 
#site2 span { display: none; }
#site2 a:hover span { display: block; position: absolute; top: -77px; left: 150px; width: 200px; height: 50px; padding: 10px; border: 2px solid #111;  background:#ccc;  color:#222; text-align: left; font-size: 12px;z-index: 25; cursor: help; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/*	site 3	*/
#site3 a { position: absolute; z-index: 26; top: 199px; left: 178px; height: 27px; width: 49px; background: transparent url(site3.jpg) top left no-repeat; color: #fff; }
#site3 a:hover { background: transparent url(site3hover.jpg) top left no-repeat; color: #fff; cursor: help;} 
#site3 span { display: none; }
#site3 a:hover span { display: block; position: absolute; top: -191px; left: 90px; width: 200px; height: 50px; padding: 10px; border: 2px solid #111;  background:#ccc;  color:#222; text-align: left; font-size: 12px;z-index: 25; cursor: help; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/*	site 4	*/
#site4 a { position: absolute; z-index: 24; top: 2px; left: 2px; height: 1px; width: 1px; background: transparent; color: #fff; }
#site4 a:hover { background: transparent; color: #fff; } 
#site4 span { display: none; }

/*	site 5	*/
#site5 a { position: absolute; z-index: 28; top: 128px; left: 215px; height: 55px; width: 61px; background: transparent url(site5.gif) top left no-repeat; color: #fff; }
#site5 a:hover { background: transparent url(site5hover.gif) top left no-repeat; color: #fff; cursor: help;} 
#site5 span { display: none; }
#site5 a:hover span { display: block; position: absolute; top: -123px; left: 53px; width: 200px; height: 50px; padding: 10px; border: 2px solid #111;  background:#ccc;  color:#222; text-align: left; font-size: 12px;z-index: 25; cursor: help; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/*	site 6	*/
#site6 a { position: absolute; z-index: 23; top: 138px; left: 280px; height: 31px; width: 35px; background: transparent url(site6.jpg) top left no-repeat; color: #fff; }
#site6 a:hover { background: transparent url(site6hover.jpg) top left no-repeat; color: #fff; cursor: help; z-index: 33; } 
#site6 span { display: none; }
#site6 a:hover span { display: block; position: absolute; top: -133px; left: -12px; width: 200px; height: 50px; padding: 10px; border: 2px solid #111;  background:#ccc;  color:#222; text-align: left; font-size: 12px;z-index: 25; cursor: help; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/*	site 7	*/
#site7 a { position: absolute; z-index: 30; top: 104px; left: 323px; height: 31px; width: 35px; background: transparent url(site7.gif) top left no-repeat; color: #fff; }
#site7 a:hover { background: transparent url(site7hover.gif) top left no-repeat; color: #fff; cursor: help;} 
#site7 span { display: none; }
#site7 a:hover span { display: block; position: absolute; top: -99px; left: -55px; width: 200px; height: 50px; padding: 10px; border: 2px solid #111;  background:#ccc;  color:#222; text-align: left; font-size: 12px;z-index: 25; cursor: help; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/*	site 8	*/
#site8 a { position: absolute; z-index: 24; top: 3px; left: 3px; height: 1px; width: 1px; background: transparent; color: #fff; }
#site8 a:hover { background: transparent; color: #fff; } 
#site8 span { display: none; }


/*	RIGHT BOX	*/
#rightbox { float: right; width: 13em; }
#rightbox #flythrough, #rightbox #contactinfo {
	float: left; 
	width: 12.5em; 
	padding: 0.8em 0 0.9em 0.5em; 
	font-size: 0.9em; 
	border-bottom: 2px solid #b8d551; 
	background: transparent; 
	color: #4e5b64; 
}

/*flythrough box	*/
#rightbox #flythrough img { border: none;}

/*	contact us	*/
#rightbox #contactinfo h3 { font-weight: bold; margin:  0 0  0.5em; }
#rightbox #contactinfo p {padding: 0 0 0.5em; font-size: 0.9em;}

#footer {  background: #4e5c65; color: #fff; padding: 0.1em 30px; }
#footer p { text-align: right; font-size: 0.75em; line-height: normal;}

/*		
	Online  Form
*/
form, fieldset {border: none;}
/*
	fieldset .greenline {background: #deecb1; color: #000;padding: .2em .5em;}
	fieldset .lilacline {background: #e3d4e7; color: #000;padding: .2em .5em;}
	fieldset .blueline {background: #d5f0f9; color: #000;padding: .5em .9em;}
*/
fieldset label {font-weight: bold;padding: .1em .5em .6em;}
fieldset label .textarealabel {height: 100px; vertical-align: top;}
fieldset input {margin: .3em .5em .3em 0;}


/* External link Icon Handler */ 
#content a.external, #content a:link.external { background: transparent url(ext_link_icon.png) center right no-repeat; color: #0064d3; padding-right: 20px; text-decoration: none;}
#content a:visited.external{color: #7700d3; background: transparent url(ext_link_icon.png) center right no-repeat;}
#content a:hover.external{color: #7dc242; background: transparent url(ext_link_icon.png) center right no-repeat; text-decoration: underline;}
#content a:focus.external, #content a:active.external {color: #fff; background: #7dc242 url(ext_link_icon.png) center right no-repeat;}

/* Email link Icon Handler */ 
#content a.email, #content a:link.email { background: transparent url(email_icon.png) center right no-repeat; color: #0064d3; padding-right: 20px; text-decoration: none;}
#content a:visited.email{ color: #7700d3; background: transparent url(email_icon.png) center right no-repeat; }
#content a:hover.email{ color: #7dc242; background: transparent url(email_icon.png) center right no-repeat; text-decoration: underline;}
#content a:focus.email, #content a:active.email { color: #fff; background: #7dc242 url(email_icon.png) center right no-repeat;}

/**		Address	**/
#content address {font-style: normal; font-size: .95em; width: 55%; background: transparent url(vcard.jpg) top left no-repeat; height: 100%; line-height: 1.35em; margin: 5px 10px 10px 20px; padding: .5em .5em .5em 6em; border: 1px solid #ddd; border-right: 3px solid #ddd; border-bottom: 3px solid #ddd;  -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#content address img {float: right; width: auto; }