/*_____________________________________________________________
|
|   Quelltext zum Buch "Workshop HTML5 & CSS3"
|   Verlag:     dpunkt.verlag GmbH
|   Copyright:  2012 Stephan Heller <heller@h5c3.de>
|   Lizenz:     GNU General Public License
|   Verwendung der Quelltexte ausdrücklich gestattet und gewünscht!
|   Weitere Quelltexte finden Sie unter http://www.h5c3.de
|_______________________________________________________________ */

/**************************************************************
* Anweisungen für den Entwicklungsprozess
**************************************************************/

/* nav {
    background-color: #e8930c; 
    outline: 3px solid red 
} */


/* div {
	outline: 2px solid green
} */


/* blaue Hintergrundfarbe ist hiermit auskommentiert */ 
/* #kopf-oben, */
/* #linker-container, */
 /*#inhalt, */

 /* #fuss-oben,
 #copyright {
    background-color: #0dc8ff;
    */ 

/* #haupt-navigation {
	background-color: #f3bo44
} */


/**************************************************************
* Übergreifende Formate
**************************************************************/

* {
    /* font-family: "Lucida Calligraphy",verdana, sans-serif; */
font-family:  Arial, Helvetica, verdana, sans-serif;
    color: #222;
}
body {
    width: 860px; /*940px; */
    margin: auto;
    background: #E6E6E6; 
    /* background:#CEECF5; */
    /* font-size: 75%; */
}
#container {
position: relative;
width: 860px;
margin: 15px auto;
text-align: left;
color: #000;
background: #FFFFFF; /*WEISS */
/* border-top: 11px solid #EDF2FF; */
/* border-bottom: 11px solid #EBEBEB; */
} 

h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin-top: 0px;
    margin-bottom: 20px;
}
h1 {
    font-size: 20px;
    font-weight: 400;
}
h2 {
    font-size: 18px;
    font-weight: 400;
}
h3 {
    font-size: 16px;
    font-weight: 400;
}
h4 {
    font-size: 14px;
}
h5 {
    font-size: 13px;
}
h6 {
    font-size: 12px;
}
blockquote {
    font-style: italic;
    font-size: 14px;
}
ol {
    padding-left: 25px;
}
ul {
    padding-left: 20px;
}
figure {
    margin-left: 0px;
}
figcaption {
    font-size: 11px;
}

a:link, a:visited {
color: #000;
background-color: transparent;
font-family: Arial, Helvetica, verdana, sans-serif;
}
a:hover, a:active, a:focus {
color: #fff;
background: #577677;
text-decoration: none;
font-weight: bold;
}

.float-ende {
    clear: both;
}
.normaltext {
	font-weight: normal;
}
address {
	/* font-size: 0.86em; */
	font-style: normal;
	line-height: 1.4em;
}


/**************************************************************
* Kopf
**************************************************************/

#kopf {
    padding-top: 5px;
   /* background-image: url('../img/hg-kopf-punkte.png');
    background-repeat:  repeat-x; */
}
/* #logo {
    float: left;
}
*/

#kopf nav.obere-navigation {
    float: right;
}
#kopf-unten {
	margin-top: 15px;
}

/* #key-visual {
    float: right;
}                           was soll das? Buch S. 35*/  

#headercon {
width: 860px;
height: 158px;
/* border-left: 1px solid #EBEBEB; */
border-right: 1px solid #F5F5F5;
background: #FFFFFF; /*WEISS */
}

#logo2 {
margin-top: 15px;
height: 80px;
width: 860px;
background: url(../img/leuchtturm_klein_2611.jpg) 204px 0 no-repeat;
background-color:#CEECF5;
}
#logo2 a {
margin-left: 203px;
height: 80px;
/* width: 203px; */
} 
#logo2 a {
display: block;
margin: 0;
padding: 0;
background: transparent;
border: 0 none;
}


/**************************************************************
* Navigation
**************************************************************/

#linker-container {
font-family: Arial, Helvetica, verdana, sans-serif;
font-size: 70%;
position: absolute;
top: 190px; left: 10px;
width: 193px;
height: 650px;
margin: 0;
padding: 10px 0;
border-right: 1px solid #000;
}
#linker-container-folgeseite {
font-family: Arial, Helvetica, verdana, sans-serif;
font-size: 70%;
position: absolute;
top:190px; left: 10px;
width: 193px; 
height:900px;
margin: 0;
padding: 10px 0;
border-right: 1px solid #000;
}
#rechter-container {
font-family: Arial, Helvetica, verdana, sans-serif;
font-size: 70%;
position: absolute;
top: 190px; left: 650px;
width: 193px;
height: 470px;
margin: 0;
padding: 100px 0;
border-left: 1px solid #000;
}

.obere-navigation {
 	height: 58px; 
    width: 644px; 
    border-left: 1px solid #000;
    font-weight: normal;
    font-size: 12px;
    background-color: white; 
    margin-top: 15px;
    margin-right: 15px;
}
.obere-navigation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.obere-navigation ul li {
    float: right;
    border-left: 1px solid #000;
}
.obere-navigation ul li a {
    text-decoration: none;
    margin-top: 5px;
    display: block;
    color: #000;
    border-left: 2px solid white;
    padding: 10px 10px 10px 10px;
    font-family: Arial, Helvetica, verdana, sans-serif;
}
.obere-navigation ul li a:hover,
.obere-navigation ul li a:focus,
.obere-navigation ul li a.auswahl {
    color: #000;
    /* background-color: white; */
	background: transparent;
	border-bottom: 1px solid #000;

}
/* .obere-navigation ul li:first-child a {
	border-left: 0px;
} */

