/* ======================================================================================================================== ARUP CSS */

* {
	margin: 0;
	padding: 0;
}

body {
	font: 13px/15px "Arial", Verdana;
	color: #666;
	text-align: justify;
	background: #d5d5d5 url('../images/house_style/background_main.jpg') left -29px repeat-x;
}

p, table, ul, ol {
	margin-bottom: 16px;
}

ul li, ol li {
	margin-left: 23px;
}

.left {
	float: left;
}

.right {
	float: right;
}

a {
	color: #9d9d9d;
}

img {
	border: 0;
}

/* ---------------------------------------- MAIN CONSTRUCTIONS ITEMS */

div#wrapper {
	width: 814px;
	margin: 0 auto;
	position: relative;
}

div#wrapper h1 {
	height: 55px;
	width: 814px;
	background: url('../images/house_style/h1_bg.jpg') -2px 8px no-repeat;
	z-index: 999;
}

div#wrapper h1.ZH {
	background-image: url('../images/house_style/h1_bg_zh.jpg');
}

div#wrapper h1 a {
	height: 55px;
	width: 814px;
	display: block;
	text-indent: -5000px;
}

div#wrapper div#content {
	min-height: 537px;
	_height: 537px;
}

/* ---------------------------------------- COLUMNS & SCROLL */

div#wrapper div#content div#columnOne {
	width: 266px;
	float: left;
	min-height: 504px;
	_height: 504px;
}

div#wrapper div#content div#columnOne div#scrollArea,
div#wrapper div#content div#columnOne div#projectsScrollArea  {
	height: 397px;
	width: 266px;
	display: relative;
	overflow: auto;
}

div#wrapper div#content div#columnTwo {
	width: 538px;
	float: right;
	min-height: 504px;
	_height: 504px;
}

/* ---------------------------------------- COLUMN 2 LINKS */

div#wrapper div#content div#columnTwo div#additional_links {
	border-top: 1px solid #c9c9c9;
	border-bottom: 1px solid #c9c9c9;
	clear: both;
	position: relative;
	top: 8px;
	height: 15px;
	#height: 16px;
	padding: 2px 0;
}

div#wrapper div#content div#columnTwo div#additional_links p {
	margin-bottom: 0;
}

div#wrapper div#content div#columnTwo div#additional_links p a {
	color: #044650;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 11px;
}

div#wrapper div#content div#columnTwo div#additional_links p.left a {
	background: url('../images/house_style/arrow_r.gif') right 1px no-repeat;
	#background-position: right 2px;
	padding-right: 10px;
}

div#wrapper div#content div#columnTwo div#additional_links p.left a, x:-moz-any-link {
	background-position: right 2px; /* To make work in FF2 */
}

div#wrapper div#content div#columnTwo div#additional_links p.right a {
	background: url('../images/house_style/download.gif') left 2px no-repeat;
	padding-left: 15px;
	display: block;
	height: 18px;
	_height: auto;
}

/* ---------------------------------------- FOOTER */

div#footer {
	clear: both;
	background: url('../images/house_style/line.gif') left 23px repeat-x;
}

div#footer div#language_links {
	width: 814px;
	margin: 0 auto;
}

div#footer div#language_links p {
	text-decoration: none;
	color: #b3b3b3;
	text-transform: uppercase;
	float: left;
}

div#footer div#language_links p a {
	text-decoration: none;
	color: #555555;
}

div#footer div#language_links p a:hover {
	color: #003841;
}

div#footer div#language_links p.en {
	border-right: 1px solid #b4b4b4;
	padding-right: 12px;
	margin-right: 12px;
}

div#footer div#links {
	margin: 0 auto;
	margin-top: 15px;
	width: 814px;
	clear: left;
	font-size: 9px;
	text-transform: uppercase;
	font-weight: bold;
}

div#footer div#links a {
	text-decoration: none;
	color: #7f7f7f;
}

div#footer div#links a:hover {
	text-decoration: underline;
}

div#footer div#links ul li {
	float: left;
	margin: 0;
	list-style: none;
	padding-right: 20px;
	margin-right: 20px;
	border-right: 1px solid #959595;
}


div#footer div#links ul li.last {
	border: none;
}

div#footer div#links p {
	float: right;
}


/* ======================================================================================= ZH TEXT ENLARGEMENT */
/* ----------------------------------------------------------------------------------------------------------- */

div#footer div#links ul.zh_footer li,
div#footer div#links p a.zh_footer {
	font-size:13px;
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ======================================================================================================= END */




/* ---------------------------------------- NAVIGATION */

div#wrapper ul#nav {
	height: 23px;
	margin-bottom: 23px;
}

div#wrapper ul#nav li {
	margin: 0;
	float: left;
	list-style: none;
	padding: 0 114px 0 0;
}

