*
{
	font-family: arial;
}

body, .space
{
	background: #EEE;
	margin: 0;
	padding: 0;
}

body > header
{
	width: 100%;
	height: 50px;
	background: #FFF;
	box-shadow: 0 0 3px grey;
}

main
{
	margin: 20px auto;
	background: #FFF;
}
main > section
{
	padding: 1px 15px 20px 20px;
	box-shadow: 0 0 5px lightgrey;
}

hr
{
	color: #FFF;
	border-bottom: solid 1px grey;
}

a
{
	color: black;
	text-decoration: none;
}

footer
{
	border-top: solid 1px grey;
	padding: 10px;
}

td
{ position: relative }

td > input, td > button
{
	width: 100%;
	border: solid 1px grey;
	padding: 1px 2px;
	margin: 0;
}

td > button
{ background: #EEE }

td > button:hover, td > button:focus
{ background: #DDD }

.underline
{
	text-decoration: underline;
}

.backlink
{ padding: 3px }

.backlink:hover, .backlink:focus
{ cursor: pointer }

.player
{
	width: 100%;
}

.player > iframe
{
	width: 100%;
	height: 800px;
	border: none;
}

.space
{ padding: 10px 0 }

.whitespace
{ margin: 20px 0 }

.block-link
{
	display: inline-block;
	margin: 5px 0;
}

.block-link:hover, .back-link:focus
{
	box-shadow: 0 0 3px grey;
	transition: box-shadow linear 0.25s;
}

.block-link div
{
	margin-bottom: 5px;
	line-height: 30px;
	font-size: 17px;
	text-align: center;
}

.clear
{ clear: both }

.absolute
{
	position: absolute;
	z-index: -1;
}

.hidden
{ display: none }

.fadeHide
{ opacity: 0 }

.fadeOut
{
	opacity: 0;
	transition: opacity linear 0.5s;
}

.fadeIn
{
	opacity: 1;
	transition: opacity linear 0.5s;
}

.insert_whatever
{ column-count: 3 }

.insert_whatever a
{
	color: #3c3c77;
	text-decoration: none;
}

.insert_whatever a:hover
{
	color: #1c1c77;
	text-decoration: underline;
}

.draft.box
{
	columns: 2;
}

.draft.box a
{
	display: block;
	color: #3c3c77;
}

@media only screen and (max-width: 850px)
{
	main, .block-link
	{ width: 100% }

	.block-link img
	{ width: 100% }
}

@media only screen and (min-width: 850px)
{
	main
	{ width: 800px }

	.block-link
	{ width: 367.2px }

	.block-link img
	{
		width: 367px;
		height: 310px;
	}
}

@media only screen and (min-width: 1600px)
{
	main
	{ width: 1250px }

	.block-link
	{ width: 395px }

	.block-link img
	{
		width: 395px;
		height: 333px;
	}
}

@media only screen and (min-width: 2400px)
{
	main
	{ width: 2150px }

	.block-link
	{ width: 415px }

	.block-link img
	{
		width: 415px;
		height: 333px;
	}
}