@import "reset.css";
@import "fonts.css";
@charset "UTF-8";

/*-----------------------------------------------------------------------------
Primary Style Sheet

version:   1.0
author:    DRAWING AND MANUAL.
website:   http://www.d-deprtment.jp

-----------------------------------------------------------------------------*/
html {  width:100%;
		height:100%; 
	
		padding: 0;
		
		}

body {
	width:100%;
	height:100%;
	color:#fff;
	background-color:#121212;
	background-position: center top;
	background-image: url(../image/Background.gif);
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
		}

img{margin:0;padding:0;border:none;}
a:focus, a:hover, a:active { outline:none }

/* Container ----------------------------------------------------------------*/
#container {
	position:relative;
	display:block;
	width:100%;
	margin:0;
	padding:0;
}

#container-inner {
	margin:0 auto;
	padding: 15px 0 0 0;
	width:100%;
	float:left;
}

#container2 {
	margin:0 auto;
	padding: 20px 20px 20px 20px;
	width:960px;
	text-align:right;
}

#container_contact {
	margin:0 auto;
	padding: 50px 20px 50px 20px;
	width:240px;
	height:700px;
	text-align:left;
	font-size: 100%;
	text-decoration: none;
}
#container_contact ul{
	list-style-type:none;
	display: inline;
	text-decoration: none;
	padding: 0 20px 0 0;
	margin: 0;
}
#container_contact ul li{
	text-decoration: none;
	list-style-type:none;
	padding: 0;
	margin: 0 10px 0 0;
	line-height:1.5em;
}
#container_contact ul li a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 0;
	margin: 0;
	font-size: 90%;	
	font-weight:bold;
	text-transform:uppercase;
	border-bottom: 2px solid #000000;
}

/* --------------------------------------------------------------------------*/
/* top nav -------------------------------------------------------------------*/
#top-nav {
	font-size:85%;
	top:0;
	left:0;
	margin:0 0 0 0;
	padding:5px;
	text-align: right;
	width: 100%;
	display:block;
	background-color:#000000;
	height: 16px;
	position: fixed;
	z-index: 20;
	}

#top-nav span.logo { margin: 0; float: left }

#top-nav ul li{
	display: inline;
	padding: 0;
	margin: 0 10px 0 0;
	line-height:1.5em;
}
#top-nav ul li a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 0;
	margin: 0;
	font-size: 100%;	
	font-weight:bold;
	text-transform:uppercase;
}

#top-nav ul li a:hover {border-bottom: 2px solid #FFFFFF;}
#top-nav ul li a.active {border-bottom: 2px solid #FFFFFF;}
	

/* --------------------------------------------------------------------------*/
/* pagebody -----------------------------------------------------------------*/
#pagebody {
	position:relative;
	left:0;
	height:1px;
}
#grid {
	position:absolute;
	width:auto;
	left:0;/* hack for win ie6 */
}
#grid div.item{
	position:absolute;
	background:#000;
	width:190px;
	text-align:left;
}
#grid div.item div.body{
	line-height: 1.2em;
	padding: 8px;
}
#grid div.item div.body img{
	padding: 0;
}
#grid div.item div.body ul.rotation{
	margin-bottom: 8px;
}
#grid div.item div.body div{
}
#grid div.item div.body .title{
	color:#FFFFFF;
	text-transform:uppercase;
	display:block;
	font-size:120%;
	font-weight: bold;
	line-height: 1em;
	margin: 10px 0 0 0;
	text-decoration:none
	}
.title a{color:#FFFFFF; text-decoration:none;}


#grid div.item div.body .description{
	font-size:85%; 
	padding-top: 10px; 
	display:block; 
	line-height: 1.2em;
	color:#7f7e7b; 
	text-decoration:none
	}

.description a { font-weight: bold; text-transform:uppercase; display:block; font-size: 95%; color:#FFFFFF; text-decoration:none; margin-top: 10px; border-bottom: 3px solid #000; }
		
		
.description p {margin: 0 0 10px 0;}

#grid div.item div.body ul{
	font-size:85%;
	margin:0;
	padding:0;
}


