/************************************************************************************

	"ROUTES.CSS"

	CONTENTS:
	-	Global
	-	Accessibility
	-	Main Layout
	-	Secondary Layout

************************************************************************************/

@import "typography.css";

/*	-	Global
-----------------------------------------------------------------------------------*/

*{
	margin:  0;
	padding: 0;
}
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
html{
	height: 100%;
	background-image: url(../img/common/bg_diags.gif);
}
body{
	float: left;
    width: 1005px;
    padding:  20px 0 50px 0;
}
/*	-	Accessibility
-----------------------------------------------------------------------------------*/

ul#access_skip{
	position: absolute;
	top: -999em;
}

/*	-	Main Layout	
-----------------------------------------------------------------------------------*/

#wrapper{
	float: left;
	width: 1005px;
}
#wrapper.clear:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#main{
	position: relative;
	width: 790px;
	float: right;
	left:  0;
	top:  25px;
	padding-bottom: 20px;
}
#navigation{
	position: absolute;
	left:  20px;
	top: 80px;
	width: 155px;
}
#footer{
	position: relative;
	width: 790px;
	height: 70px;
	float: right;
	left:  0;
	top:  40px;
	padding-top: 20px;
}
#aboutus #footer{
	top: 30px;
}
#sitemap #wrapper{
	padding-bottom: 70px;
}

#sitemap #footer{
	position: relative;
	height: 60px;
	top: -40px;
	left: 0;
	margin-bottom: -70px;
}
#flashPhotos{
	float: left;	
	margin-top: 0;
	margin-bottom: 0;
	width: 790px;
	height: 300px;
	background: #fff url('../img/common/bg_diags_strip.gif') repeat-x top;
}
#flashVideoWrapper{
	float: left;
	margin: 0 0 5px 0;
	padding-top: 0;
	width: 790px;
	height: 420px;	
}
#flashVideo{
	display: none;
	width: 523px;
	height: 400px;
	float: left;	
	margin-right: 0;
}

/*	-	Secondary Layout
-----------------------------------------------------------------------------------*/

/*	Content	*/
#introcontent{
	width: 790px;
	float: left;
}
#maincontent{
	position: relative;
	width: 790px;
	float: left;
	padding: 40px 0 0 0;
	margin-top: 20px;
	background: #fff url('../img/common/bg_diags_strip.gif') repeat-x top;
}
#home #maincontent,
#publicity #maincontent{
	padding: 0;
	background: none;
}
#bread{
	position: absolute;
	top:  15px;
	left: 215px;
	width: 690px;
	height: 30px;
	line-height: 30px;
	z-index: 10;
}
ul#nav_main{
	padding-bottom: 30px;
	background: #fff url('../img/common/bg_diags_strip.gif') repeat-x bottom;
}
ul.nav_sub{
	font-size: .9em;
	margin-top: 0;
	padding: 30px 0;
	background: #fff url('../img/common/bg_diags_strip.gif') repeat-x bottom;
}
ul#mediaLinks{
	font-size: .9em;
	margin-top: 15px;
	padding-top: 10px;
}


#main #maincontent .halved{
	float: left;
	width: 395px;
	padding:  40px 0 0 0;
	background: #fff url('../img/common/bg_diags_strip.gif') repeat-x top;
}
#main #maincontent .flash{
	padding:  10px 0 20px 0;
}
#sitemap div.section{
	float:  left;
	width: 112px;
}
#main #maincontent div.module_hori{
	float: left;
	width: 790px;
	margin: 0;
	padding: 50px 0 35px 0;
	background: url('../img/common/bg_diags_strip.gif') repeat-x top;
}
#main #maincontent div.module_hori.bottom{
	margin: 25px 0 -40px 0 ;
}
#main #maincontent div.module_hori.no_diags{
	margin-top: -80px;
	/*padding: 0 0 0 35px;*/
	background: none;
}
#main #maincontent div.module_hori.flash{
	padding: 30px 0;
	margin: 0 0;
	background: #fff url('../img/common/bg_diags_strip.gif') repeat-x top;
}
#main #maincontent div.module_hori.flash.no_diags{
	background: none;
}

/*	Thumbnail lists	*/

ul#projects,
ul.projects{
	padding:  0 0 30px 0;
}
ul#projects li{
	position: relative;
	float: left;
	min-height: 365px;
	margin-bottom: 5px;
	padding: 5px 0 30px 0;
	background: #fff url('../img/common/bg_diags_strip.gif') repeat-x bottom;
}
/*ul#projects li:hover{
	background: #ececec url('../img/common/bg_diags_strip.gif') repeat-x bottom;
}*/

ul#projects li p.project_view a{
	display: block;
	width: 395px;
	height: 300px;
	margin-top: 10px;
}
ul#projects li p.project_view span{
	display: block;
	position: absolute;
	width: 395px;
	height: 300px;
	bottom: 0;
	left: 0;
	z-index: 999;
	cursor: pointer;
	text-indent: -999em;
}

ul#projects li p.project_view span:hover{
	background: url('../img/common/bg_viewproject.gif') no-repeat bottom left;
}

/*	small thumb nails	*/

#smallthumbs ul#projects li{	
	width: 195px;
	min-height: 290px;
	margin-bottom: 20px;
}
#smallthumbs ul#projects li div.min_height{	
	min-height: 11em;
	margin-bottom: 20px;
}
#smallthumbs ul#projects li p.project_view a	{
	width: 195px;
	height: 150px;
}
#smallthumbs ul#projects li p.project_view a:hover	{
	background: none;
}
#smallthumbs ul#projects li p.project_view span{
	width: 195px;
	height: 150px;
}


/*	News						*/

ul#news{
	margin-top: 0;
}
ul#news li{
	position: relative;
	float: left;
	width: 790px;
	padding: 30px 0 45px 0;
	background: #fff url('../img/common/bg_diags_strip.gif') repeat-x bottom;
}
ul#news li div.newsintro{
	float: right;
	width: 340px;
	margin: 0 20px;
}

div.copy{
	float: right;
	width: 340px;
	margin: 0 25px 35px 25px;
}
/*	Client page					*/

#clients div.copy{
	float: left;
	width: 340px;
	margin: 0 0 35px 0;
}
#clienthtml div.copy{
	margin: 30px 25px 35px 25px;
}

ul.no_border_diags li{
	padding-bottom: 0;
	background: none;
}

/*	Case study page				*/

#case div.copy{
	float: right;
	width: 340px;
	margin: 10px 25px;
}

/*	More news page				*/

#morenews div.copy{
	float: right;
	width: 340px;
	margin: 0 25px 35px 25px;
}

/*	About us page				*/

#aboutus div.copy{
	margin: 0 25px;
}

/*	Contact us page				*/

#contactus div#contactdetails{
	position: absolute;
	top: 45px;
	right:  40px;
}

/*	Job columns	*/


#maincontent.jobs div.col_1,
#maincontent.jobs div.col_2{
	float: left;
	width: 320px;
}
#maincontent.jobs div.col_1{
	margin-right: 20px;
}

/*	Other client projects on project pages	*/

div.other_projects{
	float: left;
	width: 790px;
	padding: 10px 0;
}
div.other_projects .col_1{
	float: left;
	width: 370px;
	padding-right: 80px;
}
div.other_projects .col_2{
	float: left;
	width: 200px;
	padding-top: 1.3em;
	
}