Voltra PRESCIENCE CSS

!! INSTALLATION NOTES !! PLEASE READ !! BUT DO NOT COPY AND PASTE THESE INTO YOUR CSS BOX !!

BIO INFORMATION TEMPLATE
------------------------
Copy and paste this template into your BIO (about me) section first. Make sure you add your username to the message links! Otherwise they won't work!
------------------------

[u]BIO HEADER HERE[/u]

[url=https://www.voltra.us/messages/create_message?to=YOUR USERNAME HERE]message[/url] • [url=https://www.voltra.us/friends/add_friend/YOUR USERNAME HERE]add friend[/url] • [url=https://www.voltra.us/trades/request/YOUR USERNAME HERE]new trade[/url]

[b]BIO bold content[/b]
bio regular content
[s]bio strike content[/s]
[i]bio italic content[/i]

[spoiler=SPOILER HEADER HERE]
[u]Spoiler Underlined Content[/u]
[b]Spoiler Bold Content[/b]
[i]Spoiler Italic Content/i]
[/spoiler]

=====================================DO NOT COPY THIS LINE OR ANYTHING ABOVE IT INTO YOUR "CSS" BOX!!==================================

/* Layout PRESCIENCE by Vii / Trash Chicken
 + V1 completed 4 apr 18 + time logged A FUCKING LOT lol
 + do not rip, copy or steal, or remove this credit pl0x */

* { cursor: url(http://starfarerstudios.elementfx.com/cursors/cursor_small.ico), default !important; }

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px 1px rgba(45, 35, 76, 0.6);
}

::-webkit-scrollbar-thumb {
background: linear-gradient(rgba(106, 91, 160, 0.5), rgba(148, 109, 163, 0.5), rgba(168, 147, 208, 0.5), rgba(199, 213, 254, 0.5), rgba(106, 91, 160, 0.5));
}

body { background: url(https://i.imgur.com/IxYDT4V.jpg); background-size: cover; }

/** Custom Fonts **/
@font-face {
  font-family: Nova Mono;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/novamono/v8/Cn-0JtiGWQ5Ajb--MRKvZ2ZZ.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Quicksand;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QN.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/** Hidden Modules and Items **/
div.sidebar, footer, div.content_header, section.voltie_likes, section.voltie_dislikes, section.voltie_hobbies, div.copyright div.col-md-6, div#user_currency, section.voltie_comments ul li p::before, a.navbar-brand { display: none !important; }

/** Navbar **/
nav#navbar {
visibility: hidden;
}

ul.nav.navbar-nav.navbar-right {
position: fixed;
left: 0;
top: 0;
width: 100px;
height: 100%;
margin: 0 !important;
visibility: visible !important;
}

ul.nav.navbar-nav.navbar-right li {
width: 100%;
height: calc(100%/8);
text-align: center;
border: 5px solid rgba(45, 35, 76, 0.8);
transition: all 0.3s ease;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
}

ul.nav.navbar-nav.navbar-right li a {
border-radius: 0;
float: left;
width: 100%;
height: 100%;
margin: 0;
padding: 40% 0;
transition: all 0.3s ease;
}

ul.nav.navbar-nav.navbar-right li a:hover, ul.nav.navbar-nav.navbar-right li a:active, ul.nav.navbar-nav.navbar-right li a { background: transparent !important; font-family: Nova Mono; }

ul.nav.navbar-nav.navbar-right li a:hover, ul.nav.navbar-nav.navbar-right li a:active { color: #FFF !important; text-shadow: 0 0 2px; }

li#profile a { color: #FFF !important; text-shadow: 0 0 4px; animation: glow 1s normal infinite; -webkit-animation: glow 1s normal infinite; }

li#profile a:hover { animation-play-state: paused;-webkit-animation-play-state: paused; }

@keyframes glow {
0%, 100% { background: transparent; }
50% { background: rgba(199, 213, 254, 0.5); }
}

@-webkit-keyframes glow {
0%, 100% { background: transparent; }
50% { background: rgba(199, 213, 254, 0.5); }
}

li#home, li#mail {
background: linear-gradient(rgba(106, 91, 160, 0.5), rgba(148, 109, 163, 0.5));
}

li#forums, li#profile {
background: linear-gradient(rgba(148, 109, 163, 0.5), rgba(168, 147, 208, 0.5)) !important;
}

li#shops, li#settings {
background: linear-gradient(rgba(168, 147, 208, 0.5), rgba(199, 213, 254, 0.5));
}

li#donate, li#signout {
background: linear-gradient(rgba(199, 213, 254, 0.5), rgba(106, 91, 160, 0.5));
}

ul.nav.navbar-nav.navbar-right li:hover, li#forums:hover, li#profile:hover { background: transparent !important; }

/** Header and User Card Styling **/

header.min { height: 0; }

