/* Main body style */

body { margin: 0px; }
.bodyBlock { padding: 5px 15px; margin: 0px auto;
	width:100%; max-width:1200px; min-height: 86vh;}
.bodyBlock.wide { max-width:2000px; }

table.screenHeight, .screenHeight_nav { width: 100%; padding: 0px; margin: 0px; 
	border:none; border-spacing: 0px; border-collapse: collapse; }
table.screenHeight { min-height: 100vh; }
.screenHeight_nav { background-color: #ccc; }


/* Headings */

div.chapter_section, div.chapter_subsection {margin-top: 20px;}

p {margin: 0px 0px 10px;}
p:last-of-type {margin: 0px;}
p.chapter_heading {margin: 50px 0px 0px; display:block;}
p.chapter_section {margin: 20px 0px 0px; }
p.chapter_heading a, p.chapter_section a, p.chapter_subsection a, strong a,
p.chapter_heading a:link, p.chapter_section a:link, p.chapter_subsection a:link, strong a:link,
p.chapter_heading a:hover, p.chapter_section a:hover, p.chapter_subsection a:hover, strong a:hover,
p.chapter_heading a:visited, p.chapter_section a:visited, p.chapter_subsection a:visited, strong a:visited,
p.chapter_heading a:active, p.chapter_section a:active, p.chapter_subsection a:active, strong a:active {color:black;}
p.chapter_subsection {margin: 15px 0px 0px; }
li p.chapter_subsection {margin: 0px;}

.inline { display:inline-block; clear:left; }
.indent {padding-left:20px; padding-right:20px;}

/*
div.chapter_section, div.chapter_subsection,
p.chapter_heading, p.chapter_section, p.chapter_subsection {display:inline-block;}
*/


/* delete these? */

/*.imageTable { background: red; }*/
/*.noteTable { background: green; }*/
.shortLeftImg {max-height: 200px; width:auto; margin-right:10px; }
.leftTable { float: left; clear: left; margin: 0px 10px 10px 0px; }
.left_800 {	display:inline-block; float:left; }
.break_800 {clear:inherit}
.leftInset_800 {margin: 0px 15px 10px 0px; float:left; max-width:50%;}


/* center and sidebars */

.centerDiv { display:table; margin-left: auto; margin-right: auto;	}
.centerBox { display: table; max-width: 70%; max-width:820px; margin: 15px auto 20px; }
img.centerBox {margin: 5px auto;}
div.centerBox.noteTable {padding:0px 40px;}

.sidebar, .sidebarWide { clear: right; float: right;
	border: none; display:table; background-color: white;
	margin: 0px 0px 10px 10px; padding: 0px 0px 10px 10px; }
.sidebar { width: 25%;	max-width: 270px; }
.sidebarWide { max-width: 50%; }

.exampleTable .sidebarWide, .exampleTable .sidebar, 
.flavorTable .sidebarWide, .flavorTable .sidebar {margin: 0px 10px 10px; padding: 0px 10px 10px;}

.drop {margin-top: 30px; }
div.sideImgDiv.drop {margin-top: 10px; }

.chapter_link {padding: 0px; margin: 0px; border: none;}
.chapter_link img:nth-of-type(1) {min-width: 80px;}
.chapter_link img.dice_20 {min-width: 22px;}

.noteDiv { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-style: italic; color: #666; font-size:12px;
	display: table;	max-width: 70%; max-width:820px; margin: 5px auto 12px; padding: 0px 40px; }

@media screen and (max-width: 800px) {
	.noteDiv { padding: 0px 5vw; }

	div.centerBox, table.centerBox { max-width: 560px; }
	
	div.sidebar img {max-width:80%;}
	.sidebar img.tall { max-height:150px; width:auto; max-width:100%; }	
	
	.sidebar, .exampleTable .sidebar,
	.sidebarWide, .exampleTable .sidebarWide {float:none; clear:all; margin: 5px auto; padding: 5px;
/*		width: 70%;*/
		width: auto;
		max-width: 400px; display:table; vertical-align: middle;}	
	
	
	.sidebarWide, .exampleTable .sidebarWide { padding: 0px;
		max-width: 80%; }

.drop {margin-top: 5px; }
div.sideImgDiv.drop {margin-top: 5px; }	
	
	}

@media screen and (max-width: 400px) {
	div.centerBox, table.centerBox { max-width: 100%; }
	}


/*all the different columns*/

table.columnsTable table, table.columnsTable table td {border-style: none; }
table.columnsTable table table td {border-style: solid;}

@media screen and (max-width: 800px) {
	table.columnsTable, table.columnsTable td {border-style: none; padding: 0px; border-spacing: 0px;}
	table.columnsTable table table td {border-style: solid; padding: 3px;}
}

div.columnsWide {display:table; margin: 0px auto; }
div.columnsWide > div {display:table-row;}
div.columnsWide > div > div {display:table-cell; padding-right:40px; vertical-align: middle;}
div.columnsWide > div > div:last-of-type {padding-right:0px;}

@media screen and (max-width: 1200px) { div.columnsWide, div.columnsWide > div, div.columnsWide > div > div {display:block; padding-right:0px;} }

@media screen and (max-width: 800px) and (min-width: 600px){
	div.columnsSidebar {display:table; margin: 0px auto; }
	div.columnsSidebar > div {display:table-row;}
	div.columnsSidebar > div > div {display:table-cell; padding:0px 5px; vertical-align: middle;}
	}

/*responsive sleight of hand*/

.show_800, .show_1000 { /* display:inherit; */ }
.hide_400, .hide_600, .hide_800, .hide_1000, .show_800_1000 { display:none; }

@media screen and (max-width: 1000px) {
	.show_1000 { display:none; }
	.hide_1000, .show_800_1000 { display:inherit; }
}

@media screen and (max-width: 800px) {
	.show_800, .show_800_1000 {	display:none; }
	.hide_800 { display: inline;}
	table.hide_800 {display:table;}
	tr.hide_800 {display: table-row;}
	td.hide_800, th.hide_800 {display: table-cell;}
	tbody.hide_800 {display: table-row-group;}
	p.hide_800 {display: block;}
	
	.left_800 {	display:block; float:none; }	
	.leftInset_800 {margin: 0px auto 10px; float:none; display:block; max-width:100%;}	
}

@media screen and (max-width: 600px) {
	.show_600 {	display:none; }
	.hide_600 { display: inline;}
	table.hide_600 {display: table;}
	td.hide_600 { display: table-cell;}
}

@media screen and (max-width: 400px) {
	.show_400 {	display:none; }
	.hide_400 { display: inline;}
}


/* Stat lines under chapter section headings */

.statLine, .statLine2 { display: table; padding: 0px 0px 5px; margin: -2px 0px 4px 0px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-style: italic; color: #666; font-size: 12px; }
.stat {display:inline-block; padding:0px 8px 0px 0px;}
.statLine div { display: inline; }

.statLine2 { padding: 0px; margin: -6px 0px 4px 0px;}
.statLine2 > div { display: inline-block; margin:0px 0px 2px 10px;}
.statLine2 > div > div { display: inline-block; margin:2px 4px 0px 0px;}
.statLine2 > div > div > div { display: inline-block; margin:0px 4px 0px 0px;}

@media screen and (max-width: 800px) {
	.statLine > div { display: block; padding-left: 4vw; }
	.statLine > div:first-of-type { margin-top: 5px; }
	.statLine > div:last-of-type { margin-bottom: 5px; }
	.statLine > div > br { display: none; } }
@media screen and (max-width: 600px) { .statLine > div > div { display: block; } }
@media screen and (max-width: 400px) { .statLine > div > div > div { display: block; } }


/* All of the fake tables that switch orientation at media 800 */

div.column_800, div.column_600,
div.bookplate, div.chapter_link, div.die_results { display: table; }
div.column_800 > div, div.column_600 > div, 
div.bookplate > div, div.chapter_link > div, div.die_results > div { display: table-row; }
div.column_800 > div > div, div.column_600 > div > div,
div.chapter_link > div > div, div.die_results > div > div
	{ display: table-cell; vertical-align: middle; padding: 0px 5px; }

div.die_results { margin-bottom: 10px; margin-top: 5px;}
div.die_results > div > div:last-of-type { padding: 5px 5px; }

div.chapter_link > div > div:nth-of-type(2) { text-align:left; padding-left:15px; }

div.bookplate > div > div { display: table-cell; text-align: left; padding: 15px; }
div.bookplate > div > div:nth-of-type(1) { vertical-align: middle; }
div.bookplate > div > div:nth-of-type(2) { vertical-align: top; padding-top: 40px; }

div.image_400 { width:400px; max-width:40%; text-align: center;}


@media screen and (max-width: 1000px) {

	div.chapter_link,
	div.chapter_link > div,
	div.chapter_link > div > div {display:block; text-align:center; }	

	div.chapter_link > div > div:nth-of-type(2) {padding:10px 0px 0px;}	
	
	.chapter_link img:nth-of-type(1) {margin: 0px 0px 5px; }
	
}


@media screen and (max-width: 800px) {
	
	.break_800 {display:none;}
	
	div.row_800 { display:table-row; }
	div.row_800 > div {display:table-cell; vertical-align: middle; min-width:150px; }
		
	div.column_800 { display: block; margin: 0px auto; max-width:70% }
	div.column_800 > div, div.column_800 > div > div,
	div.bookplate > div, div.bookplate > div > div { display: block; margin: 5px auto; }
	
	div.bookplate > div > div:nth-of-type(2) { padding: 0px 5vw; }

	div.image_400 { width: 80%; max-width:80%; }

	div.chapter_link 				{ display: table; }
	div.chapter_link > div 			{ display: table-row; }
	div.chapter_link > div > div 	{ display: table-cell; vertical-align: middle; }
	div.chapter_link > div > div:nth-of-type(2) { text-align:left; padding:0px 0px 0px 15px; }
	}

@media screen and (max-width: 600px) {
	div.column_600, div.column_600 > div, div.column_600 > div > div  { display: block; margin: 0px auto; }
	div.column_600 > div > div {margin-bottom: 10px; }
}

@media screen and (max-width: 400px) {
	div.die_results, div.die_results > div, div.die_results > div > div { display: block; margin: 0px auto;}
	div.die_results > div > div.dieRollCell {margin: -10px auto;}
	div.die_results > div > div:last-of-type {margin: 5px auto;}
	
	
	div.row_800 { display:block; }
	div.row_800 > div {display:block; vertical-align: middle; min-width:100px; }
	
	div.chapter_link, div.chapter_link > div,
	div.chapter_link > div > div {display:block; text-align:center; }

}


/* IMAGE BLOCKS */

.rightSpot, .leftSpot { max-width: 50%; text-align: center;
	font-family: 'Roboto', Arial, Helvetica, sans-serif; font-style: italic; color: #666; font-size: 12px; }
.rightSpot {float: right; margin: 0px 0px 10px 15px; }
.leftSpot {float: left; margin: 0px 15px 10px 0px; }

@media screen and (max-width: 800px) {
	.rightSpot, .leftSpot {display: block; float: none; max-width: 50%; margin: 10px auto; } }

/* table */
table.ctrImgDiv, div.ctrImgDiv { display: table; max-width: 70%; max-width:820px;
	margin: 5px auto 15px; border: none; text-align: center; }

table.ctrImgDiv.wide, div.ctrImgDiv.wide {max-width: 100%;}

div.sideImgDiv { clear: right; float: right; border: none; display:table; text-align: center;
	margin: 0px 0px 10px 10px; padding: 0px 0px 10px 10px; width: 25%; max-width: 270px; }
div.sideImgDiv.wide { max-width: 50%; width: auto; }

/* row */
div.sideImgDiv > div {display:block; padding-top:15px;}
div.sideImgDiv > div:first-of-type {padding-top:0px;}

table.ctrImgDiv img, div.ctrImgDiv > img,
div.sideImgDiv > div > div > img { max-width:100%; margin-bottom: 10px; }
.exampleTable div.ctrImgDiv > img,
.flavorTable div.ctrImgDiv > img { max-width:80%; }	

/* splash captions */
table.ctrImgDiv td, div.ctrImgDiv > div,
div.sideImgDiv > div > div { display: block; text-align: center; max-width: 500px; margin: 0px auto;
	font-family: 'Roboto', Arial, Helvetica, sans-serif; font-style: italic; color: #666; font-size: 12px; }

table.ctrImgDiv td { display: table-cell}

/* photo captions */
table.ctrImgDiv div, div.ctrImgDiv > div > div,
div.sideImgDiv > div > div > div { font-size: 9px; padding: 3px; margin-top: 5px;}

.exampleTable div.sideImgDiv,
.flavorTable div.sideImgDiv {margin: 0px 10px 10px; padding: 0px 10px 10px;}
.flavorTable .ctrImgDiv,
.flavorTable .sideImgDiv { color: #963; }

.flavorTable div.photo_credit { display: table; text-align: center; max-width: 500px; margin: 10px auto 0px; }

@media screen and (max-width: 800px) {
	div.sideImgDiv { clear: none; float: none; margin: 5px auto; padding: 0px; width: 70%; max-width: 400px; }
	div.sideImgDiv.wide { width: 80%; max-width: 80%; }
	div.sideImgDiv > div { display: table-row; }
	div.sideImgDiv > div > div > img { max-width:30vw; min-width: 80px; height: auto; }

/*	div.sideImgDiv > div > div > img.tall { height:200px; min-height:200px; min-width:auto; width:auto; }*/
	div.sideImgDiv.wide > div > div > img { width:auto; max-width:100%; min-width: 125px; height: auto; }
	div.sideImgDiv > div > div { display: table-cell; vertical-align: middle; padding: 0px 5px; }

	.exampleTable div.sideImgDiv,
	.flavorTable div.sideImgDiv {margin: 0px auto; padding: 0px 10px 10px; max-width: 80%; }
	}

@media screen and (max-width: 500px) {
	div.sideImgDiv { width: 80%; max-width: 80%; }
	div.sideImgDiv > div { display: block; }
	div.sideImgDiv > div > div { display: block; vertical-align: middle; }
	div.sideImgDiv > div > div > img.tall { height:200px; min-height:200px; min-width:auto; width:auto; max-width:100%; }
	div.sideImgDiv > div > div > img,
	div.sideImgDiv.wide > div > div > img { width:auto; min-width:150px; height: auto; margin-bottom: 10px; }
	}