@font-face { font-family:"cfont"; src:url("muff.otf"); }
html { height: 100%; }
body { height:94vh; position:relative; background-color:#4A3728; color:#303030; font-family:"times.ttf"; font-size:16px; background-image: url("bg_3.gif"); background-size:cover; }
#msgList { width:100%; display:inline-block; margin:0; padding:0; }
#dmList { width:100%; display:inline-block; margin:0; padding:0; }
#onlineusers { width:100%; height:28px; font-size:16px; background-color:beige; border:0; }
#onlineusers option:checked:after { content: attr(title); background: #666; color: #fff; position: absolute; width: 100%; left: 0; border: none; }
#std { display:inline-block; }
#mini { display:none; }
#playcon,#mutecon,#volcon { width:32px;height:32px;text-align:center;color:#CDC4D6; vertical-align:middle; }
#playcon,#mutecon { font-size:18px; cursor:pointer; }
#playcon2,#mutecon2 { width:32px; height:32px; text-align:center; color:#CDC4D6; font-size:18px; cursor:pointer; }
#volume-slider { cursor:pointer; }
#regd { width:80%;position:relative;height:auto;background-color:#B2DD5D;min-height:100%;margin:0 auto;top:90px; }
.active_users { width:100%; padding-top:4px; background-color:beige; display:none; }
.pmdiv0 { position:relative; width:53%; height:100%; float:left; padding-bottom:2px;  }
.pmdiv1 { width:100%; padding:2px; background-color:#e5e513; }
.pmdiv2 { width:100%; padding:2px; height:90%; overflow:auto; margin:10px 0 10px 0; }
.dmdiv0 { position:relative; width:46%; height:100%; float:right; padding-bottom:2px; }
.dmdiv1 { width:100%; padding:2px; background-color:#e5e513; }
.dmdiv2 { width:100%; padding:2px; height:78%; overflow:auto; margin: 10px 0 3px 0; }
.dmdiv3 { width:100%; padding:0 2px 0 2px; overflow:auto; margin:0; }
.audiv1 { width:100%; padding:2px; background-color:#e5e513; }
.audiv3 { width:100%; padding:4px; text-align:center; }
.audiv2 { width:100%; padding:2px; height:93%; overflow:auto; margin: 10px 0 10px 0; }
.divhead { position:fixed; width:100%; top:0; left:0; z-index:13; }
.div01 { position:relative; width:70%; height:90%; max-height:90%; float:right; padding:0; border-left:6px solid #e5e513; top:38px; z-index:2; display: inline-block; }
.div02 { position:relative; width:25%; height:90%; max-height:90%; float:left; padding:0; margin-top:38px; z-index:6; display: inline-block; }
.menu { position:fixed; width:98%; padding:0; margin-top:38px; z-index:6; display: inline-block; }
.rw { border:1px solid #000000; margin-top:-1px; background-color:rgb(245,245,220); opacity:0.9; padding:12px; text-decoration:none; font-size:16px; color:black; display:block; word-wrap:break-word; white-space:normal; }
.rx { border:1px solid #000000; margin-top:-1px; background-color:rgb(245,245,220); opacity:0.9; padding:12px; text-decoration:none; font-size:16px; color:black; display:block; word-wrap:break-word; white-space:normal; }
#so1 { display: block; }
#so2 { display: none; }
#i1 { border: 1px solid #000000; margin-top: -1px; background-color: #F5F5DC; padding: 12px; text-decoration: none; color: black; display: block; }
#imsg { width:90%; height:42px; background-color: #2B2A33; color: #f8f8f8; font-size: 16px; border:solid 2px #8BC53F; margin: 0px 3px; overflow-y:scroll; resize: none; }
.stdbtn { width:90%; font-size:16px; background-color:#E0FFE0; border:solid 4px #000000; }
.stdbtn:hover { background-color:#BDEA46; }
.acell { background-color:#CEED68; text-align:center; line-height:32px; cursor:pointer; border-top: 3px solid #303030; border-bottom: 3px solid #303030; }
.acell:hover { background-color:#E5E513; }
.bcell { background-color:#B2DD5D; text-align:center; line-height:25px; cursor:pointer; }
.bcell:hover { background-color:#C7EA46; }
.tbounce { font-family: 'cfont'; font-size:15px; animation: bounce .4s ease infinite alternate; }
@keyframes bounce { 100% { transform:translateY(-5px); } }
.tips { font-size:12px; }
#btn { background-color:#8BC53F; border:none; font-size:16px; cursor:pointer; padding: 8px 16px; }
#btn:hover { background-color:#C7EA46; }
.tinput { height:28px; }
#sendmsg { width:90%; height:50px; font-size:16px; background-color:#E0FFE0; border:solid 2px #000000; margin: 0 2px; }
#sendmsg:hover { background-color:#C7EA46; }
#clear { width:90%; height:50px; font-size:16px; background-color:#E0FFE0; border:solid 2px #000000;  margin: 0 2px; }
#clear:hover { background-color:#C7EA46; }
#m0 { position:absolute; width:100%; height:40px; text-align:center; line-height:40px; display:none; z-index:8; }
@keyframes fO { 0% { opacity: 1; } 100% { opacity: 0; } }
#uList { width:100%; display: inline-block; margin: 0; padding:0; border-radius:20px; }
#uList li { cursor:pointer; border:1px solid #000000; margin-top: -1px; background-color:rgb(245,245,220); opacity:0.9; padding:12px; color:black; display:block; }
#uList li:hover:not(.header) { background-color: #C7EA46; font-weight: bold; }
#bezel { font-size:19px; text-align:left; }
.div0L { position:relative; float:left; width:268px; top:38px; }
.div0R { position:relative; margin-left:270px; top:38px; }
.div0R img { width:100%; }
.gspan { width:80%; display:block; margin:0 auto; text-align:justify;
  text-justify:inter-word; font-size:18px; font-family:'cfont'; }

.uid:hover { color: #EC4D37; }
.uid { cursor:pointer; color: #000000; }
.tuid { color: #C70039; } /* Temp Message */

@media screen and (max-width: 700px) {
html { height: 100%; }   
body { height:81vh; background-image: url("bg_31.gif"); }
     .div01 { width: 100%; float:none; height:74%; padding: 0 0 8px 0; border-left:0; top:28px; }
     .div02 { width:100%; float:none; max-height:64px; padding: 20px 0 0 0; margin-top:68px; }
.div0L { float:none; width:100%; top:38px; }
.div0L1 { width:99%; padding:5px; background-color:#303030; border-radius:10px; }
.div0R { width:100%; margin-left:0; margin-top:10px; }
.div0R img { width:100%; height:auto; }
.audiv1 { padding:2px 0; }
.audiv2 { display:none; }
.active_users { display:inline-block; }
.gspan { width:96%; }
.tbounce { font-size:19px; }
#regd { width:100%; }
#bezel { text-align:center; border-radius:5px; background-color:#303030; }
#so1 { display: none; }
#so2 { display: block; }
     #sendmsg { width:59px; }
     #clear { width:59px; }
     #std { display:none; }
     #mini { display:inline-block; }
}