html, head, title {display: block; font-family: "liberation sans", "freesans", "lucida grande", "arial unicode ms", sans-serif; }
title { background-color: #888; color: #fff; font-size: 1.8em; padding: 0.5em; font-weight: 700; }

meta[name="author"] {content:attr(content); display:block; background-color: #888; color: #fff; font-size: 0.8em; padding: 0.3em; font-weight: 700;  }
body {margin: 0; padding: 0em; font-size: 1.05em; font-family: "liberation sans", "freesans", helvetica, "arial unicode ms", sans-serif; min-height: 40em; }
.musify { font-size: 1.6em; margin: 1em auto;   }
table {text-align: left;  border-spacing: 0; width: 80%}
/*td {width: 15%;}*/
td[headers="musify_res"] {width: 30%}
tbody td, tbody th {border-bottom: 2px solid #ccc; padding: 1ex;}
caption {text-align: left; font-size: 1.3em; }
strong {font-size: 120%;}
code > strong {font-size: 90%;}


#input {margin-bottom: 1em; font-size: 1.2em; height: 16em;}
#musoutput {background-color: #eee;  font-size: 1.2em; height: 16em;}

#codein {  height: 11.8em; font-size: 1.2em}
.note { margin: 1em auto; padding: 1ex; border: 1px dotted #aaa; background-color: #ddd; width: 80%}

cite.mus {font-size: 1.2em; font-style: normal;}
#crib {font-size: 1.2em; margin: 1em auto;width: 80%}
#musoutput { word-wrap: break-word; }
#nav a:link, #nav a:visited { color: #fff; }
#nav a:hover {color: yellow; }

a:link, a:visited {color: #33f;}
a:hover {color: #fff; background-color: #008}
form {padding: 1em;}
label {display: block; font-weight: 900; margin-bottom: 6px; margin-top: 4px}

#musoutput { overflow-y: auto; white-space: pre-wrap; }
#musoutput p {margin-bottom: 0em;}

#options p {margin: 1em; }

select { word-wrap: break-word; font-size: 1.2em; max-width: 16em }


img {vertical-align: middle;}
input[type="text"] {font-size: 1.1em} 
input[type="submit"] {margin: 1ex; float: left; font-size: 1.5em;}


#nav {background-color: #888; list-style-type: none; margin: 0.5em auto; margin-top: 0em; font-size: 1em; border-top: 2px solid #333; border-bottom: 2px solid #ddd; padding-left: 0; text-align: center; width: 100%;}
#nav li {display: inline-block; text-align: center; margin: 0px; padding: 4px; }
#nav li a { width: 100%; height: 100%; padding: 4px; font-weight: 700; }
#nav li a:link,#nav li a:visited {color: #fff; text-decoration: none; }
#nav li a:hover {background-color: #f90; color: #000;}




@media (max-width: 29em ) {
html, head, title {font-size: 44%;}
}
@media (min-width:30em) {
html, head, title {font-size: 75%;}
}
@media (min-width: 42em) {
html, head, title {font-size: 100%;}
form {display:flex; flex-flow: row wrap; align-items: stretch;  justify-content: space-around;}
#input, #musoutput {flex: 1 18em; }
#options {flex: 2 50%; margin-top: 1em;}
#licences {float: right; width: 60%; position: relative; top: -14em; left:-4ex; margin: 0; height: 5em } 
.note {width: 60%}
select {max-width: 24em}
}