/* form.css */

#formarea {
  margin: 0;
  padding: 0;
  width: 700px;
}

#formarea-wide {
  margin: 0;
  padding: 0;
  width: 900px;
}

.formapp fieldset {
  clear: both;
  padding: 5px;
  margin: 0;
  border-radius: 5px;
}

.formapp fieldset legend {
  font-weight: bold;
  color: #862633;
  margin: 0;
  padding: 0 5px;
  font-size:1.1em;
}

.formapp label {
  color:#333;
}

.formapp input, select, textarea {
  color: #333;
}

.formapp textarea {
  overflow: auto;
}

.formapp div {
  clear: left;
  display: block;
  width: auto;
  margin: 0;
  padding: 1px 3px;
}

.formapp div.checkgroup {
  clear: left;
  display: block;
  width: auto;
  margin: 0 0 0 350px;;
  padding: 0px 0px;
}

/* this extends to width of the div area into the yellow legend box area. This ui used on at least the ODS letter request form so that students must agre to the terms in order for the form to process*/
.formapp div.agree {
  clear: left;
  display: block;
  width: 530px;
  margin: 0;
  padding: 1px 3px;
}

.formapp div.survey {
  clear: left;
  display: block;
  width: 530px;
  margin: 0;
  padding: 1px 3px;
}

.formapp div.notes {
  width: 700px;
  height: auto;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #555555;
  background-color: #ffffe1;
  color: #555555;
}

.formapp fieldset div.notes {
  width: 700px;
  height: auto;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #555555;
  background-color: #ffffe1;
  color: #555555;
}

.formapp fieldset div.notes h4 {
  padding: 3px 0 3px 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #555555;
  color: #555555;
}

.formapp fieldset div.notes p {
  margin: 0em 0em 1.2em 0em;
  padding: 3px 0 0 0;
  color: #555555;
}

.formapp div.sidenotes {
  width: 200px;
  height: auto;
  float: right;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #555555;
  background-color: #ffffe1;
  color: #444;
}

.formapp fieldset div.sidenotes {
  width: 200px;
  height: auto;
  float: right;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #555555;
  background-color: #ffffe1;
  color: #444;
}

.formapp fieldset div.sidenotes h4 {
/*  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;*/
  padding: 3px 0 3px 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #555555;
  color: #555555;
}

.formapp fieldset div.sidenotes p {
  margin: 0em 0em 1.2em 0em;
  padding: 3px 0 0 0;
  color: #555555;
}

.formapp div.error p {
  width: 524px;
  height: auto;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #CC0000;
  background-color: #FFCCCC;
  color: #555555;
}

.formapp fieldset div.error {
  width: 524px;
  height: auto;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #CC0000;
  background-color: #FFCCCC;
  color: #555555;
}

.formapp fieldset div.error h4 {
/*  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;*/
  padding: 3px 0 3px 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #CC0000;
  color: #555555;
}

.formapp fieldset div.error p {
  margin: 0em 0em 1.2em 0em;
  padding: 3px 0 0 0;
  color: #555555;
}

.formapp div.sideerror {
  width: 200px;
  height: auto;
  float: right;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #CC0000;
  background-color: #FFCCCC;
  color: #444;
}

.formapp fieldset div.sideerror {
  width: 200px;
  height: auto;
  float: right;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #CC0000;
  background-color: #FFCCCC;
  color: #444;
}

.formapp fieldset div.sideerror h4 {
/*  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;*/
  padding: 3px 0 3px 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #CC0000;
  color: #555555;
}

.formapp fieldset div.sideerror p {
  margin: 0em 0em 1.2em 0em;
  padding: 3px 0 0 0;
  color: #CC0000;
}

.formapp div.success p {
  width: 524px;
  height: auto;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #18760f;
  background-color: #e9ffdb;
  color: #363636;
}

.formapp fieldset div.success {
  width: 524px;
  height: auto;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #18760f;
  background-color: #e9ffdb;
  color: #363636;
}

.formapp fieldset div.success h4 {
/*  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;*/
  padding: 3px 0 3px 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #18760f;
  color: #363636;
}

