/* --- ByMenigheten CSS Style - 2021: --- */

html {
  overflow-y: scroll;
}

body {
  background-color: white;
  font-family: Georgia, Palatino, Garamond, serif;
  font-size: 1.25em; /*1.3*/
  line-height: 1.47; /*org 1.4, nå 1.35*/
  color: #303030;

	/* Riktig i 'body'?: */
  margin: 0; 
  padding:0; 

}

main { /* HTML5 "main" til alt hovedinnhold - sentrert, max-w 1024px. (Under-/mellom-headinger: "head".) */
  max-width: 1024px;
  min-width: 300px;
  margin: 0 auto; /*auto=centered:left/right*/
  width: 94%;
  overflow: auto;
}


section {  /* TEST!!! */
  clear: both;
}
.section:after { /* TEST! Clear floating after 'Section' */
  content: "";
  display: table;
  clear: both;
}


p {
  margin:0;
  margin-bottom: 0.7em;
}
p.tst {
  margin: 0.5em 0; /*top/bottom:0.5em . left/right:0em */
}
p.space {
  margin:0;
  padding-top: 1em;
}
p.plus {
  padding-bottom: 2em;
}

footer { /* Bunn av siden - går over hele siden: */
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.8em;
  color: #979797;
  text-align: center;
  background-color: #00406A;
  width: 100%;
  margin-top: 2em;
  padding-top: 1em;
  padding-bottom: 1.5em;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: none;
}
img.head { /* Class: "image-head" brukes bl.a. til heading-bilder for nye avsnitt som tar "hele" bredden (max-width: 1400px) (bilde-w >=1200px) */
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto; /* top/bottom:0, left/right:auto (=center) */
  box-shadow: 0px 2px 5px #aaaaaa;
}
img.box { /* Class: "image-box" brukes til bilder i info-box (org bilde-vidde bør være min. 400px (max:500px)) */
  display: block;
  width: 100%;
}

audio {
  width:100%;
  display:block;
  margin:0 auto;
  padding-top:0.3em; 
  padding-bottom:0.2em; 
}

video {
  width:100%;
  height:auto; 
  box-shadow: 0px 2px 5px #888888;
}

/* For bruk med Vimeo videoer: */
div.tv {
  padding: 56.25% 0 0 0;
  position: relative;
}
iframe.tv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/*vimeo.*/


hr { /* Vanlig, tynn, grå-blå delestrek */
  background-color: #CBD6E5;
  height: 1px;
  border: none;
  margin-top: 2%;
  margin-bottom: 2%;
}
hr.oline { /* Tykk og vid, orange-linje til avsnitt o.l. */
  background-color: orange;
  height: 0.3em;
  max-width: 1400px;
  margin: 0 auto; /* top/bottom:0, left/right:auto */
}
hr.bline { /* Tykk og vid, blå-linje til avsnitt o.l. */
  background-color: #80afe4;
  height: 0.3em;
  max-width: 1400px;
  margin: 0 auto; /* top/bottom:0, left/right:auto */
}

/* Unordered lists: */
ul {
  margin-top: 0;
  margin-bottom:0.2em;
  padding-left: 1em; /* reduce indent */
}
li {
  /*margin-top: 0.2em;*/
  margin-bottom:0.2em;
	margin-left:0.2em;
}


/* For download-tabeller med download-knapp:*/
table.dl td { 
  display: table-cell;
  vertical-align: top; 
  padding: 0.3em 0.07em; /* top+bottom - left+right */
}


a {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.98em;
  color:#404040;
  border: none;
  outline: 0;
}
a:hover {
  color: darkorange;
}

a.light {
  color: #979797;
}
a.light:hover {
  color: orange;
}

/* en "ren" link, uten underline (men med underline v/hover): */
a.clean {
  text-decoration: none;
}
a.clean:hover {
  text-decoration: underline;
}

