BODY, P, TD, li , select, textarea {
	font-family: Lucida Sans Unicode, Lucida Grande, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",  "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",  "Droid Sans", "Helvetica Neue", sans-serif;
	line-height: 1.5em; 
	font-size: 16px; 
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	hyphenate-before: 3;
	hyphenate-after: 3;
}

body {
	margin: 0px;
	padding: 0px;
	background-size: 200px 200px;
	background-repeat: repeat;
	background-color:  #;
/* 
	background-image: url("paper_01.jpg");
	background-image: url("ivory-off-white-paper-texture.jpg");
	background-image: url("bg.jpg");
	background-attachment: fixed;
 */
}

/* 
kan slettes ude i det ganske land:
 .hovedbody, .opgavebody, .helsidesopgavebody, .svarbody
 */

img, audio, video, div, p, .lokalindholdsfortegnelse {
	max-width: 100%;
}

* {	max-width: 100%;}

* {
    box-sizing: border-box;
}

.row:after {
	content: "";
	clear: both;
	display: table;
}


[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}

/*  Afstand mellem tekstfelter i harmonisk analyse, ikke brugt */
	.afstand { font-size: 12px; letter-spacing: 1.5ex}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	body { background: ;}
	
	p.SideHovedeAfsnit  { display: ;}
	p.SideHovedeAfsnit {font-size: 24px; text-align:center;}
	.hovedbillede  { max-width: 50px; }
	p.TopMenu {font-size: 14px; text-align: left;}
	p.TopMenu a { padding-left: 3px;  }

	div.venstremenu { display: none;}
	#hovedfelt {	margin: 0px;}

	.menuknap, .menuright, .oeveknap, .topoeveknap { height:16px; }
	.menuknap, .menuright, .oeveknap, .topoeveknap { max-height:30px; }
	.pile {width:20px;}

	/* .tangentbeholder img { width: 50%; height: auto;} */
/* 
	.tangentbeholder img { transform:scale(0.8,0.8);}
 */
	.FunktionTrin {font-size: .9em; font-weight: bold;}
	.afstand { font-size: 0.9vw;}
	.afstandsindloeb { font-size: 0vw;}
	
	p { text-align: left;}
	.firstheader, .navigationsfelt, .oevelsesnavigationsfelt, .toptxt { font-size: 1em; }

	.visilille { display: inline;}
	.visimellem { display: none;}
	.visistor { display: none;}

} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	body { background: ;}

	p.SideHovedeAfsnit {font-size: 32px; text-align:center;}
	.hovedbillede  { max-width: 70px; }
	p.TopMenu {font-size: 14px; text-align: left;}
	p.TopMenu a { padding-left: 12px;  }

	div.venstremenu { display: none;}
	#hovedfelt {	margin: px; }

	.menuknap, .menuright, .oeveknap, .topoeveknap { height:24px; }
	.menuknap, .menuright, .oeveknap, .topoeveknap { max-height:34px; }
	.pile {width:26px;}

	/* .tangentbeholder img { width: 50%; height: auto;} */
/* 
	.tangentbeholder img { transform:scale(0.8,0.8);}
 */
	

	.FunktionTrin {font-size: 1em; font-weight: bold;}
	.afstandsindloeb { font-size: 1vw;}
	.afstand { font-size: 1vw;}

	p { text-align: left;}
	.firstheader, .navigationsfelt, .oevelsesnavigationsfelt, .toptxt { font-size: 1em; }

	.visilille { display: none;}
	.visimellem { display: inline;}
	.visistor { display: inline;}


} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 810px) {
    /* For tablets: */
    /* Hvis venstremenu har margin, kan man have 3-9-12 og slippe af med feltet til højre for hovedfeltet: */
	
    /* body { background: red;} */
	body { background: ;}
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}

	p.SideHovedeAfsnit {font-size: 32px; text-align:center;}
	p.TopMenu {font-size: 18px; text-align: ;}
	p.TopMenu a { padding-left: 8px;  }


	div.venstremenu { 
		display: block;
		width: 170px; 
		margin-top: px;
		margin-right: 4px;
		}

	#hovedfelt { width: 600px;  	border: none; border-left: 4px solid #fafafa;}
