Pro for CooI Sword

/* Profile by AlthIndor */

html, body {background: url('https://images2.imgbox.com/77/c8/8pZFWzbn_o.png');}

body {
 --primary-color: #00A040;
 --secondary-color: #FFFFFF;
 --button-color: #606060;
 --shadow-color: rgba(0,0,0,.5);
}

/* 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/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
}

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
}

/* Header */

body #gaia_header {
 background: var(--primary-color);
 height: 30px !important;
 box-shadow: 0 2px 10px var(--shadow-color);
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 font: 700 0px/30px 'Open Sans', sans-serif !important;
 padding: 0 2px !important;
 box-sizing: border-box;
}
#gaia_header #header_right {float: right;}
#gaia_header .spacer {display: none !important;}
#gaia_header li {margin: 0 5px;}

#gaia_header #header_left img {
 background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 no-repeat;
 background-size: auto 200%;
 width: 0;
 height: 19px;
 padding: 0 41px 0 0;
}
#header_left li:nth-of-type(2) {margin: 0 2px 0 5px;}

#gaia_header a {
 color: var(--secondary-color) !important;
 font-size: 12px !important;
 text-decoration: none;
 text-transform: uppercase;
}
@-moz-document url-prefix() {#gaia_header #header_left, #gaia_header #header_right {line-height: 28px !important;}}

/* Columns */

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

#columns {
 width: 520px;
 height: 310px;
 top: calc(50% - (310px / 2));
 left: calc(50% - (520px / 2));
 transform: translateZ(0);
 overflow: hidden;
}

#column_1 {
 width: 100%;
 height: 100%;
 border: 30px solid transparent;
 box-sizing: border-box;
 overflow: visible;
}

#column_2 {
 width: 1px;
 height: 1px;
 top: 0;
 left: 0;
 overflow: visible;
}

/* Panels */

.panel, .panel h2 {
 margin: 0;
 box-sizing: border-box;
}
.panel a {color: var(--primary-color);}
.panel img {max-width: 100% !important;}

.panel {
 color: #404040;
 font: 12px/1.5em 'Open Sans', sans-serif;
 text-align: justify;
 position: absolute;
}

.panel:not(#id_contact) {
 border: 10px solid transparent;
 border-radius: 3px;
}

#id_about, #id_comments, #id_wishlist {
 padding: 0 10px 0 0;
 overflow-x: hidden;
 overflow-y: scroll;
}

#id_about, #id_details {
 background: linear-gradient(to bottom, var(--primary-color) 10px, var(--secondary-color) 10px) border-box;
 height: 200px;
 top: 0;
 border-top-width: 40px !important;
 box-shadow: 0 2px 10px var(--shadow-color);
}

#id_comments, #id_wishlist {
 background: var(--secondary-color);
 width: 300px;
 height: 200px;
 top: -300px;
 left: 190px;
}
#id_comments:hover, #id_wishlist:hover {top: 30px;}

.panel h2 {
 height: 30px;
 color: var(--secondary-color);
 font: 700 13px/30px 'Open Sans', sans-serif;
 padding: 0 0 0 10px;
 position: fixed;
}

#id_about h2, #id_details h2 {
 background: var(--primary-color);
 margin: -40px 0 0 -10px;
 border-top-right-radius: 3px;
 border-top-left-radius: 3px;
}

#id_comments h2, #id_wishlist h2 {
 background: var(--button-color);
 width: 140px;
 bottom: 30px;
 border-radius: 3px;
 box-shadow: 0 2px 10px var(--shadow-color);
}
#id_comments:hover h2, #id_wishlist:hover h2 {background: var(--primary-color);}
#id_comments h2 {right: 190px;}
#id_wishlist h2 {right: 30px;}

/* Bridge */

#id_wishlist h2::after, #id_comments h2::after {
 content: '';
 display: block;
 width: 100%;
 height: 0;
 position: absolute;
 bottom: 30px;
 left: -0;
}
#id_wishlist:hover h2::after, #id_comments:hover h2::after {height: 30px;}

/* Details */

#id_details {
 padding: 0;
 left: 0;
 overflow: hidden;
}
#id_details, #id_details h2 {width: 140px;}
#id_details .forum_userstatus {display: none;}

/* About */

#id_about {right: 0;}
#id_about, #id_about h2 {width: 300px;}

/* Comments */

#id_comments #alerts_banner {display: none;}
#id_comments .dropBox {display: none;}
#id_comments .username {float: none;}
#id_comments h2 ~ p {display: none;}

#id_comments dt {
 height: auto;
 text-align: left;
 line-height: 1.1em;
 padding: 0 0 2px 0;
 margin: 0 0 2px 0;
 border-bottom: 1px solid rgba(0,0,0,.2);
}

#id_comments .date {
 float: none;
 font: 85%/1.6em monospace;
}
#id_comments .date a {font-weight: normal;}

#id_comments dd {
 margin-bottom: 15px;
 position: relative;
}
#id_comments dd:last-of-type {margin-bottom: 0;}

#id_comments .deletecomment {
 margin: 0;
 position: absolute;
 bottom: 0;
}
#id_comments .deletecomment ~ .postcontent {margin-bottom: 20px;}
#id_comments .deletecomment br {display: none;}
#id_comments .deletecomment a {text-decoration: none;}

#id_comments .deletecomment a:first-of-type::after {
 content: '•';
 margin: 0 2px 0 5px;
}

/* Wish List */

#id_wishlist {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-auto-rows: max-content;
 grid-auto-flow: row dense;
 grid-row-gap: 10px;
 grid-column-gap: 10px;
 justify-items: center;
}
#id_wishlist .clear {display: none;}

#id_wishlist .owner_checkmark {
 margin: 0;
 top: calc(50% + 4px);
 left: calc(50% - 16px);
}
.premium_sparkle {display: none;}

#id_wishlist .item {
 background: rgba(0,0,0,.1);
 width: 30px;
 height: 30px;
 text-align: center;
 padding: 5px;
 position: relative;
 border-radius: 3px;
 box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
}

#id_wishlist .item:hover {
 background: var(--primary-color);
 box-shadow: none;
}

/* Buttons */

#id_contact {
 background: none;
 width: 200px;
 height: 30px;
 padding: 0;
 bottom: 0;
 left: 0;
}
#id_contact h2 {display: none;}

#id_contact ul:not(.buttons) li, #id_comments h2 + div {
 background: url('https://i.imgur.com/vcNz49l.png') var(--button-color) center;
 background-size: 24px auto;
 width: 30px;
 height: 30px;
 border-radius: 3px;
 box-shadow: 0 2px 10px var(--shadow-color);
}
#id_contact ul:not(.buttons) li:hover, #id_comments h2 + div:hover {background-color: var(--primary-color);}

#id_contact ul:not(.buttons) li {
 float: left;
 font-size: 0;
 margin-right: 7px;
 position: relative;
}
#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: center 3px;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: center -21px; margin-right: 6px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: center -45px;}

#id_comments h2 + div {
 background-position: center -141px;
 position: fixed;
 left: 140px;
 bottom: 30px;
}

#id_contact ul:not(.buttons) li a, #id_comments h2 + div a {
 width: 100%;
 height: 100%;
 font-size: 0;
 position: absolute;
 top: 0;
 left: 0;
}