/*FONTS*/
body, button, input, select, textarea {font-family:Arial, Helvetica, sans-serif; font-size:100%;}
h1, h2, h3, h4, h5, h6, label, #nav, button, caption {font-family:"Arial Black", Gadget, sans-serif; letter-spacing:normal; word-spacing:0.1em; font-weight:normal;}
code, dfn, kbd, pre, samp, var {font-family:"Lucida Console", Monaco, monospace; font-size:13px; color:#eee;}

#content {letter-spacing:0.015em; word-spacing:0.025em;}
em, i, .date, .categories, .caption, .minor, blockquote, code, dfn, kbd, pre, samp, var {letter-spacing:normal; word-spacing:normal;}

blockquote, .col3block .col {font-size:90%;}
.date, .categories, .caption, .minor {font-size:80%; color:#888;}
#footer {font-size:70%;}
/*BLOCKS*/
html {background:#331a00;}
body {width:760px; margin:auto; color:#d3d3d3; line-height:1.4;}
body#wide {width:960px;}
#wide #content {width:750px;}
#content {background:#000; width:550px; float:right; padding:20px;}
#footer {color:#852;}
#footer p {margin:20px 0; padding:20px;}
#footer, .col2block, .col3block {clear:both;}
.col2block, .col3block {width:100%; margin:20px 0;}
.col {background:#1a0d00; padding:20px;}
#content .col2block .col {width:220px;}/*265 260*/
#content .col3block .col {width:128px;}/*170 168*/
.col {float:left; margin-right:20px;}
#content .last {float:right !important; margin:0 !important;}
/*ELEMENTS*/
#content strong, #content b, #content em, #content i {color:#eee;}
#content .minor strong, #content .minor b, #content .minor em, #content .minor i {color:#999;}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {margin-top:0;}
/*hr {border:none; background:#110800; color:#110800; height:1px;}*/
hr {display:none;}
blockquote {background:url(quote.gif) 10px 21px no-repeat; margin:0 0 20px; padding:1px 40px 1px 60px;}
#content blockquote, #content blockquote strong {color:#fc9;}
#content blockquote strong {background:#630; color:#eb5; padding:3px;}
blockquote p {margin:20px 0;}
blockquote img {float:left;	margin:0 5px 5px 0;}
blockquote cite {font-weight:bold;}
/*FORMS*/
button, input, textarea {border-color:#aaa; border-width:2px; color:#000;}
input, textarea {background:#eee; border-style:inset;}
button {background:#ccc;}
/*HEADERS*/
h1, h2, h3, h4, h5, h6 {margin-right:-10px; margin-bottom:0; margin-left:-10px; color:#eee; padding:2px 10px;}
.col h1, .col h2, .col h3, .col h4, .col h5, .col h6 {margin:0; padding:0; background:transparent;}
h1 {background:#630;}
h2, h3, h4, h5, h6 {background:#331a00;}
/*IMAGES*/
.fullblock {background:#000; border-top:1px #000 solid;}
.fullblock img {clear:left; float:left; margin:5px 20px 5px 0;}
.col3block img {vertical-align:bottom;}
.imgblock img, .featureblock img {clear:right; float:right; margin:5px 0 5px 5px;}
.caption img {display:block;}
.imglist img {float:right;}
/*LINKS*/
a {font-weight:bold; text-decoration:none;}
#nav a {font-weight:normal;}
a:link, #nav a:visited, .col a:visited {color:#0ff;}
a:visited {color:#099;}
a:hover, #nav a:hover {color:#f36; text-decoration:underline;}
a:active, #nav a:active {color:#f36;}
#nav #logo a {background:url(dk.png) top right no-repeat; min-width:132px; padding-top:143px; display:block;}
#nav #logo a:link strong, #nav #logo a:visited strong, #nav #logo a:hover strong, #nav #logo a:active strong {color:#ddd; font-weight:normal;}
#nav #logo a:hover {text-decoration:none;}
#nav #logo strong {font-size:160%; line-height:1.0;}
/*LISTS*/
ul {list-style:square;}
ol li, .q_and_a li, .imglist li {border-bottom:1px #222 solid;}
.imglist {border-top:1px #222 solid; padding:20px 0 0;}
ol li, .q_and_a li {margin-bottom:5px;}
.q_and_a li .plain li {border:none;}
#nav, .q_and_a, .imglist {list-style:none;}
#nav, #nav li {margin:0; padding:0;}
#nav {text-align:right; width:150px; float:left;}
.q_and_a, .q_and_a li, .imglist, .imglist li {margin-left:0; padding-left:0;}
.q_and_a li strong {display:block; margin:20px 0 0;}
.q_and_a p, .imglist li {margin:0 0 20px;}
.imglist li {padding:0 0 20px;}
/*TABLES*/
table {width:100%; margin:20px 0; border-collapse:collapse;}
caption, th, td {padding:2px 5px;}
caption, th {text-align:left;}
th, td {border:1px #331a00 solid;}
caption {background:#630; color:#eee;}
th {background:#331a00;}
tr {vertical-align:top;}
td {background:#000;}
/*VARIOUS*/
#logo span {display:block;}
.col2block:after, .col3block:after, .imgblock:after, .fullblock:after, .featureblock:after, imglist li:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
#content strong.error, #mp3scrollplayer {color:#ffc200;}

@media only screen and (max-width:759px) {
	embed, object {
		max-width:100% !important;
	}
	
	img, iframe {
		max-width:100% !important;
		height:auto !important;
	}

	body, #nav, #content {
		width:auto;
	}
	
	body {
		padding:0 20px;
	}
	
	#nav, #content, .col {
		float:none;
	}
	
	#content .last {
		float:none !important;
	}
	
	#nav {
		text-align:center;
	}
	
	#nav li {
		display:inline;
		padding:0 5px;
	}
	
	#nav li:nth-child(2) {
		padding-left:0;
	}
	
	#nav li:last-child {
		padding-right:0;
	}
	
	#nav li#logo {
		display:block;
		margin:0 0 10px;
		padding:0;
	}
	
	#nav #logo a {
		background:none;
		display:inline;
		padding-top:0;
		min-width:0;
		text-align:center;
	}
	
	#content {
		margin:0 -20px;
	}
	
	#content .col2block, #content .col3block {
		display:table;
		padding:0;
	}
	
	.col {
		display:table-cell;
		margin:-20px;
	}
	
	#content .last {
		margin:-20px !important;
	}
	
	#content .col2block .col {
		width:50%;
	}
	
	#content .col3block .col {
		width:33%;
	}
	
	pre, code {
		word-break: break-all; /* webkit */
		word-break: keep-all;
		word-wrap: break-word;
		white-space: -pre-wrap;/*opera 4-6*/
		white-space: -o-pre-wrap;/*opera 7*/
		white-space: pre;
		white-space: -moz-pre-wrap; /* fennec */
		white-space: pre-wrap;
		white-space: pre\9; /* IE7+ */
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	
	#footer p {
		padding:0;
	}
	
	.headlines {
		font-size:13px;
	}
}


@media only screen and (max-width:480px) {
	#nav #logo strong, h1, h2 {
		font-size:24px;
	}
	
	input, textarea {
		max-width:100%;
		width:100%;
	}
	
	embed, object {
		max-width:100%;
		height:auto !important;
		/*they may disappear, but small resolutions wont probably play these plugins (flash, ...) anyway*/
	}
	
	blockquote {
		background-position:0 0;
		padding:34px 0 1px 0;
	}
	
	.imglist img {
		display:block;
		float:none;
	}
	
	table caption, table th, table td {
		display:block;
	}
	
	table td {
		background:transparent;
	}
	
	table tr:nth-child(odd) {
		background:#181818;
	}
	
	table tr:nth-child(odd) td {
		border-color:#333;
		color:#999;
	}
	
	td[align="right"] {
		text-align:left;
	}
	
	#content table tr:nth-child(odd) td strong,
	#content table tr:nth-child(odd) td b,
	#content table tr:nth-child(odd) td em,
	#content table tr:nth-child(odd) td i {
		color:#ccc;
	}
	
	.imgblock img, .featureblock img {
		display:block;
		float:none;
		clear:both;
		margin:0;
	}
	
	#content .col2block, #content .col3block, .col, #content .col2block .col, #content .col3block .col {
		display:block;
		width:auto;
	}
}

@media only screen and (max-width:320px) {

}
/*pages with <!--OLD PAGE--> and TABLES give a small horizontal scrollbar, when responsive*/
/*REMOVE THIS LAST LINE WHEN DONE TESTING!*/
/*.offline {display:none;}*/