/* Welcome to Compass. Use this file to define print styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, .attacks table th, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.2.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

h1, div header h2, label, .attacks table th, .page-break, .rp-col .spell-save .dc-calc label, .rp-col .spell-save .dc-calc .attacks table th, .attacks table .rp-col .spell-save .dc-calc th, .equip-col .equip th, .equip-col .equip tr.item-total h3, .dialog .dialog-inner .loading-text, .dialog .dialog-inner .saving {
  color: #333333;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase; }

header.main p, .general label, .general .attacks table th, .attacks table .general th, .ac label.base-label, .ac .attacks table th.base-label, .attacks table .ac th.base-label, .ac label.dex-label, .ac .attacks table th.dex-label, .attacks table .ac th.dex-label, .ac label.shield-label, .ac .attacks table th.shield-label, .attacks table .ac th.shield-label, .ac label.misc-label, .ac .attacks table th.misc-label, .attacks table .ac th.misc-label, .hp label.hp-total-label, .hp .attacks table th.hp-total-label, .attacks table .hp th.hp-total-label, .hp label.hp-temp-label, .hp .attacks table th.hp-temp-label, .attacks table .hp th.hp-temp-label, .hp label.hit-dice-label, .hp .attacks table th.hit-dice-label, .attacks table .hp th.hit-dice-label, .hp label.remaining-label, .hp .attacks table th.remaining-label, .attacks table .hp th.remaining-label, .speed-init label, .speed-init .attacks table th, .attacks table .speed-init th, .death label, .death .attacks table th, .attacks table .death th, .stats > div .skills li label, .stats > div .skills li .attacks table th, .attacks table .stats > div .skills li th, .stats > div.skill-bonus label, .stats > div.skill-bonus .attacks table th, .attacks table .stats > div.skill-bonus th, .stats.expertise-options .skills li label, .stats.expertise-options .skills li .attacks table th, .attacks table .stats.expertise-options .skills li th, .rp-col .spell-casts h3, .rp-col .spell-casts table tr td label, .rp-col .spell-casts .attacks table tr td th, .attacks .rp-col .spell-casts table tr td th, .equip-col .currency label, .equip-col .currency .attacks table th, .attacks table .equip-col .currency th, .char-info-short .spell-numbers > div label, .char-info-short .spell-numbers > div .attacks table th, .attacks table .char-info-short .spell-numbers > div th, .spell .spell-details label, .spell .spell-details .attacks table th, .attacks table .spell .spell-details th, .spell .spell-features div label, .spell .spell-features div .attacks table th, .attacks table .spell .spell-features div th {
  color: gray;
  font-size: 9px;
  letter-spacing: normal;
  position: absolute; }

input[type="text"].mod, .rp-col .spell-casts table tr td input[type="text"] {
  border: 1px solid #999999;
  text-align: center;
  width: 15px; }

body {
  background: #333;
  font-family: 'Droid Serif', Georgia, serif; }
  body:before, body:after {
    content: " ";
    display: table; }
  body:after {
    clear: both; }

div {
  box-sizing: border-box; }

form {
  box-sizing: content-box;
  background-color: white;
  margin: 0 auto;
  width: 695px;
  padding: 20px 20px 40px;
  position: relative; }
  form:before, form:after {
    content: " ";
    display: table; }
  form:after {
    clear: both; }
  form .print-page {
    height: 977px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 695px; }

::-webkit-input-placeholder {
  color: #8c8c8c; }

::-moz-placeholder {
  color: #8c8c8c; }

strong {
  font-weight: bold; }

em {
  font-style: italic;
  font-size: .85em; }

h1 {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  font-size: 16px; }

header.main {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  background-color: #262626;
  border: 0;
  box-sizing: border-box;
  margin-bottom: 0;
  width: 100%; }
  header.main .main-inner {
    margin: 0 auto;
    width: 735px;
    padding: 5px 0 10px; }
  header.main h1, header.main h2 {
    background: transparent none;
    border: 0;
    color: #aaa;
    font-size: 21px;
    padding-bottom: 0;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 24px;
    text-indent: -2px; }
  header.main p {
    color: #999;
    padding-left: 10px;
    position: static;
    font-size: 12px; }

div header {
  background: #cccccc none;
  margin: -10px -10px 0;
  padding: 5px; }
  div header h2 {
    padding-left: 5px; }

input[type="text"] {
  background: transparent none;
  border: none;
  border-bottom: 1px solid #333333;
  color: #262626;
  font-family: 'Droid Sans', arial, helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  outline: none;
  padding: 5px; }
  input[type="text"]:focus {
    background: beige none;
    outline: none; }
  input[type="text"].mod, .rp-col .spell-casts table tr td input[type="text"] {
    background: white none; }

select {
  border: 1px solid #999999;
  background: transparent none;
  padding: 3px; }

textarea {
  background: transparent none;
  border: 0;
  color: #262626;
  font-family: 'Droid Sans', arial, helvetica, sans-serif;
  resize: none;
  overflow: hidden; }

table {
  width: 100%; }
  table thead th {
    padding: 5px 5px 5px 10px; }

.landingpage .container {
  background-color: #dbdbdb;
  border-radius: 5px;
  margin-left: -285px;
  margin-top: -150px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 570px; }
  .landingpage .container h1, .landingpage .container h2 {
    border: 0;
    font-size: 20px;
    padding: 0;
    text-align: center; }
  .landingpage .container h1 {
    margin-bottom: 10px; }
  .landingpage .container h2 {
    color: #333333;
    font-size: 12px;
    text-transform: uppercase; }
  .landingpage .container p {
    color: #333333;
    font-family: 'Droid Sans', arial, helvetica, sans-serif;
    font-size: 12px;
    margin-bottom: 12px; }
  .landingpage .container .options {
    margin: 25px auto;
    width: 405px; }
    .landingpage .container .options:before, .landingpage .container .options:after {
      content: " ";
      display: table; }
    .landingpage .container .options:after {
      clear: both; }
    .landingpage .container .options a {
      border-radius: 2px;
      background-color: white;
      box-sizing: border-box;
      border: 1px solid #bfbfbf;
      color: #333333;
      display: block;
      float: left;
      font-size: 16px;
      height: 115px;
      padding: 10px;
      position: relative;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition: all .25s ease;
      width: 190px; }
      .landingpage .container .options a.character {
        background: white url("../images/char-sheet.png") no-repeat center 0;
        margin-right: 25px; }
        .landingpage .container .options a.character:hover {
          background: #e6e6e6 url("../images/char-sheet.png") no-repeat center 0; }
      .landingpage .container .options a.spells {
        background: white url("../images/spell-sheet.png") no-repeat center 0; }
        .landingpage .container .options a.spells:hover {
          background: #e6e6e6 url("../images/spell-sheet.png") no-repeat center 0; }
      .landingpage .container .options a span {
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        transition: all .25s ease; }
        .landingpage .container .options a span:hover {
          text-shadow: 1px 1px 3px grey; }
  .landingpage .container .donate {
    display: inline;
    color: #333333;
    font-family: 'Droid Sans', arial, helvetica, sans-serif;
    font-size: 12px;
    margin-bottom: 12px;
    width: 100%; }
    .landingpage .container .donate form {
      background-color: transparent;
      display: inline;
      float: none;
      padding: 0;
      margin: 0; }
      .landingpage .container .donate form:before, .landingpage .container .donate form:after {
        display: none; }
      .landingpage .container .donate form input[type="submit"], .landingpage .container .donate form input[type="submit"]:active {
        background-color: transparent;
        border: 0;
        cursor: pointer;
        display: inline;
        float: none;
        font-family: 'Droid Sans', arial, helvetica, sans-serif;
        font-size: 12px;
        color: blue;
        margin: 0;
        padding: 0;
        text-decoration: underline; }
      .landingpage .container .donate form img {
        display: none; }

.general {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  display: block;
  float: left;
  height: 95px;
  width: 693px; }
  .general .looks {
    margin-top: 5px; }
    .general .looks div {
      display: inline; }
  .general input[type="text"] {
    text-align: center; }
    .general input[type="text"].name {
      font-weight: bold;
      width: 155px; }
    .general input[type="text"].race {
      width: 80px; }
    .general input[type="text"].class {
      width: 168px; }
    .general input[type="text"].alignment {
      width: 95px; }
    .general input[type="text"].background {
      width: 105px; }
    .general input[type="text"].deity {
      width: 115px; }
    .general input[type="text"].vision {
      width: 60px; }
    .general input[type="text"].description {
      width: 380px; }
    .general input[type="text"].xp {
      width: 61px; }
  .general label.deity-label, .general .attacks table th.deity-label, .attacks table .general th.deity-label {
    bottom: 8px;
    left: 62px; }
  .general label.vision-label, .general .attacks table th.vision-label, .attacks table .general th.vision-label {
    bottom: 8px;
    left: 159px; }
  .general label.description-label, .general .attacks table th.description-label, .attacks table .general th.description-label {
    bottom: 8px;
    left: 285px; }
  .general label.xp-label, .general .attacks table th.xp-label, .attacks table .general th.xp-label {
    bottom: 8px;
    left: 635px; }

.ac-hp-speed {
  height: 105px;
  width: 693px; }

.ac {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  float: left;
  height: 100px;
  width: 236px;
  padding-bottom: 5px; }
  .ac:before, .ac:after {
    content: " ";
    display: table; }
  .ac:after {
    clear: both; }
  .ac input[type="text"] {
    display: block;
    float: left;
    margin: 0 5px 11px 0;
    text-align: center;
    width: 35px; }
    .ac input[type="text"].ac-total {
      background: white;
      border: 0;
      border-radius: 0 0 45px 45px;
      clear: none;
      float: left;
      font-size: 35px;
      margin: 8px 25px 3px 10px;
      padding: 7px 0 17px;
      width: 70px; }
  .ac .ac-calc {
    float: left;
    margin-top: -2px;
    width: 100px; }
  .ac label.ac-label, .ac .attacks table th.ac-label, .attacks table .ac th.ac-label {
    font-weight: bold;
    position: absolute;
    top: 65px;
    left: 46px; }
  .ac label.base-label, .ac .attacks table th.base-label, .attacks table .ac th.base-label {
    top: 37px;
    left: 125px; }
  .ac label.dex-label, .ac .attacks table th.dex-label, .attacks table .ac th.dex-label {
    top: 37px;
    left: 174px; }
  .ac label.shield-label, .ac .attacks table th.shield-label, .attacks table .ac th.shield-label {
    top: 74px;
    left: 115px; }
  .ac label.misc-label, .ac .attacks table th.misc-label, .attacks table .ac th.misc-label {
    top: 74px;
    left: 173px; }

.hp {
  background: #c9c9c9 none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  float: left;
  height: 100px;
  margin-left: 5px;
  width: 235px;
  padding-bottom: 5px; }
  .hp input[type="text"] {
    display: block;
    float: left;
    margin: 0 5px 11px 0;
    text-align: center;
    width: 35px; }
    .hp input[type="text"].hp-current {
      border: 0;
      clear: none;
      float: left;
      font-size: 35px;
      margin-left: 18px;
      position: absolute;
      left: 0px;
      top: 18px;
      width: 70px;
      z-index: 2; }
      .hp input[type="text"].hp-current:focus {
        background: 0; }
    .hp input[type="text"].hp-total {
      margin-right: 12px; }
    .hp input[type="text"].hit-dice {
      clear: left;
      margin-right: 12px;
      width: 64px;
      margin-left: -28px; }
  .hp label, .hp .attacks table th, .attacks table .hp th {
    float: left; }
    .hp label.hp-label, .hp .attacks table th.hp-label, .attacks table .hp th.hp-label {
      font-weight: bold;
      position: absolute;
      top: 67px;
      left: 20px;
      z-index: 2; }
    .hp label.hp-total-label, .hp .attacks table th.hp-total-label, .attacks table .hp th.hp-total-label {
      top: 37px;
      left: 119px; }
    .hp label.hp-temp-label, .hp .attacks table th.hp-temp-label, .attacks table .hp th.hp-temp-label {
      top: 37px;
      left: 175px; }
    .hp label.hit-dice-label, .hp .attacks table th.hit-dice-label, .attacks table .hp th.hit-dice-label {
      top: 74px;
      left: 105px; }
    .hp label.remaining-label, .hp .attacks table th.remaining-label, .attacks table .hp th.remaining-label {
      top: 74px;
      left: 169px; }
  .hp .hp-calc {
    margin-left: 105px; }
  .hp .outer-heart {
    position: absolute;
    top: 9px;
    left: 18px; }
    .hp .outer-heart .heart {
      position: relative;
      width: 95px;
      height: 75px;
      margin-top: 10px; }
      .hp .outer-heart .heart:before, .hp .outer-heart .heart:after {
        background: white;
        content: "";
        height: 60px;
        position: absolute;
        left: 40px;
        top: 0;
        width: 39px;
        border-radius: 79px 79px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%; }
      .hp .outer-heart .heart:after {
        left: 0;
        left: 0;
        /* placing the right part properly */
        -webkit-transform: rotate(45deg);
        /* rotating 45 degrees clockwise */
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        /* rotation is around bottom-right corner this time */
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%; }

