body {
  margin: 20px;
  background: #7b85a2;
}

#nav {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 4px;
  background-color: #222;
  border-radius: 3px;
  z-index: 100;
}

#nav button, #nav select {
  height: 28px;
  margin: 0px;
  padding: 2px;
  border-radius: 2px;
}

#summary {
  margin: 10px;
}

table {
  width: 100%;
}

table td {
  text-align: left;
}

.gridster li {
  list-style: none;
}

.card {
  /*display: inline-block;*/
  /*margin: 20px;*/
  /*padding: 10px;*/
  text-align: center;
  border: 1px solid gray;
  vertical-align: top;
  background: white;
}

.card div.cardContent {
  overflow: scroll;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50px;
  bottom: 0;
}

.card h3 {
  background-color: #4c5a65;
  color: white;
  margin: 0;
  padding: 10px;
}

.card .world {
  display: block;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.card ul {
  text-align: left;
}

.col1 {
  width: 400px;
}

.col2 {
  width: 800px;
}

table td {
  vertical-align: top;
}

canvas {
  margin: 20px;
}

::-webkit-scrollbar {
      width: 15px;
} /* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
      background-color: white;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2); 
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-corner {
      background-color: white;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

