/*
	KLEUREN:
	=======
	oranje			= #FE9900
	oranje-bruin	= #F0B015
	oranje-geel		= #F8BF24
	rood            = #ED072C

	blauw			= #000080
	donkerblauw		= #000040
	
	content         = #F4F4FF
	right           = #E9E9FF

+-----------------------------------+
|	INHOUD VAN DIT STYLE-SHEET		|
+-----------------------------------+
|	- hoofd-opmaak					|
|	- hoofd-divjes					|
|	- menu							|
|	- overige stijlen				|
|	- stijlen per pagina			|
+-----------------------------------+	

*/


/**********************************************************
******************** HOOFD-OPMAAK *************************
**********************************************************/

body {
	background: #187AD7 url("/img/bg_body.jpg") repeat-x; /* jpg-je omdat IE gaar doet met png gradient */
	color: #000040;
	margin: 0 0 10px 0;
	padding: 0;
	text-align: center; /* div#container centreren in internet explorer */
}

/*
body, div, p, td, th {
	font: 75% Verdana, Arial, sans-serif;
}
*/

html body {
	font: 75% Verdana, Arial, sans-serif;
}

html > body {
	font: 12px Verdana, Arial, sans-serif; /* voor normale browsers die px kunnen resizen */
}

img {
	border: 0;
}

p {
	margin: 0 0 10px 0;
	line-height: 1.4em;
}

hr {
	border-style: dotted;
	border-color: #000080;
}

h1,h2,h3 {
	margin-bottom: 0;
	font-family: Arial, Verdana, sans-serif;
	color: #000040;
	letter-spacing: -1px;
}

h1 {
	font-size: 150%;
}

h2 {
	font-size: 140%;
	font-style: italic;
}

h3 {
	font-size: 120%;
}

a {
	border-bottom: 1px solid #000080;
	color: #000080;
	text-decoration: underline;
	text-decoration/**/:none; /* alles behalve IE5.0 geen text-deco geven */
}

a:visited {
	color: #660066;
	text-decoration: underline;
	text-decoration/**/:none; /* alles behalve IE5.0 geen text-deco geven */
	border-bottom: 1px solid #660066;
}

a:hover {
	text-decoration: underline;
	text-decoration/**/:none; /* alles behalve IE5.0 geen text-deco geven */
	border-bottom: 1px dotted #000080;
}


/**********************************************************
******************** HOOFD-DIVJES *************************
**********************************************************/

div#container {
	width: 800px;
	margin: 50px auto 10px auto; /* centreren in firefox + 50px hoogte */
	text-align: left; /* text-align op body opheffen */
}

div#header {
	height: 122px;
	background: url("/img/bg_header.png") no-repeat left top;
}

div#main {
	background: #FFFFFF url("/img/bg_main.png") repeat-y;
	height: 100%; /* ie 5 heeft minimaal 1% hoogte nodig, FF heeft 100% nodig */
}

div#footer {
	height: 24px;
	background: url("/img/bg_footer.png") no-repeat left top;
	padding: 4px 0px 0px 20px;
	font-size: 80%;
	font-weight: bold;
}

div#nav {
	position: relative;
	height: 22px;
	left: 0px;
	top: 100px;
	color: #000080;
	z-index: 2;
	font-size: 12px;
}

div#content {
	float:left;
	padding: 10px 20px 10px 20px;
	margin: 0 0 0 4px;
	display: inline;
	background: url("/img/bg_content.png") no-repeat right 100px;
	width: 595px;
	w\idth: 555px; /* box-model hack */
}

div#right {
	float: right;
	padding: 50px 10px 10px 10px;
	margin: 0 4px 0 0;
	display: inline;
	background: url("/img/bg_right.png") no-repeat left 120px;
	width: 195px;
	w\idth: 175px; /* box-model hack */
	overflow: hidden;
}

* html body div#content { /* hiden voor FF, die krijgt problemen hiermee */
	overflow: hidden;
} 

div#logo {
	position: absolute;
	width: 200px;
	height: 225px;
	top: 5px;
	left: 50%;
	margin-left: 270px;
	background: url("/img/logo.png") no-repeat left top;
	z-index: 1; /* afhankelijk van z-index bij zoekbox! */
}

