/* CSS Document */
/*
How to calculate the "em" unit of measure for sizing
main body text is 10px, so we do --  10/16 = x/100 and x = 62.5.
  therefore, we set the body font-size: 62.5%
 
"From now on it’s easy to think in pixels but still set sizes in terms of ems:
 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc."
child pixels / parent pixels = child ems so in our case:
for a 11px footer: 11/10 = 0.91em
for a 14px header: 14/10 = 1.27em
*/

/*  COLORS 
 #CC0000; = specific KI red
 #666666; = darkest gray (for text)
 #999999; = dark gray
 #d5d5d5; = medium gray
 #F0EEEE; = light gray
 #ffffff; = white
*/
html
{
	padding:0;
	margin:0;
}
body
{
	padding:0;
	margin:0;
	width:100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:62.5%;
	line-height:1.4em;
	color:#666;	
}
select, input
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#333;	
/* 	line-height:10px; */
	margin-bottom: 0px;
}
/*---- GENERAL ---------------------------------------------------------------------------*/

a:link, a:visited
{
	color:#CC0000;
	text-decoration:underline;
}	
a:hover, a:active
{
	color:#CC0000;
	text-decoration:none;
}
a.gray:link, a.gray:visited
{
	color:#666;
	text-decoration:underline;
}	
a.gray:hover, a.gray:active
{
	color:#666;
	text-decoration:none;
}
a.noLine:link, a.noLine:visited
{
	color:#CC0000;
	text-decoration:none;
}	
a.noLine:hover, a.noLine:active
{
	color:#666;
	text-decoration:none;
}
.error
{
	color:#CC0000;
}
.warning
{
	background-color:Yellow;
	 font-size:medium;
}
.noLine
{
    color:#CC0000;
	text-decoration:none;
}

a.doc:link, a.doc:visited
{
	color:#CC0000;
	text-decoration:none;
	background-image:url('../images/icon_doc.gif');
	background-repeat:no-repeat;
	padding:0 0 5px 20px;
	display:block;
}	
a.doc:hover, a.doc:active
{
	color:#666;
	text-decoration:none;
	background-image:url('../images/icon_doc.gif');
	background-repeat:no-repeat;
	padding:0 0 5px 20px;
	display:block;
}

a.print:link, a.print:visited
{
	color:#CC0000;
	text-decoration:none;
	background-image:url('../images/icon_print.gif');
	background-repeat:no-repeat;
	padding:0 0 5px 16px;
	display:block;
}	
a.print:hover, a.print:active
{
	color:#666;
	text-decoration:none;
	background-image:url('../images/icon_print.gif');
	background-repeat:no-repeat;
	padding:0 0 5px 16px;
	display:block;
}
a.deleteLink
{
	background-image:url('../images/delete.gif');
	background-repeat:no-repeat;
	width:16px;
	height:14px;
	display:block;
	/*display:inline-block;  This caused non-display in firefox*/
}
.hide
{  
    display:none;
    visibility:hidden;
    width:1px;
    height:1px;
}
.maindivider
{
    background-image:url('../images/MP/main_divider.gif');
    background-repeat:repeat-x;
    height:21px;
}
.whiteTextGrayBkgrd
{
    color:white;
    background-color:#666;
    font-weight:bold;
    font-size:11px;
    font-family:Verdana;
}
.boldText
{
    color:#666;
    font-weight:bold;
    font-size:11px;
    font-family:Verdana;
}
.boldTextSmall
{
    color:#666;
    font-weight:bold;
    font-size:10px;
    font-family:Verdana;
}
input.submitbutton
{
	color:#CC0000;
	border:solid 1px #ccc;
	background-color:#f0eeee;
	cursor:default;
	padding:3px 0;
}
.validation_summary
{
    padding:10px;
    border:solid 1px #CC0000;
    background-color:#F8E5E5;
    margin-bottom:10px;
}


