/*
 * ReadSpeakerTopBar
 */
.readSpeakerTopBar {
  background-color: #0A6BB0;
  color: #fff;
  display: none;
}
.readSpeakerTopBar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.readSpeakerTopBar .readSpeakerWrapper {
  width: 98em;
  margin: auto;
  overflow: visible;
  position: relative;
  z-index: 100;
  padding: 0;
}
.readSpeakerTopBar .rsbtn .rsbtn_play,
.readSpeakerTopBar .rsbtn.rsexpanded .rsbtn_exp {
  padding: 0 !important;
}
.readSpeakerTopBar div.rsbtn {
  padding-top: 0 !important;
}
.navServiceReadSpeaker {
  display: inline-block;
  background-image: url(/SiteGlobals/StyleBundles/Bilder/NavServiceReadSpeaker.png?__blob=normal&v=2);
  padding-left: 29px !important;
  padding-right: 0 !important;
  width: 1px !important;
  overflow: hidden;
  white-space: nowrap;
  color: #fff !important;
}
.rsbtn_customized {
 float: right;
 position: relative;
 font-size: 14px;
 line-height: 1.3em;
 margin-bottom: 8px;
 margin-right: 6px;
}
/************************************************ GENERAL CLASSES */
/**
 * These are a couple of classes that apply to many object or redefine elements
 */
.rsbtn_customized a, .rsbtn_customized span {
 position: relative;
 display: block;
 text-decoration: none;
}
/**
 * Use the predefined CSS sprite for all graphical elements.
 */
.rsbtn_customized .rsimg {
 background: transparent url(/SiteGlobals/StyleBundles/Bilder/ReadSpeaker/readspeaker_custom_skin.png?__blob=normal&v=1) no-repeat scroll 0 0;
}
/**
 * All the player elements should float.
 */
.rsbtn_customized .rspart {
 float: left;
 margin-left: 2px;
}
.rsbtn_customized .rsdefloat {
 clear: both;
}
/**
 * This goes for all buttons
 */
.rsbtn_customized .rspart.rsbutton {
 background-color: #fff;
 width: 18px;
 height: 18px;
 
  /*
   * Add rounded corners to supported browsers
   */
  -moz-border-radius: 5px;
  border-radius: 5px;
 /**
  * This is just to make the rollover effect a little smoother.
  */
 -moz-transition: background-color .2s ease;
 -webkit-transition: background-color .2s ease;
 -o-transition: background-color .2s ease;
 transition: background-color .2s ease;
}
/**
 * Add a subtle rollover effect to the buttons.
 */
.rsbtn_customized .rspart.rsbutton:hover {
 background-color: #EFEFEF;
}
/**
 * Hide all text labels. They will still be visible to non-CSS browsers
 */
.rsbtn_customized .rspart .rsbtn_btnlabel {
 display: none;
}
/**
 * Add DocReader styles
 */
#content .links .button_docReader a,
#content .teaserwithdownload .button_docReader a,
#content .teaser .button_docReader a,
#supplement .teaserwithdownload .button_docReader a,
#supplement .links .button_docReader a,
#supplement .box .links .button_docReader a,
#supplement .teaserwithdownload .button_docReader a,
#supplement .teaser .button_docReader a{
  background: url(/SiteGlobals/StyleBundles/Bilder/icon_readspeaker.png?__blob=normal&v=2) no-repeat 0 0;
  padding: 0px 0px 16px 45px;
}
#wrapperDivisions .button_docReader em {
    display: block;
    width:100%;
    padding-left: 44px;
    font-size: 70.59%;
    color: #666;
    font-style: normal;
}
#wrapperDivisions .button_docReader{
    width:100%;
}
#wrapperDivisions #supplement .button_docReader {
    float:left;
}
.js-off .readspeaker-wrapper {
    display:none;
}
.js-on .readspeaker-wrapper {
    display:block;
}
/************************************************ PLAYER BOX */
.rsbtn_customized .rsbtn_box {
 margin: 1px;
}
/************************************************ LISTEN BUTTON + ICON */
.rsbtn_customized .rsbtn_play {
 float: left;
 margin: 1px 0;
}
.rsbtn_customized .rsbtn_left .rsbtn_text {
 background: transparent url(/SiteGlobals/StyleBundles/Bilder/ReadSpeaker/readspeaker_icon.gif?__blob=normal&v=1) no-repeat scroll 0 0;
 padding-left: 20px;
 color: #fff;
 width: 0;
 min-height: 16px;
 overflow: hidden;
}
.rsbtn_customized .rsbtn_left .rsbtn_text * {
 display: none;
}
.rsbtn_customized * {
  color: #fff !important;
}
/************************************************ EXPANDING AREA */
.rsbtn_customized .rsbtn_exp.rsimg.rspart {
 background: none;
 float: left;
 display: none;
}
/**
 * We want the expanding area to be visible only when the player
 * is expanded, hence the .rsexpanded class.
 */
