/* Koulun css, ilman linkkiä oletuskuvaan, kuvakekoko 0.6em, ennen 0.3em, yläbannerin alaotsikkojen kooksi määritelty 20 px, valkoinen huntu otsikoissa, alaotsikoissa hunnun koko 0.075em, ei vasemman reunan valkoista huntua, kuvake ja yläpalkki syaanin värinen, 28.11.2017*/

/* Koko sivun väri, ennen eli 1.11.2017 background oli #fbfbfa, tai #9fdbff vaaleansininen, kokeiltu myös vaaleampi sininen #e3effb, nyt vaaleansiniharmaa #eaf3fc */

body > main
{
  background: #eaf3fc;
  color: #000;
  border-bottom: solid 0.25em #5397d2;
}

/* Muokkaa ja Jaa näkymän taustaväri*/
body.modify > main
{
  background: #b5b1a9;
  background-image: linear-gradient(to bottom, #b5b1a9 0%, #ded9cf 20em, #ded9cf 50em, #b5b1a9 100%);
}

/*Peda.net ja henkilot linkin tausta lapinakyvaksi*/
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 eli bannerin taustakuva tämä voidaan vaihtaa koulukohtaiseksi -Kuopion pääsivulla näin, tässä nämä rivit piilossa

body > header
{
background: transparent;
background: #ffffff url("https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/bl1p:file/download/") no-repeat right;
background-size: cover;
/*background-position: 9.5em 0%;*/
{
border-bottom: solid 0.1em #5397d2;
}

/* Sivun otsikon taustakuva eli bannerin taustakuva tämä voidaan vaihtaa koulukohtaiseksi - tässä vain yläbannerin syaani alaviiva jätetty*/

body > header
{
border-bottom: solid 0.1em #5397d2;
}


/*ylapalkin taustavarin muutos syaaniksi liukuvariksi seka perusvari tekstille*/
header nav.global
{
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 153, 213, 1) 10em, rgba(0, 153, 213, 0.3) 30em);
    color: #000;
}


/* Sivun otsikkoalueen taustakuva otsikkoalueen ylamarginaali ja otsikkoalueen tekstin perusvari - valkoinen huntu vasemmalle*/

