/*
Dieses Template wurde im Auftrag von Microsoft Deutschland erstellt.

- Die grafische Vorlage fuer dieses Layout stammt von Christina Poser (von-poser.com).
- Die Umsetzung des Templates wurde von Vladimir Simovic (www.perun.net) durchgefuehrt.
- https://www.computerhope.com/learnhtm.htm
*/

body {
    padding: 0; margin: 0;
    font: 100% 'lucida grande', verdana, sans-serif;
    background: #e5ebf0; color: #333; /* vorher backround #e5ebf0 #303030 #C0C0C0 */
    text-align: center; /* Zentriert für die älteren Browser den nachfolgenden Block */
}

/* Allgemeingueltige Klassen und Elemente */
img {
    border: none;
}

code {
    font: 14px consolas, 'courier new', monospace;
    color: #900;
}

pre {
    overflow: auto; padding: 1em;
    font-size: 1em;
}

h1, h2, h3, h4 {
    font-family: georgia, serif; font-weight: normal;
}

a {
    color: #ad0c26; /*vorher #700*/
}
a:hover {
    text-decoration: none;
}

.bild-links { /* Diese Klasse vergeben Sie einem Bild welches links ausgerichtet werden soll */
    float: left;
    margin: .1em 1em .4em 0;
}

.bild-rechts { /* Diese Klasse vergeben Sie einem Bild welches rechts ausgerichtet werden soll */
    float: right;
    margin: .1em 0 .4em 1em;
}

.bild-abstand img {
    margin: 0 .5em .5em 0; /* Bilder innerhalb dieses Elements bekommen zusaetzlichen Abstand */
}

.clearer {
    clear: both; /* hebt die vorhergehenden Floats auf */
}


/*
* Hauptbereich #container
 */

#container {
    text-align: left; /* Hebt die zentrierung auf */
    margin: 0 auto; /* Zentriert diesen Block auf horizontaler Ebene (für modernere Browser) */
    width: 960px;
}


/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich (Logo/Schriftzug und horizontale Navigation)
 */
#kopfbereich {
    position: relative; /* Durch relative Positionierung können wir untergeordnete Elemente in Bezug auf #kopfbereich absolut positionieren */
    height: 268px; width: 960px;
    background: url(img/kopfbereich.jpg) no-repeat;
}

/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich
*** Abschnitt: #logo
 */
#kopfbereich #logo {
    position: absolute; top: 0; left: 25px;
    margin: 0; padding: 25px; line-height: 1; /* Die richtigen Abstände für die Ueberschrift als Logo-Box */
    text-align: right;
    font: normal 1.5em georgia, serif;
    background: #fff;
    text-transform: uppercase;
}

#kopfbereich #logo span {
    font-weight: bold; display: block;
}

#kopfbereich a {
    text-decoration: none;
}
#kopfbereich ul a {
    float: left; display: block; padding: 10px 15px;
    font: .9375em georgia, serif;
    text-transform: uppercase;
}


/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich
*** Abschnitt: #hauptnavi1 (Rechts) und #hauptnavi2 (Links)
 */

#hauptnavi1 {
    position: absolute; top: 0; right: 25px;
    margin: 0; padding: 0;
    background: #fff; 
    list-style: none;
}

#hauptnavi2 {
    position: absolute; bottom: 0; left: 25px;
    margin: 0; padding: 0;
    background: #fff;
    list-style: none;
}
#hauptnavi3 {
    background: #fff;
    list-style: none;
}
#hauptnavi2 a {
    background: #fff; color: #ad0c26;
}
#hauptnavi2 a:hover, #hauptnavi2 .aktiv a {
    background: #ad0c26 url(img/rahmen.gif) repeat-x; color: #e5ebf0; /* backround vorher #fff, color vorher #300 */
}
#hauptnavi1 a:hover, #hauptnavi1 .aktiv a {
    background: #ad0c26 url(img/rahmen.gif) repeat-x bottom; color: #e5ebf0; /* backround vorher #fff, color vorher #300 */
}
#hauptnavi3 a {
    background: #fff; color: #ad0c26;
}
#hauptnavi3 a:hover, #hauptnavi2 .aktiv a {
    background: #ad0c26; color: #e5ebf0; /* backround vorher #fff, color vorher #300 */
}

#kopfbereich ul li {
    display: inline; /* Damit sich die einzelnen Listenelemente horizontal anordnen */
}


/*
* Hauptbereich: #container
** Unterbereich: #mitte (Inhalt + Sidebar)
 */

#mitte {
    padding: 0 25px 25px 40px;
    font-size: 75%;
    background: #fff;
    line-height: 1.45;
}
#mitte p, mitte ul, #mitte ol {
    margin: 5px 0 15px 0;
}

#mitte li {
    margin-bottom: 2px;
}


/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich
*** Abschnitt: #inhalt
 */

