/*
zoomin.png
zoomout.png
zoom.png
*/

@font-face{
    font-family:'pastel';
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
    src:url('../fonts/pastel_crayon.eot');
    src:local('pastel'), url('../fonts/pastel_crayon.ttf');
}
* {
    z-index:100;
}
html, body {
    height:100%;
}

html, body, b {
    color:#fff;
}
.item-page {
/* TODO */
font-size:17px;
}
body {
    overflow-y:scroll;
    background:#d4d6d8 url(../images/body.png) repeat;;
    font:3.0em pastel, comic-sans, sans-serif;
    font-size-adjust:0.5;
}
@media (min-width: 992px) {
    body {
        padding-top:40px;
    }
}
a {
    color:#ff4;
}
a:hover {
    color:#ff4;
    font-weight:bold;
    text-decoration:none;
}
nav {
    margin-top:25px;
}
.nav>li>a {
    padding-bottom:5px;
}
.nav li a {
    color:#fff;
}
.nav>li>a:focus,
.nav>li>a:hover {
    background:none;
}
nav > ul > li:first-child a {
    color:rgba(0,0,0,0);
}
nav > ul > li:first-child:before {
    background:url(../images/home.png) center top no-repeat;
    content:" ";
    width:100%;
    height:36px;
    top:10px;
    position:absolute;
    left:0;
    right:0;
}

.nav>li>a {
    background-size:13px 7px;
    background-position: center bottom;
}
.nav>li:first-child>a:hover {
    transition:background .2s ease-in-out, transform 2s ease-in-out, -moz-transform 2s ease-in-out, -webkit-transform 2s ease-in-out;
}
.nav>li>a:hover {
    transition:background .2s ease-in-out;
    background:url(../images/hover.png) center bottom no-repeat;
    background-size:43px 7px;
}
.nav>li.active a:hover {
    transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

.nav>li.active>a:before {
    content:" ";
    background:url(../images/hover.png) center 0 no-repeat;
    position:absolute;
    width:100%;
    height:7px;
    top:44px;
    left:0;
    right:0;
    background-size:43px 7px;
}

.nav>li ul {
    margin:10px 0 0 0 ;
    list-style:none;
    padding:0;
    text-align: center;
    position: relative;
    #left: -50%;
}
.nav>li ul li {
    display:inline-block;
    padding-right:0.6em;
}
.nav>li ul li.current a {
    font-weight:bold;
    color:#ff8;
}



.page-header {
    margin:0;
    padding:0;
    border:0;
}
h2 {
    font-size:3em;
    margin:0 0 .2em 0;
    text-align:center;
}
body.nav-kontakt h2 {
    transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
}
.pager li>a {
    background:none;
    border:0;
    font-weight:bold;
    color:rgba(0,0,0,0);
    font-size:0.01em;
    width:44px;
    height:40px;
    line-height:40px;
    opacity:0.7;
}
.pager li.previous>a {
    background:url(../images/arrow_left.png) center bottom no-repeat;
}
.pager li.next>a {
    background:url(../images/arrow_right.png) center bottom no-repeat;
}
.pager li>a:hover {
    opacity:1;
}

.container {
    box-shadow:0 5px 15px 4px rgba(16,8,0,0.5);
    background:
         url(../images/frame_top.png)    left top      no-repeat
        ,url(../images/frame_bottom.png) left bottom   no-repeat
        ,url(../images/frame_left.png)   left top      repeat-y
        ,url(../images/frame_right.png)  right top     repeat-y
        ,url(../images/slur_top.png)     left 10px     no-repeat
        ,url(../images/slur_bottom.png)  center bottom no-repeat
        ,url(../images/slur_1.png)       left top      no-repeat
        ,url(../images/slur_2.png)       left bottom   repeat-y
    ;
    background-size:
        100% 10px
        ,100% 9px
        ,auto
        ,auto
        ,100% auto
        ,100% auto
        ,100% auto
        ,auto
    ;
    background-color:#2B4D34;
    margin-bottom:50px;
}

#main {
    padding-top:1em;
}

