/* General HTML tags */
*
{
	margin:0;
	padding:0;
}

h1,h2,h3,h4,h5,h6,blockquote,form,label,ul,ol,dl,fieldset,address
{
	margin:0.5em 0;
}

dd
{
	margin-left:1em;
}

fieldset
{
	padding:0.5em;
}

p
{
	margin:0 0 1em;
}

img
{
	border:none;
	margin:0;
	padding:0;
}

ul
{
	list-style:none;
	margin:0;
	padding:0;
}

ul li
{
	background:transparent url(../images/bullet.png) no-repeat 0 0.6em;
	margin:0;
	padding:0 0 0 1.2em;
}

ol
{
	margin-left:2em;
}

a:link,a:visited
{
	color:#048BBD;
	font-weight:400;
	text-decoration:none;
}

a:hover
{
	font-weight:400;
	text-decoration:underline;
}

h1,.componentheading
{
	color:#048BBD;
	font-size:1.7em;
	font-weight:700;
	line-height:1.7em;
	margin:1em 0;
}

h2,.contentheading
{
	color:#0090C2;
	font-size:1.5em;
	font-weight:700;
	line-height:1.5em;
	margin:0.8em 0;
}

h3,.articlesubhead1
{
	color:#0090C2;
	font-size:1.3em;
	font-weight:700;
	margin:0.7em 0;
}

h4,.articlesubhead2
{
	color:#0090C2;
	font-size:1.2em;
	margin:0.6em 0;
}

h5,.articlesubhead3
{
	color:#0090C2;
	font-size:1.1em;
}

h6,.articlesubhead4
{
	color:#0090C2;
	font-size:1em;
	font-weight:700;
}

input.button
{
	cursor:pointer;
}

/*******************************************************************************
 				The hierarchy of identifiers							
*******************************************************************************/
html
{
	height:100%;
	margin-bottom:1px;
}

body
{
	background-color:#E4E9ED;
	color:#231F20;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	line-height:1.3em;
	margin:0;
	width:100%;
}

#canvas
{
	background:#148BBD url(../images/canvas.png) repeat-y left top;
	border-left:0.5em solid #74BDD9;
	font-size:1em;
	margin:0 auto;
	max-width:1450px;
	min-width:875px;
	padding:0.5em 14px 0.5em 0;
}

#container
{
	background:#FFF none repeat scroll 0 50%;
	float:left;
	width:100%;
}

#container_tr
{
	background:transparent url(../images/container_t_r.png) no-repeat right top;
	float:left;
	width:100%;
}

#container_tl
{
	background:transparent url(../images/container_t_l.png) no-repeat left top;
	float:left;
	margin-left:0;
	width:100%;
}

#container_bl
{
	background:transparent url(../images/container_b_l.png) no-repeat left bottom;
	float:left;
	width:100%;
}

#container_br
{
	background:transparent url(../images/container_b_r.png) no-repeat right bottom;
	float:left;
	width:100%;
}

#container_mask
{
	background:transparent url(../images/container_mask.png) repeat-y right top;
	float:left;
	width:100%;
}

#header
{
	margin:0;
	padding:0;
	width:100%;
}

#fontsize_controller
{
	float:right;
	margin:148px 0 0;
	padding:0;
	width:70px;
}

#fontsize_controller_content
{
	margin:0 auto;
	padding:0;
	width:60px;
}

#fontsize_controller_content a
{
	height:20px;
	margin:2px 0 0 2px;
	width:20px;
}

.font_size_controller
{
	float:left;
	height:20px;
	margin:0;
	overflow:hidden;
	padding:0;
	width:20px;
}

#header_boxall
{
	margin:0 70px 0 0;
}

#header_right
{
	color:#194378;
	float:right;
	margin:0;
	padding:0;
	width:280px;
}

#header_right_content
{
	height:130px;
	margin:19px 20px;
	overflow:hidden;
	width:240px;
}

#header_boxmidleft
{
	margin:0 280px 0 0;
	padding:0;
}

