/**********************************************************\
* GENERAL CLASSES
* Hier staan classes die overal toegepast kunnen worden
\**********************************************************/
.side-gradient
{
	background-color: #678fc2;
	background-image: url("images/t_container.gif");
	background-repeat: repeat-y;
	width: 990px;
}

/*
Zie http://articles.techrepublic.com.com/5100-22-5296198.html hoe het centreren hier met divjes is gedaan voor uitgebreide uitleg

Het idee hier is dat we de div de grootte geven die we willen hebben, 
hier 990px. en we zetten de maring-left en margin-right op auto.
Volgens de specificaties hoort de overige ruimte dan evenredig
te worden verdeeld tussen links en rechts
*/
.page-center
{
	/* Reset alignment to compensate for 'text-align:center': (zie body) */
  text-align: left;
	
	width: 990px; /* dit moet 990 zijn, omdat  het achtergrond plaatje, bg_header-logo.jpg 990px breed is */
    margin-left: auto;
    margin-right: auto;
}

.navlinks {
	color: #636363;
	font-size: 0.7em;
	padding: 0px 10px;
}

.navlinks a,
.navlinks a:hover {
	color: #636363;
}

/*
Deze class zorgt ervoor dat alles wat binnen deze class valt niet door de browser wordt afgebroken
*/
.nobr {
	white-space: nowrap;
}

.breadcrumbs {
	padding: 4px 0px 4px 22px;
	text-align: left;
	background-color: #CDE0FD;
	
	color: #666666;
	font-size: 0.6em;
	line-height: 1em;
	
	border-bottom: 1px solid #8aafe1;
}

.breadcrumbs a,
.breadcrumbs a:hover,
.breadcrumbs a:visited
{
	color: #636363;
}
/**********************************************************\
* HEADER
* De titel spreekt voor zich lijkt me, de css regels voor de
* header zijn hier de vinden
\**********************************************************/
#header
{
	margin-top: 5px;
}

.header-lang
{
	color: #ffffff;
	text-align: right;
	font-size: 1.1em;
	margin: 0px 15px 0px 0px;
}

.header-lang a
{
	color: #ffffff;
}

.header-lang a:hover
{
	color: #ffffff;
}

.header-lang a:visited
{
	color: #ffffff;
}

#header-image
{
	background-image: url("images/bg_header-logo.gif");
	background-repeat: no-repeat;
	height: 80px;
	padding: 0px 20px;
	clear: both;
	overflow: hidden; /* fix voor ie */
	
}

.header-logo
{
	position: relative;
	left: 30px;
	top: 20px;
	width: 215px;
}

.headerZoeken
{
	float: right;
	font-size: 0.7em;
	margin-top: 12px;
}

.login
{
	float: right;
	margin-top: -25px;
	font-size:11px;
	line-height:13px;
	font-weight:bold;
	display: none;
}

.login a
{
	color:#ffffff;
}

#navbar
{	
}

#navbar ul
{

	background-color:#CBE0FD;
	background-image:url("images/bg_navcon.gif");
	background-position:bottom;
	background-repeat:repeat-x;
	margin:0px;
	padding:0px;
	list-style:none;
	color:#11449E;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.9em;
	line-height:1em;
	font-weight:bold;
	padding-left:35px;
	margin-left:10px;
	margin-right:10px;
	height:26px;
	overflow: hidden;
}

#navbar li
{
	float:left;
	padding-right:10px; /* de ruimte tussen de tabs */
}

#navbar a
{
	float:left; /* nodig om het linker deel van de tab te laten zien */
	background-image:url("images/left_both.gif"); /* linker deel van de tab */
	background-repeat:no-repeat;
	background-position:left top;
	padding-left:8px; /* laat het linker deel van de tab zien */
}

#navbar a span
{
	display:block;
	background-repeat:no-repeat;
	background-position:right top;
	padding:6px 12px  4px 4px;
	font-weight:bold;
	color:#11449E;
}

#navbar #current a
{
	background-repeat:no-repeat;
	background-image:url("images/left_both_on.gif");
	background-position:0 -150px;
	border-width:0px;
	border-bottom:1px solid #dfebfc;
}

#navbar #current a span
{
	background-repeat:no-repeat;
	background-image:url("images/right_both_on.gif");
	background-position:100% -150px;
	padding-bottom:5px;
	color:#11449E;
}

#navbar a:hover
{
	text-decoration:none;
	background-position:0 -150px;
}

