/*
 * fantasy.css
 *
 * A cool fantasy-esque stylesheet.
 *
 * The constraint here is that the HTML must be hand-maintainable, but
 * look cool.  Hopefully I've succeeded.
 *
 * Depends on an "chrome" directory.
 */

body {
  font-family: sans-serif;
  font-size: 11pt;
  background-image: url("chrome/parchmentBackground.png");
  margin: .5in;
  margin-bottom: 2in;
}

h1, h2, h3, h4, h5 {color: #110170; font-family: sans-serif;}

h1 {
  background-image: url("chrome/runes1.gif");
  background-repeat: repeat-x;
}
h2 {
  border-bottom: solid #d4d1cd 1px;  
  margin-top: .3in;
  /*background-image: url("chrome/runes3.gif");
  background-repeat: repeat-x;*/
}

h3 {
}

h1 { margin-top: .2in; }
h2 { margin-top: .4in; }

h2, h3, h4, h5, p, ul, ol, table, pre, div.label, div.definition, div.footer,
div.quickstats, div.summary
{}

li ul {
  margin-left: 0in;
  margin-right: 0in;
}

img {
  -moz-border-radius: 5px;
}

li { margin-bottom: 6px; }
li li { margin-bottom: 0px; }

div.link {margin-left: .6in; margin-right: .6in;}
div.link a,
div.link span.noLink
{
  color: black; 
  font-weight: bold; font-family: sans-serif;
}

.glossary
{
  color: black; 
  font-weight: bold; font-family: sans-serif;
}

p, div.label, div.link, div.definition 
{
  margin-top: 0px;
  margin-bottom: .7em;
  font-size: 11pt;
}

a { color: #2102d9; text-decoration: none; }
a:hover { color: #d90221; text-decoration: underline; }

div.label { font-weight: bold; }
.label { font-weight: bold; color: #d90221; }

span.date
{
  font-weight: bold;
}

div.dividerRunes {
  margin-top: .1in;
  margin-bottom: .1in;
  height: 16px;
  background-image: url("chrome/runes3.gif");
}

.figure {
  width: 210px;
  float:right;
  clear: right;

  padding: .1px;
  margin: .1in;
  margin-left: .4in;

  margin-right: .1in;

  -moz-border-radius: 3px;

  background-image: url("chrome/parchmentBackgroundBlueGlass.png");

  /*background-color:#f1f1fd;*/
  /*border: solid #0000cc 1px;*/
  /*border-left: solid #f0f0f0 1px;
  border-bottom: solid #b1b6cf 1px;*/
  border: solid #b1b6cf 1px;
}

.sidebar, .wideSidebar {

/*  background-image: url("chrome/sidebarRunes.gif");
  background-repeat: repeat-y;
  background-position-x: 4px; */

  width:150px;
  float:right;
  clear: right;

  padding:.1in;

  margin-left: .4in;
  margin-right: .1in;
  margin-bottom: .1in;

  background-image: url("chrome/parchmentBackgroundBlueGlass.png");

  /* background-color:#f1f1fd; */
  /*border: solid #0000cc 1px;*/
  border: solid #f0f0f0 1px;
  border: solid #b1b6cf 1px;

  -moz-border-radius: 3px;

  font-family: sans-serif;
}
.wideSidebar {
  width: 50%;
}

.wideSidebar p,
.sidebar p,
.wideSidebar ul,
.sidebar ul {
  font-size: smaller;
  padding-left: 0in;
  padding-right: 0in;
  margin-left: 0in;
  margin-right: 0in;
  margin-top: 0in;
}


.wideSidebar *,
.sidebar * { margin-left: 0px; }

.wideSidebar h1,
.sidebar h1 { background-image: none; font-size: 12pt; margin-top: 0px; }

.wideSidebar ul,
.sidebar ul {
  padding-left: .1in;
}

.wideSidebar li,
.sidebar li { margin-bottom: 2px; }


table p {
  padding-left: 0in;
  padding-right: 0in;
  margin-left: 0in;
  margin-right: 0in;
  margin-top: 0in;
}

div.caption {

  font-size: smaller;
  font-family: Verdana,sans-serif;
  font-weight: bold;
  color: #110170;
  text-align: center;

  padding-top: 2px;
  padding-bottom: 5px;

}

div.footer {
  margin-top: 1in;
  margin-bottom: .5in;
  padding-top: 6px;

  color: #110170;
  text-align: right;

  background-image: url("chrome/runes2.gif");
  background-repeat: repeat-x;
  clear: both;
}

table { /*font-size: smaller;*/ }
th, td { vertical-align: top; }
tr.alt { background-color: white; }
th { text-align: left; }

table.cols { font-size: medium; }

img.photo {
  border: solid black 1px;
  padding: 3px;
}

div.box {
  margin-bottom: 1em;
  padding-top: 1em;
  padding-bottom: 1em;

  /*margin-left: .5in; margin-right: .5in;*/
  clear: left;
}

div.box p {
  margin-left: 0in;
  margin-right: 0in;
  margin-top: 0in;
  margin-bottom: 0in;
}

div.boxImage {
  /*text-align: center;*/
  float: left; clear: left;
  padding-right: 1em;
}

div.boxTitle {
  /*text-align: center;*/
  font-weight: bold;
  font-size: large;
  font-family: sans-serif;
}

div.boxText {
  text-align: left;
  /*margin-left: 2em;
  margin-right: 2em;*/
  /*font-size: normal;*/
}

div.boxText p {
  margin-left: 0;
  margin-right: 0;
}

table.columnSet {
  /*margin-left: .5in; margin-right: .5in;*/
  padding: 0px;
}

td.column {
  padding-left: 5pt;
  padding-right: 5pt;
  width: 33%;
}


img.columnWaxSeal {
  position: relative;
  top: -50px;
  margin-bottom: -50px;
}

span.secret {
  /*font-weight: bold;*/
  /*color: #7d1d00;*/
  background-color: #f2dbdb; 
}

div.quickstats
{
  /*font-size: smaller;*/
  margin-bottom: .7em;
}

div.summary
{
  /*font-size: smaller;*/
  margin-bottom: .7em;

  border: solid #d4d1cd 1px;  
  -moz-border-radius: 3px;
  padding: 5px;
  background-color: #fffffd;

}

div.novelty:before,
div.vignette:before,
div.encounter:before,
div.adventure:before,
div.secret:before,
div.goal:before
{ font-weight: bold; }

div.novelty,
div.vignette,
div.encounter,
div.adventure,
div.secret,
div.goal
{
  margin-top: 0px;
  margin-bottom: .7em;

  /*margin-left: .5in; margin-right: .5in;*/

/*
  font-size: small;
  margin-left: .7in; margin-right: 2.7in;
  border-style: solid; border-width: 2px;
  -moz-border-radius: 3px;
  padding: 5px;
  background-color: #FFFDF8;
*/
}
       
div.novelty:before { content: "Novelty: "; }
div.vignette:before { content: "Vignette: "; }
div.encounter:before { content: "Encounter: "; }
div.adventure:before { content: "Adventure: "; }
div.goal:before { content: "Goal: "; }

div.secret:before { content: "Secret: "; }
div.secret
{
  background-color: #f2dbdb; padding: 5px;
  border: solid #d4d1cd 1px;
  -moz-border-radius: 3px;
}

div.npc:before, div.rules:before
{ color: black; font-weight: bold; }
div.npc, div.rules
{
  margin-top: 0px;
  margin-bottom: .7em;

  font-size: small;
  /*margin-left: .1in; margin-right: .1in;*/

  border: solid #d4d1cd 1px;  
  -moz-border-radius: 3px;
  padding: 5px;
  background-color: #fffffd;
}

div.npc:before { content: "NPC: "; }
div.rules:before { content: "Rules: "; }


span.coins1:before {content: url("chrome/coinIcon1.png");}
span.coins2:before {content: url("chrome/coinIcon2.png");}
span.coins3:before {content: url("chrome/coinIcon3.png");}

span.stars1:before {content: url("chrome/starIcon1.png");}
span.stars2:before {content: url("chrome/starIcon2.png");}
span.stars3:before {content: url("chrome/starIcon3.png");}

div.cols {
 -moz-column-count: 2;
 -moz-column-gap: .2in;

  margin-right: 2in;

}

div.cols3 {
 -moz-column-count: 3;
 -moz-column-gap: .2in;

  margin-right: 2in;

}