@charset "UTF-8";
/* CSS Document */
/*accordion on Case Studies*/
.menu_list { 	ewidth: 600px; } 

.menu_head { display:block; 		
cursor: pointer; 	
position: relative;
color:#fff;
font-weight:400;
font-size:110%;
padding:10px;    
background:  ergba(72,72, 72, 0.7) url(left.png) center right no-repeat;
ebackground: #5d5a4f\9;/* IE8 and below */ 
margin:0px;} 



.menu_body { 	display:none; } 

.text {   display:block;   
margin:5px 0px 5px 0px;
padding:5px 10px 5px 10px;
background:#424242;
border:1px #f6674f solid;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
text-decoration:none; } 


.menu_body a{margin:0px;}




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

img{
border:0px;}

body {
	font-family: Nunito, Helvetica, Arial, sans-serif;
	background:#000 url(http://www.surfenergy.co.uk/images/cross.png);
        background-repeat:repeat;
	margin: 0; 
	padding: 0;
	text-align: center;
	color: #fff;
        text-align:left;

}



#container {
	width: 960px; 
	background: #333;
	margin: 10px auto 0px auto; 
	border: 1px solid #000000;
	text-align: left; 
}

#why{position:absolute;
right:30px;
top:90px;
font-size:30px;
colour:white;
font-family: Nunito, Helvetica, Arial, sans-serif;}


#header {position:relative;
	background: #333; 
	padding: 0 10px 0 20px; 
}


#maincontent {width:805px;
min-height:500px;
margin: 10px auto 0px auto;
padding:0px;
background: #333;
}



p{font-family: Nunito, Helvetica, Arial, sans-serif;
color:#ccc;
text-align:left;
font-size:14px;}


.clear{clear:both;}

.columns, .columns1{
float:left;
width:340px;
padding:5px 20px 5px 20px;
background:#424242;
border:0px #f6674f solid;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}


.columns{margin:0px 40px 0px 0px
}
.columns1{margin:0px 0px 0px 0px
}


.navbar-main img {
margin:0px 0px 0px 0px;
width:960px;
height:37px;
}

.navbar-main-bottom img {
margin:10px 0px 0px 0px;
width:960px;
height:37px;
}



.homebox-container{
width:675px;
height:560px;
background:#333;
padding:0;
border:0px solid black;
margin:50px auto 0px auto;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
}

   

#header img{width:300px;
height:120px;
border:0px;
margin:10px 0px 20px 40px;
padding:0;}



.homebox{
float:left;
width:200px;
height:220px;
background:#222;
margin:20px 10px 0px 10px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}


.homebox-inner{
float:left;
width:170px;
height:170px;
background:#000;
margin:15px 0px 5px 15px;
}

.homebox-inner img{
margin:0;
padding:0;
border:0;}



.arrow{
display:inline-block; 
position:absolute;margin:1px 10px 0px 10px;}

.arrow1{position:absolute;
margin:6px 0px 0px 10px;
font-size: 0px; line-height: 0%; width: 0px;
border-top: 5px solid #333;
border-left: 10px solid #f1543a;
border-bottom: 5px solid #333;
}

.arrow2{position:absolute;
margin:6px 0px 0px 10px;
font-size: 0px; line-height: 0%; width: 0px;
border-top: 5px solid #424242;
border-left: 10px solid #f1543a;
border-bottom: 5px solid #424242;
}

.arrow3{position:absolute;
margin:8px 0px 0px 10px;
font-size: 0px; line-height: 0%; width: 0px;
border-top: 5px solid #222;
border-left: 10px solid #f1543a;
border-bottom: 5px solid #222;
}



.homebox-large{
float:left;
width:800px;
height:300px;
background:#222;
margin:10px 0px 20px 0px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}


.homebox-inner-large{
float:left;
width:770px;
height:270px;
background:#000;
margin:15px 0px 5px 15px;
}

.homebox-inner-large img{
margin:0;
padding:0;
border:0;}


