* {
	margin:0;
	padding:0;
}

/* Begin Structure */
body {
	font-size:62.5%;
	font-family:Trebuchet, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:.2em;
	background:#fff url(images/bg-interface.gif) no-repeat 0 0;
	color:#333;
	text-align:left; 
}

/*body.portfolio {
	background:#fff url(images/bg-interface-portfolio.gif) no-repeat 0 0;
}*/
	
#wrapper {
	font-size:12px;
	min-height:571px;
	position:relative;
}

#sidebar {
	font-size:11px;
	left:595px;
	display:none;
	position:absolute;
	top:225px;
	z-index:100;
}

.about #sidebar.about {
	display:block;
}

address {
	color:#B9D989;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	letter-spacing:2px;
	position:absolute;
	left:595px;
	top:80px;
}

#motto {
	color:#B9D989;
	left:20px;
	line-height:1.2em;
	position:relative;
	text-align:right;
	top:207px;
	width:85px;
}

#motto p {
	margin-bottom:15px;
}

body.portfolio #motto {
	display:none;
}

/* End Structure */

/*	Begin Headers */
h1 {
	left:31px;
	position:absolute;
	top:39px;
	}
	
h1 a {
	display:block;
	height:124px;
	text-indent:-9999em;
	width:133px;
}

#content h2 {
	color:#ece6e3;
	letter-spacing:4px;
	left:247px;
	font-size:28px;
	font-weight:normal;
	text-align:left;
	text-transform:lowercase;
	position:absolute;
	top:121px;
}
	
#content h2.alt {
	left:398px;
}

body.portfolio #content h2 {
	top:101px;
}
	
#content h4 {
	color:#80A7C5;
	letter-spacing:2px;
	left:279px;
	font-size:11px;
	font-weight:normal;
	text-align:left;
	position:absolute;
	top:155px;
}

#content h4 a,
#content h4 a:visited {
	color:#80A7C5;
	text-decoration:none;
}

body.portfolio #content h4 {
	color:#B9D989;
	top:135px;
}

body.contact #content h4 {
	left:200px;
}

body.contact #content h4 strong {
	color:#B9D989;
	font-weight:normal;
}

h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}

#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
	}

h3 {
	padding: 0;
	margin: 30px 0 0;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}
/* End Headers */

/* nav */

ul#nav {
	left:205px;
	list-style-type:none;
	position:absolute;
	top:0px;
}

ul#nav li {
	float:left;
	height:150px;
}

/* IE correction - tighten up vspace */
*html ul#nav li {
	display:inline;
	position:relative;
}

ul#nav li li {
	height:auto;
}

ul#nav li a {
	display:block;
	float:left;
	height:42px;
	outline:none;
	text-indent:-9999em;
}

ul#nav a.about {
	background:url(images/bg-nav_01.gif) no-repeat 0 0;
	width:88px;
}

ul#nav a.faq {
	background:url(images/bg-nav_02.gif) no-repeat 0 0;
	width:74px;
}

ul#nav a.portfolio {
	background:url(images/bg-nav_03.gif) no-repeat 0 0;
	width:108px;
}

ul#nav a.clients {
	background:url(images/bg-nav_04.gif) no-repeat 0 0;
	width:111px;
}

ul#nav a.contact {
	background:url(images/bg-nav_05.gif) no-repeat 0 0;
	width:63px;
}

ul#nav li a:hover,
ul#nav li:hover a, /* to keep the parent item "hovered" */
ul#nav li.sfhover a /* to keep the parent item "hovered" */ {
	background-position:0 -42px;
}

.about ul#nav a.about,
.portfolio ul#nav a.portfolio,
.faq ul#nav a.faq,
.clients ul#nav a.clients,
.contact ul#nav a.contact {
	background-position:0 -84px;
}

ul#nav ul { /* second-level lists */
	clear: both;
	list-style-type:none;
	left:-999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	position: absolute;
	height: auto;
	font-weight: normal;
	margin:0 0 0 14px;
	padding:0;
	top:43px;
	z-index:100;
}

ul#nav li:hover ul, 
ul#nav li.sfhover ul { /* lists nested under hovered list items - uses javascript for IE to fudge psuedo-classes */
	left:auto;
	z-index:101;
}

/* IE correction - need to declare left coord */
*html ul#nav li.sfhover ul {
	left:0;
}

