/* Application */
/* General global styles */


/* . Layout . */
body {
	background: url('../images/background.png') repeat;
	padding: 0 2.8em;
	font-family: Helvetica, sans-serif;
}


header {
	font-family: neoretrodrawregular, sans-serif;
	font-size: 80px;
	margin: 0.2em 0 0.4em;
}


#samples {
	margin: 3em 0;
}


footer {
	position: fixed;
	bottom: 0;
	z-index: 6;
	font-size: 13px;
	font-family: 'Lucida Grande', Helvetica, sans-serif;
	background: url('../images/background.png') repeat;
	padding: 1em 0;
	width: 100%;
}



/* . Links . */
a {
	color: #2f8dae;
}

a:hover {
	color: #2a7d9a;
}

a:active {
	color: #246c86;
}



/* . Inputs . */
.url-input {
	width: 80%;
	padding: 0.3em 0.4em;
	font-size: 1.5em;
}


/* Keyboard keys */
.key { /* http://cssdeck.com/labs/apple-keyboard-via-css3 */
	display: block;
	color: #aaa;
	font: bold 18pt Helvetica, sans-serif;
	text-decoration: none;
	text-align: center;
	width: 44px;
	height: 41px;
	margin: 5px;
	background: #eff0f2;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #f5f5f5;
	-webkit-box-shadow:
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	-moz-box-shadow:
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	box-shadow:
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	text-shadow: 0px 1px 0px #f5f5f5;
}

.key-input {
	border: none;
}

@-webkit-keyframes keyboard-key-pulse-color {
	0% {
		background: #eff0f2;
	}
	100% {
		background: #d6d7d9;
	}
}

@-moz-keyframes keyboard-key-pulse-color {
	0% {
		background: #eff0f2;
	}
	100% {
		background: #d6d7d9;
	}
}

@-o-keyframes keyboard-key-pulse-color {
	0% {
		background: #eff0f2;
	}
	100% {
		background: #d6d7d9;
	}
}

@keyframes keyboard-key-pulse-color {
	0% {
		background: #eff0f2;
	}
	100% {
		background: #d6d7d9;
	}
}

.key-input:hover {
	background: #dddee0;
	-webkit-animation: keyboard-key-pulse-color 0.8s linear alternate infinite;
	-moz-animation: keyboard-key-pulse-color 0.8s linear alternate infinite;
	-o-animation: keyboard-key-pulse-color 0.8s linear alternate infinite;
	animation: keyboard-key-pulse-color 0.8s linear alternate infinite;
}



/* . Buttons . */
.button {
	border-width: 1px;
	border-style: solid;
	cursor: pointer;
	padding: 0.05em 0.4em 0.2em;
	position: relative;
	top: -0.07em;
	-webkit-border-radius: 3px;
	border-radius: 3px;
    -webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	-o-transition: all 150ms linear;
	-ms-transition: all 150ms linear;
	transition: all 150ms linear;
}

.button:active {
	top: 0;
	-webkit-box-shadow:  0px 0px 1px 0px rgba(40, 150, 44, 1);
	box-shadow:  0px 0px 1px 0px rgba(40, 150, 44, 1);
}

.button:focus {
	outline: none;
}

.button.green {
	background-color: #34bf39;
	border-color: #2faf34;
	color: #eee;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
    -webkit-box-shadow:  0px 4px 1px 0px rgba(40, 150, 44, 1);
	box-shadow:  0px 4px 1px 0px rgba(40, 150, 44, 1);

}

.button.green:hover {
	background-color: #39d740;
	color: #fff;
}

.button.green:active {
	background-color: #2ea732;
	color: #ddd;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.9);
}

.button.green.large {
	font-size: 2em;
	line-height: 1;
}


.button.red{
	background-color: #882222;
	border-color: #882222;
	color: #eee;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
    -webkit-box-shadow:  0px 4px 1px 0px rgba(92, 5, 5, 1);
	box-shadow:  0px 4px 1px 0px rgba(92, 5, 5, 1);

}

.button.red:hover {
	background-color: red;
    border-color:red;
	color: #fff;
}

.button.red:active {
	background-color: #9a1313;
	border-color: #9a1313;
	color: #ddd;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.9);
}

.button.red.large {
	font-size: 2em;
	line-height: 1;
}


.responsive-object {
    height: 0;
    overflow: hidden;
 }
 .responsive-object iframe,
 .responsive-object object,
 .responsive-object embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     position:absolute;

    z-index: -10;
  }

.overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     position:absolute;
    z-index: -5;
	background: url('../images/background.png') repeat;
  }