/* CSS Document */
BODY{
	font-family: HelveticaNeue, "Helvetica Neue", helvetica,"MS Sans Serif",  arial,  sans-serif;
	background:#D4FFFF;
	margin:0px;
	padding:0px;
}

a{
	color:#999999;
	text-decoration:none;
}

a:hover{
	text-decoration:none;
}

p{
	padding:0;
	margin:0;
	clear:both;
}

h1,h2,h3,h4,h5,h6{
	color:#00C8FF;
	margin:0;
	padding:0;
	font-weight:normal;
}

h1{
	font-size:1.62em /* 26px */;
	color:#00C7FF;
	margin:0px;
	font-weight:bold;
}

img{
	border:none;
}

ul{
	padding:0px;
	margin:0px;
}

li{
	list-style:none;
	float:left;
}

#index_load{
	position: fixed;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 0px; /* -height/2 0 0 -width/2 */
}

.contact h3{
	font-size:0.8em;
	font-weight:normal;
}

.contact span{
	font-family:Monaco, Verdana, Arial, Helvetica, sans-serif;
	font-size:0.5625em;
	color:#999999;
	display:block;
}

.contact .tel{
	line-height:150%;
}

.contact a:hover{
	color:#FFFFFF;
}

.row{
	clear:both;
}

.firstcol{
	width:110px;
	float:left;
}

.col{
	width:110px;
	float:left;
	padding:0 0 0 10px;
	display:none;
}


.indexcol{
	width:230px;
	float:left;
	margin:0 10px 10px 0;
	display:none;
}

.typocol{
	width:220px;
	float:left;
	padding:0 0 0 10px;
}

#main{
	width:998px;
	background:#363636;
	margin:0 auto;
	border:1px solid #363636;
}

#container{
	width:960px;
	background:#1a1a1a;
	height:1450px;
	margin:13px 14px;
	padding:0 0 0 10px;
	position:relative;
}

/*------------------------------ header -------------------------*/

#header {
	width:960px;
	height:140px;
	position:relative;
}

#header #logo{
	width: 150px;
	padding:7px 0 0 0;
	float:left;
}

#header #logo p{
	color:#FFFFFF;
}

#header .contact{
	bottom:7px;
	left:4px;
	position:absolute;
}

#header #topnav{
	float:left;
	width:700px;
	padding:10px 0 0 0;
	font-family:Helvetica , Verdana, Arial, sans-serif;
}

#topnav li{
	padding:0 0 0 10px;
	width:110px;
}

#topnav li a{
	color:#363636;
	font-size:0.75em; /* 12px */
	display:block;
}

#topnav .long{
	width:150px
}

#topnav h2 a{
	color:#00C8FF;
	font-size:0.5em;
}

#topnav a:hover{
	color:#363636;
	background:#00C8FF;
	text-indent:5px;
}

#menu{
	width:70px;
	margin:10px 0 0 10px;
	float:left;
	position:relative;
}

#menu li{
	width:70px;
	padding:0;
}

#menu .select1{
	position:absolute; top:0px; left:0px;
}

#menu .select2{
	position:absolute; top:18px; left:5px;
}

#menu .select3{
	position:absolute; top:29px; left:13px;
}

#menu .select4{
	position:absolute; top:48px; left:4px;
}

#menu .select5{
	position:absolute; top:67px; left:19px;
}

#menu .select6{
	position:absolute; top:82px; left:0px;
}

#menu .select7{
	position:absolute; top:100px; left:15px;
}

#topimages{
	position:absolute;
	top:-14px;
	right:-15px;
	z-index:1;
}

#menu_bottom{
	width:700px;
	bottom:9px;
	left:240px;
	position:absolute;
	background:#00C7FF;
	padding:2px 0 0 10px;
}

#menu_bottom h3{
	float:left;
	font-size:0.7em; /* 12px */
	color:#1A1A1A;
}

#menu2{
	color:#1A1A1A;
	font-size:0.7em;
	margin-right:5px;
	float:right;
	text-align:right;
	width:360px;
}

