Pro for Wulffe

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

html, body {background: url('https://images2.imgbox.com/37/65/llqNhtEs_o.jpg') #FFFFFF no-repeat top left / contain;}
#gaia_header #header_left, #gaia_header #header_right, #columns, #column_1 .panel, #column_1 .panel h2, #id_contact li, .media_panel {background: url('https://images2.imgbox.com/2b/b4/FlwW2foH_o.png');}

/* Fonts */

@font-face {
 font-family: 'Source Sans Pro';
 font-weight: 400;
 src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7j.woff) format('woff');
}

@font-face {
 font-family: 'Open Sans Condensed';
 font-weight: 700;
 src: local('Open Sans Condensed'), local('OpenSans-Condensed'), url(https://fonts.gstatic.com/s/opensanscondensed/v12/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMRw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
}

@font-face {
 font-family: 'Sacramento';
 font-weight: 400;
 src: local('Sacramento'), local('Sacramento-Regular'), url(https://fonts.gstatic.com/s/sacramento/v5/buEzpo6gcdjy0EiZMBUG4C0f_Q.woff2) format('woff2'), url(https://fonts.gstatic.com/s/sacramento/v4/WFDkXpubrEwopJnSlHV6CBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

/* Header */

body#viewer #gaia_header {
 background: none;
 height: 30px !important;
}

#gaia_header #header_left, #gaia_header #header_right {
 width: calc(50% - 250px) !important;
 height: 100% !important;
 color: transparent !important;
 font: 13px/28px 'Open Sans Condensed', sans-serif !important;
 padding: 0 8px !important;
 box-sizing: border-box;
}
#gaia_header #header_left {background-position: right -970px;}
#gaia_header .spacer {display: none !important;}

#gaia_header #header_right {
 background-position: bottom left;
 float: right;
}

#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 48px 0 0;
}

#gaia_header a {
 color: #F0F0F0 !important;
 text-decoration: none;
 text-transform: uppercase;
 opacity: .8;
}
#gaia_header a:hover {opacity: 1;}

/* Columns */

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

#columns {
 width: 850px;
 height: 920px;
 position: fixed;
 top: calc(50% - 460px);
 left: calc(50% - 425px);
}

#column_1 {
 width: 580px;
 height: 295px;
 top: 398px;
 left: 137px;
}

#column_2 {
 width: 581px;
 height: 50px;
 top: 337px;
 left: 136px;
}

/* Panels */

.panel, .panel h2 {
 color: #FFFFFF;
 margin: 0;
 padding: 0;
}
.panel {box-sizing: border-box;}

.panel a {
 color: #C0A4CC;
 font-weight: normal;
}

#column_1 .panel {
 background-origin: border-box;
 background-position: -137px -398px;
 width: 100%;
 height: 100%;
 font: 14px/1.6em 'Source Sans Pro', sans-serif;
 text-align: justify;
 position: absolute;
 top: 0;
 left: 0;
 border: 10px solid transparent;
}
#id_about img, #id_comments .postcontent img, .custom_panel img {max-width: 100% !important;}
.bbcode-swapping-image {background: url('https://i.imgur.com/Fk5mUXF.png') center no-repeat;}

#id_about, #id_footprints, #id_journal #entries, #id_comments dl, .custom_panel div[id*='content'] ul {
 padding-right: 10px;
 overflow-x: hidden;
 overflow-y: scroll;
}

#id_about {z-index: 8;}
#column_1 .panel:not(#id_about) {z-index: 7;}
#column_1 .panel:not(#id_about):hover {z-index: 9;}

/* Panel Headers */

#column_1 .panel h2 {
 background-clip: padding-box;
 background-position-y: -920px;
 width: 145px;
 height: 50px;
 font: 24px/60px 'Sacramento', cursive;
 text-transform: capitalize;
 position: fixed;
}
#id_about h2, #id_contact h2 {display: none;}

