body {
    position:relative;
    margin:0;
    padding:25px;
    font-family:  "Arial", sans-serif;
    background-color:white;
}
p, h1, h2, h3, h4, a {
    text-decoration:none;
}
p, h1, h2, h3, h4, a {
    color: hsl(231, 100%, 50%);
}
h1, h2, h3 {
    margin:0;
    padding:0;
    text-decoration:underline;
}
h1, h2{
    display:inline;
    font-family:  Monaco, monospace;
}
h2, h3 {
    letter-spacing: 1px;
    font-variant:small-caps;
}
h1 {
    position:absolute;
    right:0;
    top:35px;
    transform: rotate(9deg);
    font-size:22px;
    white-space: nowrap;
    overflow:hidden;
}
h3 {
    margin-top:25px;
}
hr {
    border-top: 2px solid black;
}
input, select, textarea {
    font-family:  "Arial", sans-serif;
    border:none;
    background-color:#ccf5ff;
    margin:0;padding:0;
}
input[type=submit], button {
    padding: 0 4px;
    font-family:Monaco, monospace;
    border-style:solid;
    border-width:1px;
    border-color:black;
    background-color:white;
}
input[type=submit]:hover, button:hover {
    color: hsl(231, 100%, 50%);
    border-color: hsl(231, 100%, 50%);
}
input[type=number] {
    max-width:60px;
}
input[name="value"], select[name="value"] {
  border: 2px solid hsl(231, 100%, 50%);;
}
input[name="comment"] {
  background-color:initial;
  color:gray;
}
fieldset {
    margin: 3px 0;
    padding: 6px 12px;
    border-style:solid;
    line-height: 2;
    display:inline-block;
    width:calc(100% - 24px);
    vertical-align:top;
    font-size:12px;
}

fieldset {
    border-color: hsl(231, 100%, 50%);
}
fieldset fieldset {
    border-color: hsl(0, 0%, 0%);
}
fieldset span {
    display: inline-block;
}
#textarea, #toolarea {
    position:fixed;
    margin:0;
    overflow:auto;
    left:0;
    right:0;
}
#toolarea {
    top:0;
    bottom:50vh;
    padding:25px;
    padding-top:40px;
    border-bottom:4px solid black;
    border-right:0;
}
#textarea {
    top:50vh;
    bottom:0;
    padding:0;
    background-color:white;
    color:black;
    border-left:0;
}
#textarea textarea {
    position:absolute;
    padding:12px 25px;
    border-color:black;
    margin:0;
    height: 100%;
    width:80%;
}
#text {
    border-top:dashed;
}
#static_text {
    bottom:0;
    left:80%;
    border-top:dashed;
    border-left:dashed;
}
#notationErrorMsg{
    margin-left:25px;
}
#audiomidicontrols {
    position:fixed;
    bottom:0;
    width:100vw;
}
@media only screen and (max-width: 512px) {
    h1 {
	position:initial;
	font-size:19px;
    }
}
/* DIALOG */
.dialogContainer {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.5);
    display:flex;
    justify-content:center;
    align-items:center;
}

.dialogBox {
    background-color:white;
    border:1px solid #ccc;
    padding:20px;
    box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
    max-width:66%;
    min-width:500px;
}

.dialogBox * {
    margin:8px 4px;
}

.dialogBox p {
    font-size:12px;
    color:black;

}

/* INFOBOX */
.infobox {
    position:fixed;
    overflow:hidden;
    border:dashed;
    margin-bottom:25px;
    padding-left:12px;
    padding-top:0;
    background-color:white;
    display:none;
    z-index:10000;
    max-width:450px;
}
.infobox h3 {
    font-size:16px;
    margin-top:12px;
}
.infobox p {
    font-size:12px;
}

#imprint, #imprint a {
	color:lightgray;
	font-size:12px;
}

@media only screen and (orientation:landscape) {
    #textarea, #toolarea {
	top:0;
	bottom:0;
    }
    #toolarea {
	left:0;
	right:50vw;
	border-right:4px solid black;
	border-bottom:0;
    }
    #textarea {
	left:50vw;
	right:0;
	border-top:0;
    }
    #textarea textarea {
	border-left:dashed;
	border-top:none;
    }
    #audiomidicontrols {
	width:50vw;
    }
    @media (max-width: 1024px) {
	h1 {
	    position:relative;
	    top:-10px;
	}
    }
}