/*a:link                 { color:#000000;text-decoration:none; }
 a:visited         { color:#000000;text-decoration:none; }
 a:hover         { color:#FFFFFF;text-decoration:none; background-color:#000000; }
 a:active         { color:#000000;text-decoration:none; }*/
html             {
                 background-image: url("../grafik/hg.jpg");
                 background-repeat:repeat;
                 }
#wrapper         {
                 background-color: transparent;
                 margin: 0 auto;
                 width: 60%;
                 max-width: 98%;
                 height: auto;
                 /*border: 4px solid #CFCF00;Rand des wrapper
                 border-radius: 10px;
                 -moz-border-radius: 10px;
                 box-shadow: 0 0 10px 0px;
                 rgba (12, 3, 25, 0.8);*/
                 padding: 4px;
                 text-align:center;
                 }
#iwrapper        {
                 background-color: transparent;
                 margin: 0 auto;
                 max-width: 1000px;
                 width: 96%;
                 height: auto;
                 /*border: 4px solid #CFCF00;/*Rand des wrapper
                 -moz-border-radius: 10px;
                 border-radius: 10px;
                 box-shadow: 0 0 10px 0px
                 rgba (12, 3, 25, 0.8);*/
                 padding: 4px;
                 text-align:center;
                 }
#balken-1 {
         background-color: #832E2E;
         border: 2px outset #FFFFFF;
         margin: 1% auto 1% auto;
         width: 73%;
         height:5px;
         }
#balken-2 {
         background-color: #832E2E;
         border: 2px outset #FFFFFF;
         margin: 1% auto 1% auto;
         width: 90%;
         height:5px;
         }
#balken-i {
         background-color: #C04000;
         border: 1px solid #009f0f;
         margin: 0 auto 1% auto;
         width: 80%;
         height:5px;
         }
#bigimage{
         margin:0px auto 10px auto;
         max-width:98%;
         height: auto;
         width: auto;
         }
.linkeS  {width:8%; float:left; margin:1% 1% 1% 1%;}
#mitteS  {width:80%; float:left; margin:0% 0% 1% 0%;text-align:center;}
.rechteS {width:8%; float:right; margin:1% 1% 1% 1%;}
.tasten  {width:98%; height:auto; margin:0% 1% 1% 1%;}

.box1            {
                 display: inline-block;
                 text-align:center;
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 font-family: 'Trebuchet MS',Tahoma;
                 font-weight: normal;
                 font-size: 13px;
                 font-style: normal;
                 color: #FFFFFF;
                 margin: 1%;
                 }
.box2            {
                 display: inline-block;
                 text-align:center;
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 font-family: 'Trebuchet MS',Tahoma;
                 font-weight: normal;
                 font-size: 13px;
                 font-style: normal;
                 color: #FFFFFF;
                 margin: 4px;
                 }
.zaehler         {
                 position: relative;
                 display: inlay-block;
                 background-image: url("../grafik/zaehler.png");
                 text-align:center;
                 border:3px solid;
                 border-top-color:#FFFFFF;
                 border-left-color:#FFFFFF;
                 border-right-color:#5F5F5F;
                 border-bottom-color:#5F5F5F;
                 width: 111px;
                 height: 28px;
                 margin:0 auto;
                 }
.text            {
                 position: absolute;
                 top:6px;
                 left: 35px;
                 font-family: Arial,Trebuchet MS,Tahoma,Calibri;
                 font-weight: bold;
                 font-size: 15px;
                 font-style: normal
                 color: #000000;
                 }
/*<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
    .container {
      position: relative;
    }
    .text {
     position: absolute;
     color: white;
     top: 5px;
    }
</style>
</head>
<body>
    <h2> Positioning the text over image</h2>
    <div class="container">
     <img src="/img/DelftStack/logo.png" alt="DelftStack Logo">
     <h4 class="text"> Add any text to the image </h4>
    </div>
</body>
</html>*/