/* styles Desktop 1280 min
======================== */
html,
body {
min-height:100.1%;
max-width:100%;
background-color:#000;
overflow-x:hidden;
}

* {
  font-family: 'Open Sans', sans-serif;
}

/* Kopfzeile mit Menü und Header
===============================*/
#kopfzeile {
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:3;
  overflow:visible;
  background-color:#000;
}

header {
  display:block;
  position:relative;
  width:100%;
  text-align:center;
  left:0;
  font-size:300%;
  line-height:200%;
  font-family: 'Fredericka the Great', cursive;
  color:#fff;
  z-index:5;
}

/* Menü
=======*/
#showmenu {
  display:none;
}

nav {
  display:block;
  position:relative;
  left:calc(50% - 640px);
  width:1180px;
  top:0;
  z-index:10;
  padding:0 50px 0 50px;
  min-height:48px;
  background-color:#2b6e88;
  border-bottom:4px solid #000;
  
}


/*Ebene 1 Hauptmenü*/
nav ul {
  display: block;
  margin:0;
  padding:0;
}

nav li {
  display:inline-block;
  position:relative;
  padding:12px 50px 2px 0;
}

nav a {
  text-decoration: none;
  color: #fff;
  -webkit-transition: color .1s ease-in;
  transition: color .1s ease-in;
  font-size:17px;
  line-height:100%;
}

nav a:focus,
nav a:hover,
nav a:active {
  color:#c7d982;
  -webkit-transition: color 0.01s;
  transition: color 0.01s;
}

nav span {
  visibility:hidden;
  -webkit-transition: all 0.2s 0.2s;
  transition: all 0.2s 0.2s;
}
nav ul ul li:hover span {
  visibility:visible;
}
nav ul ul ul li:hover span {
  visibility:visible;
}
  
/*Ebene 2 Untermenü */
nav ul ul {
  visibility:hidden;
  display:block;
  position:absolute;
  top:36px;
  left:0;
  min-width:320px;
  opacity:0;
  background-color:#fff;
  -webkit-transition: all 0.2s 0.2s;
  transition: all 0.2s 0.2s;
  box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.2);
  line-height:0;
}
nav ul li:hover ul {
  visibility:visible;
  opacity:1;
  z-index:1001;
  -webkit-transition: all 0.2s 0.1s;
  transition: all 0.2s 0.1s;
}
nav ul ul li {
  display:block; 
  padding:8px 4px 8px 12px;
  height:auto;
  line-height:110%;
  border-bottom:2px solid #2b6e88;
}

nav ul ul li:last-child {
  border-bottom:0;
}

/* Ebenen 3ff */
nav ul ul ul {
  visibility:hidden;
  display:block;
  top:70%;
  left:40%;
  border-top:0;
  background-color:#fef7eb;
}

nav ul ul ul ul {
  visibility:hidden;
  display:block;
  background-color:#b0becc;
}

nav ul li:hover ul ul,
nav ul li:hover ul ul ul {
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.2s 0.2s;
  transition: all 0.2s 0.2s;
}
nav ul ul li:hover ul,
nav ul ul ul li:hover ul {
  visibility:visible;
  z-index:1002;
  opacity:1;
  -webkit-transition: all 0.2s 0.1s;
  transition: all 0.2s 0.1s;
}

nav ul ul ul li { 
  line-height:120%;
}

nav ul ul a {
  display:block;
  min-width:200px;
  font-size:16px;
  color:#2b6e88;
}
nav ul ul ul a {
  font-size:14px;
}

nav ul ul a:hover {
color:#c7d982;
}

/* Content-Boxen
================*/
#content {
  display:block;
  margin:140px 0 0 calc(50% - 640px);;
  width:1280px;
  background-color:#fff;
  z-index:1;
  overflow:hidden;
}

#content article {
  display:block;
  width:1180px;
  padding:30px 50px 30px 50px;
  font-size:15px;
  font-weight:300;
  line-height:150%;
  color:#3e3e3e;
}

h1 {
  font-size:20px;
  font-weight:bold;
  color:#2b6e88;
  line-height:150%;
  margin:0 0 10px 0;
}

h2 {
  font-size:15px;
  font-weight:bold;
  color:#2b6e88;
  line-height:150%;
  margin:10px 0 5px 0;
  padding-bottom:0;
}

h3 {
  font-size:15px;
  font-weight:normal;
  color:#2b6e88;
  line-height:150%;
  margin:0 0 5px 0;
  padding-bottom:0;
}

#content p {
  margin:0 0 30px 0;
}

#content p.small {
  font-size:12px;
}
  
#content *.hilite,
#content a {
  color:#3e3e3e;
  font-weight:300;
  text-decoration:none;
}

