body {
	color: #1d3558;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	background-color: #dae5f6;
	margin: 0px;
}
body#home {
	overflow: hidden;
}
div#login {
	float: right;
}
div#remember {
	float: right;
	padding: 0 10px 0 10px;
}
div#logout {
	display: none;
	float: right;
}
button.login {
	width: 70px;
	background-color: #dae5f6;
	border:1px solid #1d3558;
}
button.icon {
	background-color: #959caf;
	color: #dae5f6;
	moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 1px solid #1d3558;
	margin: 0px;
}
div#head {
	background-color: #96a2b3;
	padding: 10px 0px 0px 10px;
	margin: 0 0 8px 0;
}
div#appmenu {
}
div#dplot {
	float: right;
}
div#legend {
	position: absolute;
	overflow: auto;
	bottom: 220px;
	left: 240px;
	background-color: #fff;
	width: 400px;
	height: 200px;
	padding: 10px;
	border: 2px solid #3f659c;
	font-family: Arial;
	font-size:12px;
}
div#imgbox {
	vertical-align: middle;
	position: absolute;
	border: 1px solid #999;
	padding: 5px;
	background: #fff; 
	visibility: hidden;
	z-index: 90;
	overflow: hidden;
	text-align: center;
	cursor: default;
}
div.right {
	float: right;
}
div#divtn {
	margin: 0 4px;
	padding: 0 10px;
	display: inline-block;
	position: relative;
	text-align: center;
	width: 80px;
	height: 32px;
}
canvas#canvas {
	margin-right:10px;
	border: 2px solid #3f659c;
}
span.caption {
	font-weight: bold;
	font-size: 120%;
}
span#chartname {
	font-weight: bold;
}
span#chartdirty {
	color: #F00;
}
div#dinfo {
	margin-left: 210px;
}
table#info {
	padding:10px;
}
h1 {
	font-size:20px;
	text-align:center;
}
div#now {
	font-family:Monospace;
	height: 20px;
}
div#msg {
	height: 20px;
}
div.durnote {
	padding: 0 0 0 25px;
}
div.tiptext {
	display: none;
}
select#links {
	width: 140px;
}
button.linkbtn {
	width: 70px;
	background-color: #f0f0ff;
	border:1px solid #1d3558;
}
button.formbtn {
	background-color: #cfdff6;
	border:1px solid #1d3558;
}
.dlg{
	visibility: hidden;
	position: absolute;
	background: #dae5f6;
	border: 2px solid #3f659c;
	color: #3f659c;
	padding: 20px;
	z-index: 201;
}
span.dlgtitle {
	font-weight: bold;
}
.mask{
	background: #000;
	position: absolute;
	opacity: .5;
	top: 0;
	z-index: 200;
}
.w140 {
	width: 140px;
}
div#dlg5 {
	width:280px;
}
span.d5head {
	font-size:130%;
}
.d5img {
	border:0;
	margin:5px;
}
.d5imgsel {
	border:2px solid blue;
	margin:3px;
}
.d5drop {
	min-height: 50px;
	width: 250px;
	border: 2px solid #3f659c;
	padding: 10px;
}
table#d7table {
	border: 1px solid #3f659c;
}
table#d7table th {
	text-align: left;
	padding-right: 5px;
}
table#d7table td {
	padding-right: 10px;
}
iframe#d8frame {
	overflow: scroll;
	border: 6px;
}
div#dlg9 {
	width:300px;
}
.d9img {
	border:0;
	margin:5px;
}
.d9imgsel {
	border:2px solid blue;
	margin:3px;
}
.d9ctrl {
	width:12em;
}
td.d9ctrl {
	background-color: #bfd4ff;
}
/******************** help pages *********************************************/
body.help {
	background-color: #fff;
}
#help {
	background: #96a2b3;
	position: fixed;
	right: 10px;
	visibility: hidden;
	border: 2px solid #1d3558;
}
#hframe {
	margin: 10px 0 0 0;
	border: 0;
	src: 'help.html';
}
div.hdiv {
	padding: 6px;
}
/******************** tabs for controls **************************************/
.tabrow {
	width: 182px;
	position: relative;
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tabrow li {
	margin: 0 4px;
	padding: 0 10px;
	border: 1px solid #3f659c;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	background: #ccc;
	display: inline-block;
	position: relative;
	z-index: 0;
}
.tabrow li a {
	text-decoration: none;
}
.tabrow li.selected {
	background: #eee;
	color: #000;
	z-index: 2;
	border-bottom-color: #eee;
}
.tabrow:before {
	z-index: 1;
}
.tabrow:after {
	position: absolute;
	content: "";
	width: 100%;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #3f659c;
	z-index: 1;
}
/******************** css for controls ***************************************/
div#ctrls {
	position:absolute;
	padding:0 0 0 10px;
}
div.ctrl {
	width:180px;
	position:absolute;
	background: #eee;
	border-color: #3f659c;
	border-style: solid;
	border-width: 0 1px 1px 1px;
	padding: 4px 0;
}
div#ctrl1 {
}
div#ctrl2 {
}
div#ctrl3 {
}
div.hide1 {
	background-color: #ccc;
	margin: 2px 0;
	padding: 0 0 0 4px;
}
div.hide1 img {
	vertical-align: bottom;
}
div.hide2 {
	padding: 0 4px;
}
div.stop {
	float: right;
	position: relative;
	width: 12px;
	height: 11px;
	background:url(images/wiz-stop.gif) top left no-repeat;
}
/******************** help wizard ********************************************/
div.wiz {
	display: none;
	position: absolute;
	background-color: #fff;
	padding: 10px;
	border: 2px solid #3f9c65;
	font-family: Arial;
	font-size:12px;
}
div.stopwiz {
	float: right;
	position: relative;
	width: 12px;
	right: -9px;
	height: 11px;
	top: -9px;
	background:url(images/wiz-stop.gif) top left no-repeat;
}
span.wizhead {
	font-size:16px;
	font-weight: bold;
}
span.wizdates {
	background-color: #c1bf9f;
}
button.wizbtn {
	width: 70px;
	background-color: #f0fff0;
	border:1px solid #3f9c65;
}
/***************************** menu css *************************************/

