div.jp-jplayer, div.jp-jplayer img {
    max-width: 100%; }
  
  div.jp-jplayer.jp-jplayer-video {
    background-color: #292a2b; }
  
  div.jp-jplayer video {
    margin-bottom: 0; }
  
  div.jp-jplayer img, div.jp-jplayer-video, div.jp-jplayer-video video {
    height: auto !important;
    vertical-align: top; }
  
  .jp-audio-container, .jp-video-container {
    background-color: #f1f1f1;
    box-shadow: 1px 1px 1px #ddd; }
  
  /* no margin on player inside post header */
  .post-header .jp-audio-container, .post-header .jp-video-container {
    margin-bottom: 0; }
  
  div.jp-interface {
    position: relative;
    width: 97%;
    z-index: 100; }
  
  .jp-video div.jp-interface {
    -webkit-border-radius: 0 0 2px;
    -moz-border-radius: 0 0 2px;
    border-radius: 0 0 2px; }
  
  .jp-interface, a.jp-play, a.jp-pause, .seperator-first, .seperator-second {
    height: 34px; }
  
  .jp-controls {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  
  .jp-controls li {
    display: inline;
    margin: 0; }
  
  .jp-controls a {
    color: #404040;
    text-shadow: 1px 1px white;
    background: transparent !important;
    width: 24px;
    height: 34px;
    padding: 0 0 0 10px;
    display: inline-block;
    position: absolute;
    top: 0;
    border-bottom: none;
    font-size: 14px;
    line-height: 34px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    z-index: 1;
    opacity: .6; }
  
  .jp-controls a:hover {
    color: #262626;
    background: transparent !important;
    text-decoration: none;
    opacity: .8; }
  
  .jp-controls a span {
    text-indent: -9999px;
    display: block; }
  
  a.jp-play, a.jp-pause {
    right: 0; }
  
  a.jp-pause {
    display: none; }
  
  a.jp-pause:hover {
    background-position: -33px -30px; }
  
  a.jp-mute, a.jp-unmute {
    left: 55px; }
  
  .jp-progress-container, .jp-volume-bar-container {
    position: absolute;
    top: 0;
    height: 8px;
    padding: 13px 10px; }
  
  .jp-progress-container {
    right: 34px;
    left: 92px; }
  
  .jp-progress, .jp-volume-bar {
    height: 9px;
    background: #E7E7E7;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.09);
    -moz-box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.09);
    box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.09); }
  
  .jp-seek-bar {
    width: 0;
    height: 9px;
    cursor: pointer;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background: #E0E0E0; }
  
  .jp-progress, .jp-seek-bar {
    background: rgba(102, 102, 102, 0.05); }
  
  .jp-play-bar, .jp-volume-bar-value {
    width: 0;
    height: 9px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background: #BABABA; }
  
  .jp-volume-bar-container {
    left: 2px;
    width: 40px; }
  
  .jp-volume-bar {
    position: relative;
    overflow: hidden;
    width: 40px;
    cursor: pointer;
    background: rgba(102, 102, 102, 0.1); }
  
  .jp-volume-bar-value {
    width: 0; }
  
  .seperator-first, .seperator-second {
    width: 0;
    position: absolute;
    top: 0;
    right: 33px;
    border: 1px solid #fff;
    border-right-color: #ddd;
    border-width: 0 1px; }
  
  .seperator-second {
    right: auto;
    left: 89px; }
  
  /* volume controls taken over by mobile devices so don't need to see them */
  .no-volume .jp-progress-container {
    left: 0px; }
  
  .no-volume .jp-volume-bar-container, .no-volume .seperator-second, .no-volume .jp-mute, .no-volume .jp-unmute {
    display: none; }