@charset "utf-8";
/* CSS Document */

/*---------------------------------------------------------------
Stylesheets fuer www.praxis-berns-essen.de
Datei:    bildschirm.css
Datum:  
Ersteller: KS webdesign
----------------------------------------------------------------*/

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

 INHALTSVERZEICHNIS:
1.Allgemeine Selektoren
2.Allgemeine Hyperlinks
3.Layout allgemein + #startseite
        3.1 #umhang
        3.2 #kopf
        3.3 #sidebar
        3.4 #inhalt
        3.5 #fuss
4. Layout Unterseiten  
        4.1 #johannes-berns
        4.2 #stefan-berns
        4.3 #georg-berns
        4.4 #leistungen
        4.5 #team
        4.6 #praxisfotos
        4.7 #anfahrt
        4.8 #kontakt
5.Sonstige Styles
        5.1 Sonstige Klassen

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


/*========================================
   1. Allgemeine Selektoren
   ========================================*/
 *  {
	padding:0;
	margin:0;
}
html  {
	height:100%;
}
body  {
      color:#505050;
      background:#6a6868 url(../grafiken/body-hg.png) repeat-x left top;
      font:100.01%/1.4 Arial,verdana, sans-serif;
}
p, li, dt, dd, input, textarea, address  {
     font-size:0.9em;
}
p  {
    margin-bottom:0.5em;
}
li  {
    list-style-type:none;
}
img,
a img  {
	border:none;
	vertical-align:bottom;
}

h1  {
	position:relative;
	font-size:1em;
	width:750px;
	height:200px;
}
h1 span  {
	position:absolute;
	width:100%;
	height:100%;
	background:url(../grafiken/kopf2.png) no-repeat left top;
	
}
h2  {
	font-size:1em;
	color:#de4d07;
	margin-top:0.2em;
}
h3  {
	font-size:1.2em;
}
h4  {
	font-size:1.1em;
	margin-top:1.6em;
        margin-bottom:0.2em;
}
h5  {
	font-size:1em;
	margin-top:1.7em;
}

 /*========================================
   2. Allgemeine Hyperlinks
   ========================================*/
a  {
        color:#00519e;
	background-color:#f5f5f5;
}
a:visited  {
	color:#033e75;
	background-color:#f5f5f5;
}
a:focus, a:hover  {
	color:#de4d07;
	background-color:#f5f5f5;
        text-decoration:none;
}
a:active  {
	color:#000;
	background-color:#f5f5f5;
}

 
 /*------------Linkgrafik fuer moderne Browser----------------------------*/

a[title*="Externer"]  {
        background: url(../grafiken/linkzeiger-normal.png) no-repeat left bottom;
	padding-left:1.3em;
        margin-left:0.3em;
}
a[title*="Externer"]:visited {
        background: url(../grafiken/linkzeiger-normal.png) no-repeat left bottom;
}
a[title*="Externer"]:focus  {
        background: url(../grafiken/linkzeiger-hover.png) no-repeat left bottom;
}
a[title*="Externer"]:hover  {
        background: url(../grafiken/linkzeiger-hover.png) no-repeat left bottom;
}
  
/*========================================
   3. Layout allgemein # #startseite
   ========================================*/

/*:::::::::::::::::::3.1 #umhang::::::::::::::::::::::::::::::*/
#umhang  {
	width:46.88em;
	background:#f5f5f5;
	margin:1em auto;
	border:2px solid #944e2c;
}

/*:::::::::::::::::::3.2 #topnavi::::::::::::::::::::::::::::::*/
#topnavi  {
        position:relative;
        z-index:10; /* sondt verschwindet #topnavi hinter dem HG-Bild */
        float:right;
}
#topnavi li  {
        float:left;
        font-weight:bold;
        margin-right:48px;
}
#topnavi li a  {
        display:block;
        background:transparent;
        padding-top:163px;
}
#topnavi strong  {
        display:block;
        background:transparent;
        color:#de4d07;
        padding-top:163px;
}


#topnavi li#johannes a:hover,
#topnavi li#johannes a:focus,
#topnavi li#johannes a:active  {
        background:url(../grafiken/hannes1.jpg) no-repeat center top;

}
#topnavi li#stefan a:hover,
#topnavi li#stefan a:focus,
#topnavi li#stefan a:active  {
        background:url(../grafiken/stefan1.jpg) no-repeat center top;

}
#topnavi li#georg a:hover,
#topnavi li#georg a:focus,
#topnavi li#georg a:active  {
        background:url(../grafiken/georg1.jpg) no-repeat center top;
}


/*:::::::::::::::::::3.2 #kopf::::::::::::::::::::::::::::*/
#kopf  {
	position:relative;
	width:46.88em;
        background-color:#e3e1e1;
}

