html {
    background: #E8E8E8;
}
body {
    max-width: 1200px;
    margin: -5px auto;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
    height: 100%;
    background: #DAD3BD;
}
a:link, a:visited {
    color: #000;
    text-decoration: underline;
}
a:hover {
    color: #777777;
    text-decoration: underline;
}
header {
    max-width: 100%;
    margin: 5px;
    padding: 5px;
    display:block;
}
main {
    max-width: 100%;
    margin: 5px;
    padding: 5px;
    display:block;
}
footer {
    max-width: 100%;
    margin: 5px;
    padding: 5px;
    display:block;
    font-size: .9em;
}
@font-face {
    font-family: Vanilla-Whale;
    src: url(Vanilla-Whale.ttf.woff);
}
#logo_header_div {
  text-align: center;
  margin-bottom: 10px;
}
#logo_header{
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}
.page_title {
    color: #4c5567;
    font-size: 1.75em;
}
.ballpark_title_col {
    font-size: .9rem;
    float: left;
    box-sizing: border-box;
    padding-right: .333em;
    width: 60%;
}
.ballpark_map_col {
    float: right;
    box-sizing: border-box;
    padding-right: .333em;
    width: 40%;
}

.active_tab{
    font-weight: bold;
}
.hover{
    text-align: center;
    border-bottom: 1px dotted #000;
    display: inline-block;
}


/* Tables */
.table_title{
    font-size: 1.25rem;
    color: #4c5567;
    padding: 1.5rem 0 1rem;
}
.table_subtitle {
    color: #000;
    font-size: .9em;
    padding: 0 0 1rem;
    margin: -1rem 0 0;
}
.main_table {
    white-space: nowrap;
    font-size: .8rem;
    position: relative;
    background: #FFF;
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid #68748B;
    overflow-y: visible;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.main_table td{
    padding: 1px 7px;
    border: 1px #E2E2E2 solid;
}
.main_table th{
    padding: 1px 5px;
    border: 1px #E2E2E2 solid;
}
.main_table tbody tr:nth-child(even) {
    background-color: #f8f8f8;
}
.main_table tbody tr:hover {
    background-color: #E8E8E8;
}
.main_table th {
    font-size: 1rem;
    background-color: #68748B;
    color: #fff;
}
.main_table th a:link,
.main_table th a:visited{
    color: #fff;
    text-decoration: none;
}
.main_table th a:hover{
    color: #dddddd;
    text-decoration: none;
}
.main_table td {
    font-size: .85rem;
}
.column_separator{
    border-right: 1px solid #68748B !important;
}
#sorted_column{
    background-color: #a3b5d6;
    border: 1px solid #a3b5d6;
}
.table_container{
    overflow-x: scroll;
    clear: both;
    margin: 0 auto;
}
.table_container>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #FFF;
    z-index: 2;
}
@media(min-width:768px) {
    .table_container>.fixed-column {
        display: none;
    }
}


/* Forms */
.form_filter{
    text-align: left;
    margin: 0px 10px 25px;
}
.filters_container{
    display: inline-block;
    position: relative;
}
.filter{
    padding: 5px 20px;
    display: inline-block;
    color: #68748B;
}
.filter span{
    padding: 2px;
    font-size: 1rem;
    color: #4c5567;
}
select {
    padding: 1px 8px;
    display: inline-block;
    border: 1px solid #68748B;
    border-radius: 4px;
    background-color: #FFF;
}
input[type=submit] {
    color: #68748B;
    font-weight: bold;
    padding: 1px 8px;
    border: 1px solid #68748B;
    border-radius: 4px;
    cursor: pointer;
    background-color: #FFF;
}
input[type=submit]:hover {
    color: #464e5d;
}





/* Google Maps */
#map {
    height: 400px;
    width: 100%;
    max-width: 900px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 2px solid #68748B;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
#ballpark_map, #year_map, #team_map, #city_map {
    height: 200px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 2px solid #68748B;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* Graphs */
.ballpark_pf3_container{
    position: relative;
    width: 100%;
    max-width: 1100px;
    max-height: 1100px;
    padding-top: 56.25%;
}
#ballpark_pf3{
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}


/* tooltip */
#tooltip {
    font-size: .9rem;
    color: #68748B;
    background: #FFF;
    border: 2px solid #68748B;
    border-radius: 4px;
    position: absolute;
    z-index: 100;
    padding: 5px;
}

#tooltip:after { /* triangle decoration */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #68748B;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

#tooltip.top:after {
    border-top-color: transparent;
    border-bottom: 10px solid #68748B;
    top: -20px;
    bottom: auto;
}

#tooltip.left:after {
    left: 10px;
    margin: 0;
}

#tooltip.right:after {
    right: 10px;
    left: auto;
    margin: 0;
}

/* Search */
.bs-example {
        display: inline-block;
        margin: 2px;
}
.typeahead, .tt-query, .tt-hint {
        border: 2px solid #CCCCCC;
        border-radius: 8px;
        outline: medium none;
        padding: 3px 10px;
        width: 3.25em;
}
.typeahead {
        background-color: #FFFFFF;
}
.typeahead:focus {
        border: 2px solid #CCCCCC;
        width: 100%;
        transition-duration: 1s;
}
.tt-query {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
        color: #999999;
}
.tt-dropdown-menu {
        background-color: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        margin-top: 2px;
        padding: 3px;
        width: 175px;
}
.tt-suggestion {
        padding: 4px;
        text-align:left;
}
.tt-suggestion.tt-is-under-cursor {
        background-color: #68748B;
        color: #FFFFFF;
}
.tt-suggestion p {
        margin: 0;
}



/* Main Navigation Bar */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #FFF;
  border: 2px solid #4c5567;
  border-radius: .3em;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
  display: inline-block;
  color: #4c5567;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1em;
}

/* Change background color of links on hover */
ul.topnav li a:hover {
  color: #383e4b;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
    display: none;
}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
    ul.topnav li.icon {
      float: right;
      display: inline-block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
    ul.topnav.responsive li.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    ul.topnav.responsive li {
      float: none;
      display: inline;
    }
    ul.topnav.responsive li a {
      display: block;
      text-align: left;
    }
}


/* Secondary Navigation Bar */
/* Remove margins and padding from the list, and add a black background color */
ul.secnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #68748B;
  border-radius: .3em;
  background-color: #fff;
}

/* Float the list items side by side */
ul.secnav li {float: left;}

/* Style the links inside the list items */
ul.secnav li a {
  display: inline-block;
  color: #68748B;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1em;
}

/* Change background color of links on hover */
ul.secnav li a:hover {
  color: #C0C0C0;
}

/* Hide the list item that contains the link that should open and close the secnav on small screens */
ul.secnav li.icon {
    display: none;
}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the secnav (li.icon) */
@media screen and (max-width:680px) {
ul.secnav li:not(:first-child) {display: none;}
    ul.secnav li.icon {
      float: right;
      display: inline-block;
    }
}

/* The "responsive" class is added to the secnav with JavaScript when the user clicks on the icon. This class makes the secnav look good on small screens */
@media screen and (max-width:680px) {
ul.secnav.responsive {position: relative;}
    ul.secnav.responsive li.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    ul.secnav.responsive li {
      float: none;
      display: inline;
    }
    ul.secnav.responsive li a {
      display: block;
      text-align: left;
    }
}