/*
	Berkshire Homes - style.css
*/


/* @group GENERAL RESET
========================================== */

/* @group Eric Meyer Reset
========================================== */

/* Derived from Eric Meyer Reset v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	background: #fff url(i/bgFineprint.gif) repeat 50% 0;
	color: #333;
	font-size: 62.5%;
	line-height: 1em;
	font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
	}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

:focus { outline: 0; } /* remember to define focus styles! */

ins { text-decoration: none; } /* remember to highlight inserts somehow! */
del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */
caption, th, td { text-align: left; font-weight: normal; }

/* @end Meyer Reset
------------------------------------- */

p, ul, ol, dl, table, cite {
	margin: 0 0 1em;
	font-size: 100%;
	line-height: 1.5em;
	}

p {
	font-size: 110%;
	font-family: Georgia, "Times New Roman", serif;
	}
p.intro { font-size: 150%; }

li *, dt *, dd * { font-size: 100%; }

blockquote { text-transform: uppercase; letter-spacing: .08em; }
blockquote p { font-size: 90%; font-family: "Trebuchet MS", "Lucida Grande", sans-serif; color: #900; }
blockquote p cite { color: #999; font-style: normal; }
blockquote cite em { font-style: italic; font-family: Georgia, "Times New Roman", serif; }

code { font: 0.9em "Courier New", Monaco, Courier, monospace; }

hr {
	border-color: #000;
	border-style: dotted;
	border-width: 1px 0 0;
	clear: both;
	margin: 0 0 1.5em;
	height: 0;
	}


/* @group helper classes
========================================== */

img.finder {
	margin: 0 0 2em;
	border: 1px solid #BA8748;
	}
a:hover img.finder { border-color: #900; }

.hide { display: none; }

.right { float: right !important; }

/* @end helper classes
------------------------------------- */

/* @end GENERAL RESET
------------------------------------- */


/* @group LISTS (OL, UL)
========================================== */

ol, ul {
	list-style: disc;
	padding-left: 1.5em;
	margin: 0 0 1em;
	}

ol {
	list-style: decimal;
	padding-left: 2.5em;
	}

li { margin: 0 0 0.5em; }

li ul, li ol { padding-top: 0.3em }

ul ul { list-style: circle; }
ol ol, ol.alpha { list-style: lower-alpha; }

p + ul, p + ol { 
	margin-top: -1em;
	font-size: 110%;
	font-family: Georgia, "Times New Roman", serif;
	}

/* @end LISTS (OL, UL)
------------------------------------- */


/* @group DEFINITION LISTS (DL)
========================================== */

dl {}

dt {
	margin: 0 0 .1em;
	font-size: 90%;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #000;
	}
dd {
	margin: 0 0 1.455em;
	font-size: 110%;
	line-height: 1.455em;
	font-family: Georgia, "Times New Roman", serif;
	}

/* @end DEFINITION LISTS (DL)
------------------------------------- */


/* @group HEADINGS (h1-h6)
========================================== */

h1 {
	width: 266px;
	height: 44px;
	margin: 0 auto;
	}
	h1 a {
		display: block;
		width: 266px;
		height: 44px;
		text-indent: -9999px;
		background-image: url(i/logo.png);
		}
	* html h1 a { background-image: url(i/logo.gif); } /* ie6 hack */

h2, h3, h4, h5, h6 { line-height: 1.2em; }
h2 { font-size: 210%; margin: 0 0 0.5em; }
h3 {
	margin: 0 0 1em;
	font-size: 90%;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #900;
	}
h4 { font-size: 180%; }
h5 { font-size: 160%; }
h6 { font-size: 140%; }

p + h2, ul + h2, ol + h2, dl + h2, table + h2, blockquote + h2, h1 + h2,
p + h3, ul + h3, ol + h3, dl + h3, table + h3, blockquote + h3, h2 + h3,
p + h4, ul + h4, ol + h4, dl + h4, table + h4, blockquote + h4, h3 + h4,
p + h5, ul + h5, ol + h5, dl + h5, table + h5, blockquote + h5, h4 + h5,
p + h6, ul + h6, ol + h6, dl + h6, table + h6, blockquote + h6, h5 + h6 {
	margin-top: 1.8em;
	}

/* @end HEADINGS (h1-h6)
------------------------------------- */


/* @group FORMS
========================================== */

/*
form ul {
	padding: 0;
	list-style: none;
	overflow: hidden;
	}

form ul li {
	width: 100%;
	float: left;
	margin: 0 0 0.8em;
	}

form label {
	float: left;
	width: 35%;
	margin-right: 2%;
	text-align: right;
	}
form input,
form select,
form textarea {
	float: left;
	}
form input.text,
form textarea {
	width: 50%;
	}
*/


fieldset {}

legend {}

form ol {
	padding: 0;
	margin: 0;
	list-style: none;
	}

form ol li {}

label {
	display: block;
	font-size: .9em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #999;
	}

input.text,
textarea,
select {
	padding: 4px;
	border: 1px solid #ba8748;
	font-size: 1.2em;
	font-family: Georgia, "Times New Roman", serif;
	color: #333;
	}
select { padding: 3px 4px; }

form div.buttons {}

button { cursor: pointer; }
input[submit] { cursor: pointer; }

/* @end FORMS
------------------------------------- */



/* @group LAYOUT
========================================== */

#page {}

#header {
	width: 100%;
	height: 76px; /* more? */
	padding: 23px 0 0;
	background: url(i/bgHeader.png) repeat-x 50% 0;
	}

#main {
	padding: 23px 0 0;
	position: relative;
	background: #FAF5EF url(i/bgMain.gif) repeat-x 0 0;
	}
	
	#content {
		width: 850px;
		margin: 0 auto;
		}
	.column {
		width: 264px;
		float: left;
		padding: 0 0 0 29px;
		}
	* html .column { width: 263px; } /* ie6 hack */
	.doublecolumn {
		width: 557px;
		float: left;
		padding: 0 0 0 29px;
		}
	.first { padding-left: 0; }


	#sidebar {}
	