/*:::::::::::::::::::3.3 #sidebar::::::::::::::::::::*/
#sidebar  {
	float:left;
	width:9.5em;
	padding-bottom:1em;
}
#sidebar ul  {
	margin-top:2em;
}
#sidebar li  {
	width:140px;
	margin:0 0 8px -16px;
}
#sidebar a  {
	display:block;
        color:#00519e;
	text-decoration:none;
	padding:0.2em 0 0.3em 1em;
	border:1px solid #de4d07;
}
#sidebar a  {
	background-color:#f5f5f5;
}
#sidebar strong  {
        display:block;
        padding:0.2em 0 0.3em 1em;
}
#sidebar a:hover,
#sidebar a:focus,
#sidebar a:active,
#sidebar strong  {
        width:130px;
	background-color:#00519e;
	color:#f5f5f5;
	border:1px solid #de4d07;
	margin-left:15px;
}

#sprechstunde  {
	width:8em;
	text-align:center;
	border:1px solid #de4d07;
	-moz-border-radius:8px;   /* CSS 3 */
	-webkit-border-radius:8px;   /* CSS 3 */
	border-radius:8px;            /* CSS 3 */
	margin:9em 0 2em 1.4em;
}
#sprechstunde dt  {
	font-weight:bold;
	margin-top:0.2em;
}
#sprechstunde dd.telefon  {
	color:#de4d07;
	font-size:1.1em;
	font-weight:bold;
	margin:0.5em 0 0.3em 0;
}
#sprechstunde dd.telefon:hover  {
        background-color:#de4d07;
        color:#f5f5f5;
	font-size:1.1em;
	font-weight:bold;
	margin:0.5em 0 0.3em 0;
}

/*:::::::::::::::::::3.4 #inhalt::::::::::::::::::::::::*/
#startseite #inhalt h3  {
        font-size:1.1em;
        padding-bottom:0.3em;
}
#startseite #inhalt h4  {
        font-size:1em;
        font-weight:bold;
}
#startseite #inhalt h5  {
        font-size:0.9em;
}
.texthintergrund  {
        background-color:#efefd6;
        font-weight:500;
}
.abstandoben  {
        font-size:1em;
        margin-top:1.5em;
}

#inhalt  {
	float:right;
	width:32em;
	padding:2.2em 2em 1em 1em;
}
#inhalt ul  {
        margin-bottom:0.5em;
}


/*:::::::::::::::::::3.5 #fuss:::::::::::::::::::::::::::::*/
#fuss  {
	clear:both;
        position:relative;
	width:46.88em;
	height:7.5em;
	background:#525151 url(../grafiken/fuss-hg.png) repeat-x left bottom;
	color:#f5f5f5;
}


#fuss p  {
	font-size:1em;
	padding:1em 0 0 6em;
	margin-bottom:0;
}
#fuss p span  {
	font-size:1.2em;
	font-weight:bold;
}
#fuss li a  {
        background-color:#fff;
}  /*HG-Farbe für Skiplinks in #fuss */
#fuss li a:hover,
#fuss li a:focus,
#fuss li a:active  {
	color:#00519e;
}  /*Textfarbe für Skiplinks in #fuss */


#fuss a  {
	background:transparent;
	color:#f5f5f5;
}
#fuss a:hover,
#fuss a:focus,
#fuss a:active  {
	color:#f8d61c;
}


/*========================================
   4. Layout Unterseiten
   ========================================*/

/*~~~~~~~~~~~~~4.1 #johannes-berns~~~~~~~~~~~~~~*/

#johannes-berns #inhalt  {
        width:30em;
        padding-left:3em;
}
#johannes-berns #inhalt .liste-neben-bild  {
        margin-top:0.3em;
        margin-left:8.8em;
}

#johannes-berns #inhalt img  {
        float:left;
        margin:0 1.5em 1.5em 0;
}
#johannes-berns #inhalt h4  {
        clear:left;
}


/*~~~~~~~~~~~~~4.2 #stefan-berns~~~~~~~~~~~~~~~~*/
#stefan-berns #inhalt .liste-neben-bild  {
        margin-top:0.3em;
        margin-left:9.5em;
}
#stefan-berns #inhalt  {
        width:30em;
        padding-left:3em;
}
#stefan-berns #inhalt img  {
        float:left;
        margin:0 1.5em 1.5em 0;
}
#stefan-berns #inhalt h4  {
        clear:left;
}

/*~~~~~~~~~~~~~4.3 #georg-berns~~~~~~~~~~~~~~~~~*/
#georg-berns #inhalt .liste-neben-bild  {
        margin-top:0.3em;
        margin-left:9.2em;
}
#georg-berns #inhalt  {
        width:30em;
        padding-left:3em;
}
#georg-berns #inhalt img  {
        float:left;
        margin:0 1.5em 1.5em 0;
}
#georg-berns #inhalt h4  {
        clear:left;
}

