<style type="text/css">
html, body{margin: 0;background:#EDDBBA;text-align:center;font-family:"PT Sans";}

h1 {margin: 10px 0 0 0;}
h2 { margin: 10px 0 10px 0;font-style:italic;}

img{width:auto;
	height:80px;
	object-fit: contain;
	}

/*
6b976f  'inaktiver rasen'
007e0c	'verkaufter rasen'
7c623d	'schotter'
*/


#rasen{border:1px solid #a6c1a9;border-collapse:collapse;text-align:left; margin: 0 auto;}

#rasen td {width:20px;height:20px; min-width:20px; min-height:20px; border-left:1px solid #a6c1a9;border-top:1px solid #a6c1a9;background-color:#007e0c; overflow:hidden;padding:0;}



#rasen td.inactive {background-color: #6b976f;}
#rasen td.elfmeter-rechts.inactive a, #rasen td.elfmeter-links.inactive a{background-color: #6b976f;}
#rasen td a{with:20px;height:20px;display:block;padding:0;margin:0}
#rasen td a.elfer{height:358px; background-color:#6b976f;}

#rasen td a.fuenfer{position:absolute;}
#rasen td a.punkt{position:absolute;margin-top:168px;z-index:1;background:url(images/punkt.png) no-repeat center center ;width:20px;height:20px;background-color: #6b976f;}
#rasen td a.punkt.aktiv{background-color: #007e0c;}
#rasen td.elfmeter-rechts a.punkt {margin-left:25px;}
#rasen td.elfmeter-links a.punkt {margin-left:120px;}
#rasen td a.fuenfer{width:60px;height:206px;margin-top:75px;border-top:1px solid #a6c1a9;border-bottom:1px solid #a6c1a9;background-color: #6b976f;}
#rasen td a.fuenfer.aktiv{background-color: #007e0c;}
#rasen td.elfmeter-rechts a.fuenfer{margin-left: 106px;border-left:1px solid #a6c1a9;border-right:1px solid #a6c1a9;}
#rasen td.elfmeter-links a.fuenfer{border-right:1px solid #a6c1a9; background-color: #6b976f;}


#rasen td.linie a{background:url(images/linie.png) no-repeat center center ;}
#rasen td.mittelkreis a{background:url(images/mittelkreis.png) no-repeat center center;height:146px;}
#rasen td.ecke-links-oben a{background:url(images/ecke-links-oben.png) no-repeat center center ;}
#rasen td.ecke-rechts-oben a{background:url(images/ecke-rechts-oben.png) no-repeat center ;}
#rasen td.ecke-links-unten a{background:url(images/ecke-links-unten.png) no-repeat center ;}
#rasen td.ecke-rechts-unten a{background:url(images/ecke-rechts-unten.png) no-repeat center ;}
#rasen td.mittelkreis a.anstoss {background:url(images/punkt.png) no-repeat center #6b976f;width:20px;height:20px;position:absolute;z-index:2;margin-left:63px;margin-top:63px;}
#rasen td.punkt-rechts a{background:url(images/punkt.png) no-repeat center;width:20px;height:20px;}
#rasen a { color: inherit; } 



#rasen td a:hover, #rasen td a.anstoss:hover, #rasen td a.active, #rasen td a.anstoss.aktiv{background-color:#007e0c; }
#rasen td a:hover, #rasen td a.fuenfer:hover, #rasen td a.active, #rasen td a.fuenfer.aktiv{background-color:#007e0c; }
#rasen td a:hover, #rasen td a.elfer:hover, #rasen td a.active, #rasen td a.elfer.aktiv{background-color:#007e0c; }




#rasen td.schotter, #rasen td.tor {background-color:#7c623d;}
#rasen td.schotter {height: 40px;}
#rasen td.tor {width: 40px;}
#rasen td.tor a {height: 120px; width: 25px; background: url(images/tor.png) no-repeat center center;margin-right:15px;}
#rasen td.tor-links a {margin-left: 15px;margin-right:0;}


#add-dialog, .edit-dialog,#reserviert-dialog, .details {display: none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.7);z-index:100;overflow-y: scroll;}
.window {width:auto; min-width: 450px; height:auto; min-height:300px;position:absolute;top:42%;margin-top:-290px;z-index:101;left:50%;margin-left:-225px;background:#fff;text-align:left;}
.window h2 {  margin:0; float:left;padding: 20px 0 20px 20px;}
.window a:hover {background-color:#0b9ed3 !important;}
.window form {padding: 20px; border-top: 1px solid #d5d5d5;clear: both;}
.window label {display: inline-block; width: 100px; padding: 8px 0; vertical-align:top;}
.window input, .window textarea {width: 275px; padding: 5px 8px;}
.window .submit {margin-left:104px; color: #fff; background-color:#0dbdfd;border:0;margin-top:10px;cursor: pointer;width:293px;}
.window .submit:hover {background-color:#0b9ed3;}
.formButton {float: right; margin:17px 17px 0 0 !important;display:inline-block !important; text-decoration:none;background:none !important; background-color: #0dbdfd !important; padding: 8px !important;color:#fff !important; width: auto !important; height: auto !important;}
form .pflicht {color: red;}

#rasen td.raster,#rasen td a.fuenfer.aktiv.raster {background-image: url(images/raster.gif);}

#reserviert-dialog .window {height: 160px;margin-top:-80px;}
#reserviert-dialog .window p, .details .window p {clear:both;padding: 20px;border-top: 1px solid #d5d5d5;}



.details .window  {height: auto; width: 400px; margin-top:-10%; position: absolute; }
.details .window p .label {display:inline-block;margin-top:5px;width:100px;}

.details p{
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}

p.error {text-align:center; font-weight:bold; color: red;}
p.success {text-align:center; font-weight:bold; color: darkgreen;}


td.borderTopLine	{border-top: 2px solid #ffffff !important;}
td.borderLeftLine {border-left: 2px solid #ffffff !important;}
td.borderRightLine {border-right: 2px solid #ffffff !important;}	
td.borderBottom	{border-bottom: 1px solid #a6c1a9 !important;}
	
td.tor, td.schotter.unten{border-top:0 !important;}




-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;




input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -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 */
  padding: 10px;
}









</style>