.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0px;
	top: 0;
	height: 100%;
	background: #ddd;
}
.jScrollPaneDrag {
	position: absolute;
	background: #999;
	cursor: pointer;
	overflow: hidden;
	right: 0;
}
.jScrollPaneDrag:hover {
	background: #666;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}



/* --------------------------------------------------------------------------*/
/* home details  -------------------------------------------------------------------*/
#home-details {
	position:relative;
	float: left;
	display: inline;
	font-size:90%;
	margin:35px 0 0 0;
	padding: 0;
	text-align: left;
	clear:both;
/*	border-top: #fff 2px solid;   */
	color:#7f7e7b;
	width: 100%;
	}
		
#home-details ul{
	display: inline-block;
	margin: 0 auto;
	padding: 5px;
	text-decoration:none;
	}
	
#home-details ul li{
	display: inline-block;
	padding: 0;
	width: 23%;
	margin: 25px 0 5px 5px;
	line-height:1.3em;
	float:left;
	text-decoration:none;
	}
	
#home-details ul li a{
	display: inline-block;
	text-decoration:none;
	cursor: pointer;
	}

#home-details h3 {color:#FFFFFF; text-transform:uppercase; display:block; font-size:150%; line-height: 1.0em; font-weight: bold; margin: 0 0 5px 0; }

/* --------------------------------------------------------------------------*/
/* HOME - large promos -------------------------------------------------------------
.sickcity-home { margin: 0; background-image: url(../image/HaverfordWest01.jpg); background-repeat:no-repeat;  width: 374px; height: 320px; display:block; }------*/

.project_info {  
	padding: 10px 10px 10px ; 
	width: 354px; 
	float:left; 
	display:block; 
	margin: 0; }
	
.project_info h3 { 
	color:#FFFFFF; 
	text-transform:uppercase; 
	display:block; 
	font-size:160%; 
	line-height: 1.0em; 
	font-weight: bold; 
	margin: 0 0 10px 0; 
	}
	
.project_info p { 
	font-size:85%; 
	margin: 0 0 10px 0; 
	color:#7f7e7b; 
	display:block; 
	line-height: 1.3em; 
	width: 94%; 
	display:block; 
	}
	
.project_info a { 
	text-transform:uppercase; 
	display:block; 
	font-size: 15px; 
	color:#FFFFFF; 
	text-decoration:none; 
	margin-top: 10px; 
	border-bottom: 3px solid #000; 
	font-weight: bold;
	}
	
.project_info a:hover { 
	border-bottom: 3px solid #FFFFFF;
	}
	
.project_info span {
	color:#e67100; 
	text-transform:uppercase; 
	display:block; 
	font-size:110%; 
	line-height: 1.0em; 
	font-weight: bold; 
	display:block;  
	}

/* --------------------------------------------------------------------------*/
/* WORK - window -------------------------------------------------------------------*/


.work_outer_container {
	border:0;
	width: 650px;
	float: left;
	display:block;
	margin: auto;
	padding: 0 0 0 0;
	background-color: #050505;
	text-align:left
	}

.work_outer_container2 {		
	border:0;
	width: 650px;
	float: left;
	display:block;
	margin: auto;
	padding: 30px 0 0 0;
	}
	

.work_container {		
	border: 0;
	width: 630px;
	float: left;
	background-color: #050505;
	display: block;
	margin: 0 0 0px 0;
	padding: 10px; 
	}
	
.work_container img {
	float: center;
	max-width: 480px;
	}	
	
.work_thumbs {		
	border: 0;
	width: 99%;
	float: left;
	background-color: #050505;
	display: block;
	margin: 5px 5px 5px 5px;
	
	font-size:100%;
	color:#777777;
	line-height: 1.2em;
	}
	
.work_thumbs img{		
	margin: 2px 2px 2px 2px;
	width: auto;
	height: 75px;
	
	}

