/** 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 {
	color: #FFF;
	font-weight: normal;
	margin-top: 0;
	text-align: center;
	text-shadow: 1px 1px 2px #292929;
	filter: dropshadow(color=#292929, offx=1, offy=1);
}
#main h3 {
	margin-top: 225px;
	text-align: center;
	font-size: 22px;
	margin-bottom: 0;
    margin-left: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) }
.scrollable_9  { background-image: url(../images/scrollable/scrollable-image-9.jpg)	}
.scrollable_10 { background-image: url(../images/scrollable/scrollable-image-10.jpg) }
.scrollable_11 { background-image: url(../images/scrollable/scrollable-image-11.jpg) }
.scrollable_12 { background-image: url(../images/scrollable/scrollable-image-12.jpg) }
.scrollable_13 { background-image: url(../images/scrollable/scrollable-image-13.jpg) }
.scrollable_14 { background-image: url(../images/scrollable/scrollable-image-14.jpg) }
.scrollable_15 { background-image: url(../images/scrollable/scrollable-image-15.jpg) }
.scrollable_16 { background-image: url(../images/scrollable/scrollable-image-16.jpg) }
.scrollable_17 { background-image: url(../images/scrollable/scrollable-image-17.jpg) }
.scrollable_18 { background-image: url(../images/scrollable/scrollable-image-18.jpg) }
.scrollable_19 { background-image: url(../images/scrollable/scrollable-image-19.jpg) }
.scrollable_20 { background-image: url(../images/scrollable/scrollable-image-20.jpg) }
.scrollable_21 { background-image: url(../images/scrollable/scrollable-image-21.jpg) }
.scrollable_22 { background-image: url(../images/scrollable/scrollable-image-22.jpg) }
.scrollable_23 { background-image: url(../images/scrollable/scrollable-image-23.jpg) }
.scrollable_24 { background-image: url(../images/scrollable/scrollable-image-24.jpg) }
.scrollable_25 { background-image: url(../images/scrollable/scrollable-image-25.jpg) }
.scrollable_26 { background-image: url(../images/scrollable/scrollable-image-26.jpg) }
.scrollable_27 { background-image: url(../images/scrollable/scrollable-image-27.jpg) }
.scrollable_28 { background-image: url(../images/scrollable/scrollable-image-28.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;
}