html, body {
	width:100%;
	height:100%;
	margin:0;
}

body {
	padding-top:42px;
}

header {
	text-align:center;
	color:white;
	font-size:24px;
	line-height:40px;
	font-family: 'Rancho', cursive;
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545250), color-stop(100%,#454341)),
				-webkit-linear-gradient(top, #545250 0%,#454341 100%);
    position:fixed;
    left:0px;
	top:0px;
    width:100%;
    z-index:4;
    height:40px;
    border-top:1px solid #151515;
    border-bottom:1px solid #151515;			
}

#wrapper {
	display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
	margin-top:42px;
}

.slide {
	position:relative;
	cursor:hand;
  	cursor:grab;
  	cursor:-moz-grab;
  	cursor:-webkit-grab;
}

.slide span {
	font-size:86px;
	width:86px;
	font-weight:bold;
	color:#333;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-43px;
	margin-top:-43px;
	text-align:center;
}

#debug {
	width:200px;
	height:60px;
	background:white;
	position:absolute;
	left:10px;
	top:10px;
}

.arrow {
	position:absolute;
	z-index:2;
	top: 10px;
	background: url(../img/arrow.png) center no-repeat transparent;
	width:64px;
	height:64px;
	-webkit-background-size:50%;
	-moz-background-size:50%;
	background-size:50%;
}

.arrow.top {
	left:50%;
	top:52px;
	margin-left:-32px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.arrow.left {
	top:50%;
	margin-top:-32px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
}

.arrow.right {
	left:100%;
	margin-left:-74px;
	top:50%;
	margin-top:-32px;
}

.arrow.bottom {
	top:100%;
	margin-top:-74px;
	left:50%;
	margin-left:-32px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
}