/* Universal style sheet - Forms for both content and apps */
/* Revised April 11, 2007 */

form { /* sets margin and padding to zero */
	margin:0px;
	padding:0px;
}


/* ---------------------------------------------------------------------------------------------------------- */
/* styles for input fields */

/* basic settings */
input, select, textarea {
	border:1px solid #999999;
	background-color:#ffffff;
  	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

html>body input, html>body select {
	font-size:110% !important;
}

select optgroup {
	font-style:normal;
	margin-top:5px;
}

.checkBox, .radio, .checkbox /*legacy*/ {	
	border: 0px none #ffffff;
	background-color: transparent;
	display: inline; 
	width: 1.3em;
	margin-right: 4px;
}

input.imagemap {
 	width: 430px;
 	height: 258px;
}

/* simple sizing for boxes. Use these on actual input type=text, textarea, AND select(dropdown). */					
.txtBoxExsm, .txtBox40 {	
	width: 40px;
}

.txtBoxsm {	
	width: 70px;
}

.txtBox115 {
	width:118px;
}

.txtBoxmed, .txtBox125 {	
	width: 126px;
}

.txtBox60 {
	width:62px;
}

.txtBox75 {
	width:75px;
}

.txtBoxmed2, .txtBox100 {	
	width: 100px;
}

.txtBoxRegular, .txtBox150 {	
	width: 155px;
}

.txtBoxLarge, .txtBox200, {	
	width: 200px;
}

.txtBoxExLarge {	
	width: 350px;
}

.txtBoxXXLarge {	
	width: 425px;
}

.txtBox175 {
	width:175px;
}

.txtBox190 {
	width:190px;
}

.txtBox225 {	
	width: 225px;
}

.txtBox245 {	
	width: 245px;
}

.txtBox275 {
	width:275px;
}

.txtDateBox, .txtBox80 { /* input box for dates */
	width: 80px;
}

.txtSmallDateBox, .txtBox50 { /* input box for date with only a month/year */
	width:50px;
}

.txtAreaCodeBox, .txtBox25 { /* input box for area code */
	width:25px;
}

.txtPhoneBox, .txtBox35 { /* input box for phone number */
	width:35px;
}

.txtBox100Percent {
	width:99%;
}

/* end input sizes */
/* ---------------------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------------------- */
/* styles for buttons */

/* Here's an interesting thing to note: you don't HAVE to use these styles on elements of type
   <input type="button" ... >. If you use them on an ordinary <div>, that <div> will MIMIC the look of 
   a button; if you then put an anchor (<a>) element inside it, it can be a compliant, cross-browser link
   without the overhead of forms. */

.btn, .actButton, a.btn, .btnYellow, .button {	/* styles for action buttons (ie, submit, cancel, print, etc) */
	border: 1px solid #000000;		
	color: #ffffff;					
	background-color: #CC3333;  /* defaults to red for legacy compatibility */
	font-weight: bold;
	text-align: center;
	cursor: pointer; 
   	padding: 0 1px;	
	font-size: 110%;
	margin-left:0;
}

a.actButton, a.actButton:visited, a.actButton:hover {	/* styles for "mimic" action buttons. Ex: <div class="btn"> */
	color: #ffffff !important;
	text-decoration: none !important;											
	padding:2px;
}
			
a.btn , a:visited.btn, a:hover.btn  {	/* styles for "mimic" action buttons. Ex: <div class="btn"> */
	color: #ffffff;
	text-decoration: none !important;	
	padding:1px 2px 1px 2px;										
}		
	
.doButton, .btnYellow, a.doButton {	/* styles for secondary buttons */
	background-color: #FFCC00;
	color: #000000;
	font-size: 90% !important;
	font-weight: bold;
	cursor: pointer;
}

.btnYellow {
	font-size:100% !important;
}

a.doButton, a.doButton:visited, a.doButton:hover, a.button, a.button:visited, a.button:hover {
	color:#000000 !important;
	text-decoration: none !important;											
	padding:2px;	
}

a.button, a.button:visited, a.button:hover { 
	font-size:90% !important;
}

.actButtonHeight { /* used to make yellow buttons the same size as red buttons */
	height:18px;
	padding-top:-5px;
}			

.bigButton {
	font-size:110%;
}	

.cancelButton {
	background-color:#999999;
}																								
							
							
/* if you need buttons to display several in a row, surround them in a <p> 
   with class="actionButtons".
   
   Example:
   <p class="actionButtons">
   <label class="invisible>Submit</label
   <input type="button" class="btn actButton" value="Submit">
   <label class="invisible>Cancel</label
   <input type="button" class="btn actButton" value="Cancel">
   </p>   
   */

.actionButtons { 
	position: relative; 
	clear:both;
	display:block;
	margin:10px 0 10px 0;
	float:left;
	width:99%;
}

.actionButtons input { 
	float:left;
	margin-right: 5px; 
}

.actionButtons label { 
	float:left; 
	margin-right: 3px; 
}

.actionButtons label.invisible { /* all buttons need labels. To make them not display, use <label class="invisible"> */
	float:left;
	font-size:1px;
	line-height:1px; 
}



/* end actionButtons */
/* ------------------------------------------------------------------------------------------------ */


/* styles for labels and things that look like them */
/* the W3C says that a <label> element is ONLY to be used in association with the <form> tag, and even then
   ONLY AS A LABEL FOR **ONE** input element. The "label" class is added here to mimic the look of real <label>s;
   use <span class="label" if you need something with that look that doesn't go with a form element (or goes with
   several -- though CONSIDER using a <legend> instead, for that.

Input form example:
<p>
<label>First Name:</label>
<input type="text">
</p>

Input forms display using a variety of layouts, with the labels and their corresponding input fields appearing one on top of the other.
*/

label, .label  { /* for labels on input forms only. Ex: <label>Item</label> */
	display: block; 
	font-weight: bold; 
	font-size:90%;
}

.checkLabel, .checkLabel label {  /* for labels on checklists. Ex: <input type="checkbox" class="checkBox"> <span class="checkLabel">Item One</span> */
	color: #000000;
	display: block; 
	font-weight: normal !important; 
	font-size:100%;
}

 /* use .optLabel for on optiongroups where you have a <span class="label"> that defines the optiongroup. This will make it appear side-by-side with the items */
.optLabel {
	display: block;
	float: left;
	font-size: 90%;
	font-weight: bold;
	margin: 0 10px 0 0;
	width: 135px;
}

caption.label { 
	font-style: normal !important; 
	position: relative; 
	top: 0.2em !important; 
}

fieldset legend.label, fieldset fieldset.noBorder legend.label, .optiongroup label { /* style for legends you want to look JUST LIKE a label and appear flush with the margin. */
	display: block; 
	font-weight: bold; 
	font-size:90% !important;
	position: relative;
}

/* end labels */
/* ---------------------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------------------- */					
/* for forms DISPLAY -- when you are showing information from a form on a new output page. The entire section must be wrapped inside <div class="displayingForm"> in order to display properly. All display forms should show in two columns, with the labels and text appearing side-by-side. 

Display form example:
<p>
<span class="label">First Name:</span>
<span class="formData">John</span>
</p>
*/

.displayingForm .label, .displayingForm label { /* for labels on display forms only. Ex: <span class="label">Item</span> */	
	display: block;
	float: left;
	font-size: 90%;
	font-weight: bold;
	margin: 0 5px 0 0;
	width: 135px;  
}

.displayingForm {
	width:100%;
}

.displayingForm p {
	margin:0 2px 0 0 !important;
	padding:2px;
	clear:both;
}
							
.displayingForm .formData { 
	float:none;
	display:table-cell;
	width:auto;
}

.displayingForm .formData br {
	clear:none !important;
	width:auto !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* defines column sizes for multi-column layouts on apps. To use, wrap each section in <div class="twoCol"> and separate each piece you want in a separate column in a <p> or, for checklists, in an <li>. Items will wrap to subsequent lines, so only one reference is needed. Style will work with both input forms and display forms.  

Input form example:
<div class="twoCol">
<p>
<label>First Name:</label>
<input type="text">
</p>

<p>
<label>Last Name:</label>
<input type="text">
</p>
</div>

Display form example:
<div class="twoCol">
<p>
<span class="label">First Name:</span>
<span class="formData">John</span>
</p>

<p>
<span class="label">Last Name:</span>
<span class="formData">Smith</span>
</p>
</div>
*/
   
.twoCol, #app .twoCol, 
.threeCol, #app .threeCol,
.lgCol, #app .lgCol,
.quarterCol, #app .quarterCol  {
	width:100%;
	clear:both !important;
}

.twoCol:after, #app .twoCol:after, 
.threeCol:after, #app .threeCol:after,
.lgCol:after, #app .lgCol:after,
.quarterCol:after, #app .quarterCol:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.twoCol p, .twoCol li, #app .twoCol p, #app .twoCol li, 
.threeCol p, .threeCol li, #app .threeCol p, #app .threeCol li,
.quarterCol p, .quarterCol li, #app .quarterCol p, #app .quarterCol li,
.lgCol p, #app .lgCol p  {
	float:left;
	position: relative;	
	margin:0 0 3px 0;
	padding:2px;
	clear:none;
}