/* 	
	div.venstremenu { display: block; margin-top: 6px;}
	#hovedfelt {	margin-left: px; border-left: 5px solid #f2f2f2;}  */

	.pile {width:26px;}
	.firstheader, .navigationsfelt, .toptxt { font-size: 1.2em; }
	.oevelsesnavigationsfelt { font-size: 1em; }


	.afstandsindloeb { font-size: 1vw;}
	.afstand { font-size: 1vw;}

	p { text-align: justify;}

	.visilille { display: none;}
	.visimellem { display: none;}
	.visistor { display: inline;}


}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 910px) {
	body { background: ;}
    /* For desktop: */
 
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

	p.SideHovedeAfsnit {font-size: 32px; text-align:left; margin-left:180px;}
	p.TopMenu {font-size: 18px; text-align: ; }
	p.TopMenu a { padding-left: 8px;  }
	.hovedbillede  { max-width: 100px; }

	.afstandsindloeb { font-size: .8vw;}
	.afstand { font-size: 1vw;}

	#hovedfelt { width: 700px;  	}
	
	p { text-align: justify;}
	.firstheader, .navigationsfelt, .toptxt { font-size: 1.2em; }
	.oevelsesnavigationsfelt { font-size: 1em; }

	.pile {width:26px;}

	.grundtonetabel { display: inline;}
	.visilille { display: none;}

}


div.topmenu {
	max-width: px;
	/* margin-left:-4px; */
	/* position: fixed; */
	/* padding: 6px; */
	/* padding-bottom: 12px; 
	background-image:url('music-notes.jpg'); 
	border: thin solid silver; 
	background: rgb(254, 254, 254); */
	margin-bottom: 0px;
}
 

 .sidehoved {
/*  	
	background-color: #F6EFDB; 
	background: #fffff4;
	background-color: rgb(255, 255, 228, 0.9)
 */
	background-color: rgb(245, 243, 201, 0.2)

/* 	background-image:url('music-notes.jpg');  */
}
 
 .SideHovedeAfsnit {
	margin:0px;
	font-size: px; 
	text-indent: 0px;
	text-align:left;
	font-weight: bold;
	line-height: 2em;
	/* padding: 6px; */
}

p.SideHovedeAfsnit a:link {color: black; text-decoration: none; }

.SideHovedeAfsnit img {
	 /* opacity: 0.4; */
	/* filter: alpha(opacity=40); */
	/* For IE8 and earlier */
}

.hovedbillede {
	vertical-align: middle;
	padding:6px;
	padding-left:12px;
	padding-right:12px;
}

/* topmenu */
.TopMenu {
	/* margin-left:-1px; */
	/* margin-right:-1px; */
	margin:0px;
	text-indent: 0;
	text-align: left;
	/* border: 1px solid #CCCCCC; */
	border-top: none;
	/* border-bottom: 2px solid #CCCCCC; */
	padding-top: 8px;
	padding-bottom: 8px;
	margin-bottom: 0px;
	/* font-size: 18px; */
}

p.TopMenu a {
	padding-top: 0px;
	padding-bottom: 0px;
}

