/*###################################

#####################################*/

/* --Header User Control-- */

/* light blue line on top of table */
.colorline {
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	background-position: right top;
	border-bottom: 4px solid #80B5D7;
}

/* dark blue line on top of table */
.colorline2{
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	background-position: right top;
	border-bottom: 25px solid #3872B2;
}

.colorline-pagetop {
	position: relative;
	width: 100%;
	height: 20px;
	background: url(../images/head_template_corner.jpg.jpg) #30569D no-repeat;
	background-position: top left;
	margin: 0px;
	padding: 0px;	
}

.colorline-pagetop-text {
	font-family : Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size : 14px;
	font-weight: bold;
	text-align: left;
	vertical-align:middle;
	background-position: center;
}


/* header sub application functions css */
.subappfunction {
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #ffffff;
	background-color: #F1F3F5;
	width:100%;
	height:auto;
	vertical-align:middle;
}

.subappfunction-link 
{
	font-size:11px;
	font-weight: bold;
	text-decoration:underline;
	vertical-align:middle;
}

.subappfunction-sep
{
	font-size:10px;
	vertical-align:middle;
}

.breadcrumb 
{
	font-size:11px;
	font-weight:normal;
	padding:0px 0px, 0px, 0px;
	text-decoration:underline;
	color:#3872B2;;
	vertical-align:middle;
}

.breadcrumb-seperator
{
	font-size:10px;
	font-family: Verdana;
	vertical-align:middle;
}

/* Active Intranet logo background */
#activeintranet {
	position: relative;
	width: 100%;
	background: url(../images/head_template_corner.jpg.jpg) #30569D no-repeat;
	background-position: top left;
	margin: 0px;
	padding: 0px;
}

/* Module Grouping Menu  Area */
.dropdownmenu {
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #ffffff;
	background-color: #F1F3F5;
	width:100%;
	height:auto;
}

/* --Footer User Control-- */
.copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	color: #696969;
	text-decoration: none;
}

/* --Body section-- */
BODY {
	margin: 0px 0px 0px 0px;
	color : #333;
	background-color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.footnote 
{
	color : #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px; 
}

/* start page css */
.startpage-table
{
	border:0;
	padding : 2px 5px 5px 5px;
	width : 100%;
}

.startpage-table tr
{
	text-align:center;
}

.startpagefunction 
{
    text-align:left;
    vertical-align:top;
    font-size:13px;
    font-weight:bold;
    margin:5px;
}

.startpagefunctiondesc
{
    text-align:left;
    vertical-align:top;
    font-size:11px;
    font-weight:normal;
    margin:5px;
}

.startpageicon 
{
    vertical-align:middle;
    text-align:center;
    margin:6px;
    width:40px;
}

.startpage-module-table 
{
    width:100%;
	border:5;
}

.startpage-module-table td 
{
    text-align:left;
}

/* Main Table encapsulating all the contents after header user control*/
table.contentarea {
    width: 98%;
	border: 1px solid #ccc;
    margin-bottom: 5px;
    padding: 1px 1px 1px 1px;
    background: #FFFFFF;
    filter:progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=7);
}

/* Function Heading image & label */
.functionheading {
	font-family : Arial, Helvetica, sans-serif;
	width: 100%;
	border-collapse: collapse;
	color: #FF9E31;
	font-size : 18px;
	font-weight: bold;
	text-align: left;
}

/* use for table title */
.functionheading2{
	font-family : Arial, Helvetica, sans-serif;
	width: 100%;
	border-collapse: collapse;
	color: #FF9E31;
	font-size : 14px;
	font-weight: bold;
	text-align: left;
}

/* function image */
table.functionheading th {
	width: auto;
	height: 65px;
	padding-left: 65px;
	vertical-align:top;
}

/*image for each module*/
table.functionheading th.dashboard {
	background: url(../images/icon_dashboard.gif) no-repeat left;
}


