body {

	margin: 0;

}

#pagewrap {

	position: absolute;	

	width: 320px;

	height: 480px;
	
	overflow: hidden;
	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#050401), to(#212022));

}



#pagewrap_retina {

	position: absolute;	

	width: 640px;

	height: 960px;

	overflow: hidden;

}



#pagewrap_default {

	position: absolute;

	-webkit-transform-origin: 0px 0px;

	-webkit-transform: scale(0.5);	

	width: 640px;

	height: 960px;

}

#CI2 {

	position: absolute;

	-webkit-transform:translateX(-118px);

	top: -44px;

	width: 420px;

	height: 630px;

	opacity: 0.4;	

	background-color: transparent;

	overflow: hidden;

	z-index: 1;

}

@-webkit-keyframes Design_Fade_animation {

	0% {opacity: 1.0;}

	50% {opacity: 0.0;}	

	100% {opacity: 1.0;}		

}  

#Design_Fade {

	position: absolute;	

	width: 320px;

	height: 480px;
	
	overflow: hidden;
	
	opacity: 1.0;	
	
	-webkit-animation-name: Design_Fade_animation;

    -webkit-animation-duration: 6.0s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-timing-function: linear;
	
	-webkit-transition-delay: 2s; 		
	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#050401), to(#212022));
	
	z-index: 2;	

}


#CI_Reflection {

	position: absolute;

	-webkit-transform:translateX(100px);

	-webkit-box-reflect: below -64px;	
	
    top: 63px;

	width: 212px;

	height: 334px;

	background-color: transparent;

	overflow: visible;

	z-index: 4;

}


#CI_Gradient {

	position: absolute;

	-webkit-transform:translateX(0px);

	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black), color-stop(0.075, transparent), color-stop(0.076, black));	

    top: 0px;

	width: 212px;

	height: 334px;

	background-color: transparent;

	overflow: visible;

	z-index: 4;

}

@-webkit-keyframes CI_animation {

	0% {opacity: 0.0; -webkit-transform:translateX(-10px);}

	100% {opacity: 1.0;	-webkit-transform:translateX(0px);}

}  

#CI {

	position: absolute;

	-webkit-transform:translateX(0px);	
	
	-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), to(transparent), color-stop(0.1, black), color-stop(0.9, black));		

    top: 0px;

	width: 212px;

	height: 334px;

	background-color: transparent;
	
	-webkit-animation-name: CI_animation;

    -webkit-animation-duration: 1.0s;
	
	-webkit-animation-iteration-count: 1;

	-webkit-animation-timing-function: linear; 	

	overflow: visible;

	z-index: 4;

}

#CI_BG {

	position: absolute;

	-webkit-transform:translateX(100px);

    top: 90px;

	width: 212px;

	height: 306px;

	background-image: -webkit-gradient(linear, left top, left bottom, from(#050401), to(#212022));
	
	overflow: visible;

	z-index: 3;

}

#BG_Overlay {

	position: absolute;

    top: 0px;

	width: 320px;

	height: 480px;
	
	opacity: 1.0;	

	background-color: transparent;

	overflow: hidden;

	z-index: 4;

}

@-webkit-keyframes slider_animation {

	0% {opacity: 1.0; -webkit-transform:translateX(62px);}

	50% {opacity: 1.0; -webkit-transform:translateX(102px);}

	100% {opacity: 1.0;	-webkit-transform:translateX(62px);}

}  



#Slider {

	position: absolute;

	-webkit-transform:translateX(62px);

	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(white));	

    top: 434px;

	width: 155px;

	height: 21px;

	opacity: 1.0;	

	background-color: transparent;

	-webkit-animation-name: slider_animation;

    -webkit-animation-duration: 5.0s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-timing-function: ease-in-out; 

	overflow: visible;

	z-index: 5;

}

@-webkit-keyframes calendarbar_animation {

	0% {opacity: 0.0; -webkit-transform:translateX(160px);}

	100% {opacity: 1.0;	-webkit-transform:translateX(150px);}

}  

#calendarbar {

	text-align: right;

	font: 18px "Helvetica";

	color: #ff9933;

	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent), color-stop(0.5, #666));

	opacity: 1.0;

    text-shadow: 0px -3px 3px black;

	position: absolute;

	width: 150px;

	height: 35px;

	-webkit-transform:translateX(150px);
	
	top: 63px;

	letter-spacing: 2px;

	line-height: 21px;

	background-color: transparent;

	-webkit-animation-name: calendarbar_animation;

    -webkit-animation-duration: 1s;
	
	-webkit-transition-delay: 1s;	

	-webkit-animation-iteration-count: 1;

	-webkit-animation-timing-function: ease-in; 

	overflow: hidden;

	z-index: 5;

}

@-webkit-keyframes clock_animation {

	0% {opacity: 0.0; -webkit-transform:translateX(179px);}

	100% {opacity: 1.0;	-webkit-transform:translateX(169px);}

}  

#clock {

	text-align: left;

	font: 36px "Futura";

	color: #f0f0f0;

	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent), color-stop(0.5, #666));

	opacity: 0.7;

    text-shadow: 0px -3px 3px black;

	position: absolute;

	width: 154px;

	height: 54px;

	-webkit-transform:translateX(169px);

	top: 24px;

	letter-spacing: -4px;

	word-spacing: 0px;

	background-color: transparent;
	
	-webkit-animation-name: clock_animation;

    -webkit-animation-duration: 1.0s;
	
	-webkit-transition-delay: 2.0s;	

	-webkit-animation-iteration-count: 1;

	-webkit-animation-timing-function: ease-in; 	

	overflow: visible;

	z-index: 6;

}



#clock #minutes {

	position: absolute;

	text-align: left;

	width: 77px;

	height: 54px;

	left: 84px;

	top: 0px;

}



#clock #hours {

	position: absolute;

	text-align: right;

	width: 77px;

	height: 54px;

	top: 0px;

	left: 0px;

}