.work_details {
	width: 185px;
	float:right;
	display:block;
	margin: 0px 5px 0 0;
}
.work_details h3 { font-size: 150%; color:#FFFFFF; text-transform:uppercase; display:block; line-height: 1.0em; font-weight: bold; }
.work_details p {
	font-size:90%;
	padding-top: 18px;
	color:#777777;
	display:block;
	line-height: 1.2em;
	width: 99%;
}
.work_details a { text-transform:uppercase; display:block; font-size:120%; color:#FFFFFF; text-decoration:none; margin-top: 18px; padding-bottom: 3px; font-weight: bold; }
.work_details a:hover { border-bottom: 3px solid #FFFFFF; padding-bottom: 0;  }

/* --------------------------------------------------------------------------*/
/* project - window -------------------------------------------------------------------*/


.project_outer_container {
	border:0;
	width: 650px;
	float: right;
	display:block;
	margin: auto;
	padding: 20px 0 0 0;
	background-color: #050505;
	text-align:left
	}

.project_outer_container2 {		
	border:0;
	width: 650px;
	float: right;
	display:block;
	margin: auto;
	padding: 100px 0 0 0;
	}
	

.project_container {		
	border: 0;
	width: 630px;
	float: left;
	background-color: #050505;
	display: block;
	margin: 0 0 10px 0;
	padding: 10px; 
	}
	
.project_container img {
	float: left;
	width: 400px;
	}	
	
.project_thumbs {		
	border: 0;
	width: 95%;
	float: left;
	background-color: #050505;
	display: block;
	margin: 5px 5px 5px 5px;
	}
	
.project_thumbs img{		
	margin: 0px 5px 0px 5px;
	width: 120px;
	height: 90px;

	}

.project_details {
	width: 200px;
	float:right;
	display:block;
	margin: 5px 5px 0 0;
}
.project_details h3 { font-size: 150%; color:#FFFFFF; text-transform:uppercase; display:block; line-height: 1.0em; font-weight: bold; }
.project_details p {
	font-size:90%;
	padding-top: 18px;
	color:#777777;
	display:block;
	line-height: 1.2em;
	width: 90%;
}
.project_details a { text-transform:uppercase; display:block; font-size:120%; color:#FFFFFF; text-decoration:none; margin-top: 18px; padding-bottom: 3px; font-weight: bold; }
.project_details a:hover { border-bottom: 3px solid #FFFFFF; padding-bottom: 0;  }

/* --------------------------------------------------------------------------*/
/* WORK - nav - view by -------------------------------------------------------------------*/

	

#view_by {
	border:0;
	float: right;
	display: block;
	padding: 15px 0px 0 20px;
	width: 100%;
	margin: auto;
	}

#view_by ul {
	list-style-type:none;
	margin: 0 0 0 0;
	text-align: right;
	list-style-type:none;
	line-height: 2.1em;
	display: inline;
	}

#view_by ul li{
	display: inline;
	padding: 0;
	margin: 0 0 0 18px;
	}

#view_by li a {
	text-decoration:none;
	color:#666;
	margin: 0 0 0 0;
	font-size:130%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	display: inline;
	}

#view_by li a:hover,
#view_by li a.sel {
	color:#fff;
	}

#view_by span { font-size: 90%; color:#FFFFFF; display:inline-block; }




/* --------------------------------------------------------------------------*/
/* WORK - nav -------------------------------------------------------------------*/
#work_nav {		
	border:0;	
	letter-spacing: -0.1em;
	float:right;
	display:block;
	padding: 0px 15px 0 0;
	width: 280px;
	margin: auto;
	}

#work_nav ul {
	list-style-type:none;
	margin: 0 0 0 0;
	text-align: left;
	list-style-type:none;
	line-height: 1.9em;
	}

#work_nav li a {
	display:block;
	text-decoration:none;
	color:#666;
	margin: 0 0 0 0;
	font-size:150%;
	text-transform:uppercase;
	font-weight: bold;
	cursor: pointer;
	}

#work_nav li a:hover,
#work_nav li a.sel {
	color:#fff;
	}
	
#work_list li {
	display:block;
	color:#666;
	margin: 0 10 0 0;
	font-size:120%;
	text-transform:uppercase;
	font-weight: bold;
	line-height: 1.2em;
	}

#work_list li a {
	display:block;
	text-decoration:none;
	color:#999999;
	margin: 0 0 0 0;
	font-size:100%;
	text-transform:uppercase;
	font-weight: bold;
	cursor: pointer;
	}

#work_list li a:hover,
#work_list li a.sel {
	color:#fff;
	}	

/* --------------------------------------------------------------------------*/
/* Home - nav -------------------------------------------------------------------*/

#homenav {		
	border:0;	
	float:left;
	display:block;
	padding: 0px ;
	width: 572px;
	height: 320px;
	background-image:url(../image/abstract.jpg);
	background-repeat:no-repeat;
	}

#homenav ul {
	position:relative;
	top: 105px;
	right: 200px;
	list-style-type:none;
	margin: 0;
	text-align: right;
	list-style-type:none;
	line-height: 2.3em;
	}


#homenav a {
	display:block;
	text-decoration:none;
	color:#fff;
	margin: 0 0 0 0;
	font-size:255%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	}
	

