/* ================================

	SMA 2008 Site Redesign

	Prepared By: Glen Hunter
	
	Version: b1
					
================================*/

/*===========================

	BASIC HTML & FONTS 
	
	- define HTML elements here
	- no classes or ID's allowed
	
===========================*/

html, body {
	background: #003a66;
	color: #fff;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0px;
	text-align: left;
	vertical-align: top;
}

table, th, td {
	margin: 0;
	padding: 0;
	text-align: left;
	/*vertical-align: top;*/
}

th {
	padding: 0px;
}

td {
	padding: 0px;
}

form {
	margin: 0;
	padding: 0;
}

input, select {
	margin: 0;
	padding: 0px;
	font-size: 12px;
	/*padding: 2px;*/
}

label {
	color: #555;
	display: block;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: .08em;
	margin: 0;
	padding: 1px 1px 3px 1px;
}

img {
	border: 0;
	/* Hack to remove white space under images */
	vertical-align: text-bottom;
}

h1 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 18px;
	letter-spacing: 0.07em;
	line-height: 21px;
	margin: 30px 0px 15px 0px;
	padding: 0px 0px 10px 0px;
}

h2 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 15px;
	letter-spacing: 0.07em;
	line-height: 18px;
	margin: 0 0 10px 0;
	padding: 10px 0px 2px 0px;
}

h2 span.inc {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 70%;
	font-weight: normal;
	}

h3 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 14px;		
	margin: 0;
	padding: 10px 0px 2px 0px;
}

h4 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	margin: 0;
	padding: 10px 0px 2px 0px;
}

h5 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	border-bottom: 1px dotted #999999;
	color: #44687d;
	font-family: verdana;
	font-size: 14px;
	margin: 0;
	padding: 10px 0px 2px 0px;
}

p {
	font-size: 12px;
	letter-spacing: .08em; 
	line-height: 16px;
	margin: 10px 10px 0 0;
	padding: 0;
}

a {
	color: #fff;
	}
	
dt, dd, li {	
	font-size: 11px;
	font-weight: bold;
	margin: 0;
	padding: 3px;
	text-align: left;
	}

dd, li {
	font-weight: normal;
	}
	
hr {
	border: 1px solid #003a66;
	height: 0px;
	padding: 0;
	margin: 0;
	}
	
table {
	border: 1px solid #b0b209; 
	margin: 0 0 10px 0;
	width: 100%;
	}
	
th {
	background: #b0b209;
	color: #fff;
	border-bottom: 2px solid #b0b209;
	font-size: 12px;
	padding: 4px;
	}
	
td {
	font-size: 13px;
	font-weight: normal;
	letter-spacing: .07em;
	padding: 4px;
	}
	
/*===========================

	PAGE STYLES 
	
	- define basic page layout
	- order should follow: whole page, header, 
	   content, footer
	
===========================*/

/* #wrapper defines the page edges through it's width. 
	It can be used as a top level ID for defining styles 
	that require priority */

#wrapper {
	margin: 60px auto 0 auto;
	padding: 0;
	width: 720px;
}

/* Hack to clear floats in IE */
.clear {
	clear: both;
	height: 1px;
	margin: 0;
	padding: 0;
}

.left {
	float: left;
	width: 48%;
}

.right {
	float: right;
	width: 48%;
}

/*===================
	HEADER 
===================*/

#header {
	height: 27px;
	margin: 0px auto;
	padding: 0;
	width: 720px;
}

#header img.logo {
	float: right;
	margin: 0;
	padding: 0;
}

#header ul.mainnav {
	margin: 0;
	padding: 0;
	}
	
#header ul.mainnav li {
	display: block;	
	float: left;
	font-size: 10px;
	height: 18px;
	margin: 0 30px 0 0px;
	padding: 5px 11px 2px 11px;
	}

#header ul.mainnav li a {
	font-weight: bold;
	height: 30px;
	padding: 0;
	text-decoration:none;
	}
	
#header ul.mainnav li a:hover {
	text-decoration: underline;
}

div.firm #header ul.mainnav li#firm, div.projects #header ul.mainnav li#projects, div.services #header ul.mainnav li#services, div.contact #header ul.mainnav li#contact, div.tenders #header ul.mainnav li#tenders  {
	background: #fff;
	color: #003a66;
	border: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	text-decoration: none;
}

