@font-face {
  font-family: oswald;
  src: url("fonts/oswald.ttf") format("truetype"); }

html,
body,
ul,
ol,
li,
form,
dl,
dt,
dd {
  padding: 0;
  margin: 0;
  display: block; }

ul,
ol {
  list-style: none; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

select,
input,
textarea,
button {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline; }

button,
input {
  line-height: normal; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button; }

label {
  cursor: pointer; }

input, select {
  vertical-align: middle;
  _vertical-align: text-bottom; }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom;
  *vertical-align: baseline; }

button.custom {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: visible;
  vertical-align: middle;
  font-size: 1em;
  width: auto; }

button.custom::-moz-focus-inner {
  border: 0;
  padding: 0; }

body {
  font: 13px/1.231 sans-serif;
  color: #fff; }

pre,
code,
kbd,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

p {
  line-height: 1.4; }

select,
input,
textarea {
  color: #333;
  font-family: sans-serif; }

a img {
  border: 0; }

a:link, a:visited {
  text-decoration: none;
  color: #ffb135;
  font-weight: bold; }

a:hover, a:active {
  text-decoration: underline; }

html {
  height: 100%;
  background: #004a86;
  background: -webkit-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
  background: -moz-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
  background: -ms-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
  background: -o-radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%);
  background: radial-gradient(center center, circle cover, #0091d5 0%, #0091d5 15%, #004a86 100%); }

body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0 20px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAgMAAADzfxo+AAAADFBMVEX///////////8AAAD1GyhhAAAABHRSTlMoNhsAX8Wz8wAAAC5JREFUOMtjCMUCGOr///7/fz8qMWQEs1YtWrVKC5UY9dGoj0Z9NOqjUR8NckEAV3eSqNB2GKwAAAAASUVORK5CYII="); }

.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: table;
  table-layout: fixed; }
  .container.intro {
    width: 635px;
    height: auto; }
  .container > * {
    display: table-row; }
  .not-supported .container {
    display: none; }

.main-header {
  display: table-cell;
  text-align: center;
  height: 0; }
  .main-header .h-main {
    display: none; }

.intro .further-detail {
  height: 0; }

.toolbar-container,
.toolbar-bottom-container {
  display: table-row;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }

.cow-logo {
  background: url("imgs/sprites1.png") no-repeat -2px -66px;
  position: relative;
  left: 25px;
  height: 20px;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  text-indent: -5000px;
  display: inline-block;
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -o-transform: scale(0.1);
  transform: scale(0.1);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0; }
  .intro .cow-logo {
    width: 448px;
    height: 388px;
    margin: 66px 0 29px;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }

.h-main {
  font: normal 59px/1 oswald, sans-serif;
  color: white;
  text-shadow: #004A86 0 4px 1px;
  text-align: center; }

.canvas-view {
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }
  .canvas-view .upload-input {
    position: absolute;
    top: -5000px;
    left: -5000px;
    cursor: pointer;
    z-index: 10; }
  .canvas-view .lg-button {
    display: none; }
    .intro .canvas-view .lg-button {
      display: inline-block; }

.canvas-cell {
  display: table-cell;
  height: 100%;
  position: relative; }
  .intro .canvas-cell {
    height: 139px;
    cursor: auto; }

.canvas-inner {
  overflow: auto;
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMzMz0oyR4AAAARSURBVAgdY/jPwIAVYRf9DwB+vw/xbMOy9QAAAABJRU5ErkJggg==");
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  position: relative;
  height: 100%; }
  .opera .canvas-inner {
    /*
				Opera treats the 100% height as the height of the body element, not the
				table cell. This absolute layout works around that. However, it works
				because Opera recognises the position:relative on the table cell, which
				it shouldn't really. Using this fix on all browsers breaks layout in
				Firefox.
			*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto; }
  .intro .canvas-inner {
    overflow: hidden; }

.sprite-canvas-container {
  position: absolute;
  min-width: 100%;
  min-height: 100%; }
  .sprite-canvas-container canvas {
    display: block; }
  .sprite-canvas-container .highlight {
    background: rgba(0, 90, 255, 0.25);
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    pointer-events: none;
    border: 1px solid rgba(0, 114, 255, 0.5);
    box-sizing: border-box;
    display: none;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    -webkit-transition-property: border, background;
    -moz-transition-property: border, background;
    -ms-transition-property: border, background;
    -o-transition-property: border, background;
    transition-property: border, background; }
    .sprite-canvas-container .highlight.high-vis {
      background-color: rgba(0, 255, 48, 0.25);
      border-color: rgba(0, 255, 51, 0.5); }
  .intro .sprite-canvas-container {
    opacity: 0; }

.select-btn {
  margin: 0 48px 0 0; }

.start-buttons {
  position: absolute;
  top: 39px;
  left: 0;
  width: 100%;
  text-align: center; }

.drop-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(37, 207, 28, 0.2);
  box-shadow: inset 0 0 18px #175a00;
  display: none;
  pointer-events: none; }
  .drag-over .drop-indicator {
    display: block;
    opacity: 1; }

.lg-button {
  width: 192px;
  border-radius: 100px;
  color: #fff;
  font: normal 29px/1 oswald, sans-serif;
  padding: 14px 20px;
  box-shadow: inset 0 0 6px #ff6c00, 0 3px 6px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  text-shadow: rgba(0, 0, 0, 0.5) 0 2px 0;
  background: -webkit-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
  background: -moz-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
  background: -ms-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
  background: -o-linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%);
  background: linear-gradient(top, #ffb95a 0%, #ff6c00 50%, #c73a00 100%); }

.css-output {
  display: block;
  white-space: pre;
  background: rgba(0, 0, 0, 0.1);
  padding: 20px 30px;
  overflow: auto;
  position: relative;
  tab-size: 4; }
  .intro .css-output {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden; }
  .css-output code {
    font-size: 1.2em;
    line-height: 1; }
  .css-output [data-inline-edit] {
    position: relative;
    display: inline-block; }
    .css-output [data-inline-edit]::before {
      border-bottom: 1px dotted #fff;
      position: absolute;
      left: 0;
      bottom: -3px;
      right: 0;
      content: ""; }
  .css-output .file {
    cursor: pointer; }
  .css-output input[type='text'] {
    position: absolute;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    font: normal 12px/1 monospace;
    padding: 3px;
    outline: none; }

.toolbar {
  overflow: hidden;
  padding: 5px 6px 0;
  position: relative;
  z-index: 1;
  border-style: solid;
  border-width: 1px 0;
  border-color: #e2e2e2 #000 #888;
  color: #333;
  background: -webkit-linear-gradient(top, #d0d0d0, #a7a7a7);
  background: -moz-linear-gradient(top, #d0d0d0, #a7a7a7);
  background: -ms-linear-gradient(top, #d0d0d0, #a7a7a7);
  background: -o-linear-gradient(top, #d0d0d0, #a7a7a7);
  background: linear-gradient(top, #d0d0d0, #a7a7a7); }
  .toolbar.top {
    border-radius: 5px 5px 0 0; }
  .intro .toolbar {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0; }
  .toolbar [role=button] {
    float: left;
    margin: 0 5px 5px 0;
    border: 1px solid #888;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 10px 4px 26px;
    position: relative;
    background: -webkit-linear-gradient(top, #fefefe, #b8b8b8);
    background: -moz-linear-gradient(top, #fefefe, #b8b8b8);
    background: -ms-linear-gradient(top, #fefefe, #b8b8b8);
    background: -o-linear-gradient(top, #fefefe, #b8b8b8);
    background: linear-gradient(top, #fefefe, #b8b8b8); }
    .toolbar [role=button]::before {
      content: '';
      width: 16px;
      height: 17px;
      position: absolute;
      top: 4px;
      left: 5px;
      background: url("imgs/sprites1.png") no-repeat; }
    .toolbar [role=button].active {
      background: #707070;
      box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.6);
      color: #fff; }
    .toolbar [role=button].no-label {
      width: 26px;
      padding: 4px 0;
      text-indent: -5000px; }
    .toolbar [role=button].select-sprite::before {
      background-position: -4px -2px; }
    .toolbar [role=button].select-bg::before {
      background-position: -50px -3px; }
    .toolbar [role=button].open-img::before {
      background-position: -26px -2px; }
    .toolbar [role=button].invert-bg::before {
      background-position: -99px -2px; }
    .toolbar [role=button].reload-img::before {
      background-position: -75px -2px; }
    .toolbar [role=button].percent::before {
      background-position: -121px -2px; }
    .toolbar [role=button].bg-size::before {
      background-position: -141px -1px; }
  .toolbar .feedback {
    float: left;
    padding: 5px;
    color: #555;
    opacity: 0; }

.toolbar-group [role=button] {
  margin-right: 0;
  border-radius: 0;
  border-left-width: 0; }
  .toolbar-group [role=button]:first-child {
    border-left-width: 1px;
    border-radius: 4px 0 0 4px; }
  .toolbar-group [role=button]:last-child {
    margin-right: 5px;
    border-radius: 0 4px 4px 0; }

.main-footer {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.23); }
  .main-footer p {
    float: right;
    padding: 15px 29px 0;
    margin: 0;
    white-space: nowrap; }
    .intro .main-footer p {
      padding: 12px 16px 0; }
  .main-footer .the-team-logo {
    background: url("imgs/sprites1.png") no-repeat -4px -29px;
    width: 88px;
    height: 17px;
    display: inline-block;
    text-indent: -5000px;
    vertical-align: top;
    margin: -1px 0 0 4px; }
  .main-footer ul {
    float: left;
    padding: 16px 30px; }
    .intro .main-footer ul {
      padding: 13px 16px; }
  .main-footer li {
    display: inline; }
    .main-footer li a:link,
    .main-footer li a:visited {
      font-weight: normal;
      color: #fff;
      float: left;
      padding: 0 10px 0 0;
      margin: 0 10px 0 0;
      border-right: 1px solid #fff; }
    .main-footer li:last-child a:link,
    .main-footer li:last-child a:visited {
      padding: 0;
      margin: 0;
      border: none; }

.feature-test {
  display: none;
  width: 800px;
  margin: 0 auto;
  text-align: center; }
  .not-supported .feature-test {
    display: block; }
  .feature-test h1 {
    font: normal 2.5em sans-serif;
    margin: 0;
    padding: 40px 0; }
  .feature-test ul {
    display: inline-block;
    *display: inline;
    zoom: 1; }
  .feature-test li {
    margin: 10px auto;
    font-size: 1.1em;
    overflow: hidden;
    text-align: left; }
  .feature-test p {
    width: 600px;
    margin: 0 auto 20px;
    font-size: 1.1em;
    text-align: left; }
  .feature-test .pass,
  .feature-test .fail {
    float: left;
    width: 50px;
    font-weight: bold;
    color: #5f5; }
  .feature-test .fail {
    color: #f55; }

.intro-copy {
  display: none; }