@charset "UTF-8";
/* CSS Document */

/*---------basic styling----------*/
* {
	margin: 0px;
	padding: 0px;
}
body {
	background-color: #FFFFFF;
	text-align: center;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 85%;
	}
#wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: left;
	background-color: #FFFFFF;
	}
#clear {
	clear: both;
	
	}

	
/*fonts, headers, hovers, etc...*/
a:hover {
	color: #006699;
}
.odd {
	background-color: #FFFFFF;
	font-weight: bold;
	color: #666666;
}
.even {
	background-color: #FFFFFF;
	font-weight: bold;
	color: #666666;
}
.selected {
	font-weight: bold;
	color: #006699;
	background-color: #FFFFFF;
}
.over {
	font-weight: bold;
	color: #006699;
}
.newover {
	font-weight: bold;
	color: #006699;
}
#container p {
	font-size: 13px;
	padding-top: 5px;
	padding-bottom: 10px;
}
#container h1 {
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	padding-bottom: 5px;
}
#container h2 {
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	padding-bottom: 5px;
}
#container h3 {
	font-size: 13px;
	font-weight: bold;
	line-height: 20px;
	padding-bottom: 5px;
}
#mainContent a {
	font-weight: bold;
	color: #333333;
	text-decoration: none;
}

#sidebar1 a {
	color: #999999;
	text-decoration: none;
	font-size: 12px;
}
#sidebar1 p {
	color: #666666;
	text-decoration: none;
	font-size: 12px;
}
#Aktuelles li.aktuelles a
{
	color: #006699;
}
#Ibzink li.ibzink a
{
	color: #006699;
	/*background-image: url(SpryMenuBarBottom.gif);
	background-repeat: no-repeat;
	background-position: bottom;*/
	}
#Planung li.planung a
{
	color: #006699;
}
#Referenzliste li.referenzliste a
{
	color: #006699;
}
#Kontakt li.kontakt a
{
	color: #006699;
}
#Impressum li.impressum a
{
	color: #006699;
}
#Login li.login a
{
	color: #006699;
}

/* ------ position container elements ----------*/
body  {
	font: 100% Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.twoColFixLtHdr #container {
	width: 960px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 20px;
} 
.twoColFixLtHdr #header {
	padding: 0 0px 0 0px;
}
#headerNav {
}
#header #logoImage1{
	position: relative;
	left: 0;
	bottom: 0;
	height: 85px;
	width: 250px;
	background-image: url(../images/IBZlogo1.gif);
	background-repeat: no-repeat;
	background-position: 162px 0px;
	float: left;
   }
#header #logoImage2{
	left: 0px;
	top:0;
	height: 85px;
	width: 710px;
	background-image: url(../images/ibzlogo2.gif);
	background-repeat: no-repeat;
	float: left;
	background-position: 0px 0px;
	position: relative;
   }
   #headerBar{
	position: absolute;
	left: 0;
	height: 4px;
	width: 100%;
	background-color: #666666;
	top: 101px;
   } 
.twoColFixLtHdr #header h1 {
	margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
.twoColFixLtHdr #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 220px;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}
.twoColFixLtHdr #mainContent {
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 250px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
} 

.twoColFixLtHdr #footer { 
	padding: 0 10px 0 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#FFFFFF; 
} 
.twoColFixLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#ie6msg  {
	border: 1px solid #666666;
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	float: left;
	padding: 10px;
}

#mainContent a:hover {
	color: #006699;
}
/*----------------------headerDropDownMenu css----------------------------*/

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;	/*width: 150px;*/
	}
.referenzliste ul {
	width: 200px;
	background-color: #FFFFFF;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
.planung /* End */
 ul {
	width: 200px;
	background-color: #FFFFFF;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}

/*Next, we need to position our list items. Fortunately, these will stack vertically by default, which is what we require. However, we must set the position as relative, because we will need to position the sub-menus absolutely within them.*/

ul li {
	/*position: relative;*/
	float: left;
	position: relative;
	}

/*Next step is the sub-menus. We want each sub-menu to appear to the right of its parent menu item when that item is hovered over.*/

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	display: none;
 	position: absolute; 
/*  	top: 2em;*/
	top: 26px;
  	left: 0;
	}

/*Using the “left” and “top” attributes, we can absolutely position each sub-menu within its parent menu item. You will notice I have set the “left” property to 149px (1px less than the width of the menu items), which allows the sub-menus to overlap the main menu and not produce a double border. (You’ll see what I mean later.)

We have also set display to “none,” as we don’t want the sub-menus to be visible by default.

So now we have the framework in place, but it’s still looking a bit plain. Let’s style those links.*/

ul li a {
	display: block;
	text-decoration: none;
	color: #333333;
	/*background: #fff;*/
	/*border: 1px solid #ccc;*/
	border-bottom: 0;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 10px;
	}

/*I have styled the links to my taste, but they can be changed to your preference, as you wish. It is important to set display to “block,” as we want each link to take up all the available space of its containing list item.

So things are looking a little better, although users of Internet Explorer for Windows may disagree. Unfortunately, IE Win interprets the line breaks between our nicely formatted HTML list items as white space, so you will notice that the menu items don’t stack up neatly in that browser. However, there is a way around IE’s bugs:*/

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

/*We can apply the Holly Hack above, which hides these rules from all browsers but IE Win. Perfect. You will notice the height: 1% rule that has also been added. Unfortunately (again!) the float fix uncovers another IE bug, which requires a height value to make the links display as block-level elements.

You will also notice the need to close the menu, which can be done by adding the missing border to the bottom of the list. So, the ul rule becomes:*/

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px;
/*	border-bottom: 1px solid #ccc;
*/	}
#nav {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 700px;
	position: relative;
	font-size: 13px;
	top: 55px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	}
#header {
}

/*With some luck, everyone should now be able to see the unfunctional menu.
Making it work

Now the fun bit. We need to make those sub-menus appear when we hover over the menu items.*/

li:hover ul { display: block; }

/*Voila...here’s the bare bones menu in action.

“Woo hoo! It works!” I hear 1% of you shout. “Awesome!”

OK, OK, so that darn IE/Win has to ruin everything and not do as it’s told. IE/Win only allows the :hover pseudo-class to be applied to a link — so the li:hover that makes the sub-menus appear means nothing to IE.

A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.)*/:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

/*Great thanks and appreciation is due here to Patrick Griffiths and Dan Webb, who introduced this trickery in a previous ALA article, Suckerfish Dropdowns. Thanks, guys!

So, the hover rule now becomes:*/

li:hover ul, li.over ul { 
	display: block; }

/*Additionally, we also need to associate the JavaScript with our main ul, which becomes:

<ul id="nav">

Hopefully, with the above tweaks in place, everyone should be able to see a simple version of the menu in action.
IE5.01 Jumping Menu Bug

Anyone using IE5.01 on Windows will notice that the menu jumps around when you hover over some of its items. The problem is easily fixed by modifying our previous hacks as follows:*/

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }


/*........footer.........*/
#footerBar {
	float: left;
	width: 250px;
	position: relative;
	height: 50px;
	}
#footerText{
	position: relative;
	left: 200;
	bottom: 0;
	height: 50px;
	width: 600px;
	float: left;
	}
#footerImage1{
	position: relative;
	right: 0;
	bottom: 0;
	background-image:url(../images/iso9001.gif);
	background-repeat: no-repeat;
	background-position: 5px 0px;
	float: left;
	height: 50px;
	width: 50px;
   }
#mainContent  ol {
	list-style-type: disc;
	padding-left: 25px;
	padding-top: 5px;
	padding-bottom: 15px;
	font-size: 12px;
}