@charset "UTF-8";
/* CSS Document */

body {
	font-family: "futura-pt",sans-serif;
	font-weight: 400;
	font-size: 0.75em;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: #000;
	z-index: auto;
}

img { 
	border: none; 
	}

a img { 
	border: none; 
	}



/* font styles */

p {
	padding: 0 0 0 0;
	margin: 20px 0 0 5px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	text-decoration: none;
	font-weight: 500;
	font-style: normal;
	color: #FFF;
	line-height: 20px;
	letter-spacing: 1px;
	}
	
h1 {
	padding: 0 0 0 0;
	margin: 2px 0 0 5px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	text-decoration: none;
	font-weight: 500;
	font-style: normal;
	color: #FFF;
	line-height: 20px;
	letter-spacing: 1px;
	border-top: solid #FFF 1px;
	border-bottom: solid #FFF 1px;
	}

p.address {
	margin: 0 0 0 0;
	line-height: 20px;
	}
	
p.centre {
	text-align: left;
	margin: 0 0 10px 5px;
	}
	
a {
	padding: 0 0 0 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	text-decoration: none;
	font-weight: 500;
	font-style: normal;
	color: #FFF;
	line-height: 25px;
	letter-spacing: 2px;
	}
	
a:hover {
	color: #FFCC00;
	}
	
a:visited {
	text-decoration: none;
	border: none;
	outline: none;
	}
	
a.project {
	padding: 0 0 0 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	text-decoration: none;
	font-weight: 500;
	font-style: normal;
	color: #CCC;
	line-height: 20px;
	letter-spacing: 2px;
	}
	
a.project:hover {
	color: #FFCC00;
	}
	
a.project:visited {
	text-decoration: none;
	border: none;
	outline: none;
	}
	

/* layout styles */

* {
	margin: 0;
	padding: 0;
	}
	
#main_container {
	margin: 0 auto;
	position: relative;
	width: 965px;
	height: 100%;
	}
	
	
/* header styles */		

#header {
	position: relative;
	margin: 30px 0 0 0;
	padding: 0 0 0 0;
	width: 965px;
	height: 230px;
	background: url(../img/hugo_pyett_thatcher_logo.svg);
	background-position: center;
	background-repeat:no-repeat;
	}
	
#header_left {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 500px;
	float: left;
	}
	
	
#header_right {
	position: relative;
	margin: 20px 0 0 0;
	padding: 0 0 0 0;
	width: 300px;
	float: right;
	}
	
#nav {
	position: relative;
	margin: 30px 0 0 0;
	height: 30px;
	width: 965px;
	float: inherit;
	background: #000;
	border-top: 0.09em solid white;
	border-bottom: 0.09em solid white;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	text-decoration: none;
	font-weight: 400;
	font-style: normal;
	color: #FFF;
	line-height: 30px;
	letter-spacing: 2px;
	}
	
#nav_left {
	float: left;
	}
	
#nav_left ul{
	margin: 0 0 0 10px;
	height: auto;
	}
	
#nav_left li{
	display: inline;
	margin: 0 5px 0 0;
	}	

#nav_right {
	float: right;
	}
	
#nav_right ul{
	margin: 3px 10px 0 0;
	height: auto;
	}
	
#nav_right li{
	display: inline;
	margin: 0 0 5px 0;
	}	
	
/* main content styles */

#maincontent {
	position: relative;
	margin: 30px 0 30px 0;
	padding: 0 0 0 0;
	width: 965px;
	height: auto;
	}
	
#home {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 965px;
	height: 380px;
	}

#home_left {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 20px 0 0;
	width: 445px;
	float: left;
	}
	
#home_right {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 500px;
	float: right;
	}
	
#contact {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 965px;
	height: 450px;
	}

#contact_left {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 340px;
	float: left;
	}
	
#contact_right {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 625px;
	float: right;
	}
	
	
#imagegrid {
	position: relative;
	margin: 0 0 0 5px;
	width: 960px;
	height: 143px;
	}
	
.thumb {
	float: left;
	margin: 0 2px 2px 0;
	}

