/* ------------------------------------------------------------------------- */
/* CSS DOCUMENT */
/* ------------------------------------------------------------------------- */
/*
Title:      BPSF website styles
Author:     Matt Iliffe, matt@type3.co.uk
Updated:    19th June  2007
*/
/* ------------------------------------------------------------------------- */

html {
	/* fixes firefox to have vert scroll bars */
	/* -------------------------------------- */
	_overflow: scroll;
	overflow: -moz-scrollbars-vertical;
}

/* TAG DEFINATIONS */
/* ------------------------------------------------------------------------- */
body {  
	padding:0; 
	margin: 0 0 0 0;
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:76%;
	background-image:url(../images/mainbg.jpg);
	background-repeat:repeat-x;
	background-color:#000000;
	scrollbar-face-color:#8080FF; 
	scrollbar-arrow-color:#FFFFFF; 
	scrollbar-track-color:#DDDDFF; 
	scrollbar-shadow-color:''; 
	scrollbar-highlight-color:''; 
	scrollbar-3dlight-color:''; 
	scrollbar-darkshadow-Color:'';
}

a{
	text-decoration:none;
	color:#FFFFFF;
}


a:hover{
	color:#FFFFFF; 
	text-decoration:underline;
}


form { 
	padding:0; 
	margin:0; 
}

table {
	border:none;

}

h1 { 
	margin: 0px;  
	padding: 0px 0px 0px 0px; 
	color:#afa284;
	font-weight:normal;
	font-size:13px; 
}

h2 {
	margin: 0;
	padding: 0 0 8px 0; 
	color:#FFFFFF;
	font-weight: normal;
	font-size:13px;
}
h3 { 
	margin: 0; 
	padding: 0 0 6px 0;;
	font-weight:bold;
	font-size:110%;  
	color:#000000;
}
h4 { 
	margin: 0; 
	padding: 0 0 6px 0;;
	font-weight:bold;
	font-size:100%;  
	color:#000000;
}

#accesskeys{
	display:none;
}
.clearall{
	clear:both;
}

input{

}
select {

}


/* PAGE TEMPLATE */
/* ------------------------------------------------------------------------- */

#page{
	width:690px;
	margin-left:auto;
	margin-right:auto;
}

#masthead{
	height: 100px;
	background-color: none;
}

#mainbody{
	width:690px;
	height:284px;
	float:left;
	background-color: none;
	background-image: url(../images/spacer.gif);
	background-repeat:repeat-x;
}


#innerleft{
	width:440px;
	height:244px;
	float:left;
	background-color: none;
	padding: 30px 50px 0px 10px;
}

#innerright{
	width:185px;
	height:284px;
	float:left;
	background-color: none;
	padding: 0px;
}


/* PORT NAV */
/* ------------------------------------------------------------------------- */

#portnav{
	width:auto;
	background-color: none;
	padding: 0px;
	margin:0px;
	border:0px;
}

#portnav a{
	width:auto;
	color:#877755;
	background-color: none;
	padding: 0px;
	margin:0px;
	border:0px;
}

#portnav a:hover{
	width:auto;
	color:#e7e2b5;
	background-color: none;
	padding: 0px;
	margin:0px;
	border:0px;
}



/* ELEMENTS */
/* ------------------------------------------------------------------------- */

#mainspacer{
	width:800px;
	height: 17px;
	float:left;
	padding: 0px 0px 0 0px;
	background-color:#ffffff;
	background-image: url(../images/main_spacer.gif);
}

#imagetop{
	height: 127px;
	padding: 0px 0px 0px 0px;
	margin-top: 10px;
	background-color:none;
	
}

#imagebottom{
	height: 127px;
	padding: 0px 0px 0px 0px;
	margin-top: 10px;
	background-color:none;
	
}

#introflash{
	width:690px;
	height: 284px;
	padding: 0px 0px 0px 0px;
	background-color:none;
	
}


/* Top Navigation */
/* ------------------------------------------------------------------------- */


#mainnav{
	background-position:top left;
	background-color:none;
}

#mainnav ul{
	margin:0;
	padding: 0px 0px 0px 0px;
	background-repeat:repeat-x;
	background-repeat:repeat-y;
	list-style:none;
}

#mainnav li{
	margin:0;
	padding:0;
	float:left;	
	list-style:none;

}

#mainnav li span{
	display:none;
}

#mainnav ul li a{
	height:41px;
	width:115px;
	display:block;
	background-repeat:repeat-x;
	background-position:top left;
	background-color:none;
	padding: 0px 0px 0px 0px;
	text-decoration:none;
}
	