/*image for each module*/
table.functionheading th.eleave {
	background: url(../images/icon_eleave.gif) no-repeat left;
}

/*image for each module*/
table.functionheading th.staff {
	background: url(../images/icon_staff.gif) no-repeat left;
}

/*image for each module*/
table.functionheading th.cabinet {
	background: url(../images/icon_cabinet.gif) no-repeat left;
}

/*image for each module*/
table.functionheading th.announcement {
	background: url(../images/icon_announcement.gif) no-repeat left;
}

/* description for module*/
.desc {
	color:#000;
	font-size:12px;
	text-indent:10;
	vertical-align:top;
}

/* css for tree view top label*/
.treeviewlabel {
	color:#000;
	font-size:12px;
	font-weight : bold;
	padding-top : 3px;
	padding-bottom : 3px;
}

.treeview-table {
	border-top:1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding:0px;
	width:100%;
	height:253px;
	background-color: #FFFFFF;
}

.treeview-table-groups 
{
	border-top:1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding:0px;
	width:100%;
	height:270px;
	background-color: #FFFFFF;	
}

.treeview-table-annoucements {
	/* border-top:1px solid #CCCCCC; */
	border-right: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding:0px;
	width:100%;
	height:266px;
	background-color: #FFFFFF;
	margin:0px;
}

.treeview-table-files {
	border-top:1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding:0px;
	width:100%;
	height:250px;
	background-color: #FFFFFF;
}




/*hyperlink properties */
a {
	text-decoration: underline;
	color: #3872B2;
	font-weight:bold;
	border-bottom: 0px solid #666;
}
	
a:link {
	color:#3872B2;
	text-decoration: underline;
}

a:visited{
   	color:#3872B2;
}



/* --nested form */
table.nested-form {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	border-spacing: 0px;
	width: 100%;
	border-collapse: collapse;
}

table.nested-form th {
	background-color:#EFEFEF;
	margin: 0px;
	padding: 6px 1px 1px 4px;
	border:1 solid #cccccc;
	height: 20;
	font-size: 12px;
	color: #555555;
	text-align:left;
}

table.nested-form td{
	padding:5px;
	text-indent:10;
	vertical-align:top;
}

/* for photo display using image web contrlol */
.photo 
{
    border:2px;
    border-color:Gray;
    border-style:groove;
}

.dotline 
{
    background: url(../images/dotline500.gif) no-repeat left;
    width:100%;
    
}

/* for icon in datagrid item template */
.datagrid-icon{
	border:0;
	width:10px
}

/* for spacer inmage on first column of datagrid */
.datagrid-spacer
{
	border:0;
	width:10px;
}

/* variation without inside lines */
table.tablelook-noinsideborder {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 5px 0px 0px 5px;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	border-spacing: 0px;
	width: 100%;
	border-collapse: collapse;
}

table.tablelook-noinsideborder td {
	vertical-align:top;
}

table.tablelook-noinsideborder th {
	background-color:#3872b2;
	margin: 0px;
	padding: 6px 4px 2px 4px;
	height: 25px;
	font-size: 12px;
	color: #ffffff;
	text-align:center;
}

table.leaverecfooter {
	background-color: #FFFFFF;
	margin: 0px;
	
	padding:0px 10px 10px 0px;
	
	border-top:1px solid #FFFFFF;
	border-right:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	border-spacing: 0px;
	width: 100%;
	border-collapse: collapse;
}

table.leaverecfooter tr.footer {
	background-color:#E7EFF8;
	color:#000000;
	padding:0px 10px 10px 0px;
}

/* html table that looks like datagrid 
   when amend must align with datagridstyle
   in webcontrols*/
table.tablelook {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	border: 1px solid #CCCCCC;
	border-top:0px solid #3872B2;
	border-spacing: 0px;
	width: 100%;
	border-collapse: collapse;
}

