/* ---------------------------------------------
Screen Stylesheet for http://www.ForesideArchitects.com
Updated:	04/27/08 - [JDB}
-------------------------------------------------
	::TOC::
	Resets
	Defaults
	Typography
	Template
	Image Replacements
	Links
	Navigation
	Forms
	Content
/* ---------- ::Resets:: --------------------- */
body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}
fieldset, table {
border:none;
}
table {
word-wrap:break-word; /* will not validate IE only */
overflow:hidden;
}
/* ---------- ::Defaults:: --------------------- */
html { 
font-size:100.01%; 
height: 101%;
}
body { 
margin:0 auto;
height:100%;
font:62.5%/1.6em 'Century Gothic',Arial,Tahoma,Geneva,Helvetica,sans-serif;
background:#7f939a url(../images/bg.jpg) 0 0 repeat-x;
color:#3e4446;
}
/* ---------- ::Typography:: --------------------- */
blockquote, address, pre {
margin:.5em 2em;
}
h1 {
font-size:14px;
color:#006993;
}
h2 {
margin:.4em 0 .6em;
text-transform:uppercase;
font-size:12px;
color:#9aaab1;
}
h3 {
text-transform:uppercase;
font-size:10px;
color:#006993;
}
li, p {
font-size:12px;
}
p, li {
margin-bottom:1.4em;
}
/* ---------- ::Template:: --------------------- */

#wrap {
margin:0 auto;
width:826px;
min-height:775px;
background:url(../images/wrap.png) center top repeat-y;
}
	#wrap .inner {
	width:747px;
	margin:0 auto;
	min-height:360px;
	}
#masthead,#content, #footer {
position:relative;
left:1px;
}
#masthead {
width:747px;
height:99px;
}
#content {
clear:both;
width:747px;
min-height:542px;
margin:0 auto;
overflow:visible;
}

#right {
float:right;
width:527px;
min-height:542px;
height:auto;
background:transparent url(../images/right_bg.jpg) 0 0 repeat-x;
color:#3e4446;
}

	#title_img {
	width:527px;
	height:182px;
	}
	
	#right .inner {
	width:499px;
	min-height:332px;
	padding:14px;
	font-size:12px;
	background:transparent;
	color:#3e4446;
	overflow-y:auto;
	}

#left {
float:left;
width:220px;
min-height:542px;
margin:0 auto;
}
	#left #menu {
	height:182px;
	}

	#left .inner {
	width:174px;
	min-height:355px;
	margin:0 auto;
	padding:10px 0 0 0;
	}

#footer {
clear:both;
margin:0 auto;
width:747px;
height:87px;
text-align:center;
color:#000;
}
#footer p {
margin:0 auto;
padding:.2em 0 0;
font-size:11px;
}
#footer p strong {
font-size:14px;
color:#006993;
}
#footer p span {
text-transform:uppercase;
}
#bottom {
margin:0 auto;
width:100%;
height:3px;
background:transparent url(../images/bottom.gif) 0 0 repeat-x;
}
/* ---------- ::Image Replacements:: --------------------- */
#masthead h1 {
position:relative;
float:left;
top:0;
width:318px;
height:99px;
margin:0;
padding:0;
line-height:normal;
font-size:10px;
}
#masthead h1 img {
position:absolute;
top:0;
left:0;
width:318px;
height:99px;
}
#footer h4 {
position:relative;
top:0;
width:747px;
height:32px;
margin:0;
padding:0;
line-height:normal;
font-size:10px;
}
#footer h4 img {
position:absolute;
top:0;
left:0;
width:747px;
height:32px;
}


/* ---------- ::Links:: --------------------- */
a, a:visited {
text-decoration:underline;
color:#006993;
}
a:active, a:focus, a:hover {
text-decoration:none;
}
a img {
border:0;
}

#left a, #left a:visited {
color:#8699a1;
}
#left a:hover {
text-decoration:underline;
color:#006993;
}
/* ---------- ::Navigation:: --------------------- */

/* :: Top Menu :: */
#masthead ul {
position:relative;
top:65px;
float:right;
width:165px;
height:29px;
padding: 0 14px 0 0;
margin: 0;
list-style: none;
}
#masthead li {
float: left;
padding:0 0 0 3px;
}
#masthead a {
text-decoration:none;
font-size:12px;
font-weight:bold;
color:#787e81;
}
#masthead a:focus, #masthead a:active, #masthead a:hover {
color:#006993;
}

