body{
	font-family:sans-serif;
	font-size:15px;
	margin:0;
	padding:0;
        background-color:#184573;
        background-position:center center;
        background-repeat:no-repeat;
        background-attachment:fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	background-image:url("../images/HuangShan.jpeg");
}

#content{
	position:absolute;
	left:100px;
	top:50px;
	min-width:700px;
	min-height:450px;
	border:1px solid red;
	overflow:hidden;
}

/*                 */
/* DRAG DROP GHOST */
/*                 */

.gc_ghs_lbl{
	position:absolute;
	padding:2px;
	padding-left:7px;
	padding-right:7px;
	border:2px solid #8caeff;
	opacity:0.60;
	left:25px; /* default */
	top:25px;  /* default */
	height:20px;
	line-height:20px;
	width:200px;
	white-space:nowrap;
	overflow:hidden;
	color:#000;
	background-color:#fff;
	font-family:sans-serif;
	font-weight:bold;
	font-style:normal;
	border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-o-border-radius:12px;
	-ms-border-radius:12px;
	cursor:move;
	background-repeat:no-repeat;
	background-position:center;
	z-index:10000;
}

/*                      */
/* GRID SCROLL CONTROLS */
/*                      */

.gsct_base{
	inherit:none;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	//background-color:#184573;
}

/* scroller control button */
.gsct_btn{
	position:absolute;
	width:18px;
	height:18px;
	background-image:url(../images/gcgr_scrollControl.png);
}


/* horizontal slider tray */
.gsct_hst{
	position:absolute;
	top:0px;
	left:54px;
	right:54px;
	height:18px;
}

/* vertical slider tray */
.gsct_vst{
	position:absolute;
	left:0px;
	top:54px;
	bottom:54px;
	width:18px;
}

/* horizontal slider */
.gsct_hsl{
	position:absolute;
	top:0px;
	left:0px;
	height:16px;
	width:98px;
	border:1px solid #184573;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	-ms-border-radius:4px;
	background-image:url(../images/gcgr_hsl.png);
	background-repeat:repeat-x;
}

/* vertical slider */
.gsct_vsl{
	position:absolute;
	top:0px;
	left:0px;
	height:98px;
	width:16px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	-ms-border-radius:4px;
	border:1px solid #184573;
	background-image:url(../images/gcgr_vsl.png);
	background-repeat:repeat-y;
}

.gsct_dot{
	position:absolute;
	left:0px;
	right:0px;
	width:100%;
	height:100%;
	background-image:url(../images/dot_6x6.png);
	background-position:center center;
	background-repeat:no-repeat;
}


/* increment toward beginning */
.gsct_hbi{
	top:0px;
	left:36px;
	background-position:-36px -18px;
}

/* jump toward beginning */
.gsct_hbj{
	top:0px;
	left:18px;
	background-position:-18px -18px;
}

/* jump all the way to beginning */
.gsct_hbb{
	top:0px;
	left:0px;
	background-position:0px -18px;
}

/* increment toward beginning */
.gsct_vbi{
	top:36px;
	left:0px;
	background-position:-54px -18px;
}

/* jump toward beginning */
.gsct_vbj{
	top:18px;
	left:0px;
	background-position:-54px -36px;
}

/* jump all the way to beginning */
.gsct_vbb{
	top:0px;
	left:0px;
	background-position:-54px 0px;
}

/* increment toward end */
.gsct_hei{
	top:0px;
	right:36px;
	background-position:0px -36px;
}

/* jump toward end */
.gsct_hej{
	top:0px;
	right:18px;
	background-position:-18px -36px;
}

/* jump all the way to end */
.gsct_hee{
	top:0px;
	right:0px;
	background-position:-36px -36px;
}

/* increment toward end */
.gsct_vei{
	bottom:36px;
	left:0px;
	background-position:-72px 0px;
}

/* jump toward end */
.gsct_vej{
	bottom:18px;
	left:0px;
	background-position:-72px -36px;
}

/* jump all the way to end */
.gsct_vee{
	bottom:0px;
	left:0px;
	background-position:-72px -18px;
}