#homebox-colour-large-philosophy img, #homebox-colour-large-consultancy img,#homebox-colour-large-team img, #homebox-colour-large-clients img, #homebox-colour-large-case img, #homebox-colour-large-global img{
width:770px;
height:270px;
margin:0px 0px 0px 0px;
}



#homebox-colour-philosophy{background:#c2bb03;}
#homebox-colour-consultancy{background:#6a0344;}
#homebox-colour-team{background:#ae4b03;}
#homebox-colour-clients{background:#548639;}
#homebox-colour-case{background:#006651;}
#homebox-colour-global{background:#504ecc;}


.homebox-medium{
float:left;
width:300px;
height:200px;
background:#222;
margin:10px 40px 20px 50px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}


.homebox-inner-medium{
float:left;
width:270px;
height:170px;
text-align:center;
background:#272727;
margin:15px 0px 5px 15px;
}

.homebox-inner-medium p, .homebox-inner-medium h3, .homebox-inner-medium a{
margin:10px;
}



.homebox-medium1, .homebox-medium2{
float:left;
width:250px;
height:210px;
background:#222;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}


.homebox-medium1{margin:10px 0px 20px 5px;}
.homebox-medium2{margin:10px 0px 20px 20px;}


.homebox-inner-medium1{
float:left;
width:220px;
height:180px;
text-align:center;
background:#272727;
margin:15px 0px 5px 15px;
}



.homebox-inner-medium1 p, .homebox-inner-medium1 h3 {
margin:10px;text-align:center;
}

#q1,#q2,#q3,#q4,#q5,#q6,#q7,#q8,#q9,#q10,#q11,#q12,#q13,#q14,#q15,#q16,#q17,#q18,#q19,#q20,#q21,#q22{
display:none;
margin:5px 0px 5px 0px;
padding:0px 10px 0px 10px;
background:#424242;
border:1px #f6674f solid;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}


#work{
width:775px;
clear:both;
margin:0px 0px 10px 5px;
padding:5px 10px 5px 10px;
background:#424242;
border:0px #f6674f solid;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

#q0{
clear:both;
margin:5px 0px 5px 0px;
padding:5px 10px 5px 10px;
background:#424242;
border:0px #f6674f solid;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
eborder-radius: 15px 15px 15px 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}



#footer {
	padding: 0 10px; 
	background:#333;
}
#footer p {
	margin: 0; 
	padding: 10px 0px;
}

#copyright p{
width:960px;
border:0px;
font-size:16px;
font-family: Nunito, Helvetica, Arial, sans-serif;
	margin: 0px 0px 10px 0px;
	text-align:center;
	clear:both;
	color:#ffffff;
	}


#surfdesign{
	margin:10px 0px 0px 0px;
	text-align:center;
	clear:both;
	text-decoration:none;
		}
	


#preload{ display:none }
	
#preload img {height:1px;width:1px;}
/* Stylesheet: layout Modified On 2013-10-15 17:51:06 */
a:link, a:visited {
       	font-family: Nunito, Helvetica, Arial, sans-serif;
	font-size:18px;
	margin:0px 0px 0px 0px;
	text-decoration:none;
	color:#ccc;}
	
a:hover, a:active{
       	font-family: Nunito, Helvetica, Arial, sans-serif;
        font-size:18px;
	margin:0px 0px 0px 0px;
	text-decoration:none;
	color:#fff;}

.navbar-top{position:absolute;
width:600px;
right:-25px;
top:5px;
margin:0px 0px 0px 0px;}


.navbar-top a:link, .navbar-top a:visited{
color:#f6674f;
font-size:16px;
font-family: Nunito, Helvetica, Arial, sans-serif;
display:inline-block;
text-decoration:none;}
	
.navbar-top a:hover, .navbar-top a:active{
color:white;
font-size:16px;
font-family: Nunito, Helvetica, Arial, sans-serif;
display:inline-block;
text-decoration:none;}
	
	
.navbar-top li{
height:20px;	
margin:0px 0px 0px 0px;
padding:0;
list-style:none;
display:inline;}

.navbar-top p{
font-family: Nunito, Helvetica, Arial, sans-serif;
color:white;
margin:0px 5px 0px 5px;
padding:0;
display:inline;}


#homebox-colour-philosophy, #homebox-colour-consultancy,#homebox-colour-team,
#homebox-colour-clients,#homebox-colour-case,#homebox-colour-global{
float:left;
width:140px;
height:140px;
margin:15px 0px 0px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
}

#homebox-colour-philosophy img, #homebox-colour-consultancy img,#homebox-colour-team img,
#homebox-colour-clients img, #homebox-colour-case img, #homebox-colour-global img{

width:120px;
height:120px;
margin:10px 0px 0px 10px;
}


