/* DM2 styles */


/********************  general layout  *******************/

body{
	margin:0px;
	background:#FFF;
	font-family:'Lucida Grande', Arial, sans-serif;
	font-size:12px;
	color:#515151;
	background:url(../images/bg-hr.gif);
}

#dm-wrapper{
	width:100%;
	background:#FFF url(../images/bg.gif) top repeat-x;
}

#dm-content{
	z-index:0;
	width:1000px;
	margin:5px 0px 30px 0px;
	text-align:left;
}

#loading{
	position:absolute;
	top:0px;
	left:0px;
	background:url(../images/corner-loading.gif) top left no-repeat;
	width:100px;
	height:100px;
	padding:5px 0px 0px 10px;
	z-index:1000;
	text-align:left;
}

#notify{
	position:absolute;
	top:15px;
	width:150px;
	z-index:10002;
}

#helper{
	position:absolute;
	top:15px;
	width:350px;
	z-index:10005;
	text-align:left;
}

#helper p{
	margin:0px 0px 10px 0px;
}

.dm-footer{
	border-top:1px solid #e9e9e9;
	font-size:10px;
	color:#999;
	overflow:visible;
	padding:4px 0px;
}

.dm-footer a:link, .dm-footer a:visited, .dm-footer a:active{
	font-size:10px;
	color:#999;
	text-decoration:none;
}

.dm-footer a:hover{
	font-size:10px;
	color:#555;
	text-decoration:none;
}

.hidden{ display:none;}

#spacer{
	height:3px;
	width:100%;
	background:url(../images/bg-hr.gif) top repeat-x;
	margin:3px 0px;
}

#spacer-vert{
	width:3px;
	background:url(../images/bg.gif) top repeat-x;
}

#IEwarn_bg{
	z-index:1000;
	position:absolute;
	top:0px;
	left:0px;
	background:url(../images/bg-loading.gif);
	height:100%;
	width:100%;
}

#IEwarn{
	z-index:1100;
	position:absolute;
	top:200px;
	left:30%;
	width:40%;
	background:#FFF;
}



/********************  navigation layout  *******************/


#menuWrapper{
	position:relative;
	margin-right:auto;
	margin-left:auto;
	margin-top:10px;
}

.menuRpt{
	background:url(../images/nav/menuRpt.gif) top repeat-x;
	margin:0px 11px;
	height:37px;
}

.menuLeft{
	background:url(../images/nav/menuLeft.gif) top left no-repeat;
}

.menuRight{
	background:url(../images/nav/menuRight.gif) top right no-repeat;
}


.menuON{
	background:#FCFCFC;
	border-top:1px solid #EEE;
	border-left:1px solid #EEE;
	border-right:1px solid #EEE;
	border-bottom:1px solid #FCFCFC;
	padding:3px 24px 8px 24px;
}

.menuOFF{
	padding:5px 25px 8px 25px;
}

.submenu{
	color:#999999;
	font-size:10px;
	background:url(../images/nav/submenuRpt.gif) bottom repeat-x;
	height:28px;
}

.submenuLeft{
	background:url(../images/nav/submenuLeft.gif) bottom left no-repeat;
}

.submenuRight{
	background:url(../images/nav/submenuRight.gif) bottom right no-repeat;
}

.submenuPad{
	margin:0px 15px -1px 15px;
}


.submenu a:link,.submenu a:active,.submenu a:visited{
	color:#515151;
	display:inline-block;
	padding:5px 10px 4px;
	text-decoration:none;
}

.submenu a:hover, .submenu a.submenuON:link, .submenu a.submenuON:active, .submenu a.submenuON:visited, .submenu a.submenuON:hover{
	background:#FFF;
	border-left:1px solid #F5F5F5;
	border-right:1px solid #F5F5F5;
	border-top:1px solid #F5F5F5;
	color:#DE861A;
	display:inline-block;
	padding:4px 9px;
	text-decoration:none;
}

.sm{
	position:absolute;
	height:23px;
	text-align:center;
}


/*********** animated logo ********/

#logo-bg{
	margin:10px;
	width:121px;
	height:64px;
	background:url(../images/logo/logo-bg.gif) top left no-repeat;
	position:relative;
}

#logo-d{
	position:absolute;
	width:121px;
	height:64px;
	background:url(../images/logo/logo-d.gif) top left no-repeat;	
}

