/*********************************************************************************/
/* Haight Ranch — Bootstrap 5 override stylesheet (faithful port of the        */
/* original Skel/HTML5UP Halcyonic look).                                       */
/*********************************************************************************/

@import url(https://fonts.googleapis.com/css?family=Rancho|Sancreek|Bree+Serif);
@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700);

@font-face {
    font-family: jennaSue;
    src: url(../fonts/JennaSue.ttf);
}

/* Basic */
body {
    background: #D4D9DD url('images/bg_rustic.png');
}

body, input, textarea, select {
    color: #514947;
    font-size: 1rem;
    font-family: 'Rokkitt', serif;
    line-height: 1.5em;
}

html, body {
    overflow-x: hidden;
}

h1 { font-family: 'Sancreek', cursive; }
h2 { font-family: 'Bree Serif', serif; }
h5 { font-family: 'lucidia Handwriting', serif; }
header { font-family: 'Bree Serif', serif; }

a { color: #6e250c; }

img { max-width: 100%; height: auto; }

section > :last-child, .last-child { margin-bottom: 0 !important; }

/* Containers match the original 1200px wide layout */
#header .container, #content .container, #footer .container,
#header.container, #content > .container, #footer.container {
    max-width: 1200px;
}

/* Wrappers */
#header-wrapper {
    background: #463e3b url('images/bg_top.png');
    border-bottom: solid 1px #272d30;
    box-shadow: inset 0px -1px 0px 0px #5a5451;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.75);
    padding: 15px 0 10px 0;
}

#content-wrapper {
    background: #f7f7f7 url('images/bg_weathered_colored.png');
    box-shadow: inset 0px -1px 0px 0px #5a5451;
    padding: 45px 0 45px 0;
}

#footer-wrapper {
    padding: 45px 0 45px 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,1);
}

/* Header / logo / nav */
#logo img.haightlogo, a.navbar-brand img.haightlogo {
    display: block;
    height: 70px;
    width: auto;
}

#nav .navbar-nav {
    font-family: 'Rancho', cursive;
    font-size: 1.2em;
}

#nav .nav-link {
    color: #c8c6c6;
    font-size: 1.4em;
    text-decoration: none;
    padding: 0.25rem 1rem;
}

#nav .nav-link:hover { color: #f8f6f6; }
#nav .nav-link.active, #nav .nav-link.active:hover { color: #fff; }

#nav.nav-home .nav-link { font-size: 1.6em; }

/* Content */
#content section {
    background: #fff;
    padding: 30px;
    box-shadow: 2px 2px 2px 1px rgba(128,128,128,0.1);
    margin: 0 0 20px 0;
    font-family: Rokkitt, serif;
}

#content h2 {
    font-size: 1.8em;
    color: #6e250c;
    margin: 0 0 0.25em 0;
    line-height: 1.2em;
    font-family: "Lucida Console", Monaco, monospace;
}

#content h3 {
    color: #b5a296;
    font-size: 12pt;
    font-family: "lucidia Handwriting", serif;
    font-weight: bold;
}

#content a { color: #6e250c; }

#content header {
    margin: 0 0 1em 0;
    text-align: left;
}

.black { color: #000 !important; }

h1.pagetitle {
    font-size: 2.25em;
    font-family: 'Sancreek', cursive;
    line-height: 1em;
    margin-bottom: 35px;
    color: #6e250c;
}

/* Footer */
#footer { color: #8C7265; }

#footer h2 {
    font-size: 1.25em;
    color: #A98372;
    margin: 0 0 1em 0;
}

#footer a {
    font-size: 0.9em;
    color: #8C7265;
}

#footer a:hover { color: #fff; }

/* Copyright */
#copyright {
    border-top: solid 1px #544942;
    text-align: center;
    padding: 25px 0 30px 0;
    color: #a3948d;
}

#copyright a { color: #8C7265; }
#copyright a:hover { color: #fff; }

/* Helpers (ported from original style.css) */
.heavy {
    font-family: 'Rokkitt', serif;
    font-weight: 700;
}

.light {
    font-family: 'Rokkitt', serif;
    font-weight: 400;
    font-size: 0.8em;
    line-height: 1.2em;
}

p.soldtext { color: #742229; font-weight: 700; }
p.saletext { color: #222974; font-weight: 700; }
.bolden { font-weight: 700; }
.bottomless { margin-bottom: 0 !important; }

.fancy {
    font-family: "Lucida Handwriting", cursive;
    font-size: 16px;
    color: #6e250c;
}
.fancy strong { font-weight: bold; }

/* Framed images */
img.framed, img.framed-portrait, img.framed-full {
    background: #fff url('images/bg_noise.png');
    padding: 10px;
    box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.15);
    margin: 0 1.5em 1em 0;
    outline: 0;
}

img.framed { display: inline-block; }
img.framed-portrait { display: block; width: 100%; }
img.framed-full { width: 100%; height: auto; }

.bordered-feature-image {
    display: block;
    background: #fff url('images/bg_noise.png');
    padding: 10px;
    box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.15);
    margin: 0 0 1em 0;
    outline: 0;
    width: 100%;
}
.bordered-feature-image img { display: block; width: 100%; }

