@import url(/common--theme/base/css/text_highlighter.css);
 @import url(/common--theme/base/css/autocomplete.css);
 @import url(/common--theme/base/css/forum.css);
 @import url(/common--theme/base/css/editor.css);
 @import url(/common--theme/base/css/odialog.css);
 @import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:700|Bree+Serif|PT+Sans:400,400italic,700,700italic|IM+Fell+DW+Pica+SC|Noto+Sans:400,700,400italic,700italic);
 body{
     margin: 0px;
     font-family: 'Noto Sans', sans-serif;
 }
 
 #container {
    margin: 0 auto;
     padding: 0;
     width: 1150px;
     font-family: 'Noto Sans', sans-serif;
     font-size: 110%
 }
/* ======= 5e Blockquote ======*/
 div.myblockquote{
width:30%; 
    font-family: ScalySans;
    box-sizing: border-box;
    margin-bottom: 1em;
    padding: 5px 10px;
    background-color: #e0e5c1;
    border-style: solid;
    border-width: 11px;
    border-image: url(http://i.imgur.com/wcMGy9x.png) 11;
    border-image-source: url(http://i.imgur.com/wcMGy9x.png);
    border-image-slice: 11;
    border-image-width: initial;
    border-image-outset: 9px 0;
    border-image-repeat: initial;
    border-image-outset: 9px 0;
    box-shadow: 1px 4px 14px #888;
}
div.myblockquote h5{
margin-bottom: .2em;
    font-family: ScalySansSmallCaps;
    font-size: .423cm;
    font-weight: 900;
}

/* ======= TABLE FORMATS ======*/
 /* My Custom Tables */

table.mytable{
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0.5em auto;
           border:0px;
/* This affects normal cells of MyTable */
}
table.mytable td{
	border: 1px solid #888;
	padding: 0.3em 0.7em;
}
/* Affects the Header of MyTable requires the use of [hcell] for this to work */
table.mytable th{
	border: 1px solid #888;
	padding: 0.3em 0.7em;
	background-color: #e0e5c1;
        text-align:center;
}

table.mytable tr:nth-child(even) {background: #f7f2e5}
table.mytable tr:nth-child(odd) {background: #e0e5c1}


/*WIKIDOT Tables */

table.wiki-content-table{
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0.5em auto;
        margin-left: 0px;
}
table.wiki-content-table td{
	border: 0px solid #888;
	padding: 0.3em 0.7em;
}
/* Affects the Header of MyTable requires the use of [hcell] for this to work */
table.wiki-content-table th{
	border: 0px solid #888;
	padding: 0.3em 0.7em;
	background-color: #e0e5c1;
        text-align:center;
}

table.wiki-content-table tr:nth-child(even) {background: #f7f2e5}
table.wiki-content-table tr:nth-child(odd) {background: #e0e5c1}





/* =======END OF TABLE FORMATS======= */


/* My Custom Button black 140c0a red 9d0a0e  */

.cta-button a {color:#fff !important;}
.cta-button a:hover {    color:#fff !important;
     background-color:transparent;

}

.cta-button,.cta-button:after{
    color:#fff !important;
    font-weight:700;
    font-size:150%;
    text-decoration:none;
    text-transform:uppercase;
    background:#9d0a0e 50% 50% no-repeat;
    background-size:auto !important;
    -webkit-transition-property:-webkit-box-shadow,background-color;
    -webkit-transition-duration:.25s;
    -webkit-transition-timing-function:ease-in-out;
    -moz-transition-property:-moz-box-shadow,background-color;-moz-transition-duration:.25s;
    -moz-transition-timing-function:ease-in-out;
    transition-property:box-shadow,background-color;
    transition-duration:.25s;transition-timing-function:ease-in-out;
}

.cta-button:hover,.cta-button:hover:after{
    color:#fff !important;
    background-color:#b51014 !important;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,.7);
    -moz-box-shadow:0 0 5px rgba(0,0,0,.7);
    box-shadow:0 0 5px rgba(0,0,0,.7);
}
.cta-button{
    margin-left:33px;
    padding:.2em 10px;
    display:inline-block;
    position:relative;
    z-index:100;
}
/* This is the arrow thing */ 
.cta-button:after{
    content:"";
    width:30px;
    background-image:url(http://dnd.wizards.com/sites/all/themes/dx/img/interface/learn-more-button-icon.png);
    position:absolute;
    top:0;
    bottom:0;
    left:-33px;
}

/* header  http://i.imgur.com/BfPQ5Lp.png (main)   https://i.imgur.com/VH7hEVI.png (tiamat)   */
 #header {
     position: relative;
     z-index: 30;
    height: 170px;
   font-family: 'Bree Serif', serif;
     background-image: url('https://i.imgur.com/VH7hEVI.png');
 }
  
 /* header 2   */
 #header h2{
     margin: 0;
     padding: 0;
    position: absolute;
    left: 50px;
    top: 110px;
    font-family: 'IM Fell DW Pica SC', serif;
     color: white;
 }
 
 #content-wrap {
     _height: 1%;
     min-height: 1px;
    padding: 10px 0px 1px 0px;
 }
 
 /* side-bar */
 
 #side-bar{
/*    float: left;*/
   /* width: 200px;*/
  /*  padding: 10px;*/
  /*  margin: 0px 10px;*/
  /*  clear: left;*/

padding: 5px;;
width: 130px;
z-index: 75;
position: fixed;
}
 /*   */
 #page-title{
     margin: 0 0 0.5em 0;
    padding-top: 0em; /* Firefox bug? */
     font-size: 200%;
     border-bottom: 1px solid #666;
  font-family: 'IM Fell DW Pica SC', serif;
    color: #8C1717;
 }
 
 #main-content{
    margin: 0px 20px 10px 20px;
    padding: 10px 10px;
 }
 
 /* * html #main-content {
height: 1%;} */
 
 #license-area {
     padding: 0.5em 0;
     color: #555;
}
 #account-options li{
     display: block;
     margin: 0; padding: 0;
    width: 100%;
     color: white;
 }
