/* --------------------------------------------  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 }

/* Formerly used for Clear values button in custom groups on results table options, now retired */
.button1  { 
	background-color: #e2e2e4; 
	color: #555; 
	border: #555 1px solid; 
	font-weight: bold; 
	margin-bottom: 2px; 
	padding: 0 3px 0 3px;
	cursor: pointer;
}

/* Used for standard Send and Reset buttons */
.button2  { 
/*	
	background-color: #d0d0d3; 
	color: #555; 
	font-weight: bold;
*/
/*	background-color: #f2f2f4; */
	background-image: linear-gradient(#fff, #ebebec 50%);
	color: #004; 
	font-family: Verdana; 
	font-size: 10pt; 
	padding: 0 8px 1px 8px;
	border: #668 1px solid;
	border-radius: 4px;
}

.button2:hover {
/*	background-color: #cef;*/
	background-image: linear-gradient(#fff, #acf 80%);
}


/* ------------------------------  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 {
	width: 550px;
/*	background-color: #f5f6f8;*/
	background-color: #f9f9fd; 
	margin-top: 18px;
	margin-left: auto; 
	margin-right: auto;
/*	border: 1px solid #668;*/
	border: 2px solid #8ad;
	border-radius: 4px;
/*
	border: 1px solid #bbd;
	border-right: 3px solid #bbd;
	border-bottom: 3px solid #bbd;
*/
}

#send-msg input {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

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

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

#export-text { 
	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 {
	border: 1px solid #bbd;
	margin-left: auto;
	margin-right: auto;
	width: 94%;
	border-radius: 0 8px 0 0;
}

.req-form {
	width: 100%;
}

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

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

.req-form td.hd {
	padding: 2px 6px;
/*	background: #79c; */
/*	
	--original ver 2
	background: #8ad; 
	--lighter gradient
	background-image: linear-gradient(#acf, #9be 20%, #8ad 60%);
*/
	background-image: linear-gradient(#9be, #8ad 60%);

/*	how to make a horizontal gradient:
	background-image: linear-gradient(to right, #8ad, #fff);
*/
	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: #79c;
	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: #f9f9fd; 
	color: #129; 
	font-size: 10pt;
}
.nested-table-options th a:link { color: #129; }
.nested-table-options th a:visited	{ color: #129; }

table.range  {
	margin-top: 8px;
}
.range td {
	margin: 0;
	padding: 0;
}
.range input {
	text-align: right;
}
.range td.rdefs {
	text-align: center;
	color: #000;
	font-weight: normal;
}
.range td.rto {
	padding-left: 4px;
	padding-right: 4px;
}
.range-clear {
	height: 18px; 
	width: 15px; 
	margin-left: 8px; 
	border: 1px solid #f9f9fd;
	padding: 2px 1px 0px 2px;
}
.range-clear:hover {
	border: 1px solid #48e;
	background: #ffebce;
/*	background: #f2f2cb;*/
}

table.date-range  {
	margin-top: 8px;
}
.date-range td {
	margin: 0;
	padding: 0 5px 5px 0;
}
.date-range td.rdefs {
	padding-left: 10px;
	color: #000;
	font-weight: normal;
}
.date-range td.rclear {
	vertical-align: middle; 
	padding: 0;
}

/* div used as button on vaers form to show/hide more info */
.open-close-info {
	padding: 2px 4px !important;
	margin-left: 15px;
	vertical-align: middle; 
	height: 80%;
	font-size: 9pt !important; 
	font-family: Verdana; 
	font-weight: normal; 
/*
	background-color: #fff !important; 
	color: #234; 
	border: #999 1px solid !important; 
*/
	background-color: #f2f2f4;
	color: #004; 
	border: #668 1px solid;
	border-radius: 4px;
	cursor: pointer;
}

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

.open-close-note {
	padding: 6px 0 15px 20px !important;
	font-size: 9pt;
	font-weight: normal !important;
	font-style: italic;
	color: #000 !important;
}

/*
	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.

*/

/* Old way of doing tabs, with tab-div and tab-div1. Everything (?) now uses tab-div */
.tab-div {
	background: #79c; /* blue bar in form */
	clear: both;
	padding: 0px 4px 0px 0px;
}
.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 #8ad;
	border-top: 4px solid #8ad;
	border-left: 1px solid #779;
	border-bottom: 1px solid #779;
	border-radius: 0 8px 0 0;
}


/* standard upper right rounded corner, when just need to add this to something else, like section one header right cell */
.round-top-rt {
	border-radius: 0 8px 0 0;
}

.rounded-tabs {
	position: relative;
	top: 4px;
}

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

.rounded-tabs li {
	margin: 0;
	padding: 0;
	float: left;
	margin-right: 6px;

	background-image: linear-gradient(#fff, #8ad);
/*	padding: 2px 15px 4px 15px;*/
	padding: 2px 0px 4px 0px;
	border: 1px solid #79c;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
}

.rounded-tabs li input {
	margin: 0;
	padding: 0;
	display: block;
	text-decoration: none;
	font-family: Verdana; 
	font-size: 9pt;  
	font-weight: normal;
	color: #224;
	cursor: pointer;
	border: none;
	background: none;
	padding: 0px 15px 0px 15px;
}

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

.rounded-tabs li.current  {
	background: none;
	background-color: #fff;
	border: 1px solid #779;
	border-bottom: none;
}

.rounded-tabs li.current input {
	background: none;
	border: none;
	cursor: text;
}
.rounded-tabs li.current input:hover {
	color: #224;
}

.rounded-tabs li.iagree input {
	color: #777;
}

/* anchor tags used on welcome pages */
.rounded-tabs li a {
	margin: 0;
	text-decoration: none;
	font-family: Arial; 
	font-size: 9pt;  
	font-weight: normal;
	color: #224;
	cursor: pointer;
	padding-left: 15px;
	padding-right: 15px;
}

.rounded-tabs li.current a {
	color: #224;
	font-weight: bold;
	cursor: text;
	padding-left: 15px;
	padding-right: 15px;
}

.rounded-tabs li span {
	padding-left: 15px;
	padding-right: 15px;
}



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


/*	provides background wheat to most pages. */
body {
/*
	close to original
	background-image: linear-gradient(#fff, #fff 75px, #fffcf2 115px, #ffebce 160px);
*/
	background-image: linear-gradient(#fff, #fff 80px, #fffef6 120px, #fff2d6 160px);

/*
	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%;
}


/*	
	New UI, no longer need to move wheat to div-body on short pages. Old comment:
	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, admin.xsl so far */
.notabs-div {
	background: #fff;
	border-top: 4px solid #8ad;
	border-right: 4px solid #8ad;
	border-left: 1px solid #8ad;
	border-bottom: 1px solid #8ad;
	border-radius: 0 8px 0 0;
}

.jumppage-div {
	padding: 3%;
	border-radius: 0 8px 0 0;
}

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