/*||||||||||||||||||||BODY||||||||||||||||||*/
html, body {
    height: 100%;
}

body {
	height:100%;
	margin:0px;
	padding:0px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:76%;
	/* font sizing in ems, baby. if you want to change anything, just change this.*/
	/*funny thing happens at 75% and lower. opera goes to a nice small size, but moz and ie pc change almost not at all. seems 76% is as small as you can go and stay the same across browsers. poop.*/
	color:#282834;
	background:#E6E6ED url(images/bg_left_right.gif) top left repeat-y;
	/*scrollbar formatting, only ie 5.5+*/
	/*Scrollbar musste dem Drang nach der Validität leider weichen
	scrollbar-face-color:#D1D1D3;
    	scrollbar-highlight-color:#D1D1D3;
    	scrollbar-shadow-color:#D1D1D3;
    	scrollbar-3dlight-color:#FFFFFF;
    	scrollbar-darkshadow-color:#FFFFFF;
    	scrollbar-arrow-color:#FFFFFF;
    	scrollbar-track-color:#FFFFFF; */
}


/*||||||||||||||||||||LAYER||||||||||||||||||*/

div {
	padding:0px;
	margin:0px;
	border:none;
}

#index_h1 {
	position:absolute;
	left:50px;
	top:10px;
	width:210px;
	height:43px;
	z-index:auto;
}

#index_adresse {
	position:absolute;
	left:10px;
	top:39px;
	width:160px;
	height:140px;
}

#index_fla {
	position:absolute;
	left:30%;
	top:10%;
	width:480px;
	height:400px;
}

#exit_center {
	position:absolute;
	left:360px;
	top:45%;
	width:260px;
	height:100px;
}

#page {
    position: relative;
    min-height: 100%;
}

#header {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:65px;
	background:#363549;
}

#logo {
	position:absolute;
	left:0;
	top:0;
	width:65px;
	height:65px;
	margin:0;
	padding:0;
	background:#282834;
}

#navi {
	position:absolute;
	left:80px;
	bottom:4px;
	height:13px;
	width:600px;
}

#topright {
	position:absolute;
	top:0px;
	right:0px;
	width:65px;
	height:65px;
	background:#282834;
	z-index:15;
}

#contentbody {
	/*position:relative;*/
	margin:0px 0px 0px 0px;
	background:#E6E6ED url(images/bg_left_right.gif) top right repeat-y;
	z-index:10;
}

#img_left {
	position:absolute;
	left:0px;
	top:0px;
	margin-top:65px;
	width:65px;
	background:#DBDAE3;
	min-height:85%;
	z-index=10;
}

#content_right {
	position:absolute;
	right:0px;
	top:0px;
	width:65px;
	margin-top:65px;
	background:#DBDAE3;
	z-index:10;
	min-height:85%;
	height:85%;
}

#submenu {
	padding:70px 0px 0px 80px;
	z-index:0;
}

#text {
	padding:90px 0px 65px 80px;
	width:400px;
	background:url(images/logo_bg.gif) no-repeat 110px 90px;
}

#text.sub {
	padding-top:10px;
	background:url(images/logo_bg.gif) no-repeat 110px 30px;
}

#textbig {
	padding:10px 0px 65px 80px;
	width:600px;
	background:url(images/logo_bg.gif) no-repeat 110px 90px;
}

#text_left {
	/*position:absolute;
	left:80px;
	top:25px;*/
	padding:90px 0px 65px 80px;
	width:300px;
	/*height:350px;*/
	background:url(images/logo_bg.gif) no-repeat 110px 90px;
}

#text_left.sub {
	padding-top:10px;
}

#text_right {
	position:absolute;
	left:400px;
	top:90px;
	width:300px;
	/*z-index:20;*/
}

#img_area {
	position:absolute;
	right:77px;
	top:115px;
	width:195px;
}

#img {
	position:relative;
	right:0px;
	top:0px;
	width:195px;
	min-height:215px;
	background:#363549;
	margin-bottom:1em;	
}

#footer {
	position: absolute;
    bottom: 0;
	left:0px;
	width:100%;
	height:65px;
	background:#363549;
	z-index:10;
}

