/*
Theme Name: Umlautgames
Theme URI: http://umlautgames.net/
Description: Custom wordpress theme for http://umlautgames.net/
Version: 1.0
Author: Esseb
Author URI: http://esseb.com/
Tags: umlaut
	
	http://umlautgames.net/
	
	Website design by ptoing (ptoing.net)
	Markup, CSS, PHP, and JavaScript by Esseb (esseb.com)
	
	This page should work fine in Opera 9+, Firefox 2+, Safari 3+, and Internet
	Explorer 6+. It may work in older versions of those, but I haven't checked.
	
	The two image replacement techniques this stylesheet uses fail if you have 
	stylesheets enabled but images disabled, but they don't require extra span 
	elements in the markup at least.
*/



/* --- GENERAL RULES --- */
html {
	height: 100%;
	color: white;
	font: 1em/1.2em Trebuchet, Arial, sans-serif;
	background: url(images/checkerboard_background.gif) black repeat-x;
}

body {
	height: 100%;
	width: 656px;
	margin: 0 auto;
}

div#content {
	position: relative;
	min-height: 100%;
	background: url(images/checkerboard_body.gif) repeat-y;
}

div#content:after {
	/* Not supported in IE6, but a fortunate rendering bug there means it's not necessary */
	clear: left;
	display: block;
	content: "";
}



/* --- HEADER --- */
div#header {
	height: 62px;
	border-top: 8px solid #0f1923;
	border-bottom: 8px solid #0f1923;
	background: url(images/checkerboard_header.gif);
}

/* Logo */
div#header h1 {
	float: left;
	margin: 0;
	padding-right: 254px;
	border-left: 8px solid #0f1923;
	background: #323c46;
}

div#header h1 a {
	display: block;
	width: 62px;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	font-size: .5em;	/* Apparently this image replacement technique can break if the text is too large */
	height: 0;
	overflow: hidden;
	padding-top: 62px;
	background: url(images/logo.gif) no-repeat;
}

div#header h1 a:hover {
	background-position: 0 -62px;
}

/* Slogan */
div#header img {
	position: absolute;
	top: 55px;
	left: 69px;
}

/* Header links */
div#header ol {
	margin: 0;
	padding: 0;
	float: right;
	height: 62px;
	border-left: 8px solid #0f1923;
	border-right: 8px solid #0f1923;
	background: #323c46;
}

div#header li {
	list-style-type: none;
	width: 64px;
	height: 18px;
	margin: 0 0 4px 4px;
	background: #646e78;
}

div#header li.current {
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	height: 0;
	overflow: hidden;
	padding-top: 18px;
	background-repeat: no-repeat;
}

div#header li a {
	display: block;
	width: 64px;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	height: 0;
	overflow: hidden;
	padding-top: 18px;
	background-repeat: no-repeat;
}

div#header li#contact,
div#header li#contact a		{ background-image: url(images/contact.gif); }

div#header li#donate,
div#header li#donate a		{ background-image: url(images/donate.gif); }

div#header li#newsfeed,
div#header li#newsfeed a	{ background-image: url(images/newsfeed.gif); }

div#header li a:hover		{ background-position: 0 -18px; }
div#header li.current		{ background-position: 0 -36px; }



/* --- EMANATIONS --- */
div#emanations {
	float: left;
	width: 316px;
	padding-left: 8px;
	padding-bottom: 34px;	/* Prevents the footer from overlapping */
}

div#emanations h2 {
	margin: 0;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	font-size: .5em;	/* Apparently this image replacement technique can break if the text is too large */
	height: 0;
	overflow: hidden;
	padding-top: 36px;
	background: #323c46 url(images/emanations.gif) no-repeat;
}

div#emanations h3,
div#emanations li {
	float: left;
	margin: 0;
	border-right: 4px solid #323c46;
	border-bottom: 4px solid #323c46;
}

