/*************************************************************
HCM Screen style sheet

Written by vitamin
http://www.vitamininc.net/
*************************************************************/

/*************************************************************
Global styles
*************************************************************/

/* eliminate margin/padding on all items */
* {margin: 0; padding: 0;}

/* for IE */
html {font-size: 100%;}

/* set the default font size to 10px (browsers are 16px by default) */
body {
	font-size: 62.5%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 30px;
	color: #333;
	text-align: center;
}

/* correct some inheritance issues with ems */
textarea {font-family: Verdana, Arial, Helvetica, sans-serif;}

/* for IE */
table {font-size: 100%;}

/* reset items that normally cascade to 1em */
input, textarea, select, td, th {font-size:1em}

/* correct some inheritance issues with ems */
li li, li p, td p, blockquote p {font-size:1em}

/* give the forms some style! */
input, textarea, select {
	background: #fbfbfb url(/images/bg_header.gif) repeat-x;
	padding: 3px;
	border: 1px solid #e9e9e9;
	color: #333;
}

/* HEADINGS */
h1 {font-size: 2em}
h2 {font-size: 1.78em}
h3 {font-size: 1.56em; clear: both;}
h4 {font-size: 1.56em; clear: both;}
h5 {font-size: 1em; clear: both;}

/* IMAGES */
img {border-width: 0;}

.left {float: left;}
.right {float: right;}
.clear {
	clear: both;
	overflow: hidden;
	height: 1px;
}

#wrapper {
	margin: 0 auto;
	text-align: left;
	width: 720px;
	font-size: 0.9em;
}

.red {
	color: #dc241f;
}

/*************************************************************
Home page grid styles
*************************************************************/

#flash {
	border-top: 1px solid #e9e9e9;
}

#grid {
	position: relative;
	border-top: 1px solid #e9e9e9;
	height: 392px;
	background: url(/images/homebtn_bottom.gif) no-repeat bottom;
}

#grid ul {
	list-style: none;
}

#grid li a {
	position: absolute;
	display: block;
	width: 180px;
	height: 62px;
}

#grid li a span {
	display: none;
}

/* BUTTONS AND IMAGES, HEADINGS */

li#btn_1head a { background: url(/images/homebtn_architecture.gif) no-repeat; }
li#btn_2head a { background: url(/images/homebtn_landscape.gif) no-repeat; }
li#btn_3head a { background: url(/images/homebtn_planning.gif) no-repeat; }
li#btn_4head a { background: url(/images/homebtn_interior.gif) no-repeat; }

/* BUTTONS AND IMAGES, PROJECTS */

li#btn_1A a { background: url(/images/homebtn_1A.gif) no-repeat; }
li#btn_2A a { background: url(/images/homebtn_2A.gif) no-repeat; }
li#btn_3A a { background: url(/images/homebtn_3A.gif) no-repeat; }
li#btn_4A a { background: url(/images/homebtn_4A.gif) no-repeat; }

li#btn_1B a { background: url(/images/homebtn_1B.gif) no-repeat; }
li#btn_2B a { background: url(/images/homebtn_2B.gif) no-repeat; }
li#btn_3B a { background: url(/images/homebtn_3B.gif) no-repeat; }
li#btn_4B a { background: url(/images/homebtn_4B.gif) no-repeat; }

li#btn_1C a { background: url(/images/homebtn_1C.gif) no-repeat; }
li#btn_2C a { background: url(/images/homebtn_2C.gif) no-repeat; }
li#btn_3C a { background: url(/images/homebtn_3C.gif) no-repeat; }
li#btn_4C a { background: url(/images/homebtn_4C.gif) no-repeat; }

li#btn_1D a { background: url(/images/homebtn_1D.gif) no-repeat; }
li#btn_2D a { background: url(/images/homebtn_2D.gif) no-repeat; }
li#btn_3D a { background: url(/images/homebtn_3D.gif) no-repeat; }
li#btn_4D a { background: url(/images/homebtn_4D.gif) no-repeat; }

/* ROW ALIGNMENTS */

li#btn_1head a,
li#btn_2head a,
li#btn_3head a,
li#btn_4head a {
	top: 20px;
}

li#btn_1A a,
li#btn_2A a,
li#btn_3A a,
li#btn_4A a {
	top: 82px;
}

li#btn_1B a,
li#btn_2B a,
li#btn_3B a,
li#btn_4B a {
	top: 144px;
}

li#btn_1C a,
li#btn_2C a,
li#btn_3C a,
li#btn_4C a {
	top: 206px;
}

