/**
 * CONTENT.CSS
 *
 * @note		This file holds core styles for layout and design of the #content DIV of the page.
 * 				This does not cover homepage styles.
 * 				This document is commented in a method defined by cssDoc: http://cssdoc.net/
 * @author		NavigationArts (tstephens@navigationarts.com)
 **/

@media screen {

  #content div.hr {
    font-size: 1px;
    height: 1px;
    overflow: hidden;
    border-bottom: 1px dotted #b3b3b3;
  }
    #content div.hr hr {
      display: none;
    }

/**
 * @section		LEFT COLUMN
 * @note		white background area; no definitions for this container
 * 				items are defined within their immediate containers
 **/

  #contentMain {
    float: left;
    width: 700px;
  }

/**
 * @section		TITLE
 * @note		above the 'add to favorites' bar. should be on every page besides the homepage
 **/

  #contentTitle {
    color: #362f2d;
    padding: 10px 10px 4px 10px;
  }
    #contentTitle h1 {
      font: normal 20px/26px Arial, Helvetica, sans-serif;
      margin: 0;
      color: #362f2d;
      padding: 0 0 0 9px;
    }
      #contentTitle h1 span.copyright {
        display: none;
      }
      /**
       * @note		images are used as titles on state pages
       **/
      #contentTitle h1 img {
        margin: 0 0 5px -9px;
      }

/**
 * @section		BREADCRUMB
 * @note		immediately following the title. should be present on all pages more than 2 levels deep
 * 				and that aren't articles. this is coded as a nested UL denoting heirachy, and floated so
 * 				it renders as one line.
 **/

  #contentBreadcrumb {
    padding: 0 20px 5px 20px;
  }
    #contentBreadcrumb a {
      color: #808080;
      font: normal 11px/15px Tahoma, Arial, Helvetica, sans-serif;
      text-decoration: none;
      padding: 0 10px 0 0;
      margin: 0 7px 0 0;
      background: url(../img/design/nav/breadcrumb/arrow.gif) 100% 7px no-repeat;
      display: inline-block;
    }
      #contentBreadcrumb a[href]:hover {
        color: #0068a2;
        text-decoration: underline;
      }
      #contentBreadcrumb a.last-child {
        background: none;
      }

/**
 * @section		FUNCTIONS
 * @note		immediately following the breadcrumb. this bar's content is inserted via JS.
 **/

  #contentFunctions {
    background: url(../img/design/content/bgFunctions.gif) top left no-repeat;
    height: 38px;
    width: 660px;
    text-align: right;
    position: relative; /** @note	so the dropdown menu can be positioned absolutely **/
    margin: 0 20px;
    z-index: 3;
  }
    #contentFunctions a {
      cursor: pointer; /** @note	since some of the links don't have an HREF attribute **/
    }
      #contentFunctions #functionsRss,
      #contentFunctions #jsFunctionsShare,
      #contentFunctions #jsFunctionsFavorites,
      #contentFunctions #jsFunctionsPrint,
      #contentFunctions #jsFunctionsEdit,
      #contentFunctions #jsFunctionsCreate,
    #contentFunctions #jsFunctionsImport{
        height: 25px;
        text-indent: -9999px;
        float: right;
        text-align: left;
      }
      #contentFunctions #functionsRss {
        width: 117px;
        background: url(../img/design/content/rss.gif) top left no-repeat;
      }
      #contentFunctions #jsFunctionsShare {
        width: 98px;
        background: url(../img/design/content/share.gif) top left no-repeat;
      }
      #contentFunctions #jsFunctionsFavorites {
        width: 115px;
        background: url(../img/design/content/favorites.gif) top left no-repeat;
      }
      #contentFunctions #jsFunctionsPrint {
        width: 65px;
        background: url(../img/design/content/print.gif) top left no-repeat;
      }
      #contentFunctions #jsFunctionsEdit {
        width: 127px;
        background: url(../img/design/content/editProject.png) top left no-repeat;
      }
      #contentFunctions #jsFunctionsCreate {
        width: 127px;
        background: url(../img/design/content/createProject.png) top left no-repeat;
      }
    #contentFunctions #jsFunctionsImport {
        width: 127px;
        background: url(../img/design/content/importProjects.png) top left no-repeat;
      }


    /** @note	dropdown menu for the 'share' function. **/
    #contentFunctions div {
      padding: 5px;
      width: 138px;
      position: absolute;
      top: 15px;
      right: -34px;
      display: none;
    }
      #contentFunctions div ul {
        text-align: left;
        background: #fcfcfc;
        border: 1px solid #e2e2e2;
      }
        #contentFunctions div li {
          border-bottom: 1px dotted #d2d2d2;
        }
          #contentFunctions div li:last-child {
            border-bottom: 0;
          }
        #contentFunctions div a {
          display: block;
          padding: 6px 9px 6px 25px;
          font: normal 11px/11px Tahoma, Arial, Helvetica, sans-serif;
          color: #6a7074;
          text-decoration: none;
        }
              #contentFunctions #jsFunctionsStumbleUpon { background: url(../img/design/content/stumbleUpon.gif) 5px center no-repeat; }
              #contentFunctions #jsFunctionsDigg        { background: url(../img/design/content/digg.gif)        5px center no-repeat; }
              #contentFunctions #jsFunctionsReddit      { background: url(../img/design/content/reddit.gif)      5px center no-repeat; }
              #contentFunctions #jsFunctionsDelicious   { background: url(../img/design/content/delicious.gif)   5px center no-repeat; }
              #contentFunctions #jsFunctionsFurl        { background: url(../img/design/content/furl.gif)        5px center no-repeat; }
              #contentFunctions #jsFunctionsTechnorati  { background: url(../img/design/content/technorati.gif)  5px center no-repeat; }
              #contentFunctions #jsFunctionsFacebook    { background: url(../img/design/content/facebook.gif)    5px center no-repeat; }

          #contentFunctions div a:hover {
            text-decoration: none;
            color: #333;
          }

/**
 * @section		LEFT NAV
 * @note		not always on the page. the BODY class determines if this fits into the page layout.
 * 				if an HTML mistake is made, and the left nav DIV is included when it shouldn't be (as
 * 				defined by the BODY class) it won't show.
 * 				LIs have the 'border' BG images, the As have the 'arrow' BG images.
 **/

  #contentNav {
    float: left;
    width: 209px;
    padding: 0 0 48px 1px;
  }
    body.templateWithoutLeftNav #contentNav {
      display: none;
    }

/**
 * @section		LEFT NAV LEVEL ONE
 **/

  #contentNav li {
    background: url(../img/design/nav/left/li1.gif) bottom right no-repeat;
    padding: 1px 0 2px 0;
  }
    #contentNav li.open {
      background: none; /** @note	since the nested LIs have BG images, this one doesn't need one **/
    }

  #contentNav li a {
    color: #2971a7;
    font: normal 12px/16px Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    padding: 4px 0 4px 19px;
  }
    /** @note	OPEN defines that this LI has children and the user is on it, or one of it's children. **/
    #contentNav li.open a,
    #contentNav li      a:hover {
      color: #362f2d;
    }
    /** @note	the class ON determines that this is the page that the user is on. **/
    #contentNav li.on a {
      background: #2971a7 url(../img/design/nav/left/a2.gif) 9px 9px no-repeat;
      color: #fff;
    }

