/* -- LAYOUT -------------------------------------------------------------------
 *    page layout for navigation and content */
.nav {
	height: 100%;
	width: 220px;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url("images/general/BG_Banner.png");
	background-repeat: no-repeat;
}
.content {
	
    margin-left: auto;
    margin-right: auto;
	max-width: 900px;
    padding-bottom: 100px;
    padding-left: 230px;
}

.toc {
	position: fixed;
    top: 10px;
    transform: translate(8%, 0);
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-areas: "b b b b b";
    background: lightgray;
    border: solid 1px;
}
.toc a {
    padding: 5px;
}

/* -- GENERAL ELEMENT STYLES ---------------------------------------------------
 *    Used for consistency across all pages. */
body {
    /* serif web-safe fonts are:
     * "Times New Roman", "Didot", "Georgia", "American Typewriter" */
	font-family: "Georgia", "Didot", serif;
	font-size: 13px;
	text-align: left;
	/*background-image: url("images/general/Background_Image.jpg"); */
	background-size: cover;
	background-attachment: fixed;
    /* background-color: #AB8C70; */
}
h2 {
	text-align: center;
    border-bottom: 1px solid black;
}
h3 {
    margin-bottom: 0;
    padding-bottom: 0;
}
h4 {
    margin-bottom: 0;
    padding-bottom: 0;
}
ul {
    margin-top: 0;
    padding-top: 0;
}
img {
    /* center and shrink images to fit */
    display: block;
    margin-left: auto;
    margin-right: auto;
	padding-left : 0;
    width: 90%;
}
table {
    width: 100%;
    table-layout: fixed;
    /*border: 1px solid black;*/
    border-collapse: collapse;
	background: rgba(255, 255, 255, 0.5);
}
th, tr, td {
    padding-left: 5px;
    /*border: 1px solid black;*/
}
a {
	text-decoration: none;
}

/* -- CLASS OVERRIDES ----------------------------------------------------------
 *    can be combined as needed to get a particular effect */
.note {
    margin-bottom: 0px;
    margin-top: 5px;
    margin-left: 20px;
}
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w80 { width: 80%; }
.img2 { width: 220px; }
.img3 { width: 300px; }
.img4 { width: 400px; }
.img5 { width: 420px; }
.imgwide {width: 900px; }
.rotated { transform:rotate(-90deg); }
.caption {
    font-style: italic;
    text-align: center;
}
.centered {
	text-align: center;
}