#account-options li a {
     display: block;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     padding: 2px 5px;
     z-index: 40;
    width: 100%;
 }
 
#account-options li a:hover {
     color: black;
 }
#account-topbutton {
     font-size: 80%;
     font-weight: bold;
     padding: 0 5px;
 }
 #top-bar{
font-weight:500;
text-transform:uppercase;
position:absolute;
bottom:0px;
left:10px;
z-index:0;
width: 1200px;
-webkit-transition:left .25s ease-in-out;-moz-transition:left .25s ease-in-out;-ms-transition:left .25s ease-in-out;-o-transition:left .25s ease-in-out;transition:left .25s ease-in-out;
font-family: 'Bree Serif', serif;
   white-space:nowrap;
overflow:visible;
}

 
 #top-bar li {
     list-style: none;
     float:left;
     margin: 0 5px;
     padding:0;    
     height: 22px;
   white-space:nowrap;
overflow:visible;
 }
 #top-bar li ul{
     padding: 0;
     text-align: center;
     margin: 0;
     padding: 0.3em 1em;
     text-decoration: none;
     display:block;
     white-space:nowrap;
overflow:visible;

 }
#top-bar a{
   white-space:nowrap;
overflow:visible;
-webkit-transform:translateZ(0);-webkit-transition-property:color,background-color;-webkit-transition-duration:.25s;-webkit-transition-timing-function:ease-in-out;-moz-transition-property:color,background-color;-moz-transition-duration:.25s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:color,background-color;-ms-transition-duration:.25s;-ms-transition-timing-function:ease-in-out;-o-transition-property:color,background-color;-o-transition-duration:.25s;-o-transition-timing-function:ease-in-out;transition-property:color,background-color;transition-duration:.25s;transition-timing-function:ease-in-out;
}
 #top-bar a:hover {
     border-bottom-color:#fff; /* different border color */
 }


/* Site background image */
 /*     background-image: url(http://gdnd.wdfiles.com/local--files/welcome/vellum_background.png); */
body {


    background-image: url(http://i.imgur.com/52fODF1.jpg);
    background-position: top center;
    background-repeat: repeat;
 
}
 
/* Background color of all content of the page below header */
#content-wrap {
    background-color: #fdf1dc;
    opacity: 0.85;
    background-repeat: repeat-x;
    background-position: top center;
     border-top: 5px solid #e69a28;
     border-bottom: 5px solid #e69a28;
}
 
/* Color of page content */
#main-content {
    background-color: #fdf1dc;
    color: black;
    margin-top: 0px;
}
 
#header h1 {
    position: absolute;
    left: 20px;
    top: 53px;
   font-family: 'IM Fell DW Pica SC', serif;
    color: White;
}
 /*    */
#header h1 a {
    color: White;
    font-size: 60px;
    font-weight: bold;
    font-stretch: expanded; 
    text-decoration: none;
     font-family: 'IM Fell DW Pica SC', serif;
 
}
 
#header h1 a:hover {
    background-color: transparent;
    text-decoration: none;
}
 
#header h2 {
    color: #8C1717;
    font-family: 'IM Fell DW Pica SC', serif;
}
 