#logo-m{
	position:absolute;
	width:121px;
	height:64px;
	background:url(../images/logo/logo-m.gif) top left no-repeat;
}

#logo-2{
	position:absolute;
	width:121px;
	height:64px;
	background:url(../images/logo/logo-2.gif) top left no-repeat;
}


#logo_over{
	position:absolute;
	width:121px;
	height:64px;
	cursor:pointer;
}

/*********** misc buttons ********/

.dBtn-on{
	float:left;
	margin-left:20px;
	font-size:14px;
	border:1px solid #999;
	background:#EDEDED;
	padding:5px;
}

.dBtn-off{
	float:left;
	margin-left:20px;
	font-size:14px;
	color:#CCC
	border:1px solid #CCC;
	padding:5px;
}

#faqs div.on{
	color:#4287fc;
	text-decoration:none;
	font-size:inherit;
}

#faqs div.off{
	color:#555;
	text-decoration:none;
	font-size:inherit;
}


/******************** custom select window  *******************/

.pt-on{
	background:#c5e8ff;
}
.pt-off{

}
.pt-select-window{
	width:190px;
	height:150px;
	overflow:auto;
}


/********************  boxes *******************/

.helpBoxTop{ background:url(../images/boxes/helpBox-top.gif) top no-repeat; height:20px;}
.helpBoxBtm{ background:url(../images/boxes/helpBox-btm.gif) bottom no-repeat; height:15px;}
.helpBoxRpt{ background:url(../images/boxes/helpBox-rpt.gif) top repeat-y;}
.helpBoxPad{ padding:0px 5px 0px 15px;}
.helpBoxPad ol, .helpBoxPad ul{margin:0px;}

