/*Stylesheet für die Beispielseite der Dachdeckerfirma Thomas Ruppricht" */
*{padding: 0; margin:0;}
body {background-color:#434242; /*Hintergrundfarbe*/
color:white; /*Schriftfarbe*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
}
div#wrapper {
	background-color: #434242;
	color: black; 
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
div#kopfbereich {
	background-color: #434242; /*Gelb-Orange*/
	color: black; 
	padding: 0;
	padding-bottom: 5px;
	border-radius: 0px;
}
div#kopfbereich h1{
	text-align: left;
	background-color: #434242;
	padding: 0;
	position: absolute;
	margin-bottom: 30px;
	margin-left: 50px;
	border-bottom: 2px solid red;
	color: white;
	text-decoration: none;
}
div#kopfbereich h2{
	text-align: left;
	background-color: ;
	margin-left: 950px;
}
div#navibereich ul {margin-bottom: 0;}
div#navibereich {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left:20px;
	background-color: white;
	text-align: center;
	border-bottom: 1px solid black;
}
#navibereich li {
	display: inline; /*li nebeneinander anzeigen */
	list-style-type: none; /*ohne Aufzählungspunkte*/
	margin: 0; 
}
#navibereich a {
	border: 2px solid black;
	color: black;
	padding: 4px 8px 4px 8px;
}
#navibereich  li.sie-sind-hier a{
	color: #b22222;
	background-color: white;
	font-weight: bold;
	text-decoration: underline;
	box-shadow: 4px 4px 8px #888;
}
#navibereich a:hover,
#navibereich a:focus {
	color: #b22222;
	background-color: white;
	font-weight: bold;
}
#navibereich a:active {
	color:black;
	background-color: white;
	border-bottom-color: white;
}
div#textbereich {
	padding-top: 20px,;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	background-image: url(background.jpg);
	background-position: top, 100px;
	background-repeat: no-repeat;
	background-color: white;
}
div#textbereichbilder{
	padding-top: 20px,;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 20px;
	background-image: url(background.jpg);
	background-position: center top 10px;
	background-repeat: no-repeat;
	background-color: white;
	width: auto; 
	height: 200px;
}
div#Tabelle {
	padding: 0px 0px 5px 60px;
	font-size: 12px;
}
div#Tabelle h3{
	color: #b22222; 
	font-size: 17px;
	padding-top: 0;
	padding-left: 0;
}
div#Tabelle li{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	}
div#fussbereich {
	padding-top: 10px; /*unterhalb der Rahmenlinie*/
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	border-top: 1px solid black; /*Rahmenlinie oben*/
	margin-top: 0; /*oberhalb der Rahmenlinie*/
	background-color: white;
}

img#logo { /*Gestalte die Grafik mit id="logo"*/
	background-color: #434242;
	color: black;
	padding: 0px;
	border: 0px solid #d9d9d9;
}
h1{font-size:200%;}
h2{font-size:200%;}
address {
	text-align: center; /*zentrieren*/
	font-size: 80%; /*etwas kleiner als der Rest*/
	font-style: normal; /*normale Schrift, nicht kursiv*/
	letter-spacing: 1px; /*Abstand zwischen den Buchstaben*/
	line-height: 1.5; /*Zeilenabstand, ohne Einheit*/
}
a {
	text-decoration: none; /*Unterstreichungen entfernen*/
} 
a:link {color:#b22222;}
a:visited {color:#b22222;}
a:hover, 
a:focus {
	border-bottom: 1px solid #d90000
	}
a:active { 
	color:white;
	background-color: #d90000;
	}
div#textbereich a {
	border-bottom: 2px;
}
div#textbereich a:hover, 
div#textbereich a:focus{
	border-bottom: 1px solid #ff00ff;
}
p#slogan {
	color: #00000; 
}
/*Abstand nach unten*/
h2, p, ul, ol {margin-bottom: 0em;}
li {
	margin-bottom: 1em;
	margin-left: 2em;
}
.leistungen {
	margin-left: 4em;
}
#textbereich h2{
	margin-bottom: 0.5em;
	text-decoration: underline;
}
ul ul {margin-bottom: 0;}
form {
	background-color: transparent;
	width: 370px;
	padding: 10px;
	border: 0 solid black;
}
label { 
	display: block;
	cursor: pointer; /*Mauszeiger wird zur Hand*/
}
div#leistungen ul{
	padding-left: 100px;
}
textarea {
	width: 400px;
	border: 1px solid black;
	margin-bottom: 1em;
}
textarea {
	height: 15em;
}
input:focus,
textarea:focus {
	background-color: white;
}
.button a#pop {
    /*text-align:center;*/
    /*position:absolute;*/
    top:30%;
    left:45%;
	width: 80px;
    background-color:transparent;
    border: 2px solid black;
    /*color: #fff;*/
    /*display: block;*/
    /*float: right;*/
    margin-right: 10px;
    padding: 4px 8px 4px 8px;
    /*font-size:20px;*/
    text-decoration: none;
    color: black;

    /*-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;*/
}
a#pop:hover {
    border-color: black;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
	width: 960px;
	height: 500px;
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;
    overflow: scroll;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
   

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: #fff;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 15px;
    right: 10px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(0, 0, 0, 0.8);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: #ddd;
}
.popup p {
    margin-bottom: 10px;
}

.button {
	float: left;
	}