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

#wrapper {
	width:100%; margin:0px; padding:0px; text-align:left;
}

/*********************
HEADER OTHER PAGES
**********************/
#other_head {
	width:100%; height:287px; background:url(bg_otherhead.jpg) top left no-repeat; margin:0px; padding:0px;
}
#other_head .top_part {
	margin-top:0px; margin-left:580px; padding:0px; height:58px;	
}
#other_head .top_part li {
	float:left;	
}
#other_head .top_part li.home a {
	display:block; width:150px; height:21px; background:url(home.jpg) top left no-repeat; margin-top:30px;
}
#other_head .top_part li.home a:hover {
	background-position:0px -21px;
}
#other_head .top_part li.about a {
	display:block; width:150px; height:43px; background:url(about.jpg) top left no-repeat; float:left; margin-top:15px; 
	margin-left:30px !important;
	margin-left:15px;
}
#other_head .top_part li.about a:hover {
	background-position:0px -43px;
}
#other_head .logoarea {
	margin-top:30px; margin-left:51px; height:63px;
}

/**************
NAVIGATION
**************/
#other_head .navi {
	margin-top:42px; padding:0px;
	margin-left: 51px; height:15px;
}
#other_head .navi li {
	float:left; margin-right:0px; height:15px;
}
#other_head .navi li a {
	display:block; background:url(navi2off.jpg); background-repeat:no-repeat;
}
#other_head .navi li a:hover, #other_head .navi li a.active {
	background:url(navi2over.jpg); background-repeat:no-repeat;
}
#other_head .navi li.live a, #other_head .navi li.live a:hover {
	width:163px; background-position:0px 0px;
}
#other_head .navi li.college a, #other_head .navi li.college a:hover {
	width:197px; background-position:-163px 0px;
}
#other_head .navi li.arts a, #other_head .navi li.arts a:hover {
	width:130px; background-position:-360px 0px;
}
#other_head .navi li.photo a, #other_head .navi li.photo a:hover {
	width:234px; background-position:-490px 0px;
}
#other_head .navi li.game a, #other_head .navi li.game a:hover {
	width:128px; background-position:-724px 0px;
}

#page_title { font-size:40px; margin-top:30px; margin-left:50px; font-weight:normal; color:#ccc; }

/**********
CONTENT
**********/
#content {
	width:860px; margin-top:30px; margin-left:50px; margin-right:50px; padding:0px;
}
#content h2 {
	width:80%; font-size:1.6em; font-weight:normal; color:#252525; margin-bottom:30px; line-height:1.5em;
}

/************************
WEB SITE LIST
************************/
#webitems {
	width:100%; padding:0px; margin:0px; float:left;
}
#webitems li { 
	margin-bottom:20px; width:100%;
}
#webitems li .screenshot {
	width:420px; height:250px; float:left;	background-color:#dcdcdf; margin-right:20px;
}
#webitems li .screenshot img {
	padding:15px;
}
#webitems li .description {
	width:420px; float:left; background-color:#dcdcdf;
}
#webitems li .description h3  {
	font-size:24px; padding:0px 15px; margin-top:15px; font-weight:normal;
}
#webitems li .description h4 {
	font-size:16px; padding:0px 15px; margin-top:10px;	font-weight:normal; 
}
#webitems li .description .desc_box {
	padding:0px 15px; margin-top:10px; min-height:84px; overflow:hidden;
}
#webitems li .description .visit {
	margin-top:10px; background-color:#cbcbcb; height:35px; width:100%;
}
#webitems li .description .visit a {
	display:block; padding-top:8px; float:right; padding-right:20px; font-size:17px; font-weight:normal;
}

/******************************
GALLERY ITEMS (ART WORKS)
*******************************/
.artworks_gallery {
	width:420px; padding:0px; margin:0px;
}
.artworks_gallery_left {
	float:left;
}
.artworks_gallery_right {
	float:right;
}
.artworks_gallery li {
	width:100%px; padding:0px; margin-bottom:20px; 
}
.artworks_gallery li .screenshot {
	width:100%; height:250px; background-color:#cbcbcf;
}
.artworks_gallery li .screenshot img {
	padding:15px; cursor:pointer;
}
.artworks_gallery li .description {
	width:418px; border:1px solid #cbcbcf; 
}
.artworks_gallery li h3 {
	padding:0px 15px; margin-top:15px; font-size:24px;
}
.artworks_gallery li h4 {
	padding:0px 15px; margin-top:10px; font-weight:normal; 
}
.artworks_gallery li .description p {
	margin-top:15px; padding:0px 15px; padding-bottom:15px;
}

