* {
	box-sizing: border-box;
}

/* mobile first */

#omriss {
	background: url("/www_bipolardisorder/static/a_way_out_gutsji_bama.png");
	background-repeat: repeat;
  background-size: 100% 1500px;
  height: 4500px;
}


/*
#loadMusicLibrary {
	width: 100%;
}
*/

.aktivSong {
	background-color: hsla(39, 100%, 36%, 0.4);
	border-radius: 10px;
}

.modal {
		top: 20px;
		padding: 20px;
		left: 10px;
		margin: auto;
		width: 95%;
		display: none;
		font-family: 'Caveat';
		font-size: 14pt;
	}

.modal > h1 {
	font-size: 18pt;
}
.modal > p {
	font-size: 14pt;
	margin-bottom: 10px;
}

div.navBar {

}

ul.navBar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li.navBar {
	width: 100%;
	color: white;
	font-family: 'Caveat';
}

div#showArt {
	color: white;
	font-family:'Caveat'
}

div#showMusicPlayer {
	color: white;
	font-family:'Caveat'
}

div#showLyrics {
	color: white;
	font-family:'Caveat'
}

section#smallScreenModeControls {
	margin-top: 30px;
	margin-bottom: -45px;
}
/*------------------------------- audioPlayerBar -----------------------------*/


span#audioPlayerBar {
	display: block;
	margin-top: -8.5px;
	width: 100%;
	border: 1px solid lightpink;

}

span#audioPlayerHead {
	width: 5px;
	border-radius: 20px;
}
/* langsom fade-in av lenkelista øverst */

/* The animation code */
@keyframes linkListFadeIn {
    from {color: #eeeeee;}
    to {color: white;}
}

span#reepeatIcon {
	color: black;
	opacity: 0.9;

	display: inline-block;
  width: 100%;
}

span#repeatIcon:hover {
	color: #92e1e5;
	opacity: 0.9;
}

span#repeatOneIcon {
	color: white;
	opacity: 0.9;
	display: none;
}

span#repeatOneIcon:hover {
	color: #92e1e5;
	opacity: 0.9;
}
/* The element to apply the animation to */

.linkList {
	color: white;
	margin-bottom: 0px;
	margin-right: 20px;
	animation-name: linkListFadeIn;
    animation-duration: 40s;
}

.linkList:hover {
	color: lightgreen;
}
.bildeFgFarge {
	background-color: grey;
	opacity: 0.1;
}

.bildeStorleik {
	width: 100%;
	height: 38vh;     /* same høgd som tabellen */
}

.altBilde {   /* for å legge tekst oppå bilde */
	position: relative;
}

.bildeTekst {
	position: absolute;
	left: 10px;
	top: 10px;
}



#omrissOpaque {
	background-color: black;
	opacity: 0.8;
	height: inherit;
	width: inherit;
	padding-top: 50px;

}


/* kunst, musikk og songtekst-boksane skal kun synast ein og ein
   på små skjermar */

#kunst {
	display: none;
}

#musikkSpelar {
	margin-top: 50px;
	/*height: 1000px; */
}

#songTekstar {
	display: none;
}

thead, tbody {
	display: block;
	width: 90%;
	margin: auto;
}

tbody {
	/*
	height: 30vh;
	overflow-y: auto;
	overflow-x: hidden; */
	color: white;
}

table, tr, th, td {
	border-collapse: collapse;
	font-size: 110%;
	font-family: Caveat;
}


table {
	width: 100%;
}

h1 {          /* overstyre tailwindcss */
	font-size: 36px;
}

h2 {
	font-size: 24px;
}

.lydTabell {
	width: 100%;
}

/* kolonnebreidda for dei to kolonnene i tabellen */

.td1 {
	/*width: 450px; */
}

.td2 {
	/* width: 100px; */
	text-align: center;
}

.td3 {
	/* width: 100px; */
	text-align: center;
}

.playPauseIcon {
	color: black;
	opacity: 0.1;
	display: inline-block;
    width: 100%;
}

a.playPauseIcon:hover {
	/*
	color: #92e1e5; */
	opacity: 0.9;
}

.downloadIcon {
	color: black;
	opacity: 0.9;
}

a.downloadIcon:hover {
	color: #92e1e5;
	opacity: 0.9;
}

/*--------- lyrics ------------ */

.lyrics {
	position: absolute;
	font-family:  'Courier';
	width: 80%;
	margin: auto;
	display: none;
}

/* -------- artWorks ---------- */

div#kunst {
	margin-top: 50px;
}

#artWork_iwk {
	padding-left: 20px;
	padding-right: 40px;
	display: none;
	color: lightgrey;
}

.img_iwk_king {
	width: 100%;
}

.img_ylu {
	width: 70%;
	margin: auto;
}

.img_rwm {
	width: 90%;
	margin: auto;
}

.img_s {
	width: 100%;
}

.img_g {
	width: 100%;
}

.img_gb {
	width: 100%;
}

.img_dftm {
	width: 100%;
}

.img_iwgtysn {
	width: 100%;
}

.img_bb {
	width: 90%;
}

.img_bd {
	width: 100%;
}

.img_wag{
	width: 100%;
}

.img_ffff {
	width: 100%;
	margin: auto;
}

