html{width: 100%;height: 100%;}
body {
    margin: 0px;
    border: 0px;
    height: 100%;
    font-size: 18px;
    font-family: 'Jua', 'Ubuntu Condensed', sans-serif;
    background: rgb(42,38,29); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(42,38,29,1) 0%, rgba(58,76,81,1) 44%, rgba(58,76,81,1) 44%, rgba(78,76,80,1) 67%, rgba(41,33,45,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(42,38,29,1) 0%,rgba(58,76,81,1) 44%,rgba(58,76,81,1) 44%,rgba(78,76,80,1) 67%,rgba(41,33,45,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(42,38,29,1) 0%,rgba(58,76,81,1) 44%,rgba(58,76,81,1) 44%,rgba(78,76,80,1) 67%,rgba(41,33,45,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a261d', endColorstr='#29212d',GradientType=1 );
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:32px;font-family:'Malgun Gothic', dotum, sans-serif}
nav{z-index:1000;height:50px;border:none;background-color:#00000030;}
div#navcontents{
width: calc(100% - 150px);
margin: 0 auto;
height: 100%;
}
div#title{
float: left;
margin-top: 5px;
color: white;
font-size: 20px;
font-family: 'Jua', Arial, Helvetica, sans-serif;
}
div#title a{text-decoration:none;color:#fff}
div#accountbox{
width: 360px;
height: 100%;
float: right;
}
div#main{
    width: 1000px;
    margin: 0 auto;
    margin-top: 30px;
    height: calc(100% - 360px);
    display: flex;
}
div#gamescene{
    width: 100%;
}
div#chatdiv{
height: 95%;
box-sizing: border-box;
flex: 3;
}
div#partylistdiv{
height: 95%;
box-sizing: border-box;
flex: 1.5;
}
div#roomlistdiv{
height: 95%;
box-sizing: border-box;
flex: 2;
}
div#playerlistdiv{
height: 95%;
box-sizing: border-box;
flex: 2;
}
textarea#chatarea{
width: calc(100% - 20px);
height: calc(100% - 30px - 32px);
margin: 0 auto;
resize: none;
}
input#chatsend{
width: 100%;
margin: 0 auto;
}
input#chatinput{
width: calc(100% - 20px);
margin: 0 auto;
}
div#roomlist{
width: calc(100% - 20px);
height: calc(100% - 160px);
background-color: rgb(95, 95, 95);
overflow: auto;
}
div#myprofile{
width: calc(100% - 20px);
height: 160px;
background-color: rgb(83, 83, 83);
}
div#playerlist{
width: calc(100% - 20px);
height: calc(100% - 160px);
background-color: rgb(95, 95, 95);
overflow: auto;
}
div#opinfo{
    width: calc(100% - 20px);
    display: flex;
}
div#opprofile{
    flex: 2;
    height: 160px;
    background-color: rgb(83, 83, 83);
}
div#oprecord{
    flex: 1.8;
    height: 160px;
    background-color: rgb(89, 89, 89);
    display: none;
    overflow: auto;
}
p#status{
width: calc(100% - 20px);
height: 32px;
margin: 0 auto;
resize: none;
color: white;
font-size: 20px;
font-family: 'Jua', Arial, Helvetica, sans-serif;
}
table#playerlistTable{
width: 100%;
border-collapse: collapse;
}
.playerlistTnickname{
width: 65%;
}
.playerlistTstat{
width: 35%;
text-align: center;
}
table#roomlistTable{
width: 100%;
border-collapse: collapse;
}
.hoverselect:hover{
background-color:rgb(63, 63, 63);
border-style: hidden;
user-select: none;
}
label#exitbutton{
color:rgb(160, 160, 160);
font-size: 16px;
font-weight: bold;
}
label#exitbutton:hover{
color:rgb(210, 210, 210);
font-size: 16px;
font-weight: bold;
}
div#partylist{
width: calc(100% - 20px);
height: 200px;
background-color: rgb(95, 95, 95);
overflow: auto;
}
input#newroominput{
width: 150px;
}
div#newroombutton{
width: 100px;
height: 100%;
color:rgb(170, 170, 170);
background-color: rgb(80, 80, 80);
text-align: center;
font-weight: bold;
cursor: pointer;
}
div#newroombutton:hover{
width: 100px;
height: 100%;
color:rgb(170, 170, 170);
background-color: rgb(120, 120, 120);
text-align: center;
font-weight: bold;
cursor: pointer;
}
.roomlistTroomname{
text-overflow: clip;
overflow: hidden;
max-width: 80px;
}
.tabletitle{
    color:rgb(220, 220, 220);
    background-color: rgb(77, 77, 77);
    border: 0px;
    height: 22px;
    line-height: 20px;
}
div#gamestartbtn{
width: calc(100% - 20px);
height: 60px;
background-color: rgb(75, 75, 75);
text-align: center;
line-height: 50px;
color:rgb(220, 220, 220);
font-weight: bold;
user-select: none;
}
div#gamestartbtn:hover{
width: calc(100% - 20px);
height: 60px;
background-color: rgb(85, 85, 85);
text-align: center;
color:rgb(240, 240, 240);
font-weight: bold;
user-select: none;
}
div#changeposbtn{
width: calc(100% - 20px);
height: 24px;
background-color: rgb(75, 75, 75);
text-align: center;
line-height: 20px;
color:rgb(220, 220, 220);
font-weight: bold;
user-select: none;
}
div#changeposbtn:hover{
width: calc(100% - 20px);
height: 24px;
background-color: rgb(85, 85, 85);
text-align: center;
color:rgb(240, 240, 240);
font-weight: bold;
user-select: none;
}

div#bot{
    position: absolute;
    left: 20vw;
}

div#bottitle{
    color: white;
    font-size: 24px;
    font-weight: 500;
    font-family: 'Jua', Arial, Helvetica, sans-serif;
    line-height: 50px;
    user-select: none;
    cursor: pointer;
}

div#botlist{
    position: relative;
    width: 200px;
    height: 180px;
    background-color:rgb(77, 77, 77);
}

.botelem{
    color: white;
    font-size: 20px;
    font-weight: 500;
    font-family: 'Jua', Arial, Helvetica, sans-serif;
    margin: 5px;
    background-color: rgb(95, 95, 95);
    cursor: pointer;
}