p {
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
}

      #nachrichtenbox {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    padding: 10px;
    position: fixed;
    font-family: arial;
    width: 26%;
    bottom: 20px;
    right: 20px;
    resize: both;
    overflow: auto;
    background: rgb(245,246,246); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
    }


label{
    display: inline-block;
    width: 220px;
}

select {
	width:175px;
	}

table {
	margin-left: 20px;
	margin-right: 20px;
}

td {
	border-collapse:collapse;
	border-spacing:5px;
}

h4 {
	font-size: 1.25em;
}

.referenz {
	font-size: 1em;
	background-color:#CCCCCC;
	padding-left:10px;
}

.tinte {
	font-size: 1em;
	background-color:#CCCCCC;
	padding-left:10px;
	padding-right:10px;
}

td a {
    color:#000000;
	font-weight: bold;
}

a {
	color: #000000;
	text-decoration: underline;
}

a.lizenzen {
	color: #000000;
	text-decoration: none;
    line-height: 1.5;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	height:auto;
	min-height:100%;
}






summary {
    font-weight: bold;
    margin-left: 20px;
    font-size: 1.5em;
  }





.Webseite {
	width:934px;
	background-color:#FFFFFF;
	text-align:center;
	border:#000000;
	border-width:1px;
	border-style:solid;
	height:100%;
	vertical-align: middle;
}

.Content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	background-color: #FFFFFF;
	position:relative;
	width: auto;
	height: auto;
	min-height:100%;
}

.Header {
	 height:158px;
	 background-image:url(../images/header.jpg);
}

.Inhalt {
	border:#000000;
	border-top:solid;
	border-width:1px;
	min-width:100%;
	min-height:100%;
	height:100%;
	position:relative;
	height:460px;
	}

.ObenNavi {
	background-color:#CCCCCC;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
	width: 100%;
	height: 20px;
	position:relative;
	text-align:center;
	vertical-align:middle;
	border-top:solid #000000;
	border-width:1px;
	left: 0px;
}

.ObenNavi a {
    color:#000000;
	background-color:#CCCCCC;
	font-weight: bold;
}

.Navi {
	background-color: #cfcfcf;
	color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
	width: 175px;
	height: 100%;
	position:absolute;
	line-height:8px;
	text-align:left;
	left: 0px;
}
.Seite {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	width: 781px;
	text-align:left;
	height: 460px;
	overflow:auto;
	left: 153px;
	position:absolute;
}

.Seite a {
    color:#000000;
	font-weight: bold;
}


input[type=checkbox] {
   width: 30px; /*Desired width*/
 -ms-transform: scale(1.5); /* IE */
 -moz-transform: scale(1.5); /* FF */
 -webkit-transform: scale(1.5); /* Safari and Chrome */
 -o-transform: scale(1.5); /* Opera */

}

.Footer{
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	background-color:#CCCCCC;
	width:934px;
	height:20px;
	border:#000000;
	border-top:solid;
	border-width:1px;
	bottom:0px;
	position:absolute;
	left:0px;
}
.UntenNavi a {
    color:#000000;
	background-color:#CCCCCC;
	font-weight: bold;
}

.Ueberschrift {
	margin-left: 20px;
	margin-right: 20px;
	font-family: Arial, Helvetica, sans-serif;
	color:#aa121e;
	font-size: 2em;
	font-weight: bold;
}

#map {
	width:530px;
	height:400px;
	margin-left: 20px;
	margin-right: 20px;
	border:#000000;
	border-style:solid;
	border-width:1px;
}

.eingabebox_normal {
	width:350px;
	border:1px solid #CCCCCC;
	border-radius:4px;
}

.eingabebox_mini {
	width:25px;
	border:1px solid #CCCCCC;
	border-radius:4px;
}

.eingabebox_doppelt {
	width:650px;
	border:1px solid #CCCCCC;
	border-radius:4px;
}

.eingabebox_ort {
	width:245px;
	border:1px solid #CCCCCC;
	border-radius:4px;
}


textarea{
border:1px solid #CCCCCC;
	border-radius:4px;
}

.button {
	width:140px;
    height:40px;
	border:1px solid #CCCCCC;
	border-radius:4px;
}

