body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 9pt;
    padding:0;
    margin:0;
	overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}


#Toolbar {
	position: relative;
    left: 0;
    right: 0;
    top: 0;
    min-height: 36px;
    font-size: 11pt;
    background: #DDD;
    border: 1px solid black;
    z-index: 25;
    float: left;
    overflow: auto;
    width: 100%;
}
	.Toolbar span {
		display: block;
		float: left;
	}
	#ModeButtons {
		margin-right: 8px;
	}
	#SizeSpan,
	 #QualitySpan {
		position: relative;
		margin-top: 8px;
		padding-left: 8px;
	}
	#ExtraButtons {
		float: right;
	}
		#Logo {
			margin: 1px 1px 1px 10px;
			border: 1px solid black;
		}

	.ToolbarButton {
		margin: 1px;
        border: 1px solid #DDD;
		vertical-align: top;
		cursor: pointer;
	}	.ToolbarButton:hover {
			margin: 1px;
			border: 1px solid #999;
		}

	a.PlusMinus {
		font-family: monospace;
		font-weight: bold;
		font-size: 14pt;
		text-decoration: none;
	} a.PlusMinus:link, a.PlusMinus:visited {
		color: black;
		border: 1px solid #DDD;
	} a.PlusMinus:hover {
		background-color: #EEE;
		color: #555;
		border: 1px solid black;
	}