#header_left
{
	float:left;
	margin:50px 0 0 20px;
	padding:0;
	width:224px;
}

#header_left_content
{
	padding:0;
}

#header_mid
{
	color:#048BBD;
	font-size:1.1em;
	font-weight:400;
	height:168px;
	margin:0 0 0 244px;
	overflow:hidden;
	padding:0;
	text-align:center;
}

#header_mid_content
{
	margin-left:auto;
	margin-right:auto;
	padding-top:40px;
}

#header_mid p
{
	margin-bottom:0.5em;
}

#tabarea
{
	background:transparent url(../images/menubar_right.png) repeat-x scroll 0 0;
	clear:both;
	height:59px;
	width:100%;
}

#tabarea_left
{
	background:transparent url(../images/menubar_left.png) no-repeat scroll 0 0;
	float:left;
	height:59px;
	padding-left:0;
	width:100%;
}

#whitebox
{
	clear:both;
	font-size:0.8em;
	margin:0 70px 0 0;
}

#whitebox_right
{
	color:#194378;
	float:right;
	margin:0;
	padding:0;
	width:280px;
}

#whitebox_right_content
{
	padding:1em 20px 0;
}

#whitebox_canvas
{
	margin:0 280px 0 0;
	padding:0;
}

#whitebox_canvas_content
{
	padding:0 2% 2% 3%;
	text-align:justify;
}

#footer
{
	clear:both;
	color:#999;
	font-size:0.8em;
	width:100%;
	text-align: center;
}

#footer_right
{
	height:0;
	left:100%;
	padding-left:2px;
	position:relative;
	top:-200px;
	width:0;
}

#footer_right_ie6,#footer_print,#footer_mid_ie6
{
	display:none;
}

#syndicate
{
	float:left;
	padding-left: 25px;
}

/*******************************************************************************
 			Styles used in the contact display in de mask					
*******************************************************************************/
.contact_ident
{
	margin-left:-2em;
	padding-left:2em;
}

.contact_spacing
{
	line-height:1.4em;
	margin-bottom:0.2em;
}

#contact
{
	margin-bottom:0;
	margin-top:0;
}

#contact_details
{
	margin-left:2em;
}

#contact_home
{
	background:transparent url(../images/icon_home.png) no-repeat center left;
}

#contact_phone
{
	background:transparent url(../images/icon_phone.png) no-repeat center left;
}

#contact_email
{
	background:transparent url(../images/icon_email.png) no-repeat center left;
}

#contact_www
{
	background:transparent url(../images/icon_www.png) no-repeat center left;
}

body.mceContentBody
{
	background-color:#FFF;
	background-image:none;
}

div.moduletable
{
	background:transparent url(../images/line_pixel.png) repeat-x bottom left;
	border:none;
	margin-bottom:1.5em;
	margin-top:0;
	padding-bottom:0.5em;
	padding-top:0;
}

div.module 
{
	border:none;
	padding-bottom:2em;
}

/*******************************************************************************
 					Styles for the menubar							
******************************************************************************
 
* Below is the style sheet for the menubar. The base of this CSS is taken from:
* http://www.htmldog.com/articles/suckerfish/dropdowns/example/ 
* as an example of the "Son of Suckerfish drop downs"
*
* Color scheme for the navigation:
* (see http://colorschemedesigner.com/ using #4AA4CB as base color)
*	#186384	- Darkest
*	#4AA4CB	- Base color (= average color of the menubar)
*	#78C4E5	- One level lighter
*	#95CDE5	- Lightest
* Usage:
* 	Foreground color of the fonts: 	white.
* 	Background of the submenu's:	#4AA4CB
*	Border of the submenus:		#0A5689 (the color of the border of the menubar)
*	Hover color:			#78C4E5*/
#nav
{
	background:transparent;
	float:left;
	width:100%;
}

#nav ul
{
	float:left;
	list-style:none;
	width:100%;
}

