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

html { min-height: 100%; margin-bottom: 1px; 
}

h1{position:relative;color:#000;
text-align:right;
font-size:40px;
margin:45px 53px 0px 0px;}


h2{
color:white;
font-weight:200;
font-size:18px;
}

eh3{
clear:both;
text-align:center;
color:#555555;
font-weight:100;
font-size:14px;
margin:-20px 30px 0px 0px;
}

body {
	font-family:  'Pontano Sans', sans-serif;
        font-weight:200;
	background: #000000;
	margin: 0px; 
	padding: 0px;
	text-align: center;
	}
#container {
	width: 900px;
	padding:0px;
	background: #1b1b1b;
	margin: 20px auto 0px auto; 
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 0px solid #000000;
	text-align:left; 
}
#header {
width:855px;
background: #1b1b1b; 
padding: 10px 10px 0 20px; 
}

#header img{float:left;
display:inline;/*cures margin bug in ie6 */
margin:0px 0px 0px 0px;
border:0px;
}
#header-name img{
float:right;}


#maincontent {
margin:0px;
padding:0px;
background: #1b1b1b;
}

.clear{clear:both;}

#maincontent-home img{
margin:35px 0px 40px 0px;
padding:0px;
width:900px;
height:131px;
}

#company-text, #strategy-text, #contact-text, #branding-text, #film-text, #photos-text, #web-text
{width:800px;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:30px 0px 20px 52px;
eborder:2px #222222 solid;
}

#copyright-text{
width:800px;
float:left;
display:inline;/*cures margin bug in ie6 */
eborder:2px #222222 solid;
margin:70px 0px 100px 52px;}

#terms-text
{width:800px;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:0px 0px 20px 52px;
eborder:2px #222222 solid;
}




#strategy-text p, #contact-text p,#branding-text p, #film-text p, #photos-text p, #web-text p, #home-text p{
font-size:18px;
margin:10px 0px 5px 0px;
padding:0px;
color:#bbbbbb;
}

#copyright-text p, #company-text p{
font-size:16px;
font-weight:100;
margin:10px 0px 5px 0px;
padding:0px;
color:#bbbbbb;
}

#terms-text h1,#copyright-text h1, #company-text h1, #strategy-text h1, #contact-text h1, #branding-text h1, #film-text h1, #photos-text h1,  #web-text h1
{
font-size:20px;
font-weight:150;
margin:0px 0px 5px 0px;
padding:0px;
color:#ffffff;}

#web, #photos, #film, #home{width:900px;
margin:30px 0px 0px 27px;
padding:0px;}

#home-text{width:350px;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:30px 0px 40px 52px;
padding:0px;
}

#home-text h1{
font-weight:100;
font-size:20px;
margin:10px 0px 5px 0px;
color:#bbbbbb;
}

#web-example{
float:left;
display:inline;
text-align:center;
color:#cccccc;
font-size:14px;
width:240px;
margin:10px 12px 0px 28px;
padding:0px;}

#web-example a:link, #web-example a:visited{color:#777777;text-decoration:none}
#web-example a:hover, #web-example a:active{color:#ff623c;text-decoration:none;}

web-example a:hover img {outline: 2px solid #ff623c; }
 
#web img{
	float:left;
	display:inline;
	width:230px;
	height:190px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}


#next-back{
display:inline;
clear:both;
float:right;
font-size:16px;
margin:20px 60px 0px 0px;
padding:0px 5px 0px 5px;
background:#1b1b1b;
color:#bbbbbb;
}

#photo-copyright{
display:inline;
clear:both;
float:right;
font-size:16px;
margin:0px 60px -30px 0px;
padding:0px 5px 0px 5px;
background:#1b1b1b;
color:#bbbbbb;
}


#photos img{float:left;
display:inline;
width:140px;
height:175px;
margin:0px 0px 0px 24px;}

#film-container{
margin:0px 0px 0px 15px;}

#film {float:left;
display:inline;
width:230px;
margin:0px 0px 0px 40px;}

#film p{
text-align:center;
color:#777777;
font-size:14px;
margin:2px 0px 12px 0px;
padding:0px;}


#branding, #strategy, #contact{width:850px;
margin:30px 0px 0px 54px;
padding:0px;}

#branding img{float:left;
display:inline;
width:99px;
height:75px;
margin:0px 0px 0px 0px;}

#icon{width:220px;
height:250px;
background-color:#CC0033;
float:right;
display:inline;/*cures margin bug in ie6 */
margin:30px 0px 0px 0px;
padding:0px;
}

#strategy img{float:left;
display:inline;
width:800px;
height:150px;
margin:0px 0px 0px 0px;}

#contact-background{
float:left;
display:inline;/*cures margin bug in ie6 */
width:760px;
margin:20px 0px 0px 0px;
background-color:#181818;
padding:20px ;}

#contact-background h1{
float:left;
display:inline;/*cures margin bug in ie6 */
font-weight:100;
font-size:20px;
margin:0px 70px 0px 30px;
padding:0px;
color:#bbbbbb;
}

