/*	IGB site stylesheet for standards compliant browsers
 *
 *	version:
 *	0.1 - 2005/11/15
 *
 *	file:
 *	/styles/igb_screen.css
 *
 *	contents:
 *	overall layout
 *	font styling
 *	colors
 *	main and subnavigation
 *
 *	author:
 *	Jeroen Visser
 *	vizi | vorm geven aan inhoud
 *	j/dot/visser/at/vizi/dot/nl
 *
 */

/*	COMMON SITEWIDE DECLARATIONS
 *
 */
html, body, div, h1, h2, p, table, th, td, a, img, form
{
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Trebuchet MS", Tahoma, Geneva, Arial, sans-serif;
}

body
{
	font: 12px/170% "Trebuchet MS", Tahoma, Geneva, Arial, sans-serif;
}

a
{

}

a:link
{
	color: #333333;
}

a:visited
{
	color: #666666;
}

a:hover, a:focus
{
	color: #005192;
}

small
{
	text-transform: uppercase;
	letter-spacing: .15em;
	line-height: 150%;
}


/*	OVERALL LAYOUT
 *
 */
#mw-cont
{
	width: 100%;
	max-width: 970px;
}

#logo
{
	width: 220px;
	height: 250px;
	float: right;
	padding: 25px 0 0;
	background: url(../images/bg_sidebar.gif) no-repeat 0 185px;
}

#main
{
  position: relative;
	margin-right: 220px;
}

#title
{
	width: 33%;
	float: left;
	margin: 45px 0 0;
	background: url(../images/bg_h1.gif) no-repeat 100% 0;
}

#title h1
{
	padding: 0 15px 0 21px;
	color: #005192;
	font-size: 200%;
	font-weight: normal;
	line-height: 110%;
}

h2
{
	margin: 0.9em 0 0.2em;
	color: #005192;
	font-size: 140%;
	font-weight: normal;
	line-height: 110%;
}

.lf
{
	clear: left;
	border-top: 1px solid #ffffff;
}


/*	SITE NAVIGATION
 *
 */
#nav-site
{
	height: 100px;
	width:600px;
	background: #ffffff;
}

#form-search
{
	height: 100px;
	display: block;
	position: relative;
	font-size: 80%;
}

#form-search ul
{
	width: 600px;
	position: absolute;
	bottom:0;
	left: 0;
	margin: 0;
	padding: 0 0 11px 21px;
}

#form-search li
{
	display: block;
	float: left;
	margin: 0 31px 0 0;
	padding: 0;
	list-style: none;
}

#form-search label, #form-search a
{
	color: #666666;
	text-transform: uppercase;
	letter-spacing: .15em;
}

#form-search a:link, #form-search a:visited
{
	color: #666666;
	text-decoration: none;
}

#form-search a:hover, #form-search a:focus
{
	color: #005192;
	text-decoration: underline;
}

#q
{
	width: 74px;
	height: 1.75em;
	border: 0;
	padding: 2px 6px 0 4px;
	vertical-align: middle;
	background: url(../images/bg_input_search.gif) no-repeat 0 2px;
	font-size: 9px;
	line-height: 100%;
	color: #333333;
}

#search-go
{
	vertical-align: middle;
}


