body 
{
	margin              : 0px;
	padding             : 0px;
	color               : #333;
	background-color    : #FFF;
	font-size           : 11px;
	font-family         : Arial, Helvetica, sans-serif;
}

td {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000000;
}

a
{
	text-decoration     :none;
}

p 
{
	font-family         : Verdana, Arial, Helvetica, sans-serif;
	font-size           : 10px;
	color               : #000000;
}

.login 
{
	margin-left         : auto;
	margin-right        : auto;
	margin-top          : 7em;
	padding             : 10px;
	border              : 1px solid #cccccc;
	width               : 430px;
	background          : #F1F3F5;
}
	
.login h1 {
	background          : url(../images/login_header.png) no-repeat;
	background-position : left top;
	color               : #333;
	margin              : 0px;
	height              : 50px;
	padding             : 15px 4px 0 50px;
 	text-align          : left;
	font-size           : 1.5em;
}

.login p 
{
	padding             : 0 1em 0 1em;
}
  
.login-form 
{
	text-align          : left;
	float               : right;
	width               : 55%;
}

.login-text
{
	text-align          : right;
	width               : 40%;
	float               : left;
}

.form-block 
{
	border              : 1px solid #cccccc;
	background          : #E9ECEF;
	padding-top         : 15px;
	padding-left        : 10px;
	padding-bottom      : 10px;
	padding-right       : 10px;
}


.inputlabel 
{
	font-weight         : bold;
  text-align          : left;
}

.inputbox 
{
  background-color: #e7e7e6; 
  border: 1px solid #66667e;
  padding : 2px;
	/*width               : 150px;
	margin              : 0 0 1em 0;
	border              : 1px solid #cccccc;*/
}

.inputselect
{
	width               : 150px;
	margin              : 0 0 1em 0;
	border              : 1px solid #cccccc;
}

.ctr
{
	text-align          : center;
}


.clr 
{
  clear               : both;
}

.blueButton 
{
	border              : solid 1px #cccccc;
	background          : #E9ECEF;
	color               : #666666;
	font-weight         : bold;
	font-size           : 11px;
	padding             : 4px;
}

.commonButton
{
	border              : solid 1px #cccccc;
	background          : #E9ECEF;
	color               : #666666;
	font-weight         : bold;
	font-size           : 11px;
	padding             : 4px;
}

table.content
{
  width               : 100%;
  text-align          : left;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 9pt;
	background-color    : white;
	color               : black;
	padding-top         : 2px;
	padding-left        : 10px;
	padding-right       : 10px;
	padding-bottom      : 2px;
}

div.footer
{
    width               : 100%;
	height              : 15px;
    text-align          : left;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
	background-color    : #342d9d;
	color               : white;
}

td.bottomMenu
{
	text-align          : center;
  font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
	padding-left        : 4px;
	padding-right       : 4px;
  color               : white;
	cursor              : pointer;
}

td.bottomSeparator
{
  width               : 1px;
	background-image    : url(../images/separatorBottom.gif);
	background-repeat   : no-repeat;
	background-position : left;
	padding-left        : 0px;
	padding-right       : 0px;
}

td.bottomMenuHover
{
	text-align          : center;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
	background-color    : white;
	color               : #1e501a;
	padding-left        : 4px;
	padding-right       : 4px;
	cursor              : pointer;
}

div.footer div.footerPage
{
	background-color    : #342d9d;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
	padding-left        : 20px;
  width               : 82%;
  float               : left;

}


td.bottomCopyright
{
	text-align          : center;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 9px;
}

.master
{
  height             : 100%;
  width              : 100%;
}

.header
{
  height              : 40px;
}

.content
{
  clear               : both;
}

.footer
{
  height              : 20px;
}


#wrapper
{
  display             : table;
  height              : 100%;
  width               : 100%;
}

.pageHeaderTitle 
{
	background-color    : #FFFFFF;
	border-bottom       : 1px dotted #660000;
}