a.meny_valg {
font-size: 0.8em;
line-height: 150%;
color: #707070;
text-align: center;
width: 7.3em;
display: inline-block;
vertical-align: middle;
margin:0.5em;
padding-bottom:1px;
background: white;
border-style: solid;
border-color: white;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-color: #D1D0CE;
font-family: Verdana, Geneva, Arial, sans-serif;
text-decoration: none;
}
.meny_valg:hover {
color: #505050;
padding-bottom:0px;
border-style: solid;
border-bottom-width: 2px;
border-bottom-color: #a8a8a8;
}
a.meny_valgt {
font-size: 0.8em;
line-height: 150%;
color: #404040;
text-align: center;
width: 7.3em;
display: inline-block;
vertical-align: middle;
margin: 0.5em;
padding-bottom:0px;
background: white;
border-style: solid;
border-color: white;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 1px;
border-bottom-width: 3px;
border-bottom-color:  #33acff;
font-family: Verdana, Geneva, Arial, sans-serif;
text-decoration: none;
}

/* Used for responsive menu, etc: */
.table {
  display: table;
  padding-top: 0.1em;
  padding-bottom: 0.2em;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}
/* Same table-idea as above, but used specifically for sponsor-"posters" w/float-left: */
div.sponsor1 {
  display:table;
  float:left;
  margin:0.75%;
  height:80px;
  width:130px;
  box-shadow: 1px 1px 4px #888888;"
}
div.sponsor2 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;"
}


/* Used for Hamburger-icon-drop-down-menu w/image icons (for now: on front page only): */
.hambrgicon {
  position:absolute;
  top:0;
  right:0;
  padding:0.6em 0.5em; /* top+bottom | left+right */
	width:1.7em; height:auto; /* responsive hamburger-img size */
  cursor:pointer;
}
.hambrgicon:hover {
	width: 1.8em;
}
.hambrgmenu {
  height: auto;
  width: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0; 
  background-color: #00406A;
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 2em;
}
.hambrgmenu a {
  padding: 0em 1em 0.5em 1.5em; /*top-right-bottom-left*/
  text-decoration: none;
  font-size: 0.9em;
  color: white;
  display: block;
  transition: 0.2s;
}
.hambrgmenu a:hover {
  color: orange; /* #f1f1f1; */
}
.hambrgmenu .closebtn {
  position: absolute;
  top: 0;
  right: 0;
	padding:0.5em 0.6em; /* vertical | horizontal */
	width:2em; height:auto; /* responsive close-img size */
}
.hambrgmenu .closebtn:hover {
	width: 2.1em;
}
/*end-of-hamburger-menu.*/


.kalender {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.82em;
  border: 1px solid #D6DFFF;
  height: 300px;
  overflow: scroll;
  overflow-x: hidden;
}


small {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size:0.8em;
  line-height:1.2; /*line-height: 1.3;*/
  display:inline-block; /* TEST for å se om det passer overalt med <small> som "inline-block" */ 
}

strong {
  color: #303030;
  font-size: 0.975em;
}
strong.light { /* lys og fet skrift brukt i mørkt bunnfelt */
  color: #979797;
}

/* - - - Headinger: - - - - - - - */

h1 {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 2.15em;
  font-weight: normal;
  color: #505050;
  margin: 0.4em 0 0.6em; /*top - right/left - bottom: 0.4em  0  0.65em*/
}

h2 {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 1.3em; /*TEST: WAS: 1.22em*/
	line-height: 1.3;
  font-weight: bold;
  color: #505050;
  margin: 0;
  /* margin-top: 0.3em; /* TEST !!!: WAS: 1.5%; ::: */
	margin-top:-0.2em;
	
  padding-bottom: 0.35em; /* Test: was 0,5% */
}

h3 {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 1em;
  color: #505050;
	margin: 0.8em 0 0.3em; /*top - right/left - bottom*/
}

/* H4/H5 = Nesten like: *******************************/
h4 { /* VANLIG-Heading, Blå med hvit UPPERCASE skrift: */
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.9em; /*was: 0.85em*/ 
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  background-color: #80afe4; /*blue*/
  margin: 0; /*NB: No margin outside the blue background!*/
	/*Paddingen her gir kun avstand fra teksten til kant av blå bakgrunn: */
  padding-top: 0.3em;
  padding-left: 0.8em; /*(aka:"text-indent")*/
  padding-bottom: 0.3em;
}
h5 { /* BOX-Heading, Blå med hvit UPPERCASE skrift og RUNDE HJØRNER oppe: */
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.9em; /*was: 0.85em*/ 
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  background-color: #80afe4; /*blue*/
  margin: 0; /*NB: No margin outside the blue background!*/
	/*Paddingen her gir kun avstand fra teksten til kant av blå bakgrunn: */
  padding-top: 0.3em;
  padding-left: 0.8em; /*(aka:"text-indent")*/
  padding-bottom: 0.3em;
  border-radius: 0.3em 0.3em 0 0; /*Ekstra i forhold til <h4>*/
}
h6 {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.85em;
  color: #505050;
	margin: 0.8em 0 0.3em; /*top - right/left - bottom*/
}