div#breadcrumb {
	padding: 10px 30px 10px 0;
	font-size: 80%;
	font-style: italic;
	background-position: right top;
	background-repeat: no-repeat;
}

#home                div#breadcrumb {background-image: url("/img/ico_big_home.png");}
#categorie           div#breadcrumb {background-image: url("/img/ico_big_categorie.png");}
#zoeken              div#breadcrumb {background-image: url("/img/ico_big_zoeken.png");}
#over_trainingplaza  div#breadcrumb {background-image: url("/img/ico_big_over_trainingplaza.png");}
#help                div#breadcrumb {background-image: url("/img/ico_big_help.png");}
#links               div#breadcrumb {background-image: url("/img/ico_big_links.png");}
#artikel             div#breadcrumb {background-image: url("/img/ico_big_artikel.png");}

div#header h1 {
	display: none;
}

/**********************************************************
************************ MENU *****************************
**********************************************************/

div#nav ul {
	list-style: none;
	height: 22px;
	width: 605px;
	float: left;
	margin: 0;
	padding: 0;
	margin-left: 4px;
	display: inline; /* double margin bug van IE oplossen */
	overflow: hidden;
}

div#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	height: 18px;
	background-repeat: no-repeat;
	background-position: 3px 4px;
	padding/**/:/**/4px 0 0 0; /* box model hack toegepast op padding */
}

div#nav ul li a {
	color: #000080;
	height: 12px;
	padding: 4px 15px 4px 37px;
	text-decoration: none;
	font-weight: bold;
	border: none;
	border-right: 2px solid #FA8D00;
}


div#nav ul li a:hover {
	text-decoration: underline;
}

#home				li#nav-home               {background-color: #F8BF24;}
#categorie			li#nav-categorien         {background-color: #F8BF24;}
#zoeken				li#nav-zoeken             {background-color: #F8BF24;}
#over_trainingplaza	li#nav-overtrainingplaza  {background-color: #F8BF24;}
#help				li#nav-help               {background-color: #F8BF24;}

li#nav-home               {background: url("/img/ico_home.png");}
li#nav-categorien         {background: url("/img/ico_categorie.png");}
li#nav-zoeken             {background: url("/img/ico_zoeken.png");}
li#nav-overtrainingplaza  {background: url("/img/ico_over_trainingplaza.png");}
li#nav-help               {background: url("/img/ico_help.png");}

li#nav-home a {padding-left: 41px !important;}


/**** zoekformulier ****/

div#nav div#snelzoeken {
	height: 22px;
	float: left;
	text-align: center;
	padding: 0px;
	margin: 4px 0 0 20px;
}

div#nav form {
	margin: 0px;
	padding: 0px;
}

div#nav form input {
	float: left;
	border-color: #666699;
	background: #F8BF24;
	color: #000080;
	font-size: 80%;
	margin: 0px;
	padding: 0px;
}

div#nav form input#zoektext {
	width: 100px;
	border: 1px solid #000080;
	height: 15px;          /* opera ondersteund geen padding op input, daarom een height */
	height/**/:/**/12px;   /* box model hack */
}

div#nav form input#zoekbutton {
	color: #000080;
	background: transparent;
	border: 0px solid transparent;
	font-weight: bold;
	margin-left: 2px;
}


/**********************************************************
******************* OVERIGE STIJLEN ***********************
**********************************************************/

/**** ul in div#right ****/
div#right ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div#right ul li {
	margin-bottom: 5px;
}

div.succesvol, div.foutmelding {
	color: #FFFFFF;
	text-align: center;
	padding: 20px;
	margin: 10px;
}

div.succesvol {
	background: #00DC00;
}

div.foutmelding {
	background: #F00000;
}

th {
	text-align: right;
	vertical-align: top;
	padding-right: 10px;
	width: 120px;
}

div.zoekresultaat div.zoekleverancier {
	color: #0004A8;
	font-size: 80%;
}

div#zoekresultaten_bladeren {
	margin-top: 30px;
	text-align: center;
}

div#zoekresultaten_bladeren a, div#zoekresultaten_bladeren strong {
	padding: 2px 5px 2px 5px;
	border: 1px solid #000080;
	background: #F4F4FF;
	line-height: 3em;
}