.mnav {padding: 0px; height:24px; z-index:10}
.menu a {padding: 0 5px; float:left; color:#6a65b2; text-decoration:none; height:20px; padding-top:4px}
.menu span {padding: 0 5px; float:left; color:#6a65b2; height:20px; padding-top:4px; font-weight:bold;}
.menu a:hover {color:#3f659c}
.menu {padding: 0px; list-style:none; margin:0 auto}
.menu li {padding: 0px; position:relative; float:left; width:60px; background:#cfdff6; z-index:10}
.menu ul {padding: 0px; display:none; position:absolute; font:normal 13px Arial,Verdana; top:24px; left:0; background:#96a2b3; display:none; list-style:none}
.menu ul li {padding: 0px; float:none; border-top:1px solid #ccc; width:120px}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {background:#baceec; color:#3f659c}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {padding: 0px; float:none; display:block; background:none; height:22px; padding-top:5px}
.menu ul ul {padding: 0px; left:120px; top:0}
.menu li.submenu {padding: 0px; font-weight:bold}
.menu li.noborder {padding: 0px; border-top:none}
li.menuhover a, li.menuhover li.menuhover a {color:#3f659c; background:#baceec}
li.menuhover span, li.menuhover li.menuhover span {color:#3f659c; background:#baceec}
li hr {border:0;margin:1px;}

/***************************** tooltip css **********************************/
#tt {position:absolute; display:block; z-index:20; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}

/************ calendar-win2k-cold-1 incorporated ****************************/
/************ The main calendar widget.  DIV containing a table. ************/
.calendar {
	position: relative;
	display: none;
	border-top: 2px solid #fff;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	border-left: 2px solid #fff;
	font-size: 11px;
	color: #000;
	cursor: default;
	background: #c8d0d4;
	font-family: tahoma,verdana,sans-serif;
	z-index: 202;
}

.calendar table {
	border-top: 1px solid #000;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #000;
	font-size: 11px;
	color: #000;
	cursor: default;
	background: #c8d0d4;
	font-family: tahoma,verdana,sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
	text-align: center;
	padding: 1px;
	border-top: 1px solid #fff;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #fff;
}

.calendar .nav {
	background: transparent url(images/menuarrow.gif) no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
	font-weight: bold;
	padding: 1px;
	border: 1px solid #000;
	background: #788084;
	color: #fff;
	text-align: center;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
}

.calendar thead .name { /* Cells <TD> containing the day names */
	border-bottom: 1px solid #000;
	padding: 2px;
	text-align: center;
	background: #e8f0f4;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
	color: #f00;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
	border-top: 2px solid #fff;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	border-left: 2px solid #fff;
	padding: 0px;
	background-color: #d8e0e4;
}

.calendar thead .active { /* Active (pressed) buttons in header */
	padding: 2px 0px 0px 2px;
	border-top: 1px solid #000;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #000;
	background-color: #b8c0c4;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
	width: 2em;
	text-align: right;
	padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
	font-size: 80%;
	color: #aaa;
}
.calendar tbody .day.othermonth.oweekend {
	color: #faa;
}

.calendar table .wn {
	padding: 2px 3px 2px 2px;
	border-right: 1px solid #000;
	background: #e8f4f0;
}

.calendar tbody .rowhilite td {
	background: #d8e4e0;
}

.calendar tbody .rowhilite td.wn {
	background: #c8d4d0;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
	padding: 1px 3px 1px 1px;
	border: 1px solid;
	border-color: #fff #000 #000 #fff;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
	padding: 2px 2px 0px 2px;
	border: 1px solid;
	border-color: #000 #fff #fff #000;
}

.calendar tbody td.selected { /* Cell showing selected date */
	font-weight: bold;
	padding: 2px 2px 0px 2px;
	border: 1px solid;
	border-color: #000 #fff #fff #000;
	background: #d8e0e4;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
	color: #f00;
}

.calendar tbody td.today { /* Cell showing today date */
	font-weight: bold;
	color: #00f;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
	visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
	display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
	background: #e8f0f4;
	padding: 1px;
	border: 1px solid #000;
	background: #788084;
	color: #fff;
	text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
	border-top: 1px solid #fff;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #fff;
	padding: 1px;
	background: #d8e0e4;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
	padding: 2px 0px 0px 2px;
	border-top: 1px solid #000;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #000;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
	position: absolute;
	display: none;
	width: 4em;
	top: 0px;
	left: 0px;
	cursor: default;
	border-top: 1px solid #fff;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #fff;
	background: #d8e0e4;
	font-size: 90%;
	padding: 1px;
	z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
	text-align: center;
	padding: 1px;
}

.calendar .combo .label-IEfix {
	width: 4em;
}

.calendar .combo .active {
	background: #c8d0d4;
	padding: 0px;
	border-top: 1px solid #000;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #000;
}

.calendar .combo .hilite {
	background: #048;
	color: #aef;
}

.calendar td.time {
	border-top: 1px solid #000;
	padding: 1px 0px;
	text-align: center;
	background-color: #e8f0f4;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
	padding: 0px 3px 0px 4px;
	border: 1px solid #889;
	font-weight: bold;
	background-color: #fff;
}

.calendar td.time .ampm {
	text-align: center;
}

.calendar td.time .colon {
	padding: 0px 2px 0px 3px;
	font-weight: bold;
}

.calendar td.time span.hilite {
	border-color: #000;
	background-color: #667;
	color: #fff;
}

.calendar td.time span.active {
	border-color: #f00;
	background-color: #000;
	color: #0f0;
}
/************************ color picker css ***********************************/
/* Common stuff */
.picker-wrapper, 
.slide-wrapper {
	position: relative;
	float: left;
}
.picker-indicator,
.slide-indicator {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}
.picker,
.slide {
	cursor: crosshair;
	float: left;
}
/* skin */
.cp-custom {
	position: fixed;
	display: none;
	z-index: 210;

	padding: 10px;
	background: -webkit-linear-gradient(top, #aaa 0%, #222 100%);   
	float: left;
	border: 1px solid #999;
	box-shadow: inset 0 0 10px white;
}
.cp-custom .picker {
	width: 200px;
	height: 200px;
}
.cp-custom .slide {
	width: 30px;
	height: 200px;
}
.cp-custom .slide-wrapper {
	margin-left: 10px;
}
.cp-custom .picker-indicator {
	width: 24px;
	height: 24px;
	background-image: url(/images/target.png);
}
.cp-custom .slide-indicator {
	width: 100%;
	height: 10px;
	left: -4px;
	opacity: .6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	filter: alpha(opacity=60);
	border: 4px solid gray;
	background-color: white;
	pointer-events: none;
}