/* ========================================= */
/* FILE: index-style.css */
/* ========================================= */

	@import url(reset.css);
/*	* { color: #000; } */ /*STRANGE: shrink-wraps height of floated lines */
	@import url(clear.css);

/* ========================================= */

/*	body */
	body#homepage, body#homepage-de, body#homepage-en
/*	body[id^="homepage"] */   /* IE does not support this */
/*	body[id|="homepage"] */   /* IE does not support this */
	{
		width:  960px;   /* force absolute width */	/*quirks-mode: IE6 treats this as a min-width */
/*
		min-width:  760px;
		max-width: 1040px;
*/
		margin: 16px auto 0 auto;   /* center the webpage */
		background: url(../images/bg.png) repeat;

		color: #000; /* text is usually black */
/*		text-align: center; */   /* IE-bugfix ??? */
/* proposals taken from the book "Professional Webdesign" - they should know...
		font-family: "Courier New",Courier,monospace (!!! NOT monotype !!!);
		font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
		font-family: Georgia,"Times New Roman",Times,serif;
*/
		font-family: Verdana,Helvetica,Arial,"Trebuchet MS",Geneva,sans-serif;
/*		font-family: "Courier"; */ /* looks good on Linux */

		/*  after this fix for IE5-Win follows the font-size for all browsers */
		font-size: small; /* for IE5-Win one step smaller */
		voice-family: "\" }\"";
		voice-family: inherit;
		font-size: medium; /* all browsers except IE5-Win */
	}

/* ========================================= */

	div#wrap-all { /*CAVEAT: either specify width in % or margin/padding, never both */
/*		text-align: left; */   /* IE-bugfix ??? */
/*
		margin:  0.5em 0.5em;
		padding: 0.5em 0.5em;
		background-color: #BDF;
*/
/*		background-color: transparent; */
		background: #DEEBF1;
	}

/* ========================================= */

/*
	div#wrap-all div.headerimage
	, div#wrap-all div.clear
	, div#wrap-all div.transparent
	{
		margin:  0em 0.5em;
		padding: 0em 0.5em;
	}
*/
	div.header {
		clear: both;
		text-align: center;
/*		width: 100%; */ /* important: sets a defined width that can be divided */
		margin:  0;
		padding: 0.5em 0.5em;
/*		border: 1px solid black; */
/*		background: url(../images/steel.jpg) repeat; */
		background: #C4DAEA/*#9ABBD6*/;
	}

	div.footer {
		clear: both;
		text-align: center;
		vertical-align: bottom;
		font-size: small;
/*		width: 100%; */ /* important: sets a defined width that can be divided */
		margin:  0;
		padding: 0em 0em;
/*		border: 1px solid black; */
/*		background: #EC8; */
		background: #C4DAEA;
	}

	div.headerimage {
		position: relative; /* THW: this is the new positioning-context for absolutely positioned divs */
/*		clear: both; */
		text-align: center;

		height: 240px; /* NOTE: try to avoid absolute heights, but IE6-Win depends on this */
/*		background: url(../images/headerfoto.jpg) no-repeat; */
/*		overflow: hidden; */
	}

	div.transparent {
		clear: both;
		text-align: center;
		background: transparent;
	}

	div.Hnav {
		margin:  0em;
		padding: 0em 0.5em;
	}

	div.wrap-cs {
		width: 100%; /* important: sets a defined width that can be divided */
		margin: 0;   /* TODO: why is the width exceeding the right border? */
		padding: 0;
		border: none;
/*		background: url(../images/steel.jpg) repeat; */
	}

/* ----------------------------------------- */

	div.sidebar {
/* TODO: omitting width shrink-wraps the container*/
		width: 15%;
		float: left;
		margin-top: 1.0em;
/*		background: #CC8; */
	}

	div.content {
		width: 85%; /*DONE: now 85% after super-divs got width: 100% */
		float: right;
/*		background: #DEE; */
	}

/* ========================================= */

	h1,h2,h3,h4,h5,h6 {
/*		width: 95%; */
		text-align: center;

/*		display: block; */
		clear: both;   /* prevent left-floating */
/*		background-color: #CFF; */
/*		border: 1px solid black; */
/*		margin:  0 1em; */   /* left/right margin */
/*		padding: 0 1em; */   /* left/right padding */
	}
	h1 { font:            bold 300% Helvetica,sans-serif; }
	h2 { font: small-caps bold 200% Helvetica,sans-serif; }
	h3 { font: small-caps bold 175% Helvetica,sans-serif; }
	h4 { font: small-caps bold 150% Helvetica,sans-serif; }
	h5 { font: small-caps bold 125% Helvetica,sans-serif; }
	h6 { font: small-caps bold 100% Helvetica,sans-serif; }

