.registred{
background-color: green;
border-radius: 6px;
border: 1px solid goldenrod;
color: gold;
cursor: default;
}
.pre-registred{
background-color: orange;
border-radius: 6px;
border: 1px solid goldenrod;
color: gold;
cursor: default;
}
#popup_char{
    position: absolute;
    width: 1px;
    height: 1px;
    margin-top: -150px;
     border-radius: 6px;
    border: 2px solid #C36F46;
    padding: 5px;
    background-color: #FDE0AA;
    z-index: 20;
    overflow: hidden;
    transition: all ease-in-out 0.3s;
    display: none;
}
.skclass{
background-image:url('../img/class/classmark.png');
width:70px;
height:70px;
}

.gender1,.gender2{ width:16px;height:16px;background-repeat:no-repeat;background-image:url('../img/male.png');background-position: center;padding-right: 10px;}
.gender2{background-image:url('../img/female.png');}
.skclass.class1{background-position:0px 0px;}
.skclass.class2{background-position:-70px 0px;}
.skclass.class3{background-position:-140px 0px;}
.skclass.class4{background-position:-210px 0px;}
.skclass.class5{background-position:-280px 0px;}
.skclass.class6{background-position:-350px 0px;}
.skclass.class7{background-position:0px -70px;}
.skclass.class8{background-position:-70px -70px;}
.skclass.class9{background-position:-140px -70px;}
.skclass.class10{background-position:-210px -70px;}
.skclass.class11{background-position:-280px -70px;}
.skclass.class12{background-position:-350px -70px;}
.skclass.class13{background-position:0px -140px;}
.skclass.class14{background-position:-70px -140px;}
.skclass.class15{background-position:-140px -140px;}
.skclass.class16{background-position:-210px -140px;}
.skclass.class17{background-position:-280px -140px;}
.skclass.class18{background-position:-350px -140px;}
.skclass.class19{background-position:0px -210px;}
.skclass.class20{background-position:-70px -210px;}
.skclass.class21{background-position:-140px -210px;}
.skclass.class22{background-position:-210px -210px;}
.skclass.class23{background-position:-280px -210px;}
.skclass.class24{background-position:-350px -210px;}
.skclass.class25{background-position:0px -280px;}
.skclass.class26{background-position:-70px -280px;}
.skclass.class27{background-position:-140px -280px;}
.skclass.class28{background-position:-210px -280px;}
.skclass.class51{background-position:-280px -280px;}
.skclass.class52{background-position:-350px -280px;}
.skclass.class53{background-position:0px -350px;}
.skclass.class54{background-position:-70px -350px;}
.skclass.class55{background-position:-140px -350px;}
.skclass.class56{background-position:-210px -350px;}
.skclass.class57{background-position:-280px -350px;}
.skclass.class58{background-position:-350px -350px;}

.iconclass{
background-image:url('../img/class/iconclass.png');
width:26px;
height:26px;
background-repeat:no-repeat;
}
.rank_class {
    margin: 0 auto;
}
.iconclass.class1{background-position:0px 0px;}
.iconclass.class2{background-position:-26px 0px;}
.iconclass.class3{background-position:-52px 0px;}
.iconclass.class4{background-position:-78px 0px;}
.iconclass.class5{background-position:-104px 0px;}
.iconclass.class6{background-position:-130px 0px;}
.iconclass.class7{background-position:0px -26px;}
.iconclass.class8{background-position:-26px -26px;}
.iconclass.class9{background-position:-52px -26px;}
.iconclass.class10{background-position:-78px -26px;}
.iconclass.class11{background-position:-104px -26px;}
.iconclass.class12{background-position:-130px -26px;}
.iconclass.class13{background-position:0px -52px;}
.iconclass.class14{background-position:-26px -52px;}
.iconclass.class15{background-position:-52px -52px;}
.iconclass.class16{background-position:-78px -52px;}
.iconclass.class17{background-position:-104px -52px;}
.iconclass.class18{background-position:-130px -52px;}
.iconclass.class19{background-position:0px -78px;}
.iconclass.class20{background-position:-26px -78px;}
.iconclass.class21{background-position:-52px -78px;}
.iconclass.class22{background-position:-78px -78px;}
.iconclass.class23{background-position:-104px -78px;}
.iconclass.class24{background-position:-130px -78px;}
.iconclass.class25{background-position:0px -104px;}
.iconclass.class26{background-position:-26px -104px;}
.iconclass.class27{background-position:-52px -104px;}
.iconclass.class28{background-position:-78px -104px;}
.iconclass.class51{background-position:-104px -104px;}
.iconclass.class52{background-position:-130px -104px;}
.iconclass.class53{background-position:0px -130px;}
.iconclass.class54{background-position:-26px -130px;}
.iconclass.class55{background-position:-52px -130px;}
.iconclass.class56{background-position:-78px -130px;}
.iconclass.class57{background-position:-104px -130px;}
.iconclass.class58{background-position:-130px -130px;}
/*box*/
.skchar{
height: 240px;
width: 257px;
padding:3px;
background-repeat:no-repeat;
}
.skchar.class13,
.skchar.class21{
background-image:url('../img/class/dragon.png')
}
.skchar.class14,
.skchar.class22{
background-image:url('../img/class/destru.png')
}
.skchar.class15,
.skchar.class23{
background-image:url('../img/class/oracle.png')
}
.skchar.class16,
.skchar.class24{
background-image:url('../img/class/arca.png')
}
.skchar.class17,
.skchar.class25{
background-image:url('../img/class/senti.png')
}
.skchar.class18,
.skchar.class26{
background-image:url('../img/class/commando.png')
}
.skchar.class19,
.skchar.class27{
background-image:url('../img/class/volti.png')
}
.skchar.class20,
.skchar.class28{
background-image:url('../img/class/ombre.png')
}
.skchar.class55,
.skchar.class57{
background-image:url('../img/class/elem.png')
}
.skchar.class56,
.skchar.class58{
background-image:url('../img/class/furiedrake.png')
}
tr.class_name {
  position: absolute;
 /* margin-top: -70px;*/
  padding: 5px;
}

.guer{
text-align: center;
font-family: ar_essence;
font-size: 24px;
color:#6E320A;
}
.mag{
text-align: center;
font-family: ar_essence;
font-size: 24px;
color:cornflowerblue;
}
.arc{
text-align: center;
font-family: ar_essence;
font-size: 24px;
color:rgb(82, 198, 119);
}
.vol{
text-align: center;
font-family: ar_essence;
font-size: 24px;
color:rgb(193, 131, 215);
}
.elem{
text-align: center;
font-family: ar_essence;
font-size: 24px;
color:#40856C;
}
.fur{
text-align: center;
font-family: ar_essence;
font-size: 24px;
color:rgb(216, 115, 135);
}
.char_info{
width: 100%;
}
tr.char_info{
padding: 5px 10px;
border-bottom: 1px solid #AD8D60;
}
.char_class{
width:26px;
height:26px;
}
.char_name{
padding-left:10px; 
width: 180px;
}