#inhalt {
    float: left;
    width: 46em; min-width: 552px; max-width: 590px;
}
/* line 21, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-wrapper {
  width: 450px;
  height:520px;
  /*margin: 100px auto 0 auto;*/
  background-color: #ad0c26; /*ddddda*/
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px; }
  /* line 28, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-wrapper.error .audio-player-image {
    background: #f78471; } /*#f78471*/
    /* line 30, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
    .audio-player-wrapper.error .audio-player-image:before {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 10px;
      width: 100%;
      text-align: center;
      margin: auto;
      color: white;
      content: "Error loading";
      font-family: "Open Sans", sans-serif;
      font-weight: 600;
      font-size: 13px; }
    /* line 43, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
    .audio-player-wrapper.error .audio-player-image > * {
      display: none; }

/* line 46, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
 .audio-player-image {
  position: relative;
  height: 375px; /*149px*/
  -webkit-backface-visibility: hidden; }
  /* line 50, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-image > img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto; }
    /* line 56, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
   .audio-player-image > img.fading {
      -webkit-transition: opacity 200ms linear;
      -moz-transition: opacity 200ms linear;
      -o-transition: opacity 200ms linear;
      transition: opacity 200ms linear;
      z-index: 1;
      opacity: 0; }

/* line 61, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-song-name {
  position: absolute;
  z-index: 2;
  bottom: -95px;
  right: 5px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
  text-transform: uppercase; }

/* line 73, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-controls {
  padding: 105px; }

@-moz-keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

@-webkit-keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

@-o-keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

@-ms-keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

@keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

/* line 82, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-progress {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 25px;
  background-color: #eae5e5; /*#a0a7af*/
  overflow: hidden; }
  /* line 89, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-progress.loading {
    background-image: -webkit-linear-gradient(-45deg, #878787 25%, transparent 25%, transparent 50%, #878787 50%, #878787 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, #878787 25%, transparent 25%, transparent 50%, #878787 50%, #878787 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, #878787 25%, transparent 25%, transparent 50%, #878787 50%, #878787 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #878787 25%, transparent 25%, transparent 50%, #878787 50%, #878787 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    -webkit-animation: loadingStripes 700ms linear infinite;
    -moz-animation: loadingStripes 700ms linear infinite;
    -ms-animation: loadingStripes 700ms linear infinite;
    -o-animation: loadingStripes 700ms linear infinite;
    animation: loadingStripes 700ms linear infinite; }

/* line 94, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-progress-bar {
  -webkit-transition: width 200ms linear;
  -moz-transition: width 200ms linear;
  -o-transition: width 200ms linear;
  transition: width 200ms linear;
  display: block;
  height: 100%;
  width: 0;
  max-width: 100%;
  background-color: #878787; /*#808e97*/
  border-radius: 25px; }

/* line 103, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-button {
  display: block;
  position: relative;
  float: left;
  width: 35px;
  height: 35px;
  margin: 0 5px;
  /*border-radius: 100%;*/
  /*border: 3px solid #808e97;*/
  /*opacity: 0.8; */
  cursor: pointer; }
  /* line 114, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-button:hover {
    /*opacity: 1; */}
  /* line 116, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-button::before {
    /*position: absolute;
    top: -1px;
    bottom: 0;
    left: -12px;
    right: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    line-height: 1px;
    font-size: 20px;*/
    color: #878787; }
  /* line 128, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-button.icon-pause::before {
    /*font-size: 18px;
    top: 1px;
    left: -15px;*/ }
  /* line 132, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-button.icon-backward::before {
    /*left: -17px;*/ }
  /* line 134, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-button.small {
    /*width: 25px;
    height: 25px;
    margin-top: 5px;*/ }
    /* line 138, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
    .audio-player-button.small::before {
      font-size: 15px; }

/* line 141, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-button-wrappers {
  overflow: hidden;
  *zoom: 1;
  display: block;
  width: 70px;
  margin: 15px auto 0 auto; } 

#inhalt h2 {
    font-size: 1.833em;
}
#inhalt h3 {
    margin-bottom: 0; font-size: 1.5833em;
    border-bottom: 1px dotted #400;
}
#inhalt h4 {
    margin-bottom: 0; font-size: 1.4166em;
}
#inhalt h5 {
    font-size: 1em;
}

/*
* Hauptbereich: #container
** Unterbereich: #mitte
*** Abschnitt: #sidebar
 */

#sidebar {
    float: right;
    width: 280px;
    position: relative; top: -38px;
}

/* Die einzelnen Boxen in der Sidebar */
.sidebar-box {
    padding: 15px; margin-bottom: 25px;
    background: #eae5e5; color: #222;
}
.sidebar-box h2 {
    margin: 0;
}
.sidebar-box ul, .sidebar-box ol {
    list-style: none; margin-left: 0; padding-left: 0; /* Entfernt die Listenpunkte und den linekn Abstand */
}

.erste-box {
    background: #ad0c26; color: #e5ebf0; /* vorher #300*/
}
.erste-box a {
    color: #fff; text-decoration: underline;
}
.erste-box a:hover {
    text-decoration: underline;
}


/*
* Hauptbereich: #container
** Unterbereich: #footer
 */

#footer {
    background: #ad0c26; color: #e5ebf0; padding: 15px 25px 12px 40px; /* vorher #300 */
    font-size: 75%;
}

#footer p {
    margin: 0 0 2px 0;
}

#footer a {
    color: #fff; text-decoration: underline;
}
#footer a:hover {
    text-decoration: none;
}