/* ========================================= */

	.L { float: left;  text-align:  left; clear:  left; }
	.R { float: right; text-align: right; clear: right; }
	.C { float: none;  text-align: center; }

	.T { position: absolute;    top: 0px; }
	.B { position: absolute; bottom: 0px; }

	.TL { position: absolute;    top:  0px;  left:  0px; }
	.TR { position: absolute;    top:  0px; right:  0px; }
	/* BL,BR: without-height: IE:bottom-of-body,0 FF:2,0 SA:1,0 */
	/* BL,BR:    with-height: IE:             2,0 FF:0,0 SA:?,? */
	.BL { position: absolute; bottom:  1px;  left:  0px; }
	.BR { position: absolute; bottom:  1px; right:  0px; }

/*	* html .BR { position: absolute; bottom: -1px; right: -1px; } */ /* hack for IE because it is off by one */

	.none { display: none; }		/* element is completely removed */
	.hide { visibility: hidden; }	/* element occupies space even if not visible */

/* ========================================= */

	ul.no-marker, ol.no-marker, dl.no-marker {
		list-style: none;
		text-indent: 0em;
/*		background-color: #EC8; */
/*		margin: 3px; */   /* 0.25em / 2px */
/*		padding:3px; */   /* 0.25em / 2px */
/*		border: solid 1px Blue; */
	}
/*
	ul li.L {
		float: left;
		text-align: left;
	}
	ul li.R {
		float: right;
		text-align: right;
	}
	ul li.C {
		float: none;
		text-align: center;
	}
*/
/* ========================================= */

	ul.Hnav {
/*		background: Green; */
	}

	ul.Hnav.L {
/*		float: left; */
		margin-left: 0.5em;   /* does not work on IE, TODO: try display: block */
/*		margin-bottom: 2px; */
		display: block;
	}

	ul.Hnav.R {
/*		float: right; */
		margin-right: 0.5em;   /* does not work on IE, TODO: try display: block */
/*		margin-bottom: 2px; */
		display: block;
	}

	ul.Hnav.L li {
		float: left;
		margin-right: 3px;   /* does not work on IE, TODO: try display: block */
		display: block;
	}

	ul.Hnav.R li {
		float: left/*right*/; /* CAVEAT: this floats left to maintain sequence, the container floats right */
		margin-left: 3px;   /* does not work on IE, TODO: try display: block */
		display: block;
	}

/* ========================================= */

	ul.Vnav {
/*		background: Green; */
        margin:  0; /*TODO:  margin!=0 maybe inherited? */
        padding: 0; /*TODO: padding!=0 maybe inherited? */
	}

	ul.Vnav li {
/*		margin: 0 0 12px 0; */
/*		margin: 0 0.5em 0.25em; */ /* FF: looks-good, IE: margin-too-big */
		margin: 0 0.5em 0.25em; /* IE doubles the margin / accumulates margins from ancestors, see bugfix below */
/*		margin: 0 0.5em 0.25em; */ /* FF: no-margin, IE: looks-better */
/*		float: none;     */ /* bugfix for IE did not quite succeed */
/*		display: inline; */ /* bugfix for IE did not quite succeed */
/*		padding: 5px 10px; */
	}

	* html ul.Vnav li {
		margin: 0 0.5em; /* bugfix for IE: IE doubles the margin / accumulates margins from ancestors */
	}

