/* 
	SCOLLABLE-HORIZONTAL:
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
#scroll-divider {
	position: relative;
	border: 1px solid #ccc;
	padding: 10px;
	overflow: hidden;
	}
#scroll-divider h3 {
	position: absolute;
	top: 11px;
	left: 11px;
	line-height: 20px;
	margin: 0;
	text-shadow:0 1px 0 #EAEAEA;
	}
#scroll-divider .more-like {
	position: absolute;
	top: 11px;
	right: 11px;
	}
.scrollable { /* SCROLLABLE BUTTONS */
   float:left;	
	/* required settings */
	position: relative;
	overflow: hidden;
	width: 636px;
	height: 250px;
	/* custom decorations */
	border: 1px solid #ccc;
	background: url("h300.png") repeat-x;
	}
/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .scroll-pages {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	}
.scroll-pages .page {
	float: left;
	width: 626px;
	padding: 0 5px;
	}
.scroll-pages .page div {
	float: left;
	width: 23%;
	padding: 0 1%;
	text-align: center;
	}
.scroll-pages h4 {
	max-height: 60px;
	overflow: hidden;
	text-overflow:ellipsis;
	}
.scroll-pages .page div div {
	width: auto;
	padding: 0;
	float: none;
	}
/* single scrollable item */
.scrollable img {
	/*float:left;*/
	margin: 20px auto 8px;
	background-color: #fff;
	padding: 2px;
	border: 1px solid #ccc;
	max-width: 120px;
	height: 100px;
	width: auto;
	}
.scrollable .active {
	border: 2px solid #000;
	position: relative;
	cursor: default;
	}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background: url("hori_small.png") no-repeat;
	display: inline-block;
	width: 12px;
	height: 12px;
	cursor: pointer;
	font-size: 1px;
	margin: 3px 3px 0;
	}

/* right */
a.right {
	background-position: 0 -12px; 
	clear:right; 
	margin-right: 0;
	}
a.right:hover {
	background-position: -12px -12px;
	}
a.right:active {
	background-position: -24px -12px;
	} 
/* left */
a.left {
	margin-left: 0;
	} 
a.left:hover  		{
	background-position: -12px 0;
	}
a.left:active {
	background-position: -24px 0;
	}

/* up and down */
a.up, a.down		{ 
	background:url("vert_large.png") no-repeat; 
	float: none;
	margin: 10px 50px;
	}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
	} 	

/* SCROLLABLE NAVIGATION */
/* position and dimensions of the navigator */
.navi-container {
	width: 100%;
	text-align: center;
	margin: 0 0 0.6em;
	height: 20px;
	}
.navi {
	width: auto;
	display: inline-block;
	}
.navi a {
	width:12px;
	height:12px;
	margin: 4px 2px 0;
	background: url("navigator.png") 0 0 no-repeat;
	display: inline-block;
	font-size:1px;
	}
.navi a:hover {
	background-position: -12px 0;      
	}

/* active state (current page state) */
.navi a.active {
	background-position: -24px 0;     
	}

/* TABS */
.tabs-container {
	float: left;	 
	margin: 1.5em 0;
	}
.tabs-container #scroll-divider {
	border: none;
	}
.tabs-container #scroll-divider h3 {
	top: 0;
	left: 0;
	}
.tabs-container #scroll-divider .more-like {
	top: 0;
	right: 0;
	}
ul.tabs { 
	list-style: none;	
	height: 30px;
	width: 770px;
	clear: left;
	float: left;
	border-bottom: 1px solid #DEE3E8;
	}
ul.tabs li { 
	float: left;
	}
ul.tabs li a {
	background: #EEF1F3;
	border: 1px solid #EEF1F3;
	display:block;
	height: 26px;  
	line-height: 26px;
	color: #555;
	text-align:center;
	margin: 0 1px 0 0;
	padding: 2px 2em 0;
	}
ul.tabs li a:hover {
	text-decoration: none;
	border-top: 3px solid #545454;
	padding-top: 0;
	}
ul.tabs a.current, 
ul.tabs a.current:hover, 
ul.tabs li.current a {
	color: #000;
	background: #fff;
	border-top: 3px solid #545454;
	border-left: 1px solid #DEE3E8;
	border-right: 1px solid #DEE3E8;
	border-bottom: 1px solid #fff;		
	cursor: default !important; 
	color: #000 !important;
	padding-top: 0;
	}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l {
	background-position: -248px -0px; width:174px; 
	}
ul.tabs a.l:hover {
	background-position: -248px -31px; 
	}
ul.tabs a.l.current {
	background-position: -248px -62px;
	}

/* width 3 */
ul.tabs a.xl {
	background-position: 0 -0px; width: 248px;
	}
ul.tabs a.xl:hover {
	background-position: 0 -31px;
	}
ul.tabs a.xl.current {
	background-position: 0 -62px;
	}


/* initially all panes are hidden */ 
.panes .pane {
	display:none;		
	}
/* tab pane styling */
.panes  .pane-item {
	background: url("/National_Library/20161130034600oe_/http://yalebooks.co.uk/images/carousel_bg.png") 0 0 no-repeat, url("/National_Library/20161130034600oe_/http://yalebooks.co.uk/images/carousel_bg.png") 100% 0 no-repeat;
	float: left;	 
	display: none;		
	padding: 15px 10px;
	/*border: 1px solid #DEE3E8;
	border-top: 0;*/
	background-color: #fff;
   	width: 750px;
	min-height: 186px;
	}

/* TIPS: tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	position: absolute;
	z-index: 999;
	display: none;
	background:transparent url("black_arrow.png");
	font-size: 12px;
	height: 70px;
	width: 160px;
	padding: 25px;
	color: #fff;	
	}

/* style the trigger elements */
.tips img {
	border:0;
	cursor:pointer;
	margin:0 8px;
	}