.pageHeaderTitle .pageHeaderTitleText 
{
	font-size           : 14px;
	font-weight         : bold;
	color               : #003399;
	font-family         : Arial, Helvetica, sans-serif;
	/*border-left         : 1px dotted #660000;*/
	text-transform      : uppercase;
  height              : 20px;
}
.pageHeaderTitle .blank 
{
  width               : 20px;
  height              : 20px;
  background-color    : #99CCFF;
}

.errMessage {
  color               : red;
  font-weight         : bold;
  font-size           : 12px;
  background-color    : white;
  border              : 1px solid red;  
}



.moduleSelected
{
  font-size           : 10px;
	color               : white;
	background-image    : url(../images/bgModuleSelected.gif);
	background-repeat   : no-repeat;
	background-position : top;
	height              : 22px;
	width               : 90px;
	text-align          : center;
	vertical-align      : top;
	padding-top         : 3px;
	cursor              : default;
}


td.moduleNormal
{
  font-size           : 10px;
	color               : #590900;
	background-image    : url(../images/bgModule.gif);
	background-repeat   : no-repeat;
	background-position : top;
	height              : 22px;
	width               : 90px;
	text-align          : center;
	vertical-align      : top;
	padding-top         : 3px;
	cursor              : pointer;
}

td.moduleNormalHover
{
  font-size           : 10px;
	color               : #590900;
	background-image    : url(../images/bgModuleHover.gif);
	background-repeat   : no-repeat;
	background-position : top;
	height              : 22px;
	width               : 90px;
	text-align          : center;
	vertical-align      : top;
	padding-top         : 3px;
	cursor              : pointer;
}


td.topMenuLeft
{
	height              : 18px;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
    font-weight         : bold;
	background-color    : black;
	color               : white;
	text-align          : right;
	padding-left        : 5px;
	padding-right       : 5px;
	cursor              : default;
	background-image    : url(../images/menuborderleft.gif);
	background-position : left;
	background-repeat   : no-repeat;
}

td.topMenu
{
	height              : 18px;
	text-align          : center;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
	background-color    : #cdcdcd;
	background-image    : url(../images/separator.gif);
	background-repeat   : no-repeat;
	background-position : right;
	color               : black;
  padding-left        : 4px;
  padding-right       : 4px;
	cursor              : pointer;
}

td.topMenuHover
{
	height              : 18px;
	text-align          : center;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
	background-color    : black;
	color               : white;
  padding-left        : 4px;
  padding-right       : 4px;
	cursor              : pointer;
}

td.topMenuRight
{
	height              : 18px;
	text-align          : center;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
	background-color    : #cdcdcd;
	color               : black;
	background-image    : url(../images/menuborderright.gif);
	background-position : right;
	background-repeat   : no-repeat;
  padding-left        : 4px;
  padding-right       : 4px;
	cursor              : pointer;
}

td.topMenuRightHover
{
	height              : 18px;
	text-align          : center;
	font-family         : Arial, Helvetica, sans-serif;
	font-size           : 11px;
	background-color    : black;
	color               : white;
	background-image    : url(../images/menuborderrighton.gif);
	background-position : right;
	background-repeat   : no-repeat;
  padding-left        : 4px;
  padding-right       : 4px;
	cursor              : pointer;
}