/*      */
/* GRID */
/*      */

/* Grid Base */
.gcgr_gBase{
	position:absolute;
	left:12px;
	right:12px;
	top:12px;
	bottom:12px;
	background-color:#8caeef;
	border:1px solid #8caeef;
	overflow:hidden;
}

/* Tray                                      */
/* ========================================= */
/* A standard column's default width is 120. */
/* Therefore with a width of 60000 the tray  */
/* will hold 500 columns ...                 */
.gcgr_tray{
	position:absolute;
	top:25px;
	left:0px;
	min-height:100px;
	width:60000px;
	background-color:#8caeef;
}

/* Holder inside of tray: */
.gcgr_hldr{
	position:absolute;
	top:0px;
	left:0px;
	background-color:#fff;
	/* filter:url(filters.svg); */
}

/* hFixedTray */
.gcgr_hftray{
	position:absolute;
	top:25px;
	left:0px;
	min-height:0px;
	min-width:0px;
}

/* hfhldr Holder inside of hFixedTray: */
.gcgr_hfhldr{
	position:absolute;
	top:0px;
	left:0px;
	background-color:#ffe;
}

/* shadow on fixed columns */
.gcgr_hfshdw{
	position:absolute;
	top:0px;
	right:-12px;
	bottom:0px;
	width:12px;
	background-image:url(../images/sR-trans.png);
	background-repeat:repeat-y;
}


/* Header */
.gcgr_gHead{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	height:25px;
	background-color:#ffffee;
	line-height:25px;
	padding-left:3px;
	overflow:hidden;
}

/* Footer */
.gcgr_gFoot{
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	height:25px;
	background-color:#ffe;
	line-height:25px;
	padding-left:3px;
	overflow:hidden;
}

/* MotionBlur */
.gcgr_mblur{
	position:absolute;
	bottom:25px;
	left:0px;
	right:0px;
	top:50px;
	background-image:url("../images/gcgr_mblur.gif"); 
}

/* wait indicator */
.gcgr_wait{
	position:absolute;
	left:5px;
	top:5px;
	width:16px;
	height:16px;
	background-image:url(../images/waitIndicator.gif);
}

/* status message bar */
.gcgr_stat{
	position:absolute;
	left:25px;
	top:0px;
	right:0px;
	bottom:0px;
	line-height:25px;
	padding-left:3px;
	padding-right:3px;
	overflow:hidden;
	font-style:italic;
	color:#555;
}

/* LED indicator */
.gcgr_LED{
	position:absolute;
	left:8px;
	top:8px;
	width:10px;
	height:10px;
	background-image:url(../images/indicatorLED2.png);
}

.gcgr_LED_red{
	background-position:0px -10px;
}

.gcgr_LED_yellow{
	background-position:0px -20px;
}

/* grid vertical scroll tray */
.gcgr_gvst{
	position:absolute;
	bottom:43px;
	top:50px;
	right:0px;
	width:18px;
	background-image:url(../images/gcgr_vf.png);
	background-repeat:repeat-y;
}

/* grid horizontal scroll tray */
.gcgr_ghst{
	position:absolute;
	bottom:25px;
	left:0px;
	right:18px;
	height:18px;
	background-image:url(../images/gcgr_hf.png);
	background-repeat:repeat-x;
}

/* left lower corner tray */
.gcgr_llct{
	position:absolute;
	bottom:25px;
	left:0px;
	width:0px;
	height:18px;
	background-image:url(../images/gcgr_hf.png);
}

/* right lower corner tray */
.gcgr_rlct{
	position:absolute;
	bottom:25px;
	right:0px;
	width:18px;
	height:18px;
	background-image:url(../images/gcgr_cf.png);
}

/* right upper corner tray */
.gcgr_ruct{
	position:absolute;
	top:25px;
	right:0px;
	width:18px;
	height:25px;
	background-image:url(../images/gcgr_vf.png);
	background-repeat:repeat-y;
}

/*             */
/* GRID COLUMN */
/*             */

