/* Reset */
body,p,h1,h2,h3,h4,h5{margin:0;padding:0;}
ul,li{margin:0;padding:0;list-style:none;}
a{ text-decoration:none; outline:none;}
img{ border:0;}

/* Notes: 
backing grey - #262626  
pink/red - #ed174f -> browser version = D42758
deep blue - #00467f 
light blue -  #5987c6
peach - #ecb6ba
yellow - #f4ec09
grey - #919295
green - #78a22f
purple - #8071b3
orange - #f37736
*/


/* General */

body{
	background-color:#000;
	font-size:.8em;
	line-height:1.4em;
	color: #FFF;
	font-family:Helvetica, Arial,  sans-serif;
	}

.clear{
	clear:both;}	

.container{	
	text-align:left;
	width:940px;
	margin:0 auto ; 
	}


p{
	margin:0 0 20px 0;}
	
small{	
	margin:0;
	font-size:.8em;}	

.hide{
	display:none;}

.line{
	height:1px;
	background:#D42758;}	
	
.bar{
	height:10px;
	background:#262626;}	
	


/* header */

.header{
	height:95px;
	width:940px;	
    }
	
.logo{
	display:block;
	width:275px;
	height:77px;
	background: url(images/logored.png) #000 no-repeat;
	margin:30px 0 0 0;
	}
	
.logo span{
	display:none;}	


/* Left bar */

.leftcol{
	/*border-top:10px solid #262626; */
	border-top:10px solid #000; 
	float:left;
	display:inline;
	margin:0 30px 0 0;
	width:160px;}

.leftcol ul.nav{
	margin:22px 0 20px 0;}
	
.leftcol ul.nav li{
	margin:5px 0 20px 0;}	
	
.leftcol ul.nav li a span{
	display:none;}	

.leftcol ul.nav li a{
	height:13px;
	display:block;
	}

.leftcol ul.nav li.home a{
	width:49px;
	background:url(images/nav/home.gif) 0 100% no-repeat;}	
	
.home .leftcol ul.nav li.home a:hover, .home .leftcol ul.nav li.home a{
	background:url(images/nav/home.gif) 0 0 no-repeat;}	
	
.leftcol ul.nav li.home a:hover{
	background:url(images/nav/home.gif) 0 50% no-repeat;}	

	
	
.leftcol ul.nav li.aboutus a{
	width:88px;
	background:url(images/nav/aboutus.gif) 0 100% no-repeat;}	
	
.about .leftcol ul.nav li.aboutus a:hover, .about .leftcol ul.nav li.aboutus a{
	background:url(images/nav/aboutus.gif) 0 0 no-repeat;}	
	
.leftcol ul.nav li.aboutus a:hover{
	background:url(images/nav/aboutus.gif) 0 50% no-repeat;}		
	
.leftcol ul.nav li.board a{
	width:99px;
	background:url(images/nav/theboardn.gif) 0 100% no-repeat;}	
	
.board .leftcol ul.nav li.board a:hover, .board .leftcol ul.nav li.board a{
	background:url(images/nav/theboardn.gif) 0 0 no-repeat;}	
	
.leftcol ul.nav li.board a:hover{
	background:url(images/nav/theboardn.gif) 0 50% no-repeat;}		
	
.leftcol ul.nav li.aboutaudience a{
	height:31px;
	width:104px;
	background:url(images/nav/aboutaudiencen.gif) 0 100% no-repeat;}	
	
.aboutaudience .leftcol ul.nav li.aboutaudience a:hover, .aboutaudience .leftcol ul.nav li.aboutaudience a{
	background:url(images/nav/aboutaudiencen.gif) 0 0 no-repeat;}
	
.leftcol ul.nav li.aboutaudience a:hover{
	background:url(images/nav/aboutaudiencen.gif) 0 50% no-repeat;}	
	
.leftcol ul.nav li.representation a{
	width:153px;
	background:url(images/nav/representationn.gif) 0 100% no-repeat;}	
	
.rep .leftcol ul.nav li.representation a:hover, .rep .leftcol ul.nav li.representation a{
	background:url(images/nav/representationn.gif) 0 0 no-repeat;}	
	
.leftcol ul.nav li.representation a:hover{
	background:url(images/nav/representationn.gif) 0 50% no-repeat;}		
		
.leftcol ul.nav li.showreels a{
	width:105px;
	background:url(images/nav/showreelsn.gif) 0 100% no-repeat;}	
	
.showreels .leftcol ul.nav li.showreels a:hover, .showreels .leftcol ul.nav li.showreels a{
	background:url(images/nav/showreelsn.gif) 0 0 no-repeat;}
	
.leftcol ul.nav li.showreels a:hover{
	background:url(images/nav/showreelsn.gif) 0 50% no-repeat;}	
	
.leftcol ul.nav li.gallery a{
	width:79px;
	background:url(images/nav/galleryn.gif) 0 100% no-repeat;}	
	
.gallery .leftcol ul.nav li.gallery a:hover, .gallery .leftcol ul.nav li.gallery a{
	background:url(images/nav/galleryn.gif) 0 0 no-repeat;}	
	
.leftcol ul.nav li.gallery a:hover{
	background:url(images/nav/galleryn.gif) 0 50% no-repeat;}		
	
.leftcol ul.nav li.press a{
	width:153px;
	background:url(images/nav/pressn.gif) 0 100% no-repeat;}	

.press .leftcol ul.nav li.press a, .press .leftcol ul.nav li.press a:hover{
	background:url(images/nav/pressn.gif) 0 0 no-repeat;}	

.leftcol ul.nav li.press a:hover{
	background:url(images/nav/pressn.gif) 0 50% no-repeat;}		
	
.leftcol ul.nav li.partners a{
	height:31px;
	width:131px;
	background:url(images/nav/partnersn.gif) 0 100% no-repeat;}	
	
.partners .leftcol ul.nav li.partners a:hover, .partners .leftcol ul.nav li.partners a{
	background:url(images/nav/partnersn.gif) 0 0 no-repeat;}
	
.leftcol ul.nav li.partners a:hover{
	background:url(images/nav/partnersn.gif) 0 50% no-repeat;}		
	
.signup{
	border-top:10px solid #262626; 
	padding:20px 0 0 0;
	}
	
.signup p{
	margin:0 0 10px 0;}	
	
.emailaddress{
	margin:0 0 10px 0;
	height:20px;
	border:0;}	
	
.send{
	font-size:1em;
	padding:0;
	margin:0 0 0 -4px;
	border:none;
	background:#000;
	display:block;
	}	
	
.send:hover{
	color:#FFF;}	


/* Content */

.content{
	/*border-top:10px solid #262626; */
	border-top:10px solid #000; 
	background:#000;
	width:430px;
	width:470px;
	float:left;
	display:inline;
	}
	
.content ul{
	margin:20px 0 0 0;}
	
.content ul li{
	list-style:circle; 
	margin:0 0 3px 10px;}	
	
.content h2{
		font-size:16px;
	margin:10px 0;
	padding:10px;
   /* background:#262626;*/}
   
.content h3{
	margin-bottom:10px;} 
	
.content .contentblock{
	padding:10px 10px 10px 10px;
	margin-bottom:10px;
	background:#262626;
	}

.content .contentblock.black{
	padding-top:0;
	background:#000;}
	
.content .contentblock.topspace{
	padding:50px 10px 10px 10px;}

.topten{
	margin-top:10px;}	
	
.textinfo{
	margin-bottom:8px;}	

/* showreel */

.video-thumb a{
	height:265px;
	width:230px;
	float:left;
	display:inline;
	margin:0 0 10px 10px;}	

.video-thumb a:hover{
	cursor:pointer;
	background:#000;}

.video-thumb .video-thumb-image{
	display:block;
	margin-bottom:10px;
	height:158px;
	width:230px;
	overflow: hidden;
	position:relative;}

.video-thumb img{
	width:230px;
	position:absolute;
	z-index:1;}
	
.video-thumb .play-button{
	font-size:16px;
	position:absolute;
	padding:5px;
	background:#000;
	bottom:0;
	left:0;
	z-index:2;}	

.video-thumb h2{
	padding:0;
	margin:0 0 10px 0;}
	
.video-thumb h2, .video-thumb p{
	width:227px;
	margin-left:5px;
	}	
.video-thumb a p, .video-thumb a h2{
	color: #FFF;}	
	
/* gallery */

.contentblock.imageblock{
	padding-top:0px;}

.contentblock.imageblock h2{
	margin:0;}
	
.col{
	/*border-top:10px solid #262626;*/
	border-top:10px solid #000;
	margin:0 0 0 30px;
	width:190px;
	float:left;
	display:inline;}	

.col .contentblock{
	overflow:auto;
	padding:10px 20px 10px 10px;
	margin-top:10px;
	margin-bottom:10px;
	background:#262626;
	height:425px;
	}

.col h2{
	font-size:16px;
	margin:0 0 10px 0;
	}
	
#slideshow{
	overflow: hidden;
	height:364px;
	z-index:1;}

#slideshow img{
	width:510px;}

.image-nav{
	margin-top:12px;	}	

.image-nav a.prev, .image-nav a.next{
	width:104px;
	height:11px;
	overflow:hidden;}
	
.image-nav a.prev{
	background: url(images/lastimage.gif) 0 0 no-repeat;}

.image-nav a.next{
		background: url(images/nextimage.gif) 0 0 no-repeat;}

.image-nav a.prev:hover{
	background: url(images/lastimage.gif) 0 100% no-repeat;}

.image-nav a.next:hover{
		background: url(images/nextimage.gif) 0 100% no-repeat;}

.scroll-pane{
	width:170px;
	height:395px;
	overflow:auto;
	}	
	
.image-set a{
	margin:0 0 10px 0;
	width:120px;
	display:block;
	}	
	
.image-set a:hover{
	background:#000;}	

.image-set a img{
	width:120px;
	margin-bottom:5px;}
	
.image-set a span{
	font-size:14px;
	color:#FFF;
	display:block;
	margin:0;
	padding:0 2px 3px 2px;
	width:120px;	}		


/* Scroll bar */

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #666;
}
.jScrollPaneDrag {
	position: absolute;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDrag:hover{
	background:#aaa;}

.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}



	
/* representation */		
	
ul.logos{
	margin:10px 0 0 0;}
	
ul.logos li{
	margin:0 10px 10px 0;
	float:left;
	display:inline;}	

#partners ul.logos li img{
	width: 140px;}



/* contact */	


.alert, .error { color: #D42758; }

ol.forms {
	float: left;
	list-style: none;
	width: 100%;
}

ol.forms li {
	clear: left;
	float: left;
	line-height: 1.5em;
	margin-bottom: 0.5em;
	width: 100%;
}

ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	line-height: 1.5em;
	padding-right: 1%;	
	width: 70px;
}

ol.forms input {border:none;  width: 64%;font-size:.9em; }
ol.forms textarea {
	border:none;
	height: 20em; 
	width: 64%; 
}

ol.forms input,ol.forms textarea{
	color:#000;
	padding:3px;
	} 



ol.forms .error { 
	display: block;
	margin: 6px 0 0 75px;
}

ol.forms li.buttons {
	padding-left: 70px;
	width: 89%;	
}

ol.forms li.buttons #submit{
	font-size:13px;
	color:#D42758;
	border:0;
	background:none;}
	
ol.forms li.buttons #submit:hover{
	cursor:pointer;
	color:#FFF;}	


/* Footer */
.footer{
	font-size:.9em;
	margin:40px 0 ;}
	
.footer a{
	color:#666;}	
	
.footer a:hover, .contact .footer li.contact a, .jobs .footer li.jobs a, .tandc .footer li.tandc a{
	color:#FFF;}		

ul.footinfo{
	margin:5px 0 0 0;}

ul.footinfo li{
	float:left;
	display:inline;
	margin:0 5px 0 0;}	

.footer .bar{
	margin:0 0 10px 0;
	width:160px;}

.footer .line{
	margin:10px 0 0  0;
	width:160px;
	}	
	
	
/* Page variations */


/* home */



.home .colour, .home .send, .home .content a{
	color:#D42758;
	}
	
.home .content .contentblock{
	min-height:390px;}
	

/* about + general */

.about .logo{
	background: url(images/logolightblue.png) #000 no-repeat;}

.about .colour, .about .send, .about .content a, .contact .send, .tandc .send, .jobs .send{
	color:#5887c6;
	}
	
.about .content .contentblock{
	min-height:390px;}
	
.about .container{
		background:url(images/LaHaineHighRes1.jpg) #000  445px 0px no-repeat;}	
	
.about .line{
	background: #5987c6;}		
	

/* board */

.board .logo{
	background: url(images/logoorange.png)  #000 no-repeat;}

.board .colour, .board .send, .board .content a, .board .slidebutton{
	color:#f37736;
	}
	
.board .line{
	background:#f37736;}	
	
.board .content .contentblock{
	width:510px;
	}
	
.board .container{
	background:url(images/board.jpg) #000  445px 0 no-repeat;}		

 h3.boardtitle{
	margin-left:10px;}
	
 h3.boardtitle2{
	margin-left:10px;
	margin-top:20px;}	

.mover{
	padding:0;
	margin:0;}
	
 .slidebutton:hover{
	color:#FFF;}	

 .slidebutton {
	cursor:pointer;}

 p.slidebutton{
	font-size:.8em;
		display:inline;}	

/* showreels */

.showreels .logo{
	background: url(images/logoyellow.png) #000 no-repeat;}

.showreels .content{
	width:730px;}

.showreels .colour, .showreels .send, .showreels .content a{
	color:#f4ec09;
	}
	
.showreels .line{
	background:#f4ec09;}	

.showreels .content .contentblock{
	margin-top:10px;
	padding-left:0;
	}	
	
/* representation */

.rep .logo{
	background: url(images/logopeach.png) #000 no-repeat;}

.rep .content{
	width:750px;}

.rep .colour, .rep .send, .rep .content a, .rep .slidebutton{
	color:#ecb6ba;
	}
	
.rep .line{
	background:#ecb6ba;}	

.rep .content .contentblock{
	margin-top:10px;
	}	
	
.rep-left{
	width:500px;
	float:left;
	display:inline;}	
	
.rep-left p{
	margin-top:20px;}	
	
.repcolour{
	color:#ecb6ba;}
	
.rep-logo{
	text-align:right;
	width:200px;
	float:right;
	display:inline;}
	
.reptype{
	display: inline; float:left;width:44px;}	
	
	
/* gallery */

.gallery .logo{
	background: url(images/logopurple.png) #000 no-repeat;}

.gallery .content{
	width:530px;}

.gallery .colour, .gallery .send, .gallery .content a, .image-set a span{
	color:#8071b3;
	}

.image-set a span{
	padding-top:3px;}
	
.image-set.active a span{
	color:#FFF;}
		

.gallery .line{
	background:#8071b3;}	

.gallery .content .contentblock{
	margin-top:10px;
	}
	
.image-nav{
	padding:0 10px 10px 10px;}	
	
.prev{
	float:left;
	display:inline;}
	
.next{
	float:right;
	display:inline;}
	
	
/* press */

.press .container{
	background:url(images/pressbg.jpg) #000  160px -5px no-repeat;}	

.press .logo{
	background: url(images/logogrey.png) #000 no-repeat;}

.press .colour, .press .send{
	color:#919295;
	}
	
.press .content a{
	color:#919295;
	}	

.press .content a:hover{
	color:#FFF;}

.press .line{
	background:#919295;}	
	
.press .content{
	width:420px;}	

.press .content{
	background:none;}

.press .footer {
	margin-top:210px;}
	
/* partners */

.partners .container{
	background:url(images/La-fleur-du-mal-3.jpg) #000  445px 0px no-repeat;}	

.partners .logo{
	background: url(images/logogreen.png) #000 no-repeat;}

.partners .colour, .partners .send, .partners .content a{
	color:#78a22f;
	}
	

.partners .line{
	background:#78a22f;}	

.partners .content .contentblock{
	margin-top:10px;
	}
	
/* contact   */	
	
.contact .container{
	background:url(images/DelicatessenHighRes1.jpg) #000  445px 0px no-repeat;}	

.contact textarea, .contact #sendEmail input{
	font-family:Helvetica, Arial,  sans-serif;
	font-size:1em;
	padding:4px;}
	
.contact #sendEmail input{
	padding:2px;}
	
.contact .content a{
	color:#D42758;
	}	

/* jobs */	
	
.jobs .container{
	background:url(images/girl.jpg) #000  445px 0px no-repeat;}	
	
.jobs .content a{
	color:#D42758;
	}


/* terms and cons */	
	
.tandc .container{
	background:url(images/about.jpg) #000  480px 0px no-repeat;}		

.tandc .content a{
	color:#D42758;
	}

/* about our audience */	 

.aboutaudience .logo{
	background: url(images/logolightblue.png) #000 no-repeat;}

.aboutaudience .colour, .aboutaudience .send, .aboutaudience .content a{
	color: #5987c6;
	}
	

.aboutaudience .line{
	background: #5987c6;}	

	
.aboutaudience .container{
	background:url(images/LenferPortrait.jpg) #000 445px 0px no-repeat;}	
	
/* sign up send over - has to be under other styles? */	
	
.send:hover{
	cursor: pointer;
	color:#FFF;}		

.container a:hover, .slidebutton:hover{
	color:#FFF;}