li#btn_1D a,
li#btn_2D a,
li#btn_3D a,
li#btn_4D a {
	top: 268px;
}

/* COLUMN ALIGNMENTS */

li#btn_1head a,
li#btn_1A a,
li#btn_1B a,
li#btn_1C a,
li#btn_1D a {
	left: 0;
}

li#btn_2head a,
li#btn_2A a,
li#btn_2B a,
li#btn_2C a,
li#btn_2D a {
	left: 180px;
}

li#btn_3head a,
li#btn_3A a,
li#btn_3B a,
li#btn_3C a,
li#btn_3D a {
	left: 360px;
}

li#btn_4head a,
li#btn_4A a,
li#btn_4B a,
li#btn_4C a,
li#btn_4D a {
	left: 540px;
}

/*************************************************************
Navigation styles
*************************************************************/

#top {
	margin-bottom: 10px;
	height: 25px;
}

#top img#logo {
	float: left;
}

ul#nav {
	float: right;
	list-style: none;
}

ul#nav li {
	float: left;
}

ul#nav li a {
	display: block;
	height: 21px;
	background-position: 0 0;
}

ul#nav li#firm a {
	background-image: url(/images/nav_firm.gif);
	width: 47px;
}

ul#nav li#personnel a {
	background-image: url(/images/nav_personnel.gif);
	width: 80px;
}

ul#nav li#projects a {
	background-image: url(/images/nav_projects.gif);
	width: 73px;
}

ul#nav li#resources a {
	background-image: url(/images/nav_resources.gif);
	width: 79px;
}

ul#nav li#employment a {
	background-image: url(/images/nav_employment.gif);
	width: 92px;
}

ul#nav li#contact a {
	background-image: url(/images/nav_contact.gif);
	width: 68px;
}

ul#nav li#contacthome a {
	background-image: url(/images/nav_contact.gif);
	width: 57px;
}

ul#nav li#sustainability a {
	background-image: url(/images/nav_sustainability.gif);
	width: 92px;
}

ul#nav li#home a {
	background-image: url(/images/nav_home.gif);
	width: 42px;
}

ul#nav li#firm a:hover,
ul#nav li#personnel a:hover,
ul#nav li#projects a:hover,
ul#nav li#resources a:hover,
ul#nav li#employment a:hover,
ul#nav li#contact a:hover,
ul#nav li#contacthome a:hover,
ul#nav li#sustainability a:hover,
ul#nav li#home a:hover {
	background-position: 0 -21px;
}

ul#nav a span {
	display: none;
}

/*************************************************************
Header styles
*************************************************************/

#header {
	clear: both;
	padding-top: 12px;
	margin-bottom: 30px;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
	background: #fbfbfb url(/images/bg_header.gif) repeat-x;
	height: 50px;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 36px;
}

html>body #header {
	height: 36px;
}

#header h1 {
	padding-left: 5px;
	text-transform: uppercase;
	height: 24px;
}

/*************************************************************
Homepage
*************************************************************/
#img_portal {
	border-top: 1px solid #e9e9e9;
	padding: 12px 0 24px 0;
}


/*************************************************************
Left/Right column shared styles
*************************************************************/

#right p, div.row p, div.rowhome p {
	margin-bottom: 2em;
	line-height: 2em;
}

#left p,
#right p,
div.row p,
#footer p {
	/*letter-spacing: 0.05em;*/
}

#left ul, #right ul {
	list-style: none;
}

#left li, #right li {
	list-style-image: url(/images/bullet_arrow.gif);
	margin-left: 20px;
}

#left li span, #right li span {
	margin-left: -5px;
}

#left ul, #left ol, #right ul, #right ol {
	margin-bottom: 2em;
	line-height: 2em;
}

#left a,
#right a,
.left a,
.right a {
	color: #dc241f;
	text-decoration: none;
	padding-bottom: 1px;
	background: transparent url(/images/underline.gif) repeat-x bottom;
}

/*************************************************************
Left column styles
*************************************************************/

#left {
	float: left;
	margin-bottom: 30px;
	width: 210px;
	min-height: 400px;
	_height: 400px;
}

#left #subnav {
	margin-bottom: 2em;
}

#left #subnav div {
	overflow: hidden;
}

#left h3 {
	padding: 10px 5px;
	margin-bottom: 1em;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
	background: #fbfbfb url(/images/bg_header.gif) repeat-x;
	font-weight: normal;
}

#left p {
	margin-bottom: 1em;
	line-height: 2em;
}

#left h5 {
	margin-bottom: 0;
	margin-top: 2em;
	line-height: 2em;
}

