body {
  margin: 0;
  padding: 0;
  padding-bottom: 5em;
  background: #753;
  color: #fff;
  /* box-shadow: 0 0 .5em #888; */
  text-shadow: 0 0 .2em #000;
  background: #210 linear-gradient(#753, #210);
  background-image: url('../images/bgd.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 10%;
}

.logo {
  background: url('logo.png') no-repeat center 20px;
  padding-top: 200px;
  text-align: center;
}

input, select, textarea {
  border-radius: .2em;
  box-shadow: 0 0 .2em #000;
  opacity: .6;
}
.statusbar th,
.selector th,
.selection th {
  font-family: sans-serif;
  font-weight: bold;
}
.statusbar table,
.selector table,
.selection table {
  color: inherit;
  border-collapse: collapse;
  margin: .5em 0 .5em 0;
}
th, td {
  padding: .2em
}
thead th {
  border-bottom: 1px solid #000;
  padding: .5em 1em;
}
tbody th {
  text-align: left;
}

body > .charactersheets {
  display: none;
}

.statusbar {
  display: block;
  position: fixed;
  z-index: 2;
  padding: .5em;
  background: #ba6;
  color: #333;
  margin: .5em;
  width: 90%;
  height: 2em;
  border-radius: .2em;
  box-shadow: 0 0 1em #000;
  text-shadow: 0 0 .1em #fff;
  background: linear-gradient(#ba6, #a83);
  overflow: hidden;
}
.bonuspoints {
  display: inline-block;
  width: 12em;
  margin-right: 2em;
}
.value {
  display: inline-block;
}
.label {
  display: inline-block;
}
th.label, td.label, td.value {
  display: block;
  display: table-cell;
}
.bonuspoints .value {
  width: 1em;
  font-weight: bold;
}
.bonuspoints .label {
  width: 10em;
  font-weight: normal;
}
.title {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 1.5em;
}
.statusbar .title {
  display: inline-block;
  width: 10em;
  margin-right: 2em;
}
.statusbar .character {
  display: inline-block;
  margin-right: 2em;
}
.statusbar .character .name,
.statusbar .character .race,
.statusbar .character .class {
  display: inline-block;
  margin-right: 1em;
}



.selection {
  display: block;
  padding: 3em 1em 1em 1em;
}
.selection table {
  opacity: .7;
  min-width: 30em;
}
.selection table td {
  text-align: center
}
.selection .race .start {
  color: #fdd;
}
.selection .race .max {
  color: #dfd;
}
.resistances td {
  text-align: right
}
.resistances tbody th {
  width: 10em;
}
.schools tbody th.label {
  text-align: center
}
.schools tbody th {
  font-weight: normal
}
.schools tbody th.label {
  font-weight: bold
}
.schools .requires {
  color: #fdd;
}

.portrait,
.teachings.activeSelector > .portrait,
.resistances.activeSelector > .portrait {
  width: 250px;
  min-height: 100px;
  padding: 5px;
  position: absolute;
  left: 1em;
}
.portrait img,
.teachings.activeSelector > .portrait img,
.resistances.activeSelector > .portrait img {
  width: 200px;
}

.races .portrait img {
  background: #fff;
  border: solid 2px #000;
  box-shadow: 0 0 3pt #fff;
}

.races.activeSelector .race:hover .portrait img {
  animation-name: pulse-white;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.classes .portrait img {
  background: #000;
  border: solid 2px #fff;
  box-shadow: 0 0 3pt #000;
}

.classes.activeSelector .class:hover .portrait img {
  animation-name: pulse-black;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes pulse-black {
  0% {  box-shadow: 0 0 10pt #000; }
  50% {  box-shadow: 0 0 30pt #aaa; }
  100% {  box-shadow: 0 0 10pt #000; }
}

@keyframes pulse-white {
  0% {  box-shadow: 0 0 10pt #fff; }
  50% {  box-shadow: 0 0 30pt #333; }
  100% {  box-shadow: 0 0 10pt #fff; }
}

.selection .race, .selection .class, .selection > .master .abilities,
.selection .teachings, .selection > .resistances {
  margin-left: 280px;
}

.selection .teachings .abilities {
  margin-top: 1em;
  opacity: .8;
}

.selection .teachings .abilities .ability,
.selection .teachings .abilities > .title {
  margin-top: 1em;
}

.selection .teachings .abilities .description {
  opacity: .9;
}

.activeSelector .race, .activeSelector .class {
  margin-left: 160px;
}

.selection .race > .title, .selection .class > .title {
  margin-left: -2em;
}

.selection .books > .title, .selection .book > .title,
.selection .abilities > .title,
.selection .items > .title {
  margin: 1em 0 1em -1em;
}

.selection > .master > .title {
  margin-bottom: 1em;
}

.activeSelector .race > .title, .activeSelector .class > .title {
  display: block;
}

.selection .description, .selection .abstract {
  display: block;
  width: 60%;
  min-width: 500px;
  max-width: 1024px;
  margin: 1em 0;
}
  
.selection .description {
  text-align: justify;
  border: 1px solid #000;
  box-shadow: 5px 5px 5px #000;
  color: #000;
  background: #eee;
  background: linear-gradient(#fd8, #a85);
  padding: 1em;
  text-shadow: 0 0 .3em #888;
}

.dminfo,
.introduction {
  max-width: 1100px;
  min-width: 550px;
  width: 80%;
  margin: auto;
}
.dminfo .description,
.introduction .description {
  width: 100%;
}


.selection .introduction .description,
.selection .dminfo .description {
  text-shadow: 0 0 .3em #fff;
  background: linear-gradient(#fd8, #db9);
}

.selection .master .abilities .ability .description {
  opacity: 1;
  text-shadow: 0 0 .3em #fec;
  background: linear-gradient(#fd8, #b96);
}
.selection .ability .title {
  opacity: .9;
  text-shadow: 0 0 .1em #000;
}
.selection > .master .ability {
  margin-top: 1em;
}
.selection > .master .summary {
  display: none;
  border: 5px solid red;
}

.selection .abilities .description {
  opacity: .7;
  text-shadow: 0 0 2px #fff;
}

.selection .abstract {
  font-size: 1.3em;
}

.selection .race,
.selection .class,
.selection .resistances,
.selection .primaryAttributes,
.selection .teachings {
  min-height: 340px;
}

.selection .class .plus {
  color: #cfc;
}

.selection .class .minus {
  color: #fcc;
}

.selection .requires.low {
  color: #cfc;
}

.selection .requires.medium {
  color: #fda;
}

.selection .requires.high {
  color: #faa;
}

.selection .race .ability .title,
.selection class .ability .title {
  margin-top: 1em;
}

.selector {
  display: block;
  padding-top: 3em;

}
.selector .title {
  display: block;
  font-size: 2em;
  padding: 1em;
}
.selection button {
  display: none;
}
.selection .activeSelector button {
  display: inline;
}
.selection .selectRace,
.selection .selectClass {
  display: block;
  font-size: 1.5em;
  margin-left: -5em;
}
.activeSelector button {
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: inherit;
  text-shadow: inherit;
}
.activeSelector .race:hover button,
.activeSelector .class:hover button {
  text-shadow: 0 0 .5em #fff;
  cursor: pointer;
}

.activeSelector .race .attributes,
.activeSelector .race .description,
.activeSelector .race .title,
.activeSelector .race .alignment,
.activeSelector .race .ability > *,
.activeSelector .class .attributes,
.activeSelector .class .description,
.activeSelector .class .alignment,
.activeSelector .class .books,
.activeSelector .class .items,
.activeSelector .class .title,
.activeSelector .class .ability > * {
    display: none;
}
.activeSelector .race,
.activeSelector .class {
   height: 15em;
   min-height: 15em;
   padding-top: 1em;
}
.activeSelector .portrait {
    width: inherit;
    left: 2em;
    height: inherit:
}
.activeSelector .portrait img {
    width: 8em;
}
.activeSelector .race:hover > .description,
.activeSelector .class:hover > .description {
  display: block;
  position: absolute;
  margin-left: 13em;
  margin-top: -1em;
}

.activeSelector .race .abilities  .ability .title,
.activeSelector .class .abilities  .ability .title {
  display: block;
  font-size: 0.8em;
  margin: 0;
}

.selector .select {
  display: block;
  padding-left: 5em;
}

.selector .select button {
  padding: .5em;
  margin-right: 2em;
  background: inherit;
  background: linear-gradient(#fda, #a85);
  color: #000;
  border: 2px solid #320;
  border-radius: .3em;
  box-shadow: 0 0 .7em #000;
  font-size: 1.1em;
  cursor: pointer;
}

.selector .select button:hover {
  box-shadow: 0 0 1em #fed;
}

.alignment {
   display: block;
   margin: 1em 0;
}

.alignment .label {
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  margin-right: 1em;
}

.alignment .value {
  display: inline-block;
  font-family: serif;
  margin-right: 1em;
}

.alignment.evil .value {
  text-shadow: 0 0 .1em #105;
  color: #baf;
}

.alignment.good .value {
  text-shadow: 0 0 .4em #550;
  color: #ff8;
}

.alignment.neutral .value {
  text-shadow: 0 0 .2em #000;
  color: #ccc;
}

.selection .primaryAttributes table {
  max-width: 45%;
}
.selection .primaryAttributes .description {
  float: right;
  margin: 0 1em;
  max-width: 45%;
  display: none;
}

.selection .circle#upper .specialistOnly,
.selection .circle#lower .specialistOnly,
.selection .circle#outer .specialistOnly {
  display: none;
}

.selection .frontpage {
  display: block;
  font-family: sans-serif;
  font-weight: bold;
  height: 100%;
  text-align: center;
  padding-top: 2em;
  padding-bottom: 10em;
}

.selection .frontpage * {
  font-size: 1.2em;
  vertical-align: top;
}

.selection .frontpage > *,
.selection .frontpage .options > * {
  display: block;
  margin-top: 1em;
}

.selection .frontpage .label {
  margin-right: 1em;
}

.selection .frontpage .license {
  margin-top: 2em;

}

.selection .frontpage .license p,
.selection .frontpage .license p a {
  font-size: 10pt;
  color: #E0E0E0;

}

.selection .unavailable {
  opacity: .5;
}

.selection .spell .unavailable input {
  display: none;
}

.selector .description {
  display: block;
  font-family: sans-serif;
  margin: .5em 0 1em 2em;
  font-size: 1.1em;
}

.irrelevant {
  display: none;
}

.spoiler {
  opacity: .5;
  filter: blur(4px);
}

.spoiler:hover {
  opacity: 1;
  filter: blur(0);
}