#menu2 a{
	font-size:100%;
	color:#1A1A1A;
}

#menu2 a:hover{
	color:#FFFFFF;
}

#menu2 a.wactive{
	color:#FFFFFF;
}

/*---------------------------end header -------------------------*/

/*---------------------------- siderbar -------------------------*/

#sidebar{
	float:left;
	width:240px;
}

#sidebar iframe{
	width:230px;
	height:360px;
}

#sidebar #mail{
	background:#363636;
	width:220px;
	padding:5px;
}

#mail h2{
	font-size:0.7em;
	margin-bottom:5px; 
	font-family:Helvetica , Verdana, Arial, sans-serif;
	letter-spacing:0.05em;
}

form{
	margin:0;
}

#mail input{
	width:160px;
	padding:1px 1px 1px 5px;
	background:#00C7FF;
	border:none;
	color:#FFFFFF;
}

#mail .btn{
	font-family:Helvetica , Verdana, Arial, sans-serif;
	background:transparent;
	border:none;
	color:#FFFFFF;
	font-size:0.8em;
	width:40px;
	cursor:pointer;
}

#new, #newch{
	width:210px;
	height:330px;
	margin:0px 0px 10px 0px;
	background:#363636;
	padding:10px;
}

#new a, #newch a{
	color:#7e7e7e;
	text-decoration:underline;
}

#new a:hover, #newch a:hover{
	color:#FFFFFF;
	text-decoration:underline;
}

.date{
	color:#00C8FF;
	font-size:0.62em; /* 10px */
}

#new .en{
	font-family:Helvetica , Verdana, Arial, sans-serif;
	color:#7e7e7e;
	font-size:0.625em; /* 10px */
	width:170px;
	margin-bottom:10px;
	line-height:1.6em;
}

#newch .ch{
	color:#7e7e7e;
	font-size:0.7em;
	width:170px;
	margin-bottom:10px;
	line-height:1.7em;
}

.slider1{
	width: 20px;
	position:absolute;
	background:#363636;
}

.indicator{
	overflow:hidden;
	width:20px;
	height:80px;
	position:absolute;
	background:#1A1A1A;
	background:url(../images/scroll-bar.gif) no-repeat left top;
}

.container{
	padding:0px;
	overflow:hidden;
	width:190px;
	position:relative;
	height:325px;
}

.content{
	position:absolute;
}

#leftnav{
	width:210px;
	height:690px;
}

#leftnav ul{
	padding:0;
	margin:0;
}

#leftnav li{
	clear:both;
	width:100%;
}

#leftnav ul li a{
	font-family: HelveticaNeue, "Helvetica Neue", helvetica, arial;
	font-size:2.19em;
	color:#282828;
	font-weight:bold;
	text-decoration:none;
	line-height:75%;
	letter-spacing: -1.5pt;
}

#leftnav ul li a:hover{
	color:#00C7FF;
	text-decoration:none;
}

#leftnav2{
	word-spacing:-0.15em;
	margin-top:5px;
}

#leftnav2 h1{
	font-size:2.1em;
	display:inline;
	line-height:60%;
	letter-spacing: -1.5pt;
}

#leftnav2 .text{
	font-family: HelveticaNeue, "Helvetica Neue", helvetica,"MS Sans Serif", arial;
	color:#282828;
	font-size:2.1em;
	font-weight:bold;
	letter-spacing: -1.5pt;
	line-height:78%;
}

.oblique{
	color:#00C8FF;
	font-weight:normal;
}

/*-------------------------- end siderbar -----------------------*/

#content{
	float:right;
	width:720px;
	padding:0;
}

#content .col{
	padding:0 10px 0 0;
	margin:0 0 10px 0;
	height:230px;
}

#content .onlyphoto{
	padding:0 10px 0 0;
	margin:0 0 10px 0;
	float:left;
}

#content .onlytext{
	padding:0;
	margin:0 10px 10px 0;
	float:left;
	background:#292929;
	width:110px;
	height:110px;
	display:block;
}