.speed-init {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  float: left;
  height: 100px;
  margin-left: 5px;
  padding-bottom: 5px;
  width: 212px; }
  .speed-init label, .speed-init .attacks table th, .attacks table .speed-init th {
    color: #333333;
    font-weight: bold;
    position: absolute;
    z-index: 2; }
  .speed-init input[type="text"] {
    background-color: white;
    border-bottom: 0;
    font-size: 30px;
    margin-top: 15px;
    padding: 10px;
    text-align: center;
    width: 50px; }
  .speed-init span {
    color: #333333;
    position: absolute; }
  .speed-init .speed {
    float: left;
    margin-left: 15px;
    width: 75px; }
    .speed-init .speed label, .speed-init .speed .attacks table th, .attacks table .speed-init .speed th {
      top: 13px;
      left: 25px; }
    .speed-init .speed span {
      top: 64px;
      left: 80px; }
  .speed-init .init {
    float: left;
    margin-left: 15px;
    width: 75px; }
    .speed-init .init label, .speed-init .init .attacks table th, .attacks table .speed-init .init th {
      top: 13px;
      left: 115px; }
    .speed-init .init span {
      font-size: 16px;
      font-weight: bold;
      top: 44px;
      left: 122px; }

.attacks {
  background: transparent none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  float: left;
  height: 182px;
  padding: 10px 5px 0;
  width: 618px; }
  .attacks header {
    height: 12px;
    margin-bottom: 10px;
    margin-left: -5px;
    margin-right: -5px; }
    .attacks header .inspiration {
      position: absolute;
      right: 5px;
      top: 1px; }
      .attacks header .inspiration label, .attacks header .inspiration table th, .attacks table header .inspiration th {
        font-size: 10px;
        letter-spacing: 0;
        margin-top: -5px;
        padding-right: 25px; }
      .attacks header .inspiration input {
        margin-top: 5px;
        position: absolute;
        right: 3px;
        top: -2px; }
  .attacks table td, .attacks table th {
    text-align: center;
    width: auto; }
    .attacks table td input[type="text"], .attacks table th input[type="text"] {
      text-align: center;
      width: 70px; }
    .attacks table td.weapon, .attacks table th.weapon {
      width: 90px; }
      .attacks table td.weapon input[type="text"], .attacks table th.weapon input[type="text"] {
        width: 95px; }
    .attacks table td.att, .attacks table th.att {
      width: 40px; }
      .attacks table td.att input[type="text"], .attacks table th.att input[type="text"] {
        width: 45px; }
    .attacks table td.damage, .attacks table th.damage {
      width: 75px; }
      .attacks table td.damage input[type="text"], .attacks table th.damage input[type="text"] {
        width: 80px; }
    .attacks table td.type, .attacks table th.type {
      width: 70px; }
    .attacks table td.range, .attacks table th.range {
      width: 55px; }
      .attacks table td.range input[type="text"], .attacks table th.range input[type="text"] {
        width: 60px; }
    .attacks table td.ammo, .attacks table th.ammo {
      width: 35px; }
      .attacks table td.ammo input[type="text"], .attacks table th.ammo input[type="text"] {
        width: 40px; }
    .attacks table td.properties, .attacks table th.properties {
      width: 110px; }
      .attacks table td.properties input[type="text"], .attacks table th.properties input[type="text"] {
        width: 115px; }
  .attacks table th {
    letter-spacing: normal;
    padding: 5px 0; }

