body
{
	font-size:8pt;
	font-family: Verdana;
	margin:0 0 0 0;
	background-color:#F8F0E5; 	
}

 .scrollHorizontal
 {
	overflow-x:scroll; 
	overflow-y:hidden;
	top:0; 
	z-index:-1; 
	width:99%; 
	scrollbar-face-color: #FFDBA5; scrollbar-3dlight-color: #F8F0E5; scrollbar-base-color: #336699;
    scrollbar-track-color: #F8F0E5 ; scrollbar-darkshadow-color: #000; scrollbar-arrow-color: #000;
    scrollbar-shadow-color: #fff; scrollbar-highlight-color: #fff;
 }
 
 /*=================================== Kelvin Start ==============================*/



.titleHeader
{
	font-family:Verdana;
	font-weight:bold;
	font-size:8pt;
	
	height:20px;
	border-bottom:solid 2px #ffcc66;

}
.border
{
	border:solid 1px #ffcc33;
	margin: 0px;	
	/*background-color:#fffbd6;*/
	background-color:#f8f0e5;
	font-size:8pt;
	width:99%;
	margin-bottom:3px;
	margin-left:0px;
	margin-right:2px;
}

.borderBackGround
{	
	border:solid 1px #ffcc33;
	margin: 0px;	
	background-color:#fffbd6;	
	font-size:8pt;
	width:99%;
	margin-bottom:3px;
	margin-left:0px;
	margin-right:2px;
}

.noborder
{
	border:solid 0px #Transparent;
	margin: 0px;	
	/*background-color:#fffbd6;*/
	background-color:#f8f0e5;
	font-size:8pt;
	width:99%;
	margin-bottom:3px;
}

.borderWhitebg
{
	border:solid 1px #ffcc33;
	background-color:#ffffff;
	font-size:8pt;
	vertical-align:middle;
	margin-bottom:5px;
}

.leftedge 
{
	border-left-style:solid;
	border-left-width:1px;
	border-left-color:#ccc;
	padding-left:10px;
	background-color:#fffffc; 
	border:0;
	margin: 3px 0px 3px 3px;
}

.borderTopPadding
{
	padding-top:10px;
}

.borderBottomPadding
{
	padding-bottom:15px;
}

.borderBottomPaddingLine
{
	padding-bottom:5px;
	border-bottom:solid 2px #ccc;
	font-family:Tahoma;
	font-weight:bold;
	font-size:12px;	
	color:#900E56;
}



.collapsePanelHeader
{
	width:98%;
	color:#FB6B07;
	font-size:8pt;
	background-color:#FFFACD;
	font-weight:bold;
	padding:5px;
	cursor:pointer;
	text-align:center;
	border:solid 1px #FB6B07;	
}

.collapsePanel
{
	width:100%;
	height:0px;		
}

.previewImage
{
	visibility:hidden;
}

.scroll-div
{
    overflow:auto;
    overflow-x:scroll;
    overflow-y:hidden;
    float:left;
    width:auto;
    height: auto;
    margin:0px;
}

.scrollVerticalDiv
{
	overflow-x:hidden;
    overflow-y:scroll;
	height:180px;
	width:auto;
	padding:0px;
	margin:0px;
	border:solid 1px #ffcc66;
	bottom:0;
	top:0;
}

.scrollVerDivPopupPgY
{
	overflow-x:hidden;
    overflow-y:scroll;
	height:150px;
	width:auto;
	padding:0px;
	margin:0px;
	border:solid 1px #ffcc66;
	background-color:#ffffff;
}


.validatorCalloutHighlight
{
    background-color: lemonchiffon;
}


