@import url(https://fonts.googleapis.com/css?family=Bevan);
@import url(https://fonts.googleapis.com/css?family=Arvo:700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Alegreya:800);

body {background-color: white; color: black; margin: 0px;}

a {text-decoration: none}
a:link { color: #336; }
a:visited { color: #636; }
a:hover { color: #33c; }
a:active { color: #f30; }

/*fonts and typefaces*/

/*Bevan*/

	.chapter_number, .chapter_title, .chapter_heading, .table_title, .book_title {
		font-family: 'Bevan', "Times New Roman", Times, serif; font-weight: bold; color: #000;
		display: block;
		}

	.book_title { font-size: 36px; line-height: 110%; color: #333; text-transform: uppercase; }
	.chapter_title { font-size: 42px; clear:left; line-height: 40px;}
	.chapter_heading { display:inline; font-size: 36px; clear:left; }

	.chapter_number {display:inline; font-size: 24px;
		color: #666; clear:left; text-transform: uppercase; letter-spacing: .02em;}



	a.chapter_number, a.chapter_number:visited, a.chapter_number:link,
	.chapter_heading a.chapter_number, .chapter_heading a.chapter_number:visited,
	.chapter_heading a.chapter_number:link,
	.chapter_heading a span.chapter_number, .chapter_heading a span.chapter_number:visited{ color: #666; }
	.chapter_heading a.chapter_number:hover, a.chapter_number:hover,
	.chapter_heading a span.chapter_number:hover { color: #33c; }
	.chapter_heading a.chapter_number:active, a.chapter_number:active,
	.chapter_heading a span.chapter_number:active { color: #f30; }

/*Arvo*/

	th { font-family: 'Arvo', "Times New Roman", Times, serif;
		font-style: normal;	font-weight: bold;	text-align: center; color: #333;
		margin: 0px; padding: 5px; background-color: white; }
	th a:link, th a:hover, th a:active, th a:visited { color: #333; }

	.exampleturn { font-family: 'Arvo', "Times New Roman", Times, serif;
		font-style: italic;	font-weight: bold;	color: #333; margin-top:30px;
		
	}	
	
	hr { border:none; border-top: 1px solid #999; }

	.ruleBox { display: table; border: 1px solid #ccc; min-width:30%; max-width:400px;
		margin: 15px auto 25px; padding: 5px 15px; text-align: center; }

	.ruleBox div:nth-of-type(1) { font-family: 'Arvo', "Times New Roman", Times, serif;
		text-transform: uppercase; font-style: normal; font-weight: bold; font-size: 16px; color: black; }

	.ruleBox div:nth-of-type(2) { font-style: italic; font-size: 14px; color: #333; }


/*Alegreya*/

	.chapter_section, .chapter_subsection, .example_table_section {
		font-family: 'Alegreya', Georgia, "Times New Roman", Times, serif;
		font-weight: 800; color: #000;
		line-height: 150%; clear: left;
		}

	.chapter_section { font-size: 24px; }
	.chapter_subsection { font-size: 18px; }


/*Roboto*/

	body, td, .ref_text, .photo_credit, .table_section, .example, .flavorTable, .noteTable, .exampleTable, .splashCaptionTable, .imageTable { font-family: 'Roboto', Arial, Helvetica, sans-serif; }

	body { font-size: 15px; } 

	.ref_text, .photo_credit, .splashCaptionTable, .imageTable, table.exampleTable table.statsTable .ref_text { font-style: italic; color: #666; font-size: 12px; font-weight: normal; }

	.flavorTable .splashCaptionTable, .flavorTable .photo_credit { color: #963; }
	.photo_credit {	font-size: 9px; padding: 3px;}

	.example { font-size: 12px; font-style: italic; }



.asterisk { font-weight: bold; color: #FF3300 }
.bigAsterisk { font-weight: bold; color: #FF3300; font-size: medium; }
.bigAsterisk a:link { color: #bb0000; }
.bigAsterisk a:visited { color: #bb0044; }
.bigAsterisk a:hover { color: #ee6600; }
.bigAsterisk a:active { color: #ee9900; }


.attribute { font-size: smaller; font-weight: bold}

.xsmall { font-size: smaller; }



/*images*/

img {height: auto; max-width: 100%; min-width: 20px;}

.rounded { border-radius: 10px; }
.top_rounded { border-top-left-radius: 10px; border-top-right-radius: 10px; }

.fixedWidth { max-width: 800px;	margin: 0; }


/*lists*/
li { padding: 4px; }

.bulletTable {
/*	list-style-image: url(images/dots/red_dot.gif);*/
	list-style-image: url("../images/dots/red_dot.gif"); }
.bulletTable li {padding-bottom: 10px;}
.bulletTable li:last-of-type {padding-bottom: 15px;}

.blueBulletTable {list-style-image: url("../images/dots/blue_dot.gif");}
.blueBulletTable li {padding-bottom: 15px;}



/*work in progress*/
.workInProgress { font-style: italic; color: red; font-size: 11px; }

.grayed_out { color: #aaa; background-color: #ddd; }
.grayed_out a { color: #999; }



/*tables*/



.table_title { font-size: larger; background-color: #CCC; }
.table_section { font-weight: bold; color: #000; background-color: #DDD; }


table.statsTable { padding: 0px;
/*	border-top: 1px solid #999;	border-left: 1px solid #999; border-right: none; border-bottom: none;*/
	border: 1px solid #999; border-collapse: collapse;
	border-spacing: 0px; }

.statsTable td, .statsTable th {
/*	border-top: none; border-left: none; border-right: 1px solid #999;	border-bottom: 1px solid #999; */
	border: 1px solid #999; border-collapse: collapse;
	text-align: center;
	}
.statsTable th { font-size: 16px; font-style: normal; font-weight: bold; color: #000; background-color: #ccc; }
.statsTable td { font-size: 12px; padding: 5px; }
.statsTable td p {margin: 5px auto; } 

.statsTable td p:first-of-type {margin-top:1px; }
.statsTable td p:last-of-type {margin-bottom:1px; }


@media screen and (max-width: 400px) { 
	.statsTable td p {margin: 10px auto; }
	.statsTable .table_section p {margin: 3px auto; }
	}

.statsDamaged { background-color: #fee; }
.statsDead { background-color: #fdd; }

.table_bold { font-weight: bold ; color: #333}


.flavorTable { background-color: #FFF;
	border-radius: 10px; border: 1px solid #EC9; border-spacing: 0px;
/*	font-size: 12px;*/
	font-size: smaller;	font-style: italic;	color: #963; 
}

.flavorTable th { background-color: #FFF8DD;
	font-style: normal; font-weight: bold; color: #663300;
	border-top-left-radius: 11px; border-top-right-radius: 11px; }
.flavorTable td, div.flavorTable { padding: 10px; }


.sidebarTable {	background-color: #eee;
	padding: 0px;
	border: 1px solid #CCC; border-spacing: 0px;
	font-size: 12px; font-style: italic; color: #333; }

.statsTable td.leftarrow {border-left: none; padding:1px 4px 1px 0px; margin: 1px 4px 1px 0px;}
.statsTable td.rightarrow {border-right: none; padding:1px 0px 1px 4px; margin: 1px 0px 1px 4px;}

.leftarrow img, .rightarrow img {
	min-width:10px; min-height:10px; max-height: 20px; max-width: 20px;
	vertical-align: middle; width:10px; height:10px; }

img.leftarrow, img.rightarrow {
	min-width:10px; min-height:10px; max-height: 20px; max-width: 20px;
	vertical-align: middle; width:10px; height:10px; padding: 0px 0px 2px; margin: 0px 1px 2px;}


/*
@media screen and (max-width: 800px) {
.statsTable td.leftarrow, .statsTable td.rightarrow {display:none;}	
}
*/

div.sidebarTable {padding:10px}

.sidebarTable th { background-color: #DDDDDD; font-size: 13px; }

.sidebarTable td {	background-color: #eee;
	padding: 10px;
	font-size: 12px; font-style: italic; color: #333;
	text-align: left;}



/*.noteTable { font-style: italic; color: #666; font-size:12px;}*/

/*.imageTable {text-align: center; padding: 10px;}*/

div.sidebar table.noteTable, div.sidebar div.noteTable { text-align: center; }

.table_subsection {	background-color: #eee;
	font-weight: bold; color: #333; font-size: smaller; }

.centerBox.exampleTable {margin-top: 25px;}
.exampleTable { border: 1px solid #999; border-spacing: 0px; font-size: 12px; font-style: italic; }
.exampleTable th { background-color: #ccc; font-size: 14px; color: #000; }
.exampleTable td { 
/*	background-color: #fff; */
	padding: 5px; color: #000; }
.example_table_section { font-size: smaller; }

.nav_section { font-size: 11px; color: #333; font-weight: bold; font-style: normal;	padding: 3px; padding-left: 10px; }
.nav_subsection { font-size: 11px; color: #333;	font-style: normal;	padding: 2px; padding-left: 20px; }

.centerbarTable { background-color: #eee; border: 1px solid #CCC; border-spacing: 0px;
	font-size: 12px; font-style: italic; color: #333; }
.centerbarTable th { background-color: #DDD; font-size: 14px; }
.centerbarTable td { padding: 10px 15px; }

.sidebarBulletTable { list-style-image: url(../images/dots/green_dot_e.gif);
	padding: 4px 10px; margin-left: 20px; margin-right: 10px; }


.splashCaptionTable { display: table; text-align: center; padding: 3px;
	margin: 5px auto 0px; max-width: 500px; border: none; }

.subStatsTable { border-style: none; border-spacing: 0px; margin:auto; }
.subStatsTable td {	padding: 2px; border-style: none; vertical-align: middle; text-align: center; }

/*This is an ugly kludge but whatever*/
tr.dieRollCell td::before,
tr.minifigStatCell td::before {
   content: "";
   display: inline-block;
   vertical-align: middle;
   min-height: 40px;
}

@media screen and (max-width: 400px) {
div.dieRollCell::before {
   content: "";
   display: inline-block;
   vertical-align: middle;
   min-height: 50px;
}	
}

.minifigStatCell td, td.minifigStatCell,
.dieRollCell td, div.dieRollCell, td.dieRollCell {
/*	border-style: none;	*/
/*	background-repeat: no-repeat;*/
/*	background-position: center center;*/
	text-align: center;	vertical-align: middle;
	font-family: 'Alegreya', Georgia, "Times New Roman", Times, serif;
	font-weight: 800; color: #000; font-size: 18px; line-height: 80%;
	min-width: 45px; min-height: 52px;
	overflow:visible;}
.minifigStatCell td .attribute, .minifigStatCell td .attribute {font-size: 10px; line-height: 1px;}

.minifigStatCell .asterisk, .dieRollCell .asterisk {
	text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white ;
	font-size: 60%; vertical-align: super;;
	margin-right:-5px;
}

/*div.dieRollCell { min-width: 40px; min-height: 40px; height:40px;}*/
div.dieRollCell { line-height:50px;}

.dieRollCell td.plus, div.dieRollCell.plus {
	min-width: 10px; padding-right:0px; margin-right:0px;
}

.minifigStatCell img.dice_40 {vertical-align: middle; margin: 2px 0px;}
.minifigStatCell img.asterisk_40 {vertical-align: middle; margin: 2px -8px 2px -13px;}

.actionStat, .powerStat, .sizeStat, .moveStat, .armorStat, .valueStat, .damageStat {
	background-repeat: no-repeat; background-position: center;
	font-style: normal;
	min-height: 52px; min-width: 52px; height:50px; width:50px;}
.actionStat { background-image: url("../images/icons/ico_50_action_fill.png"); }
.damageStat { background-image: url("../images/icons/ico_50_damage_fill.png"); }
.powerStat { background-image: url("../images/icons/ico_50_power_fill.png"); }
.sizeStat { background-image: url("../images/icons/ico_50_size_fill.png"); }
.moveStat { background-image: url("../images/icons/ico_50_move_fill.png"); }
.armorStat { background-image: url("../images/icons/ico_50_armor_fill.png"); }
.valueStat { background-image: url("../images/icons/ico_50_unit_inches_fill.png"); }

.dieRollCell td, div.dieRollCell { min-width: 44px; min-height: 52px; font-style:normal; }

.d4roll, .d6roll, .d8roll, .d10roll, .d12roll {
	background-repeat: no-repeat; background-position: center;
	min-height: 52px; min-width: 44 px; font-style: normal;}
.d6roll { background-image: url("../images/dice/d6-blank-gray.png"); }
.d10roll { background-image: url("../images/dice/d10-blank-gray.png"); }
.d6roll.crit { background-image: url("../images/dice/d6-crit-gray.png"); }
.d10roll.crit { background-image: url("../images/dice/d10-crit-gray.png"); }

.d4roll.yellow { background-image: url("../images/dice/d4-blank-yellow.png"); }
.d6roll.yellow  { background-image: url("../images/dice/d6-blank-yellow.png"); }
.d8roll.yellow  { background-image: url("../images/dice/d8-blank-yellow.png"); }
.d10roll.yellow { background-image: url("../images/dice/d10-blank-yellow.png"); }
.d12roll.yellow { background-image: url("../images/dice/d12-blank-yellow.png"); }

.d6roll.yellow.crit { background-image: url("../images/dice/d6-crit-yellow.png"); }
.d10roll.yellow.crit { background-image: url("../images/dice/d10-crit-yellow.png"); }

.d4roll.red { background-image: url("../images/dice/d4-blank-red.png"); }
.d6roll.red { background-image: url("../images/dice/d6-blank-red.png"); }
.d10roll.red { background-image: url("../images/dice/d10-blank-red.png"); }

.d6roll.green { background-image: url("../images/dice/d6-blank-green.png"); }
.d10roll.green { background-image: url("../images/dice/d10-blank-green.png"); }

.d4roll.blue { background-image: url("../images/dice/d4-blank-blue.png"); }
.d6roll.blue { background-image: url("../images/dice/d6-blank-blue.png"); }
.d10roll.blue { background-image: url("../images/dice/d10-blank-blue.png"); }


@media screen and (max-width: 800px) {
	.nav_subsection { display:none; }
	
	.book_title { font-size: 4.5vw; }
	.chapter_title { font-size: 5.25vw; }
	
	.chapter_heading { font-size:4.5vw; }
	.chapter_number {font-size:3vw;}
}

@media screen and (max-width: 600px) {	
	.book_title { font-size: 27px; }
	.chapter_title { font-size: 32px; }
	
	.chapter_heading { font-size:27px; }
	.chapter_number {font-size:18px;}
	
	.chapter_section { font-size:4vw; }
}

@media screen and (max-width: 400px) {
/*
	.book_title, .chapter_title { font-size: 28px; }

	.chapter_heading { font-size: 24px; }
	.chapter_number { font-size: 16px; }
*/
	.chapter_section, .chapter_subsection { font-size: 16px; }

	.statsTable td {font-size: 11px; padding: 3px;}
	.statsTable .table_section td {font-size: 11px; }	
	.statsTable td .attribute {font-size: 10px; }
	.minifigStatCell td, .exampleTable .minifigStatCell td {
		font-size: 20px; font-style: normal; }
	
}