/* 1st MENU ELEMENT */
 
/* Background color #A4121A*/
#top-bar li {
    background-color: #fdf1dc;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
}
 
/* Font color and decoration */
#top-bar li a {
    color: #A4121A;
    text-decoration: none;
}
 
/* Background color on hover */
#top-bar a:hover{
    background-color: #A4121A; 
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;

}
 
/* Font color on hover*/
#top-bar li a:hover {
    color: #fdf1dc;
    text-decoration: none;
}
/* ---------------------------------- */
 
/* 2nd MENU ELEMENT */
#top-bar ul li ul {
    background-color: ;
    border: 0px;
}
 /* A4121A*/ 
#top-bar ul li ul a {
    background-color: #fdf1dc;
    -moz-border-radius: 0px;
}
 
#top-bar ul li ul a:hover {
    background-color: #A4121A; 
    -moz-border-radius: 0px;
color:#fdf1dc;
}
 
/* ---------------------------------- */
 
/* color of side-bar*/
#side-bar {
    background-color: white;
    margin-top: 20px;
}
 
/*  FONTS   */
 
/* General font family and color*/
body {
     font-family: 'Noto Sans', sans-serif;
    color: ;
}
 
/* Font family of headers */
h1,h2,h3,h4,h5,h6{
    font-family: 'IM Fell DW Pica SC', serif;
    color: #922610;
}
 
/* Sizes, weight and text-decorations of headers */
h1{
    font-size: 190%;
    font-weight: normal;
    text-decoration: none;
    margin-bottom: -5px;
    font-family: 'IM Fell DW Pica SC', serif;
}
h2{
    font-weight: normal;
    font-size: 140%;
    text-decoration: none;
    color: #8C1717;
    background: #e8cca2;
    display:flex;
    padding:3px 15px;
    max-width: 95%;
}
h3{
    font-weight: normal;
    font-size: 140%;
    text-decoration: none;
    margin-bottom: -5px;
}
h4{
    font-weight: bold;
    font-size: 130%;
    text-decoration: none;
    margin-top: -3px; 
    margin-bottom: -3px; 
}
h5 {
    font-weight: bold;
    font-size: 100%;
    text-decoration: none;
}
h6 {
    font-weight: bold;
    font-size: 90%;
    text-decoration: none;
}


/* ====== PLAYER HANDBOOK FORMATS START ==== */
/*#CEC*/
/* Sidebar is greem */
div.phb-sidebar{
    float: right;
    width: 30%;
    padding-left: 10px;
    padding-right: 10px;
    margin: 10px;
    border: 1px solid gray;
    background-color: #e0e5c1;
}
div.phb-leftsidebar{
    float: left;
    width: 30%;
    padding-left: 10px;
    padding-right: 10px;
    margin: 10px;
    border: 1px solid gray;
    background-color: #e0e5c1;
}

/* RIGHT info bar is beige*/
div.phb-infobar{
    float: right;
    width: 30%;
    padding-left: 10px;
    padding-right: 10px;
    margin: 10px;
    border: 1px solid gray;
    background-color: #f0dbb5;
}

/* LEFT INFO BAR*/
div.phb-leftinfobar{
    float: left;
    width: 30%;
    padding-left: 10px;
    padding-right: 10px;
    margin: 10px;
    border: 1px solid gray;
    background-color: #f0dbb5;
}
div.errata{
    float: right;
    width: 30%;
    padding-left: 10px;
    padding-right: 10px;
    margin: 10px;
    border: 1px solid gray;
    background-color: #FEA;
}


/* ====== END PLAYER HANDBOOK FORMATS ==== */
div.navigation{
    display:inline-block;
    vertical-align: top;
    width: 20%;
    margin: 0 5px 0 0;
}

div.navigation h1{
    font-size: 150%;
    margin-bottom: -5px;
    max width: 100%;
    background: white;
    padding: 5px;
}

div.subnav{
    background:#EEE9E9; 
    border:1px black solid; 
    font-size: 110%; 
    padding: 0 15px 15px 15px; 
    margin-bottom: 5px;
}

div.chart{
    display:inline-block;
    margin: 0 5px 0 0;
}

div.chart h1{
    font-size: 150%;
    max width: 100%;
    background: white;
    padding: 5px;
    -webkit-column-span: all; 
    -moz-column-span: all;
    column-span: all; 
}