/*---- MAIN ---------------------------------------------------------------------------*/
#container
{
	width:950px;
	padding:0 20px;
	margin:5px auto 20px auto;
}	
#main
{
	clear:both;
	width:950px;
	padding:0 0 10px 0;
	margin:0;	
}
#bg_twocol
{
	background-image:url('../images/MP/bg_main_twocol.gif');
	background-repeat:repeat-y;
	padding:0;
	margin:0;
}

#bg_basic
{
/*	background-image:url('../images/MP/bg_main_basic.gif'); light grey|white|drk gry|white
	background-repeat:repeat-y; */
	background-color: white ;
	padding:0;
	margin:0;
}

#basic_main
{
	float:left;
	width:768px;  /* 759*/
/*	background-image:url('../images/MP/bg_detail.gif');  drk grey|light grey
	background-repeat:no-repeat;*/
	background-color:white ;  /* light grey */
}
#basic_text
{
    padding:50px 10px 10px 5px;/*	44*/
}

#twocol_left
{
	float:left;
	width:657px;
}
#twocol_right
{
	float:right;
	width: 281px;
}	
#threecol_left
{
	float:left;
	width:180px;/*	189*/
	padding-right:1px;
}	
#threecol_right
{
	float:right;
	width:189px;
}
/*---- POP UP ---------------------------------------------------------------------------*/
body.popup 
{
/*	padding:5px;*/
}
table.popup 
{
	border: 1px solid #CCCCCC;
	border-collapse: collapse;
}
/*---- HEADER ---------------------------------------------------------------------------*/
#header
{
	border-top:solid 1px #CC0000;
	width:950px;
	height:85px;
	border-bottom:solid 1px #CC0000;
}
#logo
{
	width:300px;
	float:left;
}



/*---- BREADCRUMBS ---------------------------------------------------------------------------*/	
#breadcrumbs
{
	width:906px;
	height:22px;
	padding:6px 22px 0 22px;
}
#breadcrumbs a:link, #breadcrumbs a:visited
{
	color:#666;
	text-decoration:underline;
}
#breadcrumbs a:hover, #breadcrumbs a:active
{
	color:#666;
	text-decoration:none;
}	


/*---- LeftNav 2-level Repeater based on sitemap---------------------------------------------------*/	

#Leftnavigation 
{
/*	display:none;*/
  width: 166px; /*	175*/
	top: 5em;
	left: 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	background-color:#F0EEEE ;
}
#Leftnavigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#Leftnavigation li {
	border-bottom: 1px solid #999999;
}
 /* level 1 */
#Leftnavigation li a  {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 12px solid #999999;
	border-right: 1px solid #999999;
	background-color: #ffffff;
	color: #999999;
	text-decoration: none;
}
#Leftnavigation li a:hover {
	background-color: #ffffff;
	color: #CC0000;
}
/* level 2 */
#Leftnavigation ul ul {
	margin-left: 12px;
}
#Leftnavigation ul ul li {
	border-bottom: 1px solid #999999;
	margin:0;
	background-color: #F0EEEE;
	color: #999999;
}
#Leftnavigation ul ul a:link, #Leftnavigation ul ul a:visited {
	background-color: #F0EEEE;
	color: #999999;
}
#Leftnavigation ul ul a:hover {
	background-color: #ffffff;
	color: #CC0000;
}

/*---- FOOTER ---------------------------------------------------------------------------*/	
#footer
{
	border-top:solid 1px #cccccc;
	padding:10px 12px 10px 22px;
	color:#999999;
}	
#footerleft
{
	width:260px;
	float:left;
}	
#footerright
{
	width:600px;
	float:right;
    padding:0;
    margin:0;
}	
#footer a:link, #footer a:visited
{
	color:#999;
	text-decoration:none;
}
#footer a:hover, #footer a:active
{
	color:#999;
	text-decoration:underline;
}
table.footerlinks
{
    float:right;
    padding:0 5px;
    margin:0;
}
table.footerlinks td.link
{
    padding:0 10px;
}

#sitemap ul
{
	padding:5px 0 5px 15px;
	margin:0;
}
#sitemap li
{
	padding:0;
	margin:0;
}