.simpleBoxTL{ background:url(../images/boxes/simpleBoxTL.gif) top left no-repeat;}
.simpleBoxTR{ background:url(../images/boxes/simpleBoxTR.gif) top right no-repeat;}
.simpleBoxBR{ background:url(../images/boxes/simpleBoxBR.gif) bottom right no-repeat;}
.simpleBoxBL{ background:url(../images/boxes/simpleBoxBL.gif) bottom left no-repeat;}
.simpleBoxOuter{ border:1px solid #dadada; background:#FFF;}
.simpleBoxInner{ margin:-1px;}
.simpleBoxPad{ padding:1px;}

.tmpltBoxTL{ background:url(../images/boxes/tmpltBoxTL.gif) top left no-repeat;}
.tmpltBoxTR{ background:url(../images/boxes/tmpltBoxTR.gif) top right no-repeat;}
.tmpltBoxBR{ background:url(../images/boxes/tmpltBoxBR.gif) bottom right no-repeat;}
.tmpltBoxBL{ background:url(../images/boxes/tmpltBoxBL.gif) bottom left no-repeat;}
.tmpltBoxOuter{ border:1px solid #E8E8E8; background:#FFF no-repeat;}
.tmpltBoxInner{ margin:-1px;}


.boxOuter{ position:absolute;}
.boxInner{ position:relative;}
.boxInner div.close{ position:absolute; top:0px;right:0px; margin:-10px -8px 0px 0px;}
.boxInner div.help-close{ position:absolute; top:0px;right:0px; margin:-3px -8px 0px 0px;}
.boxInner div.move{ position:absolute; top:0px;left:0px; margin:-10px 0px 0px -8px;}
.boxInner div.minmax{ position:absolute; top:0px;left:0px; margin:-8px 0px 0px -8px;}
td.boxCorner, td.boxTop, td.boxBottom, td.boxLeft, td.boxRight{ font-size:1px; }


.popBoxTop{ background:#FFF url(../images/boxes/popBoxTBLR.gif) top repeat-x;}
.popBoxLeft{ background:#FFF url(../images/boxes/popBoxTBLR.gif) left repeat-y;}
.popBoxRight{ background:#FFF url(../images/boxes/popBoxTBLR.gif) right repeat-y;}
.popBoxBottom{ background:#FFF url(../images/boxes/popBoxTBLR.gif) bottom repeat-x;}
.popBoxContent{ background:#FFF;}

.notifyBoxTop{ background:#fffef5 url(../images/boxes/notifyBoxTBLR.gif) top repeat-x;}
.notifyBoxLeft{ background:#fffef5 url(../images/boxes/notifyBoxTBLR.gif) left repeat-y;}
.notifyBoxRight{ background:#fffef5 url(../images/boxes/notifyBoxTBLR.gif) right repeat-y;}
.notifyBoxBottom{ background:#fffef5 url(../images/boxes/notifyBoxTBLR.gif) bottom repeat-x;}
.notifyBoxContent{ background:#fffef5;}



/********************  editor toolbar  *******************/

.toolbarTop{ background:url(../images/toolbar/toolbarTop.gif) top left no-repeat;}
.toolbarMiddle{ background:url(../images/toolbar/toolbarMiddle.gif) left repeat-y;}
.toolbarBottom{ background:url(../images/toolbar/toolbarBottom.gif) bottom left no-repeat;}
.toolbarBox{ width:auto;}


.blocksTop{ background:#FFF url(../images/toolbar/blocks-T.gif) top repeat-x;}
.blocksLeft{ background:#FFF url(../images/toolbar/blocks-L.gif) left repeat-y;}
.blocksRight{ background:#FFF url(../images/toolbar/blocks-R.gif) right repeat-y;}
.blocksBottom{ background:#FFF url(../images/toolbar/blocks-B.gif) bottom repeat-x;}
.blocksContent{ background:#FFF;}
td.blocksCorner, td.blocksTop, td.blocksBottom, td.blocksLeft, td.blocksRight{ font-size:1px; }



/********************  tables layout  *******************/

.th-rpt{
	background:url(../images/tables/th-rpt.gif) top repeat-x;
	border-bottom:1px solid #e5e5e5;
	padding-left:5px;
}

.th-left{
	background:url(../images/tables/th-left.gif) top left no-repeat;
	font-size:1px;
	width:9px;
}

.th-right{
	background:url(../images/tables/th-right.gif) top right no-repeat;
	font-size:1px;
	width:9px;
}

.tf-rpt{
	background:url(../images/tables/tf-rpt.gif) bottom repeat-x;
	padding-left:5px;
}

.tf-left{
	background:url(../images/tables/tf-left.gif) bottom left no-repeat;
	font-size:1px;
	width:9px;
}

.tf-right{
	background:url(../images/tables/tf-right.gif) bottom right no-repeat;
	font-size:1px;
	width:9px;
}

#mTable td.tb{
	border-right:1px solid #e5e5e5;
	border-bottom:1px solid #e5e5e5;
	padding:3px;
	background:#FFF;
}

#mTable td.tb-first{
	border-left:1px solid #e5e5e5;
	border-bottom:1px solid #e5e5e5;
	padding-left:5px;
}

#mTable td.nb{
	border-right:0px solid #e5e5e5
}

#mTable td.tb-last{
	border-right:1px solid #e5e5e5;
	border-bottom:1px solid #e5e5e5;
	padding-right:5px;
}

#mTable td.alt{
	background:#F4F4F4;
}

#mTable td.active{
	background:#FFFFEE;
	font-weight:bold;
}

#mTable td.total{
	background:#f9fff7;
}

.row-hover, tr.row-hover, tr.row-hover td, tr.row-hover td.alt, tr.row-hover td.active, tr.row-hover td.active alt, .cell-hover{
	background:#c5e8ff !important;
}


.pagedBottomRpt{ background:url(../images/tables/paged-bottom-rpt.gif) bottom repeat-x;}
.pagedBottomLeft{ background:url(../images/tables/paged-bottom-left.gif) bottom left no-repeat;}
.pagedBottomRight{ background:url(../images/tables/paged-bottom-right.gif) bottom right no-repeat;}
.pagedBottomPad{ padding:2px 10px 5px 10px;}

.pagedTopRpt{ background:url(../images/tables/paged-top-rpt.gif) top repeat-x;}
.pagedTopLeft{ background:url(../images/tables/paged-top-left.gif) top left no-repeat;}
.pagedTopRight{ background:url(../images/tables/paged-top-right.gif) top right no-repeat;}
.pagedTopPad{ padding:5px 10px 2px 10px;}

.tbT{ background:#f6f6f6 url(../images/tables/tbT.gif) top repeat-x; }
.tbB{ background:url(../images/tables/tbB.gif) bottom repeat-x; }
.tbL{ background:url(../images/tables/tbL.gif) left repeat-y; }
.tbR{ background:url(../images/tables/tbR.gif) right repeat-y; }
.tbTL{ background:url(../images/tables/tbTL.gif) top left no-repeat; }
.tbTR{ background:url(../images/tables/tbTR.gif) top right no-repeat; }
.tbBR{ background:url(../images/tables/tbBR.gif) bottom right no-repeat; }
.tbBL{ background:url(../images/tables/tbBL.gif) bottom left no-repeat; }
.tbPad{ padding: 5px 10px; }

.ttT{ background:#f6f6f6 url(../images/tables/ttT.gif) top repeat-x; }
.ttB{ background:url(../images/tables/ttB.gif) bottom repeat-x; }
.ttL{ background:url(../images/tables/ttL.gif) left repeat-y; }
.ttR{ background:url(../images/tables/ttR.gif) right repeat-y; }
.ttTL{ background:url(../images/tables/ttTL.gif) top left no-repeat; }
.ttTR{ background:url(../images/tables/ttTR.gif) top right no-repeat; }
.ttBR{ background:url(../images/tables/ttBR.gif) bottom right no-repeat; }
.ttBL{ background:url(../images/tables/ttBL.gif) bottom left no-repeat; }
.ttPad{ padding: 5px 10px; }

/********************  div styles  *******************/

.m0{ margin:0px;}
.m10{ margin:10px;}

.mtb5{ margin:5px 0px;}
.mtb10{ margin:10px 0px;}
.mtb20{ margin:20px 0px;}

.mlr5{ margin:0px 5px;}
.mlr10{ margin:0px 10px;}
.mlr20{ margin:0px 20px;}

.mt10{ margin-top:10px;}
.mb10{ margin-bottom:10px;}
.ml10{ margin-left:10px;}
.mr10{ margin-right:10px;}

.m5{ margin:5px;}

.mtb5{ margin:5px 0px;}

.mt5{ margin-top:5px;}
.mb5{ margin-bottom:5px;}
.ml5{ margin-left:5px;}
.mr5{ margin-right:5px;}

.mt20{ margin-top:20px;}
.ml20{ margin-left:20px;}
.mb20{ margin-bottom:20px;}
.mr20{ margin-right:20px;}



.p10{ padding:10px;}
.p20{ padding:20px;}

.pt10{ padding-top:10px;}
.pt20{ padding-top:20px;}

.pb10{ padding-bottom:10px;}
.pb20{ padding-bottom:20px;}

.pl5{ padding-left:5px;}
.pl10{ padding-left:10px;}
.pl20{ padding-left:20px;}

.pr5{ padding-right:5px;}
.pr10{ padding-right:10px;}
.pr20{ padding-right:20px;}


.p5{ padding:5px;}
.pt5{ padding-top:5px;}
.pb5{ padding-bottom:5px;}


.h1{ height:1px;}
.h15{ height:15px;}
.h25{ height:25px;}

.fleft{ float:left;}
.fright{ float:right;}
.clear{ clear:both;}

.bg-ltGrey{ background:#f4f4f4; }

.bb-ltGrey{ border-bottom:1px solid #EEE; }
.bt-ltGrey{ border-top:1px solid #EEE; }
.bl-ltGrey{ border-left:1px solid #EEE; }
.br-ltGrey{ border-right:1px solid #EEE; }
.b-ltGrey{ border:1px solid #EEE;}

.bg-grey{ background:#999; }
.bb-grey{ border-bottom:1px solid #999; }
.bt-grey{ border-top:1px solid #999; }
.br-grey{ border-right:1px solid #999; }
.bl-grey{ border-left:1px solid #999; }
.b-grey{ border:1px solid #999; }

/********************  text sizes  *******************/

.s9{ font-size:9px;}

.s10{ font-size:10px;}

.s11{ font-size:11px;}

.s12{ font-size:12px;}

.s13{ font-size:13px;}

.s14{ font-size:14px;}

.s15{ font-size:15px;}

.s18{ font-size:18px;}

.s22{ font-size:22px;}

.al{ text-align:left; }
.ar{ text-align:right; }
.ac{ text-align:center; }


/********************  text styles  *******************/

.b{ font-weight:bold;}
.n{ font-weight:normal;}

.ltgrey{ color:#AEAEAE;}
.grey{ color:#999;}
.dkgrey{ color:#555;}
.black{ color:#000;}

.red{ color:#ff0000;}
.green{ color:#006600;}

.orange{ color:#de871c;}

.blue{ color:#4287fc;}



/********************  link styles  *******************/

a:link, a:visited, a:active{
	color:#de871c;
	text-decoration:none;
	font-size:inherit;
}

a.active:link, a.active:visited, a.active:active{
	color:#4287fc;
	text-decoration:none;
	font-size:inherit;
}

a.active:hover, a:hover{
	color:#999;
	text-decoration:none;
	font-size:inherit;
}


a.ltGrey:link, a.ltGrey:visited, a.ltGrey:active{
	color:#999;
	text-decoration:none;
	font-size:inherit;
}

 a.ltGrey:hover{
	color:#000;
	text-decoration:none;
	font-size:inherit;
}

a.drkGrey:link, a.drkGrey:visited, a.drkGrey:active{
	color:#515151;
	text-decoration:none;
	font-size:inherit;
}

 a.drkGrey:hover{
	color:#000;
	text-decoration:none;
	font-size:inherit;
}

#paged div.off{
	display:block;
	padding:2px 5px;
	font-size:10px;
	color:#555;
	font-weight:bold;
	cursor:pointer;
	background:transparent;
}

#paged div.on{
	display:block;
	padding:2px 5px;
	font-size:10px;
	color:#df8b24;
	font-weight:bold;
	background:#F1F1F1;
	cursor:pointer;
}

#paged a.nbg:hover{
	background:transparent;
}

#alpha div.off{
	display:block;
	padding:2px;
	font-size:10px;
	color:#555;
	font-weight:bold;
	background:transparent;
	cursor:pointer;
}

#alpha div.on{
	display:block;
	padding:2px;
	font-size:10px;
	color:#df8b24;
	font-weight:bold;
	background:#F1F1F1;
	cursor:pointer;
}

#alpha a.nbg:hover{
	background:transparent;
}



/********************  form styles  *******************/

.text-field-rpt{
	background:url(../images/forms/text-field-rpt.gif) left repeat-x;
}

.text-field-rpt input, .text-field-rpt select, .taC select, .taC input, textarea{
	border:1px solid #FFF;
	background:#FFF;
	font-size:11px;
}

.sudoLink, .img-button{
	cursor:pointer !important;
}

.helpLink{
	cursor:help; !important
}

.sudoMove{
	cursor:move !important;
}

td.calendarDateInput {letter-spacing:normal;line-height:normal;font-size:11px;}
select.calendarDateInput {letter-spacing:.06em;font-size:11px;}
input.calendarDateInput {letter-spacing:.06em;font-size:11px;}


.taTL{ background:url(../images/forms/taTL.gif) top left no-repeat; font-size:1px;}
.taTR{ background:url(../images/forms/taTR.gif) top right no-repeat; font-size:1px;}
.taBR{ background:url(../images/forms/taBR.gif) bottom right no-repeat; font-size:1px;}
.taBL{ background:url(../images/forms/taBL.gif) bottom left no-repeat; font-size:1px;}
.taT{ border-top:1px solid #dcdcdc; font-size:1px;font-size:1px;}
.taR{ border-right:1px solid #dcdcdc; font-size:1px;font-size:1px;}
.taB{ border-bottom:1px solid #dcdcdc; font-size:1px;font-size:1px;}
.taL{ border-left:1px solid #dcdcdc; font-size:1px;font-size:1px;}
.taT, .taR, .taB, .taL, .taC{ background:#FFF; }
.taC{font-size:12px;}






/************************* treemap styles  *****************************/

#sm{
	margin:3px 1px;
	padding:0px;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

#sm ul{
	list-style:none;
	padding:1px;
}

#sm .move{
	cursor:move;
}

#sm ul.parentlist, #sm ul.parentlist ul{
	border-left:1px solid #CCC;
	border-bottom:1px solid #CCC;
	margin:2px 0px 2px 8px;
}

#sm ul.parentlist li{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:2px 0px 2px 1px;
	padding:2px 1px;
}


#sm ul.parentlist ul li{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:2px 0px 2px 2px;
	padding:2px 1px;
}


#sm li img.addbutton, #sm li img.editbutton, #sm li img.deletebutton, #sm li img.buildbutton, #sm li img.siteeditbutton, #sm li img.treebtn{
	display:inline;
	padding:0px 1px;
	margin-bottom:-3px;
}

#sm li span.selected, #other-pages li span.selected{
	background:#c5e8ff;
	padding:0px 2px;
	margin:1px 0px 2px 0px;
}

#sm li span.move{
	padding:1px 3px;
	margin:1px 0px 2px 0px;
}

/************************* date slector styles  *****************************/

.calendar_date_select {
	border:#777 1px solid;
	display:block;
	width:195px;
	z-index: 1000;
	background-color:white;
}
/* this is a fun ie6 hack to get drop downs to stay behind the popup window.  This should always be just underneath .calendar_date_select */
iframe.ie6_blocker {
	position: absolute;
	z-index: 999;
}

.calendar_date_select thead th {
	color: black !important;
	font-weight:bold;
}

.calendar_date_select .cds_buttons {
	text-align:center;
	padding:5px 0px;
}

.calendar_date_select .cds_footer {
	padding:3px;
	font-size:10px;
	text-align:center;
}

.calendar_date_select table {
	margin: 0px;
	padding: 0px;
}


.calendar_date_select .cds_header {
	text-align:center;
}

.calendar_date_select .cds_header * {
	border:0px;
	background-color:white;  
}

.calendar_date_select .cds_header span {
	font-size:12px;
	color: black;
	font-weight: bold;
}

.calendar_date_select select { font-size:11px;}

.calendar_date_select .cds_header a:hover {
	color: white;
}
.calendar_date_select .cds_header a {
	width:22px;
	height:20px;
	text-decoration: none;
	font-size:12px;
	color:black !important;
}

.calendar_date_select .cds_header a.prev {
	float:left;
}
.calendar_date_select .cds_header a.next {
	float:right;
}
.calendar_date_select .cds_header a.close {
	position:absolute;
	top:-12px;
	right:-12px;
}

.calendar_date_select .cds_header select.month {
	width:90px;
}

.calendar_date_select .cds_header select.year {
	width:61px;
}

.calendar_date_select .cds_buttons a {
	color: black;
	font-size: 9px;
}
.calendar_date_select td {
	font-size:10px;
	width: 20px;
	height: 14px;
	text-align:center;
	vertical-align: middle;
	background-color: #fff;
}
.calendar_date_select td.weekend {
}

.calendar_date_select td div {
	color: #000;
}
.calendar_date_select td div.other {
	color: #ccc;
}
.calendar_date_select td.selected div {
	color:white;
}

.calendar_date_select tbody td {
}
.calendar_date_select td.selected {
	background-color:#777;
}

.calendar_date_select td:hover {
	background-color:#ccc;
}

.calendar_date_select td.today {
	border: 1px dashed #999;
}

.fieldWithErrors .calendar_date_select {
	border: 2px solid red;
}

/****** color pickers ********/
/* V1 */

#plugin { COLOR: #AAA; CURSOR: move; DISPLAY: block; PADDING: 7px 10px 11px 10px; _PADDING-RIGHT: 0; Z-INDEX: 1; POSITION: absolute; WIDTH: 199px; _width: 210px; _padding-right: 0px; }
#plugin br { CLEAR: both; MARGIN: 0; PADDING: 0;  }
#plugin select { BORDER: 1px solid #333; BACKGROUND: #FFF; POSITION: relative; TOP: 4px; }

#plugHEX { FLOAT: left; position: relative; top: -1px; }
#plugCLOSE { FLOAT: right; cursor: pointer; MARGIN: 0 8px 3px; _MARGIN-RIGHT: 10px; COLOR: #FFF; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#plugHEX:hover,#plugCLOSE:hover { COLOR: #FFD000;  }

#plugCUR { float: left; width: 10px; height: 10px; font-size: 1px; background: #FFF; margin-right: 3px; }

#SV { background: #FF0000 url('../js/lib_color/v1/media/SatVal.png'); _BACKGROUND: #FF0000; POSITION: relative; CURSOR: crosshair; FLOAT: left; HEIGHT: 166px; WIDTH: 167px; _WIDTH: 166px; MARGIN-RIGHT: 10px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../js/lib_color/v1/media/SatVal.png', sizingMethod='scale'); -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#SVslide { BACKGROUND: url('../js/lib_color/v1/media/slide.gif'); HEIGHT: 9px; WIDTH: 9px; POSITION: absolute; _font-size: 1px; line-height: 1px; }

#H { BORDER: 1px solid #000; CURSOR: crosshair; FLOAT: left; HEIGHT: 154px; POSITION: relative; WIDTH: 19px; PADDING: 0; TOP: 4px; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#Hslide { BACKGROUND: url('../js/lib_color/v1/media/slideHue.gif'); HEIGHT: 5px; WIDTH: 33px; POSITION: absolute; _font-size: 1px; line-height: 1px; }
#Hmodel { POSITION: relative; TOP: -5px; }
#Hmodel div { HEIGHT: 1px; WIDTH: 19px; font-size: 1px; line-height: 1px; MARGIN: 0; PADDING: 0; }

/* V2 */
/* GUI  */
.gui { cursor: move; position: absolute; top: 0; left: 0; z-index: 2; }
.gui br { CLEAR: both; }
.gui .TL { background: url('../js/lib_color/v2/media/win_LT.png') -8px 0px; width: 8px; height: 26px; float: left; }
.gui .TM { background: url('../js/lib_color/v2/media/win_MT.png'); width: 75px; height: 20px; float: left; text-align: center; padding-top: 6px; color: #fff; font-size: 13px; font-variant: small-caps }
.gui .TML { float: left; z-index: 10; position: absolute; }
.gui .TRx { float: right; position: relative; top: 2px; left: 1px }
.gui .TRx img { float: left; margin: 0; padding: 0 0 0 6px; height: 12px; width: 12px; position: relative; top: 1px; opacity: 0.5; cursor: pointer }
.gui .TRx img:hover { opacity: 1; }
.gui .TRx div { width: 1px; background: #1a1a1a; height: 13px; float: left; margin: 1px 0 0 0; opacity: 0.5; }
.gui .TR { background: url('../js/lib_color/v2/media/win_RT.png'); width: 8px; height: 26px; float: left; }
.gui .ML { background: url('../js/lib_color/v2/media/win_LM.png') -8px; float: left; width: 8px; height: 257px; }
.gui .MM { background: url('../js/lib_color/v2/media/win_MM.png'); float: left; width: 75px; cursor: default; }
.gui .MR { background: url('../js/lib_color/v2/media/win_RM.png'); float: left; width: 8px; height: 257px; }
.gui .BL { background: url('../js/lib_color/v2/media/win_LB.png') -8px -22px; float: left; width: 8px; height: 10px; }
.gui .BM { background: url('../js/lib_color/v2/media/win_MB.png') 0 -22px; float: left; width: 75px; height: 10px; }
.gui .BR { background: url('../js/lib_color/v2/media/win_RB.png') -16px -22px; float: left; width: 8px; height: 10px; }
/* COLOR */
#color .bounds { width: 200px; }
#color .TM, #color .BM { width: 180px }
#color .ML, #color .MR { height: 185px; }
#color .MM { position: relative; color: #111; width: 180px; height: 185px }
#color .TML { cursor: text; padding-top: 2px; font-size: 12px; }
#color .TML:active { cursor: move; }
#color .z canvas { background: url('../js/lib_color/v2/media/op_8x8.gif'); cursor: crosshair; position: relative; border: 1px solid #1f1f1f; left: 5px; float: left; display: inline; margin-top: 10px }
#color .z div { display: inline; }
#color .z div div { position: absolute; left: 20px }
#color .z div .east { position: relative; float: right; top: 14px; left: -3px; font-size: 11px; color: #bbb; display: inline; cursor: text; }
#color .z div .west { width: 10px; position: relative; float: left; top: 14px; font-size: 12px; color: #aaa; left: 6px; letter-spacing: 0.035em; display: inline; }
#color .z div:hover .west, #color .z div:hover .east { color: #FFF; }
#color .z div:active .west, #color .z div:active .east { color: #FFF; font-weight: bold }
#color .z div.cur { background: url('../js/lib_color/v2/media/miniCurr.gif'); opacity: 0.75; width: 9px; height: 9px; display: inline; position: relative; top: 15px; cursor: crosshair; z-index: 1; float: left; border: 0; padding: 0; margin: 0 0 0 3px;  }
#color .z div:hover .cur, #color .MM div:active .cur { opacity: 1; }