/* Färger på sidan 
Mörkblå  #0D2769
Klarblå #1543b6
Ljusblå #5b6ee9
Svart #000000
Grå #555555
Gråvit #cccccc
Olivgrön #807240
Klarvit #fffff0
Gräddvit #fffeef
Gräddgul #E6CD73
Röd #ff3000
*/










/* Gemensam design */
* {
box-sizing: border-box;
background: transparent;
font-family: sans-serif; 
font-size: 1.4vh; 
line-height: 2.2vh;
font-weight: normal;
color: #000000; 
text-align: left;
padding: 0;
margin: 0;
border: 0;
border-collapse: collapse;
border-spacing: 0;
}


html, body {
background: #fffff0;
position: relative;
margin: 0 auto;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: stretch;
}

.bildtext {
color: #555555;
padding: 0.4vh 0 1.4vh 0;
}

.blabakgrund {
background: #1543b6;
}

iframe {
min-height: 40vh;
}

.markera,
.ruta {
background: #e6cd73;
padding: 1.4vh 1.4vh 2.1vh 1.4vh;
}

.texten {
font-family: serif; 
}

/* Tabeller */
th, tr, td {
padding: 0.7vh 1.4vh 0.7vh 0.7vh;
vertical-align: top;
}

th {
color: #555555;
font-weight: bold;
}


/* Bilder */
img {
border: 0;
padding: 0;
}

img.medkant {
border: 0.1vh solid #cccccc;
padding: 0.3vw;
vertical-align : bottom;
}

img.irad {
display: inline;
max-height: 16.66vw;
max-width: 16.66vw; 
}


/* Formulär */
select, option, submit, input, textarea {
background: #eeeeee;
padding: 0.8vh;
margin: 0.3vh;
}



input.submit, input.text, textarea {
max-width: 100.0vw;
display: block;
}

textarea {
min-height: 20.0vh;
max-width: 100.0vw:
}



/* Rubriker */
h1 {
font-family: sans-serif; 
font-size: 3.0vh; 
line-height: 4.5vh;
color: #1543b6;
letter-spacing: 0.1vh;
}

h2 {
font-family: sans-serif; 
font-size: 2.0vh; 
line-height: 3.0vh;
color: #1543b6;
padding: 1.0vh 0 0 0;
letter-spacing: 0.1vh;
}

h3 {
font-family: sans-serif; 
font-size: 1.6vh; 
line-height: 2.4vh;
color: #1543b6;
padding: 1.0vh 0 0 0;
letter-spacing: 0.0vh;
}

h4 {
color: #1543b6;
font-weight: bold;
}


/* Länkar */
a {
text-decoration: none;
}

a:link {
color: #1543B6;
}

a:visited {
color: #1543B6;
}

a:hover {
color: #5B6EE9;
}

a:active {
color: #1543B6;
}

a.blabakgrund {
font-family: sans-serif; 
font-weight: normal;
padding: 0.5vh 1.0vw 0.5vh 1.0vw;
text-transform: uppercase;
letter-spacing: 0.2vh;
text-decoration: none;
}

a.blabakgrund:link {
color: #fffeef;
}

a.blabakgrund:visited {
color: #fffeef;
}

a.blabakgrund:hover {
color: #E6CD73;
}

a.blabakgrund:active {
color: #fffeef;
}

a.meny {
text-decoration: none;
}

a.meny:active::after, a.meny.dennasida {
content: " \00AB";
font-weight: bold;
}

a.meny:hover::after {
content: " \00AB";
}


/* Listor */
ul, li {
list-style-type: none;
padding: 0;
}

.snurradtext {
display: inline-block;
transform: rotate(-45deg);
overflow: hidden;
}








/* På skärmar med mindre bredd än 800px gäller detta */
@media only screen and (max-width: 800px) {
.doljpalitenskarm {
display: none;
}

.berg, .tut, .tvatredjedelar, .text, .huvudets-bredd, .huvudmenylitenskarm, .hel-textbredd, .tre-bilder-i-rad {
margin: 0 auto;
position: relative;
width: 95vw;
}

/* Menyn för liten skärm */
#menylitenskarm {
z-index: 100;
width: 95vw;
}

.huvudmenylitenskarm {
margin-top: -1.0vh;
}

.niva0litenskarm {
background-color: transparent;
color: #FFFFF0;
}

a.niva1litenskarm, a.niva2litenskarm {
color: #FFFFF0;
text-transform: uppercase;
letter-spacing: 0.2vh;
border-bottom: 0.1vh #FFFFF0 solid;
padding: 0.7vh 0 0.7vh 0;
}

a.niva3litenskarm {
color: #1543b6;
text-transform: none;
letter-spacing: 0;
padding: 0.7vh 0 0.7vh 1.4vh;
border-bottom: 0.1vh #1543b6 solid;
}

a.niva4litenskarm {
color: #1543b6;
text-transform: none;
letter-spacing: 0;
padding: 0.7vh 0 0.7vh 2.8vh;
border-bottom: 0.1vh #1543b6 solid;
}


