/*Normaali ulkoasu*/
@media screen 
  and (min-device-width: 951px)  {
/*fontit*/
body { font-size:13px; font-family:garamond, georgia, times new roman; line-height:1; letter-spacing:1px; }
#teksti1 { font-size:110%; line-height:1.2; letter-spacing:1px; }
#header { font-size:30px; line-height:1; letter-spacing:1px; }
nav { font-size:22px; line-height:1.1; }
footer { font-size:80%; line-height:1; }
#otsikko2 { font-size:250%; line-height:1; }
.sub-menu { font-size:90%; } 

.katli1 { list-style-type:none; padding:3px; display:; font-size:110%; }
.katli1:hover { cursor:pointer; padding:3px; background:white; max-width:80%; display:inline-block; }

.katlinkki2:after { content:"sivustolle\25B8"; margin-bottom:5px; }

.ylakat { font-size:110%; }

#discordkuvake { visibility:hidden; position:fixed; right:25px; bottom:25px; opacity:0.6; z-index:100; height:10px; }
#dpieni2 {height:20px; margin-bottom:-5px; }

/*lomakkeet*/
#lomakediv { text-align:center; position:relative; padding:5px; width:80%; border:none; margin-left:10%; background-color:#95c2c2; }

/*Lomakkeet sisalto*/
textarea, input, select { background:#E0EBEB; font-family:vani, georgia, serif; 
    color:#1F2E2E; }
label { display:block; margin-top:10px; letter-spacing:1px;  }
input {	width:90%; height:30px; background:#F9FBFB;
	padding:5px; margin-top:2px; color:#000000;
        border:none; }
input:focus, textarea:focus { border:1px solid #425540; }
select { width:70%; background:#F9FBFB; padding:5px;
         border:none; }
textarea { width:90%; height:150px;  background:#F9FBFB;
	   padding:5px; margin-top:2px;color:#000000;
           border:none; }
#submit { width:30%; height:30px; letter-spacing:2px; font-size:100%;
          margin-top:2px; cursor:pointer; 
          border:1px solid transparent; ; }
#submit:hover { opacity:0.8; border:1px solid #21371e; }  
.inpieni { width:12px; vertical-align:middle; background:transparent; } 
.spinput { vertical-align:middle; padding-right:10px; }
                                    
/*nav*/
nav { position:fixed; top:-45px; right:10px; height:120%; background-color:#E0EBEB; background-image:url("/tarka/rakenne/kuvat/blbl.png"), url("/tarka/rakenne/kuvat/blbl.png"); background-size:10px 10px, 10px 10px; background-position:0% 0%, 170px 0%; background-repeat:repeat-y, repeat-y; }
nav:hover { opacity:0.9; }   
#menu ul { margin:0; padding:0; }
#menu .main-menu { display:visible; width:180px; }
#menu input, #menu ul span.drop-icon { display: none; }

#menu li, #toggle-menu, #menu a { display:block; color:#1F2E2E; }
#menu, #toggle-menu { border-radius:5px; }
#toggle-menu, #menu a { padding:5px 20px 5px 20px; }

#menu .sub-menu { visibility:visible; display:block; width:160px; margin-left:10px; background-color:#95c2c2;}
#menu .sub-menu:hover { visibility:visible;  display:block; position:relative;}
#menu input[type="checkbox"]:checked {display:none;}

.menu2p { visibility:visible; background:#E0EBEB; opacity:1; margin-left:10px; margin-right: 10px; position:relative; display:block; }
.menu2p:hover { background:white; opacity:0.8; margin-left:10px; margin-right:10px;  } 

#menu .sub-menu a { background-color:#95c2c2; }
#menu .sub-menu a:hover { opacity:0.8; color:#1F2E2E; background-color:white;  }

#toggle-menu .drop-icon { visibility:hidden; position: absolute;  right:10px; top:-4px; }
#menu li label.drop-icon { visibility:hidden; position: absolute;  right:10px; top:-4px; 
background-color:#95c2c2;}
#blink { visibility:hidden; } 

/* PAALLA poyta */
#paalla { bottom:2000%; background-color:#38c2c2; opacity:0.9; color:white; } 

#mySidenav1 a { position: absolute; left: -10px;  transition: 0.3s;
                padding: 10px; width: 90px; height:80px;
                text-decoration: none; font-size: 13px; color:#E0EBEB;
                border-radius: 0 8px 8px 0; border:2px dotted #E0EBEB; }
#mySidenav1 a:hover { left:-10px; width:300px; height:80px; opacity:1; text-align:left; padding-left:50px; }
#mySidenav1 a:hover:after { display:block; content:"Kiitos vastaajille!";}  

}

/*Mobiiliulkoasu*/
@media screen 
  and (max-device-width: 950px)  { 
  body { font-size:15px; font-family:Georgia, serif; line-height:1; letter-spacing:1px; }
  #teksti1 { font-size:20px; } 
#header { font-size:25px; }
nav { font-size:50px; line-height:1.5; }
footer { font-size:14px; }
#otsikko2 { font-size:220%; }

.katlinkki2:hover:after { border-radius:5px; }
.katlinkki2:after { content:"sivustolle \25B6"; margin-top:3%; margin-bottom:2%; }

.katli1 { list-style-type:none; padding:10px; font-size:110%; display:block; }
.katli1:hover { cursor:pointer; padding:10px; }

.ylakat { background-color:white; border-radius:5px; }
.ylakat:hover { border-radius:5px; }

#border, #kissa { border-radius:5px; } 

#discordkuvake {position:fixed; right:5px; bottom:25px; opacity:0.6; z-index:100; height:10px; }
div#discord2 { font-size:20px; }
#dpieni2 {height:35px; margin-bottom:-10px; padding-bottom:5px; }

/*lomakkeet*/
#lomakediv { text-align:center; position:relative; padding:5px; width:99%; border:none; margin-right:1%; background-color:#95c2c2; }

/*Lomakkeet sisalto*/
textarea, input, select { background:#E0EBEB; font-family:vani, georgia, serif; 
    color:#1F2E2E; font-size:20px; border-radius:5px; }
label { display:block; margin-top:10px; letter-spacing:1px;  }
input {	width:90%; height:40px; background:#F9FBFB;
	padding:10px; margin-top:2px; color:#000000;
        border:none; }
input:focus, textarea:focus { border:1px solid #425540; }
select { width:70%; background:#F9FBFB; padding:10px;
         border:none; }
textarea { width:90%; height:150px;  background:#F9FBFB;
	   padding:10px; margin-top:2px;color:#000000;
           border:none; }
#submit { width:200px; height:60px; font-size:30px; letter-spacing:2px;
          margin-top:2px; cursor:pointer; 
          border:1px solid transparent; border-radius:5px; }
#submit:hover { opacity:0.8; border:1px solid #21371e; }  
.inpieni { width:30px; vertical-align:middle; background:transparent; } 
.spinput { vertical-align:middle; padding-right:10px; }

/*pudotusvalikko*/
#tm:checked + .main-menu { display: block; width:450px; }
#menu .sub-menu { background-color:#95c2c2; border:none; opacity:1; width:450px;  }
#menu label.drop-icon, #toggle-menu span.drop-icon { border-radius:50%; width:60px;
  height:60px;  text-align: center;}  
#menu .drop-icon {  line-height: 1.2;}

nav { position:fixed; top:-10px; right:10px; } 
#menu ul { margin:0; padding:0; }
#menu .main-menu { display: none; }
#menu input[type="checkbox"], #menu ul span.drop-icon { display: none; }
#menu li, #toggle-menu, #menu a { position:relative; display:block; color:#1F2E2E; }
#menu, #toggle-menu { background-color:#E0EBEB; opacity:1; border-radius:5px; }
#toggle-menu, #menu a { padding:5px 20px 5px 20px; }
#menu a:hover, .main-menu:hover {  background-color:#E0EBEB;  color:#1F2E2E;}
#menu .sub-menu { display:none;}
#menu input[type="checkbox"]:checked + .sub-menu {display: block;}
#menu .sub-menu a:hover { background-color:white; color:#1F2E2E; }
#toggle-menu .drop-icon { position: absolute;  right:10px; top:-4px; }
#menu li label.drop-icon { position: absolute;  right:10px; top:-4px; 
background-color:#95c2c2;}
#toggle-menu .drop-icon:hover { position: absolute;  right:10px; top:-4px; 
background-color:white; cursor:pointer; }
#menu li label.drop-icon:hover { position: absolute;  right:10px; top:-4px; 
background-color:#95c2c2; cursor:pointer; padding:2px;}
#toggle-menu:hover { background-color:white; opacity:1; cursor:pointer; border-radius:5px;}
#menu ul .main-menu:hover {background-color:white; border-radius:0;}
#menu .main-menu a:hover { background-color:white; color:#1F2E2E; }

/* PAALLA mobi */
#paalla { bottom:500%; background-color:#38c2c2; opacity:1; color:white; } 

#mySidenav1 a { position: absolute; left: -10px;  transition: 0.3s;
                padding: 10px; width:200px; height:100px;
                text-decoration: none; font-size:25px; color:#E0EBEB;
                border-radius: 0 8px 8px 0; border:2px dotted #E0EBEB; }
#mySidenav1 a:hover { left:-10px; width:200px; height:100px; opacity:1; text-align:left; padding-left:10px; }
#mySidenav1 a:before { display:block; content:"Häirintäkysely on päättynyt, kiitos vastaajille!";} 
.hairinta2 { visibility:hidden; }

#blink:hover { animation:none; } 
#blink { animation: blinking1 3s 1; animation-delay:10s; } 
@keyframes blinking1{
		0%		{ color: white;}
		25%		{ color: black;}
                50%		{ color: white;}
                75%		{ color: black;}
                100%            { color: white;}
                }
  }

/*kaikkeen vaikuttavat*/
html { overflow:auto; overflow-x:hidden; }

footer { position:fixed; bottom:1%; left:5px; 
         color:#1F2E2E; letter-spacing:1px; }
         
/*Runko ja tarpeet*/
body { color:#1F2E2E;
       background-repeat:repeat-y; background-color:#669999; background-image:url("/tarka/rakenne/kuvat/blbl.png"), url("/tarka/rakenne/kuvat/blbl.png"), url("/tarka/rakenne/kuvat/blbl.png"); background-size:50px 50px, 20px 20px, 70px 70px; background-position:45px 0%, 1360px 0%, 1275px 0%; background-attachment:fixed, fixed, fixed; }
td { text-align:justify;}
hr { border: 0; height: 1px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), 
                       rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
hr.all { border: 0; height: 1px; 
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), 
                       rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
                          
/*Div, section*/
div { color:#1F2E2E; letter-spacing:0.6px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; }

#runko { z-index:0; overflow:auto; }

#header { position:fixed; top:-1px; left:-1px; height:25px; opacity:0.8; filter:alpha(opacity=80);
        border:none; text-align:center; padding:10px 10px 0 10px; 
        color:#1F2E2E; letter-spacing:1px; z-index:99; }
#header:hover { opacity:0.9; filter:alpha(opacity=90); }

#otsikko1 { visibility:hidden; font-size:30px; position:absolute; right:10%; top:10px; text-shadow:1px 0px 2px #E0EBEB; text-decoration:none; font-weight:bold; opacity:0.8;}
#otsikko2 { text-shadow:2px 0px 2px white; text-decoration:none; opacity:0.8;}
.ylalinkki { visibility:hidden; text-shadow:1px 0px 2px #E0EBEB; text-decoration:none; font-weight:bold;}
  
#sivupa, #teksti1 { top:0px; min-height:100%; padding-bottom:10px; padding-top:10px; padding-left:10px; padding-right:10px; margin:0px 10px 0px 10px; border:none; border-radius:0px; background-color:rgb(224,235,235,0.8);}
#sivupa { position:fixed; overflow-y:auto; left:105px; width:200px; text-align:left; }
#teksti1 { position:absolute; left:345px; width:50%; max-width:880px; text-align:center; }

#ohjediv { text-align:justify; padding:20px 20px 20px 20px; }
#vasen { position:relative; float:left; width:49%; text-align:center;}
#oikea { position:relative; float:right; width:49%; text-align:center; }
#keski { position:relative; text-align:center; padding:20px 20px 20px 20px; }

#oikea a:hover { background:white; }
#esittely { text-align:justify; padding:2px 2px 2px 20px; }
#border { border:5px solid #95c2c2; margin:20px 20px 1% 1%; padding:0 2% 20px 2%; }
#kasispan { font-size:80%; font-style:italic; }

#roperinki a:hover { background:white; }

#kissa { text-align:justify; padding:8px; margin-top:-50px; border:5px solid #95c2c2; }

/* H ++*/
h1, h2, h3, h4 { letter-spacing:2px; font-weight:bold; text-align:center;}
h1 { }
h2 { } 
h3 { }
h4 { }

#korostus { background-color:white; }
.ylakat { display:inline-block; margin:5px 10px 5px 10px; padding:5px; position:relative; letter-spacing:2px; }
.ylakat:hover { background-color:white; }

/*KUVAT*/
#kuva1, #kuva2, #kuva3 { padding:2px; }
#kuva1 { max-width:100%; max-height:31px; }
#kuva2 { max-width:150px; max-height:150px; float:left; }
#kuva3 { max-width:100%; max-height:100px; }
#mallikuva1 { width:100%; height:31px; padding:2px; }
#mallikuva2 { width:150px; height:150px; float:left; padding:2px; }
#mallikuva3 { width:100%; height:100px; padding:2px; }

#val1 img { opacity:0.7; }
#val1 img:hover { opacity:1; }

.butto { margin:2px; }

/*PEAS*/
.peas1 { font-weight:bold; text-transform:lowercase; }
.peas2 { text-transform:lowercase; }
.peas3 { padding-top:10px; padding-bottom:5px; text-align:left; }
.peas4 { font-style:italic; text-transform:lowercase; margin-left:5px; font-size:0.8em;}

.peassi { max-width:150px; width:25%;}

/*Linkit*/
A:link { color:#1F2E2E; text-decoration:none; }
A:visited { color:#1F2E2E; text-decoration:none }
A:active { color:#000000; text-decoration:none }
A:hover { color:#000000; text-decoration:none; }

#roperinki:hover { opacity:100%; border-color:white; }

.katlinkki1 { padding:10px; border:solid #95c2c2; border-width:3px 5px 5px 5px; margin:10px; 
    margin-top:0; line-height:1.2;  }
.katlinkki2, .katlinkki2:hover { display:inline-block; padding:2px;}
.katlinkki2:hover, .katlinkki2:hover:after { background:white; }
.katlinkki2 { text-transform:lowercase; letter-spacing:2px; display:inline-block; }
#justi { text-align:justify; }
#right { text-align:right; }
#valko:hover { background:white; }

/*replace*/
.katlinkki2 { visibility:hidden; }
.katlinkki2:after { visibility:visible; padding:5px; display:block; }

/*Disci*/
div#discord1 { position:relative; float:left; border:none; opacity:0.7; }
div#discord2 { position:relative; padding:2px 2px 2px 2px; opacity:1; text-align:justify; }
#discordkuvake:hover {opacity:1;}
#diso { width:120px; padding:20px 10px 2px 0; }
#dpieni { height:30px; }     

/*Paivilat*/ 
#paivilat { max-height:300px; padding:2px 4px 2px 2px; overflow-y:auto; overflow-x:hidden; }  

/*koodinpoisto*/
.koodi { display:none; }