.channel_button
{
    background:url(../img/liveview/title_normal_middle.png);
/*    cursor: pointer;*/
}

.channel_button:active
{
    background:url(../img/liveview/title_down_middle.png);
/*    cursor: pointer;*/
}

.channel_button:hover
{
    background:url(../img/liveview/title_hover_middle.png);
/*    cursor: pointer;*/
}

#logo
{
    margin:4px 0 0 16px;
    width:144px;
    height:32px;
    border:0px;
    background: url(../img/liveview/logo.png) no-repeat;
    float: left;
}

#device_server_name
{
    height:28px;
    border:0px;
    background:#93a5bc;
    font-weight:600;
    font-size:20px;
    font-family: 'Arial';
    color:white;
    float: left;    
    text-align: center;
    margin-top: 12px;
    margin-left: 5px
}

 #playback_slider
{
    position:absolute;
    width:204px;
    height:7px;
    margin-top: 18px;
    border:0px;
    background:  #e6e6e6;
    float: left;
}

#playback_slider .ui-slider-handle 
{
      background: url(../img/liveview/handle_normal.png) no-repeat;
      border: none;
}

#playback_slider .ui-slider-handle:focus
{
    outline: none;
}

#playback_slider .ui-slider-range 
{ 
    background: #729fcf; 
}  

#power
{
    width:40px;
    height:40px;
    border:0px;
    background: url(../img/liveview/power_normal.png) ;
    float: right;
}

#power:hover
{
    background: url(../img/liveview/power_hover.png) ;
    cursor: pointer;
}

#power:active
{
    background: url(../img/liveview/power_down.png) ;
}

#setup
{
    width:40px;
    height:40px;
    border:0px;
    background: url(../img/liveview/setup_normal.png) ;
    float: right;
}

#setup:hover
{
    background: url(../img/liveview/setup_hover.png) ;
    cursor: pointer;
}

#setup:active
{
    background: url(../img/liveview/setup_down.png) ;
}

#datepicker
{
    width:112px;
    height:40px;
    border:0px;
    background: url(../img/liveview/cal_normal.png) ;
    float: left;
    padding-left:25px;
    color:white;
}

#datepicker:hover
{
    background: url(../img/liveview/cal_hover.png) ;
    cursor: pointer;
}

#datepicker:active
{
    background: url(../img/liveview/cal_down.png) ;
}

#datepicker:focus
{
    outline: none;
}

#slowspeed
{
    width:30px;
    height:40px;
    border:0px;
    background: url(../img/liveview/slow_normal.png) ;
    float: left;
}

#slowspeed:hover
{
    background: url(../img/liveview/slow_hover.png) ;
    cursor: pointer;
}

#slowspeed:active
{
    background: url(../img/liveview/slow_down.png) ;
}

#slowspeed:focus
{
    outline: none;
}

#playspeed
{
    width:30px;
    height:28px;
    border:0px;
    background:#8797a8;
    float: left;
    color:white;
    text-align: center;
    margin-top: 12px
}

#fastspeed
{
    width:30px;
    height:40px;
    border:0px;
    background: url(../img/liveview/fast_normal.png) ;
    float: left;
}

#fastspeed:hover
{
    background: url(../img/liveview/fast_hover.png) ;
    cursor: pointer;
}

#fastspeed:active
{
    background: url(../img/liveview/fast_down.png) ;
}

#fastspeed:focus
{
    outline: none;
}

#prehalfhour
{
    width:30px;
    height:40px;
    border:0px;
    background: url(../img/liveview/first_normal.png) ;
    float: left;
}

#prehalfhour:hover
{
    background: url(../img/liveview/first_hover.png) ;
    cursor: pointer;
}

#prehalfhour:active
{
    background: url(../img/liveview/first_down.png) ;
}

#prehalfhour:focus
{
    outline: none;
}

#pause
{
    width:30px;
    height:40px;
    border:0px;
    background: url(../img/liveview/pause_normal.png) ;
    float: left;
}

#pause:hover
{
    background: url(../img/liveview/pause_hover.png) ;
    cursor: pointer;
}

