@font-face {

font-family: 'HelveticaNeueLT25UltLightRegu';

src: local('HelveticaNeue LT 25 UltLight'), local('HelveticaNeueLTUltraLight'), url('helvetica_lt_25_ultra_light-webfont.svg#webfontwDzQ26Ug') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'HelveticaNeueLT45LightRegular';

src: local('HelveticaNeue LT 45 Light'), local('HelveticaNeueLTLight'), url('helvetica_lt_45_light-webfont.svg#webfontc7T4Z6tx') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

	font-family: 'HelveticaNeueLT95BlackRegular';

	src: local('HelveticaNeue LT 95 Black'), local('HelveticaNeueLTBlack'), url('helvetica_lt_95_black-webfont.svg#webfontTOzeoXFt') format('svg');

	font-weight: normal;

	font-style: normal;

}









*{

-webkit-tap-highlight-color:transparent;

}

body {

margin: 0;

padding: 278px 0 0 0;

height: 480px;

width: 320px;

background-color:black;

color:white;

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

font-family:"helvetica";

overflow:hidden; /*just like my women*/

}

#background

{

display:block;

width:320px;

height:480px;

background:black url('LockBackground.png') no-repeat 0px 0px;

position:absolute;

top:0px;

left:0px;

background-size: 100%;

}

@-webkit-keyframes loaderFadeOut {

0% {

opacity:.8;

}

50% {

opacity:.4;	

}

100% {

opacity:0;

}

}

#loader

{

-webkit-animation-name: loaderFadeOut;

-webkit-animation-duration: .2s;

-webkit-animation-iteration-count: 1;

-webkit-animation-timing-function: linear;

opacity:.8;

background:url("ajax-loader.gif") no-repeat scroll center center black;

display:none;

height:80px;

left:120px;

position:absolute;

top:300px;

width:80px;

-moz-border-radius: 15px;

border-radius: 15px;

}

@-webkit-keyframes loaderFadeIn {

0% {

opacity:0;

}

50% {

opacity:.4;	

}

100% {

opacity:.8;

}

}

#loader.visible

{

display:block;

-webkit-animation-name: loaderFadeIn;

-webkit-animation-duration: .2s;

-webkit-animation-iteration-count: 1;

-webkit-animation-timing-function: linear;

}

#timeWrap

{

top:0px;

position:absolute;

-webkit-transition: -webkit-transform .3s ease-in-out;

-webkit-transform: translateY(0px);

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

background:black url('LockBackground.png');

display:block;

height:280px;

overflow:hidden;

width:320px;

background-size: 100%;

background-repeat:no-repeat;

}

#timeWrap.showSelector

{

-webkit-transition: -webkit-transform .3s ease-in-out;

-webkit-transform: translateY(-100px);

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

border-bottom:solid 1px #303030;

}

#locationSelectorBG

{

position:absolute;

height:94px;

display:block;

top:181px;

width:320px;

background:transparent url('linen.png') no-repeat center;

}

#locationSelector

{

display:block;

height:94px;

padding-top:38px;

position:absolute;

top:176px;

width:1600px;

-webkit-transform: translateX(0px);

-webkit-transition: -webkit-transform .3s ease-in-out;

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

-moz-box-shadow:inset 0 0 10px #000000;

}

#locationSelector span

{

text-shadow:0 0 5px black;

width:220px;

font-weight:bold;

text-align:center;

font-size:1.2em;

display:inline-block;

opacity:.7;

}

.location

{

text-overflow: ellipsis;

margin:0px 50px;

overflow: hidden;

white-space:nowrap;

}

#locationSelector span.active

{

text-shadow:0 0 10px black;

font-size:1.5em;

opacity:1;

}

.locationArrows

{

position:absolute;

width:55px;

height:94px;

display:none;

top:183px;

}

#locationLeft

{

background:url('left.png');

left:0px;

}

#locationLeft.visible, #locationRight.visible

{

display:block;

}

#locationRight

