/* ******************************************* 
*
*	Outtakes.co.uk / MENU stylesheet
*
*	Coded by 
*	David Okuniev - www.fat-man-collective.com 
*
*	October 2009   
*
******************************************* */

#nav{
   list-style-type:none;
   width:780px;
   height:45px;
	padding:0px;
	margin:0px;
	float:left;
}
#nav li{
   float:left;
}
			
/* Set Widths of buttons */

#nav li a#hello{
   background: url(../images/menu_sprite.png) no-repeat;
   outline:none;
   display:block;
   width:72px;
   height:45px;
	cursor:pointer;
}

#nav li a#library{
   background: url(../images/menu_sprite.png) no-repeat;
   outline:none;
   display:block;
   width:106px;
   height:45px;
cursor:pointer;
}

#nav li a#media{
   background: url(../images/menu_sprite.png) no-repeat;
   outline:none;
   display:block;
   width:71px;
   height:45px;
cursor:pointer;
}

#nav li a#millbank{
   background: url(../images/menu_sprite.png) no-repeat;
   outline:none;
   display:block;
   width:83px;
   height:45px;
cursor:pointer;
}

#nav li a#bespoke{
   background: url(../images/menu_sprite.png) no-repeat;
   outline:none;
   display:block;
   width:149px;
   height:45px;
cursor:pointer;
}

#nav li a#offers{
   background: url(../images/menu_sprite.png) no-repeat;
   outline:none;
   display:block;
   width:123px;
   height:45px;
cursor:pointer;
}

#nav li a#about{
   background: url(../images/menu_sprite.png) no-repeat;
   outline:none;
   display:block;
   width:71px;
   height:45px;
cursor:pointer;
}

#nav li a#contact{
   background: url(../images/menu_sprite.png) no-repeat;
   outline:none;
   display:block;
   width:105px;
   height:45px;
cursor:pointer;
}

/* Set background positions of UP-state*/


#nav li a#hello{
background-position:0px 0;
}

#nav li a#library{
background-position:-72px 0;
}

#nav li a#media{
background-position:-178px 0;
}

#nav li a#millbank{
background-position:-249px 0;
}

#nav li a#bespoke{
background-position:-332px 0;
}

#nav li a#offers{
background-position:-481px 0;
}

#nav li a#about{
background-position:-604px 0;
}

#nav li a#contact{
background-position:-675px 0;
}

/* Set background positions of ROLLOVER-state*/

#nav li a#hello:hover{
background-position:0px -47px;
cursor:pointer;
}

#nav li a#library:hover{
background-position:-72px -47px;
cursor:pointer;
}

#nav li a#media:hover{
background-position:-178px -47px;
cursor:pointer;
}

#nav li a#millbank:hover{
background-position:-249px -47px;
cursor:pointer;
}

#nav li a#bespoke:hover{
background-position:-332px -47px;
cursor:pointer;
}

#nav li a#offers:hover{
background-position:-481px -47px;
cursor:pointer;
}

#nav li a#about:hover{
background-position:-604px -47px;
cursor:pointer;
}

#nav li a#contact:hover{
background-position:-675px -47px;
cursor:pointer;
}

/* Set background positions of ON-state*/

#nav li a#hello.on{
background-position:0px -94px;
}

#nav li a#library.on{
background-position:-72px -94px;
}

#nav li a#media.on{
background-position:-178px -94px;
}

#nav li a#millbank.on{
background-position:-249px -94px;
}

#nav li a#bespoke.on{
background-position:-332px -94px;
}

#nav li a#offers.on{
background-position:-481px -94px;
}

#nav li a#about.on{
background-position:-604px -94px;
}

#nav li a#contact.on{
background-position:-675px -94px;
}

/* IE is stupid so here's a bit of stupid code to overcome other's stupidity*/

#nav li a#hello.on:link,
#nav li a#hello.on:hover,
#nav li a#hello.on:active,
#nav li a#hello.on:visited{
   background-position:0px -94px;
}

#nav li a#library.on:link,
#nav li a#library.on:hover,
#nav li a#library.on:active,
#nav li a#library.on:visited{
   background-position:-72px -94px;
}

#nav li a#media.on:link,
#nav li a#media.on:hover,
#nav li a#media.on:active,
#nav li a#media.on:visited{
   background-position:-178px -94px;
}

#nav li a#bespoke.on:link,
#nav li a#bespoke.on:hover,
#nav li a#bespoke.on:active,
#nav li a#bespoke.on:visited{
   background-position:-332px -94px;
}

#nav li a#millbank.on:link,
#nav li a#millbank.on:hover,
#nav li a#millbank.on:active,
#nav li a#millbank.on:visited{
   background-position:-249px -94px;
}

