/* Koko sivun liukuväri*/
html:before
{
  background: #fbfbfa;
  color: #000;
  border-bottom: solid 0.25rem #5397d2;
}

/* Muokkaa ja Jaa näkymän taustaväri*/
body.modify > main
{
  background: #b5b1a9;
  background-image: linear-gradient(to bottom, #b5b1a9 0%, #ded9cf 20rem, #ded9cf 50rem, #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*/

html { --bannerbackgroundposition: 9.5rem 0%; }

html { --bannerbackgroundsize: cover; }

.banner
{
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.5rem 0%;*/
border-bottom: solid 0.1rem #5397d2;
}


/*ylapalkin taustavarin muutos liukuvariksi seka perusvari tekstille*/
header nav.global
{
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 153, 213, 1) 10rem, rgba(0, 153, 213, 0.3) 30rem);
    color: #000;
}


/*ylapalkin taustavarin muutos liukuvariksi seka perusvari tekstille*/
header nav.global
{
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 153, 213, 1) 10rem, rgba(0, 153, 213, 0.3) 30rem);
    color: #000;
}


/* 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 seka fontin vaihtaminen isoiksi kirjaimiksi fontin väri musta*/
/*
header h1.toplevel a, header h1.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 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;
}

/*Nakymaton otsikko, joka maaraa otsikkorivin korkeuden*/

/*
header h1.toplevel a, header h1.toplevel a:hover
{ 
margin: 0;
padding: 0rem;
width: 100%;
margin-bottom: 0rem;
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.4rem;
	padding-bottom: 0.4rem;*/
        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 h1.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.2rem #FFFFFF;

}

/* Murupolun linkkien efekti klikattaessa tai hoveroitaessa */
header .path .pathitem a:hover, header .path .pathitem a:active
{
    color: #000;
    text-shadow: 0 0 0.2rem #FFFFFF, 0 0 0.3rem #ffffff, 0 0 0.4rem #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 h1.toplevel a img
{
height: 3rem;
max-width: 3rem;
position: relative;
left: 0.5rem;
top: 0rem;
margin-top: -0.3rem;
margin-bottom: 0rem;
margin-right: 1.7rem;
z-index: 1;
}

/*Jos selain on 46rem tai alle, niin kaytetaan lisaksi alla olevia tyyleja*/
@media all and (max-width:46rem)
{

        html { --bannerbackground: #ffffff; }

html { --bannerbackgroundposition: 7rem 0%; }

.banner
	{
        background: #ffffff;
        background: #ffffff url("https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/bl1p:file/download/") no-repeat;
        background-position: 7rem 0%;	
	}
	
        header nav.global
        {
	background: transparent;
	color: #fff;
        background-image: linear-gradient(to right, rgba(0, 153, 213, 1) 5rem, rgba(0, 153, 213, 0.3) 30rem);
        color: #000;
        }

}

/*Jos selain on 30rem tai alle, niin kaytetaan lisaksi alla olevia tyyleja*/
@media all and (max-width:30rem)
{
	
        html { --bannerimage: url("https://peda.net/kuopio/p/kk2/kuvatiedostoja/kuvia/bl1p:file/download/"); --bannerheight: minmax(max(20rem,25vh), auto); }

html { --bannerbackgroundposition: 5rem 0%; }

.banner
	{
        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 4rem, #ffffff 100%);
        background-position: 5rem 0%;
	}
	
/* Yläpalkin taustavärin muutos ja perusväri tekstille pienellä näytöllä eli alle 30rem*/
        header nav.global
        {
	background: transparent;
	color: #fff;
        background-image: linear-gradient(to right, rgba(0, 153, 213, 1) 5rem, rgba(0, 153,213, 0.3) 30rem);
        color: #000;
        }

        header h1.toplevel a img
        {
     
         position: relative;
         left: 0rem;
         top: -0.2rem;
         margin-top: 0rem;
         margin-bottom: -0.1rem;
         margin-right: 1rem;
         }
 
}


/* 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.05rem 0.05rem 0.1rem rgba(255,255,255,0.9);
  white-space: nowrap;
}
*/
*/

/*Sivun banneriotsakkeen efekti*/
header h1.toplevel a span span {
    /*text-shadow: 0px 0px 0.2rem #FFF, 0px 0px 0.3rem #FFF, 0px 0px 0.4rem #FFF;*/
   text-shadow: 0 0 0.1rem #fff, 0 0 0.1rem #fff, 0 0 0.1rem #fff, 0 0 0.1rem #fff, 0 0 0.1rem #fff;
}

/* 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.6rem;
                margin-right: -0.7rem;
	}
}


/*Tyhja murupolku eli murupolulle ei varata tilaa, jos siinä ei ole linkkejä*/
header h1.toplevel > .pathitem.placeholder, header h1.toplevel > .pathitem.redundant {
min-height: 0rem;
padding: 0;
}