.rsbtn_customized.rsexpanded .rsbtn_exp.rsimg {
 display: block;
}
/************************************************ PLAY/PAUSE BUTTON */
.rsbtn_customized .rsbtn_pause {
 background-position: -36px -18px;
}
.rsbtn_customized.rspaused .rsbtn_pause,
.rsbtn_customized.rsstopped .rsbtn_pause {
 background-position: -36px 0px;
}
/************************************************ STOP BUTTON */
.rsbtn_customized .rsbtn_stop {
 background-position: -36px -36px;
}
/************************************************ PROGRESS CONTAINER */
.rsbtn_customized .rsbtn_progress_container {
 border: 1px solid #fff;
 width: 50px;
 height: 10px;
 margin-top: 3px;
 margin-left: 4px;
 background-image: none;
  /*
   * Add rounded corners to supported browsers
   */
  -moz-border-radius: 3px;
  border-radius: 3px;
}
/************************************************ PROGRESS DRAG HANDLE */
.rsbtn_customized .rsbtn_progress_handle.rsimg {
 position: absolute;
 background-color: #fff;
 top: -3px;
 left: -3px;
 width: 6px;
 height: 16px;
 background-image: none;
}
/************************************************ PROGRESS BAR */
.rsbtn_customized .rsbtn_progress_played {
 position: absolute;
 height: 100%;
 background-color: #EFEFEF;
 background-image: none;
}
/************************************************ VOLUME BUTTON */
.rsbtn_customized .rsbtn_volume {
 margin-left: 4px;
 background-position: -36px -54px;
}
/************************************************ VOLUME SLIDER CONTAINER */
.rsbtn_customized .rsbtn_volume_container {
 position: absolute;
 display: none;
 top: 100%;
 width: 16px;
 height: 40px;
 border: 1px solid #fff;
 background: #0A6BB0;
}
/************************************************ VOLUME SLIDER SLIDER AREA */
.rsbtn_customized .rsbtn_volume_slider {
 width: 6px;
 height: 30px;
 margin: 5px;
 background: #EFEFEF;
}
/************************************************ VOLUME SLIDER SLIDE HANDLE */
.rsbtn_customized .rsbtn_volume_handle.rsimg {
 position: absolute;
 top: -3px;
 left: -3px;
 width: 12px;
 height: 6px;
 background: #fff;
}
.rsbtn_customized .rsbtn_volume_handle.rsimg a {
 height: 6px;
 text-decoration: none !important;
}
/************************************************ DOWNLOAD BUTTON */
.rsbtn_customized .rsbtn_dl {
 background-position: -36px -72px;
}
/************************************************ SETTINGS BUTTON */
.rsbtn_customized .rsbtn_settings {
 background-position: -36px -90px;
}
/************************************************ CLOSE BUTTON */
.rsbtn_customized .rsbtn_closer {
 margin-left: 2px;
 background-position: -36px -108px;
}
/************************************************ POPUP BUTTON */
/**
 * This is the style of the listen button that popups when the user
 * makes a text selection on the page.
 */
.rsbtn_customized.rspopup {
 position: absolute;
 background: #fff;
 border: 1px solid #555;
 box-shadow: 0 0 5px #777;
 display: none;
}
/** Additional **/
.rsbtn_customized .rsbtn_exp span.rsbtn_status_overlay {
  background-color: #0A6BB0 !important;
  width: 100% !important;
}
.rsbtn_customized .rsbtn_exp span.rsbtn_status_overlay * {
  color: #fff !important;
}
.rsbtn_customized .rsbtn_exp .rsbtn_status_overlay span.rsbtn_status {
  margin-top: 0 !important;
}
/************************************************ MOBILE */
@media all and (max-width: 1024px) {
  .readSpeakerTopBar {
     border:10px solid #0A6BB0;
  }
  .rsbtn_customized {
     margin-bottom:0;
  }
  .readSpeakerTopBar .readSpeakerWrapper {
    width:auto;
  }
}