div.subchart{
    background:#EEE9E9; 
    border:1px black solid; 
    font-size: 110%; 
    margin-bottom: 5px;
    padding: 0 15px 15px 15px; 
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
.stubbornlink.a{color: #D11218;}

a {
    color: #D11218;
}
 
a:hover {
    color: #E64043;
}
 
a:visited {
    color: #D11218;
}
 
a.newpage {
    color: black;
}
 
a.newpage:hover {
    color: #B0A6A4;
    text-decoration: underline;
}
 
/* Font, size, color and border of page title    */
#page-title {
    font-family: 'Bree Serif', serif;
    border-bottom: 1px solid #666666;
    font-size: 200%;
    margin: 0pt 0pt 0.5em;
    padding-top: 0em;
}
 
#footer {
    color: #BD1419;
    background-color: white;
    opacity: 0.8;
    border-bottom:1px solid #888;
    border-top:1px solid #888;
}
 
#footer a {
    color: #BD1419;
    text-decoration: none;
}
 
#license-area {
    color: white;
}
 
#license-area a {
    color: #8C1717;
    text-decoration: none;
}
 
#license-area a:hover {
    color: white;
    text-decoration: underline;
    background-color: transparent;
}

/* Center SHit */
.center{margin: auto;width: 50%;}

/* ALERT BOX */
.alert-box {
    color:#555;
    border-radius:10px;
    font-family:Tahoma,Geneva,Arial,sans-serif;
    font-size:11px;
    padding:10px 10px 10px 36px;
    margin: 10px;
}

.error {
    background:#ffecec url('http://i.imgur.com/EgiXva6.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;float:left;
}
.success {
    background:#e9ffd9 url('http://i.imgur.com/vJZz8m1.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;float:left;
}
.warning {
    background:#fff8c4 url('http://i.imgur.com/mpwdGRw.png') no-repeat 10px 50%;
    border:1px solid #f2c779;float:left;
}
.notice {
    background:#e3f7fc url('http://i.imgur.com/blbgzs1.png') no-repeat 10px 50%;
    float:left;border:1px solid #8ed9f6; 
}

/* Spell Card */


.spell-block h1{
      font-family: 'Libre Baskerville', 'Lora', 'Calisto MT',
                   'Bookman Old Style', Bookman, 'Goudy Old Style',
                   Garamond, 'Hoefler Text', 'Bitstream Charter',
                   Georgia, serif;
      color: #7A200D;
      font-weight: 700;
      margin: 0px;
      font-size: 23px;
      letter-spacing: 1px;
      font-variant: small-caps;
    }
.spell-block h2{
      font-weight: normal;
      font-style: italic;
      font-size: 12px;
      margin: 0;
    }

.spell-block h3{
      border-bottom: 1px solid #7A200D;
      color: #7A200D;
      font-size: 21px;
      font-variant: small-caps;
      font-weight: normal;
      letter-spacing: 1px;
      margin: 0;
      margin-bottom: 0.3em;

      break-inside: avoid-column;
      break-after: avoid-column;
    }
.spell-block h4{
      margin: 0;
      display: inline;
      font-weight: bold;
      font-style: italic;
    }
.spell-block p {
      text-indent: 1em;
      margin: 0;
    }
.stat-block p:first-of-type {
      display: inline;
      text-indent: 0;
    }
.spell-block {
  margin-left: 20px;
        margin-top: 20px;
      font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial,
                    sans-serif;
      font-size: 13.5px;
      background: #FDF1DC;
      padding: 0.6em;
      padding-bottom: 0.5em;
      border: 1px #DDD solid;
      box-shadow: 0 0 1.5em #867453;

      /* We don't want the box-shadow in front of the bar divs. */
      position: relative;
      z-index: 0;

      /* Leaving room for the two bars to protrude outwards */
      margin-left: 2px;
      margin-right: 2px;

      /* This is possibly overriden by next CSS rule. */
      width: 400px;

      -webkit-columns: 400px;
         -moz-columns: 400px;
              columns: 400px;
      -webkit-column-gap: 40px;
         -moz-column-gap: 40px;
              column-gap: 40px;

      /* When height is constrained, we want sequential filling of columns. */
      -webkit-column-fill: auto;
         -moz-column-fill: auto;
              column-fill: auto;
    }

.spell-block table {
      width: 100%;
      border: 0px;
      border-collapse: collapse;
    }
.spell-block th, .stat-block td {
      width: 50px;
      text-align: center;
    }


/* PROMO TABLES */
.dimage,
.dimage > img {
position: relative;
width: 100%;
background: #000000;
}

.dimage > span {
color: white;
font-size: 12px;
font-weight: bold;
/* letter-spacing: -1px; */
padding: 10px;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
}
@media screen and (max-width: 680px) {
    .dimage > span {
        font-size: 0.5rem;
    }
}
.dimage > space.spacer {
padding: 0 5px;
}
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";

}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}