/* @end LAYOUT
------------------------------------- */



/* @group COLUMNS
========================================== */

/* HTML example:
<div class="columns3">
	<div class="col"></div>
	<div class="col"></div>
	<div class="col"></div>
</div>
*/

.col {
	float: left;
	margin-right: 1.5%;
	display: inline; /* ie6 double-margin float fix */
	}

.columns2 .col { width: 48%; }
.columns3 .col { width: 31%; }
.columns4 .col { width: 23%; }
.columns5 .col { width: 18%; }
.columns6 .col { width: 14.5%; }
.columns7 .col { width: 12%; }
.columns8 .col { width: 10.5%; }

.colums3 .cols2 { width: 64%; }

.colums4 .cols2 { width: 48%; }
.colums4 .cols3 { width: 73%; }

/* @end COLUMNS
------------------------------------- */


/* @group nav-main
========================================== */

#nav-main {
	width: 100%;
	background: #000 url(i/bgNavMain.png) repeat-x 50% 0;
	}
	#nav-main ul {
		width: 850px;
		height: 36px;
		margin: 0 auto;
		padding: 2px 0 0 100px;
		list-style: none;
		font-size: 100%;
		text-transform: uppercase;
		}
	#nav-main li {
		float: left;
		margin: 0 18px 0 0;
		}
	
		#nav-main a {
			display: block;
			height: 30px;
			padding: 0 12px;
			line-height: 28px;
			text-decoration: none;
			color: #fff;
			}
		* html #nav-main a { display: inline-block; }
		#nav-main a:hover { color: #ba8748; }
			
			#sec-your-home #nav-main li.your-home,
			#sec-collections #nav-main li.collections,
			#sec-find-home #nav-main li.find-home,
			#sec-find-community #nav-main li.find-community,
			#sec-gallery #nav-main li.gallery,
			#sec-news #nav-main li.news,
			#sec-about #nav-main li.about,
			#sec-contact #nav-main li.contact {
				background: url(i/bgNavMainOnRt.png) no-repeat 100% 0;
				}
			#sec-your-home #nav-main li.your-home a,
			#sec-collections #nav-main li.collections a,
			#sec-find-home #nav-main li.find-home a,
			#sec-find-community #nav-main li.find-community a,
			#sec-gallery #nav-main li.gallery a,
			#sec-news #nav-main li.news a,
			#sec-about #nav-main li.about a,
			#sec-contact #nav-main li.contact a {
				padding-bottom: 6px;
				color: #000;
				background: url(i/bgNavMainOnLf.png) no-repeat 0 0;
				}