/**
 * @section		LEFT NAV LEVEL TWO
 **/

  #contentNav li.on li a {
    background: none;
    color: #362f2d;
  }
  #contentNav li li {
    background: url(../img/design/nav/left/li2.gif) bottom right no-repeat;
  }
    #contentNav li li.last-child {
      background: url(../img/design/nav/left/li1.gif) bottom right no-repeat;
    }
  #contentNav li li a {
    padding: 4px 4px 4px 38px;
  }
    #contentNav li li a:hover {
      color: #2971a7;
    }
    #contentNav li.open li.on a {
      background: #2971a7 url(../img/design/nav/left/a2.gif) 9px 9px no-repeat;
      color: #fff;
    }

/**
 * @section		LEFT NAV LEVEL THREE
 **/

  #contentNav li.open li.on li a {
    background: none;
    color: #362f2d;
  }
  #contentNav li li li {
    background: url(../img/design/nav/left/li2.gif) bottom right no-repeat;
  }
    #contentNav li li li.last-child {
      background: url(../img/design/nav/left/li1.gif) bottom right no-repeat;
    }
  #contentNav li li li a {
    padding: 4px 4px 4px 57px;
  }
    #contentNav li li li a:hover {
      color: #2971a7;
    }
    #contentNav li.open li.open li.on>a {
      background: #2971a7 url(../img/design/nav/left/a2.gif) 9px 9px no-repeat;
      color: #fff;
    }

  /*
  ** The following is to make sure that nested lists in the
  ** contentNav div are indented. The default indents for ul
  ** is set to 0 in reset.css
  */
  #contentNav li li li ul,
  #contentNav li li li li ul	{
    margin-left: 20px;
  }

/**
 * @section		MAIN CONTENT
 **/

  #contentBody,
  #siteMessage {
    font: normal 12px/18px Arial, Helvetica, sans-serif;
    color: #4b4b4b;
  }
    #contentBody {
    padding: 0 20px 48px 20px;
  }
  #siteMessage {
     padding-left: 3px;
     padding-right: 77px; /* leave room for close button */
  }
    body.templateWithoutLeftNav #contentBody { }
    body.templateWithLeftNav #contentBody {
      float: left;
      width: 450px;
    }

/**
 * @section		MAIN CONTENT BASIC STYLES
 **/

  #contentBody a { }
    #contentBody a:link {
      color: #00476e;
      text-decoration: underline;
    }
    #contentBody a:visited {
      color: #0068a2;
      text-decoration: underline;
    }
    #contentBody a:active {
      color: #0068a2;
      text-decoration: none;
    }
    #contentBody a:hover {
      color: #0068a2;
      text-decoration: none;
    }
  #contentBody abbr,
  #contentBody acronym {
    text-transform: uppercase;
    font-size: 85%;
    letter-spacing: 0.1em;
  }
  #contentBody abbr[title],
  #contentBody acronym[title],
  #contentBody dfn[title] {
    cursor: help;
    border-bottom: 1px dotted #362f2d;
  }
  #contentBody b,
  #contentBody u {
    font-style: normal;
    text-decoration: none;
  }
  #contentBody blockquote {
    padding-left: 1em;
    border-left: 1px solid #ccc;
    margin-left: 2em;
  }

  /* this is the blockquote
  *  for the Ephox editor dropdown
  */


  #contentBody p.blockquote	{
    padding-left: 2em;
    margin-left: 4em;
  }

/*
** For styling photo captions
*/
p.caption	{
  font-size: 80%;
  font-style: italic;
}

  /**
   ** This is to add margins to the inline images
   ** that are being inserted via Ephox
  **/

  div.featuredImage	{
    margin: 5px 10px 10px 10px;
  }

  div.featuredImageFullSize	{
    width: 100%;
    margin: 0;
    padding:0;
  }

  div.featuredImage img	{
    padding: 0;
  }


  /* Back to Top Styles */

  p.backToTop	{
    text-align: right;
    size: 80%;
    font-style: italic;
  }

  #contentBody code,
  #contentBody kbd,
  #contentBody samp,
  #contentBody pre,
  #contentBody tt,
  #contentBody var {
    color: #d48a2d;
    font-family: monospace;
  }
  #contentBody cite,
  #contentBody em,
  #contentBody dfn {
    font-style: italic;
  }
  #contentBody dt {
    margin: 8px 0 4px 0;
    font-weight: bold;
  }
  #contentBody fieldset,
  .modalBody fieldset {
    border: 1px solid #ccc;
    padding: 16px 16px 4px 16px;
    margin: 0 0 20px 0;
  }
  #contentBody h1,
  #contentBody h2 {
    clear: both;
    color: #00543d;
    font: normal 16px/20px Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #babab9;
    padding-bottom: 8px;
    margin: 24px 0 12px 0;
  }
    #contentBody h1 a,
    #contentBody h2 a,
    #contentBody h1 a:visited,
    #contentBody h2 a:visited {
      color: #00543d;
      text-decoration: none;
    }
  #contentBody h3 {
    color: #362f2d;
    font: bold 14px/18px Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0;
    text-decoration: none;
  }
    #contentBody h3 a,
    #contentBody h3 a:visited {
      color: #362f2d;
      text-decoration: none !important;
    }

    #contentBody h3 a:hover	{
      text-decoration: underline !important;
    }

  #contentBody h4 {
    color: #00543d;
    font: bold 12px/16px Arial, Helvetica, sans-serif;
    margin: 0 0 3px 0;
    text-decoration: none;
  }
    #contentBody h4 a,
    #contentBody h4 a:visited {
      color: #00543d;
      text-decoration: none;
    }
  #contentBody h5,
  #contentBody h6 {
    color: #362f2d;
    font: bold 12px/16px Arial, Helvetica, sans-serif;
    margin: 0 0 1px 0;
    text-decoration: none;
  }
    #contentBody h5 a,
    #contentBody h6 a,
    #contentBody h5 a:visited,
    #contentBody h6 a:visited {
      color: #362f2d;
      text-decoration: none;
    }
    #contentBody h1 a:hover,
    #contentBody h2 a:hover,
    #contentBody h3 a:hover,
    #contentBody h4 a:hover,
    #contentBody h5 a:hover,
    #contentBody h6 a:hover {
      text-decoration: underline;
    }
  #contentBody hr,
  #contentBody p,
  #contentBody ul,
  #contentBody ol,
  #contentBody dl,
  #contentBody pre,
  #contentBody address,
  #contentBody table,
  #contentBody form {
    margin: 0 0 12px 0;
  }
  #contentBody ins {
    text-decoration: none;
    border-bottom: 1px dotted #362f2d;
  }
  #contentBody legend {
    padding: 0 16px;
    font: bold 14px/14px Arial, Helvetica, sans-serif;
    color: #666;
  }
  #contentBody q {
    quotes: "\201C""\201D""\2018""\2019";
  }
  #contentBody q:before {
    content:'\201C';
  }
  #contentBody q:after {
    content:'\201D';
  }
  #contentBody q q:before {
    content:'\2018';
  }
  #contentBody q q:after {
    content:'\2019';
  }
  #contentBody strong,
  #contentBody th {
    font-weight: bold;
  }
  #contentBody sub {
    font-size: 85%;
    vertical-align: sub;
  }
  #contentBody sup {
    font-size: 85%;
    vertical-align: super;
  }

  #contentBody table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  #contentBody th,
  #contentBody td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ccc;
  }
  #contentBody th,
  #contentBody td {
    padding: .8em;
  }
  #contentBody table.noborder {
        border-top: 0px;
        border-left: 0px;
    }
    #contentBody table.noborder th,
    #contentBody table.noborder td {
        border-bottom: 0px;
        border-right: 0px;
    }
  #contentBody ol {
    list-style: decimal outside;
  }
  #contentBody ul {
    list-style: disc outside;
  }
  #contentBody ul,
  #contentBody ol {
    margin-left: 2.2em;
  }
  #contentBody ul ul,
  #contentBody ol ul,
  #contentBody ul ol,
  #contentBody ol ol {
    margin-bottom: 0;
  }
  #contentBody table {
    border-collapse: collapse;
  }


