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

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

#methods{
	margin: 0 auto;
	width: 540px;
	_width: 530px;
	height: 90px;
	}

#methods #gasha_0,
#methods #gasha_1,
#methods #gasha_2{
	float: left;
	font-weight: bold;
	line-height: 130px;
	width: 168px;
	_width: 160px;
	height: 134px;
	margin-bottom: 15px;
	text-align: center;
	background: url("../images/gasha_img.png") no-repeat left -118px;
	cursor: pointer;
	}
#methods #gasha_0{ background-position: left -118px; }
#methods #gasha_1{ background-position: -168px -118px; margin-left: 5px; }
#methods #gasha_2{ background-position: -336px -118px; margin-left: 5px; }

#methods .selected{ color: #C60000; }
#methods #gasha_0.selected{ background-position: left -254px; }
#methods #gasha_1.selected{ background-position: -168px -254px; }
#methods #gasha_2.selected{ background-position: -336px -254px; }

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

.gasha_action {
	margin: 0 auto;
	height: 50px;
}
.gasha_action a.img_button {
	display: block;
	width: 130px;
	height: 40px;
	background: url("../images/gasha_img.png") no-repeat left -388px;
	border: none;
	color: #8a5757;
	cursor: pointer;
	font-size: 14px;
	font-weight:bold;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}
.gasha_action a.img_button:hover { background-position: -130px -388px;}


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

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

.gasha .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,
#gasha_result{ border: 5px double #e5c348;padding: 5px 5px 15px;overflow: visible;}

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

.gasha_confirm{ padding: 10px; }

.gasha_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/gasha_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;
	}

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

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