/* @end nav-main
------------------------------------- */


/* @group nav-sub
========================================== */

#nav-sub {
	clear: both;
	background: #BA8748;
	height: 14px;
	}
	#nav-sub ul {
		width: 850px;
		margin: 0 auto;
		padding: 0;
		height: 14px;
		list-style: none;
		font-size: 90%;
		line-height: 1em;
		text-transform: uppercase;
		}
		#nav-sub li {
			float: left;
			margin: 0 28px 0 0;
			color: #8e6737;
			}
			#nav-sub a {
				display: block;
				height: 14px;
				color: #300;
				text-decoration: none;
				}
			* html #nav-sub a { display: inline-block; } /* ie6 hack */

				#nav-sub a:hover { text-decoration: underline; }

/* @end nav-sub
------------------------------------- */



/* @group banner, bannersmall, headline
========================================== */

#banner {
	height: 350px;
	position: relative;
	border-bottom: 1px solid #BA8748;
	background: #8E6840 url(i/bgBanner.png) repeat-x 50% 0;
	}
#bannersmall {
	height: 129px;
	position: relative;
	border-bottom: 1px solid #BA8748;
	background: #8E6840 url(i/bgBanner.png) repeat-x 50% 0;
	}

	#headline {
		height: 133px;
		background: #5C442A url(i/bgHeadline.png) repeat-x 50% 0;
		}
		#headline h2 {
			width: 850px;
			margin: 0 auto;
			position: relative;
			top: 56px;
			color: #000;
			font-weight: normal;
			text-transform: uppercase;
			}
			#headline h2 span {
				position: absolute;
				left: -9999px;
				}
			
			/* ie6 hacks */
			* html #headline h2 { height: 20px; }
			* html #headline h2 span { position: relative; left: 0; }
			* html #headline h2 img { display: none; }
		
		#headline h3 {
			width: 850px;
			margin: 0 auto;
			position: relative;
			top: 0px;
			color: #000;
			font-weight: normal;
			text-transform: uppercase;
			}
			#headline h3 span {
				position: absolute;
				left: -9999px;
				}
			
			/* ie6 hacks */
			* html #headline h3 { height: 38px; }
			* html #headline h3 span { position: relative; left: 0; }
			* html #headline h3 img { display: none; }

/* @end banner, bannersmall, headline
------------------------------------- */



/* @group Teaser
========================================== */
/* parent element: #banner */

#teaser {
	height: 221px;
	position: relative;
	}
	#teaser ul {
		width: 850px;
		height: 217px;
		padding: 0;
		margin: 0 auto;
		list-style: none;
		}
		#teaser li {
			float: left;
			width: 278px;
			height: 217px;
			position: relative;
			margin: 0;
			}
			#teaser li.alt { width: 294px; }

			#teaser li h3 {
				position: absolute;
				left: -9999px;
				margin: 0;
				}

/* @end Teaser
------------------------------------- */



/* @group Slideshow
========================================== */
/* parent element: #banner */

