.div { border:1px red solid; } body { margin:0; word-spacing:0.1em; letter-spacing:0.07em; font-family: "Lucida Sans", Tahoma, "Palatino Linotype", "Liberation Sans", "DejaVu Sans", "Bitstream Vera Sans", Arial, Helvetica, "sans-serif"; } .kursiivifonttienvarasto { font-family:"Abyssinica SIL", "Liberation Serif", FreeSerif, Serif; } td { padding:0; vertical-align:top; } table { border-collapse:collapse; empty-cells:show;} img { border:0; display:block; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } .perusvari { background-color:hsl(240,100%,25%); color:rgb(0,0,128); } .piristevihree { background-color:hsl(196,89%,60%); } h1 { padding:66px 3% 0 0; margin:0; font-size:222%; font-weight:normal; } h2 { padding:0; margin:22px 0 0 0; font-size:144%; } h3 { padding:0; margin:55px 0 11px 0; font-size:122%; } p { padding:22px 0 0 0; margin:0; font-size:111%; line-height:155%; } .pamp { padding:0px 0px 0px 33px; margin:7px 0 0 1%; font-size: 111%; background-image:url(kuvat/pallomusta.png); background-size:0.4em; background-position: 0 0.56em; background-repeat: no-repeat; line-height:155%; } .leveeotsikko { margin:0; padding: 77px 7% 0 7%; text-align:center; font-size:177%; color:hsl(196,89%,28%); width:100%; font-weight: normal; word-spacing: 0.14em; letter-spacing: 0.07em; display: table; } .leveeteksti { padding:0 7%; margin:77px 0 0 0; font-size:111%; text-align:center; width:100%; word-spacing: 0.14em; letter-spacing: 0.07em; display: table; } /* alueet ....................................................................................................................................................... */ .sivu { width:100%; display:table; } .aluevakio { padding-left:9%; padding-right:9%; background-color:hsl(0,0%,100%); width:100%; display:table; } /* yläosa ....................................................................................................................................................... */ .aluelogo { background-color:hsl(240,100%,25%); width:100%; display:table; } .logokuva { width:90%; max-width:555px; margin:33px 5%; } .alueimage { background-image:url(kuvat/imagekuva.jpg); background-size:1920px; background-position:33% -222px; height:666px; width:100%; display:table; } /* navigointi ....................................................................................................................................................... */ nav { font-size:144%; font-weight:bold; background-color:hsl(240,100%,25%); width:100%; height:2.4em; display:table; position:relative; letter-spacing:0.1em; } ul { position: absolute; top:0.6em; right:5%; list-style-type:none; margin: 0; padding:0; } li { display:inline-block; float:left; } li a { zzwidth:5em; margin: 0 1em; text-align:center; color:hsl(0,0%,100%); text-decoration:none; display:block; } li:hover a { text-decoration:none; color:hsl(240,100%,77%); } li ul { display:none; } li ul li { display:block; float:none; } ul li a:hover + .hidden, .hidden:hover { display:block; } .nnv { display:none; } input[type=checkbox]{ display:none; -webkit-appearance: none; } input[type=checkbox]:checked ~ #menu{ display:block; } .nnkele { bottom: 4px; left: 4px; position: fixed; } .nnk:link { background-image: url(kuvat/nnkoy255.png); } .nnk:visited { background-image: url(kuvat/nnkoy255.png); } .nnk:hover { background-image: url(kuvat/nnkoy255.png); background-color:hsl(240,100%,77%); } .nnk { background-color:hsl(240,100%,25%); height:40px; width:60px; background-size:25px; border-radius:50%; border:2px hsl(0,0%,100%) solid; background-repeat:no-repeat; background-position:50% 50%; display:block; text-decoration:none; } .tekstilinkki:link { color:hsl(196,89%,28%); text-decoration: underline; } .tekstilinkki:visited { color:hsl(196,89%,28%); text-decoration: underline; } .tekstilinkki:hover { color:hsl(300,80%,20%); text-decoration: none; } .alueingressi { padding:66px 11% 0 11%; width:100%; display: table; } .ingrteksti { padding:0; margin:22px 0; font-size:155%; line-height:166%; } .ingrvasen { width:55%; margin:77px 0 0 0; float:left; } .ingroikea { width:40%; margin:77px 0 0 0; float:right; } /* boxit ....................................................................................................................................................... */ .boxialue2{ width:100%; display: flex; justify-content:space-between; flex-wrap:wrap; } .boxi2 { margin:66px 0 0 0; width:45%; } .boxikuva2 { border-radius: 22px; width:100%; } .boxiotsikko2 { font-size:133%; } .boxiteksti2 { margin:17px 0 0 0; font-size:111%; text-align:center; line-height:155%; } .kapeaboxialue2 { width:100%; max-width:777px; margin: 0 auto; display: flex; justify-content:space-between; flex-wrap:wrap; } .kapeaboxi2 { margin:66px 0 0 0; width:45%; } .boxialue3 { margin:66px 0 0 0; width:100%; display: flex; justify-content:space-between; flex-wrap:wrap; } .boxi3 { margin:0 0 0 0; width:30%; } .boxikuva3 { width:100%; border-radius:50%; } .boxiotsikko3 { margin:55px 0 0 0; font-size:133%; text-align:center; } .boxiteksti3 { margin:17px 0 0 0; font-size:111%; text-align:center; line-height:155%; } .boxikuvayhteys { width:100%; max-width:222px; margin:0 auto; border-radius:50%; } .yhteysalue3 { width:100%; max-width:1111px; margin:66px auto 0 auto; } .karttaele { margin:55px 0 0 0; width:100%; display:table; } /* harvinaiset ....................................................................................................................................................... */ .aluealin { margin-top:55px; padding:0px 9% 55px 9%; width:100%; background-color:hsl(240,100%,25%); display:table; } .alaboxi3 { margin:44px 9% 0 0; float:left; } .alateksti { font-size:133%; color:hsl(0,100%,100%); } .alablanco { font-size:133%; padding:0 1em; } .haiveviiva { height:1px; width:77%; margin:33px auto; background: linear-gradient( 90deg, transparent , hsl(0,0%,100%) , transparent ); } .haiveviiva2 { height:1px; width:77%; margin:66px auto 0 auto; background: linear-gradient( 90deg, transparent , hsl(196,89%,40%) , transparent ); } .rako0 { margin-top:0px; } .rako22 { margin-top:22px; } .alasisus { padding-bottom:55px; } .taustakuva1 { zzbackground-image:url(kuvat/taustakuva1.jpg); zzbackground-size:cover; zzbackground-position:50% 50%; } .taustakuva2 { min-height:333px; background-image:url(kuvat/taustakuva2.jpg); background-size:cover; background-position:50% 50%; } @media screen and (max-width : 1400px) { /* ------------------------------------------------------------------------------------------------------------------------ */ .aluevakio { padding-left:7%; padding-right:7%; } .ingrteksti { padding:0; margin:11px 0px; } .alaboxi3 { margin:44px 5% 0 0; } } /* -------------------- */ @media screen and (max-width : 1200px) { /* ------------------------------------------------------------------------------------------------------------------------ */ .ingrteksti { font-size:122%; } .aluevakio { padding-left:3%; padding-right:3%; } .boxi2 { width:100%; margin:33px 0 0 0; } .boxi3 { margin:66px auto 0 auto; width:100%; max-width:666px; } .alaboxi3 { width:100%; max-width:444px; margin:33px auto 0 auto; float:none; } .alablanco { display:none; } } /* -------------------- */ @media screen and (max-width : 700px) { /* ------------------------------------------------------------------------------------------------------------------------ */ nav { position:relative; } ul { position: absolute; top:0.6em; right:5%; list-style-type:none; margin: 0; padding:0; } li { display:inline-block; float:left; } li a { margin: 0 1em; text-align:center; color:hsl(0,0%,100%); text-decoration:none; display:block; } li:hover a { text-decoration:none; color:hsl(0,0%,100%); } li ul { display:none; } li ul li { display:block; float:none; } .sivu { position:relative; } nav { font-size:122%; background-color:transparent; width:333px; position:absolute; top:133px; right:2%; } ul { margin-top:66px; position:static; display:none; } li { margin:0; float:right; } ul li a { background-color:hsl(240,100%,25%); color:hsl(0,0%,100%); padding: 2em 1em; margin:0 0 1px 0; height:auto; border-width:0 0 1px 0; border-color:hsl(240,100%,77%); border-style:solid; border-radius:50%; border:2px hsl(0,0%,100%) solid; } li:hover a { height:auto; background-color:hsl(240,100%,77%); } ul li, ul li a { width:100%; } .nnv:link { background-image: url(kuvat/nnv255.png); } .nnv:visited { background-image: url(kuvat/nnv255.png); } .nnv:hover { background-image: url(kuvat/nnv255.png); background-color:hsl(240,100%,77%); } .nnv { background-image: url(kuvat/nnv255.png); float:right; background-color:hsl(240,100%,25%); height:60px; width:90px; background-size:33px; background-repeat:no-repeat; background-position:50% 50%; border-radius:50%; border:2px hsl(0,0%,100%) solid; display:block; text-decoration:none; } .kapeaboxi2 { margin:33px 0 0 0; width:100%; } } /* -------------------- */ /* kestotietoa yyy -------------------------------------------------------------------------------------------- */ .fontti { font-family: 'Alfa Slab One'; } .levee100 { width:100%; } .erotin { width: 100%; height: 1px; display: block; } .eimarginaalia { margin-right: 0; } .vasemmalle { text-align: left; } .keskelle { text-align: center; } .oikealle { text-align: right; } .kuvakeskelle { margin-left: auto; margin-right: auto; } .yhdessa { white-space: nowrap; } .logonsininenvaalea { background-color:hsl(240,100%,25%); color:rgb(29,86,247); } .logonvarjovaalea { background-color:hsl(180,53%,70%); color:rgb(138,219,219); } .zzliukusavypysty { background: linear-gradient( hsl(196,89%,40%) , hsl(196,89%,100%) ); } .zzhaiveviiva { height:1px; width:77%; margin:33px auto; background: linear-gradient( 90deg, transparent , hsl(0,0%,100%) , transparent ); } .zzlogonsininentumma { background-color:hsl(218, 53%,26%); color:rgb(31,56,100) } .zzlogonvarjotumma { background-color:hsl(208,69%,76%); color:rgb(152,197,236); } .sininen { background-color:hsl(196,89%,28%); } .keltainen { background-color:hsl(60,100%,50%); } .oranssi { background-color:hsl(26,100%,55%); } .vihree { background-color:hsl(100,100%,50%); } .turkoosi { background-color:hsl(177,100%,50%); } .violetti { background-color:hsl(288,100%,50%); } .punainen { background-color:hsl(360,100%,50%); } .valkoinen { background-color:hsl(0,100%,100%); } .musta { background-color:hsl(0,100%,0%); }