@charset "utf-8";
/* CSS Document */

/* TÄSSÄ ALUSSA ON KAIKKI NE JOTKA VAIHTUVAT ERI KOKOISILLE NÄYTÖILLE */

body{
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	margin:0;
	padding: 0px;
	color: #000;	/*musta*/
	background-size: auto 400px; /* Taustakuvan korkeus 400px kun suuri*/

	width:1000px; /* PELKÄSTÄÄN VANHOJA VARTEN */
	margin:auto;  /* PELKÄSTÄÄN VANHOJA VARTEN */
}

#Etusivutaso {
	position:relative; 
	top: 300px; /* Etusivutason yläreunan paikka SUURELLE 300px*/
	width:100%;
    max-width:1000px;
	margin: auto;
	background-color:#FFF;
}

#Etusivukehys {
	border: 1px solid #D1D1D1;
}

.testifontti {
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #660000;	/*ruskea*/
}

/* Tämä tekee tilaa menuitemeiden reunoille top right bottom left eli tällä mm. sijoitetaan menuitemit pystysuunnassa. Suuressa top pikseleinä*/
ul.topnav li {
  margin: 30px 10px 0 10px; 
}
#Helenanpoksi {
    position: relative;
    top: 0;            
    border: 2px solid #D1D1D1;
    margin: 0 0px 10px 0;   /* Ei tehdä tarttumakohtaa Helenan poksilaatikon reunaan kun ei responsiivinen*/
	background-color:#FFF;
	padding: 0px;
}

/*
@media screen and (max-width:800px) { 
ul.topnav li {
  margin: 0 10px 0 10px; 
}
#Helenanpoksi {
    margin: 0 30px 10px 0;    Tehdään tarttumakohdan leveys Helenan poksilaatikon reunaan kun responsiivinen
}
}
*/

/* !!! TÄSTÄ ALASPÄIN KAIKKI KOODI SAMAA ERI KOKOISILLE NÄYTÖILLE  !!! */

* { /* Astesiski valitsee kaikki elementit ja asettaa niille box-sizing hommelin*/
    box-sizing: border-box;
}

/* TASOTYYLIT */

#Alasivutaso{
	position:relative; 
	top: 0; 
	width: 100%;
    max-width:1000px;
	margin: auto;
	background-color:#FFF;
}

#Alasivukehys{
	border: 1px solid #D1D1D1;
}

#Alasivubanneritaso {
    position: relative;
	top:0;
	width: 100%;
}	

#Ylavalikkotaso {
    position: relative;
	top:0;
	width: 100%;
	border-bottom: 1px solid #D1D1D1;
    height:80px;
/*
	max-height:80px;
	min-height:45px;
*/
}

#Logotaso {
    position: relative;
	top:0;
	width: 100%;
	border-bottom: 1px solid #D1D1D1;
}

#Helenanpoksiotsikko {
    position: relative;
    top: 0;            
	width:100%;
	border-bottom: 1px solid #D1D1D1;
	padding: 5px;
}
#Helenanpoksicontent {
    position: relative;     
    top: 0px;
	width:100%;
    max-height:500px;    
	overflow:auto;	
	padding: 5px;
}

#Alaosataso {
    position: relative;
	top:0;
	width: 100%;
}	

/* FONTIT */

.style08 {
	font-size: 0.8em;
}

.alaosafontti06 {
	font-size: 0.6em;
	color:#000000;
}

/* KUVATYYLIT JA UUTISMUOTOILUT */

