#tv-panel
{
    width: 100%;
    height: 100%;
}
#tv-panel .top
{
    margin: 0 auto;
    padding: 3% 0;
    width: 80%; /* margin-top: 0px; */
    height: 8%;
}
#tv-panel .middle
{
    margin: 0 auto;
    width: 80%;
    height: 256px;
    position: relative;
}
#tv-panel .bottom
{
    margin: 0 auto;
    padding: 50px 0;
    width: 90%;
    list-style-type: none;
}
#tv-panel .bottom li
{
    width: 25%;
    float: left;
}

.tv-key-power, .tv-key-mute
{
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
}
.tv-key-power
{
    background-image: url(../../images/app/tv-key-power.png);
    float: right;
}
.tv-key-power:hover
{
    background-image: url(../../images/app/tv-key-power-hover.png);
}
.tv-key-mute
{
    background-image: url(../../images/app/tv-key-mute.png);
    float: left;
}
.tv-key-mute:hover
{
    background-image: url(../../images/app/tv-key-mute-hover.png);
}

.tv-key
{
    text-decoration: none;
    display: block;
}
.tv-key-dir-panel
{
    width: 256px;
    height: 256px;
    position: relative;
    margin: 0 auto;
}
.tv-key-dir-left
{
    background: url(../../images/app/tv-key-dir-left.png) no-repeat;
    width: 52px;
    height: 152px;
    position: absolute;
    top: 52px;
    left: 0;
}
.tv-key-dir-left:hover
{
    background-image: url(../../images/app/tv-key-dir-left-hover.png);
}
.tv-key-dir-up
{
    background: url(../../images/app/tv-key-dir-up.png) no-repeat;
    width: 152px;
    height: 52px;
    position: absolute;
    top: 0;
    left: 52px;
}
.tv-key-dir-up:hover
{
    background-image: url(../../images/app/tv-key-dir-up-hover.png);
}
.tv-key-dir-ok
{
    background: #FFF;
    width: 152px;
    height: 152px;
    line-height: 152px;
    border-radius: 76px;
    text-align: center;
    color: #000;
    font-size: 50pt;
    position: absolute;
    top: 52px;
    left: 52px;
}
.tv-key-dir-ok:hover
{
    background: #D1B670;
    color: #FFF;
}
.tv-key-dir-right
{
    background: url(../../images/app/tv-key-dir-right.png) no-repeat;
    width: 52px;
    height: 152px;
    position: absolute;
    top: 52px;
    right: 0;
}
.tv-key-dir-right:hover
{
    background-image: url(../../images/app/tv-key-dir-right-hover.png);
}
.tv-key-dir-bottom
{
    background: url(../../images/app/tv-key-dir-bottom.png) no-repeat;
    width: 152px;
    height: 52px;
    position: absolute;
    bottom: 0;
    left: 52px;
}
.tv-key-dir-bottom:hover
{
    background-image: url(../../images/app/tv-key-dir-bottom-hover.png);
}

.tv-key-channel-panel
{
    width: 52px;
    height: 256px;
    line-height: 256px;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    cursor: default;
    position: absolute;
    top: 0;
    left: 0;
}
.tv-key-channel-inc, .tv-key-channel-dec
{
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: #FFF;
    font-size: 40pt;
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 100%;
}
.tv-key-channel-inc:hover, .tv-key-channel-dec:hover
{
    color: #D1B670;
}
.tv-key-channel-inc
{
    top: 0;
}
.tv-key-channel-dec
{
    bottom: 0;
}

.tv-key-voice-panel
{
    width: 52px;
    height: 256px;
    line-height: 256px;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    cursor: default;
    position: absolute;
    top: 0;
    right: 0;
}
.tv-key-voice-inc, .tv-key-voice-dec
{
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: #FFF;
    font-size: 40pt;
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 100%;
}
.tv-key-voice-inc:hover, .tv-key-voice-dec:hover
{
    color: #D1B670;
}
.tv-key-voice-inc
{
    top: 0;
}
.tv-key-voice-dec
{
    bottom: 0;
}

.tv-key-home, .tv-key-menu, .tv-key-source, .tv-key-replay
{
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    margin: 0 auto;
}
.tv-key-home
{
    background-image: url(../../images/app/tv-key-home.png);
}
.tv-key-home:hover
{
    background-image: url(../../images/app/tv-key-home-hover.png);
}
.tv-key-menu
{
    background-image: url(../../images/app/tv-key-menu.png);
}
.tv-key-menu:hover
{
    background-image: url(../../images/app/tv-key-menu-hover.png);
}
.tv-key-source
{
    background-image: url(../../images/app/tv-key-source.png);
}
.tv-key-source:hover
{
    background-image: url(../../images/app/tv-key-source-hover.png);
}
.tv-key-replay
{
    background-image: url(../../images/app/tv-key-replay.png);
}
.tv-key-replay:hover
{
    background-image: url(../../images/app/tv-key-replay-hover.png);
}
