Pro for Skelis

/* Code by AlthIndor, Graphics by Cassiel Socks */

#multimedia h2::after {content: 'Song Artist - Song Title';}
#content, #profile #bar li, #multimedia h2::before {background: url('https://images2.imgbox.com/98/51/t579pins_o.png');}

body {
 background: url('https://i.imgur.com/969iT70.jpg') fixed top center / cover;
 overflow: hidden auto;
}
body a {text-decoration: none !important;}

@font-face {
 font-family: 'Open Sans';
 font-weight: 600;
 src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhv.woff) format('woff');
}

@font-face {
 font-family: 'Cookie';
 font-weight: 400;
 src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v10/syky-y18lb0tSbf9kgqS.woff2) format('woff2');
}

/* Header */

#gaia_header, #header_left, #header_right {background: none !important;}
#gaia_header {font: 0/30px 'Cookie', cursive !important;}

#header_left, #header_right {
 width: 50% !important;
 line-height: 32px !important;
 padding: 0 3px !important;
 box-sizing: border-box;
}
#gaia_header .spacer {display: none;}
#gaia_header li {margin: 0 5px;}

#header_left img {
 background: url('https://graphics.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 0 no-repeat;
 background-size: auto 200%;
 width: 0;
 height: 18px;
 padding: 0 39px 0 0;
 margin: -4px 0 0 0;
}

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 19px !important;
}
#gaia_header a:hover {text-decoration: underline dotted !important;}

#header_right .favorites_add {
 margin: 0 -1px 0 0;
 top: 8px;
 right: 0;
 filter: grayscale(100%) brightness(300%);
}

/* Remove Sections */

#header, #details, #journal, #friends, #signature {display: none;}
#profile .items, #about .links {display: none;}
.section:not(#multimedia) h2 {display: none;}

/* Main Sections */

#site, #content, .section {padding: 0;}
#site, #content, #content #sidebar, #content #main {margin: 0;}
#content, #content #main {border: none;}

#site, #content {
 width: 1200px;
 height: 760px;
}

#site {
 position: absolute;
 top: calc(50% - 380px);
 left: calc(50% - 600px);
 transform: translateZ(0);
}

@media screen and (max-height: 860px) {
  #site {
    top: 50px;
    border-bottom: 10px solid transparent;
  }
}

#content #sidebar, #content #main {
 width: 1px;
 height: 1px;
 min-height: initial;
 position: absolute;
 top: 0;
 left: 0;
}

.section {
 color: #404040;
 font: 600 11px/1.5em 'Open Sans', sans-serif;
 text-align: justify !important;
 text-shadow: 0 0 1px #FFC0C8;
 position: absolute;
 overflow: hidden;
}

.section a, .section a:visited {
 color: #801828 !important;
 font-weight: bold;
}
.section a:hover, .section a:active {color: #403440 !important;}

/* Main Panels */

#about, #comments, #wishlist, #profile .avatar {
 background: rgba(255,255,255,.25);
 margin: 0;
 border: 10px solid transparent;
 box-sizing: border-box;
}

#about, #comments {
 width: 386px;
 height: 171px;
 padding: 0 10px 0 0;
 left: 692px;
 overflow-y: scroll;
}
#about {top: 127px;}
#comments {top: 322px;}

#wishlist {
 width: 226px;
 height: 160px;
 padding: 0;
 top: 517px;
 left: 852px;
}

#profile .avatar {
 position: fixed;
 right: 372px;
 bottom: 83px;
 border-width: 5px 8px;
}

/* Comments */

#comments #alerts_banner {display: none;}
#comments .links, #comments ul, #comments li {margin: 0 !important;}
#comments h2 ~ p {display: none;}
#comments dl {padding: 0;}
#comments dt {display: none;}

#comments dd {
 background: none;
 margin: 10px 0 0 0 !important;
 border: none;
}
#comments dd:nth-of-type(n+2) {margin-top: 10px !important;}
#comments dd::before, #comments dd::after {display: none;}

#comments .message {
 background: none;
 min-height: initial;
 font: inherit !important;
 position: initial;
 padding: 0;
 margin: 0;
}
#comments .postcontent {text-align: inherit !important;}

