/*
* {
  box-sizing: border-box;
}
*/

html, body {
  height: 100%;
  /* line-height: 1.0; */
}

/* Styles required for sticky footer */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 80px;
  overflow: hidden;
  font-family: "Gill Sans", sans-serif;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;   /* Should always be on top */
  /* Set the fixed height of the footer here */
  height: 80px;
  background-color: chocolate;
}

.footer div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer a {
  color: yellow;
}

/* Override classes from Boostrap */
.container {
  min-height: 100%;
  overflow: hidden;
}

/* COLOR classes */
.goldtext {
  color: gold;
}

.greyback {
  background-color: lightgrey;
}

.transparent {
  background: transparent;
}

/* ALIGNMENT classes */
.centered {
  text-align: center;
}

.no-margins {
  margin: 0;
}

/* PADDING classes */
.toppad {
  padding-top: 15px;
}

/* Component specifics */
#header-image {
  background-image: url('../images/sepia-piano-keys2.jpg');
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 100%;
}

#calendar-side {
  margin-bottom: -9999px;
  padding-bottom: 9999px;

  /* position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  /* top: 0; /* Stay at the top */
  /* left: 0; */
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: scroll; /* Display vertical scrollbars */
}

#main-content {
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

#main-content p {
  padding-left: 15px;
}

/* The navigation menu links */
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}