/* Font import */
@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Bold.ttf') format('truetype');
	font-weight: bold;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Italic.ttf') format('truetype');
	font-style: italic;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Italic.ttf') format('truetype');
	font-style: oblique;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: oblique;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-Bold.ttf') format('truetype');
	font-weight: bold;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-Italic.ttf') format('truetype');
	font-style: italic;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-Italic.ttf') format('truetype');
	font-style: oblique;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url('fonts/RobotoCondensed-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: oblique;
}
@font-face {
	font-family: 'Francois One';
	src: url('fonts/FrancoisOne-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Earwig Factory';
	src: url('fonts/earwig factory rg.ttf') format('truetype');
}

/* Baseline */

body {
	background-color: #111;
	color: #999;
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
}

h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 1.875em;
}

h3 {
	font-size: 1.45em;
}

p {
	font-size: 1em;
	margin-left:1em;
	margin-right:1em;
}

/* One More! Button Footer */

input {
	display: block;
	margin: auto;
	padding: 0;
	border: 0;
	font-size: 3em;
	background-color: inherit;
	color: #FFF;
	font-family: 'Earwig Factory', serif;
}

.site {
  display: flex;
  min-height: 95vh;
  height: 100%;
  width: 80%;
  max-width: 1050px;
  margin: auto;
  flex-direction: column;
}

.site-content {
	flex: 1;
}

/* Images */

img {
	height: auto;
	width: 100%;
	max-width: 512px;
	vertical-align: bottom;
}

/* Footer Links */

div.footerlinks {
	margin-top: 3em;
	margin-bottom: 1em;
	padding-top: 0;
	text-align:center;
}

/* Dialogue Formatting */

.response {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
}
.dialogue {
	font-family: 'Francois One', sans-serif;
	color: #FFF;
	margin-bottom: .25em;
	margin-top: 3em;
	border: 0.5em solid white;
	border-radius: 3em;
	background-color: black;
	background: rgba(0,0,0,0.85);
	display: flex;
	overflow: hidden;
}
.comment {
	font-size: 1.5em;
	width: 75%;
	align-items: stretch;
	flex: 3;
	vertical-align: center;
	padding-left: 2.5em;
	margin-top: auto;
	margin-bottom: auto;
}
.speaker {
	width: 25%;
	text-align: right;
	vertical-align: bottom;
	align-items: stretch;
	flex: 1;
}
.audiofiles {
	margin-top:0.25em;
	text-align: center;
	display: flex;
	overflow: hidden;
	flex-direction: row;
	justify-content: center;
}
.audiofiles_en, .audiofiles_ja, .audiofiles_identifier {
	width:5%;
	max-width:5em;
}

/* Links */

a {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	color: #DDD;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* Heading Underlines */

h1, h2, h3 {
	border-bottom: 1px solid #333;
}

p + h1, p + h2, p + h3 {
	margin-top:2em;
}

/* Stats Table */

p + table.overview {
	margin-top:3em;
}

table tbody tr td, table tr td {
  line-height: 1.6em;
}

table.overview > tr > th,
table.overview > tr > td,
table.overview > * > tr > th,
table.overview > * > tr > td {
  padding: 0.6em;
}

table.overview {
	font-family: 'Roboto Condensed', sans-serif;
	width:100%;
  	margin: 0em 0 1em 0;
  	background-color:#333;
  	border: 1px 1px 1px 1px solid red;
}
th.overview_initiator {
	width:15%;
}
th.overview_comment {
	width:5%;
}
th.overview_responses {
	width:75%;
	text-align:center;
}
th.overview_response {
	width:9.375%;
}
td.overview_speaker {
	font-weight:bold;
}
td.overview_comment {
	font-weight:bold;
}
td.overview_responsestotal {
	text-align:right;
	font-weight:bold;
}
td.overview_response {
	text-align:center;
}

/* Row highlighting class */

.rowlight tr:hover td {
  background: #333;
}

/* Row alternating class */

.evenodd tr:nth-child(odd) {
 background: #111;
}
.evenodd tr:nth-child(even) {
 background: #222;
}