/*
Durarara like chat Copyright 2010 Suin. get this chat?
Suin: http://suin.asia/
Durarara like chat: http://code.google.com/p/drrr-like-chat/
Revise: Crow
Revise URL: http://particularly.me/
*/
BACKGROUND: url(http://lovejiani.com/beta/css/logo.png) no-repeat center top; WIDTH: 850px; TOP: 10px; HEIGHT: 350px

* {
	margin: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

body {
background:#0a0a0a;
color:#fff;
font-size:16px;
font-family:'Microsoft Yahei';
}

input,textarea {
font-family:'Microsoft Yahei';
}

.clear {
clear:both;
}

.right {
float:left;
}

.transparent {
opacity:0.8;
}

div#body {
position:absolute;
height:312px;
width:100%;
top:100px;
margin-top:-70px;
}

div.header {
color:#fff;
}

div.header h2 {
text-align:center;
font-size:20px;
margin-bottom:20px;
}

.button {
color:#444;
display:inline-block;
font:normal 12px arial, sans-serif;
height:24px;
margin-left:5px;
margin-top:-5px;
text-decoration:none;
}

.button input {
background-color:#000;
border-radius:18px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border:3px solid #FFF;
outline:none;
width:160px;
font-weight:700;
font-size:20px;
color:#FFF;
overflow:hidden;
resize:none;
-webkit-transition:.4s;
-moz-transition:.4s;
-o-transition:.4s;
transition:.4s;
font-family:'Microsoft YaHei';
}

.button:active {
background-position:bottom right;
color:#000;
outline:none;
}

.button:active input {
background-color:#FFF;
cursor:pointer;
color:#575757;
}

.button:active input {
background-color:#FFF;
cursor:pointer;
color:#575757;
}

.buttonc {
color:#444;
display:inline-block;
font:normal 12px arial, sans-serif;
height:24px;
margin-left:5px;
margin-top:-5px;
text-decoration:none;
}

.buttonc input {
background-color:#000;
border-radius:18px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border:3px solid #FFF;
outline:none;
width:200px;
font-weight:700;
font-size:20px;
color:#FFF;
overflow:hidden;
resize:none;
-webkit-transition:.4s;
-moz-transition:.4s;
-o-transition:.4s;
transition:.4s;
font-family:'Microsoft YaHei';
margin-left:4px;
}

.buttonc:active {
background-position:bottom right;
color:#000;
outline:none;
}

.buttonc:active input {
background-color:#FFF;
cursor:pointer;
color:#575757;
}

#login .field .button input {
background-color:#000;
border-radius:18px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
border:3px solid #FFF;
outline:none;
width:200px;
font-weight:700;
font-size:20px;
color:#FFF;
overflow:hidden;
resize:none;
-webkit-transition:.4s;
-moz-transition:.4s;
-o-transition:.4s;
transition:.4s;
font-family:UbuntuMonoBold,'Microsoft YaHei';
padding:1px 0;
}

#login .field .button input:active {
background-position:bottom right;
background-color:#FFF;
cursor:pointer;
color:#575757;
outline:none;
}

div.message_box {
position:fixed;
width:100%;
top:0;
left:0;
background:#fff;
color:#0a0a0a;
z-index:99999;
border-bottom:1px solid #1D1D1D;
padding:5px 0 0;
}

div.message_box h2 {
font-size:12px;
margin-top:29px;
float:right;
right:12px;
list-style:none;
position:fixed;
z-index:99999;
}

div.message_box_inner {
position:relative;
width:510px;
left:50%;
margin-left:-255px;
}

ul.menu {
float:right;
right:0;
list-style:none;
color:#FFF;
font-size:12px;
margin-top:-17px;
}

ul.menu li {
display:block;
cursor:pointer;
}

ul.menu li input {
font-size:12px;
height:15px;
line-height:12px;
cursor:pointer;
color:#FFF;
border:1px #C80000 solid;
background-color:#C80000;
-webkit-transition:.3s;
-moz-transition:.3s;
-o-transition:.3s;
transition:.3s;
margin-right:1px;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
padding:1px;
}

