/* CSS Document */
html{
  height: 100%;
}

input{
-webkit-appearance: none;
-webkit-border-radius: 0;
}

/*Fargar*/
:root{
  --farge-kvit: #fff;
  --farge-kvit-svak: #ccc;
  
  --farge-svart: #333;
  
  --farge-gra: #E7E9EB;
  --farge-gra-mork: #C0C7CF;
  --farge-gra-mork2: #999;
  --farge-gra-morkere: #666;
  
  --farge-overskrift: #666;

  --farge1: #88b852;
  --farge1-lys: #D4EFB6;
  
  --farge-lenker: #324877;
  
  --farge-error: #D76E6E;
  --farge-error-lys: #FFAAAA;
}

/*STATUSMELDINGAR*/
div#feil{
	margin-top: 10px;
  background-color: #FFBBAA;
	padding: 10px;
	color: var(--farge-svart);
	letter-spacing: 1px;
	text-align: center;
	font-weight: bold;
}
div#ok{
	background-color:#BBFF88;
	padding:10px;
	color: var(--farge-svart);
	letter-spacing: 1px;
	text-align:center;
	font-weight:bold;
}
div#status{
	margin:13px 0px 5px 0px;

	min-height:50px;
	width: 100%;;
}
/*FELLES*/
input{
  margin-top: 10px;
  padding: 10px;
  border: none;
}
form{
  width: 100%;
  display: flex;
}

/*INNLOGGING*/
body.logginn{
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
  margin: 0;
  font-size:13px;
	background-color: var(--farge1);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
div#logginn_innhold{
	margin-top: -100px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
  background-color: var(--farge1);
}
div#logginn_topp{
  width: 100%;
	padding: 20px 20px 5px 20px;
  display: flex;
  flex-flow: column;
  align-items: center;
}
img.logginn_logo{
	margin-bottom: 10px;
  width: 64px;
}
h1.logginn{
  color: var(--farge-kvit);
  margin: 0px 0px 10px 0px;
	font-size: 170%;
	letter-spacing: 0.5px;
  text-align: center;
}
div#logginn_bunn{
  width: 100%;
	padding: 5px 20px 20px 20px;
  display: flex;
  flex-direction: column;
}
input.logginn_knapp{
  background-color: var(--farge1-lys);
  font-weight: bold;
  color: var(--farge-overskrift);
}
input.logginn_knapp:hover{
  cursor: pointer;
}


/*HOVUDSIDA*/
body.hovedsida{
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height: 1.5;
	background-color: var(--farge-kvit);
  color: var(--farge-svart);
	margin:0;
	overflow:scroll;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
/*Struktur*/
div#innhald{
	max-width: 800px;
	/*padding: 0px 10px 0px 10px;*/
  display: flex;
  flex-flow: row wrap;}
	
div#underinnhald{
	width: 100%;
  background-color: var(--farge-kvit);
	padding: 0px 0px 50px 0px;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

