/*
Author:			E3-Webdesign
Modified:		11-Nov-2007	- First setup.
Notes:			1.	IE6: An absolute positioned element with filter:alpha does not combine with display:block.
					The element does not follow the height:% settings anymore. Without display:block it does.
					Reason unknown.
					The above solution is not soul-saving. It is proven to fail differently in several instances.
					This IE opacity filter causes more problems: overflow:visible is not working.
Known bugs:		-
Suggestions:	-
*/

					/*--- Color definitions ---*/
						/*
						  #6e8080		Greyish blue				Base color for header background
						  #d4d9d9		Light blueish grey 			Header background (equals #6e8080 at opacity:0.3)
						  #f1f3f3		Very light blueish grey		Item background (equals #6e8080 at opacity:0.1)
						  #1b1055		Dark blue					Text
						  #cb3232		Red							Text, headers
						  #455c72		Greyish blue				Page selection menu
						  #d24f4f		Opaque red					Menu item indicator (equals #cb3232 at opacity:0.9)
						*/

					/*--- General ---*/
body					{ height:100%;
						  margin:0; padding:0;
						  font-family:georgia,arial,times;
						  font-size:11pt; color:#01374b;	/*#01404b;*/	/*#1b1055;*/
						  /*background-image:url(../Images/WindowBackground2.png);*/
						  behavior:url(csshover.htc);				/*Emulate :hover pseudo class in IE6*/
						}
#horizon 				{ position:absolute;
					      left:0px; top:50%;
						  width:100%;
						  margin-top:-180px;						/*Must equal to half of #canvas height, or be tuned*/
						  											/*to suit the elements depicted outside the canvas*/
						}
						
					/*--- Language ---*/
.en						{ display:none;
						}
.nl						{ display:none;
						}

					/*--- Styling ---*/
img						{ border:none;								/*Kill all image borders*/
						}
a						{ outline-style:none;						/*Kill outline style of an element with focus;*/
						}
a.pointer				{ cursor:pointer;
						}
big						{ font-weight:bold; font-size:0.9em;
						}
.background				{ position:absolute;
						  /*top:0; left:0;*/
						  width:100%; height:100%;
						  background-color:#ffffff;
						  opacity:0.5;								/*Not part of CSS2.1, will most likely be part of CSS3*/
						  filter:alpha(opacity=50);					/*IE only filter*/
						  z-index:0;
						  border:0px dashed red;
						}

					/*--- Canvas and its background, offset and borders, and the page logo ---*/
#canvas					{ width:750px; height:400px;
						  position:relative; display:block;
						  margin-left:auto; margin-right:auto;		/*h-center the canvas*/
						  border:0px dashed green;
						}
.canvasshadow			{ position:relative;
						  width:100%; height:100%;
						  left:-1px; top:-1px; _left:0px; _top:0px;
						  border:1px solid #ffffff;
						  /* Have IE display the opaque .png image (Mozilla ignores MS image filters) */
					  	  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Images/CanvasBackground.png',sizingMethod=crop);
						  z-index:1;
						}
.canvasshadow[class]	{ /* Have Mozilla display the opaque .png image (IE ignores styles with [attributes]) */
						  background-image:url(../Images/CanvasBackground.png);
						}
#canvasshadowborder		{ position:absolute; display:block;
						  width:100%; height:100%;
						  border:2px solid #bbbbbb; _border-width:1px;
						  background-color:transparent;
						  z-index:1;
						}
#canvasbackground		{ position:relative;
						  overflow:visible;
						  width:100%; height:100%;
						  /*_height:400px;*/						/*To make IE6 behave. Must equal to #canvas height*/
    					  top:6px; left:6px;
						  z-index:1;
					      background-color:#ffffff;
						  border:1px solid #1b1055;
						  opacity:0.5; 								/*Not part of CSS2.1, will most likely be part of CSS3*/
						  filter:alpha(opacity=50);					/*IE only filter*/
						}
#logo					{ position:absolute;
						  text-align:right;
						  left:-90px; top:-90px;
						}
#logoframe				{ position:relative; display:block;
						  width:140px; height:50px;
						  left:60px; top:-2px;
						  border-width:1px 0 0 1px; border-style:solid; border-color:#bbbbbb;
						}
#copyright				{ position:absolute;
						  top:100%;
						  margin-top:8px; margin-left:8px;
						  color:#aaaaaa; font-size:0.6em;
						  z-index:1;
						}

					/*--- Sections on the canvas ---*/
.headersection			{ position:absolute;
						  top:0%; left:0%;
						  width:100%; height:15%;
						  border:0px dashed navy;
						  z-index:1;
						}
#menusection			{ position:absolute; display:block;
						  top:15%;									/*Must equal #headersection height*/
						  width:27%;
						  height:85%;								/*Must equal 100% - #menusection top*/
						  _height:340px;							/*Must equal 85% * #canvas height (IE6 cannot resolve the % height)*/
						  font-family:verdana,arial,times;
						  font-size:0.9em;
						  border:0px dashed red;
						}
