/*
	layout description
*/

@font-face {
	font-family:	OcrA;
	src:			url("../inc/ocra.ttf") format("truetype");
}

@media screen
{

	/* basics */

	html, body {
		width:	100%;
		height:	100%;
		margin:	0;
		padding:	0;
		color:		#fff;
		background:	#1f1f1c url("../img/new_binary_penguin.png") 50% 0% repeat;
		font-family:	OcrA, 'OCR A Extended', 'Courier New', Courier, monospace;
		font-size:		1em;
		line-height:	1.5em;
		overflow:		hidden;
	}

	img {
		margin:		0;
		border:		0;
		padding:	0;
	}

	/* hyperlinks */

	a:link, a:visited, a:active {
		color:				#fff;
		text-decoration:	underline;
	}

	a:hover {
		color:				#000;
		background-color:	#fff;
		text-decoration:	none;
	}

	a:active {
		text-decoration:	none;
		cursor:				pointer;
	}

	a.block {
		display:			block;
		text-decoration:	none;
	}

	a.block:hover {
		opacity:	0.5;
	}

	.block span {
		float:	right;
	}

	a.block span {
		cursor:	pointer;
	}

	a.block:hover span {
		color:				#000;
		background-color:	#fff;
	}

	.total {
		margin-top:		1em;
		border-top:		1px #fff solid;
		border-bottom:	3px #fff double;
	}

	/* text */

	pre, .code {
		text-align:	left;
	}

	.initial {
		float:	left;
		width:	0.7em;
		font-size:		3.5em;
		line-height:	0.8em;
	}

	p {
		margin:		0;
		padding:	0;
		margin-bottom:	1em;
	}

	ul {
		margin:				0 0 0 1em;
		padding-left:		0;
	}

	/* tables */

	table {
		border:				none;
		border-collapse:	collapse;
		margin:		0;
		padding:	0;
	}

	tr {
		margin:		0;
		padding:	0;
	}

	tr:hover td a {
		color:				#000;
		background-color:	#fff;
		text-decoration:	none;
	}

	th {
		border:				none;
		border-collapse:	collapse;
		margin:		0;
		padding:	0;
		font-weight:		bold;
	}

	td {
		vertical-align:		top;
		border:				none;
		border-collapse:	collapse;
		margin:		0;
		padding:	0;
	}

	/* positioning */

	#head {
		position:	absolute;
		left:		0.5em;
		right:		0.5em;
		top:		0;
		height:		2em;
		border-bottom:	1px #fff solid;
		margin:		0;
		padding:	0;
		font-size:		2em;
		font-weight:	bold;
		line-height:	2em;
		text-align:		center;
		overflow:		hidden;
	}

	h2 {
		border:		1px #fff solid;
		border-left:	none;
		border-right:	none;
		margin:		0 0 1em 0;
		padding:	1em 0;
		font-size:	x-large;
		font-weight:	bold;
		line-height:	1em;
		text-align:		center;
	}

	h3 {
		margin:		0 0 1em 0;
		padding:	0;
		font-size:	large;
		font-weight:	bold;
		line-height:	1em;
		text-align:		left;
	}

	#menu, #menu li ol {
		margin:		0;
		padding:	0;
		list-style-type:	none;
		list-style-image:	none;
	}

	#menu {
		position:	absolute;
		left:		1em;
		top:		4em;
		bottom:		3em;
		width:		13em;
		border-right:	1px #fff solid;
		padding:	1em 1em 0 0;
		overflow:	auto;
	}

	#menu li, #menu li ol li {
		margin:		0;
		padding:	0;
	}

	#menu li a, #menu li ol li a {
		display:	block;
		margin:		0;
		padding:	0.2em;
		font-size:	large;
		font-weight:	bold;
		text-decoration:	none;
	}

	#menu li a:hover, #menu li ol li a:hover, #menu li a.active, #menu li ol li a.active {
		color:				#000;
		background-color:	#fff;
		opacity:			0.5;
	}

	#menu li a.active, #menu li ol li a.active {
		opacity:	1.0;
		cursor:		default;
	}

	#content {
		position:	absolute;
		left:	15em;
		right:	0;
		top:	4em;
		bottom:	3em;
		margin:	0;
		padding:	1em 1em 0 1em;
		text-align:	justify;
		overflow:	auto;
	}

	.left, .right {
		border:		1px #fff solid;
		margin:		1em;
		margin-top:	0;
		padding:	1em;
	}

	.left {
		float:			left;
		border-left:	none;
		margin-left:	0;
		padding-left:	0;
	}

	.right {
		float:			right;
		border-right:	none;
		margin-right:	0;
		padding-right:	0;
	}

	#foot {
		position:	absolute;
		left:	1em;
		right:	1em;
		bottom: 1em;
		height: 1em;
		margin:	0;
		padding:		0;
		padding-top:	1em;
		border-top:		1px #fff solid;
		font-weight:	bold;
		line-height:	1em;
		text-align:		left;
		overflow:		hidden;
	}

	#time {
		display:	block;
		float:		right;
		width:		5em;
		text-align:	right;
	}
}

