/**
 *
 *  Text player styles, default graphical player styles
 *
 */
@charset "UTF-8";

@font-face {
  font-family: 'fontello';
  src: url('inc/icons/fontello.eot');
  src: url('inc/icons/fontello.eot?#iefix') format('embedded-opentype'),
       url('inc/icons/fontello.woff') format('woff'),
       url('inc/icons/fontello.ttf') format('truetype'),
       url('inc/icons/fontello.svg#fontello') format('svg');
  font-weight: normal; font-style: normal;
}

.haiku-container {
    margin: 0;
    padding: 0;
    position: relative;
    clear: both;
    display: inline-block;
}
.haiku-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
}
.haiku-container li {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    float: left;
}
.haiku-no-solution {
    clear: both;
    overflow: hidden;
    color: #333;
    padding: 10px;
    background: #eee;
    border: 1px solid #ddd;
}



/* text player
----------------------------------------------- */
.haiku-text-container ul {
    list-style: none;
    margin:0 0 15px 0;
}
.haiku-text-container li {
    margin: 0 10px 0 0 !important;
}



/* graphical player
----------------------------------------------- */
.haiku-graphical-container {
    height: 30px;
    width: auto;
    padding: 5px;
    line-height: 30px;
    background: #969696;
    color: #fff;
}
.haiku-graphical-container li {
    float: left;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    margin: 0 10px 0 0 !important;
}
.haiku-graphical-container a {text-decoration:none;cursor:pointer;}
.haiku-graphical-container a:hover {text-decoration:none;cursor:pointer;}


/* pause/play/stop */ 
.haiku-graphical-container li.haiku-gui {
    width: 40px;
    height: 100%;
    overflow: hidden;
}
.haiku-graphical-container li.haiku-gui a {
    margin: 0 4px 0 0;
    font-family: fontello;
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    color: #fff;
}
.haiku-graphical-container a:before { 
    width: 18px;
    height: 18px;
    font-size: 16px;
}
.haiku-graphical-container a.haiku-play:before {content: '\0070';}
.haiku-graphical-container a.haiku-pause:before {content: '\006F';}
.haiku-graphical-container a.haiku-stop:before {content: '\0073';}

/* seek bar */  
li.haiku-seek-container {
    margin: 0 10px 0 5px;
    width: 130px;
}
div.haiku-seek-bar {
    height: 10px;
    margin: 10px 0 0 0;
    color: #000;
    background: #969696;
    background: -moz-linear-gradient(top,  #969696 0%, #969696 39%, #ffffff 40%, #ffffff 60%, #969696 61%, #969696 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(39%,#969696), color-stop(40%,#ffffff), color-stop(60%,#ffffff), color-stop(61%,#969696), color-stop(100%,#969696));
    background: -webkit-linear-gradient(top,  #969696 0%,#969696 39%,#ffffff 40%,#ffffff 60%,#969696 61%,#969696 100%);
    background: -o-linear-gradient(top,  #969696 0%,#969696 39%,#ffffff 40%,#ffffff 60%,#969696 61%,#969696 100%);
    background: -ms-linear-gradient(top,  #969696 0%,#969696 39%,#ffffff 40%,#ffffff 60%,#969696 61%,#969696 100%);
    background: linear-gradient(top,  #969696 0%,#969696 39%,#ffffff 40%,#ffffff 60%,#969696 61%,#969696 100%);
}
div.haiku-play-bar {
    height: 100%;
    background: #fff;
    cursor: pointer;
}
div.haiku-seek-bar:hover,
div.haiku-play-bar:hover {cursor:pointer;}

/* zero height & width, no visible font for portfolio slideshow players */
.haiku-container.portfolio_slideshow_audio,
.haiku-player.portfolio_slideshow_audio {
    height: 0 !important;
    width: 0 !important;
    font-size: 0 !important;
}