/* CSS Document */

* {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

body {
	font-size: 76%;
	font-family:  Arial, Helvetica, sans-serif;
	line-height:1.35em;
}

img {
	border: none;	
}

.clearfloat {
	clear: both;
}

.red {
	font-weight: bold;
	color: red;
}

/**
 * Formatting for tabless forms.
 * Used primarily in the HTML file "essIRB_Reg5b.html"
 *
 * Usage Example:
 *
 *	<p class="formTxt">1. Some text goes here...</p>
 * 	<p class="formElem"><input type="text" /></p>
 *
 */

#content .formElem {
	padding: 0 0 10px 12px;
}

#content .formTxt {
	border-bottom: 1px solid #ccc;
	padding: 0 0 5px 0;
	margin: 0 0 20px 0;
}

/**
 * Hides form field text for multiple form fields.
 *
 * Usage Example:
 *
 *	<label for="areaCode" class="hidden">Area Code</label><input type="text" id="areaCode" />
 *	<label for="phnNumber" class="hidden">Phone Number</label><input type="text" id="phnNumber">
 *
 *
 */

.hidden {
	position:absolute; 
	left:0px;
	top:-1000px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.rtAlign {
	text-align: right; 
	margin: 10px 0;
}

.lftAlign {
	text-align: left;
	margin: 10px 0;
}

/* default column width for forms formatted by tables */

.colwidth {
	width: 240px;
}


/* table style for form layout */

table {
	border-collapse:collapse;
	width: 99%;
	margin: 10px 0;
	
}


table tr td {
	padding: 4px 6px;
	color: #333;
	vertical-align:top;
}

table tr td.x {
	text-align: right;
	width: 200px;
}

table tr td.c {
	text-align: center;
}

div.tblBg {
	background-color: #efefef;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0 20px 0;
}

/**
 * Formatting for table legend.
 *
 * Usage Example:
 *
 *	<table class="legend">
 *		<tr>
 * 			<td colspan="2">Legend</td>
 *		</tr>
 *		<tr>
 * 			<td>item1</td><td>item2</td>
 *		</tr>
 *	</table>
 *
 */

table.legend {
	border-collapse:collapse;
	width: 99%;
	border: 1px solid #bbb;
	margin-bottom: 15px;
}

table.legend tr td.header {
	background-color: #bbb;
	text-transform:uppercase;
	font-weight:bold;
	color: #fff;
}


table.legend tr td {
	padding: 4px 6px;
	color: #333;
	vertical-align:top;
}

/**
 * Formatting for table grid.
 *
 * Usage Example:
 *
 *	<table class="grid">
 *		<tr>
 * 			<td>item1</td><td>item2</td>
 *		</tr>
 *	</table>
 *
 */
table.grid table
{
    width:auto;
    background-color:White;
}

.pagerstyle
{
    background-color:White;
}

table.grid tr td table
{
    display:inline;
}

table.grid tr td table tr td
{
    background-color:White;
}

table.grid {
	border-collapse:collapse;
	background-color: #fff;
	width: 99%;
	margin: 5px 0 25px 0;
}

table.grid th {
	/*text-align: left;*/
	font-weight:bold;
	color: #fff;
	border-right: 1px solid #fff;
	vertical-align:top;
	text-align: left;
	background-color: #bbb;
	background-color: #596aa3;
	padding: 5px;
}

#content table.grid tr th a,
#content table.grid tr th a:visited {
	color: #fff;
}

table.grid tr td {
	padding: 5px;
	color: #333;
	border-right: 1px solid #fff;
	vertical-align:top;
}

.even {
	background-color: #efefef;
	padding: 5px;
	color: #333;
}

/* separator lines */

hr {
	background-color: #ccc;
	height: 1px;
	border: none;
	margin-bottom: 15px;
}

.dottedLine {
	border-bottom: 1px dotted #bbb;
	height: 1px;
}



.smalltxt {
	font-size: 0.825em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

.smallertxt {
	font-size: 0.325em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/*==========| Begin top header styles |==========*/

div.spacer {
	clear: both;
	height: 0;
}

/**
 * Formatting for login bar at the top of each page.
 *
 * #top: div that surrounds the login bar text
 *
 */

#top {
	background-color: #333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.925em;
	color: #efefef;
}

#top a:link,
#top a:visited {
	color: #fff;
	text-decoration: none;
}

