/* Lista tyyppejä: disk, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha tai none. A-linkkien oikea järjestys l,v,h,a eli a:link,a:visited,a:hover,a:active. Reunaviiva tyypit: - dotted (pilkutettu), - dashed (katkoviivoitettu), - solid (yhtenäinen), - double (kaksinkertainen ja yhtenäinen), - groove (kourumainen), - ridge (harjamainen), - inset (upotettu), - outset (korotettu) */ /*oletuksena kaikille elementeille asetetaan marginaalit ja elementti täytteet pois*/ *{margin:0; padding:0;} html{position:relative; min-width:100%; width:100%; min-height:100%; height:100%; background-color:#8ab7f3; overflow:auto;} /*letter-spacing:1pt; --> kirjainten väli , white-space:pre; --> tekstissä annettu välilyönti pitää näkyä myös näytössä , font-family: "Courier New", monospace; --> tämä kirjaisinlaji yhdessä white-space-asetuksen kanssa mahdollistaa taulukkomaisen asettelun ilman taulukko elementtien käyttöä, word-spacing:1pt; --> sanojen välisen tilan määritys, line-height: 1.5; --> rivin korkeuden määritys font-variant:small-caps; --> kapiteeli asetus, eli uppercase teksti pienessä koossa, font-stretch:wider; --> fontin leventäminen*/ body{min-width:100%; width:100%; min-height:100%; height:100%; font-style:normal; font-family:Arial,Georgia,Rekha,"Nimbus Roman"; font-size:1em; letter-spacing:0.8pt; word-spacing:1.5pt; color:black;} /*oletuksena poistetaan jokaisen linkkielementin marginaalit ja sisennykset*/ a{border:none;} /*linkki perusvalmiudessa ei omaa alleviivausta*/ a:link{text-decoration:none; color:black; border:none;} /*linkki aktivoinnin jälkeen ei omaa alleviivausta*/ a:visited{text-decoration:none; color:black; border:none;} /*hiiren osoittimen ollessa linkin päällä eli linkin elementin alueella --> linkki omaa alleviivauksen, ja hiiren tavanomainen osoitin muuttuu käsimuotoon*/ a:hover{text-decoration:underline; color:white; border:none; cursor:pointer;} /*linkki aktivoituna ei omaa alleviivausta*/ a:active{text-decoration:underline; color:black; border:none;} /*pyöristää kohteen vasemman ylänurkan*/ .pyortl{-moz-border-radius-topleft:15px; -webkit-border-top-left-radius:15px; border-top-left-radius:15px;} /*pyöristää kohteen oikean ylänurkan*/ .pyortr{-moz-border-radius-topright:15px; -webkit-border-top-right-radius:15px; border-top-right-radius:15px;} /*pyöristää kohteen vasemman alanurkan*/ .pyorbl{-moz-border-radius-bottomleft:15px; -webkit-border-bottom-left-radius:15px; border-bottom-left-radius:15px;} /*pyöristää kohteen oikean alanurkan*/ .pyorbr{-moz-border-radius-bottomright:15px; -webkit-border-bottom-right-radius:15px; border-bottom-right-radius:15px;} /*pyöristää kohteen kaikki nurkat*/ .pyorall{-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;} /*varjostaa kohteen tekstin, kun taas .boxshw varjostaa kohteen elementin*/ .txtshw{text-shadow:1px 1px 3px #EEE;} /*Yllä text-shadow lisää tekstille esim. #EEE värisen teksivarjon joka on tekstistä kaksi pikseliä oikealla, kaksi alaspäin ja hajoaa neljän pikselin alueelle. Alla boxshw toimii samalla periaatteella varjostamaan kokonaisia elementtejä*/ .boxshw{-moz-box-shadow:10px 7px 5px #929292; -webkit-box-shadow:10px 7px 5px #929292; box-shadow:10px 7px 5px #929292;} #kehys{position:relative; top:1%; left:11%; min-width:82em; width:82em; min-height:45em; height:45em; border:5px #6d6d6d double;} /*sisus elementin yllä olevan yläpalkin asetukset*/ #ylap{position:absolute; left:0; top:0; z-index:1; min-width:100%; width:100%; max-width:100%; min-height:14%; height:14%; max-height:14%; padding:0.5%; font-size:150%; font-weight:bold; text-align:center; overflow:auto; color:#5f5f5f;} #ylap p{margin:0.5%; font-size:80%;} /*sisus elementin asetukset, johon tulee sivun kaikki ns. pääinformaatio*/ #sisus{position:absolute; left:0; top:14%; z-index:1; min-width:75%; width:75%; max-width:75%; min-height:72.5%; height:72.5%; max-height:72.5%;} /*vaakakuva elementin asetukset*/ .vaaka{float:left; min-width:100%; width:100%; max-width:100%; min-height:19%; height:19%; max-height:19%;} /*pystykuva elementin asetukset*/ .pysty{float:left; min-width:12%; width:12%; max-width:12%; min-height:100%; height:100%; max-height:100%;} .keskus{float:left; margin-top:0.5%; min-width:88%; width:88%; max-width:88%; min-height:99%; height:99%; max-height:99%;} .nav{float:left; list-style-type:none; min-width:100%; width:100%; max-width:100%; height:auto; text-align:center; overflow-x:auto; overflow-y:hidden;} .navl{-moz-border-radius-topleft:15px; -webkit-border-top-left-radius:15px; border-top-left-radius:15px; -moz-border-radius-topright:15px; -webkit-border-top-right-radius:15px; border-top-right-radius:15px;} .nav li{float:left; font-size:88%; padding:1%; padding-top:0.5%; padding-bottom:0.5%; border-top:2px #6d6d6d solid;} .nav li:hover{color:white; cursor:pointer;} .val{background-color:#d9d9d9; -moz-box-shadow:10px 7px 5px #929292; -webkit-box-shadow:10px 7px 5px #929292; box-shadow:10px 7px 5px #929292;} .palkki{float:left; margin:0; padding:0; min-height:4%; height:4%; max-height:4%; min-width:99.9%; width:99.9%; max-width:99.9%; background-color:#d9d9d9;} #inform{float:left; padding-left:2%; padding-right:2%; line-height:132%; min-height:87%; height:87%; max-height:87%; min-width:96%; width:96%; max-width:96%; background-color:#d9d9d9; overflow-y:scroll; overflow-x:hidden; font-size:110%; color:#5f5f5f;} #inform span{display:block; margin-top:2%;} .infjyva{display:none; overflow:hidden;} /*karttaelementin avaustagin asetukset*/ .avaa{font-size:75%; text-align:center; border-bottom:1px #6d6d6d solid;} .avaa a{color:black;} /*ajankohtaista elementin asetukset*/ #realtime{position:absolute; right:1%; top:14%; z-index:0; padding:1%; min-width:23%; width:23%; max-width:23%; min-height:13%; height:auto; max-height:24%; text-align:center; border:1px #6d6d6d solid; border-left:none;} #realtime label{border-bottom:3px #6d6d6d double; overflow:auto;} #realtime ul{list-style-type:none; margin-top:4%; margin-bottom:2%; padding:2%; font-size:88%; height:auto; max-height:50%; overflow-y:auto; overflow-x:hidden;} #realtime li{padding:2%; border-bottom:1px #6d6d6d dotted;} /*teknologiauutisten elementin asetukset HUOM! rss-uutisluenta osoitteille http://www.tietoviikko.fi/rss.xml , http://www.tietokone.fi/feed/rss/uutiset , http://www.tekniikkatalous.fi/rss.xml*/ #news{position:absolute; right:1%; top:41%; z-index:0; padding:1%; min-width:23%; width:23%; max-width:23%; height:auto; max-height:23%; text-align:center; border:1px #6d6d6d solid; border-left:none; overflow:auto;} #news label{border-bottom:3px #6d6d6d double;} #news ul{list-style-type:none; margin-top:4%; padding:2%; font-size:88%; height:auto; max-height:50%; overflow-y:auto; overflow-x:hidden;} #news li{padding:2%; border-bottom:1px #6d6d6d dotted;} /*tämän kautta poistetaan kelluvien elementtien jatkuvuus eli niiden ns. jälkivaikutus niitä seuraaviin elementteihin*/ .reset{clear:both; max-width:0; max-height:0;} /*sisus elementin alla olevan alapalkin asetukset*/ #alap{min-width:100%; width:100%; height:10%; max-height:10%;} /*karttaelementin sijoitus kehys ja kohta*/ .sijoitus{position:absolute; right:1%; top:29%; z-index:3; visibility:hidden; padding:1%; padding-top:0; min-width:30%; width:30%; max-width:30%; min-height:30%; height:30%; max-height:30%; background-color:#d9d9d9; border:2px #6d6d6d solid; font-size:69%; color:black;} /*karttaelementin sulkemistagi ja itse karttalementti #kartta*/ .sijoitus .sulje{margin-right:1%;} .sijoitus #kartta{min-width:100%; width:100%; max-width:100%; min-height:98%; height:98%; max-height:98%;} /*karttaelementin puhekuplan määritykset*/ .sijoitus #kartta p{background-color:#d9d9d9; margin:0; padding:2%; min-width:95%; width:95%; max-width:95%; min-height:35%; height:35%; max-height:35%; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;} /*tällä hetkellä html-elementin käytössä oleva taustavärin liukuväritys asetukset eri selaimille*/ .liukuvari { /*Safari 4+,Chrome 1-9*/ background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#e0e0e0),to(#88c4ff)); /*Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image:-webkit-linear-gradient(top,#e0e0e0,#88c4ff); /*Firefox 3.6+*/ background-image:-moz-linear-gradient(top,#e0e0e0,#88c4ff); /*IE 10+*/ background-image:-ms-linear-gradient(top,#e0e0e0,#88c4ff); /*Opera 11.10+*/ background-image:-o-linear-gradient(top,#e0e0e0,#88c4ff); } /*oikean alanurkan copyright-elementti*/ .oikeus{position:absolute; bottom:0; right:1%; z-index:0; font-size:70%;}