div#zoekresultaten_bladeren a:hover {
	border: 1px dotted #000040;
}

/******************* FORMULIEREN ***********************/
fieldset {
	margin-bottom: 10px;
	border: 1px solid #000080;
	background: #E9E9FF url("/img/bg_subcategorie.jpg") repeat-x left top;
	padding: 10px;
}

fieldset legend {
	font-weight: bold;
	border: 1px solid #000080;
	background: #E9E9FF url("/img/bg_inputtext.png") repeat-x left bottom;
	padding: 1px 5px 1px 5px;
}

/*
 ie 5 t/m 6 hebben problemen met een background op een fieldset.
 Hiervoor zijn aparte stijlen nodig. Dit is de star html hack om alleen voor > IE5 te laten zien 
*/
	* html body fieldset {
		position: relative;
		margin-top: 20px;
		padding: 20px 10px;
	}
	
	* html body fieldset legend {
		position: absolute;
		top: -10px;
	}
/* end css hack */

form .input_text {/* input type=text */
	border: 1px solid #000080;
	background: #FFFFFF url("/img/bg_inputtext.png") repeat-x left bottom;
	font: inherit;
}

form .input_button {/* input type=button */
	color: #000080;
	border: 2px outset #000080;
	background: #FFFFFF url("/img/bg_inputtext.png") repeat-x left bottom;
	font: inherit;
	font-weight: bold;
	padding: 0 20px 0 20px;
}

form textarea.input_text {/* textarea */
	background: #FFFFFF url("/img/bg_textarea.png") repeat-x left bottom;
}


/*************************************************************
******************* STIJLEN PER PAGINA ***********************
*************************************************************/

/******************* HOME ***********************/

#home div#right {
	font-size: 80%;
	letter-spacing: -1px;
}

#home div#right ul li {
	margin-bottom: 3px;
}

/**** advertentie ****/
#home div#content .advertentie {
	text-align: center;
	border-top: 1px dotted #000080;
	border-bottom: 1px dotted #000080;
}

#home div#content .advertentie img {
	margin: 2px;
}

#home div#content .advertentie a {
	border: none;
}

#home div#content .advertentie small {
	display: block;
	font-style: italic;
}

#home div#content table {
	margin-left: 20px;
}

#home div#content table td {
	padding-left: 10px;
	font-weight: bold;
	letter-spacing: -1px;
}

/******************* CONTACT ***********************/

#over_trainingplaza input#postcode        {width: 5em;}
#over_trainingplaza input#telefoonnummer  {width: 10em;}
#over_trainingplaza input#faxnummer       {width: 10em;}
#over_trainingplaza textarea#vraag        {width: 20em; height: 15em;}

/******************* ZOEKEN ***********************/
#zoeken table td {
	padding-right: 10px;
}

#zoeken form #trefwoorden {
	width: 20em;
}

#zoeken form #prijsklasse {
	width: 4em;
}

#zoeken form input.input_button {
	margin-top: 10px;
}

#zoeken div#right ul {
	list-style-type: disc;
	margin-left: 15px;
}

#zoeken span.trefwoord {
	background: #F8BF24;
}

/******************* CATEGORIËN ***********************/
#categorie ul.hoofdcategorie {
	list-style: none;
	margin: 0;
	padding: 0;
}

#categorie ul.hoofdcategorie li {
	margin: 0;
	padding: 0;
	border: 1px solid #FFFFFF; /* heeft IE nodig om rare padding te verwijderen */
	background: #FFFFFF url("/img/bg_textarea.png") repeat-x left bottom;
	margin-bottom: 5px;
}

#categorie ul.hoofdcategorie li a {
	line-height: 34px;
	padding-left: 100px;
	display: block;
	border: 1px solid #E9E9FF;
	font-weight: bold;
	letter-spacing: 1px;
}

#categorie ul.hoofdcategorie li div {
	background-repeat: no-repeat;
	background-position: 50px center;
}

#categorie ul.hoofdcategorie li a:hover {
	border: 1px solid silver;
}

