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

/* 
	structure.css

	- position (absolute, relative, float)
	- dimensions (width, height)
	- margin and padding
	- borders
	- colors
	- font
*/

/*
	light		#CCCCCC (grey)
	dark		#6666CC (blueish)
*/

/* ================================================================================ */
/* Tags																										*/
/* ================================================================================ */

html {
	background-color: #EEEEEE;
	/* color: #000000; */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	}

body {
	line-height: 150%;
	}
	
a {
	/* border left and bottom with according spacing */
	padding: 0 1em 1px 1em;
	border-width: 1px;
	border-style: dotted;
	border-color: #6666CC;
	border-top-style: none;
	border-right-style: none;
	font-weight: bold;
	text-decoration: none;
	}
	
	a:hover {
		/*
		border-width: 2px;
		border-style: dotted;
		border-color: #6666CC;
		border-top-style: none;
		border-right-style: none;
		*/
		}

	a:link {
		cursor: pointer;
		}
		
	a:visited {
		color: #666666;
		}
		
h1 {
	font-size: 175%;
	color: #6666CC; /* dark */
	}

	h2 {
		font-size: 150%;
		color: #666666; /* light */
		}
		
	h3	{
		font-size: 125%;
		color: #6666CC; /* dark */
		}
	
	h4	{
		font-size: 100%;
		color: #666666; /* light */		
		font-weight: bold;
		}
		
	h5	{
		font-size: 90%;
		font-weight: bold;
		}
		
	h6	{
		font-size:80%;
		font-weight: bold;
		}

p {
	text-indent: 1em;
	}

table {
	width: 80%;
	font-size:small;
	margin:3em;
	}
	
	thead {
		background-color: #CCCCCC;
		font-weight: bold;
		color: #6666CC;
		}

	caption {
		background-color: #CCCCCC;
		font-weight: bold;
		color: #6666CC;
		}
	
	th	{
		vertical-align: top;
		text-align: left;
		padding:5px;
		}

	td	{
		vertical-align: top;
		text-align: left;
		padding:5px;
		}
		
		td p {
			padding: 0;
			margin: 0;
			text-indent: 0em;
			}
		
		td h1 {
			padding: 0;
			margin: 0;
			background-color: #CCCCCC;
			font-size: 150%;
			font-weight: bold;
			}
			
		td h2 {
			padding: 0;
			margin: 0;
			font-size: 120%;
			}
			
		td img {
			width: 100%; /* adjust image to width of td */
			}
			
pre {
	margin:1em;
	background-color: #CCFFCC;
	color: black;
	font-family: "Lucida Console", "Courier New", Courier, monospace;
	font-weight: bold;
	font-size: 9pt;
	}

input	{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	}

strong {
	font-weight: bold;
	}


@media screen {

/* ================================================================================ */
/* Class 																									*/
/* ================================================================================ */

/* 

	Syntax: [primary|secondary] [horizontal|vertical] [left|center|right]

	All entries have to be put as <ul>.

	[primary|secondary]
	primary is the primary navigation, secondary the secondary. This primarily
	defines colours.

	[horizontal|vertical]
	horizontal or vertical describes, whether the navigation should be 
	displayed as vertical box or as horizontal bar.

	[left|center|right]
	In vertical mode this parameter puts the navigation to the left or
	right border of the screen.
	In horizontal mode this parameter aligns the entries to the left, 
	center or right of the screen.
	
	
	Typcial use is (example):
	
	Primary navigation:		primary vertical left			(Left column)

	Secondary navigation: 	secondary horizontal right		(Contact)
	Secondary content: 		secondary vertical right		(Right column)

	Secondary navigation:	secondary horizontal left		(Sub navigation content)

	Secondary navigation: 	secondary horizontal center	(Footer)
	
*/

/* -------------------------------------------------------------------------------- */
/* primary and secondary 																							*/

.primary {
	/* background-color: #FFFFFF; */
	color: #6666CC;
	}

	.primary.horizontal {
		}
	
	.primary.vertical {
		}
	
	.primary a {
		color: #6666CC; /* IE */
		}
		
		.primary a:hover {
			background-color: #CCCCCC;
			color: #6666CC;
			}

	/*	The secondary menu layer should be displayed differently	*/			
	.primary ul ul a {
		color: #000000; /* IE */
		font-weight: normal;
		}

		.primary ul ul a:hover {
			background-color: #CCCCCC;
			}

.secondary {
	text-indent: 0;
	font-size: smaller;
	}

	.secondary.horizontal {
		line-height: 200%;
		background-color: #6666CC;
		}

	.secondary.vertical {
		padding: 0 0.5em 0 1em;
		text-indent: 0;
		}
	
	.secondary a {
		padding: 0 0.5em 0 0.5em;
		color: #CCCCCC; /* IE */
		}


/* -------------------------------------------------------------------------------- */
/* horizontal and vertical																				*/

.vertical {
	width: 15%;
	}
	
	.vertical.left {
		float: left;
		}
	
	.vertical.right {
		float: right
		}

	.vertical ul {
		margin: 0;
		padding: 0;
		line-height: 2em;
		list-style-type: none;
		font-size: larger;
		font-weight: bold;
	}
	
	.vertical ul a {
		margin: 0;
		}
	
	.vertical ul ul {
		margin: 0 0 0 1.5em;
		padding: 0;
		/* border-left: 15px solid #FFCC99; */
		/* background-color: #FFFFFF; */
		line-height: 2em;
		font-size: smaller;
		font-weight: normal;
	}

	.vertical img {
		width: 90%;
		}

	
.horizontal {
	/* clear: both; */ /* only necessary, if logo ids are floating */
	width: 100%;
	}
	
	.horizontal.left {
		text-align: left;
		}
	
	.horizontal.center {
		text-align: center;
		}
	
	.horizontal.right {
		text-align: right;
		}
	
	.horizontal ul {
		margin: 0;
		padding: 0;
		}
		
	.horizontal li {
		display: inline;
		margin: 0 1em 0 1em;
		}


/* -------------------------------------------------------------------------------- */
/* other classes																							*/

.list {
	line-height: 150%;
	list-style-image: url(graphik/bullet.gif);
	vertical-align: top;
	}

.gallery {
   padding: 1em;
	}

.floatleft {
	float: left;
	padding: 1em 1em 1em 0;
	}
	
.floatright {
	float: right;
	padding: 1em 0 1em 1em;
	}


/* ================================================================================ */
/* Id 																										*/
/* ================================================================================ */

/* Page */
#page {
	width: 95%;
	margin: 2% 2% 2% 2%;
	}

	/* Vertical Ids*/
	#top {
		clear: both;
		}
	
	#middle {
		clear: both;
		}
	
	#bottom {
		clear: both;
		}

	/* Sections inside vertical elements */
	#header {
		}
	
		#logo1 {
			position: absolute;
			left: 18%; /* like #content */
			top: 50px;
			}
			
		#logo2 {
			/* float: left; */
			padding: 0 1em 1em 0;
			}
			
		#logo3 {
			/* float: right; */
			padding: 0 0 1em 1em;
			}
			
	#content {
		margin: 10px 17% 10px 17%; /* width of .vertical + 2 % */
		padding: 1em 5% 1em 5%;
		background-color: #FFFFFF;
		}
		
	#footer {
		clear: both;
		font-size: smaller;
		line-height: 200%;
		background-color: #6666CC;
		text-align: center;
		}
	
		#footer a {
			color: #CCCCCC; /* IE */
			}

}

@media print {

}