/* Sistem Permohonan Jawatan Kosong Online Style  */

body
{
	margin: 0;
	padding: 0;
	font: bold 11px/1.5em Verdana;
}
h1
{
	font-family: Arial;
	text-align: justify;
	vertical-align: middle;
	font-size: 8pt;
	color: #000000;
}
h2
{
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	margin: 0px;
	padding: 0px 0px 0px 15px;
}
font
{
	font-family: Arial;
	font-size: 8pt;
	color: #000000;
}

/* Attribute Style  */

.lable
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #000000;
	text-align: right;
	vertical-align: top;
	background-color: Transparent;
}
.lablecol
{
	background-color: #FFFFFF;
	text-align: right;
	font-family: Arial;
	font-size: 9pt;
	color: #000099;
}
.keyin
{
	font-family: Verdana, Sans-Serif, Arial, Helvetica;
	font-size: 9pt;
	text-align: left;
	vertical-align: middle;
	padding: 1px;
}
.keyinLeft
{
	font-family: Verdana, Sans-Serif, Arial, Helvetica;
	font-size: 9pt;
	text-align: left;
	vertical-align: middle;
	padding: 1px;
	text-transform: uppercase;
}
.keyinRight
{
	font-family: Verdana, Sans-Serif, Arial, Helvetica;
	font-size: 9pt;
	text-align: right;
	vertical-align: middle;
	padding: 1px;
	text-transform: uppercase;
}
.button
{
	font-family: Arial;
	font-size: 93%;
	color: #463E3F;
	padding: 1px 10px;
	font-weight: bold;
	margin: 2px;
	text-transform: capitalize;
}
.buttonRow
{
	font-family: Arial;
	font-size: 93%;
	color: #463E3F;
	padding: 1px;
	font-weight: bold;
	margin: 2px;
	width: 70px;
	text-transform: capitalize;
}

/* Table Header Style */

.tableStyle
{
	width: 100%;
	font-family: Arial;
	font-size: 9pt;
}
.tableHead
{
	font-family: Arial;
	height: 25px;
	padding: 10px 0 0 10px;
	background: url(../images/greenheader.gif) #99ff33 left top;
	font-size: 9pt;
}
.gridCellHead
{
	font-family: Arial;
	font-size: 8pt;
	color: #000000;
	background-color: #D8F6DF;
	text-align: left;
	vertical-align: middle;
}
.gridCellLabel
{
	padding: 0 15px;
	text-align: right;
	width: 22%;
}
.gridCellText
{
	padding: 0 5px;
	text-align: Left;
	width: 78%;
}
.tableSubHead
{
	font-family: Arial;
	height: 25px;
	padding: 10px 0 0 10px;
	background: url(../images/blueheader.gif) #66ccff left top;
	font-size: 8pt;
	text-align: center;
}
.tableSubHead2
{
	font-family: Arial;
	height: 25px;
	padding: 10px 0 0 10px;
	background: url(../images/greenheader.gif) #99ff33 repeat left top;
	font-size: 8pt;
	text-align: center;
}
.gridCellSub
{
	font-family: Arial;
	font-size: 8pt;
	color: #000000;
	background-color: #E0FFFF;
	text-align: left;
	vertical-align: middle;
}
.gridCellNumber
{
	font-family: Arial;
	font-size: 8pt;
	color: #000000;
	background-color: #E0FFFF;
	text-align: center;
	vertical-align: middle;
}
.gridCellSubMid
{
	font-family: Arial;
	font-size: 8pt;
	color: #000000;
	background-color: #E0FFFF;
	text-align: center;
	vertical-align: middle;
}
.directbar
{
	height: 80px;
	width: 800px;
	text-align: justify;
	background: url(../images/directbar.jpg) no-repeat;
}

/* Table Report Style */

.tableReport
{
	background-color: Silver;
}
.gridHeadReport
{
	font-family: Arial;
	font-size: 9pt;
	color: #000000;
	background-color: #E0FFFF;
	vertical-align: middle;
	text-align: center;
}
.gridCellReport
{
	font-family: Arial;
	font-size: 8pt;
	color: #000000;
	background-color: #FFFFFF;
	vertical-align: middle;
}


/* Table Footer Style */

.tableFooter
{
	height: 25px;
	background: url(../images/greyheader.gif);
	text-align: center;
}
.tableSubFooter
{
	height: 25px;
	background: url(../images/greyheader.gif);
	text-align: left;
}


/* Frame and Banner Style  */

#container
{
	width: 1000px;
	margin: 0 auto;
	height: auto;
}
#masterHead
{
	width: 100%;
	text-align: left;
	height: 120px;
}
#imgHeader
{
	width: 100%;
	height: 120px;
	margin: 0;
	background: #00CCFF url(../images/banner/banner.jpg);
}

/* Background Style */

#loginbg
{
	width: 100%;
	height: 300px;
	margin: 0;
	background: #00CCFF url(../images/loginbg.jpg) repeat;
}
#logincontain
{
	width: 60%;
	margin: 50px auto;
	background: #FFFFFF;
}

/* Content Style  */

#masterContent
{
	background: #ADDFFF;
	padding: 20px 0;
}
#content
{
	width: 80%;
	margin: 0 auto;
	background: #FFFFFF;
}
#menucontent
{
	background: #000000;
}

/* Footer Style */