@media print
{

	/* basics */

	#menu, #foot {
		display: none;
	}

	html, body {
		color:		#000;
		font-family:	OcrA, 'OCR A Extended', 'Courier New', Courier, monospace;
		font-size:		1em;
		line-height:	1.5em;
	}

	img {
		margin:		0;
		border:		0;
		padding:	0;
	}

	/* hyperlinks */

	a:link, a:visited, a:active {
		color:				#000;
		text-decoration:	none;
	}

	a.block {
		display:			block;
		text-decoration:	none;
	}

	.block span {
		float:	right;
	}

	.total {
		margin-top:		1em;
		border-top:		1pt #000 solid;
		border-bottom:	3pt #000 double;
	}

	/* text */

	pre, .code {
		text-align:	left;
	}

	.initial {
		float:	left;
		width:	0.7em;
		font-size:		3.5em;
		line-height:	0.8em;
	}

	p {
		margin:		0;
		padding:	0;
		margin-bottom:	1em;
	}

	ul {
		margin:				0 0 0 1em;
		padding-left:		0;
	}

	/* tables */

	table {
		border:				none;
		border-collapse:	collapse;
		margin:		0;
		padding:	0;
	}

	tr {
		margin:		0;
		padding:	0;
	}

	th {
		border:				none;
		border-collapse:	collapse;
		margin:		0;
		padding:	0;
		font-weight:		bold;
	}

	td {
		vertical-align:		top;
		border:				none;
		border-collapse:	collapse;
		margin:		0;
		padding:	0;
	}

	/* positioning */

	#head {
		border-bottom:	1pt #000 solid;
		margin:		0;
		padding:	0;
		font-size:		2em;
		font-weight:	bold;
		line-height:	2em;
		text-align:		center;
	}

	h2 {
		border:		1pt #000 solid;
		border-left:	none;
		border-right:	none;
		margin:		0 0 1em 0;
		padding:	1em 0;
		font-size:	x-large;
		font-weight:	bold;
		line-height:	1em;
		text-align:		center;
	}

	h3 {
		margin:		0 0 1em 0;
		padding:	0;
		font-size:	large;
		font-weight:	bold;
		line-height:	1em;
		text-align:		left;
	}

	#content {
		margin:	0;
		padding:	1em 0 0 0;
		text-align:	justify;
	}

	.left, .right {
		border:		1pt #000 solid;
		margin:		1em;
		margin-top:	0;
		padding:	1em;
	}

	.left {
		float:			left;
		border-left:	none;
		margin-left:	0;
		padding-left:	0;
	}

	.right {
		float:			right;
		border-right:	none;
		margin-right:	0;
		padding-right:	0;
	}
}