.gadgets {
    background:rgba(255,255,255,0.3);
    width:100%;
    position:relative;
    #top:-23px;
    bottom:24px;
    z-index:90;
}
.gadget {
    position:absolute;
    top:0;
    bottom:0;
    z-index:90;
    display:none;
}
.gadget.chalk_red {
    background: url(../images/chalk_red.png) 0 0 no-repeat;
    height:20px;
    width:60px;
    top:1px;
    left:20px;
    display:block;
}
.gadget.chalk_white {
    background: url(../images/chalk_white.png) 0 0 no-repeat;
    width:60px;
    height:20px;
    left:90px;
    display:block;
}
.gadget.chalk_yellow {
    background: url(../images/chalk_yellow.png) 0 0 no-repeat;
    width:60px;
    height:21px;
    right:80px;
}
.gadget.duck_yellow {
    background: url(../images/duck_yellow.png) 0 0 no-repeat;
    width:143px;
    height:133px;
    right:75px;
    top:-160px;
    opacity:.8;
}
.gadget.dino {
    background: url(../images/dino.png) 0 0 no-repeat;
    width:519px;
    height:320px;
    right:50px;
    top:-450px;
    opacity:.8;
}
body.nav-_home {}
body.nav-news .gadget.dino { display:block; }
body.nav-news p:nth-child(6n+0) { transform:rotate(+0.5deg); -moz-transform:rotate(+0.5deg); -webkit-transform:rotate(+0.5deg); padding-left:0.5em; }
body.nav-news p:nth-child(6n+1) { transform:rotate(+0.7deg); -moz-transform:rotate(+0.7deg); -webkit-transform:rotate(+0.7deg); padding-left:0.0em; }
body.nav-news p:nth-child(6n+2) { transform:rotate(+0.0deg); -moz-transform:rotate(+0.0deg); -webkit-transform:rotate(+0.0deg); padding-left:0.4em; }
body.nav-news p:nth-child(6n+3) { transform:rotate(-0.5deg); -moz-transform:rotate(-0.5deg); -webkit-transform:rotate(-0.5deg); padding-left:0.1em; }
body.nav-news p:nth-child(6n+4) { transform:rotate(-0.7deg); -moz-transform:rotate(-0.7deg); -webkit-transform:rotate(-0.7deg); padding-left:0.2em; }
body.nav-news p:nth-child(6n+5) { transform:rotate(+0.0deg); -moz-transform:rotate(+0.0deg); -webkit-transform:rotate(+0.0deg); padding-left:0.3em; }

body.nav-news p:nth-child(6n+0) b { color:#ffa;; }
body.nav-news p:nth-child(6n+1) b { color:#ffc; }
body.nav-news p:nth-child(6n+2) b { color:#ffa; }
body.nav-news p:nth-child(6n+3) b { color:#aaf; }
body.nav-news p:nth-child(6n+4) b { color:#faa; }
body.nav-news p:nth-child(6n+5) b { color:#aaa; }

body.nav-kontakt .container > .wrapper { padding-bottom:190px; } /* make room for duck and cover */
body.nav-kontakt .gadget.duck_yellow { display:block; }
body.nav-kontakt .gadget.chalk_yellow { display:block; }

#main .inner {
    min-height:450px;
    padding:20px 20px 90px 20px;
}

#bottomspacer {
    text-align:center;
    font-size:0.5em;
    color:rgba(0,0,90,0.3);
    height:50px;
    padding-top:25px;
    padding-left:55%;
    transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
}
#bottomspacer a,
#bottomspacer a:hover,
#bottomspacer a:focus {
    color:rgba(0,0,90,0.3);
    font-weight:normal;
}
#bottomspacer a:hover,
#bottomspacer a:focus {
    border-bottom:2px dashed rgba(0,0,90,0.2);
}

#lightswitch {
    height:0;
    position:relative;
    top:500px;
    left:-250px;
}
#lightshade {
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    top:0;
    left:0;
    right:0;
    height:100%;
    height:100vh;
    width:100%;
    z-index:88888;
    opacity:1;
    background:-moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
    background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
    background:-webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background:-o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,1) 100%); /* Opera 12+ */
    background:-ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
    background:radial-gradient(ellipse at center,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,1) 100%); /* W3C */
    pointer-events:none;
    #-webkit-transition:opacity .3s;
    #display:none;
}
#lightshade.off {
    opacity:0;
    #display:none;
}