@charset "utf-8";
/* layout.php用 */


#root {
	position: relative;
	width: 860px;
	margin: 0 auto;
	padding-top: 10px;
	text-align: left;
}

#header {
	position: relative;
	width: 845px;
	height: 234px;
	background: url(../images/mall_img.png) no-repeat 0px 0px ;
	padding-left: 15px;
}
	#header .head_navi {
		position: absolute;
		top: 17px;
		left: 640px;
		width: 160px;
		height: 15px;
	}
		#header .head_navi a {
			padding: 0px 10px;
			font-size: 10px;
			color: #ffffff;
		}
	#header .personal_info {
		position: absolute;
		left: 360px;
		width: 436px;
		height: 25px;
		margin: 3px 0px 0px 0px;
		padding: 10px 0px 0px 6px;
		background: url(../images/mall_img.png) no-repeat -194px -759px;
	}
		#header .personal_info div {
			float: left;
			height: 20px;
			line-height: 20px;
			margin-right: 4px;
			font-size: 10px;
			color: #ffffff;
		}
		#header .personal_info .balance_title {
			width: 60px;
		}
		#header .personal_info .balance {
			width: 70px;
			padding-right: 5px;
			text-align: right;
			background: url(../images/mall_img.gif) no-repeat -252px 0px;
			line-height: 20px;
		}
		#header .personal_info .cart_num, #header .personal_info .cart_total {
			border-bottom: #FFFFFF solid 1px;
		}
		#header .personal_info .cart_num *, #header .personal_info .cart_total * {
			margin: 0;
		}
		#header .personal_info .cart_num   { width: 75px; }
		#header .personal_info .cart_total { width: 80px; }
			#header .personal_info .num {
				float: right;
				color: #FFFF99;
				font-size: 11px;
				font-weight: bold;
				text-align: right;
			}
			#header .personal_info .unit {
				float: right;
			}

		#header .personal_info .cart_bt {
			height: 20px;
			width: 60px;
			background: url(../images/mall_img.gif) no-repeat -327px 0px;
		}
			#header .personal_info .cart_bt a {
				display: block;
				width: 35px;
				height: 20px;
				line-height: 20px;
				padding-left: 25px;
				color: #cc0000;
			}
			#header .personal_info .cart_bt a:hover {
				color: #0066cc;
			}

		#header .personal_info .history {
		}
			#header .personal_info .history a {
				display: block;
				line-height: 20px;
				color: #ffffff;
			}
	#header .charge {
		position: absolute;
		top: 153px;
		width: 220px;
		height: 80px;
		background: url(../images/mall_img.jpg) no-repeat -530px -158px;
	}
		#header .charge:hover {
			background-position: -530px -238px;
		}
	#header .main_menu {
		position: absolute;
		top: 173px;
		left: 235px;
		width: 620px;
	}
		.main_menu li { float: left; line-height: 0; }
			.main_menu li a { line-height: normal; }
		.main_menu .menu, .menulast {
			display: block;
			text-align: center;
			padding-top: 12px;
			font-size: 12px;
			font-weight: bold;
		}
		.main_menu .menu, .main_menu .menu:visited {
			background: url(../images/menu_bg.jpg);
			background-repeat: no-repeat;
			width: 88px;
			height: 28px;
			color: #fff;
		}
		.main_menu .menu.last {
			background: url(../images/mall_img.jpg) no-repeat -750px 0px;
		}
		.main_menu a:hover.menu {
			background-position: 0px -40px;
			color: #fff;
		}
		.main_menu a:hover.menu.last {
			background-position: -750px -40px;
		}

		.main_menu li ul.sub {
			display: none;
		}
		.main_menu li:hover ul.sub {
			position: absolute;
			display: block;
			clear: both;
			z-index: 100;
		}
			.main_menu ul.sub li {
				float: none;
			}
				.main_menu ul.sub li a {
					display: block;
					width: 87px;
					line-height: 25px;
					background: url(../images/mall_img.png) 0px -669px;
					color: #ffffff;
					font-size: 10px;
					text-indent: 10px;
					text-align: left;
				}
				.main_menu ul.sub li a:hover {
					background-position: 0px -694px;
				}
	#header .other_menu {
		position: absolute;
		top: 213px;
		left: 235px;
		width: 550px;
		height: 20px;
		background:  url(../images/mall_img.png) no-repeat -340px -299px;
	}
		#header .other_menu a {
			float: left;
			margin-left: 10px;
			padding-top: 2px;
		}

