body { 
	/*background-color:#dddddd;*/
	background-image:url(http://www.wiko-piehler.de/graphik/hintergrund.jpg); background-attachment:scroll;
	margin: 0px;
	padding: 0px;
	font-family: Arial, helvetica, sans-serif;

}

/*class content wegen IE-Problem*/
.content table, tr, td {
	margin: 0px;
	padding: 0px;
	text-align: left;
	vertical-align: top;
	border-spacing: 0;
}

.content td {
	font-size: 12px;
}
	
h1 {
	font-size: 25px;
}

h2 {
	font-size: 15px;
}

/***Menu***/
/*
	sets the width onto the individual lists, <ul>'s, this time as the need to 
	float side by side to make them fit into whatever horizontal space is 
	available to them. This horizontal width is determined by setting the width 
	of the #menu div itself. The #menu div is also floated in order to "contain" 
	it's floated descendants.
*/
#menu {
width: 698px;
background-image: url(http://www.wiko-piehler.de/graphik/menue-hintergrund-grau-invers.jpg);
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 87px;
float: left;
}

/*fuer sehr lange/kleine Menuepunkte*/
#menu ul.short {
width: 71px;
}
#menu ul.broad {
width: 120px;
}
#menu ul.verybroad {
width: 210px;
}

/*
Then we apply the required formatting to the <a> anchors, again I'm using the 
same formatting as the vertical menu
*/
#menu a {
font: bold 11px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
/*height:15px;*/ /*mit dieser Zeile funktioniert das Menü im IE7 nicht*/
margin: 0;
padding: 2px 3px;
}

#menu a {
color: #dddddd;
background-image: url(http://www.wiko-piehler.de/graphik/menue-hintergrund-grau-invers.jpg);
text-decoration: none;
}

#menu a:hover {
color: #000000;
background-image: url(http://www.wiko-piehler.de/graphik/menue-hintergrund-grau.jpg);
}

/*
Positioning the Popout Menus and Dropdown Menus
The position: relative; on the <li> elements establish containing blocks for the 
descendant <ul> elements.
All secondary levels and deeper are given position: absolute; and a high z-index 
in order to make them appear, drop down above following content. the third level 
and deeper lists are the ones we want to move so "offset" positioning 
co-ordinates only required to be input onto them.
*/
#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 100;
}

#menu ul ul ul {
top: 0;
left: 100%;
}

/*
Hiding and Revealing using :hover
This time we actually do want to hide the second level menu (top choice) as we 
only want the heading, inside the top level <ul> to remain visible.
The display: block; rules show the three levels being activated with the 
display: none; rules being entered afterwards to more specifically hide the 
unwanted (deeper nested) lists (counteract them).
*/
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

/*******************************************************************************/

ul.plevel0 {
list-style: none;
margin: 0;
padding: 0;
width: 87px;
float: left;
}


/*
Then we apply the required formatting to the <a> anchors, again I'm using the 
same formatting as the vertical menu
*/
ul.plevel0 a {
font: bold 11px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
height:15px;
margin: 0;
padding: 2px 3px;
}

ul.plevel0 a {
color: #000000;
background-image: url(http://www.wiko-piehler.de/graphik/menue-hintergrund-grau.jpg);
text-decoration: none;
}

ul.plevel0 a:hover {
color: #dddddd;
background-image: url(http://www.wiko-piehler.de/graphik/menue-hintergrund-grau-invers.jpg);
}