body{
	margin: 0;
	padding: 0;
	background: #0F0D0C;
	
	height: 835px;
	
	font: 90%/1.6 Arial, Helvetica, Verdana Tahoma, sans-serif;
	color: #333;
}


#wrapper{
	padding: 5px 10px 40px 10px;
	overflow: hidden;	
	width: 98%;
	
	zoom: 1;
	position: relative;	
}
#loading-wrapper{
	text-align: center;
	height: 31px;
	
	clear: both;
	position: absolute;
	
	top: 10px;
	left: 48.5%;
}
#book{
	
	width:800px;
	height:600px;
	margin: 5px auto;
	padding: 0;
	clear: both;
	
	
	position: relative;
	zoom: 1;
}
#header{
	width:800px;
	height: 30px;
	margin: 10px auto 3px auto;
	padding: 0;
	
	clear: both;
	overflow: hidden;
	color: #999;
}
#footer{
	width:800px;
	height: 20px;
	margin: 10px auto;
	padding: 0;
	
	clear: both;
	overflow: auto;
	
	overflow-x: hidden;
	overflow-y: hidden;
}

#header a.inline-button{
	color: #FFF;
}
#notice_flash{
	color: green;
	float: left;
	margin: 0 5px;
}
#error_flash{
	color: #FF9797;
	float: left;
	margin: 0 5px;
}
#user-menu{
	float: left;
	margin: 0 5px;
}
#search-box{
	float: right;
	width: 280px;
	text-align: right;
}
#search-box form{
	display: inline;
}
.open{
	background: url(../images/gui/book-open.png) no-repeat top right;
}
.close{
	background: url(../images/gui/book-close.png) no-repeat top right;
}
#left-page{
	width : 398px;
	height: 583px;
	margin: 0;
	padding: 0;
	float: left;
	
	position: relative;
}
#book.close #left-page, #book.close #left-page a{
	color: #EEE;
}

#right-page{
	width : 398px;
	height: 583px;
	margin: 0;
	padding: 0;
	float: right;
	
	position: relative;
}

#left-page #addressbook-link{
	float: left;
	clear: both;
	
	width: 310px;
	height: 60px;
	
	position: absolute;
	top: 20px;
	left: 30px;
	
}
#right-page #addressbook-link{
	float: left;
	clear: both;
	
	width: 240px;
	height: 105px;
	
	position: absolute;
	top: 83px;
	left: 90px;
}
#left-page #addressbook-link:hover,
#right-page #addressbook-link:hover{
	background: none;
}

#menu{
	float: left;
	width: 100px;
	height: 440px;
	
	overflow: auto;
	overflow-x: hidden;
	
	position: absolute;
	top: 90px;
	left: 30px;
	
}
#member{
	float: right;
	width: 225px;
	height: 440px;
	
	overflow: auto;
	overflow-x: hidden;
	
	position: absolute;
	top: 90px;
	right: 40px;
	
	border-left: 1px dashed #999;
}

#members-action{
	width: 210px;
	height: 20px;
	
	position: absolute;
	top: 540px;
	right: 40px;
}
#members-action a.image-link{
	padding: 0px 0;
}
#members-action a.inline-button{
	padding: 2px 3px;
}

#profile{
	width: 320px;
	height: 525px;
	margin: 0;
	padding: 0;
	
	overflow: auto;
	overflow-x: hidden;
	
	position: absolute;
	top: 20px;
	left: 40px;
}

#slogan{
	font: 95%/1.4 Arial, Helvetica, Verdana Tahoma, sans-serif;
	width: 330px;
	margin: 10px 0;
	padding: 10px 0;
}

#login-box, #registration-box{
	width: 290px;
	margin: 10px 0;
	padding: 10px 20px;
	background: #666;
	border-right: 2px solid #090909;
	border-bottom: 3px solid #090909;
}
#registration-box{
	width: 340px;
	padding: 5px 10px;
}
#login-box form, #registration-box form{
	display: inline;
	margin: 0;
	padding: 0;
}
#login-box form p.info, #registration-box form p.info{
	color: #99ca3c;
	clear: both;
}

#login-box p, #registration-box p{
	padding: 0;
	margin: 5px 0;
}
#login-box label, #registration-box label{
	display: block;
	float: left;
	clear: left;
	width: 110px;
	font: 90%/1.4 Arial, Helvetica, Verdana Tahoma, sans-serif;
	padding: 4px 0;
	margin: 0px 3px;
}
#login-box label.empty-label, #registration-box label.empty-label{
	color: #666;
}
#login-box form input.text-field, #registration-box form input.text-field{
	width: 150px;
}


#menu .label{
	font: 90%/1.7 Arial, Helvetica, Verdana Tahoma, sans-serif;
	font-style: italic;
	color: #0076a3;
}

ul.menu-list{
	font: 90%/1.7 Arial, Helvetica, Verdana Tahoma, sans-serif;
}

ul.program-list, ul.group-list, ul.member-list, ul.menu-list{
	list-style: none;
	margin: 0 0 10px 0;
	padding: 0;
}

.program-list li, .group-list li, .member-list li, .menu-list li{
	margin: 0;
	padding: 0;
	
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}

.program-list li a, .group-list li a, .member-list li a, .menu-list li a{
	float: left;
	clear: both;
	
	padding: 0 10px;
}


ul.program-list, ul.group-list, ul.menu-list{
	width: 100px;
	overflow-x: hidden;
}
.program-list li, .group-list li, .menu-list li{
	width: 80px;
	
}
.program-list li a, .group-list li a, .menu-list li a{
	width: 60px;
	margin: 0 0 1px 0;
}
.program-list li a:hover, .group-list li a:hover, .menu-list li a:hover,
.program-list li a.selected, .group-list li a.selected, .menu-list li a.selected{
	background: #666;
	color: #FFF;
}

