/*
Author:			E3-Webdesign
Modified:		03-Mar-2006	- First release.
				20-May-2006 - Z-indexing of class ".column" and ".backgroundimage" corrected.
							  The box-overs as used in "Links.htm" and "Zusterinstituten.htm"
							  are now displayed on top of all other contents.
				04-Sep-2006 - Class ".heading4" introduced as a true inline element for use in the news
							  items on the home page.
				14-Nov-2006 - In body.contents hack for IE6 position:fixed introduced.
							  Selection tabs on top of page extended with drop down menu.
				11-Jan-2007 - Various mods (improvements, corrections, code optimizations).
				02-Sep-2007	- Style added for the new application form link in the agenda.
Notes:			-
Known bugs:		-
Suggestions:	-
*/

				/*--- General ---*/
.container			{ _overflow:hidden;   					/* Half of hack to have IE6 render position:fixed */
															/* Everything inside this container, and outside the */
															/* div.contents, is positioned fixed in IE6 (when the */
															/* _position:absolute property is set) */
                      margin:0; padding:0;
                    }
.contents  			{ _height:100%; _overflow:auto;			/* Half of hack to have IE6 render position:fixed */
					  padding:3.5em 2em 0.5em 2em;
					  scrolling-y:yes;
					  background:url('../Images/ContentsBackground.png') #ffffff top left no-repeat;
					  										/* Required here for IE, since in IE an iframe cannot */
					  										/* have a background image */
					  background-attachment:fixed;
                    }
body				{ behavior:url(csshover.htc);			/* Emulate :hover pseudo class in IE6 */
					}
body, h3, h4, table	{ font-family:verdana,arial,times,serif; font-size:10pt;
					}
body.sidebar		{ background:url('../Images/SidebarBackground.png') #9bcdff top left no-repeat;
					}
body.footer			{ padding:0; margin:0; 
					  font-size:8pt;
					  background-color:transparent;
					}
body.popup          { background-color:#fdface;	/*#f0f0f0*/
                      margin:1em;
                    }

a					{ text-decoration:underline; color:yellow; /*#1122ff;*/
					  -moz-outline-style:none;
					}
a:link				{ color:#005077;
					}
a:visited			{ color:#000000;
					}
a:hover, a:active	{ color:#c40005;
					}
a:active			{ text-decoration:none;
					}             
ul.basic            { display:block;
					  margin-top:0; margin-bottom:0; margin-left:0.2em;
					  list-style-type:none;					/* Kill the standard bullet in all browsers, except IE6 */
					  padding-left:1em; text-indent:-1.2em;
					  list-style-position:inside;
					  text-align:left;						/* Kill the general text-align:justify property */
					  _text-indent:-1.3em;					/* Define bullet type for IE6, where */
					  _padding-left:1em;					/* the li:before style does not work */
					  _list-style-image: url('../Images/BulletTriangleBlue.bmp');
          			}
ul.basic li			{ /*-top:0.2em; padding-bottom:0.2em;*/	/*25-12-2006*/
					}
ul.basic li:before	{ content:"\025e2\0020"; font-size:1em; color:#244997;	/* Works only in FF */
					}

				/*--- Selection tabs on top of page (drop-down menu) ---*/
					/* General */
#tabs				{ display:block;
					  top:60px;
					  position:fixed;
					  _position:absolute;					/* Emulate position:fixed in IE6 */
					  width:100%;							/* Have menu bar extend across the entire (window) width */
					  float:left;							/* Support menu bar width:100% in FF1.5 */
					  z-index:100;
					  background-color:#003366;				/* Required here to display the tab menu bar page wide */
					  line-height:1.6em; height:1.6em;
					}
#tabs.subs			{ position:fixed; 
					  _position:absolute;					/* Emulate position:fixed in IE6 */
					  left:0px; top:0px;
					  background-color:transparent;			/* Have the complete sub-menu bar displayed transparent */
					}
#tabs a				{ 										/* Generic definition for all a elements in the menu */
					  display:block;
					  font-size:1em; font-weight:bold; color:#ffffff;
					  margin:0;
					  width:8em; _width:9em; 				/* Set the default for menu items at all levels */
					  										/* This shall fit all menu item texts */
					  padding-left:1em; padding-right:1em; text-align:center;	/* Set the default for menu items at all levels */
					  text-decoration:none;
					  -moz-outline-style:none;				/* Kill the box outline of active hyperlink (only FF1.5) */
					}
#tabs ul			{ list-style:none; margin:0px; padding:0px;	/* Kill the default ul properties */
					  float:left;
					  border:0px dashed red;;
					}
#tabs ul.sub a		{ color:#000066; font-weight:normal;
					}
