@charset "utf-8";
/* CSS Document */

/*** BASIC ***/
html, body	{ width: 100%; height: 100%; margin: 0; background: url(../images/background.gif); font-family: Arial, Helvetica, sans-serif; }
a img		{ border: 0; }

.clear {
	clear:both;
	display:block;
	height:0;
	overflow:hidden;
	visibility:hidden;
	width:0;
}

#container	{ width: 960px; min-height: 100%; margin: 0 auto; background: #FFF; position: relative; }

/*** MENU ***/
#menu ul						{ margin: -10px 28px 0; padding: 0; list-style: none; position: relative; z-index: 9000; }
#jongeren #menu ul				{ margin: -10px 28px 0; }
#menu li 						{ float: left; position: relative; }
#menu li ul 					{ display: none; position: absolute; left: 0; }
#menu li > ul 					{ top: auto; left: auto; }
#menu li:hover ul, li.over ul	{ display: block; top: 45px; left: -20px; width: 180px; border: 1px solid #000; border-bottom: none; z-index: 10000000; }

/* midden */
#menu li a			{ display: block; background: url(../images/background-menuitem-center.gif) repeat-x top; text-decoration: none; color: #000; font-size: 13px; }
#menu li a:hover	{ background: url(../images/background-menuitem-center-hover.gif) repeat-x top; }

#menu li a span				{ display: block; background: url(../images/background-menuitem-left.gif) no-repeat left top; }
#menu li a:hover span		{ background: url(../images/background-menuitem-left-hover.gif) no-repeat left top; }
#menu li a span.first		{ display: block; background: url(../images/background-menu-left.gif) no-repeat left top; }
#menu li a:hover span.first	{ background: url(../images/background-menu-left-hover.gif) no-repeat left top; }
#menu li a:hover font		{ background: url(../images/background-menuitem-right-hover.gif) no-repeat right top; }
#menu li a:hover font.last	{ background: url(../images/background-menu-right-hover.gif) no-repeat right top; }

#menu li a span.first font				{ padding: 4px 23px 16px 28px; }
#menu li a font							{ padding: 4px 21px 16px; display: block; background: url(../images/background-menuitem-right.gif) no-repeat right top; }
#menu li a font.last					{ padding: 4px 28px 16px 23px; display: block; background: url(../images/background-menu-right.gif) no-repeat right top; }

#jongeren #menu li a span.first font	{ padding: 4px 26px 16px 33px; }
#jongeren #menu li a font				{ padding: 4px 32px 11px; }
#jongeren #menu li a font.last			{ padding: 4px 39px 16px 34px; }

#menu li.submenuitem a	{ display: block; width: 170px; background: #FFF; padding: 3px 5px; border-bottom: 1px solid #000; font-size: 12px; }
#menu li.submenuitem a:hover	{ background: #40abe3; color: #FFF; }

.leftmenu	{ margin: 0 0 15px; padding: 0; list-style: none; }
.leftmenu li a	{ text-decoration: none; }

/*** HEADER ***/
#header				{ background: url(../images/background-header.jpg) no-repeat bottom; }
#header #foreground	{ height: 165px; position: relative; padding: 0 15px; /*background: url(../images/foreground-header.png) no-repeat;*/ }

#header form		{ position: absolute; left: 28px; bottom: 25px;; }
#header label		{ display: none; }
input#searchkey_top	{ width: 150px; }
#header input.submit	{ padding: 0 5px; }
#header input.submit	{ background: #FFF; color: #40abe3; }
#header input.submit:hover	{ background: #40abe3; color: #FFF; }

#header img.zelftest	{ position: absolute; left: 28px; top: 20px; }
#header img.zelftest2	{ position: absolute; left: 28px; top: 92px; }
#header img.logo		{ position: absolute; top: 50%; left: 50%; margin: -57px 0 0 -57px; }
#header img.donateur	{ position: absolute; top: 0; right: 0; }
#header img.jongeren	{ position: absolute; left: 28px; bottom: 25px; }
#header img.payoff		{ position: absolute; right: 67px; bottom: 25px; }