#comments .message p:nth-of-type(1) {
 float: right;
 font-style: normal;
}

#comments .message p:nth-of-type(2) {
 padding: 0 0 2px 0;
 margin: 0 0 2px 0;
 border-bottom: 1px dotted #804A38;
}

#comments .alert_container {
 display: flex;
 flex-flow: row nowrap;
 justify-content: space-between;
 float: none;
}

#comments .alert_container li {
 background: rgba(250,204,180,.75);
 width: calc(50% - 5px);
 text-align: center;
 padding: 3px 0;
 border-radius: 3px;
 box-shadow: 0 1px 1px rgba(0,0,0,.25);
 box-sizing: border-box;
}
#comments .alert_container li:hover {background: rgba(255,255,255,.5);}

/* Wish List */

#wishlist .items {
 height: 100%;
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
 overflow: hidden scroll;
 scroll-snap-type: mandatory;
 scroll-snap-points-y: repeat(50px);
}

@supports (scroll-snap-type: y mandatory) {
  #wishlist .items {scroll-snap-type: y mandatory;}
  #wishlist li {scroll-snap-align: end;}
}

#wishlist li {
 background: rgba(128,24,40,.75);
 display: block;
 flex-grow: 1;
 width: 30px;
 height: 30px;
 text-align: center;
 padding: 5px;
 margin: 0 10px 10px 0;
 border-radius: 5px;
 scroll-snap-stop: always;
}
#wishlist .item {background: none;}

#wishlist li:hover {background: #FFFFFF;}
#wishlist li:hover .item {filter: drop-shadow(0 1px 1px #801828);}

/* Media */

#multimedia {
 background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat !important;
 width: 20px;
 height: 20px;
 top: 120px;
 left: 550px;
 overflow: hidden;
}
#multimedia:hover h2 {display: block;}

#multimedia embed {
 position: absolute;
 bottom: -8px;
 left: -25px;
 opacity: .01;
}

#multimedia h2 {
 background: #FFE4D8;
 display: none;
 height: auto;
 font-size: 0;
 line-height: normal;
 text-indent: 0;
 margin: 0;
 position: fixed;
 top: 118px;
 right: 668px;
 padding: 4px 6px;
 border: 1px solid transparent;
 box-shadow: 0 0 0 1px #404040 inset;
 pointer-events: none;
}
#multimedia h2::after {font-size: 10px;}

#multimedia h2::before {
 content: '';
 background-position: -400px bottom;
 display: block;
 width: 18px;
 height: 18px;
 position: fixed;
 top: 121px;
 right: 655px;
}

/* Contact Bar */

#profile, #bar {background: none;}
#bar {margin: 0;}

#profile {
 width: 440px;
 padding: 0;
 left: 149px;
 top: 661px;
 overflow: visible;
}

#bar li {
 background-origin: border-box !important;
 width: 100px !important;
 height: 45px !important;
 font: 0/35px 'Cookie', cursive;
 text-align: center;
 margin: 0 10px 0 0;
 border: 5px solid transparent;
 box-shadow: 0 2px 2px rgba(0,0,0,.4);
 box-sizing: border-box;
}

#onlineButton, #offlineButton {
 background-position: 0 bottom !important;
 text-indent: 0 !important;
}
#addButton {background-position: -100px bottom !important;}
#msgButton {background-position: -200px bottom !important;}
#tradeButton {background-position: -300px bottom !important;}
#ignoreButton {display: none;}

#bar a {
 background: none !important;
 display: block;
 width: 100% !important;
 height: 100%;
 font-weight: normal;
 padding: 0;
}
#bar a:hover {background: rgba(255,255,255,.5) !important;}

#bar a::after, #bar li::after {
 font-size: 26px;
 text-shadow: 0 2px 0 pink, 0 1px 2px rgba(0,0,0,.5), 0 0 10px #FFFFFF;
}
#onlineButton::after {content: 'Online'; color: #801828;}
#offlineButton::after {content: 'Offline'; color: #403440;}
#addButton a::after {content: 'Friend';}
#msgButton a::after {content: 'Message';}
#tradeButton a::after {content: 'Trade';}