@charset "utf-8";
/* CSS Document */
body {
	background-color: rgb(255, 238, 170);
	color: black;
	text-align: center;
	background-image: url("OHHS_NEW_ERA_2.jpg");
	background-size: 10%;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Cutive Mono', monospace;
}

/* Content Wrapper Styles */
.content_wrapper {
	margin: 10px auto auto auto;
	width: 75%;
	border: 5px solid rgb(102, 102, 102);
	background-color: #B04E50;
	border-radius: 20px;
}

#cont_header, #cont_footer {
	width: 100%;
}

header, footer {
	padding: 10px;
}

/* Nav and Main Wrapper Styles */
.flex_wrapper {
	display: flex;
	flex-direction: row;
}

.nav_box {
	flex-grow: 0;
	color: white;
	background-color: black;
}

#nav_pane {
	display: flex;
	flex-direction: column;
}

.nav_link {
	display:block;
	min-height: 1.5em;
	max-width: 100px;
	min-width: 5px;
	margin: 10px;
	padding: 10px;
	font-family: 'Cutive Mono', monospace;
	border: medium outset rgb(255, 0, 0);
	color: #cccccc;
	background-color: rgb(74, 74, 74);
	text-decoration:none;
	border-radius: 15px;
}

.nav_link:hover {
	border: medium inset rgb(255, 0, 0);
	color: lightgray;
	background-color: black;
}

.nav_link:active {
	color: #99cb82
}

/* Main Content Styles */
main hr {
	width: 80%;
	border: 1px dotted #87cdde;
}

.main_box {
	flex-grow: 3;
	flex-basis: 100%;
	text-align: left;
	background-color: #D9D0D0;
}

.main_box main p a {
	color: #B80000;
	font-style: italic;
	text-decoration: underline;
}

.main_box main p a:hover {
	color: #FF6347;
}

#intro_fig {
	font-size: small;
	float: right; 
	width: 35%;
	margin: 0 1em 2em 2em;
}

#intro_fig img {
	width: 100%;
}

#board_fig {
	font-size: small;
	margin: 20px;
}

#board_fig img {
	width: 100%;
}

.content_padding {
	padding: 0 20px 0 20px;
}


/* Terrain Hex Tiles Style - prototype page */

#hexDisplay {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

.hexWrapper {
	flex-basis: 33%;
}

.hexFigure {
	text-align: left;
}

.hexFigure img {
	width: 80%;
	margin: 0.25em 0 0.25em 0;
}

.hexFigure figcaption {
	font-weight: bold;
}

.small_line {
	line-height: 3;
}

.hexWrapper ul {
	list-style-type: none;
  	margin: 0;
  	padding: 0;
	font-size: small;
	text-align: left;
}

.hexWrapper ul li {
	text-indent: -1em;
	padding: 0 0 0 1em;
}


/* Footer Styles */

#font_citation {
	font-size: x-small;
	text-align: right;
	width: 33%;
	margin: -0.5em 0 0 0;
}

a {
	color: #bbbbbb;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.textIndent {
	padding: 0 0 0 15px;
	text-indent: -15px;
}

#footer_info {
	display:flex;
	flex-direction: row;
	align-items: flex-start;
}

address  {
	text-align: left;
	font-size: x-small;
	width: 33%;
	margin: 0;
}

.site_index {
	width: 25%;
}

.site_index ol {
	list-style-type: none;
	margin: -1em 0 0 0;
	padding: 0;
	
}

.site_index h4 {
	text-align: left;
	font-size: x-small;
	/*margin: auto 0 0 0;*/
}

.site_index ol li {
	text-align: left;
	margin: -5px 0 -5px 0;
}

.site_index ol li a {
	font-size: x-small;
}




/* Table Styles */
table#character_table {
	width: 100%;
}

table#character_table td {
	border: thin solid black;
	height: 3.5em;
}

.char_name { 
	width: 20%;
}

.char_str { 
	width: 10%;
	text-align: center;
}

.char_def { 
	width: 10%;
	text-align: center;
}

.char_special {
	width: 30%;
}

table#character_table td.char_special {
	border: thin solid black;
	font-size: small;
}

table#character_table tr:nth-child(even) {
  background-color: #aade87;
}

table#character_table tr:nth-child(odd) {
  background-color: #87cdde;
}

table#character_table th {
	border: thin solid black;
	background-color:  rgb(102, 102, 102);
	color:  rgb(255, 238, 170);
	height: 3.5em;
	padding: 15px;
}

textarea {
	height: 10em;
	width: 80%;
}

/* Full Column Width Styles */
.fullColumnWrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	margin: 20px;
}

.fullColumnWrapper iframe  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* View Window Styles */

@media screen and (max-width: 650px) {
	table {
		font-size: x-small;
	}

	.nav_link {	
		width: 15%;
		margin: 5px;
		padding: 10px; 
		font-size: x-small;
		min-height: 1.5em;
	}
	
	.flex_wrapper {
		flex-direction: column;
	}

	#nav_pane {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	table#character_table td.char_special {
		font-size: x-small;
	}
}