/* ------------------------- Form - Start ------------------------- */
/*.txtNormal {  font-size : 8.5pt; border: solid 1px #336699}*/
.txtNormal{ font-size : 7.5pt;}
.txtFocus{background-color : #ffee99;  font-size : 7.5pt;}
/*.txtFocus { font-size : 8.5pt; background-color : #FDEAEA; border: solid 1px #336699}*/
.txtNumber { text-align : right;  font-size : 7.5pt;}
.txtNumberFocus { text-align : right; background-color : #ffee99;  font-size : 7.5pt;}

.txtNoBorder {background-color : Transparent; border-style:none; font-size:7.5pt;}

.txtDisabled {background-color : Transparent; border: solid 1px #7f9db9; font-size:7.5pt;}

.txtDisabledNum 
{
     background-color:#E0E0E0; 
    font-size:8pt; 
}



.txtNumberDisabled { text-align : right; background-color : Transparent; border-style : hidden;}

.lbl { font-size :7.5pt;}
.lblPassword{font-size:7.5pt; border:solid 1px #7f9db9; background-color:#fff; vertical-align:middle; height:17px;}
.lblItelic { font-size :7.5pt; color:#7f9db9; font-style:italic;}

.lblwithBorder { font-family:Tahoma; font-size :8pt; border: solid 1px #7f9db9; vertical-align:middle; height:17px;}
.lblBold {font-weight : bold;}
.ddl {background-color:#FFF; border: solid 1px #7f9db9; font-size :7.5pt; }
.rdo { font-size : 7.5pt;  }
.chk {font-size: 7.5pt;}

.lblWhite
{
	font-size:8pt;
    color:#ffffff;
    font-weight:bold;
} 


td.lblBackground
{
    background-color:#daa12f;
    font:#fff;
}

#divChangePwd td, #tblDuplicateNric td, #tblDuplicateEmpNo td
{
	border-color: #ccc;
	border-style: solid solid solid solid;
	border-width: 1px 1px 1px 1px;
}


.filedsetbgcolor
{
    background-color:#F6E0B4;
    border-color:#c06e14;
}

.btn
{  
    /* margin-top:0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;   
    padding: 2px 30px;
    text-shadow: 0 1px 1px #777; 
    -moz-box-shadow: 0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;*/
    
    margin-top: 2px;    
    font-size : 9px; 
    width : 80px; 
    font-weight:bold; 
    text-transform:uppercase; 
    cursor:pointer; 
    border:solid 1px #c06e14; 
    color:Black; 
    text-align:center; 
    background-color:#FFFBD6;
}


.btn:hover {
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}


.btnReport {  font-size : 7.5pt; width : 70px; cursor:pointer; border:solid 1px #c06e14; color:Black; text-align:center; background-color:#FFFBD6} .btnSelect {  font-size : 7.5pt; width : 40px; cursor:pointer; border:solid 1px #c06e14; color:Black; text-align:center; background-color:#FFFBD6}
.btnSelect {  font-size : 7.5pt; width : 50px; cursor:pointer; border:solid 1px #c06e14; color:Black; text-align:center; background-color:#FFFBD6} .btnSelect {  font-size : 7.5pt; width : 40px; cursor:pointer; border:solid 1px #c06e14; color:Black; text-align:center; background-color:#FFFBD6}

.btnOriginal {font-size:6.5pt; text-transform:uppercase; width:80px;cursor:pointer;}
.btnImg {cursor:pointer; padding-left:10px; padding-right:20px;}
.btnLong {  font-size : 6.5pt; font-weight:bold; text-transform:uppercase; cursor:pointer; border:solid 1px #c06e14; color:Black; text-align:center;background-color:#FFFBD6;}
.uploader { font-size : 7.5pt; border:solid 1px #7f9db9;}
.lb { font-size : 7.5pt;  }
.successMessage { font-size : 8pt; color : #3E8E11; font-weight : bold; }
.errMessage {	font-size : 8pt;	color : Red; font-weight : bold; }
.Form-FontNormal {font-family:Tahoma;	font-size:7.5pt; font-style:normal; font-weight:normal;}
.Confirm-Text 
{
	font-family:Verdana;
	font-size:8pt;
	font-style:normal;
	padding:5px;
}

.messageContainer
{
	margin-top:-12px;
	margin-right: 5px;
	float:right;
	padding-left:6px;	
}

.message
{
	vertical-align:middle;
	float:right;
	font-family:Verdana;
	font-size:12px;
	color:Red;
}

.menutitle 
{
    font-size:12px;
    font-weight:bold;
    padding-bottom:100px;
}

/* ------------------------- Form - End ------------------------- */

/* ----------------------- Budiyanto Tan Form Component - Start ----------------------- */

.txtNormalM { font-size : 8pt; margin: 0pt 0pt 1pt 3pt;}
.lblM { font-size : 8pt; margin: 0pt 0pt 1pt 3pt;}
.lblBoldM {font-weight : bold;  margin: 0pt 0pt 1pt 3pt;}
.ddlM {background-color:#ffffcc; font-size : 8pt;  margin: 0pt 0pt 1pt 3pt;}
.rdoM { font-size : 8.5pt; margin: 0pt 0pt 1pt 3pt;}
.chkM {font-size: 8pt; margin: 0pt 0pt 1pt 3pt;}
.btnM {  font-size : 8pt; width : 80px; cursor:pointer; border:solid 1px #c06e14; color:Black; text-align:center; background-color:#FFFBD6; margin: 0pt 0pt 1pt 3pt;}
.btnLongM {  font-size : 8.5pt; width : 160px; cursor:pointer; border:solid 1px #c06e14; color:Black; text-align:center;background-color:#FFFBD6; margin: 0pt 0pt 1pt 3pt;}

/* ----------------------- Budiyanto Tan Form Component - End  ----------------------- */

 

/* ------------------------- GridView - Start ------------------------- */
.gv { font-weight:normal; font-size:8pt; border : solid 1px #ffcc33; }
.gvHeader { background-color : #FFCC66 ; border  : solid 1px #ffcc33;font-size:8pt; color:#333333; font-weight:normal;text-align:left; height:20px;}
.gvNormal { background-color : #ffffcc ; font-weight:normal; font-size:8pt;}
.gvAlternate { background-color : #ffffff; font-weight:normal; font-size:8pt; }
.gvSelected { background-color : #ffccff; font-weight:normal; font-size:8pt; }
.gvFooter { font-weight : bold; background-color : #FFCC66; border : 0px; height:23px;}
.HoverDelay {background-color:#ffcc66; color:Black; font-weight:normal; vertical-align:middle; cursor:pointer;}

.ddlFull {background-color:#FFAD84; font-size :7.5pt; }
.ddlHalf {background-color:#F4C4FF; font-size :7.5pt; }
.ddlOff {background-color:#FFF882; font-size :7.5pt; }

.lblFull { font-size :7.5pt; border:solid 1px #339900; background-color:#FFAD84;}
.lblHalf { font-size :7.5pt; border:solid 1px #ff9900; background-color:#F4C4FF;}
.lblOff { font-size :7.5pt; border:solid 1px #ff9900; background-color:#FFF882;}


/* ------------------------- GridView - End ------------------------- */


.HeaderBackGround
{
	background-image: url(images/orangesoftTitle.png); 
	background-repeat: repeat-x; background-color: transparent;	padding-bottom:5px;
}

.imageSize
{ width:90px; height:110px; border:solid 1px #cccccc;}

.Form-LabelImageSize
{
	font-size:6pt; color:Red;font-weight:bold;
}



/* ------------------------- Calendar -Start  ------------------------- 

.MyCalendar .ajax__calendar_container {background-color: #ffcc66;border:solid 1px #ffcc00;}
.MyCalendar .ajax__calendar_header{background-color: #ffffff; margin-bottom: 4px;}
.MyCalendar .ajax__calendar_title,.cal_Theme1 .ajax__calendar_next,.cal_Theme1 .ajax__calendar_prev{color: #004080; padding-top: 3px;}
.MyCalendar .ajax__calendar_body{background-color: #ffff99; border: solid 1px #ffcc00;}
.MyCalendar .ajax__calendar_dayname{text-align:center; font-weight:bold; margin-bottom: 4px; margin-top: 2px;}
.MyCalendar .ajax__calendar_day{text-align:center;}

.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year,
.MyCalendar .ajax__calendar_active
	{
		color: #004080; font-weight:bold; background-color: #ffffff;
	} 
	
.MyCalendar .ajax__calendar_today{font-weight:bold;} 
.MyCalendar .ajax__calendar_other,
.MyCalendar .ajax__calendar_hover .ajax__calendar_today,
.MyCalendar .ajax__calendar_hover .ajax__calendar_title
	{
		color: #bbbbbb;
	}
	
 ------------------------- Calendar -End  ------------------------- */

.MyCalendar .ajax__calendar_container {background-color: #ff9900;border:solid 1px #e18904;}
.MyCalendar .ajax__calendar_header{background-color: #f5eb96; margin-bottom: 4px;}
.MyCalendar .ajax__calendar_title,.cal_Theme1 .ajax__calendar_next,.cal_Theme1 .ajax__calendar_prev{color: #000000; padding-top: 3px;}
.MyCalendar .ajax__calendar_body{background-color: #f1f1f8; border: solid 1px #7f7fa4;}
.MyCalendar .ajax__calendar_dayname{text-align:center; font-weight:bold; margin-bottom: 4px; margin-top: 2px;}
.MyCalendar .ajax__calendar_day{text-align:center;}

.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year,
.MyCalendar .ajax__calendar_active
	{
		color: #004080; font-weight:bold; background-color: #bbbbcc; border:solid 0px #7f7fa4;
	} 
	
.MyCalendar .ajax__calendar_today{font-weight:bold;} 
.MyCalendar .ajax__calendar_other,
.MyCalendar .ajax__calendar_hover .ajax__calendar_today,
.MyCalendar .ajax__calendar_hover .ajax__calendar_title
	{
		color: #3e8e11;
	}


/*---------------------------Ajax Tab Menu -----------------------------*/

/* ajax__tab_yuitabview-theme theme (images/sprite.png) */
.ajax__tab_yuitabview-theme .ajax__tab_header 
{
    font-family:arial,helvetica,clean,sans-serif;
    font-size:8.5pt;
    border-bottom:solid 4px #c06e14;
}
.ajax__tab_yuitabview-theme .ajax__tab_header .ajax__tab_outer 
{
    background:url(images/sprite.png) #d8d8d8 repeat-x;
    margin:0px 0.16em 0px 0px;
    padding:1px 0px 1px 0px;
    vertical-align:bottom;
    border:solid 1px #c06e14;
    border-bottom-width:0px;
}
.ajax__tab_yuitabview-theme .ajax__tab_header .ajax__tab_tab
{    
    color:#000;
    padding:0.35em 0.75em;    
    margin-right:0.01em;
}
.ajax__tab_yuitabview-theme .ajax__tab_hover .ajax__tab_outer 
{
    background: url(images/sprite.png) #bfdaff repeat-x left -1300px;
}
.ajax__tab_yuitabview-theme .ajax__tab_active .ajax__tab_tab 
{
    color:#fff;
}
.ajax__tab_yuitabview-theme .ajax__tab_active .ajax__tab_outer
{
    background:url(images/sprite.png) #2647a0 repeat-x left -1400px;
}
.ajax__tab_yuitabview-theme .ajax__tab_body 
{
    font-family:verdana,tahoma,helvetica;
    font-size:8.5pt;
    padding:0.25em 0.5em;
   /* background-color:#ffeec3;    */
    border:solid 1px #808080;
    border-top-width:0px;
}

/************** Validation Summary *********************/
.vsContainer
{
	border			:solid 1px #FFCC66;
	width			:99.5%;	
	font-size		:8pt;
	margin-bottom	:5px;	
	margin-top		:5px;
	font-weight		:bold;
	padding: 5px;
	
}

.vsContainerWithoutMargin
{
	border-bottom	:solid 1px #FFCC66;
	width			:100%;	
	font-size		:8pt;	
	font-weight		:bold;
	margin-bottom: 5px;
}

/*Table CSS
table.sample {
	border: 1px solid #ffcc33;	
	margin: 0px;	
	font-size:8pt;	
	margin-bottom:3px;
}
table.sample td {
	border: 1px solid #ccc;
	padding: -1px 1px -1px 1px;
	color: black;
	border-collapse:collapse;
}
table.sample tr.d0 td {
	background-color: #FFFFFF;
}
table.sample tr.d1 td {
	background-color: #FFFBD6;
}
*/

table.tablenoBorder td
{
	font-size:7.5pt;
	border-style:none;
}


table.simple
{
	border:1px solid #ffcc99;
	border-collapse:collapse;
}

td.td
{
	border:1px solid #ccc;
	border-collapse:collapse;
	padding:2px;
}




.moveFirst
{
	background:url('images/fast.png') no-repeat;
	border-style:none;
	cursor:pointer;
	width:24px;
	height:24px;
}

.moveLast
{
	background:url('images/last.png') no-repeat;
	border-style:none;
    cursor:pointer;
	width:24px;
	height:24px;
}

.moveNext
{
	background:url('images/next.png') no-repeat;
	border-style:none;
	cursor:pointer;
	width:24px;
	height:24px;
}

.movePrevious
{
	background:url('images/previous.png') no-repeat;
	border-style:none;
	cursor:pointer;
	width:24px;
	height:24px;
}

.movePreviousBw
{
	background:url('images/previous_bw.png') no-repeat;
	border-style:none;
	cursor:pointer;
	width:24px;
	height:24px;
}


.moveFirstBw
{
	background:url('images/fast_bw.png') no-repeat;
	border-style:none;
	cursor:pointer;
	width:24px;
	height:24px;
}

.moveLastBw
{
	background:url('images/last_bw.png') no-repeat;
	border-style:none;
    cursor:pointer;
	width:24px;
	height:24px;
}

.moveNextBw
{
	background:url('images/next_bw.png') no-repeat;
	border-style:none;
	cursor:pointer;
	width:24px;
	height:24px;
}

.helpgridBtn
{
	background:url('images/help-icon.png') no-repeat;
	border-style:none;
   cursor:pointer;
   width:16px;
   height:16px;
}

.addgridBtn
{
	background:url('images/add-icon.png') no-repeat;
	border-style:none;
   cursor:pointer;
   width:16px;
   height:16px;
}

.savegridBtn
{
	background:url('images/save-icon.png') no-repeat;
	border-style:none;
   cursor:pointer;
   width:16px;
   height:16px;
}

.cancelgridBtn
{
	background:url('images/cancel-icon.png') no-repeat;
	border-style:none;
   cursor:pointer;
   width:24px;
   height:24px;
}



/************************* Kelvin End ******************************/


/************************ Div Container ******************************/
.mainContainer
{
	min-height		:50px;	
	height			:auto;
	width			:auto;	
	margin			:0px;	
	padding			:0px;
	border			:solid 1px #FFCC66;
}

.headerContainer
{
	background-color	:#FFCC66;
	height				:auto;	
	width				:auto;
	min-width			:100px;
	min-height			:20px;
	margin				:0px;	
	font-size			:8pt;
	font-weight			:bold;
	padding-left		: 5px; 
	padding-top			: 6px;
	color				: #FFFFFF;
	
}

.contentContainer
{
	padding:5px;
}


/*----------------------------------End -----------------------------*/



/*---------------------- Model Popup ----------------------*/


.modalBackground {
	background-color: Gray;
	filter:alpha(opacity=60);
	opacity:0.6;
}

.modalPopup 
{
	width:220px;	
	padding:18px;
	background-color:#ffffff;
	border:solid 2px #000000;	
	display:none;
	

}

.popupHeader
{
    color: #CC0000;
    font-size: 1.4em;
    margin-bottom: 5px;
    margin-top: 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid #DADADA;
}

/*-------------- Progress Bar Start ------------------*/
.progress-outer
{
	border-top:solid 1px #000;
	border-bottom:solid 1px #000;	
}

.progress-inner
{
	position:relative;
	border-left:solid 1px #000;
	border-right:solid 1px #000;
	margin:0pt -1px;
	height:10px;
	overflow:hidden;
	background:url(images/progress_bg.gif) repeat-x;
}

.progress-indicator
{
	width:0px;
	height:10px;
	background:url(images/progress_orange.gif) repeat-x;
}

.progress{ width:200px;}


/*-------------- Progress Bar End --------------------*/

.activateEmp 
{
	background-image:url(images/activateemp.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:24px;
	height:24px;
	border:solid 1px #ffcc66;
	cursor:pointer;
}

.searchImg 
{
	background-image:url(images/search_orange.png);
	background-repeat:no-repeat;
	background-color:#fffbd6;
	width:16px;
	height:16px;
	border:solid 1px #ffcc66;
	cursor:pointer;
	position:absolute;
	margin-left:5px;

}

.watermarked 
{
	font-size : 9pt;
	border:1px solid #7f9db9;
	background-color:#FFFFFc;
	color:gray;
	font-style:italic;
}

.borderLeft
{
	border-left:solid 1px #ccc;
	border-collapse:collapse;
	font-size:6.5pt;
}

.calendarImg 
{
	background-image:url(images/Calendar_scheduleHS.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
	position:absolute;
}
.editImg
{	
	background-image:url(images/edit.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
	
}

.selectImg
{	
	background-image:url(images/select.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:18px;
	height:18px;
	border:none;
	cursor:pointer;
}

.popupImg
{	
	background-image:url(images/popup_orange.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:24px;
	height:24px;
	border:none;
	cursor:pointer;
	cursor:hand;
	position:absolute;
	margin-left:5px;
}

.SelectCheckImg
{	
	background-image:url(images/select_check.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:18px;
	height:18px;
	border:none;
	cursor:pointer;
}

.editDelete
{	
	background-image:url(images/edit_delete.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:29px;
	height:15px;
	border:none;
	cursor:pointer;
}

.copyFunction
{	
	background-image:url(images/copy.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:24px;
	height:24px;
	border:none;
	cursor:pointer;
}

.ChangeID
{	
	background-image:url(images/chnage.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:24px;
	height:24px;
	border:none;
	cursor:pointer;
	border :solid 1px #FFCC66;
}

.ChangeIDBW
{	
	background-image:url(images/chnageBW.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:24px;
	height:24px;
	border:none;
	cursor:pointer;
	border :solid 1px #FFCC66;
}

.copyFunctionDisable
{	
	background-image:url(images/copyDisable.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:24px;
	height:24px;
	border:none;
	
}

.changepwdImg
{
    background-image:url(images/changepwd.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:100px;
	height:81px;
	border:none;
}

.previewBtn
{
	background:url('images/magnifier.png') no-repeat;
	border-style:none;
   cursor:pointer;
   width:16px;
   height:16px;
}

.deleteImgDisabled
{
	background-image:url(images/trash_disabled.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}

.deleteImg
{
	background-image:url(images/trash.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}


.removeImg
{
	background-image:url(images/remove.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}
.undoImg
{
	background-image:url(images/undo.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}
.upImg
{
	background-image:url(images/arrowUp.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}
.downImg
{
	background-image:url(images/arrowDown.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}
.gridImg
{
	background-image:url(images/spltcell2.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}
.magnifyImg
{
	background-image:url(images/magnify2.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}
.textImg
{
    background-image:url(images/notepad.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
	cursor:pointer;
}

/*------------- Model Popup Standard Start ------------------*/
.modalpopup
{
    font-family: arial,helvetica,clean,sans-serif;
    font-size: small;
    padding: 2px 3px;
    display: block;
    
}

.container
{
    border: solid 1px #f2f2f2;
    border-width: 1px 0px;
    border:solid 2px #A0A0A0;  
} 

.bodyContainer
{
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    border-style: solid;
    border-width: 0px 1px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right:10px;
    padding-bottom: 10px;
}


.VerticScroll
{
	overflow-x:hidden;
    overflow-y:scroll;
	width:auto;
	padding:0px;
	margin:0px;
	border:solid 1px #ffcc66;
	background-color:#ffffff;
}


.BothScrollBar
{
	overflow-x:scroll;
    overflow-y:scroll;
	width:auto;
	padding:0px;
	margin:0px;
	border:solid 1px #ffcc66;
	background-color:#ffffff;
}

.headerImg
{
  /* background: url(images/sprite.png) repeat-x 0px -1400px;
   background : url(images/Container-Header.jpg);
  /* background: url('images/sprite_grid.png') repeat-x 0px 0px;
 
   padding: 5px 10px;
   font-weight:bold;
   vertical-align: middle;
   height:20px;*/
  
	background :url(images/HeaderImg-soft.png);
	background-repeat	:repeat-x;
	margin				:0px;
	font-size			:8pt;
	font-weight			:bold;
	vertical-align		:middle;
	height:20px;
	
}

.headerGray
{
	background: url('images/gridheader.png') repeat-x 0px 0px;
    font-size:6.5pt;
    padding: 5px 10px;
    font-weight:bold;
    vertical-align: middle;
    height:22px;
    border:none;
}


.popHeadImg
{
	background: url('images/PopupHeader.png') repeat-x 0px 0px;   
    padding: 5px 10px;
    font-weight:bold;
    vertical-align: middle;
    height:16px;
    color:#FFF;   
}

.footer
{
   background-color : #f2f2f2;
    border-color: #ccc;
    border-style: none solid;
    border-width: 0px 0px;
    text-align:right;
    padding-right: 10px;
    padding-top:6px;
    padding-bottom:8px;
	
} 

.searchBox
{
	margin-bottom: 7px; 
	border:solid 1px #FFCC66;
}

.headerTitle
{
	font-weight: bold;
    font-size:10pt;
    color:#000;
}

/*------------- Model Popup Standard End ------------------*/

.containerPaygrouYear
{
    width: 380px;
    border: solid 1px #f2f2f2;
    border-width: 1px 0px;
} 
.containerEmployee
{
    width: 450px;
    border: solid 1px #c06e14;
    border-width: 1px 0px;
} 

.bodyPaygrouYear
{
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    border-style: solid;
    border-width: 0px 1px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
} 

   

.msg
{
    font-size:8pt;
    color:#000000;
    font-weight:bold;
}    

.msgTitle
{
	font-size:8pt;
    color:#ffffff;
    font-weight:bold;
} 

.body
{
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    border-style: solid;
    border-width: 0px 1px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 30px;
} 




.body .msg
{
    background: url(images/sprite.png) no-repeat 0px -1150px;	
    float: left;
    padding-left: 22px;
}  



.footerButton
{
	/*background-color	:White;*/
	background:url(images/footerBg.png);
	background-repeat	:repeat-x;
	border				:solid 1px #FFCC66;
	min-height			:25px;
	height				:auto;
	width				:99%;	
	margin				:1px 0px 0px 0px;
	vertical-align		:middle;
	margin-left:0px;
	margin-right:2px;
}

.footerButtonClear
{
	background-color	:White;	
	border				:solid 1px #FFCC66;
	min-height			:25px;
	height				:auto;
	width				:99%;	
	margin				:1px 0px 0px 0px;
	vertical-align		:middle;
	margin-left			:0px;
	margin-right		:2px;
}

.close
{
    right: 7px;	
    background: url(images/sprite.png) no-repeat 0px -300px;		
    width: 25px;	
    cursor: pointer;	
    position: absolute;	
    top: 7px;	
    height: 15px;
}

/* Masked Edit 
.MaskedEditFocus
{
    background-color: #ffffcc;
    color: #000000;
}
.MaskedEditMessage
{
	color: #ff0000;
	font-weight: bold;
}
.MaskedEditError
{
    text-align : right; background-color : #ffcc99;
}
.MaskedEditFocusNegative
{
    background-color: #ffffcc;
    color: #ff0000;
}
.MaskedEditBlurNegative
{
    color: #ff0000;
}

*/
/*--------------------- Armand ---------------------*/
html
{
	padding: 0px;
	margin: 0px;	
}

input
{
	font-size			:10px;
	font-family			:Verdana, Arial, 'Tahoma';	
}

select
{
	font-size			:10px;
	font-family			:Verdana, Arial, 'Tahoma';	
}

#main
{
	min-height		:50px;	
	height			:auto;
	width				:auto;	
	padding			:0px;
	margin			:0 1px 0 1px;	
}

.main
{
	min-height		:50px;	
	height			:auto;
	width			:99%;	
	margin-bottom	:5px;		
	padding			:0px;
	border			:solid 1px #FFCC66;
	border-top		:none;
	font-size		:8pt;
	font-family		:Tahoma;
	margin-left		:0px;
	margin-right	:0px;
}

.header
{
	/*background			: url(images/Container-Header.jpg);*/	
	background:url(images/HeaderImg-soft.png);
	background-repeat	:repeat-x;
	min-width			:100px;
	margin				:0px;
	font-size			:8pt;
	font-weight			:bold;
	vertical-align		:middle;
	height:22px;
	
}

.header-b
{
	background:url(images/HeaderImg-soft.png);	
	background-repeat	:repeat-x;
	border-left			:solid 1px #FFCC66;
	border-right		:solid 1px #FFCC66;
	width					:100%;
	font-size			:8pt;
	font-weight			:bold;
	vertical-align		:middle;
	height				:22px;		
}

/* Added November 20, 2009 */
/* @ 2:46PM */
.borderline-bottom
{
	border-bottom:solid 1px #FFCC66;
}

.borderline-top
{
	border-top:solid 1px #FFCC66;
}

.borderline-right
{
	border-right:solid 1px #FFCC66;
}

.borderline-left
{
	border-left:solid 1px #FFCC66;
}

.content
{
	height				:auto;
	width					:auto;
	min-height			:30px;
	min-width			:30px;
}


#content
{
	height				:auto;
	width					:auto;
	min-height			:30px;
	min-width			:100px;
}

#contentheader
{	
	margin				:5px 2px 0 2px;
	min-height			:47px;
	height				:auto;
	width					:auto;	
	background-color	:#FFFBD6;	
	border				:solid 1px #FFCC66;
}

#contentgrid
{
	padding				:3px 1px 0 1px;
	margin				:1px 2px 1px 1px;
}

#contentbody
{	
	margin-top			:1px;
	padding				:0px 1px;
	min-height			:100px;
}

#contentsummary
{
	padding				:0px;			
	margin				:1px 1px 1px 1px;
	min-height			:50px;
}

#footer
{
	background-color	:White;
	border				:solid 1px #FFCC66;
	min-height			:25px;
	height				:auto;
	width				:auto;	
	margin				:3px 1px 1px 1px;
	padding				:2px;
}

#bonus-footer
{
	background-color	:#FFFFFF;
	border				:solid 1px #FFCC66;
	min-height			:25px;
	height				:auto;
	width					:auto;	
	margin				:3px 0 1px 0;
	padding				:2px 2px 0px 2px;
}

#tblmain
{
	border: 1px solid #FFCC66;
	width:100%;	
}

#tblmain td
{
	padding	:1px;
}

#npldiv td, #otdiv td, #banktrxdiv td, #allowdiv td, #restdaydiv td, #shiftdiv td, #gvdiv td, #gbdiv td, #indiv td, #upbdiv td,
#divForeignCode1 td, #dvQueryExpertGV1 td, #dvQueryExpertDetails td, #dvQueryExpertDetailSearch td, #dvLockPeriod td, #dvBackupName1 td,
#dvBackupTables td

{
	border:solid 1px #FFCC66;
}

#allowdiv table, #gvdiv table
{
	border:none;
}

#npldiv tr, #otdiv tr, #banktrxdiv tr, #shiftdiv tr, #allowdiv tr, #restdaydiv tr, #gvdiv tr, #gbdiv tr, #upbdiv tr, #indiv tr, #dvBackupName1 tr,
#dvBackupTables tr

{
	height:19px;	
}

.borderline-bottom
{
	border-bottom:solid 1px #FFCC66;
}

.borderline-top
{
	border-top:solid 1px #FFCC66;
}

.borderline-right
{
	border-right:solid 1px #FFCC66;
}

.borderline-left
{
	border-left:solid 1px #FFCC66;
}
.content
{
	height				:auto;
	width					:auto;
	min-height			:30px;
	min-width			:30px;
}
.GridViewBankRight
{	
	height:15px;
	text-align:right;
}

.GridViewBankCenter
{	
	height:15px;
	text-align:center;
}

.GridViewBankLeft
{	
	height:15px;
	text-align:left;
}

.VerticalAlign
{
	padding:0px;
	text-align:center;
	vertical-align:text-top;
	margin-top:-7px;	
	border:solid 1px #FFCC66;
	background-color:#FFFBD6;
	background-repeat:no-repeat;
}

.CurrencyVerticalAlign
{
	padding:0px;
	text-align:center;
	vertical-align:text-top;
	margin-top:-3px;	
	border:solid 1px #FFCC66;
	background-color:#FFFBD6;
	background-repeat:no-repeat;
}

.Center
{
	vertical-align:middle;
	text-align:center;	
}

.Right
{
	vertical-align:middle;
	text-align:right;	
}

.NoUnderlineLink a
{
	text-decoration:none;
	text-align:center;
}

.GridDefaultDimensions
{
	height:67px;
	width:100%;		
}

.SelectedRow
{
    background:#F9EE75;
    border-color: #FFCC66;
                border-style: solid solid solid solid;
                border-width: 1px 1px 1px 1px;
                color:#000;
                vertical-align:middle;
                height:18px;
                font-size : 6.5pt;
}



/* ---------------------------------------------------- */

/* Use by Kelvin */
.gridHeader
{
    /*background: url('images/sprite_grid.png') repeat-x 0px 0px;*/
    background-image:url(images/gridheader.png);
   background-repeat:repeat-x;
    border-color: #FFCC66;
    border-style: solid solid solid solid;
    border-width: 1px 1px 1px 1px;
    border-collapse:collapse;
    color: #000;
    padding: 4px 5px 4px 5px;
    vertical-align: middle;
    text-align:center;
    text-decoration:none;
    font-size:6.5pt;
    font-weight:bold;
    height:22px;
} 

/*Freezing Header*/ 
.freezeHeader
{
 
    /*background: url('images/sprite_grid.png') repeat-x 0px 0px;*/
    background-image:url(images/gridheader.png);
    background-repeat:repeat-x;
    border-color: #FFCC66;
    border-style: solid solid solid solid;
    border-width: 1px 1px 1px 1px;
    color: #000;
    padding: 4px 5px 4px 5px;
    vertical-align: middle;
    text-align:center;
    text-decoration:none;
    font-size:6.5pt;
    font-weight:bold;
    height:22px;
   
   /*Freezing Header
   position:relative ;
   top:expression(this.offsetParent.scrollTop-1);
   z-index: 10; */
    table-layout : fixed;
    position : relative ; 
    top:-1px;
} 


/* Use by Kelvin */
.gridfooter
{
	background-image:url(images/gridheader.png);
   border-color: #FFCC66;
    border-style: solid solid solid solid;
    border-width: 1px 1px 1px 1px;
    color: #000;
    padding: 4px 5px 4px 5px;
    vertical-align: middle;
    text-align:center;
    text-decoration:none;
    font-size:8.5px;
    font-weight:bold;
    height:18px;
} 

.GridDefaultHeader
{
	background-image:url(images/gridheader.png);
   background-repeat:repeat-x;
	background-color:#FFCC66;
	color:black;
	font-weight:bold;
	height:18px;
	font-size:8.5px;
}
.GridDefaultHeaderChild
{
	background-color:#FFCC66;
	color:black;
	font-weight:bold;
	height:18px;
	font-size:8.5px;
}
.GridDefaultAlternatingRow
{
	background-color:#FFFFFF;
	color:#000;
	border-style: solid solid solid solid;
	border-width: 1px 1px 1px 1px;
	border-color: #FFCC66;
	vertical-align:middle;
	height:18px;
	font-size :6.5pt;
}

.GridDefaultRow
{
	background-color: #FFFBD6;
	border-color: #FFCC66;
	border-style: solid solid solid solid;
	border-width: 1px 1px 1px 1px;
	color:#000;
	vertical-align:middle;
	height:18px;
	font-size : 6.5pt;	
}
#divShiftSetup td, #divOtRateSetup td, #divGvHoursDay td, #divBatchEmpChild td, #divQueryGen td, #divQueryMain td,
#gvProrateAllowance td, #DivGvUserSetup td, #divUserSetupEmployee td, #divAllowDeduc td, #divAllowPopup td,
#pgrptrxdiv td, #divBankMaster td, #divCodeSetupDetail td, #divCpfLevePopup td, #divCodeSetupDetail td,
#tblMVC td, #divIsMVC td, #divMvcAmount td,#divAllowDeducSetup td, #divBankMasterSetup td, #divEmpSearch td, #divDepartmentSetting td,
#divGlobalSectionCode td


{
	border-color: #FFCC66;
	border-style: solid solid solid solid;
	border-width: 1px 1px 1px 1px;
	border-collapse:collapse; 
}


#infoTable td, #infoTable th
{
	border-collapse:collapse; 
	border-style:solid; 
	border-width:1px; 
	border-color:#FFCC66;
}


.GridDefaultSelectedRow
{
	/*background-color:#FFCC66;
	color:Navy;
	font-weight:bold;
	vertical-align:top;
	height:23px; eiei*/
	
	/*eiei*/
	vertical-align:middle; height:20px; border:solid 1px #FFCC66; background:#F9EE75 repeat-x 0 0; 
}


.GridHistory
{
	background-color:#cccccc;
	color:#000;	
	border-color: #FFCC66;
	border-style: solid solid solid solid;
	border-width: 1px 1px 1px 1px;
	vertical-align:middle;
	font-size :6.5pt;
	min-height:5px;
}

/*Pager*/
.PagerBg
{
	background-color:#FFD09E;
	color:#000;	
	border-color: #ffcc99;
	border-style: solid solid solid solid;
	border-width: 2px 2px 2px 2px;	
	height:25px;	
}

.btnBackground input
{
	border:solid 1px #FFCC66;
	background-color:#FFFBD6;	
	background-repeat:no-repeat;
	padding:2px;
	color:Black;	
	font-weight:bold;
	height:23px;
	text-align:center;
	vertical-align:middle;
}

.smallbtnBackgroundNoResize
{
	border:solid 1px #FFCC66;
	background-color:#FFFBD6;	
	background-repeat:no-repeat;
	color:Black;	
	text-align:center;
	vertical-align:middle;
}

.smallbtnBackground
{
	/*border:solid 1px #FFCC66;
	background-color:#FFFBD6;
	background-repeat:no-repeat;
	padding:2px 3px 2px 2px;*/
	color:Black;
	font-size:9px;
	height:18px;
	text-align:center;
	vertical-align:middle;
	margin-right:3px;
	cursor:pointer;
}

.smallbtnBackground:hover
{
	/*border:solid 1px #FFCC66;
	background-color:white;	
	background-repeat:no-repeat;
	padding:2px 3px 2px 2px;*/
	color:black;	
	font-size:9px;
	height:18px;
	text-align:center;
	vertical-align:middle;
	margin-right:3px;
	font-weight:bolder;
}

.font-9px
{
	font-size:9px;	
}

.font-10px
{
	font-size:10px;	
}

.font-orange
{
	color:#FFCC66;	
}

.valign-center
{
	vertical-align:middle;
}

.valign-bottom
{
	vertical-align:baseline;
}

.border-whole
{
	border:solid 1px #FFCC66;	
}

.color-FFFBD6
{
	background-color:#FFFBD6;
}

.color-FFCC66
{
	background-color:#FFCC66;
}

.smallbtnBackgroundBold
{
	border:solid 1px #FFCC66;
	background-color:#FFFBD6;	
	background-repeat:no-repeat;
	padding:2px 3px 2px 2px;
	color:Black;	
	font-size:9px;
	height:18px;
	text-align:center;
	vertical-align:middle;
	font-weight:bold;
}

.bigbtnBackground
{
	border:solid 1px #FFCC66;
	background-color:#FFFBD6;
	background-repeat:no-repeat;
	padding:2px 3px 2px 2px;
	color:Black;
	font-size:11px;
	height:21px;
	text-align:center;
	vertical-align:middle;
}

.popup
{	
	z-index:20;
   border:solid 1px #111;
   background-color:#fff;
   padding:10px 5px;
	width:600px;
	height:300px;
}

.currencypopup
{	
	z-index:20;
   border:solid 1px #111;
   background-color:#fff;
   padding:10px 5px;
	width:400px;
	height:300px;
}

.restdaypopup
{	
	z-index:20;
   border:solid 1px #111;
   background-color:#fff;
   padding:2px;
   margin:0px;
	width:500px;
	height:auto;
}

.Hidden
{
	display:none;
}

.ddlCode
{
	text-align:right;		
}

.pnl legend
{
	color:Black;		
}

.pnl fieldset
{	
	border:solid 1px #FFCC66;
	padding: 4px 0;
	min-height:120px;
	height:auto;	
}

.union legend
{
	color:Black;		
}

.union fieldset
{
	border:solid 1px #FFCC66;
	padding: 4px 0;
	font-weight:bold;
}

input.rdo
{	
	color:#FFCC66;
	border:solid 1px #FFCC66;
}

input.noborder
{
	color:black;	
	border:solid 0px #FFCC66;	
	text-decoration:underline;
	background-color:Transparent;
	cursor:hand;
}

.noborder
{
	border:none;	
}

.cursor-hand
{	
	cursor:pointer;
}

/*.modalBackground
{
	background-color:Gray;
	opacity:0.7;	
	filter:alpha(opacity=70)
}*/
      
.smalldropdownBackground
{
	border:solid 1px black;
	background-color:#FFFBD6;
	background-repeat:no-repeat;
	padding:2px 3px 2px 2px;
	color:Black;
	font-size:11px;
	height:18px;
	text-align:left;
	vertical-align:middle;
}

.txtBackground
{		
	height:13px;
	font-size:7;	
	border:solid 1px #FFCC66;
	vertical-align:middle;	
	text-align:right;
}

.txtHeader
{		
	height:13px;
	font-size:7;	
	border:solid 1px #FFCC66;
	vertical-align:middle;	
	text-align:right;
}

.cellcenter
{
	text-align:center;
	vertical-align:middle;	
}

.cellright
{
	text-align:right;
	vertical-align:middle;	
}

.cellleft
{
	text-align:left;
	vertical-align:middle;	
}

.clear 
{
	clear					:both;	
}

.button-hover
{
	cursor				:pointer;		
}

.transpt-orange input[type="text"]
{	
	padding				:2px;
	border				:solid 1px #FFCC66;
	background-color	:#FFFBD6;
}

.transpt-white input[type="text"]
{	
	padding				:2px 1px;
	border				:solid 1px #FFCC66;
	background-color	:White;
}
.boundfields
{
	text-align			:right;
}

.CustomValidatorCalloutStyle td{ 
    border:solid 1px #FFCC66;
    background-color:white;
    width:50px;
}

.ListSearchExtenderPrompt
{
	font-style:italic;
	color:Gray;
}

/* default layout */


.ajax__tab_default .ajax__tab_header {white-space:nowrap;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

/* xp theme */
.ajax__tab_orange .ajax__tab_header 
{
	font-family:verdana,tahoma,helvetica;	
	background:url("images/orange/orangetab-line.gif") repeat-x bottom;
}
.ajax__tab_orange .ajax__tab_outer 
{
	padding-right:0px;
	background:url("images/orange/orangetab-right.gif") no-repeat right;
	height:21px;
}
.ajax__tab_orange .ajax__tab_inner 
{
	padding-left:3px;
	background:url("images/orange/orangetab-left.gif") no-repeat;
}
.ajax__tab_orange .ajax__tab_tab 
{
	height:13px;
	padding:4px;
	margin:0;
	background:url("images/orange/orangetab.gif") repeat-x;
}
.ajax__tab_orange .ajax__tab_hover .ajax__tab_outer 
{
	background:url("images/orange/orangetab-hover-right.gif") no-repeat right;
}
.ajax__tab_orange .ajax__tab_hover .ajax__tab_inner 
{
	background:url("images/orange/orangetab-hover-left.gif") no-repeat;
}
.ajax__tab_orange .ajax__tab_hover .ajax__tab_tab 
{
	background:url("images/orange/orangetab-hover.gif") repeat-x;
}
.ajax__tab_orange .ajax__tab_active .ajax__tab_outer 
{
	background:url("images/orange/orangetab-active-right.gif") no-repeat right;
}
.ajax__tab_orange .ajax__tab_active .ajax__tab_inner 
{
	background:url("images/orange/orangetab-active-left.gif") no-repeat;
}

.ajax__tab_orange .ajax__tab_active .ajax__tab_tab 
{
	background:url("images/orange/tab-active.gif") repeat-x;
}

.ajax__tab_orange .ajax__tab_body 
{
	font-family:verdana,tahoma,helvetica;
	font-size:10pt;
	border:1px solid #FFCC66;
	border-top:0;
	padding:4px;
	background-color:Transparent;
}

/* scrolling */
.ajax__scroll_horiz {overflow-x :scroll;}
.ajax__scroll_vert  {overflow-y :scroll;}
.ajax__scroll_both  {overflow   :scroll;}
.ajax__scroll_auto  {overflow   :auto;  }


/*  jquery  Autocomplete */
.ac_results {
	padding: 0px;
	border: 1px solid #ffcc66;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: pointer;

	display: block;
	/* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font: menu;
	font-size: 7pt;
	/* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
	line-height: 15px;
	overflow: hidden;
}

.ac_loading 
{
	background: #FFFFFF url('images/ajax-loader.gif') right center no-repeat;
	height:12px;
	width:12px;	
}


.ac_odd {
	background-color: #FFFBD6;
}

.ac_over {
	background-color: #FFFF99;
	color: #000;
}


/*ZHANG SHENG CSS*/
.pancelBorder
{
	border-width: 1px;
	border-color: #c06e14;
}

.nobottombtn
{
	width :80px; 
	font-size :8pt;
	cursor:pointer; 
	border:solid 1px #c06e14; 
	color:Black; 
	text-align:center; 
	background-color:#FFFBD6;
	border-bottom-width : 0;
	font-weight:bold;
}

.gridFixedHeader
{
    background: url('images/gridHeader.png') repeat-x 0px 0px;
    border-color: #989898 #cbcbcb #989898 #989898;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    color: #000;
    padding: 4px 5px 4px 5px;
    vertical-align: middle;
    text-align:center;
    text-decoration:none;
    font-size:10px;
    font-weight:bold;
    height:20px;
    table-layout : fixed;
    position : relative ; 
} 

.GridDefaultRow_B
{
	background-color:#FFFBD6;
	border:solid 1px #FFCC66;
	color:#333333;
	vertical-align:middle;
}

.FlexReportExportExcel
{
	background-image:url(images/excel.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportExportPDF
{
	background-image:url(images/pdf.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportSave
{
	background-image:url(images/save.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportBack
{
	background-image:url(images/back.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportPopup
{
	background-image:url(images/popup_rpt.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportFirst
{
	background-image:url(images/fast.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportNext
{
	background-image:url(images/next.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportPrevious
{
	background-image:url(images/previous.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportLast
{
	background-image:url(images/last.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.FlexReportPreview
{
	background-image:url(images/preview.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:hand;
}

.FlexReportSelection
{
	background-image:url(images/dataselection.png);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:26px;
	height:26px;
	border:none;
	cursor:pointer;
}

.Vertic_Popup
{
	overflow-x:hidden;
	width:auto;
	padding:0px;
	margin:0px;
	border:solid 1px #7789FF;
	background-color:#ffffff;
}

/*ZHANG SHENG CSS END*/


/*Progress Bar Css */
 .CleanModalBackground 
{
    background-color:Gray;
    filter:alpha(opacity=00);
    opacity:0.00;   
}  

/* .modalBackground 
{
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.70;   
}    */
.updateProgress
{
    border-width:5px; 
    border-style:solid; 
    border-color:#CCC;
    background-color:#FFFFFC; 
    position:absolute; 
    width:180px; 
    height:75px;      
}
.updateProgressMessage
{
    margin:3px; 
    font-family:Trebuchet MS; 
    font-size:small; 
    vertical-align: middle;
}


    .search-box
    {
        display:inline;
        border:1px solid #7f9db9;
    }

.movelastactiveImg
{
	background-image:url(images/next3.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
}
.movelastdisableImg
{
	background-image:url(images/next2.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
}
.movefirstactiveImg
{
	background-image:url(images/prev3.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
}
.movefirstdisableImg
{
	background-image:url(images/prev2.gif);
	background-repeat:no-repeat;
	background-color:Transparent;
	width:20px;
	height:20px;
	border:none;
}


.imgShadow
{
	box-shadow: 5px 5px #818181;
	-webkit-box-shadow: 5px 5px #818181;
	-moz-box-shadow: 5px 5px #818181;
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
/*JQUERY ICON ************/


	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	/* remember to define focus styles! */
	:focus {
		outline: 0;
	}
	
	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}
	
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	url("resets.css");


/* =Base Structure
============================================================================== */
	
		
	h1 {
		font-size: 20px;
		color: #7f2d2d;
		text-align: center;
		}
		
/* =Navigation
============================================================================== */

	/* =Reflection Nav
	-------------------------------------------------------------------------- */
		
		#nav-reflection {
			margin: 0 auto 30px auto;
			padding: 10px 0 0 10px;
			width: auto;
			min-height: 130px;
			background: url(images/images/page-shadow.jpg) top center no-repeat;
			list-style: none;
			}
			
		#nav-reflection li {
			margin-right: 15px;
			width: 80px;
			float: left;
			}
			
		#nav-reflection a, #nav-reflection a:visited, #nav-reflection a:hover {
			width: 59px;
			height: 59px;
			text-indent: -9999px;
			overflow: hidden;
			background: url(images/images/icons.png) no-repeat;
			display: block;
			}
			
		#nav-reflection span {
			margin-top: 1px;
			width: 59px;
			height: 34px;
			text-align: center;
			background: url(images/images/icons-reflections.jpg) no-repeat;
			display: block;
			}
			
		/* Button Colors */
		
		#nav-reflection li.button-color-1 a {
			background-position: -3px -3px;
			}
			
		#nav-reflection li.button-color-2 a {
			background-position: -92px -3px;
			}
			
		#nav-reflection li.button-color-3 a {
			background-position: -181px -3px;
			}
			
		#nav-reflection li.button-color-4 a {
			background-position: -270px -3px;
			}
			
		/* Button Reflection Color */
		
		#nav-reflection li.button-color-1 span {
			background-position: 0 0;
			}
			
		#nav-reflection li.button-color-2 span {
			background-position: -89px 0;
			}
			
		#nav-reflection li.button-color-3 span {
			background-position: -178px 0;
			}
			
		#nav-reflection li.button-color-4 span {
			background-position: -267px 0;
			}
			
			
	/* =Shadow Nav
	-------------------------------------------------------------------------- 
		
		#nav-shadow {
			margin: 0 auto 50px auto;
			padding: 50px 0 0 127px;
			width: 400px;
			min-height: 130px;
			text-align: center;
			background: url(images/images/page-shadow.jpg) top center no-repeat;
			list-style: none;
			}
			
		#nav-shadow li {
			margin-right: 15px;
			width: 81px;
			height: 72px;
			position: relative;
			float: left;
			}
			
		
			
		#nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
			margin: 0 auto;
			width: 59px;
			height: 59px;
			text-indent: -9999px;
			overflow: hidden;
			background: url(images/images/icons.png) no-repeat;
			display: block;
			position: relative;
			z-index: 2;
			} */
			
		/* Button Colors 
		
		#nav-shadow li.button-color-1 a {
			background-position: -3px -3px;
			}
			
		#nav-shadow li.button-color-2 a {
			background-position: -92px -3px;
			}
			
		#nav-shadow li.button-color-3 a {
			background-position: -181px -3px;
			}
			
		#nav-shadow li.button-color-4 a {
			background-position: -270px -3px;
			}
			*/
			
		/* Button Shadow 
		
		#nav-shadow li img.shadow 
		{
			margin: 0 auto;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
		}
	*/
	
	      #container 
	        {
			    margin: 0 auto 30px auto;
			    padding: 10px 0 0 80px;
			    width: 90%;
			    min-height: 130px;
			    text-align: center;
			    list-style: none;
			}
			
		    #container li 
		    {
			    margin-right: 20px;
			    width: 190px;
			    height: 120px;
			    position: relative;
			    float: left;
			}
			
	        #container a, #container a:visited, #container a, #container a:hover 
	        
	        {
			    margin: 0 auto;			 
			    text-indent: -9999px;			
			    background: url(images/images/employee.png) no-repeat  top left;
			    display: block;
			    position:relative;
			    z-index: 2;
			}
	
      #container li.emsdetail a { background-position: 0 -749px; width: 57px; height: 57px; } 
      #container li.emscareer a { background-position: 0 -642px; width: 57px; height: 57px; } 
      #container li.emsbank a { background-position: 0 -428px; width: 57px; height: 57px; } 

     #container li.emsEmployment a { background-position: 0 -107px; width: 57px; height: 57px; } 
     #container li.emsaddress a { background-position: 0 -321px; width: 57px; height: 57px; } 
     #container li.emscalender a { background-position: 0 -535px; width: 57px; height: 57px; } 
     #container li.emsleavebenefit a { background-position: 0 -963px; width: 57px; height: 57px; } 
     #container li.emsfreefield a { background-position: 0 -856px; width: 57px; height: 57px; } 

     #container li.emsExitReord a { background-position: 0 -214px; width: 57px; height: 57px; } 
     
     #containerpayitem li.epayroll a { background-position: 0 -1070px; width: 57px; height: 57px; } 
      #containerpayitem li.statutoryreq a { background-position: 0 -1284px; width: 57px; height: 57px; } 
       #containerpayitem li.allowdeduct a { background-position: 0 0; width: 57px; height: 57px; } 
     #containerpayitem li.noticeperiod a { background-position: 0 -1177px; width: 57px; height: 57px; } 
   
  

        #containerpayitem 
	        {
			   margin: 0 auto 30px auto;
			    padding: 10px 0 0 100px;
			    width: 90%;
			    min-height: 100px;
			    text-align: center;
			    list-style: none;
			}
			
		    #containerpayitem li 
		    {
			  	 margin-right: 20px;
			    width: 150px;
			    height: 500px;
			    position: relative;
			    float: left;
			}
			
	        #containerpayitem a, #containerpayitem a:visited, #containerpayitem a, #containerpayitem a:hover 
	        
	        {
			    margin: 0 auto;			 
			    text-indent: -9999px;			
			    background: url(images/images/employee.png) no-repeat  top left;
			    display: block;
			    position:relative;
			    z-index: 2;
			}
           
           
           

  

      
			
/*Gridview Fixed Header	*/
/* So the overflow scrolls 
.container {overflow:auto;}*/

/* Keep the header cells positioned as we scroll 
.container table th {position:relative;}*/

/* For alignment of the scroll bar 
.container table tbody {overflow-x:hidden;} */

/*Paging*/
 #testTable 
{ 
    width : 300px;
    margin-left: auto; 
    margin-right: auto; 
 }
  
  #tablePagination { 
    background-color:  Transparent; 
    font-size: 0.8em; 
    padding: 0px 5px; 
    height: 20px
  }
  
  #tablePagination_paginater { 
    margin-left: auto; 
    margin-right: auto;
  }
  
  #tablePagination img { 
    padding: 0px 2px; 
  }
  
  #tablePagination_perPage { 
    float: left; 
  }
  
  #tablePagination_paginater { 
    float: right; 
  }


/* Reapter + JQuery + Paging Start. */
/*///////////////////////////////////////////////////////////*/
/* General page setup*/
#dt_example {
	font: 80%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
}


#dt_example #container {
	width: 800px;
	margin: 30px auto;
	padding: 0;
}


#dt_example #footer {
	margin: 50px auto 0 auto;
	padding: 0;
}

#dt_example #demo {
	margin: 30px auto 0 auto;
}

#dt_example .big {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.6em;
	color: #4E6CA3;
}

#dt_example .spacer {
	height: 20px;
	clear: both;
}

#dt_example .clear {
	clear: both;
}

#dt_example pre {
	padding: 15px;
	background-color: #F5F5F5;
	border: 1px solid #CCCCCC;
}

#dt_example h1 {
	margin-top: 2em;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.6em;
	color: #4E6CA3;
	border-bottom: 1px solid #B0BED9;
	clear: both;
}

#dt_example h2 {
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.6em;
	color: #4E6CA3;
	clear: both;
}

#dt_example a {
	color: #0063DC;
	text-decoration: none;
}

#dt_example a:hover {
	text-decoration: underline;
}

#dt_example ul {
	color: #B0BED9;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables features
 */

.dataTables_wrapper {
	position: relative;
	min-height: 302px;
	_height: 302px;
	clear: both;
}

.dataTables_processing {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 250px;
	margin-left: -125px;
	border: 1px solid #ddd;
	text-align: center;
	color: #999;
	font-size: 11px;
	padding: 2px 0;
}

.dataTables_length {
	width: 40%;
	float: left;
}

.dataTables_filter {
	width: 50%;
	float: right;
	text-align: right;
}

.dataTables_info {
	width: 60%;
	float: left;
}

.dataTables_paginate {
	width: 44px;
	* width: 50px;
	float: right;
	text-align: right;
}

/* Pagination nested */
.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
	height: 19px;
	width: 19px;
	margin-left: 3px;
	float: left;
}

.paginate_disabled_previous {
	background-image: url('images/Paging/back_disabled.jpg');
}

.paginate_enabled_previous {
	background-image: url('images/Paging/back_enabled.jpg');
}

.paginate_disabled_next {
	background-image: url('images/Paging/forward_disabled.jpg');
}

.paginate_enabled_next {
	background-image: url('images/Paging/forward_enabled.jpg');
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
	margin: 0 auto;
	width: 100%;
	clear: both;
}

table.display thead th {
	padding: 3px 10px;
	border-bottom: 1px solid black;
	font-weight: bold;
	cursor: pointer;
	* cursor: hand;
}

table.display tfoot th {
	padding: 3px 10px;
	border-top: 1px solid black;
	font-weight: bold;
}

table.display tr.heading2 td {
	border-bottom: 1px solid #aaa;
}

table.display td {
	padding: 4px 10px;
}

table.display td.center {
	text-align: center;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables sorting
 */

.sorting_asc {
	background: url('images/Paging/sort_asc.jpg') no-repeat center right;
}

.sorting_desc {
	background: url('images/Paging/sort_desc.jpg') no-repeat center right;
}

.sorting {
	background: url('images/Paging/sort_both.jpg') no-repeat center right;
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */
table.display tr.odd.gradeA {
	background-color: #FFFBD6;
}

table.display tr.even.gradeA {
	background-color: #FFFFFF;
}




table.display tr.odd.gradeA {
	background-color: #FFFBD6;
}

table.display tr.even.gradeA {
	background-color: #FFFFFF;
}

table.display tr.odd.gradeC {
	background-color: #FFFBD6;
}

table.display tr.even.gradeC {
	background-color: #eeeeff;
}

table.display tr.odd.gradeX {
	background-color: #FFFBD6;
}

table.display tr.even.gradeX {
	background-color: #ffeeee;
}

table.display tr.odd.gradeU {
	background-color: #ddd;
}

table.display tr.even.gradeU {
	background-color: #eee;
}


tr.odd {
	background-color: #FFFBD6;
}

tr.even {
	background-color: white;
}





/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Misc
 */
.top, .bottom {
	padding: 15px;
	background-color: #F5F5F5;
	border: 1px solid #CCCCCC;
}

.top .dataTables_info {
	float: none;
}

.clear {
	clear: both;
}

tfoot input {
	margin: 0.5em 0;
	width: 100%;
	color: #444;
}

tfoot input.search_init {
	color: #999;
}


.example_alt_pagination div.dataTables_info {
	width: 40%;
}

.example_alt_pagination .dataTables_paginate {
	width: 400px;
}

.example_alt_pagination div.dataTables_paginate span.paginate_button,
 	.example_alt_pagination div.dataTables_paginate span.paginate_active {
	border: 1px solid #aaa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 2px 5px;
	margin: 0 3px;
	cursor: pointer;
	*cursor: hand;
}

.example_alt_pagination div.dataTables_paginate span.paginate_button {
	background-color: #ddd;
}

.example_alt_pagination div.dataTables_paginate span.paginate_button:hover {
	background-color: #ccc;
}

.example_alt_pagination div.dataTables_paginate span.paginate_active {
	background-color: #99B3FF;
}


table.display tr.row_selected.odd td {
	background-color: #B0BED9;
}

table.display tr.row_selected.even td {
	background-color: #9FAFD1;
}


/*
 * Sorting classes for columns
 */
/* For the standard odd/even 
tr.odd td.sorting_1 {
	background-color: #D3D6FF;
}

tr.odd td.sorting_2 {
	background-color: #DADCFF;
}

tr.odd td.sorting_3 {
	background-color: #E0E2FF;
}

tr.even td.sorting_1 {
	background-color: #EAEBFF;
}

tr.even td.sorting_2 {
	background-color: #F2F3FF;
}

tr.even td.sorting_3 {
	background-color: #F9F9FF;
}
*/

/* For the Conditional-CSS grading rows */
/*
 	Colour calculations (based off the main row colours)
  Level 1:
		dd > c4
		ee > d5
	Level 2:
	  dd > d1
	  ee > e2
 */
tr.odd.gradeA td.sorting_1 {
	background-color: #c4ffc4;
}

tr.odd.gradeA td.sorting_2 {
	background-color: #d1ffd1;
}

tr.even.gradeA td.sorting_1 {
	background-color: #d5ffd5;
}

tr.even.gradeA td.sorting_2 {
	background-color: #e2ffe2;
}

tr.odd.gradeC td.sorting_1 {
	background-color: #c4c4ff;
}

tr.odd.gradeC td.sorting_2 {
	background-color: #d1d1ff;
}

tr.even.gradeC td.sorting_1 {
	background-color: #d5d5ff;
}

tr.even.gradeC td.sorting_2 {
	background-color: #e2e2ff;
}

tr.odd.gradeX td.sorting_1 {
	background-color: #ffc4c4;
}

tr.odd.gradeX td.sorting_2 {
	background-color: #ffd1d1;
}

tr.even.gradeX td.sorting_1 {
	background-color: #ffd5d5;
}

tr.even.gradeX td.sorting_2 {
	background-color: #ffe2e2;
}

tr.odd.gradeU td.sorting_1 {
	background-color: #c4c4c4;
}

tr.odd.gradeU td.sorting_2 {
	background-color: #d1d1d1;
}

tr.even.gradeU td.sorting_1 {
	background-color: #d5d5d5;
}

tr.even.gradeU td.sorting_2 {
	background-color: #e2e2e2;
}


/*
 * Row highlighting example
 */
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
	background-color: #ECFFB3;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
	background-color: #E6FF99;
}

/* tooltip styling */

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
    background: url('images/white_arrow.png');
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#000;	
}


 
/* style the trigger elements */
#dyna img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

/* override the arrow image of the tooltip */
.tooltip.bottom {
	 background: url('images/white_arrow_bottom.png');
	padding-top:40px;
	height:55px;
}
 
.tooltip.bottom {
	 background: url('images/white_arrow_bottom.png');
}
	
	
    .tooltips {
	    display:none;
	  
	    height:122px;
	    padding : 0px 0px 0px 0px;
	    width:209px;
	    font-size:11px;
	    color:#000;
    }
  

    /* a .label element inside tooltip */
    .tooltip .label {
	    color:yellow;
	    width:35px;
    }

    .tooltip a {
	    color:#ad4;
	    font-size:11px;
	    font-weight:bold;
    }
    
   .tooltipsss {
            background-color:#000;
            border:1px solid #fff;
            padding:10px 15px;
            width:200px;
            display:none;
            color:#fff;
            text-align:left;
            font-size:12px;

             /*outline radius for mozilla/firefox only */
            -moz-box-shadow:0 0 10px #000;
            -webkit-box-shadow:0 0 10px #000;
            }
    
    /* trigger button */
#emstooltip 

{
    background:transparent url(images/images/employee.png) no-repeat scroll 0 0;

	background-position: 0 -749px; width: 57px; height: 57px;
	display:block;
	height:44px;
	margin-bottom:30px;
	overflow:hidden;
	text-indent:-999em;
	width:159px;
	cursor:pointer;
}

/* mouseover state */
#emstooltip:hover {
	background-position:0 -44px ;		
}

/* clicked state */
#emstooltip:focus {
	background-position:0 -88px;
}



.WrapperDiv 
{
    width:800px;
    height:400px;border: 1px solid #ffcc66;
}
        
.WrapperDiv TH 
{
    position:relative;
}

.WrapperDiv TR 
{
    /* Needed for IE */
    height:0px;
}