/*------------------------------------------------------------------
Title: Arcadia Properties, Inc.
Created by: Chris Arnold, LIMBER > limbercreative.com
-------------------------------------------------------------------

[Table of contents]

1. Reset Styles
2. Utilities
3. Aesthetics
		3.1. Headers / h1, h2, h3
		3.2. Links / a:link
		3.3. Navigation / Lists
		3.4. Footer / #footer
		3.5. Form Elements / form
		3.6. Text / p, blockquotes
4. Structure & Layout
		4.1. Curtain Slider
5. Page Specific

/*---------------- 1. RESET STYLES ---------------*/
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,
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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
:focus {outline: 0;}
body {line-height: 1; color: black; background: white; font-size: 62.5%; font-family: Verdana, Geneva, sans-serif;}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {}
blockquote, q {quotes: "" "";}
/* IE 5.5+ tranparent png fix */
img, div {behavior: url(ie/iepngfix.htc)}
 
/*---------------- 2. UTILITIES ---------------*/

body{
	min-width: 960px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: .85em;
	line-height: 1.5em;
	color: #666;
	padding:0 0 80px 0; /* For footer */
	background: #fbfcf8 url(../i/bg-body.jpg) top center no-repeat;
}

	strong {font-weight: bold;}
	em {font-style: italic;}
	.clear {clear: both;}
	 
/*---------------- 3. AESTHETICS ---------------*/
	 
	/* --- 3.1 HEADERS --- */
	
	h1 {font: 160% Lucida Sans, Arial, Helvetica, sans-serif; line-height: 1.6em; color: #95c0b7;}
	h2 {font: 110% Lucida Sans, Arial, Helvetica, sans-serif; line-height: 1.4em; color: #567870;}
	h3 {font-size: 110%; color: #444; margin-top: 10px;}
	h4 {font-size: 110%; color: #444; margin-top: 10px; border-bottom: #d7e0db 1px solid;}

	/* --- 3.2 LINKS --- */

	a:link, a:visited {text-decoration: none; color: #cc9966;}
	a:hover, a:active {text-decoration: none; color: #ab7f52;}
	
	#primary-nav a:link, #primary-nav a:visited,
	#secondary-nav a:link, #secondary-nav a:visited {text-decoration: none; color: #bcb29c;}
	#primary-nav a:hover, #primary-nav a:active,
	#secondary-nav a:hover, #secondary-nav a:active {text-decoration: none; color: #55534f;}

	#copyright a:link, #copyright a:visited {text-decoration: none; color: #999;}
	#copyright a:hover, #copyright a:active {text-decoration: none; color: #ab7f52;}
			
	/* --- 3.3 NAVIGATION / LISTS --- */
	
	#primary-nav, #secondary-nav{font: 105% Lucida Sans, Arial, Helvetica, sans-serif; line-height: 1.6em; letter-spacing: .02em;}
	#secondary-nav{font-size: 95%; line-height: 1.75em;}
	
	.home #primary-nav #primary-one a, .about #primary-nav #primary-two a, .people #primary-nav #primary-three a,
	.projects #primary-nav #primary-four a, .renovation #primary-nav #primary-five a, .contact #primary-nav #primary-six a,
	#secondary-nav #current a{color: #55534f;}

	/* --- 3.4 FOOTER --- */ 	
	
	#footer{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background: url(../i/bg-footer.png) no-repeat;
	}
	 
	@media screen{
		body>#footer{
			position: fixed;
		}
	}
	
	* html body{overflow:hidden;} 
	* html #wrap{height:100%; overflow:auto;}
	 
	/* --- 3.5 FORM ELEMENTS --- */
	
 	/* --- 3.6 TEXT --- */
	
	p{margin: .5em 0;}
	.thumbs-text{font: 85% Lucida Sans, Arial, Helvetica, sans-serif; color: #55534f;}
	.gallery{font: 80% Lucida Sans, Arial, Helvetica, sans-serif;}
	 
/*---------------- 4. STRUCTURE & LAYOUT ---------------*/

#header{
	margin: 0 auto;
	height: 270px;
	width: 960px;
}

#logo{
	position: relative;
	width: 160px;
	height: 54px;
	top: 30px;
}

#wrap{
	margin: 0 auto;
	width: 940px;
	padding: 30px 10px 30px 10px;
}

.four-col-1{
	float: left;
	width: 100px;
	margin: 0 20px 0 0;
	border-right: #d7e0db 1px solid;
}

.four-col-2{
	float: left;
	width: 138px; /* 2px accomodation for two right borders */
	margin: 0 36px 0 0;
	border-right: #d7e0db 1px solid;
}

.four-col-3{
	float: left;
	width: 420px;
	margin: 0 32px 0 0;
}

.four-col-4{
	float: left;
	width: 180px;
	margin: 42px 0 0 0;
}

.bio-img{
	float: left;
	margin: 0 12px 0 0;
}

#details-wrap{
	position: relative;
	width: 600px;
	left: 188px;
}

#energystar{
	float: left;
	width: 50px;
	height: 40px;
	margin: 30px 16px 0 0;
}