#pause:active
{
    background: url(../img/liveview/pause_down.png) ;
}

#pause:focus
{
    outline: none;
}

#play
{
    width:30px;
    height:40px;
    border:0px;
    background: url(../img/liveview/play_normal.png) ;
    float: left;
}

#play:hover
{
    background: url(../img/liveview/play_hover.png) ;
    cursor: pointer;
}

#play:active
{
    background: url(../img/liveview/play_down.png) ;
}

#play:focus
{
    outline: none;
}

#nextframe
{
    width:30px;
    height:40px;
    border:0px;
    background: url(../img/liveview/next_normal.png) ;
    float: left;
}

#nextframe:hover
{
    background: url(../img/liveview/next_hover.png) ;
    cursor: pointer;
}

#nextframe:active
{
    background: url(../img/liveview/next_down.png) ;
}

#nextframe:focus
{
    outline: none;
}

#nexthalfhour
{
    width:30px;
    height:40px;
    border:0px;
    background: url(../img/liveview/last_normal.png) ;
    float: left;
}

#nexthalfhour:hover
{
    background: url(../img/liveview/last_hover.png) ;
    cursor: pointer;
}

#nexthalfhour:active
{
    background: url(../img/liveview/last_down.png) ;
}

#nexthalfhour:focus
{
    outline: none;
}

#playtime
{
    width:114px;
    height:28px;
    border:0px;
    background:#8797a8;
    float: left;
    color:white;
    text-align: center;
    margin-top: 12px;
}

#liveview
{
    width:40px;
    height:40px;
    border:0px;
    background: url(../img/liveview/liveview_normal.png) ;
    float: right;
}

#liveview:hover
{
    background: url(../img/liveview/liveview_hover.png) ;
    cursor: pointer;
}

#liveview:active
{
    background: url(../img/liveview/liveview_down.png) ;
}

#playback
{
    width:40px;
    height:40px;
    border:0px;
    background: url(../img/liveview/playback_normal.png) ;
    float: right;
}

#playback:hover
{
    background: url(../img/liveview/playback_hover.png) ;
    cursor: pointer;
}

#playback:active
{
    background: url(../img/liveview/playback_down.png) ;
}

#liveview
{
    width:40px;
    height:40px;
    border:0px;
    background: url(../img/liveview/live_normal.png) ;
    float: right;
}

#liveview:hover
{
    background: url(../img/liveview/live_hover.png) ;
    cursor: pointer;
}

#liveview:active
{
    background: url(../img/liveview/live_down.png) ;
}

 #playback
{
    width:40px;
    height:40px;
    border:0px;
    background: url(../img/liveview/playback_normal.png) ;
    float: right;
}

#playback:hover
{
    background: url(../img/liveview/playback_hover.png) ;
    cursor: pointer;
}

#playback:active
{
    background: url(../img/liveview/playback_down.png) ;
}

#playback:disabled
{
    background: url(../img/liveview/playback_inactivate.png) ;
}

 #division
{
    width:60px;
    height:40px;
    border:0px;
    background: url(../img/liveview/layout16_normal.png) ;
    float: right;
}

 #spinup
{
   position:absolute;
    width:16px;
    height:12px;
    border:0px;
    background: url(../img/liveview/up_normal.png) ;
}

#spinup:hover
{
    background: url(../img/liveview/up_hover.png) ;
    cursor: pointer;
}

#spinup:active
{
    background: url(../img/liveview/up_down.png) ;
}

#spinup:disabled
{
    background: url(../img/liveview/up_inactive.png) ;
}
/*ie 8 bug: can't identify css :disabled*/
#spinup[disabled]
{
	background: url(../img/liveview/up_inactive.png) ;
}

#spinup:focus
{
    outline: none;
}

 #spindown
{
    position:absolute;
    width:16px;
    height:12px;
    border:0px;
    background: url(../img/liveview/down_normal.png) ;
}

#spindown:hover
{
    background: url(../img/liveview/down_hover.png) ;
    cursor: pointer;
}

#spindown:active
{
    background: url(../img/liveview/down_down.png) ;
}