ul.menu li input:hover {
border:1px #9D9D9D solid;
background-color:#9D9D9D;
}

ul.menu li input:active {
color:#5A5A5A;
border:1px #E7E7E7 solid;
background-color:#E7E7E7;
}

ul.menu li.setting,ul.menu li.sound,ul.menu li.member,ul.menu li.animation {
width:15px;
display:none;
}

ul.menu li.setting {
background:transparent url(setting.png) left top no-repeat;
}

ul.menu li.sound_on {
background:transparent url(sound_on.png) left top no-repeat;
}

ul.menu li.sound_off {
background:transparent url(sound_off.png) left top no-repeat;
}

ul.menu li.member_on {
background:transparent url(member_on.png) left top no-repeat;
}

ul.menu li.member_off {
background:transparent url(member_off.png) left top no-repeat;
}

ul.menu li.animation_on {
background:transparent url(animation_on.png) left top no-repeat;
}

ul.menu li.animation_off {
background:transparent url(animation_off.png) left top no-repeat;
}

#setting_pannel {
clear:both;
padding:20px 0;
}

#setting_pannel ul#user_list {
list-style:none;
}

#setting_pannel ul#user_list li {
min-height:20px;
width:80px;
padding-top:50px;
text-align:center;
display:block;
float:left;
line-height:20px;
border:2px solid transparent;
margin:10px;
}

#message {
text-align:center;
margin-top:19px;
margin-bottom:1px;
}

#message textarea {
background-color:#FFF;
border-radius:18px;
-webkit-border-radius:18px;
-moz-border-radius:18px;
box-shadow:0 0 5px #5E5E5E;
-webkit-box-shadow:0 0 5px #5E5E5E;
-moz-box-shadow:0 0 5px #5E5E5E;
border:3px solid #5E5E5E;
outline:none;
width:490px;
font-family:'Microsoft Yahei';
font-weight:700;
font-size:18px;
color:#2D2D2D;
overflow:hidden;
resize:none;
-webkit-transition:.4s;
-moz-transition:.4s;
-o-transition:.4s;
transition:.4s;
padding:6px 5px 14px 7px;
}

#message textarea:hover {
box-shadow:0 0 6px #575757;
-webkit-box-shadow:0 0 6px #575757;
-moz-box-shadow:0 0 6px #575757;
border:3px solid #575757;
}

#message div.submit input {
background-color:#FFF;
border-radius:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border:3px solid #5E5E5E;
outline:none;
width:210px;
font-family:UbuntuMonoBold,'Microsoft Yahei';
font-weight:700;
font-size:20px;
color:#5E5E5E;
background:0;
-webkit-transition:.35s;
-moz-transition:.35s;
-o-transition:.35s;
transition:.35s;
margin:5px 0 7px;
padding:2px 0 2px;
background:-webkit-linear-gradient(white 50%,#EAEAEA 50.1%,#DEDEDE);
}

#message div.submit input:hover {
cursor:pointer;
box-shadow:0 0 3px #5E5E5E;
-webkit-box-shadow:0 0 3px #5E5E5E;
-moz-box-shadow:0 0 3px #5E5E5E;
color:#575757;
}

#message div.submit input:active {
cursor:pointer;
box-shadow:0 0 6px #5E5E5E;
-webkit-box-shadow:0 0 6px #5E5E5E;
-moz-box-shadow:0 0 6px #5E5E5E;
color:#575757;
}

#talks {
margin-top:167px;
padding-bottom:1px;
position:absolute;
width:623px;
left:50%;
margin-left:-369px;
}

#talks div.system {
letter-spacing:3px;
clear:left;
margin:10px 0 10px 26px;
}

#talks dl.talk {
clear:both;
min-height:80px;
}

#talks dl.talk dt {
min-height:20px;
width:90px;
padding-top:75px;
padding-bottom:7px;
text-align:center;
display:block;
line-height:20px;
float:left;
font-size:14px;
}

