body {
background-color: black;
}

.back {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#000),to(#222));
}

.back #footer {
color: rgba(255,255,255,0.1);
}

body, h1, p {
margin: 0;
padding: 0;
}

startscreen, screen, .face {
-webkit-user-select: none;
user-select: none;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}

startscreen, .front {
background-image: url(bg.jpg);
background-repeat: no-repeat;
-webkit-background-size: 100%;
}

screen {
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-transition: all .5s ease-in-out
}

.flip, .back {
-webkit-transform: rotateY(180deg);
}

.face {
-webkit-backface-visibility: hidden;
}

screen, noentry {
display: none;
}

.front, .flip .back {
z-index: 10;
}

.back, .flip .front {
z-index: 0;
}

.button {
z-index: 1;
text-decoration: none;
position: absolute;
left: 25px;
top: 135px;
display: block;
font-family: Helvetica;
height: 2em;
padding: 0 1em 0 1em;
line-height: 2em;
border: 1px solid #333;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#222),to(#000));
color: white;
-webkit-border-radius: 1em;
}

h1, #settings h2 {
margin: 25px 0 0 25px;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
font-size: 72px;
color: white;
line-height: 1em;
}

#settings h2 {
font-size: 60px;
}

screen h1 a {
text-decoration: none;
color: white;
}

p#footer {
z-index: 1;
display: inline-block;
position: absolute;
left: 25px;
bottom: 22px;
font-weight: normal;
font-family: Helvetica;
font-size: 24px;
color: white;
line-height: 1em;
}

p#notice {
position: absolute;
left: 25px;
top: 94px;
display: block;
color: rgba(255,255,255,0.25);
font-weight: normal;
font-family: Helvetica;
font-size: 20px;
}

noentry {
background-color: black;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}

noentry p {
margin: 5px 0 0 25px;
color: #FFF;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
font-size: 36px;
color: white;
line-height: 1em;
}

#settings-list a {
display: inline-block;
width: 111px;
text-decoration: none;
color: #FFF;
margin: 0;
padding: 6px 0 6px 22px;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
background-image: url(tick.svg);
-webkit-background-size: 16px 16px;
background-position: 0 8px;
background-repeat: no-repeat;
}

#settings a.person-off {
color: rgba(255,255,255,0.2);
background-image: none;
}

#settings-list {
margin: 15px 25px 0 25px;
}

#settings a#settings-close, #config {
z-index: 2;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
position: absolute;
right: 18px;
bottom: 18px;
color: #FFF;
text-decoration: none;
display: block;
height: 2em;
padding: 0 1em 0 1em;
line-height: 2em;
border: 1px solid #333;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#222),to(#000));
-webkit-border-radius: 1em;
}

/* WEBKIT.ORG LEAVES */

div.flake 
{
z-index: 0;
position: absolute;
width: 14px;
height: 14px;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
}

div.flake > img {
position: absolute;
width: 14px;
height: 14px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}

@-webkit-keyframes clockwiseSpin
{
0%   { -webkit-transform: rotate(-50deg); }
100% { -webkit-transform: rotate(50deg); }
}

@-webkit-keyframes fade
{
0%   { opacity: 1; }
95%  { opacity: 1; }
100% { opacity: 0; }
}

@-webkit-keyframes drop
{
0%   { -webkit-transform: translate(0px, -20px); }
100% { -webkit-transform: translate(100px, 480px); }
}

#number {
margin: 25px 0 25px 25px;
font-size: 30px;
height: 32px;
line-height: 30px;
overflow: hidden;
color: #FFF;
font-family: Helvetica, Arial, sans-serif;
}

#number span {
float: left;
display: block;
padding: 0 0.5em 0 0.5em;
}

#number a {
float: left;
display: block;
line-height: 26px;
font-size: 24px;
width: 30px;
height: 30px;
border: 1px solid #333;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#222),to(#000));
border-radius: 4px;
color: #FFF;
text-decoration: none;
text-align: center;
}

#number a#more {
line-height: 24px;
width: 30px;
font-size: 26px;
}

@media all and (orientation:landscape)
{
screen {
width: 100%;
height: 100%;
}
#settings h2 {
font-size: 48px;
}
#number {
margin-bottom: 15px;
}
#settings-list {
margin-top: 0;
}
#settings-list a {
width: 81px;
}
}