div#wrapper ul#nav.zh li {
	padding-right: 143px;
}

div#wrapper ul#nav li.nav4 {
	padding: 0 3px 0 10px;
	float: right;
}

div#wrapper ul#nav.zh li.nav4 {
	#padding: 0 3px 0 8px;
}

div#wrapper ul#nav li a {
	text-decoration: none;
	font-weight: bold;
	font-size: 15px;
	color: #7f7f7f;
}

div#wrapper ul#nav li a:hover, div#wrapper ul#nav li a.active  {
	color: #003841;
}

/* ---------------------------------------- HEADINGS */

div#wrapper div#content h2 {
	text-transform: uppercase;
	font-size: 19px;
	line-height: 16px;
	color: #7f7f7f;
	border-bottom: 1px solid #a0a0a0;
	height: 45px;
	margin-bottom: 15px;
	text-align: left;
}

div#wrapper div#content h2 span {
	color: #00414c;
	margin-right: -5px;
}

div#wrapper div#content h2.projects {
	width: 275px;
	border: none;
}

div#wrapper div#content h3 {
	font-size: 17px;
	font-weight: normal;
	text-align: left;
	margin-bottom: 15px;
}

div#wrapper div#content h4 {
	font-size: 13px;
	text-align: left;
	margin-bottom: 8px;
}

/* ======================================================================================================================== PROJECTS */

div#wrapper div#content div#columnOne div#projectsScrollArea {
	clear: left;
	height: 336px;
	#height: 330px;
}

/* ---------------------------------------- MENUS */

div#wrapper div#content div#columnOne ul#section_menu {
	margin-top: -15px;
	width: 115px;
	float: left;
	border-top: 1px solid #a0a0a0;
}

div#wrapper div#content div#columnOne ul#sub_section_menu {
	border-top: 1px solid #a0a0a0;
	margin-top: -15px;
	width: 117px;
	float: left;
	border-left: 1px solid #a0a0a0;
}

/* ======================================================================================= ZH TEXT ENLARGEMENT */
/* ----------------------------------------------------------------------------------------------------------- */

div#wrapper div#content div#columnOne ul#section_menu.section_menu_zh li a {
	font-size:13px;
}

div#wrapper div#content div#columnOne ul#sub_section_menu.sub_section_menu_zh li a {
	font-size:13px;
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ======================================================================================= END - ZH TEXT ENLARGEMENT */


div#wrapper div#content div#columnOne ul#section_menu li, div#wrapper div#content div#columnOne ul#sub_section_menu li {
	list-style: none;
	margin: 0;
	border-bottom: 1px solid #a0a0a0;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	height: 14px;
	position: relative;	
	padding: 0;
}

div#wrapper div#content div#columnOne ul#sub_section_menu li {
	padding-left: 10px;
}

div#wrapper div#content div#columnOne ul#section_menu li a, div#wrapper div#content div#columnOne ul#sub_section_menu li a {
	text-decoration: none;
	color: #343434;
	padding-left: 8px;
	margin-left: -8px;
	position: absolute;
}

div#wrapper div#content div#columnOne ul#sub_section_menu li a {
	margin-left: 0;
}

div#wrapper div#content div#columnOne ul#section_menu li a:hover, 
div#wrapper div#content div#columnOne ul#section_menu li.active a,
div#wrapper div#content div#columnOne ul#sub_section_menu li a:hover,
div#wrapper div#content div#columnOne ul#sub_section_menu li.active a {
	color: #00414c;
	background: url('../images/house_style/projects_arrow.jpg') left 3px no-repeat;
	#background-position: left 3px;
}

div#wrapper div#content div#columnOne ul#sub_section_menu li a.noArrow:hover {
	background: none;
} 

div#wrapper div#content div#columnOne p#thumbnail_link {
	width: 28px;
	height: 28px;
	float: right;
	margin-top: -16px;
}

div#wrapper div#content div#columnOne p#thumbnail_link a {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -5000px;
	background: url('../images/projects/thumbnail_link_grey.png') left top no-repeat;
}

div#wrapper div#content div#columnOne p#thumbnail_link a:hover {
	background: url('../images/projects/thumbnail_link.png') left top no-repeat;
}

div#wrapper div#content div#columnOne p#thumbnail_link.active {
	background: url('../images/projects/thumbnail_link.png') left top no-repeat;
	text-indent: -5000px;
}

/* ---------------------------------------- THUMBNAILS */

div#wrapper div#content div#columnTwo div#thumbnails {
	float: right;
	margin-top: 45px;
}

div#wrapper div#content div#columnTwo div#thumbnails div.thumb {
	width: 92px;
	height: 75px;
	float: left;
	background: #eaeaea;
	margin: 0 0 7px 7px;
}

