/*
 * General parms
 */
.center { text-align: center; vertical-align: middle; }
.hide { display: none; }
body {
    margin: 0px; padding: 0px;
    background-color: #121212;
    color: #fff;
    min-height: 416px;
}
input { padding: 2px; }

div.page, div.header { width: 100%; }

/*
 * notification
 */
#notification {
    position: fixed; top: 0px; left: 0px;
    width: 100%;
    z-index: 10;
}
#notification div {
    padding: 5px;
    width: 100%;
    color: #000;
}
#notification div.error {
    background-color: #EF9398;
    border: 1px solid #DC5757;
}
#notification div.confirmation {
    background-color: #A6EF7B;
    border: 1px solid #76C83F;
}
#notification div input {
    float: right;
    background: #eee;
    color: #000;
}

/*
 * Header
 */
div.header {
    margin: 0px; padding: 0px;
    background-image: url(images/control-bg.png);
    background-repeat: repeat-x;
    height: 45px;
    text-align: center;
}
div.header div {
    display: inline-block;
    text-align: center;
}
div.header div.title {
    padding-top: 4px;
    font-size: 14px; font-weight: bold;
}
#playing-text div {
    display: block;
    text-align: center;
}
#playing-text div.title {
    font-size: 13px; font-weight: bold;
    white-space: nowrap;
}
#playing-text div.desc{
    font-size: 12px; font-style: italic;
    white-space: nowrap;
}
div.header div.button {
    position: fixed; top: 3px;
    height: 35px; width: 50px;
    font-size: 11px;
    background-image: url(images/headerbtn-bg.png);
    background-repeat: repeat-x;
    border: 1px solid #ababab;
    padding: 2px 8px 0px 8px;
    overflow: hidden;
}
div.left { left: 4px; }
div.right { right: 4px; }
#loading {
    width: 30px; height: 30px;
    position: fixed; top: 0px; right: 2px;
    z-index: 10;
    background-image: url(images/loading.gif);
    background-repeat: no-repeat;
}

/*
 * playing info / control
 */
#playing-block {
    width: 100%;
    height:306px;
    background-color: #121212;
    text-align: center;
}
#playing-block #playing-cover {
    z-index: 0;
    height: 311px;
    width: 311px;
}
#playing-control {
    position: fixed; left: 0px; top: 301px;
    z-index: 1; opacity: 0.8;
    width: 100%; height: 55px;
    text-align: center;
    background-image: url(images/control-bg.png);
    background-repeat: repeat-x;
}
#playing-control div.control-button,
#playing-time-control div.time-control-button {
    padding: 0px;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    display: inline-block;
    text-align: center;
    margin-right: auto; margin-left: auto;
}
#previous_button { background-image: url(images/previous.png); }
#next_button { background-image: url(images/next.png); }
#stop_button { background-image: url('images/stop.png'); }
div.play { background-image: url('images/pause.png'); }
div.pause, div.stop { background-image: url('images/play.png'); }
#playing-time-control {
    position: fixed; left: 0px; top: 45px;
    z-index: 1; opacity: 0.7;
    width: 100%; height: 50px;
    text-align: center; vertical-align: middle;
    background-image: url(images/control-bg.png);
    background-repeat: repeat-x;
}
#playing-time-control #time-control-position {
    height: 50px;
    font-size: 12px;
    line-height: 12px;
    text-align: center; vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}
#time-fast-back { background-image: url(images/go-first.png); }
#time-back { background-image: url(images/go-previous.png); }
#time-forward { background-image: url(images/go-next.png); }
#time-fast-forward { background-image: url(images/go-last.png); }

/*
 * volume widget
 */
#volume-widget {
    width: 100%; height: 60px;
    background-image: url(images/volume-bg.png);
    background-repeat: repeat-x;
}
#volume-widget div { display: inline-block; }
#volume-slider {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    position: relative; top: 2px;
    width: 200px; height: 15px;
    background-color: #fff;
}
#volume-handle {
    position: relative; top: -5px;
    width: 25px; height: 25px;
    background-image: url(images/vol-handle.png);
}
.volume-button {
    position: relative; top: 2px;
    width: 40px; height: 40px;
}
#volume-up { background-image: url(images/vol-up.png); }
#volume-down { background-image: url('images/vol-down.png'); }

/*
 * Mode List
 */
#modelist-content {
    text-align: center;
    width: 100%;
    background-color: #121212;
    padding: 10px 0px;
}
#modelist-content div.mode-button {
    text-align: center;
    height: 40px;
    font-size: 20px; font-weight: bold;
    margin: 0px 20px 10px 20px;
    background-color: #454545;
    padding-top: 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

