sass/screen.scss
@import "compass/reset";
@import "compass/css3";

body, html{
	@include user-select(none);
	background-color: #eee;
	height: 100%;
	width: 100%
}

.info{
	position: absolute;
	right: -50px;
	top: -50px; 
	height: 96px;
	width: 96px;
	text-align: center;
	font-family: "Helvetica Neue", "Arial", "sans-serif";
	font-weight: 300;
	cursor: pointer;
	@include transform(translate3d(0,0px,0) rotate(45deg));
	@include transform-origin(center);
	@include transition(600ms cubic-bezier(0.19, 1, 0.22, 1));
	border-bottom: 1px solid #777;
	.info-text{
		cursor: pointer;
		background-color: #eee;
		color: #444;
		width: 56px;
		height: 20px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -10px;
		margin: auto;
		line-height: 20px;
		@include transition(transform 600ms cubic-bezier(0.19, 1, 0.22, 1));
	}

	&:hover{
		.info-text{
			background-color: transparent;
			@include transform(translate3d(0,-10px,0));
		}
	}
}

.watch-wrapper{
	width: 320px;
	height: 340px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: inline-image("watch.png") no-repeat center;
	background-size: 100%;
}

#screen-container{
	width: 200px;
	height: 250px;
	color: white;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	// margin-top: 20px;
	border-radius: 10px;
	overflow: hidden;
}

#home{
	@include transform-origin(center);
	height: 100%;
	width: 100%;
	opacity: 0;
	overflow: hidden;
	border-radius: 10px;
}

.home-button{
	position: absolute;
	width: 40px;
	height: 60px;
	top: 76px;
	right: 0;
	background-color: transparent;
	cursor: pointer;
}

.appicon{
	background-color: white;
	width: 48px;
	height: 48px;
	background-color: transparent;
	border-radius: 50%;
	transform-origin: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: black;
	text-align: center;
	line-height: 16px;
	padding-top: 16px;
	box-sizing: border-box;
	background-size: 100%;
}

.appicon:nth-child(1){
	background-image: inline-image("time.png");
}

.appicon:nth-child(2){
	background-image: inline-image("phone.png");
}

.appicon:nth-child(3){
	background-image: inline-image("photo.png");
}

.appicon:nth-child(4){
	background-image: inline-image("email.png");
}

.appicon:nth-child(5){
	background-image: inline-image("music.png");
}

.appicon:nth-child(6){
	background-image: inline-image("message.png");
}

.appicon:nth-child(7){
	background-image: inline-image("map.png");
}

.appicon:nth-child(8){
	background-image: inline-image("stopwatch.png");
}

.appicon:nth-child(9){
	background-image: inline-image("passbook.png");
}

.appicon:nth-child(10){
	background-image: inline-image("movie.png");
}

.appicon:nth-child(11){
	background-image: inline-image("translate.png");
}

.appicon:nth-child(12){
	background-image: inline-image("spiral.png");
}

.appicon:nth-child(13){
	background-image: inline-image("setting.png");
}

.appicon:nth-child(14){
	background-image: inline-image("weather.png");
}

.appicon:nth-child(15){
	background-image: inline-image("camera.png");
}

.appicon:nth-child(16){
	background-image: inline-image("run.png");
}

.appicon:nth-child(17){
	background-image: inline-image("twitter.png");
}

.appicon:nth-child(18){
	background-image: inline-image("dots.png");
}

.appicon:nth-child(19){
	background-image: inline-image("weixin.png");
}