#homebox-colour-philosophy{background:#c2bb03;}
#homebox-colour-consultancy{background:#6a0344;}
#homebox-colour-team{background:#ae4b03;}
#homebox-colour-clients{background:#548639;}
#homebox-colour-case{background:#006651;}
#homebox-colour-global{background:#504ecc;}


#homebox-colour-philosophy:hover,
#homebox-colour-consultancy:hover,
#homebox-colour-team:hover,
#homebox-colour-clients:hover,
#homebox-colour-case:hover,
#homebox-colour-global:hover{background:white;}


.navbar-main{position:relative;}

.navbar-main ul{width:900px;
position:absolute;
top:-10px;
left:60px;}

.navbar-main a:link, .navbar-main a:visited{
text-align:center;
width:120px;
height:20px;
color:white;
font-family: Nunito, Helvetica, Arial, sans-serif;
display:inline-block;
text-decoration:none;}
	
.navbar-main a:hover,  .navbar-main a:active{
text-align:center;
width:120px;
height:20px;
color:#f1543a;
font-family: Nunito, Helvetica, Arial, sans-serif;
display:inline-block;
text-decoration:none;}
	
	
.navbar-main li{
text-align:center;
margin:0px 0px 0px 0px;
padding:0;
list-style:none;
display:inline;}


.navblock-holder{
margin:0px 0px 0px 50px;
padding:0px;}

.navblock, .navblock-inline{
float:left;
margin:0px 50px 30px 0px;
padding:0px;
}



.navblock ul, .navblock-inline ul{
width:100px;
margin:5px 10px 0px 0px}

.navblock a:link, a:visited{
colour:#fff;
font-family: Nunito, Helvetica, Arial, sans-serif;
text-decoration:none;}
	
.navblock a:hover, a:active{
color:#f6674f;
font-family: Nunito, Helvetica, Arial, sans-serif;
text-decoration:none;}

.navblock li{
margin:0px 0px 0px 0px;
padding:0;
list-style:none;
}

.navblock-inline li{
margin:0px 5px 0px 0px;
padding:0;
list-style:none;
display:inline;}


.navblock-inline img{
margin:5px 0px 0px 0px;
padding:0px 0px 0px 0px;}

	

#philosophy a:link, #consultancy a:link, #team a:link, #clients a:link, #case a:link,#global a:link, #philosophy a:visited, #consultancy a:visited, #team a:visited, #clients a:visited, #case a:visited, #global a:visited {
        display:block;
	font-family: Nunito, Helvetica, Arial, sans-serif;
	font-size:16px;
	margin:0px 0px 0px 0px;
	text-decoration:none;
	color:#fff;}
	
#philosophy a:hover, #consultancy a:hover, #team a:hover, #clients a:hover, #case a:hover,#global a:hover, #philosophy a:active, #consultancy a:active, #team a:active, #clients a:active, #case a:active, #global a:active{
        display:block;
	font-family: Nunito, Helvetica, Arial, sans-serif;
	font-size:16px;
	margin:0px 0px 0px 0px;
	text-decoration:none;
	color:#f6674f;}


/* Stylesheet: nav Modified On 2012-10-08 15:46:15 */