p.details-info {
  background:  #F9F9F9 none repeat scroll 0 0;
  border:      1px dotted #999999;
  color:       #555555;
  margin:      7px;
  padding:     7px;
  font-family: sans-serif;
}

#App-NavigationDetails .details-body {
  margin-left: 7px; 
  font-size:   11px;
  font-family: sans-serif;
}

#App-NavigationDetails h2 {
  padding:   10px 10px 0;
  font-size: 12px;
  color:     #15428B;
}

#App-NavigationDetails p {
  padding: 10px 10px 5px;
}

#App-NavigationDetails p.details-text {
  font-size: 13px;
  padding: 10px 10px 5px;
}

#App-NavigationDetails ol,
#App-NavigationDetails ul {
  list-style-type:     disc;
  list-style-position: inside;
  padding:             0 0 0 10px;
}

#App-NavigationDetails li {
  padding-left: 0px;
}

#App-NavigationDetails pre {
  border-top:    1px dotted #ddd;
  border-bottom: 1px dotted #ddd;
  margin-top:    10px;
  padding:       0 5px;
  background:    #f5f5f5;
}

/* This is overriding the Ext.ux.grid.RowEditor tooltip "commit or cancel" */
/* Must include
    <script type="text/javascript" src="ext/custom/ux/Ext.ux.grid.RowEditor.js"></script>
*/
.errorTip .x-tip-body {
  font-weight: bold;
}


/* >>> Must include: <script type="text/javascript" src="ext/custom/ux/Ext.ux.form.Field.js"></script>
   >>> This is used in the '?' context sensitive help icons for fields (in metaData file, helpText property)
*/
.helpTip {
  font: inherit;
  font-size: 100%;
}

.helpTip tr td:first-child {
  padding-right: 5px;
  font-weight:   bold;
}
/* <<< ? context sensitive help icons */


/* >>> Must include: <script type="text/javascript" src="ext/custom/ux/Ext.ux.form.Field.js"></script>
   >>> Required form fields
*/
.x-form-required, textarea.x-form-required{
  background:repeat-x bottom;
  border: 1px solid;
}

.ext-webkit .x-form-required{
  border: 1px solid;
}
.x-form-required-tip .x-tip-tc {
  background: repeat-x 0 -12px;
  padding-top:6px;
}

.x-form-required-tip .x-tip-bc {
  background: repeat-x 0 -18px;
  height:6px;
}

.x-form-required-tip .x-tip-bl {
  background: no-repeat 0 -6px;
}

.x-form-required-tip .x-tip-br {
  background: no-repeat right -6px;
}

.x-form-required-tip .x-tip-body {
  padding:2px;
}

.x-form-required-tip .x-tip-body {
  padding-left:24px;
  background:transparent no-repeat 2px 2px;
}
.x-form-required, textarea.x-form-required {
  background-color:#fff;
  background-image:url(../../images/required_line.gif);
  border-color:#0174DF;
}

.x-form-required.x-form-composite {
  border: none;
  background-image: none;
}

.x-form-required.x-form-composite .x-form-required {
  background-color:#fff;
  background-image:url(../../images/required_line.gif);
  border-color:#0174DF;
}

.x-form-inner-invalid, textarea.x-form-inner-invalid {
  background-color:#fff;
  background-image:url(../../images/required_line.gif);
}
.x-form-required-tip .x-tip-tc, .x-form-required-tip .x-tip-tl, .x-form-required-tip .x-tip-tr, .x-form-required-tip .x-tip-bc,
.x-form-required-tip .x-tip-bl, .x-form-required-tip .x-tip-br, .x-form-required-tip .x-tip-ml, .x-form-required-tip .x-tip-mr
{
  background-image: url(../../images/required-tip-corners.gif);
}
.x-form-required-tip .x-tip-body {
    background-image:url(../../icons/information.gif);
}
/* <<< Required form fields */