body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: medium; line-height: 1.6rem; color: #000; background-color: #EEE; } p, fieldset { margin: 0 0 1.6rem 0; } a:link, a:visited { color: #006699; text-decoration: underline; } a:hover, a:active { color: #0000FF; } h1, h2, h3, h4 { margin: 20px 0; } h1 { margin-top: 0; font-size: 28pt; } h2 { font-size: 22pt; } h3 { font-size: 18pt; } h4 { font-size: 14pt; } /* Form controls */ label { display: block; font-weight: bold; margin: 8px 0; } input, textarea, select { width: 96%; border: 1px solid #006699; border-radius: 4px; padding: 8px; background-color: #FFF; color: #000; } input, select { max-width: 450px; } input:focus { border: 1px solid #0099FF; box-shadow: 0px 0px 2px #006699; } button { border: 1px solid #999; border-radius: 4px; background-color: #EEE; color: #000; padding: 8px; } button:hover { background-color: #FAFAFA; } button.primary { background-color: #0099FF; color: #FFF; } button.primary:hover { background-color: #00CCFF; } ul.unstyled { list-style: none; margin: 20px 0; padding: 0; } ul.unstyled li { margin: 4px 0; } /** TOP NAV HEADER **/ header { background-color: #000; display: block; } header ul { margin: 0 auto; padding: 12px; line-height: 24px; max-width: 950px; } header ul li { display: inline; padding-right: 20px; } header a:link, header a:visited { color: #CCC; font-weight: bold; text-decoration: none; font-size: large; } header a:hover, header a:active { color: #FFF; } /** MAIN CONTENT PANEL **/ main { margin: 20px auto; max-width: 950px; } section { margin-bottom: 20px; padding: 14px; background-color: #FFF; border: 1px solid #CCC; border-radius: 8px; } /** UNLOCK FORM **/ form.unlock-form { max-width: 550px; margin: 0 auto; display: flex; flex-direction: row; } form.unlock-form input { flex: 8 1 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } form.unlock-form button { flex: 1 0 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }