/* Global Default Settings */
html, body
{	height: 100%;}

body {
  margin: 0;
	padding: 0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #000000;
	background-color: #FFFFFF;
	behavior: url('/js/csshover.htc');
	height: 100%;
}


p, form, table, th, td, div, input, select, textarea {
	margin: 0;
	padding: 0;
}
  
ul, li
{	margin-left: 8px; padding: 0px;}

img	{border: 0px;}

a { color: #5b91ac; text-decoration: none;}
a:hover {	color: black; text-decoration: underline;}


/* Header */

#header {
	padding: 10px 0px;
	text-align: left;
}

#header .user { color: #333; padding: 5px; font-weight: bold;}
#header .links{	padding-top: 10px;}
#header .selected{	font-size: 13px;}

/* Footer */

#footer {
  font-size: 11px;
	padding-top: 10px;
	color: #555;
	line-height: 18px;
	text-align: center;	
}

#footer a {
  font-size: 11px;
  color: #003399;
	text-decoration: underline;
}

#footer a:hover, #footer a:active {
    color: #0099FF;
}


/* Columns */

#footer, #header, .content
{	width: 1000px; 
  margin: 0px auto;
}

.cleaner {  clear: both;	margin: 0;}


/* Content Elements */
.productbox{	border: 1px solid #ccc; padding: 5px; background: white;}
.whitebox{	border: 1px solid #ccc; padding: 5px; background: white; min-height: 160px;}
.whitebox_s { background:url(../images/newgraphics/vtabt.gif) repeat-x top; height: 5px;}
.colorbox{border: 1px solid #ccc; padding: 5px; background: white url("../images/newgraphics/box2.gif") repeat-x top left; padding:5px; padding:5px; min-height: 160px;}
.colorboxs{border: 1px solid #ccc; padding: 5px; background: white url("../images/newgraphics/box2_short.gif") repeat-x top left; padding:5px; padding:5px;}

/* ip cam related */
.thumbs a{border: 2px solid #ccc;}
.picture{ border-top: 1px solid #ccc;}
.thumbs a:hover{ border: 2px solid #33F;}
.thumbs a.selected{ border: 2px solid #933;}

/* for grid tables */
table.grid
{ border-collapse: collapse; margin-top: 3px;}

table.grid th
{ background: #E3E3E3; padding: 3px 5px; text-align: left;}

table.grid td
{	border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 3px 5px;}

table.grid td.pagination
{	background: #EEE; text-align: right;	font-size: 11px;}

table.grid td.index
{	background: #EEE;	font-size: 14px; font-weight: bold;}

table.grid td.index a
{	background: #EEE;	font-size: 12px; font-weight: none; margin: 0px 3px;}

/* for info fields, such as sign up wizard */
table.info td
{	padding: 3px 10px; background: #F0F0F0;}

table.info2 td
{	padding: 3px 10px;}

/* Floating Alignment */
.floatl {	float: left;}
.floatr{	float: right;}


/* for folding/collapsed left-hand menu, used in support */
hr{ height: 1px ;  color: #CCC; }

.vmenu{
border: #DDD 1px solid;
background: #F5F5F5;}

.vmenu .item {
	padding-left: 10px;
	height: 28px;
	color: #888;
	line-height: 28px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	border-top: 1px solid white;
	font-size: 13px;
	font-weight: bold;
}


.vmenu div.selected{
	background: white;
	color: black;
	border-bottom: 1px solid #DDD;
	border-top: 1px solid #DDD;
}

.vmenu .item:hover 
{	background: white;}

.vmenu ul {	
	padding: 3px 0px 0px 0px;
	margin: 0px;
	background: white;
}
.vmenu li{ margin: 0px; padding: 3px 0px 3px 15px; color: #888; list-style-type: none;}
.vmenu li.lv2{ background: #cde9f9;}
.vmenu li.selected{ color: black;}
vmenu li a{ color: #357ac2; font-weight: bold;}

td.more, table.info td.more
{	padding: 3px 10px; background: #DEDEDE; font-size: 12px; cursor: pointer; text-decoration: underline;} 

td.search
{	padding: 10px 10px 10px 0px;}

/* Text formatting */ 
.selected, a.selected, .selected a
{	color: black; font-weight: bold;}


h2, .titlebar 
{ border: 1px solid #CCC; 
	margin: 5px 0px 5px 0px; 
	padding: 2px 10px 2px 10px; 
	font-weight: bold; 
	font-size: 13px; 
	color: black; line-height: 22px; 
	background: url(../images/newgraphics/h2.gif) repeat-x; 
	height: 22px; }


.alert, .reminder, .reminderw {
	font-weight: bold;
	border: 1px solid #BFB8A8;
	color: black;
	margin: 1px 0px;
	padding: 0px 5px;
	height: 27px;
	line-height: 27px;
	vertical-align: middle;
}

.alert
{background: url(../images/newgraphics/alert_bg.gif) repeat-x left;
}

.reminder
{background: url(../images/newgraphics/alert2_bg.gif) repeat-x left;
}

.reminderw
{background: white;
}

.reminderw a{ color: black; }

div.info
{background: url(../images/newgraphics/icon_info.gif) no-repeat left;
padding-left: 18px;
}


.data{	text-align: right;}
.MAC{	font-size: 11px;	font-family: Arial;}
.vseparator { border-left: 1px solid #ccc; padding-left: 15px;}
.indent {    margin: 0;    padding-left: 12px;}
.indent1 {    margin: 0;    padding-left: 12px; font-size: 11px; font-family: Arial; }
.isolator {    margin: 0 8px;	color: #999;}
.nnote {	color: #CC0000;	font-size: 10px; 	font-weight: bold;	margin-right: 2px;	vertical-align: super;}
.note {    color: #707070; }
.menuclass {	font-style: italic;	font-weight: bolder;} /*Wynnie add 20080212*/
.note1 {   color: #707070; font-size: 10px; font-family: Arial; padding-bottom:7px; margin-left:7px;}
.hilite {  color: #5b91ac;	font-size: 18px;	font-weight: bold;}
.status {	font-weight: bold;	color: #000099;}
.warning {	font-weight: bold;	color: #CC0000;}
.disable{color:#B6B6B6;}  /*wynnie add for camplayer*/
.hyperlink {  text-decoration: underline;} /*Wynnie add*/
 /*even for 200902home*/

.wblue26 {  font-size:26px; line-height:26px; font-weight:bold; color:#2492BE}
.wblue12 {  font-size:18px; color:#2492BE; font-weight:bold; font-style:italic}
.wgrey12 { font-size:12px; color:#737373; line-height:18px}
.wred12{font-weight: bold;	color: #CC0000; font-size:14px; vertical-align:top}



.nopad, table.info .nopad, table.info2 .nopad
{	padding: 0px;}

.space1{
width:25px;
height:25px;
border-right: #999 1px dotted;
}

.space2{
width:10px;
height:25px;
}

/* Storage Box */
.storage-bar {
	height: 4px; 
	border: #999 1px solid; 
	background: url(../images/newgraphics/storage_bg.gif) repeat-x;
	padding:0px;
	width: 110px;
}

.storage-bar div {	color: #344; 	font-weight: normal; 	font-size: 4px;  	height: 4px;	background: red url(../images/newgraphics/color_bar.gif) no-repeat top left; border-right :1px solid #CCC;}
.storage-bar div.full
{	background: red;}

.top-margin{
margin-top:7px;
margin-left:7px;
}

/***************************** Buttons *****************************/
div.btnbar {
	padding: 3px 3px 0px 0px;
	margin: 20px -4px 0px -4px;
	border-top: #ccc 1px solid;
	clear: both;
}

div.whitebox div.btnbar
{ margin-bottom: -4px;}

div.btnbart {
	height: 30px;
	clear: both;
}


/* All Buttons */
div.btn, div.btnd, div.btnw, div.btnwd, div.btnb, div.btnbd, div.btnw2, div.btnw2d /* add btnw2/btnw2d 20080306*/
{	padding-left: 20px;
	font-weight: bold;
	text-align: center;
	margin: 2px 5px 2px 5px;
}

div.btn div, div.btnd div, div.btnw div, div.btnwd div, div.btnb div, div.btnbd div, div.btnw2 div, div.btnw2d div /* add btnw2/btnw2d 20080306*/
{	padding-right: 20px;}

/* Blue Btn */
div.btn, div.btnd
{	background: url(../images/newgraphics/btn_blue_left.gif) left top no-repeat;
	height: 20px;
	line-height: 20px; }

div.btn div, div.btnd div
{	background: url(../images/newgraphics/btn_blue_right.gif) right top no-repeat;
}


/* White Btn */ /* White Btn2 20080306*/
div.btnw, div.btnwd, div.btnw2, div.btnw2d /* add btnw2/btnw2d 20080306*/
{	background: url(../images/newgraphics/btn_white_left.gif) left top no-repeat; 
	height: 20px;
	line-height: 20px;}

div.btnw div, div.btnwd div, div.btnw2 div, div.btnw2d div /* add btnw2/btnw2d 20080306*/
{	background: url(../images/newgraphics/btn_white_right.gif) right top no-repeat;	}


/* Black Btn */
div.btnb, div.btnbd
{	background: url(../images/newgraphics/btn_black_left.gif) left top no-repeat;
	height: 22px;
	line-height: 22px; }

div.btnb div, div.btnbd div
{	background: url(../images/newgraphics/btn_black_right.gif) right top no-repeat;	}


/* Normal and Disabled */
div.btn{color: white; font-weight: bold;}
div.btnd{color: white; font-weight: normal;}
div.btnw{color: #5588AA;font-weight: bold;}
div.btnwd{color: #999;font-weight: normal;}
div.btnb{color: white; font-weight: bold;}
div.btnbd{color: #5588AA; font-weight: normal;}
div.btnw2{color:#333333; font-weight:bold;} /* add btnw2/btnw2d 20080306*/
div.btnw2d{color:#CCCCCC; font-weight:normal;} /* add btnw2/btnw2d 20080306*/

div.btnd, div.btnd div, div.btnwd, div.btnwd div, div.btnbd, div.btnbd div, div.btnw2d div /* add btnw2/btnw2d 20080306*/
{	background-position-y: -60px;}

/* Mouseover type */
div.btn, div.btnw, div.btnb, div.btnw2 {	cursor: pointer;} /* add btnw2/btnw2d 20080306*/
div.btnd, div.btnwd, div.btnbd, div btnw2d {	cursor: default;} /* add btnw2/btnw2d 20080306*/

div.btn:hover, div.btnw:hover,  div.btn:hover div, div.btnw:hover div, { background-position-y: -20px;}
div.btn:active, div.btnw:active,  div.btn:active div, div.btnw:active di{ background-position-y: -40px;}

div.btnb:hover, div.btnb:hover div{ background-position-y: -22px;}
div.btnb:active, div.btnb:active div { background-position-y: -44px;}

div.btnw2:hover, div.btnw2:hover div{ background-position-y: -22px;} /* add btnw2/btnw2d 20080306*/
div.btnw2:active, div.btnw2:active div { background-position-y: -44px;} /* add btnw2/btnw2d 20080306*/

/* Small Square Button */
div.sbtn{	height: 16px; width: 20px; margin-left: 2px;}
div.sbtn:hover {background-position-y: -20px;}
div.sbtn:active { background-position-y: -40px;}}

div.play
{	background: url(../images/newgraphics/btn_play.gif) right top no-repeat;	}

div.download
{	background: url(../images/newgraphics/btn_download.gif) right top no-repeat;	}

div.edit
{	background: url(../images/newgraphics/btn_edit.gif) right top no-repeat;	}


div.bigbtn
{ background: url(../images/newgraphics/big_btn_left.gif) no-repeat left top; 
	height: 50px;
	padding: 0px 0px 0px 15px;
	margin: 0px 5px 0px 2px;
	font-weight: bold;
	color: #FFF;
	line-height: 50px;
	text-align: center;
	cursor: pointer;}
	
div.bigbtn div
{	background: url(../images/newgraphics/big_btn_right.gif) no-repeat right top;
	padding-right: 15px;	}

div.bigbtn:hover, div.bigbtn:hover div
{	background-position-y: -50px;
}

div.bigbtn:active, div.bigbtn:active div
{	background-position-y: -100px;
}
.saved, #saved {	font-weight:bold;
	/*color: #4a86ce;*/
	color: #C00;
	display:none;}
	
/* Button Exceptions */
.alert div.btn, .alert div.btnw, .reminder div.btn, .reminder div.btnw
{	margin-top: 4px;}

.titlebar div.btn
{	margin: 1px -5px 1px 5px;}


/* vertical tab content frame */

.steps  { vertical-align: top; background:url(../images/newgraphics/vtabn.gif) repeat-y right; width: 150px;} 
.steps table{	border-collapse: collapse;}


.contents { vertical-align: top; border-right: 1px solid #B9BDBE; border-top: 1px solid #B9BDBE; border-bottom: 1px solid #B9BDBE;background: white; padding: 10px;} 
.contents_s {  margin-left: 149px; width: 839px; background:url(../images/newgraphics/vtabt.gif) repeat-x top;}

.step, .step_on{  font-weight: bold; font-size: 14px;  vertical-align: middle;}
.step{     color: #CCC; padding: 15px 0px 15px 10px; border-right: 1px solid #B9BDBE; border-top: 1px solid #DDD; border-left: 1px solid #DDD;}
.step_on{  color: #369; padding: 15px 0px 22px 10px; background: white url(../images/newgraphics/vtab_on.gif) no-repeat left bottom; border-top: 1px solid #B9BDBE; border-bottom: 1px solid #F0F0F0;}
.step_last{  border-top: 1px solid #DDD;}
.stepn{ color: white; background: url(../images/newgraphics/i_off.gif) left no-repeat; padding: 5px 15px 5px 5px;}
.step_on .stepn{  color: white; background: url(../images/newgraphics/i_on.gif) left no-repeat;}
.EULA{overflow: scroll; overflow-x: hidden; height: 55px; border: 1px solid #B9BDBE; padding: 3px;}


div.jeff1{ height: 25px; background: url("../images/newgraphics/box2_header_left.gif") top left no-repeat; }
div.jeff2{ height: 25px; background: url("../images/newgraphics/box2_header_right.gif") top right no-repeat; line-height: 25px; margin-left: 10px; text-align: left; color: white; font-weight: bold; font-size: 15px; padding-right: 10px;}
div.jeff3{ border-left:	1px solid #BFBFBF;  border-right:	1px solid #BFBFBF; background: white url("../images/newgraphics/box2.gif") repeat-x top left; padding:5px; min-height: 160px;}
div.jeff3s{ border-left:	1px solid #BFBFBF;  border-right:	1px solid #BFBFBF; background: white url("../images/newgraphics/box2_short.gif") repeat-x top left; padding:5px; padding:5px;}

div.jeff4{ background: url("../images/newgraphics/box2_bottom_left.gif") bottom left no-repeat; }
div.jeff5{ background: url("../images/newgraphics/box2_bottom_right.gif") bottom right no-repeat; margin-left: 5px; padding: 5px 5px 5px 0px;}
div.jeff6{ background: url("../images/newgraphics/box3_bottom_left.gif") top left no-repeat; }
div.jeff7{ background: url("../images/newgraphics/box3_bottom_right.gif") top right no-repeat; margin-left: 5px; padding: 5px 5px 5px 0px;}



/* For screen freeze and popup */
body.frozen
{	overflow: hidden;
	overflow-y: hidden;
	overflow-x: hidden;
}

div#fz
{	position: absolute;
	background: #111;
	width: 100%;
  height:100%;
	filter:alpha(Opacity=80);
  -moz-opacity:.80;
  opacity:.80;
 	top: 0px;
	left: 0px;
	visibility: hidden;
	z-index: 30;
	}
	
div#fc
{	position: absolute;
	width: 99%;
	height: 100%;
	text-align: center;
	top: 0px;
	left: 0px;
	visibility: hidden;
	z-index: 31;}
	

#popupframe{	height: 320px;}
body.embed{ background: white url("../images/newgraphics/box2.gif") repeat-x top left;}
body.embed .whitebox{	height: 250px;}

#popup{	margin: auto auto; width: 500px;}

#popup div.jeff1{ background: url("../images/newgraphics/box2b_header_left.gif") top left no-repeat; }
#popup div.jeff2{ background: url("../images/newgraphics/box2b_header_right.gif") top right no-repeat; }
#popup div.jeff4{ background: url("../images/newgraphics/box2b_bottom_left.gif") bottom left no-repeat; }
#popup div.jeff5{ background: url("../images/newgraphics/box2b_bottom_right.gif") bottom right no-repeat;}

/* unread settings */
.unread {	font-weight: bold;}


/* news log */
.vmenu_news{
border: #DDD 1px solid;
background: #F5F5F5;}

.vmenu_news .item {padding-top: 5px; padding-bottom: 5px;
	padding-left: 10px;
	
	color: #000;
	line-height: 17px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	border-top: 2px solid white;
	font-size: 12px;
	font-weight: normal;
}


.vmenu_news div.selected{padding-left:16px; padding-right:5px;
	background: white url("../images/newgraphics/arrow.gif") top left no-repeat;
	color: black;
	border-bottom: 1px solid #DDD;
	border-top: 1px solid #DDD;
font-weight: bolder; font-size: 11px;
}

.vmenu_news .item:hover 
{	background: white;}