#navbar a:hover span
{
	background-image:url("images/right_both.gif");
	background-position:100% -150px;
}


	
	.main-background
	{
		background-image:url("images/bg_ribbon.jpg");
		background-color:#FFFFFF;
		background-position:top;
		background-repeat:repeat-x;
		width:970px;
		margin-left:10px;
		overflow:hidden; /* Dit zorgt ervoor dat IE6 het ook netjes laat zien, anders steekt de background image 10px uit naar rechts */
	}
	
	
	
	.contact
	{
		padding: 3px 3px 3px 5px;
		vertical-align: middle;

	}
	
	.contact div
	{
		background-position:left center;
		background-repeat:no-repeat;
		padding-left:25px;
		margin-bottom:7px;
	}
	
	.contact img
	{
		display:inline;
		vertical-align:bottom;
	}
	
.contact .adress
{
	background-image:url("/images/house.gif");
}
.contact .phone
{
	background-image:url("/images/telephone.gif");
}

.contact .fax
{
	background-image:url("/images/fax.gif");
}

.contact .email
{
	background-image:url("/images/email.gif");
}
.contact .tax
{
	background-image:url("/images/tax.gif");
}
.contact .bank
{
	background-image:url("/images/bank.gif");
}
.contact .kvk
{
	background-image:url("/images/kvk.gif");
}	




#sidebar
{
	float: left;
	width: 155px;
	
		background-color:#F2F2F2;
		color:#636363;
		font-size:1.1em;
		line-height:1.2em;
		padding-top:0;
		text-align:left;
	
}

	#sidebar a,
	#sidebar a:hover,
	#sidebar a:visited
	{
		color:#636363;
	}
	
	.sidenav
	{
		margin-top:0pt;
		background-color:#edf4fc;
		border-bottom:1px solid #8aafe1;
		margin-bottom:20px;
	}
	
	.heading
	{
		background-color:#E3E3E3;
		color:#666666;
		font-weight:bold;
		padding:3px 15px;
		margin-top:3px;
		margin-bottom:5px;
		
	}
	
	
	#sidebar ul
	{
		list-style:none;
		margin:0px;
		padding:0px;
		padding-bottom:5px;
	}
	
	#sidebar ul li
	{
		padding-top: 5px;
		padding-left:25px;
		text-indent:-9px;
	}
	

	
#content-container
{
	float: left;
	width: 803px;
	display: inline;
	
		background-color:#FFFFFF;
		margin-left:1px;
}
/* Start Mac IE5 filter \*/
#sidebar, #content-container
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}
@media all and (min-width: 0px) {
#sidebar, #content-container
	{
	padding-bottom: 0 !important;
	margin-bottom: 0 !important; 
	}
#sidebar:before, #content-container:before
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	display: block;
	background: inherit;
	padding-top: 32767px !important;
	margin-bottom: -32767px !important;
	height: 0;
	}
}
/* End Mac IE5 filter */
/* IE Win can be a bit out - you might need to adjust  
bottom value by -1px or as required */
.verticalalign
	{
	position: absolute;
	bottom: 0;
	}
#sidebar .verticalalign
	{
	width: 155px;
	}
#content-container .verticalalign
	{
	width: 803px;
	}
/* hack for Opera 7+ */
@media all and (min-width: 0px){
.verticalalign
	{
	width: 100% !important;
	}
/* But Opera 9 does it right, so CSS3 hax to the max */
div[id^="main-wrapper"] #sidebar .verticalalign
	{
	width: 155px !important;
	}
div[id^="main-wrapper"] #content-container .verticalalign
	{
	width: 803px !important;
	}
}
/* hack for IEs of all persuasions before IE7 */
* html .verticalalign
	{
	width: 100% !important;
	}
.verticalalign p
	{
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0;
	background: #996666;
	}
#main-wrapper-extra
{
	position: relative;
	
	
		/**
		* fix a IE 6 bug. Waardoor er een witte balk van 14 pixels net boven de 
		* oranje balk kwam, omdat er een padding-top:14px; in .main-background 
		* stond 
		*/
		padding-top:14px;
		/* padding-left:10px; */
		padding-right:0px;
		/* min-height:130px; */
	
		
}
* html #main-wrapper
	{
	position: relative;
	}
#main-wrapper
{
	width: 960px;
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
	
		border-top:1px solid #8aafe1;
		border-left:1px solid #8aafe1;
		background-color:#8aafe1;
	
		
}
/* we need this for IE 5.01 - otherwise the columns vanish */
* html #main-wrapper-extra
	{
	float: left;
	width: 100%;
	}
/* we need this for IE 5.01 - otherwise the main-wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#main-wrapper
	{
/* Normally a Holly-style hack height: 1% would suffice but that causes 
IE 5.01 to completely collapse the main-wrapper - instead we float it */
	float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of main-wrapper too small 
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
	float/**/: none;
	}
/* easy clearing */
#main-wrapper:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#main-wrapper
	{
	display: inline-block;
	}
/*\*/
#main-wrapper
	{
	display: block;
	}
