/******************************************************************************
 * Header
 *
 * Sets the main styles for the overall document, also sets the background to 
 * give a false-column drop shadow look.
 *****************************************************************************/
  body {
    margin:0;
    padding:0;
    font-family:Verdana, sans-serif;
    font-size:80%;
    background-repeat: repeat-y;
    background-position: 10.4em 0;
    
    /* Colors */
    background-color:#FFF;
    color:#000;
  }
  
  html>body {
    font-size:81%;
    background-repeat: repeat-y;
    background-position: 12.9em 0;
  }
  
  body a, body a:hover, body a:active, body a:visited{
    /* Colors */
    color:#47678B;
  }
    

/******************************************************************************
 * groups
 *
 * variety of groups for all pages. default group requires the group itself plus
 * header widget and content containers. Sub-groups are simply groups placed 
 * in groups and are formatted slightly different. sub-groups do not contain
 * widgets
 *****************************************************************************/
  .group{
    margin: 0 0 1.5em 0;
    padding:0px;
    clear:both;
    min-width:47.5em;
    
    /* Colors */
    border: 1px #CFCDCB solid;
    background-color:#FEFDFC;

    /* set the title bar background to be 1em from the top 
    background-repeat: repeat-x;
    background-position: 0 -11em;*/
    background:none;
  }
  
  
  .group .group{
    margin:0.8em 0.2em 0.2em 0.25em;
    
    /*mozilla only, see minWidthPad below*/
    min-width:46.3em;
    clear:both;
    padding:0;
    
    /* Colors */
    border: 1px #CFCDCB solid;
    background-color:#FEFDFC;
  }

  .columnGroup{
    width:43em;
    padding:0;
    margin:0;
  }
  
  .group p{
    margin:0.4em;
    padding:0 0.4em 0 0.4em;
  }
  
  table.twoColumn tr td.left .group {
    margin-right:0.2em;
    /*override previously set min width, not needed here*/
    min-width:0em;
  }
  
  table.twoColumn tr td.right .group{
    margin-left:0.2em;
    /*override previously set min width, not needed here*/
    min-width:0em;
  }
  
  /* The internal content div of a group. the part that collapses if needed */
  .group .groupContent{
    padding: 0.4em;
    background-color:#FEFDFC;
  }
  
  /* for tables and things that don't need padding */
  .group .groupContentNoPad{
    padding: 0;
    background-color:#FEFDFC;
  }
  
  /*
   * The h2.groupHeader is an oddity. To get IE to display the widgets on the 
   * right side of the group, even when the window gets smaller, they can't be
   * floats, however, text cannot be both align-left and align-right. This sets
   * the h2 to float left over the .groupWidgets div, making it look like it is
   * contained within it.
   */
  .group h2.groupHeader{
    padding:0 0 0 0.2em;
    margin:0;
    float:left;
    font-weight:bold;
    font-size:1em;
    
    /* Colors */
    color: #3A3A3A;
  }

  .group .group h2.groupHeader{
    margin: -0.7em 0 0 0.2em;
    font-weight:bold;
    padding: 0 0.2em 0.2em 0.2em;
    display:inline;
    float:left;
    
    /* Colors */
    background-color:#FEFDFC;
    color:#7B7466;
  }
  
  .group .groupWidgets{
    padding: 0px 2px 0px 5px;
    margin: 0px 0px 0px 0px;
    font-size: 1.1em;
    font-weight:normal;
    text-align:right;

    /* Colors */
    border-bottom: 1px #CFCDCB solid;
    color: #3A3A3A;
    background-color: #E4E2DF;
  }
  
  .group .group .groupWidgets{
    /* Colors */
    background-color:#FEFDFC;
    border-bottom: 0px #CFCDCB solid;
  }
  .group .groupWidgets img, .group .group .groupWidgets img{
    padding: 0px 0px 0px 5px;
    vertical-align:-5%;
  }
  
/******************************************************************************
 * tables
 * 
 * sets defaults for all tables, as well as the two main types of tables:
 *
 * twoColumn: used to contain left and right column overview groups
 *    the columns are named .left and .right, a center column is used to avoid
 *    IE's table-layout oddities
 *
 * editView: used to contain label/value pairs on overview/detail/edit pages
 *    a .left colum is used to contain labels, and a .right column is used to
 *    contain values. an editView table may appear within a twoColumn table
 *****************************************************************************/
  table{
    border-collapse:collapse;
    clear:both;
    border:0px;
    margin:0px;
    padding:0px;
    width:100%;
  }
  
  table tr{
    margin:0px;
    padding:0px;
    /* Colors */
    border:0px;
  }
  
  table tr td{
    margin:0px;
    padding:0px;
    vertical-align: top;
    
    /* Colors */
    border:0px;
  }
  
  table.editView{
  }
  
  table.editView tr td{
    padding:0.5em 0 0 0;
    
  }
  table.twoColumn tr td.right{
    width:50%;
  }
  
  content table.editView tr td.left{
    width:14em;
    
    /* Colors */
    border-top: 0px dotted #d5d3d1;
  }
  
  content table.editView tr td.right{
    padding-left:0.6em;
    padding-bottom:0.2em;
    
    /* Colors */
    border-bottom: 0px dotted #EAEAEA;

  }
  
  content table.twoColumn table.editView tr td.left{
    width:10em;
  }
  
  table.twoColumn table.editView tr td.right{
    width:auto;
  }
  
  label{
    /* Colors */
    color: #3A3A3A;
  }
  
  table.editView label{
    margin-left:0.5em;
  }
  
  table.editView tr td.left label{
    display:block;
  }

