@font-face {font-family: "CaslonAntique";src: url("../fonts/CaslonAntique.ttf") format("truetype")}
@font-face {font-family: "HighGothic";src: url("../fonts/Chomsky.otf") format("truetype")}
@font-face {font-family: "Inquisitor";src: url("../fonts/Inquisitor.otf") format("truetype")}
body {background: url("img/Tertium_mourningstar_banner.png") center center no-repeat fixed #000; background-size: cover; color: #eee; cursor: auto}
body.silver {background: url("img/joakim-ericsson-throneside-8_2.jpg") center center no-repeat fixed #000; background-size: cover}
body.chun {background: url("img/bjorn-degerstedt-bjorndegerstedt-metalfab36-smeltercomplexhl1736-6_2.jpg") center center no-repeat fixed #000; background-size: cover}
body.junia {background: url("img/Throneside.jpg") center center no-repeat fixed #000; background-size: cover}
body.silver .logo,body.chun .logo {color: #fff}
a {cursor: pointer; color: #0fc !important; text-decoration: #0fc underline dotted; text-decoration-thickness: 1px}
ol {list-style-type: upper-roman; margin: 1em 1em 1em 5em; font-family: "pixel", sans-serif}
small,s,.de-em {color: #bbb}
header,em,strong {color: #fff}
.logo img {max-width: 20vw}
.profile {margin: 0 1em 1em 0}
.insignia,.social img.portrait {float: left}
.artwork, .gallery img,.illustration {border: 1px #0ff solid; border-radius: 1em}
.artwork,.divider,#backstory section[id]+section[id]:before,#warp_aura:before, .illustration {display: block; max-width: 100%; height: auto; margin: 0 auto}
.current li {font-size: 0.8em; display: inline-block}
header,.logo,.gallery,.weapons,.talents,.current ul,.social nav {text-align: center}
article.main > header, article.main > section {background: rgba(0,0,0,0.7)}
article.main > section+section {margin-top: 3em}
.weapons,.c_info,.characters li ul,.profile,.pronouns {font-family: "pixel", sans-serif}
.weapons small,.class_type,header small,.social nav {display: block}
.pronouns {font-size: 1.5em}
.class_type {text-indent: 2em}
.weapons li,.weapons figure,nav.main li,.home li,.social nav li,.social nav li+li:before {display: inline-block}
.weapons img {max-width: 150px; max-height: 50px}
nav.home {background: linear-gradient(to right, black, transparent)}
nav.characters {background: rgba(0,0,0,0.59); vertical-align: central}
nav.characters .name {font-size: 2em}
h1,h2,h3,h4,nav.characters .name,.profile span:not([class]) {font-family: "CaslonAntique",Verdana,serif; text-transform: uppercase; font-weight: bold}
header {background: url("img/Button_BG_Transparent.png"); background-size: 100% 100%}
article.main header.arbitrator {background: url("img/Arbitrator_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Arbitrator_transparent.png") no-repeat top 0 left 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100% rgba(0,0,0,0.42)}
article.main header.ogryn {background: url("img/Ogryn_skullbreaker_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Ogryn_skullbreaker_transparent.png") no-repeat top 0 left 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100% rgba(0,0,0,0.42)}
article.main header.psyker {background: url("img/Psyker_psykinetic_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Psyker_psykinetic_transparent.png") no-repeat top 0 left 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100% rgba(0,0,0,0.42)}
article.main header.zealot {background: url("img/Zealot_preacher_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Zealot_preacher_transparent.png") no-repeat top 0 left 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100% rgba(0,0,0,0.42)}
h1 {font-size: 3em}
article.main header.psyker {}
.main h2 {font-size: 2em}
.main h3 {font-size: 1.5em}
.main h4 {font-size: 1.25em}
nav.characters,article.main > section,.current,header,nav.characters > ul > li {border-radius: 1em; border: #0ff 1px dotted}
nav.characters .portrait img {height: 100px}
nav.characters .c_info {margin-top: 2em}
nav.characters .current .c_info,.divider,.weapons li+li,#backstory section+section,.main q.bottom {margin-top: 1em}
nav.characters .arbitrator {background: url("img/Arbitrator_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100%}
nav.characters .ogryn {background: url("img/Ogryn_skullbreaker_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100%}
nav.characters .psyker {background: url("img/Psyker_psykinetic_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100%}
nav.characters .veteran {background: url("img/Veteran_sharpshooter_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100%}
nav.characters .zealot {background: url("img/Zealot_preacher_transparent.png") no-repeat top 0 right 0/auto 100%, url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100%}
.insignia {width:40px}
.class_icon {height: 2em}
.description {margin: 0 1em 1em}
.description p,#backstory p {text-indent: 1em}
nav.characters .portrait {position:relative; float: left; margin: 1em 1em 0.5em 0.5em}
li.marcella .portrait:after {position: absolute; background-image: url("img/frame_candles.png"); top: -15px; right: -15px; background-size: 125px 125px; width: 125px;  height: 125px; content: ""}
li.silver .portrait:after {position: absolute; background-image: url("img/frame_resilient.png"); top: -15px; right: -17px; background-size: 125px 125px; width: 125px;  height: 125px; content: ""}
li.flavia .portrait:after {position: absolute; background-image: url("img/frame_flamer.png"); top: -15px; right: -10px; background-size: 125px 125px; width: 125px;  height: 125px; content: ""}
li.junia .portrait:after {position: absolute; background-image: url("img/frame_k9.png"); top: -15px; right: -10px; background-size: 125px 125px; width: 125px;  height: 125px; content: ""}
li.chungy .portrait:after {position: absolute; background-image: url("img/frame_savior.png"); top: -15px; right: -10px; background-size: 125px 125px; width: 125px;  height: 125px; content: ""}
.social li > div {margin: 0 1em 1em}
.social nav li+li:before {width: 1em; height: 1em; content: ""; margin: 0 0.5em}
.social ul.arbitrator li+li:before {background: url("img/Arbitrator_icon.png") center center no-repeat; background-size: 1em 1em}
.social ul.zealot li+li:before {background: url("img/Zealot_preacher_icon.png") center center no-repeat; background-size: 1em 1em}
#backstory section[id] > div {margin: 0 1em 1em}
#backstory section[id]+section[id]:before,#warp_aura:before,#warp_connection section[id]+section[id]:before,#gallery section[id]+section[id]:before {content: url("img/divider1.png"); display: block; text-align: center; margin: 0 auto 1em}
#backstory .stories {display: block; text-align: center}
.main q.top,.main q.bottom {display: block; text-align: center; font-family: "CaslonAntique", serif; font-size: 1.5em}
.main q.top {margin-bottom: 1em}
.main q.noquotes:before, .main q.noquotes:after {content: ""}
header h2,header h3,header h4 {display: inline-block}
header .deco:before, header .deco:after {background: url("img/imperial-aquila-teal.png") no-repeat; background-size: 2.75em 1em; content: ""; height: 1em; width: 2.75em; display: inline-block}
header .deco:before {margin-left: -2.75em}
header .deco:after {margin-right: -2.75em}
header .zealot {background: url("img/Zealot_preacher_transparent.png") center left no-repeat, url("img/Zealot_preacher_transparent.png") center right no-repeat; background-size: 1em 1em, 1em 1em; padding: 0 1.25em}
header .arbitrator {background: url("img/Arbitrator_transparent.png") center left no-repeat, url("img/Arbitrator_transparent.png") center right no-repeat; background-size: 1em 1em, 1em 1em; padding: 0 1.25em}
.spoilers {color: #000; background: #000}
.spoilers:hover, .spoilers:focus {color: #fff}
.talents img {height: 35px}
.talents > div {position: relative; display: inline-block; margin: 2em 0.59em 1em}
.blitz:after {background-image: url("img/square_frame.png"); top: -17px; right: -17px}
.ability:after {background-image: url("img/hex_frame.png"); top: -17px; right: -15px}
.aura:after,.keystone:after {background-image: url("img/circular_frame.png"); top: -17px; right: -17px}
.blitz:after, .ability:after, .aura:after,.keystone:after {position: absolute; background-size: 70px 70px; width: 70px;  height: 70px; content: ""}
.gallery button {border: #0ff 1px dotted; background: url("img/Button_BG_Transparent.png") no-repeat top 0 left 0/100% 100%; font-family: "pixel";}
.gallery button a {border: 0}
@media screen and (min-width: 1200px) and (min-height: 750px) {
  .container {position: relative}
  div.characters {width: 399px; position: fixed}
  article.main {margin-left: 425px; margin-right: 1em}
  .logo {color: #000}
  nav.characters .ogryn .c_info {margin-top: 1em}
  .artwork {width: 599px; float: left; margin-right: 1em}
  .profile {float: left; max-width: 300px}
  .ogryn .name {text-indent: 1em}
  .weapons li {display: block}
  .scroll_container {max-height: 100vh; overflow-y: auto; border-radius: 1em; border-top: #0ff 1px dotted}
  .desktop {display: initial}
}
@media screen and (min-width: 1500px) and (min-height: 750px) {
  .artwork {max-width: 25vw}
}

/* display: -ms-flexbox; -ms-flex-align: center; -ms-flex-pack: center */