h1 				{font-size: 2.30rem;font-family: 'Muli'; font-weight:lighter; color:#555555;letter-spacing: 2px;} 
		h2 				{font-size: 1.90rem;font-family: 'Muli'; font-weight:normal;  color:#000000;letter-spacing: 0px;} 
		h3 				{font-size: 1.20rem;font-family: 'Muli'; font-weight:normal;  color:#000000;letter-spacing: 0px;} 
		h4 				{font-size: 1.00rem;font-family: 'Muli'; font-weight:normal;  color:#000000;letter-spacing: 0px;} 
		.text_normal 	{font-size: 1.00rem;font-family: 'Muli'; font-weight:normal;  color:#000000;letter-spacing: 0px;} 		
		text_normal 	{font-size: 1.00rem;font-family: 'Muli'; font-weight:normal;  color:#000000;letter-spacing: 0px;} 		
		.tekstilaatikko 				{	max-width: 100%;		padding: 10px;		
										white-space: normal;      /* rivittäminen sallittu */
										word-wrap: break-word;    /* katkaisee pitkät sanat */
										overflow-wrap: break-word;/* sama kuin word-wrap */
										word-break: break-word;   /* vielä tehokkaampi katkaisu */
										overflow: hidden;         /* estää sisällön vuotamisen ulos */
									}	



		a 				{font-size: 1.00rem;font-family: 'Muli'; font-weight:normal;  color: #414141;		  text-decoration: none;		}
		a:hover 		{font-size: 1.00rem;font-family: 'Muli'; font-weight:normal;  color: #717171;		  text-decoration: none;		}
		#container canvas, #overlay {position: absolute;}

		.scrollable-place {	height: 1000px;	}
		.stop-scrolling {height: 100%;	overflow: hidden;}
		
		.modal-backdrop {
			background-color: #000;
			bottom: 0;
			left: 0;
			position: fixed;
			right: 0;
			top: 0;
			z-index: 0 !important;
		}
		
    /* Piilota Google Translate -elementit */
    #google_translate_element,
    .goog-te-banner-frame.skiptranslate,
    .goog-te-gadget,
    .goog-logo-link,
    .goog-te-combo {
      display: none !important;
    }

    /* Piilota Google Translate -widget siististi */
    #google_translate_element {
      width: 0;
      height: 0;
      overflow: hidden;
      opacity: 0;
      position: absolute;
    }

    /* Piilota Google Translate -banneri ja popupit */
    .goog-tooltip,
    .goog-tooltip:hover,
    .goog-text-highlight,
    .goog-te-balloon-frame,
    .goog-te-banner-frame,
    #goog-gt-tt,
    .goog-te-balloon {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }

    html,body {
      height:100%;
      margin:0;
      background-color:white;
	  overflow:hidden; /* ei koko sivun scrollia */
	  font-size: 1.00rem;font-family: 'Muli'; font-weight:normal;  color:#000000;letter-spacing: 0px;
	 }

    .class_koti_layout {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr;
      height:100%;
    }

    /* Yläbanneri */
    .class_koti_header {
      grid-column: 1 / span 2;
      grid-row: 1;
      background-color:white;
      display:flex;
	/*
		  align-items:center;
		  justify-content:center;
	*/
      height:60px;


      overflow: hidden;

      /* Animaation asetukset */
      transition: opacity 0.6s ease, max-height 0.6s ease;
      max-height: 60px; /* normaali korkeus */
      opacity: 1;
    }

    /* Piilotettu tila */
    .class_koti_header.hidden {
      opacity: 0;
      max-height: 0;
    }


    /* Sidebar */
    .class_koti_aside {
      grid-column: 1;
      grid-row: 1 / span 2;
      background-color:white;
      overflow-y:auto; /* vain sisältö rullaa */
	  width: 290px;   
		line-height: 1.0;	
    }
			
				
		#id_koti_aside::-webkit-scrollbar {
		  width: 6px;   /* pystyscrollbarin leveys */
		}

		#id_koti_aside::-webkit-scrollbar-track {
		  background: #f1f1f1; /* ura */
		}

		#id_koti_aside::-webkit-scrollbar-thumb {
		  background-color: #e2e2e2; /* kahva */
		  border-radius: 3px;
		  border: 1px solid #f1f1f1; /* pieni tila uran ja kahvan väliin */
		}

		#id_koti_aside::-webkit-scrollbar-thumb:hover {
		  background-color: #f1f1f1; /* tummempi hover */
		}	
	
    /* Sisältö */
    .class_koti_runko_main_scroll {
		grid-column: 2;
		grid-row: 2;
		box-sizing:border-box;
		overflow-y:auto; 
		height: 100%;   
		scrollbar-width: thin;                  /* ohut */
		scrollbar-color: #999 #f0f0f0;          /* kahva | tausta */
    }

	

	#id_koti_runko::-webkit-scrollbar {
	width: 8px;                             /* kapea */
	height: 8px;
	}

	#id_koti_runko::-webkit-scrollbar-track {
	background: #f0f0f0;                    /* vaalea ura */
	}

	#id_koti_runko::-webkit-scrollbar-thumb {
	background-color: #999;                 /* harmaa kahva */
	border-radius: 10px;                    /* pyöristetyt kulmat */
	}

	#id_koti_runko::-webkit-scrollbar-thumb:hover {
	background-color: #666;                 /* tummempi hoverilla */
	}


    .class_koti_runko_lisa {
		grid-column: 2;
		grid-row: 3;
	}
    .class_koti_runko_lisaX {
		grid-column: 2;
		grid-row: 4;
	}


    /* Oletus: näytetään header, piilotetaan sidebar 

    .class_koti_button {
      background:#007BFF;
      color:white;
      border:none;
      padding:8px 12px;
      border-radius:6px;
      cursor:pointer;
    }
	*/

    /* Oletus: näytetään header, piilotetaan sidebar */
    body:not(.show-sidebar) aside {
      display:none;
    }
    body.show-sidebar header {
      display:none;
    }