#project {
	position: relative;
	margin: 30px 0 30px 0;
	padding: 0 0 0 0;
	width: 965px;
	height: 450px;
	}
	
#project_left {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 330px;
	height: 450px;
	float: left;
	}

#project_right {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 615px;
	height: 450px;
	float: right;
	
	}
/* footer styles */	

#footer {
	position: relative;
	margin: 30px 0 20px 0;
	padding: 0 0 0 5px;
	height: 30px;
	width: 960px;
	float: inherit;
	background: #000;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	text-decoration: none;
	font-weight: 400;
	font-style: normal;
	color: #FFF;
	line-height: 30px;
	letter-spacing: 2px;
	}




/* slider styles */

#metaContainer {
	position: relative;
	width: 965px;
	margin: 10px 0 0 0;
	}
	
#slideContainer { 
	margin: 0 0 0 0; 
	width: 965px; 
	height: 490px; 
	z-index: -1;
	}

#slideContainer_public { 
	margin: 0 0 0 0; 
	width: 965px; 
	height: 400px; 
	z-index: -1;
	}

/* The left and right navigation buttons */

#metaContainer .backLink, #metaContainer .forwardLink {position: absolute; top: 230px; width: 39px; height: 42px; z-index: 100; }
#metaContainer .backLink a, #metaContainer .forwardLink a {display: block; width: 39px; height: 42px; text-indent: -9999em; background-image: url(../img/slider/nav-arrow-sprite.svg); background-repeat: no-repeat; outline: 0;}
#metaContainer .backLink {left: -19px;}
#metaContainer .forwardLink {right: -19px;}
#metaContainer .backLink a {background-position: 0 0; left: 0px;}
#metaContainer .backLink a:hover, #metaContainer .backLink a:active  {background-position: 0 -43px; width: 39px;}
#metaContainer .forwardLink a {background-position: -79px 0;}
#metaContainer .forwardLink a:hover, #metaContainer .forwardLink a:active  {background-position: -79px -43px; width: 39px!important;}

#metaContainer .backLink_public, #metaContainer .forwardLink_public {position: absolute; top: 200px; width: 39px; height: 42px; z-index: 100; }
#metaContainer .backLink_public a, #metaContainer .forwardLink_public a {display: block; width: 39px; height: 42px; text-indent: -9999em; background-image: url(../img/slider/nav-arrow-sprite.svg); background-repeat: no-repeat; outline: 0;}
#metaContainer .backLink_public {left: -19px;}
#metaContainer .forwardLink_public {right: -19px;}
#metaContainer .backLink_public a {background-position: 0 0; left: 0px;}
#metaContainer .backLink_public a:hover, #metaContainer .backLink_public a:active  {background-position: 0 -43px; width: 39px;}
#metaContainer .forwardLink_public a {background-position: -79px 0;}
#metaContainer .forwardLink_public a:hover, #metaContainer .forwardLink_public a:active  {background-position: -79px -43px; width: 39px!important;}


.facebook_holder {
	position: relative;
	margin: 15px 10px 0 0;
	width: 32px;
	height: 32px;
	float: left;
	display: inline;
	}

.facebook_btn {
	 display: block;
 	 width: 32px;
 	 height: 32px;
	background: url(../img/btn/btn_facebook.svg);
	background-position: 0 -32px;	
	}
	
.facebook_btn:hover {
	background-position: 0 0;	
	}
	
.facebook_btn span {
 	 position: absolute;
 	 top: -999em;
	}





.sss {
	height: 0;
	margin: 0;
	padding: 0;
	position: relative;
	display: block;
	overflow: hidden;
}

.ssslide {
	width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	overflow: hidden;
}

.ssslide img {
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
	display: block;
}

.sssnext, .sssprev {
	width: 25px;
	height: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	background: url('../img/slider/arr.png') no-repeat;
}

.sssprev {
	left: 3%;
	background-position: 0 50%;
}

.sssnext {
	right: 3%;
	background-position: -26px 50%;
}

.sssprev:hover, .sssnext:hover {
	cursor: pointer;
}