/* 
   This stylesheet is copyright (©) Grundsätzlich IT 2008.
   
   You can be inspired by it, but copying entire areas are not allowed unless with prior written permission.
*/

/* generics */

/*
   Colorscheme:
   1. the nice dotted vertical bars: rgb(128,128,128);
   2. LUMIT-brown: rgb(255,170,100); Darker version (H2): rgb(225,140,70);
 */    
	
/* body - this covers the whole page */

/* IE browsers read the following lines (non-IE should not)  */
* html body {	
	margin-left: 10%;	/* alternative margin definition: "margin: top right bottom left;" */
	margin-right: 10%;
	margin-top: 20px;
	margin-bottom: 20px;
	height:100%;
	top: 0px;
	width: 900px; 		/* avoid width:100% in the rest of the sheet - causes all kinds of trouble in IE6 vs IE5.5 */
	padding: 0;
	text-align: center;
	color: black;
	background-color: white;
	font-size: 8pt;	/* fallback in case something goes wrong with a tag */
	}
	
/* now fudge the body style for non-IE (i.e. normal) browsers */
body {	
	margin-left: auto;	/* alternative margin definition: "margin: top right bottom left;" */
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	height:100%;
	top: 0px;
	width: 900px; 
	padding: 0;
	text-align: center;
	color: black;
	background-color: white;
	font-size: 8pt;	/* fallback in case something goes wrong with a tag */
	}

/* main banner */
#banner {
	text-align: left;
	padding: 0px; 
	margin: 1px;
	overflow: hidden; 
	border-width: 2px;
	border-color: black;
	border-style: solid;
	color: white;
	background-color: black;
	background-image: url(../images/banner.jpg);
	height: 165px;
	z-index: 1;
	font-family: Arial;
}

#banner h1 {
	font-size: 48px;
	font-weight: 500;
	line-height: 1.5em; 
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0px;
	margin-top: 40px;
	margin-left: 100px;
	margin-bottom: 1px;
	margin-right: 20px;
	}

#banner h3 {
/*	text-align: right; */
	font-size: 20px; 
	letter-spacing: 0.4em; 
	/* text-transform: uppercase; */
	font-style: italic;
	padding: 0px; 
	margin-top: 1px;
	margin-left: 105px;
	margin-right: 25px;
	}


/* navbar (inspired by Meyerweb mostly) */
#navigate {
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1; 
	overflow: hidden;
	height: 1.6em; 
	line-height: 1.6em;
	font-family: Verdana;
	font-size: 12px;
	border-width: 2px;
	border-color: black;
	border-style: solid;
	color: white;
	background-color: black;
	}

#navigate ul, 
#navigate li { 
	margin: 0; 
	padding: 0; 
	}

#navigate ul {
	padding-left: 0.5em;
	padding-right: 0.5em;
	}

#navlinks {
	float: left; 
	/* background-image: url(../images/stripe.jpg); */
	}

#navlinks a {
	text-decoration: none; 
	}

#navlinks li {
	float: left; 
	list-style: none; 
	padding-left: 1em;
	background-color: black;
	}

#navlinks li a {
	padding: 0.25em 1em; 
	margin-right: 0.125em;
	font-weight: bold;
	font-style: normal;
	color: white;
	border: 2px solid black;
	}

#navlinks li a:hover {
	/* background-color: rgb(128,128, 128) */
	background-color: rgb(255,170,100);
	}

/* otherLink links get floated to the right with a margin on the left side */
#navlinks #otherLink {
	margin-left: 1.75em; 
	float: right;
	}

#navlinks .activeLink a { 
	border: 2px solid white;
	}

/* main content */
#main {
	padding: 1em 1em 1em 1em;
	color: black;
	background-color: white; 
	border-width: 2px;
	border-color: black;
	border-style: solid;
	font-family: Verdana;
	margin: 1px;
	min-height: 37em; /* This line provides a minimum height. If you don't use it, all kinds of browsers run amuck with the page. */
	text-align: left;
	height: 37em;	/* needed for IE, or the browser will do really weird things with the lay-out when you select or hover over tags.  */
    }

#main a {
	text-decoration: none;
	color: rgb(225,140,70);
	}

/* read more link */
#main .leesmeer { 
	font: 8pt verdana, arial, helvetica, sans-serif; 
	font-weight: bold; 
	/* text-transform: uppercase; */
	}

#main #leftbar {
	float: left;
	width: 25%;
/*	border: 1px dotted red;*/	 /* debugging */
	}

