/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
/*
 * Prevents modern browsers from displaying 'audio' without controls
 * Remove excess height in iOS5 devices
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */
[hidden] {
  display: none;
}
/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
html {
  font-size: 100%;
  /* 1 */

  -webkit-text-size-adjust: 100%;
  /* 2 */

  -ms-text-size-adjust: 100%;
  /* 2 */

}
/*
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}
/*
 * Addresses margins handled incorrectly in IE6/7
 */
body {
  margin: 0;
}
/* =============================================================================
   Links
   ========================================================================== */
/*
 * Addresses outline displayed oddly in Chrome
 */
a:focus {
  outline: thin dotted;
}
/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */
a:hover,
a:active {
  outline: 0;
}
/* =============================================================================
   Typography
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE6/7
 * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}
h3 {
  font-size: 1.17em;
  margin: 1em 0;
}
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}
h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}
h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}
/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/
b,
strong {
  font-weight: bold;
}
blockquote {
  margin: 1em 40px;
}
/*
 * Addresses styling not present in S5, Chrome
 */
dfn {
  font-style: italic;
}
/*
 * Addresses styling not present in IE6/7/8/9
 */
mark {
  background: #ff0;
  color: #000;
}
/*
 * Addresses margins set differently in IE6/7
 */
p,
pre {
  margin: 1em 0;
}
/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
pre,
code,
kbd,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}
/*
 * Improves readability of pre-formatted text in all browsers
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */
/* 1 */
q {
  quotes: none;
}
/* 2 */
q:before,
q:after {
  content: '';
  content: none;
}
small {
  font-size: 75%;
}
/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* =============================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}
dd {
  margin: 0 0 0 40px;
}
/*
 * Addresses paddings set differently in IE6/7
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}
/*
 * Corrects list images handled incorrectly in IE7
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0;
  /* 1 */

  -ms-interpolation-mode: bicubic;
  /* 2 */

}
/*
 * Corrects overflow displayed oddly in IE9
 */
svg:not(:root) {
  overflow: hidden;
}
/* =============================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */
figure {
  margin: 0;
}
/* =============================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7
 */
form {
  margin: 0;
}
/*
 * Define consistent border, margin, and padding
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects text not wrapping in FF3
 * 3. Corrects alignment displayed oddly in IE6/7
 */
legend {
  border: 0;
  /* 1 */

  padding: 0;
  white-space: normal;
  /* 2 */

  *margin-left: -7px;
  /* 3 */

}
/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */

  margin: 0;
  /* 2 */

  vertical-align: baseline;
  /* 3 */

  *vertical-align: middle;
  /* 3 */

}
/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */
button,
input {
  line-height: normal;
  /* 1 */

}
/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  /* 1 */

  -webkit-appearance: button;
  /* 2 */

  *overflow: visible;
  /* 3 */

}
/*
 * Re-set default cursor for disabled elements
 */