#content a:hover {
  color:#2b6e88;
  border-bottom:1px dotted #2b6e88;
}

#content ul {
  list-style: circle outside none;
  padding:0 0 0 20px;
  margin:0;
}  

* a.pdf {
  display:inline-block;
  padding:4px 0px 0px 52px;
  background:url("/images/icons/pdf.png") left center no-repeat;
}

* a.video {
  display:inline-block;
  height:30px;
  padding:4px 0px 0px 52px;
  background:url("/images/icons/video.png") left 2px no-repeat;
}

h2.artist {
  cursor:pointer;
  text-transform:capitalize;
}

h2.artist:hover {
  cursor:pointer;
  background-color:#efefef;
}

h3.songs {
  cursor:pointer;
}

#content h2.facts {
  display:block;
  background-color:#2b6e88;
  color:#fff;
  padding:4px 8px 4px 8px;
  margin:8px 0 0  0;
  font-weight:normal;
}

#content h2.album.facts,
#content h2.song.facts {
  background-color:#888;
}

#content ul.facts {
  display:block;
  border:1px solid #2b6e88;
  padding:5px 5px 5px 20px;
  margin-bottom:10px;
 font-size:90%;
}
#content ul.facts li {
  margin-left:10px;
}
#content ul.songs {
  list-style:none;
  padding-left:20px;
}

#content ul.songs li {
  position:relative;
}
#content ul.songs li:hover {
  background-color:#efefef;
}

#content ul.songs b {
  font-weight:bold;
  cursor:pointer;
  text-transform:capitalize;
}

#content ul.songs span {
  cursor:pointer;
  text-transform:capitalize;
}

#content textarea.fact {
  width:calc(100% - 10px);
  height:55px;
  margin:0;
  display:inline-block;
  border:1px solid #2b6e88;
  border-radius:0;
}

#content button.fact {
  margin-bottom:15px;
  cursor:pointer;
}

#content button.edit {
  margin-bottom:15px;
  cursor:pointer;
  float:right;
}

#content input.edit,
#content input.delete,
#content a.edit,
#content input.dr_rock,
#content input.statistik,
#content a.pdf {
  display:inline-block;
  width:16px;
  height:16px;
  margin:4px 4px 0 0;
  padding:0;
  background:url('/images/icon_edit.png') left top no-repeat;
  float:right;
  border:0;
  border-radius:0;
}
#content input.edit:hover, #content a.edit:hover {
  background:url('/images/icon_edit_hover.png') left top no-repeat;
}
#content input.delete {
  background:url('/images/icon_delete.png') left top no-repeat;
}
#content input.delete:hover {
  background:url('/images/icon_delete_hover.png') left top no-repeat;
}
#content input.dr_rock {
  background:url('/images/icon_doctor.png') left top no-repeat;
  margin-right:6px;
}
#content input.dr_rock.active {
  background:url('/images/icon_doctor_active.png') left top no-repeat;
}
#content input.dr_rock:hover {
  background:url('/images/icon_doctor_hover.png') left top no-repeat;
}
#content input.statistik {
  background:url('/images/icon_statistik.png') left top no-repeat;
}
#content input.statistik:hover {
  background:url('/images/icon_statistik_hover.png') left top no-repeat;
}
#content a.pdf {
  background:url('/images/icon_pdf.png') left top no-repeat;
}
#content a.pdf:hover {
  background:url('/images/icon_pdf_hover.png') left top no-repeat;
}
div.editalbum, div.editartist, div.upload_song {
	display:none;
}
#media_player {
	display: block;
	position: fixed;
	width: 300px;
	height: 50px;
	top: 20px;
	right: 50px;
	z-index: 10000;
}
#media_player audio {
	width:100%;
}

#media_player button {
	position: absolute;
    z-index: 1000;
    border-radius: 16px;
    left: calc(50% - 16px);
    border: 0;
    top: -1px;
    background: transparent;
}
#media_player #nextBtn {
    left: calc(50% + 32px);
}
#content span.play {
  position:absolute;
  display:block;
  width:16px;
  height:16px;
  margin:4px 0 0 -20px;
  background:url('/images/icon_play.png') left top no-repeat;
}
#content span.play:hover {
  background:url('/images/icon_play_hover.png') left top no-repeat;
}
#content span.play.active, #content span.play.active:hover {
  background:url('/images/icon_play_active.png') left top no-repeat;
}
#content span.upload {
  position:absolute;
  display:block;
  width:16px;
  height:16px;
  margin:4px 0 0 -20px;
  background:url('/images/icon_upload.png') left top no-repeat;
}
#content span.upload:hover {
  background:url('/images/icon_upload_hover.png') left top no-repeat;
}