#contact img{float:left;
display:inline;
width:800px;
height:150px;
margin:0px 0px 0px 0px;}

#xmas img{text-align:center;
width:560px;
height: 400px;
margin:0px 0px 0px 170px;}

#xmas2 {
	width: 1000px;
	padding:0px;
	background: #000;
	margin: 20px auto 0px auto; 
	text-align:center; 
}
.color {
color:#777777;}

a:link, a:visited{color:#56ccc1;text-decoration:none}
a:hover, a:active{color:#ff623c;text-decoration:none;font-size:100%}

#surfdesign a:link, #surfdesign a:visited{
text-decoration:none;
color:#bbbbbb;}

#surfdesign a:hover, #surfdesign a:active{
text-decoration:none;
color:#555555}

#surfdesign p{
margin:5px 0px 30px 0px;
text-align:center;
font-size:14px;
line-height:30px;
}
#company-text h2{
font-size:20px;
font-weight:150;
margin:30px 0px 5px 0px;
padding:0px;
color:#ffffff;}

#terms-text h3{
font-weight:120;
font-size:16px;
margin:15px 0px 0px 0px;
color:#ffffff;
}

#terms-text h4{
font-weight:120;
font-size:14px;
margin:10px 0px 0px 0px;
color:#ccc;
}




#surfdesign img{

margin:0px;
padding:0px;
width:902px;
height:4px;
}





a{text-decoration:none}

#preload{ display:none }
	
#preload img {height:1px;width:1px;}

#video-container{
float:left;
color:#ccc;
margin:30px 0px 0px 85px;}

#video-container p{
color:white;
text-align:left;
font-family:'Pontano Sans', sans-serif;
margin:5px 0px 15px 0px;}

#video-container h1{
color:white;
text-align:left;
font-family:'Pontano Sans', sans-serif;
font-weight:200;
font-size:20px;
margin:0px 0px 10px 0px;}

#video-container h2{color:white;
font-family:'Pontano Sans', sans-serif;
font-weight:200;
font-size:18px;
margin:20px 0px 0px 0px;
}

/*accordion */
.menu_list { 	width: 800px; } 

.menu_head { display:block; 
cursor: pointer;
color:#fff;
font-size:16px; 	
position: relative; 	
padding:10px !important;    
background:  #333  ;
background: #333\9;/* IE8 and below */ 
} 


.menu_body {display:none;
color:#fff; } 

.text {display:block;   
padding:10px;   
text-decoration:none; } 

.text p{width:700px}

.menu_body a{margin:0px;}

#bottom-nav img{float:right; width:120px;display:inline;margin:-65px 10px 10px 0px;}
/* Stylesheet: layout Modified On 2017-11-28 14:48:31 */
@charset "UTF-8";
/* CSS Document */

#header li{
list-style:none;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:0px 0px 0px 0px;
padding:0px}

#header ul{
width:900px;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:20px 0px 40px 31px;
padding:0px}



