/*Generelle kommentarer:
@media brukes der hvor man vil begrense et sett med regler til å gjelde visse media. Jeg har kun fokusert på de viktigste mediene screen, print og handheld.
En CSS-regel innledes med en kommadelt liste av typer. Typene kan være på forskjellige former, og her har jeg brukt de følgende:
	p#adresse - Refererer til den spesifikke tagen p som har id="adresse". #adresse er ekvivalent med dette, siden adresse er en unik ID.
	p.oppd - Refererer til alle p av klasse oppd (class="oppd"). (Her kunne jeg like godt brukt id, siden oppd-klassen høyst opptrer én gang per side.)
	.ikkeclear - Refererer til alle elementer som har class="ikkeclear". Mest interessant: div og headere.
	type1 type2 - Refererer til alle elementer av type2 som ligger innenfor elementer av type1.
Etter dette kommer en semikolon-delt liste av attributt-deklarasjoner (på formen attributt: verdi), omsluttet av {}.
Hvilke attributter som er gyldige for forskjellige html-elementer og hva de betyr kan du lese alt om på http://www.w3schools.com/tags/ .





em er en relativ størrelse som er lik gjeldende bredde på bokstaven m.
*/

/*Her defineres regler som gjelder for hele body. Mer lokale regler vil få forrang.*/
body {
	font-family: "Arial", sans-serif;
	font-size: 0.8em;
ul.u {list-style-type: none;}
}

/*Bakgrunnen og margen defineres kun strengt for normal visning på skjerm. Til utskrift og visning på mobiltelefon overlater man dette til mottakeren.*/



@media screen {
#innhold {

border-style: solid;
border-width: 1px;
padding: 20px;
background-color: white;
}


	body {
		margin-left: 8%;
		margin-right: 8%;
		background-color: rgb(212,239,240);
	}
}



/*standardoppførselen for overskrifter blir at overskriften hopper under et eventuelt bilde som ellers ville kommet ved siden av den.*/
h1, h2, h3, h4, h5, h6 {
	clear: both;
}
/*hvis div#innhold gis class="ikkeclear", så vil alle overskrifter legge seg ved siden av bilder der dette er aktuelt. Vanligvis ønsker man kun denne oppførselen på noen utvalgte overskrifter. Da kan man sette class="ikkeclear" i den aktuelle heading-taggen. Slik har jeg for eksempel gjort det i Reiseklinikken_kart.asp.*/
@media screen, print {
	.ikkeclear, .ikkeclear h1, .ikkeclear h2, .ikkeclear h3, .ikkeclear h4, .ikkeclear h5, .ikkeclear h6 {
		clear: none;
	}
}

/*Her brukes clear igjen for å skille disse delene av dokumentene fra bildene rundt.*/
#adresse, p.oppd, #bunn, #disclaimer {
	clear: both;
}

/*Her kan du endre formateringen av adressen øverst på siden.*/
p#adresse {
	margin: 0px; /*Dette komprimerer toppen litt.*/
}

/*#toppmeny .*/
	#toppmeny {
		float: right;
		padding-left: 10px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 0px;
		margin-top: 0px;
		border: 0
	}

@media screen {
	ul#meny {
		list-style-type: none;
		padding: 0px;
		margin: 0px;
	}
	ul#meny li {
		display: inline; /*Denne sørger for at toppmenyen kommer i én linje.*/
		padding-right: 15px;
	}

	/*#sidemeny er menyen til høyre på forsiden.*/
	#sidemeny {
		float: left;
		width: 35%;
		padding: 20px;
		margin-left: 0.8em;
		padding-left: 0.5em;
		border: 0;
		ul.u {list-style-type: none;}
	}
}

/*På mobiltelefon blir sidemenyen kun leselig hvis den får fylle bredden av skjermen.*/
@media handheld {
	#sidemeny {
		width: 100%;
		margin-left: 0;
		padding-left: 0;
		border: 0;
		ul.u {list-style-type: none;} 
	}
}

/*#oversikt er listen i sidemenyen.*/
#oversikt {
	list-style-type: none;
	padding-left: 0;
}
#oversikt h3 {
	margin-bottom: 0;
}

/*
BILDER:

Generisk uttrykk:
<div class=%klasser style="max-width: p;">
	<img src="bilde.jpg" alt="Alternativ tekst">
	<p>Bildetekst/caption.</p>
</div>

Fornuftige verdier for %klasser, sammen med:
"picture" - til ikke innfelte bilder - p <= 100%.
"picture left" - til innfelte bilder på venstre side som ikke skal overstige 40% av spaltebredden - p <= 40%.
"picture left large" - til store innfelte bilder på venstre side som skal overstige 40% av spaltebredden - 40% < p <= 80%.
"picture right" - til innfelte bilder på høyre side som ikke skal overstige 40% av spaltebredden - p <= 40%.
"picture right large" - til store innfelte bilder på høyre side som skal overstige 40% av spaltebredden - 40% < p <= 80%.

(Tanken er at 20% av spaltebredden er nok til å putte inn tekst, men at mindre enn dette bør unngåes.)
*/

/*Felles formatering.*/
div.picture {
	border: 0;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0;
} 
div.picture img {
	vertical-align: top;
	border: 0;
	margin: 0;
	padding: 0;
	max-width: 100%;
}
/*Caption.*/
div.picture p {
	font-family: "Arial", sans-serif;
	font-size: 0.8em;
	margin-left: 3px;
	margin-top: 1px;
	padding-bottom: 3px;
}

/*Det er float-egenskapen som bestemmer om og hvor et bilde skal flyte i teksten.
  En ensidig clear hindrer at elementer stables mot den siden som clear gjelder for.*/
@media screen, print {
	div.left {
		float: left;
		clear: left;
		margin-right: 0.8em;
	}
	div.right {
		float: right;
		clear: right;
		margin-left: 0.8em;
	}
	div.large {
		clear: both;
	}

	/*Spesialkode for pressebildene.*/
	div#pressebilder {
		width: 100%;
	}
	div#pressebilder div.picture {
		float: left;
		max-width: 30%;
	}
}

/*Her har jeg brukt en spesialsyntaks som jeg ikke er så veldig kjent med for å overkjøre lokale max-width-innstillinger for bilder ved visning på mobiltelefon.*/
@media handheld {
	div.picture[style] {
		max-width: 100% !important;
	}
}

/*Skjul skrot fra utskrifter. Legg merke til at adresse og telefonnummer beholdes.*/
@media print {
	#kartlink, #meny, #bunn, #sidemeny {
		display: none;
	}
}

<!DOCTYPE html>
<html>
<head>
<style>

ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>