<template>
  <div id="overseer-app">
    <OverseerHeader />
    <OverseerNotifications />
    <div id="overseer-body">
      <div id="overseer-body-center">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import OverseerHeader from './components/OverseerHeader.vue'
import OverseerNotifications from './components/OverseerNotifications.vue'

export default {
  name: 'App',
  components: {
    OverseerHeader,
    OverseerNotifications
  }
}
</script>

<style>
#overseer-app {
    height: 100%;
    width: 100%;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #3A4040;
}

#overseer-body {
    height: calc(100% - 60px);
    width: 100%;
    margin-top: 60px;
    overflow: scroll;
    position: absolute;
    color: #EAECE9;
}

#overseer-body-center {
    min-height: 100%;
    width: 1000px;
    margin: 0px auto;
    background-color: #343A46;
    box-shadow: 0 0 3px 3px #2B303A inset;
}


html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #2B303A;
}
</style>
