/* Cascading Style Sheet fot Klatrefører for Kårstø. */ /* Alle sidene skal ha svart bakgrunn, */ /* og en sentrert boklignende design med fast bredde. */ /* En del av deklarasjonene her har ingen synlig funksjon, */ /* men er tatt med for at CSS-koden skal valideres mest mulig riktig. */ html { overflow: auto; } body { background: black url(grafikk/bakgrunn.gif) no-repeat 50% 8px; color: gray; } body.index { background: black url(bilder/forside.jpg) no-repeat 50% 8px; color: gray; } body.forer1 .vegg1 .veggmeny { border: 2px solid black; padding: 0px; } body.forer2 .vegg2 .veggmeny { border: 2px solid black; padding: 0px; } body.forer3 .vegg3 .veggmeny { border: 2px solid black; padding: 0px; } body.forer4 .vegg4 .veggmeny { border: 2px solid black; padding: 0px; } body.forer5 .vegg5 .veggmeny { border: 2px solid black; padding: 0px; } body.forer6 .vegg6 .veggmeny { border: 2px solid black; padding: 0px; } body.forer7 .vegg7 .veggmeny { border: 2px solid black; padding: 0px; } body.forer8 .vegg8 .veggmeny { border: 2px solid black; padding: 0px; } /* Her defineres bredden på sidene */ /* Bredden er tilpasset direkte utskrift fra nettleseren. (ie6 = 640 px) */ #layout-sidebredde { width: 640px; height: 940px; margin: 0 auto 0 auto; background: white; color: gray; } /* Her defineres det som kun gjelder forsiden */ #forside { width: 640px; height: 940px; margin: 0 auto 0 auto; } #forside-overskrift { position: absolute; top: 120px; margin: 0 auto 0 auto; width: 640px; text-align: center; } #forside-hkl-link { position: absolute; top: 80px; margin: 0 auto 0 auto; width: 640px; text-align: center; } #forside-videre-link { position: absolute; top: 410px; margin: 0 auto 0 auto; width: 640px; text-align: center; } /* Her deklarers detaljer som gjelder (nesten) alle sider. */ /* Her defineres f.eks. plasseringen av topplogoen. */ /* Og plassering av menyene under. */ /* Img-taggen må være uten ramme for å unngå kluss med veggmenyen. */ #logo { position: absolute; top: 16px; } #meny { position: absolute; top: 121px; } #veggmeny-bilde { position: absolute; top: 46px; } #veggmeny-bildekart { position: absolute; top: 47px; } #veggmeny-print { position: absolute; top: 46px; } #menytabell { width: 640px; } #allesider-tekst { width: 600px; padding: 20px 20px 0 20px; } @media print { #veggmeny-bildekart { display: none; } } img { border: 0px solid; display: block; } .rute { font-style: italic; } .tekst { background: white none; color: black; font: normal normal 12px Arial, sans-serif; padding: 0 0 14px 0; } .ingress { background: white none; color: black; font: normal bold 14px Arial, sans-serif; padding: 0 0 16px 0; } a { font: normal bold 12px Arial, sans-serif; } a.meny { background: #666666 none; color: #dddddd; font: normal bold 10px Arial, sans-serif; text-decoration: none; padding: 3px 0 3px 0; } td.menycelle { background: #666666 none; color: gray; } td.menycelle a.meny { display: block; text-align: center; width: 100%; } td.menycelle a.meny:hover { background: #999999 none; color: white; } @media print { td.menycelle a.meny { display: none; } } @media print { td.menycelle { padding: 3px 0 3px 0; } } a.veggmeny { display: block; border: 0px solid #aaaaaa; padding: 2px; height: 68px; } a.veggmeny:hover { display: block; border: 2px solid black; padding: 0px; height: 68px; } /* Her deklarers detaljer som gjelder spesielt forsiden Infoside. */ /* Infosiden har et klikkbart bilde i to seksjoner. */ /* Egenskapen Hover er brukt i stedet for Javascript. */ /* Bildene av de ulike veggene er egentlig helt i bakgrunnen, */ /* den klikkbare rammen er rundt et usynlig bilde som er lagt over. */ #infoside-bilde1 { position: absolute; top: 46px; } #infoside-bildekart1 { position: absolute; top: 76px; } #infoside-meny { position: absolute; top: 296px; } #infoside-bilde2 { position: absolute; top: 316px; } #infoside-bildekart2 { position: absolute; top: 344px; } #infoside-tekst { position: absolute; top: 476px; width: 560px; padding: 0px 35px 0 45px; } a.infoside-ramme1 { display: block; border: 0px solid; } a.infoside-ramme1:hover { display: block; border: 2px solid red; } a.infoside-ramme2:link { display: block; border: 0px solid; } a.infoside-ramme2:hover { display: block; border: 2px solid red; } @media print { #infoside-bildekart1 { display: none; } } @media print { #infoside-bildekart2 { display: none; } } /* Her deklarers detaljer som gjelder spesielt for selve førersidene. */ /* Førersidene har et stort bilde med 2 kolonner under. */ /* Og en liten tekst angående den aktuelle veggen helt nederst. */ /* Cellebreddene i kolonnene er definert i koldef.php. */ #forer-kolonne1 { height: 360px; float: left; padding: 0 17px 0 0; } #forer-kolonne2 { height: 360px;} #forer-vegginfo { background: white none; color: red; width: 610px; padding: 0px 08px 0 22px; font: normal normal 10px Arial, sans-serif; } td { font: normal normal 10px Arial, sans-serif; } td.rutenr { background: #999999 none; color: black; font-size: 10px; font-weight: bold; text-align: right; } td.rutenavn { background: #cccccc none; color: black; font-size: 10px; font-weight: bold; } td.rutegrad { background: #cccccc none; color: black; font-size: 10px; } td.ruteinfo { background: white none; color: black; font-size: 9px; } /* Her deklarers detaljer som gjelder for sidene Mer Info, Adkomst og Om føreren. */ a.linker { background: white none; color: blue; font: normal normal 12px Arial, sans-serif; padding: 0 0 14px 0; } #valideringslogoer { position: absolute; top: 760px; } #map { border: solid black 1px; } ul { font: normal normal 12px Arial, sans-serif; line-height: 15px; } /* Her deklarers detaljer som gjelder spesielt for siden Alle ruter. */ /* Førersidene har et stort bilde med 2 kolonner under. */ /* Og en liten tekst angående den aktuelle veggen helt nederst. */ td.alle-vegg { background: #bbbbbb none; color: black; font-size: 10px; font-weight: bold; text-align: center; } td.alle-topp { background: white none; color: black; font-size: 9px; font-weight: bold; text-align: center; padding: 0 2px 0 2px; } td.alle-numr { background: white none; color: black; font-size: 9px; font-weight: normal; text-align: right; padding: 0 5px 0 2px ; } td.alle-navn { background: white none; color: black; font-size: 9px; font-weight: bold; text-align: left; padding: 0 2px 0 2px; } td.alle-pros { background: white none; color: black; font-size: 9px; font-weight: normal; text-align: left; padding: 0 2px 0 2px; } td.alle-grad { background: white none; color: black; font-size: 9px; font-weight: normal; text-align: center; padding: 0 2px 0 2px ; } td.bestigere { background: white none; color: gray; font-size: 9px; font-weight: normal; text-align: left; padding: 0 0 2px 10px ;} #alleruter-kolonne1 { position: relative; top: 12px; float: left; padding: 0 17px 0 0; } #alleruter-kolonne2 { position: relative; top: 12px; } /* Her deklarers detaljer som gjelder spesielt for Billedgalleriet. */ .billedgalleri { border: solid black 1px; margin: 2px; } .sentrer-bilde-vertikalt { height: 800px; width: 640px; } .sentrer-bilde-horisontalt { display: block; margin-left: auto; margin-right: auto; } .billedtekst-venstre { background: white none; color: gray; font: normal normal 9px Arial, sans-serif; text-align: right; vertical-align: top; padding: 3px 2px 0 2px; } .billedtekst-hoyre { background: white none; color: gray; font: normal normal 9px Arial, sans-serif; text-align: left; vertical-align: top; padding: 3px 2px 0 2px; }