#top a:hover {
	text-decoration: underline;
}

  
#top div.row span.left {
	float: left;
	text-align: left;
	padding: 4px 0 4px 15px;
	width: 45%;
}

#top div.row span.right {
	float: right;
	text-align: right;
	padding: 4px 15px 4px 0;
	width: 45%;
}



#breadcrumb {
	color: #666;
	font-size: 1em;
	padding: 0 0 15px 0;
	font-family: Arial, Helvetica, sans-serif;
}

/*==========| Begin header styles |==========*/

#header #logo-box,
#header #esslogo-box,
#header #searchlogo-box {
	margin: 0 0 0 15px;
}

#header #logo-box h1 {
	padding: 64px 0 0 604px;
	overflow: hidden;
	height: 0;
	width: 0;
	background-image: url(../images/HATS_Logo.gif);
	background-repeat: no-repeat;
}

#header #esslogo-box h1 {
	padding: 64px 0 0 502px;
	overflow: hidden;
	/*margin-bottom: 20px;*/
	height: 0;
	width: 0;
	background-image: url(../images/ESS_Logo.gif);
	background-repeat: no-repeat;
}

#header #searchlogo-box h1 {
	padding: 84px 0 0 502px;
	overflow: hidden;
	/*margin-bottom: 20px;*/
	height: 0;
	width: 0;
	background-image: url(../images/Search_Logo.gif);
	background-repeat: no-repeat;
}

/* ====================| Global Navigation Styles |==================== */


/**
 * Tab styles for global navigation
 * 
 * #header container for main navigation tabs
 * current: selected tab
 *
 *
 */
    
#header {
  float:left;
  width:100%;
  background-color:#6d82c7;
  }
  
#header ul {
  float: left;
  padding:20px 0 0 190px;
  list-style:none;
  font-size:1em;
  }
  
#header li {
  float:left;
  background:url("../images/leftTab.gif") no-repeat left top;
  margin:0 3px 0 0;
  padding:0 0 0 9px;
  }
#header li a {
  float:left;
  display:block;
  width:.1em;
  white-space: nowrap;
  background:url("../images/rightTab.gif") no-repeat right top;
  padding:3px 15px 3px 6px;
  margin: 0;
  text-decoration:none;
  font-weight:bold;
  /*font-weight:normal;*/
  color:#fff;
  }
#header > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
  color:#333;
  *color: #fc0;
  }
#header .current a:hover {
  color:#333;
  }  
  
#header .current { /* current was changed from ID to class to better support .net coding */
  background-position:0 -150px;
  /*border-width:0;*/
  }
#header .current a { /* current was changed from ID to class to better support .net coding */
  background-position:100% -150px;
  display: block;
  padding-bottom:3px;
  color:#333;
  }
#header ul li:hover, 
#header ul li:hover a {
  background-position:0% -150px;
  color:#333;
  }
#header ul li:hover a {
  background-position:100% -150px;
  }
  
/*==========| Begin page menu styles |==========*/  
  
#content #menu {
  position: relative;
  width:100%;
  line-height:normal;
  border-bottom: 1px solid #bbb;
  }
#content #menu ul {
  margin:0;
  padding:10px 0 10px 0px;
  list-style:none;
  /*display:block;*/
  }
#content #menu li {
  float:left;
  background:url("../images/pgTabLeft.gif") no-repeat left top;
  margin:0 3px 0 0;
  padding:0 0 0 9px;
  }
#content #menu a {
  float:left;
  display:block;
  background:url("../images/pgTabRight.gif") no-repeat right top;
  padding:5px 15px 5px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#333;
  }
  
  #content #menu a:visited {
	color: #333;
  }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#content #menu a {float:none;}
/* End IE5-Mac hack */
#content #menu a:hover {
  color:#333;
  }
#content #menu .active { /* active was changed from ID to class to better support .net coding */
  background-position:0 -150px;
  border-width:0;
  }
#content #menu .active a { /* active was changed from ID to class to better support .net coding */
  background-position:100% -150px;
  display: block;
  padding-bottom:5px;
  color:#333;
  }
#content #menu li:hover, #menu li:hover a {
  background-position:0% -150px;
  color:#333;
  }
#content #menu li:hover a {
  background-position:100% -150px;
  }
  
/**
 * Formatting for secondary tabs.
 *
 * first: does not display left pipe bar
 * on: indicates selected tab
 *
 */