table.tablelook th {
	background-color:#3872b2;
	margin: 0px;
	padding: 6px 4px 2px 4px;
	height: 25px;
	font-size: 12px;
	color: #ffffff;
	text-align:center;
}

table.tablelook tr.white {
	background-color: #FFFFFF;
	border-top:0px
}

/* for alternating row in html datagrid */
table.tablelook tr.row0 {
	background-color: #F5F5F5;
}

/* for alternating row in html datagrid */
table.tablelook tr.row1 {
	background-color: #FFFFFF;
}

table.tablelook tr.footer {
	background-color:#E7EFF8;
	color:#000000
}

table.tablelook td {
	padding: 4px;
	text-align:left;
	border-top:1px solid #CCCCCC;
}

.blacktxt {
	font-weight:bold;
	font-size:11px;
	color:#000000;
}

table.no-border {
	border-top:0px;
	border-bottom:0px;
	border-left:0px;
	border-right:0px;
	padding-top:3px;
	padding-bottom:3px;
}

table.no-border td {
	border-top:0px;
	border-bottom:0px;
	border-left:0px;
	border-right:0px;
}

.outer-tab
{
	background-color:#FFFFFF;
	border: 1px solid #CCCCCC;
	margin: -3px 2px 5px 2px;
	width:100%;
}

.inner-tab-grey
{
	margin: 4px;
	background-color:#F5F5F5;
	border: 1px solid #D5D5D5;
	position:relative;
	padding:0 0 15px 0; /* 15px for bottom padding */
}

.inner-tab
{
	margin: 4px;
	background-color:#FFFFFF;
	border: 1px solid #D5D5D5;
	position:relative;
	padding:0 0 15px 0; /* 15px for bottom padding */
}

#page-title {
	width:99%;
	height:30px;
	text-align:left;
	background-color:#666666;
}

#page-title th{
	font:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
}

#page-title-desc{
	font-size:10px
}

/* main table for form within tabs */
table.tabtable{
	width:98%;
}

/* spacing in between form field */
table.tabtable tr.row-space{
	height:10px;
}

/* mandatory field asterick*/
.red-asterik
{
	font-weight:bold;
	color:#AA0000;
}

/* form field description */
.field{
	font:Arial, Helvetica, sans-serif;
	color: #696969;
	font-size:12px;
	font-weight:bold;
	vertical-align:top;
}

.value {
	font:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:12px;
	vertical-align:top;
}

/* zone for action button */
table.action-zone{
	width:99%;
	background-color:#FFFFFF;
	vertical-align:middle;
	text-align:center;
	height:40;
	margin:15 0 0 0; /* 15px margin with upper control */
}

/* ---webcontrols--- */

/* validation summary*/
.validation-summary{
	margin: 10 0 10 0;
	background-color:#FFFBB8;
	border:1px solid #CCCCCC;
	color:#000000;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-indent:15;
	width:40%;
	filter:progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=7);
}
/* for all validator web controls */
.validation-msg{
	font-size:12px;
	color:#FF0000;
}

/* action result style */
.action-result {
	font-size:13px;
	color:#737373;
	font-weight:bold;
}

.textbox {
	font:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:12px;
}

.textboxrdonly {
	font:Arial, Helvetica, sans-serif;
	color: #696969;
	font-size:12px;
	font-weight : bold;
}

.label {
	font:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:12px;
}	

.err-msg {
	font:Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight:bold;
	font-size:12px;
}

.label-empty-msg {
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#AA0000;
	font-size:12px;
	text-align:center;
	margin:3px;
}

.listbox {
	font:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:12px;	
	height:150;	
	width:300;
}

.text-area {
	font:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:12px;
	height:150;
	width:400;	
}

.dropdownlist
{
	font:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:12px;
}

.radio 
{
	font:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:11px;    
}

/* datagrid */
.datagridstyle {
	Width:100%;
	background-color:#FFFFFF;
	font-size:12px;
	border-top:1px solid #80B5D7;
	padding-left:2px;
	padding-right:2px;
}

