/*****************************************************/
/*         PMO - Public Service Commission       								     */
/*                    15 Nov 2006                   										     */
/*****************************************************/

/* 
 * separate sections for print media, to make preview part 1,2,3 
 * more printer-friendly
 */

@media screen {

	#succContentA {
	  PADDING-RIGHT: 10px; 
	  PADDING-LEFT: 10px; 
	  BACKGROUND: #fff; 
	  PADDING-BOTTOM: 10px; 
	  MARGIN: 0px 30px 10px; 
	  WIDTH: 870px; 
	  PADDING-TOP: 10px
	}
	
	/* To center whole page */
	#maincontainer {
	  margin: 0 auto;
	  width: 980px;
	  text-align: left;
	}

}

@media print {
	#maincontainer {
		zoom:60%;
	}
	#singov { 
		display: none;
	}
	#succTop {
		display: none;
	}
	#succTop2 {
		display: none;
	}
	.hideFromPrint { 
		display: none;
	}
	.pageBreak {
		page-break-before: always
	}
	#succContentA {
	  PADDING-RIGHT: 0px; 
	  PADDING-LEFT: 0px; 
	  BACKGROUND: #fff; 
	  PADDING-BOTTOM: 0px; 
	  MARGIN: 0px 0px 0px; 
	  PADDING-TOP: 0px
	}
	table {page-break-inside: avoid;}

}

