/* Base */
.cr {
  width: 200px;
  padding: 16px;
  position: absolute;
  z-index: 999999;
  position: fixed;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #f0f0f0;
  font: 700 18px/1 'Consolas', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.cr-right span {
  padding-left: 15px;
}

/* Positions */
.cr-top    { top: 25px; }
.cr-bottom { bottom: 25px; }
.cr-left   { left: -50px; }
.cr-right  { right: -50px; }

/* Rotations */
.cr-top.cr-left,
.cr-bottom.cr-right {
  transform: rotate(-45deg);
}
.cr-top.cr-right,
.cr-bottom.cr-left {
  transform: rotate(45deg);
}

/* For Each Environment */
.cr-docker {
  background-color: #38b;
}
.cr-docker span::after {
  content: 'docker';
}
.cr-development {
  background-color: #2b7;
}
.cr-development span::after {
  content: 'development';
}
.cr-usertest {
  background-color: #b32;
}
.cr-usertest span::after {
  content: 'usertest';
}