@charset "euc-jp";

/* last-modified:2010-10-20 */

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
background-color: #111111;
position:relative;
overflow:hidden;
width: 100%;
height:140px;
padding:0px;
margin:0px;
}

/*
	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 the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}
/* single scrollable item */
.scrollable .items a {
	float:left;
	margin:10px 5px 15px 21px;
	background-color:#666666;
	padding:0px;
	border:3px solid #666666;
	cursor:pointer;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	display: block;
}
.scrollable .items a:hover {
	background-color:#EEEEEE;
	border:3px solid #EEEEEE;
}

/* active item */
.scrollable .items a:active {
	border:3px solid #000000;
	z-index:9999;
	position:relative;
}

/* this makes it possible to add next button beside scrollable */
/* prev, next, prevPage and nextPage buttons */
/* right */
.arrow_navi {
	padding:0px 0px 0px 0px;
	margin:0px;
	background-color: #111111;
}
.arrow_navi .leftbox {
	width: 200px;
	float:left;
	padding:0px 0px 20px 20px;
	margin:0px;
}
.arrow_navi .rightbox {
	width:400px;
	color:#FFFFFF;
	font-size:88%;
	text-align:right;
	float:right;
	padding:0px 20px 0px 0px;
	margin:0px;
}
.arrow_navi .rightbox span {
	font-size:88%;
}
/* position and dimensions of the navigator */
.navi {
	width:220px;
	padding: 0px 0px 10px 0px;
	margin:0px;
	float:left;
}
/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	background:url(images/circle_navi01.gif) 0 0 no-repeat;
	display:block;
	font-size:1px;
	float:left;
	margin: 3px 7px 3px 0px;
	cursor:pointer;
}
/* mouseover state */
.navi a:hover {
	background:url(images/circle_navi02.gif) 0 0 no-repeat;
}
/* active state (current page state) */
.navi a.active {
	background:url(images/circle_navi02.gif) 0 0 no-repeat;
}
/* right */
.arrow_left a {
	display:block;
	width:8px;
	height:9px;
	float:left;
	clear:left;
	background-image: url(images/left_arrow.gif);
	background-repeat: no-repeat;
	padding:0px;
	margin: 0px;
	cursor:pointer;
} 
.arrow_left a:hover {
	background-image: url(images/left_arrow_b.gif);
} 
.arrow_right a {
	display:block;
	width:8px;
	height:9px;
	float:left;
	background-image: url(images/right_arrow.gif);
	background-repeat: no-repeat;
	padding:0px;
	margin: 0px 0px 0px 7px;
	cursor:pointer;
}
.arrow_right a:hover {
	background-image: url(images/right_arrow_b.gif);
} 
/* disabled navigational button */
a.disabled {
	visibility:hidden !important;
}