/* ITWP1000 - Homework 4
   Author: Paul Bogos
   File: styles.css */

/* Page basics */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0; padding: 1.25rem; 
    line-height: 1.6; 
    background:#fff; color:#222; 
  }

h1 {
  text-align: center;
  font-size: 2rem;
  margin: .75rem 0 1rem;
  font-weight: 800;
  color: #000000;
}

/* Menu header above table */
.tabletitle {
  display: block;
  text-align: center;
  font-family: "Arial Black", Impact, Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.1;
  color: #000000;
  margin: 1.2rem 0 0.75rem;
  letter-spacing: 0.2px;
  text-transform: none;
  text-shadow: 0 0 0 #000, 0.02em 0 #000;
}


p    { margin: 0.5rem 0; }
div  { max-width: 1000px; margin: 0 auto; }

/* Image */
.responsive { 
            max-width: 100%; 
            height: auto; 
            display: block; 
            margin: 0 auto 1rem; 
            border-radius: 10px; 
            box-shadow: 0 6px 18px rgba(0,0,0,.12); 
          }

/* Table formatting */
table { 
      width: 100%; 
      border-collapse: collapse; 
      margin: 1.25rem 0; border: 3px solid #3f2a14; border-radius: 10px; overflow: hidden; 
    }


/* Table header row */
thead th {
  background: #3f2a14;
  color: #ffffff;
  border-bottom: 2px solid #3f2a14;
  text-align: left;
  padding: .6rem .7rem;
  font-weight: 700;
}

/* Table body rows */
tbody td { border-bottom:1px solid #3f2a14; padding:.55rem .6rem; vertical-align:top; font-size:.98rem; text-align:left; font-weight:400; }
tbody tr:nth-of-type(even) { background:#faf6f1; }

/* Footer note row */
tfoot td {
  border-top: 2px solid #3f2a14;
  background: #ffffff;
  padding: 0.4rem .75rem;
  font-size: 0.8rem;
  font-style: italic;
  color: #000000; 
  text-align: right;
}

/* Classes */
.price { 
  white-space:nowrap; 
      }
.nowrap { 
  white-space: nowrap; 
}
.specialty { 
  white-space:nowrap; 
          }

/* Footer validation line */
#validation { text-align:center; margin-top:1.2rem; font-size:.95rem; }
#validation a { color:#3f2a14; text-decoration:none; }
#validation a:hover { text-decoration:underline; }

/* Media query that hides image ≤550px  */
@media screen and (max-width: 550px) {
  img.responsive { display:none; }
  h1 { font-size:1.6rem; }
  table, th, td { font-size:.92rem; }
}