/* Link list */
.link-list li { padding: 0.2em 0 0.2em 0; }
.link-list li:first-child { padding-top: 0 !important; border-top: 0 !important; }
.link-list li:last-child { padding-bottom: 0 !important; border-bottom: 0 !important; }
#content .link-list li { border-bottom: solid 1px #e2e6e8; }
#footer .link-list li { border-top: solid 1px #544942; border-bottom: solid 1px #413833; }

/* Quote list */
.quote-list { list-style: none; padding: 0; margin: 0 0 1.5em 0; }
.quote-list li { padding: 1em 0 1em 0; overflow: hidden; border-bottom: solid 1px #e2e6e8; }
.quote-list li:first-child { padding-top: 0 !important; border-top: 0 !important; }
.quote-list li:last-child { padding-bottom: 0 !important; border-bottom: 0 !important; }
.quote-list li p {
    margin: 0;
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.6em;
}
.quote-list li span {
    display: block;
    font-size: 0.9em;
    color: #6e250c;
}

/* Check list */
.check-list { list-style: none; padding: 0; margin: 0 0 1.5em 0; }
.check-list li {
    padding: 0.7em 0 0.7em 45px;
    font-size: 1.2em;
    color: #6e250c;
    border-bottom: solid 1px #e2e6e8;
    background: url('images/icon-checkmark.png') 0px 0.8em no-repeat;
}
.check-list li:first-child { padding-top: 0 !important; background-position: 0 0.3em; }
.check-list li:last-child { padding-bottom: 0 !important; border-bottom: 0 !important; }

/* Pedigree table */
table.pedigree {
    width: 100%;
    border-collapse: collapse;
}
table.pedigree, .pedigree th, .pedigree tr, .pedigree td { border: 2px solid #fff; }
.pedigree p { margin: 1px 10px 1px 10px; }
.pedigree td {
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    font-size: 0.9em;
}
.pedigree a { color: #000; text-decoration: none; }
td.sire { background: #c3ced5; border: 2px solid #fff !important; }
td.dam  { background: #d5c3ce; border: 2px solid #fff !important; }

/* Scrapbook (photo gallery) */
ul.scrapbook { list-style: none; margin: 0; padding: 0; }
.scrapbook li { display: inline-block; }
.scrapbook li img { height: 150px; width: auto; margin: 0 1.5em 1em 0; }
.scrapbook li:nth-child(2n+1) { transform: rotate(-2deg); }
.scrapbook li:nth-child(3n+2) { transform: rotate(1deg); }
.scrapbook li:nth-child(5n+3) { transform: rotate(-3deg); }
.scrapbook li:nth-child(7n+5) { transform: rotate(6deg); }
.scrapbook li:nth-child(11n+7) { transform: rotate(4deg); }
.scrapbook li:hover { transform: rotate(0deg); }

/* Sidebar */
@media (min-width: 992px) {
    .sidebar { max-height: 100em; overflow-y: auto; }
}

/* Responsive maps */
.google-maps {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Footer table */
.footertable { border: 0; border-collapse: collapse; }
.footertable td { border: 0; }

/* Social */
.social td {
    line-height: 15px;
    text-align: left;
    vertical-align: top;
    font-size: 0.9em;
}

/* Trainer / misc helpers (ported for trainers.html / index.html) */
.trainerwrapper { display: flex; width: 100%; justify-content: space-around; }
.trainer { width: 45%; display: flex; justify-content: space-around; align-items: center; text-align: center; }
.trainer2 { width: 45%; text-align: center; }
.trainer a { margin: 5px; }
.trainer img.framed { display: inline; margin: 0 1.5em 1em 0; }

.flex { display: flex; flex-direction: column; }
.center-vertical { padding: 20% 0 0 5%; }
.position-left { position: relative; left: auto; }
.homeaddition { width: 70%; text-align: center; color: #6e250c; }
.sbl { position: relative; width: 20%; display: inline-block; margin: 20px; }

/* Legacy button look (matches .button from old template) */
.button {
    display: inline-block;
    border: 1px solid rgba(144,144,144,0.5);
    border-radius: 4px;
    color: #555 !important;
    padding: 0.6em 2em;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    text-decoration: none;
    font-size: 0.9em;
}
.button:hover { background-color: rgba(144,144,144,0.075); }
.button.special { background-color: #555; color: #fff !important; }
.button.special:hover { background-color: #626262; }