/**
 * @section		MAIN CONTENT FROM
 * @note		assumes a table/fieldset wrapper
 **/
  #contentBody table.layout div.field {
    padding: 0 16px 10px 16px;
  }
    #contentBody table.layout div.fieldCheckbox {
      padding: 5px 16px 5px 16px;
    }
    #contentBody table.layout div.fieldCheckbox label {
      position: relative;
      display: block;
      padding: 0 0 0 25px;
    }
    #contentBody table.layout div.fieldCheckbox label input {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      width: auto; /* @workaround	FF2 fix */
    }
      * html #contentBody table.layout div.fieldCheckbox label input {
        zoom: 1;
        left: -25px;
      }
      *+html #contentBody table.layout div.fieldCheckbox label input {
        zoom: 1;
      }
  #contentBody table.layout div.field span.required {
    color: #f33;
  }
  #contentBody table.layout div.field span.error {
    color: #f33;
    display: block;
    padding: 2px 0 5px 0;
  }
  #contentBody span.error {
    color: #f33;
        display: block;
        padding: 2px 0 5px 0;
  }
  span.error {
     color: #f33;
  }
  #contentBody table.layout div.full {
  }

  #contentBody table.layout label {
    font: normal 14px/14px Arial, Helvetica, sans-serif;
    padding: 2px 0;
    cursor: pointer;
  }
    #contentBody table.layout label:hover {
      color: #00476e;
    }
  #contentBody table.layout input {
    font: normal 16px/16px Arial, Helvetica, sans-serif;
    padding: 2px;
    width: 100%;
    color: #00476e;
  }
  #contentBody table.layout select {
    font: normal 16px/16px Arial, Helvetica, sans-serif;
    padding: 2px;
    width: 100%;
    color: #00476e;
  }
  #contentBody div.submit {
    text-align: right;
  }
    #contentBody fieldset div.submit {
      text-align: center;
      padding: 0 16px 10px 16px;
    }
    #contentBody div.submit input {
      font: normal 16px/16px Arial, Helvetica, sans-serif;
    }


/**
 * @section		MAIN CONTENT CUSTOM CLASSES
 **/
  #contentBody h2.alt {
    clear: none;
    color: #362f2d;
    font: normal 20px/26px Arial, Helvetica, sans-serif;
    border-bottom: 0;
    margin: 0;
    padding: 0 0 4px 0;
  }
    #contentBody h2.alt span {
      display: block;
      font: italic 12px/12px Arial, Helvetica, sans-serif;
      color: #362f2d;
      padding: 0;
    }

  #contentBody a.more,
  a.more	{
    background: url(../img/design/content/body/readMore.gif) right center no-repeat;
    padding: 0 10px 0 0;
    text-decoration: underline;
  }

  div.widget a.more	{
    display: inline;
  }

  #contentBody a.more:hover,
  a.more:hover	{
    text-decoration: none;
  }

  #contentBody table.layout {
    border: 0;
  }
  #contentBody table.layout th,
  #contentBody table.layout td {
    border: 0;
    padding: 0;
  }

  /* p.more is to put the ability to style a 'read more'
  *   link in the Ephox dropdown box
  */