/* end easy clearing */
#footer
	{
	clear: both;
	}

/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output
	{
	position: relative;
	z-index: 1000;
	}

/**********************************************************\
* FOOTER
* En dan hier de css regels voor de footer.
\**********************************************************/
#footer
{
	padding-left:10px;
	padding-right:10px;
	line-height: 1em;
}

/* 
we hebben een nieuwe container nodig om de achtergrond aan te haken, dit omdat #footer
al een achtergrond plaatje heeft om de gradient aan de zijkanten voor elkaar te krijgen
*/
.footer-container {
	background-color:#C9DEFD;
	width:970px; /* deze width moet hier staan voor IE5.55 en IE5.01 */
}

/*
de oranje lijn tussen de main en de footer */
.footer-line
{
	background-color:#F2A31B;
	font-size:1px;
	height:6px;
	text-align:left;
}

/*
de gerelateerde sites
*/
.footer-sites
{
	padding-bottom:3px;
	padding-left:0pt;
	padding-right:0pt;
	padding-top:6px;
	height:40px;
}

/*
'Verwante websites'
*/
.footer-sites span
{
	float:left;
	width:155px;
	color:#2771BA;
	font-size:0.7em;
	font-weight:bold;
	padding:0px 10px;
	text-align:center;
}

/*
http://www.alistapart.com/articles/multicolumnlists
Methode 1

separate the list from what follows it 

Dit is de lijst met links naar verwante websites
*/
.footer-sites ul
{
	float:left;
	clear:right;
	margin-top:0px;
	list-style:none;
	width: 660px;  /* room for 4 columns  16 * 4 = 64 */
}
.footer-sites ul li
{
	float: left;
	width: 160px;  /* accommodate the widest item */
	padding-bottom: 5px;
}
/*-------------------------------------*/

/*
Dit is de box waar we de links uit de header nog een keer herhalen en waar de (c) notice e.d. staat
*/
.footer-info
{
	background-image:url("images/footerside.jpg");
	background-repeat:repeat-x;
}

/*
We hebben nog een container nodig voor de borders
*/
.footer-info-border
{
	margin-left:10px;
	margin-right:10px;
	background-color:#FFFFFF;
	padding:1px;
	/* top-center */
	border-top:1px solid #A4C0DC;
	/* middle-left */
	border-left:1px solid #9DBCDA;
	/* middle-right */
	border-right:1px solid #9FBEDB;
	/* bottom-center */
	border-bottom:1px solid #71A4CE;
	height: 40px; /* nodig voor IE, anders ontstaat er boven een te grote witte regel */
}

/*
en ook nog een container voor het achtergrond plaatje
*/
.footer-info-container
{
	background-color:#DAE9FE;
	background-image:url("images/footergradient.gif");
	background-repeat:repeat-x;
	color:#808080;
	font-size:0.7em;
	text-align:left;
	vertical-align:middle;
	height:40px; /* nodig omdat er childs zijn die gaan floaten */
}

/*
De opmaak van de links
*/
.footer-info-container a,
.footer-info-container a:hover,
.footer-info-container a:visited
{
	color:#2771BA;
}

/*
Dit is het wereld bolletje
*/
.footer-info-container img
{
	border-style:none;
	margin:0px  0px  0px  4px;
	vertical-align: bottom;
}

.footer-info-container-padding
{
	padding-top:5px; 
	padding-right:5px; 
	padding-bottom:5px; 
	padding-left:5px;
}

/*
een float om de twee divjes met de links en het fitinit logo uit elkaar te houden
*/
.footer-links
{
	float:left;
}

/*
Het fitinit logo
*/
.footer-fitinit
{
	margin-top:5px;
	margin-right:5px;
	float:right;
}

/* 
De afronding aan de onderkant
*/
.footer-bottom
{
	background-image:url("images/bg_bottom.jpg");
	background-repeat:no-repeat;
	height:18px;
}


#profiler, #profiler a
{
	text-align: center;
	color: #a9c3e3;
	padding-bottom: 15px;
	font-size: 0.6em;
}

#admin-content dt
{
	width:10%;
}
#menu-list .name
{
	text-align:left;
}

#menu-list .actions
{
	text-align:left;
	width:120px;
}

#menu-list .action-buttons
{
    display: table-cell;
    vertical-align: middle;
	text-align:left;
}

img.up:hover, img.down:hover, img.edit:hover, img.remove:hover
{
	margin-bottom:1px;
}

table .even
{
	background-color:#f2f2f2;
}
table .even:hover
{

	background-color:#efefef;
}

table .odd
{
	background-color:#ffffff;
}

table .odd:hover
{
	background-color:#fdfdfd;
}

#menu-list .depth1
{
	text-indent:0px;
}

#menu-list .depth2
{
	text-indent:20px;
}