#content a:hover .onlytext{
	background:#383838;
}

#content .des{
	color:#7e7e7e;
	font-size:0.657em;
}

#content .photo{
	width:110px;
	height:110px;
	display:block;
}

#content .title{
	color:#00C8FF;
	font-size:0.657em;
	display:block;
	line-height:1.4em;
}

#content .introch{
	color:#7e7e7e;
	font-size:0.657em;
	margin: 0px 5px 0px 0px;
	line-height:1.4em;
}

#content .introen{
	color:#7e7e7e;
	font-size:0.657em;
	margin: 0px 5px 0px 0px;
	line-height:1.1em;
}


#content a:hover{
	cursor:pointer;
}

#content a img{
	border:1px solid #1A1A1A;
}


#content  a .text{
	display:block;
	height:115px;
	padding:5px 0 0 0;
	line-height:0.8em;
}

#content a:hover .text{
	background:#1E1E1E;
}

#content a:hover img{
	border:1px solid #00C7FF;
}

/*---------- Work -----------------------------------------*/

#detail{
	background:#1a1a1a;
	padding:10px;
}

.text_box{
	width:220px;
	height:220px;
	margin:0 10px 10px 0;
	padding:0px 10px 10px 0;
	position:relative;
}

.text_box h3{
	font-size:0.7em;
	margin-bottom:2px;
	line-height:1.5em;
}

.text_box .text{
	color:#7e7e7e;
	font-size:0.62em; /* 10px */
	line-height:1.5em;
	margin: 0px 5px 0px 0px;
}

.work_box{
	height:230px;
	margin:0 10px 10px 0;
}

.url_bottom{
	position:absolute;
	left:0px;
	bottom:0px;
}

.url_bottom a{
	color:#00C7FF;
	font-size:0.62em; /* 10px */
}

.url_bottom a:hover{
	color:#FFFFFF;
}

.bigbox{
	width:710px;
	height:470px;
}

/*---------- About --------------------------------------------- */

#about{
	width:710px;
}

#about 	p{
	color:#7e7e7e;
	font-size:0.657em;
	line-height:1.4em;
}

#about div{
	margin-bottom:10px;
}

#about .box{
	background-color:#363636;
	padding:10px;
	margin:0;
}

#about #info1{
	float:left;
	width:470px;
	height:410px;
	line-height:1.7em;
}

#info1 .box{
	height:150px;
}

#info1 .left{
	float:left;
	width:220px;
}

#info1 .right{
	float:right;
	width:220px;
}

#about #info2{
	float:right;
	width:230px;
	height:950px;
}

#info2 .box{
	height:580px;
}


#info2 .left{
	float:left;
}

#info2 .right{
	float:right;
}

#info2	p{
	line-height:1.7em;
}

#about #info3{
	float:left;
	width:230px;
	height:540px;
}

#info3 p{
	line-height:1.7em;
}

#about #info4{
	float:left;
	width:230px;
	height:540px;
	margin-left:10px;
}

#info3 .box, #info4 .box{
	height:280px;
}

#about img{
	margin-bottom:10px;
	display:block;
}

#about h3{
	font-size:0.657em; /* 10px */
	color:#00C7FF;
	margin:0 0 2px 0;
}

#about li{
	width:210px;
	clear:both;
}

#about li a{
	color:#7e7e7e;
	font-size:0.657em; /* 10px */
}

#about li a:hover{
	color:#FFFFFF;
}

/*------------------------------ play ---------------------------*/

#playbox .playcol{
	width:230px;
	float:left;
	margin:0 10px 10px 0;
	position:relative;
}

#playbox img{
	border-bottom:1px solid #363636;
}

#playbox .photo{
	width:230px;
	height:155px;
	display:block;
}

#playbox .box{
	background:#363636;
	height:70px;
	padding:5px 10px 0 10px;
	display:block;
}

#playbox p{
	color:#7e7e7e;
	font-size:0.657em;
}

