/* ==========================================================================
   Styles for standard notifications & validations on internal sites. 
   
   @TODO -- Paul wants to clarify html used to create validations; we should have snippet of html for CSS usage in here?
   ========================================================================== */

/* Validation Errors: use along with fieldError.tag 
  <span class="fieldError highlight"> label/input </span>
*/
.fieldError input, .fieldError textarea, .fieldError select, .key-value .error {
  background-color: rgba(251, 216, 216, 0.9) !important;
  border-color: #BC2F27 !important;
  margin-bottom:0;
}
.key-value .error, .key-value .caution, .key-value .success {
	padding:.05em .25em;
}
.fieldError label {
    color: #bc2f27 !important;
}

.fieldWarning input, .fieldWarning textarea, .fieldWarning select, .key-value .warning {
  background-color:#FFFACD !important;
  border-color: #D89F08 !important;
  margin-bottom:0;
}
.fieldError input.hasDatepicker {
  background: rgba(251, 216, 216, 0.41) !important;
  border-color: #BC2F27 !important;
}
.fieldWarning input.hasDatepicker {
  background-color:#FFFACD !important;
  border-color: #D89F08 !important;
}
/*
<span class="fieldWarning highlight"> label/input </span>
*/
.fieldWarning label {
    color: #9F6000 !important;
}
/* System Messages that appear at the top of a page */
.alert {
    margin: 0.5em auto;
    padding: 0;
    postion:relative;
    border: .125em solid #E10000;
    background: #FFE9E9;
    position:relative;
    color: #E10000; 
    border-radius:3px;   
    }
.alert ul {
    list-style: none;
    margin: 0;
    padding: .25em 0;
}
.alert li {
    font-weight: bold;
    margin: 0;
    padding: 0 0 0 3em;
    font-size:.6875rem;
}
/* OPTIONAL: if a generic system message with no field to tie it to, add a blank <em></em> before the text*/
.alert li em {
    background: url("images/sprite-alerts32.png") no-repeat 0 0 transparent;
    height: 3.09090em /*34px*/;
    width: 3.09090em;
    position: absolute;
    top: .25em;
    left: .5em;
}
 
/* alert is the base class; add on with error, caution, success, or info to adjust styling */
.error { /* created .error class so that js can have a distinct class to find when removing errors; same styling as .alert */
    border: .125em solid #E10000;
    color: #E10000 !important;
    background:#FFE9E9;
}
.error li em {
  background-position:0 0;
}
.error li a {
  color: #BC2F27; 
}
.error li a:hover,.error li a:focus {
  text-decoration:none;
}
.caution {
    border: .125em solid #D89F08;
    color: #9F6000 !important;
    background:lemonchiffon;
}
.caution li em {
  background-position: 0 -42px;
}
.success {
    border: .125em solid #3F561E;
    color: #3F561E !important;
    background:#F5FFFA;
 }
.success li em {
    background-position: 0 -126px;
}
.success li a {
    color: #3F561E;
}
.success li a:hover,.success li a:focus {
    color:#948A01;
}
.info {
    border: .125em solid #003b5c;
    color: #003b5c;
    background:rgba(82%, 82%, 81%, .2);
    }
.info li em {
    background-position: 0 -84px;
}

/* the following styles go on the <span> or <li> element to add correct icon to text */
.errorMsg, .infoMsg, .warningMsg, .successMsg {
    background:transparent url("images/icon-error16.png") no-repeat 0 0;
    font-size: 0.6875rem;
    margin: 0;
    padding: 0 0 0 1.75em;
    display:block;
    min-height:1.4363em
}
li.errorMsg, li.infoMsg, li.warningMsg, li.successMsg {
    height:auto;
    padding-left:1.75em;
}
.errorMsg, .errorMsg a{
    color: #bc2f27;
}
.errorMsg a, .warningMsg a {
    text-decoration:underline;
}
.errorMsg a:hover,.errorMsg a:focus, .warningMsg a:hover{
    text-decoration: none;
}
.infoMsg, .infoMsg a{
    color: #003b5c;
}
.infoMsg {
    background-image:url("images/icon_info16.png");
}
.warningMsg, .warningMsg a {
    color: #9F6000;
}
.warningMsg {
    background-image:url("images/icon_warning16.png");
    background-position: 2px 0;
}
.successMsg {
    background-image:url("images/icon_success16.png");
}

/* a tab that is shown in an error state */
.ui-tabs .ui-tabs-nav li a.tabError {
    color: #FF0000 !important;
    outline: 1px solid #FF0000;
}