/* 
* The width, height and padding define the "clickable" space
* The margin sets the non-clickable space.
* The height of the menubar is 48 px.
*/
#nav a
{
	background:transparent;
	color:#FFF;
	display:block;
	font-size:16px;
	font-weight:700;
	height:18px;
	line-height:1;
	margin:7px 0;
	padding:8px 1.5em;
	text-align:center;
	text-decoration:none;
	width:auto;
}

/* 
* Very important: The submenu's are positioned with respect to the "LI" element's inner space
* This means that adding padding and/or margin will position the submenu's differently
*
* Remove the "default" background image, which is the blue dot.
*/
#nav li
{
	background-image:none;
	float:left;
	height:48px;
	margin:0;
	padding:0;
	width:auto;
}

/* 
* Default position is far outside the window. Using the hover pseudo-code
* the submenu will appear or disappear
*
* Width should be fixed in order to be able to place the next submenu at the right position
* The first level is positioned be setting "left" to auto, which "magically" places the submenu
* at the left-border of the first "LI" element, which is the element in the menubar	
*
* Paint a gradient from the hover color (#78C4E5) to the base color (#4AA4CB) as the background of the submenu's
* Also paint the border with the darkest color of the color scheme(#0A5689)
*/
#nav li ul
{
	background:#4AA4CB url(../images/submenu_background.png) repeat-y left top;
	border:3px solid #186384;
	height:auto;
	left:-999em;
	margin:0;
	padding:0;
	position:absolute;
	width:11em;
}

/*
* For all submenu's the padding and margins can be removed from the <li> element
*/
#nav li li
{
	height:auto;
	margin:0;
	padding:0;
}

/*
* For the submenu's the links have to fit in the submenu space (defined by #nav li ul). Also
* instead of the links in the menubar the text should be left aligned
* Please take care that the total width is equal to the width define by #nav li ul. Otherwise
* it is not possible to navigate to a sub-submenu.
*/
#nav li ul a
{
	height:18px;
	margin:0;
	padding:8px 0.5em;
	text-align:left;
	width:10em;
}

/*
* All sub-submenu's have to be moved with respect to their parent <li> element. 
*/
#nav li ul ul
{
	margin:-32px 0 0 11em;
	padding:0;
}

/*
* Shift the submenu out of sight
*/
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul
{
	left:-999em;
}

/*
* Shift the submenu in sight
*/
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul
{
	left:auto;
}

/*
* Paint the correct background when hovering over the links in the main menubar.
*/
#nav > ul li:hover,#nav > ul li.sfhover
{
	background:transparent url(../images/menubar_hover.png) repeat-x left top;
}

/*
* For the submenu's show the gradient4 bar as the hovering element. For better visibility a small white border is also painted.
*/
#nav li li:hover,#nav li li.sfhover
{
	background:#78C4E5 url(../images/submenu_hover.png) repeat-y left top;
	border:1px solid #FFF;
}

/*
* Draw the hover arrow at the bottom of the main menubar for the active main component
*/
#nav ul li.active a
{
	background:url(../images/icon_hover.png) no-repeat scroll center bottom;
	color:#FFF;
	padding-bottom:26px;
}

/*
* Only for the active items in the submenu's the foreground color  of the fonts have to be changed.
*/
#nav li li.active > a
{
	color:#186384;
}

/*
* Do not draw the hover arrow at the bottom of a link for the active submenu items
*/
#nav ul li.parent.active:hover a
{
	background:none;
	padding-bottom:8px;
}

/*******************************************************************************
 					Some class definitions							
******************************************************************************/
 
.small,.createdate,.modifydate,.mosimage_caption,.home
{
	color:#999;
	font-size:0.8em;
}

/* class used for remvong the background image for <li> elements */
li.nolistimage
{
	background: transparent none;
}

/* This  class is needed to make the height of the various columns in the design equal */
.clearfix:after
{
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}

.articlesummary
{
	color:#048BBD;
	font-size:1.1em;
	font-weight:700;
	margin:1em 0em 2em 0em;
}