#Left {
    position: relative;
    left: 0;
	top: 0;
    width: 230px;
    z-index: 25;
	float: left;
	clear: none;
	border-right: 1px solid black;
}
	div.sideConf {
		overflow-y: auto;
        overflow-x: hidden;
		position: relative;
	}
	#CameraPanel { }
		.LiveList span,
		 .SearchList span {
			background: url(image/Tree_Server.png) left center no-repeat;
			margin: 1px 0 1px 15px;
			padding: 0 0 0 19px;
		}
		.LiveList .listExpand,
		 .SearchList .listExpand {
			position: absolute;
			display: block;
			margin: 2px;
			height: 11px;
			width: 11px;
			font-size: 10px;
			line-height: 9px;
			background: #CCC;
			font-weight: bold;
			text-align: center;
			cursor: pointer;
		} .LiveList .listExpand:hover, .SearchList .listExpand:hover {
				background: #666;
				color: #CCC;
			}
		.LiveList .listRemoval {
			position: absolute;
			display: block;
			right: 0;
			height: 16px; width: 16px;
			margin: 0;	padding: 0;
			background: #CCC;
			color: black;
			font-size: 16px;
			line-height: 12px;
			font-weight: bold;
			vertical-align: middle;
			text-align: center;
			cursor: pointer;
		} .LiveList .listRemoval:hover {
				color: white;
				background: red;
			}
		.LiveList ul {
			padding: 0 0 0 22px;
			margin: 0;
		}
			.LiveList ul li {
				list-style: none;
				padding: 0 0 0 25px; margin: 0 0 0 1px;
				border-left: 1px dotted #CCC;
			}
			.LiveList ul li.leaf-ptz {	background: url(image/Tree_CameraPTZ.png) 5px center no-repeat;	}
			.LiveList ul li.leaf-loss {	background: url(image/Tree_Loss.png) 5px center no-repeat; cursor: default; }
            .LiveList ul li.leaf-dis { display: none; }
			.LiveList ul li.leaf-norm {	background: url(image/Tree_Camera.png) 5px center no-repeat; }
			.LiveList ul li.selected {	font-weight: bold; }
		#Add-L,
          #Add-S,
          #Add-T {
			font-size: 1.6em;
			position: relative;
			z-index: 8;
			cursor: pointer;
			width: 50%;
			background: url(image/Tree_ServerAdd.png) left center no-repeat;
			padding: 0 0 0 19px;
		} #Add-L:hover, #Add-S:hover, #Add-T:hover {
				text-decoration: underline;
			}
		#Save {
			width: 45%;
			cursor: pointer;
			position: relative;
			margin-left: 55%;
			margin-top: 2px;
            display: none;
            visibility: hidden;
		}
		#ServerForm-L, #ServerForm-S, #ServerForm-T {
			width: 90%;
			padding: 0 5% 2px;
			margin-bottom: 2px;
			border-bottom: 1px solid black;
		}
			#ServerForm-L div.AddL,
             #ServerForm-S div.AddL,
             #ServerForm-T div.AddL {
				font-size: 10px;
				font-weight: bold;
				margin: 0 0 0 20px;
				padding: 0;
			}
			.AddPT {
				width: 33% !important;
			}
			.AddL {
				visibility: hidden;
				display: none;
			}
			.AddL[type=button], .AddL[type=submit] {
				width: 50% !important;
			}
			#ServerForm-L input,
             #ServerForm-S input,
             #ServerForm-T input,
			 #SearchPanel input.dt {
				left: 50px;
			}
			#ServerForm-L label,
             #ServerForm-S label,
             #ServerForm-T label,
			 #SearchPanel label {
				display: block;
				font-size: .8em;
			}
			#ServerForm-L input,
			 #ServerForm-L select,
             #ServerForm-S input,
             #ServerForm-S select,
             #ServerForm-T input,
             #ServerForm-T select,
			 #SearchPanel input.dt {
				width: 100%;
			}
			#ServerForm-L .srvLoginButton,
             #ServerForm-S .srvLoginButton,
             #ServerForm-T .srvLoginButton {
				width: 50%;
			}
			#ServerForm-L .srvSelButton,
             #ServerForm-S .srvSelButton,
             #ServerForm-T .srvSelButton {
				width: 33%;
			}
	#SearchPanel { }
		#SearchPanel .SearchTime {
			width: 100%;
			margin: 3px 0;
			position: relative;
		}
			#SearchPanel .SearchTime label {
				font-weight: bold;
				float: left;
				width: 25px;
				text-align: right;
			}
			#SearchPanel .SearchTime > span {
				position: relative;
				display: block;
				margin-left: 30px;
				margin-right: 3px;
				background: #CCC;
				font-weight: normal;
				border: 1px solid #333;
				padding: 0 4px;
				cursor: pointer;
			}
			#SearchPanel > input {
				width: 90%;
				margin: 0 5% 2px;
			}

			.iPhoneTD label {
				width: 10% !important;
				padding-top: 5px;
			}
			.iPhoneTD select {
				width: 28%;
				margin-left: 2%;
			}
			.iPhoneTD input[type=button] {
				width: 50%;
			}
			.timeEntry_wrap {
				padding: 0;
				margin: 0;
				width: 70%;
			}
			.timeEntry_wrap > span {
				vertical-align: middle;
			}
			input.hasTimeEntry {
				padding: 0;
				margin: 0;
				width: 35%;
			}
			.normalTD input[type=none] {
				width: 25%;
			}

			.SearchList > div > div {
				background: url(image/Tree_UnCheck.png) left center no-repeat;
				padding: 0 0 0 19px;
				margin: 0 0 0 5px;
				font-weight: normal;
				cursor: pointer;
			}
			.SearchList > div > div.selected {
				background: url(image/Tree_Check.png) left center no-repeat;
			}
            .SearchList > div > div.srch-disp { font-weight: bold; }
			.SearchList a.disabled:hover {
				background: #CCC !important;
				color: black !important;
				cursor: default;
			}
			.SearchList span.disabled {
				color: #666;
                text-decoration: line-through;
			}
			.SearchList div span { z-index: 4; }
	#ViewPanel { }
		#ViewPanel .View {
			background-repeat: no-repeat;
			background-position: 2px center;
            background-image: url(image/Tree_View.png);
			padding: 0 0 0 22px;
			margin: 1px 0 0 0;
			cursor: pointer;
            display: block;
            text-decoration: none;
            color: #000;
		} #ViewPanel .View:hover {
				background-color: #333;
				color: #CCC;
			}
        #ViewPanel .folder {
            background-image: url(image/Tree_Folder.png);
            background-repeat: no-repeat;
            background-position: 2px 0;
        }
            #ViewPanel .expanded {
                background-image: url(image/Tree_FolderEx.png) !important;
            }
            #ViewPanel .folder span {
                padding-left: 22px;
                display: block;
                cursor: pointer;
            }
            #ViewPanel .folder .View {
                margin-left: 23px;
            }
            #ViewPanel .folder .folder {
                margin-left: 22px;
            }
		#ViewPanel .viewRemoval {
			position: absolute;
			display: block;
			right: 0;
			height: 16px; width: 16px;
			margin: 0;	padding: 0;
			background: #CCC;
			color: black;
			font-size: 16px;
			line-height: 12px;
			font-weight: bold;
			vertical-align: middle;
			text-align: center;
			cursor: pointer;
		} #ViewPanel .viewRemoval:hover {
				color: white;
				background: red;
			}
	#TriggerPanel { }
        .TriggerList {
            padding: 7px 0 0;
            margin: 9px 2px 0;
            border: 1px dotted #666;
            position: relative;
        }
            .TriggerList > h6 {
                position: absolute;
                margin: 0 0 0 8px;
                top: -6px;
                font-size: 10px;
                padding: 0 2px;
                background: white;
            }
            .TriggerList > ul {
                margin: 0;
                padding: 0;
            }
                .TriggerList ul > li {
                    margin: 0 0 0 0;
                    padding: 0 20px 0 2px;
                    list-style-position: inside;
                    cursor: pointer;
                }
                .TriggerList .Trigger {
                    color: green;
                    background: #FFF;
                }
                .TriggerList .t-on {
                    color: red;
                    background: #D66;
                }
                    .TriggerList li > span {
                        color: black;
                    }
                .TriggerList .t_state {
                    position: absolute;
                    display: inline;
                    right: 2px;
                    background: green;
                    color: white !important;
                }
    #Left > ul > li.selected {
		background: url(image/NavBar_BG_Sel.png) repeat-x !important;
	} #Left > ul > li.selected:hover {
			background: url(image/NavBar_BG_SelH.png) repeat-x !important;
		}
	#sbbuttons {
        margin: 0;
        padding: 0;
    }
    #sideBar1,
	 #sideBar2,
     #sideBar3 {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
		padding: 0 0 4px;
		font-size: 20px;
		vertical-align: middle;
		font-weight: bold;
		height: 24px;
		vertical-align: middle;
		background: url(image/NavBar_BG.png) repeat-x;
		color: black;
		cursor: pointer;
		border-top: 1px solid black;
	} #sideBar1:hover, #sideBar2:hover, #sideBar3:hover {
		background: url(image/NavBar_BGH.png) repeat-x;
	}
	.CameraButton {
		list-style-image: url(image/NavBar_Cameras.png);
		list-style-position: inside;
	}
	.ViewButton {
		list-style-image: url(image/NavBar_Views.png);
		list-style-position: inside;
	}
    .TriggerButton {
        list-style-image: url(image/NavBar_SoftTrigger.png);
        list-style-position: inside;
    }
        .trigger_count {
            position: absolute;
            bottom: 1px;
            left: 20px;
            background: red;
            padding: 1px 3px;
            border: 2px solid #FFF;
            font-size: 11px;
            font-weight: bold;
            color: white;
            border-radius: 25px;
            -moz-border-radius: 25px;
        }