#talks dl.talk dd {
display:inline-block;
max-width:523px;
padding-left:10px;
}

#talks dl.talk dd div.bubble p.body {
float:left;
clear:left;
border-radius:13px;
border:4px #fff solid;
-moz-border-radius:13px;
-webkit-border-radius:13px;
background:#000;
font:1em 'Microsoft Yahei';
letter-spacing:3px;
color:#FFF;
-position:relative;
padding:16px 20px;
}

#talks dl.setton dt {
background:transparent url(icon_setton.png) no-repeat center top;
}

#talks dl.setton dd div.bubble p.body {
background:transparent url(gray.png) repeat-x left center;
}

#talks dl.tanaka dt {
background:transparent url(icon_tanaka.png) no-repeat center top;
}

#talks dl.tanaka dd div.bubble p.body {
background:transparent url(blue.png) repeat-x left center;
}

#talks dl.kanra dt {
background:transparent url(icon_kanra.png) no-repeat center top;
}

#talks dl.zaika dt {
background:transparent url(icon_zaika.png) no-repeat center top;
}

#talks dl.zawa dd div.bubble p.body {
background:transparent url(green.png) repeat-x left center;
}

#talks dl.zawa dt {
background:transparent url(icon_zawa.png) no-repeat center top;
}

#talks dl.zaika dd div.bubble p.body {
background:transparent url(red.png) repeat-x left center;
}

#talks dl.gg dt {
background:transparent url(icon_gg.png) no-repeat center top;
}

#talks dl.gg dd div.bubble p.body {
background:transparent url(pink.png) repeat-x left center;
}

#talks dl.admin dt {
background:transparent url(icon_admin.png) no-repeat center top;
}

#login .language,#logingo .language {
text-align:right;
}

#login .field,#logingo .field {
text-align:center;
width:280px;
}

#login .field .textbox,#logingo .field .textbox {
width:169px;
height:23px;
font-size:20px;
letter-spacing:1px;
text-align:center;
border:1px solid #fff;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
font-family:UbuntuMonoBold,'Microsoft YaHei';
margin:40px 0 25px 3px;
padding:1px;
}

.t_name, .t_pass {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
padding: 0;
margin: 0;
}

#login .footer,#logingo .footer {
text-align:center;
clear:both;
color:#8a8a8a;
font-size:13px;
margin:40px 0 20px;
}

#login .copyright,#logingo .copyright {
text-align:center;
clear:both;
color:#8a8a8a;
font-size:10px;
margin:40px 0 20px;
}

.notice {
text-align:left;
font-size:11px;

}

ul.icons {
list-style-type:none;
float:center;
width:312px;
margin-top:26px;
}

ul.icons li {
display:block;
float:left;
width:64px;
text-align:center;
margin:2px 7px;
}

#create_room {
float:right;
margin-bottom:10px;
}

ul#profile {
float:left;
width:612px;
list-style-type:none;
background:#0a0a0a;
border-radius:13px;
border:4px gray solid;
-moz-border-radius:13px;
-webkit-border-radius:13px;
margin:20px 0;
}

ul#profile li {
display:block;
float:left;
vertical-align:middle;
height:60px;
margin:15px 0;
}

ul#profile li.icon {
width:60px;
margin-left:15px;
}

ul#profile li.name {
min-width:50px;
color:#fff;
font-size:16px;
text-align:left;
line-height:60px;
padding:5px 0 0 25px;
}

ul#profile li.logout {
float:right;
line-height:60px;
margin:20px 10px;
}

ul.rooms {
list-style-type:none;
clear:both;
margin-bottom:10px;
}

ul.rooms li {
list-style-type:none;
display:block;
text-align:center;
float:left;
padding:8px 0;
}

ul.rooms li.name {
width:180px;
text-align:left;
}

ul.rooms li.creater {
width:170px;
}

ul.rooms li.member {
width:65px;
margin-top:1px;
}

ul.rooms li.login {
text-align:left;
}

ul#members {
list-style-type:none;
text-align:left;
clear:both;
}