/* General */
body  { color: #333333; }

/* To remove unwanted horizontal scrollbar even when content is smaller than screen */
html {
	overflow-x:hidden;
	overflow-y:auto;
}

img { border:none; }
/* General text all use Arial */
td, p, div, .textbold, .textsmall, .texttitle, .textwarning
	{ font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif; } 
/* General text */
td, p, div { font-size: small; color: #000; } 
blockquote { padding: 0; margin: 5px 15px 10px 15px;}
h1 {font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
	font-size: 200%;
	font-weight: bold;
	color: #000066;
	margin: 10px 0 3px 0;
	letter-spacing: -1px;
	}
h2 {font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
	font-size: 160%;
	font-weight: bold;
	color: #000066;
	margin: 10px 0 3px 0;
	letter-spacing: -1px; 
	}
h3.h3orange { 
	font: bold 130% Helvetica, Arial, Verdana, Tahoma, sans-serif;
	color: #FF6600;
	letter-spacing: -1px; margin: 10px 0 3px 0}
h4 {font: bolder 120% Helvetica, Arial, Verdana, Tahoma, sans-serif;
	color: #FF6600;
	margin: 0 0 5px 0;letter-spacing: -1px;
	}
h5 {font: bold 100% Verdana, Arial, Helvetica, Tahoma, sans-serif;
	color: #6aa6ff;
	margin: 0 0 0 0;
	}
p {margin: 0.3em 0}

hr {border: none; width: 100%; height: 1px; background: #cae6f5; color:#cae6f5;}

img.bullet { margin: 0 10px; }

.textbold
	{ font-size: small; color: #000; font-weight: bold; }

.textsmall
    { font-size: x-small; color: #006666; } 

.texttitle
    { font-size: medium; font-weight: bold; color: #000;}

.textwarning
    { font-size: 12px; color: #FF0000; font-weight: bold; } 
	
.textreminder
    { font-size: 12px; color: #FF6600; font-weight: bold; }
	
.texthint  {  font-size: 12px; color: #666666; }

.asterix
    { font-size: 120%; color: #FF0000; font-weight: bold; }
a.textlink {
	font-size: small; color: #ff6600;text-decoration: none;font-weight:bold; border-bottom: 1px dotted;
}
a:hover.textlink {
	font-size: small;
	text-decoration: none;
	color: #fff;
	background-color: #ff9900; border-bottom: 1px solid;
}
a.textlink2 {
	font-size: small; color: #000;text-decoration: none;font-weight:normal; border-bottom: 1px dotted;
}
a:hover.textlink2 {
	font-size: small;
	text-decoration: none;
	color: #fff;
	background-color: #ff9900; border-bottom: 1px solid;
}
a.textlink3 {
	font-size: small; color: #000;text-decoration: none;font-weight:bold; border-bottom: 1px dotted;
}
a:hover.textlink3 {
	font-size: small;
	text-decoration: none;
	color: #fff;
	background-color: #ff9900; border-bottom: 1px solid;
}
a.smlink {
	font-size: x-small; color: #FF6600; text-decoration: none; font-weight:bold; border-bottom: 1px dotted;
}
a:hover.smlink {
	font-size: x-small; color: #FF9933; text-decoration: none; border-bottom: 1px solid; background: #f0f0f0;
}
.footer { font-size: x-small; color:#fff; padding: 3px 10px 3px 10px; }
.footer a { font-size: x-small; color:#fff; text-decoration: underline;}
.footer a:hover { color:#ccc; text-decoration: none;}

.top {padding: 5px 20px; text-align:right;}

.top a { font: bold 10px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #3399ff; text-decoration: none; 
}
.top a:hover { color: #7dbeff; text-decoration: none; border-bottom: 1px solid; background: #f0f6ff;
}
#singov { width: 960px; text-align:right}
#masthead { margin: 0 20px; }
#masthead td { font: normal 12px Arial, Helvetica, sans-serif; color: #fff; }
#masthead a { font: normal 12px Arial, Helvetica, sans-serif; color: #fff; text-decoration: underline}
#masthead a:hover { color:#ccc; text-decoration:none}
#main { width: 970px; background: url('../images/main_bg.jpg') repeat-y;}
#contentTitle { width: 504px; height:31px; background: #464646 url('../images/homeTitle_bg.gif') no-repeat top; padding: 0}
#contentTitle .title { padding: 5px 0 0 15px; font: bold 16px Helvetica, Arial, sans-serif; color: #fff;  }
#contentArea { width: 504px; background: #fff; padding: 0;}
#content { margin: 10px; font: normal 12px Arial, Helvetica, sans-serif; color: #000;background: #fff; }

#login { width: 211px; height: 540px; background: #464646 url('../images/login_bg.gif') no-repeat top; }
#login a {font: normal 11px Arial, Helvetica, sans-serif; color: #000; text-decoration: underline}
#login a:hover { color:#666; text-decoration:none}
#login table.outer{
	width: 190px;
	table-layout:fixed;
	empty-cells:show;
	border-collapse:collapse; margin: 0 10px;
	}
#login th {
	background-image: url('../images/login_titlebg.gif');
	background-repeat:no-repeat;
	color: #000; text-align: left; letter-spacing: -1px; font-style:normal; font-variant:normal; font-weight:bold; font-size:120%; font-family:Helvetica, Arial, sans-serif; padding-left:8px; padding-right:8px; padding-top:3px; padding-bottom:3px
	}
#login td {
	padding: 3px 5px 3px 8px;
	vertical-align:top;
	font-size: 11px;
	color: #000; background-color: #face23;
}
#login td.inner {
	padding: 3px 2px 3px 2px;
	vertical-align:top;
	font-size: 11px;
	color: #000; background-color: #face23;}
#login input { width: 100px;}
#login td.divider {background: #face23 url('../images/login_div.gif') no-repeat;  }
#login td.footer {background: url('../images/login_bottom.gif') no-repeat;  }

#processTitle { width: 238px; height: 39px; background: url('../images/processTitle_bg.gif') no-repeat top; padding: 0}
#processTitleP { padding: 18px 5px 0 20px;
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #000; text-align: left; }
#process { width:219px; background: url('../images/processBox_bg.gif') repeat-y; padding-left:19px; padding-right:0; padding-top:0; padding-bottom:0  }
#processEnd { width:238px; background: url('../images/processBox_bottom.gif') no-repeat top; padding: 0 }
#process table {
	width: 184px;
	table-layout:fixed;
	empty-cells:show;
	border-collapse:collapse; margin: 0 0 0 0;
	}

#process td.processHead p {
	margin: 5px 5px 0 40px;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000; text-align: left; 
	}
#process td.processContent {
	background: url('../images/process_bg.gif') repeat-y;
	color: #000; text-align: left; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:Arial, Helvetica, sans-serif; padding-left:30px; padding-right:5px; padding-top:3px; padding-bottom:3px 
	}
#process td.processFooter {
	background: url('../images/process_bottom.gif') no-repeat; height: 10px}
#process td.processArrow {
	background: url('../images/process_arrow.gif') no-repeat center; height:42px}

/* Application Form */
#appl { width: 210px;}

#appl table.outer{
	width: 190px;
	table-layout:fixed;
	empty-cells:show;
	border-collapse:collapse; margin: 0 10px;
	}
#appl th {
	background-image: url('../images/applTitle_bg.gif');
	background-repeat:no-repeat;
	 text-align: left; height:32px
	}
 td.applbg { background:  url('../images/appl_bg.gif') repeat-y;}
#appl .title { padding: 3px 8px 3px 19px;
	font: bold 120% Helvetica, Arial, sans-serif;
	color: #000;letter-spacing: -1px; }
#appl td.section {color: #000; text-align: left; letter-spacing: -1px; background:  url('../images/applSection_bg.gif') repeat-y;font-style:normal; font-variant:normal; font-weight:bold; font-size:120%; font-family:Helvetica, Arial, sans-serif; padding-left:18px; padding-right:8px; padding-top:3px; padding-bottom:3px}
#appl td.title {color: #000; background:  url('../images/appl_bg.gif') repeat-y; ;text-align: left; font-style:normal; font-variant:normal; font-weight:bold; font-size:small; font-family:Arial, Helvetica, sans-serif; padding-left:18px; padding-right:8px; padding-top:3px; padding-bottom:3px }
#appl td.toc {color: #000; background:  url('../images/appl_bg.gif') repeat-y; text-align: right; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:Arial, Helvetica, sans-serif; padding-left:18px; padding-right:0; padding-top:2px; padding-bottom:2px }
#appl td.other {color: #000; background:  url('../images/appl_bg.gif') repeat-y; text-align: center; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:Arial, Helvetica, sans-serif; padding-left:18px; padding-right:0; padding-top:5px; padding-bottom:3px }
#appl ul {
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 15px; }
#appl li {
	padding: .3em 1.4em .4em 2.0em; text-align: left; 
}
#appl li.done {
	background: #fff url('../images/tick2.gif') no-repeat 0.6em 0.7em;
	/* set position from horz, vert*/
	text-align: left; padding-left:2.0em; padding-right:1.4em; padding-top:.5em; padding-bottom:.4em 
}
#appl li.menuSelected {
	background: #fff  no-repeat 0.6em 0.7em;
	/* set position from horz, vert*/
	text-align: left; padding-left:2.0em; padding-right:1.4em; padding-top:.5em; padding-bottom:.4em 
}
#appl li.menuCompleted {
	background: url('../images/tick1.gif') no-repeat  0.6em 0.7em;
	text-align: left ; padding-left:2.0em; padding-right:1.4em; padding-top:.5em; padding-bottom:.4em 
}
#appl a {display: block;font: normal 12px Arial, Helvetica, sans-serif; color: #000; text-decoration: underline;}
#appl a:hover { color:#666; text-decoration:none; }
#appl td.divider {background: url('../images/appl_div.gif') no-repeat;  }

