/* Globale CSS-Klassen */

body {
  font-size: 1.3em;
  background-color: #000000;
  min-width: 400px;
}
strong {background:black; color:white;}

@font-face {
    font-family: 'kelmscottregular';
    src: url('./font/kelmscot-webfont.woff2') format('woff2'),
         url('./font/kelmscot-webfont.woff') format('woff'),
         url('./font/kelmscot-webfont.tff') format('truetype');
    font-weight: normal;
    font-style: normal;

}

header {
  background: #000000;   /*  #055005   */
/*  font-size: 2em;   */
  font-family: 'kelmscottregular', serif;
  color: #00FF00;
}
header a {
    color: #00B800;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
}
header p {
    margin-top:0em;
    margin-bottom:0em;
    font-size:1em;
    padding: .2em;
}

nav {
  background: #000000;
  text-align: center;
}

article:nth-of-type(1) { font-family: 'kelmscottregular', serif; background: #000000; color: #00FF00; }
article:nth-of-type(2) { background: #66cc00; }

aside { background: #ff0099; }

footer { background: #000000; color: #00E000;}
footer a {
    color: #00B800;
    display: block;
    text-decoration: none;
    /*- text-transform: uppercase; -*/
}
footer p {
    margin-top:0em;
    margin-bottom:0em;
    font-size:1em;
    padding: .2em;
}


* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.row {
  width:auto;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.row .row {
  margin-left:-1%;
  margin-right: -1%;
}

.columns {
  float:left;
  padding-left:1%;
  padding-right:1%;
}

.push {
  float:right;
}


/* Small */
@media screen and (max-width:650px) {
  .small-1 {width: 100%;}
  .small-blank {display: none; width: 100px;}
}

/* Medium */
@media screen and (min-width:650px) and (max-width:1200px) {
  .medium-1 {width:16.666667%;}
  .medium-2 {width:33.333333%;}
  .medium-3 {width:50%;}
  .medium-4 {width:66.666666%;}
  .medium-5 {width:83.333333%;}
  .medium-6 {width:100%;}
  .medium-3m {width:50%;margin-left:5%;}
  .medium-offset-1 {margin-left:5%;}
  .medium-nav {width:20%;min-width:142px;}
  .medium-fill {width:100%;}
  .medium-blank {display: none; width: 100px;}
}

/* Large */
@media screen and (min-width:1200px) {
  .large-1 {width:33.333333%;}
  .large-2 {width:66.666666%;}
  .large-3 {width:100%;}
  .large-4 {width:66.666666%;margin-left:5%;}
  .large-nav {width:12%;min-width:142px;}
  .large-blank {display: none; width:100px;}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Retina-specific stuff here */
  body {min-width: 300px;}

}

/* Menue definitionen*/
.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    height: 58px;
}
.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);

    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    width: 100%;
    min-width: 140px;
    max-width: 380px;
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
    border-radius: 15px 15px 0 0 / 45px 45px 0 0;
}
.menu a {
    border-left: 1px solid rgba(0, 0, 0, 0);
    color: #00FF00;    /*   808080   */
    display: block;
    font-family: 'kelmscottregular', 'Lucida Console';
    font-size: 16px;
    line-height: 54px;
    padding: 1px 1px;
    text-decoration: none;
    text-transform: uppercase;
}

When we hover on individual menu items, we will highlight them:

.menu li:hover {
    background-color: #1c1c1c;
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
    background: linear-gradient(#1c1c1c, #1b1b1b);

    border-bottom: 2px solid #222222;
    border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
    border-radius: 15px 15px 0 0 / 40px 40px 0 0;
    border-left: 3px solid #00FF00;
    border-right: 3px solid #00FF00;
    color: #FF0C12;
}