header nav.path
{

	background: transparent;
background: linear-gradient(90deg, #fff 0em, #fff 8em, transparent 17em);
background: radial-gradient(20em at 0% 50%, #fff 0%, #fff 10em, rgba(255, 255, 255, 0.9) 13em, rgba(255, 255, 255, 0) 20em);
	padding-top: 0.5em;
	color: #fff;
}

/*Päätason otsikon väri ja varjostus seka fontin vaihtaminen isoiksi kirjaimiksi fontin väri musta*/
header .path .service.toplevel a, header .path .service.toplevel a:hover {
white-space: nowrap;
font-weight: 600;
text-transform: uppercase;
color: #000;
}

/*Tällä määritellään päätason sivun ali tai yliotsikon tekstin tyyli normaaliksi*/
header .path .service.toplevel a .subtitle1, header .path .service.toplevel a .subtitle2
{
	        font-family: 'Verdana', 'Raleway', 'Frutiger', 'Ubuntu', 'Segoe UI', 'Segoe WP', 'Open Sans', 'Trebuchet MS', sans-serif; font-size: 20px;
        text-transform: none;
        text-shadow: 0 0 0.075em #fff, 0 0 0.075em #fff, 0 0 0.075em #fff, 0 0 0.075em #fff, 0 0 0.075em #fff;
}

/*Nakymaton otsikko, joka maaraa otsikkorivin korkeuden*/

header .path .service.toplevel a, header .path .service.toplevel a:hover
{ 
margin: 0;
padding: 0em;
width: 100%;
margin-bottom: 0em;
background: transparent;
}

/*Murupolun vari ja nostetaan murupolku kuvakkeen ylapuolelle, jos kuvake tulee murupolun päälle*/

nav.path .toplevel > .pathitem
{
	position: relative;
        background: transparent;
	color: #fff;
	/*padding-top: 0.4em;
	padding-bottom: 0.4em;*/
        z-index: 2;
}

/*Murupolun linkkien yleisvari*/ 
header .path a
{
        color: #000;
}

/*Murupolun linkkien vari otsikon jalkeen*/
header .path .toplevel a
{
        color: #000;
}

/*Murupolun viimeisen linkin vari*/
header .path .pathitem.toplevel .pathitem.redundant a 
{
    color: #000;
}


/*Murupolun linkkien ja vierailtujen linkkien efekti*/

header .path .pathitem a:link, header .path .pathitem a:visited
{

    color: #000;
    text-shadow: 0 0 0.2em #FFFFFF;

}

/* Murupolun linkkien efekti klikattaessa tai hoveroitaessa */
header .path .pathitem a:hover, header .path .pathitem a:active
{
    color: #000;
    text-shadow: 0 0 0.2em #FFFFFF, 0 0 0.3em #ffffff, 0 0 0.4em #ffffff;
    
}

/*Muropolun linkkien jakaja eli > merkin väri*/

header .path .pathitem .d 
{

color: #000;

}


/*Sivun otsikon vari*/
h1 a, h1 a:link, h1 a:visited
{
    color: #000;
}

/*Moduuleiden otsikoiden vari*/
h2 a, h2 a:link, h2 a:visited
{
    color: #000;
}

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

header .path .pathitem.toplevel a img
{
height: 6em;
max-width: 6em;
position: relative;
left: 0.5em;
top: 0em;
margin-top: -0.3em;
margin-bottom: 0em;
margin-right: 1.7em;
z-index: 1;
}

/*Jos selain on 46em tai alle, niin kaytetaan lisaksi alla olevia tyyleja*/
@media all and (max-width:46em)
{

        body > header
	{
        background: #ffffff;
        background: #ffffff url("https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/bl1p:file/download/") no-repeat;
        background-position: 7em 0%;	
	}
	
        header nav.global
        {
	background: transparent;
	color: #fff;
        background-image: linear-gradient(to right, rgba(0, 153, 213, 1) 5em, rgba(0, 153, 213, 0.3) 30em);
        color: #000;
        }

}

/*Jos selain on 30em tai alle, niin kaytetaan lisaksi alla olevia tyyleja*/
@media all and (max-width:30em)
{
	
        body > header
	{
        background: #ffffff url("https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/bl1p:file/download/") repeat-y;
        background-image: url("https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/bl1p:file/download/"), linear-gradient(to bottom, #9DCFF4 0%, #E9F3FC 4em, #ffffff 100%);
        background-position: 5em 0%;
	}
	
/* Yläpalkin taustavärin muutos ja perusväri tekstille pienellä näytöllä eli alle 30em*/
        header nav.global
        {
	background: transparent;
	color: #fff;
        background-image: linear-gradient(to right, rgba(0, 153, 213, 1) 5em, rgba(0, 153,213, 0.3) 30em);
        color: #000;
        }

        header .path .pathitem.toplevel a img
        {
     
         position: relative;
         left: 0em;
         top: -0.2em;
         margin-top: 0em;
         margin-bottom: -0.1em;
         margin-right: 1em;
         }
 
}

/* Tällä määritellään sivun otsikolle heittovarjo ja rajoitetaan sen rivittymistä pienemmillä näytöillä
header .path .service.toplevel a, header .path .service.toplevel a:hover
{
  text-shadow: 0.05em 0.05em 0.1em rgba(255,255,255,0.9);
  white-space: nowrap;
} */

/*Sivun banneriotsakkeen efekti*/
header .path .service.toplevel a span span {
    /*text-shadow: 0px 0px 0.2em #FFF, 0px 0px 0.3em #FFF, 0px 0px 0.4em #FFF;*/
   text-shadow: 0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.1em #fff;
}

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

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


/* 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.6em;
                margin-right: -0.7em;
	}
}



/*Tyhja murupolku eli murupolulle ei varata tilaa, jos siinä ei ole linkkejä*/
header .path .pathitem.toplevel > .pathitem.placeholder, header .path .pathitem.toplevel > .pathitem.redundant {
min-height: 0em;
padding: 0;
}
/*
header .path
{
background: linear-gradient(90deg, #fff 0em, #fff 8em, transparent 17em);
background: radial-gradient(20em at 0% 50%, #fff 0%, #fff 10em, rgba(255, 255, 255, 0.9) 13em, rgba(255, 255, 255, 0) 20em);
}
*/