p.TopMenu a:first-child { border-top: none; }
p.TopMenu a:link {color: #FFFFFF; text-decoration: none; }
p.TopMenu a:visited { color: #FFFFFF; text-decoration: none; }
p.TopMenu a:hover {color: #FFFFFF; background: #0066CC; text-decoration: none; }
p.TopMenu a:active { background: #990000 ; }

.TopMenu, .venstreovermenu {
	background: rgb(128, 0, 0, .9);
	color: #FFFFFF;
}

.TopMenu a {
	color: #FFFFFF;
}

.TopMenu a:hover {
	color: #000000;
	background: #FFFFFF;
}

.hrvenstrerammetypo { margin-top: 6px; margin-bottom: 6px; }

div.venstremenu {
	float:;
	/* width: 154px; */
	min-height:; 
	/* display: table; */
	/* position: fixed; */
	padding: 10px;
	margin-top: 0px;
	margin-right: 0px;
	background-color: #FFFFFF;
	/*  border: thin solid silver; */
}

.venstremenu h2 {
	margin-top:2px;
	font-size:20px;
}

div.venstremenu a {
	display:block;
	line-height: 1.3em;
	margin: 0px;
	padding-top: 1px;
	padding-bottom: 2px;
	padding-right: 0px;
	background-color: ;
}

div.venstremenu a + a {
	border-top: none;
}


#hovedfelt {
	/* position: ; */
	/* margin: 120px 0px 0px 140px; */
	/* float: left; */
	/* display: table; */
	/* padding-bottom: 120px; */
	padding: 8px;
	/* padding-top: 0px; */
	margin-top: 0px;
	margin-left: 0px;
	/* min-width:620px; */
	/* max-width:634px; */
	min-height: 500px; 
	max-height: 100%; 
	background-color: #FFFFFF;
	/* border-left: 0px solid rgb(240, 240, 240);
	border-color: rgb(100, 100, 100);*/
	/* overflow: auto; */
}


div.hoejreside {
	float:;
	/* min-height:424px; */
	background-color: #;
	text-align: center;
	font-size: 14px;
}


.overskrift {
	font-size: 24px; text-indent: 0px; text-align: left; 
	color: #;
	margin-bottom: 0.1em;
	margin-top: 0.1em;
}

h1 { margin-top: 1.8em; margin-bottom: 0.6em; color: #; font-size: 1.6em; line-height: 1.3em; clear:both; border-top: 4px solid silver; padding-top: 32px;}
h2 { margin-top: 1.4em; margin-bottom: 0.5em; color: #; font-size: 1.4em; line-height: 1.3em; clear:both;}
h3 { margin-top: 1.2em; margin-bottom: 0.1em; color: #; font-size: 1.2em; clear:both;}
h4 { margin-top: .8em; margin-bottom: 0.1em; color: #; font-size: 1.1em; clear:both;}
h4 li { margin-left: 1em;}
h5 { color: #; margin-top: 0.4em; margin-bottom: 0.4em; padding-left: 6px; font-size: 1em; line-height: 1.3em; font-weight:normal; font-style: italic; }
h5 li { color: #; margin-top: 0.1em; margin-bottom: 0.3em; margin-left: 1em; font-size: 1.1em; line-height: 1.7em; font-weight:normal; font-style: italic; }
.grafik h5 { padding-left: 6px;  padding-right: 6px; }

h3 + h3 { margin-top: 1em}

hr { margin-top: 16px; margin-bottom: 12px;  border: 1px silver solid;}

p { 
	text-indent: 1.6em; margin-top: 0px; margin-bottom: 0px; margin-right: 3px; 
	/* border: thin solid silver; */
	/* border: thin solid silver; */
}


.ikkeindrykket	{ text-indent: 0; }

.centreretafsnit	{ text-align: center; text-indent: 0;}

/* 
p.ikkeindrykket:first-letter {
	vertical-align: bottom;
	vertical-align: 0ex;
}
 */

blockquote { 
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
}

.akkordudvidelse {
	vertical-align: 12px; font-size: 92%; letter-spacing: px;
}

.bastone {
	vertical-align: -2px; font-size: 90%; letter-spacing: px;
}

sup { 
	/* vertical-align: 3px; */
	font-size: .8em; /* har ingen virkning når værdien er under 1?? Måske når man har valgt minimumsstørrelse på skriften i fx Safari*/
}

sub { 
	/* vertical-align: 3px; */
	font-size: .8em; 
}

.holdsammen, label { 
	margin-right:px; 
	white-space: nowrap;    
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	}
label + label { margin-right: 4px; }

.mereluft { 
	clear: both;
	margin-top: 18px;
	text-indent: 0px; 
}


@-webkit-keyframes FarveSkift {
  0%   {color: red;}
  50%  {color: blue;}
}

@keyframes FarveSkift {
  0%   {color: red;}
  50%  {color: blue;}
}


.memoryspillerfelt	 {
	border: thin solid silver;
	padding: 6px;
	margin: 6px;
	white-space: nowrap; 
	text-align:left;
	/* padding-top: 2px; */
}

.memorytabel	{
	margin: 10px;
	border-width: 1px;
	border-color: silver;
	border-collapse: collapse;
	border-style: solid;
	padding: 12px;
	background: #FFFFFA;
	margin-left:auto; margin-right:auto;
}

.memorytabel td	{
	border: thin solid silver;
	padding: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: bottom;
}

/* måske skulle størrelsen reguleres efter de forskellige @media */
.opgaveoverskrift, .opgaveoverskriftMedMinHoejde, .opgaveloesning, .opgaveloesningMedMinimumshoejde, .response, .rigtigtsvar	{
	padding-top: px;
	margin-top: 4px;
	margin-bottom: 5px;
	line-height: 1.3em; 
	font-size: 1.2em; 
	text-indent: 0px; 
	text-align: left;
}

.opgaveoverskrift + .opgaveloesning {margin-top:;}

.opgaveoverskrift, .opgaveoverskriftMedMinHoejde, .opgaveloesning, .opgaveloesningMedMinimumshoejde	{
	margin-bottom: 6px;
}

.opgaveoverskriftMedMinHoejde, .opgaveloesningMedMinimumshoejde	{
	min-height:32px; 
	margin-bottom: 6px;
}
	
.opgaveloesning, .opgaveloesningMedMinimumshoejde	{ color: green; 	}

.response, .rigtigtsvar { color: #CC0000;  margin-left: px; line-height: 1.2em;}
.rigtigtsvar	{ color: green; font-size: 1.2em; }

.korrekt-ikon { width:16px; margin-left:2px; margin-right:4px; margin-bottom:4px;}
.MenuValg-ikon { width:14px; margin-left:4px; margin-right:0px; margin-bottom:0px;}

#responsefelt {
	min-height: 38px;
	/* min-height:30px;	*/
}

#responsefelt p {
	margin-bottom: 0px;
	/* min-height:30px;	*/
}

.venstresstillet { text-align:left;}

table {
	margin-top: 4px;
	margin-bottom: 4px;
	margin-right: 4px;
	border-width: 2px;
	border-collapse: collapse;
	border-style: solid;
	border-color: rgb(170, 170, 170);
	border-color: #cccccc;
}

th	{
	background-color: #EEEADF;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
	border-style: solid;
	padding: 4px;
	text-align: center;
}

tr	{ vertical-align: top;}

td {
	/*vertical-align: top;*/
	text-indent: 0;
	border: thin solid silver;
	padding: 2px;
	padding-left: 4px; 
	padding-right: 4px;
 }
 
td p { text-indent: 0px; text-align: left;}

table.indholdsfortegnelse {	
	border-width: 0px;
}

table.indholdsfortegnelse td {	
	border-width: 0px;
	padding: 1px;
	padding-left: 4px;
	padding-right: 5px;
	vertical-align: top;
}

table.grafik td	{
	border: 0px;
	padding: 2px;
	padding-left: 2px;
	padding-right: 2px;
	vertical-align: middle;
}

table.billed td	{
	border: thin solid silver; border-color: #dddddd;
	padding: 2px;
	padding-left: 3px;
	padding-right: 3px;
	vertical-align: top;
}

	/* har ikke hvid baggrund som grafiktabel*/
.layouttabel {
	border-width: 0px;
	margin-right: px;
	margin-bottom: 2px;
}


.layouttabel td, tr	{
	border-width: 0px;
	padding: 1px;
	padding-left: 1px;
	padding-right: 0px;
	vertical-align: top;
}


	/* kun i brug i ting der ikke er i brug*/
.svartabel {
	border: thin silver solid;
	/* border-color: #4C4C4C; */
	/* border-collapse: collapse; */
	/* border-style: outset; */
	background: none;
	/* background-color: #FCFFED; */
	text-align: center;
	padding: 3px;
	margin-left:2px;
	margin-right:4px;
}

.svartabel td {
	border: thin silver solid;
	/* border-width: 0px; */
	text-indent: 0px;
	padding: 3px;
}

/* er vist ikke i brug, de tre næste*/
table.mereluft	{
	margin-top: 8px;
	margin-bottom: 8px;
}

table.flydright, table.flydleft, table.flydcenter {
	border: thick solid black;
	background: #FFFDFF;
}

table.flydcenter	{
	margin-left: auto; margin-right: auto; 
}

.lokalindholdsfortegnelse {
	margin-top: 6px;
	margin-bottom: 12px;
	padding: 2px;
	padding-left: 6px;
	border: thin solid silver;
	background-color: rgb(250, 250, 244);	
}


ul { margin-top: 6px; margin-bottom: 6px; }

ol { margin-top: 2px; margin-bottom: 2px; margin: 0; }

li { margin-top: 2px; margin-bottom: 2px; text-indent: 0em; text-align: left; }
li.punktikkeindrykket {margin-top: 2px; margin-bottom: 2px; margin-left:-1em;}

li.niv1 {
	/* list-style-type: none; */
	clear: both;
	margin-top: 3px; margin-bottom: 3px; 
	font-size: 1.1em; font-weight: ;
	 }
 
li.niv2 {margin-top: 3px; margin-bottom: 3px; margin-left: 1em;
	text-indent: -14px;
	/* font-size: 12px; */
	list-style-type: none;
	 }

.indhold1 { text-indent: 0; text-align: left; margin-bottom: 0.1em; margin-top: 0.5em; font-weight: bold; }
.indhold2 { margin-left: 1.5em; text-indent: 0; text-align: left;}
.indhold3 { margin-left: 3em; text-indent: 0; text-align: left; }
.indhold4 { margin-left: 4.5em; text-indent: 0; text-align: left; }


video {
/* 
	padding: 4px 2px 6px 0px;
 */
}

form {
	margin-top: 0px; margin-bottom: 0px;
}

.skjuliprint {
	/* border: 0px solid #4C4C4C; */
	text-indent: 0; 
	margin: 2px;
	margin-top: 4px; margin-bottom: 2px;
	display: ;
	}

.skjultafspiller {
	text-indent: 0;  /* hvis jeg fortryder skal afsnitstypografien være ligesom ikkeindrykket */
	display: none;
	}

.grafik, .grafikcentreret, .harmanalysefelt, .flydright, .flydleft, .flydcenter, #opgavefelt	, #indstillingsfelt, .indstillingsfelt, .oevelsestypevalg, .rammeBlockDisplay {
	/* clear: both; */
	display:table;
	text-indent: 0px;
	border: thin silver solid; border-color: #dddddd;
	margin-top: 6px; margin-bottom: 6px;
	margin-left: 0px; margin-right: 0px;
	padding: 4px;
	background-color: rgb(254, 254, 253);
}

#opgavefelt	{
	margin-top: -9px; 
	margin-bottom: px;
	padding-left: 6px; 
	padding-bottom: 12px; 
	border-top: px; 
	border-bottom: px; 
}

#opgavefelt + .svarfelt {
	margin-top: -9px; 
}

#grundtonefelt {
	margin-left:4px;
}

#opgavefelt, #indstillingsfelt, .oevelsestypevalg, .indstillingsfelt  {
	width: 100%; 
}

.indstillingsfelt + .indstillingsfelt, #indstillingsfelt + .indstillingsfelt  {
	margin-top: -6px; 
	padding-top: 6px; 
}

.oevelsestypevalg  {
	/* clear: both; */
	display:block;
	background: #f5f5f5; 
}

/* centreretsvarfelt bruges ikke pt */
.svarfelt, .centreretsvarfelt, #indstillingsfelt, .indstillingsfelt, .oevelsestypevalg {
	display:block;
	padding: 3px;
	padding-left: 6px;
}

.svarfelt, centreretsvarfelt {
	margin-top: 8px;
	margin-bottom: 3px;
	background: #fffff4;
	overflow:auto;
	border: thin solid silver; border-color: #dddddd;
	width: 100%; 
}

.svarfelt p, #indstillingsfelt p, .indstillingsfelt p, .oevelsestypevalg p {
	padding: 2px;
	padding-left: 0px;
	margin-top: 2px;
	margin-bottom: 2px;
	line-height: 1.6em;
	text-indent: 0px;
	text-align: left;
}

