/*------------------------------------------------------------------------------------
 * {bedrijfsnaam} Website Screen Presentation Layer
 * Author:	{naam}
 * Created:	{datum} 
 * Notes:	{notities, bugs, etc.}
-------------------------------------------------------------------------------------*/

/* ################################################################################# */
/*                                                                                   */
/*                                		BODY	                                     */
/*                                                                                   */
/* ################################################################################# */


html, body {
	height: 			100%;
}

html {
	font-size: 			100%;
	overflow-y:			scroll;
}

body {
	background: 		#0F2348;
	font-family: 		Arial, "Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	font-size: 			62.5%; /* 62.5%, standaard font grootte is nu 10px, dus 1.2em = 12px */
	font-weight:		normal;
	color: 				#FFF;
	line-height: 		140%; /* standaard: 140% */
	margin: 			0;
	padding: 			0;
}


/* ################################################################################# */
/*                                                                                   */
/*                                VLAKVERDELING                                      */
/*                                                                                   */
/* ################################################################################# */

#wrapper {
	clear:				both;
	margin:				0 auto;
	width:				955px;
}

#header {
	clear:				both;
	height:				175px;
}

#topbar {
	border-bottom:		1px solid #FFF;
	height:				40px;
	vertical-align:		bottom;
}

#content {
	color:				#1C2F68;
	clear:				both;
	padding:			40px 0 5px 0;
	width:				955px;
}

#footer {
	background:			#00FF00;
	clear:				both;
	margin:				0 auto;
}


/*------------------------------------------------------------------------------------
 * 
 * Alleen gebruiken wanneer de footer van de website altijd 
 * tegen de onderkant van de browser aan moet staan of onderaan de content

#wrapper {
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -30px auto; /* the bottom margin is the negative value of the footer's height *//*
	width:				960px;
}

#footer, #footerclearer {
	background:			#00FF00;
	height: 			30px; /* .footerclearer must be the same height as .footer *//*
	margin:				0 auto;
	width:				960px;
}

-------------------------------------------------------------------------------------*/




/* ################################################################################# */
/*                                                                                   */
/*                                   DEFAULT                                         */
/*                                                                                   */
/* ################################################################################# */

/*------------------------------------------------------------------------------------
 * 
 * Gebruik font-size alleen bij html tags en niet bij classes en id's,
 * dit mag slechts bij uitzondering.
 *
 * Deze eigenschap zal altijd blijven ondanks verdere classes
 * 		!important
 * IE 6 and below
 *     	* html {}
 * IE 7 and below
 *     	*:first-child+html {} * html {}
 * IE 7 only
 *     	*:first-child+html {}
 * IE 7 and modern browsers only
 *     	html>body {}
 * Modern browsers only (not IE 7)
 *     	html>/**/body {}
 /*
 * Recent Opera versions 9 and below
 *     html:first-child {}
 *
-------------------------------------------------------------------------------------*/


h1, h2, h3, h4, h5, h6 {
	font-family: 		Arial,"Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	margin: 			0;
	padding: 			0;
	letter-spacing: 	0;
	border-bottom: 		0 !important;
}

button, input, option, color:#0F2348; font-family:Arial; font-size:12px;, textarea {
	font-family: 		Arial,"Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	color:				#333333;
	letter-spacing: 	0;
	margin: 			0;
	padding: 			2px;
}

a {
	color: 				#4B5A7D;
	text-decoration:	underline;
}

a:active {
	color: 				#4B5A7D;
	text-decoration:	underline;
}

a:hover {
	color: 				#4B5A7D;
	text-decoration:	underline;
}

a:visited {
	color:				#4B5A7D;
	text-decoration:	underline;
}

p {
	font-size:				1.2em;
	line-height:			1.5em;
	margin:					5px 0 10px 0;
}


/* ################################################################################# */
/*                                                                                   */
/*                             HEADER STYLES                                         */
/*                                                                                   */
/* ################################################################################# */

.goto {
	color:				#5B6D97;
	float:				left;
	font-weight:		bold;
	margin:				22px 0 0 0;
	text-align:			left;
	text-transform:		uppercase;
}

.goto a, .language a {
	color:				#5B6D97;
	text-decoration:	none;
}

.language {
	float:				right;
	font-weight:		bold;
	margin:				22px 0 0 0;
	text-align:			right;
}

.logobar {
	background: 		#0F2348;
	height:				120px;
	border-bottom:		1px solid #FFF;
}

.logo {
	float:				left;
	text-align:			left;
}

.subscribe {
	float:				right;
	text-align:			right;
	padding:			22px 0 0 0;
	margin:				0;
}