#search-result-link{
	cursor: default;
	display: none;
}
#search-result-link.selected{
	display: block;
}

ul.year-list{
	display: none;
}
ul.year-list.active{
	display: block;
	font: 90%/1.7 Arial, Helvetica, Verdana Tahoma, sans-serif;
	list-style: none;
	clear: both;
	
	width: 80px;
	margin: 6px 5px 5px 0;
	padding: 0;
}
.year-list li{
	width: 80px;
	margin: 0;
	padding: 0;
}
.year-list li a{
	width: 50px;
	padding-left: 20px;
	margin: 0 0 1px 0;
}
.year-list li a:hover,
.year-list li a.selected{
	background: #999;
	color: #FFF;
}


ul.member-list{
	font: 95%/1.7 Arial, Helvetica, Verdana Tahoma, sans-serif;
	list-style: none;
	clear: both;
	
	width: 215px;
	margin: 0 0 0 10px;
	padding: 0;
}
.member-list li{
	width: 215px;
	margin: 0;
	padding: 0;
}
.member-list li a{
	width: 205px;
	padding: 0 5px;
	margin: 0 0 1px 0;
}
.member-list li a:hover,
.member-list li a.selected{
	background: #0076a3;
	color: #FFF;
}




ul.profile-detail{
	list-style: none;
	padding: 0;
	margin: 0;
	
	width: 300px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
	
}
.profile-detail li{
	width: 300px;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
	
	padding: 3px 0;
	
	border-bottom: 1px solid #FFF;
	background: #d9ebf1;
}
.profile-detail li.group-top{
	background: #d9ebf1 url(../images/gui/profile-group-bg-top.png) no-repeat top left;
	padding: 5px 0 3px 0;
}
.profile-detail li.group-bottom{
	background: #d9ebf1 url(../images/gui/profile-group-bg-bottom.png) no-repeat bottom left;
	padding: 3px 0 5px 0;
	
	border: none;
}


.profile-detail form li{
	padding: 5px 0;
}
.profile-detail form li.group-top{
	padding: 10px 0 5px 0;
}
.profile-detail form li.group-bottom{
	padding: 5px 0 10px 0;
}
.profile-detail form li div.help{
	
	font: 82%/1.4 Arial, Helvetica, Verdana Tahoma, sans-serif;
}
.profile-detail li.float-right{
	
}

.profile-detail li.clear{
	height: 5px;
	clear: both;
	border: none;
	
	background: #FFF;
}

.profile-detail li.clear.head{
	
}

.profile-detail li.clear.between{
	
}

.profile-detail li.clear.foot{
	
}

.profile-detail li div{
	float: right;
	width: 200px;
	padding: 0;
}
.profile-detail li label{
	font: 85%/1.7 Arial, Helvetica, Verdana Tahoma, sans-serif;
	display: block;
	width: 92px;
	float: left;
	text-align: right;
	padding: 2px 0;
}
.profile-detail li label.long{
	width: 300px;
	text-align: left;
	padding: 0 10px;
}
.profile-detail li span.value{
	display: block;
	width: 200px;
	float: right;
	padding: 0;
}
.profile-detail li span.th{
}
.profile-detail li span.en{
}

.profile-detail li.avatar{
	float: left;
	width: 92px;
	height: 92px;
	padding: 0;
	margin: 0;
	
	background: #FFF;
}
.profile-detail li.name-th{
	width: 205px;
	padding: 1px 0;
	background: none;
}
.profile-detail li.name-en{
	width: 205px;
	padding: 1px 0;
	background: none;
}
.profile-detail li.nick-name{
	width: 205px;
	padding: 1px 0;
	background: none;
}

.profile-detail li.note{
	background: #FFF;
}

.profile-detail input.text-field{
	width: 185px;
	margin: 0 3px;
}
.profile-detail textarea{
	width: 185px;
	height: 80px;
	margin: 0 3px;
}






/*-------------- email ----------------------*/

#mail-mode{
	width: 550px;
	margin: 0 auto;
	
	color: #FFF;
	font-weight: bold;
}

#mail{
	width: 610px;
	height: 700px;
	margin: 0 auto;
	
	background: url(../images/gui/email-background.png) no-repeat top center;
	position: relative;
}

#mail #mail-to{
	position: absolute;
	top: 25px;
	left: 105px;
}
#mail #mail-to input{
	width: 150px;
}
#mail #mail-from{
	position: absolute;
	top: 51px;
	left: 105px;
}
#mail #mail-form{
	width: 520px;
	height: 580px;
	
	position: absolute;
	top: 100px;
	left: 25px;
	
}
#mail #mail-form label{
	font: 85%/1.7 Arial, Helvetica, Verdana Tahoma, sans-serif;
	font-weight: bold;
	padding: 5px 3px;
}
#mail #mail-form #mail-subject{
	margin: 0 0 5px 0;
}
#mail #mail-form #mail-subject input{
	width: 463px;
}
#mail #mail-form #mail-subject #invite-subject{
	background: #FFF;
	width: 463px;
	float: right;
}
#mail #mail-form #mail-body{
	margin: 0 0 5px 0;
}
#mail #mail-form #mail-body textarea{
	width: 519px;
	height: 440px;
}
#mail #mail-form #mail-body textarea.invite-body{
	height: 400px;
}
#mail #mail-form #mail-body #predefine-body{
	padding: 10px;
	background: #FFF;
	border: 1px solid #EEE;
}