p, td, time {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/Roboto-Light.ttf');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/Roboto-Thin.ttf');
}

article {
  background-color: rgb(191,191,191);
  background-color: rgba(0,0,0,0.5);
}

/* Styling for overlays (not part of the card content) */

.card {
  position: absolute;
  width: 640px;
  height: 360px;
  right: 0px;
  margin: 20px 76px 0px 0px;
  /*background-color: black;*/
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.smallcard {
  transform: scale(0.4);
  transform-origin: left top;
  -webkit-transform: scale(0.4);
  -webkit-transform-origin: left top;
  -ms-transform: scale(0.4);
  -ms-transform-origin: left top;
  -moz-transform: scale(0.4);
  -moz-transform-origin: left top;
  -o-transform: scale(0.4);
  -o-transform-origin: left top;

  width: 680px;
  height: 410px;
  overflow: hidden;
  cursor: pointer;
}

.smallcard > .card {
  border: 10px solid;
  border-color: #fff;
}

.smallcard > .selected {
  border-color: #3072E1;
}

.scroll {
  cursor: pointer;
  height: 360px;
  width: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  -webkit-transition: opacity 0.4s ease-in-out;
  z-index: 100;
}

body:hover > .scroll {
  opacity: 0.7;
}

.leftscroll {
  left: 0px;
  background-image: url('../img/page_left.svg');
}

.rightscroll {
  left: 600px;
  background-image: url('../img/page_right.svg');
}

*[contenteditable="true"] {
  outline: none;
}

*[contenteditable="true"]:hover {
  background: rgba(255,255,0,.3);
  cursor: pointer;
}

*[contenteditable="true"]:focus {
  background: rgba(255,255,0,.1);
}