/* 
Description: BCA Toolkit
Author: RMA
Version: 4
Copyright: URS Gaithersburg
Filename: newtoolkit.css 
*/



/* -------------------------GLOBAL ELEMENTS --------------------------------------- */
/* -------------------------------------------------------------------------------- */
body  {
	background: #e9e7d9; /*#CDCBB6; */
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #414141;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;     /* This allows for the ems to be used within the body as the value of one em is now 10 pixels. */
 }

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both; height:0;  font-size: 1px;  line-height: 0px;
}
.clrrt { clear: right; }
.clrlft { clear: left; }

/* highlighted links */
.redlt a {
	color: #0069D2;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: bold;
}
.redlt a:hover {
	text-decoration: underline;
	color: #BF0000;
}

.smtxt {
	font-size: .9em;
}
.tinytxt 
{
    font-size: 0.8em;   
}

/*  style links within specific areas on the site . this is a general link styling *************************************/
.general a {
	font-size: 1em;
	color: #0069D2;
}

/* style NOTE div - used for highlighted information */
.note, .sticky_note {
	margin: 10px 5px;
	padding: 0;
	border: 1px solid #d6ebf0;
	width: 500px;
	color: #414141;
}

.note p, .sticky_note p {   /* ensure that anything in the span is bolded */
	margin: 0;
	padding: 8px;
	font-weight: normal;
}

.note .noteheader, .sticky_note .noteheader { 			/* style the header h2 for the notes */
	margin: 0;
	padding: 3px 7px;
	border-bottom: 1px solid #d6ebf0;
	background-color:#B5B191;
	color:#414141;
	font-size: 4px;
	font-weight: bold;
}

.sticky_note {		/* sticky notes have background color */
	background-color: #DDDBCC;
}

/* this section contains the styles for hidden submenus ****************/
.hide{
	display: none;
}
.show{
	display: block;    /*  show entire block within the class or div */
}





/* ------------------ HEADER ELEMENTS ---------------------------------- */
/* --------------------------------------------------------------------- */
/* top area on all pages */
#sitetop {
	height: 20px;
	background-color:#0984aa;
}
#sitetop .toplink {
	color: #ccc;
	font-size: .8em;
	float: right;
	padding: 2px 10px 2px 0;
}
#sitetop .toplink a:link,
#sitetop .toplink a:visited {
	color: #fff; 
	text-decoration: underline;
	font-weight: bold;
}
#sitetop .toplink a:hover {
	text-decoration: none;
}

/* header area */
#header {
	background: url(../images/bg_px.gif) repeat-x 0 0;   /* displays the bg images and repeats on the x-axis starting at the top left */
	padding: 0; margin: 0;
	height: 100px;	
} 
#header img {
	margin: 0 0;   /* apply left and right padding to the header image */
	padding: 0;
}
#header  h1  {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	visibility: visible;
}





/* ------------------------- MAIN ELEMENTS --------------------------------------- */
/* -------------------------------------------------------------------------------- */

#container {   /* this contains all content including header! */
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 5px auto;
	text-align: left;
	font-size: 1.2em;  /* equivalent to 12 pixels as we specified 62.5% in body tag */
	border: 1px solid #B5B191;
	padding: 0px;
}

#wrapper {
	border-top: 1px solid #8d895f;
	border-bottom: 1px solid #8d895f;
}

#sidebar1  {
	float: right; /* since this element is floated, a width must be given */
	width: 175px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #B5B191; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0; margin: 0;  /* zero out spacing */
	margin: 20px 10px 10px 0;
	padding: 8px 10px;
	border: 1px solid #8d895f;      /*#413F2C;* - rma changed 051608 */
	display: inline;
	color: #575546;
}
#sidebar1 a:link, #sidebar1 a:visited {
	color: #fff;
	font-size: 1em;
	text-decoration: none;
}
#sidebar1 a:hover {
	text-decoration: underline;
	color: #0069D2;
}
#sidebar1 .smicon {
	background: #333;
	border: 10px solid #666;
	padding: 0;
	float: left;
	margin: 8px 3px;
	text-align: center;
}
#sidebar1 h3 {
	font-size: 1.1em;
	border-bottom: 1px solid #fff;
	color: #fff;
	margin: 0;	padding: 0;
}
#sidebar1 p {
	font-size: .9em;
	padding-bottom: .5em;
	border-bottom: 1px solid #E6E3CF;
}
/******************   class - The following styles are used to create a tooltip when you hover over an element **********************/
#sidebar1 a.info, #mymenu a.info {
    position:relative; 	/*this is the key*/
/*    z-index:14; 
*//*	background-color:#ccc;*/
    color:#fff;
	text-decoration: none;
}
#sidebar1 a.info span, #mymenu a.info span.gp span {display: none; text-decoration:none; }