/*
  p.more	{
    display: inline;
    padding: 0;
  }
*/

  #contentBody p.more a	{
    margin: 0;
    padding: 2px 10px 2px 0;
    background: url(../img/design/content/body/readMore.gif) right center no-repeat;
  }

  #contentBody div.hr {
    margin: 0 0 12px 0;
  }
    #contentBody div.hr hr {
      display: none;
    }
  #contentBody div.field {
    padding: 0 0 10px 0;
    position: relative;
  }
    /*
     * @workaround	IE7 has a position bug that will not render the OPTIONs above the field
     * 				beneath it unless the parent, DIV.field, has a z-index on it. but not all
     * 				DIV.field can have a z-index. So this is a special case.
     */
    * html #contentBody div.fieldSelect {
      z-index: 1;
    }
    *+html #contentBody div.fieldSelect {
      z-index: 1;
    }
    /*
     * @note	cant use over:auto here because of SELECT fields will overflow, and we dont want
     * 			this to scroll.
     */
    #contentBody div.field:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    /*
     * @workaround	clearfix for IE.
     */
    * html #contentBody div.field {
      height: 1%;
    }
    *+html #contentBody div.field {
      height: 1%;
    }

  /**
   * @note	used after a UL.additionalChildren. it contains a link to a search result
   * 			page that will return more (additional) results.
   **/
  #contentBody p.additional {
    border-top: 1px solid #babab9;
    padding: 8px 0 6px 0;
  }
    #contentBody p.additional a {
      font-size: 14px;
      background: url(../img/design/content/body/findAdditional.gif) right center no-repeat;
      padding: 0 12px 0 0;
      text-decoration: none;
    }

  /**
   * @note	a stylized list. meant for a collection of links. this list isn't built
   * 			to contain anything other than one A per LI, and it's not intended to be nested
   * 			or have a nested UL. it's intent is for section headers as links. the only use in
   * 			the current designs is on the homepage.
   **/
  #contentBody ul.linkList {
    list-style: none;
    margin: 0;
  }
    #contentBody ul.linkList li {
      border-bottom: 1px dotted #babab9;
      padding: 1px 0;
    }
      #contentBody ul.linkList li.last-child {
        border-bottom-color: #fff; /* dont want a shift */
      }
    #contentBody ul.linkList a {
      display: block;
      background: url(../img/design/content/body/findAdditional.gif) right center no-repeat;
      font-size: 14px;
      padding: 2px 20px 2px 0;
    }
      #contentBody ul.linkList a:hover {
        text-decoration: none;
      }

  /**
   * @note	a stylized list. meant for a collection of A.more links. this list isn't built
   * 			to contain anything other than one A per LI, and it's not intended to be nested
   * 			or have a nested UL.
   **/
  #contentBody ul.moreList {
    list-style: none;
    margin: 0;
  }
    #contentBody ul.moreList li {
      border-bottom: 1px dotted #babab9;
      padding: 1px 0;
    }
      #contentBody ul.moreList li.last-child {
        border-bottom-color: #fff; /** dont want a shift **/
      }
    #contentBody ul.moreList a {
      background: url(../img/design/content/body/readMore.gif) right center no-repeat;
      font-size: 12px;
      padding: 2px 10px 2px 0;
    }
      #contentBody ul.moreList a:hover {
        text-decoration: none;
      }
  /**
   * @note	a stylized list. meant for a collection of news links. only used on the 'Audience' page type.
   **/
  #contentBody ul.newsList {
    list-style: none;
    margin-left: 0;
    border: 1px solid #b7b7b7;
  }
    #contentBody ul.newsList li {
      padding: 4px 10px 4px 18px;
      background: #fff url(../img/design/content/body/newsUpdatesLiOffBg.gif) 8px 10px no-repeat;
    }
      #contentBody ul.newsList li.alt {
        background-color: #f5f5f5;
      }

  /**
   * @note	a stylized list. meant for a collection of important children. This list is generated via the CMS.
   * 			content authors will not be able to choose this CLASS. it is used on landing pages. it consists
   * 			of two columns, the DIV.featuredImage and the DIV.content objects.
   * 			this contains a slightly smaller version of the DIV.featuredImage wrapper.
   **/
  #contentBody ul.featuredChildren {
    list-style: none;
    margin: 0;
  }
    #contentBody ul.featuredChildren li {
      padding: 12px 0 0 0;
      border-bottom: 1px dotted #b3b3b3;
      clear: both;
      min-height: 116px;
      overflow: auto;
    }
      #contentBody ul.featuredChildren li.first-child {
        padding: 0;
      }
      /**
       * @workaround	clearfix
       **/
      * html #contentBody ul.featuredChildren li {
        height: 1%;
      }
      #contentBody ul.featuredChildren li.last-child {
        border-bottom: none;
      }
      #contentBody ul.featuredChildren li div.featuredImage {
        width: 124px;
        float: left;
        padding: 1px 12px 0 0;
        margin: 0;
      }
        #contentBody ul.featuredChildren li div.featuredImage p {
          text-align: left;
          padding: 3px 3px 3px 15px;
          text-indent: -11px;
        }
        /*
        This is being commented out while I verify that the new bg image is working
        #contentBody ul.featuredChildren li div.featuredImage div {
          background: url(../img/design/content/imgBg120.gif) bottom left no-repeat;
          display: block;
          padding: 1px 2px 3px 2px;
          width: 120px;
        }
        */
      #contentBody ul.featuredChildren li div.content {
        float: left;
      }
        body.templateWithLeftNav #contentBody ul.featuredChildren li div.content {
          width: 284px;
        }
        body.templateWithoutLeftNav #contentBody ul.featuredChildren li div.content {
          width: 524px;
        }
        #contentBody ul.featuredChildren li div.content h3 a,
        #contentBody ul.featuredChildren li div.content h3 a:visited {
          color: #000;
        }

  /**
   * @note	search results list
   **/
  #contentBody ol.searchResults {
    margin: 0 0 10px 30px;
    list-style: decimal outside;
    overflow: visible;
  }
    #contentBody ol.searchResults li {
      padding: 0;
      margin-top: 12px;
      border-bottom: 1px dotted #b3b3b3;
      vertical-align:top;
      clear: both;
      min-height: 75px;
    }
      #contentBody ol.searchResults li.last-child {
        border-bottom-color: #fff;
      }
      /**
       * @workaround	clearfix
       **/
      * html #contentBody ol.searchResults li {
        height: 1%;
      }
      #contentBody ol.searchResults li div.featuredImage {
        width: 72px;
        float: left;
        padding: 1px 12px 0 0;
      }
        #contentBody ol.searchResults li div.featuredImage p {
          text-align: left;
          padding: 3px 3px 3px 15px;
          text-indent: -11px;
        }
        #contentBody ol.searchResults li div.featuredImage div {
          background: url(../img/design/content/imgBg70.gif) bottom left no-repeat;
          display: block;
          padding: 1px 2px 3px 2px;
          width: 68px;
        }
      #contentBody ol.searchResults li div.content {
      }
        #contentBody ol.searchResults li div.content h3 a:visited {
          color: #000;
        }

  #contentBody div.searchPages {
    text-align: center;
  }
    #contentBody div.searchPages strong {
      padding: 0 2px;
    }
    #contentBody div.searchPages a {
      text-decoration: underline;
      padding: 0 2px;
    }

  /**
   * @note	a stylized list. meant for a collection of not so important children. This list is generated via the CMS.
   * 			content authors will not be able to choose this CLASS. it is used on landing pages.
   **/
  #contentBody ul.additionalChildren {
    list-style: none;
    margin: -12px 0 0 0;
  }
    #contentBody ul.additionalChildren li {
      padding: 12px 0 0 0;
      border-bottom: 1px dotted #b3b3b3;
      clear: both;
    }
      #contentBody ul.additionalChildren li.last-child {
        border-bottom: none;
      }
    #contentBody ul.additionalChildren li h3 { }
      #contentBody ul.additionalChildren li h3 a,
      #contentBody ul.additionalChildren li h3 a:visited {
        color: #000;
      }

  /**
   * @note	this is the wrapper that goes around each inserted image. it contains a BG dropshadow
   * 			and a wrapper to contain a copyright notice.
   **/
  #contentBody div.sampleMap div.featuredImage {
    float: none;
  }
  #contentBody div.featuredImage {
    float: right;
    /*
    width: 164px;
    padding: 3px 0 6px 12px;
    */
  }
  div.featuredImage a {
    cursor: pointer;
  }
    /*
    #contentBody div.featuredImage div {
      background: url(../img/design/content/imgBg160.gif) bottom left no-repeat;
      padding: 1px 2px 3px 2px;
      width: 160px;
    }
    */

/* The following is for the new drop shadow */
div.rightBorder	{
  float: left;
  margin: 0;
  padding: 0 3px 0 0;
  background: url(../img/right.gif) right bottom no-repeat;
  }

div.leftBorder	{
  float: left;
  margin: 0;
  padding: 0 0 3px 3px;
  background: url(../img/left.gif) left bottom no-repeat;
  }

div.copy	{
  clear: both;
  background-image: none;
  }

div.leftBorder div.rightBorder a img,
div.leftBorder div.rightBorder img	{
  float: left;
  margin: 0;
  padding: 0;
  }

  #modalOverlay {
                position:fixed;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background:#000;
                opacity:0.5;
                filter:alpha(opacity=50);
                z-index: 9997;
            }

            #modal {
                position:absolute;
                background:url(../img/design/lightbox/tint20.png) 0 0 repeat;
                background:rgba(0,0,0,0.2);
                border-radius:14px;
                padding:8px;
                z-index: 9999;
            }

            #modalContent {
                border-radius:8px;
                background:#fff;
                padding:20px;
                z-index: 9999;
                font: normal 12px/18px Arial, Helvetica, sans-serif;
            }

            #modalClose {
                position:absolute;
                background:url(../img/design/lightbox/close.gif) 0 0 no-repeat;
                width:24px;
                height:27px;
                display:block;
                text-indent:-9999px;
                top:-7px;
                right:-7px;
                z-index: 9999;
            }

            /* used by uploadProject*/
            #modalContentScrollable {
                max-width: 700px;
                max-height: 400px;
                overflow-y: scroll;
            }

            #modalContentScrollable ul {
                list-style: disc outside;
                margin-left: 15px;
            }
    } /* end of @media screen */

