/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: "Open Sans", sans-serif;
  height: 100%;
}

#app-container {
  height: 100%;
}

.app {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.nav {
  /* Original bl.ocks.org thumbnails are (230 X 120). */
  width: 200px;
  background-color: rgb(247, 247, 247);
  overflow-y: scroll;
}
.nav-item {
  position: relative;
  cursor: pointer;
  margin: 8px;
}
.nav-item-title {
  pointer-events:none;
  position: absolute;
  top: 2px;

  /* Center the text inside the box. */
  width: 100%;
  text-align: center;

  /* This trick adds a heavy white shadow around the text. */
  text-shadow: 
    0px 0px 2px white,
    0px 0px 2px white,
    0px 0px 2px white,
    0px 0px 2px white,
    0px 0px 3px white,
    0px 0px 3px white,
    0px 0px 3px white,
    0px 0px 3px white;
}
.nav-item-thumbnail {
  transition: box-shadow 0.3s, border-color 0.3s;
  width: 100%;
  border-radius: 5px;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  box-shadow: 0px 0px 5px #888888;
}
.nav-item-thumbnail:hover {
  box-shadow: 1px 1px 5px #888888;
}
.nav-item-thumbnail.active {
  border-color: gray;
  box-shadow: 1px 1px 6px #888888;
}

.content {
  width: 100%;
  height: 100%;
}


/* Custom scrollbars. Draws from https://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
  width: 8px;
}
 
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
 
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}