#tabs ul.sub		{ margin-top:0px;
					  border-top:2px solid #ffffff;
					  border-bottom:5px solid #003366;
					  background-color:#ccd4dc !important;		/* !important is required to overrule the ul:hover property in IE6 */
					}
#tabs ul.hidden,
#tabs ul.hidden:hover
					{ border:none;
					  background-color:transparent !important;	/* !important is required to overrule the ul:hover property in IE6 */
					}
#tabs li 			{ position:relative;
					}

					/* Define and style the first level menu items */
#tabs ul:hover 		{ background-color:#ccd4dc;
					}
#tabs ul:hover ul	{ background-color:#ffffff;				/* To camouflage the 1px gap between the first two li items */
															/* This gap exists only in FF1.5, for unknown reasons */
					}
#tabs ul:hover a	{ color:#003366;
					  cursor:default;
					}

					/* Define and style the second level menu items */
#tabs ul ul 		{ position:absolute; z-index:2;
					  width:100%;							/* Have the same width as the containing ul element */
					  border-top:2px solid #ffffff;
					  border-bottom:8px solid #003366;
					}
#tabs ul ul a		{ 										/* Other properties are inherited from the parent's definition */
       				  font-weight:normal;
					  color:#000066;
					  background-color:#e8e8e8;
					  /*width:140px;*/						/* Adapt the width of the menu items at this level */
					}
#tabs ul ul a:hover	{ color:#003366;
					  background-color:#ccd4dc;
					  cursor:pointer;
					}
#tabs ul ul a:active{ background-color:#c0c0c0;
					}
#tabs ul ul li		{ border-bottom:1px solid #ffffff;
					  margin-top:0px; margin-bottom:0px;
					  padding-top:0px; padding-bottom:0px;
					}

					/* Display the next level menu (if applicable) only when hovering a menu element */
div#tabs ul ul		{ display:none;
					}
div#tabs ul li:hover ul
					{ display:block;
					}
div.tab1 ul a#tab1,								/* Highlight active tab based on div@class attribute. */
div.tab2 ul a#tab2,								/* This requires the div class in the PageFrame.htm page */
div.tab3 ul a#tab3,								/* to be dynamically altered on the basis of the selected tab. */
div.tab4 ul a#tab4,
div.tab5 ul a#tab5
					{ background-color:#ffffff;
					  color:#000066;
					}

				/*--- Selection Menu in Sidebar ---*/
.menu				{ position:absolute; bottom:15%; width:200px;
					}
.menu a			 	{ display:block; position:relative; margin:1px 0px 0px 0px; padding-left:2.5em;
					  border-bottom:none;
					  height:28px; line-height:28px; width:100%;	/* Line-height is defined here to get the vertical */
			  		  font-weight:bold; 							/* alignment of the text correct. */
					  text-align:left; vertical-align:middle;
			  		  -moz-outline-style:none;
			  		  background-image:url('../Images/MenuItem.gif');
					  text-decoration:none; color:#000066;
					}
.menu a:link,
.menu a:visited 	{ color:#000066;
					}
.menu a:hover 		{ background-image:url('../Images/MenuItemHover.gif');
					}
.menu a:active		{ color:#000066; text-decoration:none; border-bottom:none;
					}
.menu a span		{ display:none;
					  position:absolute; left:5px; top:-4px; padding:0px;
					  border-top:1px solid #dddddd; border-left:1px solid #dddddd;
					  border-right:1px solid #444444; border-bottom:1px solid #444444;
					  width:20px; height:28px;
					  background-color:#338899;
					  z-index:2;
					}
.menu a:active span,
.menu a:focus span	{ display:block;
					  opacity:0.5; filter:alpha(opacity=50);
					}
div.menu1 .menu a#menu1,								/* Highlight active menu item based on div@class attribute. */
div.menu2 .menu a#menu2,								/* This requires the div class in the Topbar.htm page */
div.menu3 .menu a#menu3,								/* to be dynamically altered on the basis of the selected item. */
div.menu4 .menu a#menu4,
div.menu5 .menu a#menu5
					{ background-image:url('../Images/MenuItemHover.gif');
					}									/* Taking the same background image as for the */
														/* a:hover pseudo-class prevents the link to */
														/* be highlighted on hovering while already selected. */
div.menu1 .menu a#menu1 span,
div.menu2 .menu a#menu2 span,
div.menu3 .menu a#menu3 span,
div.menu4 .menu a#menu4 span,
div.menu5 .menu a#menu5 span
					{ display:block;
					  opacity:1; filter:alpha(opacity=100);
					}

				/*--- Contents iFrame ---*/