@media all {
    .superscript {
        font-size: 70%;
          vertical-align: super;
            font-weight: normal;
    }

    #contentBody #comprehensiveMapReport table {
        margin-bottom: 5px;
    }

    #contentBody #comprehensiveMapReport table thead th {
        text-align: center;
    }

        #contentBody #comprehensiveMapReport table th {
            padding: 2px;
      text-align: right;
      font-weight: bold;
        }

    #contentBody #comprehensiveMapReport table td {
        padding: 2px;
    }

    #contentBody #comprehensiveMapReport .fieldHeader {
        font-weight: bold;
    }

    #contentBody div.featuredImage p,
    #contentBody div.featuredImageFullSize p{
      margin: 0;
      padding: 3px;
      font: normal 9px/9px Tahoma, Arial, Helvetica, sans-serif;
    }
      #contentBody div.featuredImage p span {
        display: none;
      }
  /**
   * @note	My Account widgets
   **/
  #contentBody div.myAccountWidget {
    border: 1px solid #cececb;
  }
    #contentBody div.myAccountWidget h2 {
      border: 0;
      background: #fafaf9;
      font: normal 16px/20px Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 5px 11px;
      color: #00543d;
      border-bottom: 1px solid #cececb;
      padding-bottom: 8px;
      position: relative;
    }
      #contentBody div.myAccountWidget h2 a {
        position: absolute;
        top: 8px;
        right: 10px;
        font: normal 12px/14px Arial, Helvetica, sans-serif;
        color: #000;
        background: url(../img/design/content/body/myAccountMore.gif) center right no-repeat;
        padding: 0 18px 0 0;
      }
    #contentBody div.myAccountWidget table {
      border: 4px solid #fff;
      margin: 0;
      border-collapse: separate;
    }
    #contentBody div.myAccountWidget th {
      background: #fafaf9;
      color: #000;
      font: normal 14px/16px Arial, Helvetica, sans-serif;
      border: 0;
      margin: 0;
      padding: 8px 0 8px 4px;
      border-bottom: 1px solid #cececb;
    }
    #contentBody div.myAccountWidget td {
      border: 0;
      padding: 4px 6px;
    }
    #contentBody div.myAccountWidget tr.zebra td {
      background: #f4f4ef;
    }

/**
 * @section   MAIN CONTENT CUSTOM CLASSES (project form)
 * @notes   used on the edit project page type.
 **/

 #contentBody #projectForm .ui-jqgrid table{
    margin-bottom: 0px;
    border: 0px;
 }

 #contentBody #projectForm .ui-jqgrid .removeRowBtn{
    height: 26px;
 }

 #projectForm .ui-jqgrid td,
 #projectForm .ui-jqgrid th {
  border-bottom: 0px;
  padding: 0 2px 0 2px;
 }

 #contentBody #projectForm .ui-jqgrid-hdiv {
  border-bottom: 0px;
 }

 .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }

 #contentBody #projectForm #projectEditSites {
  border: 1px solid black;
  height: 450px;

  display: flex;
  flex-direction: column;
  position: relative;
 }

  #contentBody #projectForm table.layout div.field {
    padding: 0 5px 10px 0px;
  }

  #contentBody #projectForm table.layout div.field textarea {
    min-width: 100%;
  }

  #contentBody #projectForm table.layout div.field select {
    min-width: 101%;
  }


 #contentBody #projectForm #projectEditSites table, #contentBody #projectForm #projectEditSites th, #contentBody #projectForm #projectEditSites td {
  padding: 0;
  margin: 0;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesTopPane {
  flex: 1 0 350px;
  display: flex;
  flex-direction: row;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap {
  flex: 1 1 350px;
  position: relative;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap #MapHomeButton {
  position: absolute;
  top: 90px;
  left: 20px;
  z-index: 50;
  border: 1px solid black;
  border-radius: 5px;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap #MapHomeButton .home {
  width: 26px;
  height: 26px;
  padding: 3px 2px;
 }


 #contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap #MapBasemapGalleryContainer {
  position:absolute;
  right:20px;
  top:10px;
  z-Index:999;
 }

  #contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneTitle {
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    padding: 0 7px 3px 7px;
    min-height: 17px;
    color: #494949;
}