/*******************************
GALLERY ITEMS (PHOTOGRAPH)
********************************/
#photo_gallery {
	width:100%; padding:0px; margin:0px; float:left;	
}
#photo_gallery li {
	position:relative; width:284px; margin-right:4px; float:left; background-color:#000; margin-bottom:4px; overflow:hidden;
}
#photo_gallery li.nomarginright { margin-right:0px; }
#photo_gallery li .screenshot {
	position:relative; /*z-index:20;*/
}
#photo_gallery .screenshot img {
	padding:10px;
}
#photo_gallery .description {
	width:282px; border:1px solid #000; background-color:#000;
}
#photo_gallery .description p {
	padding:10px; font-size:0.9em; color:#FFF;
}

/*************
FLASH GAME
*************/
#game_box {
	position:fixed !important;
	position:absolute;
	top:0px !important;
	top:auto;
	left:0px; display:none;
	bottom:auto !important;
	bottom:0px;
}
#black_game_box {
	position:absolute; background-color:#000;	 top:0px; left:0px;
}
#inner_game_box {
	position:absolute; background-color:#141414;
}

#game_box .loadclosebtn {
	position:absolute; cursor:pointer; top:5px; left:5px;
}

/****************
CONTACT FORM
*****************/
#contact {
	width:600px; margin:20px auto; padding:20px 0px 0px 0px; 
	border:1px solid #ccc;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}
#contact li {
	margin:10px auto 0px auto; width:90%;
}
#contact label {
	display:block; font-size:1.1em; color:#999; padding-bottom:3px;
}
#contact input {
	font-size:1.1em; width:100%;
	padding:10px 0px; 
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #999;
}
#contact textarea {
	font-size:1.1em; width:100%; height:150px; font-family:'CalibriRegular', Helvetica, Arial, sans-serif;
	padding:10px 0px; 
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #999;
}
#contact input:focus, #contact textarea:focus {
	border:1px double #36F; background-color:#ECFCFF;
}
#contact li.captcha input {
	width:300px;	
}
#contact li.submit {
	text-align:center;
}
#contact li.submit input {
	display:block; width:150px; margin:30px auto; background-color:#999; cursor:pointer; outline:none; 
}
#contact h5.alert {
	color:red; padding:5px; font-weight:normal; font-size:0.85em;
}
.redback {
	border-color:#F30; background-color:#FFD4D7;
}
#contact li.sendresult {
	text-align:center; font-size:1em; color:red;	
}
#content h2.thankyou {
	font-size:2em; color:#6C3;
}

/***************
FOR NO SCRIPT
***************/
#noscript {
	display:block; width:500px; border:1px solid #999; margin-bottom:20px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}
#noscript p {
	color:red; font-size:1.2em; padding:10px;
}
.single {
	text-align:center; 
}
.single img {
	border:1px solid #666;
}
.single p {
	margin:10px;	
}

/*************	*
CHAT ROOM
**************/
#chatrooms {
	width:100%; float:left;
}
#num_online {
	width:280px; margin-bottom:20px; background-color:#dcdcde;
}
#num_online p {
	position:relative; bottom:3px; padding:5px 10px; font-size:1.3em; 
}
#num_online span {
	position:relative; top:2px; font-size:2em; padding:0px 10px; color:#ab1c1c;
}
#my_room_area {
	float:left; width:600px; height:190px; background-color:#dcdcde; margin-right:20px;
}
#make_a_room_ul {
	padding:0px; width:570px; height:140px; margin-top:15px; margin-left:15px; background:url(bgwallpaper.jpg) top left repeat; float:left;
}
#make_a_room_ul li {
	margin-left:10px; clear:both; padding:10px 0px;
}
#make_a_room_ul h3 {
	font-weight:normal; padding:5px 0px;
}
#make_a_room_ul label { 
	position:relative; top:0px; display:block; width:100px; font-size:1.4em; float:left;
}
#make_a_room_ul input {
	float:left; width:450px; padding:0px; border-bottom:1px solid #999; font-size:1.1em; background:none;
}
#my_room_area .make_a_room_btn {
	clear:both; width:100%; height:35px; background-color:#cbcbcb;
}
#my_room_area .make_a_room_btn a {
	padding-top:8px; float:right;	 padding-right:20px !important; font-size:17px;
}
#make_a_room_ul h3.exist { display:none; }
#my_room_area .make_a_room_btn a.delete { display:none; }

