.gesuchinfos {
 
width:60px; 
height:40px; 
background:#beb5b5; 
color:#3b3636; 
float:left; 
margin:5px;
padding:5px;
font-size:8px;
text-align:center;
font-style:italic;
}

.gesuchinfoo {
 
width:40px; 
height:40px; 
background-image:url(https://blooddrops.de/skull/background.png);
padding:5px;
}

.gesuchinfos2 {
 
width:60px; 
height:40px; 
background:#beb5b5; 
color:#3b3636; 
float:left; 
margin:5px;
padding:5px;
font-size:8px;
text-align:center;
font-style:italic;
margin-left:20px;
}

.gesuchinfos3 { 
width:60px; 
height:25px; 
background:#beb5b5; 
color:#3b3636; 
float:left; 
margin:5px;
padding:5px;
font-size:8px;
text-transform:uppercase;
text-align:center;
font-style:italic;
}


.gesuchinfos4 { 
width:60px; 
height:25px; 
background:#beb5b5; 
color:#3b3636; 
float:left; 
margin:5px;
padding:5px;
font-size:8px;
text-align:center;
font-style:italic;
text-transform:uppercase;
margin-left:20px;
}

.gesuchlyrics { 
font-family: playfair display; letter-spacing:2px; font-size:9px; text-align:center;}

.gesucha {
 
border:1px solid #7a7474; width:453px; padding:5px; margin:auto;
}

.gesuchb {
 
width:450px; background:#aaa0a0; border:2px solid #7a7474;  text-align:justify; font-size:11px; color:#3b3636;
}

.gesuchleft {
 
margin-left:20px; width:120px; height:155px; float:left; background-image:url(https://blooddrops.de/skull/background.png); background:#560f0f;color:#beb5b5; padding:10px;
}

.gesuchright {
 
margin-right:15px; width:120px; height:155px; float:right; background-image:url(https://blooddrops.de/skull/background.png); background:#560f0f;color:#beb5b5; padding:10px;
}

.gesuchc {
 
margin:10px; background:#beb5b5;color:#3b3636; padding:10px;
}

.gesuche {
 
text-align:center; margin-top:-5px; font-family: 'Pacifico', cursive; font-size:22px;
}

.gesuchf {
 
width:80px; height:80px; border:2px solid #fff; margin:auto;
}

.gesuchg {
 
float:left; width:180px; height:155px; background:#beb5b5;color:#3b3636; padding:10px; overflow:auto;
}

.gesuchgright {
 
float:right; width:180px; height:155px; background:#beb5b5;color:#3b3636; padding:10px; overflow:auto;
}


.tha {
 
border:1px solid #7a7474; width:483px; padding:5px; margin:auto;
}

.thb {
 
width:480px; background:#aaa0a0; border:2px solid #7a7474;  text-align:justify; font-size:11px; color:#3b3636;
}

.thc {
 
margin:10px; background:#beb5b5;color:#3b3636; padding:10px;
}

.listiback {
	background: #aaa0a0;
	color: #3b3636;
	margin: 5px;
	padding: 10px;
	height: 70px;
	overflow: auto;
	border: 1px solid #7a7474;
}

.listiback2 {
	background: #aaa0a0;
	color: #3b3636;
	margin: 5px;
	padding: 10px;
	height: 450px;
	border: 1px solid #7a7474;
}

.listititel{
   font-family: times new roman; font-size:40px; font-style:italic;  text-transform:uppercase; background-image:url(../../../skull/background.png); background-repeat:repeat-x;     background-position:0 0;-webkit-font-smoothing:antialiased;     -webkit-background-clip:text;     -moz-background-clip:text;    text-align:center; background-clip:text;     -webkit-text-fill-color:transparent; padding:2px; position:relative; text-align:center; text-shadow: 2px 2px 3px rgba(255,255,255,0.1); padding:2px; border-bottom: 2px solid #560f0f;
}

.listnav ul {
  list-style: none;
  background-color: #aaa0a0;
  text-align: center;
  padding: 0;
  margin: 0;
 margin-bottom:2px;
border-bottom: 2px solid #560f0f;
}

.listnav li {
  font-family: 'times new roman', italic;
font-style:italic;
  font-size: 1.0em;
  line-height: 40px;
  height: 40px;
text-transform:uppercase;
font-weight:bold;
}

.listnav a {
  text-decoration: none;
  display: block;
-webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

.listnav a:hover {
  color:#beb5b5;
  background-image:url(../../../skull/background.png);
}

.listnav a.active {
  background-color: #aaa0a0;
  cursor: default;
}

@media screen and (min-width: 600px) {
  .listnav li {
    width: 145px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.0em;
}

/* Option 1 - Display Inline */
  .listnav li {
    display: inline-block;
    margin-right: 4px;
}

.listnav2 ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.listnav2 li {
  font-family: 'times new roman', italic;
font-style:italic;
  font-size: 12px;
}

.listnav2 a {
  text-decoration: none;
  display: block;
  padding:5px;
border:1px solid #7a7474;
-webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

.listnav2 a:hover {
  color:#beb5b5;
  padding:5px;
  background-image:url(../../../skull/background.png);
}

.listnav2 a.active {
  background-color: #aaa0a0;
  cursor: default;
}

@media screen and (min-width: 600px) {
  .listnav2 li {
    width: 120px;
    font-size: 12px;
    margin:5px;
}

/* Option 1 - Display Inline */
  .listnav2 li {
    display: inline-block;
    margin-right: 4px;
}

h1 {
   font-family: times new roman; 
font-size:25px; 
font-style:italic;  
text-transform:uppercase; 
background-image:url(../../../skull/background.png); background-repeat:repeat-x;     background-position:0 0;-webkit-font-smoothing:antialiased;     -webkit-background-clip:text;     -moz-background-clip:text;    text-align:center; background-clip:text;     -webkit-text-fill-color:transparent; 
padding:2px; 
position:relative; 
text-align:center; 
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

h2 {
	background: #beb5b5;
	padding: 2px;
	border-bottom: 2px solid #560f0f;
	font-family: times new roman;
	font-size: 12px;
	font-style: italic;
}

h3 {
	background: #aaa0a0;;
	padding: 2px;
	font-family: times new roman;
	font-size: 10px;
	font-style: italic;
        text-align:center;
}


h4 {
        background:#c2b8b8;
	margin: 1px;
	padding: 2px;
	font-family: times new roman;
	font-size: 8px;
	font-style: italic;
border:1px solid #aaa0a0;
}

female {
	font-weight:bold;
        color:#60466c;
       font-style:italic;
}

male {
	font-weight:bold;
          color:#3a4778;
        font-style:italic;
}

.tabs input[type=radio] {
         position: absolute;
          display: none; /* blendet die Radio-Punkte aus, die wir nicht brauchen */
     }

.tabs {
       width: 450px; /*könnt ihr anpassen */
       float: none;
       list-style: none;
       position: relative;
       padding: 0;
       margin:auto;
    height: 300px; /* Höhe muss definiert werden, damit Inhalt nicht überlappt */
     }

.tabs li{
       float: left; /* entweder rechts oder links */
     }

.tabs label { /* Defintion der anklickbaren Felder */
        display: block;
    width:65px;
padding:8px;
margin:2px;
        background: #a09797;
         cursor: pointer; /*kann weggelassen werden */

         position: relative;
      top: 0;
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
     }

.tabs label:hover {
     background-image:url(../../../skull/headernewsrotated.png);
       color: #beb5b5;
       top: 0;
     }
      
[type=radio]:checked ~ label { /* Defintion des ausgewählten Feldes */
     background-image:url(../../../skull/headernewsrotated.png);
       color: #beb5b5;
       top: 0;
     }
      
[type=radio]:checked ~ label ~ .tab-content {
         display: block;
     }

.tab-content{ /* Hier wird des ganz normale Inhalt des Tabs definiert wie Schrift, Farbe, Zeilenhöhe etc */
       z-index: 2;
       display: none;
       text-align: left;
       width: 100%;
    overflow: auto; /*Höhe (muss ca 50px kleiner sein als bei .tabs vorgegeben und Overflow sollten definiert werden, da ansonsten überschüssiger Text verschluckt wird */
       font-size: 10px;
       padding-top: 10px;
       padding: 5px;
       color: #000;
       position: absolute;
       top: 60px;
       left: 0;
       box-sizing: border-box;
       -webkit-animation-duration: 0.5s;
       -o-animation-duration: 0.5s;
       -moz-animation-duration: 0.5s;
       animation-duration: 0.5s;
     }
<style>
.pbox {
padding: 10px;
border: 1px solid #7a7474;
height: 120px;
overflow: auto;
font-size: 10px;
}

.pbut {
padding: 10px;
border: 1px solid #7a7474;
min-width:100px;
font-size: 10px;
}
	
.plotbox {
padding: 10px;
border: 1px solid #7a7474;
height: 100px;
overflow: auto;
font-size: 10px;
}



.dicepop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: hsla(0, 0%, 0%, 0.5); z-index: 97; opacity:0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; pointer-events: none; } .dicepop:target { opacity:1; pointer-events: auto; } .dicepop > .pop { background: #eee; width: 600px;  height: 400px; overflow-y:auto; position: relative; margin: 10% auto; padding:0px; z-index: 99; } .closepop { position: absolute; right: -5px; top:-5px; width: 100%; height: 100%; z-index: 98; }</style>