/*************************************************************
  
  Author:       Miel Vandevelde
  Company:      ftml.be
  Version:      1.0
  Created on:   18.05.2009
  
  CONTENT STYLESHEET
  ------------------
  PAGE
  HEADER
  NAVIGATION
  CONTENT
  SIDEBAR
  FOOTER
  -
  CLEARFIX
  
*************************************************************/

/*************************************************************
C O L O R S

BLUE:   #004a66
GREEN:  #aab03b
*************************************************************/



/*************************************************************
  P A G E
*************************************************************/
#contentNavigation * { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0 } /* Resets elements */
#contentNavigation ul { list-style: none }
#contentNavigation ol { list-style: none }

#contentGrootNavigation * { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0 } /* Resets elements */
#contentGrootNavigation ul { list-style: none }
#contentGrootNavigation ol { list-style: none }
big { font-size: 130% }
small, sup, sub { font-size: 80% }

img { -ms-interpolation-mode: bicubic } /* Makes resized images in IE look better */

.left { float: left }
.right { float: right }
.clear { clear: both }

body { color: #333; font: 12px/1.17em /*12px/14px*/ Arial, Helvetica, sans-serif }

/* body classes */
.abbody { background: #fe9867 url(abbg.jpg) left top repeat-x }
.bdbody { background: #a4c8db url(bdbg.jpg) left top repeat-x }
.ftbody { background: #c1c75a url(ftbg.jpg) left top repeat-x }
.owbody { background: #bcbec5 url(owbg.jpg) left top repeat-x }
.wzbody { background: #ffc062 url(wzbg.jpg) left top repeat-x }

#wrapper { background: url(../art/wrapperBg.png) center top repeat-y; margin: 0 auto; padding: 0 10px; width: 980px }



/*************************************************************
  H E A D E R
*************************************************************/
#header { padding: 12px }

#header a.home { background: url(../art/logo.gif) left top no-repeat; display: block; height: 74px; text-indent: -9999em; width: 154px }

#header #menu   { margin: 8px 0 0 3px }
#header #menu a { display: block; height: 18px; margin: 3px 0 0; width: 150px }

#header #banner { /*background: #999;*/ float: left; height: 163px; margin: 0 0 0 13px; width: 621px }

#header #section { float: right; height: 163px; margin: 0 0 8px 9px; width: 159px }



/*************************************************************
  N A V I G A T I O N
*************************************************************/
#navigation { float: left; width: 179px }

/* CSS of the menu is located in g5Menu.css */

#navigation #newsletter { background: url(../art/mailbox.jpg) right bottom no-repeat; border-bottom: 1px solid #ccc; color: #004a66; height: 100px; padding: 11px }
#navigation #newsletter p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0.83em 0 /*10px*/ }
#navigation #newsletter .email { background: #fff; border: 1px solid #bcbcbc; color: #000; font: 11px/14px Arial, Helvetica, sans-serif; height: 14px; padding: 2px; width: 84px }
#navigation #newsletter .submit { background: none; border: 0; color: #004a66; text-decoration: underline }


/*************************************************************
  C O N T E N T
*************************************************************/
#content { background:url(../art/content.gif) center top repeat-y; float: left; padding: 60px 22px; position: relative; width: 577px }
#contentNoBanner { background:url(../art/contentGroot.gif) center top repeat-y; float: left; padding: 60px 22px; position: relative; width: 745px }

/*#content img { height: auto !important; max-width: 521px !important }*/
#content * { } /* Resets elements */
#content ul, #content ol { margin-left:10px; padding-left:30px; padding-right:20px; padding-top:15px }
#content ul { list-style:disc outside }
#content ol {list-style: decimal outside }
#content li { margin-bottom:10px;  }
#contentNoBanner * { } /* Resets elements */
#contentNoBanner ul { list-style:disc outside }
#contentNoBanner ol { list-style: decimal outside  }
#contentNoBanner li { margin-bottom:10px; }
/* 2nd navigation */
#contentNavigation { clear: both; height: 36px; line-height: 3em; margin: 0 180px 0 179px; width: 621px }
#contentGrootNavigation { clear: both; height: 36px; line-height: 3em; margin: 0 0px 0 179px; width: 789px }
/* Backgrounds per section */
.abbody #contentNavigation { background: url(../art/contentBg-ab.gif) left top no-repeat }
.bdbody #contentNavigation { background: url(../art/contentBg-bd.gif) left top no-repeat }
.ftbody #contentNavigation { background: url(../art/contentBg-ft.gif) left top no-repeat }
.owbody #contentNavigation { background: url(../art/contentBg-ow.gif) left top no-repeat }
.wzbody #contentNavigation { background: url(../art/contentBg-wz.gif) left top no-repeat }

.abbody #contentGrootNavigation { background: url(../art/contentBgGroot-ab.gif) left top no-repeat }
.bdbody #contentGrootNavigation { background: url(../art/contentBgGroot-bd.gif) left top no-repeat }
.ftbody #contentGrootNavigation { background: url(../art/contentBgGroot-ft.gif) left top no-repeat }
.owbody #contentGrootNavigation { background: url(../art/contentBgGroot-ow.gif) left top no-repeat }
.wzbody #contentGrootNavigation { background: url(../art/contentBgGroot-wz.gif) left top no-repeat }

#contentNavigation ul {}
#contentNavigation ul li { float: left }
#contentNavigation ul li a { display: block; color: #fff; font-size: 1.08em /*13px*/; line-height: 2.77em /*36px;*/; padding: 0 3px 0 0; text-align: center; text-decoration: none; width: 70px }
#contentGrootNavigation ul {}
#contentGrootNavigation ul li { float: left }
#contentGrootNavigation ul li a { display: block; color: #fff; font-size: 1.08em /*13px*/; line-height: 2.77em /*36px;*/; padding: 0 3px 0 0; text-align: center; text-decoration: none; width: 70px }
/* Backgrounds per section */
.abbody #contentNavigation ul li a { background: url(../art/navigationBg-ab.gif) right top repeat-y }
.bdbody #contentNavigation ul li a { background: url(../art/navigationBg-bd.gif) right top repeat-y }
.ftbody #contentNavigation ul li a { background: url(../art/navigationBg-ft.gif) right top repeat-y }
.owbody #contentNavigation ul li a { background: url(../art/navigationBg-ow.gif) right top repeat-y }
.wzbody #contentNavigation ul li a { background: url(../art/navigationBg-wz.gif) right top repeat-y }

.abbody #contentGrootNavigation ul li a { background: url(../art/navigationBg-ab.gif) right top repeat-y }
.bdbody #contentGrootNavigation ul li a { background: url(../art/navigationBg-bd.gif) right top repeat-y }
.ftbody #contentGrootNavigation ul li a { background: url(../art/navigationBg-ft.gif) right top repeat-y }
.owbody #contentGrootNavigation ul li a { background: url(../art/navigationBg-ow.gif) right top repeat-y }
.wzbody #contentGrootNavigation ul li a { background: url(../art/navigationBg-wz.gif) right top repeat-y }

#contentNavigation #search { float: right; margin: 0 23px 0 0 }
#contentNavigation .zoekknop { background: none; border: 0; color: #fff }
#contentNavigation .zoekfunctie { background: #fff; border: 1px solid #acacac; color: #000; font: 11px/14px Arial, Helvetica, sans-serif; height: 14px; padding: 2px; width: 154px }

#contentGrootNavigation #search { float: right; margin: 0 23px 0 0 }
#contentGrootNavigation .zoekknop { background: none; border: 0; color: #fff }
#contentGrootNavigation .zoekfunctie { background: #fff; border: 1px solid #acacac; color: #000; font: 11px/14px Arial, Helvetica, sans-serif; height: 14px; padding: 2px; width: 154px }
/* end 2nd navigation */

/* breadcrumb */
#content #breadcrumb   { bottom: auto; left: 22px; position: absolute; right: 22px; top: 10px }
#content #breadcrumb a { color: #004a66 }

#contentNoBanner #breadcrumb   { bottom: auto; left: 22px; position: absolute; right: 22px; top: 10px }
#contentNoBanner #breadcrumb a { color: #004a66 }
/* end breadcrumb */

#content #subNavigation { bottom: 15px; color: #999; left: 0; /*margin: 0 auto;*/ position: absolute; right: 0; text-align: center; top: auto }
#content #subNavigation a { color: #999 }

#contentNoBanner #subNavigation { bottom: 15px; color: #999; left: 0; /*margin: 0 auto;*/ position: absolute; right: 0; text-align: center; top: auto }
#contentNoBanner #subNavigation a { color: #999 }

/*#content h1 { font: bold 1.08em/1.23em /*12px/16px*/ /*Arial, Helvetica, sans-serif }
#content h2,#content  h3 { font: bold 1em/1.33em /*12px/16px*//* Arial, Helvetica, sans-serif }*/
#content h1 { font: bold 16px/20px Arial, Helvetica, sans-serif; border-bottom: 1px solid; margin-bottom: 30px; }
#content h2 { font: bold 15px/18px Arial, Helvetica, sans-serif; margin-bottom: 20px; margin-top: 10px; }
#content h3 { font: bold 13px/13px Arial, Helvetica, sans-serif; color: #004b68; margin: 0; padding: 0; }

#contentNoBanner h1 { font: bold 16px/20px Arial, Helvetica, sans-serif; border-bottom: 1px solid; margin-bottom: 30px; }
#contentNoBanner h2 { font: bold 15px/18px Arial, Helvetica, sans-serif; margin-bottom: 20px; margin-top: 10px; }
#contentNoBanner h3 { font: bold 13px/13px Arial, Helvetica, sans-serif; color: #004b68; margin: 0; padding: 0; }
/* Colors per section */
/*.abbody #content h1, .abbody #content h2, .abbody #content h3 { color: #913001 }
.bdbody #content h1, .bdbody #content h2, .bdbody #content h3 { color: #4791b4 }
.ftbody #content h1, .ftbody #content h2, .ftbody #content h3 { color: #aab03b }
.owbody #content h1, .owbody #content h2, .owbody #content h3 { color: #878c98 }
.wzbody #content h1, .wzbody #content h2, .wzbody #content h3 { color: #d37f00 }*/
.abbody #content h1, .abbody #content h2 { color: #913001 }
.bdbody #content h1, .bdbody #content h2 { color: #4791b4 }
.ftbody #content h1, .ftbody #content h2 { color: #aab03b }
.owbody #content h1, .owbody #content h2 { color: #878c98 }
.wzbody #content h1, .wzbody #content h2 { color: #d37f00 }

.abbody #contentNoBanner h1, .abbody #contentNoBanner h2, .abbody #contentNoBanner h3 { color: #913001 }
.bdbody #contentNoBanner h1, .bdbody #contentNoBanner h2, .bdbody #contentNoBanner h3 { color: #4791b4 }
.ftbody #contentNoBanner h1, .ftbody #contentNoBanner h2, .ftbody #contentNoBanner h3 { color: #aab03b }
.owbody #contentNoBanner h1, .owbody #contentNoBanner h2, .owbody #contentNoBanner h3 { color: #878c98 }
.wzbody #contentNoBanner h1, .wzbody #contentNoBanner h2, .wzbody #contentNoBanner h3 { color: #d37f00 }

#content p { margin: 1.08em 0 /*13px*/ }

#content a { color: #004a66 }
#content a:hover { text-decoration: none;}

#contentNoBanner p { margin: 1.08em 0 /*13px*/ }

#contentNoBanner a { color: #004a66 }



/*************************************************************
  S I D E B A R
*************************************************************/
#sidebar { background: #e1e1e1 url(../art/sidebarBg.jpg) left top repeat-x; float: right; padding: 9px; width: 162px }

#sidebar h1 {}

#sidebar ul.news {}
#sidebar ul.news li { border-bottom: 1px solid #d7d7d7; margin: 7px 0 0; padding: 0 0 14px }
#sidebar ul.news li a.readmore { color: #004a66; display: block; font-weight: bold; margin: 3px 0 0; text-align: right }
#sidebar ul.news li.nieuwsitemft, #sidebar ul.news li.nieuwsitemab, #sidebar ul.news li.nieuwsitembd, #sidebar ul.news li.nieuwsitemow, #sidebar ul.news li.nieuwsitemwz { }

#sidebar .banner { /*border-bottom: 1px solid #ccc;*/ height: 50px; margin: 0 -9px -9px }

#sidebar .banner #Image9 { border-bottom: 1px solid #ccc !important; border-top: 1px solid #ccc !important }




.anker { background: #f00; color: #fff; padding: 2px }


/* ----------------------------------------------------------------------------- */
/* content links - OPGELET :WEL subclass omdat die kunnen bepalen in de modules!!*/
a.url:link, a.url:active, a.url:visited, a.ankerlijst:link, a.ankerlijst:visited, a.ankerlijst:active {
	text-decoration: underline;
	color: #004a67;
	font-weight: bold;
}
a.url:hover, a.ankerlijst:hover,
{
	color: #000;
	text-decoration: none;
}
a.ankerlijst:link, a.ankerlijst:visited, a.ankerlijst:active {
	text-decoration: underline;
	color: #004a67;
	font-weight: normal;
}
a.ankerlijst:hover {
	color: #000;
	text-decoration: none;
}


/* subMenu : Rollover + HighLight ----------*/
#navigation a.item1:link, #navigation a.item1:visited { background: url(navBg.gif) center bottom no-repeat; color: #004a66; display: block; font-size: 1.00em /*12px*/; font-weight: bold; line-height: 2.15em /*28px*/; padding: 0 0 0 12px; text-decoration: none }
#navigation a.item1:active, #navigation a.item1:hover, #navigation a.item1HL { background: url(navBgHover.gif) left top repeat-x; color: #fff; display: block; font-size: 1.00em /*12px*/; font-weight: bold; line-height: 2.15em /*28px*/; padding: 0 0 0 12px; text-decoration: none }

/* Subnavigation */
#navigation a.subMenu2:link, #navigation a.subMenu2:visited, #navigation a.subMenu2HL { color: #004a66; display: block; font-size: 11px; line-height: 18px; padding: 0 0 0 24px; text-decoration: none }
#navigation a.subMenu2:active, #navigation a.subMenu2:hover, #navigation a.subMenu2HL { color: #fff }
/* Backgrounds per section */
.abbody #navigation a.subMenu2:active, .abbody #navigation a.subMenu2:hover, .abbody #navigation a.subMenu2HL { background: #913001 }
.bdbody #navigation a.subMenu2:active, .bdbody #navigation a.subMenu2:hover, .bdbody #navigation a.subMenu2HL { background: #4791b4 }
.ftbody #navigation a.subMenu2:active, .ftbody #navigation a.subMenu2:hover, .ftbody #navigation a.subMenu2HL { background: #aab03b }
.owbody #navigation a.subMenu2:active, .owbody #navigation a.subMenu2:hover, .owbody #navigation a.subMenu2HL { background: #878c98 }
.wzbody #navigation a.subMenu2:active, .wzbody #navigation a.subMenu2:hover, .wzbody #navigation a.subMenu2HL { background: #d37f00 }

#navigation a.subMenu3:link, #navigation a.subMenu3:visited, #navigation a.subMenu3HL { color: #004a66; display: block; font-size: 11px; line-height: 18px; padding: 0 0 0 30px; text-decoration: none }
#navigation a.subMenu3:active, #navigation a.subMenu3:hover, #navigation a.subMenu3HL { color: #fff }
/* Backgrounds per section */
.abbody #navigation a.subMenu3:active, .abbody #navigation a.subMenu3:hover, .abbody #navigation a.subMenu3HL { background: #913001 }
.bdbody #navigation a.subMenu3:active, .bdbody #navigation a.subMenu3:hover, .bdbody #navigation a.subMenu3HL { background: #4791b4 }
.ftbody #navigation a.subMenu3:active, .ftbody #navigation a.subMenu3:hover, .ftbody #navigation a.subMenu3HL { background: #aab03b }
.owbody #navigation a.subMenu3:active, .owbody #navigation a.subMenu3:hover, .owbody #navigation a.subMenu3HL { background: #878c98 }
.wzbody #navigation a.subMenu3:active, .wzbody #navigation a.subMenu3:hover, .wzbody #navigation a.subMenu3HL { background: #d37f00 }

#navigation a.subMenu4:link, #navigation a.subMenu4:visited, #navigation a.subMenu4HL { color: #004a66; display: block; font-size: 11px; line-height: 18px; padding: 0 0 0 36px; text-decoration: none }
#navigation a.subMenu4:active, #navigation a.subMenu4:hover, #navigation a.subMenu4HL { color: #fff }
/* Backgrounds per section */
.abbody #navigation a.subMenu4:active, .abbody #navigation a.subMenu4:hover, .abbody #navigation a.subMenu4HL { background: #913001 }
.bdbody #navigation a.subMenu4:active, .bdbody #navigation a.subMenu4:hover, .bdbody #navigation a.subMenu4HL { background: #4791b4 }
.ftbody #navigation a.subMenu4:active, .ftbody #navigation a.subMenu4:hover, .ftbody #navigation a.subMenu4HL { background: #aab03b }
.owbody #navigation a.subMenu4:active, .owbody #navigation a.subMenu4:hover, .owbody #navigation a.subMenu4HL { background: #878c98 }
.wzbody #navigation a.subMenu4:active, .wzbody #navigation a.subMenu4:hover, .wzbody #navigation a.subMenu4HL { background: #d37f00 }

/* ----------------------------------------------------------------------------------------- */
/* opmaak modules */
.BeeldRechts {
	float: right;
	clear: none;
	margin: 0 0 10px 30px;

}
.BeeldLinks {
	float: left;
	clear: none;
	margin: 0 30px 10px 0;

}
.BeeldGroot {
	float: right;
}
.box {
	margin: 0 0 5px 0;
	display: block;
}


/* vormgeving standaard + uitgebreid formulier ---------- */
input, textarea, select { border: 1px solid #333; color: #333; font: 11px/16px Arial, Helvetica, sans-serif; margin: 2px 0; padding: 2px }

.content { margin: 0 0 0 130px }
.content2 { float:left }
.contentNoBanner { margin: 0 0 0 130px }
.content2NoBanner { float:left }

.label { clear: left; display: block; float: left; line-height: 190%; margin: 0 5px 0 0; text-align: right; width: 130px }

input.knop, input.knop2 {	
	color: #000;
	background: #a9b03c;
	text-align: center;
	border: 0;
	cursor: pointer;
	padding: 3px 5px;
}
input.knop {	
	margin: 5px 0 0 135px;
}
input.knop2 {	
	margin: 5px 0 0 0;
}
.IkoonLinks{
	float: left;
	margin: 0 5px -2px 0;
}

.pdfopmerking {
	padding: 2px;
	margin: -5px 0 0 3px;
	float: right;
	color: #333;
	background: #efefef;
	}


/* 2 kolommen tekst + beeld */
table.portal { margin: 5px 0; width: 100% }
table.portal .kolom1 { border-right: 1px solid #ccc; padding: 0 20px 0 0; vertical-align: top; width: 50% }
table.portal .kolom2 { padding: 0 0 0 20px; vertical-align: top; width: 50% }

/* eyecatcher 1 */
table#eyecatcher1 {
	font-size: 100%;
	line-height: 140%;
	margin-bottom: 10px;
	margin: 3px 0;
	border-bottom: 1px solid #ccc;
	}
table#eyecatcher1 .foto {
	margin: 10px 10px 10px 0;
	border: 1px solid #ccc;
}
table#eyecatcher1 .titel {
	font-size: 120%;
	color: #004a67;
	line-height: 150%;
	font-weight: bold;
}
table#eyecatcher1 .tekst {
	padding: 6px 10px 5px 0;
	width: 100% /* bug in IE neemt de volle breedte niet in dien te weinig txt*/
}
a.url1:link, a.url1:visited {
	color: #900;
	text-decoration: underline;
	margin: 0 0 10px 0;
}
a.url1:hover, a.url1:active {
	color: #900;
	text-decoration: none;
	margin: 0 0 10px 0;
}

/* eyecatcher 2 */
table#eyecatcher2{
	font-size: 100%;
	line-height: 140%;
	margin-bottom: 10px;
	background: #e1e3c3;
	margin: 3px 0;
}
table#eyecatcher2 .titel {
	font-size: 120%;
	color: #004a67;
	line-height: 150%;
	font-weight: bold;
	background: #e1e3c3;
	padding: 0 0 0 10px;
}
table#eyecatcher2 .foto {
	padding: 10px;
}
table#eyecatcher2 .tekst {
	padding: 5px 5px 5px 10px;
	color: #333;
	background: #e1e3c3;
	width: 100% /* bug in IE neemt de volle breedte niet in dien te weinig txt*/
}
a.url2:link, a.url2:visited {
	color: #000;
	text-decoration: underline;
	margin: 0 0 10px 0;
}
a.url2:hover, a.url2:active {
	color: #000;
	text-decoration: none;
	margin: 0 0 10px 0;
}
/* eyecatcher 3 -------------------------- */
table#eyecatcher3{
	font-size: 100%;
	line-height: 140%;
	margin-bottom: 10px;
	background: #e1e3c3;
	margin: 3px 0;
}
table#eyecatcher3 .titel {
	font-size: 90%;
	color: #fff;
	padding: 5px 0 5px 5px;
	font-weight:bold;
	background: #a9b03c;
	height: 8px;
	line-height: 80%;
	text-transform: uppercase;
}
table#eyecatcher3 .foto {

}
table#eyecatcher3 .tekst {
	padding: 5px;
	color: #333;
	background: #e1e3c3;	
	width: 100% /* bug in IE neemt de volle breedte niet in dien te weinig txt*/
}
a.url3:link, a.url3:visited {
	color: #000;
	text-decoration: underline;
	margin: 0 0 10px 0;
}
a.url3:hover, a.url3:active {
	color: #000;
	text-decoration: none;
	margin: 0 0 10px 0
}
/* popup eyecatcher ------------------------------------------------------- */
#popup {
	position: absolute;
	width: 212px;
	height: 429px;
	left: 0;
	top: 0;
}
/*--------*/
#popup table#eyecatcher1b, table#eyecatcher2b, table#eyecatcher3b {
	color: #666;
	font-size: 100%;
}
#popup table#eyecatcher1b, table#eyecatcher2b, table#eyecatcher3b .titel {
	color: #000;
	padding: 5px;
	font-weight: bold;
	text-transform: uppercase;
}
#popup table#eyecatcher1b, table#eyecatcher2b, table#eyecatcher3b td.tekst {
	padding: 5px;
}
#popup table#eyecatcher1b, table#eyecatcher2b, table#eyecatcher3b td.lijnen {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}


/*************************************************************
  F O O T E R
*************************************************************/
#footer { background: url(../art/footerBg.png) center top no-repeat; color: #fff; clear: both; margin: 0 auto; padding: 8px 0; text-align: center; width: 1000px }

#footer a { color: #fff; text-decoration: none }



/*************************************************************
  C L E A R F I X  =  clears floating elements
*************************************************************/
.clearfix       { display: inline-block }
.clearfix:after { clear: both; content: "."; display: block; font-size: 0; height: 0; visibility: hidden }

/* Hides from IE-mac \*/
* html .clearfix { height: 1% }
.clearfix { display: block }
/* End hide from IE-mac */

/*************************************************************
  H O M E 
*************************************************************/
.quicklinks {
	width: 537px;
	margin: 20px auto;
	overflow: hidden;
}
.quicklink {
	width: 163px;
	height: 127px;
	float: left;
	padding-left: 95px;
	padding-top: 15px;
	padding-right: 10px;
}
.quicklink.arbeiders {
	background: transparent url(ab.jpg) no-repeat bottom right;
}
.quicklink.bedrijven {
	background: transparent url(bd.jpg) no-repeat bottom right;
}
.quicklink.werkzoekenden {
	background: transparent url(wz.jpg) no-repeat bottom right;
}
.quicklink.onderwijs {
	background: transparent url(ow.jpg) no-repeat bottom right;
}

.quicklink a.title {
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
}
.quicklink.arbeiders a.title {
	color: #953101 !important;
}
.quicklink.bedrijven a.title {
	color: #4791B4 !important;
}
.quicklink.werkzoekenden a.title {
	color: #D58000 !important;
}
.quicklink.onderwijs a.title {
	color: #7F848F !important;
}

.quicklink a.text {
	color: #666 !important;
	padding-top: 10px;
	padding-bottom: 10px;
}
.quicklink a {
	text-decoration: none !important;	
	display: block;
	clear: both;
}
.quicklink a:hover  {
	text-decoration: underline !important;
}