@-webkit-viewport { width: device-width }
@-moz-viewport { width: device-width }
@-ms-viewport { width: device-width }
@-o-viewport { width: device-width }
@viewport { width: device-width }

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-Bold-webfont.eot');
    src: url('font/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Roboto-Bold-webfont.woff') format('woff'),
         url('font/Roboto-Bold-webfont.ttf') format('truetype'),
         url('font/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: 700;
    font-style: normal;
}

html, body {
    min-height: 100%;
    height: 100%
}

body {
    margin: 0;
    padding: 0;
    font: 1em/1.4 "Nimbus Sans L", "Freesans", sans-serif;
    color: #2c3e50;
    background: #0095dd;
    background: #0095dd -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 50%,rgba(0,0,0, .2) 100%);
    background: #0095dd radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) 100%);
}

/* Focusbehandlung verbessern: http://people.opera.com/patrickl/experiments/keyboard/test */
a { color: #2980b9; text-decoration: none }
a:hover, a:active { color: #2c3e50; outline: none }

/* Highlighting für mobile Webkits http://j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #34495e }

#about { display: none }

.countdown {
    position: relative;
    top: 50%;
    margin-top: -.8em;
    font-size: 3em;
    font-size: 14vw;
    text-align: center;
}
.flip {
    position: relative;
    display: inline-block;
    width: 3.2ex;
    height: 1.3em;
    line-height: 1.3;
    font-family: Roboto;
    font-weight: 700;
    color: #eee;
    border: 1px solid #000;
    border-radius: 6px;
    background: #333;
    background: #333 -webkit-linear-gradient(top, rgba(0,0,0,.3) 0, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.2) 100%);
    background: #333 linear-gradient(to bottom, rgba(0,0,0,.3) 0, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.3) 100%);
    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255,255,255,.2) inset, 0 0 1px rgba(255,255,255,.3) inset;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255,255,255,.2) inset, 0 0 1px rgba(255,255,255,.3) inset;
}
.flip:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    z-index: -1;
    height: 1em;
    background: #444;
    border: 1px solid #000;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(255,255,255,.3) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 1px rgba(255,255,255,.3) inset;
}
.flip:before {
    position: absolute;
    content: '';
    height: .08ex;
    top: 50%;
    left: 0;
    right: 0;
    background: #222;
    box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.9) inset;
}
.expired {
    font-family: Roboto;
    font-size: 1em;
    font-size: 10vw;
    color: #ecf0f1;
    text-shadow:    0 .02ex 0 #ccc, 
                    0 .04ex 0 #c9c9c9,
                    0 .06ex 0 #bbb,
                    0 .08ex 0 #b9b9b9,
                    0 .1ex 0 #aaa,
                    0 .12ex .02ex rgba(0,0,0,.1),
                    0 0 .1ex rgba(0,0,0,.1),
                    0 .02ex .06ex rgba(0,0,0,.3),
                    0 .06ex .1ex rgba(0,0,0,.2),
                    0 .1ex .2ex rgba(0,0,0,.25),
                    0 .2ex .2ex rgba(0,0,0,.2),
                    0 .4ex .4ex rgba(0,0,0,.15);
}

.slide {
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /*
        https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks
        https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/UX/Patterns
    */
    background: rgba(189, 195, 199, .1);

    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.slideAction {
    position: absolute;
    right: 1em;
    bottom: 1em;
    z-index: 2;
    display: block;
    padding: .5ex;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    opacity: .1;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.slideAction svg { width: 2.5em; height: 2.5em; margin-bottom: -.1em}

.slideToggle { display: none }
.slideToggle:checked ~ .slide {
    background: rgba(189, 195, 199, .9);
    -webkit-transform: translate(100%,0);
    transform: translate(100%,0);
}
.slideToggle:checked ~ .slideAction {
    opacity: .5;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}



.slideContent {
    position: relative;
    max-width: 18em;
    max-width: 18rem;
    margin: 2em auto 0;
    margin: 8vh auto 0;
    text-align: center;
    background: #fff;
}
.slideContent header {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2;
    text-transform: uppercase;
    color: #fff;
    background: #2980b9
}

.timeInputs {
    margin: .2ex 0;
    font-size: 4em;
    text-align: center;
}
.number {
    width: 2.5ex;
    margin: 0 .1ex;
    font-size: 1em;
    font-family: Roboto;
    text-align: center;
    color: #2c3e50;
    background: #fff;
    border: 0;
}
.divider {
    font-weight: 700;
    text-decoration: blink;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tomorrow { display: none }
.tomorrow:checked ~ .checkLabel::before {
    color: #fff;
    background: #2980b9;
    border-color: rgba(255,255,255,.3)
}
.tomorrow:checked ~ .checkLabel { color: #2980b9 }
.checkLabel::before {
    content: '\2713';
    display: inline-block;
    width: 2.5ex;
    height: 2.5ex;
    margin: 0 1ex 0 0;
    padding: 0;
    color: transparent;
    line-height: 2.5ex;
    text-align: center;
    background: #d7dade;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.button {
    width: 70%;
    padding: 1ex;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    background: #3498db;
    border: 0;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    cursor: pointer;
    -webkit-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.button:hover { background: #5dade2 }
.button:active { background: #2383c4 }

.footer {
    margin: 1ex 0 0;
    padding: 1ex;
    line-height: 1.2;
    background: #ecf0f1;
    border-top: 1px solid #ccc
}

.intsall {
    display: none;
    margin:0;
    padding: 1ex;
    background: #2c3e50;
}
.install .button { background: #d35400 }

@media screen and (orientation:landscape) and (max-height: 20em) {
    .slideContent {
        margin-top: 1em;
        max-width: 30em;
        max-width: 30em;
    }
    .selectTomorrow,
    .saveButton { display: inline-block; width: 50%; margin: .2em; }

    .selectTomorrow { width: 40% }
}
/*
@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
        only screen and (min-resolution: 260dpi) {
    body { background: red}
}
*/