#container {
	width: 826px;
	padding-left: 15px;
	background: url(../images/bg_middle.png) repeat-y;
	overflow: hidden;
}
	#container_left {
		float: left;
		width: 220px;
		margin-top:10px;
	}
		#container_left .top {
			width: 220px;
			height: 54px;
			background: url(../images/mall_img.jpg) no-repeat -530px 0px;
		}
		#container_left .middle {
			width: 210px;
			height: auto;
			padding-left: 10px;
			background-image: url(../images/left_bg.jpg);
			background-repeat: repeat-y;
		}

		#container_left .submenu {
			margin-bottom: 20px;
		}
			#container_left .submenu .head {
				display: block;
				width: 200px;
				height: 30px;
				background: url(../images/mall_img.png) no-repeat -605px -454px;
				font-size: 14px;
				font-weight: bold;
				text-align: center;
				text-indent: 0px;
				line-height: 30px;
				text-transform: uppercase;
			}
				#container_left .submenu .head a {
					color: #990000;
				}

			#container_left .submenu .sub {
				width: 196px;
				height: 25px;
				padding: 1px;
				background: #FFFFFF;
				border-left: #666666 solid 1px;
				border-right: #666666 solid 1px;
				line-height: 25px;
				text-transform: uppercase;
				text-indent: 10px;
			}
				#container_left .submenu .sub a {
					display: block;
					width: 196px;
					height: 25px;
					line-height: 25px;
					color: #703d3d;
					border-bottom: #CCCCCC dashed 1px;
				}
				#container_left .submenu .sub a:hover {
					background: #feae31;
					color: #FFFFFF;
				}
			#container_left .submenu .foot {
				display: block;
				width: 200px;
				height: 10px;
				font-size: 0;
				background: url(../images/mall_img.png) no-repeat -605px -484px;
			}

		#container_left .search {
			width: 200px;
		}
			#container_left .search .header {
				background: url(../images/mall_img.png) -194px -532px;
				width: 200px;
				height: 22px;
			}

			#container_left .search table.form {
				width: 200px;
				background: #FFFFFF;
				border-collapse: separate;
				border-spacing: 0;
				border-bottom: #330000 solid 1px;
				border-left: #330000 solid 1px;
				border-right: #330000 solid 1px;
				text-align: left;
			}
			#container_left .search table.form th {
				padding: 5px 5px 0px 5px;
			}
			#container_left .search table.form td {
				padding: 0px 5px;
			}
				#container_left .search table.form td input.long {
					width: 150px;
				}
				#container_left .search table.form td input.short {
					margin-right: 5px;
					width: 65px;
				}
				#container_left .search table.form .search_tags label {
					display: block;
				}
				#container_left .search table.form .search_tags label input {
					margin-right: 2px;
				}
			#container_left .search table.form .buttons {
				padding: 5px;
				text-align: center;
			}

		#container_left .bottom {
			width: 220px;
			height: 104px;
			margin-bottom: 10px;
			background: url(../images/mall_img.jpg) no-repeat -530px -54px;
		}

	#container_right {
		float: left;
		width:535px;
		height:auto;
		padding:10px 20px 20px 20px;
	}

	#container_right_bar {
		float:left;
		width:31px;
		height:281px;
		background: url(../images/mall_img.png) no-repeat -860px 0px;
	}
	
	a#beastreels_banner {
		width: 218px;
		height: 218px;
		display: block;
		background-image: url("../images/beastreels.jpg");
		background-repeat: no-repeat;
		margin:0 0 10px 0;
	}
		a#beastreels_banner:hover { background-position: -218px 0px; }
	/*a#luckybox_banner {
		width: 218px;
		height: 218px;
		display: block;
		background-image: url("../images/luckybox.jpg");
		background-repeat: no-repeat;
	}
	
	a#luckybox_button {
		width: 201px;
		height: 52px;
		display: block;
		background-image: url("../images/luckybox_button.jpg");
		background-repeat: no-repeat;
		background-position: 0 0;
		margin: 10px auto;
	}
		a#luckybox_button:hover { background-position: 0 -52px; }*/


/* footer */
#footer_area {
	position: relative;
	width: 810px;
	height: 65px;
}
#footer {
	width: 810px;
	height: 65px;
	background: url(../images/mall_img.png) no-repeat 0px -233px;
}
	#footer .easyfun {
		position: absolute;
		top: 15px;
		left: 57px;
		width: 36px;
		height: 36px;
	}
	#footer .cyberstep {
		position: absolute;
		top: 21px;
		left: 100px;
		width: 185px;
		height: 26px;
	}
	#footer .footermenu {
		position: absolute;
		top: 5px;
		left: 350px;
		color: #FFFFFF;
		font-size: 10px;
	}
		div.footermenu a { color: #FFFFFF; }
	#footer .copyright {
		position: absolute;
		top: 26px;
		left: 350px;
		line-height: 9px;
		color: #663333;
		font-size: 10px;
	}