@font-face {  
	font-family:'Open Sans Condensed';  
	src:url(OpenSans-CondLight.ttf) format("truetype");  
}

/* html, body */
html { box-sizing:border-box; min-height:100%; width:100%; overflow:auto; }
body { margin:0; padding:0; height:100%; font-family:'Open Sans Condensed', sans-serif; }

/* general resets */
::selection{background:yellow;color:#040707;text-shadow:none}
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
.cf { *zoom:1; }

body, div, section, canvas, video, header, img { -moz-box-sizing:border-box; box-sizing:border-box; }

/* header */
section { padding:0 30px; position:relative; z-index:2; }

/* main stuffs */
#container { cursor:pointer; position:absolute; background-color: black; z-index:1; }
#container:active { border-color:#d4870d; }
#container:after { content:"Click above to take some screenshots."; text-shadow:0 1px 0 rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.05), 0 2px 3px rgba(0,0,0,0.2); font-size:150%; padding:0; color:white; display:block; background:transparent url(/images/arrow.png) no-repeat bottom right; height:65px; width:330px; position:absolute; bottom:-92px; left:0; }
#done { display:none; }
video { display:block; width:100%; position:relative; z-index:1; }

/* rendered screencaps */
#snaps { margin:5em 0 0; padding:0 0 5em; text-align:center; width:330px; position:relative; left:50px; }
figure { border:0; border-radius:0; padding:0; background:white; cursor:pointer; display:block; width:128px; margin:0 20px 20px 0; background:white; box-shadow:0 1px 2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.05); position:relative; z-index:1; float:right;  }
canvas { width:128px; height: 96px; display:block; }

canvas div, figure div { position:absolute; left:-9999px; display:block; }
figure.selected { border-color:#7f0101;z-index:2; opacity:1; box-shadow:0 1px 2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(212,135,13,.3); }

canvas.non, figure.non { opacity:.6; }
canvas:hover, canvas:active, figure:hover, figure:active { opacity:1; }

/* actions per image */
#actions { width:120px; height:100%; margin:0; position:fixed; top:0; padding:30px 20px; z-index:3; background:rgba(0,0,0,0.2); box-shadow:5px 0 0 rgba(255,255,255,0.1); display:none; }
button.btn, input.btn, .action, a.action:visited { display:block; text-decoration:none; border:0; background:green; margin:0 0 20px; position:absolute; display:inline-block; position:relative; cursor:pointer; border-radius:4px; float:left; color:white; padding:.15em .65em; font-size:100%; font-family:'Open Sans Condensed', sans-serif; text-shadow:0 1px 0 rgba(0,0,0,0.35); box-shadow:0 2px 0 rgba(0,0,0,0.15); border:1px solid #487306; font-weight:bold; line-height:1.6; position:relative; width:60px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#40b501), to(#5b8b10));
background: -webkit-linear-gradient(#40b501, #5b8b10);
}
button.btn:hover, input.btn:hover, .action:hover { box-shadow:0 2px 0 rgba(0,0,0,0.35); }
button.btn:active, input.btn:active, .action:active { box-shadow:0 1px 3px rgba(0,0,0,0.45) inset; padding:.2em .65em .1em; top:1px; }
.btn.share, .action.share { 
  width: auto;
  height: 4em;
  margin: 0;
  border-color:#065a85;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4fb9e5), to(#217eae));
  background: -webkit-linear-gradient(#4fb9e5, #217eae);
}
.btn.delete, .action.delete { border-color:#5d0c01;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#db3908), to(#8e1201));
background: -webkit-linear-gradient(#db3908, #8e1201);
margin:auto; }

@-webkit-keyframes flash {
  0% {
    -webkit-filter: brightness(40);
  }
  4% {
    -webkit-filter: brightness(3);
  }
  100% {
    -webkit-filter: brightness(1);
  }
}

.flash video {
  -webkit-filter: brightness(1);
  -webkit-animation: flash 1.2s cubic-bezier(0.000, 1.105, 0.450, 0.940) normal;
}

#fallbackcamera {
  margin: auto;
  text-align: center;
}

#actionbar {
  background-color: black;
}

#toggle-list, #toggle-camera {
  border-radius: 5px;
  z-index: 100;
  width: 36px;
  height: 36px;
  margin: 2px;
  padding: 0;
  background-color: rgba(255,255,255,1);
  color: black;
  border: solid 1px #ccc;
  position: absolute;
  top: 0;
  font-size: 24px;
  left: 0;
  -webkit-transition: background-color 0.2s ease-in-out;
  box-sizing: content-box;
}

#toggle-list:active, #toggle-camera:active {
  background-color: rgba(0,0,0,0.4);
}

#camerainput {
  width: 80px;
  height: 48px;
  zoom: 3;
  cursor: pointer;
}

#camerainput:before {
  content: url(/images/camera.png);
  display: inline-block;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  background-color: black;
}

#root {
  -webkit-perspective: 800;
  -webkit-transform-origin: center center;
  -webkit-transform-style: preserve-3d;
  height: 100%;
}

#root #container {
  -webkit-transform: rotateY(0deg);
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
  z-index: 10;
}

#root #control {
  -webkit-transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

#root.list #container {
  -webkit-transform: rotateY(-180deg);
  -webkit-backface-visibility: hidden;
  background-color: black;
}

#root.list #control {
  -webkit-transform: rotateY(0deg);
  -webkit-backface-visibility: hidden;
  background-color: white;
}

/* footer */
footer { font-size:12px; position:fixed; bottom:1%; right:2%; opacity:.75; z-index:1; text-align:right; text-shadow:0 1px 0 rgba(0,0,0,0.5); color:white; }

header {
  display: none;
}

figure { 
  float:left;
  margin:0 20px 20px 0;
  width: 128px;
  height: 96px;
}

figure.non { display: none; }

figure.selected { width: 100%; margin: 0; height: 100%; }
figure.selected canvas { width: 640px; height: 480px; }

.cf {
  margin: 0;
  padding: 0;
  height: 100vh;
  max-height: 100vh;
  text-align: center;
  display: -webkit-flex;
  -webkit-flex-direction: column;
}

#container {
  display: block;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  position: absolute;
}

#container:after {
  display: none;
}

#container video {
  width: 100%;
}

#snaps {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: center;
  -webkit-flex: 1;
  position: static;
  overflow-y: auto;
  flex: 1;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  left: 0;
  text-align: center;
  margin: 0;
  padding: 0;
}

#actions.show {
  display: -webkit-flex;
}

#actions {
  display: none;
  -webkit-flex-direction: row;
  background-color: rgba(0,0,0,1);
  width: 100%;
  height: auto;
  padding: 1em;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
}

.action {
  margin: 10px;
  padding: 0.5em 1em;
  -webkit-flex: auto;
}

@font-face {
  font-family: 'typicons';
  src: url('/images/typicons.eot');
  src: url('/images/typicons.eot?#iefix') format('embedded-opentype'),
       url('/images/typicons.woff') format('woff'),
       url('/images/typicons.ttf') format('truetype'),
       url('/images/typicons.svg#typicons') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ::before psuedo-selector inserts and styles icon */
.typcn::before {
  font-family: 'typicons';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  height: 1em;
  font-size: 1em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
</style>