img.keskitetty { /* Tämä luokka pelkästää keskittää vaakasuunnassa esim logokuvan kun laittaa <img class="keskitetty" src=" jne. */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Tämä luokka skaalaa ja muotoilee ylävalikkokyltin kuvan kun laittaa <img class="valikkokyltti" src=" jne. */
/* Muista säätää myös Ylävalikkotaso ja menuitemeiden marginit! */
img.valikkokyltti { 
    margin:0 10px 0 0; /*pukkaa ylävalikkoa noin 10px oikealle */
    float:left;
	border:0;
	width:90px; /* 90px kun viewportin leveys 1000px */
/*
	max-width:90px;
	min-width: 48px;
*/
    height:75px;
/*
    max-height:75px;
	min-height:40px;
*/
}

.somenappi {
    height:4vw;
	min-height:30px;
	max-height:40px;
	margin:0 2px 0 2px;
}

.somenappi:hover {
    opacity: 0.7;
}

.vasemmalle { /* Kuvagalleriat tehty näillä, alä muuta! */
    float:left;
	margin:5px;
}

.oikealle { /* Kuvagalleriat tehty näillä, alä muuta! */
    float:right;
	margin:5px;
}

.uutiskuvavasemmalle {
    float:left;
    height:100px;
	margin: 0 10px 5px 0;
	border:0;
}

.uutiskuvaoikealle {
    float:right;
    height:100px;
	margin: 0 0 5px 10px;
	border:0;
}


.poistafloatit {
    clear:both;
}

/* Kääntyvät sarakkeet sivun contentille */

.sivusarakkeet {
    display: inline-block;
    width: 100%;
	margin:0;
	padding:0;
	background:#FFF; /* background:lightgrey; /* Sarakkeen testausta varten */
}
.sivusarake100, .sivusarake90, .sivusarake80, .sivusarake70, .sivusarake75, .sivusarake60, .sivusarake50 { 
    float:left;  /* Floatataan leveämmät oletuksena vasemmanpuoleiseksi sarakkeeksi */
	display: inline-block;
	margin:0;
    padding: 5px;
	background:#FFF; /* background:orange; /* Sarakkeen testausta varten */
}
.sivusarake40, .sivusarake30, .sivusarake25, .sivusarake20, .sivusarake10 {
    float:right; /* Floatataan kapeammat oletuksena oikeanpuoleiseksi sarakkeeksi */
	display: inline-block;
	margin:0;
    padding: 5px;
	background:#FFF; /* yellow; /* Sarakkeen testausta varten */
}
.sivusarake100 {width: 100%;}
.sivusarake90 {width: 90%;}
.sivusarake80 {width: 80%;}
.sivusarake75 {width: 75%;}
.sivusarake70 {width: 70%;}
.sivusarake60 {width: 60%;}
.sivusarake50 {width: 50%;}
.sivusarake40 {width: 40%;}
.sivusarake30 {width: 30%;}
.sivusarake25 {width: 25%;}
.sivusarake20 {width: 20%;}
.sivusarake10 {width: 10%;}

/*
@media only screen and (max-width: 800px) {
    .sivusarake100, .sivusarake90, .sivusarake80, .sivusarake75, .sivusarake70, .sivusarake60, .sivusarake50, .sivusarake40, .sivusarake30, .sivusarake25, .sivusarake20, .sivusarake10 { 
        display: block;
		border:0;
        width: 100%;
    }
}
*/


/* YLÄVALIKKO OSAA MUOTOILLA NAPIT SEN MUKAAN OLLAANKO RESPONSIIVISESSA TILASSA */


ul.topnav {
  list-style-type: none; 
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #FFF; 
}

ul.topnav li {float: left;}

ul.topnav li:first-child {display: none;} /* Ei näytetä KOTI isossa valikossa */

ul.topnav li a {
  display: block;
  color: #000;
  text-align: left;
  text-decoration: none;
  font-size: 1.5em; 
  margin: 0; /* Ei lisäillä marginaaleja enempää */
  padding: 0; /* 0px 5px 0px 5px 0 2 0 2 Tällä voi tehdä paddingia ylämenun itemeiden ympärille että ne maalautuu laajemmin Ei vaikuta buttoneihin!*/
}

ul.topnav li a.active {  /* Active luokka nykyiselle sivulle missä ollaan */
    background-color: #4CAF50;
    color: white;
}

ul.topnav li a.active:hover { /* Active luokka näytetään samana kuin muutkin kun hover */
    background-color: #CCC;
    color: #000;
}

ul.topnav li a:hover {background-color: #CCC;}

ul.topnav li.icon {display: none;}

ul.topnav li.icon a:hover { /* En halua että menunapin tai ruksin taakse tulee milloinkaan harmaa tausta */
    background-color:transparent;
}

/* ONCLICK ALAVALIKKO KOKONAAN TÄSSÄ SEURAAVASSA PÄTKÄSSÄ*/

.alamenu {
    float: left;
    overflow: hidden;
}

.alamenu .menunappi { 
	cursor: pointer;
	color: #000;
	font-size: 1.5em;
	border:none;
	outline:none;
	background-color: #FFFFFF;
	padding: 0px 3px 0px 3px; /* Voi tehdä maalautuvaa paddingiä buttoneiden ympärille. Ei vaikuta li itemeihin */
	margin:0; /*ei vaikutusta*/
}

.harmaanappi { /* Tätä luokkaa käytetään togglaamaan valitun menunapin taustaväri harmaaksi bordereilla kun liikutaan pois */
    background-color: #f9f9f9; /* vaalean harmaa */
	border: 1px solid #D1D1D1;	
}

.alamenu:hover .menunappi {
    background-color: #B9E1D0; /* lime */
	color: black; /* teksti musta */
}

.linkkinappi{ /* linkkinappi luokka on ylävalikon nappi jolla ei ole alalinkkejä */
	cursor: pointer;
	color: #000;
    font-size:1em ; /* tai 21px Pitäisi olla 1.5 em mutta näyttää kertautuvan............. */
	border:none;
	outline:none;
	background-color: #FFFFFF;
	padding: 0px 3px 0px 3px;  /* Voi tehdä maalautuvaa paddingiä buttoneiden ympärille. Ei vaikuta li itemeihin */
	margin: 0; /*ei vaikutusta*/
}

.alamenu:hover .linkkinappi {
    background-color: #CCC;	/* tummmin harmaa */
	color: black; /* teksti musta */
}

.alamenu-content { 
	display: none; 
    position: absolute;
    background-color: #f9f9f9; /* vaalean harmaa */
    padding:10px; 
    border: 1px solid #D1D1D1;
    z-index: 1;
    font-size: 1em; /* Tällä voi skaalata alivalikon fonttikokoa */
    text-align:left;
	min-width:160px;
}

.alamenu-content a { 
	color: black;	
	text-decoration: none;
    display: block;
	margin: 3px 3px 3px 3px; 	/* Tällä tehdään marginit alivalikon itemeiden ympärille */
    text-align:left;
}

.alamenu-content a:hover {
    background-color: #ddd;	/* tummempi harmaa */
}

.show {
    display: block;
	margin:0;
}

.hevosvalikko {
    position:relative;
    display:inline-block;
}

.hevosvalikko-content {
    position:absolute;
	left:90px;
	display:none;
	z-index: 1;
}

.hevosvalikko:hover .hevosvalikko-content {
    display: block;   
}


.pikkuikoni { /* Responsiivisen alavalikon pikkuikonia ei näytetä kun ei pieni näyttö mutta tässä kuitenkin muotoilut jos vaikka joskus halutaan*/
    display:none; /*none*/
    float:left;
	margin:6px 0px 0 0;
	font-size:10px;
	color:#666;
}
@supports (overflow:-webkit-marquee) and (justify-content:inherit) { /* Omat marginaalit safarille, buuu... */
.pikkuikoni {margin: 8px 0px 0 0;}
}

/* ONCLICK ALAVALIKKO PÄÄTTYY*/


/*
@media screen and (max-width:800px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
*/
/*
@media screen and (max-width:800px) {
  ul.topnav.responsive { 
    z-index:1; 
	position: absolute;
	top:0px;
	right:10px;   	
	border: 1px solid #D1D1D1;
	padding:10px 0px 10px 0px; /* Tämä siirtää menuitemeita ikonista alaspäin ja tekee pohjalle 10px tilaa
  }   

  ul.topnav.responsive li.icon {
    position: absolute;
	right:10px; /* tällä saadaan ikoni valikkoikkunan oikeaan kulmaan: right: 0; 
    top: 0;
    margin: 0; /* Tilaa menuikonin ympärille tarvittaessa 
  }

  ul.topnav.responsive li {
    float: none; 
	display: block;
  }
  
  ul.topnav.responsive li a {
	display: block;
    text-align: left;
  }
  
  ul.topnav.responsive li a.active {  /* Active luokka nykyiselle sivulle missä ollaan 
    background-color: #4CAF50;
    color: white;
  }

  ul.topnav.responsive li a.active:hover { /* Active luokka näytetään samana kuin muutkin kun hover          
      background-color: #CCC;
      color: #000;
  }  

/* TÄHÄN MUOKATAAN ALAVALIKON ITEMEITA RESPONSIIVISEKSI 
ul.topnav.responsive { 
	max-width:100%; 
    width:250px;
}

.alamenu-content {
    position: relative;
}

.hevosvalikko:hover .hevosvalikko-content {
    display: none;   
}

.pikkuikoni { /* Responsiivisen alavalikon pikkuikoni näytetään kun pieni näyttö 
    display:inline;
	margin-right:5px; /* Responsiivisessa valikossa isompi oikea marginaali pikkuikonille 
	font-size:14px;
	margin-top:2px;
}
@supports (overflow:-webkit-marquee) and (justify-content:inherit) { /* Omat marginaalit safarille, buuu... 
.pikkuikoni {margin-top:6px;}
}

}
*/

/* Piirretään menuikoni */

.ikonicontainer {
    display: inline-block;
    cursor: pointer;
	z-index:1; 
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 4px;
    background-color: #333; /* Tumma harmaa */
    margin: 5px 0; /* 6 0 */
    -webkit-transition: 1s; 
	-moz-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
}

.change .bar1 {
    -ms-transform: rotate(-225deg) translate(0px, -13px);
    -webkit-transform: rotate(-225deg) translate(0px, -13px);
    -moz-transform: rotate(-225deg) translate(0px, -13px);
	-o-transform: rotate(-225deg) translate(0px, -13px);
	transform: rotate(-225deg) translate(0px, -13px);
	background-color: #FF0000;
    -webkit-transition: 0.5s; /* 0.5 */
	-moz-transition: 0.5s; 
	-o-transition: 0.5s; 
	transition: 0.5s;
}

.change .bar2 {
    opacity: 0;
    -webkit-transition: 0s; 
	-moz-transition: 0s; 
	-o-transition: 0s; 
	transition:0s;
}

.change .bar3 {
    -ms-transform: rotate(45deg) translate(0px, -13px);
	-webkit-transform: rotate(45deg) translate(0px, -13px);
	-moz-transform: rotate(45deg) translate(0px, -13px);
	-o-transform: rotate(45deg) translate(0px, -13px);
    transform: rotate(45deg) translate(0px, -13px);
	background-color: #FF0000;
    -webkit-transition: 0.1s;  /* 0.1 */
	-moz-transition: 0.1s; 
	-o-transition: 0.1s; 
	transition: 0.1s;
}