/* ---------------------------------------------------------------
 * Broken Arrow Silver - site stylesheet
 *
 * Restores the original buck.css and bpages.css, recovered from the
 * Wayback Machine (captures of 2005-03-03), and replaces the inline
 * <style> blocks that were in index.html, contact.php and 0807new.html.
 * --------------------------------------------------------------- */

/* Buckle names (buckles-a.htm) - from buck.css.
   The original value "800000" was missing its "#". */
.buckle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #800000;
}

/* Buckle names on the single-buckle pages (bpgs/*.htm) - from bpages.css */
.buckle-detail .buckle {
    font-size: 24px;
}

/* ---------------------------------------------------------------
 * Single-buckle pages (bpgs/*.htm)
 * Replaces the old HTML attributes: body bgcolor/margins, table
 * border/align/cellpadding/cellspacing/bgcolor, td align/valign and
 * img border. Image-specific widths/heights stay in the markup.
 * --------------------------------------------------------------- */
.buckle-detail {
    margin: 0;
    background-color: #000000;
}

/* Outer frame: was border="1" align="center" cellpadding="5" cellspacing="4".
   Explicit per-side colors reproduce the browser's 3D border="1" shading
   (light top/left, dark bottom/right; reversed on the cell). */
.buckle-frame {
    margin-right: auto;
    margin-left: auto;
    border: 1px solid;
    border-color: #a8a8a8 #545454 #545454 #a8a8a8;
    border-spacing: 4px;
}

.buckle-frame > tbody > tr > td {
    box-sizing: border-box; /* height="NN" includes padding/border, as it did in quirks mode */
    padding: 5px;
    border: 1px solid;
    border-color: #545454 #a8a8a8 #a8a8a8 #545454;
    vertical-align: top;
}

/* White card: was border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" */
.buckle-card {
    margin-right: auto;
    margin-left: auto;
    border-spacing: 0;
    background-color: #ffffff;
}

.buckle-card > tbody > tr > td {
    box-sizing: border-box; /* height="NN" includes padding, as it did in quirks mode */
    padding: 5px;
    text-align: center;
}

/* Buckle photo: was border="1". vertical-align removes the standards-mode
   descender gap under an image that is alone on its line. */
.buckle-card img {
    border: 1px solid;
    vertical-align: bottom;
}

/* Buckle descriptions (buckles-a.htm) - from buck.css.
   The original value "0000000" was invalid. */
.text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
}

/* "View our newest arrivals" links on the black page background.
   Not defined in any archived stylesheet; inferred from the class name. */