div#header_stats {
z-index: 11;
width: 100% !important;
left: 0;
padding: 0 !important;
max-height: 0;
margin: auto !important;
position: absolute;
background: transparent;
}

div#header_stats div.col-inner {
margin: auto !important;
position: absolute !important;
right: 885px;
left: 0;
top: 21px;
width: 285px;
max-height: 106px !important;
border-radius: 0 !important;
display: block !important;
padding: 5px !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5) !important;
background: linear-gradient(rgba(106, 91, 160, 0.5), rgba(148,109, 163, 0.5)) !important;
border: 1px solid rgb(106, 91, 160);
}

div#user_card {
float: left;
border-radius: 0 !important;
height: 96px !important;
width: 96px !important;
margin: auto 0 !important;
border-color: rgb(45, 35, 76) !important;
background: rgba(45, 35, 76, 0.5) !important;
}

div#user_card a.avatar {}

div#user_stats {
width: calc(100% - 101px) !important;
display: block !important;
margin: auto 0 0 auto;
padding: 10px !important;
font-family: Quicksand;
height: 94px !important;
}

div#user_stats p { font-size: 14px !important; margin: 5px auto 20px !important; color: rgb(199, 213, 254) !important; }

div#user_notifications {

}

div.dropdown {}

div.dropdown button { border-radius: 0 !important; background: linear-gradient(rgba(199, 213, 254, 0.75), rgba(106, 91, 160, 0.5)) !important; border-color: rgb(106, 91, 160) !important; margin: 0 1px; font-size: 10px !important; }

ul.dropdown-menu {
background: rgb(45, 35, 76) !important;
}

ul.dropdown-menu li { font-family: Quicksand !important; }

/** Wrapper and Text Styles **/
div#structure { margin: 0; }

a, a:visited, a:active { color: rgb(199, 213, 254); transition: all 0.3s ease; }

a:hover { color: #FFF; }

h2, h3 {
border-radius: 0 !important;
font-family: Nova Mono;
text-transform: lowercase;
background: transparent !important;
}

h2 { color: rgb(199, 213, 254) !important; }

span.voltie_username { text-shadow: 2px 0 1px rgb(148, 109, 163); }

span.voltie_pronouns { font-family: Quicksand; }

h3 {
color: rgb(148, 109, 163) !important;
padding: 5px !important;
text-shadow: 1px 0 1px rgb(199, 213, 254);
}

div#content.container {
background: transparent;
width: 100%;
height: 100%;
}

div#voltie.row {
background: rgba(45, 35, 76, 0.8);
width: 1200px;
margin: 60px auto;
height: 600px;
padding: 10px;
}

div.col-md-3 {
float: left;
background: transparent;
margin: 0 auto;
padding: 5px;
}

div.col-md-3:nth-child(1) {
width: 25%;
height: 100%;
}

div.col-md-3:nth-child(3) {
width: 75% !important;
height: 20%;
position: relative;
top: calc(-90% + 8px);
}

div.col-md-6 {
margin: 0;
background: transparent;
width: 75%;
height: 80%;
float: right;
position: relative;
top: 66px;
padding: 5px;
}

section {
padding: 0px !important;
margin: 0px !important;
border-radius: 0 !important;
border: 1px solid rgb(106, 91, 160) !important;
}

section.voltie_info {
height: calc(100% - 115px);
margin: 116px auto 0 !important;
background: linear-gradient(rgba(148, 109, 163, 0.5), rgba(106, 91, 160, 0.5)) !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
}

section.voltie_info:hover span.offline-orb, section.voltie_info:hover span.online-orb { animation: spin 5s normal infinite; -webkit-animation: spin 5s normal infinite; animation-timing-function: linear; -webkit-animation-timing-function: linear; }

@keyframes spin {
from { transform: rotate(45deg); }
to { transform: rotate(405deg); }
}

@-webkit-keyframes spin {
from { transform: rotate(45deg); }
to { transform: rotate(405deg); }
}

section.voltie_info h2 {
font-size: 34px !important;
}