#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneTitleOpen,.claro .dijitTitlePaneTitleFixedOpen {
    background-color: #cfe5fa;
    color: #000000;
    border-radius: 5px 5px 0px 0px;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneTitleHover {
    background-color: #abd6ff;
    border-color: #759dc0;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneTitleActive {
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneTitleFocus {
    margin-top: 3px;
    padding-bottom: 2px;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePane .dijitArrowNode,#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitFieldset .dijitArrowNode {
    background-image: url("https://js.arcgis.com/3.21/dijit/themes/claro/images/spriteArrows.png");
    background-repeat: no-repeat;
    height: 8px;
    width: 7px;
    margin-right: 5px;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneTitleOpen .dijitArrowNode,#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitFieldsetTitleOpen .dijitArrowNode {
    background-position: 0 0;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneTitleClosed .dijitArrowNode,#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitFieldsetTitleClosed .dijitArrowNode {
    background-position: -14px 0;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneContentOuter {
    background: #ffffff;
    border: 1px solid black;
    border-top: none;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitTitlePaneContentInner {
    padding: 10px;
}

#contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesMap .dijitFieldsetContentInner {
    padding: 4px;
}


 #contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesList {
  flex: 1 1 15%;
  border-left: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 350px;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesList #projectEditSitesListHead {
  text-align: center;
  font-weight: bold;
  background-color: #e9e9e9;
  padding: 0.5em;
  font-size: 1.1em;
  border-bottom: 1px solid black;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesTopPane #projectEditSitesList #projectEditSitesListSelect {
  flex: 1 1 100%;
  overflow: auto;
 }

 #projectEditSitesListSelect #projectEditSitesListSelectInner {
  display: flex;
  flex-direction: column;
 }

 #projectEditSitesListSelectInner .selectShapeButton {
  margin: 0.25em;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
 }

 #projectEditSitesListSelect .selectShapeButton .selectShapeButtonText {
  padding: 0.5em;
  text-align: center;
  font-weight: bold;
  word-wrap: break-word;
 }

 #projectEditSitesListSelect .selectShapeButton:hover {
  background-color: #e9e9e9;
  border: 1px solid rgb(255,0,0);
 }

 #projectEditSitesListSelect .selectShapeButton.selectShapeHover {
  border: 1px solid rgb(255,0,0);
 }


 .sitesButtonSelected {
  background-color: rgb(184, 253, 253) !important;
 }


 #contentBody #projectForm #projectEditSites #projectEditSitesBottomPane {
  flex: 1 1 25%;
  display: flex;
  flex-direction: column;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesBottomPane #projectEditSitesModeButtonDiv {
  flex: 0 0 60%;
  display: flex;
  flex-direction: row;
 }

 #projectEditSitesModeButtonDiv .editShapeButton {
  flex: 1 1 0;
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  margin: 0.25em;
 }

 #projectEditSitesModeButtonDiv .editShapeButton .editShapeButtonText {
  font-weight: bold;
  margin: auto auto;
  text-align: center;
 }

 #projectEditSitesModeButtonDiv .editShapeButton:hover {
  background-color: #e9e9e9;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesBottomPane #projectEditSitesAdditionalDiv {
  flex: 1 1 40%;
  padding: 0.25em;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: row;
 }

 #projectEditSitesAdditionalDiv .projectEditInstruction {
  font-weight: bold;
  margin: auto 0.25em;
  flex: 1 1 25%;
 }

 #projectEditSitesAdditionalDiv .projectEditSelectInstruction {
  margin: auto 0;
  padding: 0.13em 0.25em;
 }

 #projectEditSitesAdditionalDiv .siteInlineButton {
  padding: 0.5em;
  margin: 0.25em;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  display: flex;
  width: 75px;
 }

 #projectEditSitesAdditionalDiv .siteInlineButton .siteInlineButtonText {
  margin: auto auto;
  text-align: center;
  font-weight: bold;
 }

 #projectEditSitesAdditionalDiv .siteInlineButton:hover {
  background-color: #e9e9e9;
  color: black;
 }

 #projectEditSitesAdditionalDiv .siteDeleteButton {
  background-color: #E81C24;
  color: white;
 }


 #projectEditSitesAdditionalDiv .addSiteName, #projectEditSitesAdditionalDiv .addSiteFreehand {
  display: flex;
 }

 #projectEditSitesAdditionalDiv .addSiteName .addSiteNameLabel, #projectEditSitesAdditionalDiv .addSiteFreehand .addSiteFreehandLabel {
  flex: 1 1 100%;
  font-weight: bold;
  margin: auto 0.25em;
 }

 #projectEditSitesAdditionalDiv .addSiteName .addSiteNameLabel:after, #projectEditSitesAdditionalDiv .addSiteFreehand .addSiteFreehandLabel:after {
  content: ":";
 }

 #projectEditSitesAdditionalDiv .addSiteName .addSiteNameInput, #projectEditSitesAdditionalDiv .addSiteFreehand .addSiteFreehandInput {
  flex: 1 1 100%;
  margin: auto 0.25em;
 }

 #projectEditSitesAdditionalDiv .addSiteName .addSiteNameInput input {
  min-width: 40px;
 }

 #projectEditSitesAdditionalDiv .projectAddBuffer {
  display: flex;
  flex-direction: row;
  flex: 1 1 40%;
 }

 #projectEditSitesAdditionalDiv .projectAddBuffer .projectAddBufferPair {
  display: flex;
  flex-direction: row;
 }

 #projectEditSitesAdditionalDiv .projectAddBuffer .projectAddBufferPair .projectAddBufferLabel {
  margin: auto 0em;
  font-weight: bold;
 }

 #projectEditSitesAdditionalDiv .projectAddBuffer .projectAddBufferPair .projectAddBufferLabel:after {
  content: ":";
 }

 #projectEditSitesAdditionalDiv .projectAddBuffer .projectAddBufferPair .projectAddBufferAfterLabel {
  margin: auto 0em;
  font-weight: bold;
 }

 #projectEditSitesAdditionalDiv .projectAddBuffer input[type="checkbox"] {
  margin: auto 0.25em;
 }

 #projectEditSitesAdditionalDiv .projectAddBuffer .projectAddBufferPair input[type="number"] {
  width: 75px;
  margin: auto 0.25em;
 }

 #projectEditSitesAdditionalDiv .projectAddBuffer .projectAddBufferPair select {
  width: 75px;
  margin: auto 0.25em;
 }


 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxYesNoContainer {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
 }

 #projectEditSitesMessageBoxYesNoContainer #projectEditSitesMessageBoxYesNo {
  position: absolute;
  top: 25%;
  left: 30%;
  width: 200px;
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxYesNo #projectEditSitesMessageBoxYesNoHeader {
  font-weight: bold;
  padding: 0.5em;
  border-bottom: 1px solid black;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxYesNo #projectEditSitesMessageBoxYesNoText {
  padding: 1em;
  border-bottom: 1px solid black;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxYesNo #projectEditSitesMessageBoxYesNoButtons {
  display: flex;
  flex-direction: row;
  padding-left: 0.5em;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxYesNo #projectEditSitesMessageBoxYesNoButtons .siteYesNoButton {
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
  flex: 1 1 50%;
  margin-right: 0.5em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  display: flex;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxYesNo #projectEditSitesMessageBoxYesNoButtons .siteYesNoButton .siteYesNoButtonText {
  margin: auto auto;
  font-weight: bold;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxYesNo #projectEditSitesMessageBoxYesNoButtons .siteYesNoButton:hover {
  background-color: #e9e9e9;
 }




 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfoContainer {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
 }

 #projectEditSitesMessageBoxSiteInfoContainer #projectEditSitesMessageBoxSiteInfo {
  position: absolute;
  top: 25%;
  left: 30%;
  width: 300px;
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfo #projectEditSitesMessageBoxSiteInfoHeader {
  font-weight: bold;
  padding: 0.5em;
  border-bottom: 1px solid black;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfo #projectEditSitesMessageBoxSiteInfoBody {
  padding: 1em;
  border-bottom: 1px solid black;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfo #projectEditSitesMessageBoxSiteInfoBody #projectEditSitesMessageBoxSiteInfoInstructionText {
  font-weight: bold;
  padding-left: 0.5em;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfo #projectEditSitesMessageBoxSiteInfoBody #projectEditSitesMessageBoxSiteInfoErrorText {
  color: red;
  font-weight: bold;
  padding-left: 0.5em;
  padding-top: 0.5em;
 }


 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfo #projectEditSitesMessageBoxSiteInfoButtons {
  display: flex;
  flex-direction: row;
  padding-left: 0.5em;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfo #projectEditSitesMessageBoxSiteInfoButtons .siteSiteInfoButton {
  padding: 0.5em;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
  flex: 1 1 50%;
  margin-right: 0.5em;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  display: flex;
 }

 #projectEditSitesMessageBoxSiteInfoBody .projectEditSitesMessageBoxSiteInfoValuePair {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
 }

 #projectEditSitesMessageBoxSiteInfoBody .projectEditSitesMessageBoxSiteInfoValuePair .projectEditSitesInfoLabel {
  flex: 1 1 50%;
  font-weight: bold;
  text-align: right;
 }

 #projectEditSitesMessageBoxSiteInfoBody .projectEditSitesMessageBoxSiteInfoValuePair .projectEditSitesInfoLabel:after {
  content: ":";
 }

 #projectEditSitesMessageBoxSiteInfoBody .projectEditSitesMessageBoxSiteInfoValuePair .projectEditSitesInfoLabelInput {
  flex: 1 1 100%;
  padding-left: 0.5em;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfo #projectEditSitesMessageBoxSiteInfoButtons .siteSiteInfoButton .siteSiteInfoButtonText {
  margin: auto auto;
  font-weight: bold;
 }

 #contentBody #projectForm #projectEditSites #projectEditSitesMessageBoxSiteInfo #projectEditSitesMessageBoxSiteInfoButtons .siteSiteInfoButton:hover {
  background-color: #e9e9e9;
 }


/**
 * @section		RELATED CONTENT
 * @note		commonly known as the right rail.
 **/

  #contentRelated {
    color: #4b4b4b;
    float: left;
    margin: -13px 0 0 9px;
    width: 262px;
    padding: 0 0 48px 0;
  }
    #contentRelated a { }
      #contentRelated a:link {
        color: #00476e;
        text-decoration: none;
      }
      #contentRelated a:visited {
        color: #0068a2;
        text-decoration: none;
      }
      #contentRelated a:active {
        color: #0068a2;
        text-decoration: underline;
      }
      #contentRelated a:hover {
        color: #0068a2;
        text-decoration: underline;
      }
    #contentRelated h2 {
      color: #534741;
      font: normal 16px/20px Arial, Helvetica, sans-serif;
      background: url(../img/design/content/related/h2.gif) bottom left repeat-x;
      margin: 29px 0 8px 0;
      padding: 0 0 6px 0;
    }
    #contentRelated h3 {
      color: #534741;
      font: bold 12px/16px Arial, Helvetica, sans-serif;
    }
    #contentRelated p {
      color: #4b4b4b;
      padding: 0 0 10px 0;
      font: normal 12px/16px Arial, Helvetica, sans-serif;
    }
    #contentRelated form {
      overflow: auto; /** @note	because of niceforms and all the floated objects. **/
    }
    #contentRelated #goStraightToYourState,
    #contentRelated #stateActionPlan {
      z-index: 1000; /** @note	because of the SELECT, and niceforms. **/
    }

    #contentRelated table {
      border-collapse: collapse;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
    }
      #contentRelated th,
      #contentRelated td {
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ccc;
        color: #4b4b4b;
        font: normal 12px/16px Arial, Helvetica, sans-serif;
        padding: 4px;
      }