/*~~~~~~~~~~~~~4.4 #leistungen~~~~~~~~~~~~~~~~~~*/

#leistungen #sidebar #sprechstunde  {
        margin-top:11.2em;
}
#leistungen #inhalt  {
        width:30em;
        padding-left:3em
}
#leistungen .vorsorge  {
        width:24em;
        background:#ecf2f7;
        padding:0.5em 0 0 1em;
        border:1px solid #ecf2f7;
        -moz-border-radius:8px;   /* CSS 3 */
	-webkit-border-radius:8px;   /* CSS 3 */
	border-radius:8px;            /* CSS 3 */
        margin-top:1.8em;
}
#leistungen .vorsorge h4  {
         color:#a00618;
         font-size:1.2em;
         text-align:center;
         margin-top:0;
         margin-bottom:0.5em;
}
#leistungen .vorsorge dl  {
        margin-bottom:0.8em;
}
#leistungen .vorsorge dt  {
         font-weight:bold;

}


/*~~~~~~~~~~~~~4.5 #team~~~~~~~~~~~~~~~~~~~~~~~~*/
#team #inhalt  {
        width:29.6em;
        padding-left:2.4em;
}

#team h3  {
        text-align:center;
        margin-bottom:1.5em;
}
#team #inhalt dt  {
        font-weight:bold;
}
#team #inhalt img  {
        float:left;
        margin:0 1em 1em 0;
}
#team #inhalt dl  {
        float:left;
        width:20em;
        margin-top:1em;
}

/*~~~~~~~~~~~~~4.6 #praxisfotos~~~~~~~~~~~~~~~~~~~~~*/
#praxisfotos #inhalt  {
        text-align:center;
        padding-top:0.5em;
}
#praxisfotos #inhalt ul  {
        margin-top:1.5em;
}
#praxisfotos #inhalt li  {
        display:inline;
        margin-left:1em;
}
#praxisfotos #inhalt li a img  {
        border:2px solid #00519e;
}
#praxisfotos #inhalt li a:hover img,
#praxisfotos #inhalt li a:focus img,
#praxisfotos #inhalt li a:active img,
#praxisfotos #inhalt li strong img {
        border:2px solid #de4d07;
}

/*~~~~~~~~~~~~~4.7 #anfahrt~~~~~~~~~~~~~~~~~~~~~*/
#anfahrt #inhalt img  {
        border:2px solid #00519e;
        margin-top:1em;
}

#anfahrt #inhalt dl  {
        margin-bottom:1.2em;
}
#anfahrt #inhalt dt  {
        color:#de4d07;
	background-color:inherit;
	font-weight:bold;
	margin-top:0.5em;
}
#anfahrt #inhalt dt span  {
        font-size:1.2em;
	padding-right:0.5em;
}
#anfahrt #inhalt dd  {
    text-indent:1em;
}
#anfahrt h5  {
        color:#a00618;
        background-color:inherit;
        margin-top:1em;
}
.bilderquelle  {
         color:#f5f5f5;
	 background-color:transparent;
	 font-size:0.6em;
	 text-align:center;
}
p.bilderquelle a  {
         background-color:transparent;
}

/*~~~~~~~~~~~~~4.8 #kontakt~~~~~~~~~~~~~~~~~~~~~*/

#kontakt #inhalt address  {
        padding-left:0;
        margin-bottom:1.5em;
}
#kontakt #inhalt h4  {
        font-size:1em;
}


/*========================================
   5. Sonstige Klassen
   ========================================*/


.listenzeichen1  {
        background:url(../grafiken/listenzeichen1.png) no-repeat left 0.2em;
	padding-left:1.4em;
	margin-bottom:0.3em;
}
.listenzeichen2  {
        background:url(../grafiken/listenzeichen2.png) no-repeat left 0.2em;
	padding-left:1.4em;
	margin-bottom:0.3em;
}
.listenzeichen3  {
        background:url(../grafiken/listenzeichen3.png) no-repeat left 0.2em;
	padding-left:1.4em;
	margin-bottom:0.3em;
}
.nachoben  {
       font-size:0.8em;
       padding:1em 0 0.2em 1em;
}
.skiplink  {
       position:absolute;
       top:-9999px;
       left:-9999px;
       width:0px;
       height:0px;
       display:inline;
}
.skiplinktab:focus,
.skiplinktab:active  {
        position:absolute;
	top:9999px;
	left:9999px;
	display:inline;
	width:13em;
	height:auto;
	background-color:#fff;
        color:#00519e;
	padding:0.6em;
	border:2px solid #000;
}
.clear  {
	clear:both;
	height:0;
	width:0;
	visibility:hidden;
	border:0;
} 
.clear2  {
        clear:left;
        height:1.5em;
        color:#f5f5f5;
        border:none;
}
.clear3  {
        clear:left;
}