/* gcgr_flt is the true base of a column */
.gcgr_flt{
	display:block;
	position:relative;
	float:left;
	width:120px;
	height:2500px; /* 100 rows x 25 px */
}

/* outline for emphasis */
.gcgr_oln{
	border-left:1px solid #184573;
	border-right:1px solid #184573;
}

/* column base nested inside gcgr_flt */
.gcgr_cBase{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	border-right:1px solid silver;
	border-bottom:1px solid silver;
	overflow:hidden;
}

/* Column header */
.gcgr_head{
	position:absolute;
	text-align:left;
	top:0px;
	left:0px;
	right:0px;
	height:25px;
	line-height:25px;
	padding-left:3px;
	overflow:hidden;
	color:#fff;
	font-weight:bold;
	background-color:#8caeef;
	white-space:nowrap;
	cursor:move;
}

/* column cell */
.gcgr_cel{
	position:relative;
	border-bottom:1px solid silver;
	height:25px;
	line-height:25px;
	padding-left:3px;
	padding-right:3px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

/* .gcgr_cel:hover{               */
/* 	background-color:#ffd300; */
/* }                              */

/* column scroll container */
.gcgr_scroll{
	position:absolute;
	top:25px;
	left:0px;
	//right:0px;
}


/* highlight */
.gcgr_hlt{
	background-color:#e7efff;
}

/* contract / expand button */
.gcgr_cex{
	display:block;
	position:absolute;
	top:3px;
	right:3px;
	height:18px;
	width:18px;
	background-image:url(../images/encircledIcons.png);
	background-repeat:no-repeat;
	opacity:0.3;
}

.gcgr_contract{
	background-position:-18px -36px;
}

.gcgr_expand{
	background-position:0px -18px;
}

.gcgr_contract:hover{
	opacity:1.0;
	background-position:-18px -18px;
}

.gcgr_xpd{
	position:absolute;
	display:block;
	left:-6px;
	top:3px;
	height:18px;
	width:18px;
	background-image:url(../images/encircledIcons.png);
	background-repeat:no-repeat;
	background-position:0px -36px;
	z-index:10000;
	opacity:0.4;
}

.gcgr_xpd:hover{
	background-position:0px -18px;
	opacity:1.0;
}

/* Drop target on the left margin and extends */
/* "before" the column                        */
.gcgr_bef{
	position:absolute;
	top:0;
	left:-5px;
	width:10px;
	height:25px;
	opacity:0.6;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	border-radius:5px;
}

/* .gcgr_bef:hover{               */
/* 	background-color:#ffd300; */
/* }                              */

/* Drop target on the right margin and extends */
/* "after" the column                          */
.gcgr_aft{
	position:absolute;
	top:0;
	right:-5px;
	width:10px;
	height:25px;
	/* background-color:green; */
	opacity:0.6;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	border-radius:5px;
}

/* horizontal shadow below column headers */
.gcgr_shd{
	position:absolute;
	top:25px;
	left:0px;
	right:0px;
	height:12px;
	background-image:url(../images/sB-trans.png);
	background-repeat:repeat-x;
	
}

/* Column width drag handle */
.gcgr_cwdh{
	position:absolute;
	top:25px;
	right:0px;
	width:10px;
	bottom:0px;
	opacity:0.6;
	cursor:w-resize;
}

.gcgr_cwdh:hover{
	background-color:#ffd300;
}

/* fixed header add drop target base */
.gcgr_fhadt{
	display:block;
	position:absolute;
	top:4px;
	left:4px;
	height:17px;
	width:149px;
	background-image:url(../images/dropTarget.png);
	opacity:1.0;
}

.gcgr_fhadt:hover{
	background-position:0px -17px;
}

/* fixed header add drop target */
.gcgr_fhadtt{
	display:block;
	position:absolute;
	top:3px;
	left:3px;
	height:18px;
	width:18px;
	background-image:url(../images/encircledIcons.png);
	background-repeat:no-repeat;
	background-position:-54px 0px;
	opacity:1.0;
}

.gcgr_fhadtt:hover{
	background-position:-54px -18px;
	opacity:1.0;
}