/* Who */
#mainnav #who a{
	background-image:url(../images/NAV/who_off.gif);
}

#mainnav #who a:hover{
	background-image:url(../images/NAV/who_on.gif);
}

#mainnav #who a.on{
	background-image:url(../images/NAV/who_on.gif);
}

/* What */
#mainnav #what a{
	background-image:url(../images/NAV/what_off.gif);
}

#mainnav #what a:hover{
	background-image:url(../images/NAV/what_on.gif);
}

#mainnav #what a.on{
	background-image:url(../images/NAV/what_on.gif);
}

/* Portfolio */
#mainnav #portfolio a{
	background-image:url(../images/NAV/port_off.gif);
}

#mainnav #portfolio a:hover{
	background-image:url(../images/NAV/port_on.gif);
}

#mainnav #portfolio a.on{
	background-image:url(../images/NAV/port_on.gif);
}


/* Environment */
#mainnav #environment a{
	background-image:url(../images/NAV/envir_off.gif);
}

#mainnav #environment a:hover{
	background-image:url(../images/NAV/envir_on.gif);
}

#mainnav #environment a.on{
	background-image:url(../images/NAV/envir_on.gif);
}

/* Legal */
#mainnav #legal a{
	background-image:url(../images/NAV/legal_off.gif);
}

#mainnav #legal a:hover{
	background-image:url(../images/NAV/legal_on.gif);
}

#mainnav #legal a.on{
	background-image:url(../images/NAV/legal_on.gif);
}

/* Contact */
#mainnav #contact a{
	background-image:url(../images/NAV/contact_off.gif);
}

#mainnav #contact a:hover{
	background-image:url(../images/NAV/contact_on.gif);
}

#mainnav #contact a.on{
	background-image:url(../images/NAV/contact_on.gif);
}

/* Enter */
#mainnav #enter a{
	background-image:url(../images/NAV/enter_off.gif);
}

#mainnav #enter a:hover{
	background-image:url(../images/NAV/enter_on.gif);
}

#mainnav #enter a.on{
	background-image:url(../images/NAV/enter_on.gif);
}

/* Enter Spacer */
#mainnav #enterspacer a{
	background-image:url(../images/NAV/enter_spacer.gif);
	width:573px;
}

/* Portfolio */
/* ------------------------------------------------------------------------- */


#portfolio{
	background-position:top left;
}

#portfolio ul{
	margin:0;
	padding: 0px 0px 0px 0px;
	background-repeat:repeat-x;
	background-repeat:repeat-y;
	list-style:none;
}

#portfolio li{
	margin:0;
	padding:0;
	float:left;	
	list-style:none;

}

#portfolio li span{
	display:none;
}

#portfolio ul li a{
	height:284px;
	width:86px;
	display:block;
	background-repeat:repeat-x;
	background-position:top left;
	padding: 0px 0px 0px 0px;
	text-decoration:none;
}
	

/* portfolio1 */
#portfolio #port1 a{
	background-image:url(../images/portfolio/casestudy1/main_off.gif);
}

#portfolio #port1 a:hover{
	background-image:url(../images/portfolio/casestudy1/main_on.gif);
}

/* portfolio2 */
#portfolio #port2 a{
	background-image:url(../images/portfolio/casestudy2/main_off.gif);
}

#portfolio #port2 a:hover{
	background-image:url(../images/portfolio/casestudy2/main_on.gif);
}

/* portfolio3 */
#portfolio #port3 a{
	background-image:url(../images/portfolio/casestudy3/main_off.gif);
}

#portfolio #port3 a:hover{
	background-image:url(../images/portfolio/casestudy3/main_on.gif);
}

/* portfolio4 */
#portfolio #port4 a{
	background-image:url(../images/portfolio/casestudy4/main_off.gif);
}

#portfolio #port4 a:hover{
	background-image:url(../images/portfolio/casestudy4/main_on.gif);
}

/* portfolio5 */
#portfolio #port5 a{
	background-image:url(../images/portfolio/casestudy5/main_off.gif);
}

#portfolio #port5 a:hover{
	background-image:url(../images/portfolio/casestudy5/main_on.gif);
}

/* portfolio6 */
#portfolio #port6 a{
	background-image:url(../images/portfolio/casestudy6/main_off.gif);
}

#portfolio #port6 a:hover{
	background-image:url(../images/portfolio/casestudy6/main_on.gif);
}

/* portfolio7 */
#portfolio #port7 a{
	background-image:url(../images/portfolio/casestudy7/main_off.gif);
}