/**
 * @section		RELATED CONTENT CUSTOM CLASSES
 **/

  /**
   * @note	Right Rail widgets
   **/
  #contentRelated div.widget {
    padding: 0;
    margin-top: 20px;
  }

  /*
  ** Style for the Content Partner Logo in
  ** the right rail
  */

  div#contentRelated div.widgetHeader	{
    background: url(../img/design/content/related/contentPartner2.png) left no-repeat;
    margin: 0;
    padding: 0;
    padding-left: 10px;
    width: 260px;
    height: 25px;
  }

  #contentRelated div.widgetHeader h2	{
    font-weight: bold;
    font-size: 75%;
    color: #f7f7f7;
    background: none;
    margin: 0;
  }
  div#contentRelated div.widgetBody	{
    width: 256px;
    border: 2px solid #b8b8b6;
    border-top: none;
    background-color: #fff;
    margin: 0 0 20px 0;
    padding: 10px 0 10px 0;
  }

  div#contentRelated div.widgetBody p,
  div#contentRelated div.widgetBody h3	{
    padding-left: 8px;
  }

  div#contentRelated div.logo	{
    margin-top: 20px;
  }

  div#contentRelated div.logo div.widgetBody img	{
    margin: 0 auto;
  }

  div.widgetBody th	{
    font-weight: bold !important;
    background-color: #eeeeea;
  }

  div.widget table.alternate td.right	{
  text-align: right;
  vertical-align: bottom;
  font-weight: bold !important;
  }

  table.alternate	{
    margin-bottom: 0px;
    border-collapse: collapse !important;
  }

  table.alternate td	{
    border: none !important;
  }

  table.alternate td a	{
    display: block;
    padding-left: 4px;
  }

  table.alternate th	{
    border: none !important;
    font-weight: normal !important;
    font-style: italic !important;
  }

  table.alternate th b	{
    display: block;
    padding-left: 4px;
  }

  ul.alternate	{
    width: 250px;
    border: 1px solid #a8a8a8;
  }

  ul.alternate li	{
    background-color: #fefefe;
    font-family: Helvetica, Ariel, sans-serif;
    font-size: 10pt;
    color: #519dc3;
    padding:8px 0 8px 15px;
  }

  ul.alternate li.alt	{
    background-color: #f6f6f6;
  }

  td.tooltip-cell	{
    vertical-align: left;
  }

  #cluetip	{
    background-color: #f6f6f6;
    border: 1px solid #a8a8a8;
    padding: 0;
  }

  #cluetip div.inside	{
    padding: 4px 10px 4px 10px;
    font-family: Helvetica, Ariel, sans-serif;
    font-size: 10pt;
    color: #362f2d;
  }

  td.tooltip-cell a:hover	{
    color: #519dc3;
    text-decoration: none !important;
  }

  .tooltipcontent	{
    display: none;
  }

  #cluetip .tooltipcontent	{
    display: block;
  }

  /**
   * @note	Quick Facts content wrapper.
   **/
  #contentRelated div.quickfacts {
    padding: 0;
  }
    #contentRelated div.quickfacts a.external {
      padding: 0 13px 0 0;
      background: url(../img/design/content/externalLink.gif) right no-repeat;
    }

  div.quickfacts strong	{
    font-weight: bold;
  }

  /**
   * @note	Related Content component content wrapper.
   **/
  #contentRelated div.widgetFeatured {
    padding: 0 6px 8px 6px;
    position: relative;
    clear: both; /** @note	in case floated elements are the last inline **/
  }
    #contentRelated div.widgetFeatured p {
      padding: 0 0 10px 70px;
    }
    #contentRelated div.widgetFeatured div.img {
      background: url(../img/design/content/imgBg60.gif) bottom left no-repeat;
      padding: 1px 2px 3px 2px;
      position: absolute;
      top: 35px;
      left: 3px;
      width: 60px;
    }

  /**
   * @note	a stylized list. meant for a collection of links. this list isn't built
   * 			to contain anything other than one A per LI, and it's not intended to be nested
   * 			or have a nested UL. it's intent is for section headers as links. the only use in
   * 			the current designs is on the homepage.
   **/
  #contentRelated ul.linkList {
    list-style: none;
    margin: 0;
  }
    #contentRelated ul.linkList li {
      border-bottom: 1px dotted #babab9;
      padding: 1px 0;
    }
      #contentRelated ul.linkList li.last-child {
        border-bottom-color: #fff; /* dont want a shift */
      }
    #contentRelated ul.linkList a {
      display: block;
      background: url(../img/design/content/body/findAdditional.gif) right center no-repeat;
      padding: 2px 20px 2px 0;
      font: normal 14px/16px Arial, Helvetica, sans-serif;
    }
      #contentRelated ul.linkList a:hover {
        text-decoration: none;
      }
  /**
   * @note	Locator Map
   **/
  #contentRelated #locatorMap {
    margin-top: 29px;
    padding-bottom: 3px;
    background: url(../img/design/content/related/locatorMapDropshadow.gif) bottom left no-repeat;
    position: relative;
  }
    #contentRelated #locatorMap #locatorMapHeader {
      background: url(../img/design/content/related/locatorMapHeader.gif) top left no-repeat;
      height: 25px;
      padding-right: 5px;
      text-align: right;
    }

    #contentRelated #locatorMap img#locatorMapImage  {
            margin-left: 2px;
            height: 140px;
            width: 258px;
        }

        #contentRelated #locatorMap #locatorMapMarker  {
            position: absolute;
            bottom: 63px;
            left: 121px;
            display: none;
        }

        #contentRelated #locatorMap a img {
            border: 0px;
        }

  /**
   * @note	a stylized list. meant for a collection of links. this list isn't built
   * 			to contain anything other than one A per LI, and it's not intended to be nested
   * 			or have a nested UL. it's intent is for section headers as links. the only use in
   * 			the current designs is on the homepage.
   **/
  #contentRelated ul.linkList {
    list-style: none;
    margin: 0;
  }
    #contentRelated ul.linkList li {
      border-bottom: 1px dotted #babab9;
      padding: 1px 0;
    }
      #contentRelated ul.linkList li.last-child {
        border-bottom-color: #fff; /* dont want a shift */
      }
    #contentRelated ul.linkList a {
      display: block;
      background: url(../img/design/content/body/findAdditional.gif) right center no-repeat;
      padding: 2px 20px 2px 0;
      font: normal 14px/16px Arial, Helvetica, sans-serif;
    }
      #contentRelated ul.linkList a:hover {
        text-decoration: none;
      }

  /**
   * @note	Explor Related Content wrapper.
   **/
  #contentRelated #contentErcWrapper {
    margin-top: 29px;
    padding-bottom: 8px;
  }
    #contentRelated #contentErc img {
      display: block;
    }

  /**
   * @note	State Sponsor content wrapper. this is only applicable on state homepages.
   * 			it is shifted to the left to break out of the gray column.
   * 			top margin since it's mimicing the first H2 in #relatedContent, and a negative
   * 			bottom margin to mimic the top of #relatedContent so the next H2 is positioned correctly.
   **/
  #contentRelated div.sponsor {
    margin: 13px 0 -13px -9px;
  }
    #contentRelated div.sponsor img {
      display: block;
      border: 10px solid #fff;
      border-width: 10px 10px 10px 0;
    }

  /**
   * @note	My Account For content wrapper. this is only applicable on my profile pages.
   * 			it is shifted to the left to break out of the gray column.
   * 			top margin since it's mimicing the first H2 in #relatedContent, and a negative
   * 			bottom margin to mimic the top of #relatedContent so the next H2 is positioned correctly.
   * 			This is essentially a copy of div.sponsor.
   **/
  #contentRelated div.myAccount {
    margin: 13px 0 -13px -9px;
    border: 10px solid #fff;
    border-width: 10px 10px 10px 0;
    width: 270px;
    height: 125px;
    background: url(../img/design/content/related/myAccountFor.gif) top left no-repeat;
  }
    #contentRelated div.myAccount p {
      font: normal 20px/20px Arial, Helvetica, sans-serif;
      color: #fff;
      padding: 30px 0 0 9px;
    }

  /**
   * @notes	used on the 'audience' page type (and homepage). same as the class in #CONTENTBODY.
   **/
  #contentRelated ul.newsList {
    list-style: none;
    margin: 0;
    font: normal 12px/16px Arial, Helvetica, sans-serif;
  }
    #contentRelated #recommendedNewsItems ul.newsList {
    margin: -8px 0 0 0;
  }
    #contentRelated ul.newsList li {
      padding: 4px 10px 4px 18px;
      background: #fff url(../img/design/content/body/newsUpdatesLiOffBg.gif) 8px 10px no-repeat;
    }
      #contentRelated ul.newsList li.alt {
        background-color: #f5f5f5;
      }