#nav li a#offers.on:link,
#nav li a#offers.on:hover,
#nav li a#offers.on:active,
#nav li a#offers.on:visited{
   background-position:-481px -94px;
}

#nav li a#about.on:link,
#nav li a#about.on:hover,
#nav li a#about.on:active,
#nav li a#about.on:visited{
   background-position:-604px -94px;
}

#nav li a#contact.on:link,
#nav li a#contact.on:hover,
#nav li a#contact.on:active,
#nav li a#contact.on:visited{
   background-position:-675px -94px;
  }



.submenu {
display:none;
position:absolute;
z-index:1200;
padding:20px 10px;
top:8px;
left:0px;
float:left;
color:#fff;
background:url(../images/bg_submenu.png) repeat;
}

*+html .submenu {   top:34px;}

.submenu ul{
float:left;
width:156px;
margin:0px 10px;
}
.submenu ul li{
float:left;
clear:both;
width:156px;
height:21px;
padding-bottom:2px;
}

/* CATEG */ 




#submenu_cat a {
display:block;
width:156px;
height:21px;
line-height:21px;
font-size:12px;
color:#ccc;
}


#submenu_cat a:hover {
color:#fff;
text-shadow: #333 0px 1px 0px;
background:url(../images/bg_submenu_li_over.png) no-repeat;
}



#btn_cat {
background: transparent url( ../images/btn_right.png ) no-repeat scroll right top;
clear: left;
margin-right:10px;
height:35px;
padding:0 27px 0 0;
background-position: 100% -120px;
}
#btn_cat:hover{
background-position: 100% -155px !important;
}
.btn_cat_hover {
background: transparent url( ../images/btn_right.png ) no-repeat scroll right top;
background-position: 100% -155px !important;
}

#btn_cat span.button-text {
background: transparent url( ../images/btn_left.png ) no-repeat scroll left top;
clear: left;
margin-right:5px;
height:35px;
background-position: 0px -120px;
}
#btn_cat:hover span.button-text{
color:#fff;
text-shadow: #000 0px 1px 0px;
background-position:  0px -155px;
}
.btn_cat_hover_span {
background: transparent url( ../images/btn_left.png ) no-repeat scroll left top;
color:#fff !important;
text-shadow: #000 0px 1px 0px !important;
background-position: 0px -155px  !important;
}

#btn_buy {
background: transparent url( ../images/btn_right.png ) no-repeat scroll right top;
clear: left;
margin-right:5px;
height:30px;
padding:0 27px 0 0;
background-position: 100% -191px;

}
#btn_buy:hover{
background-position: 100% -221px !important;
}

#btn_hire {
background: transparent url( ../images/btn_right.png ) no-repeat scroll right top;
clear: left;
/*margin-right:5px;*/
height:30px;
padding:0 27px 0 0;
background-position: 100% -191px;

}
#btn_hire:hover{
background-position: 100% -221px !important;
}


/* FORMATS */ 

#submenu_format a {
display:block;
width:156px;
height:21px;
line-height:21px;
font-size:12px;
color:#ccc;
}

#submenu_format a:hover {
color:#fff;
text-shadow: #333 0px 1px 0px;
background:url(../images/bg_submenu_li_over.png) no-repeat;
}

#submenu_format ul {
padding:0px;
margin:0px;
}

#btn_format {
background: transparent url( ../images/btn_right.png ) no-repeat scroll right top;
clear: left;
margin-right:10px;
height:35px;
padding:0 27px 0 0;
background-position: 100% -120px;
}
#btn_format:hover{
background-position: 100% -155px !important;
}
.btn_format_hover {
background: transparent url( ../images/btn_right.png ) no-repeat scroll right top;
background-position: 100% -155px !important;
}

#btn_format span.button-text {
background: transparent url( ../images/btn_left.png ) no-repeat scroll left top;
clear: left;
margin-right:5px;
height:35px;
background-position:  0px  -120px;
}
#btn_format:hover span.button-text{
color:#fff;
text-shadow: #000 0px 1px 0px;
background-position: 0px  -155px;
}
.btn_format_hover_span {
background: transparent url( ../images/btn_left.png ) no-repeat scroll left top;
color:#fff !important;
text-shadow: #000 0px 1px 0px !important;
background-position: 0px  -155px  !important;
}


/* VIEW ENTIRE LIBRARY */ 

#submenu_entire_lib {
}

#submenu_entire_lib a {
display:block;
width:340px;
height:21px;
line-height:21px;
font-size:12px;
color:#ccc;
}