div.brukerinfo{
  width: 100%;
  display: flex;
}
div.topp_venstre{
  width: 75%;
  display: flex;
  align-items: center;
  justify-content:flex-start;
  color: var(--farge-overskrift);
  padding-left: 10px;
}
div.topp_hoyre{
  width: 25%;
  display: flex;
  align-items: center;
  justify-content:flex-end;
  padding-right: 10px;
}
div.meny{
	width: 100%;
	margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
div.meny_valg{
	width: 125px;
	height: 125px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
div.meny_gruppe{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
div.meny_inner{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
div.brodsmuler{
	margin-top: 2px;
	padding: 0px 10px 0px 10px;
	color: var(--farge-gra-mork2);
	font-weight: bold;
  display: flex;
  flex-flow: row wrap;}

div.beskrivelse{
  min-height: 50px;
  width: 100%;
}
div.liste{
  font-size: 85%;
}

div#gruppedetaljer_topp{
	margin-bottom: 10px;
	position: relative;}

div.rediger{
	background-color: var(--farge1);
	color: var(--farge-kvit);
	line-height:200%;}

div.rediger_avsnitt{
	background-color: var(--farge1);
	color: var(--farge-kvit);
	padding: 10px;}
	
div.rediger_avsnitt h2, div.rediger_avsnitt h3{
	color: var(--farge-kvit);}

div.mobil_skjult{
  display: none;
}
div.pc_skjult{
  display: inline;
}

/*Overskrifter og avsnitt*/
h1#logo{
	margin: 0px 0px 10px 0px;
	color: var(--farge-svart);
	font-size: 170%;
	padding-left: 10px;
	letter-spacing: 0.5px;}
h2{
	color: var(--farge-overskrift);
	letter-spacing: 0.5px;
	margin: 50px 0px 0px 10px;}
h3{
  color: var(--farge-overskrift);
  font-weight:100;
	letter-spacing: 0.5px;
	margin: 3px 10px 0px 10px;
}
p.margin-left{
	margin-left: 15px;}
p.liten{
	font-size: 85%;}
	
/*Lenker*/
a{
  color: var(--farge-lenker);}
a:visited{
	color: var(--farge-lenker);}
a.liste{
	text-decoration:none;}
a.liste:hover{
	color: var(--farge1);}
a.arkiv{
	color: var(--farge-gra-mork2);
	text-decoration:none;
	display:block;}
a.arkiv:hover{
	color: var(--farge-lenker);}	
a.avsnitt{
	color:inherit;}
a.avsnitt:hover{
	color:inherit;
	border: 1px solid #CCC;
	margin: -1px;}	
a.avsnitt:hover h3{
	color: var(--farge1);}
a.avsnitt:hover span{
	color: #000;
}
a.meny{
	color: var(--farge-overskrift);
	text-decoration:none;
	font-size:15px;
	width: 100%;
	height: 100%;
	background-color: var(--farge-gra);
	letter-spacing: 1px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
a.meny:hover{
	background-color:#dadada;}	
a.brodsmuler{
	color: var(--farge1);
	font-weight:bold;
	text-decoration:none;}
a.edit{
	font-size:12px;
	text-decoration:none;}
a.bryter{
	font-size:10px;
	text-decoration:none;
  color: var(--farge-gra-mork2);
  line-height: 1;}
a.logg_ut{
	color: var(--farge-gra);
	font-size: 110%;
	letter-spacing: 0.5px;}

/*Input og textarea*/
textarea{
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height: 1.5;
	color: #111;
	height: 50px;
	padding: 10px;
	width: 100%;
	background-color: var(--farge-gra);
	border: none;
}
textarea.tekstfelt{
  max-width: 500px;
  margin-top: 10px;
}
textarea.rediger{
  background-color: var(--farge-kvit);
  font-size: inherit;
}
input.text{
	height: 15px;
	padding: 10px;
	color: #111;
	background-color: var(--farge-gra);
	border: none;
	border-bottom: 1px solid #CCC;}
input.text:focus{
	background-color: #DBE1EC;
	border-bottom: 1px solid #576A95;}
input.navn{
	width:300px;}
input.regnr{
	width:100px;}
input.submit{
	padding: 10px 20px 10px 20px;
	color: var(--farge-kvit);
	background-color: var(--farge1);
	border: none;
	font-weight: bold;}
input.submit:hover{
	background-color: #9aca62;
	cursor: pointer;}
input.submit_form{
  width: 90px;
}
input.slett{
	padding: 8px 16px 8px 16px;
	margin-bottom: 5px;
	width: 100%;
	color: var(--farge-kvit);
	background-color: var(--farge-gra-mork2);
	border: none;
	font-weight: bold;
	font-size: 70%;
  max-width: 150px;}
input.slett:hover{
	background-color: #b0b0b0;
	cursor: pointer;}
input.tall{
	width:40px;}
input.dato{
	min-width:125px;}
input.tid{
	width:50px;}
input.merknad{
	width: 95%;}
input.rediger{
  background-color: var(--farge-kvit);
  font-size: inherit;
}
input.rediger_merknad{
  width: 100%;
  min-width: 150px;
}
div.liste input, div.liste textarea.tekstfelt{
  margin-top: 0;
}

/*Flex og tabell*/
.flex{
  display: flex;
}
.flex_gruppe{
  display: flex;
  flex-flow: row wrap;
  box-sizing:border-box;
}
div.flex_column{
  flex-direction: column;
}
.flex_row{
  flex-direction: row;
}
.flex_no_wrap{
  flex-wrap: nowrap;
}
div.flex_container_start{
   justify-content: flex-start;
}
div.flex_container_end{
   justify-content: flex-end;
}
div.flex_items_start{
   align-items: flex-start;
}
div.flex_items_center{
   align-items: center;
}
div.flex_item_start{
  align-self: flex-start;
}
div.flex_item_end{
  align-self: flex-end;
}
a.liste div{
  padding: 10px;
}
.flex_siste{
  margin-left: auto;
  width:60px;
  min-width:60px;
}

/*Lister*/
ul {
	margin: 0px 0px 15px 0px;}

/*Generelt*/
.liste_bakgrunn{
  background-color: var(--farge-gra);}
.gra{
	color: var(--farge-gra_lys);}
.mork_gra{
	color: var(--farge-gra-morkere);}
.strong{
	font-weight:bold;}
.italic{
	font-style:italic;}
.underline{
	text-decoration:underline;}
.no_underline{
	text-decoration:none;}
.profilfarge_1{
	color: var(--farge1);}
.border-top{
	border-top: 1px solid #CCC;}
.border-bottom{
	border-bottom: 1px solid #CCC;}
.border-right{
	border-right: 1px solid #CCC;}
.margin-top_10{
	margin-top: 10px;
}
.margin-top_50{
	margin-top: 50px;
}
.margin-right_10{
  margin-right: 10px;
}
.padding_10{
  padding: 10px;
}
.padding_10_no_top{
  padding: 0px 10px 10px 10px;
  margin-top: -8px;
}
.padding_10_top_bottom{
  padding: 10px 0px 10px 0px;
}
.padding-left_10{
	padding-left: 10px;}
.padding-top_30{
	padding-top: 30px;}
.juster_hoyre{
	text-align: right;}
.svak{
  color: var(--farge-gra-morkere);}
.liten_skrift{
	font-size: 85%;}
.mini_skrift{
	font-size: 70%;}
.bredde_100{
  width: 100%;
}
.bredde_75{
  width: 75%;
}
.bredde_65{
  width: 65%;
}
.bredde_50{
  width: 50%;
}
.bredde_25{
  width: 25%;
}
.bredde_dato{
  min-width: 75px;
}
.bredde_tid{
  min-width: 40px;
}
.bredde_resten{
  flex-grow: 1;
}
div.bredde_rediger_merknad{
  flex-grow: 1;
  min-width: 300px;
}
.juster_hogre{
  text-align: right;
}
.icon{
  width: 16px;
  margin-left: 10px;
}

/*Images*/
div.meny_valg img{
  width: 40px;}
img.valign{
	vertical-align:middle;}
img.last_ned{
	cursor: pointer;
	margin-right: 5px;}
img.last_ned_pdf{
	cursor: pointer;
	position: absolute;
		bottom: 15px;
		right: 0px;}
img.inaktiv{
	opacity: 0.4;}
img.bryter{
  width: 35px;
  margin-left: 5px;
  transform: rotate(-180deg);}

/*Span*/
span.slett{
	font-size:12px;
  cursor:pointer;}
span.midtstill{
	vertical-align: middle;}
span.tom_tekst{
	color: var(--farge-gra-morkere);}
span.lenke{
	color: var(--farge-lenker);
	text-decoration: underline;
	cursor: pointer;}

/*Responsive innstillingar*/
@media only screen and (min-width: 801px) {
  body.hovedsida{
    background-color: var(--farge-gra);
  }
  div#underinnhald{
    border: 1px solid var(--farge-gra-mork);
    margin-top: 50px;
    padding: 10px 25px 50px 25px;
  }
  div.mobil_skjult{
    display: inline;
  }
  div.pc_skjult{
    display: none;
  }
  .pc_bredde_50{
    width: 50%;
  }
}