.formapp fieldset div.success p {
  margin: 0em 0em 1.2em 0em;
  padding: 3px 0 0 0;
  color: #363636;
}

.formapp div.sidesuccess {
  width: 200px;
  height: auto;
  float: right;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #18760f;
  background-color: #e9ffdb;
  color: #363636;
}

.formapp fieldset div.sidesuccess {
  width: 200px;
  height: auto;
  float: right;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid #18760f;
  background-color: #e9ffdb;
  color: #363636;
}

.formapp fieldset div.sidesuccess h4 {
/*  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;*/
  padding: 3px 0 3px 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #18760f;
  color: #363636;
}

.formapp fieldset div.sidesuccess p {
  margin: 0em 0em 1.2em 0em;
  padding: 3px 0 0 0;
  color: #363636;
}

.formapp div label {
  display: block;
  float: left;
  width: 350px;
  padding: 3px 5px 3px 0;
  margin: 0 0 5px 0;
  text-align: right;
}

.formapp div.survey label {
  display: block;
  float: left;
  width: 150px;
  padding: 3px 5px 3px 0;
  margin: 0 0 5px 0;
  text-align: right;
}

.formapp div.optional label, label.optional {
  font-weight: normal;
  font-size: 16px;
}

.formapp div.required label, label.required {
  font-weight: bold;
  font-size: 16px;
}

.formapp div label.labelCheckbox, div label.labelRadio {
  float: none;
  display: inline;
  width: 350px;
  padding: 0;
  margin: 0 0 5px 100px;
  text-align: left;
}

.formapp div label.labelAgreeCheckbox {
  float: none;
  display: inline;
  width: 500px;
  padding: 0;
  margin: 0 0 5px 0;
  text-align: left;
}

.formapp div fieldset label.labelCheckbox, div fieldset label.labelRadio {
  margin: 0 0 5px 0;
  width: 170px;
}

.formapp div fieldset label.labelAgreeCheckbox {
  padding: 0 0 0 0;
  margin: 0 0 5px 0;
  width: 300px;
}

.formapp div img {
  display: inline;
  vertical-align: middle;
}

.formapp div select {
  padding: 1px 3px;
  margin: 0 0 0 0;
  float:right;
  border: 1px solid #999;
  border-radius: 5px;
  height: 30px;
  font-family: inherit;
}


.formapp div textarea {
  padding: 1px 3px;
  margin: 0 0 0 0;
  border: 1px solid #999;
  border-radius: 5px;
}

.formapp div select.leftalign {
  padding: 1px 1px;
  margin: 0px 3px 3px 0px;
  float:left;
}

.formapp div textarea.leftalign {
  padding: 1px 0px;
  margin: 0 5px 3px 0;
  float:left;
}

.formapp div input.inputText {
  padding: 1px 3px;
  margin: 0 0 0 0;
  height: 25px;
  border: 1px solid #999;
  border-radius: 5px;
}

/* .formapp div input.submit {
  background-color: #ffffff;
  padding: 6px;
  background-image: url(../res/images/gray-gradient.jpg);
  background-repeat: repeat-x;
  background-position: left -72px;
}
.formapp div input.submit:hover {
  background-position:  0px -52px;
}
.formapp div input.submit:active{
  background-position:  0px -104px;
} */

.formapp div input.submit {
  background-color: #862633;
  border: none;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 5px;
}

.formapp div input.inputFile {
  width: 211px;
  border: 1px solid #999;
}

.formapp div select.selectOne, div select.selectMultiple {
  width: 211px;
  padding: 1px 3px;
}

.formapp div input.inputCheckbox, div input.inputRadio, input.inputCheckbox, input.inputRadio {
  display: inline;
  height: 25px;
  width: auto;
  background-color: transparent;
  border-width: 0;
  padding: 5px 0 0 0;
  margin: 0 0 0 0;
  vertical-align: middle;
}

.formapp div input.inputAgreeCheckbox {
  display: inline;
  height: auto;
  width: auto;
  background-color: transparent;
  border-width: 0;
  padding: 5px 0 0 0;
  margin: 0 0 0 0;
  vertical-align: top;
}