.lgCol p, #app .lgCol p {
	margin-top:3px;
	width:97%;	
}

.twoCol p, .twoCol li, #app .twoCol p, #app .twoCol li { /* two column app layouts */	
	width: 47%;
}

.twoCol .label, #app .twoCol .label { /* sets label width on two-column display forms */
	width:135px;
}

.threeCol p, .threeCol li, #app .threeCol p, #app .threeCol li  { /* three column app layouts */	
	width: 31%;
}

.threeCol .label, #app .threeCol .label { /* sets label width on three-column display forms */
	width:85px;
}
			
.quarterCol p, .quarterCol li, #app .quarterCol p, #app .quarterCol li { /* four column app layouts */	
	width: 23%;
}


/* ---------------------------------------------------------------------------------------------------------- */
/* use these classes to override the default size of the label in forms. Ex: <span class="label mediumLabel"> or <label class="mediumLabel"> */
.xxSmallLabel {
	width:40px !important;
}

.exSmallLabel {
	width:75px !important;
}

.smallLabel {
	width:95px !important;
}

.mediumLabel {
	width:120px !important;
}

.defaultLabel, { /* default size of labels */
	width:150px !important;
}

.appLabel { 
	width:220px !important;
	width:170px; 
}

.largeLabel { 
	width:240px !important;
	width:235px; 
}