#subnav table.sus-nav td a.sus-link {
	text-decoration: none;
	color: #000;
	font-weight: normal;
	background-image: none;
	padding-left: 4px;
}

#subnav table.sus-nav td a.sus-link:hover {
	text-decoration: underline;
}

/*************************************************************
Right column styles
*************************************************************/

#right {
	float: right;
	margin-bottom: 30px;
	width: 470px;
	min-height: 400px;
	_height: 400px;
}

#right h2, #right h2.solo {
	text-transform: uppercase;
	font-weight: normal;
}

#right h2.solo {
	margin-bottom: 2em;
}

#right h3 {
	margin-bottom: 2em;
	font-weight: normal;
}

#right h4  {
	
	padding: 10px 5px;
	margin-top: 2em;
	margin-bottom: 1em;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
	background: #fbfbfb url(/images/bg_header.gif) repeat-x;
	font-weight: normal;
}

#right h4.top,
#right table h4,
#right .thumb1 h4,
#right .thumb2 h4,
#right .thumb3 h4 {
	margin-top: 0;
}

#right h5 {
	line-height: 2em;
}

#image_area {
	margin-bottom: 2em;
}

/* IMAGE ACTIONS - PRINT, 123 */

#image_actions {
	position: relative;
	background: #fbfbfb url(/images/bg_header.gif) repeat-x;
	margin-top: 4px;
	height: 30px;
}

#image_actions span {
	position: absolute;
}

#image_actions span.left { 
	float: none;
	top: 8px;
	left: 5px;
}
#image_actions span.right {
	float: none;
	top: 7px;
	right: 5px;
}

#image_actions a {
	background: none;
	color: #000;
}

#image_actions span.right a {
	margin-left: 3px;
}

#right div.row {
	margin-bottom: 2em;
}

#right div.row div {
	float: left;
	width: 150px;
}

#right div.row div.thumb2 {
	margin: 0 10px;
}

#right table {
	border-collapse: collapse;
	width: 100%;
}

#right table td {
	vertical-align: top;
	margin: 0;
	padding: 0;
}

/* HEADSHOTS WITH NAME AND BIO */

#right table.bio_head {
	margin-top: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid #e9e9e9;
	background: #fbfbfb url(/images/bg_bio_head.gif) repeat-x;
}

#right table.bio_head td p {
	margin-top: 25px;
	padding: 0 10px;
}

#right table.bio_head td h2 {
	margin-top: 15px;
	margin-bottom: 0;
}

#right table.bio_head td.head {
	vertical-align: bottom;
	width: 137px;
}

/* HEADSHOTS WITH NAME ONLY */

#right div.clear {
	clear: both;
	overflow: auto;
	height: auto;
}

#right table.only_head {
	margin-top: 1em;
	margin-bottom: 1em;
	width: 225px;
}

#right table.only_head td h2 {
	margin-top: 30px;
	margin-bottom: 0;
}

#right table.only_head td.head {
	vertical-align: bottom;
	text-align: right;
	background: #fbfbfb url(/images/bg_bio_head.gif) repeat-x;
}

#right textarea,
#right input.text {
	width: 200px;
}

#right table.full_list {
	margin-top: -1em;
	margin-bottom: 1.5em;
	border: none;
}

#right table.full_list td {
	border-bottom: 1px solid #e9e9e9;
	width: 50%;
}

#right table.full_list td.first {
	border-right: 1px solid #e9e9e9;
}

#right table.full_list p {
	padding: 10px 20px;
	margin-bottom: 0.5em;
	background: transparent url(/images/bullet_arrow.gif) no-repeat 10px 14px;
}

/* NEWS PHOTO BORDER */

#right div.news_photo {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
	background: #f8f8f8 url(/images/news_photo_bg.gif) repeat-x;
	width: 170px;
	height: 160px;
}

#right div.news_photo img {
	margin: 5px;
	border: 5px solid #f8f8f8;
}

/* REAOURCES PHOTO BORDER */

#right div.resources_photo {
	float: right;
	margin-left: 20px;
	margin-bottom: 14px;
	background: #f8f8f8 url(/images/news_photo_bg.gif) repeat-x;
	width: 100px;
	height: 130px;
	padding: 0;
}

#right div.resources_photo img {
	margin: 5px;
	border: 5px solid #f8f8f8;
}

/*************************************************************
4 BOX styles
*************************************************************/

div.row,
div.rowhome {
	width: 100%;
	margin-top: 2em;
}

div.row div.left,
div.row div.right {
	width: 350px;
}

