/**
 * This stylesheet is for element styles
 * Copyright info.nl Amsterdam
 *
 * index:
 * Header
 *  Content pages
 *  Homepage - tickertape
 * Side navigation
 * Main (editor content)
 * 	Image handling
 * 	Overview element
 * 	Document
 *  Testimonials
 * Ankeilers
 * 	Ankeilers in aside
 *  Ankeilers op department / person page
 * Buttons
 * Department (our people) page
 * Aside
 * Footer
 */

/* Header
---------------------------------------------------------------------------- */
a#logo { position:absolute; bottom:3px; left:5px; border:none !important; }

.office-picker { position:absolute; top:0; right:13px; text-transform:uppercase; }
#footer .office-picker { position:relative; float:right; padding-top:2px; }
	.office-picker ul { float:left; padding:0; list-style-type:none; }
		.office-picker li { float:left; margin-right:10px; padding:8px 0 2px; font-size:10px; }
		#footer .office-picker li { padding:6px 0 0; }
			.office-picker a { color:#999; text-decoration:none; border:none; }
			.office-picker a:hover, .office-picker a:focus { color:#f21a1a; }
		.office-picker a.contact { float:left; height:16px; margin:0 0 0 10px; padding:8px 0 0 20px;  border-left:1px dotted #999; border-bottom:none; }
		#footer .office-picker a.contact { height:20px; margin-top:2px; padding-top:4px; }

#nav { position:absolute; bottom:0; right:0; text-transform:uppercase; }
	#nav ul { float:left; padding:0; list-style-type:none; }
		#nav li { float:left; padding:7px 10px 0 0; height:20px; font-size:10px; }
			#nav a { color:#f21a1a; text-decoration:none; border:none; }
			#nav a:hover, #nav a:focus, #nav li.active a, #nav li.trail a { color:#000; }
	#nav a.careers { float:left; height:20px; margin:0; padding:8px 0 0 10px; background:url(../images/buttons/careers-left.gif) no-repeat left 1px; }
		#nav a.careers span { color:#fff; padding:8px 25px 7px 0; background:url(../images/buttons/careers-right.gif) no-repeat right 1px; }
	#nav a.careers:hover { background-position:left -28px; }
		#nav a.careers:hover span { background-position:right -28px; }


/* Content pages */
#header-visual img { width:940px; z-index:1; }
#header-visual .bottom-shadow { position:absolute; bottom:0; left:0; width:940px; height:5px; z-index:2; background:url(../images/bg/header_img_bottom_shadow.png) no-repeat 0 0; }

#titlebar p { float:left; min-width:185px; margin-left:5px; padding:5px 0 0; font-size:16px; font-weight:bold; color:#fff; }

#breadcrumb { float:left; margin:8px 0 0 10px; padding:0; list-style-type:none; }
	#breadcrumb li { float:left; font-size:12px; color:#fff; }
		#breadcrumb a { padding-left:20px; color:#fff; text-decoration:none; background:url(../images/icons/link_icons.gif) no-repeat left 4px; border:none !important; }
		#breadcrumb li:first-child a { background:none; padding-left:0; }
		#breadcrumb a:hover, #breadcrumb a:focus { text-decoration:underline; }

/* Homepage - showcase */
#showcase ul { padding:0; list-style-type:none; }
	#showcase li {  }
		
#showcase-controls { display:none; position:absolute; top:20px; left:20px; width:280px; height:180px; overflow:hidden; background-color:#f00; z-index:10; }
	#showcase-controls button { position:absolute; top:0; width:54px; height:57px; padding:0; overflow:visible; border:none; background:transparent url(../images/buttons/showcase_controls.png) no-repeat left 0; cursor:pointer; font-size:0; border:none; }
	#showcase-controls button.next { right:0; background-position:right 0; }
	#showcase-controls button.next:hover { background-position:right -57px; }
	#showcase-controls button.prev { left:0; }
	#showcase-controls button.prev:hover { background-position:left -57px; }
		#showcase-controls button span { display:none; }
	
	#showcase-controls .head { position:absolute; top:10px; left:45px; width:184px; height:35px; overflow:hidden; text-transform:uppercase; }
		#showcase-controls p.subtitle { padding:0; font-size:14px; color:#000; }
		#showcase-controls p.title { padding:0; font-size:18px; color:#fff; }
			#showcase-controls p.title span, #showcase-controls p.subtitle span { display:none; }
	
	#showcase-controls p.text { display:block; position:relative; height:110px; margin:60px 0 0 0; padding:10px 10px 0 10px; font-size:22px; color:#fff; border-top:1px dotted #fff; }
		#showcase-controls p.text a { display:none; position:absolute; top:0; left:0; width:260px; height:100px; padding:10px; color:#fff; border:none; text-decoration:none; }
			#showcase-controls p.text a span { position:absolute; right:6px; bottom:5px; width:37px; height:40px; background:url(../images/buttons/showcase_link.png) no-repeat 0 0; }
			#showcase-controls p.text a:hover span, #showcase-controls p.text a:focus span { background-position:0 -40px; }
	#showcase-controls p.nolink { cursor:default; }
		#showcase-controls p.nolink span.link { display:none; }
			#showcase-controls p.text span.link span { display:none; }

/* Homepage - tickertape */
#tickertape { overflow:hidden; background-color:#f00; color:#fff; }
	#tickertape ul { position:absolute; top:5px; padding:0; list-style-type:none; z-index:1; }
		#tickertape li { float:left; margin-right:10px; padding-right:10px; font-size:18px; line-height:28px; background:url(../images/icons/tickertape_spacer.gif) no-repeat right 6px; }
		#tickertape li.last { margin-right:0; padding-right:0; background:none; }

	#tickertape div.left  { float:none; position:absolute; top:0; left:0; width:35px; height:40px; background:url(../images/bg/tickertape-fade.png) repeat-y right 0; z-index:2; }
	#tickertape div.right { float:none; position:absolute; top:0; right:0; width:35px; height:40px; background:url(../images/bg/tickertape-fade.png) repeat-y left 0; z-index:2; }


/* Side navigation
---------------------------------------------------------------------------- */
#sidenav ul.level1 { padding:0; }
#sidenav li { padding-bottom:5px; list-style-type:none; font-size:14px;  }
#sidenav li.open, #sidenav li.trail { padding:20px 0 0 0; background:url(../images/bg/sidenav-border-top.png) no-repeat 0 0; }
#sidenav > ul > li.open:first-child { padding:0 !important; background:none !important; }
	#sidenav a  { padding-left:17px; text-decoration:none; color:#333; background:url(../images/icons/link_icons.gif) no-repeat 0 -196px; border:none !important; }
	#sidenav a:hover, #sidenav a:hover { color:#f00; }

	#sidenav ul.level2 { padding:5px 0 17px 0; background:url(../images/bg/sidenav-border-bottom.png) no-repeat 0 bottom; }
		#sidenav ul.level2 li { padding-left:13px; }
		#sidenav ul.level2 a  { background-position:0 -151px; }
		#sidenav ul.level2 strong a { background-position:0 -196px; }


/* Main (editor content)
---------------------------------------------------------------------------- */
#main h2.separator { padding:12px 0; }

/* Image handling */
div.image-container { float:left; padding:0 10px 12px 0; color:#EBEBEB; }
	div.image-container img { display:block; }
	div.image-container p { padding:3px 5px 2px; max-width:500px; background-color:#000; }
div.image-force-right { float:right !important; padding:0 0 12px 10px; } /* because IE6 won't take .class.class */

/* Overview element */
div.overviews { padding-top:10px; }
div.overview { width:auto; overflow:hidden; padding-bottom:20px; }
	.overview .image { float:left; width:140px; height:130px; margin-right:20px; text-align:center; overflow:hidden; }
	.overview .text  { float:left; width:340px; height:118px; overflow:hidden; }
		.overview h2 { line-height:18px; padding-bottom:4px; }
		.overview h3 { color:#666; }
		.overview p.subtext { padding:0 0 3px; }
	.overview .links { float:left; width:340px; height:15px; }
		.overview a { float:left; padding-left:10px; margin-right:20px; text-decoration:none; font-size:12px; color:#f00; background:url(../images/icons/link_icons.gif) no-repeat 0 -26px; }
		.overview a:hover, .overview a:focus { text-decoration:underline; }

/* Document */
.document { padding:0 0 15px 50px; background:url(../images/icons/pdf.gif) no-repeat 0 0; }
	.document p { padding-bottom:6px; }

/* Testimonials */
#testimonials { clear:both; padding-top:13px; background:url(../images/bg/divider.gif) repeat-x 0 0; }
.department #testimonials { background-image:url(../images/bg/dotted-hor.gif); }
	div.testimonial { margin-bottom:10px; padding:0 40px 10px 0; background:url(../images/bg/quote.gif) no-repeat right 5px; border-bottom:1px dotted #444; }
		.content div.testimonial { clear: both; }
	.home .testimonial { float:left; width:290px; margin-right:20px; border-top:none !important; }
		.testimonial img { float:left; margin-right:10px; }
		.testimonial p { height:48px; margin-bottom:3px; padding:0; font-size:13px; font-style:italic; }
			.home .testimonial p { height:96px; }


/* Ankeilers
---------------------------------------------------------------------------- */
.home .ankeiler h3 { color:#f00; }
.home .ankeiler h2 { height:22px; overflow:hidden; }
.ankeiler h2.quote { background:url(../images/bg/quote.gif) no-repeat right 0; }
	.ankeiler h2 a { text-decoration:none; color:#333; border:none !important; }
	.ankeiler h2 a:hover { color:#f00; }

div.ankeiler { width:500px; overflow:hidden; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #444; }
.home .ankeiler { float:left; width:330px; height:178px; margin-right:20px; }
.home .dept-main-even { height:auto; }
.admin .ankeiler { height:auto !important; } /* overwrites .home .ankeiler */
	.ankeiler div.image { float:left; width:195px; height:134px; margin-right:10px; text-align:center; overflow:hidden; }
		.ankeiler div.image a { border:none; }
	.home .ankeiler div.image { margin-right:10px; }
	.ankeiler .text { float:left; width:295px; max-height:134px; overflow:hidden; }
	.home .ankeiler .text { width:125px; } 
	
.news #main .ankeiler { border-bottom:none; }
	.news #main .ankeiler h2 { padding-bottom:0; font-size:14px; font-weight:bold; text-transform:none; }
	.news #main .ankeiler h3 { padding-bottom:5px; font-size:12px; font-weight:normal; color:#666; }
	
/* Ankeilers in aside */
#aside .ankeiler { width:220px; }
	#aside .ankeiler .image { float:none; width:220px; }
	#aside .ankeiler .text { float:none; width:220px; overflow:show; }

/* Ankeilers op department / person page */
.department #main div.ankeiler { float:left; width:220px; margin-right:20px; border-bottom:none; }
	.department #main div.dept-main-even { margin-right:40px; }
	.department #main .ankeiler h2 { font-size:14px; font-style:italic; }
	.department #main .ankeiler .image { width:220px; }
	


/* Buttons
---------------------------------------------------------------------------- */
div.button-padding { margin-bottom:12px; width:100%; overflow:auto; }

button::-moz-focus-inner { border:none; }
button.btn { width:auto; overflow:visible; padding:0 5px 0 0; }

button.btn { border:0; cursor:pointer; background-color:transparent; font-size:12px; font-weight:bold; line-height:normal; white-space:nowrap; border:none; }
button.btn span { background:url(../images/buttons/action.png) 0 0 no-repeat; display:inline-block; }

button.btn span { padding:0 0 0 5px; }
button.btn span span { padding:0 26px 0 0; background-position:right -64; }
button.btn span span span { background-position:0 -128px; background-repeat:repeat-x; color:#fff; height:26px; padding:5px 8px 0 5px; }

button.btn:hover span, button.btn:focus span { background-position:0 -32px; }
button.btn:hover span span, button.btn:focus span span { background-position:right -96px; }
button.btn:hover span span span, button.btn:focus span span span { background-position:0 -160px; }

a.btn { text-decoration:none; cursor:pointer; font-size:13px; font-weight: bold; line-height:normal; color:#fff; white-space:nowrap; }
a.btn, a.btn span { background:url(../images/buttons/action.png) 0 0 no-repeat; display:inline-block; }

a.btn { padding:0 0 0 5px; }
a.btn span { padding:0 26px 0 0; background-position:right -64px; }
a.btn span span { background-position:0 -128px; background-repeat:repeat-x; height:26px; padding:5px 8px 0 5px; }

a.btn:hover, a.btn:focus { background-position:0 -32px; }
a.btn:hover span, a.btn:focus span { background-position:right -96px; }
a.btn:hover span span, a.btn:focus span span { background-position:0 -160px; }


/* Department (our people) page
---------------------------------------------------------------------------- */
#people-slider-container { padding-bottom:10px; margin-bottom:20px; background:url(../images/bg/people_slider_bottom.gif) no-repeat 0 bottom; }

#people-slider { width:500px; height:118px; overflow:hidden; }
	#people-slider ul { padding:0; list-style-type:none; }
		#people-slider li { float:left; width:100px; cursor:pointer; }
			/*#people-slider a { display:block; position:relative; text-decoration:none; border:none; color:#333; }*/
				#people-slider .image { position:relative; width:100px; height:100px; text-align:center; overflow:hidden; }
					#people-slider .overlay { display:none; position:absolute; top:0; left:0; width:92px; height:92px; border:4px solid #f00; }
				#people-slider .name { width:100px; height:18px; padding:0; text-align:center; font-size:14px; }
			
			/* selected person style */
			#people-slider li.selected { background-color:#f00; }
				#people-slider li.selected .name { color:#fff; }
					#people-slider li.selected .overlay { display:block; }
			
			/* reset selected stated */
			#people-slider:hover li.selected { background-color:transparent; }
				#people-slider:hover li.selected .name { color:#000; }
					#people-slider:hover li.selected .overlay { display:none; }
			
			/* mouse-over should overrule the reset */
			#people-slider li:hover { background-color:#f00 !important; }
				#people-slider li:hover .name { color:#fff !important; }
					#people-slider li:hover .overlay { display:block !important; }

#people-slider-controls { width:500px; height:20px; overflow:hidden; background-color:#333; }
	#people-slider-controls button { width:auto; padding:1px 10px 4px; line-height:normal; text-transform:uppercase; font-size:12px; font-weight:normal; cursor:pointer; color:#fff; white-space:nowrap; border:none; }
	#people-slider-controls .prev { float:left; }
	#people-slider-controls .next { float:right; }
		#people-slider-controls button span { background:url(../images/icons/people-slider-controls.gif) no-repeat left 5px; }
		#people-slider-controls .prev span { padding-left:12px; }
		#people-slider-controls .next span { padding-right:12px; background-position:right -22px; }
		
	#people-slider-controls button:hover { background-color:#666; }
		#people-slider-controls .prev:hover span { background-position:left -49px; }
		#people-slider-controls .next:hover span { background-position:right -76px; }
	
	#people-slider-controls button.disabled { display:none !important; }
	
#person-details { padding-top:20px; min-height:200px; }


/* Aside
---------------------------------------------------------------------------- */
#aside h2.separator { padding:9px 10px 9px; margin-bottom:12px; color:#fff; background-color:#000; clear: both; }

#aside .list, #aside .eventlist { padding-bottom:10px; background:url(../images/bg/sidenav-border-bottom.png) no-repeat center bottom; }
#aside .list h2, #aside .eventlist h2 { color:#f00; }
#aside .list ul, #aside .eventlist ul { padding:0 0 10px; list-style-type:none; }
	#aside .list li { margin-bottom:5px; padding-left:13px; background:url(../images/icons/link_icons.gif) no-repeat 1px -26px; }
	#aside .list a { font-weight:bold; text-decoration:none; color:#999; border:none !important; }
	#aside .list a.ext { padding-right:15px; background:url(../images/icons/link_icons.gif) no-repeat right -87px; }
	#aside .list a:hover, #aside .list a:focus { color:#f00; background-position:right -119px; }
	
#aside .eventlist li {  }
	#aside .eventlist a { display:block; padding-bottom:3px; font-size:11px; text-transform:uppercase; text-decoration:none; color:#000; background:url(../images/bg/eventlist.gif) repeat-y -300px 0; border:none !important; }
	#aside .eventlist a:hover, #aside .eventlist a:focus { background-position:0 0; }
		#aside .eventlist span.sub { display:block; padding-bottom:2px; font-size:10px; text-transform:none; color:#858585; }
		#aside .eventlist a:hover .sub, #aside .eventlist a:focus .sub { color:#f00; }



/* Follow us */
/*
.followus li {  }
.followus li.hyves { background-position:; }
.followus li.facebook { background-position:; }
.followus li.youtube { background-position:; }
*/




/* Footer
---------------------------------------------------------------------------- */
#footer ul.followus { float:left; padding:0 0 5px 0; text-transform:uppercase; list-style-type:none; }
	#footer .followus li { float:left; padding:8px 0 2px; margin-right:20px; font-size:10px; color:#999; }
	#footer .followus a  { height:18px; padding:8px 0 2px; color:#999; text-decoration:none; background:url(../images/icons/follow_us.png) no-repeat 0 0; }
	#footer .followus a.hyves { padding-left:26px; background-position:0 -248px; }
	#footer .followus a.facebook { padding-left:29px; background-position:0 -300px; }
	#footer .followus a.youtube { padding-left:42px; background-position:0 -343px; }
	#footer .followus a:hover { color:#c00; }
	#footer .followus a.hyves:hover { background-position:0 -48px; }
	#footer .followus a.facebook:hover { background-position:0 -99px; }
	#footer .followus a.youtube:hover { background-position:0 -193px; }


#service { clear:both; height:22px; padding:8px 10px 0; background-color:#000; }
	#service .left { background:url(../images/footer_logo.gif) no-repeat 0 3px; }
		#service .left ul { padding:2px 0 0 85px; }
			#service .left li { float:left;  list-style-type:none; text-transform:uppercase; color:#fff; }
				#service .left a { margin-right:10px; padding-right:10px; font-size:10px; text-decoration:none; color:#fff; border:none; border-right:1px solid #fff; }
				#service .left li.last a { border:none; }
				#service .left a:hover { text-decoration:underline; }
	#service .right { color:#999; }