.displayingForm .largeLabel { 
	width:250px !important;
	width:240px; 
}

.largeLabel2 { 
	width:295px !important; 
	width:290px;
}

.exLargeLabel { 
	width: 350px !important; 
}  

.xxLargeLabel { 
	width: 450px !important; 
}  

.threeColLabel { /* size to match width of labels in three-column layouts */
	width:82px !important;
}

.autoLabel { 
	width: auto !important; 
}  
								

/* ---------------------------------------------------------------------------------------------------------- */
/* styles for checklists where each item displays on a separate line. Use with column sizing styles (twoCol, threeCol, etc) to have them display in multiple columns. 

Example:
<ul class="checkList">
  <li><input type="checkbox" class="checkBox">Item one<li>
  <li>Item one<li>
  <li>Item one<li>
*/

.checkList {	
	margin: 5px 0 0 0; 
	padding: 0; 
	list-style: none;
}

.checkList li {	
	margin: 0 !important; 
	padding: 0 !important; 
	list-style: none;
	display: block; 
	width: 100%; 
	clear: both; 
	padding-bottom: 1px;	
}

.checkList .checkBox, 
.checkList .radio { 
	width: 15px; 
	clear: left; 
	display:inline;	
}
						
.checkList label {
	display: inline; 
	float: none; 
	margin-left: 0.4em; 
	position: relative; 
	top: -2px;		
}

.inLine { /* you can declare a <ul> or <ol> to be class="inLine", and all the list items will display horizontally. */
	display: inline; 
	margin-right: 10px; 
	margin-left:0;
	white-space: nowrap; 	 	

}


/* end checklists */
/* ---------------------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------------------- */
/* styles for fieldsets. Fieldsets should be used to group similar types of information (such as First Name, Last Name, Middle Initial) together, as required by Section 508. */

/* default styles, when you want the fieldset and legend to display */
fieldset {
	border:1px solid #999999;
	width:95% !important;
	padding:4px;
	margin:8px 0 8px 0;
}

fieldset:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


fieldset legend { 	
	font-size: 110%; 
	font-weight: bold;
	padding-bottom: 0.5em;
}

fieldset p {
	font-size:100%;
}

fieldset legend input.doButton {
	font-size:80%;
}

/* styles for fieldset borders you DO NOT want to display. Legends DO NOT display. */

fieldset.zeroBorder {
	margin:-10px 0 0 0;
	padding:0 0 8px 0;
	border:none;
}

fieldset.zeroBorder legend {
	text-indent: -999em; 
	color: #ffffff;
	padding-bottom:0;
	font-size:3px;
}

/* styles for fieldset borders you DO NOT want to display but still have a legend */

fieldset.noBorder {
	border: 0px none #ffffff;
	margin:0;
	padding:0 0 5px 0;
}

fieldset.noBorder legend { /* legend uses default settings and appears flush with the margine */
	display: block; 
	font-weight: bold; 
	position: relative;
	left: -6px;
	text-indent:0em;
}