ul#nav ul li {
	display:block;
	float:none;
	line-height:1.2em;
	padding:2px 0 0 0;
}

ul#nav ul li a {
	float: none;
}

ul#nav li ul a {
	background:none;
	color:#A18475;
	display:inline;
	float:none;
	font-size:11px;
	height:auto;
	letter-spacing:2px;
	text-align:center;
	text-decoration:none;
	text-transform:none;
	text-indent:0;
	width:auto;
}

ul#nav li ul a:active { 
	outline:dotted 1px #999;
}

ul#nav li ul a:hover {
	color:#b9d989;
}

/* set "active" subnav */
.about.one #about a.one,
.about.two #about a.two,
.about.three #about a.three,
.about.four #about a.four,
.faq.one #faq a.one,
.faq.two #faq a.two,
.portfolio.one #portfolio a.one,
.portfolio.two #portfolio a.two,
.clients.one #clients a.one,
.clients.two #clients a.two
{
	color:#b9d989;
}

/* show the subnavs for the "active" section 
.about ul#nav li#about ul.subnav,
.portfolio ul#nav li#portfolio ul.subnav,
.faq ul#nav li#faq ul.subnav,
.clients ul#nav li#clients ul.subnav,
.contact ul#nav li#contact ul.subnav {
	left:auto;
}*/

/* local navs */

ul.localnav {
	font-size:11px;
	line-height:1.2em;
	list-style-type:none;
	width:96px;
}

ul.localnav li,
#sidebar li {
	margin:9px 0 15px 0;
}

ul.localnav li a,
#sidebar li a {
	color:#A18475;
	text-decoration:none;
}

ul.localnav li a:hover,
#sidebar li a:hover {
	color:#b9d989;
}

/* copy */

.copy {
	font-size:11px;
	height:375px;
	left:195px;
	letter-spacing:1px;
	padding-right:10px;
	position:absolute;
	overflow:auto;
	top:207px;
	width:425px;
}

.about .copy {
	width:305px;
}

.about.one .copy {
	left:180px;
	top:214px;
	width:auto;
}

.clients.one .copy {
	height:400px;
	padding:0;
	width:625px;
}

.contact .copy {
	height:auto;
}

.copy p,
.copy dl,
.copy ul,
#sidebar p {
	color:#A18475;
	line-height:19px;
}

.copy p,
#sidebar p {
	margin:0 0 12px 0;
}

.copy ul {
	list-style-type:disc;
}

.copy ul li {
	background:url(images/bg-bullet.gif) no-repeat 0 11px;
	padding:5px 0 5px 10px;
}

.copy dt,
.copy b,
.copy h3,
.copy a,
#sidebar a {
	color:#4A82AC;
	font-weight:normal;
}

.copy a,
#sidebar a {
	text-decoration:none;
}

.copy a:hover,
#sidebar a:hover {
	color:#b9d989;
}	

.copy h3 {
	font-size:12px;
	font-weight:normal;
	margin:0;
	padding:0;
}

.copy dd {
	margin:0 0 12px 0;
}

.first {
	float:left;
	padding-right:22px;
	width:43%;
}

.second {
	float:left;
	padding-left:22px;
	width:43%;
}

/* portfolio */

#portfolio-screen {
	background:#fff;
	border-right:1px solid #cad9b2;
	border-top:1px solid #cad9b2;
	display:block;
	position:absolute;
	left:0px;
	top:191px;
	width:537px;
	height:353px;
	z-index:1;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
}

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
	display:none;
}
.tabberlive {

}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/

ul.tabbernav {
	color:#A18475;
	font-size:11px;
	line-height:1.2em;
	list-style-type:none;
	left:575px;
	position:absolute;
	top:182px;
	width:13em;
}

.portfolio.two ul.tabbernav {
	width:17.5em;
}

ul.tabbernav li {
	margin:9px 0 15px 0;
}

ul.tabbernav li a {
	color:#A18475;
	text-decoration:none;
}

ul.tabbernav li a:hover {
	color:#b9d989;
}

ul.tabbernav li.tabberactive a {
	color:#4A82AC;
}

.tabberlive .tabbertab .tabberlive ul.tabbernav {
	left:auto;
	right:30px;
	top:0;
	z-index:3;
	width:auto;
}

.tabberlive .tabbertab .tabberlive ul.tabbernav,
ul.steps {
	height:15px;
	letter-spacing:normal;
	list-style-type:none;
	font-size:15px;
}