div.firm #header ul.mainnav li#firm a, div.projects #header ul.mainnav li#projects a, div.services #header ul.mainnav li#services a, div.contact #header ul.mainnav li#contact a, div.tenders #header ul.mainnav li#tenders a  {
	color: #003a66;
	font-weight: bold;
	text-decoration: none;
}	


/*===================
	Secondary Nav 
===================*/

#topnav, #bottomnav {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;			
	margin: 0;
	padding: 0;
	}

#topnav ul.secnav, #bottomnav ul.secnav {
	clear: both;
	height: 24px;
	margin: 0;
	padding: 0;
	border-top: 4px solid #003a66;
	}
	
#bottomnav ul.secnav {
	height: 24px;
	}	
	
div.projects #bottomnav ul.secnav {
	height: 38px;
	}		
	
#topnav ul.secnav li, #bottomnav ul.secnav li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
	width: auto;
	}

#topnav ul.secnav li a, #bottomnav ul.secnav li a {
	display: block;
	margin: 0 20px 0 0;
	padding: 0;
	text-align: center;
	width: auto;
	}
	
#bottomnav ul.secnav li a {
	margin: 0 15px 0 0;
	width: 66px;
	}
	
#topnav ul.secnav li.last, #bottomnav ul.secnav li.last {
	margin: 0;
	}
	
#topnav ul.secnav li a, #bottomnav ul.secnav li a {
	border: 1px solid #003a66;
	font-weight: bold;
	padding: 3px;
	text-decoration: none;	
	}
	
#topnav ul.secnav li a:hover, #bottomnav ul.secnav li a:hover {
	text-decoration: underline;
	}
	
div.office #topnav ul.secnav li a#office, div.retail #topnav ul.secnav li a#retail, div.education #topnav ul.secnav li a#education, div.residential #topnav ul.secnav li a#residential, div.labs #topnav ul.secnav li a#labs, div.healthcare #topnav ul.secnav li a#healthcare, div.keypeople #topnav ul.secnav li a#keypeople, div.awards #topnav ul.secnav li a#awards, div.commendations #topnav ul.secnav li a#commendations, div.designmethodology #topnav ul.secnav li a#designmethodology {
	background: #fff;
	border: 1px solid #fff;
	color: #003a66;
}	

div.p1 #bottomnav ul.secnav li a#p1, div.p2 #bottomnav ul.secnav li a#p2, div.p3 #bottomnav ul.secnav li a#p3, div.p4 #bottomnav ul.secnav li a#p4, div.p5 #bottomnav ul.secnav li a#p5, div.p6 #bottomnav ul.secnav li a#p6, div.p7 #bottomnav ul.secnav li a#p7, div.p8 #bottomnav ul.secnav li a#p8  {
	background: #fff;
	border: 1px solid #fff;
	color: #003a66;
}	

div.retail #bottomnav ul.secnav li a, div.labs #bottomnav ul.secnav li a, div.healthcare #bottomnav ul.secnav li a {
	margin: 0 15px 0 0;
	width: 90px;
	}
	
div.healthcare #bottomnav ul.secnav li a {
	width: 130px;
	}		
	
div.labs #bottomnav ul.secnav li a {
	width: 130px;
	}	
	
div.office #bottomnav ul.secnav li a {
	width: 90px;
	}	
	
div.education #bottomnav ul.secnav li a#p8 {
	padding-right: 0;
	width: 76px;
	}		

/*===================
	CONTENT
===================*/

/* Content is container for two columns 
	- #main (most content)
	- #sidebar (sidebar content). */

#content {
	height: 426px;
	margin: 0;
	padding: 0;
	position: relative;
}
	
dd.imagelinks {
	line-height: 1.5;
	}
	
dd.imagelinks a:hover {
	background: #fff;
	color: #003a66;
	}
	
div#content div.project {
	position: absolute;
	top: 310px;
	left: 0px;
	width: 170px;
	z-index: 9999;
	}
	
div.project dt {
	letter-spacing: .15em;
	}