/* styles for nested fieldsets */
fieldset fieldset, fieldset.zeroBorder fieldset { 
	border:1px solid #CCCCCC;
	margin-top:0;
	float:left;
	width:98%;	
	clear:both;	
	text-indent:0;
}

fieldset fieldset.noBorder {
	border: 0px none #ffffff;
	margin:0;
	padding:0;
}

fieldset fieldset legend, 
fieldset.zeroBorder fieldset legend, 
fieldset legend.smallLegend { /* styling for legends inside nested fieldsets */
	color:#666666;
	font-size:95% !important;
	margin-top:3px;
	text-indent:0; 
}

fieldset legend.smallLegend input.doButton, 
fieldset fieldset legend.smallLegend input.doButton { 
	font-size:90% !important;
}

/* styles for positioning fieldsets */
.float { /* use when you want fieldsets to float next to each other */
	float:left !important;
	clear:none;
	margin:0 8px 0 0;
}

fieldset.twoThirdsWidth, 
fieldset fieldset.twoThirdsWidth { /* sets block width to 60% when one block is larger than the other */
	width:57% !important;
	clear:none;
}

fieldset.halfWidth, 
fieldset fieldset.halfWidth { /* sets block width to two to a page */
	width:46% !important;
	clear:none;
	margin-right:5px;
}

fieldset.thirdWidth, 
fieldset fieldset.halfWidth { /* sets block width to three to a page */
	width:29% !important;
	clear:none;
	margin-right:5px;
}

fieldset.autoWidth, 
fieldset fieldset.autoWidth { 
	width:auto !important;
	clear:none;
	margin-right:5px;
}

/* styles for display fieldsets */
div.fieldSet { 
	border: 1px solid #999999; 
	margin-top: 1em; 
	margin-bottom: 1.2em; 
	clear: both; 
	padding-left: 8px; 
	padding-right: 8px; 
}

div.fieldSet span.legend { 
	position: relative; 
	top: -0.7em; 
	background-color: #ffffff; 
	padding: 0 3px; 
	font-weight: bold; 
	font-size: 105% !important;
}

/* ------------------------------------------------------------------------------------------------ */
/* styles for adding the and/or to search options on apps */
#app .searchOption, #app .searchOptionSingle {
	position:absolute;
	width:28px;
	height:34px;
	margin:18px 20px 0 -20px !important; /* firefox and ie7 */
	margin: 20px 20px 0 -20px; /* ie6 */
	padding-right:10px;	
}

#app .searchOptionSingle { /* use this searchOption for fieldsets that have only one row of inputs */
	padding-right:30px;
}

#app .searchDiv {
	margin-left:12px;
}

#app .leftMargin {
	margin:0 0 0 10px;
}

#app .leftMargin input {
	margin-left:-5px;
}


/* ------------------------------------------------------------------------------------------------ */
/* "optiongroup" fieldsets (and divs) are for when you need to have a number of inline items (usually radiobuttons,
   but occasionally with short text interspersed. */
.optiongroup { 
	width: auto; 
	float:left;
	margin:0;
	top:-4px;
	left:7px;
	display:block;
}

.optiongroup * {
	display: inline; 
	float: none;
	width: auto;
}

.optiongroup span { 
	white-space: nowrap; 
}

.optiongroup .checkBox {	
	position: relative; 
	top: 3px;
	display:inline;
}

.optiongroup .radio {	
	position: relative; 
	top: 3px;
	margin: 0 -3px 0 0 !important;
	margin: 0 -8px 0 0;	
	display:inline;
}

ul.optiongroup li {
	width:auto;
	float:left;
}

.optiongroup label {
	margin:0 5px 0 3px;
	display:inline;
	font-weight:normal;
	color:#000000;
}

ul.optiongroup label {
	display:inline;
}

span.optiongroup {
	white-space:nowrap;
	margin-top:-2px;
	display:inline;
}

p.optiongroup {
	padding:5px 5px 5px 0 !important;
	margin:2px 5px 1px 0 !important;
}

.twoCol p.optiongroup {
	margin:7px 0 0 0 !important;
	padding:0 !important;	
}

p.optiongroup span.label {
	float:left;
	display:block;
	color: #004a41;
	font-weight: bold; 
	font-size:90%;	
	padding:2px 0 1px 0px !important;
	padding:2px 0 0 0;
	white-space: normal;
}


.lgCol div.optiongroup {
	margin-top:-5px;
}

fieldset .optiongroup {
	margin:0;
}