.svarfelt p, #indstillingsfelt p + p {
	margin-top: px;
}

/* 
 når man skriver becifring, funktion, trin m.m
 */
.skrivesvarfelt {
	color:green;
	font-size: 18px;
	/* height:22px; */
}

/* bruges i huskespil, tr */
.svararea {
	margin-top: 6px; margin-bottom: 6px;
	padding: 4px;
	border: 1px solid #000000;
}


	/* så går rammen ikke ud over et lille vindue som fx i øvelsen med Only You: ; */
.rammeBlockDisplay {display:block;}

.flydright, .flydleft, .flydcenter, .flydleftudenramme, .flydrightudenramme { 
	/* display: ; */
/* 
	margin: 2px;
	margin-right: px;
	padding: 4px;
	padding-bottom: 2px;
 */
}

.flydleftudenramme + .flydleftudenramme {padding-left: 0px; margin: px;}

.flydright {float: right; margin-right: 0px; margin-left: 12px; max-width:60%;}
.flydleft {float: left; margin-right: 4px; margin-left: 2px;}
.flydleftudenramme {float: left; margin-right: 0px; margin-left: 0px; padding:px;}
.flydrightudenramme {float: right; margin-right: 0px; margin-left: 6px; padding:px;}
.flydcenter {float: center;}

