html { font-family: sans-serif; background: #003C43; padding: 1rem; }
body { max-width: 960px; min-width: 560px; min-height: 100vh; margin: 0 auto; background:  	#135D66; color: #AAD7D9; }
h1 { font-family: serif; color: #AAD7D9; margin: 1rem 0; }
h2 { font-family: serif; color: #AAD7D9; margin: 1rem 0; }
h3 { font-family: serif; color: #AAD7D9; margin: 1rem 0; }
a {text-decoration: none; color: #AAD7D9; }
a:hover {color: #77B0AA}
hr { padding: 0; margin: 1rem -1rem 0 -1rem; border: none; border-top: 3px solid #77B0AA; }
nav { background: #77B0AA; display: flex; align-items: center; padding: 0 0.5rem; color: #092635; }
nav h1 { flex: auto; margin: 4.5px; color: #092635;}
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; color: #092635; }
nav h1 a:hover {border-radius: 5px;  color: #00646F; }
nav a { text-decoration: none; padding: 0.25rem 0.5rem; color: #092635; }
nav a:hover {border-radius: 5px;  color: #00646F; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0rem 1rem 1rem; }
.content > header {display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.content > header h2 { flex: auto; margin: 1rem 0 0.25rem 0; font-size: 1.3rem; }
.content > header a {font-family: serif; font-weight: bold; font-size: 1.3rem; text-decoration: none;  border-radius: 10px; padding: 5px 10px; text-align: center; margin: 1rem 1rem 0.25rem 0px; border: 1px solid #77B0AA; color: #092635; background: #77B0AA}
.content > header a:hover{ color: #AAD7D9; background: #135D66;}
.content h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.content h2 { flex: auto; margin: 1rem 0 0.25rem 0; font-size: 1.3rem; }
.content h3 { flex: auto; margin: 1rem 0 0.25rem 0; font-size: 0.9rem; }
.content:last-child { margin-bottom: 0; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content textarea { min-height: 12em; resize: vertical; }
.chord {font-weight: bold; color: yellow;}
pre {background: black; color: white; padding: 5px 10px; border-radius: 10px;}

.flash { margin: 1em 0; padding: 1em; color: #092635; background: #cae6f6; border: 1px solid #377ba8; }
.content:last-child { margin-bottom: 0; } 
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] {border: 1px solid #77B0AA; color: #092635; background: #77B0AA; border-radius: 5px;  align-self: start; min-width: 10em; } 
input[type=submit]:hover{ color: #AAD7D9; background: #135D66;}
.btn_browse {text-decoration: none; border: 1px solid #77B0AA; color: #092635; background: #77B0AA; border-radius: 5px; padding: 3px 9px; margin: 1px 10px 0px 0px; width: 168px; height: 23px; }
.btn_browse:hover{ color: #AAD7D9; background: #135D66;}
.hr_browse { padding: 1px; margin: 0rem -1rem 0 -1rem; border: none; border-top: 3px solid #77B0AA; }
.btn_chgord {text-decoration: none; border: 1px solid #77B0AA; color: #092635; background: #77B0AA; border-radius: 5px; float: left; height: 21px; padding: 0px 4px; margin: -20px 2px 0 0;}
.btn_chgord:hover{ color: #AAD7D9; background: #135D66;}