@charset "UTF-8";

html {
	background-color: transparent;
}

body {
	background: #d9342c;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus {
	overflow: hidden;
}

img {
	vertical-align: bottom;
}

#wrapper {
	width: 1220px;
	position: relative;
	margin: 80px auto 0px auto;
}

.clear {
	clear: both;
}

h1 {
	background: url(../img/logo.png) no-repeat;
	width: 185px;
	height: 77px;
	text-indent: -9999em;
	z-index: 1;
	position: absolute;
	left: -204px;
	top: -80px;
}

hr {
	clear: both;
	border: 1px solid #ffffff;
	border-width: 1px 0px 0px 0px;
}

#left-content {
	float: left;
	width: 200px;
	min-height: 1px;
	color: #540400;
	z-index: 9;
	position: relative;
}

#center-content {
	float: left;
	width: 800px;
	color: #540400;
	position: relative;
	margin: 0px 10px;
}

.side-frame-top {
	background: url(../img/side_frame_top.png) no-repeat center top;
	width: 200px;
	padding-top: 10px;
}

.side-frame-middle {
	background: url(../img/side_frame_middle.png) repeat-y center top;
	width: 200px;
}

.side-frame-bottom {
	background: url(../img/side_frame_bottom.png) no-repeat center bottom;
	width: 200px;
	padding-bottom: 10px;
}


#left-content .side-frame-middle {
	min-height: 100px;
}

#left-content .side-frame-bottom {
	background: url(../img/side_frame_bottom_left.png) no-repeat center bottom;
	padding-bottom: 27px;
}

.contents h2 {
	background: url(../img/contents_cap.png) no-repeat;
	width: 200px;
	height: 35px;
	text-indent: -9999em;
	position: relative;
	top: -10px;
}

.frame-top {
	background: #ffffff url(../img/frame_top.png) no-repeat center top;
	width: 800px;
	padding-top: 171px;
}

.frame-middle {
	background: #ffffff none repeat-y center top;
	width: 800px;
	height: 40px;
}

.frame-bottom {
	background: #ffffff url(../img/frame_bottom.png) no-repeat center bottom;
	width: 800px;
	padding-bottom: 185px;
}

.sub-frame-top {
	background: url(../img/sub_frame_top.png) no-repeat center top;
	width: 787px;
	padding-top: 11px;
	position: relative;
	margin-left: 7px;
}

.sub-frame-middle {
	background: url(../img/sub_frame_middle.png) repeat-y center top;
	width: 787px;
}

.sub-frame-bottom {
	background: url(../img/sub_frame_bottom.png) no-repeat center bottom;
	width: 787px;
	padding-bottom: 12px;
}

#main {
	position: relative;
	top: -171px;
}

#main h2 {
	margin-left: 2px;
	margin-top: 2px;
}

/*----------------------------------------------------------

nav

----------------------------------------------------------*/
#nav {
	width: 820px;
	position: absolute;
	left: 60px;
	top: -52px;
}

#nav li {
	float: left;
	position: relative;
}

#nav li a,
#nav li span {
	display: block;
	background: url(../img/nav.png) no-repeat;
	text-indent: -9999em;
	height: 39px;
}

#nav li span.new {
	background: url(../img/new.png) no-repeat;
	width: 47px;
	height: 18px;
	text-indent: -9999em;
	position: absolute;
	left: 6px;
	top: -13px;
}

/*----- TOP -----*/
#nav .top a,
#nav .top span {
	background-position: -0px -0px;
	width: 81px;
}

#nav .top a:hover,
#nav .top .selected {
	background-position: -0px -39px;
}

#nav .top .new {
	visibility: hidden;
}

/*----- STORY -----*/
#nav .story a,
#nav .story span {
	background-position: -81px -0px;
	width: 124px;
}

#nav .story a:hover,
#nav .story .selected {
	background-position: -81px -39px;
}

#nav .story .new {
	visibility: hidden;
}

/*----- CHARACTER -----*/
#nav .character a,
#nav .character span {
	background-position: -205px -0px;
	width: 195px;
}

#nav .character a:hover,
#nav .character .selected {
	background-position: -205px -39px;
}

#nav .character .new {
	visibility: hidden;
}

/*----- SYSTEM -----*/
#nav .system a,
#nav .system span {
	background-position: -400px -0px;
	width: 144px;
}

#nav .system a:hover,
#nav .system .selected {
	background-position: -400px -39px;
}

#nav .system .new {
	visibility: hidden;
}

/*----- MOVIE -----*/
#nav .movie a,
#nav .movie span {
	background-position: -544px -0px;
	width: 125px;
}

#nav .movie a:hover,
#nav .movie .selected {
	background-position: -544px -39px;
}

#nav .movie .new {
	visibility: hidden;
}

/*----- SPECIAL -----*/
#nav .special a,
#nav .special span {
	background-position: -669px -0px;
	width: 147px;
}

#nav .special a:hover,
#nav .special .selected {
	background-position: -669px -39px;
}

#nav .special .new {
/*	visibility: hidden;*/
}

/*----------------------------------------------------------

footer

----------------------------------------------------------*/
#footer {
}

.copyright {
	float: right;
	color: #ffffff;
	font-size: 11px;
	text-align: center;
}

.copyright img {
	padding: 5px;
	margin-bottom: 4px;
}

/*----------------------------------------------------------

crest-page

----------------------------------------------------------*/
#crest-bg {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.5;
	z-index: 99;
	position: fixed;
	top: 0px;
	left: 0px;
}

#crest-page {
	z-index: 999;
}

#crest-page .content {
	background: url(../img/crest_page.png) no-repeat;
	width: 749px;
	height: 586px;
	position: relative;
}

#crest-page .close-btn {
	background: url(../img/crest_page_btn_close.png) no-repeat;
	width: 32px;
	height: 33px;
	text-indent: -9999em;
	position: absolute;
	left: 711px;
	top: 6px;
}

#crest-page #dl-nav {
	position: absolute;
	left: 380px;
	top: 409px;
}

#crest-page #dl-nav li {
	margin-bottom: 20px;
}

#crest-page #dl-nav li a {
	display: block;
	background: url(../img/crest_page_nav.png) no-repeat;
	text-indent: -9999em;
	width: 229px;
	height: 30px;
}

/*----- 1280x1024 -----*/
#crest-page #dl-nav .dl00 a {
	background-position: -0px -0px;
}

#crest-page #dl-nav .dl00 a:hover {
	background-position: -229px -0px;
}

/*----- 1600x1200 -----*/
#crest-page #dl-nav .dl01 a {
	background-position: -0px -30px;
}

#crest-page #dl-nav .dl01 a:hover {
	background-position: -229px -30px;
}

/*----- 1920x1080 -----*/
#crest-page #dl-nav .dl02 a {
	background-position: -0px -60px;
}

#crest-page #dl-nav .dl02 a:hover {
	background-position: -229px -60px;
}