#nav-web a:link, #nav-web a:visited{
display:block;
background:url(http://www.surfdesign.co.uk/images/button-web.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-web a:hover, #nav-web a:active{
display:block;
background:url(/images/button-web-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-photo a:link, #nav-photo a:visited{
display:block;
background:url(/images/button-photo.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-photo a:hover, #nav-photo a:active{
display:block;
background:url(/images/button-photo-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-film a:link, #nav-film a:visited{
display:block;
background:url(/images/button-film.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-film a:hover, #nav-film a:active{
display:block;
background:url(/images/button-film-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 


#nav-brand a:link, #nav-brand a:visited{
display:block;
background:url(/images/button-brand.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-brand a:hover, #nav-brand a:active{
display:block;
background:url(/images/button-brand-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-strat a:link, #nav-strat a:visited{
display:block;
background:url(/images/button-strat.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-strat a:hover, #nav-strat a:active{
display:block;
background:url(/images/button-strat-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-contact a:link, #nav-contact a:visited{
display:block;
background:url(/images/button-contact.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;
} 

#nav-contact a:hover, #nav-contact a:active{
display:block;
background:url(/images/button-contact-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:35px;} 


#maincontent-home li{
list-style:none;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:0px 0px 0px 0px;
padding:0px}

#maincontent-home ul{
width:420px;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:20px 0px 20px 31px;
padding:0px}




#nav-home-web a:link, #nav-home-web a:visited{
display:block;
background:url(/images/home-button-web.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-web a:hover, #nav-home-web a:active{
display:block;
background:url(/images/home-button-web-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-photo a:link, #nav-home-photo a:visited{
display:block;
background:url(/images/home-button-photo.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-photo a:hover, #nav-home-photo a:active{
display:block;
background:url(/images/home-button-photo-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-film a:link, #nav-home-film a:visited{
display:block;
background:url(/images/home-button-film.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-film a:hover, #nav-home-film a:active{
display:block;
background:url(/images/home-button-film-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 


#nav-home-brand a:link, #nav-home-brand a:visited{
display:block;
background:url(/images/home-button-brand.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-brand a:hover, #nav-home-brand a:active{
display:block;
background:url(/images/home-button-brand-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-strat a:link, #nav-home-strat a:visited{
display:block;
background:url(/images/home-button-strat.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-strat a:hover, #nav-home-strat a:active{
display:block;
background:url(/images/home-button-strat-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-contact a:link, #nav-home-contact a:visited{
display:block;
background:url(/images/home-button-contact.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 

#nav-home-contact a:hover, #nav-home-contact a:active{
display:block;
background:url(/images/home-button-contact-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:120px;
height:120px;
} 


#bottom-nav{
margin:50px 0px 0px 25px;
padding: 0px; 
background:#1b1b1b;
}




#bottom-nav li{
list-style:none;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:0px 10px 0px 0px;
padding:0px}

#bottom-nav ul{

background:#1b1b1b;
width:800px;
float:left;
display:inline;/*cures margin bug in ie6 */
margin:40px 0px 20px 28px;
padding:0px}


#nav-home a:link, #nav-home a:visited{
display:block;
background:url(/images/home.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:58px;
height:30px;
} 

#nav-home a:hover, #nav-home a:active{
display:block;
background:url(/images/home-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:58px;
height:30px;
} 

#nav-company a:link, #nav-company a:visited{
display:block;
background:url(/images/company.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:170px;
height:30px;
} 

#nav-company a:hover, #nav-company a:active{
display:block;
background:url(/images/company-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:170px;
height:30px;
} 

#nav-terms a:link, #nav-terms a:visited{
display:block;
background:url(/images/terms.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:192px;
height:30px;
} 

#nav-terms a:hover, #nav-terms a:active{
display:block;
background:url(/images/terms-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:192px;
height:30px;
} 

#nav-copy a:link, #nav-copy a:visited{
display:block;
background:url(/images/copyright.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:97px;
height:30px;
} 

#nav-copy a:hover, #nav-copy a:active{
display:block;
background:url(/images/copyright-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:97px;
height:30px;
} 

/*lose = signs to reinstate sitemap image */
========#nav-site a:link, #nav-site a:visited{
display:block;
background:url(/images/sitemap.gif) no-repeat left bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:80px;
height:30px;
} 

=======nav-site a:hover, #nav-site a:active{
display:block;
background:url(/images/sitemap-over.gif) no-repeat right bottom;
margin:0px 15px 0px 0px;
padding:0px;
width:80px;
height:30px;
} 


/* Stylesheet: nav Modified On 2012-09-17 18:08:13 */
@charset "UTF-8";
/* CSS Document */




.element { cursor: pointer; float: left; width: 230px; height: 190px; overflow: hidden; margin:0px 0px 0px 50px; position: relative; }

.element.red1 .color_helper,  .element.red .steps a.active {background-color: #ff7050; }
.element.red2 .color_helper,  .element.red2 .steps a.active {background-color: #e4d61a; }
.element.red3 .color_helper,  .element.red2 .steps a.active {background-color: #3974b1; }
.element.red4 .color_helper,  .element.red2 .steps a.active {background-color: #bb457f; }
.element.red5 .color_helper,  .element.red2 .steps a.active {background-color: #000000; }
.element.red6 .color_helper,  .element.red2 .steps a.active {background-color: #6d91a1; }
.element.red7 .color_helper,  .element.red2 .steps a.active {background-color: #efd830; }
.element.red8 .color_helper,  .element.red2 .steps a.active {background-color: #5186a6; }
.element.red9 .color_helper,  .element.red2 .steps a.active {background-color: #22237f; }
.element.red10 .color_helper,  .element.red2 .steps a.active {background-color: #433a2b; }
.element.red11 .color_helper,  .element.red2 .steps a.active {background-color: #d48300; }
.element.red12 .color_helper,  .element.red2 .steps a.active {background-color: #cccccc; }
.element.red13 .color_helper,  .element.red2 .steps a.active {background-color: #cccccc; }
.element.red14 .color_helper,  .element.red2 .steps a.active {background-color: #5bb5ff; }
.element.red15 .color_helper,  .element.red2 .steps a.active {background-color: #474539; }
.element.red16 .color_helper,  .element.red2 .steps a.active {background-color: #042d58; }
.element.red20 .color_helper,  .element.red2 .steps a.active {background-color: #7c65b0; }
.element.red21 .color_helper,  .element.red2 .steps a.active {background-color: #ae2934; }

.element .color_helper { width: 230px; top: 148px; position: absolute; height: 190px; opacity: 0.6; -moz-opacity: 0.6; filter: alpha(opacity=60); -ms-fiter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }

.element .small_preview { width: 230px; top: 0px; position: absolute; height: 190px; color: white; display: none; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); -ms-fiter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;*/ }

.loading { text-align:center; height:100%; background:url('static/img/loading.gif') no-repeat center; }

a{text-decoration:none;}

.small_preview p{margin:90px 10px 10px 10px;
text-align:center;}

.element img {border:0px} 

.spacer{clear:both;height:30px;width:600px;}
/* Stylesheet: scroll Modified On 2015-10-21 17:03:20 */