/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	left:50%;
	width: 800px;
	height:80px;
	margin:15px 0 0 -400px;

	/* custom decorations */

}

/*
	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 .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:5px 5px 5px 35px;
	padding:2px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
	position:absolute;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px; right:23px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


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

/* up and down */
a.up, a.down		{ 
	background:url(../img/scrollable/arrow/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;		
} 
*/


/********  TOOLTIP CSS   *********/

/* trigger button */ 
.city { 
    display:block; 
    overflow:hidden; 
    text-indent:-999em; 
    width:30px; 
    height:30px; 
	cursor:pointer; 
	position:absolute;
}
.london{
left:452px;
top:50px;
}
.toronto{
left:193px;
top:45px;
}
.vancouver{
left:158px;
top:55px;
}
.sanfrancisco{
left:145px;
top:80px;
}
.manhattan{
left:250px;
top:90px;
}
.boston{
left:237px;
top:65px;
}
.malta{
left:495px;
top:107px;
}
/* mouseover state */ 
.city:hover { 
    background-position:0 -44px ;         
} 
 
/* clicked state */ 
#download_now:focus { 
    background-position:0 -88px; 
} 
 
/* tooltip styling */ 
.tooltip { 
    display:none; 
    background:url(images/city-backing.png) no-repeat; 
    height:203px; 
    padding:30px 30px 10px 30px; 
	margin:100px 0 0 0;
    width:310px; 
    font-size:11px; 
    color:#666; 
} 
 
/* a .label element inside tooltip */ 
.tooltip .label { 
    color:yellow; 
    width:35px; 
} 
 
.tooltip a { 
    color:#ad4; 
    font-size:11px;
    font-weight:bold; 
}
.tooltip p{
	width:130px;
	position:absolute;
	left:170px;
	top:73px;
	font-size:10px;
}
.tooltip span a{
	font-size:18px;
	font-weight:bold;
	color:#fff;
	margin:0 0 0 10px;
}
.city-pic{
position:absolute;
top:83px;
left:40px;
}
a.find-out-more{
display:block;
background:url(images/find-out-more.png) no-repeat 0 0;
width:121px;
height:24px;
text-indent:-9999px;
position:absolute;
top:150px;
left:170px;
z-index:1;
}
a.find-out-more:hover{
background:url(images/find-out-more-hover.png) no-repeat 0 0;
}




/* use a semi-transparent image for the overlay */ 
#overlay { 
    background-image:url(http://static.flowplayer.org/img/overlay/transparent.png); 
    color:#efefef; 
    height:450px; 
} 
 
/* container for external content. uses vertical scrollbar, if needed */ 
.contentWrap { 
    height:441px; 
    overflow-y:auto; 
}


/***********TABS*************/


/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0 0 3px 0;	
	border-bottom:1px solid #e8e8e8;	
	height:45px;
	background:url(images/tab-backing.jpg) no-repeat 0 11px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0 5px 0 0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(images/tabs.png) no-repeat -420px 5px;
	font-size:11px;
	display:block;
	height: 47px;  
	line-height:40px;
	width: 134px;
	text-align:center;	
	text-decoration:none;
	color:#666;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -37px;	
	color:#2B4088;
	text-decoration:none !important;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -37px;		
	cursor:default !important; 
	color:#2B4088 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s 			{ background-position: -553px 5px; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -37px; }
ul.tabs a.s.current  { background-position: -553px -37px; }

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


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


/* initially all panes are hidden */ 
div.panes div.pane {
position: absolute;
left: -10000px;		
}