#masterFooter
{
	background: buttonshadow;
	font-family: Arial;
	color: white;
	height: 34px;
	text-align: center;
	letter-spacing: normal;
	vertical-align: middle;
}


/* Menu Tab Styles */

#tabs
{
	float: left;
	width: 100%;
	background: #efefef;
	font-size: 93%;
	line-height: normal;
	border-bottom: 1px solid #666;
}
#tabs ul
{
	margin: 0;
	padding: 3px 10px 0 25px;
	list-style: none;
}
#tabs li
{
	display: inline;
	margin: 0;
	padding: 0;
}
#tabs a
{
	float: left;
	background: url(../images/tableft.gif) no-repeat left top;
	margin: 0;
	padding: 0 0 0 4px;
	text-decoration: none;
}
#tabs a span
{
	float: left;
	display: block;
	background: url(../images/tabright.gif) no-repeat right top;
	padding: 5px 10px 4px 6px;
	color: #666;
}
#tabs a span
{
	float: none;
}
#tabs a:hover span
{
	color: #FFF;
}
#tabs a:hover
{
	background-position: 0% -42px;
}
#tabs a:hover span
{
	background-position: 100% -42px;
}
#tabs #current a
{
	background-position: 0% -42px;
}
#tabs #current a span
{
	background-position: 100% -42px;
}


/* Div Header Style */

.header
{
	margin: 0 auto;
	padding: 10px 0;
	background: #ADDFFF;
}
.header .mainheader
{
	clear: both;
	height: 28px;
	background: #40C1D4 url(../images/blueheader.gif);
	color: #FFFFFF;
}
.header .mainheader p
{
	margin: 0;
	padding: 0 10px;
	line-height: inherit;
}
.header .mainheader .leftheader
{
	float: left;
	padding-top: 28px;
	background: url(../images/clb.gif) no-repeat left top;
}
.header .mainheader .rightheader
{
	float: right;
	padding-top: 28px;
	background: url(../images/crb.gif) no-repeat right top;
}
.header .mainheader .textheader
{
	margin: 8px;
}
.header .maincontent
{
	background: #FFFFFF;
}
.header .mainheader2
{
	clear: both;
	height: 28px;
	background: #99ff33 url(../images/greenheader.gif);
	color: #FFFFFF;
}
.header .mainheader2 p
{
	margin: 0;
	padding: 0 10px;
	line-height: inherit;
}
.header .mainheader2 .leftheader
{
	float: left;
	padding-top: 28px;
	background: url(../images/clg.gif) no-repeat left top;
}
.header .mainheader2 .rightheader
{
	float: right;
	padding-top: 28px;
	background: url(../images/crg.gif) no-repeat right top;
}
.header .mainheader2 .textheader
{
	margin: 8px;
}
.header .mainheader3
{
	clear: both;
	height: 32px;
	background: url(../images/orangeheader.gif) #ff9933;
	color: #FFFFFF;
}
.header .mainheader3 p
{
	margin: 0;
	padding: 0 10px;
	line-height: inherit;
}
.header .mainheader3 .leftheader
{
	float: left;
	padding-top: 28px;
	background: url(../images/clo.gif) no-repeat left top;
}
.header .mainheader3 .rightheader
{
	float: right;
	padding-top: 28px;
	background: url(../images/cro.gif) no-repeat right top;
}
.header .mainheader3 .textheader
{
	margin: 8px;
}

/* Watermarked Style */

.watermarked
{
	border: 1px solid #BEBEBE;
	background-color: #FFF8C6;
	color: gray;
}

/* Indicator Password */

.barIndicator
{
	border-style: solid;
	border-width: 1px;
	max-height: 10px;
	width: 80px;
	padding: 1px;
}
.barIndicatorWeak
{
	max-height: 10px;
	background: #F6358A;
}
.barIndicatorAverage
{
	max-height: 10px;
	background: #FF0000;
}
.barIndicatorGood
{
	max-height: 10px;
	background: #E41B17;
}

/* Link Menu */

.menuLink
{
	padding-left: 32px;
	margin-top: .3em;
	height: 34px;
	width: 208px;
	background: #e0ffff url(../images/titlebar.gif) no-repeat;
}
.menuInfo
{
	padding: 20px 20px;
	text-align: left;
	vertical-align: text-top;
	background: #D8F6DF url(../images/ibg.gif) repeat;
}

/* Logout Button */

#tabs2
{
	float: right;
	width: 100%;
	font-size: 93%;
	line-height: normal;
}
#tabs2 ul
{
	margin: 0;
	padding: 0 10px 0 50px;
	list-style: none;
}
#tabs2 li
{
	display: inline;
	margin: 0;
	padding: 0;
}
#tabs2 a
{
	float: right;
	background: url(../images/tableftrotate.gif) no-repeat right bottom;
	margin: 0;
	padding: 0 4px 0 0;
	text-decoration: none;
}
#tabs2 a span
{
	float: right;
	display: block;
	background: url(../images/tabrightrotate.gif) no-repeat left bottom;
	padding: 4px 6px 5px 10px;
	color: #666;
}
#tabs2 a span
{
	float: none;
}
#tabs2 a:hover span
{
	color: #ff0000;
}
#tabs2 a:hover
{
	background-position: 100% -20px;
}
#tabs2 a:hover span
{
	background-position: 0% -21px;
}