/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Author: Kai Ylinen                                                          *
 * Version: 24.11.2014                                                         *
 * File: CSS Stylesheet                                                        *
 *                                                                             *
 * A digital advent calendar for the client "Jyväskylä University Museum".     *
 *                                                                             *
 * Content (c) 2014 Jyväskylä University Museum                                *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


/* GENERAL PRESETS ---------------------------- */

html {
    height: 100%;
}

body {
    background: url("stardust.png");
    background-position: center center;
    margin: 0;
    padding-bottom: 50px;
}

header, footer, aside, section, main {
    display: block;
}

ul {
    list-style: none;
}

h1, h2 {
    margin: 0;
}

a img {
    border: 0;
}
/* MAIN CONTAINERS ---------------------------- */

#wrapper {
    width: 1030px;
    margin: auto;
    background-color: transparent;
    position: relative;
}

main, footer {
    background-color: #fff;
    position: relative;
}

header {
    background-image: url('transparency-bg.png');
    position: absolute;
    z-index: 20;
    width: 450px;
    height: 200px;
    margin-left:-225px;
    margin-top: -200px;
    left: 50%;
    top: 50%;
    padding: 25px;
    border-radius: 5px;
}

footer {
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
    margin-top: 15px;
}

main {
    width: 1000px;
    height: 655px;
    position: relative;
    padding: 15px;
    margin-top: 60px
}


/* BACKGROUND CONTAINER ----------------------- */

.taustakuva {
    width: 100%;
    height: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.taustakuva img {
    z-index: -100;
    width: 100%;
}

/* PARAGRAPHS, HEADINGS & TIMES -------------- */

p {
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;
    color: #585858;
}

.info {
    font-family: "Quicksand", sans-serif;
    text-transform: uppercase;
    padding-right: 5px;
    font-weight: bold;
    color: #666699;
}

.info a {
    color: #cf7d4c;
    text-decoration: none;
}

.info a:hover {
    color: #666699;
}

h1, time { 
    font-family: "Dancing Script", sans-serif;
    font-weight: 700;
}


h1 {
    color: #cf7d4c;
    font-size: 40px;
    text-align: center;
    padding: 30px 15px 20px 15px;
}

#opening h1 {
    padding: 0;
}

time {
    font-size: 26px;
    display: inline-block;
    margin-top: 12px;
    color: #fff;
    font-weight: bold;
}

.content p, .content ul {
    padding: 0 25px 10px 25px;
}

.content ul {
    text-align: center;
}

.content a {
    color: #666699;
}

.content a:hover {
    text-decoration: none;
}

.kielet {
    position: absolute;
    right: 20px;
    bottom: 10px;
}

.kielet .info {
    font-size: 12px;
}

.sulje p {
    font-size: 12px;
    font-family: "Quicksand", sans-serif;
    text-transform: uppercase;
    font-weight: bold;
}

.sulje.wider p {
    line-height: normal;
} 

.sulje:hover p {
    color: #666699;
}

footer p {
    float: left;
    padding-left: 15px;
    font-size: 12px;
    line-height: 16px;
}

/* CONTENT ----------------------------------- */

.main-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    display: none;
}

.content, .kuvapuoli {
    width: 50%;
    height: 100%;
    float: left;
}

.kuvapuoli {
    overflow: hidden;
}

.content {
    overflow-y: scroll;
}

.content img, .kuvavalikko img {
    width: 100%;
}

.kuvavalikko img {
    height:auto;
}

.kuvavalikko .vaaka {
    width: auto;
    height: 100%;
}

.kuvavalikko li {
    display: inline-block;
    width: 150px;
    height: 100px;
    overflow: hidden;
}

.sulje {
    width: 100px;
    cursor: pointer;
}

.wider {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 5px;
    padding-top: 2px;
    width: 80px;
    background-image: url("transparency-bg.png");
    z-index: 2000;
}

.close {
    width: 20px;
    height: 20px;
    padding-top: 2px;
    padding-right: 8px;
    display: inline-block;
    float: left;
}

.wider p {
    margin: 6px;
}