#spindown:disabled
{
    background: url(../img/liveview/down_inactive.png) ;
}
/*ie 8 bug: can't identify css :disabled*/
#spindown[disabled]
{
	background: url(../img/liveview/down_inactive.png) ;
}

#spindown:focus
{
    outline: none;
}
 #menu
{
    background:#ffffff;
    position:absolute;
    border: 0px;
    z-index:10;
}

#menu button
{
    float: left;
    font-family: "Arial";
    font-size: 14px;
    width: 150px;
    height:40px;
    border:0px;
    margin: 0px;
    padding: 10px;
    background:  #e6e6e6;
    text-align: left;
}

 #menu button:hover
{
    background:  #eeeeee;
    cursor: pointer;
}

 #toolbarsetting_menu
{
    background:#ffffff;
    position:absolute;
    border: 0px;
    z-index:10;
}

#toolbarsetting_menu button
{
    float: left;
    font-family: "Arial";
    font-size: 14px;
    width: 150px;
    height:40px;
    border:0px;
    margin: 0px;
    padding: 10px;
    background:  #e6e6e6;
    text-align: left;
}

 #toolbarsetting_menu button:hover
{
    background:  #eeeeee;
    cursor: pointer;
}

 #playback_channel_menu
{
    background:#ffffff;
    position:absolute;
    border: 0px;
    z-index:10;
}

#playback_channel_menu button
{
    float: left;
    font-family: "Arial";
    font-size: 14px;
    width: 150px;
    height:40px;
    border:0px;
    margin: 0px;
    padding: 10px;
    background:  #e6e6e6;
    text-align: left;
}

 #playback_channel_menu button:hover
{
    background:  #eeeeee;
    cursor: pointer;
}

#date_menu
{
    background:#ffffff;
    position:absolute;
    border: 0px;
    z-index:10;
}

#channel_menu
{
    background:#ffffff;
    position:absolute;
    border: 0px;
    z-index:10;
}

#channel_menu button
{
    float: left;
    font-family: "Arial";
    font-size: 14px;
    width: 150px;
    height:18px;
    border:0px;
    margin: 0px;
    padding: 2px;
    padding-left: 5px;
    background:  #e6e6e6;
    text-align: left;
}

#channel_menu button:hover
{
    background:  #eeeeee;
    cursor: pointer;
}


#forget_button
{
    background: url(../img/login/forget.png) ;
    padding:0;
    width:16px;
    height:16px;
    border:0px;
}

#info_button
{
    background: url(../img/login/info.png) ;
    padding:0;
    width:16px;
    height:16px;
    border:0px;
}

#language_button
{
    background: url(../img/login/globe.png) ;
    padding:2px 0;
    width:16px;
    height:16px;
    border:0px;
}

#login_button
{
    background: url(../img/login/button_normal.png) ;
    padding:3px;
    width:auto;
    min-width: 68px;
    height:26px;
    border:1px;
    border-color: black;
    border-radius: 3px;
}

#login_button:hover
{
    background: url(../img/login/button_hover.png) ;
    cursor: pointer;
}

#login_button:active
{
    background: url(../img/login/button_down.png) ;
}


#Dlg_login 
{
    background: black url(../img/login/name_normal.png) left no-repeat;
    padding:0;
    padding-left: 40px;
    width:210px;
    height:30px;
    border:0px;
    border-radius: 3px;
    font-size: 26px\9;
}

#Dlg_login:hover
{
    background: black url(../img/login/name_hover.png) left no-repeat;
    cursor: pointer;
}

#Dlg_login:focus
{
    background: black url(../img/login/name_active.png) left no-repeat;
}

#Dlg_pwd
{
    background: black url(../img/login/password_normal.png) left no-repeat;
    padding:0;
    padding-left: 40px;
    width:210px;
    height:30px;
    border:0px;
    border-radius: 3px;
    font-size: 24px;
}

#Dlg_pwd:hover
{
    background: black url(../img/login/password_hover.png) left no-repeat;
    cursor: pointer;
}

#Dlg_pwd:focus
{
    background: black url(../img/login/password_active.png) left no-repeat;
}