/*headinger.*/

/* - - - Heading modifiers: */
.slim { /* kan brukes på alle <h>eadinger - for å få tynn skrift ... */
  font-weight: normal;
}
.first { /* kan brukes på <h>eadinger når de står først/øverst og det ikke ønskes space/margin over */
	margin-top:-0.35em;
}
/*heading-mods.*/


/* - - - TEXT MODIFIERS: - - - */

.dim {
  color: gray;
}

.orange { /* Brukes f.eks. til å lage h5-box orange, istedenfor blå som er standard */
  background-color: orange;
}

.sans {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
}

.lists {
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.85em;
}

.smaller {
  font-size: 0.9em;
}
.bigger {
  font-size: 1.1em;
}

.bms { /* font for å skrive lys "ByMenigheten - Sandnes" i mørk footer */
  font-family: Garamond, Georgia, Palatino, serif;
  font-size: 1.3em;
  font-weight: bold;
  color: #bbbbbb;
}

/*text-modifiers.*/


/* - - - BOX and FRAME: - - - */

div.box {
  display: inline-block;
  width:100%;
  margin-bottom: 1.2em;
}

.bbox { /* blue box */
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  color:#070707;/* litt mørkere enn body */
  font-size: 0.85em;
  background-color: #EDF4FF;
  padding-top: 0.3em; /*0.2*/
  padding-left: 0.8em;
  padding-right: 0.7em;
  padding-bottom: 0.5em;
  border-radius: 0 0 0.45em 0.45em;
  box-shadow: 2px 5px 5px -5px #aaaaaa;
}
.obox { /* orange box */
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  color:#070707;/* litt mørkere enn body */
  font-size: 0.85em;
  background-color: #fff8e8;
  padding-top: 0.3em; /*0.2*/
  padding-left: 0.8em;
  padding-right: 0.7em;
  padding-bottom: 0.5em;
  border-radius: 0 0 0.45em 0.45em;
  box-shadow: 2px 5px 5px -5px #aaaaaa;
}

.norad { /* Kan brukes til å fjerne runde hjørner på bbox og obox */
  border-radius: 0;
}

.bframe { /* blue frame - brukes i div.box i stedet for bbox */
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.85em;
  padding-top: 0.5em;
  padding-left: 1em;
  padding-right: 0.8em;
  padding-bottom: 0.7em;
  border: 2px solid #b5c8e6;
  border-radius: 0.45em;
  overflow: hidden;
}
.oframe { /* orange frame - brukes i div.box i stedet for obox */
  font-family: Segoe UI, 'Century Gothic', 'Lucida Grande', Dotum, Calibri, Corbel, sans-serif;
  font-size: 0.85em;
  padding-top: 0.5em;
  padding-left: 1em;
  padding-right: 0.8em;
  padding-bottom: 0.7em;
  border: 2px solid #FAB51A; /* var:#f2d38a, gml:#ffe29e */
  border-radius: 0.45em;
  overflow: hidden;
}

/*box+frame.*/


/*** COLUMNS (and ROWS): ***/

.colsmall {
  width: 32%;
  float: left;
	padding-right: 3%;
}

.colmedium {   /* Is there any reason to have both col.medium and col.two ?!?: Maybe inside another col-size?? (check also in @ media section: any different behaviour? */
  width: 47%;
  float: left;
	padding-right: 3%;
}

.collarge {
  width: 62%;
  float: left;
	padding-right: 3%;
}

.colfull {
  width: 97%;
  float: left;
	padding-right: 3%;
  overflow: hidden; /*tst*/
}

.coltwo {
/*  tst: font-size: 0.85em; */
  width: 47%;
  float: left;
	padding-right: 3%;
/* TST: */ overflow:hidden;
}

