/*
=========================
ThyenSimAngus
=========================
*/

/* 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%;
}

/* ::: 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 SimAngus 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 */
}

.page {
    /* these declarations combine to center entire page in browser */
    margin: 10% auto;
    max-width: 68.75em;  /*  722/960px;*/
}
.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: 85%;height: auto;background: #B0B0B0;background: linear-gradient(-45deg, #fff,#808184 );
           border: 4px #394b93 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 */
.blue-box {margin: 0 auto 1%; max-width: 65%;height: auto;background-color: #f2f3f9;
          border: .5em #394b93 solid;}
.blue-box p {margin: .5em .9em; color: #000; line-height: 1.5em; text-align: left;}

.brown-box {margin: 2em auto;width: 80%;padding: .1em;border: .2em #937639 solid;}
.brown-box p, ul {margin: .75em; 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: 80%;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 {margin: 0 15px 0 ;}
#photo .rght{float: right;margin: 0 10px 0 25px;}
#photo .lft{float: left;margin: auto 25px;}
#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: 1em;}
  #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 (min-width: 20em) {
    /* blue box will be gone when seen on this size screen */
  .blue-box {margin: 0 auto 1%; max-width: 95%;height: auto;background-color: transparent;
          border: 0;}

  /* top 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 {
    display: inline-block;
    font-size: 1em;
    padding: .5em;
  }
}

/* 480+
------------------------------------------ */
@media only screen and (min-width: 30em) {
    .blue-box {margin: 0 auto 1%; max-width: 65%;height: auto;background-color: #f2f3f9;
          border: .5em #394b93 solid;}
.nav-main a {
    font-size: 1.125em; /* 18px/16px */
    padding-left: 1.4em;
    padding-right: 1.15em;
  }

.logo {
    text-align: left;
 }
}