#menu-list .depth3
{
	text-indent:40px;
}

.information
{
	color:#FFFFFF;
	background-color:#228822;
}

.information a
{
	color:#FFFFFF;
}

.confirmation
{
}

.error
{
	background-color:#BC2A4D;
}

#menu-add 
{
	padding-bottom:15px;
	height:100px;
}
#menu-add .submit
{
	float:right;
	margin-top:5px;
}



#content-add .title-tf
{
	width:500px;
}

#admin-content textarea
{
	width:500px;
}

#content_id
{
	width:210px;
}
/* --------------------------
| LOGIN
+--------------------------*/
div#login-box 
{
	border:1px solid #cccccc;
	padding:10px;
}



fieldset.fields1
{
	background-color:transparent;
	margin: 0px;
	padding: 0px;
}

fieldset.fields1 dt
{
	border-right-width:0pt;
	width:7em;
}

fieldset.fields1 dd
{
	border-left-width:0pt;
	margin-left:7em; /* zelfde waarde als de width bij fieldset.fields1 dt */
}

label
{
	cursor:default;
	padding-right:5px;
}

dd input, dd textarea
{
	margin-right:3px;
}

input
{
	cursor:pointer;
	

font-family:Verdana,Helvetica,Arial,sans-serif;
	font-size:1em;
	font-weight:normal;
	padding:0pt 3px;
	vertical-align:middle;
}

input.inputbox
{
	width:85%;
}

.inputbox
{
	background-color:#FFFFFF;
	border-color:#B4BAC0;
	color:#333333;
}

.autowidth
{
	width:auto !important;
}

.inputbox
{
	background-color:#FFFFFF;
	border:1px solid #C0C0C0;
	color:#333333;
	cursor:text;
	padding:2px;
}

/**
 * Zoeken
 */
.zoeken{}
.zoeken h1
{
	margin-bottom: 10px;
}
.zoeken p
{
	margin: 0;
}
.zoeken .veld
{
	background-color: #F7FBFF;
	border: 1px solid #C1D2E7;
	display: inline;
	width: 357px;
	padding-bottom: 1px;
	padding-top: 1px;
}
.zoeken .knop
{
	background-image: url("/template/office2007/images/button.gif");
	background-position: center;
	border: 1px solid #bfa277;
	color:#11449E;
	padding-left: 10px;
	padding-right: 10px;
}

#zoekresultaten
{
	margin-top: 20px;	
}
#zoekresultaten .pagination
{
	background-color:#CDE0FD;
	border:1px solid #8AAFE1;
	color:#666666;
	line-height:1em;
	padding:5px;
	text-align:center;
}
#zoekresultaten .pagination .current
{
	font-weight: bold;
}
#zoekresultaten .pagination a
{
	color: #666666;
	text-decoration: none;
}
#zoekresultaten .pagination a:hover
{
	text-decoration: underline;
}
#zoekresultaten .pagination .next
{
	margin-left: 10px;
}
#zoekresultaten .pagination .prev
{
	margin-right: 10px;
}
#zoekresultaten .pagination .next span,
#zoekresultaten .pagination .prev span
{
	background-repeat: no-repeat;	
}
#zoekresultaten .pagination .next span
{
	background-position: right bottom;	
	padding-right: 15px
}
#zoekresultaten .pagination .next span.enabled
{
	background-image: url("images/next_enabled.gif");
}
#zoekresultaten .pagination .next span.disabled
{
	background-image: url("images/next_disabled.gif");
}


#zoekresultaten .pagination .prev span
{
	
	background-position: left bottom;
	padding-left: 15px
}
#zoekresultaten .pagination .prev span.enabled
{
	background-image: url("images/prev_enabled.gif");
}
#zoekresultaten .pagination .prev span.disabled
{
	background-image: url("images/prev_disabled.gif");
}
.zoekresultaat
{
	margin-bottom: 10px;
}
.zoekresultaat h2
{
	font-weight: normal;
}
.zoekresultaat p
{
	margin: 0;
}
.zoekresultaat span
{
	color: green;
}


/**
 * Knowledge Base opmaak
 */
.check, .note, .warning
{
	background-position: 10px 10px;
	background-repeat: no-repeat;
	padding: 10px 10px 10px 84px;
	min-height: 65px;	
}
.check
{
	background-image: url("/template/office2007/images/check.png");
	background-color: #c5ffc2;
	border: 1px solid #4ac143; 
}
.note
{
	background-image: url("/template/office2007/images/note.png");
	background-color: #FDEFA0;
	border: 1px solid #F9AB17; 
}
.warning
{
	background-image: url("/template/office2007/images/warning.png");
	background-color: #ff6a47;
	border: 1px solid #ff0000; 
	color: white; 
}