@charset "utf-8";
/* CSS Document */
/*--------------TOP NAVIGATION with CSS, no JavaScript----------------------------------------------------*/
/*CSS-Design by Buyplanet Team*/


/*Top-Container for Navigation; Blue background pic (cascaded)*/

#header .menu {
 margin:25px 0 0px 439px;
 position:absolute;
 overflow: hidden;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}


/*Container for every single Navigation Element, */


/*Link-text Container; alignment of text via padding;
  height, padding and background-pic is needed!!!
  NOTICE: Pic-height is orginally 23px -> deduct top-padding -> final height (23-6 = 17px)
 */

.navimiddle {
	padding: 11px 0 0 0;
	text-align: center; 
	float: left;
	height: 32px;
	width: 120px;
	background-image: url(../img/flughafen/navi_active.png);
	background-repeat: no-repeat;
}

/*Link formatted -> Notice: Position already declared in link-text container;
  DO NOT FORGET CSS-STANDARD FOR FORMATTING LINKS: a:link, a:visited, a:hover, a:active
*/
.navimiddle a:link {
	color:#485153;
	font-size: 1.3em;
	font-weight: bold;
    text-decoration: none;
}

.navimiddle a:visited {
	color:#485153;
	font-size: 1.3em;
	font-weight: bold;
    text-decoration: none;
}

/*Alright, here comes the tricky part:
  In Order to achieve the same result in Explorer and Firefox when "hovering"
  a special way of layer-setup needs to be done:
  
  1. In between the the "navidmiddle"-elements there needs to be a "fill"-element, in
     order to make Explorer not overflow into the the next "navimiddle"
	 
  2. This element ("navi-spacer") has "overflow" set to "visible"; "background-image" is "none",
     "background-color" is "transparent"
	 
  3. For a:hover:
     - Different Background-Pic and Color for text ("color");
	 - Change the padding and add margin in order to prevent the movement of layers in the 
	   following in order:
	    i.     take the original "padding" settings from the "navimiddle" ("padding: 7px 6px 1px 6px;")
		ii.    add-on "border-left" and "border right", with a colour based on the background-color of the hover; 
	           this color is 50% reduced in brightness (thus should be darker version of the background-color) in
			   order to achieve 3-D effect
		iii.   reduce "padding-right" and "padding-left" and add on minus margins (left and right);
		       NOTICE: the value for the left side (margin and padding) needs to be 1px bigger than right side;
			   the minus-values of the left and right margin keep layers from moving around!	
		iiii.  Last, but not least: add on "spacer" layer, with width set to same value than the margin-right value
		       of "navimiddle a:hover" above (in this case: 2px); set "overflow" to "visible", "background-image"
			   to "none" and "background-color" to "transparent"
	
	   DONE!!!
	   
	   Layer Syntax in the HTML-Doc looks like:   	 
	   
	    <div class='navi'>
			<div class='navi-spacer'></div>
			<div class='navimiddle'><a href='#'>[LINK]</a></div>
			<div class='navi-spacer'></div>
		</div>
	   
*/

.navimiddle a:hover {
	color:#485153;
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-weight: bold;
    text-decoration: none;
}

.navimiddle a:active {
	color:#485153;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
}


/*##############################################################################################
################################################################################################*/

.navimiddle2 {
	text-align: center; 
	float: left;
	height: 42px;
	width: 120px;
	background-image: url(../img/flughafen/navi_inactive.png);
	background-repeat: no-repeat;
	margin: 0;
	padding: 11px 0 0 0;
	/*color: #FFFFFF;*/
}

.navimiddle2 a:link {
	color: #cdebf3;
	font-size: 1.3em;
	font-weight: bold;
    text-decoration: none;
}

.navimiddle2 a:visited {
	color: #cdebf3; 
	font-size: 1.3em;
	font-weight: bold;
    text-decoration: none;
}

.navimiddle2 a:hover {
	border: 0;
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 1.3em;
    text-decoration: none;
    color: #485153;
}
.navimiddle2:hover {
	background-image: url(../img/flughafen/navi_active.png);
	background-repeat: no-repeat;
	margin: 0;
	color: #485153;
    text-decoration: none;
	}


.navimiddle2 a:active {
	color: #cdebf3; 
	font-size: 1.3em;
	font-weight: bold;
    text-decoration: none;
}


/*##############################################################################################
################################################################################################*/



.navi-spacer {
	float: left;
	width: 0px;
	height: inherit;
	background: transparent;
}

                                                           /*ENDE HEADER BEREICH*/