.tabberlive .tabbertab .tabberlive ul.tabbernav li {
	display:inline;
	margin:0 3px;
}

ul.steps {
	line-height:15px;
	height:15px;
	position:absolute;
	right:0;
	top:3px;
	width:102px;
}

ul.steps.two {
	width:88px;
}

ul.steps.four {
	width:116px;
}

ul.steps.five {
	width:132px;
}

ul.steps.six {
	width:146px;
}

ul.steps li {
	display:block;
	text-align:right;
}

ul.steps li.first {
	text-align:left;
}

.tabberlive .tabbertab .tabberlive ul.tabbernav li a,
.tabberlive .tabbertab .tabberlive ul.tabbernav li a:visited,
ul.steps li a,
ul.steps li a:visited {
	color:#b9d989;	
	text-decoration:none;
}

.tabberlive .tabbertab .tabberlive ul.tabbernav li.tabberactive a,
ul.steps li a.hi {
	color:#4A82AC;
}

*html ul.steps img {
	margin-bottom:3px;
	vertical-align:middle;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
	position:absolute;
	left:0px;
	top:166px;
	width:537px;
	height:379px;
	z-index:2;
	text-align:right;
}

.tabberlive .tabbertab .tabberlive .tabbertab {
	left:0;
	top:0;
	width:537px;
	height:auto;
}

/* IE correction - needs to zero out the left coords */
*html .tabberlive .tabbertab .tabberlive .tabbertab {
	left:0;
}

.tabberlive .tabbertab img.p {
	margin:65px 45px 0 0;
}

.tabberlive .tabbertab h2 {
	color:#a18475;
	font-size:12px;
	font-weight:bold;
	left:0;
	letter-spacing:2px;
	margin:0;
	padding:0;
	position:absolute;
	text-align:right;
	top:334px;
	width:420px;
}

.tabberlive .tabbertab h4 {
	color:#a18475;
	overflow:hidden;
	font-size:12px;
	font-weight:bold;
	left:0;
	letter-spacing:2px;
	margin:0;
	padding:0;
	position:absolute;
	text-align:right;
	top:334px;
	width:490px;
}

.tabberlive .tabbertab h4 strong {
	color:#b9d989;
}  

.tabberlive .tabbertab h4 b {
	color:#4A82AC;
}
  
.tabberlive .tabbertab {

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 	display:none;
}
.tabberlive .tabbertab h3 {
	display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}

/* example of nexted tab targetting */
.tabberlive#tab2 .tabbertab {
 
}

/* sidebar */
#arrows {
	position:absolute;
	left:574px;
	top:207px;
}

#arrows img.arrow {
	float:left;
	margin-right:3px;
}

.about.one #sidebar a.one,
.about.two #sidebar a.two,
.about.three #sidebar a.three,
.about.four #sidebar a.four,
.faq.one #sidebar a.one,
.faq.two #sidebar a.two,
.portfolio.one #sidebar a.one,
.portfolio.two #sidebar a.two,
.clients.one #sidebar a.one,
.clients.two #sidebar a.two
{
	color:#4A82AC;
}

#sidebar img {
	margin:2px 0 15px 0;
}

#sidebar .bio {
	display:none;
}

.about.three #sidebar .bio {
	display:block;
}

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
	
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left
	}
/* End Images */

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
	}

acronym, abbr {
	border-bottom: 1px dashed #999;
	}

blockquote {
	margin: 15px 0px 15px 20px;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center {
	text-align: center;
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}
/* End Various Tags & Classes*/

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	background:url(/images/logo-sm.gif) no-repeat 8px 0;
	height:51px;
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left;display:none; }	
#imageData #caption{ font-weight: bold;display:none;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;display:none;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-top:17px;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display:inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	

/* forms */

.copy form p {
	clear:both;
	line-height:1.1em;
}

fieldset legend {
	background:#e5f0d4;
	border:2px solid #ddd;
	color:#a18475;
	padding:5px;
}

fieldset, legend {
	border:1px solid #eee;
	padding:12px;
}

*html legend {
	margin-bottom:12px;
}

textarea, input.text {
	padding:2px;
	border:1px solid #a18475;
}

label {
	color:#4A82AC;
	display:block;
	float:left;
	width:100px;
}

input.text {
	width:150px;
}

textarea {
	height:60px;
	width:250px;
}

.submit {
	margin:12px 0 0 100px;
}