.flydleftudenramme:last-child {
/*  får det til at kløjs:
	float: none;
	border: thin silver solid;
 */
}

.grafik + .grafik {
}

/*  til blogs */
.filmbeholder { 
	border: thin silver solid;
	width: auto;
/* 
	margin-top: 8px; margin-bottom: 8px;
 */
	margin-left: auto;
	margin-right: auto;
	padding: 1px; text-indent: 0;
	background: #F5F5F5;
	/* font-size: 10px; text-align: center; text-indent: 0px; */
}


.harmanalysefelt { 
	background: #fffff4;
	padding-right:0px;
}

.grafikcentreret {
	margin-left: auto; 
	margin-right: auto;
}

.flydleft p, .flydright p, .flydcenter p, .flydleftudenramme p, .flydrightudenramme p {
	margin: 0px;
	margin-bottom: 4px; 
	text-indent: 0px;
	line-height: 
}

/* billed bruges i tabel i fx akkordopslag og Vivaldi, hvor der er streger mellem cellerne, er nu erstattet i td p-deklarationen, billed kan slettes? */
.grafik p, .grafikcentreret p, .harmanalysefelt p, .billed p {
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 2px;
	padding-right: 2px;
	text-indent: 0px;
	margin: 2px;
}

div.harmanalysefelt p { 
	text-align: left;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: 0px;
	margin-bottom: 6px;
}

.meremargin {
	min-height:34px;	
}

img {
	vertical-align: middle;
}

