body.workat {height: 100%;}
.workat #bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#header, #contentwrapper {position:relative; z-index:1;}

#contentwrapper {position:relative; overflow:hidden;}
 .workat #contentwrapper {padding-top: 24px;}
 
 /* SUPPORT workat */
 .workat  #support {overflow: visible;}
	.workat #support h1 {width: 215px; font-size: 4em; margin-bottom: 20px; line-height: 0.9em; padding-bottom: 5px;top:-5px;}
  .workat #support .wrapper { width: 310px; }
     .workat #support ul {clear: left;}
     .workat #support ul li {background: transparent url(../img/icons/big-arrow.gif) no-repeat 0 0.1em; padding-left: 25px; color: #333; margin-bottom: 1em; width: 240px;}
	    .workat #support ul li p { color: #666; font-size: 1em; margin-left: 0}
     		.workat #support ul li a { color: #666; font-size: 1.25em; margin-left: 0}
     		.workat #support ul li a:hover {color: #f09}
   
 /* CONTENT workat */
#content p{padding-right: 25px;} 
#content h2 {overflow: visible; padding-bottom: 5px;top:-5px; }
#content h3 {font-size: 2.3em; font-weight: normal; color: #f09; margin-bottom: 0.5em; margin-top: 1em;}
.workat #content h4 {color:#FF0099; text-transform: lowercase;font-size:1.8em;font-family: Arial,sans-serif;font-weight: normal;line-height:1em;margin:1em 10px 12px 0;}

#content .left-content {width: 320px; float: left; overflow: hidden; padding-right: 10px; border-right: 1px solid #999; margin-right: -1px;}
#content .right-content {width: 199px; float: left; overflow: hidden; padding-left: 10px; border-left: 1px solid #999;}

	#content .left-content blockquote {width: 190px; height: 149px; background: url(../img/bg/quote_bg.gif) no-repeat; float: right; margin-right: 20px; color: #fff; font-size: 2.3em; line-height: 1.32em; font-family: times new roman; padding: 20px 15px 20px 27px;}
		#content .left-content blockquote span {width: 12px; background: transparent 0 0 no-repeat; font-size: 1.1em; height: 10px; display: block;}
			#content .left-content blockquote span.start {margin-left: -12px; margin-top: -3px; float: left;}
			#content .left-content blockquote span.end {margin: -30px 10px 0 0; float: right;}
	#content .left-content blockquote:hover {text-decoration: none;}

	.main #content h2 {margin-top: 5px; padding-bottom: 3px; position: relative; top: -3px;}
	  .main #content .heading h2 {margin-top: 0px;}
	#content .right-content h2 {font-size: 2.5em; margin-bottom: 25px;}
	#content .right-content .item {margin-bottom: 30px; line-height: 1.6em; width: 195px;}
	
	#content .right-content h3 {font-size: 1.8em; font-weight: normal; color: #999; margin-bottom: 0.8em;}
	#content .right-content p {font-size: 1.2em; }
		#content .right-content p a {background: transparent url(../img/icons/pijltje_roze.gif) no-repeat scroll left center; padding-left: 15px; }

	#content .mail ul {margin: 0px;padding: 0px; margin-left: 15px;}	
	
/* Vacature overzicht */
	#content .heading {position: relative; height: 128px; overflow:visible; top: 5px;}
	
	.workat #content span.small {font-size: 1.5em; }
	.workat #content span.big {font-size: 1.9em; }
	.workat #content span.huge {font-size: 2.25em; }
	
	#content .lists {clear: both; width: 500px;}
		#content .lists .left {float: left; width: 250px;}
		#content .lists .right {float: right; width: 250px;}
		#content .lists .list {width: 50%; text-align: left;}
		#content .lists h3 {color: #f09; font-size: 2.5em; font-weight: normal; margin-top: 15px; margin-bottom: 0px;}
		#content .lists ul {list-style: none; padding-left: 0; font-size: 0.8em; margin-left: 0; margin-top: 10px; padding: 0px;}
			#content .lists ul a {background: transparent url(../img/icons/pijltje_roze.gif) no-repeat scroll left center; padding-left: 15px; }
 	
/* harmonica effect paginas */
.harmonica #contentwrapper { margin-top:0; padding-top:24px; padding-right:0; }

.sliderwrapper {zoom:1;width:540px;float:left;} 
	.sliderbox {list-style:none; width:540px; display:block; overflow:hidden; margin:0; padding:0;}
	.sliderbox li {float:left; display:inline; overflow:hidden;margin:0; padding:0;}
	/* #sliderbox div {float:left; display:inline; overflow:hidden;margin:0; padding:0;} */
	.slider{float:left;width:490px;padding:5px;min-height:400px; height:auto !important; height:400px;}

 .harmonica .heading h2 {position: relative; float: left; width: 240px;}
	 #content #slider1 blockquote {position: relative; width: 140px; height: 182px; background: url(../img/bg/quote_5_bg.gif) no-repeat; float: right; margin-right: 10px; color: #fff; font-size: 2.3em; line-height: 1.1em; font-family: times new roman; padding: 15px 0px 20px 20px; margin-top: 0px;}
			#content .slider blockquote span {position: relative; width: 12px; font-size: 1.1em; height: 10px; display: block; background: none;}
				#content .slider blockquote span.start {margin-left: -12px; float: left;}
 
 .harmonica #slider1 {padding-right: 10px; border-right: 1px solid #999; margin-right: -1px; padding-bottom: 30px}
 .harmonica .slider {width: 490px; padding:0;}
 	.harmonica #content .slider p {width: 400px; font-size: 1.3em; position: relative; background-color: transparent;}
  .harmonica #content #slider2 .main-info p { width:290px; }
 
 .harmonica #content li.slideritem {font-size:100%;font-weight:normal;line-height:auto;}
    /*.harmonica #content li.slideritem {background: transparent url(../img/icons/big-arrow.gif) no-repeat 20px 0.1em; padding-left: 30px; margin-left: -30px;}*/
 
  
 .harmonica #slider2 {position: relative; padding-left: 10px; border-left: 1px solid #999; background-color: #FFFFFF; border-bottom:1px solid #999999;}
 	.harmonica #slider2 .side-info {width: 160px; float: left; padding-right: 10px;}
 		.harmonica #slider2 .side-info h3 {font-size: 1.8em; font-weight: normal; margin-bottom: 15px}
		 #content #slider2 blockquote {width: 120px; height: 235px; background: url(../img/bg/quote_3_bg.gif) no-repeat; color: #fff; font-size: 2.3em; line-height: 1.1em; font-family: times new roman; padding: 15px 15px 20px 22px;}
	
	.harmonica #slider2 .side-info .heading {height: 335px}
		.harmonica #content #slider2 .side-info .heading blockquote {height: 182px; background: url(../img/bg/quote_4_bg.gif) no-repeat;}
		.harmonica #content #slider2 .side-info .heading img {margin-top: -10px}
	
	.harmonica #content #slider2 .side-info .colleagues img {float: left; margin-bottom: 10px; margin-right: 10px;}
	.harmonica #content #slider2 .side-info .colleagues em {float: left; font-style: normal; height: 60px; width: 65px; font-size: 1.1em;}
		.harmonica #content #slider2 .side-info .colleagues em a {color: #f09}
		
	.harmonica #slider2 .main-info {width: 310px; float: left; padding-left: 10px;}
		.harmonica #slider2 .main-info img.right {float: right; margin: 0 0 10px 10px}
		.harmonica #slider2 .main-info img.left {float: left; margin: 0 10px 10px 0}

/* ul in content en harmonica */		
	#content ul.sliderbox li ul {margin: 0; padding:0px 0px 0px 3px; width: 400px; list-style: square;}
	  #content ul.sliderbox li ul li {display: block; position: relative; float: none; margin: 0; padding:3px 0px 3px 15px; font-size: 1.3em; list-style: square; background:transparent url(../img/pijltje_roze.gif) no-repeat scroll 0pt 0.7em;}
	  