#sidebar1 a.info:hover {
/*	z-index:15; 
*/	background-color: #B5B191;  /* color must be set, therefore, it is set to the background of the sidebar - need to figure out why this must be set */
	text-decoration:none;   /* this ensure no underline on hover */
}
#mymenu a.info:hover {    /* these styles the hover span just for the #mymenu div all other attributes are inherited from style above ********/
	background-color: #87C2F2;  /* color must be set, therefore, it is set to the background of the sidebar - need to figure out why this must be set */
	text-decoration:none;   /* this ensure no underline on hover */
/*	z-index: 30;
*/}


#sidebar1 a.info:hover span, #mymenu a.info:hover span.gp span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2.2em; left:1em; width:19em;
	border: 1px solid #ccc;
    background-color:#fff; 
	color: #414141;
    text-align:left;
	padding:5px;
	text-decoration:none;   /* this ensure no underline on hover */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:.8em;
	z-index: 800;
}
#mymenu a.info:hover span.gp span {   /* these styles the hover span just for the #mymenu div all other attributes are inherited from style above ********/
	top: 0;
	left: 12em;
}
#mymenu2 ul li a, #mymenu3 ul li a {
	padding-left: 5px;
	margin-left: 12px;
}
/*#mymenu a.info:hover span {
	position:relative;
	background-color:#FF0000;
	z-index: 19;
}*/
/* styling for the Expand/Collapse menu - Resources pages ***********/
/*#menu_side li #mymenu li {
	margin: 0; padding: 0;
}
#menu_side li #mymenu li a {
	margin: 0;
	padding: 20px 5px;
}*/
/****** END Expand/Collapse **************************/



/* main content area *******************************************/
#mainContent  {
	margin: 20px 215px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much 	content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	/*	215px = sidebar width (175) + sidebar padding (10 + 10) + maincontent padding (10 + 10)  */
	padding: 0 10px;
	font-size: 1em;
} 
#mainContent p {
	font-size: 1em;
	color: #333333;
}
/* the maincontent div will be used on internal pages and therefore we can style all links here */ 
#mainContent a:link, #mainContent a:visited, #mainContent a:active {   /* apply size and color to all table links */
	font-size: 1em;
	color: #0069D2;
	text-decoration: none;
} 
#mainContent a:hover {
	font-size: 1em;
	color: #0069D2;
	text-decoration: underline;
}
#mainContent h1 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #696647;
	font-size: 1.85em;
}
#mainContent h2 {
	font-size: 1.5em;
}
#mainContent h3 {
	padding: 0;
	margin: 0;
	line-height: 17px;  /* specify the line here in order to control the centering of an image next to the h3 element */
	padding-top: 5px;
}
#mainContent h3 a {
	color: #414141;
	text-decoration: none;
}
#mainContent h3 a:hover {
	color: #414141;
	text-decoration: underline;
}
#mainContent h3 img  {   /* this aligns the icon image for the list */
	margin: 0;
	padding: 0 5px 0 0;
	border-style: none;
	text-align: left;
	float: left;
}
#mainContent h4 {
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline;
}


/* START #tabs div - this styles the navigation tabs at the top each page *****************/
#tabs {
	margin: 0; padding: 0;
	float:left;
	width:100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size:.9em;
	font-weight: bold;
	letter-spacing: .1em;
	line-height:normal;
	background-color: #a7a37e;	
}
#tabs ul {
	margin:0;
	padding:0 10px 0 50px;
	list-style:none;
}
#tabs li {
	display:inline;
	margin:0; padding:0;
}
#tabs a {
	float:left;
	background:url("../images/bkgrd_tab_blue_left.gif") no-repeat left top;    /* uses the a to place the left portion of the tab image */
	margin:0;
	padding:0 0 0 5px;
	text-decoration:none;
}
#tabs a span {
	float:left;
	display:block;
	background:url("../images/bkgrd_tab_blue_rt.gif") no-repeat right top;	   /* uses the a span to place the right portion of the tab image */
	padding:8px 15px 8px 8px;
	color:#BBB;  /* grayed out color */
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span { float:none; }
/* End IE5-Mac hack */

#tabs a:hover span {
	
}
#tabs a:hover {
	background-position:0% -30px;			/* this locates the tab left image at the left(horizontal) and -30px down(vertical) on hover */
}
#tabs a:hover span {	
	background-position:100% -30px;			/* this locates the tab right image at the right(horizontal) and -30px down(vertical) on hover */
	color:#fff;
}
#tabs li.current a {  /* highlight the current section by having the tab remain highlighted as on the hover */
	background-position:0% -30px;	
}
#tabs li.current span {  /* highlight the current section by having the tab remain highlighted as on the hover */
	background-position: 100% -30px;
	color: #fff;		/* make the current tab color white to highlight it! */
}
/* END #tabs **************************************************************************************************/
  

