/* Opmerkingen:

Optimaal voor IE6, IE7 en FireFox.

Met deze opzet schaleert de pagina altijd minimaal 100% in hoogte.
De positionering van de DIV's outer, innerwrap, left, centrecontent, right, header en footer is heel belangrijk.
Daarnaast is de hoogte van de outer van belang: height: 100%; is voor IE6 vereist en min-height: 100%; voor IE7 en FireFox.

De fontgrote wordt relatief gebruikt, zodat het goed schaleert en op elk beeldscherm hetzelfde is.
De basis fontgrote is 10 pixels (62,5%) en wordt aangeroepen in de body. Pas de fontgrote per div aan met 'em'.
1.0em komt overeen met 10 pixels. Houdt rekening met de cascading eigenschap van CSS.

De volgorde/indeling van de CSS komt overeen met de indeling van de site layout. Deze indeling is gekozen omdat het 
zoekmachine vriendelijk is. Eerst wordt de content getoond in de bron en daarna alle andere bestandsdelen van de website.

*/

/* MAC HIDE\*/
html, body {height:100%}
/* END HIDE */

/* ///////////////////////////////////////////////////////////// */

/* BODY */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* fontgrote is 10 (62,5% van 16); standaard fontgrote in browsers is 16 pixels */
	font-weight: normal;
	font-style: normal;
	color: #000;
	padding:0;
	margin:0;
	text-align:center;
	min-width:1000px; /* for mozilla*/
}

/* ///////////////////////////////////////////////////////////// */

/* ALGEMEEN */

h1 {
	font-size: 1.4em; /* x 10 is de fontgrote in pixels */
	line-height: 1.8em;
	font-weight: bold;
	color: #26296c;
	padding-left: 15px;
}

h2 {
	font-size: 1.3em; /* x 10 is de fontgrote in pixels */
	font-weight: bold;
	color: #26296c;
}

h3 {
	font-size: 1.2em; /* x 10 is de fontgrote in pixels */
	font-weight: bold;
	color: #26296c;
/*	margin: 0px;*/
}

a:link, a:active, a:visited {
	/*color: #26296c;*/
	color: #eb870d;
	text-decoration: underline;
}

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

img {
	border: 0px;
}

div,p  {margin-top:0}/*clear top margin for mozilla*/

/* ///////////////////////////////////////////////////////////// */

/* DIV OUTER */

html>body #outer{height:auto;}

#outer{
	height:100%;
	min-height:100%;
	width:800px;
	color: #000000;
	text-align:left;
	margin:auto;
	position:relative;
	background: url(/images/outer_back_right.png) repeat-y top right;
}

/* ///////////////////////////////////////////////////////////// */

/* DIV INNERWRAP */

#innerwrap {/* enables content first */
	position: relative;
	float:left;
	width:524px;
}

/* ///////////////////////////////////////////////////////////// */

/* DIV CONTENT */

#centrecontent {
	width:494px;
	float:right;
	margin-top:330px;
	margin-bottom:30px;
	padding-right: 30px;
	font-size: 1.2em;
}

#centrecontent div a {
	text-decoration: none;
}

#centrecontent ul {
	list-style-type: none;
}

#centrecontent li {
	padding-bottom: 10px;
}

#centrecontent li ul {
	padding-top: 3px;
}

.vacature_tabel td {
	padding-right: 20px;
	padding-bottom: 5px;
	vertical-align: top;
}

.nieuw {
	font-weight: bold;
	color: #eb870d;
	margin-left: 10px;
}

.filialen_tabel {
	width: 450px;
}

.filialen_tabel td {
	padding-right: 20px;
	margin: 0px;
}

.filialen_tabel tr {
	margin-bottom: 10px;
}

.filialen_td {
	width: 170px;
}

.medewerkers_tabel td {
	vertical-align: bottom;
	padding-right: 20px;
	width: 250px;
	padding-bottom: 20px;
}

.medewerkers_tabel p {
	margin-top: 10px;
}

/* FORMULIER */

form {
	border: 1px solid #878A35;
	background: #cccded;
	padding: 0px;
}

form th {
	background: #eb870d;
	color: white;
	padding: 5px;
	font-size: 1.6em;
	text-align: center;
}

form td {
	padding: 2px;
}

form table {
	margin: 0px;
	padding: 0px;
}

form .submit {
	background: #26296c;
	color: white;
	border: 1px solid  #26296c;
	font-weight: bold;
	margin-left: 180px;
	margin-top: 30px;
	margin-bottom: 10px;
}

/* ///////////////////////////////////////////////////////////// */

/* DIV RIGHT */

#right p {padding-left:4px;padding-right:2px}

#right {
	position: relative;
	width: 226px;
	float: right;
	margin-top: 270px;
	margin-bottom: 52px;
	padding-top: 117px;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	background: url(/images/right_back.png) no-repeat top;
	color: #26296C;
}

#right a:link, a:active, a:visited {
	color: #26296c;
	text-decoration: underline;
}

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


/* ///////////////////////////////////////////////////////////// */

/* CLEARFOOTER */

#clearfooter {width:100%;height:30px;clear:both}

/* ///////////////////////////////////////////////////////////// */

/* HEADER */

#header{
	position:absolute;
	top:0;
	left:0px;
	width:800px;
	height:270px;
	border-bottom: none;
	color: #000000;
	background: url(/images/header_back.png) bottom left no-repeat #fff;
}

#logo {
	position: absolute;
	top: 35px;
	left: 0px;
}

#werk_zoeken {
	width: 254px;
	height: 89px;
	position: absolute;
	top: 117px;
	left: 0px;
}

#personeel_zoeken {
	width: 269px;
	height: 89px;
	position: absolute;
	top: 117px;
	left: 254px;
}

#secmenu_mainpage {
	position: absolute;
	bottom: 64px;
	right: 0px;
	font-size: 1.1em;
}

#secmenu_mainpage ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#secmenu_mainpage li {
	width: 262px;
	*width: 242px;
	height: 25px;
	list-style-image: url(/images/list_image_main.png);
	list-style-position: inside;
	padding-left: 15px;
	padding-top: 5px;
}

#secmenu_mainpage li:hover, #secmenu_mainpage li.sfhover {
	background: url(/images/secmenu_back_splash.png);
	*background: none!important;
}

#secmenu_mainpage li.selected {
	background: url(/images/secmenu_back_splash.png);
	*background: none!important;
}

#secmenu_mainpage li a {
	color: #fff;
	text-decoration: none;
	*width: 242px;
	*display: block;
}

#secmenu_mainpage li a:hover {
	*color: #eb870d;
}

#secmenu_mainpage li ul {
	display: none;
}

/* DIV SUBSUBMENU */

#menu {
	position: absolute;
	top: 231px;
	left: 0px;
	height: 32px;
	width: 800px;
	margin: 0px;
	padding: 0px;
	font-size: 1.1em;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#menu li {
	float: left;
	height: 24px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 8px;
}

#menu li a {
	color: #000;
	text-decoration: none;
}

#menu li:hover, #menu li.sfhover {
	background: #26296c;
}

#menu li:hover a, #menu li.sfhover a {
	color: #fff;
}

#menu li.selected {
	background: #26296c;
}

#menu li.selected a {
	color: #fff;
}

#menu li ul {

}

#overlay {
	background: url(/images/header_front.png);
	height: 30px;
	width: 30px;
	position: absolute;
	top: 116px;
	left: 0px;
}

#titel {
	position: absolute;
	top: 270px;
	*top: 280px;
	left: 0px;
	background: url(/images/list_image_over.png) no-repeat left center;
	margin: 0px;
	padding: 0px;
}

#titel h1 {
	margin-bottom: 10px;
	*margin-bottom: 0px;
}

/* ///////////////////////////////////////////////////////////// */

/* FOOTER */

* html #footer {/*only ie gets this style*/
	\height:30px;/* for ie5 & ie6 */
}
#footer {
	width: 800px;
	height: 30px;
	clear: both;
	background: #fff;
	color: #000000;
	left: 0;
	bottom: 0;
	position: absolute;
	background: url(/images/footer_back.png);
	color: #fff;
}

#footermenu_mainpage {
	position: absolute;
	top: 0px;
	left: 524px;
	width: 276px;
	font-size: 1.2em;
}

#footermenu_mainpage ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	padding-left: 30px;
	padding-top: 6px;
}

#footermenu_mainpage li {
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}

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

#footermenu_mainpage li a:hover {
	color: #26296c;
}

#footermenu_mainpage li.selected a {
	color: #26296c;
}

.notice {
  padding-bottom: 10px;
  color: #eb870d;
  font-weight: bold;
}