div#wrapper div#content div#columnTwo div#thumbnails div.thumb a {
	width: 92px;
	height: 75px;
	display:block;
	float:left;
}

/* ---------------------------------------- COLUMN 2 LINKS */

div#wrapper div#content div#columnTwo div#project_additional_links {
	border-top: 1px solid #c9c9c9;
	border-bottom: 1px solid #c9c9c9;
	clear: both;
	position: relative;
	top: 8px;
	height: 15px;
	#height: 16px;
	padding: 2px 0;
	margin-left: 50px;
	#margin-top: 7px;
}

div#wrapper div#content div#columnTwo div#project_additional_links.medium {
	margin-left: 0;
}

div#wrapper div#content div#columnTwo div#project_additional_links p {
	margin-bottom: 0;
	color: #044650;
	text-transform: uppercase;
	font-size: 10px;
}

div#wrapper div#content div#columnTwo div#project_additional_links p span {
	float: left;
}

div#wrapper div#content div#columnTwo div#project_additional_links p a.prev, 
div#wrapper div#content div#columnTwo div#project_additional_links p a.next {
	margin-top: 3px;
	width: 12px;
	height: 9px;
	display: block;
	float: left;
	text-indent: -5000px;
	background: url('../images/house_style/arrow_l.gif') left top no-repeat;
}

div#wrapper div#content div#columnTwo div#project_additional_links p a.next {
	background: url('../images/house_style/arrow_r.gif') right top no-repeat;
}

div#wrapper div#content div#columnTwo div#project_additional_links p#viewThumbnails a,
div#wrapper div#content div#columnTwo div#project_additional_links p#viewThumbnailsZh a {
	text-decoration: none;
	color: #003841;
	margin-left: 90px;
}

div#wrapper div#content div#columnTwo div#project_additional_links p#viewThumbnailsZh a {
	margin-left: 170px;
}

div#wrapper div#content div#columnTwo div#project_additional_links p#viewThumbnails a:hover,
div#wrapper div#content div#columnTwo div#project_additional_links p#viewThumbnailsZh a:hover {
	color: #7f7f7f;
}


/* ---------------------------------------- MAIN PROJECT IMAGE */

div#wrapper div#content div.project_main {
	width: 811px;
	height: 485px;
	float: left;
	margin-bottom: 13px;
}

div#wrapper div#content div.project_main.other {
	width: 811px;
	height: 242px;
}

div#wrapper div#content div.project_main p {
	float: left;
	margin: 0;
	margin-right: 11px;
}

div#wrapper div#content div.project_main p a {
	width: 251px;
	height: 36px;
	display: block;
	float: left;
	text-decoration: none;
	opacity: 0.85;
	filter:alpha(opacity=85);
	padding: 32px 0 0 12px;
	font-size: 15px;
	text-transform: uppercase;
	background: url('../images/projects/roll_background.jpg') left top no-repeat;
}

div#wrapper div#content div.project_main p.people {
	margin: 0;
}

div#wrapper div#content div.project_main p a span.title {
	color: #76cece;
	display: block;
	font-weight: bold;
}

div#wrapper div#content div.project_main p a span.title span {
	color: #fff;
	margin-left: -3px;
}

div#wrapper div#content div.project_main p a span.find {
	font-size: 12px;
	color: #fff;
	padding-right: 10px;
	background: url('../images/projects/arrow.gif') right 2px no-repeat;
	#background-position: right 3px;
	position: relative;
}

div#wrapper div#content div.project_main p a:hover {
	background-position: left -40px;
}

div#wrapper div#content div.project_main p.people a:hover {
	background-position: left top;
}

div#wrapper div#content div.project_main p a:hover span.title {
	display: none;
}

div#wrapper div#content div.project_main p a:hover span.find {
	top: -25px;
}

/* ---------------------------------------- PROJECT GRID */

div#wrapper div#content div#project_intro p.project  {
	width: 263px;
	height: 155px;
	background: #eaeaea;
	float: left;
	margin: 0 11px 11px 0;
	font-size: 15px;
	text-transform: uppercase;
	position: relative;
	text-align: left;
}

div#wrapper div#content div#project_intro p.project.margin {
	margin-right: 0;
}

div#wrapper div#content div#project_intro p.project a {
	display: block;
	width: 263px;
	height: 155px;
	text-decoration: none;
}

div#wrapper div#content div#project_intro p.project a {
	color: #fdf;
}

div#wrapper div#content div#project_intro p.project a:hover {
	position: static; /* This is to make it work in IE6*/
}

div#wrapper div#content div#project_intro p.project a span.roll {
	width: 263px;
	height: 68px;
	display: block;
	text-decoration: none;
	opacity: 0.85;
	filter:alpha(opacity=85);
	position: relative;
	background: url('../images/projects/roll_background.jpg') left top no-repeat;
}

