/* Clearfix */
.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}
.clearfix:after {
   clear: both;
}
.clearfix {
   *zoom: 1;
}


/* Basic Styles */
nav {
   position: fixed; z-index: 1000; /* position: fixed für festen header */
   height: 40px;
   width: 100%;
   background: #fff;
   font-size: 1.0em;
   border-bottom: 1px solid #13134F;
}
nav ul {
   padding: 0;
   margin: 0 auto;
   width: 1024px;
   height: 40px;
}
nav li {
   display: inline;
   float: left;
   width: 12.5%;     /*   100% /8 Menueinträge = 12.5%  */
}
nav a {
   font-style: normal;
   color: #fff;  /* ??? color Schrift: style.css a: */
   display: inline-block;
   width: 100%;
   text-align: center;
   line-height: 40px;
}
nav li a {
   font-weight: bold;
   border-right: 1px solid #13134F;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
nav li:last-child a {
   border-right: 0;
}
nav a:hover, nav a:active {
   text-decoration: none;
   color: #fff;
   background-color: #336699;   
}
nav a#pull {
   display: none;
}
nav li a.current, #nav li a.current:hover {
   background-color: #ffa500; /* orange */
   color: #fff;
   cursor: default;
}


/* @media max-device-width: 1024px *********************************************/
@media screen and (max-width: 1024px) {
nav ul {
   width: 100%;
}
}


/* @media max-device-width: 767px  **************************************/
@media screen and (max-width: 767px) {
nav {
   height: auto;
   border-bottom: 0;
}
nav ul {
   width: 100%;
   display: none;
   height: auto;
}
nav li {
   width: 50%;
   float: left;
   position: relative;
}
nav li a {
   border-bottom: 1px solid #576979;
   border-right: 1px solid #576979;
}
nav a {
   text-align: left;
   width: 100%;
   text-indent: 10px;
}
nav a#pull {
   position: relative;
   display: block;
   font-size: 1.25em;
   width: 100%;
   font-weight: bold;   
   color: #fff;
   background-color: #0066cc;
}
nav a#pull:before {
   content: "Menue";
}
nav a#pull:after {
   position: absolute; right: 5px; top: 10px;
   content:"";
   width: 30px;
   height: 30px;
   display: inline-block;
   background: url(../images/nav-icon.png) no-repeat;
}
}


/* @media max-device-width: 320px *********************************************/
@media only screen and (max-width : 320px) {
nav li {
   display: block;
   float: none;
   width: 100%;
}
nav li a {
   border-bottom: 1px solid #576979;
}
}