#bottomleft {
	position:absolute;
	bottom:0px;
	left:0px;
	width:65px;
	height:64px;
	background:#282834;
	z-index:15;
}

#adresse {
	position:absolute;
	bottom:0px;
	left:65px;
}

#impressum {
	position:absolute;
	bottom:0px;
	right:0px;
	width:65px;
	height:64px;
	background:#282834;
	z-index:20;
}


/*|||||||||||||||||||TYPOGRAPHY|||||||||||||||||||*/

body.index {
	background:#363549;
}

#contentbody a {
	text-decoration:none;
	font-weight:normal;
	border-bottom:1px #282834 solid;
	color:#282834;
}

#contentbody a:hover {
	text-decoration:none;
	border:none;
	font-weight:normal;
	color:#FFFFFF;
	background:#363549;
}

#contentbody a#activ {
	text-decoration:none;
	border:none;
	font-weight:normal;
	color:#363549;
	background:#D0CEE6;
}

a.footer {
	text-decoration:none;
	border-bottom:1px #FFFFFF solid;
	font-weight:normal;
	color:#FFFFFF;
}

a.footer:hover {
	text-decoration:none;
	border:none;
	font-weight:normal;
	color:#FFFFFF;
}

a {
}

a:hover {
}

a:link {
}

a:visited {
}

a:active {
}

h1 {
	font-size:1.2em;
	font-weight:bold;
	margin:0em 0em 1.0em 0em;
	color:#282834;
	/*both set to zero and padding in header div is used intead to deal with compound ie pc problems that are beyound summary in a simple comment.
	margin-top:0em;
	margin-bottom:0em;*/
}

h2 {
	font-size:1.0em;
	margin:1.0em 1.6em 0.5em 0em;
	font-weight:bold;
}

h3 {	
	font-size:0.9em;
	margin:0.6em 0.0em 0.5em 0em;
	font-weight:normal;
}

h4 {
	font-size:1.0em;
	line-height:0em;
	margin:2.4em 1.6em 1.6em 0em;
	font-weight:bold;
}

h5 {
	font-size:1.0em;
	line-height:0em;
	margin:2.4em 1.6em 1.6em 0em;
	font-weight:bold;
}

h6 {
	font-size:1.0em;
	line-height:0em;
	margin:2.4em 1.6em 1.6em 0em;
	font-weight:bold;
}

table {
	font-size:1.0em;
	line-height:1.6em;
}


caption {
	display:none
}

td {
	padding:3px;
}

img {
	border:0;
}

img.rechts {
	border:0;
	margin:5px 10px 5px 15px;
	float:right;
}

img.links {
	border:0;
	margin-right:15px;
	margin-bottom:5px;
	margin-top:5px;
	float:left;
}

ol, ul {
	margin:0em 0em 0.9em 0.4em;
	padding-left:1em;
}

li {
	margin:0;
	font-size:1.0em;
	line-height:1.3em;
}

li.none {
	list-style:none;
}

p {
	font-size: 1.0em;
	line-height:1.5em;
	margin:0em 0em 1.0em 0em;
}

p.klein {
	font-size: 0.8em;
	line-height:1.2em;
	color:#7D7B95;
	margin:0em 0em 1.2em 0em;
}

p.imgsubline {
	font-size:0.8em;
	line-height:1.3em;
	color:#8D8CA4;
	margin:0.8em 1em 0.5em 0.8em;
}

p.footer {
	font-size:0.8em;
	line-height:1.2em;
	color:#7D7B95;
	padding-left:15px;
	padding-bottom:3px;
	margin:0px;
	z-index:15;
}

a.rechts{
	font-size:0.8em;
	color:#7D7B95;
	margin-left:2px;
}

.unsichtbar {
	visibility:hidden;
}

a.impressum {
	font-size:0.8em;
	color:#FFFFFF;
	border-bottom:1px #FFFFFF solid;
	text-decoration:none;
	padding-left:2px;
	padding-bottom:3px;
	margin:0px;
}

a.impressum:hover {
	font-size:0.8em;
	color:#FFFFFF;
	border:none;
	text-decoration:none;
	padding-left:2px;
	padding-bottom:3px;
	margin:0px;
}
	