/* sidebar1 menu links */
#menu {
	margin: 0;	padding: 0;
}	
#menu ul {
	margin: 0; padding: 0;
	list-style-type: none;
}
#menu li {
/*	display: inline;*/
}
#menu li a {
/*	display: block;*/
	text-decoration: none;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	padding: 0 0 4px 0px;
	line-height: 24px;
}
#menu li a:hover {
	text-decoration: underline;
	color: #0069D2;
}
#menu ul li img {
	text-align: left;
	margin: 0px;
	padding: 5px 5px 0 0;
	border: none;
	vertical-align: middle;   /* centers the image vertically to the text */
	float: left;
}


/* sidebar menu/links ------ */
#menu_side {
	width: 175px;
	padding: 0; margin: 0;  /* zero out spacing */
	margin: 20px 10px 10px 0;
	border: 1px solid #8d895f;    /*#A7A37E; - changed 051608 rma */
	border-bottom: none;
	float: right;
	display: inline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}	
#menu_side ul { 
	list-style: none;
	margin: 0; padding: 0;
}	
#menu_side li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
}	
#menu_side li a:link, #menu_side li a:active, #menu_side li a:visited {
	color: #fff;
	font-weight: bold;
	display: block;
	background-color:#B5B191;
	padding: 8px 0 0 10px;
	border-bottom: 1px solid #8d895f;  /*#A7A37E; - changed 051608 rma */
}
	
#menu_side li a:hover {
	color: #0069D2;
	font-weight: bold;
	background-color: #a7a37e;
	padding: 8px 0 0 10px;
}	
#menu_side li img {
	margin: 0px;
	padding: 0 5px 0 0;
	border-style: none;
	text-align: left;
	float: left;
}


/* code to handle the submenu items for this list: the span tag handles styling within the menu list - used main for grant programs pages */
#menu_side li a:link span.gp, #menu_side li a:active span.gp, #menu_side li a:visited span.gp {				/* expandable menu items of class gp */
	display: block;
	margin:0;
	padding-left: 20px;
	background-image: url(../images/12X12/arrows.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-color:#B5B191;
}

#menu_side li a:hover span.gp  {		/* ensure the hover state is also styled for this span class */
	margin:0;
	padding-left: 20px;					/* shift text to the left */ 
	color: #0069D2;
	font-weight: bold;
	background-image: url(../images/12X12/arrowsh.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-color: #87C2F2;  /* blue color background on hover */
} 

/* END show/hide section ****************************/



/* END sidebar menu/links ----- */




/* main content links */
.main_links  {		/* remove inherent browser spacing */
	margin: 0;
	padding: 0;
}	
.main_links ul {
	margin: 0; padding: 0;
	list-style-type: none;		/* remove list bullets */
}
.main_links li {   					/* set the attributes for all the li elements */
	padding: 3px 0 3px 0;			/* spaces the text of the list element */
	margin: .8em 1em;			    /* spaces the image icon */
}
.main_links li a:link, .main_links li a:visited, .main_links li a:active  {
	text-decoration: none;
	color: #0069D2;
	font-size: 1em;
	font-weight: bold;
/*	vertical-align: middle;*/
}
.main_links li a:hover {
	text-decoration: underline;
	color: #414141;
}
.main_links li img  {   /* this aligns the icon image for the list */
	margin: 0; padding: 0 5px 0 0;
	border-style: none;
	text-align: left;
	float: left;
}

/* this following section styles the nested lists for #main_links ****************/
.main_links ul ul { margin-top: 5px; margin-left: 20px; padding: 0; }   /* spaces the entire nested list */

.main_links li li a {  /* this takes care of the spacing in  between the text and the images of this list for all other browsers beside IE **/
	margin /*All except IE6/Win/StandardsMode*/: .4em 1em; padding: 3px;
}
/* IE only to repair spacing issue */
.main_links li li.pdf {       /* this takes care of the spacing in IE between the text and the images of this list **/
	padding: 3px;			/* positions the text of the list element */
	margin: .4em 1em;			/* positions the background image icon */
}
/* END: this following section styles the nested lists for #main_links ****************/