.buttonbreit {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0f0f0), color-stop(1, #f0f0f0));
	background:-moz-linear-gradient(top, #f0f0f0 5%, #f0f0f0 100%);
	background:-webkit-linear-gradient(top, #f0f0f0 5%, #f0f0f0 100%);
	background:-o-linear-gradient(top, #f0f0f0 5%, #f0f0f0 100%);
	background:-ms-linear-gradient(top, #f0f0f0 5%, #f0f0f0 100%);
	background:linear-gradient(to bottom, #f0f0f0 5%, #f0f0f0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#f0f0f0',GradientType=0);
	background-color:#f0f0f0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #000000;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:1em;
	font-weight:bold;
	padding:4px 6px;
	width:320px;
	text-decoration:none;
	text-align:center;
    height:30px;
}

.buttonnavi {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0f0f0), color-stop(1, #f0f0f0));
	background:-moz-linear-gradient(top, #f0f0f0 5%, #f0f0f0 100%);
	background:-webkit-linear-gradient(top, #f0f0f0 5%, #f0f0f0 100%);
	background:-o-linear-gradient(top, #f0f0f0 5%, #f0f0f0 100%);
	background:-ms-linear-gradient(top, #f0f0f0 5%, #f0f0f0 100%);
	background:linear-gradient(to bottom, #f0f0f0 5%, #f0f0f0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#f0f0f0',GradientType=0);
	background-color:#f0f0f0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #000000;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:1em;
	font-weight:bold;
	padding:4px 6px;
	width:220px;
	text-decoration:none;
		text-align:center;
    height:30px;
}

.suche {
	width:240px;
    height:40px;
	border:1px solid #CCCCCC;
	border-radius:4px;
    margin-left:20px;
    font-size:1em;
}

.sucheups {
	width:320px;
    height:40px;
	border:1px solid #CCCCCC;
	border-radius:4px;

    font-size:1em;
}

.eingabebox_strasse {
	width:285px;
    border: 1px solid #CCCCCC;
	border-radius:4px;
}

.eingabebox_plz {
	width:60px;
    border: 1px solid #CCCCCC;
	border-radius:4px;
}

td.grau{
    background: #aaaaaa;
}

h1 {
	margin-left:20px;
}

.Logo {
	margin-left:20px;
}


.m-signature-pad {
    position: absolute;
    font-size: 10px;
    width: 900px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -200px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
}

.m-signature-pad:before, .m-signature-pad:after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 50%;
    height: 10px;
    left: 20px;
    bottom: 10px;
    background: transparent;
    -webkit-transform: skew(-3deg) rotate(-3deg);
    -moz-transform: skew(-3deg) rotate(-3deg);
    -ms-transform: skew(-3deg) rotate(-3deg);
    -o-transform: skew(-3deg) rotate(-3deg);
    transform: skew(-3deg) rotate(-3deg);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.m-signature-pad:after {
    left: auto;
    right: 20px;
    -webkit-transform: skew(3deg) rotate(3deg);
    -moz-transform: skew(3deg) rotate(3deg);
    -ms-transform: skew(3deg) rotate(3deg);
    -o-transform: skew(3deg) rotate(3deg);
    transform: skew(3deg) rotate(3deg);
}

.m-signature-pad--body {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 80px;
    border: 1px solid #f4f4f4;
}

.m-signature-pad--body
    canvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
    }

.m-signature-pad--footer {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    height: 60px;
}

.m-signature-pad--footer
    .description {
        color: #C3C3C3;
        text-align: center;
        font-size: 1.2em;
        margin-top: 1em;
    }

.m-signature-pad--footer
    .left, .right {
        position: absolute;
        bottom: 0;
    }

.m-signature-pad--footer
    .left {
        left: 0;
    }

.m-signature-pad--footer
    .right {
        right: 0;
    }

* {
	box-sizing:border-box;
}



table, td, tr, th {
	border:0;
	border-collapse: collapse;
	text-align: left;
}

td, tr, th {
	padding:0.5em;
}

th {
	background:#eee;
	font-weight: bold;
}

label{
    display: inline-block;
    width: 220px;
    margin-left: 20px;
    margin-top: 10px;
    font-weight: bold;
}


.cal{

	text-align: center;
}


tr:nth-child(even) {
    background-color: #f3d170;
}
tr:nth-child(odd) {
    background-color: #f1f1f1;
}



.tooltip {
	color: #000000;
	outline: none;
	text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute;
	left: 4em;
	top: 0em;
	z-index: 99;
	margin-left: 0;
	width: 300px;
}
.tooltip:hover span img {
	border: 0;
	margin: -10px 0 0 -55px;
	float: left;
	position: absolute;
}
.tooltip:hover span em {
	font-family: Candara, Tahoma, Geneva, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	display: block;
	padding: 0.2em 0 0.6em 0;
}
.tooltip .custom {
	padding: 0.5em 0.8em 0.8em 2em;
}

.tooltip .help {
	background: #eaeaea;
	border: 1px solid #000000;
}



* {box-sizing: border-box;}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f1f1f1;
}

.kopf {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 20px 10px;
}

.kopf a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}

.kopf a.logo {
    font-size: 25px;
    font-weight: bold;
}

.kopf a:hover {
    background-color: #ddd;
    color: black;
}

.kopf a.active {
    background-color: #cd2626;
    color: white;
}

.kopf a.rot {
    background-color: #cd2626;
    color: white;
}

.kopf-right {
    float: right;
}

.buttonneu {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6c846), color-stop(1, #f6c846));
	background:-moz-linear-gradient(top, #f6c846 5%, #f6c846 100%);
	background:-webkit-linear-gradient(top, #f6c846 5%, #f6c846 100%);
	background:-o-linear-gradient(top, #f6c846 5%, #f6c846 100%);
	background:-ms-linear-gradient(top, #f6c846 5%, #f6c846 100%);
	background:linear-gradient(to bottom, #f6c846 5%, #f6c846 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#f6c846;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 10px;
	text-decoration:none;
        text-align:center;
        width:220px;
}

.buttonneunavi {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5291bd), color-stop(1, #5291bd));
	background:-moz-linear-gradient(top, #5291bd 5%, #5291bd 100%);
	background:-webkit-linear-gradient(top, #5291bd 5%, #5291bd 100%);
	background:-o-linear-gradient(top, #5291bd 5%, #5291bd 100%);
	background:-ms-linear-gradient(top, #5291bd 5%, #5291bd 100%);
	background:linear-gradient(to bottom, #5291bd 5%, #5291bd 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#5291bd;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 10px;
	text-decoration:none;
        text-align:center;
        width:220px;
}

.buttonneuaktiv {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d85e52), color-stop(1, #d85e52));
	background:-moz-linear-gradient(top, #d85e52 5%, #d85e52 100%);
	background:-webkit-linear-gradient(top, #d85e52 5%, #d85e52 100%);
	background:-o-linear-gradient(top, #d85e52 5%, #d85e52 100%);
	background:-ms-linear-gradient(top, #d85e52 5%, #d85e52 100%);
	background:linear-gradient(to bottom, #d85e52 5%, #d85e52 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#d85e52;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 10px;
	text-decoration:none;
        text-align:center;
        width:220px;
}

.buttonneu:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
	background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
	background-color:#e9e9e9;
}

.buttonneunavi:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
	background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
	background-color:#e9e9e9;
}
.buttonneu:active {
	position:relative;
	top:1px;
}


.avatar-circle {
    width: 40px;
    height: 40px;
    background-color: #de1313;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}


.initials {
    position: relative;
    top: 10px; /* 25% of parent */
    font-size: 20px; /* 50% of parent */
    line-height: 20px; /* 50% of parent */
    color: #fff;
    font-family: "Courier New", monospace;
    font-weight: bold;
}



@media screen and (max-width: 1024px) {
    .m-signature-pad {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        min-width: 250px;
        min-height: 140px;
        margin: 5%;
    }
    #github {
        display: none;
    }

    .Logo {
max-width: 100%;
height: auto;
}
}

@media only screen and (max-width: 768px) {
table, tr, td {
		padding:0;
		border:1px solid black;
	}

	table {
		border:none;
	}

	thead {
		display:none;
	}

	tr {
		float: left;
		width: 100%;
		margin-bottom: 2em;
	}

	td {
		float: left;
		width: 100%;
		padding:1em;
	}



	td::before {
		content:attr(data-label);
		border-right:0px solid black;
		width: 25%;
		float:left;
		padding:1em;
		font-weight: bold;
		margin:-1em 1em -1em -1em;
	}


    p::before {display:none;}


label{
    display: block;

}


.legende{
    display: none;
}

.cal{
  width: 90%;
}

.eingabebox_normal {
margin-left:20px;
}

.eingabebox_doppelt {
margin-left:20px;
	width:350px;
}

.eingabebox_plz {
margin-left:20px;
}


.eingabebox_mini {
 margin-left:20px;
}

.eingabebox_strasse {
margin-left:20px;
}

.eingabebox_ort {
margin-left:20px;
}

.button{
margin-left:20px;
}

input[type='checkbox'] {
margin-left:20px;
}

textarea {
margin-left:20px;
width:100%;
}


.Statistik{
    width:90%;
}

.buttonnavi{
width:100%;

}

.Logo {
max-width: 100%;
height: auto;
}


.buttonneu{
width:100%;

}

.buttonneuaktiv{
width:100%;

}


.buttonneunavi{
width:100%;

}


    .kopf a {
        float: none;
        display: block;
        text-align: left;
    }
    .kopf-right {
        float: none;
    }

    .buttonneu{
width:100%;

}
}

}



@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .m-signature-pad {
        margin: 10%;
    }

     #nachrichtenbox {
        width: 90%;
         }
}

@media screen and (max-height: 320px) {
    .m-signature-pad--body {
        left: 0;
        right: 0;
        top: 0;
        bottom: 32px;
    }
    .m-signature-pad--footer {
        left: 20px;
        right: 20px;
        bottom: 4px;
        height: 28px;
    }
    .m-signature-pad--footer
        .description {
            font-size: 1em;
            margin-top: 1em;
        }

        .Statistik{
    width:90%;
}

.buttonnavi{
width:100%;

}

.buttonneu{
width:100%;

}

 #nachrichtenbox {
        width: 90%;
         }


}