.textwhite {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

/* Company name heading (was inline .style1 in index.html and contact.php) */
.brand {
    color: #09aa42;
}

/* Copyright line (was inline .style2 in 0807new.html) */
.text-black {
    color: #000000;
}

/* ---------------------------------------------------------------
 * Shared helpers (replace old presentational HTML attributes)
 * --------------------------------------------------------------- */

/* Was <body bgcolor="#000000"> */
.page-black {
    background-color: #000000;
}

/* Was <body text="navy"> */
.text-navy {
    color: navy;
}

/* Was <center>: centers text, and its direct child tables
   (not tables nested inside table cells) */
.centered {
    text-align: center;
}

.centered > table {
    margin-right: auto;
    margin-left: auto;
}

/* Browsers reset <center>'s centering at every <table>, so cell content
   is left-aligned unless the cell itself was align="center". */
.centered table {
    text-align: left;
}

/* Was align="center" on a <table> */
.table-center {
    margin-right: auto;
    margin-left: auto;
}

/* Was align="center" on <p> */
.text-center {
    text-align: center;
}

/* Was valign="top" on a single cell */
.align-top {
    vertical-align: top;
}

/* Was img align="absbottom" */
.align-bottom {
    vertical-align: bottom;
}

/* Was <hr size=5 width="600" color="#CC6600"> */
.rule {
    width: 600px;
    height: 3px;
    border: 1px solid #cc6600;
    background-color: #cc6600;
}

/* ---------------------------------------------------------------
 * Buckle catalog (buckles-a.htm)
 * --------------------------------------------------------------- */

/* Top banner: was border="4" bordercolor="#D7BFAD" bgcolor="#FFF7E8"
   cellpadding="3" style="border-collapse: collapse" */
.masthead {
    border-collapse: collapse;
    border: 4px solid #d7bfad;
    background-color: #fff7e8;
}

.masthead td {
    padding: 3px;
    border: 1px solid #d7bfad;
}

/* Banner slices: no standards-mode descender gap under the image row */
.masthead img {
    vertical-align: bottom;
}

/* Phone number: was <font color="#CC6600"> with <font face="Arial" size="6|5"> */
.phone {
    color: #cc6600;
}

.phone-number {
    font-family: Arial;
    font-size: xx-large;
}

.phone-break {
    font-family: Arial;
    font-size: x-large;
}

/* Was <font size="2" color="#FF0000" face="Arial">; set on the <p> so its line
   height matches the text in standards mode */
.click-hint {
    margin: 16px 0; /* keep the paragraph's original 1em margins at 16px */
    font-family: Arial;
    font-size: small;
    color: #ff0000;
}

/* Row of four buckles: was width="84%" border="0" cellspacing="4" cellpadding="4",
   cells valign="top" bgcolor="#FFFFFF" */
.buckle-grid {
    width: 84%;
    border-spacing: 4px;
}

.buckle-grid > tbody > tr > td {
    padding: 4px;
    vertical-align: top;
    background-color: #ffffff;
}

/* One buckle: was border="0" cellpadding="5" cellspacing="0", cells align="center".
   Sizes (width/height) stay in the markup; one tile differs. */
.buckle-tile {
    border-spacing: 0;
}

.buckle-tile > tbody > tr > td {
    padding: 5px;
    text-align: center;
}

/* Was img align=middle. Each image is alone on its line: bottom-align so the
   line is exactly the image height, as in almost-standards mode */
.buckle-tile img {
    vertical-align: bottom;
}

/* Cowboy Sports News bar: was border="1" bordercolor="#FFFFFF" cellpadding="0"
   cellspacing="0" style="border-collapse: collapse", cells bgcolor="#FFFFFF" */
.partner-bar {
    border-collapse: collapse;
    border: 1px solid #ffffff;
}

.partner-bar td {
    padding: 0;
    border: 1px solid #ffffff;
    background-color: #ffffff;
}

/* Images sit alone on their line: bottom-align so standards mode adds no
   descender gap (was align=middle / no alignment in almost-standards mode) */
.partner-bar img {
    vertical-align: bottom;
}

/* Was img border=2 */
.partner-banner {
    border: 2px solid;
}

/* Logo + address: was border="2" bordercolor="800000" cellpadding="0"
   cellspacing="0" style="border-collapse: collapse" */
.contact-card {
    border-collapse: collapse;
    border: 2px solid #800000;
}

.contact-card td {
    padding: 0;
    border: 1px solid #800000;
}

/* Logo alone in its cell: no standards-mode descender gap */
.contact-card img {
    vertical-align: bottom;
}

.contact-info {
    background-color: #ffffff;
}

/* Paragraph font matches the address text so line height is unchanged */
.contact-info p {
    font-family: Arial;
}

/* Was <font color="#800000" face="Arial"> */
.contact-address {
    font-family: Arial;
    color: #800000;
}

/* Copyright box: was border="1" cellpadding="2" cellspacing="2" bgcolor="#FFFFFF",
   cell align="center". 3D border colors as in .buckle-frame. */
.copyright {
    border: 1px solid;
    border-color: #a8a8a8 #545454 #545454 #a8a8a8;
    border-spacing: 2px;
    background-color: #ffffff;
}

.copyright td {
    padding: 2px;
    border: 1px solid;
    border-color: #545454 #a8a8a8 #a8a8a8 #545454;
    font-family: arial, helvetica; /* cell font matches the text, so lines */
    font-size: x-small;            /* are not padded to the default size */
    text-align: center;
}

/* Was <font face="arial,helvetica" size="-2"> */
.copyright-text {
    font-family: arial, helvetica;
    font-size: x-small;
}

/* ---------------------------------------------------------------
 * Home page gallery (index.html)
 * Was <table border="0">, cells align="center" bgcolor="#EBEBEB".
 * Cell widths and image sizes stay in the markup.
 * --------------------------------------------------------------- */
.gallery td {
    text-align: center;
    background-color: #ebebeb;
}

/* Flyers: no standards-mode descender gap under each image */
.gallery img {
    vertical-align: bottom;
}

/* Company name and address (no background) */
.gallery .gallery-header {
    background-color: transparent;
}

/* Current featured flyer: was valign="top" bgcolor="#979797" */
.gallery .gallery-feature {
    vertical-align: top;
    background-color: #979797;
}

/* Blank divider row: was bgcolor="#ffffff" */
.gallery .gallery-spacer {
    background-color: #ffffff;
}

/* Footer: was bgcolor="#B6B6B6" */
.gallery .gallery-footer {
    background-color: #b6b6b6;
}

/* ---------------------------------------------------------------
 * New arrivals (0807new.html) and contact page (contact.php).
 * 0807new.html also reuses the buckles-a.htm components above.
 * --------------------------------------------------------------- */

/* Brochure photos: was img border="1" */
.brochure {
    border: 1px solid;
    vertical-align: bottom; /* no standards-mode gap under the photo */
}

/* Contact page layout: was border="0" cellpadding="5" */
.contact-layout td {
    padding: 5px;
}