{

background:url('right.png');

left:265px;

}

#day {

top:140px;

left:3px;

font-family:HelveticaNeue-Bold;

font-size:45px;

text-transform:uppercase;

letter-spacing:0px;

text-align:left;

color:#addD1D8FE;

}



#dayNumeric {

top:163px;

left:0px;

font-size:110px;

text-transform:uppercase;

background-color:transparent!important;

position:absolute;

font-family:HelveticaNeue;

}



#month {

top:240px;

left:121px;

text-transform:uppercase;

font-family:"HelveticaNeueLT45LightRegular";

font-size:34px;

letter-spacing:12px;

text-align:right;

}



#year {

top:182px;

left:177px;

font-family:"HelveticaNeueLT25UltLightRegu";

font-size:61px;

font-weight:100;

}



#divtable {

top: -165px;

left: -18px;

height: 461px;

}



#hr1, #hr2, #ampm, #mn1, #mn2 {

font-size:115px;	

font-family:HelveticaNeue-Bold;

top:15px;

left:17px;

position:relative;

}



#ampm {

width:40;

height:85;

left:16px;

}



#unlock {

top:422px;

left:175px;

}



@-webkit-keyframes weatherFadeIn {

0% {

opacity:0;

}

50% {

opacity:.5;	

}

100% {

opacity:1;

}

}

#weather{

top:275px;

height:400px;

width:1600px;

position:absolute;

-webkit-transition-property: -webkit-transform;

-webkit-transition-duration: .3s;

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

-webkit-transform: translateY(275px);

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

display:block;

font-family:HelveticaNeue;

opacity:1;

}

.weatherCity, .weatherCurrently

{

left:100px;

width:250px;

}

.weatherTemp

{

font-size:5em;

left:100;

width:250px;

top:35px;

}

.weatherTempHighLow

{

font-size:2.0em;

left:100;

width:250px;

top:38px;

}

#weather1Low, #weather2Low

{

font-size:.8em;

position:relative;

top:-12px;

}

.label

{

width:80px;

display:inline-block;

}

.bold

{

font-size:1.4em;

font-weight:bold;

}

.weatherCurrently

{

top:120px;

text-transform:capitalize;

}

.weatherThumb

{

top:10px;

}



#weather .weatherSection

{

position:relative;

float:left;

width:320px;

height:200px;

top:-15px;

}



@-webkit-keyframes weatherFadeOut {

0% {

opacity:1;

}

50% {

opacity:.5;	

}

100% {

opacity:.0;

}

}

#weather.loading

{

-webkit-animation-name: weatherFadeOut;

-webkit-animation-duration: .5s;

-webkit-animation-iteration-count: 1;

-webkit-animation-timing-function: linear;

}

#weather.forecast0

{

-webkit-transition: -webkit-transform .3s ease-in-out;

-webkit-transform: translateX(0px);

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

}

#weather.forecast1

{

-webkit-transition: -webkit-transform .3s ease-in-out;

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

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

}

#weather.forecast2

{

-webkit-transition: -webkit-transform .3s ease-in-out;

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

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

}

#weather.showSelector

{

-webkit-transform: translateX(0px);

border-top:solid 1px #303030;

top:274px;

}

.weatherCurrently, .weatherThumb, .weatherCity, .weatherTemp, .weatherTempHighLow{

position:absolute;

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

}

#day, #month, #year, #divtable, #mainDiv, #unlock { 

position:absolute;

}

#unlock.faded

{

opacity:.4;

}

@-webkit-keyframes opacity {

0% {

opacity:1;

}

50% {

opacity:.4;	

}

100% {

opacity:1;

}

}

.hidden

{

	display:none!important;

}

#unlock {

-webkit-animation-name: opacity;

-webkit-animation-duration: 4s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

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

font-size:30px;

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

font-family:"HelveticaNeueLT95BlackRegular";

top:420px;

text-align:right;

width:300px;

display:block;

left:0px;

}