#content span.laenge {
  margin-right:20px;
}
#content span.airplays {
  font-weight:bold;
  margin-right:20px;
  width:25px;
}

#Elementauswahl {
  position:fixed;
  width:750px;
  top:174px;
  left:calc(50% - 200px);
  min-height:210px;
  margin:0 0 20px 20px;
  padding:4px 10px 4px 10px;
  border:1px solid #2b6e88;
  background-color:#fff;
}

#content #Sendeliste, #content #Liveliste {
  padding:0;
  margin:0;
  width:100%;
}

#Sendeliste li, #Liveliste li {
  clear:left;
  list-style:none;
  padding:0;
  width:calc(100% - 4px);
  padding:2px 0 2px 0;
}

#Sendeliste li.editactive {
  background-color:#ffeeee;
}
#Sendeliste li.kategorie_2, #Liveliste li.kategorie_2 {
  background-color:#e3ecef;
}
#Sendeliste li.kategorie_3, #Liveliste li.kategorie_3,
#Sendeliste li.kategorie_6, #Liveliste li.kategorie_6,
#Sendeliste li.kategorie_7, #Liveliste li.kategorie_7 {
  background-color:#efefef;
}
#Sendeliste li.kategorie_4, #Liveliste li.kategorie_4 {
  background-color:#f3f3f3;
}
#Sendeliste li li, #Liveliste li li {
  list-style-type:circle;
}

#Sendeliste span.play, #Liveliste span.play {
  margin-left:-25px;
}

#Sendeliste table, #Liveliste table {
  border:1px dotted grey;
  width:100%;
}

#Sendeliste td.starttime, #Liveliste td.starttime {
  vertical-align:top;
  padding:5px;
  width:100px;
}
#Sendeliste td.laenge, #Liveliste td.laenge {
  vertical-align:top;
  padding:5px;
  width:80px;
  text-align:right;
}

#Sendeliste td.sendeelement, #Liveliste td.sendeelement {
  padding:5px;
  vertical-align:top;
}

#Sendeliste b,
#Sendeliste span,
#Liveliste b,
#Liveliste span {
  cursor:pointer;
}

#Sendeliste b.wunsch,
#Liveliste b.wunsch  {
  color:#2b6e88;
  cursor:default;
}

#Sendeliste div.bemerkung,
#Liveliste  div.bemerkung {
  color:#c20000;
}

#Sendeliste div.dr_rock {
  float:right;
  display:none;
}
#Sendeliste div.dr_rock textarea {
  width:450px;
  height:110px;
}

#content ul.liste_sendung li {
  padding:4px 0 4px 0;
}
#content ul.liste_sendung li:hover {
  background-color:#f3f3f3;
}

#content .liste_sendung_details {
  display:none;
  border:1px solid #2b6e88;
  padding:8px;
}

/* Allgemein
============*/
*.rechts {
  float:right;
  margin-left:10px;
}

*.links {
  float:left;
  margin-right:10px;
}

*.zentriert {
  display:block;
  width:100%;
  text-align:center;
}

*.small {
  font-size:60%;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

p {
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

a {
  -moz-hyphens: none;
  -o-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

span.fehler {
  color:#C20000;
  display:block;
}

p.fehler,
.fehler {
  color:#C20000;
  background:#2a1515;
  padding:10px 15px;
  border-left:4px solid #C20000;
  margin:10px 0;
}

p.erfolg,
.erfolg {
  color:#00C200;
  background:#152a15;
  padding:10px 15px;
  border-left:4px solid #00C200;
  margin:10px 0;
}

/* Formular
==================*/
input:not([type="checkbox"]):not([type="radio"]),
select {
  width:350px;
  padding:4px;
  border:1px solid #999;
  border-radius:4px;
  margin:0 12px 6px 0;
}

input[type="checkbox"],
input[type="radio"] {
  width:auto;
  margin-right:6px;
}

textarea {
  width:350px;
  height:55px;
  display:block;
  padding:4px;
  border:1px solid #999;
  border-radius:4px;
  margin:0 12px 6px 0;
  resize: none;
}

div.g-recaptcha {
  margin-bottom:6px;
}

iframe.google_maps {
  width:50%;
  height:400px;
}

/* Sitebrowser
==============*/
ul.sitebrowser {
  line-height:150%;
}

/* Footer
=========*/
#content footer {
  display:inline-block;
  position:relative;
  width:calc(100% - 100px);
  height:70px;
  padding:0 50px 0 50px;
  background-color:#2b6e88;
  top:0;
  left:0;
  font-size:17px;
  line-height:70px;
  color:#fff;
  border-top:4px solid #000;
}