span.online-orb {
border-radius: 0;
border: 1px solid;
padding: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
background: url(https://i.imgur.com/S3cFRjO.gif);
background-size: 200%;
margin: 15px auto 0;
box-shadow: 0 0 5px 2px rgba(199, 213, 254, 0.5);
}

span.offline-orb {
border-radius: 0;
border: 1px solid;
padding: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin: 15px auto 0;
box-shadow: 0 0 5px 2px rgba(45, 35, 76, 0.5);
background: url(https://i.imgur.com/Si50mbX.gif) center;
background-size: 350%;
}

img.voltie_avatar {
margin: 10px auto 22px !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
background: rgba(45, 35, 76, 0.25);
}

div.voltie_actions.row {
width: 200px;
margin: auto;
padding: 0 !important;
font-family: Quicksand;
}

div.voltie_actions.row a:hover { background: rgba(45, 35, 76, 0.65) !important; }

div.voltie_actions.row div {
width: 50%;
display: inline-block;
padding: 0;
margin: 0 auto;
}

div.col-xs-6 a {
border-radius: 0 !important;
background: rgba(45, 35, 76, 0.25) !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
text-transform: lowercase;
}

section.voltie_video {
position: relative;
left: calc(100% + 10px);
top: calc(-20% - 108px);
width: 432px;
height: 222px !important;
overflow: hidden !important;
z-index: 8;
}

section.voltie_video div { max-height: 222px; overflow: hidden!important; }

section.voltie_video h3 { display: none; }

section.voltie_bio {
height: 50%;
width: calc(50% - 5px);
background: linear-gradient(rgba(148, 109, 163, 0.5), rgba(106, 91, 160, 0.5)) !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
color: #FFF;
font: 14px Quicksand;
text-align: center;
overflow-y: auto;
padding: 5px !important;
}

section.voltie_bio h3 { display: none; }

section.voltie_bio > u {
font: 28px Nova Mono;
text-decoration-color: rgb(45, 35, 76);
}

section.voltie_bio > a {
display: inline-block;
width: 20%;
}

section.voltie_bio button.reveal_spoiler {
background: linear-gradient(rgba(199, 213, 254, 0.75), rgba(106, 91, 160, 0.5)) !important;
border-radius: 0;
border-color: rgb(106, 91, 160);
}

section.voltie_bio div.spoiler_value {
background: rgba(45, 35, 76, 0.4);
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
border-radius: 0;
}

section.voltie_bio div.spoiler_value > u {
font-weight: bold;
font: 16px Nova Mono;
text-decoration: none;
border-bottom: 1px solid rgb(199, 213, 254);
width: 100%;
float: left;
}

section.voltie_comments {
height: 100%;
width: calc(50% - 5px);
float: right;
position: relative;
top: -50%;
background: linear-gradient(rgba(148, 109, 163, 0.5), rgba(106, 91, 160, 0.5)) !important;
overflow: hidden;
}

section.voltie_comments h3 { margin: 0 !important; }

section.voltie_comments ul {
padding: 10px !important;
margin: 0 auto !important;
height: 68%;
overflow-y: scroll;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
}

section.voltie_comments ul li {
margin: 0 auto 10px auto !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
padding: 5px !important;
min-height: 100px;
background: rgba(45, 35, 76, 0.25);
}

section.voltie_comments ul li p {
width: calc(100% - 65px);
margin: 0 0 auto auto !important;
background: rgba(148, 109, 163, 0.5) !important;
border-radius: 0 !important;
border: none !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5) !important;
font: 14px Quicksand;
color: #FFF;
}

section.voltie_comments ul li small {
visibility: hidden;
}

section.voltie_comments ul li a img {
margin: 27px 11px;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
}

a.comment_username {
width: 100%;
float: left;
text-align: center;
color: rgb(199, 213, 254);
font-family: Quicksand;
}

a.comment_username:first-letter { color: rgb(45, 35, 76); font-weight: bold; }

section.voltie_friends {
height: 100%;
background: linear-gradient(rgba(106, 91, 160, 0.5), rgba(148,109, 163, 0.5)) !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
}

section.voltie_friends h3 {
margin: 0 0 5px !important;
padding: 5px 0 0 !important;
}

section.voltie_friends a {
max-width: 10% !important;
width: calc(100%/16);
height: calc(70%) !important;
position: relative;
top: -8px;
overflow: hidden;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
}

section.voltie_friends a img { height: 100px !important; max-width: 100px !important; position: relative; bottom: 15px; right: 10px; background: rgba(45, 35, 76, 0.4); }

button.btn.btn-secondary.comments_load_more {
font: 10px Quicksand !important;
padding: 5px !important;
width: 100%;
border-radius: 0;
margin: 0 !important;
background: rgba(45, 35, 76, 0.5);
color: rgb(199, 213, 254);
}

textarea#comment-text {
border-radius: 0;
background: rgba(148, 109, 163);
border: none;
margin: 0 !important;
box-shadow: inset 0 0 5px 2px rgba(45, 35, 76, 0.5);
font: 13px Quicksand;
color: rgb(199, 213, 254);
padding: 5px;
}

form#comment-form div div.col-xs-6 {
width: 100%;
text-align: center !important;
font: 11px Quicksand;
color: rgb(148, 109, 163) !important;
}

form#comment-form div div.col-xs-6 span { float: none !important; }

span#charsLeft { color: #FFF !important; }

input#comment-button {
width: 100%;
margin: 0 !important;
background: linear-gradient(rgba(199, 213, 254, 0.75), rgba(106, 91, 160, 0.5)) !important;
border-radius: 0;
border: 1px solid transparent;
transition: all 0.3s ease;
color: rgb(45, 35, 76);
font: 14px Nova Mono;
}

input#comment-button:hover {
background: transparent !important;
color: #FFF;
}

/* end custom code */