#submenu_entire_lib a:hover {
color:#fff;
text-shadow: #333 0px 1px 0px;
background:url(../images/bg_submenu_li_overlong.png) no-repeat;
}

#submenu_entire_lib ul {
padding:0px;
margin:0px;
width:360px;
height:225px;
overflow-x: hidden; overflow-y: scroll;
}

/* IE8 Hack */
#submenu_entire_lib ul{
 width /*\**/: 340px\9
}
/* IE7 Hack */
*+html #submenu_entire_lib ul { border:none}


#btn_entire_lib {
background: transparent url( ../images/btn_right.png ) no-repeat scroll right top;
clear: left;
margin-right:10px;
height:35px;
padding:0 27px 0 0;
background-position: 100% -120px;
}
#btn_entire_lib:hover{
background-position: 100% -155px !important;
}
.btn_entire_lib_hover {
background: transparent url( ../images/btn_right.png ) no-repeat scroll right top;
background-position: 100% -155px !important;
}

#btn_entire_lib span.button-text {
background: transparent url( ../images/btn_left.png ) no-repeat scroll left top;
clear: left;
margin-right:5px;
height:35px;
background-position:  0px  -120px;
}
#btn_entire_lib:hover span.button-text{
color:#fff;
text-shadow: #000 0px 1px 0px;
background-position: 0px  -155px;
}
.btn_entire_lib_hover_span {
background: transparent url( ../images/btn_left.png ) no-repeat scroll left top;
color:#fff !important;
text-shadow: #000 0px 1px 0px !important;
background-position: 0px  -155px  !important;
}


/************ RELATED *************/

.filmrel {
display:none;
float:left;
margin-top:10px;
position:relative;	
width:330px;
}

#sub_sup_mat {
/*left:0px;	*/
}

#sub_rel_med {
/*margin-left:160px;*/
}

#sub_buy {
margin-left:25px;
}
#sub_hire {
margin-left:25px;
}


.filmrel li {
margin:0px 0px 3px 0px;	
float:left;
clear:both;
width:330px;
}
.filmrel li div {
float:left;
width:18px;
}
.filmrel li a {
float:left;
color:#ffffff;
font-size:12px;
line-height:16px;
width:310px;
}

.filmrel li a:hover {
color:#ffffff;
font-size:12px;
text-decoration:underline;
}



/* jScrollPane */ 

/* JScrollPane */

.scroll-pane {
overflow: auto;
float: left;
height: auto; 
padding-right: 20px !important;
position: absolute; 
top: 0px;
width:340px;
}


.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
	width:360px;
	height:225px;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #f6F6F6;
}
.jScrollPaneDrag {
	position: absolute;
	background: #54A0CD;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDrag:hover {
	background: #437FA3;
}

.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: #54A0CD;
	height: 15px !important;
	border-bottom:1px solid #222;
}
a.jScrollArrowUp:hover {
	background: #437FA3  !important;;
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: #54A0CD;
	border-top:1px solid #222;	
	height: 15px !important;
}
a.jScrollArrowDown:hover {
	background: #437FA3 !important;;
}

.sitemaplist {
margin: 0px 0px 40px 12px;	
}

.sitemaplist a {
	color:#333;
}
.sitemaplist a:hover {
	color:#54A0CD;
}

.sitemaptitle{
font-size:1.5em;
font-weight:bold;
margin:0px;	
}



.pagination span a {
float:left;	
display:block;
height:31px;
width:17px;
color:white;
text-shadow: #222 0px 1px 0px;
line-height:31px;
text-align:center;
background:none;
}
.pagination span a:hover {
background: transparent url(../images/sprite_master.png) repeat scroll -328px 0px;
}
.pagination span span.current {
float:left;	
display:block;
background: transparent url(../images/sprite_master.png) repeat scroll -312px 0px;
height:31px;
width:16px;
padding:0px;
margin:0px;
color:white;
text-shadow: #222 0px 1px 0px;
line-height:31px;
text-align:center;
}
.pagination span span.empty {
float:right;	
display:block;
height:31px;
width:17px;	
padding:0px;
margin:0px;
}

.pagi_next {
float:right !important;	
display:block;
height:31px;
width:17px;	
margin-right: 2px;
background: transparent url(../images/sprite_master.png) repeat scroll -295px 0px !important;
}

.pagi_next:hover {
background: transparent url(../images/sprite_master.png) repeat scroll -360px 0px !important;
}
.pagi_prev {
float:right !important;	
height:31px;
width:17px;	
background: transparent url(../images/sprite_master.png) repeat scroll -278px 0px !important;
}

.pagi_prev:hover {
background: transparent url(../images/sprite_master.png) repeat scroll -343px 0px !important;
}