#id_comments h2, #id_friends h2, #id_journal h2 {
 background-position-x: 0 !important;
 padding-left: 55px;
 left: calc(50% - 425px - 89px);
}

#id_comments:hover h2, #id_friends:hover h2, #id_journal:hover h2 {
 background-position-x: -200px !important;
 border-right: 30px solid transparent;
}

#id_footprints h2, .custom_panel h2 {
 background-position-x: -400px !important;
 text-align: right;
 padding-right: 55px;
 right: calc(50% - 425px - 91px);
}

#id_footprints:hover h2, .custom_panel:hover h2 {
 background-position-x: -600px !important;
 border-left: 30px solid transparent;
}

#id_comments h2, #id_footprints h2 {top: calc(50% - 460px + 398px);}
#id_friends h2, .custom_panel h2 {top: calc(50% - 460px + 398px + 60px);}
#id_journal h2, .custom_panel ~ .custom_panel h2 {top: calc(50% - 460px + 398px + 120px);}

/* Contact Buttons */

#id_contact ul:not(.buttons) li, .media_panel {
 background-position-x: -850px;
 width: 50px;
 height: 50px !important;
 opacity: .01;
 transition: all .5s ease-in-out;
}
#id_contact ul:not(.buttons) li:hover, .media_panel:hover {opacity: 1;}
#id_contact {background: none;}

#id_contact ul:not(.buttons) li {
 float: left;
 margin-right: 15px;
 position: relative;
}
#id_contact ul:not(.buttons) li, #id_contact ul:not(.buttons) li a {font-size: 0;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position-y: -50px;}

#id_contact ul:not(.buttons) li:nth-of-type(3) {
 background-position-y: -100px;
 margin-left: 336px;
}

#id_contact ul:not(.buttons) li a  {
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
}

/* Comments */

#id_comments #alerts_banner {display: none;}
#id_comments dd:nth-last-of-type(n+2) {margin-bottom: 15px;}

#id_comments dl {
 width: 100%;
 height: calc(100% - 40px);
 position: absolute;
 bottom: 0;
 left: 0;
 box-sizing: border-box;
}

#id_comments dt {
 height: auto;
 line-height: 16px;
 padding: 0;
 margin: 0 0 3px 0;
 border-bottom: 1px dashed #787878;
}

#id_comments .date {
 font-family: monospace;
 font-size: 10px;
 line-height: 20px;
}

#id_comments .dropBox {
 background: #787878;
 width: 50px;
 height: 58px;
 margin: 5px 10px 0px 0px;
 border: 1px solid #404040;
 border-radius: 3px;
 box-sizing: border-box;
 overflow: hidden;
}

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

/* Comment, Friend, and Journal Buttons */

#id_comments h2 ~ div:not(.clear), #id_comments h2 ~ p, #id_friends h2 ~ p:first-of-type, #id_journal h2 ~ p:first-of-type {
 background: #282828;
 height: 30px;
 text-align: center;
 margin: 0;
 border-radius: 3px;
 transition: all .5s ease-in-out;
}
#id_comments h2 ~ div:not(.clear):hover, #id_comments h2 ~ p:hover, #id_friends h2 ~ p:first-of-type:hover, #id_journal h2 ~ p:first-of-type:hover {background: #886494;}

#id_comments h2 ~ div:not(.clear), #id_comments h2 ~ p {
 display: inline-block;
 width: calc(50% - 5px);
}
#id_comments h2 ~ p {float: right;}
#id_comments h2 ~ div .clear {display: none;}

#id_comments h2 ~ div:not(.clear) a, #id_comments h2 ~ p a, #id_friends h2 ~ p a, #id_journal h2 ~ p a {
 color: #FFFFFF;
 font: 13px/28px 'Open Sans Condensed', sans-serif;
 text-decoration: none;
 text-transform: uppercase;
}

#alert_container {
 float: none;
 padding: 0;
}

/* Friends */

#id_friends .style1 {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
}
#id_friends .style1 li p {margin-bottom: 5px;}