.img_lr {
	width: 100%;
	margin: auto;
}

.img_aa {
	width: 100%;
	margin: auto;
}

.img_sd {
	width: 50%;
	margin: auto;
}

.img_st {
	width: 100%;
}

.img_sr {
	width: 80%;
	margin: auto;
}

#artWork_rii {
	padding-left:30px;
	padding-right: 40px;
	display: none;
	color: white;
}

#artWork_idwfn {
	padding-left: 18px;
	padding-right: 40px;
	display: none;
	color: white;
}

#artWork_pm {
	padding-left: 28px;
	padding-right: 40px;
	display: none;
	color: white;
}

#artWork_s {
	padding-left: 10px;
	padding-right: 40px;
	display: none;
	color: white;
}

#artWork_g {
	padding-left: 40px;
	padding-right: 40px;
	display: none;
	color: white;
}

#artWork_gb {
	padding-left: 40px;
	padding-right: 40px;
	display: none;
	color: white;
}

#artWork_dftm {
	padding-left: 40px;
	padding-right: 40px;
	display: none;
	color: white;
}

#artWork_tf {
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	color: white;
}

#artWork_iwgtysn {
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	color: white;
}

#artWork_bb {
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	color: white;
}

.tf_img_artist {
	width: 100%;
}

.img_tf_stupet {
	width: 100%;
	display: none;
}

#artWork_bd {
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	color: lightgrey;
}

#artWork_c {
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	color: lightgrey;
}

#hovud {
	background-repeat: no-repeat;
	background-size: 100%;
	margin-bottom: 50px;
}

#artWork_ms {
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	color: lightgrey;
}

#artWork_ylu {
	display: none;
	color: white;
}

#artWork_waii {
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	opacity: 1;
	color: white;
}

#artWork_rwm {
	display: none;
	color: white;
}

#artWork_wag {
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	color: white;
}

#artWork_waacc{
	display: none;
	padding-left: 10px;
	padding-right: 40px;
	color: white;
}

#artWork_ffff {
	display: none;
	color: white;
}

#artWork_lr {
	display: none;
	color: white;
}

#artWork_aa {
	display: none;
	color: white;
}

#artWork_sd {
	display: none;
	color: white;
}

#artWork_st {
	display: none;
	color: white;
}

#artWork_sr {
	display: none;
	color: white;
}


#btn_chords {
	border-radius: 5px;
	float: right;
	margin-right: 50px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 15px;
	display: none;
}

#lpPlayer {
	float: right;
	margin-right: 20px;
	padding-left: 10px;
}

.lpButton {
	border-radius: 5px;
	float: right;
	margin-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 15px;
}

/*---------- lyrics and chords ------------ */

#lyricsHeader {
	font-family: 'Caveat';
	border-bottom: 1px solid lightgrey;
	width: 90%;
	margin: auto;
	margin-top: 14px;
	margin-bottom: 20px;

}

.cspace {
	left: 10px;
}

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

span.chords_iwk {
	position: absolute;
	top: -20px;
	left: 10px;
	z-index: 2;
	height: 50px;
}

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

span.chords_rii {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_rwm {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}


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

span.chords_idwfn {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_s {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_g {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_gb {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_dftm {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_tf {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_iwgtysn {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_bb {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

span.chords_bd {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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



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

span.chords_c {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_ms {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_ylu {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_ffff {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}


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

span.chords_lr {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_aa {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_sd {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_st {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

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

span.chords_sr {
	position: absolute;
	top: -20px;
	z-index: 2;
	height: 50px;
}

[class*="chords_"] {
	font-family: 'Caveat';
}

[class*="chords_anchor_"] {
	font-family: 'Courier';
	height: 150%;
}

div#loadingMusicLibrary {
	width: 25%;
	height: 200px;
	margin: auto;
	display: none;
}

#soundManager2 {
	color: gray;
	font-family: 'Caveat';
	position: absolute;
	right: 50px;
	margin-top: 20px;
}

/*--------------- feedback form ----------------*/

div#feedbackForm {
		display: none;
		margin-top: 30px;
		font-family: courier;
}

#feedbackTextLabel {
	margin-right: 10px;
}

#feedbackSignatureLabel {
	margin-right: 10px;
}

#feedbackSubmit {
	margin-top: 10px;
	padding: 5px;
}

#feedbackThankYou {
	display: none;
}

#readFeedbackSurface {
	width: 80%;
	margin: auto;
	display: none;
	font-family: courier;
	margin-top: 20px;
}

#readFeedbackSignature {
	position: absolute;
	right: 100px;
}

/*-------------- modals ------------------ */

.close_window {
	position: absolute;
	top: 10px;
	right: 10px;
}

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

	#omriss {
		background: url("static/a_way_out_gutsji_bama.png");
		background-repeat: repeat;
	  background-size: 100% 1500px;
	  height: 3000px;
	}

	section#smallScreenModeControls {
		display: none;
	}


	.modal {
		top: 250px;
		left: 50%;
		margin: auto;
		width: 800px;
		margin-left: -400px;
		height: 400px;
		display: none;
		font-family: 'Caveat';
	}

	.modal > h1 {
		font-size: 32pt;
	}
	.modal > p {
		font-size: 20pt;
		margin-bottom: 10px;
	}

}