.death {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  display: block;
  float: left;
  height: 182px;
  margin-left: 5px;
  text-align: center;
  width: 70px; }
  .death:before, .death:after {
    content: " ";
    display: table; }
  .death:after {
    clear: both; }
  .death header {
    text-align: left; }
  .death label, .death .attacks table th, .attacks table .death th {
    position: static;
    line-height: 24px; }
  .death input {
    display: block;
    margin: 0 auto 3px;
    width: 15px; }

.stats {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  clear: left;
  float: left;
  height: 567px;
  padding-right: 5px;
  padding-bottom: 0;
  width: 366px; }
  .stats:before, .stats:after {
    content: " ";
    display: table; }
  .stats:after {
    clear: both; }
  .stats > div {
    margin-bottom: 25px; }
    .stats > div:before, .stats > div:after {
      content: " ";
      display: table; }
    .stats > div:after {
      clear: both; }
    .stats > div.int, .stats > div.cha, .stats > div.wis {
      margin-bottom: 10px; }
    .stats > div.int, .stats > div.wis {
      margin-bottom: 8px; }
    .stats > div .ability-score {
      float: left;
      position: relative;
      margin-left: 17px;
      width: 60px; }
      .stats > div .ability-score label, .stats > div .ability-score .attacks table th, .attacks table .stats > div .ability-score th {
        font-size: 17px;
        font-weight: bold;
        line-height: 14px;
        position: absolute;
        top: 18px;
        left: -33px;
        transform: rotate(-90deg);
        text-align: center; }
        .stats > div .ability-score label.int, .stats > div .ability-score .attacks table th.int, .attacks table .stats > div .ability-score th.int {
          left: -29px; }
        .stats > div .ability-score label.wis, .stats > div .ability-score .attacks table th.wis, .attacks table .stats > div .ability-score th.wis {
          left: -30px; }
        .stats > div .ability-score label.cha, .stats > div .ability-score .attacks table th.cha, .attacks table .stats > div .ability-score th.cha {
          left: -31px; }
      .stats > div .ability-score select {
        background-color: white;
        font-size: 20px;
        height: 55px;
        padding: 8px 0 14px 10px;
        text-align: center;
        width: 60px; }
        .stats > div .ability-score select option {
          text-align: center; }
      .stats > div .ability-score input {
        font-size: 16px;
        position: absolute;
        top: 41px;
        left: 10px;
        width: 20px; }
    .stats > div .skills {
      display: block;
      float: left;
      margin-left: 5px;
      width: 266px; }
      .stats > div .skills li {
        display: inline-block;
        overflow: hidden;
        width: 128px; }
        .stats > div .skills li:nth-child(2n-1) {
          margin-right: 5px; }
        .stats > div .skills li input[type="checkbox"] {
          margin-top: 3px;
          margin-right: 3px;
          margin-left: 0;
          width: 13px; }
          .stats > div .skills li input[type="checkbox"].expertise {
            display: none; }
        .stats > div .skills li input[type="text"] {
          padding: 3px;
          font-size: 12px;
          margin-bottom: 2px; }
        .stats > div .skills li label, .stats > div .skills li .attacks table th, .attacks table .stats > div .skills li th {
          color: #262626;
          display: inline;
          position: static;
          overflow: hidden;
          width: 78px;
          text-overflow: clip;
          display: inline-block;
          white-space: nowrap; }
      .stats > div .skills.con, .stats > div .skills.str {
        margin-top: 14px;
        margin-bottom: -10px; }
      .stats > div .skills.int {
        margin-top: -10px;
        margin-bottom: 10px; }
      .stats > div .skills.wis {
        margin-top: -8px;
        margin-bottom: 7px; }
        .stats > div .skills.wis .handle-animal label, .stats > div .skills.wis .handle-animal .attacks table th, .attacks table .stats > div .skills.wis .handle-animal th {
          font-size: 8px; }
      .stats > div .skills.cha {
        margin-top: -5px;
        margin-bottom: 5px; }
      .stats > div .skills.dex .sleight-of-hand label, .stats > div .skills.dex .sleight-of-hand .attacks table th, .attacks table .stats > div .skills.dex .sleight-of-hand th {
        font-size: 8px; }
    .stats > div.skill-bonus {
      background: transparent none;
      border: 1px solid #bfbfbf;
      padding: 10px;
      position: relative;
      margin-bottom: 5px;
      background-color: #f2f2f2;
      display: block;
      height: 75px;
      padding: 5px;
      position: absolute;
      top: 157px;
      right: 8px;
      width: 145px; }
      .stats > div.skill-bonus > div {
        margin-bottom: 3px; }
        .stats > div.skill-bonus > div:last-child {
          margin-bottom: 0; }
      .stats > div.skill-bonus input {
        width: 12px; }
      .stats > div.skill-bonus label, .stats > div.skill-bonus .attacks table th, .attacks table .stats > div.skill-bonus th {
        margin-top: 5px; }
  .stats.expertise-options .skills {
    display: block;
    float: left;
    margin-left: 5px;
    width: 266px; }
    .stats.expertise-options .skills li {
      display: inline-block;
      overflow: hidden;
      width: 128px; }
      .stats.expertise-options .skills li:nth-child(2n-1) {
        margin-right: 3px; }
      .stats.expertise-options .skills li input[type="checkbox"] {
        margin-top: 3px;
        margin-right: 0;
        margin-left: 0;
        width: 11px; }
        .stats.expertise-options .skills li input[type="checkbox"].expertise {
          display: inline-block; }
        .stats.expertise-options .skills li input[type="checkbox"].save-prof {
          margin-right: 15px; }
      .stats.expertise-options .skills li input[type="text"] {
        padding: 3px;
        font-size: 10px;
        margin-bottom: 2px; }
      .stats.expertise-options .skills li label, .stats.expertise-options .skills li .attacks table th, .attacks table .stats.expertise-options .skills li th {
        color: #262626;
        display: inline;
        font-size: 8px;
        position: static;
        overflow: hidden;
        width: 70px;
        text-overflow: clip;
        display: inline-block;
        white-space: nowrap; }