.colthree {
/*  tst: font-size: 0.85em; */
  width: 30%;
  float: left;
	padding-right: 3%;
/* TST: */ overflow:hidden;
}
.rowthree {
/*  tst: font-size: 0.85em; */
  width: 30%;
  float: left;
	padding-right: 3%;
/* TST: */ overflow:hidden;
} /* Note: rowthree:nth-child(3n):clear-float is active for larger screens than 590px to avoid uneven heights on columns */

.colfour {
/*TST:*/ font-size: 0.9em;
  width: 22%;
  float: left;
  margin-left: 0%;
  margin-right: 0%;
	padding-right: 3%;
}
.rowfour {
/*TST:*/ font-size: 0.9em;
  width: 22%;
  float: left;
  margin-left: 0%;
  margin-right: 0%;
	padding-right: 3%;
} /* + nth-child ??? */

.colnews { /* "Balanced" newspaper-flow cols x2 */
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-fill: balance; /*?*/
  column-gap: 3%;
	padding-right: 3%;
  /* margin-bottom: 1.2em; /*?*/
}

.colcenter { /* En midtstilt kolonne - typisk for smale + høye plakater */
	margin: 0 auto;
	width: 50%;
  max-width: 500px;
}

/*columns.*/


/* - - - CSS buttons: - - - - - - - - - - - - - - - - */

