/* Sivun sisallon taustakuva ja vari */

/* body

*/

/* Sivun sisallon taustakuva ja vari, muuta background koulujen varin mukaiseksi*/

body > main
{

background: #fff;
/* background-image: linear-gradient(to bottom, #FFD553 0%,#ffffff 40em,#FFF 100%); */
color: #000;
border-bottom: solid 0.25em #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*/

body > header
{
background: url("https://peda.net/kuopio/esmerkkikoulu/arkisto/arkisto-2014-2015/tiedostoja/pilvet:file/download/") no-repeat left top #fff;
}

/*ylapalkin taustavarin muutos seka perusvari tekstille*/

header nav.global
{
background: transparent;
background: rgba(0,0,0,0.2);
/* background-image: linear-gradient(to right, rgba(0,110,198,0.9) 0%,rgba(187,224,243,0.3) 30em); */
color: #fff;
}



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

header nav.path
{
background: transparent;
padding-top: 0.6em;
color: #fff;
box-shadow: 0.05em 0.05em 0.2em #fff;
}


/*Otsikkoalueen tekstin perusvari otsikosta alaspain*/

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

/*Nakymaton otsikko, joka maaraa otsikkorivin korkeuden*/

header .path .service.toplevel a, header .path .service.toplevel a:hover
{
margin: 0;
padding: 0;
/*height: 120px;*/
width: 100%;
background: transparent;
}

/*Talla poistetaan logo ja otsikon teksti nakyvista*/

/*

header .path .service.toplevel a span,
header .path .service.toplevel a img
{
display: none;
}

*/

/*Murupolun taustakuva ja vari*/

nav.path .toplevel > .pathitem
{
background: transparent;
background: rgba(0,0,0,0.2);
color: #fff;
padding-top: 0.4em;
padding-bottom: 0.4em;
}

/*Murupolun linkkien yleisvari*/

header .path a
{
color: #fff;
}

/*Murupolun linkkien vari otsikon jalkeen*/


header .path .toplevel a
{
color: #fff;
}

/*Murupolun viimeisen linkin vari*/

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

/*Murupolun efekti*/

header .path .pathitem a:hover, header .path .pathitem a:active, header .path .service.toplevel a:hover, header .path .service.toplevel a:active
{
color: #000000;
text-shadow: 0 0 0.2em #FFFFFF, 0 0 0.3em #FFFFFF, 0 0 0.4em #FFFFFF;
}

/*Sivun otsikon vari*/

h1 a, h1 a:link, h1 a:visited
{
color: #00467C;
}

/*Moduuleiden otsikoiden vari*/

h2 a, h2 a:link, h2 a:visited
{
color: #00467C;
}




/* Tällä määritellään sivun otsikolle heittovarjo ja rajoitetaan sen rivittymistä */

header .path .service.toplevel a, header .path .service.toplevel a:hover
{
text-shadow: 0em 0em 0.2em rgba(0,0,0,0.8);
/* white-space: nowrap; */
}

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

@media all and (max-width:50em)
{
header .path .service.toplevel a, header .path .service.toplevel a:hover
{
/* white-space: normal; */
}
}

/* Tällä määritellään sivun ikonin koko */

header .path .pathitem.toplevel a.withsubtitle1.withsubtitle2 img
{
height: 3.5em;
max-width: 3.5em;
padding-top: 0.1em;
padding-bottom: 0.3em;
}

/* Tällä määritellään sivun ikonin koko silloin kun käytössä on vain sivun perusotsikko */


header .path .pathitem.toplevel a img
{
height: 2.8em;
max-width: 2.8em;
}

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


header .path .service.toplevel a span span
{
font-weight: 900;
text-transform: uppercase;
/* font-variant: small-caps; */
}

/* Tällä kätketään ikoni ja määritellään marginaali otsikkotekstien alkuun */


header .path .pathitem.toplevel a img
{
margin-right: 0.2em;
/* visibility: hidden; */
}



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

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