ul#navigation2 {
list-style-type: none;
}

li#navelement {
	background-repeat: no-repeat;
	float:left;
	text-align:center;
	width:78px;
}

li a.menu_3 {
	background-image: url(naviplanet1.jpg);
}

li a.menu_3:hover  {
	background-image: url(naviplanet1.gif);
}

li a.menu_3_active {
	background-image: url(naviplanet1_hover.jpg);
}

li a.menu_4 {
	background-image: url(naviplanet2.jpg);
}

li a.menu_4:hover {
	background-image: url(naviplanet2.gif);
}

li a.menu_4_active {
	background-image: url(naviplanet2_hover.jpg);
}

li a.menu_1 {
	background-image: url(naviplanet3.jpg);
}

li a.menu_1:hover {
	background-image: url(naviplanet3.gif);
}

li a.menu_1_active {
	background-image: url(naviplanet3_hover.jpg);
}

li a.menu_2 {
	background-image: url(naviplanet4.jpg);
}

li a.menu_2:hover {
	background-image: url(naviplanet4.gif);
}

li a.menu_2_active {
	background-image: url(naviplanet4_hover.jpg);
}

li a.menu_5 {
	background-image: url(naviplanet5.jpg);
}

li a.menu_5:hover {
	background-image: url(naviplanet5.gif);
}

li a.menu_5_active {
	background-image: url(naviplanet5_hover.jpg);
}


li#navelement a, li#navelement a:active, li#navelement a:link, li#navelement a:hover, li#navelement a:visited{
	background-repeat: no-repeat;
	display: block;
	color: #3367A4;
	height:31px;
	padding-top:47px;
	text-align:center;
	text-decoration: none;
	width:78px;
}

li#navelement div#subNavigationWrapper{
	display:none;
}

li#navelement.menu_1_active div#subNavigationWrapper, li#navelement.menu_2_active div#subNavigationWrapper, li#navelement.menu_3_active div#subNavigationWrapper, li#navelement.menu_4_active div#subNavigationWrapper, li#navelement.menu_5_active div#subNavigationWrapper {
	display:block;
}
/*
, li#navelement:link  div#subNavigationWrapper, li#navelement:visited  div#subNavigationWrapper 
li#navelement:hover  div#subNavigationWrapper, li#navelement:active  div#subNavigationWrapper {
	display:block;

}
*/

div#subNavigationWrapper {
	background-image: url(../images/corner-subnav-left.gif);
	background-color: transparent;
	background-position: 0px -10px;
	background-repeat:no-repeat;
	height: 30px;
	padding-left:10px;
	position:relative;
	text-align:left;
	width: 400px;
	z-index:2;
}

ul#subNavigation {
	background-color:white;
	float: left;
	height:20px;
	margin-left:0px;
	padding-top: 10px;
	position:relative;
	top:-10px;
}

div#rightCorner {
	background-image: url(../images/corner2-subnav-right.gif);
	background-color: transparent;
	background-position: 0px 0px;
	background-repeat:no-repeat;
	height: 30px;
	float: left;
	padding-top: 10px;
	position:relative;
	top:-10px;
	width:10px;
}

li#subNavelement{
	display:inline;
	padding:0 5px;
}

li#subNavelement.active {
	font-weight:bold;
}

li#navelement li#subNavelement a {
	display:inline;
	height: 20px;
	padding-top:0px;
}

.utilities a#utilitylinks, .utilities a#utilitylinks:active, .utilities a#utilitylinks:link, .utilities a#utilitylinks:hover, .utilities a#utilitylinks:visited {
color:#99B6D3;
float:right;
font-size: 10px;
padding-left: 12px;
text-decoration:none;
}

/* 

Das Modul nutzt 6  Klassen zur Ausrichtung der Bilder. 
.pleft , .pright und .pnormal    

.pleft für links ausgerichtete Bilder
.pright für rechts ausgerichte Bilder
.pnormal kann zur Definition einer Normalanzeige verwendet werden.  

.pleft_b, .pright_b und .pnormal_b 
definieren die Anzeige der Bilder für den 2. Stil.  
z.B. Anzeige mit Rahmen
Viel Spass beim weiteren basteln.



Code: 

*/ 


/* Definition der Klassen ohne Rahmen*/ 

.pleft {
	float: left;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	vertical-align: text-bottom;

border: none;
}
.pright {
	float: right;
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	vertical-align: text-bottom;

border: none;
}
.pnormal {
	clear: both;
border: none;
	
}


/* Definition der KLassen mit  Rahmen (2.Stil) */

.pleft_b {
	float: left;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	vertical-align: text-bottom;
border: 1px solid #990000;
}
.pright_b {
	float: right;
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	vertical-align: text-bottom;
border: 1px solid #990000;
}
.pnormal_b {
	clear: both;
	border: 1px solid #990000;
}