#Right {
    position: absolute;
    left: 230px;
	bottom: 0;
	top: 36px;
	right: 0;
}
	.VideoPanel  {
		position: absolute;
		background-color: #BBB;
		border: 1px solid black;
		z-index: 15;
	}
		.VideoPanel img {
			position: absolute;
			left: 0%;
			width: 100%;
			top: 0%;
			height: 100%;
			z-index: 5;
		}
		.panelBar {
			background: url(image/50black.png);
			position: absolute;
			height: 12px;
			right: 0;
			bottom: 0;
			width: 100%;
			left: 0;
			z-index: 10;
			font: normal 10px Arial;
			color: white;
		}
			.panelBar h4 {
				position: absolute;
				top: 0;
				margin: 0 10px;
				padding: 0;
			}
			.panelBar span {
				right: 10px;
				position: absolute;
				display: inline;
				top: 0;
				float: right;
			}
        .OSD {
            width: auto;
            bottom: auto;
            top: auto;
            left: auto;
            right: auto;
            height: auto;
            padding: 3px 10px;
            text-align: center;
        }
            .OSD h4 {
                position: relative !important;
                margin: 0 auto;
                display: inline;
            }
            .OSD span {
                position: relative;
                float: none;
                right: 0;
            }
	#SearchBar {
		border-top: 1px solid black;
		background: #DDD;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 20;
		padding: 0 0 0 40px;
	}
		#SearchBar img {
			padding: 3px;
			cursor: pointer;
		} #SearchBar img:hover {
				filter: alpha(opacity=100);
				-moz-opacity: 1.0;
				opacity: 1.0;
			}
		#SearchBar img.noHover { cursor: default; }
		#SearchBar img,
		 #SearchBar img.noHover:hover {
			filter: alpha(opacity=70);
			-moz-opacity: 0.7;
			opacity: 0.7;
		}
		#SearchBar span {
			font-size: 14px;
		}
		#SearchBar #timestamp {
			position: absolute;
			right: 0;
			margin: 10px;
		}
		#SearchBar #PlayStat {
			position: absolute;
			margin: 10px 20px;
		}
	.PTZ, .PTZ div.manualPTZ {
		display: block;
		position: absolute;
		left: 0;	right: 0;
		top: 0;		bottom: 0;
		z-index: 30;
        height: 100%;
        width: 100%;
	}
    .PTZ div.manualPTZ { background: url(image/trans.png); }
	.PTZ div.sCtrl {
		height: 50px;
	}
	.PTZ ul {
		display: inline;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 35;
		text-align: right;
		background: url(image/50black.png);
		color: white;
		margin: 0;
		padding: 0;
	}
        .PTZ ul li {
            display: none;
            visibility: hidden;
            list-style: none;
            cursor: pointer;
        } .PTZ ul:hover li {
                display: block;
                visibility: visible;
            }
	.PTZ ul span {
		text-align: center;
		cursor: default;
	}
	.PTZ ul:hover span, .PTZ ul li:hover { text-decoration: underline; }
    .PTZ .ptz_ctrls {
        display: block;
        width: 100%;
        position: relative;
        top: 0;
        z-index: 50;
    }
        .PTZ .ptz_ctrls .ptz_button,
          .PTZ .ptz_ctrls .ptz_value {
            width: 16px;
            height: 16px;
            position: relative;
            margin: 1px 0 0 1px;
            background: url(image/Arrow_BG.png);
            color: white;
            display: block;
            float: left;
            text-align: center;
        }
        .PTZ .ptz_ctrls .ptz_button {
            cursor: pointer;
        } .PTZ .ptz_ctrls .ptz_button:hover {
                background: #888;
            }
        .PTZ .btnCtrl {
            display: none;
            visibility: hidden;
        }

