@charset "utf-8";
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	background-color: #262626;
	margin: 10px;
	padding: 10px;
}
#debug {
	z-index: 600;
	background-color: rgba(256,256,256,.5);
	border: 1px solid #FFF;
	padding: 4px;
	position: fixed;
	bottom: 0;
	right: 0;
}

a, .submitbutton, .searchbutton, .videobutton, .videobutton .back {
	-webkit-transition: all 200ms cubic-bezier(.5, 0, .5, 1);
	transition: all 200ms cubic-bezier(.5, 0, .5, 1);
	cursor: pointer;
}
a, a:link, a:visited{
	color: #387AF5;
	text-decoration: none;
}
a:hover, a:visited:hover {
	color: #6AACFF;
	text-decoration: none;
}

h1 {
	font-size: 18px;
	font-weight: 400;
	padding: 0;
	margin: 0;
}
#cover h1 {
	display: none;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #60CAE2;
	margin: 4px 0;
	font-weight: 400;
}
.interview h2 {
	font-size: 27px;
	font-weight: 400;
	margin: 0px;
	padding: 0 0 12px;
}
.interview h3 {
    font-size: 16px;
    font-weight: 700;
    color: #CCCBAD;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #AEAD8F;
}
li {
	font-size: 13px;
	list-style-position: outside;
	padding-bottom: 4px;
}
p {
	list-style-position: outside;
	padding-bottom: 10px;
	margin: 0px;
}

.button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin: 1px;
}
.border2 {
	border: 1px solid #000;
}
#fullwidth {
	box-sizing: border-box;
	max-width: 1000px;
	margin: 0 auto;
}
#header {
	color: #FFF;
	position: relative;
	padding: 1em;
}
#header img {
	width: 100%;
	height: auto;
}
#maintable {
	display: table;
	margin: 0 auto;
	padding: 0 220px;
	position:relative;
}
#main .page {
	display: table;
	margin: 0 auto;
}
.interview, .refside {
	display: table-cell;
	vertical-align: top;
}
.leftside, .rightside, .refside {
	vertical-align: top;
	width: 220px;
}
.leftside {
	position: absolute;
	top: 0;
	left: 0;
}
.leftside, .leftside p, .archive, #header {
	text-align: center;
}
.rightside, .refside {
	position: absolute;
	top: 0;
	right: 0;
	text-align: left;
}
.rightside p {
	padding: 0;
	margin: 0 0 6px;
}
#footer {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 16px 0;
}
#footer a, #footer a:link, #footer a:visited {
	color: #FFF;
}

.blackback {
	background-color: #000;
}


.lightback  {
	background-color: #F4E9CD;
}


.lightlink {
	color: #000;
}
.lightlink a, .lightlink a:link, .lightlink a:visited {
	color: #000;
	text-decoration: none;
}
.lightlink a:hover, .lightlink a:visited:hover {
	color: #FFF;
	text-decoration: none;
}
.whitelink {
	color: #808080;
	font-size: .92em;
}
.whitelink a, .whitelink a:link, .whitelink a:visited {
	text-decoration: none;
	color: #808080;
}
.whitelink a:hover, .whitelink a:visited:hover {
	color: #6AACFF;
	text-decoration: none;
}
.darkback  {
	background-color: #424331;
	background-image: url(elements/grad_main.jpg);
	background-position: right;
	background-repeat: repeat-y;
}
.darklink {
	color: #FFF;
}
.darklink  a, .darklink  a:link, .darklink a:visited {
	color: #CC272E;
	text-decoration: none;
}
.darklink a:hover, .darklink a:visited:hover {
	color: #FE5960;
	text-decoration: none;
}
#navbar {
	color: #000;
	font-size: 16px;
	line-height: 1em;
	font-weight: 700;
	text-align: center;
}
#navbar > ul {
	display: table;
	margin: 1em auto;
	padding: 0;
}
#navbar li{
	list-style: none;
	margin: 0 0 .5em;
	padding: 0;
}
#navbar > ul > li {
	display: inline-block;
	vertical-align: middle;
}
#navbar > ul > li:not(:last-child) a {
	border-right: 1px solid #000;
}
#navbar a {
	display: block;
	padding: 0 .8em;
}
#navbar a, #navbar a:link, #navbar a:visited{
	color: #000;
}
#navbar a:hover, #navbar a:visited:hover {
	color: #FFF;
}
#navbar .on a, #navbar .on a:link, #navbar .on a:visited {
	color: #FFF;
}