iframe#contentFrame	{ position:absolute; top:81px;
					  width:100%;
					  height:555px;						/* Set initial height of iFrame, to prevent annoying flickering */
					  									/* when refreshing the contents page. Height is set dynamically. */
					  z-index:10;
					  /*_z-index:-1;*/
					  border:none;
					  background:url('../Images/ContentsBackground.png') #ffffff top left no-repeat;
					}

				/*--- Contents area ---*/
.column				{ display:block; position:relative;
					  z-index:2;						/* Must be higher than z-index of class .backgroundimage */
					  _z-index:-1;						/* Hack to solve IE6 z-index anomolies */
					  float:left; left:0px; top:0px;
					  margin-right:1em; padding:0em 1em 1em 0em;
					  text-align:justify;
					  -moz-box-sizing:border-box;
					  /* Have IE display the opaque .png image (Mozilla ignores MS image filters) */
					  /* Nice idea, but how to position this image in the lower right hand corner? */
					  /* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Images/TranslucentBackground70Small.png',sizingMethod=crop);*/
					}
/*
.column[class]		{*/ /* Have Mozilla display the opaque .png image (IE ignores styles with [attributes]) */
/*					  background-image:url(../Images/TranslucentBackground70Small.png);
					  background-position: bottom right; background-repeat:no-repeat;
					}
*/
h4					{ display:inline; font-size:1em; font-weight:bold; color:#000066;
					}
.heading4			{ display:inline; font-size:1em; font-weight:bold; color:#000066;
					}									/* Alternative for h4 when a true inline element is required. */
h5					{ display:inline; font-size:1.01em; font-weight:bold; color:#000066;
					}  
span.firstcap		{ float:left; position:relative;
					  left:-10px;
					  margin-right:-10px; _margin-right:-12px;	/* Use of em gives dissimilar results in FF1.5
					  margin-top:-2px;							/* compared to IE6. */
					  font-weight:bold; color:#000066; font-size:2.75em; line-height:0.8em;
					  font-family:georgia,'times new roman',arial,serif;
					}

				/* Event Table (Agenda) */
.agenda			 	{ margin-left:-10px;					/* Compensate for the overall cell spacing of the table */
					  width:100%;
					  vertical-align:top;
					  font-size:0.85em;
					}
.agenda.proceeding	{ width:100%;
					}
.agenda .inset		{ border-collapse:collapse;
					  font-size:1em;
					}
.agenda .entry		{ color:#000000;
					}
.agenda .header		{ font-weight:bold; color:#000066; text-align:center;
					  padding-top:0.3em	!important;			/* Priority above same definition in .cell */
					  padding-bottom:0.3em !important;		/* Priority above same definition in .cell */
					  border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa;
					  background-color:#ffffcc;
					}
.agenda .cell		{ vertical-align:top; padding-top:0; padding-bottom:0.3em;
					}
.agenda .cell.event	{ text-align:justify;
					  padding-left:0.5em;
					}
.agenda .cell.date	{ width:10em;
					  font-weight:bold;
					  border-bottom:1px solid #aaaaaa;
					}
.agenda .cell.logo	{ width:60px;
					  text-align:center;
					  padding-right:0px;
					}
.agenda .cell.info	{ width:160px; 							/* Limiting of cell width does not work, text length determines the width */
					  white-space:nowrap;					/* Prevent text wrapping at spaces and hyphens */
					  border-bottom:1px solid #aaaaaa;
					}
.agenda .cell.proceeding
					{ width:250px;
					}
.agenda span.year	{ font-style:italic; margin-right:0.8em;
					}
.agenda span.venue	{ display:block; font-style:italic; font-weight:normal; margin-top:0.6em;
					}
.agenda img			{ border:none; top:0px;
					}
.agenda h6			{ display:inline; font-size:1em; font-weight:bold; color:#000066;
					  font-family:verdana,arial,times;
					  text-align:left;
					}
.agenda a.www,
.agenda a.formlink	{ display:block; position:relative;
					  text-decoration:none;
					  cursor:pointer;
					  float:left;							/* Make the hyperlink area take the length of the text string */
					}
.agenda a.infolink	{ position:relative;
					}
.agenda a.formlink	{ position:relative;
					}
.agenda a.proclink	{ cursor:pointer; text-decoration:none;
					  line-height:1.0em; _line-height:1.2em;
					}
.agenda a.proclink:hover
					{ text-decoration:underline;
					}
.agenda a.proclink .author
					{ display:block; 
					  color:#666666; text-indent:0em; font-style:italic; text-decoration:none;
					}
.agenda ul.basic li	{ padding:0; 							/* Kill the padding of the standard ul.basic style */
					}
.agenda span.wwwbullet	
				    { display:block; position:absolute;
					  top:2px; left:-2px;
					  width:12px; height:12px;
					  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Images/www-12.png');
					}
