/* External stylesheet: shared by every page (Chapter 4, pp. 31-34). */
body { margin: 0; background-color: #f7f5ed; color: #243d36; font-family: Arial, Helvetica, sans-serif; font-size: 100%; }
.page { width: 88%; margin: 0 auto; }
.header { padding: 25px 0; border-bottom: 1px solid #b9c6b7; }
.brand { font-family: Georgia, serif; font-size: 1.6em; font-weight: bold; color: #183b37; text-decoration: none; }
.tagline { float: right; margin: 8px 0; font-size: 0.85em; }
.navigation { padding: 17px 0; border-bottom: 1px solid #b9c6b7; }
.navigation a { margin-right: 25px; }
a { color: #285d4b; }
a:hover { color: #9b4626; }
.current { font-weight: bold; }
.intro { padding: 38px 0 26px; }
.eyebrow { color: #785039; font-weight: bold; font-size: 0.85em; }
h1 { font-family: Georgia, serif; font-size: 3.1em; font-weight: normal; margin: 12px 0 18px; }
h2 { font-family: Georgia, serif; font-size: 1.7em; font-weight: normal; }
h3 { font-size: 1.1em; }
p, li { line-height: 1.65; }
.lead { font-size: 1.15em; width: 75%; }
/* Float, width, padding and clear come from Chapter 4's box model examples. */
.pictures { overflow: auto; padding-bottom: 25px; }
.picture { float: left; width: 23%; margin-right: 2%; }
.picture img { width: 100%; height: auto; border: 0; }
.picture a { font-weight: bold; }
.picture p { margin: 9px 0 4px; }
.picture .small { font-size: 0.85em; font-weight: normal; }
.section { clear: both; border-top: 1px solid #b9c6b7; padding: 16px 0 26px; }
.note { background-color: #e4ebdf; padding: 15px 20px; border-left: 4px solid #547d69; }
.feature { width: 240px; height: auto; float: right; margin: 0 0 20px 30px; }
li { margin-bottom: 8px; }
table { width: 100%; border: 1px solid #b9c6b7; margin: 18px 0; }
caption { text-align: left; padding: 0 0 12px; font-weight: bold; }
th, td { text-align: left; padding: 14px; border-bottom: 1px solid #cbd3c6; }
th { background-color: #dce6d7; }
tfoot td { font-size: 0.85em; background-color: #eceee3; }
.table-wrap { overflow: auto; }
.form-section { border-top: 1px solid #b9c6b7; padding: 12px 0; }
.field { width: 90%; padding: 9px; border: 1px solid #879b87; background-color: #fffef9; color: #243d36; font-family: Arial, sans-serif; font-size: 1em; }
label { line-height: 1.7; }
.field-label { display: block; margin-bottom: 5px; font-weight: bold; }
.choice { display: block; margin: 8px 0; }
.button { padding: 12px 20px; background-color: #244c3e; color: white; border: 1px solid #244c3e; font-size: 1em; margin: 5px 10px 5px 0; }
.reset { background-color: #f7f5ed; color: #244c3e; }
.footer { clear: both; border-top: 1px solid #b9c6b7; padding: 20px 0; font-size: 0.85em; }
/* Media queries are covered in Chapter 4, pp. 78-86. */
@media screen and (max-width: 650px) {
  .tagline { float: none; }
  h1 { font-size: 2.3em; }
  .lead { width: 100%; }
  .picture { width: 48%; margin-bottom: 20px; }
  .feature { float: none; width: 100%; margin: 0; }
  .navigation a { margin-right: 14px; }
  th, td { padding: 8px; }
}