Pro for Kaze Rune

/* Graphics by `Echeveria, Code by AlthIndor */

html {
 --dark-color: #4F5953;
 --medm-color: #7D8C82;
 --lite-color: #C5D9CA;
}

html, body {background: url('https://images2.imgbox.com/d0/ba/j2CvaMz6_o.png');}
body a {text-decoration: none !important;}

body ::selection {
 background: var(--dark-color);
 color: #FFFFFF;
}

#columns, #column_2 h2 {background: url('https://images2.imgbox.com/3d/37/7J3RAhz9_o.png');}

/* Fonts */

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
}

@font-face {
 font-family: 'Exo 2';
 font-style: normal;
 font-weight: 500;
 src: local('Exo 2 Medium'), local('Exo2-Medium'), url(https://fonts.gstatic.com/s/exo2/v6/7cHrv4okm5zmbt7bCPs7wH8.woff2) format('woff2');
}

@font-face {
 font-family: 'Exo 2';
 font-style: normal;
 font-weight: 600;
 src: local('Exo 2 Semi Bold'), local('Exo2-SemiBold'), url(https://fonts.gstatic.com/s/exo2/v6/7cHrv4okm5zmbt73D_s7wH8.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
 background: #3E3331 !important;
 width: calc(100% - 20px) !important;
 height: 30px !important;
 top: 10px !important;
 left: 10px !important;
 box-shadow: 0 5px 0 rgba(13,13,13,.2);
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 font: 600 0px/28px 'Exo 2', sans-serif !important;
 padding: 0 1px !important;
}
#gaia_header #header_right {float: right;}

#gaia_header li {padding: 18px 5px 10px 5px;}
#gaia_header li:hover {background: rgba(255,255,255,.2);}
#gaia_header li.spacer {display: none !important;}

#header_left li img {
 background: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png');
 background-size: 100% auto !important;
 width: 0 !important;
 height: 18px !important;
 padding: 0 38px 0 0 !important;
}

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 12px !important;
 font-weight: 600 !important;
}

/* Columns */

#columns, #column_1, #column_2 {
 margin: 0;
 position: absolute;
}
#column_3 {display: none;}

#columns {
 width: 1050px;
 height: 610px;
 top: 65px;
 left: calc(50% - 525px);
 transform: translateZ(0);
}
@media screen and (min-height: 740px) {#columns {top: calc(50% - 305px);}}

#column_1 {
 width: 100%;
 height: 100%;
}

#column_2 {
 width: 350px;
 height: 234px;
 top: 212px;
 left: 474px;
}

#columns ::-webkit-scrollbar {
 background: transparent;
 width: 8px;
}

#columns ::-webkit-scrollbar-thumb {
 background: var(--dark-color);
 border-radius: 4px;
}

/* Panels */

.panel, .panel h2 {
 margin: 0;
 padding: 0;
}

.panel {
 position: absolute;
 box-sizing: border-box;
}
.panel img:not(.avatarImage) {max-width: 100%;}

.panel a {
 color: var(--dark-color);
 font-family: 'Exo 2', sans-serif;
 font-weight: 600;
}

#column_1 .panel {background: none;}
#column_1 h2 {display: none;}

#column_2:hover .panel {transition: top 0s linear 0s, z-index 0s linear 0s;}

#column_2 .panel {
 background: #F2F2F2;
 width: 100%;
 height: 100%;
 color: #404040;
 font: 11px/1.7 'Open Sans', sans-serif;
 text-align: justify;
 padding-right: 15px;
 overflow-x: hidden;
 overflow-y: scroll;
 scrollbar-width: thin;
 scrollbar-color: var(--dark-color) transparent;
 transition: top 0s linear 9999s, z-index 0s linear 9999s;
}

#column_2 .panel:hover {
 top: 0;
 z-index: 9;
 transition: top 0s linear 0s, z-index 0s linear 0s;
}

#id_about {
 top: 0;
 z-index: 3;
}

#id_comments, #id_footprints {
 top: -100%;
 z-index: 2;
}

/* Headers */

#column_2:hover h2 {transition: background-position 0s linear 0s}

#column_2 h2 {
 background-clip: content-box;
 width: 120px;
 height: 34px;
 color: #FFFFFF;
 font: 600 16px/33px 'Exo 2', sans-serif;
 text-align: center;
 text-transform: capitalize;
 position: fixed;
 top: 482px;
 border: 5px solid transparent;
 transition: background-position 0s linear 9999s;
}
#column_2 .panel:hover h2 {transition: background 0s linear 0s}

#column_2 h2, #column_2 .panel:hover ~ #id_about h2 {background-position: 0 bottom;}
#id_about h2, #column_2 .panel:hover h2 {background-position: -120px bottom;}

#id_about h2 {
 left: 316px;
 border-width: 0 5px 0 0;
}

#id_comments h2 {
 left: 441px;
 border-width: 0 5px;
}

#id_footprints h2 {
 left: 571px;
 border-width: 0 0 0 5px;
}

