/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/

body {
  background-color: #5c87b2;
  font-size: .85em;
  font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
  color: #696969;
}

a:link {
  color: #034af3;
  text-decoration: underline;
}

a:visited {
  color: #505abc;
}

a:hover {
  color: #1d60ff;
  text-decoration: none;
}

a:active {
  color: #12eb87;
}

p, ul {
  margin-bottom: 1px;
  line-height: 1.6em;
}

  p.spaceLeftOnly {
    margin: 0 0 0 .5em;
    padding: 0 0 0 0;
  }

header,
footer,
nav,
section {
  display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-size: 1.5em;
  color: #000;
}

h1 {
  font-size: 2em;
  padding-bottom: 0;
  margin-bottom: 0;
}

h2 {
  padding: 0;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1.1em;
}

h5, h6 {
  font-size: 1em;
}

.heading {
  color: #000;
  font-size: 1.5em;
  padding: 0;
  font-weight: bold;
  padding-bottom: 5px;
}

.sub-heading {
  color: #2971e6;
  font-size: 0.9em;
  font-style: italic;
  font-weight: bold;
  padding-left: 20px;
  padding-bottom: 20px;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  min-width: 1050px;
}

header, #header {
  position: relative;
  margin-bottom: 20px;
  color: #000;
  padding: 0;
  border: 1px #000000 solid;
  border-top: 0px #000000 solid;
}

#customHTMLTable {
  WIDTH: 100%;
  background: white;
  color: black;
}

#customHTMLDiv {
  border: 1px #000000 solid;
  margin-bottom: 20px;
}
  header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
    text-shadow: 1px 1px 2px #111;
  }

#main {
  padding: 10px 30px 15px 30px;
  background-color: #fff;
  border: 1px #000000 solid;
  border-bottom: 0px #000000 solid;
}

footer,
#footer {
  background-color: #fff;
  color: #999;
  padding: 2px 0;
  text-align: center;
  line-height: normal;
  margin: 0 0 30px 0;
  font-size: .9em;
  border: 1px #000000 solid;
  border-top: 0px #000000 solid;
  border-radius: 0 0 4px 4px;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
  border-bottom: 1px #5C87B2 solid;
  padding: 0 0 2px;
  position: relative;
  margin: 0;
  text-align: right;
}

  ul#menu li {
    display: inline;
    list-style: none;
  }

    ul#menu li#greeting {
      padding: 10px 20px;
      font-weight: bold;
      text-decoration: none;
      line-height: 2.8em;
      color: #fff;
    }

    ul#menu li a {
      padding: 10px 20px;
      font-weight: bold;
      text-decoration: none;
      line-height: 2.8em;
      background-color: #e8eef4;
      color: #034af3;
      border-radius: 4px 4px 0 0;
      -webkit-border-radius: 4px 4px 0 0;
      -moz-border-radius: 4px 4px 0 0;
    }

      ul#menu li a:hover {
        background-color: #fff;
        text-decoration: none;
      }

      ul#menu li a:active {
        background-color: #a6e2a6;
        text-decoration: none;
      }

    ul#menu li.selected a {
      background-color: #fff;
      color: #000;
    }

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
div.section-heading {
  margin: 1.2em 0 1.5em 0;
}

  div.section-heading span {
    font-size: 1.2em;
    font-weight: bold;
    color: #000000;
    padding-left: 0.7em;
  }

  div.section-heading div {
    border: 1px solid #ccc;
    padding: 0.5em 1.4em 0.6em 1.4em;
    width: 95%;
    color: navy;
    background-color: #eeeeee;
    max-width: 300px;
  }

div.section-heading2 div {
  border: 1px solid #ccc;
  width: 99%;
  color: white;
  background-color: #0068A9;
  padding: 0.1em 0 0.1em 0;
  margin-bottom: .5em;
}

div.section-separator {
  border: 1px solid #ccc;
  padding: 0.5em 0 0 0;
  width: 99%;
  height: 0px;
  background-color: #0068A9;
  margin-bottom: .1em;
}

textarea {
  min-height: 75px;
}

input[type="file"],
input[type="text"],
input[type="password"] {
  border: 1px solid #ccc;
  padding: 2px;
  font-size: 1.2em;
  color: #444;
  background-color: #e6f5fa;
}

select {
  border: 1px solid #ccc;
  padding: 2px;
  font-size: 1.2em;
  color: #444;
  background-color: #e6f5fa;
}

