/*
jQuery Tools Scroller CSS
http://flowplayer.org/tools/demos/index.html
*/

/* root element for the whole scrollable setup */
#banner_slides { /* for Banner slideshow */
	position: relative;
	top: -24px; /* equal to height of div.navi a */
	overflow: hidden;
	width: 980px;	 
	height: 318px;	
}

#bundle_slides { /* for Store bundles slider */
	position: relative;
	overflow: hidden;
	width: 710px;	 
	height: 400px;	
	border-bottom: 1px solid #5c8bc5;
}

/* 
	root element for scrollable items. It is 
	absolutely positioned with large width for
	horizontal scrolling or large height for
	vertical scrolling. 
*/
#items {
	clear: both;
	position: absolute;
	width: 20000em;	/* use for horizontal scrolling */
/* 	height: 20000em; use for vertical scrolling */
}

#bundle_items {
	clear: both;
	position: absolute;
	width: 20000em;	/* use for horizontal scrolling */
/* 	height: 20000em; use for vertical scrolling */
}

/* single item */
#items div {
	float: left;
	width: 980px;
	height: 318px;
	color: #cccccc;
}

#bundle_items .item {
	float: left;
	width: 710px;
	height: 400px;
/* 	background: #e4eaf1; */
/* 	background: #e8e4f1; */
}

#items .wrapper {
	padding: 20px 0;
}

#items div p {
	color: #e0f2fc;
	font-size: 13px;
	line-height: 20px;
}

#items .pp {
	background: url("../images/banner_pp.jpg") no-repeat left top;
}

#items .pp4 {
	background: url("../images/banner_pp4.jpg") no-repeat left top;
}

#items .pvp {
	background: url("../images/banner_pvp.jpg") no-repeat left top;
}

#items .pvs {
	background: url("../images/banner_pvs.jpg") no-repeat left top;
}

#items .title_bar {
	position: absolute;
	top: 10px;
	z-index: 30;
	width: 940px;
	height: 30px;
	padding: 0 20px;
	line-height: 30px;
	color: #fff;
/* 	text-indent: 20px; */
}

#items .black {
	background: url("../images/tile_black_trans_60.png") repeat left top;
}

#items .white {
	background: url("../images/tile_white_trans_20.png") repeat left top;
}

#items .title_bar .icon {
	position: absolute;
	top: 4px;
}

#items .title_bar .title {
	position: absolute;
	left: 80px;
	color: #fff;
}

#items .item {
	position: relative;
}

.item img.bg {
	position: absolute;
	top: 0px; /* equal to height of div.title_bar */
}

.item a.feature:hover {
	background: url(../images/features_rollover.png) no-repeat center center;
/* 	border: 1px solid #fff; */
	opacity: .3;
	filter: alpha(opacity=30); for IE
}



/*
Generic Navigator
*/

/* position and dimensions of the navigator */
div.navi {
	float: left;
	position: relative;
	top: 300px;
	left: 466px;
/* 	left: 378px; */
	/* ((W / 2) - ((b x w) + (2m x b)) / 2)  -or-  490 - (((b x 10) + (6 x b)) / 2)
		W = width of banner
		b = # of buttons
		w = width of each button,
		m = margin of button
	*/
	height: 24px;
	z-index: 1000;
}

/* items inside navigator */
div.navi a {
	float: left;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 3px;
	background: url("../images/btn_navigator.png") no-repeat 0 0;     
	cursor: pointer;
}

/* mouseover state */
div.navi a:hover {
	background-position: 0 -10px;      
}

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



/*
Coda Slider Effect CSS
http://jqueryfordesigners.com/coda-slider-effect/
*/

/* TAB NAVIGATION */
ul.slider_tabs {
	list-style-type: none;
	margin: 0;
	padding-left: 10px;
	height: 36px;
	border-bottom: 1px solid #959595;
}

ul.slider_tabs li {
	float: left;
}

ul.slider_tabs li a {
	float: left;
	line-height: 36px;
	padding: 0 10px;
	text-decoration: none;
	color: #707070;
	font-weight: bold;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

ul.slider_tabs li a:hover {
	text-decoration: none;
	color: #000;
}

ul.slider_tabs li a.selected {
	background: #d9d9d9 url("../images/tile_tabs.gif") repeat-x left bottom;
	border-left: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	color: #303030;
	text-decoration: none;
}

ul.slider_tabs li a.selected:hover {
	color: inherit;
}

/* HOME PAGE SLIDER BOX */

#slider {
/* 	width: 620px; */
	position: relative;
	background: url("../images/tile_slider_box.gif") repeat-x scroll left top;
}

.scroll {
	clear: left;
/* 	width: 620px; */
	height: 400px;
	overflow: auto;
	position: relative; /* fix for IE to respect overflow */
}

.scrollContainer div.panel {
/* 	width: 580px; */
	height: 370px;
	padding: 10px 20px 20px 20px;
}

.scroll_banner {
	width: 980px;
	height: 318px;
	overflow: auto;
	position: relative; /* fix for IE to respect overflow */
}

.slide_container div.slide {
	width: 980px; /* 980 actual */
	height: 278px; /* 318 actual */
	padding: 20px;
}

/* STORE SLIDER TAB NAVIGATION */

ul.bundle_tabs {
	list-style-type: none;
	display: block;
	background: #5c8bc5;
	margin: 0 auto;
	padding: 0;
	height: 24px;
	text-align: center;
}

ul.bundle_tabs li {
	display: block;
	float: left;
	line-height: 24px;
	padding: 0 20px;
	text-decoration: none;
	color: #e4eaf1;
	font-weight: bold;
}

ul.bundle_tabs li:hover {
/* 	background: #cddcec; */
	text-decoration: none;
	color: #385578;
	cursor: pointer;
}

ul.bundle_tabs li.active {
	color: #385578;
	text-decoration: none;

}

ul.bundle_tabs li#pp.active {
	background-color: #e4eaf1;
/*
	color: #385578;
	text-decoration: none;
*/
}

ul.bundle_tabs li#pvp.active {
	background-color: #e8e4f1;
/*
	color: #385578;
	text-decoration: none;
*/
}

ul.bundle_tabs li#byo.active {
	background-color: #e4f1ea;
/*
	color: #385578;
	text-decoration: none;
*/
}

ul.bundle_tabs li.active:hover {
	color: inherit;
}

ul.bundle_tabs li a.pp_tab {
	background: url("../images/logo_pp_bug_xxsm.png") no-repeat left center;
	padding: 2px 0 2px 25px;
}

ul.bundle_tabs li a.pvp_tab {
	background: url("../images/logo_pvp_bug_xxsm.png") no-repeat left center;
	padding: 2px 0 2px 25px;
}

ul.bundle_tabs li a.byo_tab {
	background: url("../images/icon_byo.png") no-repeat left center;
	padding: 2px 0 2px 25px;
}

/* STORE SLIDER BOX */

.bundle_header {
	width: 710px;
	height: 28px;
	background: url("../images/box_top_store_full.gif") no-repeat center top;
	font-family: "Trebuchet MS", sans-serif;
	font-size: 18px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	line-height: 28px;
	letter-spacing: 1px;
}

#slider.store {
	position: relative;
	background: none;
/*
	border-right: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	border-left: 1px solid #d9d9d9;
*/
}

#slider.store .scroll {
	background: #e4eaf1;
	height: 385px;
	overflow: none;
}

#slider.store .scrollContainer div.panel {
	height: 375px;
	padding: 5px;
}