#contentsection			{ position:absolute;
						  left:27%;									/*Must equal #menusection width*/
						  top:15%;									/*Must equal #headersection height*/
						  width:67%;								/*Must equal 100% - #contentsection left - padding left & right*/
						  height:85%;								/*Must equal 100% - #contentsection top*/
						  padding-left:30px; padding-right:15px;	/*Padding is added to the size of the element,*/
						  											/*and not included in the size specified*/
						  											/*Padding should principally be 4% (left) and 2% (right),*/
																	/*but IE6 is having difficulties in calculating this % */
																	/*first time right*/
						  padding-top:2em;
						  line-height:1.3em;
						  border:0px dashed yellow;
						  z-index:1;
						}

					/*--- Page selection menu ---*/
#pagemenu				{ position:absolute;
						  width:85%; height:auto;
						  bottom:10%; left:15%;
						  border-right:2px dotted #455c72; /*#1b1055;*/
						}
#pagemenu p				{ display:block;
						  height:21px;
						  text-decoration:none; margin:0; padding:0;
						  cursor:pointer;
						}
#pagemenu p .item		{ display:block; position:relative;
						  line-height:20px;							/*Must equal to a height - 1 px to get 1px gap between menu items*/
        				  _height:90%;								/*To get hyperlink area across total element height in IE6*/
						 											/*Any value less than 100% will do*/
						  color:#455c72;/*#0c705a;*/ text-align:right;
						  margin-right:1px;							/*Keep the selection block away from the border*/
						  padding:0 6px 0 0;
						  font-weight:bold;
						  border-right:6px solid transparent; 		/*Prevent menu text of selected item to be*/
						  											/*shifted by borderwidth-px to the left when hovered*/
						  _border-right:none;						/*IE6 does not support transparant borders, so*/
						  _padding-right:12px;						/*needs another solution*/
						}

.button1 p .item#menu1,
.button2 p .item#menu2,
.button3 p .item#menu3,
.button4 p .item#menu4,
.button5 p .item#menu5,
.button6 p .item#menu6	{ border-right:6px solid #d24f4f;
						  _padding-right:6px;
						  color:#cb3232 !important;
						}
#pagemenu p:hover .item
						{ border-right:6px solid #d24f4f;
						  _padding-right:6px;
						  color:#455c72;
						}

/**html #pagemenu p:hover*/												/*Fix for IE*/
						{ border-right:0px solid #d24f4f;
						  _padding-right:0px;
						  color:#455c72;
						}

					/*--- Page title ---*/
#title					{ display:block; position:absolute;
						  padding:0;
						  left:27%; 								/*27%=17% + 10% to compensate for the local*/
						  											/*shift-left of 10% of the .headersection*/
						  bottom:0px;
						  z-index:1;
						  border:0px dashed green;
						}
#titlebackground		{ position:absolute;
						  left:17%; 								/*Must equal to #title left*/
						  width:83%;								/*Must equal to 100% - #titlebackground width*/
						  bottom:0px; 
						  font-size:5px; 							/*Get rid of default line-height in IE6*/
						  height:15px;
						  background-color:#6e8080;
						  opacity:0.3; 								/*Not part of CSS2.1, will most likely be part of CSS3*/
						  filter:alpha(opacity=30);					/*IE only filter*/
						}
#languageswitch			{ position:absolute;
						  text-align:right;
						  font-size:5px; 							/*Get rid of default line-height in IE6*/
						  left:17%; 								/*Must equal to #titlebackground left*/
						  width:83%;								/*Must equal to #titlebackground width*/
						  bottom:3px;
						}
#languageswitch a		{ position:relative; float:right;
						  margin-right:7px;
						  height:15px;
						}
#languageswitch a.dutch	{ width:22px;
						  background-image:url(../Images/FlagNLbw.png);
						}
#languageswitch a.dutch:hover
						{ background-image:url(../Images/FlagNL.png);
						}
#languageswitch a.english
						{ width:25px;
						  background-image:url(../Images/FlagUKbw.png);
						}
#languageswitch a.english:hover
						{ background-image:url(../Images/FlagUK.png);
						}
#titlewindow			{ display:none; position:absolute;
						  overflow:hidden;
						  margin-left:-1px;
						  left:0px;									/*Default value, is dynamically adjusted*/
						  width:120px; height:140px;
						  bottom:-5px;
						  border:1px solid #bbbbbb;
						}
#titlewindowtext		{ position:absolute;
						  bottom:4px;
						  left:0px;									/*Default value, is dynamically adjusted*/
						}
#titlewindowimage		{ position:absolute;
						  top:0px;
						  left:0px;									/*Default value, is dynamically adjusted*/
						}