.datagridstyle-smaller {
	Width:100%;
	background-color:#FFFFFF;
	font-size:11px;
	border-top:1px solid #CCCCCC;
}

.datagridstyle-smaller-header {
	background-color:#3872B2;
	height:25px;
	font-size:11px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:Left;
	border:0px;
}

.datagridstyle-cont {
	Width:100%;
	background-color:#FFFFFF;
	font-size:12px;
	
	border-top:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;			
}

.datagrid-value {
	font-size:12px;
}

.datagridheader{
	background-color:#3872B2;
	height:25px;
	font-size:12px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	border:0px;
}

.datagriditem {
	background-color:#FFFFFF;
	height:25px;
	text-align:center;
}

.datagriditem-editstyle button{
	background-color:#F5F5F5;
}

.datagriditem-link {
	text-decoration : underline;
	color:#555555;
}

.datagridalternating {
	background-color:#F5F5F5;
	height:25px;
	text-align:center;
}

.datagridfooter {
	background-color:#E7EFF8;
	height:25px;
	margin: 0px;	
	padding:0px 10px 10px 0px;	
	border-top:1px solid #FFFFFF;
	border-right:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	border-spacing: 0px;
	width: 100%;
	border-collapse: collapse;	
	text-align:right;
}

/*  Calendar Control  */
.calendarstyle{
	border:1px solid #cccccc;
	border-top:1px solid #3872B2;
}

.calendar-dayheader{
	color:#40658A;
	background-color:#BBD0EA;
	font-weight:bold;
	font-size:10px;
}

.calendar-day{
	vertical-align:top;
	text-align:left;
	padding:2px 2px 2px 2px;
	background-color:#FFFFFF;
	font:arial, helvetica, sans-serif;
	height:90px;
	color:#000000;
	font-weight:bold;
	font-size:11px;
}

.calendar-day-details-hd {
	font-weight:bold;
	font-size:11px;
	color:#3872B2;
}

.calendar-day-details-body {
	font-style:underline;
	font-size:11px;
	color:#555555;
}

#calender-day-detail {
	font-size:11px;
	color:#555555;
	text-decoration: underline;
}

.calendar-nextprev{
	color:#FFFFFF;
	font-size:28px;
	font-weight:normal;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
}

.calendar-other-monthday{
	padding:2px 2px 2px 2px;
	background-color:#f1f3f5;
	color:DarkGray;
	font-weight:bold;
	font-size:11px;
}

.calendar-title{
	font-size:24px;
	height:30;
	color:#ffffff;
	background-color:#3872B2;
	font-weight:bold;
}

.calendar-weekend{
	vertical-align:top;
	text-align:left;
	padding:2px 2px 2px 2px;
	background-color:#f1f3f5;
	font:arial, helvetica, sans-serif;
	height:90px;
	color:#999999;
	font-weight:bold;
	font-size:11px;
}

/* --Login Page-- */
.ctr {
	text-align: center;
}

.login {
	margin-left: auto;
	margin-right: auto;
	margin-top: 6em;
	padding: 15px;
	border: 1px solid #cccccc;
	width: 429px;
	background: #F1F3F5;
}

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

.login-form {
	float: none;
	width: 25%;
}

.formfield{
	width:150px;
	border:1px #cccccc solid;
	font-family:Arial, Helvetica, "sans-serif font-size"; text-align: left:12px;
	color:#333333;
}

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

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

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

form {
    margin: 0px;
}

.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;
	}

.version {
	font-size: 0.8em;
}

.inputbox {
        color: blue;
        background: #E9EFF5;
        font-family: Courier, Helvetica, sans-serif;
        z-index: -3;
        font-size: 11px;
}

INPUT, TEXTAREA, SELECT {
	color : #333333;
	z-index : -3;
	font-size: 11px;
}

