@charset "UTF-8";
/* Stylesheet for Laura's site */

* { padding: 0; margin: 0; }	/* Stylesheetvorgabe vom Browser deaktiviert! */

body { 
color: white;	/* Schriftfarbe */
/* background-color: #000000; /* Hintergrundfarbe*/
font-size: small;
background: #eaeaea  url(bg_impro.jpg) top left repeat-y;

}

h1 { font-size: 150%; }
h2 { font-size: 130%; font-family: Georgia, sans-serif; padding: 20px 0 10px 0; }
h3 { font-size: 90%; font-family: Georgia, sans-serif; font-style: italic; padding: 10px 0 10px 0; }

address {
text-align: left; /* links ausrichten */
font-size: 70%;
font-style: normal;
letter-spacing: 2px;
line-height: 1.5em;
font-family: Georgia;
font-variant: small-caps;
padding-left: 15px;

}

a { text-decoration: none; outline: none; } /* Unterstrich bei Links entfernen */

a:link { color: #FF00FF; }
a:visited { color: #FF00FF; }

a:hover, a:focus {
border-bottom: 1px solid #FF00FF;
}
a:active {
color: white;
}



h2, h3, p, ul, ol { margin-bottom: 1em; }

ul ul { margin-bottom: 0; }

li { margin-left: 2em; }


.thumbnailqui,
.thumbnailqua,
.thumbnailtre,
.thumbnailzwo,
.thumbnail{
position: relative;
z-index: 0;
padding-bottom: 5px;
}

.thumbnailqui:hover,
.thumbnailqua:hover,
.thumbnailtre:hover,
.thumbnailzwo:hover,
.thumbnail:hover{
z-index: 50;
background-color: transparent;
padding-bottom: 2px;
}

.thumbnailqui span,
.thumbnailqua span,
.thumbnailtre span,
.thumbnailzwo span,
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding-bottom: 5px;
top: 100px;
border: 2px dashed #FF20FF;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnailqui span img,
.thumbnailqua span img,
.thumbnailtre span img,
.thumbnailzwo span img,
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding-bottom: 10px;
}

.thumbnailqui:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
padding: 20px;
top: -300px;
left: 125px; /*position where enlarged image should offset horizontally */
font-family: Arial, serif;
font-weight: 500;
line-height: 180%;
}


.thumbnail:hover span{ /*CSS for enlarged image on hover*/
width: 400px;
visibility: visible;
padding: 20px;
top: -200px;
left: 125px; /*position where enlarged image should offset horizontally */
font-family: Arial, serif;
font-weight: 500;
line-height: 180%;
}

.thumbnailzwo:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
padding: 20px;
top: -400px;
right: 140px; /*position where enlarged image should offset horizontally */
font-family: Arial, serif;
font-weight: 500;
line-height: 180%;
}

.thumbnailtre:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
padding: 20px;
top: -200px;
left: 50px;
font-family: Arial, serif;
font-weight: 500;
line-height: 180%;
}

.thumbnailqua:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
padding: 20px;
top: -150px;
left: -500px;
font-family: Arial, serif;
font-weight: 500;
line-height: 180%;
}





#wrapper {
color: white;
width: 900px; /* Breite des Inhaltsbereichs */
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;

}

#kopfbereich {
position: relative;
color: black;
font-family: Georgia, sans-serif;
font-weight: normal;
font-size: 180%;
/* background-color: white;
opacity: .7; */
padding: 10px 20px 10px 15px;
}


#logo {
padding: 20px 0 10px 0;

}


#navibereich {
padding: 4px 0px 4px 8px;
margin: 0 20px 0 20px;
font-family: Georgia, serif;
font-weight: bold;
font-style:oblique;
font-size: 150%;
text-align: right;
color: black;
}

#navibereich ul { margin-bottom: 0; }

#navibereich li { /* alle listenelemente IM navigationsbereich*/
display: inline; /* Listenelemente nebeneinander anzeigen */
list-style-type: none;
margin: 0;
}

#navibereich a { 
color: black;
padding: 420px 8px 752px 8px;

 }

#navibereich a:active,
#navibereich a:hover,
#startseite #nav01 a, 
#wir #nav02 a, 
#bilder #nav03 a,
#spiele #nav04 a,
#archiv #nav05 a,
#links #nav06 a,
#kontakt #nav07 a
{
color: white;
background-color: #FF20FF;
border-bottom: 10px #FF20FF;
}



#textbereich {
position: relative;
float:left;
width: 490px;
color: black;
font-family: Arial, serif;
font-weight: 500;
line-height: 180%;
/*font-variant:small-caps;*/
padding: 10px 20px 30px 25px;
border: 2px dashed #FF00FF;
top: 10px;
right: 5px;
margin-top: 20px; 
background-color: white;
/*opacity: .99; 
filter: alpha(opacity=99); /* IE 
opacity: 0.99;  opera */
}

/*#textbereich img {
float: left;
margin: 15px 15px 30px 0;
}*/

#textbereich li { /* alle listenelemente IM navigationsbereich*/
list-style-type: none;
font-size: 90%;
}

#textbereichzwo {
position: relative;
margin: 30px 10px 10px 580px;
background: url(text.png);
padding: 10px 20px 30px 50px;
width: 230px;
height: 285px;
color: black;
font-family: Arial, serif;
font-weight: 500;
line-height: 180%;
/*font-variant:small-caps;
border: 2px dashed #FF00FF;*/
}

/*margin: 20px 20px 0 580px;*/

#textbereichzwo font {
margin: 15px 15px 30px 15px;
}

#bildbereich {
position: relative;
margin: 30px 10px 0px 580px;
width: 300px;
height: 1%;
color: black;
/*font-variant:small-caps;*/
border: 2px dashed #FF00FF;
}

#bildbereichzwo {
position: relative;
margin: 30px 10px 0px 580px;
width: 300px;
height: 1%;
color: black;
/*font-variant:small-caps;*/
border: 2px dashed #FF00FF;
}

#fussbereich {
clear: both;
position: relative;
width:100%;
height: 1%;
padding-top: 20px;
/* border-top: 1px solid #8c8c8c; */
color: black;
/* background-color: white;
opacity: .7; */

}