/**
 * file: http://www.lerke-gravenhorst.de/css/navigation.css
 * media: screen
 */

/* Bereich der horizontalen Navigationsleiste */
div.navigation {
	position: absolute;
	top: 160px;
	left: 0px;
	margin-left: 50px;
	height: 33px;
	width: 692px;
}

/* Die Navigationselemente sind innerhalb von geschachtelten Listen organisiert. */
div.navigation ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

/* Die Elemente der ersten Ebene sind horizontal angeordnet
 * und werden wie Karteireiter angezeigt.
 */

div.navigation li {
	position: relative;
	float: left;
	height: 33px;
	background: url(../img/bg/tab_right.gif) top right no-repeat;
	border-bottom: 2px solid #cb1b16;
	padding-left: 2px;
	cursor: pointer;
}

div.navigation li span.left {
	display: block;
	float: left;
	width: 11px;
	height: 33px;
	background: url(../img/bg/tab_left.gif) top left no-repeat;
}

div.navigation li a {
	display: block;
	line-height: 33px;
	margin: 0px 15px 0px 11px;
	padding: 0px;
	background: url(../img/bg/tab_bg.gif) repeat-x;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	font-weight: normal;
	font-size: 0.95em;
	color: #ffffff;
	text-decoration: none;
}

/* Jeder Karteireiter bekommt eine genau definierte Breite */
div.navigation li#praxis {

	padding-left: 22px;
	width: 68px;
}

div.navigation li#vorsorge {
	width: 86px;
}

div.navigation li#untersuchungen {
	width: 134px;
}

div.navigation li#behandlung {
	width: 104px;
}

div.navigation li#services {
	width: 126px;
}

div.navigation li#links {
	width: 62px;
}

div.navigation li#kontakt {
	width: 78px;
}

/* Elemente der zweiten Ebene werden als Listenlemente organisiert. */
div.navigation li ul {
	position: absolute;
	border-top: 2px solid #cb1b16;
}
/* Sonderfall IE */
* html div.navigation li ul {
	padding-top: 3px;
}

/* Untermenüs sind zunächst unsichtbar.
 * Die Formatierung unterscheidet sich von derjeniger der ersten Ebene.
 */
div.navigation li ul li {
	display: none;
	float: none;
	width: 200px;
	text-align: center;
	height: 26px;
	background: url(/img/bg/tab_subnav_rightborder.gif) top right repeat-y;
	border-bottom: 0px solid #cb1b16;
}
/* Sonderfall IE */
* html div.navigation li ul {
	border-top: none;
	margin-top: -1px;
}

div.navigation li ul li a {
	line-height: 25px;
	width: 197px;
	margin: 0px 3px 0px 0px;
	background: #ffcc66 none;
	border-bottom: 1px solid #cb1b16;
}
div.navigation li ul li#last a {
	width: auto;
}

/* Position und Ausrichtung der Untermenüs wird separat festgelegt. */
div.navigation li#praxis ul {
	left: 21px;
}
div.navigation li#praxis ul li {
	text-align: left;
}
div.navigation li#vorsorge ul {
	left: -57px;
}
div.navigation li#untersuchungen ul {
	left: -33px;
}
div.navigation li#behandlung ul {
	left: -48px;
}
div.navigation li#services ul {
	left: -37px;
}
div.navigation li#links ul {
	left: -69px;
}
div.navigation li#kontakt ul {
	left: -123px;
}
div.navigation li#kontakt ul li {
	text-align: right;
}

/* Letzes Element bekommt abgerundete Ecken. */
div.navigation li ul li#last {
	background: url(/img/bg/tab_subnav_right.gif) top right no-repeat;
}

div.navigation li ul li#last span.left {
	display: block;
	float: left;
	width: 14px;
	height: 25px;
	background: url(/img/bg/tab_subnav_left.gif) top left no-repeat;
}

div.navigation li ul li#last a {
	margin: 0px 11px 0px 7px;
	background-color: #ffcc66;
	border-bottom: 0px solid #cb1b16;
}

/* Element der ersten Ebene werden hervorgehoben, wenn die angezeigte Seite zu dem
 * Navigationsbereich gehört bzw. wenn mit der Maus darübergefahren wird.
 */

div.navigation li.hover,
body.praxis li#praxis, 
body.vorsorge li#vorsorge,
body.untersuchungen li#untersuchungen, 
body.behandlung li#behandlung, 
body.services li#services, 
body.links li#links, 
body.kontakt li#kontakt 
{
	background-image: url(/img/bg/tab_right_active.gif);
}

div.navigation li.hover span.left,
body.praxis li#praxis span.left,
body.vorsorge li#vorsorge span.left,
body.untersuchungen li#untersuchungen span.left,
body.behandlung li#behandlung span.left,
body.services li#services span.left,
body.links li#links span.left,
body.kontakt li#kontakt span.left
{
	background-image: url(/img/bg/tab_left_active.gif);
}

div.navigation li.hover a,
body.praxis li#praxis a,
body.vorsorge li#vorsorge a,
body.untersuchungen li#untersuchungen a,
body.behandlung li#behandlung a,
body.services li#services a,
body.links li#links a,
body.kontakt li#kontakt a
{
	background-image: url(/img/bg/tab_bg_active.gif);
	color: white;
}

/* Aufgrund der Vererbung müssen den Unterpunkte ihre alte Formatierungen noch einmal extra
 * zugewiesen werden.
 */
div.navigation li.hover li a,
body.praxis li#praxis li a,
body.vorsorge li#vorsorge li a,
body.untersuchungen li#untersuchungen li a,
body.behandlung li#behandlung li a,
body.services li#services li a,
body.links li#links li a,
body.kontakt li#kontakt li a
{
	background-image: none;
	color: #c00303;
}

/* Außerdem werden sie bei onMousOver anders formatiert. */
div.navigation li li.hover
{
	background: url(/img/bg/tab_subnav_rightborder.gif) top right repeat-y;
}

div.navigation li li.hover a,
body.praxis li#praxis li.hover a,
body.vorsorge li#vorsorge li.hover a,
body.untersuchungen li#untersuchungen li.hover a,
body.behandlung li#behandlung li.hover a,
body.services li#services li.hover a,
body.links li#links li.hover a,
body.kontakt li#kontakt li.hover a,
div.navigation li li#last.hover a
{
	background-color: #9b0606;
	color: white;
}

div.navigation li li#last.hover
{
	background: url(/img/bg/tab_subnav_right_active.gif) top right no-repeat;
}

div.navigation li li#last.hover span.left
{
	background: url(/img/bg/tab_subnav_left_active.gif) top left no-repeat;
}