.big {
	font-size: 18px;
}
.big2 {
	font-size: 15px;
}
.tagline {
	font-size: 10px;
}
.light1 {
	color: #AEAD8F;
}
.light2 {
	color: #CC272E;
}
.light3 {
	color: #60CAE2;
}
.dark1 {
	color: #693714;
}
.dark2 {
	color: #786777;
}

.notice {
	font-size: 16px;
}
.normal {
	font-size: 14px;
}
.list {
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
}

.small {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.small2 {
	font-size: 11px;
	line-height: 22px;
}

.tiny {
	font-size: 9px;
}
.pad {
	padding: 8px;
}
.pad2 {
	padding: 4px;
}
.colpad {
	padding-bottom: 12px;
}

.bar1 {
	font-size: 14px;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background-color: #786777;
}
.bar2 {
	background-image: url(elements/grad2.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	font-size: 14px;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background-color: #DD3F00;
}
.bar3 {
	font-size: 14px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background-color: #998979;
	background-image: url(elements/grad3.jpg);
	background-repeat: repeat-y;
	background-position: left top;
}
.block {
	padding: 12px;
}
.readbutton {
	background-repeat: no-repeat;
}
.readbutton a:link, .readbutton a:visited, .readbutton a {
	background-repeat: no-repeat;
	background-image: url(elements/readbutton.gif);
	display: block;
}
.readbutton a:hover, .readbutton a:visited:hover {
	background-image: url(elements/readbutton_hover.gif);
}
.interview, .interviewbody, #cover {
	padding: 0 12px;
}
.interview .inside{
	background: linear-gradient(90deg,#424331,#000);
	border-bottom-left-radius: 12px;
	border-top-left-radius: 12px;
	padding-bottom: 12px;
	margin-bottom: 20px;
}
.simpletable > div{
	vertical-align: middle;
}
.textside {
	padding: 8px 12px;
	font-size: 16px;
}

.interviewhead {
	padding-top: 12px;
	background-image: url(elements/interview.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	vertical-align: bottom;
	min-height: 246px;
	padding-left: 56px;
}
.fullcover {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
.fullcover svg {
	width: 100%;
	height: auto;
}
.archive {
	padding: 1em 0;
}
.archive > div {
	display: inline-block;
	margin: .5em 5%;
	vertical-align: top;
}
@media only screen and (max-width: 1230px) {
	#debug::before {
		content: "< 1230";
	}
}
@media only screen and (max-width: 1100px) {
	#debug::before {
		content: "< 1100";
	}
}
@media only screen and (max-width: 1036px) {
	#debug::before {
		content: "< 1036";
	}
	#maintable {
		padding-left: 0;
	}
	.leftside {
		position: relative;
		width: 100%;
		margin: 1em auto 1em 110px;
		-moz-column-count: 2;
		-moz-column-gap: 1em;
		-webkit-column-count: 2;
		-webkit-column-gap: 1em;
		column-count: 2;
		column-gap: 1em;
	}
}

@media only screen and (max-width: 962px) {
	#debug::before {
		content: "< 962";
	}
}
@media only screen and (max-width: 836px) {
	#debug::before {
		content: "< 836";
	}
	body {
		font-size: medium;
	}	
	video, audio {
		width: 100%;
		height: auto;
	}
	#fullwidth {
		padding: 1px 1px 1em;
	}
	#maintable, .interview, .refside {
		padding: 0;
		display: block;
		height: auto;
	}
	#main, #maintable #cover {
		height: auto;
		padding: 0;
	}
	.leftside, .rightside {
		margin: 1em auto;
		padding-top: 1em;
		border-top: 1px solid #808080;
	}
	.rightside, .rightside p {
		text-align: center;
	}
	.rightside, .refside {
		position: relative;
		width: 100%;
	}
	.rightside {
		-moz-column-count: 2;
		-moz-column-gap: 1em;
		-webkit-column-count: 2;
		-webkit-column-gap: 1em;
		column-count: 2;
		column-gap: 1em;
	}
}
@media only screen and (max-width: 658px) {
	#debug::before {
		content: "< 658";
	}
	.split {
		display: block;
	}
	.split > div{
		display: block;
	}

}
@media only screen and (max-width: 594px) {
	#debug::before {
		content: "< 594";
	}
}
@media only screen and (max-width: 483px) {
	#debug::before {
		content: "< 483";
	}
	.rightside, .leftside {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	.simpletable > div {
		display: block;
	}
	.textside {
		padding: 8px 20px 12px 0;
		margin-left: -36px;
		
	}
}
@media only screen and (max-width: 380px) {
	#debug::before {
		content: "< 380";
	}
}
@media only screen and (max-width: 320px) {
	#debug::before {
		content: "< 320";
	}
}