#slides {
	width: 864px;
	height: 350px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
	background: url(i/bgSlides.png) repeat-y 0 0;
	}
	ul.pics {
		width: 850px;
		height: 350px;
		overflow: hidden;
		margin: 0 7px;
		padding: 0;
		position: relative;
		list-style: none;
		}
		ul.pics li {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			}

	#control-bar {
		width: 850px;
		height: 27px;
		position: absolute;
		z-index: 10;
		bottom: 0;
		left: 7px;
		background-image: url(i/bgControls.png);
		}
		#audio {
			float: right;
			padding: 6px 11px 0 0;
			font-size: 80%;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: #fff;
			}
	#slide-numbers {
		position: absolute;
		z-index: 15;
		bottom: 0;
		left: 45px;
		}
		
	.slide-nav {
		padding: 0 0 5px 3px;
		margin: 0;
		list-style: none;
		font-size: 100%;
		font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
		text-transform: uppercase;
		}
		.slide-nav a {
			float: left;
			margin: 0;
			}
			.slide-nav a {
				display: block;
				width: 16px;
				height: 16px;
				padding: 1px;
				margin: 0 4px;
				line-height: 16px;
				text-align: center;
				color: #fff;
				text-decoration: none;
				}
			.slide-nav a:hover { color: #BA8748; }

			.slide-nav a.activeSlide {
				padding: 0;
				text-decoration: none;
				border: 1px solid #BA8748;
				}
			
			#pause-play {
				position: absolute;
				z-index: 15;
				bottom: 0;
				left: 10px;
				}
				#pause-play a { text-indent: -9999px; }
				a#slides-play { background: url(i/iconPlay.png) no-repeat 50% 50%; display: none; }
				a#slides-pause { background: url(i/iconPause.png) no-repeat 50% 50%; }
				
				* html a#slides-play { background: url(i/iconPlay.gif) no-repeat 50% 50%;} /* ie6 hack */
				* html a#slides-pause { background: url(i/iconPause.gif) no-repeat 50% 50%; } /* ie6 hack */

/* @end Slideshow
------------------------------------- */



/* @group Footer
========================================== */
/* parent element: #main */

#footer {
	clear: both;
	}
	ul#nav-foot {
		width: 850px;
		position: relative;
		font-size: 80%;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		padding: 10em 0 2em;
		margin: 0 auto;
		}
		#nav-foot li {
			display: inline;
			padding-right: 14px;
			}
			#nav-foot a {
				color: #BA8748;
				text-decoration: none;
				}
				#nav-foot a:hover { border-bottom: 1px dotted #BA8748; }
				
		li#nav-user {
			position: absolute;
			right: 0;
			bottom: 0;
			padding: 0;
			}
			li#nav-user ul {
				padding: 0 0 1em;
				margin: 0;
				list-style: none;
				}
				li#nav-user li {
					display: block;
					text-align: right;
					padding: 5px 0 5px 35px;
					margin: 0;
					}
				li#nav-user li.homeowner { background: url(i/iconKey.gif) no-repeat 0 50%; border-bottom: 1px dotted #000; }
				li#nav-user li.partner { background: url(i/iconLock.gif) no-repeat 0 50%; }
				
				li#nav-user a:hover { color: #900; border: none; }

/* @end Footer
------------------------------------- */



/* @group Fineprint
========================================== */
/* parent element: #page; occurs after sibling element: #main */

#fineprint {
	position: relative;
	padding: 1.4em 0 3.3em;
	border-top: 1px solid #DCC3A3;
	}
	#fineprint .wrap {
		width: 850px;
		margin: 0 auto;
		}
		#fineprint p {
			float: left;
			padding: 1em 0 0;
			font-size: 80%;
			font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			color: #666;
			}
			#fineprint p span {
				padding: 3px 20px 2px 0;
				background: url(i/iconEHO.png) no-repeat 100% 50%;
				}
			* html #fineprint p span { background: url(i/iconEHO.gif) no-repeat 100% 50%; }
		
		#fineprint address {
			display: block;
			float: right;
			width: 120px;
			height: 21px;
			}
			#fineprint address a {
				display: block;
				width: 120px;
				height: 21px;
				text-indent: -9999px;
				background-image: url(i/logo-small.gif);
				}

/* @end  Fineprint
------------------------------------- */



/* @group Contact Info DL
========================================== */

dl.contact dd.hours {
	padding: 0 0 1em;
	border-bottom: 1px dotted #000;
	margin: 0 0 .718em;
	}
dl.contact dd.map img.map {
	display: block;
	margin: 1em auto;
	border: 1px solid #ba8748;
	}
dl.contact dd.map ul {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
	}
	dl.contact dd.map li {
		float: left;
		font-size: .728em;
		font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
		text-transform: uppercase;
		}
		dl.contact dd.map li a {
			display: block;
			padding-left: 16px;
			margin-right: 16px;
			color: #ba8748;
			text-decoration: none;
			}
		dl.contact dd.map li a:hover { text-decoration: underline; }
		
			dd.map li.print a { background: transparent url(i/icon-print.png) no-repeat 0 50%; }
			dd.map li.zoom a { background: transparent url(i/icon-zoom.png) no-repeat 0 50%; }
			dd.map li.google a { background: transparent url(i/icon-google-favicon.png) no-repeat 0 50%; }
		