div#emanations h3.current {
	width: 232px;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	font-size: .5em;	/* Apparently this image replacement technique can break if the text is too large */
	height: 0;
	overflow: hidden;
	padding-top: 36px;
	background: #646e78 no-repeat;
}

div#emanations h3 a {
	display: block;
	width: 232px;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	font-size: .5em;	/* Apparently this image replacement technique can break if the text is too large */
	height: 0;
	overflow: hidden;
	padding-top: 36px;
	background-repeat: no-repeat;
}

/* Sidebar game headers */
div#emanations h3.thrustburst, div#emanations h3.thrustburst a {
	background-image: url(images/thrustburst-sidebar.gif);
}


div#emanations h3 a:hover { background-position: 0 -36px; }
div#emanations h3.current { background-position: 0 -72px; }

/* Sidebar screenshots and downloads links */
div#emanations ol {
	margin: 0;
	padding: 0;
}

div#emanations li {
	list-style-type: none;
	width: 36px;
	height: 36px;
}

div#emanations li.current,
div#emanations li.unavailable {
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	height: 0;
	overflow: hidden;
	padding-top: 36px;
	background-repeat: no-repeat;
}

div#emanations li a {
	display: block;
	width: 36px;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	height: 0;
	overflow: hidden;
	padding-top: 36px;
	background-repeat: no-repeat;
}

div#emanations li.screenshots, div#emanations li.screenshots a {
	background-image: url(images/screenshots.gif);
}
div#emanations li.downloads, div#emanations li.downloads a {
	background-image: url(images/downloads.gif);
}

div#emanations li a:hover { background-position: 0 -36px; }
div#emanations li.current { background-position: 0 -72px; }
div#emanations li.unavailable { background-position: 0 -108px; }



/* --- GENERAL STYLES FOR THE MAIN CONTENT AREA --- */
div#main {
	margin: 0 8px 0 336px;
	padding-bottom: 34px;	/* Prevents the footer from overlapping */
}

div#main div {
	font-size: .8em;
	background: #646e78;
	border-bottom: 4px solid #323c46;
}

div#main h2 {
	margin: 0 0 0 -4px;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	font-size: .5em;	/* Apparently this image replacement technique can break if the text is too large */
	height: 0;
	overflow: hidden;
	padding-top: 36px;
	background: #323c46 no-repeat;
}

/* Main headers */
div#main.proclamations h2	{ background-image: url(images/proclamations.gif); }
div#main.visualisations h2	{ background-image: url(images/visualisations.gif); }
div#main.procurations h2	{ background-image: url(images/procurations.gif); }
div#main.adulations h2		{ background-image: url(images/adulations.gif); }
div#main.donations h2		{ background-image: url(images/donations.gif); }
div#main.syndications h2	{ background-image: url(images/syndications.gif); }
div#main.fourohfour h2		{ background-image: url(images/404.gif); }

/* Game headers */
div#main.thrustburst h2		{ background-image: url(images/thrustburst.gif); }

div#main h3 {
	font-size: 1.2em;
	letter-spacing: .1em;
	margin: 0;
	padding-left: .3em;
	background: #4b555f;
}

div#main div p {
	margin: 0;
	padding: .4em;
}

div#main a {
	color: white;
	font-weight: bold;
}

div#main a:hover {
	color: #ffab00;
}



/* --- PROCLAMATIONS --- */
div#main.proclamations div {
	border-bottom: none;		/* Each poststamp in proclamations has a bottom border instead */
	background: transparent;	/* Each proclamation has a background instead */
}

div#main.proclamations div.proclamation {
	font-size: .8em;
	background: #646e78;
}

div#main.proclamations div.proclamation h3 a {
	text-decoration: none;
}

div#main.proclamations div.proclamation a img{
	border: 1px solid white;
}

div#main.proclamations div.proclamation a:hover img{
	border: 1px solid #ffab00;
}