/******************************************************************************
 * errors
 *
 * errors that appear at the top of a page after validation fails
 * consists of a div containing the error message along with a list of
 * errors. each list-item contains a link that sets focus to the field
 * and a description of each invalid field
 *****************************************************************************/
  div#error {
    display: block;
    margin:0 0 1.5em 0;
    color:#DD0011;
    font-weight:bold;
    text-align:center;
    }


/******************************************************************************
 * Button Clusters
 *
 * similar in form to the navigation structures. button clusters are lists of 
 * items with a button-like appearance and behavior
 * two main types exist: normal and left normal button clusters float right
 * while left button clusters do not float
 *****************************************************************************/
  .buttonCluster, .buttonClusterLeft {
    float:right;
    clear:both;
    line-height:normal;
    font-size:1em;
    margin:0em;
    margin-bottom:2.2em;
  }
  
  tfoot .buttonClusterLeft{
    margin-bottom:0.2em;
  }
  
  .buttonClusterLeft{
    float:none;
  }
  
  .buttonCluster ul, .buttonClusterLeft ul {
    margin:0;
    padding:0.5em 0px 0 0;
    list-style:none;
  }
  
  .buttonCluster li, .buttonClusterLeft li {
    display:inline;
    margin:0;
    padding:0;
  }
  
  .buttonCluster a, .buttonCluster a:visited, .buttonClusterLeft a, .buttonClusterLeft a:visited {
    float:left;
    background-repeat:no-repeat;
    background-position: left top;
    margin:0 0.4em 0 0.4em;
    padding:0 0 0 9px;
    text-decoration:none;
    
    /* Colors */
    border-bottom:1px solid #505050;
    color:#404040;
        background-image: url("../image/button/left_both.gif");

  }
  
  .buttonCluster li.disabled a, .buttonClusterLeft li.disabled a{
    background-repeat:no-repeat;
    background-position: left top;
    
    /* Colors */
    border-bottom:1px solid #b8b8b8;
    color:#b8b8b8;
        background-image: url("../image/button/left_both_disabled.gif");

  }
  
  #content .buttonCluster ul li.leftOption a{
    margin-right:6em;
  }
  
  .buttonCluster a span, .buttonClusterLeft a span {
    float:none;
    display:block;
    background-repeat:no-repeat;
    background-position: right top;
    padding:4px 12px 4px 2px;
    font-weight:normal;
        background-image: url("../image/button/right_both.gif");

  }
  /*6-15 additions to style sheet*/
  
  /*set the margin on button clusters that appear inside a group */
  .groupContent .buttonCluster {
    margin-bottom: 0.4em;
  }
  
  .buttonCluster li.disabled a span, .buttonClusterLeft li.disabled a span{
    /* Images */
    background-image:url("../image/button/right_both_disabled.gif");
  }

    
    
  #content table.editView td.right .buttonCluster, #header div.buttonCluster{
    float:none;
    display:inline;
  }
  
  /* Remove the float from the links when the button is in an edit view */
  #content table.editView td.right .buttonCluster a, #header .buttonCluster a{
    float:none;
    vertical-align: .3em;
    display:inline;
  }
  
  /* 
   * add extra padding around the cluster for mozilla and remove the vertical
   * alignment
   */
  html>body #content table.editView td.right .buttonCluster a, html>body #header .buttonCluster a{
    padding: 4px 0px 4px 9px;
    vertical-align: 0em;
  }
  
  #header .buttonCluster a, #header .buttonCluster a:visited{
    padding-left: 3px;
    display:inline;
  }
  
  html>body #header .buttonCluster a, html>body #header .buttonCluster a:visited{
    padding: 2px 0px 2px 3px;
  }
  
  #content table.editView td.right .buttonCluster a span, #header .buttonCluster a span{
    display: inline;
    padding-right: 12px;
  }
  #header .buttonCluster a span, #header .buttonCluster a:hover span{
    padding: 2px 6px 2px 2px;
  }
  #content table.editView td.right .buttonCluster ul, #header .buttonCluster ul{
    display: inline;
  }
  /*End additions */
    
  .buttonCluster li.disabled a span, .buttonClusterLeft li.disabled a span{
    background-repeat: no-repeat;
    background-position: right top;
  }
  
  .buttonCluster a:active span, .buttonClusterLeft a:active span {
    /* Colors */
    color:#333;
  }
  
  .buttonCluster a:active, .buttonClusterLeft a:active, .buttonCluster a:focus, .buttonClusterLeft a:focus{
    background-position:0% -150px;
  }
  
  .buttonCluster a:active span, .buttonClusterLeft a:active span, .buttonCluster a:focus span, .buttonClusterLeft a:focus span{
    background-position:100% -150px;
  }
  
/*******************************************************************************
 * Webseal Pages
 ******************************************************************************/
  body#webseal{
    font-family:Verdana, sans-serif;
    font-size:80%;

    /* Colors */
    background-color:#f5f5f5;
  }
  
  body#webseal #logo{
    margin-bottom: 1em;
    
    /* Colors */
    background-color:#5E5E5E;
  }
  
  body#webseal #logo img{
    padding:1em;
  }
  
  body#webseal table.editView{
    width:100%;
  }
  
  body#webseal table.editView tr td.left{
    width:8em;
  }
  
  body#webseal #disclaimer, body#webseal #notice{
    color: #333;
    font-size:0.9em;
    margin:1em;
  }
  
  body#webseal div.group{
    width: 31em;
    margin-left:auto;
    margin-right:auto;
    min-width:0;
  }
  
  body#webseal div.buttonCluster{
    margin-bottom:0.5em;
  }

  body#webseal h4{
    padding:1em;
    margin:0;
    font-size:1.1em;
    color:#333;
    text-align:center;
  }