/** Scrollable **/

/* main vertical scroll */
/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
#main {
	/* required settings */ 
    position:relative;
	overflow:hidden;
	width: 450px;
	height:320px;
	float:left;
	cursor: pointer;
	margin-top: 0;
}

/* Makes Search in Firefox 3 Align Properly */
html>/**/body #main, x:-moz-any-link, x:default { 
	height:300px;
}/* End Firefox 3 Hack */

#main h1 {
	margin-top: 8px;
	text-align: center;
}
#main h3 {
	margin-top: 210px;
	text-align: center;
	font-size: 22px;
	margin-bottom: 0;
}
#main h1.small {
	font-size: 15px;
}
#main a:link, #main a:active, #main a:visited {
	color: #FFCC00;
}
#main a:hover {
	color: #BA0D0D;
}
.scrollable_pages_arrows {
	width: 455px;
	position: relative;
}
a {
	outline: none;
}
a.prevPage:visited, a.prevPage:link, a.prevPage:active, a.prevPage:visited, a.nextPage:visited, a.nextPage:link, a.nextPage:active, a.nextPage:visited {
	positon: absolute;
	margin-top: -177px;
	width: 23px;
	height: 52px;
}
a.prevPage:visited, a.prevPage:link, a.prevPage:active, a.prevPage:visited {
	background: url(../images/buttons/arrow-left.png) no-repeat;
	margin-left: -5px;
	float: left;
}
a.nextPage:visited, a.nextPage:link, a.nextPage:active, a.nextPage:visited {
	background: url(../images/buttons/arrow-right.png) no-repeat;
	float: right;
}
a.prevPage:hover {
	background: url(../images/buttons/arrow-left-hover.png) no-repeat;
}
a.nextPage:hover {
	background: url(../images/buttons/arrow-right-hover.png) no-repeat;
}
/* 
    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. 
*/ 
#main #pages {
	/* 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. 
*/ 
#main #pages div {
	float:left;
}
/* you may want to setup some decorations to active the item */ 
#pages div.active {
	border:1px inset #ccc;
	background-color:#fff;
}
.scrollable_1 {
	background-image: url(../images/scrollable/scrollable-image-1.jpg);
}
.scrollable_2 {
	background-image: url(../images/scrollable/scrollable-image-2.jpg);
}
.scrollable_3 {
	background-image: url(../images/scrollable/scrollable-image-3.jpg);
}
.scrollable_4 {
	background-image: url(../images/scrollable/scrollable-image-4.jpg);
}
.scrollable_5 {
	background-image: url(../images/scrollable/scrollable-image-5.jpg);
}
.scrollable_6 {
	background-image: url(../images/scrollable/scrollable-image-6.jpg);
}
.scrollable_7 {
	background-image: url(../images/scrollable/scrollable-image-7.jpg);
}
.scrollable_8 {
	background-image: url(../images/scrollable/scrollable-image-8.jpg);
}
.page {
	width: 430px;
	height:280px;
	padding: 10px;
}
.navi {
	clear:left;
	width:450px;
	height:20px;
	text-align: center;
}
/* items inside navigator */ 
.navi a {
	width:8px;
	height:8px;
	margin:3px;
	background:url(../images/scrollable/navigator.png) 0 0 no-repeat;
	display:inline-block;
	font-size:1px;
}
/* mouseover state */ 
.navi a:hover {
	background-position:0 -8px;
}
/* active state (current page state) */ 
.navi a.active {
	background-position:0 -16px;
}