button[disabled],
input[disabled] {
  cursor: default;
}
/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
      Known issue: excess padding remains in IE6
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */

  padding: 0;
  /* 2 */

  *height: 13px;
  /* 3 */

  *width: 13px;
  /* 3 */

}
/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */

  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */

  box-sizing: content-box;
}
/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */
textarea {
  overflow: auto;
  /* 1 */

  vertical-align: top;
  /* 2 */

}
/* =============================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans'), local('DroidSans'), url(//themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(//themes.googleusercontent.com/static/fonts/droidsans/v3/EFpQQyG9GqCrobXxL-KRMQFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}
* {
  box-sizing: border-box;
  user-select: none;
  -moz-user-select: -moz-none;
}
input,
textarea {
  user-select: text !important;
}
body {
  background-color: #61687e;
  background-image: url("../images/bg.png");
  font-family: 'Droid Sans', sans-serif;
  text-align: center;
  color: #070c16;
  overflow: hidden;
}
button,
.button {
  padding: 0.5em 1em;
  border-radius: 3px;
  color: #eee;
  text-shadow: 0 1px 0 black;
  font-family: 'Droid Sans', sans-serif;
  text-decoration: none;
  background: #3d4555;
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  border: 1px solid #000000;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.05), 0 0 5px rgba(0, 0, 25, 0.5), 0 5px 10px rgba(0, 0, 25, 0.3);
}
.loaded button,
.loaded .button {
  transition: background-color 0.15s;
}
button:hover,
.button:hover {
  background-color: #485164;
}
button:active,
.button:active {
  transition: none;
  background: #323946;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), 0 0 5px rgba(255, 255, 255, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.4), inset 0 5px 10px rgba(0, 0, 0, 0.2);
}
button:focus,
.button:focus {
  outline: none;
}
button.confirm,
.button.confirm {
  background-color: #166f16;
  border-color: #000000;
}
button.confirm:hover,
.button.confirm:hover {
  background-color: #1a841a;
}
button.confirm:active,
.button.confirm:active {
  background-color: #125a12;
}
button.cancel,
.button.cancel {
  background-color: #8d1d1d;
  border-color: #0e0303;
}
button.cancel:hover,
.button.cancel:hover {
  background-color: #a22121;
}
button.cancel:active,
.button.cancel:active {
  background-color: #781919;
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: fadeIn 0.5s both;
}
.no-cssanimations .shadow {
  opacity: 1;
}
footer {
  position: absolute;
  z-index: 11;
  bottom: 20px;
  right: 30px;
  font-size: 0.9em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.12);
}
footer h1 {
  margin: 0.1em;
  font-size: 1.8em;
}
footer .title a,
footer .author a {
  color: #070c16;
  text-decoration: none;
  font-weight: bold;
}
footer .title a:hover,
footer .author a:hover {
  color: #e0e6f3;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}
.loaded footer .title a,
.loaded footer .author a {
  transition-property: text-shadow, color;
  transition-duration: 0.35s;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 25, 0.6);
  animation: fadeInModal 0.5s;
  overflow-y: auto;
}
.modal .modal-window {
  position: relative;
  width: 400px;
  margin: auto;
  border-radius: 5px;
  padding: 15px 20px 10px 20px;
  overflow: hidden;
  background-color: rgba(70, 75, 105, 0.85);
  background-image: url("../images/modal-bg.png");
  color: #eee;
  font-size: 14px;
  text-shadow: 0 2px 2px rgba(0, 0, 25, 0.5);
  box-shadow: 0 0 15px rgba(0, 0, 25, 0.2), 0 0 1px 1px rgba(29, 31, 44, 0.85), inset 0 0 1px rgba(255, 255, 255, 0.5);
  animation: fadeInModalWindow 0.3s;
}
.modal .modal-window p {
  text-align: left;
}
.modal .modal-window .status {
  position: relative;
  height: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.modal .modal-window .status li {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s 0.25s;
}
.modal .modal-window.default .status li:first-child {
  opacity: 1;
  transition-delay: 0.5s;
}
.modal .modal-window.generating .status li.generating {
  opacity: 1;
  transition-delay: 0.5s;
}
.modal .modal-window.done .status li.done {
  opacity: 1;
  transition-delay: 0.5s;
}
.modal .modal-window .image-link {
  background-color: #1e2128;
  color: #eee;
  border-radius: 12px;
  border: 1px solid black;
  padding: 3px 10px;
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: center;
  width: 300px;
  height: 24px;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1), 0 0 5px rgba(255, 255, 255, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.5), inset 5px 5px 10px rgba(0, 0, 0, 0.3);
  transition-property: background-color, color, box-shadow;
  transition-duration: 0.25s;
  cursor: text;
}
.modal .modal-window .image-link:focus {
  outline: none;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1), 0 0 5px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(0, 0, 0, 0.5), inset 5px 5px 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(125, 200, 255, 0.25);
  background-color: #2a2d36;
}
.modal .modal-window .action-bar button,
.modal .modal-window .action-bar .button {
  margin: 0 4px;
  height: 32px;
}
.modal .modal-window .action-bar button:not(:active),
.modal .modal-window .action-bar .button:not(:active) {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.05), 0 0 5px rgba(0, 0, 25, 0.3), 0 3px 5px rgba(0, 0, 25, 0.1);
}
.modal .modal-window.error p,
.modal .modal-window.confirm p {
  margin-bottom: 20px;
  line-height: 1.6em;
}
.modal .modal-window.upload-link {
  min-height: 75px;
}
.modal .modal-window.upload-link .status {
  margin-bottom: 5px;
}
.modal .modal-window.upload-link .image-link-wrapper {
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.modal .modal-window.upload-link .action-bar {
  height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
}
.modal .modal-window.upload-link.done .image-link-wrapper {
  animation: showLinkWrapper 1.5s both;
}
.modal .modal-window.upload-link.done .image-link-wrapper .image-link {
  animation: showLink 1s 0.75s both;
}
.modal .modal-window.upload-link.done .action-bar {
  animation: showActionBar 1.5s 2s both;
}
.modal .modal-window.upload-progress .content {
  margin-bottom: 10px;
}
.modal .modal-window.upload-progress .status {
  margin-bottom: 10px;
}
.modal .modal-window.upload-progress .upload-bar {
  margin: auto;
  height: 14px;
}
.modal .modal-window.upload-progress .image-link {
  display: none;
  height: 14px;
  margin-bottom: 5px;
}
.modal .modal-window.upload-progress .confirm,
.modal .modal-window.upload-progress .link.button {
  display: none;
  opacity: 0;
}
.modal .modal-window.upload-progress.generating .progress-bar {
  animation: pulse 2.5s infinite;
}
.modal .modal-window.upload-progress.done .progress-bar {
  animation: fadeOut 0.5s both;
}
.modal .modal-window.upload-progress.done .upload-bar {
  opacity: 0;
  transition: opacity 0s 0.5s;
}
.modal .modal-window.upload-progress.done .image-link.appear {
  animation: uploadShowLink 0.75s both;
}
.modal .modal-window.text {
  width: 600px;
  line-height: 1.6em;
}
.modal .modal-window.text * {
  user-select: text;
}
.modal .modal-window.text h1 {
  font-size: 1.6em;
  margin-top: 0.2em;
}
.modal .modal-window.text h2 {
  font-size: 1.3em;
  margin-top: 1.5em;
}
.modal .modal-window.text p {
  padding: 0 1em;
}
.modal .modal-window.text a {
  color: #9F9FF0;
  transition: color 0.15s;
}
.modal .modal-window.text a:visited {
  color: #6969FC;
}
.modal .modal-window.text a:hover {
  color: #C5C5F5;
}
.modal .modal-window.text .action-bar {
  margin-top: 25px;
}
.modal:after {
  content: "";
  display: block;
  height: 50px;
  margin-top: 50px;
}
.progress .track {
  position: relative;
  width: 300px;
  margin: auto;
  background-color: #1e2128;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid black;
  padding: 2px;
  height: 100%;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1), 0 0 5px rgba(255, 255, 255, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.5), inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.progress .track .bar {
  width: 0%;
  height: 100%;
  background-color: #166F16;
  border-radius: 4px;
  overflow: hidden;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.3) 5px, rgba(255, 255, 255, 0.3) 10px), linear-gradient(90deg, #e2a63c, #8bb324, #166f16);
  background-size: 300px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.05), 0 0 5px rgba(0, 0, 0, 0.5), 3px 3px 3px rgba(0, 0, 0, 0.5);
  transition: width 0.15s;
}
.done .progress .track .bar {
  animation: pulse 2.5s infinite;
}
@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
}
@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}
@keyframes fadeInModal {
  0% {
    opacity: 0;
  }
}
@keyframes fadeInModalWindow {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
}
@keyframes shadow {
  0% {
    box-shadow: none;
  }
}
@keyframes pulse {
  33% {
    opacity: 0.5;
  }
}
html {
  height: 100%;
  width: 100%;
  min-height: 600px;
  min-width: 600px;
}
body {
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 600px;
  min-width: 600px;
  overflow: auto;
}
body.loaded {
  transition: background-color 1s;
}
body.dragging {
  background-color: #888fa3;
}
.welcome {
  display: none;
  padding: 10px;
  width: 100%;
  background: green;
  position: fixed;
  opacity: 0;
  top: -50px;
  color: white;
  background-color: #4D99B6;
  text-shadow: 0 2px 1px rgba(0, 0, 25, 0.3);
  border-bottom: 1px solid #2e5d6f;
  box-shadow: 0 4px 10px rgba(0, 0, 25, 0.1);
  transition: all 1s;
}
.drop-area {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.splash {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fadeIn 1.5s both;
}
.no-cssanimations .splash {
  opacity: 1;
}
.splash p {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.6em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.12);
}
.splash .splash-instructions {
  position: absolute;
  height: 350px;
  width: 580px;
  left: 50%;
  top: 50%;
  margin-top: -175px;
  margin-left: -290px;
  text-align: center;
}
.no-draganddrop-pb.no-copyandpaste .splash .splash-instructions {
  display: none;
}
.splash .splash-instructions .splash-image {
  position: relative;
  width: 300px;
  height: 280px;
  margin: 0 auto;
}
.splash .splash-instructions .splash-image .image-regular,
.splash .splash-instructions .splash-image .image-shine {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: 100%;
  background-repeat: no-repeat;
}
.splash .splash-instructions .splash-image .image-regular {
  background-image: url("../images/splash-image.png");
}
.splash .splash-instructions .splash-image .image-shine {
  opacity: 0;
  background-image: url("../images/splash-image-shine.png");
}
.loaded .splash .splash-instructions .splash-image .image-shine {
  transition: opacity 1s;
}
.dragging .splash .splash-instructions .splash-image .image-shine {
  opacity: 1;
}
.splash .splash-instructions p {
  margin-top: 5px;
  line-height: 1.4em;
}
.splash .splash-instructions p .sub-text {
  font-size: 0.7em;
  opacity: 0.6;
}
.no-copyandpaste .splash .splash-instructions p  .copyandpaste {
  text-decoration: line-through;
  opacity: 0.4;
}
.no-draganddrop-pb .splash .splash-instructions p  .draganddrop {
  text-decoration: line-through;
  opacity: 0.4;
}
.loaded .splash .splash-instructions p {
  transition-property: text-shadow, color;
  transition-duration: 1s;
}
.dragging .splash .splash-instructions p {
  color: #e0e6f3;
  text-shadow: 0 0 10px white;
}
.splash .not-supported {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
  height: 300px;
  width: 500px;
}
.no-draganddrop-pb.no-copyandpaste .splash .not-supported {
  display: block;
}
.webcam-button {
  display: none;
  position: absolute;
  z-index: 11;
  bottom: 30px;
  width: 120px;
  left: 50%;
  margin-left: -60px;
  vertical-align: top;
  padding: 0;
  height: 40px;
  text-align: left;
}
.webcam-button .icon {
  display: inline-block;
  background-image: url("../images/webcam-icon.png");
  background-size: 35px;
  width: 35px;
  height: 35px;
  opacity: 0.5;
  margin: 1px 3px 0px 5px;
}
.webcam-button .text {
  position: relative;
  top: -0.7em;
}
.link-bar {
  position: absolute;
  z-index: 11;
  left: 20px;
  width: 40px;
  bottom: 20px;
  text-align: left;
}
.link-bar .button {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0);
  text-decoration: none;
  text-shadow: none;
  overflow: hidden;
}
.loaded .link-bar .button {
  transition-property: color, width, background-color;
  transition-duration: 0.4s;
  transition-delay: 0s, 0.4s, 0.4s;
}
.link-bar .button .icon {
  transition: all 0.4s 0.4s;
  opacity: 0.5;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 35px;
  background-repeat: no-repeat;
  background-position: center;
}
.link-bar .button:hover,
.link-bar .button:active {
  opacity: 1;
  width: 80px;
  color: #eee;
  transition-delay: 0.4s, 0s, 0s;
}
.link-bar .button:hover .icon,
.link-bar .button:active .icon {
  opacity: 0;
  transition-delay: 0s;
}
.link-bar .button.show-about .icon {
  background-image: url("../images/about-icon.png");
}
.link-bar .button.show-uploads .icon {
  background-image: url("../images/uploads-icon.png");
}
.link-bar .button.show-uploads .num {
  position: absolute;
  color: white;
  opacity: 0.5;
  font-size: 11px;
  left: 0;
  width: 100%;
  margin-top: 1px;
  padding-right: 2px;
  text-align: center;
  transition: all 0.4s 0.4s;
  transition: all 0.4s 0.4s;
}
.link-bar .button.show-uploads:hover,
.link-bar .button.show-uploads:active {
  width: 93px;
}
.link-bar .button.show-uploads:hover .num,
.link-bar .button.show-uploads:active .num {
  opacity: 0;
  transition-delay: 0s;
}
.link-bar .button.extension-link .icon {
  background-image: url("../images/chrome-icon.png");
}
.link-bar .button.extension-link:hover,
.link-bar .button.extension-link:active {
  width: 103px;
}
.modal .uploads {
  width: 450px;
}
.modal .uploads h1 {
  font-size: 1.6em;
  margin-top: 0.2em;
}
.modal .uploads ul {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}
.modal .uploads li {
  display: inline-block;
  width: 150px;
  height: 100px;
  margin: 10px;
}
.modal .uploads a {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 50%;
  box-shadow: 0 0 10px rgba(0, 0, 25, 0.7);
  transition: box-shadow 0.15s;
}
.modal .uploads a:after {
  content: "";
  display: block;
  background: rgba(255, 255, 255, 0.05);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.15s;
}
.modal .uploads a:hover {
  box-shadow: 0 0 20px rgba(0, 0, 25, 0.9);
}
.modal .uploads a:active {
  position: relative;
  top: 1px;
}
.modal .uploads a:hover:after {
  opacity: 1;
}
.webcam-window {
  position: absolute;
  animation: fadeInScale 0.5s;
  top: 0;
  left: 0;
  width: 640px;
  height: 480px;
}
.webcam-window video {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 25, 0.7);
  animation: shadow 0.5s both;
}
.webcam-window .action-bar {
  position: absolute;
  top: 105%;
  width: 100%;
}
.webcam-window .action-bar button {
  margin-left: 5px;
}
.image-editor {
  position: relative;
  margin: 0 auto;
  animation: fadeInScale 0.5s;
}
.image-editor .image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eee;
  background-image: url("../images/image-bg.gif");
  box-shadow: 0 0 20px rgba(0, 0, 25, 0.7);
  animation: shadow 0.5s both;
}
.image-editor .image-container .image {
  position: relative;
  cursor: crosshair;
}
.image-editor .image-container .image .crop-selection {
  position: absolute;
  opacity: 0;
  background-image: inherit;
  box-shadow: 0 0 15px 3px rgba(0, 0, 5, 0.9), inset 0 0 2px rgba(255, 255, 255, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transition: opacity 0.25s;
}
.image-editor .image-container .image .crop-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-image: inherit;
  transition: opacity 0.5s;
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  -o-filter: grayscale(1);
  filter: grayscale(1);
}
.image-editor .image-container .image .crop-overlay:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 25, 0.3);
}
.image-editor .image-container .instructions {
  position: absolute;
  bottom: 10px;
  margin: 0;
  left: 20px;
  list-style-type: none;
  text-align: left;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 5px 15px;
  border-radius: 40px;
  color: white;
  text-shadow: none;
  animation: fadeInScale 0.5s 1s backwards, fadeOut 2s 5s forwards;
}
.image-editor .image-container .instructions li {
  height: 35px;
}
.image-editor .image-container .instructions .crop .icon {
  display: inline-block;
  background-image: url("../images/crop-icon.png");
  background-size: 35px;
  width: 35px;
  height: 35px;
}
.image-editor .image-container .instructions .crop .text {
  position: relative;
  top: -0.7em;
  margin: 0 5px;
}
.image-editor .x-scroll-bar,
.image-editor .y-scroll-bar {
  display: none;
  position: absolute;
}
.image-editor .x-scroll-bar .track,
.image-editor .y-scroll-bar .track {
  position: relative;
  background-color: #1e2128;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid black;
  padding: 2px;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1), 0 0 5px rgba(255, 255, 255, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.5), inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.image-editor .x-scroll-bar .track .handle,
.image-editor .y-scroll-bar .track .handle {
  position: relative;
  background-color: #61687e;
  border-radius: 4px;
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.05), 0 0 5px rgba(0, 0, 0, 0.5), 3px 3px 3px rgba(0, 0, 0, 0.5);
}
.image-editor .x-scroll-bar {
  bottom: 0;
  height: 50px;
  width: 100%;
}
.image-editor .x-scroll-bar .track {
  width: 95%;
  height: 14px;
  margin-left: 2.5%;
  margin-top: 20px;
}
.image-editor .x-scroll-bar .track .handle {
  height: 8px;
}
.image-editor .y-scroll-bar {
  right: 0;
  top: 0;
  width: 50px;
  height: 100%;
}
.image-editor .y-scroll-bar .track {
  height: 95%;
  width: 14px;
  top: 2.5%;
  margin-left: 20px;
}
.image-editor .y-scroll-bar .track .handle {
  width: 8px;
  background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.2));
}
.image-editor.scroll-x .x-scroll-bar {
  display: block;
}
.image-editor.scroll-y .y-scroll-bar {
  display: block;
}
.image-editor.scroll-x.scroll-y .x-scroll-bar {
  padding-right: 50px;
}
.image-editor.scroll-x.scroll-y .y-scroll-bar {
  padding-bottom: 50px;
}
.image-editor .action-bar {
  position: absolute;
  top: 105%;
  width: 100%;
  min-width: 150px;
}
.image-editor .action-bar .confirm {
  font-size: 18px;
  width: 100px;
  height: 40px;
  overflow: hidden;
}
.image-editor .action-bar .confirm span {
  display: inline-block;
}
.image-editor .action-bar .cancel {
  width: 32px;
  height: 32px;
  vertical-align: top;
  margin: 5px;
  text-indent: -9999px;
  background-image: url("../images/delete-icon.png");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: center;
}
.image-editor.cropped .image-container .image .crop-overlay,
.image-editor.cropped .image-container .image .crop-selection {
  opacity: 1;
}
.pastearea {
  position: absolute;
  opacity: 1;
}
@keyframes showLinkWrapper {
  30% {
    opacity: 0;
    height: 30px;
  }
  100% {
    opacity: 1;
    height: 30px;
    padding-top: 5px;
  }
}
@keyframes showLink {
  0% {
    opacity: 0;
    width: 0;
    color: rgba(255, 255, 255, 0);
  }
  80% {
    width: 300px;
    color: rgba(255, 255, 255, 0);
  }
}
@keyframes showActionBar {
  30% {
    height: 35px;
    margin-top: 15px;
  }
  60% {
    height: 35px;
    margin-top: 15px;
    opacity: 0;
  }
  100% {
    height: 35px;
    margin-top: 15px;
    opacity: 1;
  }
}
@keyframes uploadShowLink {
  0% {
    color: rgba(255, 255, 255, 0);
  }
  80% {
    height: 24px;
    color: rgba(255, 255, 255, 0);
  }
  100% {
    height: 24px;
  }
}