body { background: #020066; color: #fff; margin: 0; padding: 0; }
footer { text-align: center; }

p { margin: 0; padding: 0; }

.phone-frame { width: 340px; height: 530px; margin: 0 auto; background: url('phone.png'); background-repeat: no-repeat; margin-top: 20px; padding-top: 10px; }

.phone-view { font-family: sans-serif; cursor: pointer; }
.phone-view.winter.clear { background: url( 'winter.jpg'); }
.phone-view.spring.clear { background: url( 'spring.jpg'); }
.phone-view.summer.clear { background: url( 'summer.jpg'); }
.phone-view.autumn.clear { background: url( 'autumn.jpg'); }
.phone-view.holiday.clear { background: url( 'holiday.jpg'); }

.phone-view.winter.blur { background: url( 'winterblur.jpg'); }
.phone-view.spring.blur { background: url( 'springblur.jpg'); }
.phone-view.summer.blur { background: url( 'summerblur.jpg'); }
.phone-view.autumn.blur { background: url( 'autumnblur.jpg'); }
.phone-view.holiday.blur { background: url( 'holidayblur.jpg'); }

.phone-view { width: 320px; height: 460px; margin: 0 auto; text-align: center }
.phone-view .locked-view { padding-top: 150px; font-weight: bold; }
.phone-view .locked-view  .month { font-size: 3em; text-shadow: 2px 2px #000; }
.phone-view .locked-view  .day { font-size: 3em; text-shadow: 2px 2px #000; }
.phone-view .locked-view  .year { font-size: 1.5em; text-shadow: 2px 2px #000; }
.phone-view .locked-view .tap-to-unlock { font-size: 2em; text-shadow: 2px 2px #000; }

.phone-view .unlocked-view .date { font-weight: bold; }

.phone-view .news { background: #fff; border-radius: 5px; color: #000; text-align: left; margin-top: 100px; width: 95%; margin-left: auto; margin-right: auto; }
.phone-view .news .text { padding: 10px; }
.phone-view .news .headline { margin-top: 10px; }
.phone-view .news .header { font-weight: bold; }
.phone-view .good-morning img { border-radius: 15px; margin-top: 50px; width: 75%; }

.phone-view .phone-header { background: #000; display: block; height: 20px; }
.phone-view .phone-header .left { float: left; }
.phone-view .phone-header .right { float: right; }
.phone-view .phone-header .icon { margin-left: 20px; }

.phone-view .dismiss { font-size: 1.5em; font-weight: bold; text-shadow: 2px 2px #000; margin-top: 20px; }

/*.unlocked-view { display: none; }*/
.unlocked-view { display: none; }
/*.locked-view { display: none; }*/
.locked-view { display: block; }

footer { margin-top: 50px; color: #fff; }
footer a { color: #fff; }

.clear { clear: both; }