.proficiencies {
  background: transparent none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  float: left;
  margin-left: 5px;
  padding-bottom: 5px;
  width: 322px; }
  .proficiencies header {
    margin-bottom: 5px; }
    .proficiencies header h2 {
      display: inline; }
    .proficiencies header .prof-bonus {
      display: block;
      position: absolute;
      top: -1px;
      right: 5px; }
      .proficiencies header .prof-bonus input {
        background-color: white;
        display: inline-block;
        padding: 3px 5px; }
  .proficiencies textarea {
    height: 82px;
    width: 294px; }

.class-features {
  background: transparent none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  float: left;
  margin-left: 5px;
  padding-bottom: 5px;
  width: 322px; }
  .class-features header {
    margin-bottom: 5px; }
  .class-features textarea {
    height: 394px;
    width: 100%; }

.page-break {
  clear: both;
  font-size: 14px;
  padding: 8px 0;
  width: 100%; }
  .page-break:before, .page-break:after {
    content: " ";
    display: table; }
  .page-break:after {
    clear: both; }

.rp-col {
  float: left;
  padding-right: 5px; }
  .rp-col .rp-content {
    background: transparent none;
    border: 1px solid #bfbfbf;
    padding: 10px;
    position: relative;
    margin-bottom: 5px;
    padding-bottom: 5px; }
    .rp-col .rp-content header {
      margin-bottom: 5px; }
    .rp-col .rp-content textarea {
      height: 62px;
      width: 338px; }
    .rp-col .rp-content.personality-traits textarea {
      height: 80px; }
  .rp-col .notes {
    background: transparent none;
    border: 1px solid #bfbfbf;
    padding: 10px;
    position: relative;
    margin-bottom: 5px;
    padding-bottom: 0px; }
    .rp-col .notes header {
      margin-bottom: 5px; }
    .rp-col .notes textarea {
      border: 0;
      height: 207px;
      padding: 0;
      width: 338px; }
  .rp-col .spell-casts {
    background: #dbdbdb none;
    border: 1px solid #bfbfbf;
    padding: 10px;
    position: relative;
    margin-bottom: 5px; }
    .rp-col .spell-casts header {
      margin-bottom: 5px; }
    .rp-col .spell-casts h3 {
      text-transform: uppercase; }
    .rp-col .spell-casts table tr td {
      padding-bottom: 4px;
      position: relative; }
      .rp-col .spell-casts table tr td label, .rp-col .spell-casts .attacks table tr td th, .attacks .rp-col .spell-casts table tr td th {
        top: 0px;
        left: 2px; }
      .rp-col .spell-casts table tr td input[type="text"] {
        width: 10px;
        margin: 10px 5px 0 0; }
    .rp-col .spell-casts table tr.used td {
      padding-top: 2px; }
  .rp-col .spell-save {
    background: #c9c9c9 none;
    border: 1px solid #bfbfbf;
    padding: 10px;
    position: relative;
    margin-bottom: 5px;
    height: 80px; }
    .rp-col .spell-save select {
      display: inline-block;
      margin: 0 5px 0 0;
      width: 55px; }
    .rp-col .spell-save input[type="text"] {
      margin: 0 5px 11px 0;
      text-align: center;
      width: 35px; }
    .rp-col .spell-save .spell-label {
      font-weight: bold;
      position: absolute;
      top: 3px;
      left: 45px; }
    .rp-col .spell-save .dc-container {
      display: block;
      float: left;
      margin-right: 5px; }
      .rp-col .spell-save .dc-container label, .rp-col .spell-save .dc-container .attacks table th, .attacks table .rp-col .spell-save .dc-container th {
        font-weight: bold;
        position: absolute;
        top: 62px;
        left: 29px; }
        .rp-col .spell-save .dc-container label.sk-label, .rp-col .spell-save .dc-container .attacks table th.sk-label, .attacks table .rp-col .spell-save .dc-container th.sk-label {
          left: 84px; }
      .rp-col .spell-save .dc-container input[type="text"] {
        background: white;
        border: 0;
        border-radius: 60px;
        clear: none;
        display: block;
        float: left;
        font-size: 25px;
        height: 28px;
        margin: 5px 0px 0px 0px;
        padding: 13px 0 12px;
        width: 56px; }
    .rp-col .spell-save .dc-calc {
      float: left;
      margin-top: -2px;
      margin-left: 15px;
      width: 205px; }
      .rp-col .spell-save .dc-calc label, .rp-col .spell-save .dc-calc .attacks table th, .attacks table .rp-col .spell-save .dc-calc th {
        display: inline-block; }
      .rp-col .spell-save .dc-calc input[type="text"] {
        display: inline-block; }
      .rp-col .spell-save .dc-calc .dc-mod-stat {
        background-color: #d9d9d9; }

.equip-col {
  float: left;
  width: 324px; }
  .equip-col .equip {
    background: #dbdbdb none;
    border: 1px solid #bfbfbf;
    padding: 10px;
    position: relative;
    margin-bottom: 5px; }
    .equip-col .equip th {
      padding: 0 0 5px;
      text-align: center; }
      .equip-col .equip th.equip-name {
        text-align: left; }
    .equip-col .equip .equip-name input[type="text"] {
      width: 90%; }
    .equip-col .equip .equip-weight, .equip-col .equip .equip-weight-total {
      width: 29px;
      padding-right: 8px; }
      .equip-col .equip .equip-weight input[type="text"], .equip-col .equip .equip-weight-total input[type="text"] {
        width: 15px; }
    .equip-col .equip .equip-value, .equip-col .equip .equip-value-total {
      width: 52px; }
      .equip-col .equip .equip-value input[type="text"], .equip-col .equip .equip-value-total input[type="text"] {
        width: 40px; }
    .equip-col .equip tr.item-total .equip-weight-total input[type="text"] {
      width: 25px; }
  .equip-col .currency {
    background: transparent none;
    border: 1px solid #bfbfbf;
    padding: 10px;
    position: relative;
    margin-bottom: 5px; }
    .equip-col .currency label, .equip-col .currency .attacks table th, .attacks table .equip-col .currency th {
      top: 65px; }
    .equip-col .currency header {
      margin-bottom: 5px; }
    .equip-col .currency input[type="text"] {
      margin-right: 5px;
      width: 41px; }
    .equip-col .currency textarea {
      clear: both;
      margin-top: 28px;
      width: 288px;
      height: 62px; }

.page-break {
  background-color: #262626;
  color: #ccc;
  padding: 10px;
  width: 673px;
  margin-bottom: 5px; }

.dialog {
  background-color: rgba(38, 38, 38, 0.9);
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 120; }
  .dialog .dialog-inner {
    background: #dbdbdb none;
    border: 1px solid #bfbfbf;
    padding: 10px;
    position: relative;
    margin-bottom: 5px;
    background-color: white;
    border: 1px solid #262626;
    position: fixed;
    top: 50%;
    left: 50%;
    height: 100px;
    margin-top: -50px;
    margin-left: -150px;
    text-align: center;
    width: 300px; }
    .dialog .dialog-inner img {
      margin: 10px 0; }
    .dialog .dialog-inner .close {
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px; }
      .dialog .dialog-inner .close:before {
        content: "\f057";
        font-family: FontAwesome;
        font-size: 30px; }
  .dialog.loading {
    display: none; }
  .dialog.help .dialog-inner {
    height: 350px;
    margin-top: -175px;
    margin-left: -300px;
    text-align: left;
    width: 600px;
    padding: 20px 50px 20px 20px; }
    .dialog.help .dialog-inner p {
      margin-bottom: 15px; }
    .dialog.help .dialog-inner ol {
      margin-left: 45px;
      list-style-type: decimal;
      margin-bottom: 20px; }
      .dialog.help .dialog-inner ol li {
        margin-bottom: 10px;
        line-height: 20px; }
  .dialog.email .dialog-inner {
    height: 200px;
    margin-top: -100px;
    margin-left: -200px;
    padding: 20px 50px 20px 20px;
    text-align: left;
    width: 400px; }
  .dialog.email p {
    margin-bottom: 15px;
    line-height: 20px; }
    .dialog.email p.label {
      margin-bottom: 0;
      font-size: 14px; }
  .dialog.email form {
    background-color: transparent;
    padding: 0;
    width: 115%; }
    .dialog.email form .email {
      border: 1px solid #bfbfbf;
      display: block;
      float: left;
      padding: 10px;
      width: 60%;
      margin-right: 5%; }
    .dialog.email form .send {
      border: 1px solid #bfbfbf;
      box-shadow: none;
      float: left;
      display: inline-block;
      margin-right: 0;
      padding: 8px inherit;
      width: 20%; }
  .dialog.short-url .dialog-inner {
    height: 135px;
    margin-top: -67px;
    margin-left: -200px;
    padding: 20px 50px 20px 20px;
    text-align: left;
    width: 400px; }
  .dialog.short-url p {
    margin-bottom: 25px; }
  .dialog.short-url .url-copy-paste {
    border: 1px solid #bfbfbf;
    display: block;
    float: left;
    padding: 10px;
    width: 100%;
    margin-right: 5%; }

.char-info-short {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  padding: 2px 3px; }
  .char-info-short input {
    border-color: #999999;
    width: 145px; }
  .char-info-short .spell-numbers {
    display: block;
    float: right;
    text-align: right;
    width: 150px; }
    .char-info-short .spell-numbers > div {
      display: inline-block;
      margin-right: 2%;
      position: relative; }
      .char-info-short .spell-numbers > div input {
        background-color: white;
        box-sizing: border-box;
        border: 1px solid #999999;
        text-align: center;
        width: 65px; }
      .char-info-short .spell-numbers > div label, .char-info-short .spell-numbers > div .attacks table th, .attacks table .char-info-short .spell-numbers > div th {
        color: #cccccc;
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%; }
      .char-info-short .spell-numbers > div.spell-atk {
        margin-right: 0; }

.spell {
  background: #dbdbdb none;
  border: 1px solid #bfbfbf;
  padding: 10px;
  position: relative;
  margin-bottom: 5px;
  padding: 2px 5px 0 3px; }
  .spell .spell-details {
    display: block;
    float: left;
    margin-right: 1%;
    width: 38%; }
    .spell .spell-details input[type="text"], .spell .spell-details select {
      background-color: white;
      box-sizing: border-box;
      border: 1px solid #999999;
      margin-bottom: 3px;
      width: 100%; }
    .spell .spell-details label, .spell .spell-details .attacks table th, .attacks table .spell .spell-details th {
      bottom: 3px;
      right: 1px;
      color: #cccccc; }
    .spell .spell-details .row {
      clear: both;
      display: block;
      width: 100%; }
      .spell .spell-details .row:before, .spell .spell-details .row:after {
        content: " ";
        display: table; }
      .spell .spell-details .row:after {
        clear: both; }
      .spell .spell-details .row div {
        position: relative;
        margin-right: 2%;
        display: block;
        float: left; }
        .spell .spell-details .row div:last-child {
          margin-right: 0; }
        .spell .spell-details .row div.spell-name {
          width: 100%; }
        .spell .spell-details .row div.spell-level {
          width: 16%; }
          .spell .spell-details .row div.spell-level input {
            text-align: center; }
        .spell .spell-details .row div.spell-school {
          width: 40%; }
        .spell .spell-details .row div.spell-cast {
          width: 40%; }
        .spell .spell-details .row div.spell-range {
          width: 49%; }
        .spell .spell-details .row div.spell-duration {
          width: 49%; }
  .spell .spell-notes {
    border-bottom: 1px solid #b3b3b3;
    display: block;
    float: left;
    margin-bottom: 8px;
    width: 61%; }
    .spell .spell-notes textarea {
      box-sizing: border-box;
      height: 80px;
      padding-bottom: 0;
      width: 100%; }
  .spell .spell-features {
    clear: both;
    display: block;
    float: none;
    font-size: 10px;
    margin: 4px 0;
    width: 100%;
    text-align: right; }
    .spell .spell-features:before, .spell .spell-features:after {
      content: " ";
      display: table; }
    .spell .spell-features:after {
      clear: both; }
    .spell .spell-features div {
      display: inline-block;
      margin-right: 2%;
      position: relative;
      line-height: 0; }
      .spell .spell-features div:last-child {
        margin-right: 0; }
      .spell .spell-features div input[type="checkbox"] {
        margin: 0;
        position: absolute;
        top: -8px;
        left: 0; }
      .spell .spell-features div label, .spell .spell-features div .attacks table th, .attacks table .spell .spell-features div th {
        padding-left: 18px;
        position: static;
        color: #333333;
        margin: 0; }
      .spell .spell-features div.v, .spell .spell-features div.s {
        margin-right: 2%; }
      .spell .spell-features div.spell-prep, .spell .spell-features div.spell-cantrip {
        float: left;
        padding-top: 5px; }
        .spell .spell-features div.spell-prep input, .spell .spell-features div.spell-cantrip input {
          top: -3px; }

.btn {
  background-color: #99d6ff;
  border: 0;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #000;
  color: #262626;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-right: 0px;
  padding: 5px 10px;
  cursor: pointer;
  margin-right: 15px;
  outline: 0; }
  .btn:hover {
    box-shadow: 1px 1px 1px #000;
    background-color: #b3e0ff; }
  .btn:before {
    font-family: FontAwesome;
    margin-right: 5px; }

.save {
  background: rgba(38, 38, 38, 0.75);
  padding: 5px 2.5%;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%; }
  .save .save-inner {
    margin: 0 auto;
    width: 735px; }
    .save .save-inner:before, .save .save-inner:after {
      content: " ";
      display: table; }
    .save .save-inner:after {
      clear: both; }
  .save label, .save .attacks table th, .attacks table .save th {
    color: #d9d9d9;
    margin-left: 10px;
    letter-spacing: 0; }
    .save label input[type="checkbox"], .save .attacks table th input[type="checkbox"], .attacks table .save th input[type="checkbox"] {
      margin-top: 5px; }
  .save input[type="submit"] {
    background-color: #ff99cc;
    float: left; }
    .save input[type="submit"]:hover {
      background-color: #ffb3d9; }
    .save input[type="submit"]:before {
      content: "\f0c7"; }
  .save .automath {
    display: inline-block;
    float: left; }
  .save button {
    float: right; }
    .save button.print {
      background-color: #ffffcc; }
      .save button.print:hover {
        background-color: #ffffe5; }
      .save button.print:before {
        margin-right: 0;
        content: "\f02f"; }
    .save button.email {
      margin-right: 0; }
      .save button.email:before {
        content: "\f0e0"; }
    .save button.help {
      background-color: #ffd699;
      text-align: center; }
      .save button.help:hover {
        background-color: #ffe0b3; }
      .save button.help:before {
        content: "\f059";
        margin-right: 0; }
    .save button.math:before {
      margin: 0; }
    .save button.math .math-icon:before {
      content: "\f1ec";
      font-family: "FontAwesome";
      margin-right: 0px; }
    .save button.math.on {
      background-color: #b3ff80; }
    .save button.math.off {
      background-color: #ff5c92; }
    .save button.link {
      background-color: #ffb3ff; }
      .save button.link:hover {
        background-color: #ffccff; }
      .save button.link:before {
        content: "\f0c1";
        margin-right: 0; }