#homenav li a:hover,
#homenav li a.sel {
	color:#fff;
	}
	
	
	

/* --------------------------------------------------------------------------*/
/* WORK - left descriptions -------------------------------------------------------------------*/

	

.work_left_description {		
	border:0;	
	float:left;
	display:block;
	padding: 20px 15px 0 0;
	width: 290px;
	margin: auto;
	}

.work_left_description h3 {  color:#FFFFFF; text-transform:uppercase; display:block; font-size:175%; line-height: 1.0em; }
.work_left_description p { font-size:90%; padding-top: 18px; color:#777777; display:block; line-height: 1.2em; width: 94%; }


/* --------------------------------------------------------------------------*/
/* WORK - thumbs -------------------------------------------------------------------*/


.eden {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/edenhealthclub_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.eden:hover { 
	background-position: 0px 0; 

	}

.weybridge {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/weybridge_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.weybridge:hover { 
	background-position: 0 0; 
	}
.carterton {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/carterton_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.carterton:hover { 
	background-position: 0 0; 
	}
	
.barcalona {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/hotelbarcelona_thumb.jpg);
	
	background-position: -151px 0;
	float: left;
	}

a.barcalona:hover { 
	background-position: 0 0; 
	}

.haverfordwest {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/haverfordwest_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.haverfordwest:hover { 
	background-position: 0 0; 
	}	

.ickworth {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/ickworth_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.ickworth:hover { 
	background-position: 0 0; 
	}			

.pavilion {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/pavilion_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.pavilion:hover { 
	background-position: 0 0; 
	}		

.peros {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/perosbridge_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.peros:hover { 
	background-position: 0 0; 
	}

.wsmediacentre {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/watershed_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.wsmediacentre:hover { 
	background-position: 0 0; 
	}


.kandinsky {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/kandinsky_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.kandinsky:hover { 
	background-position: 0 0; 
	}


.redcliffe {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/redcliffemasterplanning_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.redcliffe:hover { 
	background-position: 0 0; 
	}

.foweyext {
	display:block;
	margin: 3px 3px 3px 3px;
	padding: 0;
	width: 151px;
	height: 151px;
	background-image:url(../image/foweyext_thumb.jpg);
	background-position: -151px 0;
	float: left;
	}

a.foweyext:hover { 
	background-position: 0 0; 
	}





/* --------------------------------------------------------------------------*/
/* NEWS - nav -------------------------------------------------------------------*/

	

#news_nav {		
	border:0;	
	float:left;
	display:block;
	padding: 30px 15px 0 0;
	width: 290px;
	margin: auto;
	}

#news_nav ul {
	list-style-type:none;
	margin: 0 0 0 0;
	text-align: right;
	list-style-type:none;
	line-height: 2.1em;
	}


#news_nav li a {
	display:block;
	text-decoration:none;
	color:#333;
	margin: 0 0 0 0;
	font-size:230%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	}

#news_nav li a:hover,
#news_nav li a.sel {
	color:#fff;
	}
		

/* --------------------------------------------------------------------------*/
/* ABOUT US - nav -------------------------------------------------------------------*/



#about_nav {		
	border:0;
	float:left;
	display:block;
	padding: 30px 40px 0px 40px;
	margin: 30px 40px 10px 40px;
	cursor: pointer;
	}

#about_nav ul {
	list-style-type:none;
	text-align: left;
	cursor: pointer;
	
	line-height: 1.8em;
	}

#about_nav li a {
	display:block;
	text-decoration:none;
	color:#666;
	margin: 0px 00px 0 0;
	font-size: 150%;
	text-transform:uppercase;
	font-weight: bold; 
	cursor: pointer;
	letter-spacing: -0.1em;	
	}

#about_nav li a:hover,
#about_nav li a:active,
#about_nav li a:visited,
#about_nav li a.sel {
	color:#fff;
	cursor: pointer;
	}

.details_box {
	display:none;
	padding: 0 0 0 0;
	margin: 0px 10px 0 0;
	}	

.details_box p {
	margin: 0 0 0 0;
	font-weight: normal;
	color: #777777;
	font-size: 90%;
	width: 60%;
	line-height: 1.3em;
	}
	
.details_box li {
	font-size: 85%;
	margin: 0px 0px 0px 20px;
	line-height:1.7em;
	}
	
.details_box h1 {
	font-size: 150%;
	margin: 0 0 5px 0;
	font-weight: bold;
	display:block;
	text-transform: uppercase;
	color:#FFFFFF;
	}

.details_box h3{
	display: block; 
	font-size: 100%;
	width: 50%;
	margin: 0 0 10px 0;
	line-height: 1.3em;
	}

.partners_box {
	display:none;
	padding: 0 0 0 0;
	margin: 10px 0 0 0;
	}	

.partners_box p {
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	font-weight: normal;
	color: #777777;
	font-size: 90%;
	width: 97%;
	
	line-height: 1.3em;
	}
	
.partners_box h1 {
	font-size: 150%;
	margin: 0 0 5px 0;
	font-weight: bold;
	display:block;
	text-transform: uppercase;
	color:#FFFFFF;
	}

.partners_box h3{
	display: block; 
	font-size: 100%;
	width: 100%;
	margin: 0 0 10px 0;
	line-height: 1.3em;
	}

/* --------------------------------------------------------------------------*/
/* ABOUT US - nav -------------------------------------------------------------------*/
		
/* --------------------------------------------------------------------------*/
/* footer -------------------------------------------------------------------*/
#footer_container {
	position:relative;
	float: left;
	top:0;
	left:0;
	display:block;
	margin: 0px 0 0 0;
	padding: 0px 0 0px 0;
	width: 100%;
}
#footer {
	position:relative;
	float: left;
	font-size:77%;
	top:0;
	left:0;
	display:block;
	margin: 0px 0 0 0;
	padding: 8px 0 12px 0;
	text-align: left;
	border-top: #fff 3px solid;
	width: 100%;
}
#footer span.copyright { margin-left: 40px;  margin-right: 40px; float: right }

#footer ul{
	display: inline;
	font-size:93%;
}
#footer ul li{
	display: inline;
	padding: 0 8px;
	margin: 2px 0;
	line-height:1.5em;
}
#footer ul li a {
	display: inline-block;
	text-decoration: none;
	color:#FFFFFF;
	text-transform:uppercase;
	padding-bottom:2px;
}

