@charset "ISO-8859-1";

body{
	background-color:aliceblue;
}

#wrapper{
	position:relative;
	top:0px;
	left:0px;
    width: 100%;

}

#mittanapit{
    position: absolute;
    left: 5%;
    top: 100px;
}

#helppi{
    position: relative;
    left: 10px;
    color: grey;
    background-color: #dddd;
}

#logout{
    position: relative;
    top: 0px;
    left: 10px;
    min-width: 130px;
}

.kirjaudu_ulos{
    position: absolute;
    left: 0px;
    top: -50px;
    width: 100px;

}
#pillerit{
    position:absolute;
	top:45px;
    left:300px;
}


#pillerit{
    position:absolute;
	top:55px;
    left:500px;
}

#pilleri1{
    position:absolute;
	top:5px;
    left:60px;
}
#pilleri2{
    position:absolute;
	top:0px;
    left:0px;
}
#pilleri3{
    position:absolute;
	top:5px;
    left:120px;
}

#harmaa{
    color: grey;
    background-color: #dddd;
}

@keyframes ratkaisuohjeita {
    0% {opacity: 0}
    100% {opacity: 1}
}

#poistavideo{
    visibility: hidden;
    position: relative;

    top: 470px;
    animation: ratkaisuohjeita 1s 0s 1;
     -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    background-color: #005fff;
    border: none;
    color: white;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;   

}
#poistavideo:hover {
    background-color: #cccccc;
    color: white;
}
#video{
    position: absolute;
    top: 280px;
    left: 6%;
}
#nlas_e1{
    width: 100px;
}

#nlas_e2{
    width: 100px;
}

#ova{
    width: 100px;
}

@keyframes laakeotsikot {
    0% {opacity: 0}
    100% {opacity: 1}
}

.laakeotsikot{
    /*width: 100px;*/
    animation: laakeotsikot 1s 0s 1;
     -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    background-color: #005fff;
    border: none;
    color: white;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;    
}


.laakepaavalikko:hover {
    background-color: #cccccc;
    color: white;
}

@keyframes laakepaavalikko {
    0% {opacity: 0}
    100% {opacity: 1}
}

.laakepaavalikko{
    animation: laakeotsikot 1s 0s 1;
     -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    background-color: #005fff;
    border: none;
    color: #ffbb00;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;    
}


.laakeotsikot:hover {
    background-color: #cccccc;
    color: white;
}

@keyframes ratkaisuohjeita {
    0% {opacity: 0}
    100% {opacity: 1}
}

.ratkaisuohjeita{
    animation: ratkaisuohjeita 1s 0s 1;
     -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    background-color: #ddefff;
    border-style: solid;
    border-color:#005fff; 
    color: black;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;     
}
.ratkaisuohjeita:hover {
    background-color: #cccccc;
    color: white;
}

@keyframes kirjaudu_ulos {
    0% {opacity: 0}
    100% {opacity: 1}
}

.kirjaudu_ulos{
     animation: ratkaisuohjeita 1s 0s 1;
     -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    background-color: #ddefff;
    border-style: solid;
    border-color:#005fff; 
    color: black;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;     
}

.kirjaudu_ulos:hover {
    background-color: #cccccc;
    color: white;
}
#otsikko{
	position: absolute;	
	top: 0px;
	font-size: 52px;
    left: 5%;
}

#otsikkoteksti{
	position: absolute;	
	top: 5px;
    left: 10px;
	font-size: 48px;
    color:#005fff; 
    width: 500px;
}
#taustavari{
	top: 0px;
	position: absolute;
	background-color: #ddefff;
	width: 100%;
	height: 120px;
	border: thin;
	border-color: #ccddff;
	border-style: solid;
}

#video{
    position: relative;
    top: 200px;
    left: 6%;
}