.node, .grafik img, .grafikcentreret img, .harmanalysefelt img, .flydleft img, .flydright img, .flydcenter img, .flydleftudenramme img {
	margin: 0px;
	margin-top: 4px;
	margin-bottom: 4px;
	vertical-align: middle;
	max-width:;
}

.grafik img {	margin: 0px; }

.node, .node p	{
	text-indent: 0px;
}

img.node {
	vertical-align: xmiddle;
}

.node + .node {
	margin-top: 16px;
}

.grafik audio, .grafikcentreret audio, .harmanalysefelt audio, .flydleft audio, .flydright audio, .flydcenter audio, .flydleftudenramme audio {
	/* padding: 6px 2px 4px 2px; det samme som audio.
	margin:0px;
	 */
	padding-bottom:px;
}

#xxx {
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

#xxx:hover {
    width: 300px;
}

audio {
	vertical-align: ;
	padding-top: px;
	margin-top: 4px;
	/* height: 100px; */
}

.grafikmedluft	{
	padding: 1px;
	padding-left: 3px;
	padding-right: 3px;
}

.nodegrafik {
	text-indent: 0px;
	margin-top: 4px; margin-bottom: 4px;
	border: thin silver solid;
	background: white; /* i modsætning til grafik er baggrunden vist her hvid, så jpg-noder i fx hip-hop ikke har transparens og dermed grafiks grå baggrund mellem akkoladerne */
	padding: 4px;
}

.nodegrafik p {
	text-indent: 0px;
	margin-top: 4px; margin-bottom: 4px;
}


.billedtxt { font-size: .95em; line-height: 1.4em; text-indent: 0px; text-align: left; margin-top: 2px; margin-left: 4px; }

.tangentbeholder {
	float: left; 
	display: inline;
	display: ;
	background-image: url("afstandsbillede.png");
	background-size: contain;
	/* min-width: 400px; */
	/* width: 420px; */
	/* overflow: auto; det giver rulleskakter i Safari i stamtoneopgaver*/ 
	/* clear: right; */
	/* display: ; */
	vertical-align: middle;
	padding: px; 
	margin-top: 4px; margin-bottom: 6px; margin-left: px; margin-right:px; 
	border: 0px solid grey; 
	/* background-color: ; */
}

.tangentbeholder img {
	padding: 0px;
	margin: 0px;
}

/* noder i hørelæresvarknapper og måske mere */
button img {
	padding: 2px 2px 2px 2px;
	margin-right:px;
	margin-bottom:px;
	vertical-align: px;
	height: 18px;
}


input[type='checkbox'], checkbox {
	width: 14px;
	height: 14px;
	margin-right: 4px;
	box-shadow: 3px 3px 0 0px rgba(0,0,0,.04);

}

input[type='button'], button {
/* 
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f5f5f5), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #f5f5f5 5%, #dfdfdf 100% );
	filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#dfdfdf');
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	display:inline-block;
	text-decoration:none;
 */
	/* text-shadow:1px 1px 0px #ffffff; */
}

input[type='button'], button {
/* 
	background-color:#ffffff;
	/* det er luften uden om teksten i knappen; */
/* 
	padding: 0px 8px;
	margin: 2px 2px;
	margin-bottom: 4px;
	min-height: 32px;
	border: thin solid silver;
 */
	/* display:inline-block; */

	background-color:#ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fdfdfd), color-stop(1, #dfdfdf) );
	border: none;
	border: thin solid silver;
	border-radius: 5px;
	box-shadow: 2px 2px 0 0px rgba(0,0,0,.04);
	color: black;
	padding: 4px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	font-size: 1.1em;
	margin: 4px 2px;
	transition-duration: 0.4s;
	cursor: pointer;

}

input[type='button']:hover, button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #f5f5f5) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #f5f5f5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#f5f5f5');
	background-color:#dfdfdf;
}

.svarfelt input[type='button'] {
	margin-right: px;
	margin-bottom: px;
}

#indstillingsfelt input[type=button] {
	margin-right:px;
	margin-bottom:px;
/* 
	font-size: 1em;
 */
}

input[type='button'] + input[type='button'] {
	/*  margin-left: 3px; */
}

input[type='button'] + button {
	/*  margin-left: 3px; */
}

button + button {
	/* margin-left: 3px; */
}

input[type='button']:active {
	position:relative;
	top:1px;
}

input[type='text'] {
	/* width:60px; */
	/* font-size:14px; */
	font-size:16px;
	height: em;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:thin solid silver;
	display:inline-block;
	margin-left: 3px; margin-right: 0px;
	margin-top: px; margin-bottom: px;
	/* margin-top: 3px; margin-bottom: 3px; */
	padding: 4px 3px;
	background-color: white;
/* 
	background: linear-gradient(to bottom, #EFEFEF 5%, #ebede9 100%);
 */
	box-shadow: 2px 2px 0 0px rgba(0,0,0,.04);
}

