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

body {
	font-family: "Helvetica", "Arial";
	color: #fff;
	text-align: center;
	background: url("backgrounds/startup.jpg") no-repeat center center;
	-webkit-background-size: 320px 480px;
}

#player,
#reorient,
#bookmark {
	width: 100%;
	height: 100%;
	display: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#reorient {
	background: url("backgrounds/reorient.jpg") no-repeat center center;
	-webkit-background-size: 320px 480px;
}

#bookmark {
	position: absolute;
	top: 0;
	left: 0;
	background: url("backgrounds/bookmark.jpg") no-repeat center center;
	-webkit-background-size: 320px 480px;
}

#player ul {
}
	
	#player ul li {
	}
	
		#player ul li .content {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			padding: 20%;
			font-size: 200%;
		}
		
		#player ul li img {
			width: 100%;
			height: auto;
		}

#hud {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 5%;
	width: 70%;
	margin: 0 0 0 -35%;
	height: 5%;
	background: rgba(0,0,0, 0.7);
	border: solid 3px rgba(255,255,255, 0.5);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}	

	#hud .progress {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background: #bbb;
		border-radius: 7px 0 0 7px;
		-moz-border-radius: 7px 0 0 7px;
		-webkit-border-radius: 7px 0 0 7px;
	}

/* Portrait */
@media screen and (orientation:portrait) {

    #reorient,
    #bookmark.show {
    	display: block;
    }
    
    #hud {
    	display: none !important;
    }

}

/* Landscape */
@media screen and (orientation:landscape) {

    #player,
    #bookmark.show {
    	display: block;
    }

}