.subscribe img {
	margin:				0 0 0 10px;
}

#panel,#panel2 {
	float:				right;
	margin:				-4px 0 0 10px;
	padding:			18px 0 0 0;
	width:				225px;
}

#panel {
	background:			url(../images/bg_subscribe.png) top left no-repeat;
	display:			none;
}

#panel2 {
	background:			url(../images/bg_mobile.png) top left no-repeat;
	display:			none;
}

.subscr {
	border-bottom:		1px solid #FFF;
	border-top:			1px solid #FFF;
	margin:				0;
	padding:			8px 11px 11px 11px;
	text-align:			left;
}

.subscr input.fill {
	border:				0;
	background:			#FFF;
	color:				#0F2348;
	font-size:			1em;
	margin:				-5px -1px 0 5px;
	width:				110px;
}

.subscr input.send{
	margin:				-1px 0 -5px -3px;
}


/* ################################################################################# */
/*                                                                                   */
/*                             NAVIGATIE	                                         */
/*                                                                                   */
/* ################################################################################# */

#navigatie {
	background: 		#0F2348;
	border-bottom:		1px solid #FFF;
	border-top:			1px solid #FFF;
	text-transform:		uppercase;
	padding:			5px 0;
	position:			relative;
	margin:				25px 0 0 0;
	z-index:			120;
}

ul.nav {
	margin:				0 0 0 25px;
}

ul.nav li {
	display:			inline;
	margin:				0 40px 0 0;
}

ul.nav li,#surprise {
	font-size:			1.3em;
	font-weight:		bold;
}

#navigatie a {
	color:				#5B6D97;
	text-decoration:	none;
}

#navigatie a:hover {
	color:				#FFF;
	text-decoration:	none;
}

#surprise {
	float:				right;
	margin:				-30px 10px 0 0;
}



/* ################################################################################# */
/*                                                                                   */
/*                             CONTENT		                                         */
/*                                                                                   */
/* ################################################################################# */

.textbox {
	padding:				0 0 20px 0;
	width:				955px;	
}

#textbox_slide {
	padding:				0 0 0 0;
	width:				955px;	
	height:				320px;
}

.textbox-top {
	background:			url(../images/top_box.png) top left no-repeat;
	height:				12px;
}

.textbox-body {
	background-color:	#FFFFFF;
	color:				#000;
	height:				320px;
	overflow:			hidden;
}

.textbox-body-news {
	background-color:	#FFFFFF;	
	color:				#000;
	overflow:			hidden;
}


#textbody {
	background-color:	#FFFFFF;	
	color:				#000;
}

.textbox-bot {
	background:			url(../images/bot_box.png) top left no-repeat;
	height:				12px;
	margin:				0 0 20px 0;
}

.text, .image {
}

.text {
	float:				left;
	padding:			20px 15px 20px 30px;
	min-height:			252px;
	width:				330px;
}

.text_news {
	float:				left;
	padding:			20px 30px;
	width:				400px;
}

.slideitem .text {
	position:			absolute;
	background-color:	#FFF;
	float:				left;
	text-align:			left;
	padding:			20px 15px 20px 8px;
	margin:				0 0 -300px 0;
	height:				252px;
	width:				352px;
}

.text_video {
	float:				left;
	padding:			20px 30px;
	width:				340px;
	overflow:			auto;
}

.image {
	float:				right;
	padding:			7px 20px 7px 25px;
}
.slideitem .image {
	position:			absolute;
	float:				right;
	padding:			7px 20px 7px 25px;
	margin:				0 0 0 392px;
}

.slideitem {
	position:			absolute;
	height:				300px;
	width:				920px;
}

#image_tab1, #image_tab2, #image_tab3 {
	background-color:	#FFF;
	text-align:			center;
	padding:			0;
}

#image_tab2, #image_tab1 {
	text-align:			center;
	margin:				0 0 0 -500px;
}

.image #image_tab1 img,
.image #image_tab2 img {	
	position:			absolute;
	display:			none;
}

.textbox-body-news {
}

.text h1, .text_news h1, .text_video h1 {
	color:				#0F2348;
	font-size:			1.9em;
	line-height:		1.0em;
	margin:				0 0 10px 0;
	text-transform:		uppercase;
}

span.sitemapbut a {
	color:				#5B6D97;
	padding:				0 0 0 30px;
	text-decoration:			none;
}

span.sitemapbut {
	padding:				0 0 10px 0;
}

span.date {
	color:				#5B6D97;
}