#partTop1 {background: #face23 url('../images/partTitle_bg.gif') no-repeat; height: 29px; font-weight: bold}
#partTop2 {background: #face23 url('../images/partTitle_bg2.gif') no-repeat;  height: 32px }
#partTop2T { font: bold 120% Helvetica, Arial, sans-serif; letter-spacing:-1px; padding: 8px 0 0 15px;}
#partTop1 input.logout { margin: 0px 0 0px 0;}
#partContentBg {background: #fff url('../images/part_bg.gif') repeat-y; }
#partContentBg p { font-size:11px; margin: 0 15px}
#partContent { padding: 5px 15px;}
#partContentTitle {background: url('../images/partSection_bg.gif') no-repeat; height: 20px; font-weight: bold; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}
#partContentTitleNoBold {background: url('../images/partSection_bg.gif') no-repeat; height: 20px; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}
#partContentBg table.particular { border-left: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3;}
#partContentBg table.particularFull { border-left: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3;border-top: 1px solid #C3C3C3; border-bottom: 1px solid #C3C3C3;}
#partContentBg table.particularEnd { border-left: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3; border-bottom: 1px solid #C3C3C3;}
#partContentBg td.label { padding: 3px 3px 8px 15px;  font-weight: bold;}
#partContentBg td.label2 { padding: 3px 3px 8px 3px;  font-weight: bold;}
#partContentBg td.labelsmall { padding: 3px 3px 8px 15px;}
#partContentBg td.data1 { padding: 3px 3px 8px 3px; }
#partContentBg td.section { background-color:#DBDBDB; height: 20px;  font-weight: bold; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}

