body {
  font-family: Arial;
  max-width: 1200px;
  margin: 0 auto;
  line-height: 1.5em;
}

a:link { color: #004AA5; }

a img { border: none; }

.clearBoth { clear: both; }

.hidden 
{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/****************************
 * Structure and navigation *
 ****************************/
header {
  margin: 1.4em 0 2.3em 2%;
}

  header a#etlLogo {
    width: 100%;
    _width: 369px;    
    max-width: 369px;
    float: left;
    display: block;
  }

  form#quickSearch {
    float: right;
    background: #EBEBEB;
    margin-top: 1em;
    padding: 8px;
    text-align: center;
    line-height: 1em;
  }

    form#quickSearch span {
      color: #58595B;
      font-size: 0.7em;
    }

    form#quickSearch input {
      font-size: 1.4em;
      border: none;
      height: 35px;
      vertical-align: top;
      margin: 0;
      padding: 0;
    }

    form#quickSearch input[type='text'] {
    padding: 0 0.2em;
    }    

nav#mainNav {
  width: 23%;
  margin-left: 2%;
  float: left;
  font-size: 0.95em;
  color: #004AA5;
}

  nav#mainNav a {
    text-decoration: none;
  }

  nav#mainNav a:hover { color: #004AA5; }
  nav#mainNav a:active { color: #004AA5; }
  nav#mainNav a:visited { color: #004AA5; }

  nav#mainNav ul {
    list-style: none;
  }

  nav#mainNav li span {
    display: block;
    background-color: #EBEBEB;
    border-bottom: 1px solid #d7d7d7;
    padding: 0.5em 0.7em;
  }

  nav#mainNav li.on span,
  nav#mainNav li.open span {
    background-color: #09538F;
    color: #FFFFFF;
  }

  nav#mainNav li.open li span {
    background-color: #DBE7EF;
    color: #004AA5;
  }  

  nav#mainNav li.open li.on span {
    border-left: 3px solid;
  }

section#content {
  width: 70%;
  margin: 0 2% 0 27.5%;
}

  section#content #main {
    float: left;
    width: 100%;
  }

footer {
  clear: both;
  background: #032F52;
  color: #FFFFFF;
  padding: 1em 0;
  min-height: 105px;
  margin: 2em 0;
}

  footer #logos {
    float: left;
  }

    footer #logos img {
      margin: 0.7em 0em 0 2em;
      vertical-align: middle;
    }

  footer #legal {
    float: left;
    font-size: 0.9em;
    margin: 1.2em 0 0 2em;
  }

    #legalText {
      font-weight: bold;
      line-height: 1.4em;
      margin-bottom: 0.2em;
    }

    #legalLinks {
      margin-bottom: 0; 
    }

    #legalLinks a:link { color: #FFFFFF; }
    #legalLinks a:hover { color: #FFFFFF; }
    #legalLinks a:active { color: #FFFFFF; }
    #legalLinks a:visited { color: #FFFFFF; }

  footer img#etlSymbol {
    float: right;
    margin-top: -28px;
    margin-bottom: -28px;
    margin-right: 5%;
  }

/***********
 * Content *
 ***********/
h1,
h2,
h3 {
  font-family: 'Trebuchet MS', 'Trebuchet';
}

h1 {
  color: #032F52;
  font-weight: bold;
  font-size: 1.9em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.4em;
  border-bottom: 1px solid #80C437;
  color: #6D6E70;
  padding: 0 0 0.4em 0;
  margin: 0.5em 0 0.5em 0;
}

h3 {
  font-size: 1.3em;
  color: #747575;
  margin: 1em 0 0.5em 0;
}


p {
  margin-bottom: 1.3em;
}

b,
strong { 
  font-weight: bold; 
}

#content ol,
#content ul {
  margin: 0 0 0 2em;
  line-height: 1.5em;
}

#content ul {
  list-style: square;
}

  #content li {
    margin-bottom: 0.7em;
  }

#content table {
  font-size: 0.8em;
}

  #content th {
    background-color: #09538F;
    color: #FFFFFF;
    font-weight: bold;
    text-align: left;
    border-right: 2px solid #FFFFFF;
  }

  #content th,
  #content td {
    padding: 0.6em;
    line-height: 1.5em;
  }

.two-col {
  width: 48%;
  margin-right: 2%;
  float: left;
}

/**************
 * Responsive *
 **************/

@media print {
  nav#mainNav,
  form#quickSearch,
  footer #logos,
  footer img#etlSymbol,
  footer #legalLinks
  { 
    display: none;
  }

  section#content {
    width: 100%;
    margin: 0 0 0 0;
  }
 
  footer { 
    margin: 0;
    background: transparent;
  }

  footer #legal {
    float: none;
    margin: 0;
  }

  footer #legalText {
    color: #000000;
    font-size: 0.6em;
    font-weight: normal;   
  }
}

 @media screen and (max-width: 1030px) {
   footer img#etlSymbol {
     float: none;
    margin: 1em auto -100px auto;     
   }
 }

 @media screen and (max-width: 825px) {
   
   footer {
     text-align: center;
   }

     footer #logos {
       float: none;
     }

       footer #logos img {
         margin: 1em;
       }
    footer #legal {
      float: none;
      margin: 0 2%;
    }

    footer img#etlSymbol {
      float: none;
      margin: 1em auto -100px auto;
    }
 }

 @media screen and (max-width: 670px) {

   body {
     line-height: 1.4em;
   }  

   header {
     text-align: center;
     margin: 1.4em 0.5em 2.3em 0.5em;
   }

     header a#etlLogo {
       float: none;
     }

   form#quickSearch {
     float: none;
   }  

   nav#mainNav {
     float: none;
     width: auto;
     margin: 0 0.5em;
   }

   section#content {
     width: 96%;
     margin: 1em 2%;
   }

 }

 @media screen and (max-width: 369px) {
  .etlLogo img {
    width: 100%;
  }
 }

/***********
 * FOXopen *
 ***********/
#foxopen table {
  width: 100%;
}

#foxopen tr:nth-child(2n) {
  background: #EFF8FD
}

/*********
 * Admin *
 *********/
div.mgnlEditorBar.area {
  clear: none !important;
}

div.mgnlEditorMainbarWrapper {
  position: absolute;
  top: 0;
  left: 0;
}

/**************
 * Browse ETL *
 **************/

.teaser {
  width: 31%;
  float: left;
  margin: 1em 1% 1em 1%;
}

  .teaser h2 {
    font-size: 1em;
    border-top: 1px solid #80C437;
    border-bottom: none;
    min-height: 2em;
  }

    .teaser h2 a {
      text-decoration: none;
    }

  .teaser p {
    min-height: 5em;
  }

ul#sub-tech-tabs {
  background-color: #EBEBEB;
  padding: 5px 5px 0 5px;
  list-style: none;
  margin: 0 0 1em 0;
}

  #sub-tech-tabs li {
    padding: 0.5em 1em;
    display: inline-block;
    margin: 0;
  }

  #sub-tech-tabs li.on {
    background-color: #FFFFFF;
  }

  #sub-tech-tabs a {
    text-decoration: none;
  }

/*******
 * FAQ *
 *******/

p.intro {
  margin-bottom: 0;
}

#content .faq ul {
  list-style: none;
  margin-left: 0;
}