/*.formapp input.inputVerticalCheckbox {
  display: inline;
  height: auto;
  width: auto;
  background-color: transparent;
  border-width: 0;
  padding: 5px 0 0 0;
  margin: 0 0 0 135px;
  vertical-align: bottom;
}*/

.formapp div.submit {
  width: 214px;
}

.formapp div.submit div {
  display: inline;
  float: left;
  text-align: left;
  width: auto;
  padding: 0;
  margin: 0;
}

.formapp div input.inputSubmit, div input.inputButton, input.inputSubmit, input.inputButton {
  background-color: #cccccc;
  color: #000000;
  width: auto;
  padding: 0 6px;
  margin: 0;
}

.formapp div.submit div input.inputSubmit, form div.submit div input.inputButton {
  float: right;
  margin: 0 0 0 5px;
}

/*.formapp div captcha {
	text-align:center;
}*/
#captcha fieldset {
  clear: both;
  padding: 5px;
  margin: 0;
}

#captcha fieldset legend {
  font-weight: bold;
  color: #862633;
  margin: 0;
  padding: 0 5px;
  font-size:1.1em;
}
#captcha fieldset div.notes {
  width: 520px;
  height: auto;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #555555;
  background-color: #ffffe1;
  color: #555555;
}

#captcha fieldset div.notes h4 {
/*  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;*/
  padding: 3px 0 3px 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #555555;
  color: #555555;
}

#captcha fieldset div.notes p {
  margin: 0em 0em 1.2em 0em;
  padding: 3px 0 0 0;
  color: #555555;
}

#captcha fieldset div.sidenotes {
  width: 250px;
  height: auto;
  float: right;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #555555;
  background-color: #ffffe1;
  color: #444;
}

#captcha fieldset div.sidenotes h4 {
  padding: 3px 0 3px 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #555555;
  color: #555555;
}

#captcha fieldset div.sidenotes p {
  margin: 0em 0em 1.2em 0em;
  padding: 3px 0 0 0;
  color: #555555;
}



.tooltip {
  position: relative;
  display: inline-block;
  color:cornflowerblue;
  /*border-bottom: 1px dotted black;*/
  font-weight: normal;
}

.tooltip .tooltiptext-right {
  visibility: hidden;
  width: 400px;
  background-color: #efefef;
  color: #333;
  font-size: 12px;
  text-align: left;
  border-radius: 6px;
  padding: 5px 0px 5px 5px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext-right::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  /*border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;*/
}

.tooltip:hover .tooltiptext-right {
  visibility: visible;
  opacity: 1;
}


.tooltip .tooltiptext-top {
  visibility: hidden;
  width: 400px;
  background-color: #555;
  color: #fff;
  font-size: 14px;
  text-align: left;
  border-radius: 6px;
  padding: 5px 0px 5px 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext-top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext-top {
  visibility: visible;
  opacity: 1;
}


/*pre {text-indent: 30px} 

#tabmenu { 
color: #000; 
border-bottom: 1px solid black; 
margin: 12px 0px 0px 0px; 
padding: 0px; 
z-index: 1; 
padding-left: 10px } 

#tabmenu li { 
display: inline; 
overflow: hidden; 
list-style-type: none; } 

#tabmenu a, a.active { 
color: #aaaaaa; 
background: #295229;
font: normal 1em verdana, Arial, sans-serif; 
border: 1px solid black; 
padding: 2px 5px 0px 5px; 
margin: 0px; 
text-decoration: none;
cursor:hand; } 

#tabmenu a.active { 
background: #ffffff; 
border-bottom: 3px solid #ffffff; } 

#tabmenu a:hover { 
color: #fff; 
background: #ADC09F; } 

#tabmenu a:visited { 
color: #E8E9BE; } 

#tabmenu a.active:hover { 
background: #ffffff; 
color: #DEDECF; } 

#content {font: 0.9em/1.3em verdana, sans-serif; 
text-align: justify; 
background: #ffffff; 
padding: 20px; 
border: 1px solid black; 
border-top: none; 
z-index: 2; } 

#content a { 
text-decoration: none; 
color: #E8E9BE; } 

#content a:hover { background: #aaaaaa; }*/