/* This following is used by the preview edit popup*/
#partContentBg2 p { font-size:11px;}
#partContent2 { }
#partContentTitle2 {background: url('../images/partSection_bg.gif') no-repeat; height: 20px; font-weight: bold; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}
#partContentTitleNoBold2 {background: url('../images/partSection_bg.gif') no-repeat; height: 20px; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}
#partContentBg2 table.particular { border-left: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3;}
#partContentBg2 table.particularFull { border-left: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3;border-top: 1px solid #C3C3C3; border-bottom: 1px solid #C3C3C3;}
#partContentBg2 table.particularEnd { border-left: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3; border-bottom: 1px solid #C3C3C3;}
#partContentBg2 td.label { padding: 3px 3px 8px 15px;  font-weight: bold;}
#partContentBg2 td.label2 { padding: 3px 3px 8px 3px;  font-weight: bold;}
#partContentBg2 td.labelsmall { padding: 3px 3px 8px 15px;}
#partContentBg2 td.data1 { padding: 3px 3px 8px 3px; }
#partContentBg2 td.section { background-color:#DBDBDB; height: 20px;  font-weight: bold; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}


/* Form Submitted Succcssful */
#succTop { width: 953px; background: url('../images/succTitle_bg.gif') no-repeat; height: 33px }
#succTop2 { width: 953px; background: url('../images/succTitle_bg2.gif') no-repeat; height: 21px }
#succContentBg { width: 953px; background: url('../images/succ_bg.gif') repeat-y; }
#succContent { width: 870px; background: #fff; border: 1px solid #c3c3c3;  margin: 0 30px 10px 30px; padding: 10px; }
#succNext { width: 870px; background: #fff; margin: 0 30px 10px 30px; padding: 10px; }
#succEnd {  width: 953px; background: url('../images/succEnd.gif') no-repeat; height: 25px }

input.widebutton { /*to eliminate excessive width*/
    padding: 0 1em;
    width: 1px;
    overflow:visible;
}
input.widebutton[class] { /*ie ignores [class]*/
    width: auto;
}

/* New User Registeration */
#userRegTitle {width: 944px; background: url('../images/userRegTitle_bg.gif') no-repeat; height: 26px; color: #fff;  letter-spacing: 0px; font-style:normal; font-variant:normal; font-weight:bold; font-size:120%; font-family:Helvetica, Arial, sans-serif; margin-left:10px; margin-right:0; margin-top:0; margin-bottom:0; padding-left:10px; padding-right:0; padding-top:5px; padding-bottom:0 }
#userReg { width: 924px; background: #fff; margin: 0 10px; padding: 10px}
#userRegBorder  { width: 904px; border-bottom: 1px solid #C3C3C3; font-weight: bold; height: 20px; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}
#userRegSection { width: 904px; background: url('../images/userRegSection_bg.gif') no-repeat; font-weight: bold; height: 20px; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0}
#userRegContent { width: 902px; border-left: 1px solid #C3C3C3;  border-right: 1px solid #C3C3C3; border-bottom: 1px solid #C3C3C3;
padding: 10px;}
#userReg ul { list-style-type: square;}
#userRegNext { width: 924px; background: #fff; margin: 0 10px; padding: 10px 10px 40px 10px}

/* Forgot Password */
#forgot { width: 400px; background: #464646; padding: 0 0 0 10px}
#forgot th.forgotTitle { background: url('../images/forgotTitle_bg.gif') no-repeat; height: 27px; color: #000; text-align: left; letter-spacing: -1px; font-style:normal; font-variant:normal; font-weight:bold; font-size:120%; font-family:Helvetica, Arial, sans-serif; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0 	}
#forgot td.forgotLabel { background: #fff; padding: 5px; }
#forgot td.forgotEnd { background: url('../images/forgotEnd_bg.gif') no-repeat; height: 50px}