/*---Deviates from Standard Template -----*/
a.addLink 
{
	background-image:url('../images/AddIcon.gif');
	background-repeat:no-repeat;
	padding-left:16px;
	height:16px;
	display:inline-block;
	vertical-align:bottom;
	color:Gray;
}

#headerlabel
{
	color:#CC0000;
	padding:20px 5px 5px 5px;
	font-size:16px;
	 font-weight:bold;
}

a.clearLink 
{
	background-image:url('../Images/ClearIcon.gif');
	background-repeat:no-repeat;
	padding-left:16px;
	height:16px;
	display:inline-block;
	vertical-align:bottom;
	color:Gray;
}
a.clearLink:hover
{
	color:Black;
}
a.checkLink
{
	background-image:url('../Images/check.gif');
	background-repeat:no-repeat;
	padding-left:18px;
	height:17px;
	display:inline-block;
	color:Gray;
}
a.checkLink:hover
{
	color:Black;
}
a.cancelLink
{
	background-image:url('../Images/cancel.gif');
	background-repeat:no-repeat;
	padding-left:18px;
	height:17px;
	display:inline-block;
	color:Gray;
}
a.cancelLink:hover
{
	color:Black;
}	

div.singlePage
{
	text-align:left;
	padding-bottom:15px; 
}

/* For regular (non-modal) popups */
.popupControl
	{
		background-color:#F0EEEE;
		position:absolute;
		visibility:hidden;
		border-style:solid;
		border-color:#666666;
		border-width:1px;
	}
/* For Modal popups */
.modalBackground 
{
	background-color:#666666;
	filter:alpha(opacity=70);
	opacity:0.7;
	}
	
.modalPopup 
{
		background-color: #F0EEEE;
		border-style:solid;
		border-color:#666666;
		border-width:2px;
		padding:3px;
		width:250px;
	}

.PageHdr
{
    font-size:15px;
    text-align:center;
    font-family:Arial;
    vertical-align:top;
    font-weight:bold;
    letter-spacing: 2px;
    line-height: 20px;
    color:#CC0000;
}

td.ttlPad 
{
	padding-left:4px;
	padding-right:4px;
	text-align:right;
	vertical-align:middle;
	font-weight:bold;
}
td.ttlPadReq 
{
	text-align:right;
	/*vertical-align:middle; */
	font-weight:bold;
	color:#CC3300; /*Red*/
}
td.ttlPadReqCtl 
{
	padding-left:4px;
	padding-right:4px;
	text-align:right;
	vertical-align: text-top;
	font-weight:bold;
	color:#CC3300; /*Red*/
}

td.ttlPad2 
{
	text-align:left;
	vertical-align:top;
}
td.ttlPadDown 
{
	padding-left:4px;
	padding-right:4px;
/*	padding-top:35px; */
	text-align:left;
	vertical-align:bottom;
}
td.ttlPad3 
{
	padding-left:4px;
	padding-right:4px;
	text-align:left;
	vertical-align:top;
}

td.contentHead
{
    font-size:20px;
    text-align:left;
    font-family:Arial;
       color:Gray;
}

td.contentHead2
{
    font-size:15px;
    text-align:center;
    font-family:Arial;
    vertical-align:top;
    font-weight:bold;
    color:#CC0000;
}

/*CollapsiblePanel*/
.collapsePanel {
	
	background-color:white;
	overflow:hidden;
}

.collapsePanelHeader{
	width:100%;
	height:30px;
	background-image: url('Expense/images/bg-menu-main.png');
	background-repeat:repeat-x;
	color:#FFF;
	font-weight:bold;
}
/* These are used to make the sections of the expense report header stand out. */
.Section
{
		border: solid 3px #d5d5d5;
		padding: 10px 0 5px 0;
		margin: 2px 0 2px 0;
	}
/* These are used on the PrtExpenseReport page to set all text to larger, and borders on tables
   Also, a separate skin for the gridviews is used - PrtExpense.skin   */
#PrintOut
{
	font-size:16pt;
	line-height:20px;
    font-family:TimesNewRoman,Serif;
    color:Black;
	}

table.tblPrint 
{
	border: solid 1px Black;
	width: 940px;
}