textarea { width: 100%;}


select {
	margin: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	min-width: 42px;
	line-height: 1.3;
	padding: 2px;
	border: 1px solid #aaa;
	box-shadow: 2px 2px 0 0px rgba(0,0,0,.04);
	border-radius: 5px;
}

/* class applies to select element itself, not a wrapper element */
.select-css {
	display: inline-block;
	font-size: px;
	font-family: ;
	font-weight: ;
	color: #444;
	line-height: 1.3;
	padding: .3em 1.8em .3em .6em;
/* 
	width: 100%;
 */
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	margin-left: 2px;
	border: 1px solid #aaa;
	box-shadow: 2px 2px 0 0px rgba(0,0,0,.04);
	border-radius: 5px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
    for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
    
  */
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right .7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
  display: none;
}
/* Hover style */
.select-css:hover {
  border-color: #888;
}
/* Focus style */
.select-css:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222; 
  outline: none;
}

/* Set options to normal weight */
.select-css option {
  font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
  background-position: left .7em top 50%, 0 0;
  padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
  color: graytext;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
  border-color: #aaa;
}

/* Dropdown Button */
.dropbtn {
/* 
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
 */
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin-right: 6px;
}

.dropdown + .dropdown {
	margin-left: px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 3px 8px;
  padding-left: 8px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

.knapstil, .analyseknap, .analyseknapmedsup {
	background-color:#ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #dfdfdf) );
	margin-left: 2px;
	margin-right: 2px;
	margin-top: 2px;
	margin-bottom: 4px;
	padding: 3px 7px;
	font-size: em;
	min-height: 32px;
	border-radius:8px;
	border: thin solid silver;
}

.analyseknap, .analyseknapmedsup {
	min-height: 40px;
	margin: 4px;
	margin-right: 2px;
	margin-left: 2px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.analyseknapmedsup {
	padding-bottom:3.5px;
	padding-top:0px;
}



/*
 Change the look'n'feel of labels (which are adjacent to radiobuttons).
 Add some margin, padding to label
*/
input[type=radio] + label {
	/* display:inline-block; */
/* dette bliver ignoret (der kan være lokal stil derude:)
	 width: 24px;
	 margin: 2px;
	 padding: 4px 12px;
*/
	margin: 1px;
	margin-bottom: 2px;
	padding: 4px 8px;
	text-align: center;

	-moz-box-shadow:inset 0px 1px 0px 0px #f2fadc;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f2fadc;
	box-shadow:inset 0px 1px 0px 0px #f2fadc;
	
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbe6c4), color-stop(1, #9ba892));
	background:-moz-linear-gradient(top, #EFEFEF 5%, #ebede9 100%);
	background:-webkit-linear-gradient(top, #EFEFEF 5%, #ebede9 100%);
	background:-o-linear-gradient(top, #EFEFEF 5%, #ebede9 100%);
	background:-ms-linear-gradient(top, #EFEFEF 5%, #ebede9 100%);
	background:linear-gradient(to bottom, #EFEFEF 5%, #ebede9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbe6c4', endColorstr='#9ba892',GradientType=0);
	
	background-color: #e7e7e7;
	background-color:#dbe6c4;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius: 5px;
	border:1px solid #b2b8ad;

}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
 Radio bruges i skala-, interval- og akkordopslag
*/


input[type=radio]:checked + label { 
	background-image: none;
	background-color:#d0d0d0;
	color: ;
	background:linear-gradient(to bottom, #ebede9 5%, #bbbbbb 100%);
}

input[type=radio] + label:hover {
	
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ba892), color-stop(1, #dbe6c4));
	background:-moz-linear-gradient(top, #ebede9 5%, #d7d7d7 100%);
	background:-webkit-linear-gradient(top, #ebede9 5%, #d7d7d7 100%);
	background:-o-linear-gradient(top, #ebede9 5%, #d7d7d7 100%);
	background:-ms-linear-gradient(top, #ebede9 5%, #d7d7d7 100%);
	background:linear-gradient(to bottom, #ebede9 5%, #d7d7d7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ba892', endColorstr='#dbe6c4',GradientType=0);
	background-color:#9ba892;
	background:linear-gradient(to bottom, #ebede9 5%, #bbbbbb 100%);
}


.firstheader, .navigationsfelt, .oevelsesnavigationsfelt, .toptxt {
	clear: both;
	box-sizing: content-box;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	/* vandret lodret (forskydning), udtværing, spredning */
	box-shadow: inset 0px 0px 0px 0px #cccccc;
	border: thin solid silver; border-color: #dddddd;
	background: #F1F1F1; 
	background-image: linear-gradient( #fdfdfd, #fafafa);
	background-image: linear-gradient( #eeeeee, #f6f6f6);
	margin-top: -8px; 
	margin-left: px; 
	margin-right: px; 
	margin-bottom: 8px;
	padding-top: 10px; padding-left: 8px; padding-right: 4px; padding-bottom: 8px;
	overflow: auto;
	/* border-color: rgb(200, 200, 200); */
	line-height: 1.4em;
	/* width: 600px; */
	font-size: ;
	text-align: left; 
	font-weight: normal;
	text-indent: 0px; color: #000000;

}

.navigationsfelt, .oevelsesnavigationsfelt {
	/* height: 30px; */
	/* background: #fdfdfd;  */
	background-image: linear-gradient( #eeeeee, #f6f6f6);
	clear: both;
	margin-top: 8px; 
	line-height: 2em;
	margin-bottom: px;
	padding: 4px;
	/* padding-bottom: 8px; */
	font-size: ;
	text-align: center;
	/* border: thin solid silver; border-color: #dddddd; */
}

.navigationsfelt {
	margin-bottom: px;
}

.oevelsesnavigationsfelt	{
	/* padding-bottom: 0px; */
	margin-top: 8px; 
	padding-top: 0px;
	padding-bottom: 7px;
	margin-bottom: 0px;
	text-align: left;
	/* border-bottom: thin solid silver;  */
	/* background: #EBFAF8; */
}

.oevelsesnavigationsfelt + .oevelsesnavigationsfelt {
	/* border-top: thin solid silver;  */
	margin-top: 0px; 
}

.oevelsesnavigationsfelt + .navigationsfelt {
	/* border-top: thin solid silver; border-color: #eeeeee; */
	margin-top: 0px; 
}

p.firstheader {
	font-weight: normal;
}

/* toptxt bruges kun i hip-hop, til øverste delindholdsfortegnelse */
.toptxt {
	font-size: 1em; 
	padding-bottom: 8px;
}

.navigationsknap	{
	font-size: 16px;
	}

.knapper, .opknap, oppil, .tilbageknap, .oeveknap, .topoeveknap, .fremknap, .menuknap, .menuright {
	padding: 3px;
	margin-left: 2px;
	margin-right: 2px;
	/* background: #FFDF86; */
}

.menuknap, .menuright, .oeveknap, .topoeveknap {
	border: thin solid silver;
	background: #F1F1F1;
	padding: 4px; padding-bottom: 6px; margin-bottom: px; 
	height:40px;
}
.menuright {
	margin-left: 6px;
}
 .topoeveknap, .oeveknap {
	padding: 7px; 
}
.topoeveknap, .menuknap, .menuright { 
	float: right ;
}

.pile {
	padding: 0px;
	margin-left: 0px;
	margin-right: 4px;
	vertical-align:-10%;
}

.tilbageknap	, .fremknap	{	
	height:30px;
}


.opknap	{ float: left; height:26px;}

.oppil {
	float: right;
	margin-right: 2px; height:20px;
}

.citat { font-size: 13px; text-indent: 1em; }
.lithenvis { font-size: 13px; text-indent: 1em; }
.sangtxt { font-size: 14px; text-indent: 0px; }
 
A:link { text-decoration: none; }
A:visited { text-decoration: none;}
A:active { text-decoration: none; color: #330033 ;}
A:hover { color: #660000; text-decoration: none; }

a:link span {display: none;} 

a:hover span {display: block;
	position: float;
	padding: 5px; margin: 10px; z-index: 100;
	color: #AAA; background: #FFCC66;
	font: 10px Verdana, sans-serif; text-align: center;
} 

/* det skulle gøre afstanden mellem lokaløvlserlinks større, men det influerer også på pile m.m. */
/* 
a+a { margin-left: 6px;}

label + a { margin-left: 6px;}
 */

/* har med brøker i fx elektroniske instrumenter at gøre */
.above, .below { font-size: 75%; }
.above { vertical-align: 0.8ex; letter-spacing: 0.2ex;}
.below { vertical-align: -0.4ex; }
.BroekStreg {font-size: 120%; letter-spacing: -0.4ex; }


/* vist forældet */

.venstreramme	{
	margin: 4px;
	margin-right: 0px;
	/* background-color: #F9F9F9; */
	border: 1px solid #4C4C4C;
}

.venstreramme a	{
	display: block;
	padding-top: 1px;
	padding-bottom: 1px;
}

.venstreramme a:hover {
	color: #FFFFFF;
	background: #092CB7;
}

.venstreramme a:active { background: #FFFFCC ; text-decoration: blink;}

.venstreramme a+a	{
	padding-top: px;
}