/* :: Main Menu :: */
#menu a {
display:block;
width:220px;
height:31px;
background-position:0 0;
background-repeat:no-repeat;
}
#menu a span, #menu a dfn {
position:absolute;
top:-999em;
left:-999em;
}
#menu a#about {
background-image:url(../images/about.jpg);
}
#menu a#commercial-architecture {
background-image:url(../images/commercial.jpg);
}
#menu a#residential-architecture {
height:30px;
background-image:url(../images/residential.jpg);
}
#menu a#interior-design {
height:30px;
background-image:url(../images/interior.jpg);
}
#menu a#planning {
background-image:url(../images/planning.jpg);
}
#menu a#sustainability {
height:29px;
background-image:url(../images/sustainability.jpg);
}
#menu a:focus, #menu a:active, #menu a:hover {
background-position:-220px 0;
}

/* :: Side Menu :: */
#left #leftnav a dfn {display:none;}
#left #leftnav a {color:#006993;}
#left #leftnav a:hover, #left #leftnav a.active {color:#8699a1;}
/* ---------- ::Forms:: ---------------------- */
input, label {
vertical-align:middle;
line-height:normal;
}
label {
cursor:pointer;
text-align:right;
}
input, select, textarea {
font-size:1.2em;
font-family:inherit;
}
input, textarea {
padding:.2em;
}
form#m3moduleform_1, #contactform {
margin:0 auto;
width:400px;
}
#contactform div {
clear:both;
display:block;
padding:.4em 0;
width:400px;
}
#contactform legend {
display:none;
}
#contactform label, #contactform input, #contactform div.captcha img {
display:block;
float:left;
}
#contactform label {
padding-right:1em;
width:30%;
}
#contactform input,#contactform textarea {
width:60%;
}
#contactform textarea {
height:50px;
}
	/* Multiple Checkbox, Radio Buttons */
	#contactform div div {
	clear:none;
	float:right;
	display:block;
	padding:0;
	width:60%;
	}
	#contactform div div label {
	display:inline;
	float:none;
	width:60%;
	}
	#contactform div div input {
display:inline;
	float:none;
	width:10%;
	}
#contactform div.captcha img {
margin:-6px auto 0 25px;
}
#contactform div.captcha input {
margin:0 auto 0 25px;
width:188px;
}
#contactform div.submit input {
margin:0 auto 0 25px;
width:198px;
}
#contactform div.submit input.fbsubmit {
font-weight:bold;
border:1px solid #80939A;
background-color:#006993;
color:#A5B3AB;
}
/* ---------- ::Content Styles:: --------------------- */
#left, #left p {
font-size:10px;
color:#8699a1;
}
#left li {
list-style-type:none;
margin-bottom:7px;
padding:0 10px;
font-size:10px;
font-weight:bold;
background:transparent url(../images/bullet.gif) 0 4px no-repeat;
color:#8699a1;
}
#left .block {
margin-bottom:30px;
}
}
#right ul {
margin-left:5px;
margin-bottom:1em;
}
#right li {
padding:0 0 0 12px;
margin-bottom:.4em;
list-style-type:none;
line-height:normal;
background:transparent url(../images/bullet_dot.gif) 0 3px no-repeat;
}

/* ---------- ::Portfolio Pages:: --------------------- */

#portfolio #right {
background:transparent url(../images/interior_bg.jpg) 0 0 repeat-x;
}
	#portfolio #right .inner {
	min-height:514px;
	padding:14px 8px;
		overflow-y:visible;
	}
#portfolio #right h1 {
margin-top:10px;
font-size:24px;
}
#portfolio #right h2 {
font-size:14px;
color:#006993;
text-transform:none;
}
/* :: photo gallery :: */
.galleria{float:right;list-style:none;width:120px;margin-top:16px;}
#right ul.galleria {margin-left:0;}
.galleria li{width:60px;height:60px;overflow:hidden;float:left;margin:0 0 10px 0;}
#right .galleria li{background-image:none;padding:0;}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
span.caption {display:none;}
* html .galleria li div span{width:400px} /* MSIE bug */
.galleria_container {display:block;float:left; width:360px;height:275px;margin:20px auto 0;}
.galleria img, .galleria_container img {border:1px solid #006993;}