/* CSS Document used for the coffee table homework assignment
  Author: Francesca Manzella
  Course: ITWP 1000
  File: styles.css
  Information on using exrernal CSS style sheet is located in Chapter 3. Information on media queries is located in Chapter 7. Information on tales and CSS formatting for tables is located in Chapter 8.
*/

/* =========================
   BASIC PAGE STYLING
   ========================= */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

h1 {
  text-align: center;
  margin-top: 20px;
}

p {
  text-align: center;
}

div {
  width: 80%;
  margin: 0 auto;
}

/* =========================
   TABLE FORMATTING
   ========================= */
table,
td,
th,
tfoot,
thead,
tr {
  border: 1px solid #333;
  border-collapse: collapse;
}

table {
  width: 100%;
  margin-top: 20px;
}

th,
td {
  padding: 10px;
  text-align: left;
}

thead th {
  background-color: #8b5a2b;
  color: white;
}

tbody tr:nth-of-type(odd) {
  background-color: #f2f2f2;
}

tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}

tfoot td {
  font-size: 0.9em;
  text-align: center;
  font-style: italic;
  padding: 15px;
}

/* =========================
   CAPTION TAG STYLING
   ========================= */
caption {
  caption-side: top;
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 10px;
}

/* =========================
   RESPONSIVE IMAGE CLASS
   ========================= */
.responsive { max-width: 100%; height: auto; border: 1px solid #51471A; border-radius: 10px;
}

/* =========================
   TABLE COLUMN CLASSES
   ========================= */
.price {
  white-space: nowrap;
}

.specialty {
  white-space: nowrap;
  font-weight: bold;
}

/* =========================
   VALIDATION ID
   ========================= */
footer {
    text-align: center;   /* Centers all content in footer */
    margin-top: 20px;
    font-size: 0.9em;
}

footer a {
    text-decoration: none;
    margin: 0 5px;        /* Adds small spacing on left and right */
    display: inline;      /* Keeps links on the same line */
}

#validation {
    /* Remove display:block and text-align here */
}

/* =========================
   MEDIA QUERY (Hide image on ≤ 550px screens)
   ========================= */
@media only screen and (max-width: 550px) {
  img.responsive {
    display: none;
  }
}