/* Orange square +/- button to show more/less: */
div.btn {
  display:inline-block;
  width:1.7em;
  height:1.5em;
  border:1px solid lightgray;
  border-radius:0.2em;
  box-shadow: 0.1em 0.1em 0.2em #eee;
  background-color:#FFDB58;
  background: linear-gradient(#FFE87C,#FBB917);
  text-align:center;
  vertical-align: middle;
  line-height: 1.45em;
  margin-right: 0.5em;
}
a.btn {
  color:#404040;
  text-decoration: none;
}
a.btn:hover {
  text-decoration: underline;
}
/*orange-button.*/

/* Blue selection button (w/white letters): */
a.bknapp {
  border: none;
  border-radius: 0.25em;
  padding: 0em 0.6em 0.15em 0.6em;
  margin: 0.2em 0.1em;
  text-align: center;
  text-decoration: none;
  /*display: inline-block;*/
  white-space: nowrap; /*tst*/
  cursor: pointer;
  color: white;
  box-shadow: 1px 1px 2px #bbb;
}
a.bknapp { /* blå knapp: */
  background: linear-gradient(#A2CEFF,#7AA6D9);
  border:1px solid #80afe4;
}
a.bknapp:hover { /* oransje 'hover': */
  background: linear-gradient(#FFD757,#FFAF00);
  border:1px solid #FFB846;
}
.play_arrow::after { /* Solution to avoid iOS to create a blue playbutton of UTF8: &#9654; (right-pointing-triangle): */
  content: "\25B6 \FE0E";
}
/*blue-button.*/


/* - - - START OF @MEDIA QUERIES: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Turn ON a <div> based on screen size (@media-queries)- Default is OFF (display:none): */ 
.onoff_s { 
  display: none; 
}/*onoff_switch.*/

/* - - - Query for screens LARGER THAN: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

@media only screen and (min-width: 591px) { /* (See also query for max-width: 590px below) */
  .rowthree:nth-child(3n) { /* fikser float-left "sperre"-problematikk med ulike høyder på kolonnene */
    clear: both;
  }
}

@media only screen and (min-width: 769px) { /* (See also query for max-width: 768px below) */
  .rowfour:nth-child(4n) { /* fikser float-left "sperre"-problematikk med ulike høyder på kolonnene */
    clear: both;
  }
}

/* - - - Query for screens SMALLER THAN (starting with large screens and going smaller: - - - - - - - - */

@media only screen and (max-width: 1200px) {  /* if screen-width is <= 1200 px, then use this style: */

  h1 {
    font-size: 2em;
  }

} /*<1200.*/


@media only screen and (max-width: 900px) {  /* if screen-width is <= 900 px, then use this style: */

  body {
    font-size: 1.2em;
  }
  h1 {
    font-size: 1.9em;
  }
  h2 {
    font-size: 1.2em;
  }

  .colsmall {
    width: 34%;
  }
  .collarge {
    width: 60%;
  }

	.colcenter {
		width: 55%;
	}

} /*<900.*/


@media only screen and (max-width: 768px) {  /* if screen-width is <= 768 px, then use this style: */

  body {
    font-size: 1.15em;
  }
  h1 {
    font-size: 1.8em;
  }
  h2 {
    font-size: 1.1em;
  }

  .colsmall {
    width: 39%;
  }
  .collarge {
    width: 55%;
  }
	.colmedium {
    width:97%; /* tst... */
    padding-right: 0;
    /*padding-left: 0; /* prøv å fjerne denne, trengs ikke */
  }

  .colfour { /* fire kolonner blir til to */
    width: 47%;
  }
  .colfour:nth-child(3n) { /* fikser float-left "sperre"-problematikk med ulike høyder på kolonnene - - - SKAL BORT? v/colfire ?!*/
    clear: both;
  }
  .rowfour { /* fire kolonner blir til to */
    width: 47%;
  }
  .rowfour:nth-child(2n) { /* fikser float-left "sperre"-problematikk med ulike høyder på kolonnene */
    clear: both;
  }

	.colcenter {
		width: 60%;
	}

  .collarge .colnews { /* Her blir avis-toer-kolonnen til _en_ kolonne - _HVIS_ DEN ER INNE I EN LARGE COL: */
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    padding-right: 0%;
  }

} /*<768.*/


@media screen and (max-width: 590px) {  /* if screen-width is <= 590 px (was 600, but changed for my Xperia mobile..), then use this style: */

  body {
    font-size: 1.07em; /* was: 1.05 */
  }
  h1 {
    font-size: 1.55em;
  }
  h2 {
    font-size: 1.2em;
  }

  /* Turn OFF a <div> based on screen size: */ 
  .onoff_s { 
    display: block; 
  }/*onoff_switch.*/
	
  .colsmall {
    width: 97%;
  }
  .collarge {
    width: 97%;
  }

  .colthree { /* tre kolonner blir til to */
    width: 47%;
  }

  .rowthree { /* tre kolonner blir til to */
    width: 47%;
  }
  .rowthree:nth-child(2n+1) { /* fikser float-left "sperre"-problematikk med ulike høyder på kolonnene */
    clear: both;
  }

	.colcenter {
		width: 75%;
	}
	
  .kalender {
    overflow:hidden;
    height: 380px;

    font-size: 0.9em;

  }

} /*<590.*/


@media screen and (max-width: 480px) {  /* if screen-width is <= 480 px, then use this style: */

  h1 {
    font-size: 1.45em;
  }
  h2 {
    font-size: 1.15em;
  }

  .colsmall {
    width: 100%;
    padding-right: 0;
  }
  .collarge {
    width: 100%;
    padding-right: 0;
  }
	
	.colmedium {
    width:100%; /* tst... */
    padding-right: 0;
  }
  .coltwo {
    width: 100%;
    padding-right: 0;
    /*TST:*/ font-size: 1em;
  }
	.colfull {
		width: 100%;
    padding-right: 0;
	}
	div.colsmall .coltwo { /* NB: Her endres _ikke_ 'coltwo' (se ovenfor) dersom den er inne in en 'div small' */
		  width: 47%;
	    padding-right: 3%;
	}

  .colthree {
    margin-right: 3%;
    padding-right: 0; /*??*/
  }

  .rowthree {
    margin-right: 3%;
    padding-right: 0; /*??*/
  }

  .colfour {
    width: 100%;
    padding-right: 0;
    /*TST:*/ font-size: 1em;  /* sjekk om denne trengs ... */
  }
  .rowfour {
    width: 100%;
    padding-right: 0;
    /*TST:*/ font-size: 1em;  /* sjekk om denne trengs ... */
  }

	.colcenter {
		width: 90%;
	}

  .colnews { /* Her blir avis-toer-kolonnen til _en_ kolonne: */
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    padding-right: 0%;
  }

} /*<480.*/


@media screen and (max-width: 409px) {  /* if screen-width is <= 409 px, then use this style: */

  .colthree {
    width: 100%;
  }
  .rowthree {
    width: 100%;
  }

}/*<409.*/


@media screen and (max-width: 400px) {  /* if screen-width is <= 400 px, then use this style: */

  h1 {
    font-size: 1.2em;
  }
  h2 {
    font-size: 1em;
  }

} /*<400.*/


/* - - - END of @media queries - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */