/* 
	Generaal Styles 
	
	Blue: 564e8f
	Orange: f6822b
	Dark Grey: 757575
	Light Grey: cccccc
*/
@import url("generic.css");

body, div, img {
	border: 0;
	margin: 0;
	padding: 0;
  	font-size: 90%;	
}

html, body {
	height: 100% ;
}

a {
	color: f6822b;
	text-decoration:none;
	font-weight: bold;
}


/* 
	Header Styles 
*/
div#header {
	background-image: url("../images/header_pattern.png");	
	background-repeat:repeat-x;
	height: 66px;
}

div#header img.logo {
	margin-left: 38px ;
	margin-top: 34px;
}


/* 
	Menu Styles 
*/
div#menu {
	width: 200px ;
	padding: 10px 30px 20px 0px;	
	float: left ;
}

div#et {
	width: 200px ;
	position: absolute ;
	top: 500px ;
	left: 20px ;
	/*padding: 190px 30px 20px 40px;	*/
	float: left ;
}

#sponsor {
color:#757575;
font-size:1.2em;
text-decoration:inherit;
text-align: center ;
}


div#menu li {
	list-style-type:none;
	background-image: url("../images/button.png");		
	height: 29px ;
	width: 150px ;
	margin-bottom: 3px ;
	color: #ffffff;
	font-size: 130%;
	text-align: left ;
	vertical-align: middle;
}

div#menu li a {
	color: #ffffff;
	vertical-align: middle;	
	padding: 5px 0 0 5px;
	display: block;		
}

div#menu li.activelink {
	background-image: url("../images/button_active.png");		
	color: #000000;
}

div#menu li.activelink a{
	color: #000000;	
	display: block;		
}

div#menu li.subnav {
	background-image: none;	
	background-color: #fccc99;
	height: 25px ;
	font-size: 100%;
	text-align: left ;
	vertical-align: middle;		
}

div#menu li.subnav a {
	color: #000000 ;
	padding: 5px 0 0 20px;	
	display: block;		
}


div#menu li.subnav-active {
	background-image: none;	
	background-color: #f9ad5c;
	height: 25px ;	
	font-size: 100%;	
	text-align: left ;
	vertical-align: middle;	
}

div#menu li.subnav-active a {
	color: #000000 ;
	padding: 5px 0 0 20px;		
	display: block;	
}


/* 
	Content Styles 
*/
div#content {
	padding: 0px 30px 20px 30px;
	margin-left: 210px ;
	min-height: 90% ;
	margin-bottom: -150px ;
	position: relative ;
}

div#content h2, h3 {
	color: #564e8f ;
}

font.header {
	color: #000000;
	font-weight: bold;
}

div.code {
	margin: 10px 30px 10px 30px;
}
div.code div{
	background:#e4e4e4;
	padding: 7px;
	font-family: monospace;
	font-size: 130%;
	font-weight: bold;
}

div.comments div{
	background: #f6822b;
	margin-bottom:10px
}
div.comments p{
	padding: 10px;
	margin:0
}

div.callout {
	float: right ;
	margin-left: 20px ;
	padding: 2 px ;
}

div.callout div {
	padding: 7px ;
	background-color: #a8ce56 ;
	width: 200px ;	
	font-size: 110% ;
}

div.callout hr {
	color: #a8ce56 ;
	background-color: #ffffff ;
	border-style: dotted;
	height: 1px ;
}

div.callout img.icon {
	float: right ;
	position: relative ;
	top: -17;
	right: -17 ;
}

font.intro {
	font-size: 130% ;
}

/* 
	Footer Styles 
*/

div#clearfooter {
	height: 150px ;
	clear: both ;
}
div#footer {
	margin-top: 10px ;
	width: 100%;
	background-image: url("../images/footer_pattern.png");
	background-repeat:repeat-x;
	height: 0px;
	background-color: #757575;
	position: relative ;
}

div.footerbit {
	height: 100% ;
	width: 23% ;
	margin: 0;
	padding: 0 ;
	background-image: url("../images/corner_shade.png");
	background-repeat: no-repeat ;
	background-color: #757575;
	float: left ;
	color: #cccccc ;
	padding: 5px 1% 0 1% ;
}

div.footerbit a {
	color: #ffffff ;
	font-weight: bold;
}

div#footer img.logo {
	position:relative ;
	top: -5px ;
	left: -5px ;
	margin-left: 38px ;
}

div.project {
	margin-bottom: 4px ;
}

img.screenshot {
	border: 1px solid;
	border-color: grey ;
	padding: 2px ;
	width: 400px;
}


dt
{
color: #000;
font-weight: bold;
font-size:100%;
padding: 0;
}

dd
{
margin: 0 0 1em 0;
padding: 0 0 0 10px;
background-image: url("../images/arrow.gif");
background-repeat: no-repeat;
background-position: 0 .5em;
}