ul#members li {
display:inline;
}

.error {
text-align:center;
margin-bottom:10px;
}

#pro {
position:absolute;
width:620px;
left:50%;
margin-left:-310px;
}

#cra {
position:absolute;
width:260px;
left:50%;
margin-left:-130px;
height:130px;
top:50%;
margin-top:-65px;
}

.input {
color:#fff;
background-color:#0a0a0a;
border:0;
font-size:12px;
padding-right:1px;
padding-bottom:1px;
-webkit-transition:.25s;
-moz-transition:.25s;
-o-transition:.25s;
transition:.25s;
}

.input:active {
color:gray;
}

.x {
width:248px;
font-size:16px;
letter-spacing:1px;
border:1px solid #fff;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:3px;
}

.x0 {
font-size:16px;
letter-spacing:1px;
border:0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
margin-left:-55px;
padding:3px;
}

#logingo {
position:absolute;
height:160px;
top:50%;
margin-top:-115px;
width:280px;
left:50%;
margin-left:-140px;
}

ul.icons li img {
-webkit-filter:grayscale(.85);
-webkit-transition:99999s;
-moz-transition:99999s;
-o-transition:99999s;
transition:99999s;
}

ul.icons li img:active {
-webkit-filter:grayscale(0);
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
}

.admind {
position:fixed;
bottom:0px;
left:0px;
font-size:6px;
text-decoration:none;
color:#0A0A0A;
}

input,button,select,textarea {
outline:none;
font-family:UbuntuMonoBold,'Microsoft YaHei';
}

@font-face {
font-family:UbuntuMonoBold;
src:url(../fonts/UbuntuMono-B-webfont.eot?#iefix) format(embedded-opentype), url(../fonts/UbuntuMono-B-webfont.woff) format(woff), url(../fonts/UbuntuMono-B-webfont.ttf) format(truetype), url(../fonts/UbuntuMono-B-webfont.svg#UbuntuMonoBold) format(svg);
font-weight:400;
font-style:normal;
}

.hide,label input {
display:none;
}

#setting_pannel ul#user_list li.select,#talks dl.talk dt.select {
border:2px solid #f60;
}

#talks dl.kanra dd div.bubble p.body,#talks dl.admin dd div.bubble p.body {
background:transparent url(orange.png) repeat-x left center;
}

@media (max-width:720px) {
ul#profile {
margin:10px 0;
}

#pro {
padding-bottom:7px;
}

ul.rooms li.member {
margin-top:0px;
}

div.header h2 {
margin-bottom:15px;
}

#message textarea {
width:420px;
}

#talks {
width:560px;
margin-left:-324px;
}

#talks dl.talk dd {
max-width:453px;
padding-left:0px;
}

div.message_box_inner {
width: 440px;
margin-left:-220px;
}
}

@media (max-width:570px) {
ul#profile {
width:306px;
margin:5px 0;
}

#pro {
width:310px;
margin-left:-157px;
padding-bottom:4px;
}

ul.rooms li.name {
width:120px;
text-align:left;
}

ul.rooms li.creater {
width:75px;
}

ul.rooms li.member {
width:50px;
margin-top:0px;
}

body {
font-size:12px;
}

.button input {
width:60px;
font-size:12px;
border:2px solid white;
}

#create_room {
margin-bottom:3px;
}

ul.rooms li {
padding:3px 0;
}

div.header h2 {
margin-bottom:10px;
}

#message textarea {
width:250px;
}

#talks {
width:320px;
margin-left:-160px;
}

#talks dl.talk dd {
max-width:220px;
padding-left:0px;
}

div.message_box_inner {
width: 270px;
margin-left:-135px;
}

#talks {
margin-top:157px;
}

#message {
margin-top:10px;
}
}

.t_toggle a {
color: #555;
text-decoration: none;
}



/* webkit scroller */
::-webkit-scrollbar-thumb:vertical{height:10px;background-color:#ccc;}
::-webkit-scrollbar{width:10px;height:5px;background:#FFF;margin-right:15px;}