strong, b {
	font-weight:bold;
}

em {
	color:#363549;
	font-style:normal;
}

/*______just for the nawartschi-snowing______________*/
span {
	z-index:100;
}


/* FORMULARE ------------------------------------------------ */
/* ---------------------------------------------------------- */
/*
	Im nächsten Schritt wird das Style Sheet erstellt, um die Labels und 
	Kontrollelemente zu positionieren. Zunächst werden die Labels mit der 
	Klasse "left" rechtsbündig an eine imaginäre Mittelachse gebracht und 
	mit einem Abstand zu den daneben stehenden Kontrollelementen versehen:
*/
label.left {
	float: left;
	text-align: right;
	width: 10em;
	margin-right: .3em;
}

/*
	Als nächstes werden die Text- und Auswahlboxen rechts daneben 
	positioniert. Weil diese im HTML ohne einen erzwungenen Zeilenumbruch 
	(z.B. durch <br /> oder die Grenzen einer <td>) nach den Labels kommen, 
	ordnen sie sich durch das float:left; automatisch rechts neben die 
	Beschriftungen ein:
*/ 
input[type=text], select {
	float: left;
}

/*
	Dann kommen die Radiobuttons und Checkboxen an die Reihe, die ja bereits 
	mit der Klasse "right" versehen sind. Der Abstand ergibt sich hier aus 
	der Breite der Textlabels für die vorhergehenden Textfelder (5em) plus 
	dem Abstand dieser Labels zu ihren Kontrollelementen (.3em). Hieraus ergibt 
	sich für die folgenden Kontrollelemente inklusive des "Absenden"-Buttons ein 
	linker Abstand von 5.3em, um sich an besagter Mittelachse auszurichten:
*/
input.right {
	float: left;
	width: auto;
	clear: both;
	margin-left: 15.3em;
	margin-right: .3em;
}

/*
	Aus unerfindlichen Gründen braucht diesmal der Mozilla eine Extrawurst 
	in Form eines zusätzlichen em für den Abstand nach links:
*/
input[type=checkbox].right,
input[type=radio].right,
/* input[type=submit].right {
	margin-left: 6.3em;
}*/

/*
	Durch die folgende Deklaration werden die float-Zustände wieder aufgehoben, 
	so dass es danach ganz normal im Fluss des Dokumentes weitergehen kann:
*/
form br {
	clear: both;
}

.suma {
	visibility:hidden;
}





/* ######### Galerie (Praxis) ############## */
.galierie_vorschau{
	/*height:51px;*/
	width:317px;
	/*margin:0px 10px 5px 15px;*/
	float:right;
}
.galierie_vorschau .thumbs{
	margin-left:15px;
}
.galierie_vorschau .thumb{
	margin:1px;
	padding:0px;
	display:block;
	float:left;
}
.galierie_vorschau .first{
	margin-left:0px;
}
.galierie_vorschau .last{
	margin-right:0px;
}	

/* ######### Startseite ############## */
#menu {
	position: absolute;	
	left: -211px;
	top:213px;
}	
#menu li{
	list-style: none;
	margin-bottom: 10px;
}		
#menu li a{
	display: block;
	color:#FFF;
	text-decoration: none;
	font-size: 16px;
	cursor: pointer;
}
#menu li a:hover{
	color:#8C8BA3;
}
#menu li#praxis a{
	margin-left: 125px;	
}
#menu li#parodontose a{
	margin-left: 65px;	
}
#menu li#implantate a{
	margin-left: 75px;	
}
#menu li#aesthetik a{
	margin-left: 100px;	
}
#menu li#termin a{
	margin-left: 117px;	
}
#menu li#anfahrt a{
	margin-left: 125px;	
}
#menu li#kontakt a{
	margin-left: 135px;	
}
#menu li#whoswho a{
	margin-left:125px;	
}
#menu li#designpreis a{
	margin-left: 0px;	
}

#images-box{
	background-image:url(images/startbilder/leer.jpg); 
	position: absolute; 
	height:541px; 
	width: 500px
}