@import url(https://quizdidaktik.de/libs/googlefonts/css/Ubuntu.css);
    @import url(https://quizdidaktik.de/libs/googlefonts/css/UbuntuMono.css);

    body, table {
      font-family:Ubuntu,"Helvetica-Neue",Helvetica,Arial,sans-serif;
      font-size:14px;
      color:#ff6600;
      background-color:#2E3436;
    }
    input[type=text] {
      background-color:white;
      font-family:Ubuntu,"Helvetica-Neue",Helvetica,Arial,sans-serif;
      font-size:14px;
      color:#222222;
      border-style:solid;
      border-color:#222222;
      border-width:1px;
      border-radius:5px;
      padding:4px;
    }
    textarea {
      background-color:white;
      font-family:'Ubuntu Mono',UbuntuMono,monospace;
      font-size:14px;
      color:#222222;
      border-style:solid;
      border-color:#222222;
      border-width:1px;
      border-radius:5px;
      padding:4px;
    }
    input[type=text]:hover, textarea:hover {
      box-shadow: 0 0 1px 1px #ff6600 inset;
    }
    input[type=text]:focus, textarea:focus {
      border-color:#ff6600;
      color:#ff6600;
    }
    input[type=button] {
      font-family:Ubuntu,"Helvetica-Neue",Helvetica,Arial,sans-serif;
      font-size:14px;
      background-color:lightgrey; /*#f5f5f5;*/
      border-style:solid;
      border-color:#222222;
      border-width:1px;
      border-radius:5px;
      padding:4px;
      padding-left:10px;
      padding-right:10px;
      margin-bottom:10px;
      min-width:240px;
    }
    input[type=button]:hover {
      background-color:#ffe6d5;
      cursor:pointer;
      border-color:#ff6600;
      color:#ff6600;
      box-shadow: 3px 3px 3px #ff6600; /*  #f60 #696969 */
      /*font-weight:bold;*/
    }
    a:focus {
      outline: thin dotted;
    }
    a:active, a:hover {
      outline: 0;
    }
    a {
      color: #ff6600;
      text-decoration: none;
      border-bottom:dotted;
      border-bottom-width:1px;
    }
    a:hover, a:focus {
      color: #ffb380;
      /*text-decoration: underline;*/
    }
    a:focus {
      outline: thin dotted #ffb380;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
    .nach_rechts {
      text-align:right;
    }
    .zentriert {
      text-align:center;
    }
    .breit {
      width:380px;
    }
    div {
      width:700px;
    }
    div.fachgruppe {
      position:relative;
      margin:10px;
      margin-top:20px;
      padding:10px;
      border-style:dotted;
      border-width:1px;
      border-color:#ff6600;
      border-radius:5px;
    }
    div.fachgruppenlabel {
      max-width:320px;
      position:absolute;
      top:-14px;
      left:40px;
      font-size:1.2em;
      background-color:#2E3436;
      padding-top:2px;
      padding-bottom:2px;
      padding-left:20px;
      border-style:dotted;
      border-width:1px;
      border-color:#ff6600;
      border-radius:5px;
    }
    div.verzeichnis {
      font-size:1.2em;
      margin-top:8px;
      margin-bottom:4px;
    }
    div.verzeichnis:before {
      content: url('../img/verzeichnis.png');
      padding-right:5px;
      vertical-align:middle;
    }
    div.datei {
      margin-left:15px;
    }
    div.datei:before {
      content: url('../img/datei.png');
      padding-right:5px;
      vertical-align:middle;
    }