/*********************************************************************
	Created by Conrad Akier
	
	Credits:
	Transparency hack made possible by daltonlp.com:
	http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217
	
	The menu hover popup idea came from Eric Meyer:
	http://www.meyerweb.com/eric/css/edge/popups/demo.html

	Also, thanks to all of those who published CSS "hacks" for IE.
	
	Feel free to play use this code anyway you want.
*********************************************************************/

html, body {
	font:14px/1.2 Verdana, Arial, Helvetica, sans-serif;
	background:#FFF;
	margin:30px 0px; 
	padding:0px;
        text-align:center;
	height: 100%; 
	min-height:100%;
}

div#container {
	width:775px;
	margin:0px auto;
	text-align:left;
	border:1px solid #000;
	background-color:#F4F3EE;
	position:relative;
}

div#left {
	float:left;
	width:262px;
}
div#right { 
	position: relative;
	float:right;
	text-align: right; 
	width: 488px;
	margin: 10px 10px 10px 0px;
}

div#menu {
	width:250px; height: 385px;
	margin:36px 0 10px 10px;
	border: 1px solid #000;
	background: black url(gfx/tiles.jpg);
	position:relative;
}

div#menu a {
	display: block; 
	text-align: center; 
	font: bold 14px Verdana, sans-serif;
	padding: 5px 10px; 
	margin: 5px 0px;
	border-width: 0; 
	text-decoration: none; 
	color: #000;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	width: 230px;
	/* Mozilla doesn't support crazy MS image filters, so it will ignore the following */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='gfx/white.png');
}

div#menu a:hover {
	color: #000;
	text-decoration: underline;
}

div#menu a span { display: none; text-decoration: underline;}

div#menu a:hover span {
	width:180px;
	text-align:center;
	display: block;
	position: absolute;
	top: 270px;
	left: 18px;
	padding: 15px;
	z-index: 100;
	color: #000;
	text-decoration: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='gfx/white.png');
	border: 2px #000 solid;
	font: 12px Verdana, sans-serif;
	font-weight: bold;
	text-decoration: none;
}

#menu>a,#menu>a:hover span{ /* IE 6 and below won't understand this, which is good for the PNG filter hack */
	background-image:url(gfx/white.png);
}

div#content {
	border:1px solid #000;
	border-top:4px solid #000;
	width: 466px;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	background-color: #EFEDE0;
	text-align:left;
	position:relative;
}
div#content a {
	font-weight: bold; 
	color: #AA0000;
	text-decoration: none;
	
}
div#content a:hover { 
	text-decoration: underline;
}
}
div#content p { font: 14px Verdana, sans-serif; margin: 7px 0; padding:0; line-height:1.1; color: #000; }
div.code { overflow:scroll; width:445px; min-height: 100px; max-height: 600px; border: 1px solid #AA0000; margin: 5px; }

div#headbox { 
	text-align:center; 
	border:1px solid #000;
	width: 450px;
	margin: 10px 10px 10px 0px;
	padding: 10px;
	background-color: #EFEDE0;
}

h1 { font: 24px Verdana, sans-serif; font-weight: bold; color: #AA0000; margin: 0 0 -6px 0; padding:0px; }
h2 { font: 16px Verdana, sans-serif; font-weight: bold; color: #000; margin: 0 0 8px 0; padding:0; }
img { 
	border: 0px; 
}

div#logo { 
	vertical-align:middle;
	margin:10px auto;
	position: relative;
}


div#clear {
	clear: both;
	text-align: center;
}
div#credits {
	text-align:center;
	clear: both;
}