hr {
    margin: 0 25px 24px 25px;
    border: 0;
    height: 1px;
    background: #999;
    background-image: -webkit-linear-gradient(left, #ccc, #999, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #999, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #999, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #999, #ccc); 
}

audio {
    width: 100%;
}

/* HATCHES ----------------------------------- */

.inside {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    display: inline-block;
    width: 5.2%;
    height: 8%;
    -webkit-perspective: 450;
    border-radius: 3px;
    box-sizing: border-box;
}
        
.luukku {
    cursor: pointer;
    background: url("taustakuva.jpg");
    background-repeat: no-repeat;
    background-size: 1000px 655px;
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    border-radius: 3px;
    transform: rotateY(-10deg);
    transform-origin: left;
    -moz-transform: rotateY(-10deg);
    -moz-transform-origin: left;
    -webkit-transform: rotateY(-10deg);
    -webkit-transform-origin: left;
    -ms-transform: rotateY(-10deg);
    -ms-transform-origin: left;
    transition: 1s transform linear;
    -ms-transition: 1s transform linear;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    text-align: center;
    border: 1px solid #ccc;
    border-left-style: dotted;
} 
        
.luukkuAuki {
    transform: rotateY(-105deg);
    transform-origin: 0;
    transition: .5s linear;
    -webkit-transform: rotateY(-105deg);
    -webkit-transform-origin: 0;
    -webkit-transition: .5s linear;
    -ms-transform: rotateY(-105deg);
    -ms-transform-origin: 0;
    -ms-transition: .5s linear;
    -moz-transform: rotateY(-105deg);
    -moz-transform-origin: 0;
    -moz-transition: .5s linear;
    cursor: pointer;
}

.index1 { left: 68%; top: 9%; background-image: url("luukku1/1-thumb.png"); }
.index2 { left: 36%; top: 34%; background-image: url("luukku2/2-thumb.png");}
.index3 { left: 26%; top: 82.5%; background-image: url("luukku3/3-thumb.png");}
.index4 { left: 65%; top: 46%; background-image: url("luukku4/4-thumb.png"); }
.index5 { left: 90%; top: 58%; background-image: url("luukku5/5-thumb.png");}
.index6 { left: 68%; top: 82.5%; background-image: url("luukku6/6-thumb.png");}
.index7 { left: 47%; top: 9%; background-image: url("luukku7/7-thumb.png"); }
.index8 { left: 5%; top: 9%; background-image: url("luukku8/8-thumb.png");}
.index9 { left: 5%; top: 58%; background-image: url("luukku9/9-thumb.png"); }
.index10 { left: 74.5%; top: 64%; background-image: url("luukku10/10-thumb.png");}
.index11 { left: 90%; top: 9%; background-image: url("luukku11/11-thumb.png");}
.index12 { left: 75%; top: 27%; background-image: url("luukku12/12-thumb.png");}
.index13 { left: 55%; top: 27%; background-image: url("luukku13/13-thumb.png");}
.index14 { left: 36%; top: 60%; background-image: url("luukku14/14-thumb.png");}
.index15 { left: 5%; top: 33%; background-image: url("luukku15/15-thumb.png");}
.index16 { left: 90%; top: 82.5%; background-image: url("luukku16/16-thumb.png"); }
.index17 { left: 47%; top: 82.5%; background-image: url("luukku17/17-thumb.png"); }
.index18 { left: 26%; top: 9%; background-image: url("luukku18/18-thumb.png");}
.index19 { left: 57%; top: 65%; background-image: url("luukku19/19-thumb.png");}
.index20 { left: 19%; top: 27%; background-image: url("luukku20/20-thumb.png");}
.index21 { left: 90%; top: 33%; background-image: url("luukku21/21-thumb.png"); }
.index22 { left: 22%; top: 50%; background-image: url("luukku22/22-thumb.png");}
.index23 { left: 5%; top: 82.5%; background-image: url("luukku23/23-thumb.png"); }
.index24 { left: 48%; top: 50%; background-image: url("luukku24/24-thumb.png");}

.index1 .luukku { background-position: 72% 10%;}
.index2 .luukku { background-position: 38% 36%;}
.index3 .luukku { background-position: 27.5% 89.5%;}
.index4 .luukku { background-position: 68.5% 50%;}
.index5 .luukku { background-position: 94.8% 63%;}
.index6 .luukku { background-position: 71.6% 89.5%;}
.index7 .luukku { background-position: 49.5% 9.8%;}
.index8 .luukku { background-position: 5.4% 9.8%;}
.index9 .luukku { background-position: 5.4% 63%;}
.index10 .luukku { background-position: 78.5% 69.5%;}
.index11 .luukku { background-position: 94.8% 9.8%;}
.index12 .luukku { background-position: 79% 29.4%;}
.index13 .luukku { background-position: 58% 29.4%;}
.index14 .luukku { background-position: 38% 65.2%;}
.index15 .luukku { background-position: 5.4% 35.9%;}
.index16 .luukku { background-position: 94.8% 89.5%;}
.index17 .luukku { background-position: 49.5% 89.5%;}
.index18 .luukku { background-position: 27.5% 9.8%;}
.index19 .luukku { background-position: 60% 70.8%;}
.index20 .luukku { background-position: 20% 29.4%;}
.index21 .luukku { background-position: 94.8% 35.9%;}
.index22 .luukku { background-position: 23.2% 54.4%;}
.index23 .luukku { background-position: 5.4% 89.5%;}
.index24 .luukku { background-position: 50% 54.4%;}

/* Easy Slider */

.sliders {
    margin: 0;
    padding: 0;
    width: 515px !important;
    height: 687px !important;
    position: relative;
    background-image: url("sprinkles.png");
}

.sliders ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.sliders li { 
    width:515px;
    height:687px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.sliders li img {
    width: 100%;
}

.vaaka {
    margin-top: 34%;
}

.caption {
    display: block;
    position: relative;
    height: 40px;
    bottom: 51px;
    background-image: url("transparency-bg.png");
    padding: 5px 15px 2px 15px;
    margin: 0;
    font-size: 14px;
    line-height: normal;
}

.caption.short {
    padding-top: 14px;
    height: 31px;
}

.prevBtn, .nextBtn { 
    display: block;
    width: 30px;
    height: 30px;
    position:absolute;
    top: 50%;
    z-index: 2000;
}

.prevBtn {
    left: 10px;
}

.nextBtn { 
    left: 475px;
}	

.prevBtn a, .nextBtn a {  
    display:block;
    position:relative;
    width:30px;
    height:30px;	
}	

.prevBtn a {
    background:url("prev.png") no-repeat 0 0;
}

.nextBtn a { 
    background:url("next.png") no-repeat 0 0;	
}

.only .prevBtn, .only .nextBtn {
    display: none;
}