/* Kuopion pääsivun CSS-määrittelyt, 5.12.2017 */

/* Koko sivun liukuväri, ennen #fbfbfa, kokeilussa #dee6ee ja nyt #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*/

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;
}


/*ylapalkin taustavarin muutos 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;
}


/*ylapalkin taustavarin muutos 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 */

header nav.path
{

	background: transparent;
	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: 'Raleway', 'Frutiger', 'Ubuntu', 'Segoe UI', 'Segoe WP', 'Open Sans', 'Trebuchet MS', sans-serif;
        text-transform: none;
}

/*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;
}

.banner h1 a {background:transparent;}