/* NAVIGASJON */

nav a {
    padding: 0.5em; /* luft inni knappen */
    color: #ffffff; /* hvit tekstfarge */
    border: 1px solid rgba(0, 0, 0, 0.1); /* lys grå kantlinje */
    border-radius: 0.3em; /* avrunder kantene */
    background: #5588AA; /* blå bakgrunnsfarge */
    box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.6); /* skygge bak knappen */
    text-decoration: none; /* fjerner understrek */
    font-family: monospace; /* lesbar skrifttype */
}

nav a:hover {
    background: #4e7b9c; /* mørkere farge ved hover*/
}

nav a:active {
    color: #d9dad8; /* mørkere tekstfarge ved klikk */
}

/* BRUKERGRENSESNITT */

select, input:not([type=checkbox]) {
    border: none; /* fjerner kant */
    padding: 0.4em; /* lager luft inni */
    border-radius: 0.5em; /* avrunder kanter */
    margin: 0.5em; /* lager luft rundt */
    box-shadow: #ffffff 0 0 0 0, inset 0 0 0.2em 0.1em #939393; /* lager skygge inni og usynlig utenfor */
    transition: all 0.1s ease-in-out; /* lager overgang */
}

select:hover, input:hover {
    box-shadow: #919191 0 0 0.5em 0.1em, inset 0 0 0.2em 0.1em #939393; /* gjør skyggen utenfor synlig ved hover*/
}

input[type=submit], input[type=button] {
    border-radius: 0.2em; /* avrunder kantene */
    box-shadow: #767676 0 0 0.2em 0.1em, inset #aaaaaa 0 0 0.2em 0.1em; /* lager skygge inni og utenfor */
    background: #dfdfdf; /* mørkere farge */

}

input[type=submit]:hover, input[type=button]:hover {
    box-shadow: #757575 0 0 0.4em 0.15em, inset #aaaaaa 0 0 0.2em 0.1em; /* lager tydeligere ytre skygge ved hover */
    background: #d1d1d1; /* mørkere bakgrunn ved hover */
    cursor: pointer; /* endrer musepekeren */
    transition: all 0.05s ease-in-out; /* overgang */
}

input[type=submit]:active, input[type=button]:active {
    background: #c2c2c2; /* gjør bakgrunn mørkere ved klikk */
}

.usynlig {
    display: none!important; /* skjuler alt med denne klassen */
}

/* TEKST */

p.teknisk {
    font-family: monospace; /* lesbar skrifttype */
    color: #3d3d3d; /* mørkegrå tekstfarge */
}

h1, h2 {
    font-family: sans-serif; /* skrifttype uten seriffer */
    color: #292929; /* mørk tekstfarge */
    font-weight: normal; /* fjerner uthevning */
}

a {
    color: royalblue; /* blå tekstfarge */
    text-decoration: underline; /* understrek */
    cursor: pointer; /* endrer musepeker */
}

/* DOKUMENT */

body {
    background: white; /* hvit bakgrunn i hoveddelen av dokumentet */
    padding: 1em; /* luft rundt hoveddelen */
    max-width: 50em; /* begrenser bredden av hoveddelen for store skjermer */
    box-shadow: #3d3d3d 0 0 0.8em 0.25em; /* skygge på bakgrunnen */
    margin: 0 auto 2em; /* sentrerer hoveddelen horisontalt og lager plass på bunnen */
}

html {
    background: url("../media/bakgrunn.jpg") center center fixed; /* bakgrunnsbilde for dokumentet bak hoveddelen*/
    background-size: cover; /* gjør at bildet fyller siden */
}

/* TABELL */

td, th {
    padding: 0.3em; /* luft i cellene */
    box-shadow: #cdcdcd 0 0 0.2em 0.1em; /* lager myk kant mellom cellene */
}

td:not(:last-child), th:not(:last-child) {
    border-right: solid #cbcbcb 0.2em; /* lager hard vertikal kant mellom cellene */
}

tr:not(:last-child) {
    border-bottom: solid #cbcbcb 0.2em; /* lager hard horisontal kant mellom cellene */
}

table {
    border-collapse: collapse; /* gjør at kantene sammenfaller */
    margin: 1em; /* luft rundt tabellen */
    box-shadow: 0.1em 0.1em 0.5em 0.1em grey; /* skygge utenfor tabellen */
}

th {
    font-family: sans-serif; /* endrer font for kolonneoverskriftene */
    background: #dadada; /* endrer bakgrunnsfarge på øverste rad */
    box-shadow: inset #cfcfcf 0 0 0.4em 0.2em; /* indre skygge på øverste rad */
}

/* OPPGAVE 1 */

.fjell {
    display: block;
    max-width: 100%;
    margin: 1.5em 0;
    cursor: pointer;
}

.fjelltekst {
    padding: 0.25em 0;
}

/* OPPGAVE 2 */

input:invalid {
    border: red solid 0.15em; /* markerer ugyldige felter */
}

.formatBilde {
    display: block;
    height: 15em;
    margin: 1.5em auto;
}

/* OPPGAVE 3 */

#pil {
    text-align: center;
    font-size: 5em;
    margin: 0;
    line-height: 1em;

    /*gjør umulig å markere*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#ol_ruteHittil {
    list-style-type: none; /* fjerner nummerering */
    display: block;
    padding: 0;
    text-align: center;
}

#ol_ruteHittil li {
    display: block;
    padding: 0.2em;
    margin: 0.2em;
    background: burlywood;
    border-radius: 0.3em;
    cursor: pointer;

    /*gjør umulig å markere*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#ol_ruteHittil li:hover {
    text-decoration: line-through;
}

#ul_valgTilNesteHytte {
    text-align: center;
    padding: 0;
}

#ul_valgTilNesteHytte li {
    display: inline-block;
    padding: 0.2em;
    margin: 0.2em;
    background: burlywood;
    border-radius: 0.3em;
    cursor: pointer;

    /*gjør umulig å markere*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}