/*
 * current mode - toolbar
 */
#mode-toolbar {
    background-color: #232323;
    width: 100%; height: 30px;
}
#mode-toolbar div.toolbar-button {
    display: inline-block;
    width: 30px; height: 30px;
    padding: 0px 5px;
    background-repeat: no-repeat;
}
#pl-add, #wb-add, #video-set, #panel-set {
    background-image: url(images/add-btn.png);
}
#pl-opt, #panel-opt, #video-opt { background-image: url(images/options.png); }
#video-search { background-image: url(images/search-btn.png); }
#pl-clear, #wb-clear { background-image: url(images/clear-btn.png); }
#pl-remove, #wb-remove { background-image: url(images/remove-btn.png); }
#pl-shuffle,#dvd-load { background-image: url(images/refresh.png); }

/*
 * current mode - media list
 */
#mode-content div.media-item {
    max-width: 100%; min-height: 40px;
    border-bottom: 1px solid #676767;
}
#mode-content div.media-item div {
    min-height: 40px;
    display: inline-block;
}
#mode-content div.media-item div.media-info div {
    min-height: 40px;
    display: block;
}
#mode-content div.media-item div.media-info .media-title,
#mode-content div.media-item div.media-info .media-desc {
    min-height: 16px;
    overflow:hidden;
    white-space: normal;
}
#mode-content div.media-item div.media-info .media-title {
    font-weight: bold; font-size: 15px;
}
#mode-content div.media-item div.media-info .media-desc {
    font-style: italic; font-size: 14px;
    padding-left: 15px;
}
#mode-content div.media-item div.media-play-btn {
    height: 40px; width: 40px;
    background-image: url(images/go-last.png);
    background-repeat: no-repeat;
}
#mode-content div.media-item div.media-select {
    height: 40px; width: 40px;
    text-align: center; vertical-align: middle;
}

/*
 * current mode - medialist and library pager
 */
#mode-content div.content-list-pager,
#mode-extra-content div.pager { text-align: center; vertical-align: middle; }
#mode-extra-content div.pager div { min-height: 40px; display: inline-block;}
.pager-btn{ height: 40px; width: 40px;}
.pager-previous { background-image: url(images/go-previous.png); }
.pager-next { background-image: url(images/go-next.png); }
.pager-first { background-image: url(images/go-first.png); }
.pager-last { background-image: url(images/go-last.png); }
.pager-desc, .extra-pager-desc {
    font-size: 30px; vertical-align: middle;
    line-height: 10px;
}

/*
 * current mode - extra content
 */
#mode-extra-header {
    height: 30px; width: 100%;
    vertical-align: middle; text-align: center;
    background-color: #343434;
}
#mode-extra-header div {
    display: inline-block;
}
#mode-extra-title { height: 30px; font-style: italic; line-height: 30px;}
#mode-extra-close {
    height: 25px; position: fixed; right: 5px; top: 45px;
    padding: 2px;
    background-color: #565656;
}

/*
 * current mode - library list
 */
#mode-extra-content div.library-item {
    max-width: 100%; height: 40px;
    border-bottom: 1px solid #676767;
}
#mode-extra-content div.library-item div {
    height: 40px;
    display: inline-block;
}
#mode-extra-content div.library-item div.media-play-btn {
    height: 40px; width: 40px;
    background-image: url(images/go-last.png);
    background-repeat: no-repeat;
}
#mode-extra-content div.library-item div.library-select {
    height: 40px; width: 40px;
    text-align: center; vertical-align: middle;
}
#mode-extra-content div.library-apply div.apply-btn {
    height: 40px; width: 40px;
    background-image: url(images/apply.png);
    background-repeat: no-repeat;
}
#mode-extra-content div.library-item div.directory,
#mode-extra-content div.library-item div.file {
    font-size: 15px; line-height: 40px;
    overflow: hidden;
    white-space: normal;
}

/*
 * current mode - tag list
 */
#mode-extra-content div.tag-item {
    max-width: 100%; height: 40px;
    border-bottom: 1px solid #676767;
    padding-left: 10px;
}

/* current mode - option */
#playorder-option, #repeat-option {
    padding: 10px 10px 10px 100px;
}
#mode-extra-content .form-submit {
    padding: 15px 10px;
}

/* current mode - webradio form */
.wb-input { margin-left: 5px; padding: 10px; }

/* current mode - video search */
.videosearch-box {
    margin-top: 5px;
}
