.literally {
  position: relative;
  background-color: rgb(255, 255, 255);

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.literally canvas {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
  width: 100%;
  background-color: blue;
}

/* toolbar structure */

.literally .toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(220, 220, 220);
}
.literally .toolbar-row {
  width: 100%;
}

.literally .toolbar-row-left {
  float: left;
  padding-left: 3px;
}

.literally .toolbar-row-right {
  width: 13em;
  float: right;
  text-align: right;
  padding-right: 3px;
}

/* action/tool buttons */

.literally .tools .button {
  padding: 0;
  text-align: center;
  line-height: 24px;
  width: 24px;
  height: 24px;
}

.literally .tools .button img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.literally .zoom-display {
  text-align: center;
  width: 1.5em;
  border-radius: 5px;
  background-color: #333;
  font-weight: bold;
  color: white;
  display: inline-block;
  line-height: 14px;
  padding: 5px 5px 5px 5px;
  margin: 2px 0 2px 0;
  font-size: 12px;
}

.literally .tool-options-container {
  display: inline-block;
}

.literally .button.color-square {
  background-image: none;
  width: 12px;
  height: 14px;
  margin-top: 0;
}

.literally .button.color-square:hover {
  background-image: none;
}

/* buttons derived from
 * https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css
 */

.literally .button {
  display: inline-block;
  padding: 5px 7px 5px 5px;
  text-align: center;
  margin: 2px 0 2px 0;
  font-size: 12px;
  line-height: 14px;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  outline: none;

  background-color: #ececec;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
  background-image: -moz-linear-gradient(#f4f4f4, #ececec);
  background-image: -ms-linear-gradient(#f4f4f4, #ececec);
  background-image: -o-linear-gradient(#f4f4f4, #ececec);
  background-image: linear-gradient(#f4f4f4, #ececec);
  -moz-background-clip: padding; /* for Firefox 3.6 */
  background-clip: padding-box;
  border-radius: 5px;
  /* IE hacks */
  zoom: 1;
  *display: inline;
}

.literally .button:hover,
.literally .button:focus,
.literally .button:active,
.literally .button.active {
  text-decoration: none;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
  color: #fff;
  background-color: #3c8dde;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
  background-image: -moz-linear-gradient(#599bdc, #3072b3);
  background-image: -o-linear-gradient(#599bdc, #3072b3);
  background-image: linear-gradient(#599bdc, #3072b3);
}

.literally .button:active,
.literally .button.active {
  background-color: #3072b3;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
  background-image: -moz-linear-gradient(#3072b3, #599bdc);
  background-image: -ms-linear-gradient(#3072b3, #599bdc);
  background-image: -o-linear-gradient(#3072b3, #599bdc);
  background-image: linear-gradient(#3072b3, #599bdc);
}

/* overrides extra padding on button elements in Firefox */
.literally .button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.literally .button.danger {
  color: white;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  background-color: #F37873;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F37873), to(#CB0500));
  background-image: -moz-linear-gradient(#dc5f59, #b33630);
  background-image: -ms-linear-gradient(#dc5f59, #b33630);
  background-image: -o-linear-gradient(#dc5f59, #b33630);
  background-image: linear-gradient(#dc5f59, #b33630);
}

.literally .button.danger:hover,
.literally .button.danger:focus,
.literally .button.danger:active {
  border-color: #b53f3a;
  border-bottom-color: #a0302a;
  color: #fff;
  background-color: #dc5f59;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
  background-image: -moz-linear-gradient(#dc5f59, #b33630);
  background-image: -ms-linear-gradient(#dc5f59, #b33630);
  background-image: -o-linear-gradient(#dc5f59, #b33630);
  background-image: linear-gradient(#dc5f59, #b33630);
}

.literally .button.danger:active,
.literally .button.danger.active {
  border-color: #a0302a;
  border-bottom-color: #bf4843;
  background-color: #b33630;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
  background-image: -moz-linear-gradient(#b33630, #dc5f59);
  background-image: -ms-linear-gradient(#b33630, #dc5f59);
  background-image: -o-linear-gradient(#b33630, #dc5f59);
  background-image: linear-gradient(#b33630, #dc5f59);
}

/* did my own button groups */

.literally .button-group {
  display: inline-block;
}

.literally .button-group .button {
  border-radius: 0;
  border-left: 1px solid #d4d4d4;
}

.literally .button-group .button:first-child {
  border-radius: 5px 0px 0px 5px;
  border-left: none;
}

.literally .button-group .button:last-child {
  border-radius: 0px 5px 5px 0px;
}