.playgame{
	bottom:5px;
	left:10px;
	position:absolute;
}

.playgame a{
	font-size:0.62em;
	color:#00C7FF;
}

.playgame a:hover{
	color:#FFFFFF;
}

/*------------------------------ link ---------------------------*/

#linkbox .linkcol{
	width:100px;
	height:100px;
	margin:0 10px 10px 0;
	padding:5px;
	float:left;
	background:#292929;

}

#linkbox a{
	font-size:80%;
	color:#292929;
}

#linkbox a:hover .col{
	color:#00C8FF;
	background:#1A1A1A;
}

/*------------------------------ join  ---------------------------*/

#join{
	width:450px;
	clear:both;
	margin:20px 0 0 0;
}

#join h1{
	margin:0 0 20px 0;
}

#join .title{
	height:94px;
}

#join .left{
	float:left;
	width:238px;
}

#join .right{
	float:left;
	width:200px;
}

#join .left div, #join .right div{
	margin:0 0 30px 0;
}

#join a:hover img{
	border:none;
	background:none;
	padding:1px;
}

/*------------------------------ typography ---------------------------*/

.typography .col{	
	width:230px;
	padding:0;
}

.typography h4{
	font-weight:bold;
	font-size:0.75em;
	margin-bottom:3px;
}

.typography p{
	margin:5px 0;
}

.typography li{
	font-size:0.75em;
	line-height:1.6em;
	width:220px;
}

.typography li a{
	letter-spacing:0.05em;
	display:block;
}

.typography li a:hover{
	color:#FFFFFF;
}

/*------------------------------ 404 ---------------------------*/

#box404{
	color:#00C8FF;
	position:relative;
	width:720px;
}

.text404{
	font-size:27em;
	position:absolute;
	left:-190px;
	top:0px;
	line-height:75%;
	letter-spacing:-0.07em;
	word-spacing:-0.19em;
}

.footer404{
	position:absolute;
	top:340px;
	left:-230px;
	font-weight:bold;
	line-height:1em;
}

.footer404 .col1{
	width:180px;
	float:left;
}

.footer404 .col2{
	width:180px;
	float:left;
}

.footer404 .col3{
	width:245px;
	float:left;
}

.footer404 .col4{
	width:110px;
	float:left;
}

.footer404 a{
	color:#00C8FF;
}

.footer404 a:hover{
	color:#FD3802;
}

/*------------------------------ footer -------------------------*/

#footer{
	width:960px;
	clear:both;
	left:10px;
	bottom:10px;
	position:absolute;
}

#footer .col{
	width:120px;
	padding:0;
	line-height:90%;
	display:block;
}

#footer #left{
	width:230px;
	float:left;
	padding-top:10px;
	border-top:1px solid #363636;
}

#footer #right{
	width:710px;
	float:right;
	margin:0 10px;
	padding-top:10px;
	border-top:1px solid #00C7FF;
}

#footer li{
	padding:0;
	float:none
}

#footer li a{
	font-family:Helvetica , Verdana, Arial, sans-serif;
	font-size:0.66em;
	color:#555555;
	letter-spacing:0.05em;
}

#footer li a:hover{
	color:#FFFFFF;}

#footer h2{
	font-size:0.8em;
	line-height:140%;
	font-weight:bold;
}

#footer h2 a{
	font-family:Helvetica , Verdana, Arial, sans-serif;
	color:#00C8FF;
}

#footer h2 a:hover{
	color:#FD3802;
}

#footer hr{
	height:1px;
	width:950px;
	margin:5px 0;
	text-align:left;
	border:none;
	border-top:1px solid #00C7FF;
}

#footer .award{
	font-family:Monaco, "Courier New", "Andale Mono",sans-serif;
	font-size:0.5625em;
	color:#555555;
	float:left;
	width:230px;
}

#footer .awardicon{
	float:right;
	width:720px;
	margin:0 0 0 10px;
}

#footer .awardbox{
	float:left;
	margin-right:10px	
}

/*---------------------------end footer -------------------------*/