div.project dd {
	margin: 0;
	padding: 2px 3px;
	}
	
dd.imagelinks a {
	padding: 3px 6px 3px 0;
	}
	
div#content img.projectpict {
	position: absolute;
	top: 10px;
	left: 0px;
	}
	
div#content div.project {
    height: 110px;
	position: absolute;
	top: 305px;
	left: 538px;
	width: 180px;
	z-index: 9999;
	}	
	
div.residential div#content div.project {
    height: 110px;
	position: absolute;
	top: 305px;
	left: 538px;
	width: 180px;
	z-index: 9999;
	}	
	
div.residential.p2 div#content div.project {
    height: 110px;
    margin: 0;
    padding: 0;
	position: absolute;
	top: 305px;
	left: 538px;
	width: 180px;
	z-index: 9999;
	}	
	
div.residential.p2 div#content div.project dl {
    margin: 0;
    padding: 0;
	}		
	
div#content div#description, div#content div#ownerswords, div#content div#features {
	background-color: 	#003a66;
	display: none;
    -moz-opacity: 0.9;
    opacity:.90;
    filter: alpha(opacity=90);	
    height: 301px;
    padding: 0 0 0 8px;
    position: absolute;
    top: 10px;
    left: 532px;
    width: 188px;
    z-index: 9999;
}

div.residential.p2 div#description, div.residential.p2 div#ownerswords, div.residential.p2 div#features {
    height: 270px;
}

div.blocker {	
    padding: 6px 2px 10px 0px;
	height: 283px;
	overflow: auto;
	width: 178px;
	}	
	
div.residential.p2 	div.blocker {	
	height: 270px;
	}	

	
div.blocker p, div.blocker ul {
	color: #fff;
	background: none;	
	letter-spacing: .05em;
	margin: 0;
/*	width: 240px;*/
    }
 
 div.blocker ul {
 	padding-left: 14px;
 	}
 
div.blocker li {
	margin: 0;
	padding: 0;
	}
	
div#main	{
	height: 400px;
	margin: 10px 0 0 0;
	overflow: auto;
	width: 500px;
	}

div.home div#main, div.firm div#main, div.services div#main, div.contact div#main {
	height: 421px;
	margin: 0 0 0 0;
	padding: 0 10px 0 0;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 350px;
	}

div.home div#content, div.contact div#content {
	background-image: url(../images/grid_large.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

div.home div#main, div.contact div#main {
	background-color: 	#003a66;
    -moz-opacity: 0.9;
    opacity:.90;
    filter: alpha(opacity=90);	
    height: 189px;
    padding: 10px;
    position: absolute;
    top: 106px;
    left: 121px;
    width: 459px;
	}

div.home div#main h2, div.contact div#main h2 {
	font-size: 18px;
	letter-spacing: .1em;
	}
	
div.home div#main h2 {
	font-size: 14px;
	letter-spacing: .1em;
	}	
	
div.home div#main p, div.contact div#main dd {
	font-size: 12px;
	letter-spacing: .09em;
	line-height: 1.2em;
}
	
div.commendations div#main p {
	font-style: italic;
	margin-bottom: 20px;
	}
	
span.attrib {
	display: block;
	margin: 0 0 0 20px;
	font-size: 10px;
	font-style: normal;
}

div.awards dt {
	font-size: 12px;
	letter-spacing: .09em;
	}



/*===================
	SIDEBAR
===================*/

div#sidebar {
	margin: 0;
	position: absolute;
	top: 0px;
	left: 360px;
	}
	
/*===================
	FOOTER
===================*/

#footer {
	border-top: 1px dotted #666666;
	clear: both;
	font-size: 12px;
	margin: 0 auto;
	padding: 10px 0px 0px 0px;
	text-align: center;
}

#footer a {
	color: #666666;
	text-decoration: none;
}

/*===================
	TENDERS
===================*/

div.tenders #content {
	height: 100%;
	}

div.tenders #main {
	height: 100%;
	margin: 0;
	width: 720px;
	}
	
div.tenders h2 {
	color: #fff;
	line-height: 18px;
	margin: 15px 0 5px 0;
	
	}
	
div.tenders p {
	line-height: 18px;
	margin: 4px 0;
	
	}