* {
	box-sizing: border-box;
  /*font-family: 'courier'; */
}

body {
	background-image: url("../static/background_mobile.png");
}

/* mobile first */

img#img_church {
	width: 100%;
}

img#img_background_mobile {
	position: relative;
	width: 100%;
	z-index: -1;
}

img#img_background_full_size {
	display: none;
}
/* the topMenu, log in and language */



ul#mainMenu {
	margin-top: 50px;
	text-align: center;
	font-size: 250%;
}

ul#mainMenu > li {
	margin-top: 20px;
}

ul#mainMenu > li:hover {
	color: grey;
}


a.musicLink {
	display: none;
	color: black;
}

br.musicLink {
	display: none;
}

/*---------- dropdown musikk-meny ----------------- */

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown_content {
	display: none;
	position: absolute;
	left: -250px;

	padding-top: 25px;
	padding-bottom: 25px;
	line-height: 40px;
	background-color: red;
	min-width: 700px;
	opacity: 0.5;
	z-index: 1;
}

/*----------- contactInfo ------------------ */

.contactContainer {
	position: relative;
	display: inline-block;
}
.contactInfo {
	display: none;
	color: black;
	opacity: 0.5;
	background-color: red;
	min-width: 700px;
}

a.backToMainPage {
	display: none;
	position: absolute;
	left: 20px;
	top: 20px;
	padding: 50px;
	background-color: brown;
	opacity: 0.5;
	color: white;
}

div.contactInfoChurchContainer {
	position: relative;
	display: inline-block;
}

div.information {
	position: absolute;
	top: 20px;
	right: 30px;
	background-color: red;
	padding: 20px;
	text-align: center;
	opacity: 0.7;
	min-width: 400px;
	font-size: 18pt;
	z-index: 1;
}

div.contactInfoChurch {
	display: none;
	position: absolute;
	top: 20px;
	right: 20px;
	background-color: brown;
	color: white;
	opacity: 0.5;
	min-width: 400px;
	font-size: 18pt;
	z-index: 1;
}

p.buttonSongs {
	font-size: 150%;
}

div.customSongsInfoContainerSmall {
	display: none; /* skjult før button er trykt */
	position: absolute;
	right: 20px;
	top: 210px;
	font-size: 18pt;
}

div.customSongsInfoSmall {
	display: none;
	background-color: brown;
	color: white;
	opacity: 0.5;
}

div.musicList {
	display: none;
	position: absolute;
	bottom: 140px;
	left: 160px;
	background-color: brown;
	opacity: 0.5;
	color: white;
	font-size: 24pt;
	line-height: 30px;
}

div.musicListBigScreen {
	display: none;
}

div.contactInfoChurchBigScreen {
	display: none;
}

div.customSongsInfo {
	display: none;
}

a.backToMainPageBigScreen {
	display: none;
}

.songTitle {
	width: 500px;
}
.artist {
	font-size: 18pt;
	color: white;
}

.playPauseIcon {
	text-align: center;
}

img#img_church_big_screen {
	display: none;
}

div#leftBigScreenContainer {
	display: none;
}

div#rightBigScreenContainer {
	display: none;
}

.class_active_bg {
	background-color: red;
}

.class_active_opacity {
	opacity: 0.8;
}

/*-------------- settings for the big screen ----------- */

@media only screen and (min-width: 1024px) {

	body {
		background-image: url("../static/background_full_size.png")
	}

	ul#mainMenu {
		width: 90%;
		margin: auto;
		text-align: center;
	}

	ul#mainMenu > li {
		display: inline;
		float: left;
		text-align: center;
		margin-left: 50px;
	}

	/*---------- dropdown musikk-meny ----------------- */

	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown_content {
		display: none;
		position: absolute;
		padding-top: 15px;
		padding-bottom: 15px;
		line-height: 20px;
		background-color: red;
		min-width: 500px;
		opacity: : 0.5;
		z-index: 1;
	}


	.dropdown_content > a {
		font-size: 12pt;
		color: black;
	}

	.dropdown:hover .dropdown_content {
		display: block;
	}

	.contactContainer {
		position: relative;
		display: inline-block;
	}

	.contactInfo {
		display: none;
		position: absolute;
		left: -300px;
		font-size: 24pt;
		color: black;
		opacity: 0.5;
		background-color: red;
		min-width: 700px;
		z-index: 1;
	}

	.contactContainer:hover .contactInfo{
		display:block;
	}

	a.musicLink {
		display: inline-block;
	}

	br.musicLink {
		display: block;
	}

	/*---------- big screen gravferdsongar ------------- */
	div.contactInfoChurch {
		display: none;
	}

	div#leftBigScreenContainer {
		display: block;
		float: left;
		width: 35%;
	}

	div#rightBigScreenContainer {
		display: block;
		float: right;
		width: 65%;
	}

	div.contactInfoChurchContainer {
		display: none;
	}


	img#img_church {
		display: none;
	}

	img#img_church_big_screen {
		display: block;
		width: 95%;
		margin: auto;
	}

	div.information {
		display: none;
	}

	div.contactInfoChurch {
		display: none;
	}

	.artist {
		font-size: 10pt;
		color: white;
	}

	div.arrowAndInfoContainer {
		display: block;
		width: 80%;
		margin: auto;
		margin-top: 40px;
	}

	a.backToMainPageBigScreen {
		display: block;
		text-align: center;
		width: 10%;
		float: left;
		color: white;
		background-color: brown;
		opacity: 0.5;
	}

	div.contactInfoChurchBigScreen {
			display: block;
			width: 80%;
			float: right;
			background-color: brown;
			opacity: 0.5;
			color: white;
			font-size: 12pt;
			line-height: 20px;
	}

	div.customSongsInfoContainer {
		display: block;
		width: 80%;
		margin: auto;
	}

	div.customSongsInfo {
		display: block;
		margin-top: 40px;
		margin-bottom: 200px;
		width: 80%;
		float: right;
		color: white;
		background-color: brown;
		opacity: 0.5;
	}

	table#musicListBigScreenTable {
		width: 80%;
		margin: auto;
	}

	div.musicListBigScreen {
		display: block;
		clear: both;
		width: 80%;

		margin: auto;

		background-color: brown;
		opacity: 0.5;
		color: white;
		font-size: 12pt;
		line-height: 20px;
	}

}