@import url(https://fonts.googleapis.com/css?family=Marcellus+SC|Poly|Sorts+Mill+Goudy|Quattrocento|Petrona|Average|Brawler|Cambo&subset=latin,latin-ext);

/* Sivun sisallon taustakuva ja tai vari*/

html { --pagebackgroundimage: url("https://peda.net/dev/theme/tammela/style/kuplat_3d_v3-png3:file/download/"); }

html:before
{
  background: #f2efe6 url("https://peda.net/dev/theme/tammela/style/kuplat_3d_v3-png3:file/download/") no-repeat;
  background-image: url("https://peda.net/dev/theme/tammela/style/kuplat_3d_v3-png3:file/download/"), linear-gradient(to bottom, #f2efe6 0%,#f0f0f0 25rem,#ffffff 100%);
  color: #000;
  border-bottom: solid 0.25rem #0e86bb;
}

/*Peda.net ja henkilot linkin taustavarin muutos*/
header nav.global .links > span a,
header nav.global .links > span.persondirectory,
header nav.global .links > span.frontpage,
header nav.global input.s, header nav.global button
{
background: transparent;

}


/* Sivun otsikon taustakuva*/

.banner
{
background: transparent;
background: #ef7d00 url("https://peda.net/dev/theme/tammela/style/logo_uusi_ilme-png:file/download/") no-repeat left top;
border-bottom: solid 0.1rem #333;

}

/*ylapalkin taustavarin muutos seka perusvari tekstille*/

header nav.global
{
	background: transparent;
	background: rgba(0,0,0,0.2);
	color: #fff;
}


/* Sivun otsikkoalueen taustakuva otsikkoalueen ylamarginaali ja otsikkoalueen tekstin perusvari */

header nav.path
{

	background: transparent;
	padding-top: 0.5rem;
	color: #fff;
}

/*Päätason otsikon väri ja varjostus*/
/*
header h1.toplevel a, header h1.toplevel a:hover {
text-shadow: 0rem 0rem 0.15rem rgba(0, 0, 0, 0.8);
white-space: nowrap;
}
*/

/* Tällä määritellään että otsikossa koulun nimi näkyy isoilla kirjaimilla, vaikka palvelun tiedoissa nimi kirjoitetaan normaalisti sekä vaihdetaan fontti*/

header h1.toplevel a
{
	font-family: "Quattrocento", serif;
        font-weight: 100;
        text-transform: uppercase;
}

/*Tällä määritellään päätason sivun ali tai yliotsikon tekstin tyyli normaaliksi*/
header h1.toplevel a .subtitle1, header h1.toplevel a .subtitle2
{
	font-family: 'Raleway', 'Frutiger', 'Ubuntu', 'Segoe UI', 'Segoe WP', 'Open Sans', 'Trebuchet MS', sans-serif;
        text-transform: none;
}



/*Otsikkoalueen tekstin perusvari otsikosta alaspain*/

header .path .toplevel
{
	color: #000099;
}

/*Nakymaton otsikko, joka maaraa otsikkorivin korkeuden*/

/*
header h1.toplevel a, header h1.toplevel a:hover
{ 
margin: 0;
padding: 0;
width: 100%;
background: transparent;
}
*/

/*Talla poistetaan logo ja otsikon teksti nakyvista


header h1.toplevel a span,
header h1.toplevel a img
{ 
	display: none;
}
*/

/*Murupolun taustakuva ja vari*/

nav.path .toplevel > .pathitem
{
	background: transparent;
	color: #fff;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

/*Murupolun linkkien yleisvari*/ 

header .path a
{
	color: #fff;
}

/*Murupolun linkkien vari otsikon jalkeen*/ 


header .path .toplevel a
{
	color: #fff;
        text-shadow: 0 0 0.3rem #000, 0 0 0.4rem #000;
}

/*Murupolun viimeisen linkin vari*/

header h1.toplevel .pathitem.redundant a 
{
    color: #fff;
}

/*Murupolun efekti*/

/*
header .path .pathitem a:hover, header .path .pathitem a:active, header h1.toplevel a:hover, header h1.toplevel a:active
{
    color: #fff;
    text-shadow: 0 0 0.2rem #FFFFFF, 0 0 0.3rem #000, 0 0 0.4rem #000;
}
*/

/*Sivun otsikon vari*/

h1 a, h1 a:link, h1 a:visited
{
    color: #ef7d00;
}

/*Moduuleiden otsikoiden vari*/

h2 a, h2 a:link, h2 a:visited
{
    color: #ef7d00;
}

/* Tällä määritellään sivun ikonin koko ja sijainti. Hieman sisennetty ja aavistuksen nostettu */

header h1.toplevel a img
{
height: 2.5rem;
max-width: 2.5rem;
position: relative;
left: 0.5rem;
top: 0rem;
margin-top: 0rem;
margin-bottom: 0rem;
}

/*Jos selain on 46rem tai alle, niin kaytetaan lisaksi alla olevia tyyleja*/

@media all and (max-width:46rem)
{

        .banner
	{
        background: transparent;
	background: #ef7d00 url("https://peda.net/dev/theme/tammela/style/logo_uusi_ilme-png:file/download/") no-repeat left top;
	}

        header nav.global
        {
	background: transparent;
	background: rgba(0,0,0,0.2);
	color: #fff;
        }

}

/*Jos selain on 30rem tai alle, niin kaytetaan lisaksi alla olevia tyyleja*/

@media all and (max-width:30rem)
{
	
        .banner
	{
        background: transparent;
        background: #ef7d00 url("https://peda.net/dev/theme/tammela/style/logo_uusi_ilme-png:file/download/") no-repeat left top;
	}
	
        header nav.global
        {
	background: transparent;
	color: #fff;
        }

        header h1.toplevel a img
        {
         position: relative;
         left: 0rem;
         top: 0rem;
         margin-top: 0rem;
         margin-bottom: 0rem;
         }
}




/* Tällä määritellään sivun otsikolle heittovarjo ja rajoitetaan sen rivittymistä pienemmillä näytöillä */

/*
header h1.toplevel a, header h1.toplevel a:hover
{
  text-shadow: 0 0 0.3rem #000, 0 0 0.4rem #000;
  white-space: nowrap;
}
*/

/* Tällä määritellään että sivun otsikko rivitetään kuitenkin, jos sivun leveys on vähemmän kuin 30rem */

@media all and (max-width:30rem)
{
  /*
header h1.toplevel a, header h1.toplevel a:hover
  {
    white-space: normal;
  }
*/
}



/* Tällä laitetaan otsikkotekstien eteen lisää marginaalia ihan pienillä näytöillä */

@media all and (max-width:30rem)
{
	header .path .toplevel .service.toplevel
	{
		padding-left: 0.5rem;
	}
}

/*Tyhja murupolku. Murupolku piilotetaan, jos siinä ei ole yhtään linkkiä*/
header h1.toplevel > .pathitem.placeholder, header h1.toplevel > .pathitem.redundant {
min-height: 0rem;
padding: 0;
}