/* Global styling.  */

html {
    color: black;
    background-color: white;

    font-size: 1.1em; /* Slightly less eye-strain. */
    font-family: Georgia, "New York", Times, "Times New Roman", serif;
}
#content + * { /* Don't bump first element down. */
    margin-top: 0;
}

/* Headings. */

h1, h2, h3, h4, h5, h6 {
    color: #006600;
    font-weight: bold;
    font-family: Geneva, Arial, Verdana, sans-serif;
}
h1, h2 { text-align: center; }
h1 {
    color: black;
    font-size: 28px;
}
h2 {
    font-size: 24px;
    margin-top: 0;
}
h3 {
    font-size: 22px;
}
h4 {
    font-size:  17px;
    letter-spacing: .02em;
    margin: 1em auto .5em auto;
    padding: 5px;
}
h5 {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 0;
}
h6 {
    font-size: 13px;
    margin-top: .25em;
    margin-bottom: 0;
}

/* Links. */

a:link, a:visited,
a:hover, a:active {
    color: #663366;
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Positioning classes. */

div.left { float: left; }
div.right { float: right; }
div.clear { clear: both; }
.center {
    margin: auto; /* Center block elements. */
    text-align: center; /* Center inline elements. */
}
.flex-container { display: flex; }

/* Content groups.  */

div.banner {
  width: 100%;
}
div.pagetitle {
  width: 100%;
  align: center;
}
div.lsidebar {
  float: left;
  height: 100%;
  align: center;
}
div.rsidebar {
  float: right;
  height: 100%;
  align: center;
}
div.content {
  overflow: hidden;
}
div.footer {
}

#banner-left { order: 1; }
#banner-right { order: 3; }
div.heading { order: 2; }

div.heading {
    align-items: center;
    flex-direction: column;
}
/* Specific selector to ensure centering
   when the banners go away in mobile view. */
div.heading.flex-container {
    margin: auto;
}
#banner-center { order: 1; }
#mobile-header h1 {
    color: #006600;
    font-size: 32px;
    text-decoration: underline;
    text-decoration-color: #C1C185;
}
#heading {
    order: 2;
    padding: 0 .5em; /* Make space from banners. */
    margin-top: auto; /* Move to bottom. */
}
/* Reduce size when mobile. */
@media only screen and (max-width: 1340px) {
    #heading h1 { font-size: 18px; }
}
#banner-left, /* Fill consistent space. */
#banner-right {
    width: 500px;
    height: 100px;
}
#banner-left { /* Push all the way to side. */
    text-align: left;
    margin-right: auto;
}
#banner-right {
    text-align: right;
    margin-left: auto;
}

/* Images.  */

#left-border img {
    /* /images/grafs/2013/left-border.gif */
    max-width: 161px;
    max-height: 1600px;
}
#right-border img {
    /* /images/grafs/2013/rightborder.gif */
    max-width: 161px;
    max-height: 1384px;
}
#banner-left.home img {
    /* /images/grafs/2011/leftdog.gif */
    max-width: 132px;
    max-height: 260px;
}
#banner-right.home img {
    /* /images/grafs/2011/rightdog.gif */
    /* max-width: 144px; actual width */
    /* Shrink width to match left side. */
    max-width: 132px;
    max-height: 260px;
}
#banner-center.home img {
    /* /images/grafs/2011/ddhead2011.png */
    max-width: 500px;
    max-height: 90px;
}
#banner-left.genera img {
    /* /images/banner3.gif */
    max-width: 397;
    max-height: 100;
}
#banner-right.genera img {
    /* /images/navgrafs/genus.gif */
    max-width: 320px;
    max-height: 100px;
}

/* News.  */
.news {
    text-align: center;
}
div.content div.news {
    margin-top: 2em;
}
div.content div.news.wide {
    width: 80%;
    margin: 20px auto;
    border: 4px solid #CCCC99;
    padding: 5px;
}
div.rsidebar div.news {
    font-size: smaller;
}
div.rsidebar div.news p,
div.rsidebar div.news h4 {
    margin-top: 0.5em;
}

@media only screen and (max-width: 1340px) {
    div.content div.news.wide { width: 100%; }
}

/* Favorite plant.  */
.fave {
    text-align: center;
}
div.content div.fave {
    width: 80%;
    margin: 2em auto;
    border: 4px solid #CCCC99;
    padding: 5px;
}
@media only screen and (max-width: 1340px) {
    div.content div.fave { width: 100%; }
}
div.content div.fave-img img {
    width: 100%;
    height: auto;
    /* Note the comment in get_favorite_plant that states
       "spath implies sidebar", and combine that with
       $plant_photo_dimension_medium in the upload include,
       and you have a reasonable default for the max-width. */
    max-width: 600px;
}
div.rsidebar div.fave {
    font-size: smaller;
    margin: 1em auto;
}
div.rsidebar div.fave img {
    max-width: 200px;
    border: 1px solid black;
    padding: 1px;
}