#id_friends .style1 li {
 background: rgba(255,255,255,.1);
 width: 105px;
 height: auto;
 margin-bottom: 10px;
 border-radius: 3px;
}
#id_friends .style1 li:hover {background: #787878;}
#id_friends .style1 li:hover a {color: #FFFFFF;}

#id_friends .dropBox {
 background: #787878;
 width: 48px;
 height: 48px;
 margin-bottom: 5px;
 border: 1px solid #404040;
 border-radius: 3px;
 overflow: hidden;
}

/* Journal */

#id_journal {text-align: center !important;}
#id_journal h3 {margin-top: 5px;}

#id_journal #entries {
 width: 100%;
 height: calc(100% - 90px);
 text-indent: 25px;
 margin: 0;
 position: absolute;
 bottom: 0;
 left: 0;
 box-sizing: border-box;
}

/* Visitors */

#id_footprints {
 text-align: center !important;
 text-indent: 25px;
}
#id_footprints .item::before {content: 'Visited by';}

/* Galleries */

.custom_panel div[id*='content'], .custom_panel div[id*='content'] ul {
 width: 100%;
 height: 100% !important;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 box-sizing: border-box;
}
.custom_panel .buttons {z-index: 9;}

.custom_panel div[id*='content'] ul {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
}

.custom_panel div[id*='content'] li {
 background: rgba(255,255,255,.1);
 float: left;
 flex-grow: 1;
 min-width: 120px;
 width: 120px;
 height: 150px;
 line-height: 250px;
 text-align: center;
 margin: 0 10px 10px 0;
 position: relative;
 border: 10px solid transparent;
 border-width: 10px 10px 0 10px;
 border-radius: 3px;
 box-sizing: border-box;
 overflow: hidden;
}
.custom_panel div[id*='content'] li:nth-of-type(4n) {margin-right: 0;}
.custom_panel div[id*='content'] li:last-of-type {margin-right: 0;}

.custom_panel .spoiler-wrapper {
 width: 100%;
 height: 110px;
 padding: 0;
 position: absolute;
 border: none;
 box-sizing: border-box;
 overflow: hidden;
 transform: scaleX(1);
}
.custom_panel .spoiler-wrapper span {display: none;}

.custom_panel .spoiler-revealed {
 background: rgba(0,0,0,.8);
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 border: 50px solid transparent;
 z-index: 999;
}

.custom_panel .spoiler-title, .custom_panel .spoiler-title button, .custom_panel .spoiler {
 background: none;
 width: 100%;
 height: 100%;
 border: none;
}

.custom_panel .spoiler-title {
 position: relative;
 z-index: 2;
}

.custom_panel .spoiler {
 display: flex !important;
 flex-flow: column nowrap;
 justify-content: center;
 align-items: center;
 position: absolute;
 top: 0;
}

.custom_panel img {
 width: 100%;
 height: 100%;
 border-radius: 2px;
 object-fit: cover;
}
.custom_panel .spoiler-revealed img {object-fit: scale-down;}

.custom_panel img[class*='bbcode-swap'] {
 position: fixed;
 z-index: 9;
}

/* Media */

.media_panel {
 background-origin: border-box;
 background-position-y: -150px;
 position: absolute;
 top: 0;
 right: 0;
 border: 8px solid transparent;
 box-sizing: border-box;
 overflow: hidden;
 z-index: 2;
}

.media_panel h2 {
 background: #F0F0F0 !important;
 color: #000;
 font: normal 11px 'Source Sans Pro', sans-serif;
 text-transform: capitalize;
 padding: 6px;
 position: fixed;
 top: calc(50% - 460px + 320px);
 left: calc(50% - 425px + 705px);
 border: 1px solid #F0F0F0;
 box-shadow: 0 0 0 1px #080808 inset;
 pointer-events: none;
}

.media_panel object {
 position: absolute;
 bottom: 0;
 left: -8px;
 opacity: .01;
}