@charset "utf-8";
/* CSS Document */

/* HolyBeast Online Beast Reel Style
=====================================================================
/* -------------------- 091216 for Web Gasha ----- */
.item_list {
	_font-size: 10px;
}

#methods{
	margin: 0 auto;
	width: 520px;
	_width: 520px;
	height: 100px;
	}

#methods #reel_0,
#methods #reel_1,
#methods #reel_2{
	float: left;
	font-weight: bold;
	line-height: 130px;
	width: 165px;
	_width: 157px;
	height: 152px;
	margin-bottom: 15px;
	text-align: center;
	background: url("../images/reel_img.png") no-repeat left top;
	cursor: pointer;
	}
#methods #reel_0{ background-position: left -115px; }
#methods #reel_1{ background-position: -165px -115px; margin-left: 8px; }
#methods #reel_2{ background-position: -330px -115px; margin-left: 8px; }

#methods .selected{ color: #C60000; }
#methods #reel_0.selected{ background-position: left -269px; height:151px; }
#methods #reel_1.selected{ background-position: -165px -269px; height:151px; }
#methods #reel_2.selected{ background-position: -330px -269px; }

#methods a{
	display: block;
	width: 168px;
	height: 0;
	}

.reel_action {
	margin: 0 auto;
	height: 67px;
}
.reel_action a.img_button {
	display: block;
	width: 147px;
_width:145px;
	height: 67px;
	background: url("../images/reel_img.png") no-repeat left -420px;
	border: none;
	color: #8a5757;
	cursor: pointer;
	font-size: 12px;
	font-weight:bold;
	line-height:40px;
	text-align:left;
	text-decoration:none;
}
.reel_action a.img_button input {
margin:0 0 0 50px;
padding:0 0 0 50px;
}

.reel_action a.img_button:hover { background-position: left -487px;}

.reel_action a.img_button_ticket {
	display: block;
	width: 147px;
_width:145px;
	height: 67px;
	background: url("../images/reel_img.png") no-repeat -147px -420px;
	border: none;
	color: #8a5757;
	cursor: pointer;
	font-size: 12px;
	font-weight:bold;
	text-decoration: none;
}
.reel_action a.img_button_ticket:hover { background-position: -147px -487px;}
.reel_action a.no_hover:hover { background-position: -147px -420px;}

.reel_action a.img_button div.reel_button_str p.reel_times_str { margin:17px 0 0 95px; _margin:17px 0 0 50px;}
.reel_action a.img_button div.reel_button_str p.reel_price_str { margin:0 0 0 95px; _margin:0 0 0 50px;}
.reel_action a.img_button_ticket div.reel_button_str p.reel_times_str { margin:17px 0 0 98px; _margin:17px 0 0 50px;}
.reel_action a.img_button_ticket div.reel_button_str p.reel_price_str { margin:0 0 0 98px; _margin:0 0 0 50px;}

#lists{
	margin: 0 auto;
	width: 525px;
	margin-top: 60px;
	_margin-top: 30px;
	}
.reel{
	float: left;
	width: 150px;
	height: 103px;
	padding: 7px 10px 5px 10px;
	margin: 5px 5px 5px 0px;
	background: url("../images/reel_img.png") no-repeat -340px top;
	font-weight: bold;
	color: #330000;
	}
.reel.gold,
.item_result.gold{ background-position: left top; }
.reel.silver,
.item_result.silver{ background-position: -170px top; }

.reel .name{
	float: right;
	width: 75px;
	_width: 70px;
	height: 3em;
	margin: 0px 0px 0px 0px;
	}

.reel .icon{
	float:left;
	width: 64px;
	margin: 5px 5px 5px 0;
	text-align: center;
	cursor: pointer;
	}
.icon .more {
	width: 47px;
	height: 16px;
	margin: auto;
	background: url("../images/mall_img.png") no-repeat -558px -454px;
	}
.icon:hover .more { background-position: -558px -470px; }


#added_field,
#reel_result{ border: 5px double #e5c348;padding: 5px 5px 15px;overflow: visible;}

#error_field{ border: 5px double #ff0000;padding: 5px 5px 15px;overflow: visible;}

.reel_confirm{ padding: 10px; }

.reel_info_confirm{
	border: 3px double #9f6565;
	margin: 10px 0;
	padding: 10px;
	}

.item_result{
	clear: both;
	width: 170px;
	height: 115px;
	padding: 0px 0px 0px 0px;
	margin: 5px 0px 0px 0px;
	background: url("../images/reel_img.png") no-repeat -340px top;
	font-weight: bold;
	color: #330000;
	}
.item_result .name {
	float: right;
	width: 75px;
	height: 5.5em;
	font-size:11px;
	line-height: 1.0;
	padding: 0 10px 0;
	margin: 10px 0px 5px 5px;
	}
.item_result .icon {
	float: left;
	width: 44px;
	margin: 10px 5px 10px 0;

	padding: 0 10px 10px;
	position: relative;
	text-align: center;
	cursor: pointer;
	}
.item_result .icon img {
	width: 64px;
	}

.reel_confirm .reel_info_result{
	float: left;
	width: 200px;
	height: auto;
	}
.reel_confirm .center_result{
	float: right;
	width: 150px;
	}
.reel_confirm .center_result li{ margin:0 0 5px 0; }

.item_result .info p{
	text-align: center;
	}

#reel_tickts {
background-color:#FFCCCC;
border-left:5px solid #663300;
color:#663300;
height:auto;
margin-bottom:5px;
padding:5px;
width:120px;
margin:0 auto;
}

#reel_tickts span {
background-color:#FFFFFF;
color:#666666;
font-weight:bold;
height:auto;
margin-right:5px;
padding:2px;
}

#sofia_prize,#cheeze_prize,#tomato_prize,#tomato_prize,#olivia_prize { clear:both; padding:25px 0 0 0;}

#sofia_prize p.clearfix,#cheeze_prize p.clearfix,#tomato_prize p.clearfix,#olivia_prize p.clearfix {
display: block;
width: 520px;
height: 50px;
border: none;
color: #8a5757;
font-size: 12px;
text-indent:-9999px;
font-weight:bold;
line-height:0;
text-align:left;
text-decoration:none;
margin:0 0 5px 0;
}

#sofia_prize p.clearfix {	background: url("../images/reel_img.png") no-repeat left -555px; }
#cheeze_prize p.clearfix { background: url("../images/reel_img.png") no-repeat left -605px; }
#tomato_prize p.clearfix { background: url("../images/reel_img.png") no-repeat left -655px; }
#olivia_prize p.clearfix { background: url("../images/reel_img.png") no-repeat left -705px; }