/*** CONTENT ***/
#content		{ margin: 0 15px; padding: 0 0 75px; }

h1			{ display: block; margin: 10px 0 0; background: url(../images/background-h1-middle.gif) repeat-y top; font-size: 14px; color: #999; }
h1 span		{ display: block; background: url(../images/background-h1-top.gif) no-repeat top; }
h1 font		{ display: block; background: url(../images/background-h1-bottom.gif) no-repeat bottom; padding: 12px 20px; font-weight: normal; }
h1 a		{ text-transform: capitalize; color: #999; text-decoration: none; }
h1 a:hover	{ color: #40abe3; }
h1 a.active	{ color: #40abe3; }


#content #left	{ width: 210px; float: left; margin: 10px 10px 0 0; }
#content #right	{ width: 710px; float: left; margin: 10px 0 0 0; }

#left img		{ max-width: 170px; margin: 0 0 10px 0; }

#content #left #top		{ height: 20px; font-size: 1px; line-height: 1px; background: url(../images/background-content-left-top.gif) no-repeat top; }
#content #left #middle	{ background: url(../images/background-content-left-middle.gif) repeat-y; padding: 10px 20px 0; }
#content #left #bottom	{ height: 20px; font-size: 1px; line-height: 1px; background: url(../images/background-content-left-bottom.gif) no-repeat bottom; }

#content #right #top		{ height: 20px; font-size: 1px; line-height: 1px; background: url(../images/background-content-right-top.gif) no-repeat top; }
#content #right #middle	{ background: url(../images/background-content-right-middle.gif) repeat-y; padding: 10px 25px 0; }
#content #right #bottom	{ height: 20px; font-size: 1px; line-height: 1px; background: url(../images/background-content-right-bottom.gif) no-repeat bottom; }

h2		{ margin: 0 0 10px 0 ; font-size: 14px; color: #40abe3; position: relative; }
h3		{ margin: 0 0 5px 0; font-size: 14px; color: #999999; position: relative; }
h4		{ margin: 0 0 5px 0; font-size: 12px; color: #000; }
p, li, label, td	{ font-size: 12px; line-height: 17px; color: #333333; position: relative; }
p		{ margin: 0 0 15px 0; }
p a, li a			{ color: #40abe3; }
p a:hover, li a:hover	{ color: #000; text-decoration: none; }
p.right	{ text-align: right; }
p.small	{ font-size: 10px; margin: 0; font-style: italic; }
img.link	{ display: block; margin: 0 0 15px 0; }
#right #middle img	{ display: block; margin: 10px 0; }
#container table	{ border: 1px solid #40ABE3; border-collapse: collapse; margin: 0 0 15px 0; }
#container td		{ padding: 2px 5px; }
p font	{ color: #40ABE3; font-size: 13px !important; }
font u	{ display: block; text-decoration: none; border-bottom: 1px solid #40ABE3; padding: 0 0 3px 0; }

hr		{ height: 1px; border: 0; background: #40abe3; margin: 20px 0; }

.newsitem	{ border-bottom: 1px solid #40abe3; position: relative; margin: 0 0 20px 0; }
.newsitem img	{ position: absolute; top: 50px; right: 0; }
#right #middle .newsitem img.thumb	{ position: static; top: auto; right: auto; float: left; max-height: 75px; margin: 0 10px 0 0; }
.newsitem p			{ padding: 0 25px 0 0; }
.newsitem p a		{ text-decoration: none; font-weight: bold; color: #40abe3; }
.newsitem p a:hover	{ color: #000000; }

img.playBtn	{ padding: 20px 50px; }

/* VACATURES */
#left .vacatures	{ margin: 20px 0; }
#left .vacatures h2	{ margin: 0; }
#left .vacature		{ margin: 5px 0 0 0; padding: 5px 0 0 0; border-top: 1px solid #40abe3; }
#left .vacature a	{ display: block; font-size: 12px; color: #40abe3; text-decoration: none; }
#left .vacature a:hover	{ color: #000; }
#right .vacature	{ border-bottom: 1px solid #40abe3; }

/* PEOPLE */
ul#people	{ margin: 0; padding: 0; list-style: none; }
li.person	{ width: 165px; float: left; margin: 0 0 10px 0; }
li.person img	{ display: block; margin: 0 0 5px 0; }

/* FORM */
form, fieldset	{ margin: 0; padding: 0; border: none; }
form div		{ margin: 0 0 10px 0; }
form span		{ float: left; margin: 0 15px 0 0; }
form span span	{ float: none; font-size: 12px; line-height: 17px; margin: 0; }
form#donaties	{ border-bottom: 1px solid #40abe3; margin: 0 0 15px 0; padding: 0 0 5px 0; }

form p			{ margin: 0; position: relative; }
form label		{ display: block; font-weight: bold; margin: 0 0 2px 0; }
form label span.small	{ font-weight: normal; font-size: 11px; }
form label.error	{ color: #FF0000; }
form label.preset	{ display: none; }
form label.radio, form label.checkbox	{ display: inline; }
form#donaties label.radio	{ display: block; float: left; width: 130px; }
form#donaties div	{ margin: 0; }
form#donaties .submit	{ margin: 10px 0; }
form input, form select, form textarea	{ width: 425px; border: 1px solid #40abe3; font-size: 12px; line-height: 17px; font-family: Arial, Helvetica, sans-serif; padding: 1px 2px; }
form input.option	{ display: block; margin: 2px 0; }
form select			{ width: auto; padding: 0; float: left; margin: 0 5px 0 0; }
form select.last	{ margin: 0; }
form span.checkradio input		{ float: left; border: none; }
form span.checkradio label		{ float: left; width: 600px; display: inline-block; font-weight: normal; margin: 0; }
form span.checkradio label.error		{ display: none; margin: 2px 5px; font-weight: bold; }
form input.submit, form input.button		{ width: auto; background: #40abe3; padding: 5px 10px; font-weight: bold; color: #FFF; }
form input.submit:hover, form input.button:hover	{ background: #FFF; color: #40abe3; }
form input.radio	{ width: auto; border: none; }
form#donaties input.radio	{ float: left; }
form input.checkbox	{ width: auto; border: none; }

input#username		{ width: 150px; }
input#password		{ width: 150px; }

input#initials		{ width: 80px; }
input#name			{ width: 212px; }
input#companyname	{ width: 233px; }
input#contactname	{ width: 313px; }
input#streetname	{ width: 100px; }
input#housenumber	{ width: 50px; }
input#address, input#subject		{ width: 343px; }
input#postcode		{ width: 70px; }
input#city			{ width: 143px; }
input#email			{ width: 202px; }
input#phonenumber	{ width: 202px; }
input#job			{ width: 125px; }
input#banknumber	{ width: 258px; }
input#function		{ width: 259px; }
div.invisible		{ display: none; }

/* ZOEKEN */
.searchresult		{ border-bottom: 1px solid #CCC; padding: 0 0 10px; margin: 0 0 20px; }
.searchresult h3 a	{ color: #999999; text-decoration: none; }
input#searchkey		{ width: 150px; }

.paging				{ border-bottom: 1px solid #CCC; border-top: 1px solid #CCC; padding: 5px 0; margin: 10px 0; }
.paging	p			{ margin: 0; }
.paging a			{ text-decoration: none; }
.paging a.active	{ font-weight: bold; color: #333; }

/*** FOOTER ***/
#footer		{ width: 100%; height: 75px; position: absolute; bottom: 0; background: url(../images/background-footer.gif) no-repeat; }
#footer p	{ text-align: center; color: #FFF; font-size: 12px; font-weight: bold; line-height: 18px; margin: 18px; }
#footer a	{ color:#000; text-decoration: none; }
#footer a:hover	{ color:#FFF; }