﻿.media_rotator
{
	float:left;
	width:100%;
	height:298px;	
	overflow:hidden;
	visibility:hidden;
   
}
.pikachoose {
	float:left;
	width:630px;		
	position:relative;	
	margin:0px 0px 10px 0px;
	background:url('../images/118x288_rust_panel.gif') no-repeat top right;	
	height:288px;		
}
/* This is the ul you have all your images in */
.pikachoose ul {	
	overflow: hidden;	
	padding:0px;
	margin:0px;
	position:absolute;	
	/* this time we have very large space for height */	
	width:20000em;			
	float:left;	
}
.pikachoose ul li {
	padding: 0px;
	margin: 0px 0px 2px 0px;
	position: relative;
	overflow: hidden;
}
.pikachoose ul li div img {
	position: relative;
	cursor: pointer;
}
/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main {
	width: 512px;
	height: 288px;
	display: block;
	position: relative;	
	background:url('../images/gallery_nav_bg.png') bottom center no-repeat;	
	float:left;	
	overflow:hidden;
}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img {
	position: absolute;
	top: 2px;
	left: 2px;
}
.pika_back_img {
	position: relative;
	top: 0px;
}
.pika_subdiv {
	position: relative;	
	padding: 2px;
	bottom:2px;
}
.pika_subdiv img, .pika_subdiv a img {
	border: none;
}
.pika_caption {
	width: 512px;
	height: 18px;
	padding-top: 4px;
	text-align: center;
	position: absolute;
	bottom: -25px;
	left: 3px;
	background: url('../images/caption_bg_stretch.png') top left;	
	color:#ffffff;
	font-size:11px;
}
.pika_caption a {
	color: white;
}
.pika_play {
	position: absolute;
	z-index: 1;
	left: 50%;
	margin-left: -10px;
	width: 50px;
	top:355px;
}
.pika_play a.pika_play_button {
	position: relative;
	cursor: pointer;
	display: block;
	width: 20px;
	height: 20px;
	background: url('../images/pause_btn.png') top center no-repeat;
	bottom:38px;
	left:245px;
}
.pika_play a.pika_stop_button {
	position: relative;
	margin-left: auto;
	cursor: pointer;
	display: block;
	width: 20px;
	height: 20px;
	background: url('../images/play_btn.png') top center no-repeat;
	bottom:38px;
	left:215px;
}
.pika_navigation a {
	font-size: 12px;
	text-decoration: none;
}
.pika_navigation a:hover {
	text-decoration: underline;
}
.pika_navigation {
	padding-top: 10px;
	clear: both;
	text-align: center;	
	display:none;
}
/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover {
	position: absolute;
	height: 54px;
	width: 23px;
	background: url('../images/previous_40.png') top left no-repeat;
	top:125px;
	left:10px;	
	cursor:pointer;
	display:none;
}
.pika_prev_hover:hover {
	background: url('../images/previous_85.png') top left no-repeat;	
}

.pika_next_hover {
	position: absolute;
	top:125px;
	right:5px;
	height: 54px;
	width: 23px;
	background: url('../images/next_40.png') top right no-repeat;
	cursor:pointer;
	display:none;
}
.pika_next_hover:hover {	
	background: url('../images/next_85.png') top right no-repeat;	
}

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
#thumb {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 95px;/*874px;	*/	
	/* custom decorations */		
	height: 234px;	 	
	padding:0 10px;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
#thumb div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;			
	/* decoration */
}

/* single scrollable item */
#thumb div.items li {
	float:left;	
	/* custom decoration */
	text-align:center;
	width:95px;	
	height:57px;

}
/*Scrollable navigation*/
.pikachoose .prev
{
	margin:4px 50px 4px 0px;
	width:20px;
	height:20px;
	background:url('../images/20x20_up_FFDD00.png') no-repeat top center;	
	display:block;
	cursor:pointer;	
	position:relative;	
	float:right;	
}
.pikachoose .next {
	margin:4px 50px 4px 0px;
	width:20px;
	height:20px;
	background:url('../images/20x20_down_FFDD00.png') no-repeat top center;	
	display:block;
	cursor:pointer;	
	position:relative;	
	float:right;	
}	
.pikachoose .prev.disabled {
	background:url('../images/20x20_up_black.png') no-repeat top center;	
	
}
.pikachoose .next.disabled {
	background:url('../images/20x20_down_black.png') no-repeat top center;	
	
}	
.r_photo
{
	background:url('../icon/ico_photo.png') no-repeat;
	padding:0px 0px 0px 35px;	
}
.r_story
{
	background:url('../icon/ico_article.png') no-repeat;
	padding:0px 0px 0px 35px;	
}
.r_video
{
	background:url('../icon/ico_video.png') no-repeat;
	padding:0px 0px 5px 35px;	
}
.rotator_tooltip a
{
	font-size:10px;	
	text-decoration:underline;
}
.flashPlayer
{
	margin:0px auto;
	padding:0px;
	width:460px;
}