#categorie ul.hoofdcategorie li#cat-it div                           {background-image: url("/img/cat/it.png");}
#categorie ul.hoofdcategorie li#cat-persoonlijke_effectiviteit div   {background-image: url("/img/cat/persoonlijke_effectiviteit.png");}
#categorie ul.hoofdcategorie li#cat-management div                   {background-image: url("/img/cat/management.png");}
#categorie ul.hoofdcategorie li#cat-business div                     {background-image: url("/img/cat/business.png");}
#categorie ul.hoofdcategorie li#cat-talen div                        {background-image: url("/img/cat/talen.png");}
#categorie ul.hoofdcategorie li#cat-techniek div                     {background-image: url("/img/cat/techniek.png");}
#categorie ul.hoofdcategorie li#cat-sector_en_branche_specifiek div  {background-image: url("/img/cat/sector_en_branche_specifiek.png");}
#categorie ul.hoofdcategorie li#cat-executive_education div          {background-image: url("/img/cat/executive_education.png");}


div.icoontje {
	position: relative;
	top: 35px;
	left: 500px;
	width: 40px;
	height: 30px;
	z-index: 99;
}


#categorie ul.categorie, #categorie ul.categorie li, #categorie ul.categorie ul {
	margin: 0;
	padding: 0;
}

#categorie ul.categorie{
	border: 1px solid #000080;
	background: #E9E9FF url("/img/bg_subcategorie.jpg") repeat-x left top;
	height: 1%; /* IE5.x heeft een hoogte nodig */
	margin: 10px 0 10px 0;
}

#categorie ul.categorie li {
	list-style: none;
	text-align: center;
}

#categorie ul.categorie li div.cat-kop {
	background: #F8BF24 url("/img/bg_hoofdcategorie.png") repeat-x left bottom;
	border-bottom: 1px solid #000080;
	font-weight: bold;
	padding: 2px;
}

#categorie ul.categorie li ul li {
	text-align: left;
	line-height: 1.5em;
	margin: 0 0 0 10px;;
	padding: 0;
}

#categorie ul.col_left, #categorie ul.col_right {
	float: left;
	width: 49%;
	overflow: hidden;
}

#categorie ul:target {
	border-width: 2px;
}

/******************* TRAININGEN ***********************/
#training div#training_col_left {
	float: left;
}

#training div#training_col_right {
	float: right;
	text-align: center;
}

#training div#training_col_right img {
	margin: 5px;
	border: 1px solid #E9E9FF;
}

#training div#training_col_right a {
	display: block;
}

#training p.buttons_bottom {
	text-align: center;
}

#training p.buttons_bottom a {
	display: block;
	margin: 10px;
}

#training a.aanmelden, #training  a.meerinformatie {
	border: 1px solid #000080;
	background: #F4F4FF;
	width: 150px;
	padding: 0 5px 0;
}

#training a.aanmelden:hover, #training a.meerinformatie:hover {
	border: 1px dotted #000040;
}

#training div.body {
	line-height: 1.4em;
}

#training ol.agenda li {
	margin-bottom: 10px;
}
/**** meer informatie ****/
#training form#meer_informatie #vragen {
	width: 20em;
	height: 20em;
}

#training form#meer_informatie #valid {
	display: none;
}

/**** aanmelden ****/
#training #rooster                                                         {width: 20em;}
#training #uag_telefoon, #training #fgg_telefoon                           {width: 10em;}
#training #uag_postcode, #training #fgg_postcode, #training #bcz_postcode  {width: 5em;}
#training #uag_geboortedatum                                               {width: 10em;}	
#training #uag_opmerkingen                                                 {width: 20em;height: 10em;}

/******************* LINKS ***********************/
#links div#content ul li {
	margin-bottom: 10px;
}

#links div#content ul li a {
	display: table;
}

/******************* HELP ***********************/
#help ul.faq ul li {
	margin-bottom: 10px;
}

#help h2:target {
	text-decoration: underline;
}

#help div.categorie {
	text-align: center;
}

#help div.categorie td {
	font-weight: bold;
	text-align: left;
	padding-left: 10px;
}

/******************* LEVERANCIER ***********************/

#leverancier ul#lijst_leveranciers {
	line-height: 20px;
	list-style: url("/img/bullet_arrow.png");
}