div#credits {
  opacity: 0;
  margin: auto;
  width:300px;
  text-align: center;
  position:absolute;
  top:0;
}

div#letterbox-top {
  height:50%;
  margin-bottom: -360px;
  background-color: rgba(0,0,0,0);
}

div#overlay {
  height:100%;
  width:100%;
  overflow:hidden;
  opacity:0;
  background-color:black;
  position:fixed;
  top:0px;
  left:0px;
  z-index:12;
}

.top {
  position:absolute;
  top:0px;
  z-index:300;
  margin: 0px auto;
}
div#field {
  width:100%;
  height:720px;
  background-color:rgba(0,0,0,0.0);
  overflow:hidden;
  position:fixed;
}

div.container {
  position:absolute;
}

div, canvas { 
  box-sizing: content-box;
}

div.back {
	-moz-transform: perspective(700px) rotateY(-180deg);
	-webkit-transform: perspective(700px) rotateY(-180deg);
	transform: perspective(700px) rotateY(-180deg);
  background-image:url('http://oath.herokuapp.com/static/basecamp-paper.jpg');
  opacity:0.85;
  z-index:20;
}

canvas {
	-moz-backface-visibility: visible;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}


div.threed {
  width: 100%;
  height: 100%;
  position:absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

div.front {
	-webkit-transform: perspective(700px) rotateY(0deg);
	-moz-transform: perspective(700px) rotateY(0deg);
	transform: perspective(700px) rotateY(0deg);
  z-index: 1
}

div.exit {
  background-color: black;
  opacity:0;
  height:100%;
  width:100%;
  position:absolute;
  z-index: 500;
}

div.scratch {
  display:none;
}

canvas.photo {
  opacity: 0;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}

img.color {
  opacity:0;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}

html, body {
  height:100%;
}

#overlay {
  background-color: black;
  padding: 0px;
  margin: 0px;
  color:#808080;
}

a {
  color:#808080;
}

.stitches-text {
  background-color: transparent;
  box-shadow: 0px 0px #000;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline:none;
  border:none;
  resize:none;
  overflow:hidden;
  width:100%;
  padding:15px;
  display:block;
  font-family:'Courier New', Courier, monospace;
  font-size: 15px;
  font-weight: bold;
  top:0;
  bottom:0;
  color:rgba(0.15,0.15,0.15,0.7);
}
.tipsy {
  font-family:'Courier New', Courier, monospace;
  font-size: 12px;
  font-weight: bold;
}

div.invite {
  height:1em;
  font-family:'Courier New', Courier, monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 15px;
  color:rgba(0.25,0.25,0.25,1);
}
span.prompt-text {
  vertical-align:middle;
  display:inline-block;
  padding-bottom:0.5em;
}

button.send, button.reblog {
  z-index: 100;
  margin:0 1em 0 0;
  float:right;
  width:20px;
  height:20px;
}

button.send {
  background-image:url('http://oath.herokuapp.com/static/send.png');
}

button.reblog {
  background-image:url('http://oath.herokuapp.com/static/reblog.png');
}

button.stitches-button {
  background-color:rgba(0,0,0,0);
  border-color:rgba(0,0,0,0);
  opacity:0.65;
  border:0;
  padding:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100%;
}

button.stitches-button:hover {
  cursor: pointer;
  opacity:0.9;
}

button#launchbutton {
  position:absolute;
  top:2em;
  right:0;
  z-index:11;
}

div.arrow {
  position:absolute;
  top:50%;
  margin-top:-0.5em;
  right:0.5em;
  font-size: 32px;
  height:1em;
  color: black;
  text-shadow: 0px 0px 5px white;
  opacity: 0;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  z-index: 3;
}

div#loading-title {
  position:absolute;
  top:50%;
  width:100%;
  height:1em;
  margin-top: -0.5em;
  font-size:14px;
  letter-spacing: 1px;
  font-family:'Courier New', Courier, monospace;
  font-weight: bold;
  color: rgba(0.85,0.85,0.85,1);
  text-align:center;
}

div#nav_toggle_wrapper, div#pagination_index {
  z-index: 2 !important;
}

button#fullscreen {
  position:absolute;
  bottom:1em;
  right:1em;
  width:48px;
  height:32px;
  background-image: url('http://oath.herokuapp.com/static/fullscreen_light.png');
}

div#popup {
  position: relative;
  left: 0px;
  top: -40px;
  width: 100%;
  min-width: 640px;
  background: #eee;
  text-align: center;
  border-bottom: 2px dashed #333;
  color: #333;
  padding: 8px;
  font-weight: bold;
  z-index: 2000;
  height:40px;
  transition: top 1s ease-out;
  font-size:12px;
  letter-spacing: 1px;
  font-family:'Courier New', Courier, monospace;
}