* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    height: auto !important;
    height: 100%;
    min-height: 100%;
    position: relative;
}

/* page header */

#page-header {
    width: 100%;
}

#page-header div {
    background-color: lightblue;
    padding: 0.3em 0.8em 0.3em 0.8em;
    color: black;
    position: relative;
    font: bold 300% sans-serif;
    font-variant: small-caps;
    box-shadow: 0em 0em 16px lightblue;
    text-align: center;
}

#page-header .sub-header {
    background-color: white;
    padding: 1em;
    box-shadow: 0px 0px 8px gray;
    text-align: center;
}

#page-header .field {
    background-color: white;
    border: 2px solid;
    border-color: #555555 #aaaaaa #aaaaaa #555555;
    border-radius: 8px;
    padding: 0.4em 1.2em;
}

/* page nav */

#page-nav {
    width: 100%;
    padding: 0.3em 0.8em 0.3em 0.8em;
    position: relative;
    border-bottom: 1px solid lightgray;
}

#page-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 1em;
}

#page-nav li {
    padding: 0.3em 1em 0.3em 1em;
    border-radius: 8px;
    border: 1px solid lightgray;
    display: inline-block;
}

#page-nav li.current-nav-tab {
    border: 2px solid gray;
    background-color: #eef3ff;
}

#page-nav li a:link, #page-nav li a:visited, #page-nav li a:hover, #page-nav li a:active {
    text-decoration: none;
    color: black;
}

#page-nav li:hover {
    border: 2px solid black;
}

#page-nav li:active {
    border: 2px solid black;
}

#page-nav li a {
    display: block;
}

#page-nav .nav-title {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 120%;
    border-radius: 8px;
    background-color: #cdcdcd;
    padding: 0.4em 0.5em 0.4em 0.5em;
}

/* page main container */

#page-section {
    margin: 0;
    padding: 2em 2em 4em 2em; /* padding bottom = 4 * footer height */
}

#page-section .field {
    background-color: white;
    border: 2px solid;
    border-color: #555555 #aaaaaa #aaaaaa #555555;
    border-radius: 8px;
    padding: 0.4em 1.2em;
}

#page-section .profile-label {
    margin-left: 2em;
}

#page-section form p {
    margin-bottom: 0.7em;
}

@media (max-width: 780px) {
    #page-section {
        padding: 0.5em 0.5em 4em 0.5em;
    }
}

h1 {
    font-family: sans-serif;
    font-size: 250%;
    border-radius: 8px;
    background-color: #cdedfd;
    padding: 0.3em 0.4em 0.3em 0.4em;
    margin-bottom: 1em;
}

h2 {
    font-family: sans-serif;
    font-size: 150%;
    border-radius: 8px;
    background-color: #aacafd;
    padding: 0.3em 0.4em 0.3em 0.4em;
    margin-top: 2em;
    margin-bottom: 1em;
}

#page-section p {
    text-indent: 1em;
    padding: 0em 1em 0em 1em;
}

#page-section ul {
    padding: 0em 1em 0em 3em;
}

.setlist {
    padding: 0em 2em 0em 2em;
}

#page-section .g-recaptcha {
    padding: 0em 2em 0em 2em;
}

#page-section table {
    width: 100%;
    border-collapse: collapse;
}

#page-section th, #page-section td {
    padding: 0.2em 1em 0.2em 1em;
}

#page-section table th {
    text-align: left;
}

#page-section table tr:nth-child(even) {
    background-color: #eeeeee;
}

#page-section table .shrink {
    white-space: nowrap;
}

#page-section table .expand {
    width: 99%;
}

.centered {
    text-align: center;
}

/* page footer */

#page-footer {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    padding-top: 1em;
    padding-bottom: 2em;
    text-align: center;
    background-color: white;
    width: 100%;
    height: 1em; /* bottom padding of #page-section */
    color: black;
    font-family: sans-serif;
    box-shadow: 0px 0px 8px gray;
}

/* generics */

.disable-select, .disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

.disable-select img {
  pointer-events: none;
}

.app-button {
    background-color: black;
    border-radius: 8px;
    color: white;
    border: 2px solid;
    border-color: #888888 #555555 #555555 #888888;
    padding: 4px;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 90%;
}

.app-button:active {
    border-color: #555555 #888888 #888888 #555555;
}

.delete-button {
    background-color: #aa5555;
    border-radius: 8px;
    color: black;
    border: 2px solid;
    border-color: #cc5555 #885555 #885555 #cc5555;
    padding: 4px;
    text-decoration: none;
    font-family: sans-serif;
}

.delete-button:active {
    border-color: #885555 #cc5555 #cc5555 #885555;
}

form div {
    margin-bottom: 8px;
}

form div label {
    width: 140px;
    text-align: right;
    display: inline-block;
}

.error-msg {
    margin-bottom: 1em;
    background-color: #ffbbbb;
    border-radius: 8px;
    font-weight: bold;
    padding: 8px;
    padding-left: 16px;
}

.warning-msg {
    margin-bottom: 1em;
    background-color: #ffddbb;
    border-radius: 8px;
    font-weight: bold;
    padding: 8px;
    padding-left: 16px;
}

.info-msg {
    margin-bottom: 1em;
    background-color: #bbffdd;
    border-radius: 8px;
    font-weight: bold;
    padding: 8px;
    padding-left: 16px;
}