/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
	/* required settings */ 
	position:relative; 
	overflow:hidden; 
	width: 460px; 
	height: 340px; 
	border: solid 1px #CCCCCC;
	float: left;
	background-color: #EFEFEF;
	padding: 10px;
} 
 
/* 
	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 width and height for the root element and 
	not for this element. 
*/ 
div.scrollable div.items { 
	/* this cannot be too large */ 
	width:20000em; 
	position:absolute; 
} 
 
/* 
	a single item. must be floated in horizontal scrolling. 
	typically, this element is the one that *you* will style 
	the most. 
*/ 
div.scrollable div.items div.panel { 
	float:left; 
	width: 280px;
	text-align: center;
} 
div.scrollable div.items div.panel div.inside { padding: 0px 10px 0px 10px; }


.inside img {
	border:1px solid #DCDCDC;
	display:block;
	margin:0 auto 10px;
	width:240px;
}

.inside p { font-size:13px; text-align:center; }

.inside a.watchvideo-btn { display: block; margin-top: 8px; background: url(/images/global/watchvideo-btn.gif) no-repeat top; height: 25px; text-indent: -9000em; overflow: hidden; border: 0; text-decoration: none; }
.inside a.watchvideo-btn:hover { background-position: bottom; }

a.prevPage { background: url(/images/leftarrow.png) no-repeat center center; width: 45px; height: 58px; padding-top: 200px; display: block; float: left; }
a.nextPage { background: url(/images/rightarrow.png) no-repeat center center; width: 45px; height: 58px; padding-top: 200px; display: block; float: left; }


#left-shadow { position: absolute; top: 0; left: 0; width: 12px; bottom: 0; background: url(/images/leftshadow.png) repeat-y; }
#right-shadow { position: absolute; top: 0; right: 0; width: 12px; bottom: 0; background: url(/images/rightshadow.png) repeat-y; }




/*

#intro { padding-bottom: 10px; }
#slider { width: 500px; margin: 0 auto; position: relative; border: 1px solid #ccc; }
.scroll { overflow: hidden; margin: 0 auto; position: relative; background: #efefef; width: 500px; }
.scrollContainer { position: relative; }
.scrollContainer div.panel { width: 240px; height: 340px; }
#left-shadow { position: absolute; top: 0; left: 0; width: 12px; bottom: 0; background: url(/images/leftshadow.png) repeat-y; }
#right-shadow { position: absolute; top: 0; right: 0; width: 12px; bottom: 0; background: url(/images/rightshadow.png) repeat-y; }
.inside { padding: 10px 10px; width: 220px; }
.inside div#apple { border: 0; padding: 0; width: 210px; } 
.inside img { display: block; border: 1px solid #dcdcdc; margin: 0 auto 10px auto; width: 210px; }
.inside span { display: block; padding-bottom: 4px; font-size: 10px; text-align: center; }
.inside h2 { font-weight: normal; color: #111; font-size: 15px; margin: 0 0 3px 0; text-align: center; }
.inside div { padding: 10px; margin: 0 auto; color: #666; background: #fff; border: 1px solid #dcdcdc; width: 240px; }
.inside p { font-size: 13px; text-align: center; }
.inside ul { margin: 0; padding: 0; list-style: none; }
.inside li  { padding: 0 0 0 18px; background: url(/images/global/content-list-icon.gif) no-repeat 5px 5px; font-size: 11px; color: #666; }
.inside a.watchvideo-btn { display: block; margin-top: 8px; background: url(/images/global/watchvideo-btn.gif) no-repeat top; height: 25px; text-indent: -9000em; overflow: hidden; border: 0; text-decoration: none; }
.inside a.watchvideo-btn:hover { background-position: bottom; }
.scrollButtons { position: absolute; top: 127px; cursor: pointer; }
.scrollButtons.left { left: -45px; }
.scrollButtons.right { right: -45px; }
.hide { display: none; }

/*