/*@import url(scrollable/buttons.css);
@import url(scrollable/navigator.css);*/


#product-thumbs {
	width: 720px;
	height:150px;
	margin: 0 0 0 15px;
	padding: 6px 0 29px;
	position: relative;
	background: url(images/thumb-bg.png) #333;
	overflow: hidden;
}

#browsable {
	width: 720px;	
}

.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 680px;
	height:150px;
	/*background: url(images/scrolling-thumbs-bg.jpg) repeat-x 0 0 #fff;*/
	float: left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background: url(images/hori_arrows.png) no-repeat;
	display:block;
	width:30px;
	height:29px;
	cursor:pointer;
	font-size:9px;
	position: absolute; 
	top: 156px;
}

/* right */
a.right {/*left: 690px;*/ right: 0; background-position: 0 -30px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; } 


/* left */
a.left {left: 0; background-position: 0 0;} 
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }


/* position and dimensions of the navigator */

.navi {
	position: absolute;
	top: 156px;
	left: 30%;
	right: 50%;
	width:300px;
	height:29px;
}


/* items inside navigator */
.navi a {
	width:34px;
	height:15px;
	float:left;
	margin:7px 3px 0;
	background:url(images/navigation-bottles.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

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

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


/*
	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 a {
	display: block;
	border: 0;
	float:left;
	margin:0;
	padding:0;
	width:120px;
	height:150px;
	position: relative;
	text-decoration: none;
	cursor: pointer;
}

.scrollable a .label {
	position: absolute;
	top: 120px;
	left: 0;
	display: none;
	height: 30px;
	width: 110px;
	color: #666;
	text-align: center;
	padding: 3px 5px 0;
	line-height: 11px;
	font-size:120% !important;
}

.scrollable a:hover .label {
	color: #eee;
	background: #666;
	display: block;
}

/* active item */
.scrollable .active {
	z-index:9999;
	position:relative;
}

.scrollable .active label {
	color: #eee;
	background: #ce481f;
}

/* tab pane styling */

div.panes {
	margin-left: 15px;
}

div.panes ul {
	clear: left;
	display:none;
	height: 460px;
	}
	
div.panes ul.current {
	display: block;
}	
	

.nihongo span {
	font-size: 80%;
}


.product-frame {
	list-style: none;
	width: 720px;
	min-height: 460px;
	padding: 0 !important;
	background: url(images/product-pane-bg.jpg) no-repeat 0 0 #eee;
	color: #555;
	margin: 0 0 30px !important;
	padding: 0 !important;
	clear: left;
}

ul.product-frame li {
	list-style: none;
	margin: 0;
	padding: 0 !important;
	float: left;
	display: block;
}

ul.product-frame p, ul.product-frame h3 {
	margin: 18px 0 0 !important;
	padding: 0 !important;
}

.product-col-left {
	width: 270px;
}

.product-intro {
	margin: 60px 0 0 20px;
}

.product-col-left .product-intro h3 {
	font-size: 30px;
	color: #333;
	font-family: Georgia, Times, Serif;
	padding: 0 0 16px !important;
	border-bottom: 1px solid #666;
	margin: 0 0 20px !important;
}

#nihongo .product-col-left .product-intro h3 {
	font-size: 17px !important;
	font-family: "Hiragino Mincho Pro","ヒラギノ明朝 Pro W6" !important;
}

.product-image {
	width: 180px;
	height: 460px;
}

.product-image img {
	display: block;
}

.product-col-right {
	width: 270px;
	padding: 30px 0 !important;
}

.product-col-right dl {
	margin: 30px 0;
	padding: 80px 0 0 !important;
	margin: 0 !important;
}

.product-col-right dl dt {
	font-family: Georgia, Times, Serif;
	font-size: 120%;
	font-weight: 700;
	padding-bottom: 10px;
}

.product-col-right dl dd {
	padding: 4px 0;
	border-top: 1px dotted #aaa;
}