span.more, span.more a {
	color:				#5B6D97;
}

span.more {
	color:				#5B6D97;
	font-size:			1.1em;	
}

span.more a, span.more a:hover {
	text-decoration:	none;
}

.pres {
	margin:				15px 0 0 0;
}

.pres img {
	margin:				0 0 10px 0;
}

.download {
	background-color:	#D2D6DE;
	border-bottom:		1px solid #0F1937;
	border-top:			1px solid #0F1937;
	color: 				#4B5A7D;
	padding:			5px 8px;
	width:				234px;
}

.download a {
	color: 				#0F1937;
	text-decoration:	none;
}

.download a:hover {
	text-decoration:	none;
}

.buttons {
	color: 				#4B5A7D;
	text-decoration:	none;
	margin:				10px 0 0 0;
}

.buttons a {
	color: 				#4B5A7D;
	text-decoration:	none;	
}

.buttons a:hover {
	color: 				#0F1937;
	text-decoration:	none;	
}

.buttons a.selected {
	color: 				#0F1937;
	font-weight:		bold;
	text-decoration:	none;	
}

.scroll-text {
	/*height:				200px;
	overflow:			auto;*/
	padding:			0 8px 0 0;
}

/* ################################################################################# */
/*                                                                                   */
/*                             ADDITIONAL		                                     */
/*                                                                                   */
/* ################################################################################# */

td {
	font-size:			1.2em;
	padding:			3px 0;
}

input, textarea {
	border:				1px solid #0F2348;
	padding:			3px;
	width:				95%;
}

textarea {
	font-size:			1em;
}

input.button {
	border:				0;
	padding:			0;
	width:				auto;
}

.text li, .text_video li, .text_news li {
	background:			url(../images/bullit.jpg) left center no-repeat;
	font-size:			1.2em;
	line-height:		1.5em;
	padding:			0 0 0 16px;
}

.text ul, .text_video ul, .text_news ul {
	margin:				10px 0 20px 0;
}

.homeslide h1 a {
	display:			block;
	color:				#0F2348;
	text-decoration:	none;
}

.homeslide a {
	display:			block;
	color:				#222;
	text-decoration:	none;
}

/*.text h1 a {
	color:				#0F2348;
	text-decoration:	none;
}

.text a {
	color:				#222;
	text-decoration:	none;
}*/

h2 {
	color:				#0F2348;
	font-size:			1.3em;
	text-transform:		none;
}

.text h2, .text_video h2, .text_news h2 {
	margin:				10px 0 8px 0;
}
/* ################################################################################# */
/*                                                                                   */
/*                             NEWSBOX			                                     */
/*                                                                                   */
/* ################################################################################# */

.teller ul {
	color:				#ABB2C2;
	font-size:			1.2em;
	letter-spacing:		0.3em;
	margin:				-7px 0 0 -5px;
}

.teller ul li {
	color:				#ABB2C2;
	display:			inline;
	letter-spacing:		0.3em;
}

.teller ul li.activ {
	color: 				#0F1937;
}


/* ################################################################################# */
/*                                                                                   */
/*                             FOOTER STYLES                                         */
/*                                                                                   */
/* ################################################################################# */

#sitemap {
	background: 		#0F2348;
	border-bottom:		1px solid #4B5A7D;
	border-top:			1px solid #4B5A7D;
	margin:				0 auto;
	min-height:			220px;
	width:				960px;
}

ul.footernav {
	margin:				15px 30px;
}

ul.footernav li {
	color:				#5B6D97;
	float:				left;
	display:			inline;
	font-weight:		bold;
	text-transform:		uppercase;
	margin:				0 31px 0 0;
	max-width:			200px;
}
/*
ul.footernav li.follow {
	color:				#5B6D97;
	display:			block;
	font-weight:		bold;
	text-transform:		uppercase;
	margin:				15px 40px 10px 0;
}*/

ul.footernav li li {
	display:			block;
	float:				none;
	font-weight:		normal;
	text-transform:		none;
}

ul.footernav li ul {
	margin:				8px 0 0 0;
}

ul.footernav a {
	color:				#5B6D97;
	text-decoration:	none;
}

ul.footernav a:hover {
	color:				#FFF;
	text-decoration:	none;
}

#overlay {
	position:			absolute;
	background: 		#0F2348;
	height:				70px;
	margin:				-58px 0 0 430px;
	width:				300px;
	z-index:			1000;
}

input.send {
	background-color:	#0F2348;
	margin:				2px 0 0 0;
	width:				34px;
}

.slide, .slide2 {
	cursor:				pointer;
}