/* Author: Hasan Choudhury
   Course: ITWP 1000
   File: styles.css
   Information on using external CSS style sheet is located in Chapter 3.
   Information on media queries is located in Chapter 7.
   Information on tables and CSS formatting for tables is located in Chapter 8. */

/* Body and general text styling */
body {
    margin-top: 1em;
    margin-bottom: auto;
    font-family: Arial, sans-serif;
}

/* Header styling */
h1 {
    text-align: center;
    font-size: 2.5em;
}

/* Paragraph and div styling */
p, div {
    margin: 10px;
    padding: 20px;
    line-height: 1.5em;
}

/* Table formatting */
table {
    margin: auto;
    border: 5px solid #3b2a14;
    width: 100%;
    border-spacing: 0;
}

td, th {
    border-style: none;
    padding: 0.5em;
    width: auto;
}

tfoot td {
    font-size: 9px;
    font-style: italic;
    text-align: center;
}

/* Alternate row coloring */
tr:nth-of-type(even) {
    background-color: #eaeaea;
}

/* Table header color */
thead:first-of-type {
    background-color: #3b2a14;
    color: #fff;
}

/* Caption tag styling */
caption {
    font-family: Impact, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-weight: bold;
    font-size: 1.75em;
    padding-bottom: 0.5em;
}

/* Responsive image class */
.responsive {
    max-width: 100%;
    height: auto;
    border: 1px solid #51471A;
    border-radius: 10px;
}

/* Price and specialty table cell class */
td.price {
    white-space: nowrap;
}

td.specialty {
    white-space: nowrap;
}

/* ID styling for validation link */
#validation {
    text-align: center;
}

/* Media query to hide the image on smaller screens */
@media only all and (max-width: 550px) {
    img {
        display: none;
    }
}