#form-search .lang-nl a
{
	padding: 2px 0 3px 28px;
	background-image: url(../images/nl/langswitch.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#form-search .lang-en a
{
	padding: 2px 0 3px 28px;
	background-image: url(../images/en/langswitch.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#form-search .lang-nl a:hover,
#form-search .lang-nl a:focus,
#form-search .lang-en a:hover,
#form-search .lang-en a:focus
{
	background-position: 0 -50px;
}




/*	MAIN NAVIGATION + MAIN HIGHLIGHTS
 *
 */
#nav-main
{
	width: 100%;
	display: block;
	position: relative;
	margin: 0;
	border: 0;
	padding: 0;
}

#nav-main li
{
	width: 33%;
	display: block;
	float: left;
	margin: 0;
	border: 0;
	padding: 0;
	background-color: #ffffff;
	background-position: 0 0;
	background-repeat: no-repeat;
	list-style: none;
}

#nav-main li#nav-oe 
{
	width: 34%;
}

#nav-main li div
{
	background-repeat: no-repeat;
	background-position: 0 0;
}

#nav-main li a
{
	display: block;
	padding: 61px 0 14px;
	border: 0;
	border-right: 1px solid #ffffff;
	background-image: url(../images/bg_a_nav_main.gif);
}

#nav-main li a:link, #nav-main li a:visited
{
	background-position: 100% -50px;
	color: #777777;
	text-decoration: none;
}

#nav-main li a:hover, #nav-main li a:focus
{
	background-position: 100% -650px;
	color: #005192;
	text-decoration: none;
}

/* Highlight selected menu items */
#nav-ai a.active:link, #nav-ai a.active:visited,
#nav-oe a.active:link, #nav-oe a.active:visited,
#nav-pp a.active:link, #nav-pp a.active:visited
{
	background-position: 100% -1250px;
	text-decoration: none;
}

/* Motion steps for menu animation */
#nav-main .motion-step-0  { background-position:      0 0; }
#nav-main .motion-step-1  { background-position:   -1px 0; }
#nav-main .motion-step-2  { background-position:   -2px 0; }
#nav-main .motion-step-3  { background-position:   -5px 0; }
#nav-main .motion-step-4  { background-position:   -8px 0; }
#nav-main .motion-step-5  { background-position:  -18px 0; }
#nav-main .motion-step-6  { background-position:  -31px 0; }
#nav-main .motion-step-7  { background-position:  -44px 0; }
#nav-main .motion-step-8  { background-position:  -57px 0; }
#nav-main .motion-step-9  { background-position:  -70px 0; }
#nav-main .motion-step-10 { background-position:  -83px 0; }
#nav-main .motion-step-11 { background-position:  -96px 0; }
#nav-main .motion-step-12 { background-position: -109px 0; }
#nav-main .motion-step-13 { background-position: -122px 0; }
#nav-main .motion-step-14 { background-position: -135px 0; }
#nav-main .motion-step-15 { background-position: -148px 0; }
#nav-main .motion-step-16 { background-position: -161px 0; }
#nav-main .motion-step-17 { background-position: -174px 0; }
#nav-main .motion-step-18 { background-position: -187px 0; }
#nav-main .motion-step-19 { background-position: -200px 0; }
#nav-main .motion-step-20 { background-position: -213px 0; }
#nav-main .motion-step-21 { background-position: -226px 0; }
#nav-main .motion-step-22 { background-position: -239px 0; }
#nav-main .motion-step-23 { background-position: -247px 0; }
#nav-main .motion-step-24 { background-position: -250px 0; }
#nav-main .motion-step-25 { background-position: -253px 0; }
#nav-main .motion-step-26 { background-position: -254px 0; }
#nav-main .motion-step-27 { background-position: -255px 0; }


/*	SUB NAVIGATION + SUB NAV HIGHLIGHTS
 *
 */
#nav-main #nav-sub
{
	display: block;
	width: 220px;
	position: absolute;
	left: 100%;
	top: 95px;
	z-index: 10;
	margin: 0;
	border: 0;
	padding: 0;
}

#nav-main #nav-sub li
{
	width: auto;
	height: auto;
	display: block;
	float: none;
	padding: 0 30px 1px 0;
	background: url(../images/bg_li_nav_sub.gif) no-repeat 0 100%;
}

#nav-main #nav-sub li.active
{
	background: url(../images/bg_li_nav_sub.gif) no-repeat -250px 100%;
}

#nav-main #nav-sub li a
{
	display: block;
	margin: 0;
	padding: 11px 16px;
	border: 0;
	background-image: url(../images/bg_a_nav_sub.gif);
	background-repeat: no-repeat;
	font-size: 85%;
	text-transform: uppercase;
	letter-spacing: .15em;
	line-height: 120%;
}
#nav-main #nav-pp #nav-sub li a
{
	background-image: url(../images/bg_a_nav_sub_pp.gif);
}

#nav-main #nav-sub li a:link, #nav-main #nav-sub li a:visited
{
	background-position: 100% 0;
	color: #555555;
}
#nav-main #nav-sub li a:hover, #nav-main #nav-sub li a:focus
{
	background-position: 100% -150px;
	color: #005192;
}
#nav-main #nav-sub li.active a:link, #nav-main #nav-sub li.active a:visited,
#nav-main #nav-sub li.active a:hover, #nav-main #nav-sub li.active a:focus
{
	background-position: 100% -300px;
	color: #005192;
	font-weight: bold;
}


/*	SUB SUB NAVIGATION + SUB SUB NAV HIGHLIGHTS
 *
 */
#nav-main #nav-sub li.active ul
{
	display: block;
	width: 190px;
	margin: -6px 0 0 0;
	border: 0;
	padding: 0 0 6px 0;
}

#nav-main #nav-sub li.active li
{
	width: auto;
	margin: 0;
	padding: 3px 15px 4px 27px;
	background: none;
}

#nav-main #nav-sub li li.active
{
	background: url(../images/bg_li_nav_sel.gif) no-repeat 15px 5px;
}

#nav-main #nav-sub li.active li a,
#nav-main #nav-pp #nav-sub li.active li a
{
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	font-weight: normal;
}

#nav-main #nav-sub li.active li a:link, #nav-main #nav-sub li.active li a:visited
{
	color: #555555;
}

#nav-main #nav-sub li.active li a:hover, #nav-main #nav-sub li.active li a:focus
{
	color: #005192;
}

#nav-main #nav-sub li li.active a:link, #nav-main #nav-sub li li.active a:visited,
#nav-main #nav-sub li li.active a:hover, #nav-main #nav-sub li li.active a:focus
{
	color: #005192;
	font-weight: bold;
}



/*	CONTENT
 *
 */
#content
{
	margin-top: 53px;
	margin-left: 33%;
	padding: 0 33px 21px 21px;
	font-size: 100%;
}

#content p
{
	font-size: 100%;
}

#content .lead p
{
	margin-bottom: 25px;
	font-size: 120%;
	line-height: 170%;
	color: #555555;
}

#content ol
{
	margin: .3em 0 0 0;
	padding: 0 0 0 1.5em;
}

#content ul
{
	margin: .3em 0 0 0;
	padding: 0;
}

#content li
{
	margin: 0 0 .3em 0;
	padding: 0;
}

#content ul li
{
	padding: 0 0 0 1.5em;
	background: url(../images/bg_li_nav_sel.gif) no-repeat .25em .5em;
	list-style: none;
}

#content .img-box
{
  clear: left;
	margin: 15px 0;
	background: #f8f8f8;
}

#content .img-box img.flt-img
{
	float: left;
  margin-right: 15px;
}

#content .img-box img.flt-r-img
{
	float: right;
  margin-left: 15px;
}


#content .img-caption
{
	display: block;
	margin: -12px 0 15px 0;
}

#content p.footnote
{
	margin: 1em 0 0 0;
	border-top: 1px solid #aaaaaa;
	padding: .4em 0 0 0;
	color: #666666;
}



/*	CONTENT: PROJECT OVERVIEW
 *
 */
#content .project-excerpt
{
	padding-bottom: 1em;
	margin-bottom: 2em;
	background: url(../images/bg_project_off.gif) repeat-x 0 100%;
}
#content .project-excerpt-over
{
	background: url(../images/bg_project_on.gif) repeat-x 0 100%;
	cursor: pointer;
}
#content .project-excerpt h2 a
{
	display: block;
	float: left;
	padding-right: 20px;
	background-image: url(../images/bg_a_project_title.gif);
	background-repeat: no-repeat;
	background-position: 100% 3px;
	color: #005192;
	text-decoration: none;
}
#content .project-excerpt h2 a:hover,
#content .project-excerpt h2 a:focus,
#content .project-excerpt-over h2 a
{
	background-position: 100% -47px;
}

#content .project-excerpt p
{
	display: block;
	clear: left;
}



/*	FOOTER
 *
 */
#footer
{
	width: 100%;
	background: url(../images/bg_footer.gif) repeat-x top right;
}

#footer div
{
	margin-right: 220px;
}

#footer p
{
	margin: 0 0 0 33%;
	padding: 20px 0 20px 21px;
	font-size: 85%;
	text-transform: uppercase;
	letter-spacing: .15em;
}

#footer p#toplink
{
	width: 220px;
	float: right;
	margin: 0;
	padding: 22px 0 0;
	background: url(../images/bg_sidebar.gif) no-repeat top left;
	font-size: 100%;
	text-transform: none;
	letter-spacing: 0;
}

#footer p#toplink a
{
	display: block;
	float: right;
	margin: 0 46px 0;
	padding: 0 17px 1px 0;
	text-decoration: none;
	line-height: 100%;
}

#footer p#toplink a:link, #footer p#toplink a:visited
{
	background: url(../images/arrow_up_off.gif) no-repeat bottom right;
}

#footer p#toplink a:hover, #footer p#toplink a:focus
{
	background: url(../images/arrow_up_on.gif) no-repeat bottom right;
}

#footer p#toplink a span
{
	text-decoration: underline;
}




/*	SPECIALS: HOMEPAGE
 *
 */
.home #logo
{
	background: url(../images/bg_sidebar.gif) no-repeat 0 235px;
}

.home #nav-main a
{
	padding: 111px 0 0;
}

.home #nav-main a:link, .home #nav-main a:visited
{
	background-position: 100% 0;
	color: #777777;
	text-decoration: none;
}

.home #nav-main a:hover, .home #nav-main a:focus
{
	background-position: 100% -600px;
	color: #005192;
	text-decoration: none;
}

.home #nav-main a span
{
	height: 9.5em;
	display: block;
	padding: 25px 21px 10px;
	font-size: 120%;
	line-height: 170%;
}



/*	FEATURES ON HOMEPAGE
 *
 */
#feature
{
	height: 225px;
	clear: left;
	position: relative;
	margin-bottom: 25px;
	border-right: 1px solid #ffffff;
	background: #EEE;
	font-size: 100%;
}

#ft-heading,
.ft-container
{
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

#ft-heading
{
	z-index: 1800;
}
#ft-heading span
{
	display: block;
	margin: 0 21px;
	padding: 11px 0 12px;
	background: url(../images/bg_footer.gif) repeat-x 100% 100%;
}

/* Controls */
#ft-heading strong
{
	display: block;
	width: 13px;
	height: 13px;
	position: absolute;
	top: 9px;
	cursor: pointer;
}
#ft-heading #ft-nav-prev
{
	right: 59px;
	background: url(../images/arrow_feature_prev_off.gif) no-repeat;
	z-index: 1900;
}
#ft-heading #ft-nav-prev.over
{
	background: url(../images/arrow_feature_prev_on.gif) no-repeat;
}
#ft-heading #ft-nav-next
{
	right: 21px;
	z-index: 1950;
	background: url(../images/arrow_feature_next_off.gif) no-repeat;
}
#ft-heading #ft-nav-next.over
{
	background: url(../images/arrow_feature_next_on.gif) no-repeat;
}
#ft-heading #ft-slideshow,
#ft-heading #ft-slideshow.pause
{
	right: 40px;
	z-index: 2000;
	background: url(../images/feature_play_off.gif) no-repeat;
}
#ft-heading #ft-slideshow.pauseover
{
	background: url(../images/feature_play_on.gif) no-repeat;
}
#ft-heading #ft-slideshow.play
{
	background: url(../images/feature_pause_off.gif) no-repeat;
}
#ft-heading #ft-slideshow.playover
{
	background: url(../images/feature_pause_on.gif) no-repeat;
}


/* Feature image and contents */
.ft-img
{
	background-color: #FFF;
	background-position: 0 50%;
	background-repeat: no-repeat;
}

.ft-img .ft-img-inner
{
	padding-bottom: 50px;
	background: url(../images/bg_feature_image_inner.gif) repeat-x 0 100%;
}

.ft-txt
{
	width: 67%;
	margin-left:33%;
	font-size: 100%;
}

.ft-container .ft-txt
{
	height: 175px;
	background: #EEE;
}


.ft-txt .ft-link
{
	height: 3em;
	display: block;
	width: 33%;
	position: absolute;
	bottom: 50px;
	right: 0;
	z-index: 200;
	border-top: 1px solid #FFF;
	margin: 0;
	padding: 0;
	background: #EEE;
	font-size: 100%;
}

.ft-txt h2, .ft-txt p
{
	padding: 0 21px;
	font-size: 120%;
	line-height: 150%;
}
.ft-txt h2
{
	margin-top: 0;
	padding-top: 45px;
	font-weight: bold;
}

.ft-txt a
{
	display: block;
	margin: 1px 21px 0;
	padding: 10px 30px 6px 0;
	text-decoration: none;
	line-height: 100%;
}

.ft-txt a:link, .ft-txt a:visited
{
	background: url(../images/arrow_medium_off.gif) no-repeat 100% 10px;
}

.ft-txt a:hover, .ft-txt a:focus
{
	background: url(../images/arrow_medium_on.gif) no-repeat 100% 10px;
}

.ft-txt a span
{
	text-decoration: underline;
}




/*	Address on homepage */
#infobox
{
	width: 150px;
	position: absolute;
	left: 100%;
	top: 0;
	padding: 0 0 0 59px;
}

#infobox h2, #infobox address
{
	margin-top: 0;
	padding: 5px 0 0 0;
	line-height: 150%;
}

#infobox address span
{
	color: #005192;
	font-weight: bold;
}




/*	REFERENCES ON HOMEPAGE
 *
 */
#references
{
  width: 150px;
  position: absolute;
  left: 100%;
  top: 256px;
  padding: 0 0 0 59px;
}
#references h2
{
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 120%;
  line-height: 170%;
}
#references ul
{
  display: block;
  width: 100px;
  height: 50px;
  position: relative;
  margin: 0;
}
#references li
{
  display: block;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
}
#references .rf-link a
{
	display: block;
  width: 90px;
	margin: 1px 0 0;
	padding: 5px 20px 6px 0;
	text-decoration: none;
	line-height: 100%;
}
#references .rf-link a:link, #references .rf-link a:visited
{
	background: url(../images/arrow_medium_off.gif) no-repeat 100% 5px;
  color: #777;
}

#references .rf-link a:hover, #references .rf-link a:focus
{
	background: url(../images/arrow_medium_on.gif) no-repeat 100% 5px;
  color: #005192;
}



/*	SPECIALS: PROJECT OVERVIEW PAGES
 *
 */
p.morelink
{
	display: block;
	margin: .2em 0;
	height: 2em;
	font-size: 100%;
}

p.morelink a
{
	float: right;
	display: block;
	margin: 0 5px 5px 0;
	padding: 0 17px 1px 2px;
	text-decoration: none;
	font-size: 100%;
	line-height: 100%;
}

p.morelink a:link, p.morelink a:visited
{
	background: url(../images/arrow_medium_off.gif) no-repeat bottom right;
}

p.morelink a:hover, p.morelink a:focus
{
	background: url(../images/arrow_medium_on.gif) no-repeat bottom right;
}

p.morelink a span
{
	text-decoration: underline;
}



/*	SPECIALS: ADDRESS & DIRECTIONS + CONTACT US
 *
 */
address
{
	font-style: normal;
}

address b
{
	letter-spacing: .15em;
	line-height: 120%;
}

#content address b
{
	display: block;
	margin: -14px 0 2px 0;
}

#content address span, #contact-form label
{
	display: block;
	clear: left;
	width: 11em;
	margin: 0 0 0 -14em;
	padding: 8px 1.5em 4px 0;
	background: url(../images/bg_li_nav_sel.gif) no-repeat 100% 10px;
	color: #005192;
	font-size: 85%;
	text-transform: uppercase;
	letter-spacing: .15em;
	line-height: 100%;
	text-align: right;
}

#contact-form
{
	margin: 10px 0;
}

#contact-form div
{
	position: relative;
	margin: -15px 0 10px 0;
}

#contact-form input, #contact-form textarea
{
	vertical-align: top;
	width: 280px;
}

#contact-form b
{
	display: block;
	height: 1.2em;
	position: absolute;
	left: 290px;
	top: .2em;
	line-height: 1.3em;
}
#contact-form b.required, b.sample
{
	color: #C00;
}
#contact-form b.ok
{
	padding-left: 1.8em;
	background: url(../images/icon_input_ok.gif) no-repeat;
	color: #0A0;
}
#contact-form b.notok
{
	padding-left: 1.8em;
	background: url(../images/icon_input_not_ok.gif) no-repeat;
	color: #C33;
	font-weight: normal;
}

#contact-form input#contact-submit
{
	margin: 10px 0;
	width: auto;
}


/*	SPECIALS: OUR REFERENCES
 *
 */
p.reference
{
	min-height: 5em;
	position: relative;
	padding-bottom: 1em;
	padding-right: 220px;
	margin-bottom: 2em;
	background: url(../images/bg_project_off.gif) repeat-x 0 100%;	
}
p.reference a
{
}
p.reference img
{
	display: block;
	position: absolute;
	right: 0;
	bottom: 1px;	
}



/*	SPECIALS: IE5/MAC BUGFIXING
 *
 *  \*//*/
#nav-main li#nav-oe, #ft-link-all
{
	width: 33.9%;
}

#ft-txt
{
	width: 66.9%;
}

#ft-txt #ft-link-proj, #ft-txt #ft-link-all
{
	width: 50%;
}

/*	END OF IE5/MAC BUGFIXING
 */