/* -- NAVIGATION SIDEBAR (on the left) -- */
.nav {
    padding-top: 30px;
	background-image: url("images/general/BG_Banner.png");
	background-repeat: no-repeat;
}
.nav a:hover {
	color: white;
}
.menu {
    display: block;
	width: 82%;
    margin: 10px;
    padding: 5px;
    font-weight: bold;
    color: black;
    text-decoration: none;
	text-align: center;
	background-color: transparent;
	background-image: url("images/general/Button_Norm.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
.submenu {
    margin: 5px;
	margin-left: 28px;
    padding: 4px;
	width: 70%;
    color: black;
    text-decoration: none;
	text-align: center;
	background-image: url("images/general/Button_Norm.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
.picked {
    background-image:url("images/general/Button_Picked.jpg");
}

.clickable {
    margin: 15px;
    padding: 5px;
    border: solid;
    border-radius: 10px;
    color: black;
    text-decoration: none;
    font-weight: bold;
}
.clickable:hover {
	background-color: lightgray;
}

/* -- HOME PAGE -- */
.homepage-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 2 px;
}
.homepage-table th {
	font-size: 14px;
    font-weight: bold;
    padding: 10px;
}
.background_title {
	background-image: url("images/general/TxtBackground_Title.png");
	background-size: contain;
	background-repeat: no-repeat;
	text-align: center;
	text-shadow: 1px 1px #A0A0A0;
}
.background_title2 {
	background-image: url("images/general/TxtBackground_Title2.png");
	background-size: contain;
	background-repeat: no-repeat;
	text-align: center;
	text-shadow: 0 0 3px #F0FFFF, 0 0 13px #F0FFFF;
}
.background_parchment_top {
	
}
.background_parchment_mid {
	background-color: #DCC49D;
	
}
.background_parchment_bot {
	
}


/* -- OTHER -- */
.table_factions {
	border: 1px solid black;
	margin: 0px;
}
.table_creatures {
	border: 1px solid black;
	width: 100%
}
.table_creatures a {
	text-decoration: none;
	color: black;
}

.greendot {
  height: 20px;
  width: 20px;
  background-color: #29B51C;
  border-radius: 50%;
  display: inline-block;
}
.kindred {
	border: 1px solid; 
	background-color: #29B51C;
}
.greenishdot {
  height: 20px;
  width: 20px;
  background-color: #97B51C;
  border-radius: 50%;
  display: inline-block;
}
.allied {
	border: 1px solid;
	background-color:#97B51C;
}
.yellowdot {
  height: 20px;
  width: 20px;
  background-color: #ECD00C;
  border-radius: 50%;
  display: inline-block;
}
.unease {
	border: 1px solid;
	background-color: #ECD00C;
}
.orangedot {
  height: 20px;
  width: 20px;
  background-color: #EC780C;
  border-radius: 50%;
  display: inline-block;
}
.hostile {
	border: 1px solid;
	background-color: #EC780C;
}
.reddot {
  height: 20px;
  width: 20px;
  background-color: #D42C12;
  border-radius: 50%;
  display: inline-block;
}
.hated {
	border: 1px solid;
	background-color: #D42C12;
}
.blackdot {
  height: 20px;
  width: 20px;
  background-color: #160401;
  border-radius: 50%;
  display: inline-block;
}
.wrathful {
	border: 1px solid;
	background-color: #160401;
}
.bluedot {
  height: 20px;
  width: 20px;
  background-color: #00B4FF;
  border-radius: 50%;
  display: inline-block;
}
.servant {
	border: 1px solid;
	background-color: #00B4FF;
}
.purpledot {
  height: 20px;
  width: 20px;
  background-color: #683BD6;
  border-radius: 50%;
  display: inline-block;
}
.lord {
	border: 1px solid;
	background-color: #683BD6;
}

.hated_lord {
	border: 1px solid;
	background: linear-gradient(#D42C12 0%, #683BD6 100%);
}

.hostile_lord {
	border: 1px solid;
	background: linear-gradient(#EC780C 0%, #683BD6 100%);
}

.hated_servant {
	border: 1px solid;
	background: linear-gradient(#D42C12 0%, #00B4FF 100%);
}

.hostile_servant {
	border: 1px solid;
	background: linear-gradient(#EC780C 0%, #00B4FF 100%);
}

.allied_unease {
	border: 1px solid;
	background: linear-gradient(#97B51C 0%, #ECD00C 100%);	
}




/* -- BOOK PAGE ----------------------------------------------------------------
 *    content that is displayed in 1 or 2 columns and with a page background.
 *    These do not resize to smaller sizes well and will need a mobile style
 *    in the future. */
.bookpage {
    height: 1150px;
	text-align: left;
    background-image: url('images/rulebook/Page_BG1.jpg');
    background-repeat:no-repeat;
    background-size: 900px 1150px;
    padding-left: 40px;
    padding-right: 40px;
}
.bookpage-columns {
    display: flex;
    align-items: flex-end;
}
.bookpage-column {
    flex: 50%;
    align-self:stretch;
    padding: 15px;
}
.bookpage h1 {
    /* center the text on the background title area */
    padding-top: 35px;
	font-size: 24px;
    text-align: center
}
.bookpage table {
    margin: auto;
}
.bookpage th {
    background-color: #AB8C70;
}
.bookpage tr:nth-child(even) {
    background-color: #DCD1C4;
}

/* -- ADVENTURE  Pages and Chapters --------------------------------------------
 *    specific formatting for the adventure pages */
.adventure-gm {
    margin-left: auto;
    margin-right: auto;
	max-width: 900px;
    padding-bottom: 100px;
    padding-left: 230px;
}
.adventure-button {
    position: relative;
}
.adventure img {
    background-size:contain;
	max-width: 800px;
    height:300px;
}
.adventure-caption {
    position: absolute; /* relative to parent */
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 0%);
    background: white;
    padding: 5px;
    color: black;
	text-align: center;
}
.encounter {
    background-color:#e3b5af;
    padding-top:10px;
    padding-bottom:10px;
}
.attribute {
    border-style: solid;
    border-width: 1px;
    background-color:#dce0e6;
    padding:0px;
    margin:0px;
}
.skill-check {
    background-color:#dce0e6;
}
.icon {
    width: 75px;
}
.setting {
    font-style: italic;
}

/* -- WORLDLORE CSS Overrides --------------------------------------------
 *    specific formatting for the worldlore pages */
.creature tr, td:first-child {
    border: none;
}