body
    {
        font-family: Sans-Serif;
        background: #eee;
    }

    hr
    {
        height: 1px;
        background-color: #674c12;
    }

    #map {
        width: 80%;
        height: 70%;
    }
  
    /* Tooltip text */

    abbr
    {
        border-bottom: 1px dotted #666;
    }

    .tooltip
    {
        top: 100%;
        left: 105%; 
        width: 300px;
        background-color: #7bc5f5;
        color: black;
        text-align: center;
        padding: 5px 0;
        border-radius: 2px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);	

        position: absolute;
        z-index: 1;

    }

    .trow {
        font-size: 90%;
        background: linear-gradient(#f0f8ff, #e0f0ff);
    }

    .trowhs {
        font-size: 90%;
        background: #f0f8ff;
    }

    .theader{
        font-size:90%;
        color: white;
        background-color:#004b93;
    }

    .button {
        background: #0f70c0;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 2px;
        font-size: 100%;
    }

    .button:hover {
        background: #7bc5f5;
        color: #000;
    }

    .button.page {
        background: #674c12;
        font-size: 150%;
    }

    .button.page:hover {
        background-color: #ffc300;
        color: #000;
    }

    .button.qual {
        background: #a64a0c;
        font-size: 150%;
    }

    .button.qual:hover {
        background-color: #ffc300;
        color: #000;
    }

    .div.state {
	padding-left: 10%;
	padding-right: 10%;
	line-height: 28px;
    }

    .button.state {
        background: #cc6b2f;
        font-size: 60%; 
    }

    .button.state:hover {
        background-color: #ffc300;
        color: #000;
    }

    table {
        border-collapse: collapse;
    }

    table, th, td {
        border: 1px solid #d0e8ff;
    }

    th{
        font-weight: normal;
    }

    /* unvisited link */
    a:link {
        color: #cc6b2f;
    }

    /* visited link */
    a:visited {
        color: #a64a0c;
    }

    /* mouse over link */
    a:hover {
        color: #0fa7fb;
    }

    /* selected link */
    a:active {
        color: #cc6b2f;
    }

    /* sorttable table */
    table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
        content: "\0A\25B4\25BE" 
    }


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #00000000; /* Fallback color */
}

/* Modal Content/Box */
.modal-content {
  background-color: #ddddddf8;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.closeModal {
  color: #888;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeModal:hover,
.closeModal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}