textarea {
  border: 1px solid #ccc;
  padding: 2px;
  font-size: 1.2em;
  color: #444;
  background-color: #e6f5fa;
  resize: none;
}

input[type="button"],
input[type="submit"] {
  font-size: 1.2em;
  padding: 5px;
  border: 1px solid #000;
}

.tyl-group-ctl {
  border: 1px solid #ccc;
  padding: 3px;
  background-color: #e6f5fa;
}

/* TABLE
----------------------------------------------------------*/

table {
  width: 90%;
  border-collapse: collapse;
  border-spacing: 0px;
}

  table td {
    padding: 0px;
    padding-bottom: 10px;
  }

  table th {
    padding: 6px 5px;
    text-align: left;
    background-color: #e8eef4;
  }

td table tr td {
  padding-bottom: 0px; /*Ensures that nested tables are not adding extra padding*/
}

#stepThreeTable > tbody > tr > td {
  padding-bottom: 20px; /*Extra padding for the list of exemption types*/
}

.tyl-td-padding-right {
  padding-right: 20px; /*Used for padding between table cells*/
}

.tyl-td-padding-left {
  padding-left: 20px; 
}

/* MISC  
----------------------------------------------------------*/
.clear {
  clear: both;
}

.error {
  color: Red;
}

nav,
#menucontainer {
  margin-top: 40px;
}

div#title {
  display: block;
  float: left;
  text-align: left;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
  font-size: 0.9em;
  color: #ff0000;
}

.field-validation-valid {
  display: block;
}

.input-validation-error {
  border: 1px solid #ff0000 !important;
  background-color: #ffeeee !important;
}

.validation-summary-errors {
  font-weight: bold;
  color: #ff0000;
}

.validation-summary-valid {
  display: block;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label {
  margin: 1em 0 0 0;
}

.display-field,
.editor-field {
  margin: 0.5em 0 0 0;
}

.text-box {
  width: 30em;
}

  .text-box.multi-line {
    height: 6.5em;
  }

.tri-state {
  width: 6em;
}

#HeaderImageCell {
  background: #ffffff url(images/header_img.jpg) no-repeat bottom right;
  text-align: left;
  vertical-align: bottom;
  padding-left: 10px;
  padding-bottom: 5px;
  height: 80px;
  margin: 0px;
}

.HeaderCell {
  text-align: left;
  vertical-align: bottom;
  padding-left: 10px;
  padding-bottom: 5px;
  margin: 0px;
}

.SiteHeading {
  font-size: 24px;
  color: #000000;
  font-weight: bold;
}

.tyl-lbl {
  color: #545454 !important;
  font-size: 0.9em;
}

.top {
  padding-bottom: 0px;
}

.bottom {
  padding-top: 1px;
}

.tyl-reqd {
  font-weight: bold !important;
}

.tyl-val {
  color: navy !important;
  height: 19px; /* should match height of inputs */
  font-size: 1.2em;
  padding: 2px;
  font-weight: bold;
  overflow: hidden;
}

.tyl-size-xxxs {
  width: 25px !important;
  background-color: #ffffff;
}

.tyl-size-xxxs-error {
  width: 25px !important;
  background-color: #ffcccc;
}

.tyl-size-xxs {
  width: 50px !important;
  background-color: #ffffff;
}

.tyl-size-xxs-error {
  width: 50px !important;
  background-color: #ffcccc;
}

.tyl-size-xs {
  width: 75px !important;
}

.tyl-size-s {
  width: 100px !important;
}

.tyl-size-m {
  width: 150px !important;
}

.tyl-size-l {
  width: 200px !important;
}

.tyl-size-xl {
  width: 300px !important;
}

.tyl-size-xxl {
  width: 400px !important;
}

.tyl-size-xxxl {
  width: 640px !important;
}

.tyl-size-full {
  width: 95% !important;
}

.tyl-size-max {
  width: 100% !important;
}

.tyl-checkbox-td {
  width: 30px;
  vertical-align: top;
}

.tyl-section {
  width: 99%;
}

.tyl-subsection {
  padding-bottom: 10px;
  width: 100%;
}

.notice {
  border: 1px #000000 solid;
  color: #000;
  margin-left: 20%;
  margin-right: 20%;
  padding-top: 5px;
  padding-bottom: 5px;
}

input[type=checkbox] {
  height: 25px;
  width: 25px;
  -moz-transform: scale(1.5);
}

input[type=radio] {
  height: 25px;
  width: 25px;
  box-sizing: border-box;
}

.ui-dialog {
  z-index: 101;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}