div#wrapper div#content div#project_intro p.project a:hover span.roll {
	background-position: left -40px;
}

div#wrapper div#content div#project_intro p.project a span {
	color: #76cece;
	opacity: 1.0;
}

div#wrapper div#content div#project_intro p.project a span.title span {
	color: #fff;
	margin-left: -3px;
}

div#wrapper div#content div#project_intro p.project a span.title {
	position: absolute;
	left: 12px;
	bottom: 21px;
	font-weight: bold;
	opacity: 1.0;
}

div#wrapper div#content div#project_intro p.project a span.find {
	float: left;
	clear: left;
	font-size: 12px;
	color: #fff;
	padding-right: 10px;
	background: url('../images/projects/arrow.gif') right 2px no-repeat;
	position: absolute;
	bottom: 7px;
	left: 12px;
}

div#wrapper div#content div#project_intro p.project a span.find, x:-moz-any-link, x:default {
	background-position: right 3px; /* To make work in FF3 */
}

div#wrapper div#content div#project_intro p.project a span.find, x:-moz-any-link {
	background-position: right 3px; /* To make work in FF2 */
}


div#wrapper div#content div#project_intro p.project a:hover span.title {
	display: none;
}

div#wrapper div#content div#project_intro p.project a:hover span.find {
	bottom: 46px;
}

/* This section will need to replicated for each project */
/*
div#wrapper div#content div#project_intro p.project a#pro1 {
	background: url('../images/deletethis4.jpg') left top no-repeat;
}

div#wrapper div#content div#project_intro p.project a#pro1:hover {
	background: url('../images/deletethis5.jpg') left top no-repeat;
}
*/

/* ======================================================================================================================== GRID PAGES TEMPLATE */

div#wrapper div#content div.grid {
	position: relative;
	width: 263px;
	height: 155px;
	float: left;
	margin: 0 11px 11px 0;
}

div#wrapper div#content div.grid.margin {
	margin-right: 0;
}

div#wrapper div#content div.grid img {
	position: absolute;
	z-index: 0;
}

div#wrapper div#content div.grid a {
	z-index: 999;
	position: absolute;
	width: 263px;
	height: 68px;
	display: block;
	text-decoration: none;
	opacity: 0.85;
	filter:alpha(opacity=85);
	font-size: 16px;
	text-transform: uppercase;
	text-align: left;
	color: #76cece;
	background: url('../images/projects/roll_background.jpg') left top no-repeat;
}

div#wrapper div#content div.grid a span.find {
	font-size: 12px;
	color: #fff;
	padding-right: 10px;
	background: url('../images/projects/arrow.gif') right 3px no-repeat;
	position: absolute;
	left: 12px;
	bottom: 6px;
}

div#wrapper div#content div.grid a span.title span {
	color: #fff;
	margin-left: -3px;
}

div#wrapper div#content div.grid a span.title {
	display: block;
	position: absolute;
	left: 12px;
	bottom: 20px;
	font-weight: bold;
}

div#wrapper div#content div.grid a:hover {
	background-position: left -40px;
}

div#wrapper div#content div.grid a.no:hover {
	background-position: left top;
}

div#wrapper div#content div.grid a:hover span.title {
	display: none;
}

div#wrapper div#content div.grid a:hover span.find {
	bottom: 45px;
}

/* ======================================================================================================================== INTRO */

div#wrapper div#content div#intro {
/*	margin: 100px auto 0 auto;*/
	width: 811px;
	height: 487px;
}

div#wrapper div#content p.skip {
	text-align: right;
	margin-top: 3px;
	text-transform: uppercase;
	
}

div#wrapper div#content p.skip a {
	color: #003841;
	text-decoration: none;
	font-size: 11px;
	padding-right: 10px;
	background: url('../images/house_style/arrow_r.gif') right 1px no-repeat;
	#background-position: right 2px;
}

div#wrapper div#content p.skip a.sound {
	background: 0;
	padding: 0;
}

div#wrapper div#content p.skip a.sound img {
	vertical-align: -10%;
}

/* ======================================================================================================================== BEIJING VIDEOS */

div#wrapper div#content div#columnTwo div.noflash {
	padding-top: 250px;
	font-size: 10px;
	text-align: center;
}

/* ======================================================================================================================== T & C's */

div#wrapper div#content div#tcColOne h3, div#wrapper div#content div#tcColTwo h3 {
	color: #003841;
}

div#wrapper div#content div#tcColOne {
	width: 493px;
	float: left;
	font-size: 12px;
	color: #333;
}

div#wrapper div#content div#tcColTwo {
	width: 276px;
	float: right;
	font-size: 12px;
	color: #333;
}