.agenda span.wwwbullet[class]
					{ /* Have Mozilla display the opaque .png image (IE ignores styles with [attributes]) */
			  		  background-image:url('../Images/www-12.png');
			  		}
.agenda a.www:hover span.wwwbullet
					{ top:0px; left:-3px;
					  width:16px; height:16px;
					  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Images/www-16.png');
					}
.agenda a.www:hover span.wwwbullet[class]
					{ /* Have Mozilla display the opaque .png image (IE ignores styles with [attributes]) */
			  		  background-image:url('../Images/www-16.png');
			  		}
.agenda span.www	{ display:block; position:relative;
					  text-indent:1.4em;
					  _text-indent:1em;						/* Hack to correct IE6 on text indent */
					}
.agenda span.formbullet
				    { display:block; position:absolute;
					  top:0px; left:-2px;
					  width:14px; height:14px;
					  _width:16px; _height:16px;
					  background:url('../Images/Form-14.gif') no-repeat;
					}
.agenda a.formlink:hover span.formbullet
					{ top:-1px; left:-2px;
					  width:16px; height:16px;
					  background:url('../Images/Form-16.gif') no-repeat;
			  		}
.agenda span.form	{ display:block; position:relative;
					  text-indent:1.4em;
					  _text-indent:1em;						/* Hack to correct IE6 on text indent */
					}
.compass			{ display:block;
					  position:absolute;
			  		  bottom:-22px; right:-25px;
			  		  z-index:2;							/* Must be lower than z-index of class .column */
			  		  _z-index:-2;							/* Hack to solve IE6 z-index anomolies */
			  		  width:60px; height:40px;
			  		  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Images/CompassRose_small.png');
					}
.compass[class]     { /* Have Mozilla display the opaque .png image (IE ignores styles with [attributes]) */
			  		  background-image:url('Images/CompassRose_small.png');
					}
					
				/*--- News Page and Sub-pages---*/
.newsitem			{ font-family:verdana,times,univers,serif; font-size:9pt;
					  padding-bottom:1em; padding-top:1.5em; line-height:1.4em;
					  width:80%;
					}
.newsitem .header	{ color:#000066; font-family:arial,times; font-weight:bold; font-size:1.2em;
					  line-height:1.3em;
					}
.newsitem .date		{ color:#666666; font-family:arial,times; font-size:0.9em; font-style:italic;
					  line-height:1.3em;
					  /*margin-bottom:0.7em;*/
					}
.newsitem .inset	{ float:right;
					  padding:0em 0em 0em 0.8em;
					}
.newsitem .footer	{ display:block;
					  font-family:arial,times; color:#c00000; font-size:0.9em; line-height:1em;
					  text-align:right; text-decoration:none;
					  padding-right:0.3em; padding-bottom:0.2em;
					  margin-top:0.3em; margin-bottom:0em;
					  border-bottom:1px dotted #c00000; border-right:1px dotted #c00000;
					}
.newsitem#pagetop	{ position:absolute;
					  top:-10em;
					}

                /*--- Footer Area ---*/
.footerframe        { position:fixed;
					  _position:absolute;						/* Part of hack to have IE render position:fixed */
					  margin-top:0px;
					  height:1.8em; z-index:10;
					  bottom:0px;
			        }
.footerframe#contents
                    { width:100%;
                    }
.footerframe#sidebar
                    { right:0px; width:40%;
			        }
.footer				{ display:block; position:relative;
					  text-align:center;

                      margin-top:5px;
                    }
.footer .left		{ border-top:1px solid #dddddd;
					}
.footer .left a,
.footer .left a:link,
.footer .left a:visited,
.footer .left a:active
					{ color:#dddddd; text-decoration:none; border-bottom:none;
					}
.footer .left a:hover
					{ color:#a3c3bb;	/*#001166;*/
					}
.footer .right a	{ margin-left:1em; margin-right:1em; 
					}
.footer .right		{ min-width:30em;
					  margin-right:20px;
					  border-top:1px solid #666666;
					}
.footer .right a,
.footer .right a:link,
.footer .right a:visited,
.footer .right a:active
					{ color:#666666; text-decoration:none; border-bottom:none;
					}
.footer .right a:hover
					{ color:#000000;
                    }

         		/*--- Background image ---*/
.backgroundimage	{ display:block; 
					  position:fixed; _position:absolute;
					  right:0px; bottom:10px;
					  background-repeat:no-repeat;
					  width:130px; height:85px;
					  /* Have IE display the opaque .png image (Mozilla ignores MS image filters) */
					  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='Images/CompassRose_medium.png');
					}

.backgroundimage[class]
					{ /* Have Mozilla display the opaque .png image (IE ignores styles with [attributes]) */
					  background-image:url('../Images/CompassRose_medium.png');
					}