#portfolio #port7 a:hover{
	background-image:url(../images/portfolio/casestudy7/main_on.gif);
}

/* portfolio8 */
#portfolio #port8 a{
	background-image:url(../images/portfolio/casestudy8/main_off.gif);
}

#portfolio #port8 a:hover{
	background-image:url(../images/portfolio/casestudy8/main_on.gif);
}



#portinnerleft{
	width:400px;
	height:244px;
	float:left;
	background-color: none;
	padding: 30px 0px 0px 10px;
}

#portlefttop{
	width:264px;
	height: 264px;
	float:right;
	background-color: none;
	padding: 10px 0px 0 0px;
}

#portleftbottom{
	width:264px;
	height: 264px;
	float:right;
	background-color: none;
	padding: 10px 0px 0 0px;
}

#portinnerright{
	width:264px;
	height:284px;
	float:right;
	background-color: none;
	padding: 0px 0px 0 0px;
}

#portfolioright{
	width:264px;
	height: 264px;
	float:right;
	background-color: none;
	padding: 10px 0px 0 0px;
}


/* portfoliobuttons */

#portbutton{
	width:400px;
	height:60px;
	background-position:top left;
}

#portbutton ul{
	margin:0;
	padding: 0px 0px 0px 0px;
	background-repeat:repeat-x;
	background-repeat:repeat-y;
	list-style:none;
}

#portbutton li{
	margin:0;
	padding:0;
	float:left;	
	list-style:none;

}

#portbutton li span{
	display:none;
}


	

/* portfolio1 */
#portbutton #button1 a{
	background-image:url(../images/portfolio/casestudy1/small1_off.gif);
	margin-right:6px;
}

#portbutton #button1 a:hover{
	background-image:url(../images/portfolio/casestudy1/small1_on.gif)
}

/* portfolio2 */
#portbutton #button2 a{
	background-image:url(../images/portfolio/casestudy1/small2_off.gif);
	margin-right:6px;
}

#portbutton #button2 a:hover{
	background-image:url(../images/portfolio/casestudy1/small2_on.gif)
}

/* portfolio3 */
#portbutton #button3 a{
	background-image:url(../images/portfolio/casestudy1/small3_off.gif);
	margin-right:6px;
}

#portbutton #button3 a:hover{
	background-image:url(../images/portfolio/casestudy1/small3_on.gif)
}

/* portfolio4 */
#portbutton #button4 a{
	background-image:url(../images/portfolio/casestudy1/small4_off.gif);
	margin-right:6px;
}

#portbutton #button4 a:hover{
	background-image:url(../images/portfolio/casestudy1/small4_on.gif)
}

/* portfolio5 */
#portbutton #button5 a{
	background-image:url(../images/portfolio/casestudy1/small5_off.gif);
	margin-right:6px;
}

#portbutton #button5 a:hover{
	background-image:url(../images/portfolio/casestudy1/small5_on.gif)
}

/* portfolio6 */
#portbutton #button6 a{
	background-image:url(../images/portfolio/casestudy1/small6_off.gif);
	margin-right:6px;
}

#portbutton #button6 a:hover{
	background-image:url(../images/portfolio/casestudy1/small6_on.gif)
}

#portspacer{
	width:350px;
	height:183px;
}




/* Footer*/
/* ------------------------------------------------------------------------- */

#footer { 
	
	margin:0px;
	padding:10px 0px 0px 465px;
	clear:both;
	background-color:none;
	font-size:85%;
}

#footer #address{ 
	height:25px;
	margin:0px; 
	padding:5px 5px 5px 20px; 
	background-image:url(../images/footer.gif);
	background-repeat:repeat-x;
}

/* text styles*/
/* ------------------------------------------------------------------------- */

.content{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color:#ffffff;
	
}

.contentlink{
    
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color:#ff6600
}

.contentlink:hover{
    
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color:#000000
	
}

.link1 { 
	margin: 0px;  
	padding: 0px 0px 0px 0px; 
	color:#877755;
	font-weight:bold; 
	font-size:95%; 
}

.link1 :hover{ 
	margin: 0px;  
	padding: 0px 0px 0px 0px; 
	color:#ffffff;
	font-weight:bold; 
	font-size:95%; 
}

.legal { 
	margin: 0px;  
	padding: 0px 0px 0px 0px; 
	color:#FFFFFF;
	font-weight:normal; 
	font-size:90%; 
}

.navigation{
    
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color:#FFFFFF;
}

.navigation {
    
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color:#877755;
}

.navigation:hover{
    
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color:#FFFFFF;
	
}