/* ========================================= */

	ul.nav {
		list-style: none;
		text-indent: 0em;
/*		border: solid 1px Blue; */
	}
	ul.nav li {
	}
	ul.nav li a {
		display: block;   /* make entire tab-box clickable */
/*		border: solid 1px Black; */ /* activate border for Hnav/Vnav here */
		text-decoration: none;
		text-align: center;
		padding: 0.25em 0.5em; /* needed in the absence of absolute width */
/*		padding: 5px 10px; */
	}
	/* thw CSS-spec forces a defined sequence: L-V-H-A (remember "LoVe-HAte") */
	a {
		color: black; /* make sure that text is black */
		text-decoration: none;
		padding: 0 0.5em;
	}
	a:link    { background: #9ABBD6 /*#CCC*/ /*#EC8*/; }
	a:visited { background: #9ABBD6 /*#CCC*/ /*#EC8*/; }
	a:hover   { background: #C4DAEA /*#CCC*/ /*#FF8*/; }
	a:active  { background: #DEEBF1 } /*TODO: my firefox does not show this, but why? */
/*
	ul.nav  li a:link    { background: #9ABBD6; }
	ul.nav  li a:visited { background: #9ABBD6; }
	ul.nav  li a:hover   { background: #DEEBF1; }
	ul.nav  li a:active  { background: #DEEBF1 }
	ul.Vnav li a:hover   { background: #C4DAEA; }
	ul.Vnav li a:active  { background: #C4DAEA }
*/

/* ========================================= */

	div.sidebar a {
/*		display: block; */  /* make entire tab-box clickable */
/*		float: right; */  /* shrink-wrap content */
/*		clear: both; */   /* I tried to prevent side-by-side layout, but this causes unwanted line-wrapping on IE6 */
/*		border: solid 1px Black; */
/*
		background: #EC8;
		text-decoration: none;
		text-align: center;
		margin: 0 0.5em 0.25em;
		padding: 5px 10px;
*/
	}
/*
	div.sidebar a:hover {
		background: #FF8;
	}
*/
/* ========================================= */

	dl.box {
/*		width: 30%; */
		padding: 0;
		border: solid 2px #888;
/*		margin: 0 3em 0 1em; */
/*		background: #888; */
		line-height: 150%;
	}
	dl.box dt {
/*		border: solid 1px #888; */
/*		border-bottom: solid 1px #888; */
		text-align: center;
/*		background: #CCC; */
		background: url(../images/steel.jpg) repeat;
	}
	dl.box dd {
/*		border: dotted 1px Green; */
		padding: 0 0.5em;
		border-top: solid 1px #888;
/*		background: #EEE; */
	}

/* ========================================= */

/* 2 columns */

	div.col2 {
		float: left;
/*		border: solid 1px blue; */
/*		margin:  5px*/ /*0.5em*/;   /* force absolute width */
/*		padding: 5px*/ /*0.5em*/;   /* force absolute width */
	}

	div.col1of2 {
/*		display: block; */
		width: 49.999%;
		float: left;
/*		background-color: #FCC; */
	}
	div.col1of2 div {/* margins/paddings of a sub-div do not affect the width of the container */
		padding: 1.0em 1.0em;
/*		border-right: dashed 1px blue; */
	}

	div.col2of2 {
/*		display: block; */
		width: 49.999%;
		float: left;
/*		background-color: #CFC; */
	}
	div.col2of2 div { /* margins/paddings of a sub-div do not affect the width of the container */
		padding: 1.0em 1.0em;
/*		border-left: dotted 1px blue; */
	}

/* 3 columns */

	div.col3 {
		border: solid 1px blue;
		margin:  1%;
		padding: 2%;
	}

	div.col1of3, div.col2of3, div.col3of3 {
		width: 33.333%;
		float: left;
	}

	div.col1of3 div, div.col2of3 div, div.col3of3 div
	{ /* margins/paddings of a sub-div do not affect the width of the container */
		padding: 1.0em 1.0em;
/*		border-left: dotted 1px blue; */
	}

/* ========================================= */

	div {
		display: block; /* just to be sure ... */
	}

/* ========================================= */

	hr {
		margin:  0em 1em;
		padding:  0;
	}

/* ========================================= */

	p {
		line-height: 140%;
		text-indent: 1.0em;
		text-align: justify;
/*
		letter-spacing: -0.1em;
		word-spacing: +0.2em;
*/
	}

	p:first-child { /* IE does not support first-child */
		text-indent: 0;
	}

/* ========================================= */

	blockquote {
		font-family: Times,"Times New Roman",serif;
		font-style: italic;
	}
	blockquote:before {
		font-family: Times,"Times New Roman",serif;
		font-style: italic;
		content: ">>";
	}
	blockquote:after {
		font-family: Times,"Times New Roman",serif;
		font-style: italic;
		content: "<<";
	}

	q {
/*
		font-family: Times,"Times New Roman",serif;
		font-style: italic;
*/
/*		quotes: '\201C' '\201D' '\2018' '\2019'; */
	}


/* ========================================= */
/* END-OF-FILE */
/* ========================================= */