/* show total bg image -> functionality hidden by default, activated by JS */	
	.harmonica #effect { height:16px; width:16px; position: absolute; right: 0px; margin-top:-24px;}
  .harmonica #effect a { overflow:hidden; float:right; height:16px; width:16px; background:transparent url(../img/icons/ic-bg-effect.png) no-repeat 0 0; }
  .harmonica #effect a:hover { text-decoration:none; background:transparent url(../img/icons/ic-bg-effect-on.png) no-repeat 0 0;}
  .harmonica #effect a img { display: none; }
  
  .harmonica #effectback { background-color: transparent; position: relative; left: 0px; margin-top: 5px; display:none; width:900px; height:16px; margin-left:40px;}
  .harmonica #effectback a { padding:0px; background:transparent url(../img/icons/ic-bg-effect-back.png) no-repeat right top; float: right;}
  
  /*
	.harmonica #effectback a {position:absolute; top:270px; left: 840px; width: 100px; height: 50px; border: 1px solid #000;}
  */
 
/* form page */
.workat #content form {position: relative; width: 510px;}
	.workat #content fieldset {border: 0; margin-bottom: 30px;}
	.workat #content .subform {position: relative; border: 0; padding-bottom: 0px; clear: both;}
		.workat #content form h3 {margin-bottom: 10px;padding-top: 20px; font-size: 1.8em; font-weight: normal;}
		.workat #content fieldset label, .workat #content label {width: 200px; float: left; margin-bottom: 10px; font-size: 1em; padding-right: 10px;}
		.workat #content fieldset input.text {border: 1px solid #999; float: right; width: 195px; height: 1.4em; padding-left: 2px; margin-bottom: 8px}
		.workat #content fieldset textarea.text {border: 1px solid #999; float: right; width: 195px; padding-left: 2px}
     .workat #content form p {display: block; float: none; clear: both; width: 510px; margin-bottom: 0.5em;}
	 
	.workat .subform input, .workat form input {width: 250px; float: left; margin-bottom: 0px;}
	.workat form input.radio {width: 20px; float: left; height: 15px; overflow: hidden; position: relative; top: 2px;}    
	.workat form p span {width: 270px; float: left;}
    .workat form p span.group {display: block; position: relative; border: none; float: left; width: 300px; margin-bottom: 10px;}
  
   .workat #form-button {position: relative; clear:both; float: left; margin-left:0px; padding-top: 15px; padding-bottom: 25px;}
		 
  #content .right-content {font-size: 1.25em;}
		#content .right-content .mail ul {list-style: none; padding-left: 0; margin-left: 0}
			#content .right-content .mail ul li {background: url(../img/icons/mail.gif) 0 0.3em no-repeat; padding-left: 20px; font-size: 1.2em;}
				#content .right-content .mail ul li a {color: #f09}
	
 
/* integratie klikfilm */
#container-lightbox {visibility:hidden; width:100%; height:100%; position:fixed; top:0; left:0; z-index:1000; text-align: center; padding-top: 50px;}
.lightbox {width:100%; height:100%; position:absolute; top:0; left:0; filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50; background-color:black;z-index:1000; text-align: center; text-align: center;}
.popup {position: relative; width: 660px; border: solid 3px #333333; height: 580px;  margin: auto; background-color: #000000; display: block; overflow: hidden; z-index: 1002;}
a.kliklink {cursor: pointer;}
a.sluitlink {cursor: pointer; color: #FFFFFF; text-indent: -1000px; margin-left: -100px;}
#bt-close {position: absolute; top: 10px; right: 17px; width: 25px; height: 25px; z-index: 1003; overflow: hidden; cursor: pointer; background-image: url('../img/icons/bt-close.gif');}

/* grote roze button */	  
	#content .advertise {width: 260px; overflow: hidden; background: transparent; float: left; margin-top: -15px; font-size: 1em}
		#content .slider .advertise {position: relative; width: 300px; margin-top: 0px; display: block;}
		#content .advertise ul, #content .advertise ul li, #content .advertise ul li a {background: transparent; color: #ff0099; font-weight: bold; list-style: none; padding-left: 0; margin-left: 0}
		#content .advertise ul li {background: url(../img/icons/round-arrow.gif) no-repeat 0 0.1em; padding-left: 45px; margin-bottom: 20px; height: 40px;}
 
 #content ul.sliderbox .advertise ul li {background: url(../img/icons/round-arrow.gif) no-repeat 0 0.1em; padding-left: 45px; margin-bottom: 20px; height: 40px;}