#bbb{
	float: left;
	width: 30px;
	height: 40px;
	margin: 30px 12px 0 0;
}

#copyright{
	float: left;
	width: 400px;
	margin: 42px 0 0 0;
	font: 80% Lucida Sans, Arial, Helvetica, sans-serif;
	line-height: 1.4em;
}
	
/* Work Thumbs and List */

.work-thumbs{
	position: relative; /* Positioned for the magnify img */
	float: left;
	margin: 10px 16px 10px 0;
	width: 190px;
	height: 130px;
	background-color: #bbddd6;
	text-align: center;
	font-size: 90%;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-bottom: 1px solid #a4c5be;
}

.work-thumbs:hover{background-color: #acd5cc;}
.work-thumbs img{margin-top: 8px;}
.magnify{position: absolute; top: 72px; left: 4px;}

/* Work Pages */

#work-wrap{
	float: left;
	width: 410px;
	height: 300px;
	margin: 10px 20px 18px 0;
	background-color: #bbddd6;
	text-align: center;
	font-size: 90%;
	padding-top: 10px;
	border-bottom: 1px solid #a4c5be;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}


#work{
	width: auto;
	overflow: hidden;
	margin: 0;
	margin: 0 10px 0 10px;
}

#work ul{
	padding: 0;
	margin: 0;
	list-style: none;
	overflow: hidden;
}

#work ul li{
	width: 390px;
	height: 260px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-image: none;
}

#work-slider-toggle{
	margin-top: 10px;
	text-align: center;
}

	/* ----------- 4.1 Curtain Slider; massively modified from Nettuts+ ----------- */
	/* ----- http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery ----- */
	
	#curtain-wrap{ /* Wraps all curtain elements */
		position: relative;
		margin: 0 auto;
		width: 730px;
		top: 0px;
	}
	
	#curtain-top{ /* Wraps child elements and buttons */
		position: absolute;
		width: 730px;
		text-align: center;
		left: 0;
		bottom: 0; /* Important, sets the slide from the bottom */
	}
	
	#curtain{ /* Keeping the curtain hidden */
		margin: 0 auto;
		width: 730px;
		position: relative;
		overflow: hidden;
		text-align: left;
	}
	
	#curtain-content{ /* Defines content area and color */
		position: absolute;
		width: 730px;
		height: 100%;
		background: #e6dfc2;
		border-top: #dcd7ba 4px solid;
		filter:alpha(opacity=70);
		-moz-opacity:0.70;
		-khtml-opacity: 0.70;
		opacity: 0.70;
	}
	
	.curtain_button{
		margin: 0 auto;
		position: relative;
		top: 0px;
		width: 75px;
		height: 25px;
		cursor: pointer;
	}
	
	#gallery-wrap{
		position: relative;
		margin: 0 auto;
		margin: 24px 0 0 50px;
	}
	
	.gallery{
		float: left;
		width: 175px;
		text-align: center;
		margin: 0 50px 0 0;
	}

	.gallery img{margin-bottom: 4px;}