#main #centerfold {
	float: left;
	width: 44%;
/*	border: 1px dotted red;	 *//* debugging */
	border-left: 1px dotted rgb(128,128,128);
	border-right: 1px dotted rgb(128,128,128);
	margin-left: 0.5em;
	padding: 0 0.5em 0 0.5em;
	}
	
#main #rightbar {
	float: right;
	width: 25%;
/*	border: 1px dotted red;*/	 /* debugging */
	margin-left: 1em;
	}

/* 2 column 1:2 layout */
#main #col21 {
	float: left;
	width: 31%;
	margin: 0 0 0 0;
	margin-right: 63%;	/* this hack will push all text in the main div to below our div, combined with col33 */
	border-right: 1px dotted rgb(128,128,128);
	}

#main #col22 {
	float: left;
/*	border: 1px dotted red;*/	 /* debugging */
	padding: 0 1.5em 0 1.5em;
	margin: 0 0 0 0;
	width: 63%;
	margin-left: -63%;  /* this hack will push all text in the main div to below our div, combined with col32 */
	}

/* 3 column 1:1:1 layout */	
#main #col31 {
	float: left;
	width: 31%;
	margin-right: 1.5%;
	}

#main #col32 {
	float: left;
	width: 30%;
	/*border: 1px dotted red;	 *//* debugging */
	border-left: 1px dotted rgb(128,128,128);
	border-right: 1px dotted rgb(128,128,128);
	margin: 0 0 0 0;
	padding: 0 1.5em 0 1.5em;
	margin-right: 30%;	/* this hack will push all text in the main div to below our div, combined with col33 */
	}

#main #col33 {
	float: right;
	width: 30%;
	margin-left: -30%; /* this hack will push all text in the main div to below our div, combined with col32 */
	}

#main h1 {
	text-align: left;
	color: rgb(255,170,100);
	font-size: 24pt;
	font-weight: 500;
	}

#main h2 {
	text-align: left;
	color: rgb(225,140,70);
	font-size: 18pt;
	font-weight: 500;
/*	border-bottom: 1px dashed; */ /* optional, could be nice */
	}

#main h3 {
	text-align: left;
	color: rgb(225,140,70);
	font-size: 14pt;
	font-weight: 500;
	}

#main h4 {
	text-align: left;
	color: rgb(100,100,100);
	font-size: 10pt;
	margin: 0;
	padding: 0;
	}

#main p { 
	font-size: 8pt;
	line-height: 1.5em;
	color:#404040;
	padding: 0 0 0.5em 0;
	}

#main #leftbar p { 
	border-bottom: 1px dotted rgb(128,128,128);
	}

#main img {
	padding: 5px;
	border: 1px solid rgb(128,128,128);
	}

#main img.leader {
	width: 190px;
	border: 0px solid;
	}
	
	
#main ul, 
#main li { 
	font-size: 8pt; 
	color:#606060;
	}

#main li {
	list-style-type: none;
	list-style-image: url(../images/bullet.gif);
	}

/* http://www.positioniseverything.net provided some help on this one */
#main b.unseen {
	color: white;	/* hide things by setting font-color to main background-color */
	clear:both;		/* make sure there is no content on either side, thus restoring lay-out */
	height:1px;		/* provide a height for some browsers that depend on this */
	overflow:hidden;	/* no scrollbars :) */
	line-height:1%;	/* provide a height for some browsers that depend on this */
	font-size:0px;	/* provide a ZERO height for some browsers (IE) that depend on this */
	margin-bottom:-1px; /* make sure the whole thing is not displayed somewhere */
}
	
.disclaimer {
	font: 8pt verdana, arial, helvetica, sans-serif; 
	line-height: 1.5em;
	color:#606060;
	}

.disclaimer a {
	text-decoration: none;
	color:rgb(225,140,70); /*LUMIT-brown H3*/
	font: 8pt verdana, arial, helvetica, sans-serif; 
	font-weight: bold; 
	}

.copyright {
	font: 8pt verdana, arial, helvetica, sans-serif; 
	line-height: 1.5em;
	color:#606060;
	}

/* the footer with our address */

#footer {
	position: fixed;
	bottom: 1px;
	width: 70%;
	border-width: 0px;
	border-color: black;
	border-style: solid;
	z-index: 2; overflow: hidden;
	font-family: Verdana;
	font-size: 10px;
	}

#footer ul {
	margin: 0; 
	padding: 0;
	}

#footer li .address {
	float: left; 
	list-style: none; 
	padding-left: 1em;
	}