#column_2::before, #column_2 h2::before, #column_2 h2::after {
 content: '';
 display: block;
 position: fixed;
}

#column_2::before {
 width: 380px;
 height: 34px;
 top: 482px;
 left: calc(50% - 190px - 19px);
 z-index: 1;
}

#column_2 h2::before, #column_2 h2::after {
 width: calc(100% - 400px);
 height: 10px;
 left: 200px;
}
#column_2 h2::before {top: 472px;}
#column_2 h2::after {top: 516px;}

/* Details */

#id_details {
 width: 140px;
 top: 232px;
 left: 258px;
}

#id_details p:first-of-type {margin-bottom: 25px;}
#id_details p:nth-of-type(n+2) {display: none;}

.forum_userstatus, .forum_userstatus span {
 padding: 0 !important;
 box-sizing: border-box;
}

.forum_userstatus {
 width: 140px;
 height: 30px;
 position: static;
 border: 1px solid var(--lite-color);
 border-radius: 3px;
}

.forum_userstatus .statuslinks, .forum_userstatus .pushBox {height: 100%;}
.forum_userstatus span, .forum_userstatus .pushBox {width: 100%;}

.forum_userstatus .statuslinks {
 background: url('https://i.imgur.com/UzAXOFf.png') 110px -99px;
 position: relative;
}

.forum_userstatus span {
 background-position-x: 6px !important;
 font: 500 14px/14px 'Exo 2', sans-serif !important;
 text-indent: 26px;
 margin: 6px 0 0 0 !important;
 z-index: 1;
}

.forum_userstatus .pushBox {
 position: absolute;
 z-index: 2;
}

/* Drop-Down Menu */

#avatar_menu {
 width: 140px;
 border: 1px solid var(--lite-color);
 box-sizing: border-box;
}
#avatar_menu .menu_seperator {display: none !important;}

#avatar_menu a {
 height: auto !important;
 color: var(--dark-color);
 font: 11px/18px 'Exo 2', sans-serif;
 text-indent: 7px;
 padding: 0 0 2px 0;
 margin: 0;
}
#avatar_menu a:hover {background: var(--lite-color);}

/* Contact */

#id_contact {
 padding: 5px 0 0 5px;
 top: 305px;
 right: 138px;
}

#id_contact ul:not(.buttons) li {
 background: linear-gradient(to bottom, var(--lite-color), var(--medm-color));
 width: 40px;
 height: 40px;
 margin: 0 0 15px 0;
 border: 4px solid var(--dark-color);
 border-radius: 50%;
 box-shadow: 0 0 0 5px rgba(13,13,13,.2);
 overflow: hidden;
}

#id_contact ul:not(.buttons) li:hover {
 background: var(--lite-color);
 border-color: var(--medm-color);
}

#id_contact ul:not(.buttons) span, #id_contact ul:not(.buttons) a {
 display: block;
 background: url('https://i.imgur.com/TnEN5nQ.png') content-box;
 background-size: 36px auto;
 width: 100%;
 height: 100%;
 font-size: 0;
 opacity: .5;
}

#id_contact ul:not(.buttons) li:nth-of-type(1) span, #id_contact ul:not(.buttons) li:nth-of-type(1) a {background-position: center 2px;}
#id_contact ul:not(.buttons) li:nth-of-type(2) span, #id_contact ul:not(.buttons) li:nth-of-type(2) a {background-position: center -34px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) span, #id_contact ul:not(.buttons) li:nth-of-type(3) a {background-position: center -70px;}

/* Comments */

#id_comments #alerts_banner {display: none;}
#id_comments .deletecomment {margin: 0 0 0 10px;}
#id_comments dd {margin-bottom: 15px;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments dt {
 padding: 0;
 margin: 0 0 2px 0;
 border-bottom: 1px dotted var(--medm-color);
}

#id_comments .dropBox {
 background: #FFFFFF;
 width: 48px;
 height: 48px;
 margin: 4px 5px 0 0;
 border: 1px dotted var(--medm-color);
 box-sizing: border-box;
 overflow: hidden;
}

#id_comments .dropBox img {
 width: 120px;
 height: 150px;
 margin: -30px 0 0 -40px;
}

/* Comments Buttons */

#id_comments h2 + div, #id_comments h2 ~ p {
 display: block;
 float: left;
 background: #FFFFFF;
 width: calc(50% - 5px);
 height: 30px;
 text-align: center;
 position: relative;
 margin: 0 0 10px 0;
 border: 1px solid var(--lite-color);
 border-radius: 3px;
 box-sizing: border-box;
}
#id_comments h2 + div {margin-right: 10px;}

#id_comments h2 + div a, #id_comments h2 ~ p a {
 display: block;
 width: 100%;
 height: 100%;
 font: 600 12px/28px 'Exo 2', sans-serif;
 text-indent: -3px;
 position: absolute;
 top: 0;
 left: 0;
}

#id_comments h2 ~ p a {font-size: 0;}
#id_comments h2 ~ p a::after {content: '🙃 All Comments'; font-size: 12px;}
#id_comments h2 + div a::before {content: '😊 ';}