/* ---------- General Tags ---------- */
* {
	margin: 0;
	padding: 0;		
}
body {
	font-family: Verdana, Tahoma, Arial, Sans-Serif;
	background: #D2CCBC url(../images/body.png) repeat-x scroll;
}
img {
	border: 0; 
	vertical-align: middle;
}
a, :focus {
	outline: 0;	
}
ol, ul, li, p, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;	
}
/* ---------- General Classes ---------- */
.clear {
	clear: both;	
}
/* ---------- Structure ---------- */
#wrapper, #wrapper div {
	overflow: hidden;
	display: block;
}
#wrapper {	
	position: relative;	
	width: 960px;
	height: 760px;	
	left: 50%;
	top: 10px;
	margin-left: -480px;
	z-index: 1;	
}
#header {	
	position: relative;	
	width: 960px;
	height: 65px;
	z-index: 2;	
	text-align: center;
}
#header-wrap {	
	position: relative;	
	z-index: 3;
	width: 680px;
	left: 160px;
}
#header div {	
	position: relative;	
	display: block;
	float: left;	
	z-index: 4;	
	text-align: center;
	padding-right: 20px;
}
#header div.last {
		padding-right: 0;
}
#container {	
	position: relative;	
	width: 960px;
	height: 600px;
	border-bottom: 1px solid #B9B8A4;
	z-index: 2;						
}
#container #background{
	position: absolute;
	z-index: 3;
	width: 960px;
	height: 600px;
}
#container #background div {
	position: absolute;
	z-index: 4;	
	background: transparent url(../images/loader.gif) center center no-repeat scroll;
}
#container #background #button-fire {
	left: 400px;
	top: 30px;	
}
#container #background #button-earth {
	left: 549px;
	top: 159px;			
}
#container #background #button-metal {
	left: 489px;
	top: 338px;	
}
#container #background #button-water {
	left: 311px;
	top: 338px;	
}
#container #background #button-wood {
	left: 251px;
	top: 159px;		
}
#container #foreground {
	position: absolute;
	z-index: 5;
	width: 960px;
	height: 600px;
	display: none;	
}
#container #foreground #title {
	position: absolute;
	z-index: 7;
	width: 159px;
	height: 159px;
	top: 40px;
}
#container #foreground #title div {
	position: absolute;
	display: none;
	width: 159px;
	height: 159px;
}
#container #foreground #title div h4{
	text-indent: -9999px;
}
.title-fire {
	background: transparent url(../images/title_fire.jpg) no-repeat scroll;
}
.title-earth,
.title-various {
	background: transparent url(../images/title_earth.jpg) no-repeat scroll;	
}
.title-metal {
	background: transparent url(../images/title_metal.jpg) no-repeat scroll;	
}
.title-metal4p {
	background: transparent url(../images/title_metal4p.jpg) no-repeat scroll;	
}
.title-metalqi {
	background: transparent url(../images/title_metalqi.jpg) no-repeat scroll;	
}
.title-water {
	background: transparent url(../images/title_water.jpg) no-repeat scroll;	
}
.title-wood {
	background: transparent url(../images/title_wood.jpg) no-repeat scroll;	
}
#container #foreground #button-close{
	position: absolute;
	z-index: 7;
	width: 34px;
	height: 34px;
	top: 0px;
	left: 860px;	
}
#container #foreground #content{
	position: absolute;
	z-index: 6;
	width: 806px;
	height: 556px;
	left: 75px;
	top: 14px;
	background: transparent url(../images/foreground.png) no-repeat scroll;
}
#container #foreground #content #content-title {
	position: relative;		
	width: 700px;
	left: 95px;
	top: 6px;
	height: 80px;
	float: left;
	background: transparent url(../images/border.png) bottom left repeat-x;
}
#container #foreground #content #content-title div.sub-items {
	position: relative;		
	height: 75px;
	float: left;
	top: 4px;
}
#container #foreground #content #content-text {
	position: relative;
	width: 695px;
	left: 95px;
	top: 20px;
	height: 440px;	
	float: left;
}
#container #foreground #content #content-text #content-text-inner {
	position: relative;	
	width: 695px;
	height: 440px;	
	display: none;
}
#container #foreground #footnote {
	position: absolute;
	z-index: 7;
	width: 806px;
	height: 25px;
	left: 75px;
	top: 575px;
}
#footer {
	position: relative;	
	border-top: 1px solid #D7D5BF;	
	width: 960px;
	height: 90px;						
}
#footer #footer-left,  #footer #footer-right {
	position: relative;
	float: left;	
	width: 480px;
	height: 89px;						
}
#footer #footer-right #sound-controller {
	width: 31px;
	height: 31px;		
	float: right;
}
/* ---------- Texts ---------- */
#header-wrap h2{
	font-size: 20px;
	color: #000;
	letter-spacing: 1px;
}
#header-wrap h2 span{
	font-size: 16px;
	color: #6A694D;
}
#header-wrap h3{
	font-family: Arial, Sans-Serif;
	font-size: 13px;
	color: #fff;
}
#header-wrap div a {
	display: block;
	margin-top: 7px;	
}
#background a.menu-item {
	display: block;
	width: 159px;
	height: 159px;	
	text-indent: -9999px;
}
#background a.fire{
	background: transparent url(../images/fire.jpg) no-repeat;
}
#background a.earth {
	background: transparent url(../images/earth.jpg) no-repeat;
}
#background a.metal {
	background: transparent url(../images/metal.jpg) no-repeat;
}
#background a.water {
	background: transparent url(../images/water.jpg) no-repeat;
}
#background a.wood {
	background: transparent url(../images/wood.jpg) no-repeat;
}
#content p a, #header p a {	
	color: #5f5d5e;		
}
#button-close a {
	display: block;
	width: 34px;
	height: 34px;
	background: transparent url(../images/close.png) no-repeat scroll;
}
.image-item a {
	border: 2px solid #fff;
	display: block;
	width: 90px;
	height: 90px;
	margin:0 auto;
}
#content a.content-menu {	
	color: #6A694D;
	font-size: 16px;
	color: #6A694D;
	text-align: center;
	display: block;
	font-weight: bold;
}
#content h4 {	
	font-size: 14px;
	line-height: 16px;	
	color: #fff;
	padding: 0 0 10px 0;	
}
#content h5 {	
	font-size: 12px;
	line-height: 12px;	
	color: #fff;
	padding: 10px 0 5px 0;	
}
#content p {
	font-size: 12px;
	padding: 10px 0 10px 0;	
	color: #fff;	
	line-height: 18px;
}
#content p img {
	border: 2px solid #fff;
}
#content p img.align-left {
	margin: 0 8px 8px 0;
	float: left;
}
#content p img.align-right {
	margin: 0 8px 8px 8px;
	float: right;
}
#content p.indent {
	padding: 0 0 10px 20px !important;
	font-size: 11px !important;
}
#content p.note {
	padding: 0 !important;
	font-style: italic;
	font-size: 10px;
}
#content ul,
#content ol {	
	margin-left: 35px;
	padding-bottom: 10px;	
	padding-top: 10px;
}
#content ul li,
#content ol li {
	font-size: 12px;
	line-height: 20px;
	color: #fff;	
}
#content table {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;		
}
#content table tr td {
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	padding: 3px;	
}
#footnote p {
	font-size: 10px;
	text-align: right;
	font-style: italic;
	color: #6A694D;
}
.sub-items h3 {
	color: #fff;
	font-size: 12px;	
	padding: 5px 8px 4px 0;
}
#info p {
 	font-size: 11px;		
	color: #414141;
	padding-top: 10px;	
}
#info p a{
	font-size: 11px;	
 	text-decoration: none;
 	color: #1a1917;
 	display: block; 	
 	letter-spacing: 0.1em;	
}
#footer-left p{	
	color: #6A694D;
	font-size: 11px;
	padding-top: 5px;	
}
#footer-left p a{	
	color: #6A694D;
	text-decoration: none;
}
#footer-left p a:hover{	
	text-decoration: underline;
}
/* ---- Lists ---- */
/* Sub-menu */
ul.sub-menu {			
	list-style: none;	
	margin: 0 !important;
	padding: 0 !important;
}
ul.sub-menu li {		
	display: block;
}
ul.sub-menu li a {	
	display: block;	
	color: #fff;
	text-decoration: none;
	padding: 2px 10px 2px 0px;
}
ul.sub-menu li a:hover,
ul.sub-menu li a.selected {		
	color: #6A694D;
}
/* ---- Forms ---- */
form {
  padding: 0;
  margin: 0;	
}
form ul.form{  
  padding: 0 !important;
  margin: 10px 0 0 0 !important;  
  list-style: none;
  display: block;
  float: left;  
}
form ul.form li{
  display: block;
  line-height: 20px;
  padding: 0 !important;
  float: left;
  margin-bottom: 10px;
  width: 450px;
}
form ul.form li.send {
  text-align: right;
}
form ul.form li label{
  margin: 0;
  padding: 2px;  
  display: block;
  float: left;
  line-height: 16px;
  font-size: 12px;
  width: 90px;
  color: #fff;
}
form ul.form li span{
  font-size: 11px;
  color: #fff;
}
form ul.form li .text-field{
  margin: 0;
  padding: 2px 1px 2px 1px;
  border: 1px solid #fff;
  display: block;
  background: transparent;
  font-size: 12px;
  float: left;
  font-family: Helvetica, Arial, 'Liberation Sans', FreeSans,sans-serif;
  width: 350px;
  color: #fff;
}
form ul.form li textarea.text-field{
  height: 90px;
}
form ul.form li input.button{
  font-size: 11px;
  font-family: Helvetica, Arial, 'Liberation Sans', FreeSans,sans-serif;
  color: #6A694D;
  border: 1px solid #6A694D;
  background: #fff;  
  padding: 2px;
}
/* ---- Scroller---- */
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: transparent url(../images/scroll_track.png) no-repeat center 0 scroll;	
}
.jScrollPaneDrag {
	position: absolute;
	background: #414141;
	cursor: pointer;
	overflow: hidden;
	background: transparent url(../images/scroll_drag.png) no-repeat center 5px scroll;	
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}