#myroom_message {
	visibility:hidden; float:left; width:230px; height:190px; color:#ab1c1c; font-size:1em;	
}
#myroom_message span { 
	position:relative; top:4px; font-size:1.4em; padding:0px 5px; 
}

#chat_boxes {
	clear:both; float:left; margin-top:40px; width:100%; padding:0px; display:none;
}
#chatting_name_div {
	width:100%; height:80px;
}
#chatting_name_div span.quote {
	position:relative; top:5px; font-size:1.8em; color:#342828;
}
#chatting_name_div span.message { padding:0px 5px; font-size:1.4em; color:#342828; }
#chatting_name_div input {
	font-size:1.2em; border-bottom:1px solid #666; width:300px; background:none;
}
#chatting_name_div .alert {
	display:block; color:#F00; font-size:0.9em;
}
#chat_boxes ul { padding:0px; }
#chat_boxes li.rooms {
	float:left; width:210px; height:210px; background-color:#dcdcde; 
	margin-right:10px;
}
#chat_boxes .inner {
	width:180px; height:180px; margin:15px auto auto 15px; background:url(bgwallpaper.jpg) top left repeat;	
}
#chat_boxes .owner {
	height:25px; overflow:hidden; margin-left:5px; margin-top:5px; font-size:1.2em; color:#006;
}
#chat_boxes .theme {
	height:60px; overflow:hidden; margin-left:5px;	margin-top:5px;
}
#chat_boxes .action {
	height:77px; margin-left:5px; margin-top:5px;
}
#chat_boxes .action p {
	width:100px; float:left; margin-right:5px;	height:65px; font-size:14px; color:#ab1c1c; line-height:15px;
}
#chat_boxes .action a {
	display:block; width:65px; height:65px; background:url(btn_chat.png) top left no-repeat !important; background:url(btn_chat.gif) top left no-repeat; 
	cursor:pointer;
}
#chat_boxes .action a:hover {
	background-position:0px -65px !important;
}

#waiting_box {
	position:fixed !important; position:absolute;
	top:0px !important; top:auto;
	bottom:auto !important; bottom:0px;
	left:0px; z-index:100;
	display:none;
}
#waiting_box .waiting_black_box {
	background-color:#000; width:100%; height:100%;
}
#waiting_box .waiting_inner_box {
	position:absolute; top:0px; left:0px; width:100%; text-align:center; color:#fff; font-size:1.5em;
}
#waiting_box .waiting_inner_box button {
	text-align:center; width:200px; height:40px; border:1px solid #666; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding-top:3px; margin:5px 0px; font-size:16px;
}

/*************************
CHATTING DIALOG PAGE
*************************/
#chatting_box {
	position:relative; width:100%;
}
#message_box {
	width:700px; height:570px; background:url(bg_message.jpg) top left repeat; margin:0px auto;
}
#message_box .inner {
	position:relative; width:665px; height:400px; margin-top:20px; margin-left:20px; overflow:hidden; float:left;
}
#message_box .inner ul { 
	position:absolute; left:0px; top:0px; padding:0px; width:645px; float:left;
}
#message_box .inner .scrollbarframe {
	position:absolute; top:0px; left:645px; width:20px; height:400px; background-color:#333;
}
#message_box .inner .scrollbar {
	position:absolute; top:0px; left:0px; width:20px; background-color:#9CC; height:400px; cursor:pointer;
}
#message_box .inner li { padding:5px 0px; }
#message_box .inner .name { font-size:1.2em; color:#009; font-weight:bold; }

#typing_box {
	width:860px; height:85px; background:url(bg_typing.jpg) top left no-repeat;
	position:fixed !important; position:absolute;
	bottom:40px; top:auto;
}
#typing_box textarea {
	float:left; width:765px; height:65px; font-size:1.2em; font-family:'CalibriRegular', Helvetica, Arial, sans-serif; margin-top:10px; margin-right:20px;
	background:none;
	margin-left:10px !important; margin-left:5px;
}
#typing_box a {
	float:left; display:block; width:65px; height:65px; background:url(btn_chat_send.jpg) top left no-repeat; margin-top:10px;
}
#typing_box a:hover {
	background-position:0px -65px;
}