/* Multiple background image options can be used within a single list. 
/* This is achieved by creating a class for each icon, and styling individual "LI's" as required.  */
.main_links li.pdf {
	background-image: url(../images/pdf.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 20px;			/* positions the text of the list element */
	margin: .4em 1em;						/* positions the background image icon */
}
.main_links li.word {
	background-image: url(../images/ms-word.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 20px;			/* positions the text of the list element */
	margin: .4em 1em;						/* positions the background image icon */
}
.main_links li.pdf_word {		/* this icon has two (2) images so it needs different spacing from the other icons */
	background-image: url(../images/pdf_word.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 40px;			/* positions the text of the list element */
	margin: .4em .5em;						/* positions the background image icon */
}
.main_links li.folder {
	background-image: url(../images/folder.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 20px;			/* positions the text of the list element */
	margin: .4em 1em;						/* positions the background image icon */
}
.main_links li.htm {
	background-image: url(../images/explorer.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 20px;			/* positions the text of the list element */
	margin: .4em 1em;						/* positions the background image icon */
}
.main_links li.excel {
	background-image: url(../images/ms-excel.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 20px;			/* positions the text of the list element */
	margin: .4em 1em;						/* positions the background image icon */
}
.main_links li.notepad {
	background-image: url(../images/notepad.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 20px;			/* positions the text of the list element */
	margin: .4em 1em;						/* positions the background image icon */
}
.main_links li.gp {
	background-image: url(../images/16X16/grant_icon_gr.png);
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 20px;			/* positions the text of the list element */
	margin: .4em 1em;						/* positions the background image icon */
}
/*  end icon li's styling ******/

/* END main_links list styling ----- */



/* this list style is used on the main page only  */
.main_page {
	margin: 0;	padding: 0;
	float: left;
	width: 200px;
}
.main_page ul {
	margin: 0; padding: 0;  /* remove default whitespace */
	list-style-type: none;
}
.main_page li {
	margin: 2em 0;
	padding: 0 0 0 1em;
}
*html .main_page li {
	margin: 1.5em 0;    /*IE6 only */
}
.main_page li a:link, .main_page li a:visited, .main_page li a:active  {   /* this styles the text for the list elements */
	text-decoration: none;
	color: #0069D2;
	font-size: 1em;
	font-weight: bold;
	margin: 0; padding: 0;		
	line-height: 35px;
}
.main_page li a:hover {       /* set the hover attributes for text */
	text-decoration: underline;
	color: #414141;
}
.main_page li a img {    /* this styles the image that sits next to the text */
	margin-right: 5px;
	padding: 2px;
	border-style: none;
	text-align: left;
	float: left;
	border: 1px solid #ccc; 
}
/* END this list style is used on the main page only  */



/* this styles the table used for the glossary pages ******************/
.tbl_gloss {
	margin: 0;
	padding: 0;			/* remove inherent spacing */
	border-collapse: collapse;		/* collapses borders that are inherent to tables within all browsers */
	width: 540px;
	border: 1px solid #73A7CE;		/* set outer border  */
	font-size: 0.95em;
}
.tbl_gloss th, .tbl_gloss td {      /* style all cells */ 
	text-align: left;
	padding: .4em;					/* add paddding around cell contents */
	border: 1px solid #73A7CE; 		/* add border to all cells */
}
.tbl_gloss th {						/* styles all table header cells */
	background: #B5B191;
}
.tbl_gloss a {   /* apply size and color to all table links */
	font-size: .95em;
	color: #0069D2;
}

/* this will handle the print button throughout the site */
#printme {
	float:right;
	background-image: url(../images/16X16/print-printer-16x16.gif);    /* adds the printer icon to the right of the text */
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding: 3px 0 3px 20px;			/* positions the text of the list element */
	margin: .2em .4em;					/* positions the background image icon */
}



/* ------------------------- FOOTER ELEMENTS -------------------------------------- */
/* -------------------------------------------------------------------------------- */
#footer  {
	padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#696647;
	margin: 0;
	margin-top: 50px;
	width: 780px;
	height: 175px;
	font-size: 0.95em;
} 
#links {
	margin: 0 0 0 10px;
	padding: 0;
	width: 490px;
	float: left;
	display: inline;
}

/************** address section within the static footer */
#address  {		
	border: 1px solid #CCCCCC;
	background: #413F2C;
	padding: 8px;
	float: right;
	color: #FFFFFF;
	width: 230px;
	margin: 20px 10px 10px 0px;
}
#address a {
	color: #87C2F2;
	font-weight: normal;
	text-decoration: none;
}
#address a:hover {
	color: #87C2F2;
	font-weight: normal;
	text-decoration: underline;
}
/************** END address section **********/

/*  List in the footer element **************/
.fcol {						/* fcol is a list */
	float: left;
	width: 150px;
	display: inline;
	margin-left: 5px;
	margin-top: 20px;
	height: 85px;
	padding-right: 15px;
	font-size: 1.15em;
}

.fcol ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
	font-weight: bold;
}
.fcol li {
	display: inline;
}
.fcol li a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 0.2em .5em 0.2em 0.5em;
}
.fcol li a:hover {
	text-decoration: underline;
}
/*  END  Links in the footer element **************/