.RightMenu {
	position: absolute;
	background-color: #EEE;
	border: 1px solid grey;
	z-index: 90;
	width: 150px;
    display: none;
}
	.RightMenu a {
		display: block;
		padding: 1px 1px 1px 11px;
	} .RightMenu a:hover {
		cursor: pointer;
		background-color: #AAA;
	}
	.RightMenu a.disabled,
	 .RightMenu a.disabled:hover {
		cursor: normal;
		color: #CCC;
		background: none;
	}
	.RightMenu a.check { background: url(image/Menu_Check.png) left center no-repeat; }
    .RightMenu a.check:hover { background: url(image/Menu_Check.png) #AAA left center no-repeat; }


#Notify {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #FFF;
    text-align: right;
    z-index: 90;
}
    #Notify div {
        cursor: pointer;
        font-weight: bold;
        font-size: 10;
    }

.Camera, .CameraLoss {
    padding-left: 32px;
    margin: 3px;
    z-index: 50;
	list-style: none;
    background: transparent url(image/Tree_Camera.png) 8px center no-repeat;
    cursor: pointer;
}

.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; text-align: center; cursor: pointer;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #c5dbec; background: #dfeffc 50% 50% repeat-x; font-weight: bold; color: #2e6e9e; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #2e6e9e; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #79b7e7; background: #d0e5f5 50% 50% repeat-x; font-weight: bold; color: #1d5987; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #1d5987; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #79b7e7; background: #f5f8f9 50% 50% repeat-x; font-weight: bold; color: #e17009; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #e17009; outline: none; text-decoration: none; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fad42e; background: #fbec88 50% 50% repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec 50% 50% repeat-x; color: #cd0a0a; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-corner-all { -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.ui-resizable { position: relative; }
.ui-resizable-handle { position: absolute; display: block !important; font-size: 0.1px; height: 0; }
.ui-resizable .ui-resizable-handle { display: block; }
body .ui-resizable-disabled .ui-resizable-handle { display: none; }
body .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-e { cursor: e-resize; width: 2px; right: 0px; top: 0px; height: 100%; }