div.rowhome div.left,
div.rowhome div.right {
	width: 359px;
}

div.rowhome h4  {
	position: relative;
	padding: 10px 5px;
	margin-bottom: 3px;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
	background: #fbfbfb url(/images/bg_header.gif) repeat-x;
	font-weight: normal;
}

div.row div.left div,
div.row div.right div,
div.rowhome div.left div,
div.rowhome div.right div  {
	position: relative;
	margin-bottom: 3px;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
	background: #fbfbfb url(/images/bg_header.gif) repeat-x;
	font-weight: normal;
	width: 100%;
}

div.row h6,
div.row h6 {
	display: block;
	width: 290px;
	height: 35px;
}

div.row h6#h_services a,
div.row h6#h_philosophy a,
div.row h6#h_awards a,
div.row h6#h_news a,
div.row h6#h_architecture a,
div.row h6#h_landscape a,
div.row h6#h_planning a,
div.row h6#h_interior a {
	display: block;
	width: 290px;
	height: 35px;
	background: none;
}

div.rowhome h6 {
	display: block;
	width: 279px;
	height: 35px;
}

div.rowhome h6#h_newsroom a,
div.rowhome h6#h_people a {
	display: block;
	width: 279px;
	height: 35px;
	background: none;
}

/* 4 box page headers */
div.row h6#h_services {	background: url(/images/hcm_services.gif) no-repeat; }
div.row h6#h_philosophy {	background: url(/images/hcm_philosophy.gif) no-repeat; }
div.row h6#h_awards {	background: url(/images/hcm_awards.gif) no-repeat; }
div.row h6#h_news {	background: url(/images/hcm_news.gif) no-repeat; }
div.row h6#h_architecture {	background: url(/images/hcm_architecture.gif) no-repeat; }
div.row h6#h_landscape {	background: url(/images/hcm_landscape.gif) no-repeat; }
div.row h6#h_planning {	background: url(/images/hcm_planning.gif) no-repeat; }
div.row h6#h_interior {	background: url(/images/hcm_interior.gif) no-repeat; }

/* home page headers */
div.rowhome h6#h_newsroom { background: url(/images/hcm_newsroom.gif) no-repeat; }
div.rowhome h6#h_people { background: url(/images/hcm_people.gif) no-repeat; }

div.row h6 span,
div.rowhome h6 span {
	display: none;
}

div.row img.section { margin-bottom: 1em; }

div.row a.more {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	background: url(/images/btn_more.gif) no-repeat;
	width: 60px;
	height: 35px;
}

div.row a.viewall,
div.rowhome a.viewall {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	background: url(/images/btn_viewall.gif) no-repeat;
	width: 80px;
	height: 35px;
}

div.row a.more span,
div.row a.viewall span,
div.rowhome a.viewall span {
	display: none;
}

div.rowhome p {
	padding: 10px 5px 0;
}

div.rowhome a.nobg {
	background: none;
}

/*************************************************************
Category, Project page thumbs
*************************************************************/

div#right div.row div.thumb1 ul li,
div#right div.row div.thumb2 ul li,
div#right div.row div.thumb3 ul li {
	list-style-image: none;
	margin: 0;
	padding: 0;
}

#right div.row div.thumb1 span,
#right div.row div.thumb2 span,
#right div.row div.thumb3 span {
	margin: 0;
	padding: 0;
}

#right div.row a.thumbnail {
	display: block;
	overflow: hidden;
	cursor: hand;
	margin: 0;
	padding: 0;
	background-position: -150px 0;
	width: 150px;
	height: 90px;
	color: #333;
}

#right div.row a.thumbnail:hover {
	background-position: -150px 0;
	color: #dc241f
}

#right div.row li {
	position: relative;
	line-height: 1.2em;
}

#right div.row li span {
	position: absolute;
	top: 74px;
	left: 0;
}


/* this dummy image is used for the print stylesheet */
#right div.row img.thumbImg {
	display: none;
}

/*************************************************************
Footer styles
*************************************************************/

#footer {
	clear: both;
	overflow: hidden;
	padding: 10px 0;
	border-top: 1px solid #e9e9e9;
	width: 720px;
	height: 35px;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 13px;
}

html>body #footer {height: 13px;}

#footer p {
	margin: 0;
	font-size: 1em;
}

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

#footer a:hover {
	color: #000;
	text-decoration: underline;
}

/*************************************************************
sIFR Styles
*************************************************************/

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 18px;
}

.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -2px;
	font-size: 15px;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -2px;
	font-size: 14px;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -2px;
	font-size: 14px;
	height: 16px;
}