/* Contact info.  */
div.footer div#contactinfo {
    margin-top: 1.5em;
    text-align: center;
}
div.lsidebar div#contactinfo {
    font-size: smaller;
}
/* Bring the header and info together. */
div.footer div#contactinfo h4,
div.lsidebar div#contactinfo h4 {
    margin-bottom: 0;
}
div.footer div#contactinfo p,
div.lsidebar div#contactinfo p {
    margin-top: 0;
}

/* Registration box. */
#register p {
    width: 80%;
    margin: auto;
    margin-top: 2em;
    font-size: large;
    padding: 0.389em;
    border: 2px solid #006600;
}
@media only screen and (max-width: 1340px) {
    #register { width: 100%; }
}

/* In-page search box. */
#search-box {
    width: 43.6%;
    margin: auto;
    padding: .05em;
    text-align: center;
    border: 4px solid #C1C185;
}
#search-box h2 {
    margin: 0;
    padding: .4em;
}
#search-box p {
    margin-top: 0;
    margin-bottom: 1em;
}
#search-box form {
    margin-bottom: 1em;
}

/* Left sidebar search box. */
#sidebar-search-box {
    width: 100%;
    margin: auto;
    margin-bottom: 1em;
    text-align: center;
    padding-bottom: 5px;
    border: 3px solid #C1C199;
}
#sidebar-search-box h4 {
    margin: auto;
}

/* Dividers. */
div.lsidebar hr,
div.rsidebar hr,
div.footer hr {
    width: 75%;
    height: 3px;
    border: 0;
    color: #C1C185;
    background-color: #C1C185;
}

/* Social Media. */
div.social-buttons img {
    max-width: 34px;
    max-height: 35px;
}

/* Visiting Hours. */
.visit-hours {
    text-align: center;
}
div.lsidebar .visit-hours h4 {
    margin: .5em auto;
}
div.lsidebar .visit-hours p {
    font-size: smaller;
    margin: .5em auto;
    font-family: Geneva, Arial, Verdana, sans-serif;
}
div.content .visit-hours h4 {
    /* Pretend it's an h3 (homepage only). */
    font-size: 22px;
}
div.content .visit-hours h6 {
    /* Pretend it's an h4 (homepage only). */
    font-size: 17px;
}

/* Catalog Ordering. */
div#ordercat {
    text-align: center;
    font-size: smaller;
}
div#ordercat h4 {
    margin: .5em auto;
}
div#ordercat p {
    margin: .5em auto;
}
section#catalog-order p {
    font-size: larger;
}
section#catalog-order h4 {
    font-size: 22px;
}

/* Miscellaneous.  */

#daves-garden-watchdog-rating {
    font-family: Geneva, Arial, sans-serif;
    font-size:  small;
    font-weight: bold;
}

#social-buttons {
    margin: 1em 0;
    text-align: center;
}

#sidebar-tagline p {
    font-size: smaller;
}

p.small {
    font-size: small;
}

.short-top-margin {
    margin-top: .5em;
}

figure {
    text-align: center;
}
figcaption {
    font-size: 90%;
    font-weight: bold;
}

span.dropcap {
    color: #006600;
    font-size:  2.55em;
    line-height: 0.1px;
    font-weight: bold;
}

.note {
    /* Taken from the h4 style.  */
    color: #006600;
    font-family: Geneva, Arial, sans-serif;
    font-size: normal;
    font-weight: bold;
    letter-spacing: .02em;
    margin-top: 0;
    margin-bottom: .25em;
    padding: .313em;
    border: 2px solid #CCCC99;
    text-align: center;
}

.sans {
    font-family: Geneva, Arial, Verdana, sans-serif;
}
.slide-link {
    text-align: center;
}

span.french,
span.genus {
    font-style: italic;
}

span.catalog-id {
    font-family: Georgia, "New York", Times, "Times New Roman", serif;
    font-size: 11px;
    font-weight: bold;
    color: #000066;
}

h2.genera {
    font-size: x-large;
    font-weight: normal;
    font-style: italic;
    margin-top: 0;
    margin-bottom: 0;
}

#pot-sizes dt {
    font-weight: bold;
}

a.quicklink { margin: 0 .5em; }
div.quicklinks p { margin-bottom: 0; }