/**
 * @section		RELATED CONTENT CUSTOM CLASSES (sign-in form)
 * @notes		used on the 'audience' page type.
 **/

  #contentRelated #signInForm { }
    #contentRelated #signInForm form.forgot {
      padding: 10px 0 0 0;
    }

    #contentRelated #signInForm div.hr {
      margin: 12px 0 0 0;
    }
    #contentRelated #signInForm form div.field {
      padding: 0 0 10px 0;
      position: relative;
      overflow: auto;
    }
      * html #contentRelated #signInForm form div.field {
        height: 1%;
      }
      #contentRelated #signInForm form div.submit {
        padding: 0 5px;
        text-align: right;
      }
    #contentRelated #signInForm label {
      cursor: pointer;
    }
      /**
       * @note	the following two labels are absolutely positioned over their INPUTs.
       *			this is to accomplish a mock pre-populated form field. JS events hides
       *			these labels when focus is put onto the form field.
       **/
      #contentRelated #signInForm #txtEmailLabel2 {
        color: #4b4b4b;;
        cursor: text;
        left: 10px;
        position: absolute;
        top: 6px;
      }
        /**
         * @workaround		positioning is different on IE.
         **/
        * html #contentRelated #signInForm label#txtEmailLabel2 { top: 6px; }
        *+html #contentRelated #signInForm label#txtEmailLabel2 { top: 6px; }

      #contentRelated #signInForm #txtPasswordLabel2 {
        color: #4b4b4b;;
        cursor: text;
        left: 10px;
        position: absolute;
        top: 6px;
      }
        /**
         * @workaround		positioning is different on IE.
         **/
        * html #contentRelated #signInForm #txtPasswordLabel2 { top: 6px; }
        *+html #contentRelated #signInForm #txtPasswordLabel2 { top: 6px; }

    #contentRelated #signInForm p {
      margin: 0 0 7px 0;
      padding: 0;
    }

    /**
     * @note	the following classes are inserted via JS. they turn the regular looking
     *			INPUT into a designed one. this is accomplished via two 'cap' (background)
     *			images in the WRAPPER SPANs, and a background image on the INPUT.
     **/

    #contentRelated #signInForm .jsTextWrapperLeft     .jsTextWrapperRight     input,
    #contentRelated #signInForm .jsPasswordWrapperLeft .jsPasswordWrapperRight input {
      width: 235px;
      padding: 5px 0 3px 0;
    }
      /**
       * @workaround		to get the INPUTs to display within the SPANs without odd spacing.
       **/
      * html #contentRelated #signInForm .jsTextWrapperLeft     .jsTextWrapperRight     input,
      * html #contentRelated #signInForm .jsPasswordWrapperLeft .jsPasswordWrapperRight input { float: left; }
      *+html #contentRelated #signInForm .jsTextWrapperLeft     .jsTextWrapperRight     input,
      *+html #contentRelated #signInForm .jsPasswordWrapperLeft .jsPasswordWrapperRight input { float: left; }

    /**
     * @note	the following classes are inserted via JS. they turn the regular looking
     *			CHECKBOX into a designed one. this is accomplished via hiding the checkbox
     *			and putting a DIV in it's place to act like a CHECKBOX.
     **/
    #contentRelated #signInForm .jsCheckboxWrapper {
      background: url(../img/design/niceforms/checkboxAccount.gif) 0 0 no-repeat;
      cursor: pointer;
      float: left;
      height: 13px;
      padding: 0;
      width: 13px;
    }
      #contentRelated #signInForm .jsCheckboxWrapper.checked { background-position: 0 -12px; }


/**
 * @section		LIGHTBOX
 * @note		the vast majority is out of the box styling.
 **/

  #jsLBlightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 9999;
    text-align: center;
    line-height: 0;
  }
    #jsLBlightbox a img {
      border: none;
    }

  #jsLBouterImageContainer {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
  }

  #jsLBimageContainer {
    padding: 10px;
  }

  #jsLBloading {
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
  }

  #jsLBhoverNav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9997;
  }

  #jsLBimageContainer>#jsLBhoverNav {
    left: 0;
  }

  #jsLBhoverNav a {
    outline: none;
  }

  #jsLBprevLink,
  #jsLBnextLink {
    width: 49%;
    height: 100%;
    background: transparent url(../img/design/lightbox/blank.gif) no-repeat; /* @note	Trick IE into showing hover */
    display: block;
    cursor: pointer;
  }

  #jsLBprevLink { left: 0; float: left; }
  #jsLBnextLink { right: 0; float: right; }
  #jsLBprevLink:hover,
  #jsLBprevLink:visited:hover { background: url(../img/design/lightbox/prev.gif) left 50% no-repeat; }
  #jsLBnextLink:hover,
  #jsLBnextLink:visited:hover { background: url(../img/design/lightbox/next.gif) right 50% no-repeat; }

  #jsLBnextLinkText,
  #jsLBprevLinkText {
    color: #FF9834;
    font-weight:bold;
    text-decoration: none;
  }

  #jsLBnextLinkText {
    padding-left: 20px;
  }

  #jsLBprevLinkText {
    padding-right: 20px;
  }

  .ontop #jsLBimageData {
      padding-top: 5px;
  }

  #jsLBimageDataContainer {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
  }

  #jsLBimageData {
    padding:0 10px;
  }

  #jsLBimageData #jsLBimageDetails {
    width: 70%;
    float: left;
    text-align: left;
  }

  #jsLBimageData #jsLBcaption {
    font-weight: bold;
  }

  #jsLBimageData #jsLBnumberDisplay {
    display: block;
    clear: left;
    padding-bottom: 1.0em;
  }

  #jsLBimageData #jsLBbottomNavClose {
    width: 66px;
    float: right;
    padding-bottom: 0.7em;
    cursor: pointer;
  }

  #jsLBimageData #jsLBhelpDisplay {
    clear: left;
    float: left;
    display: block;
  }

  #jsLBoverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 500px;
    background-color: #000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    display: none;
  }

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

  * html>body .clearfix {
    display: inline-block;
    width: 100%;
  }

}