a.niva5litenskarm {
color: #1543b6;
text-transform: none;
letter-spacing: 0;
padding: 0.7vh 0 0.7vh 3.5vh;
border-bottom: 0.1vh #1543b6 solid;
}

a.niva1litenskarm:hover, a.niva2litenskarm:hover, a.niva3litenskarm:hover, a.niva4litenskarm:hover, a.niva5litenskarm:hover {
background-color: #E6CD73;
color: #FFFFF0;
}

#menylitenskarm label.blapil,
#oppnamenynlitenskarm span.blapil {
color: #1543b6;
}

#menylitenskarm label.vitpil,
#oppnamenynlitenskarm span.vitpil {
color: #fffff0;
}


#menylitenskarm .huvudmenylitenskarm {
display: none;
}

#oppnaniva12litenskarm:checked + .huvudmenylitenskarm {
display: block;
}

#menylitenskarm input[type="checkbox"], 
#menylitenskarm ul span.blapil,
#menylitenskarm ul span.vitpil {
display: none;
}

#menylitenskarm .undermenylitenskarm {
background-color: #FFFFF0;
color: #5b6ee9;
}

#menylitenskarm li, 
#oppnamenynlitenskarm, 
#menylitenskarm a {
position: relative;
display: block;
}

#menylitenskarm, 
#oppnamenynlitenskarm {
background-color: #1543b6;
}

#oppnamenynlitenskarm, 
#menylitenskarm a {
padding: 1.0vh 0.5vw;
}

#menylitenskarm .undermenylitenskarm {
display: none;
}

#menylitenskarm input[type="checkbox"]:checked + .undermenylitenskarm {
display: block;
}

#oppnamenynlitenskarm .blapil, 
#menylitenskarm li label.blapil,
#oppnamenynlitenskarm .vitpil, 
#menylitenskarm li label.vitpil {
position: absolute;
right: 1.5vw;
top: -0.4vh;
padding: 0 0 0 10vw;
}

#menylitenskarm .blapil,
#menylitenskarm .vitpil {
font-size: 3.6vh; 
line-height: 4.8vh;
}


/* Listor */
li.niva1, li.niva2 {
margin: 0 0 0.2vh 1vw;
}

li.niva3 {
margin: 0.2vh 0 0.2vh 2vw;
}

li.niva4 {
margin: 0.2vh 0 0.2vh 3vw;
}

li.niva5 {
margin: 0.2vh 0 0.2vh 4vw;
}
}










/* På skärmar med större bredd än 800px gäller detta */
@media only screen and (min-width: 800px) {

/* Rutnätet */
.rutnat {
display: inline-grid;
grid-template-columns: 13vw 2vw 15vw 55vw 2vw 13vw;
grid-template-rows: fit-content(12px) fit-content(100px) auto;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}

.huvud {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
}

.berg {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
padding: 0;
}

.vanster {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
padding: 0;
}

.vanstertextmarginal {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 4;
padding: 0;
}

.hogertextmarginal {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 4;
padding: 0;
}

.hoger {
grid-column-start: 6;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 4;
padding: 0;
}

.sidomeny {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
padding: 0;
margin: 1vh 0 0 0;
}

.text {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 4;
margin: 1vh 1vw 0 0;
}

.sidomenyns-bredd {
width: 14vw;
}

.huvudets-bredd {
width: 70vw;
}

.doljpastorskarm {
display: none;
}

.huvudmenystorskarm {
display: flex;
flex-direction: row;
margin: -1.0vh 0 2.0vh 0;
}

.huvudmeny div {
width: max(100%);
}

.hel-textbredd {
width: 55vw;
}

.halv-textbredd, .halv-textbredd-med-marginal {
width: 27.5vw;
display: inline;
}

.halv-textbredd-med-marginal {
margin: 0 1.0vw 0 0;
}

.tre-bilder-i-rad {
max-height: 17vw; 
max-width: 17vw; 
margin: 0 1.0vw 0 0; 
display: inline-block; 
}

/* Menyknapp */
.menyknapp {
width: max(100%);
padding: 1.0vh 0 1.0vh 1.0vh;
}

/* Hållaren för att positionera det nedfällda innehållet */
.nedfallt {
position: relative;
display: inline-block;
}

/* Det nedfällda innehållet - gömt som standard */
.nedfallt-innehall {
display: none;
position: absolute;
background-color: #ffffff;
border: 0.1vh solid #E6CD73;
min-width: 160px;
z-index: 1;
}

/* Länkar för det nedfällda innehållet */
.nedfallt-innehall a {
color: #5b6ee9;
padding: 1.4vh 2.4vh;
text-decoration: none;
display: block;
}


.nedfallt-innehall a:hover {
background-color: #E6CD73;
}

.nedfallt:hover .nedfallt-innehall {
display: block;
}

.nedfallt:hover .menyknapp {
background-color: #1543b6;
}

/* Listor */
li.niva2 {
margin: 0 0 0.2vh 0;
}

li.niva3 {
margin: 0.2vh 0 0.2vh 0.75vw;
}

li.niva4 {
margin: 0.2vh 0 0.2vh 1.25vw;
}

li.niva5 {
margin: 0.2vh 0 0.2vh 1.75vw;
}
}