/*
=========================
ThyenSimmental.com
=========================
*/

/* normalize.css v2.1.2 | MIT License | git.io/normalize
    (truncated for example in book)
---------------------------------------------------------------- */

/* ::: HTML5 display definitions ::: */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}

/* ::: Base ::: */
/**
 * Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/**
 * Remove default margin.
 */
body {
    margin: 0;
}

/* ::: Links ::: */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
    outline: thin dotted;
}

a:active,
a:hover {
    outline: 0;
}

/* ::: Typography ::: */
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
    font-size: 80%;
}

/* new 11/17/2020 - box-sizing property set to border-box. 
/**This makes sure that the padding and border are included in the total width and height of the elements.*/

* {
    box-sizing: border-box;
}

/* ::: Embedded content ::: */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
    border: 0;
}
/* -- end of abridged normalize -- */

/* html5boilerplate.com Clearfix
--------------------------------- */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

/*------------------------------------------------------- */
/*------------------------------------------------------- */
/* from here down pertains to Thyen Simmentals specifically */
/*------------------------------------------------------- */
/*------------------------------------------------------- */

/* @viewport rule attempts to fix IE 10 viewport sizing */
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

/* body */
body {margin: 10% 0; padding:0; height:auto;background: #fff; font: 100%/1.2 Rockwell;color: #000;}

* {
    -webkit-box-sizing: border-box; /* Android <= 2.3, iOS <= 4 */
    -moz-box-sizing: border-box; /* Firefox 1+ */
    box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}

/* 2020 New 3 Bar Navigation */
.nav div{
    height: 4px;
    background-color: white; /* might want to delete this line */
    margin:5px 0;
    border-radius: 25px;
    transition: 0.3s;
}

.nav {
    width: 30px;
    display: block;
    margin: 1em 0 0 1em;
}
.one {
    width: 30px;
}
.two{
    width: 20px;
}
.three {
    width:25px;
}
.nav:hover div{
    width:30px;
}


/* END of 2020 New 3 Bar Navigation */
.page {
    /* these declarations combine to center entire page in browser */
    margin: 10% auto;
    max-width: 68.75em;  /*  722/960px;*/
}

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

.logo img {
    max-width: 100%;
}
h1 {margin:.5em; padding: 0 .5em;font-weight: bolder;font-size: 1.75em;font-style: italic;
    color: #000; line-height: 1.25em;text-align: center;}
h2 {margin:1em; padding: 0 .5em;font-weight: bolder;font-size: 1.25em;color: #937639;
    line-height: 1.25em;text-align: center;}


.grey-wrap {margin: 0 auto; max-width: 95%;height: auto;background: #A4A691;background: linear-gradient(-45deg, #fff,#49432B );
            border: 4px #937639 solid;}

.logo { margin:-12% 23% 2%;max-width: 100%;}

/* ::: Main Navigation ::: */
.nav-main li {
    /*border-left: 1px solid #c8c8c8;*/
    display: inline-block;
    text-align: left;
}
.nav-main li:first-child {border-left: none;}
.nav-main li:last-child a {padding-right: 0;}
.nav-main a {color: #fff;
             font-size: 1.125em; /* 18px/16px */
             text-decoration: none;
             display: inline-block;
             padding: .5em .5em .5em 1.15em;
}
.nav-main a:hover {color: #937639;text-decoration: none;}
.nav-main .current-page,
.nav-main .current-page:hover {color: #000; cursor: default;}

.clear {clear: both;}

/* content */

.welcome-box {margin: 0 auto; max-width: 85%;height: auto;background-color: wheat;
              border: .5em #937639 groove; }
.welcome-box p {margin: .5em .9em; color: #000; line-height: 1.5em; text-align: left;}

.banner-box h3 {margin:1em 2em;font-size: 1.5em; font-style: italic; color: orange;text-align: center;}
.banner-box a {font-size: .95em; color: orange;}

.brown-box {margin: 2em auto;width: 80%;padding: .1em;border: .2em #937639 solid;}
.brown-box p, ul {margin: .95em; color: #000; line-height: 1.5em; }
.brown-box h1 {margin:1em 2em;font-size: 1.5em; font-style: italic; color: #000;}
.brown-box img {float:left;margin:.25em;padding: .5em;}

.read-more{font-size: .6em;color: #937636;text-decoration:none;}
.read-more a:hover { text-decoration:underline; }

.bull-box {margin: 0 auto 1%;  max-width: 90%;height: auto;border: .75em #937639 double;}
.bull-box p {margin: .5em; color: #000; line-height: 1.5em; }
.bull-box ol, ul {margin: 20px; }
.bull-box ul li {margin-left: 25px; font-size: 1.15em; color: #000; line-height: 1.25em;}

.bull-grn-bull {margin:9% 2%;max-width: 100%;}

.short-horizon-bar { margin: 2% auto; width:250px; height:2px; background-color: #000;}
.double-long-horizon-bar { width:100%; height:3px; background-color: #000;margin: .5em auto;}


/* Adding photo border on images 8-2015 */

#photo .rght{float: right;margin: 0 10px 0 25px;}
#photo .lft{float: left;margin: auto 25px;}
/*  2021, Jan - Removed this code and just added white border using PhotoPaint. Imported photo on a 640x420
      white background, cropped to a close white border.
#photo img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
}*/

#footer-container { clear:both; margin: 2em auto;width:80%; color: black; font-size:.8em;padding-bottom: 3em;}
#footer-container a {color: black; text-decoration: none;font-size:.9em;}
#footer-container a:link { padding:0; color: black;}
#footer-container a:hover {text-decoration: underline;}
#footer-container .copyright {float:right;text-align: right;}

/* ===================== MEDIA QUERIES ===================== */

/* 320+
------------------------------------------ */
@media only screen and (max-width: 480px) {
    /* welcome-box will be gone when seen on this size screen */
    .welcome-box {max-width: 100%;background-color: transparent;border-color: transparent;}
    .bull-box {border: transparent;}
    .grey-wrap { max-width: 100%;}
    .banner-box h3 {margin:1em 2em;font-size: 1.5em; font-style: italic; color: orange;text-align: center;}
    .banner-box a {font-size: .95em; color: orange;}

    h1 {font-size: 1.25em;}
    h2 {font-size: .95em;color: whitesmoke;}

    p {font-size: .85em}

    #photo .rght{margin: 0 auto;}
    #photo .lft{margin: 0 5em;}

    .bull-box ol, ul {margin: 0px 15px 0px 10px; }
    .bull-box ul li {margin: 0px 15px 0px 10px;
                     font-size: .85em; color: #000; line-height: 1.25em;}
}

/* 480+
------------------------------------------ */
@media only screen and (min-width: 475em) {
    .welcome-box {margin: 0 auto 1%; max-width: 65%;height: auto;background-color: #f2f3f9;
                  border: .5em #394b93 solid;}

    /* top navigation */
    .nav-main li {
        border-left: 1px solid whitesmoke;
        display: inline-block;
        text-align: left;
    }

    .nav-main li:first-child {
        border-left: none;
    }

    .nav-main li:last-child a {
        padding-right: 0;
    }

    .nav-main a {
        display: inline-block;
        font-size: 1em;
        padding: .5em;
    }

    .logo {
        text-align: left;
    }
}