dl.contact strong {
	font-size: 81.819%;
	font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #000;
	}

/* @end Contact Info DL
------------------------------------- */



/* @group Bio DL
========================================== */

dl.bio {
	width: 100%;
	min-height: 166px;
	margin: 0 0 .4em;
	}
* html dl.bio { height: 166px; } /* ie6 hack */

dl.bio dt {
	float: right;
	width: 396px;
	margin: 0 0 .2em 0px;
	line-height: 1.1em;
	}
dl.bio dt strong { color: #900; }

dl.bio dd {
	float: right;
	width: 396px;
	margin: 0;
	padding: 0 0 .5em;
	}

dl.bio dd.pic {
	width: 132px;
	float: left;
	margin: 0;
	}
	
dl.bio dd.pic img {
	max-width: 130px;
	border: 1px solid #ba8748;
	margin-bottom: 6px;
	}
	
dl.bio dd.noborder img {
	max-width: 130px;
	border: 2px solid #ba8748;
	}

dl.bio dd strong {
	font-size: 81.819%;
	font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #000;
	}

dl.bio dd ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

dl.bio dd li {
	margin: 0;
	}
	
dl.bio a {
	color: #ba8748;
	text-decoration: none;
	}

/* @end Bio DL
------------------------------------- */



/* @group FORM - Contact Form
========================================== */

#form-contact {
	padding: 1.2em 0 0;
	}

#form-contact fieldset.divider {
	padding: 0 0 .9em;
	margin: 0 0 1.8em;
	border-bottom: 1px dotted #000;
	}

#form-contact li {
	margin: 0;
	}

#form-contact label {
	margin: 0 0 .889em;
	}

#form-contact input.text,
#form-contact textarea {
	width: 252px;
	}
#form-contact textarea {
	margin: 0 0 1.084em;
	height: 72px;
	}
#form-contact input.textSmall { width: 106px; }

#form-contact .columns2 div.right {
	margin: 0 2px 0 0;
	width: auto;
	}
	
#form-contact button {
	display: block;
	width: 116px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: none;
	text-indent: -9999px;
	background: transparent url(i/btn-submit.png) 0 0;
	}

/* @end FORM - Contact Form
------------------------------------- */



/* @group Ornaments
========================================== */

div.roc {
	width: 100%;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	background: transparent url(i/roc.png) repeat-x 50% 0;
	}
#fineprint div.roc {
	top: -5px;
	/*border-bottom: 1px solid #DCC3A3;*/
	background: transparent url(i/rocUp.png) repeat-x 50% 0;
	}
#teaser div.roc {
	height: 5px;
	top: -4px;
	background: transparent url(i/rocWhite.png) repeat-x 50% 0;
	}

/* ie6 hacks */
* html div.roc { background: transparent url(i/roc.gif) repeat-x 50% 0; }
* html #fineprint div.roc { background: transparent url(i/rocUp.gif) repeat-x 50% 0; top: -4px; }
* html #teaser div.roc { background: transparent url(i/rocWhite.gif) repeat-x 50% 0; }


#badge { /* parent: #banner; usu. after sibling: #slides */
	width: 113px;
	height: 142px;
	position: absolute;
	top: 79px;
	right: 0;
	z-index: 100;
	}


/* @end Ornaments
------------------------------------- */


/* @group CLEAR FIX
========================================== */

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix,
#content,
.columns2,
.columns3,
.columns4 {
	display: inline-block;
	}

.clearfix:after,
#content:after,
.columns2:after,
.columns3:after,
.columns4:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

* html .clearfix,
* html #content,
* html .columns2,
* html .columns3,
* html .columns4 {
	height: 1%;
	}

.clearfix,
#content,
.columns2,
.columns3,
.columns4 {
	display: block;
	}

/* @end CLEAR FIX
------------------------------------- */

/* EOF */