#content #subnav {
	margin-bottom: 15px;
}

#content #subnav h3, 
#content #subnav h4 {
	position:absolute;
	left:-1000em;
	margin:0;
}

#content #subnav ul {
	border-bottom: 1px solid #bbb; 
	margin:0;
	padding:.6em 0 .6em 0;
}
#content #subnav li {
	border-left: 1px solid #bbb;/* pipe divider */
	display:inline;
	padding:0 1em;
}
#content #subnav li.first {
	padding-left:0;
	border:0;
}

#content #subnav li {color: #999;} 
#content #subnav li a {color:#66f; text-decoration:none;}

#content #subnav li a:hover {
	text-decoration: underline;
}

#content #subnav li.on a {
	font-weight:bold;
	color: #333;
}
  
  
/*==========| Begin Content section |==========*/
  
#contentwrapper {
	float: left;
	background-image: url("../images/lftColBg.gif");
	background-repeat: repeat-y;
	width: 99%;
}

/*#contentwrapper {
	margin-left:auto;
	margin-right:auto;
	width: 920px;
}*/

/* Formatting for popup window text */

#descInfo {
	padding: 25px;
	font-size: 1em;
}

#content {
	margin: 0 0 0 210px;
	padding:15px 15px 30px 0px;
	font-size: 1em;
}

#content a,
#descInfo a {
	color: #66f;
}

#content h2 {
	font-size: 1.8em;
	font-weight:normal;
	line-height:1.35em;
	padding-bottom: 15px;
	color: #4169e1;
	/*font-family: "Lucida Grande", Arial, Helvetica, Sans-serif;*/
}

#content h3 {
	font-size: 1.35em;
	padding-bottom: 15px;
	color: #444;
	
}

#content p, 
#content ul, 
#content ol,
#content h4,
#descInfo p, 
#descInfo ul, 
#descInfo ol,
#descInfo h4 {
	line-height: 1.35em;
	margin-bottom: 7px;
	padding-bottom: 4px;
	color: #444;
}

#content ul,
#content ol {
	margin-left: 30px;
}

#content ul li,
#content ol li {
	padding-bottom: 5px;
}

#content .note {
	color: #333;
	border: 1px solid #ccc;
	background-color: #FFFFCC;
	background-image: url(../images/note.gif);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	padding: 10px 10px 20px 40px;
	margin-bottom: 15px;
	clear: both;
	
}

#content .warning {
	color: #fc0000;
	border: 1px solid #fc0000;
	background-color:#fff;
	background-image: url(../images/warning.gif);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	padding: 10px 10px 20px 50px;
	margin-bottom: 15px;
	clear: both;
	
}

#content .warning ul {
	color: #fc0000;
} 

#leftNav {
	float: left;
	width: 185px;
	/*position: absolute;
	left: 0px;*/
	/*clear: both;*/
}

/*==========| Rollover button styles |==========*/

/*** LINK BUTTONS *********************************************************/
p .link,
p .link span {
  background: transparent url("../images/bg_link.gif") no-repeat 0 0;
  color: #666;
  float: left;
  /*display: inline;*/
  font-weight:bold;
  height: 33px;
  line-height: 33px;
  margin-bottom: 1em;
  text-decoration:none;
}
p .link span {
  background-position: 100% 0;
  position: relative;
  right: -15px;
  padding-right: 30px;
}
p .link:hover {
  background-position: 0 -33px;
  color: #fff;
  font-weight:bold;
}
p .link:hover span {
  background-position: 100% -33px;
  color: #fff;
  font-weight:bold;
  
}




/*==========| Footer styles |==========*/

#footer {
	float:left;
	width: 100%;
	background-color: #6d82c7;
	color: #fff;
	font: 0.925em Verdana, Arial, Helvetica, sans-serif;	
}

#footer a,
#footer a:visited {
	color: #fff;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

#footer p {
	padding: 11px 15px;
}

.strike {
text-decoration:line-through;
color:Blue;
}


/*==========Added for 508 compliance==========*/

#skip-nav {
  top: -30px;
  left: 3px;
  width: auto;
  height: auto;
  padding: 4px 8px;
  z-index: 1070;
  position: absolute;
  background-color: @gray-lighter;
  transition: .3s;
  border-radius: 5px;
  opacity: 0;
  background: #FFFFFF;
}
#skip-nav:focus {
    top: 3px;
    opacity: 1;
}