.#{$css}-container {
    box-sizing: border-box;
    height: 45px;
    min-height: 45px;
    min-width: 320px;
}

.#{$css}-audio-canvas {
    display: none;
    position: absolute;
    bottom: $controlbar_height;
    background-color: #000000;
}

.#{$css}-dashboard {
    @include absolute-align-full-bottom;
    @include transition1(opacity, $dashboard_transition, ease-in-out);
}

.#{$css}-progressbar {
    @include clickable;
    @include transition1(height, $progressbar_transition, ease-in-out);
    height: $progressbar_height;
    background-color: $progressbar_bgcolor;
}

.#{$css}-progressbar-inner.#{$cssplayer}-disabled {
    & .#{$css}-progressbar-cache, .#{$css}-progressbar-position, & {cursor: not-allowed}
}

.#{$css}-progressbar-small {
    height: $progressbar_height_small;
}

.#{$css}-progressbar-position {
    @include absolute-align-left;
    @include transition1(height, $progressbar_transition, ease-in-out);
    background-color: $progressbar_position_bgcolor;
    height: $progressbar_height;
}

.#{$css}-progressbar-small .#{$css}-progressbar-position {
    height: $progressbar_height_small;
}

.#{$css}-progressbar-cache {
    @include absolute-align-left;
    @include transition1(height, $progressbar_transition, ease-in-out);
    background-color: $progressbar_cache_bgcolor;
    height: $progressbar_height;
}

.#{$css}-progressbar-small .#{$css}-progressbar-cache {
    height: $progressbar_height_small;
}

.#{$css}-progressbar-button {
    $radius: floor(($progressbar_height + 2 * $progressbar_button_overflow)/2);
    @include border-radius($radius);
    background-color: $progressbar_button_bgcolor;
    box-sizing: content-box;
    border: $progressbar_button_border solid $progressbar_button_bordercolor;
    position: absolute;
    right: -$radius;
    top: -($progressbar_button_border + $progressbar_button_overflow);
    z-index: 1;
    width: $progressbar_height + 2 * $progressbar_button_overflow;
    height: $progressbar_height + 2 * $progressbar_button_overflow;
}

.#{$css}-progressbar-small .#{$css}-progressbar-button {
    display: none;
}

.#{$css}-backbar {
    @include absolute-align-full-bottom;
    height: $controlbar_height;
    background-color: $controlbar_bgcolor;
    opacity: $controlbar_opacity;
}

.#{$css}-controlbar {
    @include relative-align-full-bottom;
    height: $controlbar_height;
    overflow: hidden;
}

.#{$css}-leftbutton-container {
    @include float-width-height(left, $button_width, 100%);
    @include clickable;
}

.#{$css}-rightbutton-container {
    @include clickable;
    padding: 0 8px;
}

.#{$cssnoie8} .#{$css}-rightbutton-container {
    @include float-width-height(right, auto, 100%);
}

.#{$cssie8} .#{$css}-rightbutton-container {
    @include float-width-height(right, auto, 0);
}

.#{$css}-button-inner {
    @include relative-center-center;
    @include clickable;
    display: inline-flex;
    color: $text_color;
    font-size: $button_fontsize;
}

.#{$css}-leftbutton-container .#{$css}-button-inner {
    left: 25%;
}

.#{$css}-button-text {
	font-family: Arial;
    font-weight: bold;
}

.#{$cssie8} .#{$css}-button-inner {
    margin-top: $ie8_margintop;
}

.#{$cssnoie8} .#{$css}-time-container {
    @include float-width-height(left, 2 * $time_value_width + $time_sep_width, 100%);
    text-align: center;
    font-family: $text_fontfamily;
    font-size: $text_fontsize;
    color: $text_color;
}

.#{$cssie8} .#{$css}-time-container {
    @include float-width-height(left, 2 * $time_value_width + $time_sep_width, 50%);
    text-align: center;
    font-family: $text_fontfamily;
    font-size: $text_fontsize;
    color: $text_color;
    margin-top: $ie8_margintop;
}

.#{$css}-time-value {
    @include relative-center-center;
    float: left;
    width: $time_value_width;
}

.#{$css}-time-sep {
    @include relative-center-center;
    float: left;
    width: $time_sep_width;
}

.#{$cssnoie8} .#{$css}-volumebar {
    margin-left: $volume_height;
    margin-right: $volume_height + 5;
}

.#{$cssnoie8} .#{$css}-volumebar {
    @include float-width-height(right, $volume_width, 100%);
}

.#{$cssie8} .#{$css}-volumebar {
    @include float-width-height(right, $volume_width, 50%);
    margin-top: $ie8_margintop+4;
    margin-right: 15px;
}

.#{$css}-volumebar-inner {
    @include relative-center-center;
    @include border-round-edges($volume_height / 2);
    @include clickable;
    background-color: $progressbar_bgcolor;
    height: $volume_height;
}

.#{$css}-volumebar-position {
    @include border-round-edges($volume_height / 2);
    @include absolute-align-left();
    background-color: $progressbar_position_bgcolor;
    height: 100%;
}

.#{$css}-volumebar-button {
    $radius: $volume_height - 2 * $progressbar_button_overflow;
    @include border-radius($radius);
    @include clickable;
    background-color: $progressbar_button_bgcolor;
    box-sizing: content-box;
    border: $progressbar_button_border solid $progressbar_button_bordercolor;
    position: absolute;
    right: -$radius;
    top: -($progressbar_button_border + $progressbar_button_overflow);
    z-index: 1;
    width: $progressbar_height + 2 * $progressbar_button_overflow;
    height: $progressbar_height + 2 * $progressbar_button_overflow;
}

.#{$css}-title {
    color: $audio_title_font_color;
    font-family: $audio_title_font_family;
    font-weight: $audio_title_font_weight;
    font-size: $audio_title_font_size;
    float: left;
    letter-spacing: $audio_title_letter_spacing;
    line-height: 30px;
    margin: $audio_title_margin;
}