select.options, input.options {
	font-size: 8px;
	font-weight: normal;
	border: 1px solid #999999;
}

form {
	margin: 0px 0px 0px 0px;
}

.datagrid-button button {
	border-top-width: 2px;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: inset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: inset;
	border-top-color: #6699CC;
	border-right-color: #6699CC;
	border-bottom-color: #6699CC;
	border-left-color: #6699CC;
}

.border-grey {
	border-right: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}

.row-bevel {
	background-color: #E2E2E2;
	padding:0px;
	margin:0px;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #EDEDED;
	
	border-left: 1px solid #ffffff;
}

.row-bevel td {
	padding:0px;
}

.row-bevel th {
	margin: 0px;
	padding:0px;
	height: 20px;
	font-size: 12px;
	color: #555555;
	text-align:center;
}

.row-bevel th.folder-view-header {
	margin: 0px;
	padding:0px;
	height: 20px;
	font-size: 12px;
	color: #555555;
	text-align:left;
}
/* Cabinet */
.cabinet.datagriditem {
	background-color:#FFFFFF;
	height:25px;
	text-align:left;
}

.cabinet.datagridheader{
	background-color:#3872B2;
	height:25px;
	font-size:12px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:left;
	border:0px;
}

.cabinet.datagridalternating {
	background-color:#F5F5F5;
	height:25px;
	text-align:left;
}

/* Annoucement */

/* Dashboard Module styles */
.dashboard-module 
{
	background-color:#FFFFFF;
	border: 1px solid #D5D5D5;
	margin:0px;
	padding-bottom:0;
	padding-left:0;
	padding-right:0;
	padding-top:0;
	height:auto;
	filter:progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=135, Strength=2);
}

/* Dashboard module header style */
table.dashboard-module th
{
    background-color: #d4dce7;
    margin: 0px;
    padding: 6px 1px 1px 4px;
    border: 1 solid #d4dce7;
	border-bottom: 1 solid #FFFFFF;
    font-weight: bold;
    height: 20;
    font-size: 14px;
    color: #000066;
    text-align: left;
}

tr.dsb-module-functions
{
    background:#FFFFFF;
    color:#696969;
    font-size:11px;
    font-style:normal;
    text-align:center;
    height:25px;
	border-left:1px solid #EFEFEF;
	border-right:1px solid #EFEFEF;
	margin:0px;	
}

tr.dashboard-content
{	
	border-top: 1 solid #696969;
	background-color: #EFEFEF;
}

.dashboard-module-datagridstyle-header
{
    font-size: 13px;
    font-weight: bold;
    padding: 0;
    margin: 3;
    margin-top: 15;
    color: dimgray;
    text-align: Left;
    border-bottom: solid 1px #696969;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
    width: 100%;
    vertical-align: bottom;
}

.dashboard-module-datagridalternating
{
	background-color:#F5F5F5;
	height:25px;
	text-align:left;
	padding-left:0px;
	margin-left:3px;	  
}

.dashboard-module-datagriditem {
	background-color:#EFEFEF;
	height:25px;
	text-align:left;
	padding-left:0px;
	margin-left:3px;
}


.announcement-dashboard 
{
	Width:100%;
	background-color:#FFFFFF;
	font-size:12px;
	border-top:1px solid #80B5D7;
	padding-left:2px;
	padding-right:2px;    
}

.dsb-announcement-subjectbold
{
    font-weight: bold;
    font-size: 12px;
    color: background;
}

.dsb-announcement-postedbybold
{
    font-weight: bold;
    font-size: 12px;
    color: #447fde;
}

.dsb-announcement-posteddate
{
    font-weight: none;
    font-size: 11px;
    color: #6d6a6f;
}

LI
{
    list-style-position: inside;
    list-style-type: square;
    vertical-align: middle;
    text-align:left;
    margin-left:0px;
    padding-left:0px;
    float:none;
}