/* 2hot, xhtml-(iecompatible)-divBorderLayot
Das Grundlayout nutzt keine Div-Border, um ein konsistentes Bild für IE und Mozilla zu erreichen.
Die Rahmen werden als jeweils eigene Div-Ebene mit gesetzter Hintergrundfarbe absolut positioniert.
Um eine Länge und Breite von 100% zu erreichen werden alle 100%-Rahmen (menuVerticalBorder, contentHead)
top-left-positioniert und dann von zudEcke im richtigen Z abgedeckt.
Das ist zwar nicht galant, da es keine Anhängigkeiten der Blöcke gibt, aber für den IE ist es die beste
und schnellste Variante... leider
(c) 01/2006, schandera, sachenwerk.de 
made with emacs, gimp, firefox, wine

Notes: 

der vpHack: Der VPHack umgeht ein Problem welches aus der Größe des Viewport entsteht. Setzt man
ein Element auf 100%, so füllt es in dieser Dimension den ganzen Viewport aus, aber auch nicht mehr. Kann
man also auf der Seite scrollen, so wird das Element trotzdem nur die Breite (oder Höhe) des anfänglich
angezeigten Viewports haben. Eine schwarze Linie, die quer über den ganzen Bildschirm gehen soll ist somit
beim Scrollen also einfach zu ende. Nützlich ist in dem Fall das Attribut min-width und min-height, das 
allerdings der nette Internetexplorer nicht interpretiert... der vpHack macht nun folgendes. Jede '100%'-Ebene
bekommt eine dupe-Ebene mit einer fest eingestellten Größe. Diese Größe sollte der Content-Größe entsprechen.
Die Ebene wird genau auf die andere gelegt und sorgt damit dafür, dass auch beim Scrollen aus dem Viewport
'heraus' die Ebene (in dem Fall die duplizierte ebene) angezeigt wird.
Da für die Höhe der gesamten Seite keine Größe festgelegt werden kann, da diese ja vom content abhängt, müssen
wir notgedrungen für die Menubalken ein Hintergrundbild missbrauchen. :( Eine dupe-Ebene wie im Fall mit der
Breite können wir nicht nehmen, da die Höhe dynamisch ist, weil sie vom Text abhängt, und wir damit keine
konkrete Pixel-Angabe machen können...

im der Klasse content findet man einen padding-top-wert von 1px. Dieser ominöse Sachverhalt ist folgender:
Ein relativ oder statisch angelegter container enthält, ohne daß was davor ist, einen weiteren Container,
welcher ein Margin-top definiert hat: Das sollte also den inneren Container um diesen Wert nach unten im
obercontainer verschieben. Machter aber nich, sondern der Margin-top-Wert wird nach oben in den obercontainer
übergeben und dieser hat dann den Margin. <div style='height:200px'><div style='margin-top:20px;'></div></div>
Sobald über der inneren Ebene ein Inhalt ist, oder eben ein padding, dann klappts

haupt-div-deklaration:
Also, strange bug im IE: Definiere ich in der Ober-Div ( div { ... } ) ein position-attribut, klappt die 
z-indizierung im Internetexplorer nich mehr, das Logo wird IMMER unter zudecke geschoben, keine ahnung
wieso
*/

body {	
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	font-family: verdana, sans-serif, sans;
	font-size: 11px;
	color: #000000;
	background-image: url('./../-img/vphack_back.gif');
	background-repeat: repeat-y;
}

html {	
	width: 100%;
	height: 100%;
	margin: 0px;
	padding:0px;
}

div {
	border-width: 0px;
	margin: 0px;
	padding: 0px;
	border-style: solid;
	border-color: #000000;
}

img {	
	border-width: 0px;
}

h3 {
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	color: #9b885e;
	font-size: 12px;
}

p {	margin-top: 0px;
	padding: 0px;
}

a {
text-decoration: none;
color: #000000;
}

form {
padding: 0px;
margin: 0px;
}

a.hl {
color: #9b885e;
}


div#zudEcke {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 227px;
	height: 223px;
	background-color: #FFFFFF;
	z-index: 4;
}

	

div.divBord {
	background-color: #000000;
	position: absolute;
}