div#main.proclamations div.proclamation p.poststamp {
	text-align: right;
	font-size: .8em;
	padding: 0 4px 0 0;
	background: #4b555f;
	border-bottom: 4px solid #323c46;
}

div#main.proclamations div.proclamation p.poststamp cite {
	font-style: normal;
}

div#archive {
	padding-top: 4px;
	padding-bottom: 20px;	/* Prevents the footer from overlapping */
}

div#archive a {
	display: block;
	border-bottom: none;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	height: 0;
	overflow: hidden;
	padding-top: 12px;
	background-repeat: no-repeat;
}

div#archive a#older {
	float: left;
	width: 58px;
	background-image: url(images/older.gif);
}

div#archive a#newer {
	float: right;
	width: 62px;
	background-image: url(images/newer.gif);
}

div#archive a:hover {
	border-bottom: none;
	background-position: 0 -12px;
}



/* --- VISUALISATIONS --- */

div#main.visualisations ol {
	margin: 0;
	padding: 8px 0 0 18px;
}

div#main.visualisations li {
	display: inline;
}

div#main.visualisations li a {
	margin-right: 12px;
	border-bottom: none;
}

div#main.visualisations a img {
	vertical-align: top;		/* Prevent a gap below the images due to them being inline elements */
	margin-bottom: 12px;
	border: 2px solid #646e78;	/* "transparent" just produces a white border in IE6 for some reason */
}

div#main.visualisations a:hover img {
	border: 2px solid white;
}



/* --- PROCURATIONS --- */
div#main.procurations div ol a,
div#main.procurations div ul a {
	text-decoration: none;
}



/* --- PROCURATIONS --- */
div#main.procurations div ol a,
div#main.procurations div ul a {
	text-decoration: none;
}



/* --- ADULATIONS, SYNDICATIONS, DONATIONS --- */
div#main.donations form {
	margin: 0;
	padding: 4px 0 0 .4em;
}



/* --- FOOTER --- */
p#footer {
	clear: left;
	position: absolute;
	bottom: 0;
	width: 640px;
	margin: 0;
	border: 8px solid #0f1923;
	border-top: none;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	height: 0;
	overflow: hidden;
	padding-top: 30px;
	background: #323c46 url(images/footer.gif) no-repeat 0 0;
}



/* --- SCREENSHOT --- */
div#blurring {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: url(images/checkerboard_lightbox.gif);
}

div#screenshot {
	position: fixed;
	margin: 0 auto;
	padding: 16px 16px 0 16px;
	background: #0f1923;
}

div#screenshot img {
	display: block;
	margin: 0;
	padding: 0;
}

div#screenshot p {
	color: #646e78;
	font-size: .8em;
	margin: 0;
	padding: 5px 4px 4px 0;
}

div#screenshot ol {
	float: right;
	margin: 4px -16px 4px 0;
}

div#screenshot li {
	list-style-type: none;
	float: left;
	width: 24px;
	height: 24px;
	margin-right: 4px;
}

div#screenshot li.unavailable {
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	height: 0;
	overflow: hidden;
	padding-top: 24px;
	background-repeat: no-repeat;
}

div#screenshot li a {
	display: block;
	width: 24px;
	/* Image replacement: http://moronicbajebus.com/playground/cssplay/image-replacement */
	height: 0;
	overflow: hidden;
	padding-top: 24px;
	background-repeat: no-repeat;
}

div#screenshot li#previous, div#screenshot li#previous a {
	background-image: url(images/previous.gif);
}
div#screenshot li#close, div#screenshot li#close a {
	background-image: url(images/close.gif);
}
div#screenshot li#next, div#screenshot li#next a {
	background-image: url(images/next.gif);
}

div#screenshot li a:hover { background-position: 0 -24px; }
div#screenshot li.unavailable { background-position: 0 -48px; }

img#loading {
	position: fixed;
	z-index: 100;
}