.channel_button
{
    background:url(../img/Dark/title_live_normal.png);
    color:#ffffff;
/*    cursor: pointer;*/
}

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

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

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

#device_server_name
{
    height:28px;
    border:0px;
    background:#202020;
    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/Dark/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/Dark/power_normal.png) ;
    float: right;
}

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

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

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

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

#setup:active
{
    background: url(../img/Dark/settings_down.png) ;
}

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

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

#datepicker:active
{
    background: url(../img/Dark/calendar_down.png) ;
}

#datepicker:focus
{
    outline: none;
}

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

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

#slowspeed:active
{
    background: url(../img/Dark/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/Dark/fast_normal.png) ;
    float: left;
}

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

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

#fastspeed:focus
{
    outline: none;
}

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

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

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

#prehalfhour:focus
{
    outline: none;
}

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

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

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

#pause:focus
{
    outline: none;
}

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

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

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

#play:focus
{
    outline: none;
}

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

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

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

#nextframe:focus
{
    outline: none;
}

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

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

#nexthalfhour:active
{
    background: url(../img/Dark/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/Dark/liveview_normal.png) ;
    float: right;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#spinup:active
{
    background: url(../img/Dark/select_up_down.png) ;
}

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

#spinup:focus
{
    outline: none;
}

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

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

#spindown:active
{
    background: url(../img/Dark/select_down_down.png) ;
}

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

#spindown:focus
{
    outline: none;
}
 #menu
{
    background:#505050;
    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:  #282828;
    text-align: left;
    color:#ffffff;
}

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

 #toolbarsetting_menu
{
    background:#505050;
    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:  #282828;
    text-align: left;
    color:#ffffff;
}

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

 #playback_channel_menu
{
    background:#505050;
    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:  #282828;
    text-align: left;
    color:#ffffff;
}

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

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

#channel_menu
{
    background:#505050;
    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:  #282828;
    text-align: left;
    color:#ffffff;
}

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


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

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

#language_button
{
    background: url(../img/WebLogin/ic_language.png) ;
    width:24px;
    height:24px;
    border:0px;
    vertical-align: middle;
}

.download_symbol
{
    background: url(../img/WebLogin/ic_download_normal.png) ;
    width:24px;
    height:24px;
    border:0px;
    vertical-align: middle;
}

.download_symbol:hover{    
    background: url(../img/WebLogin/ic_download_hover.png) ;
}

.download_symbol:active{    
    background: url(../img/WebLogin/ic_download_down.png) ;
}

.download_symbol:disabled{    
    background: url(../img/WebLogin/ic_download_disable.png) ;
}

#login_button,
#login_setting_button
{
    background-color: #163b79;
    /*padding:3px;*/
    width:auto;
    min-width: 180px;
    height:35px;
    border:1px solid #0061f5;
    color:#d3e4ff;
    font-size: 14pt;
    /*border-radius: 3px;*/
}

#login_button:hover,
#login_setting_button:hover
{
    color:#93beff;
    cursor: pointer;
}

#login_button:active,
#login_setting_button:active
{
    color:#3887ff;
}

#login_button:disabled,
#login_setting_button:disabled
{
    color:#3887ff;
}


#Dlg_login,
#Dlg_first_login,
#authbox_usn
{
    background: black url(../img/WebLogin/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,
#Dlg_first_login:hover,
#authbox_usn:hover
{
    background: black url(../img/WebLogin/name_hover.png) left no-repeat;
    cursor: pointer;
}

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

#Dlg_pwd,
#Dlg_first_pwd,
#Dlg_first_pwdconfirm,
#authbox_pwd
{
    background: black url(../img/WebLogin/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,
#Dlg_first_pwd:hover,
#Dlg_first_pwdconfirm:hover,
#authbox_pwd:hover
{
    background: black url(../img/WebLogin/password_hover.png) left no-repeat;
    cursor: pointer;
}

#Dlg_pwd:focus,
#Dlg_first_pwd:focus,
#Dlg_first_pwdconfirm:focus,
#authbox_pwd:focus
{
    background: black url(../img/WebLogin/password_active.png) left no-repeat;
}