/* --------------------------------------------  General tabs ------------------------------------------------------ */

.displayon { }
.displayoff { display: none }
.display-inline { display: inline }

#error-messages {
/*	margin-left: 5%;
	margin-right: 5%;*/
	margin-bottom: 5px;
	text-align: left;
	padding: 0 3% 0 3%;
}
.error-message {
	font-family: Verdana; font-size: 10pt; font-weight: bold; color: #990000; background-color: #f8ead2; 
	padding-left: 7px; 
	margin-bottom: 2px;
}
.error-message a {
	font-family: Verdana; font-size: 10pt; font-weight: bold; color: #660000; background-color: #f8ead2 }
/* a: tags must be in order link, visited, hover, active; see http://meyerweb.com/eric/css/link-specificity.html for info */
.error-message a:link {
	font-family: Verdana; font-size: 10pt; font-weight: bold; color: #660000; background-color: #f8ead2 }
.error-message a:visited {
	font-family: Verdana; font-size: 10pt; font-weight: bold; color: #660000; background-color: #f8ead2 }
.error-message a:hover {
	font-family: Verdana; font-size: 10pt; font-weight: bold; color: #660000; background-color: #f8ead2 }
.error-message a:active {
	font-family: Verdana; font-size: 10pt; font-weight: bold; color: #660000; background-color: #f8ead2 }
.error-header {
	font-family: Verdana; font-size: 10pt; font-weight: bold; color: #ffffff; background-color: #bb0000; 
	padding-left: 7px; 
	margin-bottom: 2px;
}

.disabled { color: #888 !important; }
.enabled { }

#send-help {
	text-align: center;
	font-style: italic;
	clear: both;
}

.footer-buttons input {
	margin: 15px;
}

.normal { font-family: Verdana !important; font-size:10pt !important; font-weight: normal !important; color: #000 !important; line-height: normal !important;}
.normal a { font-family: Verdana !important; font-size:10pt !important; font-weight: normal !important; }
/* a: tags must be in order link, visited, hover, active; see http://meyerweb.com/eric/css/link-specificity.html for info */
.normal a:link { color: #3333ff !important; font-weight: normal !important; }
.normal a:visited { color: #009 !important; font-weight: normal }
.normal a:hover { color: #c00 !important; font-weight: normal }
.normal a:active { color: #c00 !important; font-weight: normal }

.button1  { background-color: #e2e2e4; color: #555555; border: #555555 1px solid; font-weight: bold; margin-bottom: 2px; padding-top: 0px; padding-bottom: 0px; cursor:pointer }
.button2  { background-color: #d0d0d3; color: #555555; font-family: Verdana; font-weight: bold; font-size: 10pt; }

.button-open-close {
	vertical-align: middle; 
	height: 80%;
	font-size: 13pt !important; 
	font-family: Verdana; 
	font-weight: bold; 
	background-color: #e2e2e4; 
	color: #333; 
	border: #555 1px solid; 
	cursor: pointer;
}

/* ------------------------------  Main content area and tabs ------------------------------------------------------ */

#main-cell {
	padding-top: 20px;
	padding-bottom: 30px;
}

.form {
	margin: 0;
}

/* ------------------------------  Page title and sub-title ------------------------------------------------------ */

#wonder-message {
	font-family: Verdana; font-size: 12pt; font-weight: bold; color: #990000;  

	text-align: center;
	padding:15px 15px 20px 15px;
}

/* old
#title {
	border: 1px solid #666;
	clear: both;
	background: #fff;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 20px;
	text-align: center;
}
*/

.title {
	color: #245;
	font-family: Verdana, sans-serif; 
	font-size: 14pt; 
	font-weight: normal;
	text-align: center;
	padding: 20px 0 28px 0;
	margin-bottom: 0;
}

.title h1 {
	font-family: Verdana, sans-serif; 
	font-size: 14pt; 
	font-weight: normal;
	text-align: center;
	margin: 0;
}

.title h2 {
	font-size: 12pt; 
	font-weight: bold;
	margin: 10px 0 0 0;
}

/* old method of doing titles, may still be present on some pages, functions now use h1 and h2 for 508 */
.title .sub {
	font-size: 12pt; 
	font-weight: bold;
	margin-top: 10px;
}

#send-msg {
/*
	background-color: #fff;
	border: 1px solid #666;
	background-color: #fff2dd;
	border: 1px solid #77b;
	padding: 10px;
	margin-bottom: 15px;
	border-bottom: 3px solid #bbd;
	border-top: 3px solid #bbd;
*/
	background-color: #f5f6f8;
	margin-top: 18px;
	padding-top: 8px;
	border: 1px solid #bbd;
	border-right: 3px solid #bbd;
	border-bottom: 3px solid #bbd;
}

#send-text { 
	color: #c00; 
	font-weight: bold; 
	font-size: 11pt; 
	text-align: center;
/*	padding-top: 10px;*/
}

#progress-bar {
	margin-left: 100px; 
	margin-top: 5px; 
	height: 8px; 
	background-color: #c00; 
	font-size: 5pt;
}

#export-text td { 
	color: #c00; 
	font-style: italic; 
	font-size: 10pt; 
	text-align: center;
	padding-bottom: 10px;
}

.about {
	padding: 20px;
}

.about p {
	margin-top: 10px;
}

.about table {
	margin: 0 0 15px 0;
}


.intro-para { 
	text-align: left;
/*	margin: 0 5% 10px 5%;*/
	margin-top: 10px;
}
.intro-link { margin-left: 8px; margin-right: 12px }


/* ------------------------------------------  Request form  ------------------------------------------------------ */

.req-form {
	border: 1px solid #bbd;
	margin-left: 3%;
}

.req-form td { 
	vertical-align: top; 
	background-color: #f2f2f4; 
	color: #129; 
	font-weight: bold; 
}

.req-form td a {
	font-weight: bold;
}

.req-form td.hd {
	padding: 2px 6px;
	background: #7799cc;
	color: #fff; 
	font-size: 11pt; 
	text-align: left;
}

.req-form td.hd h3 {
	margin:0;
	padding:0;
	font-size: 11pt; 
}

.req-form td.hd span {
	float: right;
}

.req-form td.hd span.help {
	margin-top: 1px; 
	margin-left: 10px;
	padding: 0px 7px 2px 7px;
}

.req-form td.hd a { 
	font-size: 10pt; 
	font-weight: bold;
}

.req-form td.hd a:link { color: #fff; }
.req-form td.hd a:visited	{ color: #fff; }
.req-form td.hd a:hover { color: #802b27;	}
.req-form td.hd a:active { color: #802b27; }

/* old styles using th for "header" rows, new styles use h3 for 508 compatibility */
.req-form th {
	padding: 2px 6px;
	background: #7799cc;
	color: #fff; 
	font-size: 11pt; 
	text-align: left;
}

.req-form th span {
	float: right;
}

.req-form th span.help {
	margin-top: 1px; 
	margin-left: 10px;
	padding: 0px 7px 2px 7px;
}

.req-form th a { 
	font-size: 10pt; 
	font-weight: bold;
}

.req-form th a:link { color: #fff; }
.req-form th a:visited	{ color: #fff; }
.req-form th a:hover { color: #802b27;	}
.req-form th a:active { color: #802b27; }

.req-form-cell {
	padding: 15px 5px 20px 20px;
}

.req-form-table td {
	padding: 0 20px 8px 0;
}

.req-form-table tr.final td {
	padding-bottom: 0 !important;
}

/* td needed to get styles applied */
td.radio-cell {
	padding-top: 15px;
	padding-right: 5px;
	text-align: right;
	white-space: nowrap;
	color: #000;
	font-weight: bold;
}

.radio-cell p {
	margin-bottom: 4px;
	padding-right: 5px;
}

.radio-cell input {
	margin-right: 0;
}

/* Use display: block to put select box below label. 
   Was using <br> but caused extra vertical spacing in IE under some circumstances */
.req-form-select {
	margin-top: 4px;
	display: block;
}

/* scroll bars for injury mechanism and any other very wide select list */
.req-form-select-wide-div {
	margin-top: 4px;
	width: 400px;
	height: 300px;
	overflow: scroll;
	border-top: 2px solid #888;
	border-left: 2px solid #888;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.req-form-select-wide {
	border: none;
}

.extra-height { line-height: 1.7 }
.firstrow td { padding-top: 15px !important; }
.lastrow td { padding-bottom: 20px !important; }
.firstcell { padding-left: 15px !important; }
.lastcell { padding-right: 15px !important; }
.finder-margin { margin-left: 20px }

/* a: tags must be in order link, visited, hover, active; see http://meyerweb.com/eric/css/link-specificity.html for info */
.req-form a:link { color: #129; font-weight: bold;}
.req-form a:visited	{ color: #129; }
.req-form a:hover { color: #802b27;	} /* was #c00 */
.req-form a:active { color: #802b27; }

.multiple-note {
	font-weight: normal;
	color: #000;
}

.nested-table-options td { 
	padding: 1px 6px 1px 2px !important;
	vertical-align: top; 
}
.nested-table-options th { 
	padding: 1px 6px 1px 2px !important;
	vertical-align: top; 
}
.nested-table-options td select { 
	margin-right: 5px; 
}
.nested-table-options .extra-vertical-space td {
	padding-top: 8px !important;
}
.nested-table-options .extra-vertical-space th {
	padding-top: 8px !important;
}
.nested-table-options th {
	text-align: right;
	white-space: nowrap;
	background-color: #f2f2f4; 
	color: #129; 
	font-size: 10pt;
}
.nested-table-options th a:link { color: #129; }
.nested-table-options th a:visited	{ color: #129; }


/*
	blues from gradient of #7799cc(form section header bar blue) to white.
	gradient 300 pixels high, white at position 0 and 7799cc at postion 300.
	e9eef6	  at position 50
	dde6f2	  at position 75
	d2ddee	  at position 100
	bbcce5	  at position 150
	a4bbdd	  at position 200
	8eaad4	  at position 250
	7799cc		at position 300
*/



/* --------------------- rounded tabs and page connected to tabs --------------------------------------------------

NOTES:

	for the div that make up the pages connected to the tabs to work, must set padding in surrounding element.  in this case the div-body.
	trying to set margins for these two div made them behave differently so that tabs and bottom line did not 
	correctly line up with div below it, at least in IE.

*/

/* two div provide pages connected to the tabs */
/* tabs sit above this div. provides right side of blue inset. top of blue inset is provided as background to the rounded-tabs element below. */
.tab-div {
	background: #79c; /* blue bar in form */
	clear: both;
	padding: 0px 4px 0px 0px;
}

/* tabs sit above this div. provides border around entire page */
.tab-div2 {
	background: #fff;
	clear: both;
	border: 1px solid #779;
}

/* tabs sit above this div. provides border around entire page */
.tab-div3 {
	background: #fff;
	clear: both;
	border-right: 4px solid #79c;
	border-top: 4px solid #79c;
	border-left: 1px solid #779;
	border-bottom: 1px solid #779;
}

.rounded-tabs {
	float: left;
	clear: both;
/*	background: url("images/bar-blue.gif") repeat-x bottom;*/
	width: 100%;
	position: relative;
	top: 3px;
}

.rounded-tabs ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rounded-tabs li {
	float: left;
	background: url("images/tab-7799cc-left.gif") no-repeat left top;
	padding: 0 0 0 9px;
	margin-right: 5px;
}

.rounded-tabs li input {
	display: block;
	background: url("images/tab-7799cc-right.gif") no-repeat right top;
	padding: 3px 15px 3px 6px;
	text-decoration: none;
	border: 0;
	font-family: Verdana; 
	font-size: 9pt; 
	font-weight: bold;
	color: #5e5e5e;
	cursor: pointer;
}

.rounded-tabs li input:hover {
	color: #802b27;
}

.rounded-tabs li.current {
	background: url("images/tab-777799-border-left.gif") no-repeat left top;
	position: relative;
	top: 1px;
}

.rounded-tabs li.current input {
	display: block;
	background: url("images/tab-777799-border-right.gif") no-repeat right top;
	padding: 3px 15px 3px 6px;
	text-decoration: none;
	font-family: Verdana; 
	font-size: 9pt; 
	font-weight: bold;
	color: #245; 
	cursor: text;
}

/* Related tab, not used now...
.rounded-tabs li.related {
* white
	background: url("images/tab-777799-border-left.gif") no-repeat left top;
*
	background: url("images/tab-e9eef6-left.gif") no-repeat left top;
	float: right;
	margin-right: 10px;
*
	with no top you see the #779 line from tab-div on bottom + 1px of #79c from ul
	position: relative;
	top: 1px;
	with this you elminate the 1px of #79c
	border-bottom: 1px solid #e9eef6;
*
	border-bottom: 1px solid #e9eef6;
}
.rounded-tabs li.related a {
	display: block;
* white
	background: url("images/tab-777799-border-right.gif") no-repeat right top;
	color: #55f; 
*
	background: url("images/tab-e9eef6-right.gif") no-repeat right top;
	padding: 3px 15px 4px 6px;

	font-family: Verdana; 
	font-size: 9pt; 
	font-weight: bold;
	text-decoration: none;
	color: #5e5eaa; 
}
.rounded-tabs li.related a:hover {
	color: #802b27;
}
*/


/* --------------------- styling for major elements --------------------------------------------------

NOTES:

	Some IE specific stuff can be found in templates\html\includes.html file.

*/

/*	provides background wheat to most pages. */
body {
	background-color: #ffebce;
	background-image: url("images/w-bg-grad-ffebce-175px.gif"); 
	background-attachment: scroll;
	background-position: top;
	background-repeat: repeat-x;
	min-width: 775px;
}

/*	provides a margin around page excluding header and footer. this so that header and footer go entire width of window. */
.div-body {
	padding: 0 2% 15px 2%;
}


/*	background wheat moves to the div-body on short pages. otherwise there would be large amounts of solid wheat below the footer.*/
.small-page{
	background: #ffffff;
}

.small-page .div-body {
	background-color: #ffebce;
	background-image: url("images/w-bg-grad-ffebce-welcomepage.gif"); 
	background-attachment: scroll;
	background-position: top;
	background-repeat: repeat-x;
	padding-bottom: 50px;
}


/* a div with blue inset border for pages that don't need tabs */
.notabs-div {
	background: #fff;
	border-top: 5px solid #7799cc;
	border-right: 5px solid #7799cc;
	border-left: 1px solid #777799;
	border-bottom: 1px solid #777799;
	padding: 3% 3% 3% 3% ;
}

.jumppage-div {
	padding: 3% 3% 3% 3% ;
}

.jumppage-div .title {
	font-size: 11pt;
	font-weight: bold;
	color: #234;
}

.jumppage-div .jumplist .title {
	font-size: 11pt;
	font-weight: bold;
	color: #234;
}

.jumplist {
	margin-top: 25px;
}

.jumplist ul {
	margin-top: 8px;
	margin-bottom: 0;
}

.jumplist li {
	margin-bottom: 10px;
}

.jumplist li a {
	margin-left: 50px;
}


/* --------------------- standard utilities bar --------------------------------------------------
	help links and action buttons at top of each page just under tabs
*/

.top-utilities-bar {
	margin: 10px 0 0 3%;
}

.top-utilities-bar a {
	margin-right: 15px;
	font-size: 9pt;
	font-family: Tahoma, Arial;
}

.top-utilities-bar .related {
	margin-right: 30px;
	font-family: Verdana;
	font-style: italic;
}