#footer li a:hover,
#footer li a.sel {
	color:#fff;
	border-bottom: 2px solid #FFFFFF;
	padding-bottom:0;
	}


/* --------------------------------------------------------------------------*/
/* work slideshow  -------------------------------------------------------------------*/

/*set CSS for SPAN tag surrounding each image*/
.seqslidestyle{
margin: 0;
}





/* --------------------------------------------------------------------------*/
/* jobs -------------------------------------------------------------------*/



#jobs {		
	border:0;
	float:left;
	display:block;
	padding: 40px;
	margin:auto;
	}

#jobs ul {
	list-style-type:none;
	margin: 20px 0 0 0;
	text-align: left;
	line-height: 3.5em;
	}

#jobs li {
	display:block;
	text-decoration:none;
	color:#333;
	margin: 0 0 5px 0;
	font-size: 150%;
	text-transform:uppercase;
	font-weight: bold;
	line-height: 0.8em;
	}

#jobs li a:link,
#jobs li a:active,
#jobs li a:visited,
#jobs li a.sel {
	color:#fff;
	text-decoration:none;
	margin: 10px 0 3px 0;
	}

#jobs li a:hover { border-bottom: 3px solid #FFFFFF; }
		


#jobs p {
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
	font-weight: normal;
	color:#eeeeee;
	font-size: 100%;
	width: 50%;
	line-height: 1.3em;
	}
	
#jobs h3 {
	font-size:230%;
	margin: 100px 0 5px 0;
	font-weight: bold;
	display:block;
	text-transform: uppercase;
	color:#FFFFFF;
	}
	


		





/* --------------------------------------------------------------------------*/
/* News -------------------------------------------------------------------*/

.news_details {  float: left; display:block; margin: 0 0 0 0; padding: 10px;  }
.news_details h3 { color:#FFFFFF; text-transform:uppercase; display:block; font-size:160%; line-height: 1.0em; font-weight: bold; }
.news_details span { color:#e67100; text-transform:uppercase; display:block; font-size:110%; line-height: 1.0em; font-weight: bold; display:block;  }
.news_details p { font-size:120%; padding-top: 15px; color:#999999; display:block; line-height: 1.2em; width: 94%; }
.news_details p a {padding-top: 0px; color:#e67100; text-decoration:none;cursor: pointer;}
.news_details a { text-decoration:none; margin-top: 15px; padding-bottom: 3px; }
.news_details a:hover {cursor: pointer; }