div#fixme 
{
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */ 
  left                : expression( ( document.body.clientWidth - 85 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top                 : expression( ( document.body.clientHeight - 19 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
  z-index             : 100;
}


#fixme 
{
  /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */ 
  position            : absolute;
  left                : 0px;
  top                 : 0px;
  z-index             : 100;
}


body > div#fixme 
{
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */ 
  position            : fixed;
}

.pageHeader1 {
	font-size: 16px;
	font-weight: bold;
	color: #3366CC;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #006699;
	text-decoration: none;
}
.pageHeader1 a{
	color: #3366CC;
	text-decoration: none;
}
.pageHeader2 {
	font-size: 10px;
	font-weight: normal;
	color: #3366CC;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #006699;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
}

.pageHeader4 {
	font-size: 12px;
	color: #ff8c8c;
	text-decoration: none;
  cursor:default;
}
.pageHeader4 a{
	color: #fa4b4b;
	text-decoration: none;
  cursor:pointer;
}
.pageHeader4 a:hover{
	color: #fa4b4b;
	text-decoration: underline;
  cursor:pointer;
}

.pageHeader5 {
	font-size: 9px;
	color: #840624;
	text-decoration: none;
}

.tableHeader {
  font-size : 11;
  font-weight: bold;
  color: #000066;
  background-color: #E2E2E2;
  text-align : center;
  font:"Courier New", Courier, monospace;
}

.gridTable 
{
  border-right        : 1px solid #777777;
  border-top          : 1px solid #777777;
}
.gridTable  td 
{
  border-bottom       : 1px solid #777777;
  border-left         : 1px solid #777777;
  font-family         : arial,verdana;
  font-weight         : normal;
  font-size           : 12px;
  padding-left        : 5px;
  padding-right       : 5px;
}

.gridTable th {
  background-color    : #CCCCCC;
  border-bottom       : 1px solid #777777;
  border-left         : 1px solid #777777;
  font-family         : arial,verdana;
  font-weight         : bold;
  font-size           : 12px;
  text-decoration     : none;
  color               : black;
  }


.gridTable tr:hover {
    background-color : #ffff66;
  }

.noGridTable {
  border: 0px;
}
.noGridTable  td {
  border: 0px;
}
.copyright {
  font-size: 9px;
  color: #999999;
}

.bgLate {
  background-color: #FFCC99;
}

.bgReadonly {
  background-color: gray;
}
  
/* buat catering */
.bgSeninKamis {
  background-color: #FFCC99;
}
.bgNoCatering {
  background-color: #00FF00;
}
.bgCatering{
  background-color: #FFFFF0;
}
.bgCateringAbsence {
  background-color: #009900;
  color:#FFFF00;
  font-weight:bold;
}
.bgAbsence {
  background-color: #FF3300;
}
.bgError {
  font-size: 12pt;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #FF0000;
  border: 1px solid #993300;
}
.bgOK {
  background-color: #006633;
  font-size: 12pt;
  color: #FFFF00;
  border: 1px solid #00CC00;
  font-weight: bold;

}
.inputBoxBottomLine {
  border-bottom: 1px solid #003399;

}
.bgDenied {
  background-color: #FFCC99;
}
.bgMutation{
  background-color:#3366CC;
}
.bgNewEmp {
  background-color:#6699FF;
}
.bgNewRevised {
  background-color: #FFFFCC;
}

.bgNewData {
  background-color: #66FFFF;
}
.bgCheckedData {
  background-color: #CCFF66;
}

.bgVerifiedData {
  background-color: #FFFF00;
}

.bgBlocked {
  background-color: #FF3300;
}

.formHeader { /* header buat formulir */
  font-weight: bold;
  font-size: 12pt;
  color: #000033;
  background-color: #E2E2E2;
}
.dateMsg{
  /*message error pas cek tanggal*/
  font-size: 12pt;
  color: #FF0000;
}

.footer{
  font-size: 8pt;
  color: #342d9d;
}

.footerText{
  font-size: 7pt;
  color: #003399;
}

.tblUp{
  background-color: #0066CC;
}

.inputArea {
  background-color: #C3D9FF;
  border: 1px solid #003399;
  }

div.backtotop
{
  background : url('../images/backtotop.png') no-repeat;
  width : 85px;
  height : 19px;
  color : #1e501a;
}

.headerSection{
  font-weight: bold;
  color: #267128;
  background-color: #DCF5D6;
}
.headerDepartemen{
  font-weight: bold;
  background-color: #83E785;
}
.totalSection {
  font-weight: bold;
  /*background-color: #DCF5D6;*/
}
.totalDepartemen {
  font-weight: bold;
  /*background-color: #83E785;*/
}


div.formMessage
{
  font-family         : Arial,verdana, helvetica;
  font-size           : 10px;
  font-weight         : bold;
  background-color    : #00CC00;
  color               : #ffffff;
  border              : 1px solid #337733;
  vertical-align      : middle;
  text-align          : left;
  padding             : 2px;
}

.logoLeft
{
  background          : url('../images/logo2.png') no-repeat;
  background-position : center;
  padding-left        : 75px;
}

.logoTop
{
  background-position : bottom right;
}

td.tabPageActive
{
	background-color: #EBEBEB;
	border-top : 1px solid #333333;
	border-left : 1px solid #333333;
	border-right : 1px solid #333333;
  padding-left : 5px;
  padding-right : 5px;
  padding-top : 3px;
  padding-bottom : 3px;
  font-weight : bold;
  font-size : 9pt;
  white-space : nowrap;
  -moz-border-radius-topleft : 5px;
  -webkit-border-radius-topleft : 5px;
  -moz-border-radius-topright : 5px;
  -webkit-border-radius-topright : 5px;
}

td.tabPage
{
	background-color: #fbfbfb;
	border-top : 1px solid #333333;
	border-left : 1px solid #333333;
	border-right : 1px solid #333333;
  padding-left : 5px;
  padding-right : 5px;
  padding-top : 3px;
  padding-bottom : 3px;
  font-weight : bold;
  font-size : 9pt;
  white-space : nowrap;
  -moz-border-radius-topleft : 5px;
  -webkit-border-radius-topleft : 5px;
  -moz-border-radius-topright : 5px;
  -webkit-border-radius-topright : 5px;
}

td.tabPage:hover
{
	background-color: #aaa;
}

td.tabPage a
{
  color : navy;
  text-decoration : none;
}

td.tabPage a:hover
{
  color : red;
  text-decoration : none;
}

input.numeric
{
  text-align: right;
  border              : 1px solid #a5acb2;
}


input.browse {
  border-top-style    : solid;
  border-top-width    : 1px;
  border-top-color    : #C3C3C3;
  border-left-style   : solid;
  border-left-width   : 1px;
  border-left-color   : #C3C3C3;
  border-bottom-style : solid;
  border-bottom-width : 1px;
  border-bottom-color : #303030;
  border-right-style  : solid;
  border-right-width  : 1px;
  border-right-color  : #303030;
}

a.browse {
	font-family         : Arial, Helvetica, sans-serif;
	font-weight         : normal;
	font-size           : 11px;
	height              : 18px;
	color               : #333;
  -moz-border-radius-topleft : 4px;
  -webkit-border-radius-topleft : 4px;
  -moz-border-radius-topright : 4px;
  -webkit-border-radius-topright : 4px;
  -moz-border-radius-bottomleft : 4px;
  -webkit-border-radius-bottomleft : 4px;
  -moz-border-radius-bottomright : 4px;
  -webkit-border-radius-bottomright : 4px;  
  
	border-top          : 1px solid #696969;
	border-bottom       : 1px solid #949494;
	border-left         : 1px solid #696969;
	border-right        : 1px solid #949494;
  background-color    : transparent;
  background-image    : url("../includes/form2/css/aqua/button_bg.gif");
  background-repeat   : repeat-x;
  vertical-align      : middle;
  margin              : 0px 0px 0px 0px;
  padding             : 0px 3px 0px 3px;  
}


input.buttonBrowse
{
	background-image    : url(../images/buttonSearch.gif);
	background-position : center;
	background-repeat   : no-repeat;
	background-color    : transparent;
	border              : 0px;
	padding             : 0px 0px 0px 0px;
  width               : 25px;
	cursor              : pointer;
}

input.buttonSearch
{
	background-image    : url(../images/buttonSearch.gif);
	background-position : center;
	background-repeat   : no-repeat;
	background-color    : transparent;
	border              : 0px;
	padding             : 0px 0px 0px 0px;
  width               : 25px;
	cursor              : pointer;
}