/*HER SKRIVES CSS-KODE! (ikke HTML) */
/*STILER SOM IKKE PASSER INN I DE EKSTERNE STILARKENE*/
:root {
--url_indikator: url("/audiografikk/_ressurser/ikoner/indikator.svg");
--url_innstillinger: url("/audiografikk/_ressurser/ikoner/innstillinger.svg");
--url_begrepsforklaringer_1: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/begrepsforklaringer_1.svg");
--url_begrepsforklaringer_2: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/begrepsforklaringer_2.svg");
--url_begrepsforklaringer_2_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/begrepsforklaringer_2_aktiv.svg");
--url_grammalysator_1: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/grammalysator_1.svg");
--url_grammalysator_2: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/grammalysator_2.svg");
--url_grammalysator_2_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/grammalysator_2_aktiv.svg");
--url_innholdsfortegnelse_1: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/innholdsfortegnelse_1.svg");
--url_innholdsfortegnelse_2: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/innholdsfortegnelse_2.svg");
--url_innholdsfortegnelse_2_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/hurtigsider/innholdsfortegnelse_2_aktiv.svg");
--url_lesemodus_1: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/lesemodus_1.svg");
--url_lesemodus_1_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/lesemodus_1_aktiv.svg");
--url_lesemodus_2: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/lesemodus_2.svg");
--url_lesemodus_2_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/lesemodus_2_aktiv.svg");
--url_menyer_fryst_1: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/menyer_fryst_1.svg");
--url_menyer_fryst_1_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/menyer_fryst_1_aktiv.svg");
--url_menyer_fryst_2: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/menyer_fryst_2.svg");
--url_menyer_fryst_2_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/menyer_fryst_2_aktiv.svg");
--url_sterke_farger_1: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/sterke_farger_1.svg");
--url_sterke_farger_1_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/sterke_farger_1_aktiv.svg");
--url_sterke_farger_2: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/sterke_farger_2.svg");
--url_sterke_farger_2_aktiv: url("/audiografikk/_ressurser/ikoner/knappesett/innstillinger/sterke_farger_2_aktiv.svg");
--url_meny: url("/audiografikk/_ressurser/ikoner/navigasjon/meny.svg");
--url_meny_aktiv: url("/audiografikk/_ressurser/ikoner/navigasjon/meny_aktiv.svg");
--url_meny_banner: url("/audiografikk/_ressurser/ikoner/navigasjon/meny_banner.svg");
--url_meny_banner_aktiv: url("/audiografikk/_ressurser/ikoner/navigasjon/meny_banner_aktiv.svg");
--url_seksjon_forrige: url("/audiografikk/_ressurser/ikoner/navigasjon/seksjon_forrige.svg");
--url_seksjon_forrige_aktiv: url("/audiografikk/_ressurser/ikoner/navigasjon/seksjon_forrige_aktiv.svg");
--url_seksjon_neste: url("/audiografikk/_ressurser/ikoner/navigasjon/seksjon_neste.svg");
--url_seksjon_neste_aktiv: url("/audiografikk/_ressurser/ikoner/navigasjon/seksjon_neste_aktiv.svg");
--url_start: url("/audiografikk/_ressurser/ikoner/navigasjon/start.svg");
--url_start_svev: url("/audiografikk/_ressurser/ikoner/navigasjon/start_svev.svg");
--url_ut_av_ramme: url("/audiografikk/_ressurser/ikoner/navigasjon/ut_av_ramme.svg");
--url_ut_av_ramme_aktiv: url("/audiografikk/_ressurser/ikoner/navigasjon/ut_av_ramme_aktiv.svg");
--url_utlenke: url("/audiografikk/_ressurser/ikoner/navigasjon/utlenke.svg");
--url_utlenke_aktiv: url("/audiografikk/_ressurser/ikoner/navigasjon/utlenke_aktiv.svg");
--url_vis_undermeny: url("/audiografikk/_ressurser/ikoner/navigasjon/vis_undermeny.svg");
--url_kart: url("/audiografikk/_ressurser/ikoner/pyntebilder/kart.svg");
--url_leser: url("/audiografikk/_ressurser/ikoner/pyntebilder/leser.svg");
--url_penn: url("/audiografikk/_ressurser/ikoner/pyntebilder/penn.svg");
--url_tempel: url("/audiografikk/_ressurser/ikoner/pyntebilder/tempel.svg");
}
@font-face {
font-family: "Tulaktas Standard Rett Enkel";
font-weight: normal;
src: url("/audiografikk/tulaktisk/standardskrifter/Tulaktas Standard Rett/Tulaktas Standard Rett Enkel.otf");
}
@font-face {
font-family: "Tulaktas Standard Rett Kontur";
font-weight: normal;
src: url("/audiografikk/tulaktisk/standardskrifter/Tulaktas Standard Rett/Tulaktas Standard Rett Kontur.otf");
}
@font-face {
font-family: "Tulaktas Standard Rund Enkel";
font-weight: normal;
src: url("/audiografikk/tulaktisk/standardskrifter/Tulaktas Standard Rund/Tulaktas Standard Rund Enkel.otf");
}
@font-face {
font-family: "Tulaktas Standard Rund Kontur";
font-weight: normal;
src: url("/audiografikk/tulaktisk/standardskrifter/Tulaktas Standard Rund/Tulaktas Standard Rund Kontur.otf");
}
@font-face {
font-family: "Krovas Angansan Ekteba";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Angansan/Krovas Angansan Ekteba/Krovas Angansan Ekteba Fet.otf");
}
@font-face {
font-family: "Krovas Angansan Ekteba";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Angansan/Krovas Angansan Ekteba/Krovas Angansan Ekteba Vanlig.otf");
}
@font-face {
font-family: "Krovas Angansan Possa";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Angansan/Krovas Angansan Possa/Krovas Angansan Possa Fet.otf");
}
@font-face {
font-family: "Krovas Angansan Possa";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Angansan/Krovas Angansan Possa/Krovas Angansan Possa Vanlig.otf");
}
@font-face {
font-family: "Krovas Endelan Ekteba";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Endelan/Krovas Endelan Ekteba/Krovas Endelan Ekteba Fet.otf");
}
@font-face {
font-family: "Krovas Endelan Ekteba";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Endelan/Krovas Endelan Ekteba/Krovas Endelan Ekteba Vanlig.otf");
}
@font-face {
font-family: "Krovas Endelan Possa";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Endelan/Krovas Endelan Possa/Krovas Endelan Possa Fet.otf");
}
@font-face {
font-family: "Krovas Endelan Possa";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Endelan/Krovas Endelan Possa/Krovas Endelan Possa Vanlig.otf");
}
@font-face {
font-family: "Krovas Tcoksan";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Tcoksan/Krovas Tcoksan Fet.otf");
}
@font-face {
font-family: "Krovas Tcoksan";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Tcoksan/Krovas Tcoksan Vanlig.otf");
}
@font-face {
font-family: "Krovas Tremman Ekteba";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Tremman/Krovas Tremman Ekteba/Krovas Tremman Ekteba Fet.otf");
}
@font-face {
font-family: "Krovas Tremman Ekteba";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Tremman/Krovas Tremman Ekteba/Krovas Tremman Ekteba Vanlig.otf");
}
@font-face {
font-family: "Krovas Tremman Possa";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Tremman/Krovas Tremman Possa/Krovas Tremman Possa Fet.otf");
}
@font-face {
font-family: "Krovas Tremman Possa";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Krovas/Krovas Tremman/Krovas Tremman Possa/Krovas Tremman Possa Vanlig.otf");
}
@font-face {
font-family: "Ndujas Angansan Ekteba";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Angansan/Ndujas Angansan Ekteba/Ndujas Angansan Ekteba Fet.otf");
}
@font-face {
font-family: "Ndujas Angansan Ekteba";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Angansan/Ndujas Angansan Ekteba/Ndujas Angansan Ekteba Vanlig.otf");
}
@font-face {
font-family: "Ndujas Angansan Possa";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Angansan/Ndujas Angansan Possa/Ndujas Angansan Possa Fet.otf");
}
@font-face {
font-family: "Ndujas Angansan Possa";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Angansan/Ndujas Angansan Possa/Ndujas Angansan Possa Vanlig.otf");
}
@font-face {
font-family: "Ndujas Endelan Ekteba";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Endelan/Ndujas Endelan Ekteba/Ndujas Endelan Ekteba Fet.otf");
}
@font-face {
font-family: "Ndujas Endelan Ekteba";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Endelan/Ndujas Endelan Ekteba/Ndujas Endelan Ekteba Vanlig.otf");
}
@font-face {
font-family: "Ndujas Endelan Possa";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Endelan/Ndujas Endelan Possa/Ndujas Endelan Possa Fet.otf");
}
@font-face {
font-family: "Ndujas Endelan Possa";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Endelan/Ndujas Endelan Possa/Ndujas Endelan Possa Vanlig.otf");
}
@font-face {
font-family: "Ndujas Tcoksan";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Tcoksan/Ndujas Tcoksan Fet.otf");
}
@font-face {
font-family: "Ndujas Tcoksan";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Tcoksan/Ndujas Tcoksan Vanlig.otf");
}
@font-face {
font-family: "Ndujas Tremman Ekteba";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Tremman/Ndujas Tremman Ekteba/Ndujas Tremman Ekteba Fet.otf");
}
@font-face {
font-family: "Ndujas Tremman Ekteba";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Tremman/Ndujas Tremman Ekteba/Ndujas Tremman Ekteba Vanlig.otf");
}
@font-face {
font-family: "Ndujas Tremman Possa";
font-weight: bold;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Tremman/Ndujas Tremman Possa/Ndujas Tremman Possa Fet.otf");
}
@font-face {
font-family: "Ndujas Tremman Possa";
font-weight: normal;
src: url("/audiografikk/tulaktisk/_FAMILIEBIBLIOTEK/Ndujas/Ndujas Tremman/Ndujas Tremman Possa/Ndujas Tremman Possa Vanlig.otf");
}
/*NULLSTILLER EN DEL STANDARDVERDIER*/
body {
margin: 0;
padding: 0;
min-height: 100%; /*Av hensyn til bunnfeltet*/
}
iframe {border: none}
ul, ol, dt, dd {
margin: 0;
padding: 0;
}
figure {margin: 0}
td {padding: 0}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-size: 1em;
}
a {color: inherit}
a:active {outline: none}
header, section, footer, aside, nav, main, article, figure {
display: block;
}
input, select, radio, textarea {
outline: none;
background: transparent;
}
input[type=checkbox], input[type=radio] {margin: 0}
fieldset {
border: none;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
:root {
/* INNHOLDET SKAL GÅ PÅ A4-FORMAT MED 2 CM MARG. PÅ NETTSTEDET ER
* LERRETET LITT SMALERE ENN A4, FORDI VI IKKE TRENGER LIKE STOR MARG
* HER SOM I EN BOK, MEN INNHOLDSBREDDEN ER DEN SAMME.
*/
--INNHOLDSBREDDE: 655px; /*Fredet, bla. fordi tabellbreddene er justert relativt til denne!*/
}
/*
---------------------------
Posisjon og størrelse
---------------------------
*/
:root {
/*Bredde av sidekomponenter (PS: Som vannrette posisjoner utledes av) */
--bredde_hovedmeny: 150px;
--bredde_lerret: 725px; /*Med gjeldende marger, blir sidebredden omtrent tilsvarende A4*/
--bredde_knappesett: 40px;
--bredde_undermeny_maks: 245px;
--bredde_inndata_maks: 185px; /*Brukes i bruddpunkt hvor siden blir skalérbar i bredden*/
/*Mellomrom*/
--mellomrom_etter_lerret: 25px;
--mellomrom_etter_knappesett: 30px;
/*Loddrette posisjoner*/
--topp_tverrligger: 80px;
--topp_banner: 110px;
--topp_konsoller: 180px;
/**Høydemål*/
--høyde_list: 7px;
--høyde_tverrligger: 12px;
--høyde_bunnfelt: 35px;
/**Tykkelser*/
--tykkelse_kantlinje_tykk: 5px;
/*Marger*/
--marg_innholdsområde_vannrett: 30px;
--marg_innholdsområde_loddrett: 1.5rem;
--marg_rammeside_loddrett: 1rem;
--marg_innrykk_standard: 30px;
--marg_skille_standard: 30px;
}
/*
---------------------------
Skrifter
---------------------------
*/
:root {
/*Skriftfamilier*/
--skriftfamilie_brødtekst: Arial;
--skriftfamilie_overskrifter: "Gentium Basic";
/*Tulaktiske skriftfamilier*/
--skriftfamilie_tulaktisk_brødtekst: "Ndujas Angansan Possa";
--skriftfamilie_tulaktisk_overskrifter: "Krovas Tcoksan";
/*Skriftstørrelser*/
--skriftstørrelse_liten: 0.85rem;
--skriftstørrelse_tulaktisk: 0.6em;
/*Linjehøyde*/
--linjehøyde_standard: 1.5;
--linjehøyde_tulaktisk: 2.8;/*Tulaktas-skriftene trenger litt større linjeavstand.*/
}
/*
---------------------------
Farger
---------------------------
*/
:root {
/*Palettfarger*/
--farge_palett_oransje: rgb(224, 137, 50);
--farge_palett_rød: rgb(150, 35, 35);
/*Bakgrunnsfarger*/
--farge_bakgrunn_blå: rgba(14, 20, 28, 0.6);
--farge_bakgrunn_utpekende: khaki;
--farge_bakgrunn_grå_gjennomsiktig: rgba(180, 180, 180, 0.5);
/*Bakgrunnsfarger: Gråtoner*/
--farge_bakgrunn_grå_1: rgb(220, 220, 220); /*Intervaller på 15*/
--farge_bakgrunn_grå_2: rgb(205, 205, 205);
--farge_bakgrunn_grå_3: rgb(190, 190, 190);
--farge_bakgrunn_grå_4: rgb(175, 175, 175);
/*Skriftfarger*/
--farge_skrift_grå: DimGray;
--farge_skrift_blå: rgb(50, 50, 80);
--farge_skrift_rød_tulaktisk: rgb(120, 25, 25); /*Litt mørkere enn rødfargen ellers, lik rød fargekoding*/
/*Fargekoding*/
--farge_koding_rød: rgb(120, 25, 25); /*Lik rødfargen for tulaktisk skrift*/
--farge_koding_blå: rgb(25, 25, 120);
--farge_koding_grønn: rgb(20, 100, 20); /*Grønnfargen må være litt mørkere for å se skarp ut*/
--farge_koding_svart: rgb(50, 50, 50); /*Omtrent samme fargesum, med tanke på lyshetsgrad*/
}
/*PS: VARIABLER MED URL FOR IKONER GENERERES MED PHP*/
:root {
/*Bakgrunner*/
--url_bakgrunn:
url("/audiografikk/_RESSURSER/bakgrunner/bakgrunnsbilde/bakgrunn.jpg");
--url_lerretstekstur:
url("/audiografikk/_RESSURSER/bakgrunner/lerretstekstur.gif");
}
/*
---------------------------
Tverrligger
---------------------------
*/
#tverrligger,
#tverrligger-midte {
top: var(--topp_tverrligger);
height: var(--høyde_tverrligger);
border-top: 1px solid black;
border-bottom: 1px solid black;
background: var(--farge_palett_rød);
}
#tverrligger {
position: absolute;
width: 100%;
}
#tverrligger-midte {
position: absolute;
z-index: 2; /*For å synes over alt annet ved rulling ved fryste menyer*/
}
/*
---------------------------
Banner og meny
---------------------------
*/
#banner, nav#hovedmeny {
position: absolute;
top: var(--topp_banner);
color: white;
text-shadow: 1px 1px black;
}
#banner {
width: 100%;
height: 40px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#banner, nav#hovedmeny > ul > li:not(:first-child) {background: var(--farge_bakgrunn_blå)}
/*Meny*/
nav#hovedmeny {
width: var(--bredde_hovedmeny);
}
nav#hovedmeny > ul {
width: 100%;
list-style-type: none;
}
nav#hovedmeny > ul > li {
width: 100%;
height: 40px;
margin-bottom: 20px;
font-family: var(--skriftfamilie_overskrifter);
font-weight: bold;
text-align: center;
letter-spacing: 1px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
nav#hovedmeny > ul > li:not(.boka_om_saktonas) {
font-variant: all-small-caps;
font-size: 1.25em;
}
nav#hovedmeny > ul > li.boka_om_saktonas {text-transform: none}
nav#hovedmeny > div.lokasjon {display: none}
/*
---------------------------
Menylenker
---------------------------
*/
nav#hovedmeny > ul > li > a {
display: block;
height: 100%;
width: 100%;
line-height: 35px; /*Lik høyden av innholdsboksen minus litt*/
text-decoration: none;
}
nav#hovedmeny > ul > li.utlenke > a {font-variant: all-small-caps}
nav#hovedmeny > ul > li.vanlig:hover > a,
nav#hovedmeny > ul > li.utlenke:hover > a {
background: var(--url_lerretstekstur); /*Legger denne bakgrunnen på selve lenka for å unngå farge-overgang.*/
color: black;
text-shadow: none;
}
/*Startside*/
nav#hovedmeny > ul > li.start > a {
background: var(--url_start) 50% 45%/24px 24px no-repeat;
font-size: 0; /*Skjuler teksten*/
}
nav#hovedmeny > ul > li.start.aktiv > a,
nav#hovedmeny > ul > li.start:hover > a {
background-image: var(--url_start_svev);
}
/*Boka om Saktonas*/
nav#hovedmeny > ul > li.boka_om_saktonas {
height: auto;
font-size: 1.2em;
}
nav#hovedmeny > ul > li.boka_om_saktonas > a {
line-height: 1.75;
padding: 10px 15px;
}
nav#hovedmeny > ul > li.boka_om_saktonas:hover > a {background: var(--farge_palett_rød)}
/*
---------------------------
Banner-elementer
---------------------------
*/
/*Tulaktas-tekst*/
#Tulaktas-tekst, #undermeny_knapp_banner {
line-height: 40px;
}
#Tulaktas-tekst {
display: inline-block;
position: relative;
left: calc(0px
+ var(--bredde_hovedmeny)
+ var(--bredde_lerret)
+ var(--mellomrom_etter_knappesett)
+ 5px
);
font-family: var(--skriftfamilie_tulaktisk_overskrifter);
font-size: 10px;
}
/*Menyknapp*/
#undermeny_knapp_banner {
position: relative;
left: calc(var(--bredde_hovedmeny) + var(--bredde_lerret) + 10px);
width: 0; /*Skal bare utvide seg med innholdet*/
padding-left: 20px;
white-space: nowrap;
cursor: pointer;
font-family: var(--skriftfamilie_overskrifter);
font-weight: bold;
display: none; /*Vises ved behov*/
}
#undermeny_knapp_banner > div.ikon {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: middle;
margin: 0px 10px 5px 5px; /*Eneste måten å fullstendig midtstille bildet loddrett.*/
background: var(--url_meny_banner) center/cover no-repeat;
}
#undermeny_knapp_banner:hover > div.ikon {
background-image: var(--url_meny_banner_aktiv);
}
/*
---------------------------
Felles
---------------------------
*/
#knappesett, nav#undermeny, #vis_undermeny {top: var(--topp_konsoller)}
/*Paneler*/
#knappesett > *, nav#undermeny > *, #vis_undermeny {
margin-bottom: 20px;
color: white;
text-shadow: 1px 1px black;
border: 1px solid black;
background: var(--farge_bakgrunn_blå);
box-shadow: 0px 0px 3px 3px var(--farge_bakgrunn_blå) inset; /*3D-effekt*/
}
/*Krumme hjørner*/
#knappesett > *, nav#undermeny > *, #vis_undermeny {
border-radius: 10px;
}
#knappesett > ul > li:first-child,
nav#undermeny > ul > li:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#knappesett > ul > li:last-child,
nav#undermeny > ul > li:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/*
---------------------------
Knappesett
---------------------------
*/
#knappesett {
position: fixed;
left: calc(0px
+ var(--bredde_hovedmeny)
+ var(--bredde_lerret)
+ var(--mellomrom_etter_lerret)
);
}
#knappesett > span.skillelinje {display: none}
#knappesett > ul {list-style-type: none}
/*Knapper*/
#knappesett > ul > li {
width: var(--bredde_knappesett); /*Bredde angis her (og ikke for et overelement) for ikke å berøres av loddrette kantlinjer.*/
height: var(--bredde_knappesett);
cursor: pointer;
background-position: center;
background-size: 24px 24px;
background-repeat: no-repeat;
}
#knappesett > ul > li.belyst {
background-image: none !important;
background: var(--farge_bakgrunn_utpekende);
border-top: 1px solid black;
border-bottom: 1px solid black;
}
/*Hurtigmeny*/
#knappesett > ul.hurtigsider > li:hover {
background-color: var(--farge_palett_rød);
}
#knappesett > ul.hurtigsider > li:not(:first-child):hover,
#knappesett > ul.hurtigsider > li:hover + li {
border-top: 1px solid black;
border-bottom: 1px solid transparent; /*For at ikke ikonet skal forskyve seg.*/
}
#knappesett > ul.hurtigsider > li > a {
display: block;
height: 100%;
}
/*Ikoner (Her tar JavaScript hånd om veksling ved svev)*/
#knappesett > ul.hurtigsider > li.innholdsfortegnelse {background-image: var(--url_innholdsfortegnelse_1)}
#knappesett > ul.hurtigsider > li.begrepsforklaringer {background-image: var(--url_begrepsforklaringer_1)}
#knappesett > ul.hurtigsider > li.grammalysator {background-image: var(--url_grammalysator_1)}
/*Ikoner til innstillinger (Variantene håndteres her av JavaScript*/
#knappesett > ul.innstillinger > li.sterke_farger {background-image: var(--url_sterke_farger_1)}
#knappesett > ul.innstillinger > li.menyer_fryst {background-image: var(--url_menyer_fryst_1)}
#knappesett > ul.innstillinger > li.lesemodus {background-image: var(--url_lesemodus_1)}
/*
---------------------------
Undermeny
---------------------------
*/
nav#undermeny {
max-width: var(--bredde_undermeny_maks);
}
nav#undermeny, #vis_undermeny {
position: absolute;
left: calc(0px
+ var(--bredde_hovedmeny)
+ var(--bredde_lerret)
+ var(--mellomrom_etter_lerret)
+ var(--bredde_knappesett)
+ var(--mellomrom_etter_knappesett)
);
}
nav#undermeny > ul {list-style-type: none}
/*Marger og linjeavstand*/
nav#undermeny > ul > li > a,
nav#undermeny > div.lokasjon, #vis_undermeny {
padding-left: 15px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
line-height: var(--linjehøyde_standard);
}
nav#undermeny span.nr {
display: inline-block;
width: 15px;
}
/*
---------------------------
Meny-elementer
---------------------------
*/
nav#undermeny > ul > li {
height: auto; /*Lar høyden styres av skrift-egenskapene.*/
font-family: var(--skriftfamilie_overskrifter);
font-weight: bold;
}
nav#undermeny > ul > li:hover{
color: black;
text-shadow: none;
background: var(--url_lerretstekstur);
}
/*Kantlinjer*/
nav#undermeny > ul > li:not(:first-child) {
border-top: 1px solid black;
}
/*Det aktive elementet*/
nav#undermeny > ul > li.aktiv,
nav#undermeny > ul > li.aktiv:hover {
color: white;
text-shadow: 1px 1px black;
background-image: none;
background: var(--farge_palett_rød);
}
/*Lenker*/
nav#undermeny > ul > li > a {
display: block;
height: 100%;
text-decoration: none;
}
/*
---------------------------
Lokasjon
---------------------------
*/
nav#undermeny > div.lokasjon {
background: var(--farge_bakgrunn_grå_2);
text-transform: uppercase;
color: black;
text-shadow: none;
font-weight: bold;
font-family: var(--skriftfamilie_overskrifter);
cursor: pointer;
}
nav#undermeny > div.lokasjon {padding-right: 15px}
/*
---------------------------
Annet
---------------------------
*/
#vis_undermeny {
display: none;
font-family: var(--skriftfamilie_overskrifter);
font-weight: bold;
cursor: pointer;
box-shadow: none;
white-space: nowrap;
}
#vis_undermeny:hover {
background: var(--farge_palett_rød);
}
#vis_undermeny > img {
margin-left: 10px;
vertical-align: -4px;
}
/*
---------------------------
Toppfelt
---------------------------
*/
/*Tittel*/
header {
height: calc(var(--topp_tverrligger) + var(--høyde_tverrligger));
line-height: 65px; /*Midtstiller teksten loddrett med en liten forskyvning nedover.*/
font-family: var(--skriftfamilie_overskrifter);
font-weight: bold;
text-align: center;
padding: var(--høyde_list) 0 var(--høyde_tverrligger);
}
header > a.tittel {
display: block;
height: 100%;
padding-top: 8px; /*For å senke teksten litt*/
text-decoration: none;
font-size: 40px;
text-shadow: 2px 2px 2px DarkGray;
}
header > a:hover {
color: var(--farge_palett_rød);
text-shadow: 1px 1px black;
}
/*Versjon*/
header > a.status {
position: relative; /*Kan ikke ha lenke inni lenke, så bruker relativ posisjonering*/
top: -80px;
left: 130px;
padding: 10px;
font-size: 25px;
text-decoration: none;
}
header > a.status:hover {
font-size: 35px;
text-shadow: 1px 1px black;
}
/*
---------------------------
Bunnfelt
---------------------------
*/
footer {
display: table;
table-layout: fixed;
position: absolute;
z-index: 2; /*For å synes over nedre list*/
bottom: 0px;
background: var(--url_lerretstekstur);
left: 0 !important; /*Overstyrer posisjonen felles for midtre del*/
height: var(--høyde_bunnfelt);
}
footer > a {
display: table-cell;
vertical-align: middle;
font-size: var(--skriftstørrelse_liten);
font-variant: all-small-caps;
font-weight: bold;
text-decoration: none;
text-align: center;
}
footer > a:hover {background: var(--farge_bakgrunn_grå_3)}
footer > a:first-child {width: 40%}
footer > a:last-child {border-left: 1px solid DarkSlateGray}
/** List */
#list_bunnfelt {
position: absolute;
z-index: 2; /*For å synes over nedre list*/
bottom: 35px;
left: 0 !important; /*Overstyrer posisjonen felles for midtre del*/
}
/*
---------------------------
Overordnet
---------------------------
*/
nav#kapittelmeny_topp, nav#kapittelmeny_bunn {
margin: 2rem var(--marg_innholdsområde_vannrett) 10px;
line-height: var(--linjehøyde_standard); /*Avgjør avstanden mellom de to radene i kapittelmenyen, fordi denne avstanden skapes med en tom linje.*/
font-size: 0px; /*For å unngå mellomrom mellom under-elementer med egenskapen 'inline-block'.*/
}
nav#kapittelmeny_topp, nav#kapittelmeny_topp *,
nav#kapittelmeny_bunn, nav#kapittelmeny_bunn * {user-select: none}
nav#kapittelmeny_bunn {margin-top: 2.5rem}
/*Skillelinjer*/
nav#kapittelmeny_topp > hr, nav#kapittelmeny_bunn > hr {
width: 50%;
border: none;
border-top: 1px dashed black;
}
nav#kapittelmeny_topp > hr {margin-top: 1.5rem}
nav#kapittelmeny_bunn > hr {margin-bottom: 1.5rem}
/*
---------------------------
Nummererte seksjonslenker
---------------------------
*/
ul.kapitler {display: inline}
/*Lenker*/
ul.kapitler > li {
display: inline-block;
vertical-align: middle;
width: 30px;
line-height: 30px; /*Må ha plass til tosifrede numre*/
margin-left: 10px;
margin-right: 10px;
font-weight: bold;
font-size: 0.9rem; /*Akkurat stort nok til at tallene blir synlig fete i nettleseren*/
border: 1px solid black;
border-radius: 15px; /*Lik halve bredden/høyden (like), slik at kantlinjen blir en sirkel.*/
box-shadow: 0 0 2px 2px DarkGray inset;
}
ul.kapitler > li > a {
display: block;
text-decoration: none;
}
/*Aktive lenker*/
ul.kapitler > li:not(.aktiv):hover {
background: var(--farge_bakgrunn_grå_3);
border-width: 2px;
line-height: 28px; /*Trekker fra for økt kanttykkelse*/
}
ul.kapitler > li.aktiv {
background: var(--farge_palett_oransje);
box-shadow: none;
}
/*
---------------------------
Forrige og neste seksjon
---------------------------
*/
a.forrige_side, a.neste_side {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background-size: contain;
}
/*Forrige seksjon*/
a.forrige_side {margin-right: 15px}
a.forrige_side {background-image: var(--url_seksjon_forrige)}
a.forrige_side[href]:hover {background-image: var(--url_seksjon_forrige_aktiv)}
a.forrige_side:not([href]) {visibility: hidden}
/*Neste seksjon*/
a.neste_side {margin-left: 15px}
a.neste_side {background-image: var(--url_seksjon_neste)}
a.neste_side[href]:hover {background-image: var(--url_seksjon_neste_aktiv)}
a.neste_side:not([href]) {visibility: hidden}
/*
---------------------------
Overordnet
---------------------------
*/
/*Menylinje*/
#menylinje {
display: none;
height: calc(var(--topp_tverrligger) + var(--høyde_tverrligger));
border-left: var(--tykkelse_kantlinje_tykk) solid DarkGray; /*Samme som for lerretet.*/
border-right: var(--tykkelse_kantlinje_tykk) solid DarkGray;
padding: var(--høyde_list) var(--marg_innholdsområde_vannrett) var(--høyde_tverrligger);
background: var(--url_lerretstekstur); /*Samme som for lerretet.*/
z-index: 1; /*For å synes over relativt posisjonerte elementer*/
}
#menylinje > * {display: table-cell}
#menylinje * {vertical-align: middle}
#menylinje, #menylinje * {user-select: none}
/*
---------------------------
Visningsknapper
---------------------------
*/
#hovedmeny_knapp, #undermeny_knapp, a#utlenke {
cursor: pointer;
font-family: var(--skriftfamilie_overskrifter);
font-weight: bold;
}
#hovedmeny_knapp, a#utlenke {text-align: left}
#undermeny_knapp {text-align: right}
a#utlenke {text-decoration: none}
/*Knappetekst*/
#hovedmeny_knapp > span.tekst,
#undermeny_knapp > span.tekst,
a#utlenke > span.tekst {
display: inline-block;
min-width: 100px;
}
/*Meny-ikoner*/
#hovedmeny_knapp > div.ikon, a#utlenke > div.ikon,
#undermeny_knapp > div.ikon {
display: inline-block;
width: 32px;
height: 32px;
}
#hovedmeny_knapp > div.ikon, a#utlenke > div.ikon {margin-right: 15px}
#undermeny_knapp > div.ikon {margin-left: 15px}
/*Meny-ikoner: bilder*/
#hovedmeny_knapp > div.ikon, #undermeny_knapp > div.ikon {
background: var(--url_meny) center/cover no-repeat;
}
a#utlenke > div.ikon {
background: var(--url_utlenke) center/cover no-repeat;
}
a#utlenke:hover > div.ikon {
background: var(--url_utlenke_aktiv) center/cover no-repeat;
}
/*Innstillinger*/
#innstillings-knapp {
display: none;
cursor: pointer;
margin: 0 20px; /*Nødvendig for at ikonet skal være lett klikkbart på telefonskjerm*/
}
#innstillings-knapp > img {width: 32px}
/*
---------------------------
Knappesett
---------------------------
*/
#knappesett_2 {cursor: default} /*Ikke tekstmarkør når pekeren befinner seg mellom knappene (som er 'inline'-elementer).*/
#knappesett_2 > span.skillelinje {margin: 0 5px}
#knappesett_2 > ul.hurtigsider, #knappesett_2 > ul.innstillinger {
list-style-type: none;
display: inline;
}
/*Knapper*/
#knappesett_2 > ul > li {
display: inline-block;
width: 40px;
height: 40px;
cursor: pointer;
background-position: center;
background-size: 24px 24px;
background-repeat: no-repeat;
}
#knappesett_2 > ul > li > a {
display: block;
height: 100%;
}
#knappesett_2 > ul > li.belyst {border: 1px dashed black}
/*Ikoner til hurtigsider (Benytter kun CSS til å forandre disse ikonene)*/
#knappesett_2 > ul.hurtigsider > li.innholdsfortegnelse {background-image: var(--url_innholdsfortegnelse_2)}
#knappesett_2 > ul.hurtigsider > li.begrepsforklaringer {background-image: var(--url_begrepsforklaringer_2)}
#knappesett_2 > ul.hurtigsider > li.grammalysator {background-image: var(--url_grammalysator_2)}
#knappesett_2 > ul.hurtigsider > li.innholdsfortegnelse:hover {background-image: var(--url_innholdsfortegnelse_2_aktiv)}
#knappesett_2 > ul.hurtigsider > li.begrepsforklaringer:hover {background-image: var(--url_begrepsforklaringer_2_aktiv)}
#knappesett_2 > ul.hurtigsider > li.grammalysator:hover {background-image: var(--url_grammalysator_2_aktiv)}
/*Ikoner til innstillinger (Variantene håndteres her av JavaScript*/
#knappesett_2 > ul.innstillinger > li.sterke_farger {background-image: var(--url_sterke_farger_2)}
#knappesett_2 > ul.innstillinger > li.menyer_fryst {background-image: var(--url_menyer_fryst_2)}
#knappesett_2 > ul.innstillinger > li.lesemodus {background-image: var(--url_lesemodus_2)}
/*
---------------------------
Bakgrunn
---------------------------
*/
#lerret {
position: fixed;
height: 100%;
}
/*Lerret*/
#lerret, iframe[name=ramme_lerret] {
background: var(--url_lerretstekstur); /*Legges også på selve rammen, for å unngå flimring*/
}
#lerret, iframe[name=ramme_lerret].toppramme {
border-top: 1px solid black;
border-bottom: 1px solid black;
outline: 2px solid black;
}
#lerret {
box-shadow: 0px 0px 5px 5px rgb(14, 20, 28);
border-left: var(--tykkelse_kantlinje_tykk) solid var(--farge_bakgrunn_grå_4); /*Samme som de mørke beltene*/
border-right: var(--tykkelse_kantlinje_tykk) solid var(--farge_bakgrunn_grå_4);
}
/*Skygge*/
#tåketeppe {
position: fixed;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
display: none;
}
/*Lister*/
div.list {
height: var(--høyde_list);
background: var(--farge_palett_oransje);
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#list_oppe, #list_nede {
position: fixed;
z-index: 2; /*For å synes over rammen og fiksert menylinje*/
}
#list_oppe {
border-top: none;
}
#list_nede {
bottom: 0;
border-bottom: none;
}
/*
---------------------------
Innhold
---------------------------
*/
/*Dette elementet er helt nødvendig. Vi kan ikke bruke 'body' til dette, fordi sistnevnte ikke kan overlappe andre elementer.*/
#visning {
position: absolute;
padding-bottom: calc(25px + var(--høyde_bunnfelt) + var(--høyde_list)); /*Gjør plass til nedre list og sluttfelt, som overlapper - pluss litt ekstra tomrom.*/
text-align: center;
min-height: 100%; /*Av hensyn til bunnfeltet*/
}
/**Innholdskjerne*/
#visning > main, html.ramme_lerret > body {
line-height: var(--linjehøyde_standard);
text-align: left;
}
#visning > main {
margin-left: var(--marg_innholdsområde_vannrett);
margin-right: var(--marg_innholdsområde_vannrett);
margin-top: var(--marg_innholdsområde_loddrett);
margin-bottom: var(--marg_innholdsområde_loddrett);
border-left: var(--tykkelse_kantlinje_tykk) solid transparent; /*Dekker bredden av kantlinjene til lerretet i bakgrunnen.*/
border-right: var(--tykkelse_kantlinje_tykk) solid transparent;
}
html.ramme_lerret > body {
margin-left: calc(5px + var(--marg_innholdsområde_vannrett));
margin-right: calc(5px + var(--marg_innholdsområde_vannrett)); /*Siden vi ikke har tykk kantlinje her*/
margin-top: var(--marg_rammeside_loddrett);
background: var(--url_lerretstekstur) fixed; /*Til det tilfelle at en slik side vises i egen fane eller vindu (dvs. ikke i rammen).*/
padding-bottom: calc(25px + var(--høyde_list)); /*Samsvarer med de vanlige sidenes visningsområde*/
}
/*
---------------------------
Skjema-elementer
---------------------------
*/
fieldset.linjebelte div.komponent {
display: inline-block;
margin-right: 20px;
}
div.undervalg {margin-left: 45px}
/*Generelt*/
textarea, input[type=submit], input[type=text], input[type=search], select, input.hovedknapp, button.hovedknapp {
position: relative;
left: -3px; /*Pga. rundede hjørner.*/
margin: 7px 0;
}
textarea, select, input[type=text], input[type=search] {
box-shadow: 0px 0px 2px 2px var(--farge_koding_svart);
border: 1px solid black;
}
textarea, input[type=text], input[type=search] {padding: 5px}
textarea, input[type=submit] {border-radius: 10px} /*Litt rundere enn andre skjema-elementer, fordi tekstområdene er større.*/
/*Nedtrekk og tekstfelt*/
select, input[type=text], input[type=search] {
height: 2em; /*Egenskapen 'line-height' virker visst ikke her.*/
font-size: var(--skriftstørrelse_liten);
border-radius: 5px;
padding-left: 3px; /*Mindre enn til høyre*/
padding-right: 5px;
}
input[type=text], input[type=search] {
padding-left: 8px;
}
select optgroup {font-weight: bold} /*Ikke 'bolder' (standard)*/
select optgroup, select option {background: rgb(250, 250, 250)}
/*Valg*/
input[type=checkbox], input[type=radio] {
height: 15px;
width: 15px;
vertical-align: middle;
cursor: pointer;
}
/*Etiketter*/
label {
font-weight: bold;
font-size: var(--skriftstørrelse_liten);
}
form label {
font-weight: normal;
}
label[for] {cursor: pointer}
/*Lirking med avstander*/
label, select, input, button {margin-right: 10px !important}
label + span.skillelinje, select + span.skillelinje,
input + span.skillelinje, button + span.skillelinje {margin-left: 10px}
/*
---------------------------
Knapper
---------------------------
*/
button, input[type=submit] {
background: var(--farge_bakgrunn_grå_3);
border-radius: 3px;
font-weight: bold;
cursor: pointer;
}
div.IPA-knapperad {
line-height: 2; /*Ved små bredder brytes knapperaden opp*/
}
div.IPA-knapperad > button {
font-size: var(--skriftstørrelse_liten);
margin-right: 0px !important;
width: 2em;
height: 2em;
}
div.IPA-knapperad > button:not(:hover) {
box-shadow: 0 0 1px 1px DimGray inset;
border-width: 1px;
}
/*Visningsknapper*/
div.lenkeknapp, span.lenkeknapp {
color: var(--farge_skrift_blå);
cursor: pointer;
text-decoration: underline;
white-space: nowrap;
}
div.lenkeknapp:hover, span.lenkeknapp:hover {color: black}
div.lenkeknapp {display: inline-block}
/*Vis-eller-skjul*/
div.lenkeknapp.vis_eller_skjul.åpen::before,
span.lenkeknapp.vis_eller_skjul.åpen::before {
content: "< ";
}
div.lenkeknapp.vis_eller_skjul:not(.åpen)::after,
span.lenkeknapp.vis_eller_skjul:not(.åpen)::after {
content: " >";
}
/*Vis-eller-skjul i brødtekst*/
p > span.lukket > span.tekst {display: none}
p > span > span.lenkeknapp.vis_eller_skjul {font-variant: all-small-caps}
p > span > span.lenkeknapp.vis_eller_skjul.åpen::before {content: "< Mindre";}
p > span > span.lenkeknapp.vis_eller_skjul:not(.åpen)::after {content: "Mer >";}
/*Hovedknapper*/
input.hovedknapp, button.hovedknapp {
height: 35px;
padding: 0 15px 0 10px;
color: white;
text-shadow: 1px 1px black;
font-weight: bold;
border: 1px solid black;
border-radius: 10px;
background: rgb(75, 75, 120); /*50% lysere enn standard-blåfargen på siden*/
box-shadow: 0px 0px 3px 3px rgba(30, 30, 30, 0.6) inset; /*For å få tredimensjonal virkning*/
outline: none; /*For å overstyre standard-innstillingen i enkelte nettlesere*/
}
input.hovedknapp:hover, button.hovedknapp:hover {
box-shadow: 0px 0px 2px 2px rgb(50, 50, 80);
border-color: white;
}
section.fast {
width: 100%;
position: fixed;
top: 0;
margin: 0 calc(-1*var(--marg_innholdsområde_vannrett));
padding: 15px var(--marg_innholdsområde_vannrett);
}
section.fast:not(.farget) {background: var(--url_lerretstekstur)}
/*
---------------------------
Linjebelter
---------------------------
*/
section.linjebelte {
margin: 1.5rem -5px; /*Legger litt indre marg utover i lerretsmargen, for at nedtrekksmenyene ikke skal klippes*/
padding: 1rem 5px;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
white-space: nowrap;
overflow-x: auto;
}
section.linjebelte:first-child {
padding-top: 0;
margin-top: 0;
border-top: none;
}
/*Komponenter*/
section.linjebelte div.komponent {
display: inline-block;
margin-right: 20px;
}
section.linjebelte a.viktig {white-space: nowrap}
section.linjebelte h2 {display: inline}
@media (max-width: 690px) { /*Hurtigrammens største bredde er ofte smalere enn lerretsinnholdet*/
section.linjebelte > a.viktig {
line-height: 2.5em;
}
}
/*
---------------------------
Fargede seksjoner
---------------------------
*/
section.farget {
margin: 2rem calc(-1*var(--marg_innholdsområde_vannrett));
padding: 15px var(--marg_innholdsområde_vannrett);
border-top: 1px solid black;
border-bottom: 1px solid black;
}
section.farget.lys {background: var(--farge_bakgrunn_grå_1)}
section.farget.mørk {background: var(--farge_bakgrunn_grå_4)}
html.ramme_lerret section.farget {
margin: 2rem calc(-1 * (5px + var(--marg_innholdsområde_vannrett)));
padding: 15px calc(5px + var(--marg_innholdsområde_vannrett)); /*Fordi vi ikke har tykk kantlinje her*/
}
/*Inndatakomponenter*/
section.farget input:not([type=button]):not([type=submit]),
section.farget select,
section.farget radio,
section.farget textarea {
background: var(--url_lerretstekstur);
}
section.farget button:not(.hovedknapp) {
background: var(--farge_bakgrunn_grå_4);
}
section.farget fieldset#alternativer:not(.lukket) {
background: var(--url_lerretstekstur);
box-shadow: 0px 0px 2px 2px var(--farge_koding_svart);
border-radius: 10px;
}
/*Overskrifter*/
section.farget > h1:first-child,
section.farget > h2:first-child {margin-top: 0.25rem !important}
/*Plansjelenker*/
section.farget.plansjelenke {white-space: nowrap; overflow-x: clip}
section.farget.plansjelenke strong {font-variant: all-small-caps}
/*Rammevisning*/
html.ramme_lerret section.farget.tittelfelt {border-top: none}
html.ramme_lerret section.farget.tittelfelt {margin-top: calc(-1*var(--marg_rammeside_loddrett))}
html.ramme_lerret section.farget.tittelfelt > h1 {margin: 0.25rem 0}
/*
---------------------------
Seksjonslister
---------------------------
*/
div.seksjonslist {
margin: 2rem calc(-1*var(--marg_innholdsområde_vannrett));
height: var(--høyde_list);
background: var(--farge_palett_oransje);
border-top: 1px solid black;
border-bottom: 1px solid black;
}
div.seksjonslist + section.farget, section.farget + div.seksjonslist {
margin-top: -2rem;
border-top: none;
}
html.ramme_lerret div.seksjonslist{
margin-left: calc(-1 * (5px + var(--marg_innholdsområde_vannrett))); /*Fordi vi ikke har tykk kantlinje her*/
margin-right: calc(-1 * (5px + var(--marg_innholdsområde_vannrett)));
}
/*
---------------------------
Alternativer
---------------------------
*/
/*Rubrikken*/
fieldset#alternativer {
border: 1px solid black;
border-radius: 10px;
box-shadow: 0 0 3px 3px var(--farge_bakgrunn_grå_2);
padding: 1.25em 20px 1.5em;
margin: 1.5rem 0;
min-width: 0; /*For å overstyre en tydeligvis uoffisiell regel i nettleseren!*/
white-space: nowrap;
overflow-x: auto;
}
fieldset#alternativer.lukket {
border: none;
box-shadow: none;
padding: 0.75em 20px;
}
fieldset#alternativer.lukket > ul {display: none}
/*Inni boka*/
h1.kapittel + fieldset#alternativer.lukket {
margin-top: -1rem;
margin-bottom: -1.75rem;
}
/*Underelementer*/
fieldset#alternativer * {
text-align: left;
font-size: var(--skriftstørrelse_liten);
}
fieldset#alternativer > div.lenkeknapp {
font-weight: bold;
font-size: var(--skriftstørrelse_liten);
}
fieldset#alternativer.lukket > div.lenkeknapp {margin-left: 20px}
fieldset#alternativer label {font-weight: normal}
/*Liste*/
fieldset#alternativer > ul {
margin-top: 1.5em;
list-style-type: none;
}
fieldset#alternativer > ul > hr {
width: 50%;
margin-right: 50%;
}
fieldset#alternativer > ul > li {margin-top: 0.75em}
/*Tulaktisk modus*/
li#tulaktisk_modus x-eksempel {
margin-top: 0.75em;
display: block;
}
li#tulaktisk_modus x-eksempel x-ortografisk {font-size: 0.8em}
li#tulaktisk_modus x-eksempel x-fonemisk {display: none}
li#tulaktisk_modus select {margin-top: 0px}
/*BÅDE TIL DET SENTRALE BILDEGALLERIET OG TIL ANDRE GALLERIER*/
#galleribilder {
overflow: hidden; /*Skaper en "block formatting context".*/
margin: 2rem -10px 2rem 0;
}
/*Lenker*/
#galleribilder > a {
display: block;
float: left;
margin: 10px;
margin-left: 0;
padding: 10px;
width: 210px;
height: 260px;
text-align: center;
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
box-shadow: 0 0 3px 3px DarkGray inset;
}
/*Bilder*/
#galleribilder > a img {
max-width: 180px;
max-height: 180px; /*OBS: I SKRIFTFAMILIE-GALLERIET MÅ DENNE VÆRE LIK BILDENES FYSISKE PIKSELSTØRRELSE!*/
}
#galleribilder > a > figcaption {
height: 20px;
margin-bottom: 20px;
}
#galleribilder > a img {display: inline}
/*Aktive lenker*/
#galleribilder > a:hover {box-shadow: 0 0 0 1px black inset; background: rgba(175, 175, 175, 0.25)}
#galleribilder > a:hover > figcaption {font-weight: bold}
section.fortegnelseskjerne {
margin-top: 2rem;
}
section.fortegnelseskjerne > h3 {
font-variant: all-small-caps;
color: var(--farge_skrift_blå);
font-size: 1rem;
margin-top: 0;
margin-bottom: -0.5rem;
}
section.fortegnelseskjerne > ul.lenkesamling {
list-style-type: none;
margin: 1.5rem 0;
overflow: clip;
break-inside: avoid-column;
}
section.fortegnelseskjerne > ul.lenkesamling > li {margin: 0.25rem 0}
/*Nummerering*/
section.fortegnelseskjerne a > span.nr {
display: inline-block;
text-align: right;
font-family: monospace; /*Av hensyn til bokstavnummereringen av figurer*/
}
section.fortegnelseskjerne a > span.nr:empty {display: none}
/*
---------------------------
Lenker
---------------------------
*/
section.fortegnelseskjerne a.opplistet {
color: var(--farge_skrift_blå);
text-decoration: underline;
white-space: nowrap;
}
section.fortegnelseskjerne a.opplistet:not([href]) {
color: brown; /*Ikke den rød palettfargen, for den variabelen endrer verdi til blå i rammeside*/
}
section.fortegnelseskjerne a.opplistet[href]::before {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
content: ""; /*Ellers vises ingenting*/
}
section.fortegnelseskjerne a.opplistet[href]:hover::before {
background: var(--url_indikator) center/contain no-repeat;
display: inline-block;
vertical-align: text-bottom;
}
/*
---------------------------
Generelt
---------------------------
*/
h1, h2, h3 {
text-align: left;
margin-top: 1.5rem;
}
h1, h2 {
margin-bottom: -0.5rem; /*Trekker etterfølgende element oppover for å skape sammenheng.*/
font-family: var(--skriftfamilie_overskrifter);
}
h1 {
font-size: 2.1rem;
}
h2 {
font-size: 1.3rem;
margin-top: 2.5rem;
}
h3 {
margin-bottom: -0.75rem; /*Trekker etterfølgende element oppover for å skape sammenheng.*/
font-variant: all-small-caps;
font-size: var(--skriftstørrelse_liten);
}
/*
---------------------------
Variasjoner
---------------------------
*/
/*Lirking med avstander*/
h1 + h2 {margin-top: 1.75rem}
h2:first-child {margin-top: 2rem}
html.ramme_lerret h2:first-child {margin-top: 1.5rem}
p + h2 {margin-top: 2rem}
x-eksempelgruppe + h3 {margin-top: 2.25rem}
div.avgrensingsvalg > h2 {margin-top: 1.5rem}
/*Dekorasjon*/
#visning > main > h3:not(.nummerert)::before {
display: inline-block;
content: ":: ";
width: 15px;
margin-left: -15px;
}
/*Kule overskrifter*/
h1.effekt_gul {
color: var(--farge_palett_oransje);
text-shadow: 1px 1px 0px black;
letter-spacing: 0.5px;
}
h1.effekt_gul sup {
color: black;
text-shadow: none;
}
/*
---------------------------
Boka om Saktonas
---------------------------
*/
/*Seksjoner*/
h1.kapittel {
margin-top: -1rem; /*Optisk riktig.*/
margin-bottom: 1.75rem;
padding-left: 10px;
padding-right: 10px;
text-align: center;
text-shadow: 2px 2px 2px DarkGray;
cursor: help;
}
h1.kapittel > span.overtittel {
font-size: 0.6em; /*Ca. et gyllent snitt mindre skriftstørrelse.*/
text-shadow: none;
}
/*Klikk og fokus*/
h2.seksjon:hover {cursor: cell}
h2.seksjon:hover, h2:target {background: var(--farge_bakgrunn_utpekende)}
/*
---------------------------
Annet
---------------------------
*/
h1.med_underlenke {
display: inline-block;
margin-top: 0;
}
h1.med_underlenke + span.skillelinje + a.viktig {
display: inline-block;
margin-top: 1rem;
}
h1.med_underlenke + span.skillelinje + a.viktig + h2 {margin-top: 1.75rem}
/*
---------------------------
Oppsett og avstander
---------------------------
*/
hr {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
table hr {
margin-top: 0.5em;
margin-bottom: 0.5em;
width: 50%;
}
hr.sidetopp {
margin-top: 1em;
margin-bottom: 1em;
}
hr.sidetopp + h1:first-of-type {margin-top: 1rem}
hr.latent {display: none} /*Brukes etter spaltet merknad, og kommer til syne når spaltene forsvinner*/
/*Spalter: Samme spalter som i ordlista.*/
.spaltet {
max-width: var(--bredde_lerret);
column-count: 2;
column-gap: calc(2*var(--marg_innholdsområde_vannrett));
column-rule: 1px dotted black;
margin: 1.5rem 0;
}
.spaltet > p:first-child {margin-top: 0}
.spaltet > p:last-child {margin-bottom: 0}
/*Avsnitt*/
p {
text-align: justify;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
p + p:not(.mellomrom) {
margin-top: -1.5em;
text-indent: var(--marg_innrykk_standard); /*Innrykket behøver ikke danne et kvadrat med linjehøyden, når linjene er forholdsvis lange.*/
}
p.innskutt, div.innskutt {
text-align: right;
margin-right: var(--marg_innrykk_standard);
}
p.spaltet, .spaltet p {text-align: left} /*Ellers blir tekstbrytingen krevende*/
#visning > main > p:first-child {margin-top: 2rem}
/*
---------------------------
Spesialiserte elementer
---------------------------
*/
strong {font-size: var(--skriftstørrelse_liten)} /*For at den fete skriften skal være litt beskjeden i forhold til overskriftene.*/
var.ord {
font-style: normal;
font-variant: all-small-caps;
}
/*Hev og senk*/
sup, sub {
font-size: 0.75rem; /*(Bare) et hakk mindre enn liten skrift forøvrig, for å passe også i f.eks. merknader.*/
line-height: 0;
font-family: var(--skriftfamilie_brødtekst);
}
strong sub {
font-weight: normal;
font-variant: all-small-caps
}
sup {font-weight: bold}
/*Tulaktas*/
.tulaktisk {
font-size: var(--skriftstørrelse_tulaktisk);
line-height: var(--linjehøyde_tulaktisk);
font-family: var(--skriftfamilie_tulaktisk_brødtekst);
}
p > span.tulaktisk {
color: var(--farge_skrift_rød_tulaktisk);
line-height: 0; /*For at ord skrevet med Tulaktas ikke skal forstyrre teksten rundt.*/
font-weight: bold;
}
/*
---------------------------
Lenker
---------------------------
*/
/*Standardlenker*/
a.standard {color: var(--farge_skrift_blå)}
a.standard[href]:hover {color: black} /*Lenker som ikke er klikkbare (relevant bla. i Begrepsforklaringene), forandres ikke.*/
/*Viktige lenker*/
a.viktig, div.lenkeknapp.viktig, span.lenkeknapp.viktig {
font-variant: all-small-caps;
font-weight: bold;
color: var(--farge_skrift_blå);
}
a.viktig[href]:hover, div.lenkeknapp.viktig:hover, span.lenkeknapp.viktig:hover {color: black}
/*JS-lenker*/
a:not([href]).JS {
cursor: pointer;
text-decoration: underline; /*Lenka virker ved hjelp av JS*/
}
a:not([href]).JS.standard:hover {
color: black;
}
/*Hevede lenker*/
a.hevet_symbol {
vertical-align: super;
padding: 0 0.2em;
line-height: 0;
font-size: 0.70em;
font-weight: bold;
text-decoration: none;
color: var(--farge_skrift_blå);
}
a.hevet_symbol:hover {
outline: 1px dotted black;
}
/*
---------------------------
Diverse
---------------------------
*/
div.formel {
margin: 1.5em 0;
text-indent: var(--marg_innrykk_standard);
}
p.sidestatus {
margin: 50px;
text-align: center;
}
p.feilmelding strong {
color: brown;
font-size: 1em;
}
p.hovedpoeng {
font-style: italic;
font-family: gentium;
font-size: 16px;
}
/*Diverse*/
dfn.oppslagbar:hover {cursor: help}
dfn.oppslagbar:hover, dfn.oppslagbar:target {background: var(--farge_bakgrunn_utpekende)}
table dfn.oppslagbar {font-style: normal}
p.merknad, span.merknad {font-size: var(--skriftstørrelse_liten)}
hr + p.merknad {margin-top: -0.5rem}
span.skillelinje {margin: 0 20px}
/*
---------------------------
Standard-rubrikker
---------------------------
*/
section.rubrikk {
border: 1px solid black;
box-shadow: 0 0 3px 3px var(--farge_bakgrunn_grå_2);
margin: 3rem -10px 1.5rem;
padding: 10px 0.75rem;
border-radius: 10px;
}
section.rubrikk.hovedpoeng {cursor: help}
section.rubrikk.hovedpoeng > p {text-align: left} /*Disse tekstene er korte*/
section.rubrikk.kapittel {margin-top: 3rem}
section.rubrikk.seksjon {margin-top: 3.75rem}
section.rubrikk + div.merknad::before {
content: "PS: ";
font-weight: bold;
}
/*Lirking med avstander*/
p + section.rubrikk {margin-top: 2.5rem} /*En halv mindre*/
p + section.rubrikk.seksjon {margin-top: 3.25rem}
section.rubrikk.hovedpoeng + p {margin-top: -0.5rem}
section.rubrikk > h4 + h1,
section.rubrikk > h4 + h2 {margin-top: -15px}
section.rubrikk.kapittel + h2 {margin-top: 0}
section.rubrikk + div.merknad {margin-top: -0.5em}
/*
---------------------------
Komponenter
---------------------------
*/
section.rubrikk > h4 {
display: inline-block;
position: relative;
top: -25px;
margin: 0;
margin-bottom: -25px;
padding: 2px 7px;
font-weight: bold;
font-variant: all-small-caps;
font-size: var(--skriftstørrelse_liten);
}
section.rubrikk > h4 + p {margin-top: -15px}
section.rubrikk > *:last-child {margin-bottom: 0}
/*Differensiering (mellom to typer rubrikker)*/
section.hovedpoeng > h4 {
border: 2px solid black;
background: var(--farge_palett_rød);
color: white;
text-shadow: 1px 1px black;
}
section.kommentar > h4 {
border: 1px solid black;
background: var(--farge_bakgrunn_grå_2);
}
section.metabeskjed > h4 {
border: 1px solid black;
background: var(--farge_palett_oransje);
}
/*Valgverdier for metarubrikker*/
section.metabeskjed > h4.kryssreferanse::before {content: "Kryssreferanse"}
section.metabeskjed > h4.inspirasjonskilde::before {content: "Inspirasjonskilde"}
section.metabeskjed > h4.begrepsbruk::before {content: "Begrepsbruk"}
section.metabeskjed > h4.fremstilling::before {content: "Fremstilling"}
/*Valgverdier for hovedpoenger*/
section.hovedpoeng > h4.definisjon::before {content: "Definisjon"}
section.hovedpoeng > h4.regel::before {content: "Regel"}
section.hovedpoeng > h4.prinsipp::before {content: "Prinsipp"}
section.hovedpoeng > h4.presentasjon::before {content: "Presentasjon"}
section.hovedpoeng > h4.faktum::before {content: "Faktum"}
/*
---------------------------
Rubrikker uten overskrift
---------------------------
*/
section.rubrikk.formativ,
section.rubrikk.lydformer {
margin-top: 2rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/*Komponenter*/
section.rubrikk.formativ > *,
section.rubrikk.lydformer > * {
display: table-cell;
}
section.rubrikk.formativ div.beskrivelse,
section.rubrikk.lydformer div.beskrivelse {
padding-left: 20px;
border-left: 2px dashed black;
vertical-align: middle;
}
/*
---------------------------
Formativ-rubrikker
---------------------------
*/
section.rubrikk.formativ {
padding-top: 20px;
padding-bottom: 20px;
}
section.rubrikk.formativ + section.rubrikk.formativ {margin-top: 2rem}
/*Komponenter*/
section.rubrikk.formativ div.presentasjon {
width: 200px;
padding-right: 20px;
}
section.rubrikk.formativ div.presentasjon > * {
padding: 8px 10px;
border-radius: 10px;
font-size: 0.85rem;
}
section.rubrikk.formativ div.betegnelse {
margin-bottom: 0.5rem;
border: 2px solid black;
background: var(--farge_palett_rød);
color: white;
text-shadow: 1px 1px black;
font-weight: bold;
}
section.rubrikk.formativ div.lydform {
border: 1px solid black;
background: var(--farge_bakgrunn_grå_3);
}
/*Oppslagsform*/
section.rubrikk.formativ.oppslagsform div.betegnelse {
background: var(--farge_bakgrunn_grå_3);
color: black;
text-shadow: none;
}
section.rubrikk.formativ.oppslagsform div.lydform {background: none}
/*
---------------------------
Lydform-rubrikker
---------------------------
*/
section.rubrikk.lydformer {
padding-top: 15px;
padding-bottom: 15px;
}
/*Komponenter*/
section.rubrikk.lydformer div.presentasjon {
padding-right: 20px;
white-space: nowrap;
vertical-align: middle;
}
section.rubrikk.lydformer div.lydform {
display: inline-block;
min-width: 40px;
padding: 8px;
border-radius: 10px;
text-align: center;
line-height: 1;
letter-spacing: 1px; /*Av hensyn til diakritiske tegn og noe svekket kontrast*/
border: 2px solid black;
background: var(--farge_palett_rød);
color: white;
text-shadow: 1px 1px black;
font-weight: bold;
}
section.rubrikk.lydformer div.presentasjon > * + * { /*Både lydformer og evt. piler*/
margin-left: 10px;
}
x-eksempel:target > x-oversettelse::first-line {background: var(--farge_bakgrunn_utpekende)}
/*
---------------------------
Som helhet
---------------------------
*/
x-eksempel {
display: block;
vertical-align: top; /*De felles linjene er de øverste.*/
}
x-eksempel > * {display: block}
x-eksempel > x-rågloss {display: none}
/*
---------------------------
Svev over eksempel
---------------------------
*/
x-eksempel:not(.statisk):hover {cursor: pointer}
x-eksempel:not(.statisk):hover > x-ortografisk {color: var(--farge_skrift_blå)}
html:not(.vis_fonetisk) x-eksempel:not(.statisk):hover > x-fonetisk {display: block}
html:not(.vis_fonetisk) x-eksempel:not(.statisk):hover > x-fonemisk {display: none}
/*Bindestreker*/
x-eksempel:not(.statisk):hover > x-ortografisk::before {
display: inline-block;
content: "- ";
position: relative;
left: -15px;
width: 15px;
margin-right: -15px;
text-align: left;
}
x-eksempel:not(.statisk):hover > x-ortografisk::after {
display: inline-block;
content: " -";
position: relative;
right: -15px;
width: 15px;
margin-left: -15px;
text-align: right;
}
/*
---------------------------
Komponenter
---------------------------
*/
/*Ortografisk skrift*/
x-eksempel x-ortografisk {
color: var(--farge_skrift_rød_tulaktisk);
font-weight: bold;
}
x-eksempel x-ortografisk.tulaktisk {
font-size: var(--skriftstørrelse_tulaktisk);
line-height: var(--linjehøyde_tulaktisk);
font-family: var(--skriftfamilie_tulaktisk_brødtekst);
}
x-eksempel x-ortografisk.latinsk {
display: none;
font-weight: bold;
}
/*Transkripsjoner og visningsgloss*/
x-eksempel x-fonetisk {
display: none;
margin: 0.25rem 0;
letter-spacing: 0.5px;
font-size: var(--skriftstørrelse_liten); /** For at eksemplet ikke skal ta større plass i bredden */
}
x-eksempel x-fonetisk strong {text-shadow: 0px 0px 0px} /*Styrker tegnene med en null-skygge, fordi fet skrift ikke later til å virke på disse tegnene.*/
html.vis_fonetisk x-eksempel x-fonetisk {display: block}
x-eksempel x-fonetisk, x-eksempel x-fonemisk {line-height: calc(var(--linjehøyde_standard) * 1rem)} /*For å unngå krymping i høyden i lydeksemplene*/
x-eksempel x-fonemisk {margin: 0.25rem 0}
x-eksempel x-fonemisk.overflate {}
x-eksempel x-fonemisk.underliggende {display: none}
x-eksempel x-gloss.språkspesifikk,
x-eksempel x-gloss.tverrspråklig {display: none}
x-eksempel x-gloss.språkspesifikk {font-family: monospace}
/*Oversettelse og forklaring*/
x-eksempel x-oversettelse {
margin-top: 0.5em;
font-style: italic;
}
x-eksempel x-oversettelse > em {
text-transform: uppercase;
}
x-eksempel x-forklaring {
margin-top: 0.5em;
font-size: var(--skriftstørrelse_liten);
}
/*Nummerering av prosodiske ord*/
x-eksempel x-ortografisk sub {
position: relative;
top: 2px;
left: 2px; /*Lager litt avstand mellom*/
color: black;
font-weight: normal;
}
x-eksempel x-oversettelse sub {
position: relative;
left: -3px; /*Litt nærmere ordet foran*/
}
h3 + x-eksempelgruppe {margin-top: 2.5rem}
hr + x-eksempelgruppe {margin-top: 2rem}
/*
-------------------
Hovedstiler
-------------------
*/
x-eksempelgruppe {
display: block;
margin-top: 1.5rem;
margin-bottom: 0.5rem; /*Fordi vi har marg under det enkelte eksempel (disse margene kollapser ikke).*/
font-size: 0; /*For å unngå mellomrom mellom datter-elementer med egenskapen 'inline-block'*/
}
x-eksempelgruppe > * {
font-size: 1rem;
}
x-eksempelgruppe > x-eksempel {
display: inline-block;
vertical-align: top;
padding-bottom: 1rem; /*Av hensyn til markering ved svev*/
}
/*
-------------------
Komponenter
-------------------
*/
/*Beskrivelse*/
x-beskrivelse {
display: block;
margin-top: 1rem;
font-size: var(--skriftstørrelse_liten);
}
x-beskrivelse > strong {
color: var(--farge_palett_rød);
text-shadow: 0px 0px black; /*Et lite knep*/
letter-spacing: 0.5px; /*Veier opp for (den ikke-kontrasterende) skyggen*/
font-weight: bold;
}
/*Oppslag*/
x-oppslag > x-tulaktisk {
font-size: var(--skriftstørrelse_tulaktisk);
line-height: var(--linjehøyde_tulaktisk);
font-family: var(--skriftfamilie_tulaktisk_brødtekst);
font-weight: bold;
}
x-oppslag > x-lydskrift {white-space: nowrap} /*For å unngå linjeskift mellom lydsymbol og skråstrek*/
x-oppslag > x-betydning {font-style: italic}
/*
---------------------------
Minimering av eksempler
---------------------------
*/
/*Knapp*/
x-eksempelgruppe > x-visningsknapp {
display: none;
width: 1.5em;
height: 1.5em;
margin-bottom: 1.5em;
font-weight: bold;
line-height: var(--linjehøyde_standard);
text-align: center;
border: 1px solid black;
border-radius: 0.75em;
color: white;
text-shadow: 1px 1px black;
background: var(--farge_palett_rød); /*Ingen fargeovergang, fordi fargen skal endres umiddelbart når knappen trykkes.*/
cursor: pointer;
}
x-eksempelgruppe.åpen > x-visningsknapp {
color: black;
text-shadow: none;
background: white;
}
/*Vises og skjules*/
html.minimér_eksempler x-eksempelgruppe:not(.åpen) > x-eksempel,
html.minimér_eksempler x-eksempelgruppe:not(.åpen) > x-beskrivelse {display: none}
html.minimér_eksempler x-eksempelgruppe > x-visningsknapp {display: block}
/*
---------------------------
Dandering
---------------------------
*/
/*
Bredder:
o) Bare bredder som går opp i hverandre, slik at oppsettet blir ryddig.
o) Breddene er faste, og endres ikke ved endring av vindusbredden.
*/
x-eksempelgruppe[bredde=HEL] > x-eksempel {
width: max-content; /*Av estetiske hensyn ved svev*/
min-width: calc(0.55 * var(--INNHOLDSBREDDE)); /*Slik at neste uansett kommer på linja under*/
max-width: calc(0.95 * var(--INNHOLDSBREDDE)); /*Litt mindre enn hele bredden, for å unngå sammenfall med figurmerknadenes spalteskille*/
}
x-eksempelgruppe[bredde=HALV] > x-eksempel {
width: calc((0.95 * var(--INNHOLDSBREDDE) - 2 * var(--marg_skille_standard)) / 2);
}
x-eksempelgruppe[bredde=FJERDEDEL] > x-eksempel {
width: calc((0.95 * var(--INNHOLDSBREDDE) - 4 * var(--marg_skille_standard)) / 4);
}
/*Avstander:
o) Må benytte noen spesielle grep, fordi margene til elementer med egenskapen 'inline-block' ikke kollapser i møte med marger på utsiden.
o) Merk at vi må ta i betraktning at visningsknappen alltid er første element i eksempel-blokken.
*/
x-eksempelgruppe[bredde=HALV] > x-eksempel:not(:nth-of-type(2n)) {margin-right: var(--marg_skille_standard)}
x-eksempelgruppe[bredde=FJERDEDEL] > x-eksempel:not(:nth-of-type(4n)) {margin-right: var(--marg_skille_standard)}
x-eksempelgruppe[bredde=HEL] > x-eksempel:nth-of-type(n+2) {margin-top: 1.5em}
x-eksempelgruppe[bredde=HALV] > x-eksempel:nth-of-type(n+3) {margin-top: 1.5em}
x-eksempelgruppe[bredde=FJERDEDEL] > x-eksempel:nth-of-type(n+5) {margin-top: 1.5em}
figure {margin: 2.5rem 0}
figure:first-child {margin-top: 2rem} /*Relevant for plansjer i rammevisning*/
figure + figure {margin-top: 3rem}
figcaption {
font-size: var(--skriftstørrelse_liten);
font-style: italic;
}
/*Vannrette skillelinjer*/
figure + hr,
div.merknad + hr, ol.merknad + hr {
width: 55%; /*Litt over midten for å unngå sammenfall med figurmerknadenes spalteskille.*/
margin-right: 45%;
}
figure + hr {margin-top: -1rem}
div.merknad + hr, ol.merknad + hr {margin-top: 1rem}
/*
---------------------------
Merknader
---------------------------
*/
div.merknad, ol.merknad {
font-size: var(--skriftstørrelse_liten);
margin-top: 1.25em;
margin-bottom: 1.5em;
}
div.merknad.spaltet, ol.merknad.spaltet {
margin-top: 1.5em; /*Litt ekstra*/
text-align: left; /*For smalt for blokkjustering*/
}
/*NB! Ikke alle merknader er inni figur-element*/
div.merknad {
text-align: justify;
}
div.merknad p {
margin: 1.25em 0;
text-indent: 0;
}
figure > div.merknad::before {
content: "Merknad: ";
font-weight: bold;
}
/*Merknadslister*/
ol.merknad {
list-style-type: none;
counter-reset: merknad;
text-align: left;
}
ol.merknad > li {
counter-increment: merknad;
position: relative; /*Av én eller annen grunn kreves dette for at forbudet mot kolonnebrekk skal virke!*/
break-inside: avoid-column;
}
ol.merknad > li:not(:last-child) {
margin-bottom: 0.75em;
}
ol.merknad > li::before {
font-weight: bold;
font-size: 0.75rem; /*Samme som for 'sup' og 'sub'*/
vertical-align: super;
content: counter(merknad, decimal) " ";
}
ol.merknad > li.sidestilt { /*Nyttig hvis veldig fotnoter, særlig i merknader til rubrikker*/
display: inline-block;
margin-right: 10px;
margin-bottom: 0;
}
/*Diverse*/
ol.merknad.halvside > li {max-width: calc(var(--INNHOLDSBREDDE) * 0.65)} /*To tredjedeler ser bedre ut enn halvparten*/
/*
---------------------------
Dekorasjon
---------------------------
*/
figure.pynt {
width: 100%;
border-top: 1px dotted black;
border-bottom: 1px dotted black;
}
figure.pynt > figcaption {
margin: -0.75rem 20px 0.5rem 0;
text-align: right;
}
/*Bilder*/
figure.pynt img {
display: block;
width: 80%;
margin: 1.75rem auto;
}
/*Konkrete tegninger*/
figure#et_sjeldent_eksemplar img {width: 60%}
figure#en_flyktende_fantasi img {width: 70%}
/*
---------------------------
Boka om Saktonas
---------------------------
*/
/*Overskrift og merknader*/
figure.bok > figcaption {
margin-bottom: 1em;
font-variant: all-small-caps;
font-style: normal;
}
figure.bok > figcaption > strong,
figure.bok > div.merknad::before {
color: var(--farge_palett_rød);
text-shadow: 0px 0px black; /*Et lite knep*/
letter-spacing: 0.5px; /*Veier opp for (den ikke-kontrasterende) skyggen*/
}
/*Kjerne:
o) Viktig å regne med denne i element-angivelser videre.
o) Figurene i boka skal ikke forekomme uten kjerne-element.
*/
figure.bok > main {
border-top: 2px solid var(--farge_palett_rød);
border-bottom: 2px solid var(--farge_palett_rød);
}
/*Tabeller*/
figure.bok table {
margin-top: 1.75rem;
margin-bottom: 2rem;
}
figure.bok table + table:not(.sidestilt) {margin-top: 2.5rem}
/*Tegninger*/
figure.bok img {
display: block;
margin: 1.5rem auto 1.75rem 15px;
}
figure.bok.plansje img {
margin-left: auto; /*Plansjetegningene bør midtstilles*/
margin-right: auto;
}
/*Svev og forankring*/
h1.kapittel ~ figure.bok > figcaption:hover {cursor: cell}
h1.kapittel ~ figure.bok > figcaption:hover, figure.bok > figcaption:target {background: var(--farge_bakgrunn_utpekende)}
h1.kapittel ~ figure.bok > figcaption:hover > strong, figure.bok > figcaption:target > strong {color: black}
/*
---------------------------
Generelt
---------------------------
*/
table {
border-collapse: collapse;
border-color: black;
margin-top: 2rem; /*Litt ekstra ved tabeller, på grunn av de rette kantene.*/
break-inside: avoid-column;
font-size: var(--skriftstørrelse_liten);
width: max-content; /*For å beholde en fast bredde også ved mindre sidebredde*/
max-width: var(--INNHOLDSBREDDE);
}
table + table {margin-top: 2.5rem}
/**Sidestilling*/
table.sidestilt {
display: inline-table;
margin-right: var(--marg_skille_standard);
}
table.sidestilt:not(:first-of-type) {margin-top: 0}
table.sidestilt.jevnbrede_2 {width: calc(-5px + (-1 * var(--marg_skille_standard) + var(--INNHOLDSBREDDE)) / 2)}
table.sidestilt.jevnbrede_3 {width: calc(-5px + (-2 * var(--marg_skille_standard) + var(--INNHOLDSBREDDE)) / 3)}
table.sidestilt.jevnbrede_2:nth-of-type(2n) {margin-right: 0}
table.sidestilt.jevnbrede_3:nth-of-type(3n) {margin-right: 0}
/*Seksjonering*/
tbody > tr.buffer > td {
height: 2em;
background: none;
border-left: hidden;
border-right: hidden;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
/*
---------------------------
Celler
---------------------------
*/
td, th {
padding: 8px 10px;
vertical-align: top;
}
td:empty {background: var(--farge_bakgrunn_grå_gjennomsiktig)}
td b + sup {font-weight: normal}
table.midtstilt_vannrett thead th, table.midtstilt_vannrett td {text-align: center} /*Ikke radoverskrifter! */
table.midtstilt_loddrett tbody th, table.midtstilt_loddrett td {vertical-align: middle} /*Ikke kolonneoverskrifter! */
/*
---------------------------
Overskrifter
---------------------------
*/
th {
background: var(--farge_palett_rød);
color: white;
text-shadow: 1px 1px black; /*Øker lesbarheten*/
font-variant: all-small-caps;
font-weight: bold;
text-align: left;
vertical-align: middle;
}
tbody th {
padding-right: 13px; /*Bitte litt ekstra margin*/
white-space: nowrap; /*Må i stedet legge inn manuelle linjeskift*/
}
th:empty {visibility: hidden}
th:empty:last-child {border-right: hidden}
thead tr:first-child > th:empty, tr.buffer + tr > th:empty {border-top: hidden}
tbody tr:last-child > th:empty {border-bottom: hidden}
/*Spesielle elementer*/
th.hjørneoverskrift {
background: none;
color: black;
text-shadow: none;
text-align: left !important;
}
th.midtkanal {
border: 1px solid black;
border-top-color: transparent;
}
/*
---------------------------
Celle-farger
---------------------------
*/
/*Rifling og fremheving*/
th.fremhevet {
background: var(--farge_bakgrunn_grå_2);
color: black;
text-shadow: none;
border: 1px solid black;
}
table.riflet > tbody > tr:not(.buffer):nth-child(even) {
background: var(--farge_bakgrunn_grå_gjennomsiktig);
}
/*Fargekoding*/
td._G0, td._G0:empty {background: transparent}
td._G1, td._G1:empty {background: rgb(225, 225, 225)} /*Skal mindre til for å oppnå kontrast i overgangen til hvitt*/
td._G2, td._G2:empty {background: rgb(182, 182, 182)}
td._G3, td._G3:empty {background: rgb(139, 139, 139)}
td._G4, td._G4:empty {background: rgb(096, 096, 096); color: white}
td._G5, td._G5:empty {background: rgb(053, 053, 053); color: white}
td._G6, td._G6:empty {background: rgb(010, 010, 010); color: white} /*Helt svart blir veldig hardt*/
/*
---------------------------
Kantlinjer
---------------------------
*/
td {border: 1px solid DimGray} /*Litt mildere*/
thead, col.overskrifter {border: 1px solid black}
tbody + tbody > tr:first-child > th {border-top: 1px solid black}
/*Hvite og gjennomsiktige linjer*/
tr + tr > th {border-top: 1px solid white}
th + th {border-left: 1px solid white}
th:first-child[rowspan="2"] {border-right: 1px solid white} /*Ellers vil enkelte kantlinjer forsvinne*/
th.hjørneoverskrift {border: 1px solid transparent}
/*Tykkere linjer*/
thead {border-bottom: 3px solid black}
col.innrammet, td.innrammet {border: 2px solid black}
col:not(.overskrifter) + col.overskrifter, col.overskrifter + col:not(.overskrifter) {border-left: 3px solid black}
/*
---------------------------
Tabellbredder
---------------------------
*/
/* Poenget er at vi ønsker faste, markante intervaller, og at de skal
* være konstante, uavhengig av en maksimal sidebredde som kan tenkes
* revidert i fremtiden.
*/
table.bredde_04 {width: calc(04 * 50px)}
table.bredde_05 {width: calc(05 * 50px)}
table.bredde_06 {width: calc(06 * 50px)}
table.bredde_07 {width: calc(07 * 50px)}
table.bredde_08 {width: calc(08 * 50px)}
table.bredde_09 {width: calc(09 * 50px)}
table.bredde_10 {width: calc(10 * 50px)}
table.bredde_11 {width: calc(11 * 50px)}
table.bredde_12 {width: calc(12 * 50px)}
table.bredde_13 {width: calc(13 * 50px)}
/*
---------------------------
Lister i boka
---------------------------
*/
figure.bok > main ul {
list-style-type: none; /*Benytter manuell nummerering for å kunne særstile numrene.*/
}
figure.bok > main li {
position: relative; /*Av én eller annen grunn kreves dette for at forbudet mot kolonnebrekk skal virke!*/
break-inside: avoid-column;
}
/*Marger*/
figure.bok > main > ul {
margin-top: 1.5em;
margin-bottom: 1.75em;
}
figure.bok > main li {margin-bottom: 0.75em}
/*Innrykk*/
figure.bok > main li {
margin-left: var(--marg_innrykk_standard);
text-indent: calc(-1*var(--marg_innrykk_standard)); /*Lik bredden av nummer-(pseudo)-elementet.*/
}
figure.bok > main li > * {
text-indent: initial; /*Forhindrer arv.*/
}
/*Utheving*/
figure.bok > main li::before,
figure.bok > main li > strong {
font-weight: bold;
font-size: var(--skriftstørrelse_liten);
}
figure.bok > main li > strong {
font-variant: all-small-caps;
}
/*
---------------------------
Listepunkter
---------------------------
*/
/*PS: BRUKER KUN UNUMMERERTE PUNKER, OG INGEN NESTING*/
figure.bok > main li::before { /*Disse pseudo-elementene brukes til manuell nummerering.*/
display: inline-block;
width: 20px;
margin-right: 10px;
text-align: center;
border: 1px solid black;
border-radius: 25%;
background: var(--farge_palett_rød);
color: white;
text-shadow: 1px 1px black;
text-indent: 0;
}
figure.bok > main li::before {content: "o"}
/*
---------------------------
Lyder og skrift
---------------------------
*/
/*Konsonantene*/
table.konsonanter td {
padding-left: 15px;
padding-right: 15px;
white-space: nowrap;
min-width: 77px;
}
table.konsonanter td > span {
display: inline-block;
width: 50%;
}
table.konsonanter td.allofon {
padding-left: 8px; /*Pga. klammene*/
padding-right: 8px;
}
table.konsonanter td:empty {background: none}
table.konsonanter td.anmerket {padding-right: 8px}
table.konsonanter th, table.konsonanter td {text-align: center}
table.konsonanter td > span:first-child {text-align: left}
table.konsonanter td > span:last-child {text-align: right}
table.konsonanter col.velarer {width: 85px} /*Blir ellers trangt pga. alle merknadene*/
table.konsonanter col.overskrifter {width: 100px}
/*Konsonantgrupper*/
table.konsonantgrupper {
width: calc(-20px + var(--INNHOLDSBREDDE)); /*Av hensyn til lydformstatistikk-siden*/
text-align: center;
table-layout: fixed;
}
table.konsonantgrupper td {
padding-left: 0;
padding-right: 0;
font-size: var(--skriftstørrelse_liten); /*For å få plass til alt*/
font-weight: bold;
letter-spacing: 0.5px;
border-color: black; /*Skarpere enn vanlig, pga. de mange bakgrunnsfargene*/
}
table.konsonantgrupper.med_posisjonsbegrensninger td {
text-align: left;
padding-left: 10px;
}
table.konsonantgrupper td.innrammet {font-weight: bold}
table.konsonantgrupper td:empty {background: none}
/*Fargekart*/
table.fargekart td {
border: 1px solid black; /*Skarpere enn i f.eks. bøyningstabellene*/
}
table.fargekart_loddrett td:first-child {
width: 50px;
text-align: center;
}
/*
---------------------------
Bokstavoppsett
---------------------------
*/
table.bokstavoppsett {
width: var(--INNHOLDSBREDDE); /*Viktig av hensyn til presentasjonssiden for alfabetet*/
text-align: center;
table-layout: fixed;
}
table.bokstavoppsett th {
font-family: var(--skriftfamilie_overskrifter);
font-size: 1.75em;
}
table.bokstavoppsett td {
padding: 1em 0;
border: 1px solid black; /*Skarpere enn i f.eks. bøyningstabellene*/
}
table.bokstavoppsett td > div.tallverdi.spesiell {
display: inline-block;
text-align: center;
border: 1px dashed black;
border-radius: 50%;
padding: 3px 8px;
min-width: 25%;
margin: -3px 0;
}
/*Tulaktas og lydverdier*/
table.bokstavoppsett div.tulaktisk {
font-size: 2rem;
color: var(--farge_palett_rød);
font-family: "Tulaktas Standard Rett Enkel";
}
table.bokstavoppsett div.tulaktisk > div {display: inline-block}
table.bokstavoppsett div.tulaktisk > div + div {margin-left: -0.75em}
table.bokstavoppsett div.lydskrift {font-size: 1rem}
table.bokstavoppsett div.lydskrift b {font-size: inherit}
/*Med tegnkonturer*/
a#bokstavoppsett_med_kontur + * table.bokstavoppsett div.tulaktisk {font-family: "Tulaktas Standard Rett Kontur"}
a#bokstavoppsett_med_kontur + * table.bokstavoppsett div.tulaktisk {margin: 0.5rem 0}
/*Annet*/
table.bokstavoppsett td.ingen_bokstav {
vertical-align: middle;
font-variant: all-small-caps;
}
/*
---------------------------
Positureksempler
---------------------------
*/
table.positureksempel td {
padding: 25px 15px;
}
table.positureksempel div.stor {
margin-left: -3px;
font-weight: bold;
font-size: 1.25rem;
color: var(--farge_palett_rød);
text-shadow: 1px 1px black;
}
table.positureksempel div.liten {
margin-top: 1em;
font-size: 0.6rem;
line-height: var(--linjehøyde_tulaktisk);
}
table.positureksempel div.liten > b {color: var(--farge_skrift_rød_tulaktisk)}
/*
---------------------------
Glossymboler
---------------------------
*/
table.glossymboler td:last-child {
text-align: center;
vertical-align: middle;
font-weight: bold;
letter-spacing: 2px;
word-spacing: 5px;
font-size: var(--skriftstørrelse_liten);
white-space: nowrap;
background: var(--farge_bakgrunn_grå_gjennomsiktig);
border: 1px solid black;
min-width: 85px;
padding-left: 15px;
padding-right: 15px;
}
table.glossymboler td:last-child,
table.glossymboler th:last-child {text-align: center}
table.glossymboler td:last-child i,
table.glossymboler td:last-child sub {font-weight: normal}
table.glossymboler td:first-child {width: 350px}
table.glossymboler col.symboler {border-left: 2px solid black}
/*
---------------------------
Annet
---------------------------
*/
/*Proformene*/
table.proformer {table-layout: fixed}
table.proformer col.overskrifter {width: 75px} /*Sikrer tabulering på tvers av pronomen og adverb*/
table.proformer th {white-space: normal} /*Går bra siden bredden er fast*/
/*Bøyningsordene*/
table.bøyningsordene > thead th {text-align: center}
table.bøyningsordene td {padding-left: 30px}
/*Relative aspekter*/
table.relative_aspekter > thead th {text-align: center}
table.relative_aspekter td {padding-left: 30px}
table.relative_aspekter col:not(.overskrifter) {width: calc(0.95 * var(--INNHOLDSBREDDE) / 6)}
/*Annet*/
table.klasse_av_konsonantgrupper td {height: 40px; width: 33%}
table.rolleavledningene col:not(.overskrifter) {width: calc(0.85 * var(--INNHOLDSBREDDE) / 6)}
table.sammensetningsformer col:not(.overskrifter) {width: calc(0.75 * var(--INNHOLDSBREDDE) / 4)}
table.spesielle_tegnkoder td:first-child {font-weight: bold}
table.generiske_lydmomenter tr > td:first-child {text-align: center}
/*PS: DISSE SPESIELLE FARGENE I RAMMEVISNING GJELDER IKKE FOR GALLERIVISNINGSSIDER*/
/*Endrer alle røde elementer til blå*/
html.ramme_lerret:not(.fullfarge) {--farge_palett_rød: var(--farge_skrift_blå)}
html.ramme_lerret:not(.fullfarge) {--farge_skrift_rød_tulaktisk: var(--farge_skrift_blå)}
/*Overskrifter*/
html.ramme_lerret:not(.fullfarge) h1,
html.ramme_lerret:not(.fullfarge) h2,
html.ramme_lerret:not(.fullfarge) h3 {color: var(--farge_skrift_blå)}
/*Skriftfarge for inndata*/
html.ramme_lerret:not(.fullfarge) section.farget.mørk label,
html.ramme_lerret:not(.fullfarge) section.farget.mørk a,
html.ramme_lerret:not(.fullfarge) section.farget.mørk div.lenkeknapp,
html.ramme_lerret:not(.fullfarge) section.farget.mørk span.lenkeknapp {color: black}
/*Andre skriftfarger*/
html.ramme_lerret:not(.fullfarge) sup, html.ramme_lerret sub {color: black}
html.ramme_lerret:not(.fullfarge) form label {color: black}
/*Skjules*/
html.lesemodus nav#hovedmeny,
html.lesemodus nav#undermeny,
html.lesemodus #knappesett,
html.lesemodus #Tulaktas-tekst,
html.lesemodus #undermeny_knapp_banner {
display: none;
}
html.lesemodus #vis_undermeny {display: none !important} /*For at ikke denne regelen skal tape på spesifisitet.*/
html.lesemodus:not(.menyer_fryst) header {display: none}
/*Vises*/
html.lesemodus #menylinje {display: table} /*OBS*/
/*Annet*/
html.lesemodus .midtre_del {
left: 0 !important;
right: 0 !important;
margin: auto !important;
}
/*Kombinasjon av egenskaper*/
html.lesemodus.menyer_fryst #tverrligger-midte {position: fixed}
html.lesemodus.menyer_fryst #header {visibility: hidden} /*Må fremdeles oppta plassen sin*/
/*OBS! TILPASNINGENE OPPHEVES NÅR MAN FORLATER LESEMODUS */
html.lesemodus.reservemenyer #menylinje ~ * {display: none}
html.lesemodus.reservemenyer:not(.ramme_lerret_åpen) #lerret,
html.lesemodus.reservemenyer:not(.ramme_lerret_åpen) .list {
width: 100%;
}
/*Omforming av lerret*/
html.lesemodus.reservemenyer #lerret {
position: absolute;
height: var(--topp_tverrligger);
border: none;
box-shadow: none;
outline: none;
}
html.lesemodus.reservemenyer #visning {
min-height: var(--topp_tverrligger);
padding-bottom: 0;
}
/*Hovedmeny*/
html.lesemodus.reservemenyer nav#hovedmeny {
width: 100%;
}
html.lesemodus.reservemenyer nav#hovedmeny > ul > li.vanlig,
html.lesemodus.reservemenyer nav#hovedmeny > ul > li.boka_om_saktonas{
margin-left: auto;
margin-right: auto;
width: var(--bredde_hovedmeny);
border-left: 2px solid black;
border-right: 2px solid black;
}
html.lesemodus.reservemenyer nav#hovedmeny > ul > li.boka_om_saktonas {line-height: 60px}
/*Undermeny*/
html.lesemodus.reservemenyer nav#undermeny {
left: 0;
right: 0;
margin: auto;
width: max-content; /*Viktig fordi innstillingene over strekker den ut til maks bredde med én gang*/
}
html.lesemodus.reservemenyer nav#undermeny > div.lokasjon {cursor: auto}
/*Menyer åpne (MÅ BRUKE CSS TIL DETTE) */
html.lesemodus.reservemenyer.hovedmeny_åpen nav#hovedmeny,
html.lesemodus.reservemenyer.undermeny_åpen nav#undermeny,
html.lesemodus.reservemenyer.undermeny_åpen #Tulaktas-tekst {display: block}
/*Andre tilpasninger*/
html.lesemodus.reservemenyer #Tulaktas-tekst {
left: 0;
text-align: center;
}
html.lesemodus.reservemenyer #list_nede {display: none}
html.lesemodus.reservemenyer #menylinje {border: none}
/*Avhengig av vindusbredde*/
@media (min-width: 750px) {
html.lesemodus.reservemenyer #menylinje {
padding-left: calc(0px
+ var(--tykkelse_kantlinje_tykk) /*Veier opp for bortfall av kantlinje*/
+ var(--marg_innholdsområde_vannrett)
);
padding-right: calc(0px
+ var(--tykkelse_kantlinje_tykk)
+ var(--marg_innholdsområde_vannrett)
);
}
}
/*OBS: SAMME BREDDEMÅL SOM VINDUSBREDDE FOR LESEMODUS!*/
@media (min-width: 1065px) {
html.venstreforskjøvet #lerret,
html.venstreforskjøvet iframe[name=ramme_lerret] {border-left: none}
html.venstreforskjøvet #visning > main {margin-left: calc(-5px + var(--marg_innholdsområde_vannrett))} /*Av hensyn til seksjonselementer som går fra kant til kant i bredden*/
/*Forskyver*/
html.venstreforskjøvet .midtre_del,
html.venstreforskjøvet #undermeny_knapp_banner,
html.venstreforskjøvet #knappesett {
margin-left: calc(-1 * var(--bredde_hovedmeny)); /*Trekker fra for bredden av hovedmenyen*/
}
html.venstreforskjøvet footer,
html.venstreforskjøvet #list_bunnfelt {
margin-left: 0 !important; /*Unntatt disse, som ikke er fast posisjonerte*/
}
html.venstreforskjøvet nav#undermeny {
left: calc(var(--bredde_lerret) + var(--mellomrom_etter_lerret));
}
/*Viser og skjuler*/
html.venstreforskjøvet nav#hovedmeny,
html.venstreforskjøvet #vis_undermeny,
html.venstreforskjøvet #Tulaktas-tekst,
html.venstreforskjøvet #knappesett {
display: none !important; /*Overstyrer oppstart-JS*/
}
html.venstreforskjøvet nav#undermeny,
html.venstreforskjøvet #undermeny_knapp_banner {
display: block !important; /*Overstyrer oppstart-JS*/
}
/*Ikonveksling*/
html.venstreforskjøvet #undermeny_knapp_banner > div.ikon {
background-image: var(--url_meny_banner_aktiv);
}
html.venstreforskjøvet #undermeny_knapp_banner:hover > div.ikon {
background-image: var(--url_meny_banner);
}
/*Annet*/
html.venstreforskjøvet nav#undermeny > div.lokasjon {cursor: auto}
}
/*OBS! VED ENDRING AV BREDDEMÅLENE, SØRG FOR Å ENDRE OGSÅ I PHP OG JAVASCRIPT!*/
/*NB! Husk 20-30px margin til rullefeltet i nettleseren!*/
/*Gjør knappesettet rullende, for at det ikke skal bli utilgjengelig utenfor vinduskanten.*/
@media (max-height: 475px) {
#knappesett {position: absolute}
}
/*
---------------------------
Generelle bruddpunkter
---------------------------
*/
/*Skjuler undermenyen*/
@media (max-width: 1250px) {
nav#undermeny, #Tulaktas-tekst {display: none}
#vis_undermeny {display: none !important} /*Overstyrer oppstarts-JS*/
#undermeny_knapp_banner {display: block}
}
/*TVUNGEN LESEMODUS DEFINERES VED HJELP AV PHP*/
@media (max-width: 1065px) {
ul.innstillinger > li.lesemodus {opacity: 0.6} /*Siden vi på denne sidebredden har tvungen lesemodus*/
}
/*Midtre del av siden blir skalerbar i bredden.*/
@media (max-width: 740px) {
/*Gjør midtre del av siden skalerbar*/
.midtre_del {width: 100% !important} /*Overstyrer mer spesifikke stilregler.*/
/*Fjerner loddrette kantlinjer.*/
#lerret,
iframe[name=ramme_lerret],
#visning > main,
#menylinje {
border-left: none !important;
border-right: none !important;
}
/*Rullefelt*/
figure.bok main {
overflow-x: auto; /*OBS: Angis inni bruddpunkt fordi enkelte figurer til vanlig tillates å overskride sin bredde*/
}
}
/*Skjuler knappesettet i menylinja, og erstatter med en knapp som kan trykkes brukes til å vise det.*/
@media (max-width: 675px) {
#knappesett_2,
a.forrige_side,
a.neste_side {display: none}
#innstillings-knapp {display: block}
/*Andre ting*/
ul.lenkesamling.spaltet {column-count: 1 !important}
}
/*Endrer på noen av premissene for tekstbrytning*/
@media (max-width: 575px) {
.spaltet {column-count: 1 !important}
/*Korte merknader ser ikke så bra ut i full lerretsbredde*/
div.merknad > ol.spaltet {width: calc(0.5 * var(--INNHOLDSBREDDE) - var(--marg_innholdsområde_vannrett))}
hr.latent {display: block}
/*Brødtekst*/
p, div.merknad {
text-align: left;
}
p + p:not(.mellomrom) {
text-indent: 0;
margin-top: 1.5em; /*Innfører mellomrom likevel*/
}
}
/*Komprimerer menylinja enda mer, ved å fjerne ikoner som uansett ledsages av tekst.*/
@media (max-width: 450px) {
#hovedmeny_knapp > div.ikon, a#utlenke > div.ikon,
#undermeny_knapp > div.ikon {
display: none;
}
#knappesett_2 {
margin-left: calc(-1*var(--marg_innholdsområde_vannrett));
margin-right: calc(-1*var(--marg_innholdsområde_vannrett));
}
}
/*
---------------------------
Nedtrekksbelter
---------------------------
*/
@media (max-width: 740px) {
html:not(.ramme_lerret) section.nedtrekksbelte label:not(.fredet),
html:not(.ramme_lerret) section.nedtrekksbelte span.skillelinje {display: none}
html:not(.ramme_lerret) section.nedtrekksbelte input[type=text],
html:not(.ramme_lerret) section.nedtrekksbelte select {width: var(--bredde_inndata_maks)}
html:not(.ramme_lerret) section.nedtrekksbelte div.komponent {margin-right: 0}
}
/*Tilsvarende bruddpunkt for lerretsramme*/
@media (max-width: 690px) {
html.ramme_lerret section.nedtrekksbelte label:not(.fredet),
html.ramme_lerret section.nedtrekksbelte span.skillelinje {display: none}
html.ramme_lerret section.nedtrekksbelte input[type=text],
html.ramme_lerret section.nedtrekksbelte select {width: var(--bredde_inndata_maks)}
html.ramme_lerret section.nedtrekksbelte div.komponent {margin-right: 0}
}
/*
---------------------------
Eksempelrulling
---------------------------
*/
@media (max-width: 740px) {
html:not(.minimér_eksempler) x-eksempelgruppe {
white-space: nowrap;
overflow-x: scroll; /*Rullefeltet vises hele tiden, av hensyn til den ekstra indre margen*/
}
html:not(.minimér_eksempler) x-eksempelgruppe {padding-bottom: 1rem}
html:not(.minimér_eksempler) x-eksempelgruppe x-eksempel {
white-space: normal;
margin-top: 0 !important;
margin-right: var(--marg_skille_standard);
}
/*Ved eksempelminimering*/
html.minimér_eksempler x-eksempelgruppe.åpen {
white-space: nowrap;
overflow-x: scroll; /*Rullefeltet vises hele tiden, av hensyn til den ekstra indre margen*/
}
html.minimér_eksempler x-eksempelgruppe.åpen {padding-bottom: 1rem}
html.minimér_eksempler x-eksempelgruppe.åpen x-eksempel {
white-space: normal;
margin-top: 0 !important;
margin-right: var(--marg_skille_standard);
}
}
/*
---------------------------
Frysing av menyer
---------------------------
*/
/*Frysing*/
html.menyer_fryst #menylinje {position: fixed; top: 0}
@media (min-height: 520px) {
html.menyer_fryst nav#hovedmeny,
html.menyer_fryst nav#undermeny,
html.menyer_fryst #lerret, /*Av hensyn til reservemenyene i lesemodus*/
html.menyer_fryst #vis_undermeny,
html.menyer_fryst #tverrligger,
html.menyer_fryst #banner {position: fixed}
}
/*
---------------------------
Ramme åpen
---------------------------
*/
/*Helramme*/
html.ramme_hel_åpen {overflow: hidden}
html.ramme_hel_åpen iframe[name=ramme_hel] {display: block}
/*NOE AV DET NEDENSTÅENDE ER AV HENSYN TIL RESERVEMENYER I LESEMODUS*/
/*Lerretsramme*/
html.ramme_lerret_åpen {overflow: hidden}
html.ramme_lerret_åpen iframe[name=ramme_lerret],
html.ramme_lerret_åpen #tåketeppe {
display: block;
}
html.ramme_lerret_åpen #visning,
html.ramme_lerret_åpen #tverrligger-midte,
html.ramme_lerret_åpen .list {
display: none;
}
/*
---------------------------
Sterke farger
---------------------------
*/
/* Må angi ENTEN 'html', eller enkeltobjekter, fordi filtrert område blir
* egen posisjoneringskontekst (merkelig nok), slik at bunnfelt-lista da
* ville oppført seg rart! Og vi kan ikke angi 'html', for vi må skåne bak-
* grunnsbildet.
*/
html:not(.sterke_farger) header,
html:not(.sterke_farger) #visning > main,
html:not(.sterke_farger) #reservemenyer,
html:not(.sterke_farger) #kapittelmeny_topp,
html:not(.sterke_farger) #kapittelmeny_bunn,
html:not(.sterke_farger) #list_oppe,
html:not(.sterke_farger) #list_nede,
html:not(.sterke_farger) #list_bunnfelt,
html:not(.sterke_farger) #tverrligger,
html:not(.sterke_farger) #tverrligger-midte,
html:not(.sterke_farger) nav#hovedmeny li.start,
html:not(.sterke_farger) nav#hovedmeny li.boka_om_saktonas:hover,
html:not(.sterke_farger) nav#undermeny li.aktiv,
html:not(.sterke_farger) #knappesett li,
html:not(.sterke_farger) #knappesett_2 li,
html:not(.sterke_farger) figure#bildevisning,
/*Lerretsramme*/
html:not(.sterke_farger).ramme_lerret {
filter: saturate(0.65);
}
.midtre_del {
width: var(--bredde_lerret); /*Gjelder lerret og elementer som dekker samme strekning i bredden.*/
left: var(--bredde_hovedmeny);
}
/*
---------------------------
Overordnet
---------------------------
*/
/*STANDARD STØRRELSES-MÅLREGEL, SOM UTELATER BÅDE KANTLINJE OG INDRE MARG, ER SLITSOMT Å FORHOLDE SEG TIL!*/
*, *::before, *::after {box-sizing: border-box}
html {
min-height: 100%; /*Av hensyn til bunnfeltet*/
font-family: var(--skriftfamilie_brødtekst);
font-size: 15px;
scroll-behavior: smooth;
background: var(--url_bakgrunn) center/cover no-repeat fixed; /*Bakgrunnen midtstilles i begge dimensjoner med hensyn til vinduet (Posisjonering med hensyn til vinduet oppnås med verdien 'fixed').*/
background-size: cover !important; /*Det avsluttende stikkordet her er for at bakgrunnen ikke skal kuttes i høyden når man besøker nettstedet med nettbrett.*/
overflow-y: scroll; /*For å unngå flimring av rullefelt idet sidens innhold lastes*/
}
html.laster * {cursor: wait !important}
html.ramme_lerret {background: transparent} /*Ingen bakgrunn her*/
/*
---------------------------
Rammer
---------------------------
*/
iframe {
display: none;
position: fixed;
top: 0;
height: 100%;
}
iframe:not(.midtre_del) {
left: 0;
width: 100%;
}
iframe[name=ramme_hel] {
z-index: 10;
background: var(--url_bakgrunn) center/cover no-repeat fixed; /*Legges også på selve rammen, for å unngå forsinkelse*/
}
/*
---------------------------
Utkryss
---------------------------
*/
#utkryss {
position: fixed;
top: 7px;
right: 7px;
width: 36px;
height: 36px;
cursor: pointer;
background: var(--url_ut_av_ramme) center/contain;
border: 1px solid black;
}
#utkryss:hover {
background: var(--url_ut_av_ramme_aktiv) center/contain;
border: none;
}
/*
---------------------------
Skrifter
---------------------------
*/
/*OBS: Variabler virker tydeligvis ikke inni '@font-face'!*/
@font-face {
font-family: "Gentium Basic";
src: url("/audiografikk/_RESSURSER/skrifter/Gentium/Gentium Basic 1.1/GenBasR.ttf");
}
@font-face {
font-family: "Gentium Basic";
src: url("/audiografikk/_RESSURSER/skrifter/Gentium/Gentium Basic 1.1/GenBasB.ttf");
font-weight: bold;
}
/*
---------------------------
XDebug
---------------------------
*/
table.xdebug-error {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 800px;
font-size: 1rem;
}
table.xdebug-error th {
font-variant: normal;
text-transform: none;
background: white;
color: black;
text-shadow: none;
border-color: black;
white-space: normal;
}
@media (max-width: 1065px) {
@import url("lesemodus.css");
@import url("lesemodus_reservemenyer.css");
/*Skjules*/
html nav#hovedmeny,
html nav#undermeny,
html #knappesett,
html #Tulaktas-tekst,
html #undermeny_knapp_banner {
display: none;
}
html #vis_undermeny {display: none !important} /*For at ikke denne regelen skal tape på spesifisitet.*/
html:not(.menyer_fryst) header {display: none}
/*Vises*/
html #menylinje {display: table} /*OBS*/
/*Annet*/
html .midtre_del {
left: 0 !important;
right: 0 !important;
margin: auto !important;
}
/*Kombinasjon av egenskaper*/
html.menyer_fryst #tverrligger-midte {position: fixed}
html.menyer_fryst #header {visibility: hidden} /*Må fremdeles oppta plassen sin*/
/*OBS! TILPASNINGENE OPPHEVES NÅR MAN FORLATER LESEMODUS */
html.reservemenyer #menylinje ~ * {display: none}
html.reservemenyer:not(.ramme_lerret_åpen) #lerret,
html.reservemenyer:not(.ramme_lerret_åpen) .list {
width: 100%;
}
/*Omforming av lerret*/
html.reservemenyer #lerret {
position: absolute;
height: var(--topp_tverrligger);
border: none;
box-shadow: none;
outline: none;
}
html.reservemenyer #visning {
min-height: var(--topp_tverrligger);
padding-bottom: 0;
}
/*Hovedmeny*/
html.reservemenyer nav#hovedmeny {
width: 100%;
}
html.reservemenyer nav#hovedmeny > ul > li.vanlig,
html.reservemenyer nav#hovedmeny > ul > li.boka_om_saktonas{
margin-left: auto;
margin-right: auto;
width: var(--bredde_hovedmeny);
border-left: 2px solid black;
border-right: 2px solid black;
}
html.reservemenyer nav#hovedmeny > ul > li.boka_om_saktonas {line-height: 60px}
/*Undermeny*/
html.reservemenyer nav#undermeny {
left: 0;
right: 0;
margin: auto;
width: max-content; /*Viktig fordi innstillingene over strekker den ut til maks bredde med én gang*/
}
html.reservemenyer nav#undermeny > div.lokasjon {cursor: auto}
/*Menyer åpne (MÅ BRUKE CSS TIL DETTE) */
html.reservemenyer.hovedmeny_åpen nav#hovedmeny,
html.reservemenyer.undermeny_åpen nav#undermeny,
html.reservemenyer.undermeny_åpen #Tulaktas-tekst {display: block}
/*Andre tilpasninger*/
html.reservemenyer #Tulaktas-tekst {
left: 0;
text-align: center;
}
html.reservemenyer #list_nede {display: none}
html.reservemenyer #menylinje {border: none}
/*Avhengig av vindusbredde*/
@media (min-width: 750px) {
html.reservemenyer #menylinje {
padding-left: calc(0px
+ var(--tykkelse_kantlinje_tykk) /*Veier opp for bortfall av kantlinje*/
+ var(--marg_innholdsområde_vannrett)
);
padding-right: calc(0px
+ var(--tykkelse_kantlinje_tykk)
+ var(--marg_innholdsområde_vannrett)
);
}
}
}