div.tapete {
	position:absolute;
	top:0px;
	left: 0px;
	background-image: url('./../-img/tapete2.jpg');
	z-index: 15;
	height: 120px;
}


div.tapeteBorder {
	height: 3px;
	left: 0px;
	top: 120px;
	z-index: 15;
}


/* 
Menustuff 
*/
div.menuVerticalBorder {
	width: 6px;
	height: 100%;
}

div#menuBorderLeft { 
	left: 54px; 
}

div#menuBorderRight { 
	left: 227px; 
	z-index: 4;	
}

div#menuBorderTop {
	width: 179px;
	height: 9px;
	top: 222px;
	left: 54px;
}

div#menuItemContainer {
	position: absolute;
	top: 255px;
	left: 81px;
	width: 100px;
}

img#logo {
	position: absolute;
	top: 174px;
	left: 63px;
	width: 118px;
	height: 49px;
	z-index: 4;
}

img.menuBibbus {
	width: 7px;
	height: 16px;
	margin-right: 5px;

}

img.menuItem {
	margin-bottom: 14px;
}


/*
Content
*/
img#head {
	position: absolute;
	bottom: 0px;
	left: 733px;
	z-index: 100;
}

img#tag {
	position: absolute;
	top: 12px;
	left:683px;
	width: 44px;
	height: 26px;
	z-index: 100;
}

div.contentHead {
	position: absolute;
	left: 0px;
	top: 123px;
	height:49px;
	border-top-width: 2px;
	/* das ist für unseren lieben Freund InternetExplorer, der bei top:0px das bild (natürlich) 
	nicht auf die Unterkante, sondern einen Pixel darüber zeichnet... */
	border-bottom-width: 1px;
	border-bottom-color: #FFFFFF; 
	background-color: #9b885e;
	z-index: 3;
}


div#contentContainer {
	margin: 0px;
	padding:0px;
	border-width: 0px;
	position:absolute;
	left: 300px;
	top: 240px;
	width: 425px;
}

div.content {
	position: relative;
	padding-top: 1px;
}

img.contentBibbus {
	width: 13px;
	height: 13px;
}
img.contentBibbusHigh {
	position: absolute;
	left: -30px;
	top: 4px;
}
img.contentBibbusLow {
	position: absolute;
	left: -30px;
	top: 21px;
}

img.hrule1 {
	display: block;
	position: relative;	/* hrs sind niemals inline-elemente */
	width: 396px;
	height: 8px;
	margin-top: 25px;
	margin-bottom: 25px;
	clear: both;
}

img.hrule2 {
	display: block;
	position: relative;
	width: 425px;
	height: 8px;
	margin-top: 25px;
	margin-bottom: 25px;
	clear: both;
}

img.hrule3 {
	display: block;
	position: relative;
	width: 195px;
	height: 8px;
	margin-top: 45px;
	margin-bottom: 28px;
	clear: both;
}

img.hrule4 {
	display: block;
	position: relative;
	width: 339px;
	height: 8px;
	margin-top: 20px;
	margin-bottom: 25px;
	clear: both;
}



/*
text-styles
*/

.hlText {
color: #948053;
font-size: 12px;
font-weight: bold;
}

.hlText2 {
color: #948053;
}

.popUp {
cursor: pointer;
cursor: hand;
}

.blText {
color:#000000;
}

img#fotoTextSchoebel {
width: 102px;
height: 14px;
}

img#fotoTextMeusel {
width: 76px;
height: 12px;
}

/* 
Horizontale Viewport-Hacks 
*/
div#vpHack_contentHead,
div#vpHack_tapeteBorder,
div#vpHack_tapete {
	width: 870px;
}
div#contentHead,
div#tapete,
div#tapeteBorder {	
	width: 100%; 
}



/* Photocontainer nun global */
div.fotoContainer {
position:relative;
width: 210px;
height: 90px;
margin-bottom: 18px;
}

img.foto {
position:absolute;
top:5px;
left:5px;
width:81px;
height:81px;
}

img.fotoFrame {
position:absolute;
top:0px;
left:0px;
width: 90px;
height: 90px;
}

img.fotoText {
position:absolute;
top:72px;
left: 102px;
}