#haupt-navigation {
text-align: right;
margin-right: 5px;
}
#haupt-navigation li {
list-style-type: none;
}
#haupt-navigation a, 
#haupt-navigation span {
display: block;
line-height: 2.5em; /* Zeilenabstand */
padding-right: 15px;
font-weight: bold;
color: #000;
background: transparent;  
text-decoration: none;
font-family: Arial, Helvetica, verdana, sans-serif;
font-size: 120%; /* Buchstaben Größe */
}
#haupt-navigation a:link, 
#haupt-navigation a:visited {
color: #000;
background: transparent; 
}
#haupt-navigation a:hover, 
#haupt-navigation a:active, 
#haupt-navigation a:focus, 
#haupt-navigation a.on:link, 
#haupt-navigation a.on:visited, 
#haupt-navigation span {
color: #000;
background: transparent url(../img/menu1.gif) 100% 50% no-repeat;
}

.verlauf-navigation {
 /*    text-transform: uppercase; */ 
    width: 744px; 
  /*  border-left: 1px solid #000; */
    font-weight: normal;
    font-size: 12px;
    /* background-color: white; */
    /* background-color: #CEECF5;  hellblau */ 
    margin-top: 15px;
    margin-right: 15px;
    /* font-style: italic; */
}
.verlauf-navigation ul {
    list-style-type: none;
    margin: 0px; 
    padding: 0px; 
}
 .verlauf-navigation ul li  {
    float: left;
    border-right: 1px solid #000; 
} 
.verlauf-navigation ul li a,
.verlauf-navigation span  {
    text-decoration: none;
    margin-top: 5px;
    /* display: block; */ 
    color: #000;
    /* border-left: 2px solid white; */
    padding: 10px 10px 10px 10px;
    font-family: /* "Lucida Calligraphy", */ Arial, Helvetica, verdana, sans-serif;
    line-height: 2.1em;
	/* background-color: #000; */
}
.verlauf-navigation span {
	    color: #29088A;
	    /* font-weight: bold; */
}
.verlauf-navigation ul li a:hover,
.verlauf-navigation ul li a:focus,
.verlauf-navigation ul li a.auswahl {
    color: #000;
   /*  background-color: white; */  
	background: transparent; 
    border-bottom: 1px solid #000;

}


/**************************************************************
* Inhalt
**************************************************************/

.teaser {
font-weight: bold;
color: #7C9C9E;
padding-left: 20px;
}
 
#teaser-unten {
font-weight: normal;
padding-left: 10px;
margin-top: 350px;
} 

#inhalt { 
margin-left: 220px; /*110px; */
width: 394px;
/* margin-right: 255px; */
padding-top: 25px;
padding-bottom: 25px;
/* border-left: 1px solid #000; */
font-family: "Lucida Calligraphy", Arial, Helvetica, verdana, sans-serif;
color: #4D65A0;
/* min-height: 850px; */
}
#inhalt h2{
font-family: "Lucida Calligraphy", Arial, Helvetica, verdana, sans-serif;
color: #4D65A0; 
}


/**************************************************************
* Folgeseiten
**************************************************************/

#inhalt-folgeseite { /*mit Bildern */
margin-left: 220px; /*110px; */
width: 550px;
/* margin-right: 255px; */
padding-top: 25px;
padding-bottom: 25px;
/* border-left: 1px solid #000; */
font-family: "Lucida Calligraphy", Arial, Helvetica, verdana, sans-serif;
color: #4D65A0;
min-height: 850px;          /******* hier Unterschied zu "inhalt"   ******/
}

#text {
min-height: 762px;
font-family: "Lucida Calligraphy", Arial, Helvetica, verdana, sans-serif;
color: #4D65A0; 
}

img.klein {border: 1px solid #4D65A0}
img.ungerade {float:left; /*padding-right:10px */}
img.gerade {float:right; /* padding-left:10 px */}
div.bildchen {clear:both} 
div.bildchen { /* p, a, address, li, caption, td, th, label, input, blockquote, pre; */  
font-size: 0.90em;
font-family: "Lucida Calligraphy", Arial, Helvetica, verdana, sans-serif;  
color: #4D65A0;
}


/**************************************************************
* Impressum/Datenschutz
**************************************************************/

#impressum { 
margin-left: 220px; /*110px; */
width: 550px;
padding-top: 25px;
padding-bottom: 25px;
color: #4D65A0;
min-height: 850px;
}
#impressum h1, h2, address, p, strong {
font-family:  Arial, Helvetica, verdana, sans-serif;
color: #4D65A0;  
} 


/**************************************************************
* Fuß
**************************************************************/

#fuss-oben {
    background: #FAFAFA;
    color: #7C9C9E;
    height: 70px; 
	margin-top: 20px;
	padding-left: 20px;
	margin-right: 0px; 
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fuss-unten {
	font-family: "Lucida Calligraphy", Arial, Helvetica, verdana, sans-serif;
	font-size: 0.75em;
    color: #4D65A0; 
    margin-top: 120px;
	margin-left: 0px;
	margin-right: 100px;
    height: 30px;
}

#fuss {
    padding-top: 5px;	
}

#copyright {
    background-image: url('../img/hg-punkt.png');
    padding: 15px;
}
#copyright {
	margin-top: 10px;
}
#copyright p {
    background-color: #fff;
    margin: 0px;
    width: 220px;
    padding-left: 10px;
    font-size: 10px;
}