body {
    margin: 0;
    line-height: 1.5;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
}

#app {  
    width:95%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin-top: 0px;

    margin-left:auto;
    margin-right:auto;
  }

  
#pageHeader {
  height:230px;
  width:100%;
  background: url("/img/header.png") no-repeat scroll top;
  background-size: 1600px 230px;
  position: relative;
  padding:0 0;

  font-size:50px;
  font-weight:bold;
  align-items: center;
  justify-content: center;
  text-align: center;
  display:flex;
  color:#000;
  overflow:hidden;
  }

#navBar {
  background-color: #F7F5E7;
}

#navBar li {
  text-decoration: none;
  list-style-type:none;
  padding:15px;
  font-size:15px;
}

#navBar li:hover {
  background:#000;
  color:#fff;
}

#navBar li.router-link-exact-active {
  color: #d00;
  font-style:italic;
}

#navBar li.router-link-exact-active:hover {
  color: #fff;
}

h1 {
  font-size:40px;
}

hr {
  border: 1px solid #DDDDDD;
}

th, td {
  border: 1px solid #DDDDDD;
  padding: 10px;
}
table tr:nth-child(odd) {
  background: #ffffff;
}
table tr:nth-child(even) {
  background: #f4f4f4;
}


@media only screen and (min-width:1000px) {
  #pageContent {
    margin-left:20%;
    margin-right:20%;
  }

  #app {
    width:75%;
  }
}

@media only screen and (max-width:500px) {
  #navBar li {
    display:block;
    line-height:10px;
  }
}

@media only screen and (min-width:500px) {
  #navBar li {
    display:inline;
    line-height:50px;
  }
}