@charset "UTF-8";
/*! *** Go Botany master styles file ***
 Please edit only the .scss source and use Compass to auto-generate the .css.
 The generated .css is kept in the repository to allow easy deployment.
 */
/* First are some SASS "partials" for external and third-party styles. The goal is to keep all styles in just one deployed CSS file, site.css. Later on in this file, other partials are imported for styles specific to a site feature. A final partial, site-media-queries, is imported last in this file. */
/* Imports for browser baseline, tools */
/* for gradient, etc. */
/* Imports for third-party controls */
#sb-title-inner, #sb-info-inner, #sb-loading-inner, div.sb-message { font-family: "Trebuchet MS",Verdana,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 200; color: #fff; }

#sb-container { position: fixed; margin: 0; padding: 0; top: 0; left: 0; z-index: 999; text-align: left; visibility: hidden; display: none; }

#sb-overlay { position: relative; height: 100%; width: 100%; }

#sb-wrapper { position: absolute; visibility: hidden; width: 100px; }

#sb-wrapper-inner { position: relative; overflow: hidden; height: 100px; }

#sb-body { position: relative; height: 100%; }

#sb-body-inner { position: absolute; height: 100%; width: 100%; }

#sb-player.html { height: 100%; overflow: auto; }

#sb-body img { border: none; }

#sb-loading { position: relative; height: 100%; }

#sb-loading-inner { position: absolute; font-size: 14px; line-height: 24px; height: 24px; top: 50%; margin-top: -12px; width: 100%; text-align: center; }

#sb-loading-inner span { background: url(../images/shadowbox/loading.gif) no-repeat; padding-left: 34px; display: inline-block; }

#sb-body, #sb-loading { background: transparent; }

#sb-title, #sb-info { position: relative; margin: 0; padding: 0; overflow: hidden; }

#sb-title, #sb-title-inner { height: 26px; line-height: 26px; }

#sb-title-inner { font-size: 16px; }

#sb-info, #sb-info-inner { height: 20px; line-height: 20px; }

#sb-info-inner { font-size: 12px; }

#sb-nav { float: right; height: 16px; padding: 2px 0; width: 45%; }

#sb-nav a { display: block; float: right; height: 16px; width: 16px; margin-left: 3px; cursor: pointer; background-repeat: no-repeat; }

#sb-nav-close { position: absolute; width: 32px; height: 32px; top: 48px; right: 48px; cursor: default; background-image: url(../images/icons/close-large.png); }

#sb-nav-next { background-image: url(../images/shadowbox/next.png); background-position: 50% 0; padding: 0 14px 14px; }

#sb-nav-previous { background-image: url(../images/shadowbox/previous.png); background-position: 50% 0; padding: 0 14px 14px; }

#sb-nav-play { background-image: url(../images/shadowbox/play.png); }

#sb-nav-pause { background-image: url(../images/shadowbox/pause.png); }

#sb-counter { float: left; width: 45%; }

#sb-counter a { padding: 0 4px 0 0; text-decoration: none; cursor: pointer; color: #fff; }

#sb-counter a.sb-counter-current { text-decoration: underline; }

div.sb-message { font-size: 12px; padding: 10px; text-align: center; }

div.sb-message a:link, div.sb-message a:visited { color: #fff; text-decoration: underline; }

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft { 	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */ min-width: 75px; width: 10%; height: 100%; 	/* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */ background-image: url(/static/images/smoothDivScroll/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; left: 0; /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */ cursor: url(/static/images/smoothDivScroll/cursors/cursor_arrow_left.png), url(../images/smoothDivScroll/cursors/cursor_arrow_left.png), w-resize; }

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible { background-image: url(/static/images/smoothDivScroll/arrow_left.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; /* Standard CSS3 opacity setting */ -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */ filter: alpha(opacity=35); /* Opacity for Internet Explorer. */ }

/* Invisible right hotspot */
div.scrollingHotSpotRight { min-width: 75px; width: 10%; height: 100%; background-image: url(/static/images/smoothDivScroll/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; right: 0; cursor: url(/static/images/smoothDivScroll/cursors/cursor_arrow_right.png), url(../images/smoothDivScroll/cursors/cursor_arrow_right.png), e-resize; }

/* Visible right hotspot */
div.scrollingHotSpotRightVisible { background-image: url(/static/images/smoothDivScroll/arrow_right.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; filter: alpha(opacity=35); -moz-opacity: 0.35; }

/* The scroll wrapper is always the same width and height as the containing element (div). Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; }

div.scrollableArea { position: relative; width: auto; height: 100%; }

/* Import for Go Botany common definitions */
/* Go Botany common definitions */
/* for gradient, etc. */
/* Web fonts: style-linked groups */
@font-face { font-family: Basetica; font-weight: 400; src: url(/static/fonts/Basetica-Medium-205TF.woff2) format("woff2"), url(/static/fonts/Basetica-Medium-205TF.woff) format("woff"); }
@font-face { font-family: Basetica; font-style: italic; font-weight: 400; src: url(/static/fonts/Basetica-Medium-Italic-205TF.woff2) format("woff2"), url(/static/fonts/Basetica-Medium-Italic-205TF.woff) format("woff"); }
@font-face { font-family: Basetica; font-weight: 900; src: url(/static/fonts/Basetica-Black-205TF.woff2) format("woff2"), url(/static/fonts/Basetica-Black-205TF.woff) format("woff"); }
@font-face { font-family: Basetica; font-style: italic; font-weight: 900; src: url(/static/fonts/Basetica-Black-Italic-205TF.woff2) format("woff2"), url(/static/fonts/Basetica-Black-Italic-205TF.woff) format("woff"); }
@font-face { font-family: ScalaSans; font-weight: 900; src: url(//newfs.s3.amazonaws.com/fonts/ScalaSansWeb-Bold.woff) format("woff"); }
/* was #807121, darkened for WCAG AA */
/* from NPT palette */
/* lighter version of #a7da7e green from NPT palette */
/* darker version of #a7da7e green from NPT palette */
/* dark version of #a7da7e green from NPT palette */
*:focus { outline-color: -webkit-focus-ring-color; outline-offset: 2px; outline-style: auto; outline-width: 2px; }

.orange-button, body.plantshare .image-modal a.button, body.plantshare#ask #main .submit, body.plantshare#plantshare #ask .submit { background-color: #bb582a; border: 1px solid #bb582a !important; border-radius: 14px; box-shadow: 0px 1px 2px 0 #a2a64d; color: #fff; cursor: default; display: inline-block; font-family: ScalaSans, "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 13px; font-weight: bold !important; letter-spacing: 1px; line-height: 18px; min-width: 80px; padding: 4px 12px; text-align: center; text-decoration: none; }
.orange-button.caps, body.plantshare .image-modal a.caps.button, body.plantshare#ask #main .caps.submit, body.plantshare#plantshare #ask .caps.submit { text-transform: uppercase; }
.orange-button.disabled, body.plantshare .image-modal a.disabled.button, body.plantshare#ask #main .disabled.submit, body.plantshare#plantshare #ask .disabled.submit { background-color: #f0ccbc; border-color: #edc573 !important; color: #666 !important; cursor: default !important; text-shadow: none; }
.orange-button.large, body.plantshare .image-modal a.large.button, body.plantshare#ask #main .large.submit, body.plantshare#plantshare #ask .large.submit { border-radius: 20px; color: #fff; font-size: 16px; letter-spacing: 1.5px; min-width: 150px; padding: 9px 30px; }

.action-link, #dkey .offer-help-aside a.button, #dkey a.button, #dkey a.show-all-button { background-color: #bb582a; border-bottom: 0.15rem solid #fff !important; /* override some link underlines in text */ border-radius: 10px; box-shadow: 0 0.15rem 0 0 #bb582a; color: #fff; cursor: pointer; display: inline-block; font-family: ScalaSans, "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1px; line-height: 18px; min-width: 75px; padding: 4px 12px; text-align: center; text-decoration: none; /* Visited: duller; like the relationship between classic blue & purple */ /* Hover: higher contrast; use the current nav. bar color */ /* Active: orange; similar to default red, but higher contrast */ }
.action-link:visited, #dkey a.button:visited, #dkey a.show-all-button:visited { background-color: #8e421f; box-shadow: 0 0.15rem 0 0 #8e421f; color: #fff; }
.action-link:hover, #dkey a.button:hover, #dkey a.show-all-button:hover, .action-link:focus, #dkey a.button:focus, #dkey a.show-all-button:focus { background-color: #17555b; box-shadow: 0 0.15rem 0 0 #17555b; color: #fff; }
.action-link:active, #dkey a.button:active, #dkey a.show-all-button:active { background-color: #cc4b00; box-shadow: 0 0.15rem 0 0 #cc4b00; color: #fff; }
.action-link.caps, #dkey a.caps.button, #dkey a.caps.show-all-button { letter-spacing: 1px; text-transform: uppercase; }
.action-link.large, #dkey a.large.button, #dkey a.large.show-all-button { border-bottom: 0.2rem solid #fff; border-radius: 12px; font-size: 16px; line-height: 24px; min-width: 120px; padding: 6px 18px 3px; }
.action-link.large.caps, #dkey a.large.caps.button, #dkey a.large.caps.show-all-button { letter-spacing: 1.5px; }

/* Fix button and action-link text alignment in Firefox; evidently the misalignment is due to how the browsers handle the Scala Sans font. (Unfortunately this means that any fonts lower in the font stack would show up misaligned in FF.) */
@-moz-document url-prefix() { .orange-button, body.plantshare .image-modal a.button, body.plantshare#ask #main .submit, body.plantshare#plantshare #ask .submit, .action-link, #dkey .offer-help-aside a.button, #dkey a.button, #dkey a.show-all-button { padding-bottom: 3px; padding-top: 5px; } }
.hidden { display: none !important; }

/* image popups (used in D. Key, and in D. Key section of species page) */
div.shadow { /* shadow that hides the whole page */ display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.45); text-align: center; }

div.popup { /* for displaying quick lists of taxa */ border-radius: 1em; display: inline-block; margin: 5% auto; max-height: 90%; overflow-y: auto; overflow-x: hidden; /* otherwise scrolling can leak to page */ border: 0.5em solid #acac90; background-color: #fcf8ef; padding: 1em 2em; text-align: left; line-height: 1.25em; }

div.popup h2 { /* "See list of 14 species in 1b" */ border-bottom: 1px solid #519136; padding-bottom: 0.5em; color: #519136; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-weight: normal; /* For tall lists a scrollbar appears, and tends to make the last word of the title wrap unattractively. */ white-space: nowrap; }

div.popup a { text-decoration: none; color: #000; }
div.popup a:hover, div.popup a:focus { text-decoration: underline; }
div.popup a:hover { color: #27610a; }

/* For occasional, temporary donation campaigns: message at top of page */
#top-message { align-items: center; background-color: #e8a38c; color: #000; display: flex; font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; font-size: 1.02em; justify-content: space-between; margin: 0; padding: 0.7em 1.8em; }

#top-message p { line-height: 150%; }

#top-message p b { margin-right: 1em; }

#top-message .controls { align-items: center; display: flex; }

#top-message .close { background-color: inherit; border: 0; color: #000; font-size: 1.2em; font-weight: bold; margin-left: 1.2em; padding: 0; text-align: center; width: 2em; }

@media only screen and (max-width: 600px) { #top-message { flex-direction: column; padding: 1em 1.5em 0.4em; }
  #top-message p { margin-bottom: 0.5em; margin-top: 0; }
  #top-message .controls { justify-content: space-between; margin-bottom: 0.5em; width: 100%; } }
/* For newsletter sign-up dialog */
.dialog { background-color: #feffef; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 0px; bottom: 0.5rem; color: #000; display: flex; font-family: "Trebuchet MS", sans-serif; font-size: 16px; max-width: 26rem; padding: 1rem 2rem; position: fixed; right: 0.5rem; z-index: 50; }

.dialog h2 { color: #000; font-size: 24px; margin: 20px 0; padding: 0; }

.dialog p { line-height: 1.4; }

.dialog__ok { background: #333; border: 1px solid #333; color: #fff; display: inline-block; font-family: inherit; font-size: 1rem; margin-bottom: 0.5rem; margin-right: 0.5rem; min-width: 100px; padding: 0.5rem 1rem; text-align: center; text-decoration: none; white-space: nowrap; }

.dialog__cancel { background-color: transparent; border: 1px solid gray; font-family: inherit; font-size: 1rem; margin-bottom: 0.5rem; margin-right: 2rem; min-width: 100px; padding: 0.5rem 1rem; white-space: nowrap; }

.dialog__ok:focus, .dialog__ok:hover, .dialog__cancel:focus, .dialog__cancel:hover { outline: 3px solid #666; outline-offset: 3px; }

.dialog__check { display: inline-block; font-size: 0.8rem; margin-top: 1.5rem; white-space: nowrap; }

.dialog__check input { margin-right: 0.25rem; }

.dialog__close { background-color: transparent; border: 0; color: #000; font-size: 1.5rem; height: 24px; margin-right: -14px; padding: 0; width: 24px; }

/* Site-wide styles */
body { background-color: #f8eeda; color: #000; font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; font-size: 81.25%; margin: 0; }

html, button, input, select, textarea { font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; }

button, input, select, textarea { font-size: 100%; margin: 0; }

a { color: #27610a; text-decoration: none; }

a:visited { color: #50570a; }

a:active { color: #266407; }

a:not([href]) { color: #000; }
a:not([href]):hover { text-decoration: none; }

#main p a, #main li > a, #main li > i a, #main dt a, #main td a, #main h2 a, #main h3 a, #main form > a, #main form div > a, #main li li a, #main nav a, #sidebar form > a, .nemap a { border-bottom: 1px solid #27610a; }
#main p a:visited, #main li > a:visited, #main li > i a:visited, #main dt a:visited, #main td a:visited, #main h2 a:visited, #main h3 a:visited, #main form > a:visited, #main form div > a:visited, #main li li a:visited, #main nav a:visited, #sidebar form > a:visited, .nemap a:visited { border-bottom: 1px solid #50570a; }
#main p a:active, #main li > a:active, #main li > i a:active, #main dt a:active, #main td a:active, #main h2 a:active, #main h3 a:active, #main form > a:active, #main form div > a:active, #main li li a:active, #main nav a:active, #sidebar form > a:active, .nemap a:active { border-color: #266407; }
#main p a:not([href]), #main li > a:not([href]), #main li > i a:not([href]), #main dt a:not([href]), #main td a:not([href]), #main h2 a:not([href]), #main h3 a:not([href]), #main form > a:not([href]), #main form div > a:not([href]), #main li li a:not([href]), #main nav a:not([href]), #sidebar form > a:not([href]), .nemap a:not([href]) { border: 0; }

#main td.scientific-name a { border-bottom: 0; }

h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-weight: normal; line-height: 120%; margin: 0; padding: 0; }

h1 { color: #554e16; font-size: 1.9em; font-weight: bold; margin: 0.8em 0 0.6em; }

h2 { color: #554e16; font-size: 1.6em; font-weight: bold; margin: 1.6em 0 0.8em; }

h3 { color: #554e16; font-size: 1.25em; font-weight: bold; margin: 1.6em 0 0.8em; }

h3.compact { margin: 1em 0 0.2em; }

/* Only h1-h3 used through most of site to avoid very deep structure */
/* h4 is sometimes used in species page Conservation Status section */
h4 { color: #554e16; font-size: 1.15em; font-weight: bold; margin: 1.6em 0 0.8em; }

/* TODO: try to eliminate h5, h6 */
h5, h6 { color: #554e16; font-size: 81.25%; }

h6 { font-style: italic; }

p { line-height: 153%; margin: 1em 0; padding: 0; }

ul { line-height: 153%; margin: 0; padding: 0; }

ul li { margin: 0 0 5px 0; }

.visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.clearit { border: none !important; clear: both; float: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; width: auto !important; }

.missing-image { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZjJlMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2ZTZjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eaf2e2), color-stop(100%, #d6e6c5)); background: -moz-linear-gradient(top center, #eaf2e2, #d6e6c5); background: -webkit-linear-gradient(top center, #eaf2e2, #d6e6c5); background: linear-gradient(to bottom center, #eaf2e2, #d6e6c5); color: #354d1e; height: 149px; position: relative; width: 160px; }

.no-break { white-space: nowrap; }

p.new { background: #ccdf53; border-radius: 0.25em; color: #000; display: inline-block; font-size: 12px; font-weight: normal; margin: 0; padding: 0 0.25em; }

p.meta { font-size: 10px; font-style: italic; margin: 4px 0; }
p.meta + p { margin-top: 2px; }

#main .distribution-character { /* species code: box, as in printed book */ margin: 0 0.25em; border: 1px solid black; padding: 0 0.25em; font-size: 0.875em; }

/* Navigation highlighting */
/* Global navigation (header) */
body#home header nav li.home::after { /* For use on active nav item, with :after */ border: 10px solid transparent; border-bottom-color: #6c9956; content: ""; height: 0; left: calc(50% - 10px); position: absolute; top: 0.9em; width: 0; }

body.simple header nav li.simple::after { /* For use on active nav item, with :after */ border: 10px solid transparent; border-bottom-color: #f8eeda; content: ""; height: 0; left: calc(50% - 10px); position: absolute; top: 0.9em; width: 0; }

body.plantshare header nav li.plantshare::after { /* For use on active nav item, with :after */ border: 10px solid transparent; border-bottom-color: #f8eeda; content: ""; height: 0; left: calc(50% - 10px); position: absolute; top: 0.9em; width: 0; }

body.full header nav li.full::after { /* For use on active nav item, with :after */ border: 10px solid transparent; border-bottom-color: #f8eeda; content: ""; height: 0; left: calc(50% - 10px); position: absolute; top: 0.9em; width: 0; }

body.dkey header nav li.dkey::after { /* For use on active nav item, with :after */ border: 10px solid transparent; border-bottom-color: #f8eeda; content: ""; height: 0; left: calc(50% - 10px); position: absolute; top: 0.9em; width: 0; }

body.teaching header nav li.teaching::after { /* For use on active nav item, with :after */ border: 10px solid transparent; border-bottom-color: #f8eeda; content: ""; height: 0; left: calc(50% - 10px); position: absolute; top: 0.9em; width: 0; }

body.help header nav li.help::after { /* For use on active nav item, with :after */ border: 10px solid transparent; border-bottom-color: #f8eeda; content: ""; height: 0; left: calc(50% - 10px); position: absolute; top: 0.9em; width: 0; }

/* Section navigation (sidebar, only in some sections) */
body.help #sidebar nav, body.plantshare #sidebar nav { /* Place "you are here" marker next to a non-linked item. This is the top level of each sub-section. */ /* Show future nav. items that do not have a URL yet in gray. */ }
body.help #sidebar nav li a:not([href])::before, body.plantshare #sidebar nav li a:not([href])::before { color: #000; content: "\25b8"; margin-left: -14px; padding-bottom: 5px; padding-right: 5px; }
body.help #sidebar nav li > span, body.plantshare #sidebar nav li > span { color: #ccc; padding-left: 10px; }

/* Always place the "you are here" marker next to the pages in the Updates section, including on the Order by Family page. */
body.help.updates.family #sidebar nav li a[href='/updates/']::before { color: #000; content: "\25b8"; margin-left: -14px; padding-bottom: 5px; padding-right: 5px; }

/* Handle pages beneath subsections so they will have a "you are here" marker. Each of these must be set up individually where needed. */
body.help#glossary #sidebar .glossary a::before, body.help#fullkey-placeholder #sidebar .advanced-id-tools a::before, body.help#dkey-placeholder #sidebar .advanced-id-tools a::before { color: #000; content: "\25b8"; margin-left: -14px; padding-bottom: 5px; padding-right: 5px; }

body.plantshare#sightings #sidebar .sightings a::before, body.plantshare#sighting #sidebar .sightings a::before, body.plantshare#edit-sighting #sidebar .manage-sightings a::before, body.plantshare#questions #sidebar .ask a::before, body.plantshare#checklist #sidebar .checklists a::before, body.plantshare#new-checklist #sidebar .checklists a::before, body.plantshare#edit-checklist #sidebar .checklists a::before, body.plantshare#change-password #sidebar .profile a::before, body.plantshare#password-changed #sidebar .profile a::before, body.plantshare#change-email-address #sidebar .profile a::before, body.plantshare#change-email-sent-confirmation #sidebar .profile a::before, body.plantshare#confirm-email #sidebar .profile a::before { color: #000; content: "\25b8"; margin-left: -14px; padding-bottom: 5px; padding-right: 5px; }

/* Header */
header .container { margin: 0 auto; padding: 0 10px; width: 960px; }
header p { margin: 0; }

header .go-botany { align-items: baseline; display: flex; margin: 1.4em 0 0.7em; padding: 0; position: relative; z-index: 5; }
header .go-botany a { margin-right: 1.2em; width: 12.5em; }
header .go-botany img { width: 150px; }
header .go-botany .tagline { bottom: 0; color: #467321; font-family: Basetica, sans-serif; font-size: 1em; position: absolute; left: 12.8em; }

header nav { align-items: center; background-color: #17555b; border-radius: 2em; display: flex; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; justify-content: space-between; margin-bottom: 1em; padding-right: 0.3em; }
header nav a { color: #fff; display: inline-block; padding: 5px 8px; }
header nav a:visited, header nav a:not([href]) { color: #fff; }
header nav > a { display: none; /* Omit the 'sections' link by default */ }
header nav > ul { font-family: Basetica, sans-serif; list-style-type: none; padding-left: 1rem; }
header nav > ul li { display: block; float: left; font-size: 1.1em; line-height: 1.19em; margin: 0 0.9em 0 0; padding: 0.05em 0 0; position: relative; white-space: nowrap; }
header nav > ul li:last-child { margin-right: 0; }
header nav > ul li a:hover { text-decoration: none; }
header nav .suggester-menu { font-size: 1.1em; margin-top: 1.5em; margin-left: 0.3em; }
header nav .suggester-menu ul { margin-top: 0; }

header #search { margin: 0; padding: 0; }
header #search form { display: flex; margin: 0; padding: 0; }
header #search input { background: #fff; border: 0; border-radius: 1em; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 1.1em; height: 1.4em; margin: 0; padding: 0 0.5em; width: 247px; /* keep search from becoming too wide on zoom */ }
header #search button { background-color: #d2805f; border: 0; border-radius: 2em; margin: 0 0 0 -1.25em; padding: 0 0.75em; }
header #search button img { height: 1.4em; vertical-align: middle; }

/* Main content */
.content { padding: 0; }
.content .container { margin: 0 auto; padding: 0 10px; width: 960px; }

.content #main { background: url(/static/images/layout/sidebar-bg.png) repeat-y; float: right; min-height: 575px; padding-bottom: 24px; padding-left: 250px; width: 710px; }
.content #main .smallscreen-anchor-nav { display: none; }

.content .container.free-sidebar #main { background: none; }
.content .container.free-sidebar #sidebar { border-top: 0; height: auto; padding: 0; }
.content .container.no-sidebar #main { background: none; clear: both; float: none; min-height: 0; padding-left: 0; width: auto; }

/* Sidebar (usually in a #sidebar section, but sometimes not, being arranged by floating and positioning content) */
#sidebar { border-top: 1px solid #c3d941; float: left; height: 100%; margin-right: -230px; padding: 16px 0 0; width: 230px; }

#sidebar .section { padding: 0 17px 16px; }
#sidebar .section h3 { margin-top: 0.2em; }
#sidebar .section h4 { margin: 0 0 5px 0; }
#sidebar .section h4 + p { margin-top: 0; }
#sidebar .section.separate { border-top: 1px solid #e2dfcb; padding-top: 16px; }
#sidebar .section.plant-map { background: url(/static/images/layout/plant-map.png) 95% 1% no-repeat; padding: 0 25px 16px 16px; }
#sidebar .section .left { float: left; }
#sidebar .section p { margin: 0; }

#sidebar a:hover { text-decoration: none; }
#sidebar a.video { margin-left: 0; }
#sidebar a.view-map-btn { margin: 10px 0 20px; }

#sidebar nav a { display: inline-block; margin-left: 10px; }

#sidebar .box { background: #fff; border: 1px solid #c3d941; margin-bottom: 16px; padding: 16px 0 0; }

#sidebar nav { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 14px; }
#sidebar nav p { /*margin-bottom: 16px;*/ padding-left: 26px; }
#sidebar nav li { line-height: 150%; list-style-type: none; margin: 0 0 4px 0; padding: 0 15px 16px; }

a.get-help-btn { margin: 10px 0 20px; }

/* Footer */
.footer { background: #a7da7e; /* Make footer color continue to bottom on short pages. */ box-shadow: 0 50vh 0 50vh #a7da7e; clear: both; font-size: 10px; min-height: 140px; position: relative; width: 100%; }

.footer__container { margin: 0 auto; padding: 0 10px; width: 960px; display: flex; }

.footer__copyright, .footer__address, .footer__nsf-note { margin: 0 0 10px 0; }

.footer__address { font-style: normal; line-height: 160%; }

.footer__site-name { font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; font-size: 12px; margin: 0 0 0.5rem; }

.footer__publisher, .footer__navigation { margin: 0 20px 0 0; padding: 18px 0; }

.footer__navigation { padding-left: 10px; }

.footer__navigation-list { list-style-type: none; margin-bottom: 12px; }

.footer__navigation-list-item { display: inline; line-height: 14px; }

.footer__navigation-list-item::after { content: " \00b7 "; }

.footer__navigation-list-item:last-child::after { content: none; }

.footer__navigation-list--secondary .footer__navigation-list-item:last-of-type { margin-right: 0; }

.footer__support { margin-right: 0; padding: 18px 0; }

.footer__nsf-logo { float: left; margin: 0.3em 5% 0 0; width: 3em; }

/* Breadcrumb trails */
#breadcrumb { color: #000; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 0.9rem; margin: 1em 0; }

#breadcrumb ul { display: flex; flex-wrap: wrap; white-space: nowrap; }

#breadcrumb li { list-style-type: none; margin-bottom: 8px; margin-right: 4px; }
#breadcrumb li::after { color: #7a6f1f; content: ' >'; }
#breadcrumb li:first-of-type::after, #breadcrumb li:last-of-type::after { content: none; }

#breadcrumb .label { color: #7a6f1f; }

/* Wait spinners */
.wait-spinner { background: url(/static/images/icons/preloaders-dot-net-lg.gif) no-repeat scroll center center transparent; height: 350px; margin: auto; /* Wait spinner's children are hidden until the parent is unspinnered. */ }
.wait-spinner * { display: none; }

/* Images (gallery with previous/next buttons, or single) */
.img-gallery { float: left; margin: 4px 14px 0 0; position: relative; width: 244px; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }

.img-gallery .img-container { height: 239px; overflow: hidden; position: relative; width: 239px; }

.img-gallery .frame { border: 5px solid rgba(255, 255, 255, 0.8); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); height: 229px; position: absolute; top: 0; width: 229px; z-index: 100; }

.img-gallery .images { clear: both; margin: 0; padding: 0; position: absolute; width: 12000px; }
.img-gallery .images > * { display: block; /* For example, might be <a> instead of <img>. */ float: left; /* This is what makes scrolling actually work. */ }

.img-gallery .controls { margin: 8px 0 12px 0; text-align: center; }
.img-gallery .controls button { border: 0; cursor: default; display: inline-block; height: 32px; text-indent: -9000px; /* text is visually hidden */ width: 32px; }
.img-gallery .controls button.next { background: url(/static/images/icons/next-larger.png) 0 0 no-repeat transparent; }
.img-gallery .controls button.prev { background: url(/static/images/icons/prev-larger.png) 0 0 no-repeat transparent; }
.img-gallery .controls button.disabled { cursor: default; opacity: 0.4; }

/* Plant image grids. Currently used on the dkey. May someday be used on the Level 3 page if it is moved over to site.scss too. Copied from the relevant part of styles.scss and included here, instead of in the _dkey.scss file, because image grids are a site-wide pattern. */
.plant-grid .plant { display: inline-block; vertical-align: top; position: relative; border: 1px solid #c3d941; width: 160px; /* prevent long names from ruining layout */ height: 210px; background: #fff; padding: 8px 6px; text-align: center; }
.plant-grid .plant.omit { display: none; }

.plant-grid a { display: block; color: #1a2e11; }
.plant-grid a:hover { color: #508e31; }

.plant-grid .plant:before { position: absolute; top: 8px; left: 6px; z-index: 100; width: 150px; height: 139px; top: 8px; border: 5px solid rgba(255, 255, 255, 0.8); content: ' '; }

.plant-grid .plant-img-container { box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.6); height: 149px; overflow: hidden; width: 160px; }
.plant-grid .plant-img-container img { height: 149px; /* so lazy_images knows when <img> is on screen */ }

.plant-grid p { margin: 7px 0 0 0; font-family: Tahoma, "Trebuchet MS", "Lucida Sans Unicode", sans-serif; /* Tahoma or Trebuchet because it's narrower than Verdana: less wrapping and fewer names on 4 lines */ line-height: 14px; }

.plant-grid i { display: block; padding-bottom: 4px; font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; /* Verdana, wider than Trebuchet: easier to read in italics */ font-style: italic; }

.plant-grid .missing-image { position: relative; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZjJlMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2ZTZjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #eaf2e2), color-stop(100%, #d6e6c5)); background: -moz-linear-gradient(left top, #eaf2e2, #d6e6c5); background: -webkit-linear-gradient(left top, #eaf2e2, #d6e6c5); background: linear-gradient(to right bottom, #eaf2e2, #d6e6c5); width: 160px; height: 149px; color: #354d1e; }
.plant-grid .missing-image:after { display: block; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -50px; width: 100px; height: 40px; font-size: 12px; line-height: 130%; text-align: center; content: 'Image not available yet'; }

/* Glossary-term links */
.gloss { background-color: inherit; border-bottom: 1px dashed #27610a; border-left: 0; border-right: 0; border-top: 0; color: #27610a; cursor: pointer; margin: 0; padding: 0; }

/* Tooltips for working area images and highlighted glossary terms */
.gb-tooltip { border: 1px solid #c3d941; border-radius: 2px; box-shadow: 0px 1px 4px 0 #333333; display: none; /* initially invisible, fades in */ padding: 8px; position: absolute; width: 300px; z-index: 1000; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZjJlMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2ZTZjNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eaf2e2), color-stop(100%, #d6e6c5)); background: -moz-linear-gradient(top center, #eaf2e2, #d6e6c5); background: -webkit-linear-gradient(top center, #eaf2e2, #d6e6c5); background: linear-gradient(to bottom center, #eaf2e2, #d6e6c5); }

.gb-tooltip .arrow { background: #d6e6c5; border: 1px solid #c3d941; box-shadow: -1px -1px 1px 0 #333333; /* rotated borders, same color as bottom of tooltip */ border-bottom-color: #d6e6c5; border-right-color: #d6e6c5; bottom: -7px; height: 11px; left: 10px; position: absolute; width: 11px; -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); }

.gb-tooltip.dark { border-color: black; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUxNzAzMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkNTUyNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #517032), color-stop(100%, #3d5524)); background: -moz-linear-gradient(top center, #517032, #3d5524); background: -webkit-linear-gradient(top center, #517032, #3d5524); background: linear-gradient(to bottom center, #517032, #3d5524); color: #fff; }
.gb-tooltip.dark .arrow { background: #3d5524; border-color: black; border-bottom-color: #3d5524; border-right-color: #3d5524; }

.gb-tooltip.dark.photo { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 11px; position: fixed; /* with lightbox, so prevent scrolling away */ }
.gb-tooltip.dark.photo p { line-height: 120%; margin: 6px 0; }
.gb-tooltip.dark.photo p:first-of-type { margin-top: 0; }
.gb-tooltip.dark.photo p:last-of-type { margin-bottom: 0; }
.gb-tooltip.dark.photo a { color: white; text-decoration: underline; }

/* Glossary tooltip */
.glosstip { line-height: 16px; margin: 0; padding: 0; position: relative; max-width: 30em; }
.glosstip img { background: #eaf2e2; border: 1px solid #c3d941; border-radius: 2px; bottom: 110%; box-shadow: 1px 1px 2px 0 #333333; padding: 4px; position: absolute; }

/* Shadowbox overrides */
#sb-counter { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; }

#sb-nav-close { background-position: center; background-repeat: no-repeat; padding: 4px; /* Increase activation area a bit */ right: -28px !important; /* Place at top right, but not exactly at the corner so as to avoid Flash video z-index problem */ top: 6px !important; }

/* Character/value styles for plant preview popups, species pages, etc. */
.characteristics dl { display: flex; margin: 10px 0 0; padding: 0; }

.characteristics dt { color: #554e16; font-weight: bold; line-height: 18px; max-width: 200px; min-width: 200px; text-align: left; }
.characteristics dt button { font-weight: bold; }

.characteristics dd { line-height: 18px; max-width: 60%; }

.characteristics dd ul { list-style-type: disc; margin: 0; padding: 0 0 0 1.3em; text-indent: -0.2em; }
.characteristics dd ul.compact { margin: 0; padding: 0; text-indent: 0; }
.characteristics dd ul.compact li { display: inline; }
.characteristics dd ul.compact li:after { content: ', '; }
.characteristics dd ul.compact li:last-child:after { content: none; }

.characteristics dd li { margin: 0; padding: 0 0 0.1em; }

/* Form error messages */
.errorlist { color: #f00; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 14px; line-height: 14px; list-style-type: none; }

.errorlist li:before { content: "× "; font-size: 22px; font-weight: bold; margin: 0 0 20px; padding: 0; vertical-align: text-top; }

/* Text input with suggestions */
input.suggest + div { background: #fff; border: 1px solid #999; box-shadow: 0px 1px 2px 0 #a2a64d; position: absolute; z-index: 150; }

input.suggest + div li { clear: both; font-weight: bold; list-style-type: none; margin: 0; padding: 3px; }
input.suggest + div li.selected { background-color: #defcb3; cursor: default; }
input.suggest + div li span { font-weight: normal; }

/* Teaching page */
body.teaching h3 { margin-bottom: 0.5rem; }
body.teaching #main li { list-style-type: none; }

/* List-style tables (Species List page, Manage Your Sightings page, etc.) */
table.list { background: #f1fcde; border-collapse: collapse; color: #000; font-size: 12px; margin: 18px 0; }

table.list tbody tr:hover { background: #e3fabe; }

table.list th, table.list td { padding: 4px; }

table.list th, table.list tr.filters { background: #b4d57f; font-weight: normal; }

table.list th td:first-child { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 13px; }

/* Imports for various pages, sections, features, etc. Each of these can contain their own media queries. */
/* Home */
#home { background-color: #f8eeda; background-image: url(/static/images/layout/body-home.png); background-position: left 0px top; background-repeat: repeat-x; }

#home .id { display: flex; padding: 1.4em 0 0.3em; position: relative; }

#home h1 { font-weight: unset; margin: 0; }
#home h1 img { width: 9em; }

#home .tagline { bottom: 0.6em; color: #fff; font-family: Basetica, sans-serif; font-size: 1.05em; left: 17.4em; line-height: 120%; margin: 0; position: absolute; }

#home .newfs { padding-top: 13px; }

#home .newfs a { background: url(/static/images/layout/npt-logo-stacked.svg) no-repeat transparent; background-size: 160px 88px; filter: brightness(0.9); /* make the contrast meet WCAG AA large text/graphics */ height: 88px; width: 160px; }

#search-suggest .menu { top: 133px; }

#home .content { clear: left; }

#home #banner { margin: 10px 0 0; position: absolute; }
#home #banner > img { box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.6); display: none; height: 345px; left: 0; position: absolute; top: 0; width: 960px; }
#home #banner img:first-child { display: block; }
#home #banner h2 { color: #437829; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 2.1rem; font-weight: bold; line-height: normal; margin: 1.2rem 0; }
#home #banner p { margin: 0.5em 0; text-align: left; }

#home #update p { line-height: 150%; margin-bottom: 7px; margin-top: 0; text-align: center; }

#home #update a { color: #122113; /* very dark green */ text-decoration: underline; }
#home #update a:visited { color: #400c3f; /* very dark purple */ }

#home #update a.updates { margin-left: 0.3rem; }
#home #update a.updates::after { content: " ➔"; }

#home #update .badge { background-color: rgba(236, 243, 151, 0.9); letter-spacing: 0.05rem; margin-right: 0.3rem; padding: 0.1rem 0.3rem; text-transform: uppercase; }

#home #cta { margin: 1em 2px 0; width: 174px; }

#home #overlay { background: rgba(255, 255, 255, 0.85); height: 323px; padding: 10px 30px 0; position: absolute; left: 676px; top: 6px; width: 218px; z-index: 50; }

#home .three-col { float: left; margin: 354px 23px 5px 0; padding: 8px 23px 1.2em 0; width: 289px; }
#home .three-col.last { background: 0; margin-right: 0; padding: 8px 0 0 0; }
#home .three-col h2 { margin: 0.6rem 0 0.4rem; }
#home .three-col p { margin: 0; }
#home .three-col a { margin: 13px 0 0 0; }

a.subscribe { background: url(/static/images/layout/subscribe.png) 0 0 no-repeat; cursor: pointer; height: 16px; width: 87px; display: block; text-indent: -9000px; }
a.subscribe:hover { background-position: 0 -16px; }
a.subscribe:active { background-position: 0 -32px; }

#home #potd { /* Plant of the Day */ background: #bde29c; border: 3px solid #fff; box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.3); clear: left; height: 169px; margin: 15px 0; padding: 10px; }
#home #potd > a { display: block; float: left; height: 160px; margin: 5px 5px; overflow: hidden; width: 270px; }
#home #potd > a img { position: relative; top: -60px; width: 270px; }
#home #potd .details { margin: 0 0 0 290px; position: absolute; width: 630px; }
#home #potd .details h2 { margin: 0.2rem 0; }
#home #potd .details h2 span.latin { font-style: italic; }
#home #potd .details p { margin: 0 0 1em; overflow: hidden; }

#home .donate, #home .intro { background: #f3dcaa; /* lightened version of #e7b952 orange from NPT palette */ border: 3px solid #fff; box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.3); clear: left; margin: 0 0 15px 0; padding: 0; }
#home .donate p, #home .intro p { margin: 14px; position: relative; }

#home .donate a { cursor: default; float: right; position: absolute; right: 0; top: -4px; }

#home footer { background: none; }
#home footer > img { display: none; }

/* Begin media queries styles for Home page */
/* Portrait-orientation styles */
@media only screen and (max-width: 400px) { #home .content .container { width: 320px; }
  #home #banner #overlay { top: 117px; width: 320px; }
  #home #banner > img { height: 115px; width: 320px; }
  #home #banner + .three-col { padding-top: 355px; } }
/* Landscape-orientation styles */
@media only screen and (min-width: 401px) and (max-width: 600px) { #home #banner #overlay { top: 160px; width: 480px; }
  #home #banner > img { height: 172px; width: 480px; }
  #home #banner + .three-col { padding-top: 360px; } }
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { #home .content { margin-top: 0; padding-top: 0; }
  #home .content .container { padding: 0; }
  #home header { height: 106px; }
  #home header h1 { height: 40px; margin-left: 0; width: 120px; }
  #home header .id { padding: 0.7em 0 0.7em 10px; width: auto; }
  #home header .tagline { bottom: 0.8em; font-size: 0.9em; left: 13em; margin: 0; }
  #home header nav { background: #21555c; height: 32px; padding-left: 0; }
  #home header nav > a:hover { text-decoration: none; }
  #home #update p { margin-bottom: 16px; }
  #home #banner { margin: 0; position: relative; }
  #home #banner #overlay { background: #f7fbe9; height: auto; left: 0; padding: 0; text-align: center; }
  #home #banner #overlay h2 { font-size: 28px; margin: 6px 0 0; }
  #home #banner #overlay p { padding: 0 8px; }
  #home #banner #overlay img { width: 53%; }
  #home #banner #cta { margin: 6px; }
  #home .three-col { background: none; float: none; height: inherit; margin: 0 0 14px; padding: 0; width: auto; }
  #home .three-col h3, #home .three-col p { margin-left: 8px; margin-right: 8px; }
  #home .three-col h3 { font-size: 18px; }
  #home .three-col p { margin-top: 0; }
  #home .three-col a.orange-button, #home .three-col body.plantshare .image-modal a.button, body.plantshare .image-modal #home .three-col a.button, #home .three-col body.plantshare#ask #main a.submit, body.plantshare#ask #main #home .three-col a.submit, #home .three-col body.plantshare#plantshare #ask a.submit, body.plantshare#plantshare #ask #home .three-col a.submit, #home .three-col.last a.orange-button, #home .three-col.last body.plantshare .image-modal a.button, body.plantshare .image-modal #home .three-col.last a.button, #home .three-col.last body.plantshare#ask #main a.submit, body.plantshare#ask #main #home .three-col.last a.submit, #home .three-col.last body.plantshare#plantshare #ask a.submit, body.plantshare#plantshare #ask #home .three-col.last a.submit { margin-top: 6px; margin-left: 8px; margin-right: 8px; }
  #home #breadcrumb p { line-height: 160%; }
  #home #potd { height: auto; padding: 8px; }
  #home #potd > a { margin: 0; margin-bottom: 4px; margin-right: 8px; }
  #home #potd > a, #home #potd > a img { width: 297px; }
  #home #potd .details { margin: 0; position: inherit; width: inherit; }
  #home #potd .details h3 { line-height: 120%; }
  #home #potd .details p { height: inherit; overflow: inherit; }
  #home #potd .details a { margin-top: 6px; position: inherit; top: 0; }
  #home .donate, #home .intro { margin: 0; }
  #home .donate p, #home .intro p { margin: 8px; padding: 0; }
  #home .donate a { display: block; float: none; margin: 6px 20px 0 0; position: static; width: 80px; } }
/* End media queries styles for the Home page */
/* Styles for maps */
/* Location and sightings maps */
.map { border: 1px solid #c3d941; }

.info-window h5 { font-size: 14px; }
.info-window p { margin-top: 0; }
.info-window img { float: left; margin-right: 10px; }

#sightings-locator .info-window img { max-width: 80px; }

/* Plant distribution maps */
.section.map { border: none; }
.section.map p { font-size: 9px; margin-bottom: 6px; }

.section.namap { position: relative; }
.section.namap div.trans { /* Transparent div to make North America map clickable */ cursor: pointer; background: transparent; height: 133px; /* Cover the map plus the link below it */ margin-bottom: 0; padding: 0; position: absolute; top: 45px; width: 196px; }

#ne-dist-county-map { /* SVG map: WebKit needs height and width set */ height: 293px; width: 187px; }

#na-dist-county-map { /* SVG map: WebKit needs height and width set */ height: 109px; width: 187px; }

/* Styles for taxa (family, genus, species) pages */
.text-dialog-content p { font-size: 11px !important; }

body.taxa { /* Override Shadowbox styles to allow multiple title lines for showing a photo title, photographer credit, and copyright. */ }
body.taxa #sb-title, body.taxa #sb-title-inner { height: 76px; line-height: 70%; position: relative; }
body.taxa #sb-title-inner div { bottom: 6px; position: absolute; }
body.taxa #sb-title-inner .title { color: #fff; font-size: 16px; font-style: normal; line-height: 110%; margin: 0 0 2px; padding: 0; }
body.taxa #sb-title-inner span { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 10px; }
body.taxa #sb-title-inner a { border-bottom: 1px solid #ccc; color: #fff; }
body.taxa #sb-title-inner a:hover { text-decoration: none; }
body.taxa #sb-title-inner .contact { background-color: inherit; border: 0; color: #fff; cursor: pointer; display: inline-block; /* prevent text from wrapping, which makes tooltip position incorrect */ margin: 0; padding: 0; text-decoration: underline; }
body.taxa #sb-nav-close { top: 56px !important; }

body.taxa #main ol, body.taxa #main ul { line-height: inherit; }

#body.taxa .frame { cursor: default; }

body.taxa .visit-dkey { margin-top: 36px; }
body.taxa .visit-dkey a { margin-left: 4px; }

/* For family and genus pages */
body.taxa .pics { margin-top: 20px; }
body.taxa .pics div { float: left; margin-right: 20px; }
body.taxa .pics p { display: inline-block; float: left; font-size: 14px; }

body.taxa img.zoom { display: inline-block; float: right; }

body#family h2 { clear: left; }
body#family .pics + h2 { padding-top: 30px; }
body#family ul.genera { font-size: 14px; list-style: none; }
body#family ul.genera li { margin: 0 0 5px 0; }

body#genus h2 { clear: left; }
body#genus .pics + h2 { padding-top: 30px; }
body#genus ul.species { font-size: 14px; list-style: none; }
body#genus ul.species li { margin: 0 0 5px 0; }
body#genus p.family { font-size: 14px; margin: 0; }

body#species #main { background: url(/static/images/layout/sidebar-bg.png) repeat-y; }

body#species #main { /* layout: right-side content sections */ }
body#species #main #breadcrumb, body#species #main #name, body#species #main .img-gallery, body#species #main #images-note, body#species #main #partner, body#species #main #facts, body#species #main #habitat, body#species #main #chars, body#species #main #wetland, body#species #main #status, body#species #main #info-dkey { clear: left; margin-left: 250px; }

/* left-side content sections */
body#species .section { padding: 16px 16px 0; width: 197px; }
body#species .section h4 { font-size: 14px; margin: 0; padding: 0; }
body#species .section p { margin-bottom: 0; }

body#species #maps, body#species #side { position: absolute; }
body#species #maps h2, body#species #side h2 { font-size: 1.2em; margin: 0.2em 0 0.8em; }

body#species #maps { background-color: #fff; border-left: 1px solid #c3d941; border-right: 1px solid #c3d941; border-top: 1px solid #c3d941; top: 128px; }

body#species .definitions-link { background-image: url(/static/images/icons/icon-info.png); background-position: 0px 1px; background-repeat: no-repeat; background-size: auto 12px; clear: left; display: inline-block; font-size: 12px; margin: 4px 0 8px; padding: 0 0 0 15px; }

body#species .found-plant { background-color: #f8eeda; font-size: 12px; line-height: 16px; padding: 4px 12px; }

/* space maps enough away from text atop them */
body#species #main .nemap h2 + p, body#species #main .namap h2 + p { margin: 0; padding-bottom: 8px; }

body#species #side { top: 800px; /* remaining side content is positioned further down to leave room for maps in full-width layout */ }

body#species #side dt, body#species #side dd { display: inline-block; }

body#species #side .lookalikes dl { line-height: 20px; margin: 0; }
body#species #side .lookalikes dt { font-weight: bold; margin: 2px 0; display: block; }
body#species #side .lookalikes dd { margin: 0 0 6px 0; }

body#species #side .help { float: left; line-height: 28px; margin-right: 12px; }

body#species #side .get-help-btn { margin: 0 0 0 90px; }

body#species #side li { line-height: 16px; list-style-type: none; }

body#species #side a { margin-left: 0; }

body#species #main h1 span.origin { font-size: 14px; line-height: 100%; }
body#species #main h3 + p { margin-top: 10px; }
body#species #main h5 { font-size: 16px; padding-top: 3px; }
body#species #main p { margin: 0 0 15px; }

body#species #sb-player.html { background: #fff; overflow: hidden; /* Get rid of vertical scrollbar in WebKit on enlarged N. America dist. map. */ padding: 0 5px 5px; }
body#species #sb-player #na-dist-county-map { background: #fff; height: 100%; width: 100%; }

body#species a.description-control { background: url(/static/images/icons/plus.png) left 50% no-repeat; display: block; margin: 28px 0 12px 0; padding: 3px 0 3px 25px; }
body#species a.description-control.expanded { background: url(/static/images/icons/minus.png) left 50% no-repeat; }

body#species ul.full-description { background: #fbfbf8; border: 1px solid #e1e1dc; display: none; margin: 0 0 15px 0; }

body#species ul.full-description > li { border-bottom: 1px solid #e1e1dc; clear: left; display: block; padding: 18px; margin: 0 0 0 0; }
body#species ul.full-description > li:last-child { border-bottom: none; }
body#species ul.full-description > li:hover { background-color: #fff; }
body#species ul.full-description > li h3 { background: url(/static/images/icons/plus.png) left 50% no-repeat; cursor: default; margin: 0; padding-left: 1.6em; }
body#species ul.full-description > li h3.expanded { background: url(/static/images/icons/minus.png) left 50% no-repeat; }
body#species ul.full-description > li div { display: none; padding-left: 28px; }

body#species a.enlarge { display: block; margin: 0 0 8px 0; }
body#species a.enlarge:hover { text-decoration: none; }
body#species a.enlarge img { vertical-align: middle; }
body#species a.more { cursor: pointer; }

/* Larger gallery styles */
body#species .img-gallery { float: none; margin: 0 0 0 0; width: 710px; }
body#species .img-gallery .img-container { height: 257px; margin: 2em 0 0; width: 710px; }
body#species .img-gallery .frame { height: 239px; width: 700px; }
body#species .img-gallery .images .single-img { float: left; position: relative; }
body#species .img-gallery .images img { float: none; }
body#species .img-gallery p.caption { bottom: -22px; margin: 0 0 0 0; position: absolute; right: 0; }

body#species .controls { position: relative; }
body#species .controls span { position: relative; top: -22px; }

/* Smooth Div Scroll image area */
body#species #species-images { border: 5px solid rgba(255, 255, 255, 0.8); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); height: 239px; margin: 0 0 8px; overflow: hidden; position: relative; top: 0; width: 700px; z-index: 100; }
body#species #species-images .scrollableArea a { border-right: 5px solid #fff; float: left; margin: 0; padding: 0; }

body#species #images-note { font-size: 11px; font-style: italic; margin-bottom: 20px; margin-left: 250px; margin-right: 0; margin-top: 0; }

body#species #info-dkey b { color: #554e16; }

/* Begin media queries styles for taxa pages. */
/* Portrait-orientation styles */
@media only screen and (max-width: 400px) { body#species .img-gallery, body#species .img-gallery .frame, body#species .img-gallery .img-container, body#species #species-images { width: 304px; }
  body#species #sidebar { padding-bottom: 30px; }
  body#species #maps { margin-left: 36px; width: 200px; } }
/* Landscape-orientation styles */
@media only screen and (min-width: 401px) and (max-width: 600px) { body#species #main .img-gallery, body#species #main .img-gallery .frame, body#species #main .img-gallery .img-container, body#species #main #species-images { width: 462px; }
  body#species #main #sidebar { margin-bottom: 14px; padding-bottom: 14px; }
  body#species #main #maps { height: 435px; width: 428px; }
  body#species #main #maps .nemap { float: left; }
  body#species #main #maps .nemap > p { width: 200px; }
  body#species #main #maps .namap { float: right; } }
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { body.taxa #main { padding-bottom: 8px; }
  body.taxa #main h1 { margin-bottom: 0; }
  body#family #main p.description, body#genus #main p.description { margin: 4px 0; }
  body#family #main h2, body#genus #main h2 { font-size: 15px; padding-top: 12px; }
  body#family ul.genera, body#genus ul.species { line-height: 24px; margin-bottom: 18px; }
  .visit-dkey { font-size: 81.25%; }
  body#species #main { background: none; /* layout for smartphones: sections in document sequence */ }
  body#species #main #breadcrumb, body#species #main #name, body#species #main .img-gallery, body#species #main #partner, body#species #main #facts, body#species #main #habitat, body#species #main #chars, body#species #main #wetland, body#species #main #status, body#species #main #info-dkey { margin-left: 0; }
  body#species #main .img-gallery { margin-bottom: 20px; }
  body#species #main { /* omit images notice on smartphones, as it takes up two lines there of an already small space */ }
  body#species #main #images-note { display: none; }
  body#species #main h2 { margin-top: 14px; line-height: 18px; }
  body#species #main .section { padding: 0; width: auto; }
  body#species #main .section.help { display: none; }
  body#species #main #maps, body#species #main #side { position: static; }
  body#species #main #maps h2, body#species #main #side h2 { margin: 8px 0; }
  body#species #main #maps { background: #fff; border: 1px solid #c3d941; padding-left: 16px; padding-right: 16px; z-index: 10; }
  body#species #main .definitions-link, body#species #main .found-plant { font-size: 10px; line-height: 14px; }
  body#species #main #side h2 { font-size: 16px; margin-top: 14px; }
  body#species #main #species-images .scrollableArea a { border-right: 20px solid #f8eeda; }
  body#species #main #species-images .scrollableArea a img { height: 120px; width: 120px; }
  body#species #main #species-images, body#species #main .img-gallery .frame { border: 0; box-shadow: none; }
  body#species #main #species-images, body#species #main .img-gallery .frame, body#species #main .img-gallery .img-container { height: 120px; }
  body#species #main p { margin-bottom: 10px; }
  body#species #main ul.full-description > li div { padding-left: 0; }
  body#species #main .characteristics.full { margin-bottom: 0; }
  body#species #main .characteristics dl { flex-direction: column; }
  body#species #main .characteristics dl dt { max-width: none; min-width: 0; text-align: left; width: auto; }
  body#species #main .characteristics dl dd { max-width: none; }
  body#species #main .visit-dkey { margin: 14px 0; }
  body#species #main .visit-dkey a { clear: left; display: inline-block; } }
/* These styles apply to smartphones and tablets */
/* End media queries styles for taxa pages */
/* Simple and Full Keys (simplekey Django app) */
body.skey.groups-subgroups { /* Styles for groups and subgroups (Levels 1 and 2) pages */ /* Override Shadowbox styles to allow multiple title lines for showing a photo title, photographer credit, and copyright. */ }
body.skey.groups-subgroups .img-gallery .frame { cursor: default; }
body.skey.groups-subgroups #sb-title, body.skey.groups-subgroups #sb-title-inner { height: 76px; line-height: 70%; position: relative; }
body.skey.groups-subgroups #sb-title-inner div { bottom: 6px; position: absolute; }
body.skey.groups-subgroups #sb-title-inner .title { color: #fff; font-size: 16px; font-style: normal; line-height: 110%; margin: 0 0 2px; padding: 0; }
body.skey.groups-subgroups #sb-title-inner span { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 10px; }
body.skey.groups-subgroups #sb-title-inner a { border-bottom: 1px solid #ccc; color: #fff; }
body.skey.groups-subgroups #sb-title-inner a:hover { text-decoration: none; }
body.skey.groups-subgroups #sb-title-inner .contact { background-color: inherit; border: 0; color: #fff; cursor: pointer; display: inline-block; /* prevent text from wrapping, which makes tooltip position incorrect */ margin: 0; padding: 0; text-decoration: underline; }
body.skey.groups-subgroups #sb-nav-close { top: 56px !important; }
body.skey.groups-subgroups p.question, body.skey.groups-subgroups p.tip { color: #766b1e; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 1.6rem; margin: 0.5rem 0; padding: 0; }
body.skey.groups-subgroups p.tip { font-size: 1.1rem; }
body.skey.groups-subgroups .list-item { clear: left; margin: 0; padding: 20px 0 0 0; }
body.skey.groups-subgroups .list-item .details { float: left; width: 425px; }
body.skey.groups-subgroups .list-item h2 { line-height: 110%; margin: 0 0 5px 0; }
body.skey.groups-subgroups .list-item h2 + p { padding-left: 0; }
body.skey.groups-subgroups .list-item h3 { padding-left: 1.7em; }
body.skey.groups-subgroups .list-item h3.key-char { background: url(/static/images/icons/icon1.png) 0 2px no-repeat; }
body.skey.groups-subgroups .list-item h3.exceptions { background: url(/static/images/icons/icon2.png) 0 2px no-repeat; }
body.skey.groups-subgroups .list-item h3.vid { background: url(/static/images/icons/icon3.png) 0 2px no-repeat; }
body.skey.groups-subgroups .list-item p { margin: 0; }
body.skey.groups-subgroups .list-item .section-title { display: block; }
body.skey.groups-subgroups .list-item .details a { margin: 1.6em 0; }
body.skey.groups-subgroups .not-my-plant { clear: left; float: right; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; padding: 20px 0 0; text-align: center; }
body.skey.groups-subgroups .not-my-plant p { margin: 0; padding: 0; }
body.skey.groups-subgroups .not-my-plant p + p { font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; }

/* end &.groups-subgroups */
body.skey { /* Styles for results (Level 3) page */ /* end &.results */ }
body.skey.results { /* end .already-know */ /* end .plant-list */ /* end #question-nav */ /* end #intro-overlay */ /* end .view-tabs */ /* Ordinarily this message will have its centering done by JavaScript. See gobotany.sk.results.notify() */ /* Working Area styles */ /* end .working-area */ }
body.skey.results #main { background-image: none; padding-left: 0; width: auto; }
body.skey.results #page-head { margin-left: 250px; }
body.skey.results .already-know { float: left; margin: 0 0 40px 0; }
body.skey.results .already-know h6 { color: #7a6f1f; font-weight: bold; margin: 0 0 5px 0; }
body.skey.results .already-know label { color: #7a6f1f; display: block; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 12px; font-weight: normal; margin: 5px 0 3px; vertical-align: middle; }
body.skey.results .already-know select { font-size: 13px; height: 21px; width: 140px; background: #ebf6df; border: 1px solid #9cc86b; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; padding: 0; -webkit-appearance: menulist; }
body.skey.results .already-know button { background: #ebf6df; border: 1px solid #9cc86b; font: -webkit-control; padding: 2px 6px; -webkit-appearance: button; }
body.skey.results .show-me { float: right; margin: 0 0 15px 0; }
body.skey.results #results-display { margin: 8px 0; }
body.skey.results #results-display label { color: #000; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 15px; font-weight: normal; }
body.skey.results #results-display select { font-size: 15px; background: #ebf6df; border: 1px solid #9cc86b; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; padding: 0; -webkit-appearance: menulist; }
body.skey.results #results-display img.icon { margin: 0 3px 0 0; vertical-align: -1px; }
body.skey.results #modal { display: none; }
body.skey.results .plant-list { position: relative; width: 99%; /* end .plant */ /* List view styles */ }
body.skey.results .plant-list .plant { background: #fff; border: 1px solid #c3d941; display: none; height: 210px; left: 0px; padding: 8px 6px; position: absolute; text-align: center; top: 0px; width: 160px; /* prevent long names from blowing out layout; allow wrap */ }
body.skey.results .plant-list .plant.in-results { display: block; }
body.skey.results .plant-list .plant.genus_join_left { border-left: none; }
body.skey.results .plant-list .plant.genus_join_right { border-right: none; padding-right: 12px; }
body.skey.results .plant-list .plant a { color: #1a2e11; display: block; }
body.skey.results .plant-list .plant a:hover { color: #508e31; text-decoration: none; }
body.skey.results .plant-list .plant a:hover p.plant-name { text-decoration: underline; }
body.skey.results .plant-list .plant .frame { border: 5px solid rgba(255, 255, 255, 0.8); height: 139px; position: absolute; top: 8px; width: 150px; z-index: 100; }
body.skey.results .plant-list .plant p.plant-name { font-family: Tahoma, "Trebuchet MS", "Lucida Sans Unicode", sans-serif; /* Tahoma or Trebuchet because it's narrower than Verdana: less wrapping and fewer names on 4 lines */ line-height: 14px; margin: 7px 0 0 0; }
body.skey.results .plant-list .plant p.plant-name span.latin { display: block; font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; /* Verdana because it's wider than Trebuchet: easier to read in italics */ font-style: italic; padding-bottom: 4px; }
body.skey.results .plant-list .plant-img-container { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); height: 149px; overflow: hidden; width: 160px; }
body.skey.results .plant-list .plant-img-container img { height: 149px; /* so lazy_images knows when <img> is on screen */ }
body.skey.results .plant-list .wait { background: url(/static/images/icons/preloaders-dot-net-lg.gif) no-repeat scroll center center transparent; height: 350px; margin: auto; }
body.skey.results .plant-list table { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; width: 100%; }
body.skey.results .plant-list table tr { height: 20px; }
body.skey.results .plant-list table tr.first-visible td { border-top: 0; }
body.skey.results .plant-list table td { border-top: 1px solid #e1e1dc; padding: 10px 0; vertical-align: middle; }
body.skey.results .plant-list table .genus { color: #1a2e11; font-size: 18px; font-style: italic; font-weight: normal; line-height: 200%; padding: 3px 0 0 0; vertical-align: top; }
body.skey.results .plant-list table .scientific-name { font-size: 15px; font-style: italic; font-weight: normal; line-height: 155%; padding: 10px 0 8px 0; }
body.skey.results .plant-list table .scientific-name img { margin: 0 8px 0 0; padding-bottom: 2px; vertical-align: middle; }
body.skey.results .missing-image { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaf2e2), color-stop(100%, #d6e6c5)); background: -moz-linear-gradient(center top, #eaf2e2, #d6e6c5) repeat scroll 0 0 transparent; color: #354d1e; height: 149px; position: relative; width: 160px; }
body.skey.results .missing-image p { font-size: 12px; height: 40px; left: 50%; line-height: 130%; margin: -20px 0 0 -50px; position: absolute; text-align: center; top: 50%; width: 100px; }
body.skey.results #question-nav { background-color: #fcfdf5; border: 1px solid #c3d941; float: left; margin-top: -90px; padding: 0 0 16px 0; width: 230px; /* end .option-list */ }
body.skey.results #question-nav.tinted { background: #fcfdf5; }
body.skey.results #question-nav .scroll { background: #fff; border-bottom: 1px solid #9cc86b; border-left: 1px solid #519136; border-top: 1px solid #519136; display: block; height: 335px; margin: 0 0 10px 0; overflow: auto; width: 229px; }
body.skey.results #question-nav .scroll::-webkit-scrollbar { width: 14px; }
body.skey.results #question-nav .scroll::-webkit-scrollbar-button { background-color: #9cc86b; border-top: 1px solid #fff; }
body.skey.results #question-nav .scroll::-webkit-scrollbar-button:vertical:decrement { background: url(/static/images/icons/arrow-up.jpg) no-repeat 0 0; }
body.skey.results #question-nav .scroll::-webkit-scrollbar-button:vertical:increment { background: url(/static/images/icons/arrow-down.jpg) no-repeat 0 0; }
body.skey.results #question-nav .scroll::-webkit-scrollbar-track { background-color: #fff; border-left: 1px solid #c3d941; }
body.skey.results #question-nav .scroll::-webkit-scrollbar-thumb:vertical { background-color: #fff; border-left: 1px solid #c3d941; background-image: url(/static/images/layout/scroll-thumb-top.png), url(/static/images/layout/scroll-thumb-bottom.png), url(/static/images/layout/scroll-thumb.png); background-position: center top, center bottom, center; background-repeat: no-repeat, no-repeat, repeat-y; }
body.skey.results #question-nav .section { padding: 0 17px 16px; }
body.skey.results #question-nav .section.instructions { background: #9cc86b; color: #fff; padding: 16px; }
body.skey.results #question-nav .section.instructions h2 { color: #413b11; font-size: 16px; line-height: 120%; margin: 0; }
body.skey.results #question-nav .section .left { float: left; }
body.skey.results #question-nav .section p.get-more { position: relative; font-size: 11px; line-height: 16px; margin: 0 0 20px; text-align: center; }
body.skey.results #question-nav .section p.get-more a { color: #fff; cursor: default; display: block; margin: 18px auto 10px; width: 170px; }
body.skey.results #question-nav .section p.get-more a.get-questions { margin: 0 auto 4px; }
body.skey.results #question-nav .section a.clear-all-btn { color: #fff; margin: 0 10px 0 0; min-width: 60px; }
body.skey.results #question-nav .section a.get-help-btn { color: #fff; margin: 0 0 0 15px; min-width: 50px; }
body.skey.results #question-nav h6 { color: #7a6f1f; font-weight: bold; margin: 0 0 8px 0; }
body.skey.results #question-nav .option-list > li { background: #fff; border-top: 1px solid #c3d941; cursor: pointer; display: block; height: auto; line-height: normal; margin: 0; padding: 12px; }
body.skey.results #question-nav .option-list > li.last { border-bottom: 1px solid #c3d941; }
body.skey.results #question-nav .option-list > li.answered { background: #ffd; }
body.skey.results #question-nav .option-list > li.active, body.skey.results #question-nav .option-list > li:hover, body.skey.results #question-nav .option-list > li.active span.value, body.skey.results #question-nav .option-list > li.answered.active { background: #dce890; cursor: default; }
body.skey.results #question-nav .option-list .option { color: #1a2e11; margin-left: 0; text-decoration: none; }
body.skey.results #question-nav .option-list .option .name { display: block; font-weight: bold; margin: 0 0 3px 0; }
body.skey.results #question-nav .option-list .option .name button { font-weight: bold; }
body.skey.results #question-nav .option-list .clear-filter { color: #27610a; display: block; margin-left: 0; margin-top: 4px; width: 45px; }
body.skey.results #question-nav .loading { background: url(/static/images/icons/preloaders-dot-net-sm.gif) no-repeat scroll 0 0 transparent; font-weight: bold; margin: 12px; padding: 0 0 0 20px; }
body.skey.results #results-section { float: left; margin: -8px 0 28px 18px; width: 710px; }
body.skey.results a.get-questions, body.skey.results a.add-questions { color: white; cursor: default; margin: 2px 0 0 10px; width: 171px; }
body.skey.results #intro-overlay { /* for introductory overlay */ display: none; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 40px; text-align: center; z-index: 1000; /* Arrows */ }
body.skey.results #intro-overlay div { background-color: #f8eeda; border-radius: 0.25em; box-shadow: 0px 5px 20px black; color: #fff; margin-bottom: 10%; padding: 0.6em 0.8em; position: relative; }
body.skey.results #intro-overlay .number-of-species, body.skey.results #intro-overlay .number-of-questions { background-color: #508e31; }
body.skey.results #intro-overlay .continue { background-color: #d87e54; border-radius: 2em; border: 2px solid #dc9402; cursor: default; font-family: ScalaSans, "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; letter-spacing: 3px; text-shadow: 1px 1px 2px #dc9402; text-transform: uppercase; }
body.skey.results #intro-overlay h1 { font-size: 140%; }
body.skey.results #intro-overlay .number-of-species:before, body.skey.results #intro-overlay .number-of-questions:before { border-style: solid; border-width: 0.9em 1.8em; bottom: 0.8em; content: ''; height: 0; position: absolute; width: 0; }
body.skey.results #intro-overlay .number-of-species:before { border-color: transparent; right: -5em; }
body.skey.results #intro-overlay .number-of-questions:before { border-color: transparent #508e31 transparent transparent; left: -3.9em; top: 0.4em; }
body.skey.results .species-count-heading { /* Move "18 matching species" to the right of Photos/List tab */ font-size: 22px; margin: 0; padding: 0; position: relative; }
body.skey.results .species-count-heading > span { left: 330px; position: absolute; top: 10px; }
body.skey.results h5.help { clear: left; font-size: 14px; margin: 0 0 0 0; padding: 3px 0 0 0; }
body.skey.results h5.help.last { margin-top: 12px; }
body.skey.results .view-tabs { border-bottom: 1px solid #c3d941; clear: left; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; height: 2.2em; margin: 15px 0 0; }
body.skey.results .view-tabs h3 { margin: 0; }
body.skey.results .view-tabs a { background: #d6e6c5; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaf2e2), color-stop(100%, #d6e6c5)); background: -moz-linear-gradient(center top, #eaf2e2, #d6e6c5); border: 1px solid #c3d941 !important; border-top-left-radius: 6px; border-top-right-radius: 6px; color: #554e16; cursor: default; display: block; float: left; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 1.1rem; margin: 0; min-width: 100px; padding: 0.3em 1em 0.2em; text-align: center; }
body.skey.results .view-tabs a:hover { background: #e1f2cd; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f8e7), color-stop(100%, #e1f2cd)); background: -moz-linear-gradient(center top, #f0f8e7, #e1f2cd); cursor: default; text-decoration: none; }
body.skey.results .view-tabs li { list-style-type: none; }
body.skey.results .view-tabs li:first-child a { margin-left: 10px; }
body.skey.results .view-tabs a.current, body.skey.results .view-tabs a.current:hover { background: #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f0f0c0)) !important; background: -moz-linear-gradient(center top, #ffffff, #f0f0c0); border-bottom: 0 !important; color: #1a2e11; cursor: default; padding: 0.3em 1em; }
body.skey.results #notification-msg { background-color: #ff0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; font-size: 1.2em; -moz-border-bottom-left-radius: 15px; -moz-border-bottom-right-radius: 15px; padding: 0.25em 0.75em; z-index: 200; }
body.skey.results .working-area { background: #fff; border: 1px solid #c3d941; box-shadow: 1px 1px 5px 0 black; display: none; line-height: 100%; margin-left: 214px; padding: 10px 15px; position: absolute; width: 730px; z-index: 200; /* end .choice */ /* end ul */ /* Working Area slider styles */ /* end #slider */ }
body.skey.results .working-area img.arrow { display: block; left: -15px; position: absolute; top: 16px; }
body.skey.results .working-area .terms { display: none; }
body.skey.results .working-area .choices { border-spacing: 6px 12px; display: table; }
body.skey.results .working-area .choices.has-drawings .row { height: 130px; }
body.skey.results .working-area .row { display: table-row; }
body.skey.results .working-area .choice { display: table-cell; margin: 0 0.5em 1em 0; }
body.skey.results .working-area .choice.disabled span { color: #aaa; }
body.skey.results .working-area .choice .drawing { height: 82px; }
body.skey.results .working-area .choice img, body.skey.results .working-area .choice label { margin-left: 18px; }
body.skey.results .working-area .choice img { height: 82px; }
body.skey.results .working-area .choice img[id] { /* only border if image has id, not on empty */ border: 1px solid #ddd; height: 80px; }
body.skey.results .working-area .choice label { cursor: default; display: block; font-family: Tahoma, "Trebuchet MS", "Lucida Sans Unicode", sans-serif; font-size: 12px; line-height: 14px; max-width: 250px; min-width: 70px; padding-top: 0; word-wrap: break-word; /* can break mid-word */ }
body.skey.results .working-area .choice input { margin: 0 3px 0 -18px; }
body.skey.results .working-area .close { background: url(/static/images/icons/close.png) no-repeat transparent; display: block; float: right; height: 16px; margin: 5px 0 0 0; padding: 12px 0 0 0; width: 16px; }
body.skey.results .working-area h3 { color: #000; display: none; font-size: 18px; line-height: 130%; margin: 6px 0; width: 650px; }
body.skey.results .working-area .intro-message h4 { display: block; font-weight: bold; }
body.skey.results .working-area .intro-message p { font-size: 14px; margin-bottom: 5px; }
body.skey.results .working-area .info { display: none; float: left; font-family: Tahoma, "Trebuchet MS", "Lucida Sans Unicode", sans-serif; font-size: 14px; width: 100%; }
body.skey.results .working-area .info .hint { font-size: 12px; margin: 6px 0; }
body.skey.results .working-area .info .hint p { font-size: 14px; line-height: 120%; margin: 0; }
body.skey.results .working-area .character-drawing { float: right; }
body.skey.results .working-area .character-drawing img { max-height: 90px; }
body.skey.results .working-area ul { margin: 15px 0 0 0; }
body.skey.results .working-area ul li { display: block; float: left; margin: 0 8px 15px 0; }
body.skey.results .working-area ul li label { display: block; float: left; margin: 0 9px 0 0; }
body.skey.results .working-area ul li img { border: 1px solid #e1e1dc; display: block; }
body.skey.results .working-area ul li .option-container { float: left; width: auto; }
body.skey.results .working-area ul li .option-container p { display: inline-block; width: 80px; }
body.skey.results .working-area .apply-btn { color: #fff; width: 180px; }
body.skey.results .working-area .choose_length label { /* Length input */ margin: 0 10px 0 0; }
body.skey.results .working-area .choose_length label input { margin: 0 4px 0 0; }
body.skey.results .working-area .close { color: #00e; cursor: default; display: inline; float: right; }
body.skey.results .working-area h3.name { font-size: 1em; font-weight: bold; line-height: 1em; margin: 0 0 0.3em 0; padding: 0; }
body.skey.results .working-area .values.numeric { border: 0; height: auto; margin-top: 8px; overflow-y: visible; }
body.skey.results .working-area .values .zero { color: #ccc; }
body.skey.results .working-area .measurement { margin: 8px 0; }
body.skey.results .working-area .measurement label input { margin: 0 4px 0 8px; }
body.skey.results .working-area .instructions { margin-bottom: 8px; }
body.skey.results .working-area .actions { text-align: center; }
body.skey.results .working-area #slider { height: 70px; margin: 20px 0 10px; padding: 20px 0 0 0; position: relative; }
body.skey.results .working-area #slider .bar { box-sizing: border-box; cursor: default; padding: 0 4px; position: absolute; top: 47px; width: 100%; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
body.skey.results .working-area #slider .bar div { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1d9a7), color-stop(100%, #ffffff)); background: -moz-linear-gradient(center top, #c1d9a7, #ffffff); border: 1px solid #c1d9a7; border-radius: 4px; height: 8px; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
body.skey.results .working-area #slider .thumb { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1d9a7), color-stop(100%, #ffffff)); background: -moz-linear-gradient(center top, #c1d9a7, #ffffff); border: 1px solid #ffffff; border-radius: 16px; box-shadow: 0 1px 6px 1px #333333; cursor: default; height: 30px; left: 3px; position: absolute; text-align: center; top: 35px; width: 30px; }
body.skey.results .working-area #slider .label { font-size: 16px; position: relative; top: -36px; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
body.skey.results img.char-value-larger { height: 160px !important; /* Consistent height for popup character value drawings */ }
body.skey .toplink { display: none; }
body.skey #filters-preview { display: none; }

.modal-wrap.more-questions-dialog { background-color: #f8eeda; }
.modal-wrap.more-questions-dialog .inner { background-color: #f8eeda; padding-bottom: 10px; }
.modal-wrap.more-questions-dialog .inner p { clear: left; padding: 10px 0; }
.modal-wrap.more-questions-dialog .title { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; padding: 0 !important; text-align: center; }
.modal-wrap.more-questions-dialog .view-tabs a { font-size: 13px !important; }
.modal-wrap.more-questions-dialog #choices { padding-top: 0; }
.modal-wrap.more-questions-dialog #choices .pick { display: none; }
.modal-wrap.more-questions-dialog .char-groups input + span { margin-left: 4px; }
.modal-wrap.more-questions-dialog .char-groups input[disabled] + span { color: #999; }
.modal-wrap.more-questions-dialog .questions { background-color: #fff; border: 1px solid gray; height: 200px; margin: 10px 0; padding: 4px; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.modal-wrap.more-questions-dialog .questions p { padding: 5px 4px; }
.modal-wrap.more-questions-dialog .questions label { display: block; margin-left: 20px; }
.modal-wrap.more-questions-dialog .questions input[type="checkbox"] { float: left; margin-left: -20px; margin-top: 3px; }
.modal-wrap.more-questions-dialog .category { font-weight: bold; }

/* Experiment by Brandon */
ul.get-more-questions-menu { box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.6); z-index: 200; position: absolute; right: 0; display: block; bottom: 110%; border: 1px solid black; font-size: 12px; text-indent: 0px; /* undo the -9000px */ white-space: nowrap; }
ul.get-more-questions-menu li { cursor: default; position: relative; display: block; margin: 0; background-color: #d9dbb1; /*#dce890;*/ padding: 0 1em; line-height: 2em; text-align: left; }
ul.get-more-questions-menu li:hover { background-color: #bedc8f; }
ul.get-more-questions-menu > li { text-align: right; }
ul.get-more-questions-menu ul { position: absolute; top: 0; left: 100%; display: none; border: 1px solid black; }
ul.get-more-questions-menu ul li { color: #d1d3a0; }
ul.get-more-questions-menu ul li[data-character] { color: black; }

/* Begin media queries styles for Simple and Full Keys. */
/* Portrait-orientation styles */
@media only screen and (max-width: 400px) { body.skey { /* end &.results.mobile-wide */ }
  body.skey.groups-subgroups .list-item h2 { clear: left; }
  body.skey.results #intro-overlay { left: 12% !important; top: 100px !important; }
  body.skey.results #results-display label { display: none; }
  body.skey.results.mobile-wide { /* Styles for testing: mobile variant where filters list is full width of screen */ }
  body.skey.results.mobile-wide #question-nav .section a.clear-all-btn, body.skey.results.mobile-wide #question-nav .section a.get-help-btn { margin: 0 0 0 95px; }
  body.skey.results.mobile-wide .species-count-heading { left: -235px; }
  body.skey.results.mobile-wide .view-tabs li:first-child a { margin-left: 32px; /* for the Results tabs */ } }
/* Landscape-orientation styles */
@media only screen and (min-width: 401px) and (max-width: 600px) { body.skey { /* end &.results.mobile-wide */ }
  body.skey.results #intro-overlay { left: 26% !important; }
  body.skey.results.mobile-wide { /* Styles for testing: mobile variant where filters list is full width of screen */ }
  body.skey.results.mobile-wide #question-nav .section a.clear-all-btn, body.skey.results.mobile-wide #question-nav .section a.get-help-btn { margin: 0 170px; }
  body.skey.results.mobile-wide .species-count-heading { left: -310px; }
  body.skey.results.mobile-wide .view-tabs li:first-child a { margin-left: 112px; /* for the Results tabs */ }
  body.skey.results.mobile-wide .more-questions-dialog .questions { max-height: 160px; } }
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { body.skey { /* end &.skey */ /* end &.results */ /* end &.results.mobile-wide */ /* end &.results.mobile-gloss */ /* end &.results.mobile-inline */ }
  body.skey.groups-subgroups p.question { font-size: 18px; line-height: 24px; }
  body.skey.groups-subgroups p.tip { font-size: 14px; margin-bottom: 8px; }
  body.skey.groups-subgroups .list-item { margin-top: 0; }
  body.skey.groups-subgroups .list-item h3 { line-height: 1.4; }
  body.skey.groups-subgroups .list-item .details { float: none; width: inherit; }
  body.skey.groups-subgroups .list-item .details a { clear: left; }
  body.skey.groups-subgroups .list-item .details a.plant-in-group, body.skey.groups-subgroups .list-item .details a.plant-in-subgroup { margin-left: 14px; }
  body.skey.groups-subgroups .list-item .details .section-title { font-size: 10px; }
  body.skey.groups-subgroups .not-my-plant { display: none; }
  body.skey.results { /* end #question-nav */ /* end .working-area */ }
  body.skey.results .content .container { width: auto; }
  body.skey.results #intro-overlay { font-size: 170%; }
  body.skey.results #main { margin-left: 0; margin-right: 0; width: auto; }
  body.skey.results .content .container { padding: 0; width: auto; }
  body.skey.results #sb-title { display: none; }
  body.skey.results #sb-nav-close { right: -20px !important; top: -22px !important; }
  body.skey.results .more-questions-dialog .view-tabs a { padding: 5px 0 !important; }
  body.skey.results .more-questions-dialog .view-tabs li:first-child a { margin-left: 10px !important; }
  body.skey.results .section + .section { margin-bottom: 16px; }
  body.skey.results #question-nav .section button, body.skey.results #question-nav .section.clear h5, body.skey.results #question-nav .section.help h5 { display: none; }
  body.skey.results #page-head { left: 8px; margin: 0 8px; }
  body.skey.results #question-nav { float: left; font-size: 10px; margin: 0 3px 0 0; padding: 0; min-height: 666px; width: 149px; }
  body.skey.results #question-nav .question { font-size: 13px; width: auto; }
  body.skey.results #question-nav .scroll + .section { margin: 0 0 32px; }
  body.skey.results #question-nav .section { padding: 0 0 0 4px; }
  body.skey.results #question-nav .section.instructions { padding: 10px 0px 10px 12px; }
  body.skey.results #question-nav .section.instructions h5 { font-size: 14px; }
  body.skey.results #question-nav .section.family-genus select { margin-bottom: 16px; width: 139px; }
  body.skey.results #question-nav .section.help { margin-bottom: 8px; }
  body.skey.results #question-nav .section p.get-more { margin-bottom: 50px; }
  body.skey.results #question-nav .section a.clear-all-btn, body.skey.results #question-nav .section a.get-help-btn { margin: 6px 0 6px 16px; }
  body.skey.results #question-nav .scroll { height: 261px; width: 149px; }
  body.skey.results #question-nav .option-list .clear-filter { background-color: #ddd; border-radius: 8px; margin: 8px 0 0; padding: 6px 0; text-align: center; width: 100%; }
  body.skey.results #question-nav .option-list .clear-filter:hover, body.skey.results #question-nav .option-list .clear-filter:active { text-decoration: none; }
  body.skey.results #question-nav .option-list > li { padding-left: 8px; padding-right: 8px; -webkit-tap-highlight-color: transparent; }
  body.skey.results #results-section { float: none; margin: 0 0 28px; width: 100%; }
  body.skey.results #results-section .view-tabs li + li a.current, body.skey.results #results-section .view-tabs li + li a.current:hover { background: #fff !important; }
  body.skey.results .view-tabs { height: 26px; }
  body.skey.results .view-tabs a { font-size: 16px; line-height: 16px; }
  body.skey.results .plant-list { height: auto !important; width: 100%; }
  body.skey.results .plant-list .wait { background-position: center 10%; }
  body.skey.results .plant-list .plant { float: left; font-size: 10px; height: 190px; padding: 6px; position: static; width: 140px; }
  body.skey.results .plant-list .plant.genus_join_left, body.skey.results .plant-list .plant.genus_join_right { border-left: 1px solid #c3d941; border-right: 1px solid #c3d941; }
  body.skey.results .plant-list .plant.genus_join_right { padding-right: 6px; }
  body.skey.results .plant-list .plant .frame { display: none; }
  body.skey.results .plant-list .plant .plant-img-container { width: 140px; }
  body.skey.results .plant-list table tr { cursor: default; height: 44px; background: #fff; /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f0f0c0));*/ -webkit-tap-highlight-color: transparent; }
  body.skey.results .plant-list table tr:last-of-type { border-bottom: 1px solid #e1e1dc; }
  body.skey.results .plant-list table tr:active { background: #27610a; color: #fff; }
  body.skey.results .plant-list table tr:active .common-name::after { border-color: #fff; }
  body.skey.results .plant-list table td { padding: 8px 0; }
  body.skey.results .plant-list table .genus, body.skey.results .plant-list table .details, body.skey.results .plant-list table .scientific-name a { display: none; }
  body.skey.results .plant-list table .scientific-name, body.skey.results .plant-list table .common-name { font-size: 12px; line-height: 14px; padding-bottom: 8px; padding-top: 8px; }
  body.skey.results .plant-list table .scientific-name { padding-left: 8px; padding-right: 4px; }
  body.skey.results .plant-list table .common-name { padding-right: 20px; position: relative; }
  body.skey.results .plant-list table .common-name::after { border-color: #000; border-style: solid; border-width: 2px 2px 0 0; color: #000; content: " \a0"; display: inline-block; height: 7px; position: absolute; right: 10px; top: 17px; vertical-align: middle; width: 7px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  body.skey.results .missing-image p { font-size: 11px; margin-left: -60px; }
  body.skey.results .species-count-heading { font-size: 16px; padding-bottom: 4px; position: static; text-align: center; white-space: nowrap; }
  body.skey.results .species-count-heading > span { left: auto; position: static; top: auto; }
  body.skey.results #results-display { margin: 12px 0 8px; text-align: center; }
  body.skey.results #results-display label, body.skey.results #results-display select { font-size: 13px; }
  body.skey.results #results-display img.icon { margin-left: 1px; vertical-align: -3px; }
  body.skey.results .working-area { height: 100%; left: 0; margin-left: 0; padding-left: 8px; padding-right: 8px; position: fixed; top: 0 !important; width: 95%; }
  body.skey.results .working-area .interior { height: 100%; }
  body.skey.results .working-area img.arrow { display: none; }
  body.skey.results .working-area h4 { font-size: 13px; margin: 2px 0; width: auto; }
  body.skey.results .working-area .info { height: 100%; }
  body.skey.results .working-area .info .hint p { font-size: 11px; margin-bottom: 10px; }
  body.skey.results .working-area .values { height: 60%; margin-bottom: 10px; }
  body.skey.results .working-area .choices, body.skey.results .working-area .row, body.skey.results .working-area .choice { display: block; }
  body.skey.results .working-area .choices { background: #fff; border: 1px solid #999; border-radius: 8px; border-spacing: 0; height: 100%; margin-bottom: 6px; overflow-x: hidden; overflow-y: auto; position: fixed; width: 100%; -webkit-overflow-scrolling: touch; }
  body.skey.results .working-area .choices.has-drawings .row { height: auto; }
  body.skey.results .working-area .choices.has-drawings .choice, body.skey.results .working-area .choices.has-drawings .choice label { height: 56px; }
  body.skey.results .working-area .choices.has-drawings .drawing { background-color: inherit; /*border-left: 1px solid blue;*/ /*border-right: 1px solid blue;*/ clear: left; float: left; height: 56px; margin: 0; text-align: center; width: 60px; }
  body.skey.results .working-area .choices.has-drawings img, body.skey.results .working-area .choices.has-drawings img[id] { border: 0; height: auto; margin: auto; max-height: 56px; max-width: 56px; width: auto; }
  body.skey.results .working-area .choices.has-drawings .choice label { width: 73%; }
  body.skey.results .working-area .choices.has-drawings .choice:first-of-type .drawing { border-top-left-radius: 8px; }
  body.skey.results .working-area .choices.has-drawings .choice:last-of-type .drawing { border-bottom-left-radius: 8px; }
  body.skey.results .working-area .choice { border-bottom: 1px solid #999; margin: 0; height: 44px; position: relative; }
  body.skey.results .working-area .choice input { margin: 4px 0; opacity: 0; position: absolute; }
  body.skey.results .working-area .choice label { display: table; font-family: Verdana, sans-serif; /* No Tahoma on iOS */ font-size: 11px; height: 44px; margin: 0; /*
max-width: 0;
min-width: 0;
*/ padding-left: 4px; padding-right: 12px; width: 96%; -webkit-tap-highlight-color: transparent; }
  body.skey.results .working-area .row:first-of-type .choice:first-of-type { border-top: none; }
  body.skey.results .working-area .checked { background: #eef2e9 url(/static/images/layout/check.png) no-repeat; background-size: auto 20px; background-position: 98% center; }
  body.skey.results .working-area .row:first-of-type .checked:first-of-type { border-top-left-radius: 8px; border-top-right-radius: 8px; }
  body.skey.results .working-area .row:last-of-type .checked:last-of-type { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
  body.skey.results .working-area .choice-label { display: table-cell; vertical-align: middle; }
  body.skey.results .working-area .actions { bottom: 0; height: 50px; position: fixed; width: 100%; }
  body.skey.results .modal-wrap .inner { /* More Questions dialog */ }
  body.skey.results .modal-wrap .inner #choices { font-size: 12px; padding-left: 10px; padding-right: 10px; }
  body.skey.results .modal-wrap .inner #choices li { margin-bottom: 8px; }
  body.skey.results.mobile-wide { /* Styles for testing: mobile variant where filters list is full width of screen */ /* end #question-nav */ }
  body.skey.results.mobile-wide #intro-overlay .number-of-questions:before { display: none; }
  body.skey.results.mobile-wide #question-nav { margin: 35px 8px 12px; width: 95%; /* end .option-list */ }
  body.skey.results.mobile-wide #question-nav.closed { background: none; border: 0; min-height: 0; }
  body.skey.results.mobile-wide #question-nav.closed div:not([class="section instructions"]) { display: none; }
  body.skey.results.mobile-wide #question-nav.closed > .instructions { border-radius: 15px; }
  body.skey.results.mobile-wide #question-nav.closed > .instructions h2::after { right: 12px; top: 10px; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); }
  body.skey.results.mobile-wide #question-nav > .instructions { background-color: #bb582a; border-radius: 0; box-shadow: 0px 1px 4px 0 #a2a64d; color: #fff; cursor: default; position: relative; }
  body.skey.results.mobile-wide #question-nav > .instructions h2 { color: #fff; }
  body.skey.results.mobile-wide #question-nav > .instructions h2::after { border-color: #fff; border-style: solid; border-width: 3px 3px 0 0; color: #000; content: " \a0"; display: inline-block; height: 9px; position: absolute; right: 13px; top: 16px; vertical-align: middle; width: 9px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
  body.skey.results.mobile-wide #question-nav .choices, body.skey.results.mobile-wide #question-nav .actions { position: static; }
  body.skey.results.mobile-wide #question-nav .scroll { border: 0; border-bottom: 1px solid #c3d941; height: auto; overflow: visible; width: 100%; }
  body.skey.results.mobile-wide #question-nav .section { clear: left; }
  body.skey.results.mobile-wide #question-nav .section p.get-more { margin-bottom: 35px; }
  body.skey.results.mobile-wide #question-nav .section.family-genus .already-know { margin-bottom: 25px; text-align: center; width: 100%; }
  body.skey.results.mobile-wide #question-nav .section.clear, body.skey.results.mobile-wide #question-nav .section.help { float: left; height: 40px; width: 98%; }
  body.skey.results.mobile-wide #question-nav .option-list > li:active:not(.active) { /* question-link active pseudoclass, only when question is closed */ background: #27610a; }
  body.skey.results.mobile-wide #question-nav .option-list .option { cursor: default; display: block; position: relative; }
  body.skey.results.mobile-wide #question-nav .option-list .option::after { border-color: #000; border-style: solid; border-width: 2px 2px 0 0; color: #000; content: " \a0"; display: inline-block; height: 8px; position: absolute; right: 8px; top: 2px; vertical-align: middle; width: 8px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  body.skey.results.mobile-wide #question-nav .option-list .name { font-size: 11px; margin: 0; }
  body.skey.results.mobile-wide #question-nav .option-list .answered .value { display: inline-block; line-height: 14px; padding-top: 8px; }
  body.skey.results.mobile-wide #question-nav .option-list .clear-filter { display: none; }
  body.skey.results.mobile-wide .working-area .close { float: left; padding-right: 12px; }
  body.skey.results.mobile-wide .working-area .values.numeric { font-size: 12px; line-height: 14px; margin-top: 18px; }
  body.skey.results.mobile-wide working-area .measurement { margin: 18px 0; }
  body.skey.results.mobile-wide working-area .measurement input[type='text'] { margin-right: 10px; width: 60px; }
  body.skey.results.mobile-wide working-area .measurement label { padding-right: 10px; }
  body.skey.results.mobile-wide .species-count-heading { position: relative; text-align: center; top: 5px; width: 80%; }
  body.skey.results.mobile-gloss { /* Styles for mobile variants where working- area glossary terms are shown in a list */ }
  body.skey.results.mobile-gloss .working-area h4 { padding-right: 50px; }
  body.skey.results.mobile-gloss .working-area .character-drawing img { margin-top: -24px; max-height: 60px; }
  body.skey.results.mobile-gloss .working-area .gloss { border-bottom: 0; color: inherit; cursor: default; }
  body.skey.results.mobile-gloss .working-area .gloss:hover { border-bottom: 0; }
  body.skey.results.mobile-gloss .working-area .terms { background: #e1f0d1; border: 1px solid #666; box-shadow: 0px 1px 4px 0 #a2a64d; display: block; padding: 6px 12px; position: absolute; right: 0; text-align: right; top: 0; width: 50%; }
  body.skey.results.mobile-gloss .working-area .terms.closed { background: none; border: 0; box-shadow: none; }
  body.skey.results.mobile-gloss .working-area .terms.closed h5 { padding: 5px 6px 8px; }
  body.skey.results.mobile-gloss .working-area .terms.closed h5::after { top: 16px; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); }
  body.skey.results.mobile-gloss .working-area .terms.closed ul { display: none; }
  body.skey.results.mobile-gloss .working-area .terms h5 { color: #27610a; padding: 4px 5px 8px 6px; }
  body.skey.results.mobile-gloss .working-area .terms h5::after { border-color: #27610a; border-style: solid; border-width: 2px 2px 0 0; color: #fff; content: " \a0"; display: inline-block; height: 4px; position: absolute; right: 6px; top: 17px; vertical-align: middle; width: 4px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
  body.skey.results.mobile-gloss .working-area .terms.none h5 { display: none; }
  body.skey.results.mobile-gloss .working-area .terms ul { margin: 0; text-align: left; }
  body.skey.results.mobile-gloss .working-area .terms li { border: 0; float: none; line-height: 120%; margin-bottom: 4px; padding: 0; width: 100%; }
  body.skey.results.mobile-gloss .working-area .terms li span { font-weight: bold; }
  body.skey.results.mobile-inline { /* Styles for testing: mobile variant where filter values appear inline */ }
  body.skey.results.mobile-inline #question-nav .option-list > li.active .option::after { right: 6px; top: 3px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
  body.skey.results.mobile-inline #question-nav .option-list .option::after { right: 7px; top: 0; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); }
  body.skey.results.mobile-inline .working-area { background: #fff; border: 0; box-shadow: none; height: auto; padding: 8px 0 0; position: static; top: auto !important; width: 99%; }
  body.skey.results.mobile-inline .working-area .close { display: none; }
  body.skey.results.mobile-inline .working-area .info { float: none; }
  body.skey.results.mobile-inline .working-area .choices { height: auto; overflow: visible; }
  body.skey.results.mobile-inline .working-area .choice:last-of-type { border-bottom: 0; }
  body.skey.results.mobile-inline.mobile-gloss .working-area h4 { padding-right: 0; }
  body.skey.results.mobile-inline.mobile-gloss .working-area .terms { background: inherit; border: 0; padding: 4px; position: static; text-align: left; width: 100%; }
  body.skey.results.mobile-inline.mobile-gloss .working-area .terms.closed h5::after { display: none; }
  body.skey.results.mobile-inline.mobile-gloss .working-area .terms.closed ul { display: block; }
  body.skey.results.mobile-inline.mobile-gloss .working-area .terms h5 { color: #000; padding: 5px 0; text-decoration: none; }
  body.skey.results.mobile-inline.mobile-gloss .working-area .terms h5::after { display: none; }
  body.skey.results.mobile-toplink { /* Mobile variant with floating 'back to top' link */ }
  body.skey.results.mobile-toplink .toplink { position: fixed; left: 0; bottom: 0; width: 100%; text-align: right; }
  body.skey.mobile-preview-filters #filters-preview { display: block; border-bottom: solid 1px #000; }
  body.skey.mobile-preview-filters #filters-preview li { list-style-type: none; display: none; }
  body.skey.mobile-preview-filters #filters-preview li.answered { display: inline; }
  body.skey.mobile-preview-filters #filters-preview li .name { font-weight: bold; }
  body.skey.mobile-preview-filters #filters-preview .clear-filter { display: none; }
  body.skey.mobile-quickapply { /* Variant that applies immediately */ }
  body.skey.mobile-quickapply .actions { display: none; }
  body.skey.mobile-quickapply .working-area .choice label { width: 70%; }
  body.skey.mobile-quickapply .working-area .choice label:after { content: "Apply"; position: absolute; right: 0; border: solid 1px #ccc; margin: 8px 5px 2px 0; padding: 5px 1em; line-height: 14px; }
  body.skey.mobile-quickapply .working-area .choice.checked { background: none; }
  body.skey.mobile-quickapply .working-area .choice.checked label:after { background: url(/static/images/layout/check.png) no-repeat; background-size: auto 20px; background-position: 5px center; content: "Applied"; padding-left: 30px; }
  body.skey.mobile-quickapply .working-area .choice.disabled label:after { content: none; }
  /* end body.skey */ }
/* End of styles common to both smartphone widths */
/* Tablet-only styles */
@media only screen and (min-width: 601px) and (max-width: 1024px) { body.skey.results #question-nav .option-list > li.active:hover { background: #dce890; } }
/* These styles apply to smartphones and tablets */
@media only screen and (max-width: 1024px) { body.skey.results #question-nav .option-list > li:hover, body.skey.results #question-nav .option-list > li.active, body.skey.results #question-nav .option-list > li.answered.active { background: #fff; } }
/* End media queries styles for Simple and Full Keys */
/* PlantShare */
body.plantshare .nav-links { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 14px; margin: 0 0 16px; }

body.plantshare .content li { list-style-type: none; }
body.plantshare .content form p { margin: 0; }
body.plantshare .content form label { clear: left; display: block; margin-bottom: 4px; text-transform: uppercase; width: 353px; }
body.plantshare .content form input { margin-bottom: 10px; }
body.plantshare .content form input[type=email], body.plantshare .content form input[type=text], body.plantshare .content form input[type=password] { height: 16px; border: 1px solid #c3d941; padding: 5px; width: 353px; }
body.plantshare .content form textarea { height: 82px; border: 1px solid #c3d941; padding: 5px; width: 353px; }
body.plantshare .content form input[type=text], body.plantshare .content form textarea { font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; }

body.plantshare .box { background-color: #fff; border: 1px solid #c3d941; padding: 4px 16px; }
body.plantshare .box table { margin: 16px 0 12px; width: 100%; }
body.plantshare .box table tr:nth-child(odd) { background-color: #e1f0d1; }
body.plantshare .box table th, body.plantshare .box table td { padding: 6px 8px; }
body.plantshare .box table th { font-weight: normal; text-align: left; width: 33%; }

body.plantshare form.login { padding: 0 16px 16px; max-width: 250px; min-width: 194px; }
body.plantshare form.login label { font-size: 10px; }
body.plantshare form.login input { border-color: #27610a; max-width: 246px; }
body.plantshare form.login input.button { margin-top: 2px; width: 99px; }
body.plantshare form.login a { float: right; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 11px; margin-top: 9px; padding-right: 1px; }

body.plantshare .sign-up-call { clear: left; padding: 12px 18px; width: 475px; }
body.plantshare .sign-up-call ul { line-height: 18px; margin: 10px 0 0 24px; }
body.plantshare .sign-up-call li { list-style-type: disc; }
body.plantshare .sign-up-call a { margin: 12px auto; width: 204px; }

body.plantshare .notification { width: 475px; }
body.plantshare .notification ul { line-height: 18px; list-style-position: inside; margin: 10px 0 0 24px; }

body.plantshare .ps-button { margin: 10px 0; }

body.plantshare .save-btn { width: 99px !important; }

body.plantshare a.close-btn { background: transparent url(/static/images/icons/close.png) no-repeat; display: block; height: 16px; width: 16px; text-indent: -9999px; }

body.plantshare #main .profile { clear: left; width: 471px; }
body.plantshare #main .profile h2 { margin-bottom: 14px; width: 200px; }
body.plantshare #main .profile a.edit { display: block; float: right; }
body.plantshare #main .profile h3 { font-size: 18px; margin: 0; }
body.plantshare #main .profile div { clear: left; }
body.plantshare #main .profile .avatar { background: #e1f0d1; display: block; float: left; height: 102px; margin-right: 16px; width: 112px; }
body.plantshare #main .profile table { clear: left; margin-top: 64px; }
body.plantshare #main .profile .map { float: right; margin-left: 16px; }
body.plantshare #main .profile p { margin: 2px 0; }

body.plantshare#activation-expired .content ul.causes { padding: 0 0 0 18px; }
body.plantshare#activation-expired .content ul.causes li { list-style-type: disc; margin: 0 0 2px 0; }

body.plantshare#terms-of-agreement #main form input[type="checkbox"] { clear: both; float: left; margin: 3px 14px 0 0; width: auto; }
body.plantshare#terms-of-agreement #main form fieldset { background: #fff; border: 0; }
body.plantshare#terms-of-agreement #main form label { float: right; line-height: 150%; margin: -16px 0 24px 32px; text-transform: none; width: auto; }
body.plantshare#terms-of-agreement #main form label:last-of-type { margin-bottom: 0; }
body.plantshare#terms-of-agreement #main form div { margin: 14px 0; padding: 24px 36px 24px 18px; }
body.plantshare#terms-of-agreement #main form .agree-btn { margin-right: 14px; width: 153px; }

body.plantshare#plantshare { /* styles for the PlantShare main page */ }
body.plantshare#plantshare h1 { float: left; }
body.plantshare#plantshare h2 { line-height: 100%; margin: 0.6em 0; }
body.plantshare#plantshare #find-people-form { float: right; margin: 0 0 6px; width: 184px; }
body.plantshare#plantshare #find-people-form h2 { font-size: 18px; margin-top: 1em; }
body.plantshare#plantshare #find-people-form input[type='text'] { width: 130px; }
body.plantshare#plantshare #recent-sightings-gallery { clear: both; float: right; margin: 0; width: 184px; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
body.plantshare#plantshare #recent-sightings-gallery h2 { font-size: 18px; margin-top: 0; -moz-user-select: text; -ms-user-select: text; -webkit-user-select: text; user-select: text; }
body.plantshare#plantshare .img-gallery { width: auto; }
body.plantshare#plantshare .img-gallery .frame { cursor: pointer; height: 139px; width: 173px; }
body.plantshare#plantshare .img-gallery .img-container { height: 149px; width: 183px; }
body.plantshare#plantshare .img-gallery .plant-name { font-size: 10px; margin: 4px 0 0; text-align: center; -moz-user-select: text; -ms-user-select: text; -webkit-user-select: text; user-select: text; }
body.plantshare#plantshare .img-gallery .plant-name.scientific { font-style: italic; }
body.plantshare#plantshare .img-gallery .controls { margin: 0; }
body.plantshare#plantshare .img-gallery .controls a { cursor: pointer; }
body.plantshare#plantshare #ask { margin-top: 20px; }

body.plantshare#find-people { /* Hide the usual default Shadowbox close button. This is used for some dialogs that have their own interior close button, such as is seen on various PlantShare dialogs. */ }
body.plantshare#find-people #main .box { padding: 10px; }
body.plantshare#find-people #main .person { height: 74px; margin: 0; padding: 20px 0 10px; }
body.plantshare#find-people #main .person:nth-child(odd) { background-color: #e1f0d1; }
body.plantshare#find-people #main .person img { background: #e1f0d1; float: left; height: 60px; margin: 0 18px; width: 66px; }
body.plantshare#find-people #main .person ul { float: left; line-height: 140%; width: 400px; }
body.plantshare#find-people #main .person li { margin: 0 0 3px; }
body.plantshare#find-people #main .person .name { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 24px; margin: 2px 0 10px; }
body.plantshare#find-people #main .person ul:first-child { /* when avatar is omitted */ margin-left: 98px; }
body.plantshare#find-people #main .person p { float: right; margin: 12px 0 0; padding-right: 10px; }
body.plantshare#find-people #main .person p a { border-bottom: 0; }
body.plantshare#find-people #main .person .invite-group-btn { width: 143px; }
body.plantshare#find-people #sb-nav-close { display: none; }

body.plantshare #find-people-form { margin: 14px 0 0; }
body.plantshare #find-people-form input[type='text'] { background: transparent url(../images/layout/plantshare-btns.png) no-repeat -1px -334px; border: 0 none; display: block; float: left; font-size: 11px; height: 22px; padding: 0 2px 0 12px; width: 309px; }
body.plantshare #find-people-form input[type='submit'] { background: transparent url(../images/layout/plantshare-btns.png) no-repeat -380px -4px; border: 0 none; display: block; float: left; height: 22px; padding: 0; text-indent: -9999px; width: 40px; }
body.plantshare #find-people-form input:focus { outline: 0 none; }
body.plantshare #find-people-form + p { clear: left; padding-top: 14px; }
body.plantshare #find-people-form .suggester-menu { margin-left: 10px; margin-top: 22px; }

body.plantshare#find-people-profile { background: none; }
body.plantshare#find-people-profile div { background: #fff; border: 5px solid #acac90; height: 185px; padding: 0 16px 0 0; }
body.plantshare#find-people-profile div p { margin-top: 0; }
body.plantshare#find-people-profile .close { background: transparent url(/static/images/icons/close.png) no-repeat; cursor: default; display: block; height: 16px; position: absolute; right: 15px; text-indent: -9999px; top: 15px; width: 16px; }
body.plantshare#find-people-profile .avatar { background: #e1f0d1; float: left; height: 153px; margin: 16px; width: 169px; }
body.plantshare#find-people-profile .map { float: right; position: relative; top: -25px; width: 169px; }
body.plantshare#find-people-profile .not-found { padding: 70px 0; text-align: center; }

body.plantshare#sign-up #main form input { width: 350px; }
body.plantshare#sign-up #main form input.button { margin-top: 12px; width: 204px; }
body.plantshare#sign-up #main #id_url, body.plantshare#sign-up #main label[for=id_url], body.plantshare#sign-up #main #id_url + .helptext { /* hide from visual browsers, leave for screenreaders */ position: absolute; top: -9999px; }

body.plantshare#log-in h1 + p { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 14px; margin: 0; padding: 16px 0; }
body.plantshare#log-in ul.errorlist { padding: 16px 0; }
body.plantshare#log-in form.login { padding-left: 0; }
body.plantshare#log-in form.login label { font-size: 12px; }
body.plantshare#log-in form.login input { border-color: #c3d941; }

body.plantshare #sightings-locator .search-label { display: inline-block; float: left; font-size: 14px; font-weight: 400; line-height: 22px; margin: 0 7px 5px 0; }
body.plantshare #sightings-locator input { border: 0 none; float: left; height: 22px; margin: 0 0 5px 0; padding: 0 2px 0 12px; }
body.plantshare #sightings-locator input[type='text'] { background: transparent url(/static/images/layout/plantshare-btns.png) no-repeat 0px -334px; font-size: 11px; width: 160px; }
body.plantshare #sightings-locator input[type='submit'] { background: transparent url(/static/images/layout/plantshare-btns.png) no-repeat -483px -334px; font-size: 0; text-indent: -9999px; width: 30px; }
body.plantshare #sightings-locator input:focus { outline: 0 none; }
body.plantshare #sightings-locator input + div { font-size: 11px; }
body.plantshare #sightings-locator .map { clear: left; margin-top: 36px; }
body.plantshare #sightings-locator .suggester-menu { margin-left: 170px; margin-top: 21px; }

body.plantshare #sightings-locator.mini { clear: both; margin-top: 20px; }
body.plantshare #sightings-locator.mini .box { font-size: 11px; height: 297px; padding: 0 0 0 10px; }
body.plantshare #sightings-locator.mini .box form { float: left; padding: 0; width: 205px; }
body.plantshare #sightings-locator.mini .box form .search-label { padding-bottom: 10px; padding-top: 10px; }
body.plantshare #sightings-locator.mini .box form p { line-height: 14px; margin: 0; padding: 0.4em 0; }
body.plantshare #sightings-locator.mini .box form p#sightings-status { margin-left: -1000px; /* hide until JS shows it */ padding: 65px 0 25px; }
body.plantshare #sightings-locator.mini .box form p.full-link { margin-top: 10px; }
body.plantshare #sightings-locator.mini .box .map { clear: none; border-bottom: 0; border-right: 0; border-top: 0; float: right; margin-top: 0; padding: 0; }
body.plantshare #sightings-locator.mini .suggester-menu { margin-left: 8px; margin-top: 54px; }

/* end .mini */
body.plantshare#new-sighting h1 + div { background: #fff; border: 1px solid #c3d941; margin-bottom: 16px; padding: 5px 16px; width: 654px; }

body.plantshare#new-sighting #id_identification, body.plantshare#new-sighting .restricted, body.plantshare#edit-sighting #id_identification, body.plantshare#edit-sighting .restricted { display: inline-block; }
body.plantshare#new-sighting .content .suggester-menu, body.plantshare#edit-sighting .content .suggester-menu { margin-top: -10px; }
body.plantshare#new-sighting .images, body.plantshare#edit-sighting .images { margin-top: 10px; }
body.plantshare#new-sighting .restricted, body.plantshare#edit-sighting .restricted { margin-left: 14px; }
body.plantshare#new-sighting .restricted-dialog, body.plantshare#edit-sighting .restricted-dialog { background: #fff; color: #000; padding: 20px; height: auto; width: auto; }
body.plantshare#new-sighting .restricted-dialog p, body.plantshare#edit-sighting .restricted-dialog p { margin: 0 0 14px; }
body.plantshare#new-sighting .restricted-dialog .ok, body.plantshare#edit-sighting .restricted-dialog .ok { margin: 20px 0 0; text-align: center; }
body.plantshare#new-sighting .restricted-dialog .ok a, body.plantshare#edit-sighting .restricted-dialog .ok a { color: #fff; cursor: pointer; display: inline-block; width: 80px; }
body.plantshare#new-sighting fieldset, body.plantshare#edit-sighting fieldset { margin-bottom: 10px; }
body.plantshare#new-sighting .error, body.plantshare#edit-sighting .error { color: #f00; }
body.plantshare#new-sighting #id_location_notes, body.plantshare#edit-sighting #id_location_notes { height: 113px; }
body.plantshare#new-sighting #id_created, body.plantshare#edit-sighting #id_created { width: 100px; }
body.plantshare#new-sighting #id_notes, body.plantshare#edit-sighting #id_notes { height: 62px; margin-bottom: 10px; }
body.plantshare#new-sighting .visibility, body.plantshare#edit-sighting .visibility { clear: left; margin-bottom: 50px; }
body.plantshare#new-sighting .visibility p, body.plantshare#edit-sighting .visibility p { display: inline-block; }
body.plantshare#new-sighting .visibility .label, body.plantshare#edit-sighting .visibility .label { display: block; }
body.plantshare#new-sighting .visibility select, body.plantshare#edit-sighting .visibility select { margin: 4px 0 0; }

body.plantshare#manage-sightings { /* Hide the usual default Shadowbox close button. This is used for some dialogs that have their own interior close button, such as is seen on various PlantShare dialogs. */ }
body.plantshare#manage-sightings .content table { width: 100%; }
body.plantshare#manage-sightings .content table th.identification { width: 25%; }
body.plantshare#manage-sightings .content table th.location { width: 30%; }
body.plantshare#manage-sightings .content table th.posted { width: 20%; }
body.plantshare#manage-sightings .content table th.visibility { width: 15%; }
body.plantshare#manage-sightings .content table th.action { width: 7%; }
body.plantshare#manage-sightings .content table td.action { text-align: center; }
body.plantshare#manage-sightings .content table td:first-of-type a { border-bottom: 0; }
body.plantshare#manage-sightings .content table img { max-width: 90px; }
body.plantshare#manage-sightings #sb-nav-close { display: none; }

body.plantshare#delete-sighting, body.plantshare#delete-checklist { background: none; }
body.plantshare#delete-sighting div, body.plantshare#delete-checklist div { background: #fff; border: 5px solid #acac90; height: 100%; padding: 0 18px; text-align: center; }
body.plantshare#delete-sighting .close, body.plantshare#delete-checklist .close { background: transparent url(/static/images/icons/close.png) no-repeat; cursor: default; display: block; height: 16px; position: absolute; right: 15px; text-indent: -9999px; top: 15px; width: 16px; }
body.plantshare#delete-sighting h2, body.plantshare#delete-checklist h2 { font-size: 18px; text-align: left; }
body.plantshare#delete-sighting table, body.plantshare#delete-checklist table { margin: 18px 0; width: 100%; }
body.plantshare#delete-sighting thead, body.plantshare#delete-checklist thead { display: none; }
body.plantshare#delete-sighting .cancel-btn, body.plantshare#delete-checklist .cancel-btn { color: white; margin: 0 10px 0 0; width: 123px; }

body.plantshare#locator #main { /* Smooth Div Scroll image area */ }
body.plantshare#locator #main h1 + p { margin-bottom: 4px; }
body.plantshare#locator #main h3 { font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; font-size: 12px; line-height: 24px; }
body.plantshare#locator #main #sightings-status { display: none; /* initially hide, until updating value via JS */ float: right; line-height: 24px; }
body.plantshare#locator #main #species-images { border: 5px solid rgba(255, 255, 255, 0.8); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); height: 150px; margin: 0 0 20px 0; overflow: hidden; position: relative; top: 0; width: 700px; z-index: 100; }
body.plantshare#locator #main #species-images .scrollableArea a { border-right: 5px solid #fff; float: left; margin: 0; padding: 0; }

body.plantshare .modal-container { position: relative; }

body.plantshare .image-modal { background-color: white; border: 5px solid #acac90; display: none; height: 160px; left: 0px; padding: 15px; position: absolute; top: 250px; width: 360px; z-index: 10; }
body.plantshare .image-modal h2 { margin: 0.3em 0; padding-left: 4.25em; }
body.plantshare .image-modal img { float: left; margin: 0 5px 10px 0; max-height: 84px; max-width: 84px; }
body.plantshare .image-modal a.button { color: #000; cursor: default; display: inline-block; margin: 10px 6px 0 0; width: 100px; }
body.plantshare .image-modal div.modal-footer { color: #888; display: block; float: left; position: relative; width: 100%; }
body.plantshare .image-modal div.modal-footer div.file-path { border: 1px solid #888; color: #888; margin: 2px 0 auto; padding: 2px; }
body.plantshare .image-modal a.close { background: transparent url(/static/images/icons/close.png) no-repeat; cursor: default; display: block; height: 16px; position: absolute; right: 15px; text-indent: -9999px; top: 15px; width: 16px; }
body.plantshare .image-modal h4 { float: right; font-size: 18px; margin: 0 0 5px; width: 270px; }
body.plantshare .image-modal form { float: right; width: 270px; }
body.plantshare .image-modal input { border: 0 none !important; box-shadow: inset 0 0 0 white !important; }
body.plantshare .image-modal input#id_image { clear: both; display: block; margin: 0 0 10px; }
body.plantshare .image-modal div.screening-notify p { color: #888; font-size: 10px; margin: 5px 0; }

body.plantshare .thumb-gallery { display: inline-block; float: left; padding: 4px 0 20px 0; }

body.plantshare .thumb-frame { display: inline-block; margin: 0 14px 0 0; vertical-align: bottom; }
body.plantshare .thumb-frame .thumb { vertical-align: bottom; }
body.plantshare .thumb-frame .wait { margin-bottom: 40px; }
body.plantshare .thumb-frame .delete-link { display: table; margin: 0 auto; padding-top: 8px; }
body.plantshare .thumb-frame .delete-link img { float: left; padding-right: 4px; vertical-align: top; }

body.plantshare .upload { display: inline-block; float: left; padding-bottom: 20px; }

body.plantshare#sightings h2 { clear: both; }
body.plantshare#sightings #main > ul { margin-top: 14px; }
body.plantshare#sightings #main > ul > li { clear: both; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 18px; margin-bottom: 14px; margin-top: 22px; }
body.plantshare#sightings #main > ul > li ul li { clear: both; font-size: 14px; margin: 22px 0; }
body.plantshare#sightings #main > ul img { height: 149px; width: 183px; }
body.plantshare#sightings #main > ul .photolink { border-bottom: 0; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); display: inline-block; float: left; height: 149px; margin: 0 16px 22px 0; overflow: hidden; position: relative; vertical-align: middle; width: 183px; }
body.plantshare#sightings #main > ul .photolink:before { border: 5px solid rgba(255, 255, 255, 0.8); content: ' '; height: 139px; position: absolute; width: 173px; z-index: 100; }
body.plantshare#sightings #main > ul .title { line-height: 150%; margin-left: 200px; }
body.plantshare#sightings #main > ul .photolink + .title { margin-left: 12px; }
body.plantshare#sightings #main > ul .title a { font-size: 16px; }

body.plantshare.sighting .map { float: right; margin: 0 0 12px 12px; }
body.plantshare.sighting .photos h2 { margin: 0; }
body.plantshare.sighting .photos ul li { height: auto; list-style: none; margin: 0; padding: 10px 0; }
body.plantshare.sighting .photos ul img { max-height: 710px; max-width: 710px; }
body.plantshare.sighting form label { text-transform: none; }
body.plantshare.sighting form fieldset { border: 0; margin: 0 0 16px; padding: 0; width: 687px; }
body.plantshare.sighting form fieldset legend { display: block; text-indent: -9000px; }
body.plantshare.sighting form .post-sighting-btn { width: 157px; }

body.plantshare.ask #sb-title-inner { font-size: 11px; /* title atop lightboxed question images */ }

body.plantshare#ask #main #ask-section, body.plantshare#plantshare #ask #ask-section { margin-bottom: 18px; min-height: 100px; }
body.plantshare#ask #main #ask-section .botanist, body.plantshare#plantshare #ask #ask-section .botanist { background: #ddd; float: left; height: 97px; margin: 4px 18px 0 0; width: 103px; }
body.plantshare#ask #main #question-form, body.plantshare#plantshare #ask #question-form { clear: left; padding-left: 121px; }
body.plantshare#ask #main label, body.plantshare#plantshare #ask label { text-transform: none; width: auto; }
body.plantshare#ask #main textarea, body.plantshare#plantshare #ask textarea { border: 1px solid #aaa; box-shadow: 2px 3px 5px 0px #ddd; height: 75px; margin: 4px 0 10px; padding: 8px; width: 571px; }
body.plantshare#ask #main .submit, body.plantshare#plantshare #ask .submit { clear: both; display: block; margin: 42px 0 8px; text-transform: uppercase; }
body.plantshare#ask #main .more, body.plantshare#plantshare #ask .more { text-align: right; }

body.plantshare#questions #main { /* Questions and Answers page */ }
body.plantshare#questions #main #category-nav p { float: left; margin: 0; }
body.plantshare#questions #main #category-nav ul { margin-left: 80px; }
body.plantshare#questions #main #category-nav li { display: inline; margin-right: 8px; white-space: nowrap; }

body.plantshare .questions { /* styles common to Ask the Botanist, questions pages */ }
body.plantshare .questions li { background-color: #f9faea; border: 1px solid #c3d941; margin: 5px 0 10px; overflow: auto; padding: 10px 12px; }
body.plantshare .questions img { float: right; margin: 5px 0 5px 12px; }
body.plantshare .questions dl { margin: 0; padding: 0; }
body.plantshare .questions dt { clear: left; font-weight: bold; margin-top: 10px; }
body.plantshare .questions dt:first-child { margin-top: 0; }
body.plantshare .questions dd { margin: 0; }
body.plantshare .questions span { display: block; }

body.plantshare#profile { /* Profile page */ }
body.plantshare#profile .username { float: right; }
body.plantshare#profile form + h2 { margin: 30px 0 18px; }
body.plantshare#profile h3 { margin-bottom: 14px; }
body.plantshare#profile div.section-container { position: relative; }
body.plantshare#profile .info-section, body.plantshare#profile .location-section { min-height: 140px; position: relative; }
body.plantshare#profile .info-section select, body.plantshare#profile .location-section select { margin-bottom: 10px; }
body.plantshare#profile .info-section .field-controls, body.plantshare#profile .location-section .field-controls { padding: 5px 0 0; }
body.plantshare#profile .info-section .field-controls input, body.plantshare#profile .location-section .field-controls input { float: left; margin-bottom: 0; }
body.plantshare#profile .info-section .field-controls input, body.plantshare#profile .info-section .field-controls a, body.plantshare#profile .location-section .field-controls input, body.plantshare#profile .location-section .field-controls a { display: inline-block; margin-right: 20px; vertical-align: middle; }
body.plantshare#profile .info-section .field-controls::after, body.plantshare#profile .location-section .field-controls::after { content: " "; clear: both; display: block; }
body.plantshare#profile .info-section .field-reset, body.plantshare#profile .location-section .field-reset { margin-top: 7px; }
body.plantshare#profile .info-section .info.box, body.plantshare#profile .location-section .info.box { min-height: 158px; padding: 0 0 5px 0; }
body.plantshare#profile .info-section .info.box .avatar, body.plantshare#profile .location-section .info.box .avatar { float: left; margin-right: 15px; padding: 0; width: 170px; }
body.plantshare#profile .info-section .info.box .avatar img, body.plantshare#profile .location-section .info.box .avatar img { background: #e1f0d1; border: 0; height: 153px; width: 169px; }
body.plantshare#profile .info-section .info.box .avatar p, body.plantshare#profile .location-section .info.box .avatar p { text-align: center; margin: 0; }
body.plantshare#profile .info-section .info.box .avatar.uploading, body.plantshare#profile .location-section .info.box .avatar.uploading { background-image: url(/static/images/icons/preloaders-dot-net-lg.gif); background-color: white; background-position: center; background-repeat: no-repeat; }
body.plantshare#profile .info-section .info.box #id_location_map, body.plantshare#profile .location-section .info.box #id_location_map { border-bottom: 0; border-left: 0; border-top: 0; float: left; margin: 0 15px 0 0; padding: 0; }
body.plantshare#profile .info-section .info.box table, body.plantshare#profile .location-section .info.box table { margin: 10px 0 0 0; padding: 0; width: 493px; }
body.plantshare#profile .info-section .info.box table td, body.plantshare#profile .location-section .info.box table td { padding: 7px 10px; }
body.plantshare#profile .info-section .info.box table td.first, body.plantshare#profile .location-section .info.box table td.first { font-weight: bold; padding: 7px; text-align: right; vertical-align: baseline; width: 97px; }
body.plantshare#profile .info-section .info.box table p, body.plantshare#profile .location-section .info.box table p { line-height: normal; margin: 0; padding: 0; }
body.plantshare#profile .info-section .info.box table .display .group-list, body.plantshare#profile .info-section .info.box table .display .coords-list, body.plantshare#profile .location-section .info.box table .display .group-list, body.plantshare#profile .location-section .info.box table .display .coords-list { float: left; }
body.plantshare#profile .info-section .info.box table .display .edit-link, body.plantshare#profile .location-section .info.box table .display .edit-link { float: right; }
body.plantshare#profile .info-section .info.box table .display ul, body.plantshare#profile .location-section .info.box table .display ul { list-style: none; }
body.plantshare#profile .info-section .info.box .edit, body.plantshare#profile .location-section .info.box .edit { display: none; }
body.plantshare#profile .info-section { margin: 0 0 20px; }
body.plantshare#profile .info-section .info.box { min-height: 172px; padding: 10px 15px; }
body.plantshare#profile .info-section .info.box table { margin: 0; }
body.plantshare#profile .email-address { margin-top: 32px; }

/* For: forms Your Profile page and also the separate form/error pages */
body.plantshare .change-password input[type='submit'], body.plantshare .change-email input[type='submit'] { margin: 8px 28px 0 0; width: auto; }
body.plantshare .change-password input[type='password'], body.plantshare .change-password input[type='text'], body.plantshare .change-email input[type='password'], body.plantshare .change-email input[type='text'] { margin-bottom: 10px; width: 250px !important; }

body.plantshare .change-password a { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 11px; }

body.plantshare .change-email .verified-address { background: url(/static/images/layout/check.png) no-repeat; background-position: center left; background-size: 18px 19px; margin: 28px 0; padding-left: 26px; }

body.plantshare#forgot-password #main form input[type='text'] { width: 250px; }
body.plantshare#forgot-password #main form input[type='submit'] { margin-top: 8px; }

body.plantshare #login.box { background-color: #d3eaad; border-color: #27610a; clear: left; max-width: 475px; padding: 0; }
body.plantshare #login.box h2 { line-height: 100%; margin: 0.6em 0; padding: 16px 16px 10px; }
body.plantshare #login.box div { border-top: 1px solid #27610a; padding: 16px; }
body.plantshare #login.box div a { margin-left: 0; }
body.plantshare #login.box input[type='text'], body.plantshare #login.box input[type='password'] { width: 95%; }

body.plantshare#checklists { /* Hide the usual default Shadowbox close button. This is used for some dialogs that have their own interior close button, such as is seen on various PlantShare dialogs. */ }
body.plantshare#checklists #sb-nav-close { display: none; }

body.plantshare.checklists .notification.box li { list-style-type: disc; }
body.plantshare.checklists div.notes-modal { background-color: #fff; overflow: hidden; margin: 0; padding: 15px 20px 0; max-height: 240px; }
body.plantshare.checklists div.notes-modal section { padding: 10px 0 0; }
body.plantshare.checklists div.notes-modal textarea { border: 1px solid #ABABAB; box-shadow: inset 1px 1px 5px #ccc; font-size: inherit; height: 80px; line-height: inherit; max-width: 90%; padding: 7px 5px 5px; width: 100%; }
body.plantshare.checklists div.notes-modal div.form-actions { padding: 10px 0; }
body.plantshare.checklists div.notes-modal div.form-actions a.clear-btn { margin: 0 0 0 10px; }
body.plantshare.checklists div.ps-section { margin: 0; padding: 0; }

body.plantshare.checklists div#form-template { display: none; }

body.plantshare.checklists table.checklists-list { background: #fff; border: 1px solid #C3D941; margin: 20px 0; width: 100%; }
body.plantshare.checklists table.checklists-list thead, body.plantshare.checklists table.checklists-list tbody { width: 100%; }
body.plantshare.checklists table.checklists-list td { overflow: hidden; }
body.plantshare.checklists table.checklists-list .first { white-space: nowrap; width: 0px; /* hidden */ }
body.plantshare.checklists table.checklists-list .first input[type="checkbox"] { display: none; margin-left: 5px; margin-top: 10px; width: auto; }
body.plantshare.checklists table.checklists-list .checklistview-name { width: 498px; }
body.plantshare.checklists table.checklists-list .owner { white-space: nowrap; width: 120px; }
body.plantshare.checklists table.checklists-list .last { text-align: right; white-space: nowrap; width: 180px; }
body.plantshare.checklists table.checklists-list .last a { margin-right: 10px; }
body.plantshare.checklists table.checklists-list .name { width: 156px; }
body.plantshare.checklists table.checklists-list .image { width: 80px; }
body.plantshare.checklists table.checklists-list .image img.checklist-thumb { max-width: 40px; max-height: 40px; }
body.plantshare.checklists table.checklists-list .date-sighted, body.plantshare.checklists table.checklists-list .date-posted { width: 110px; }
body.plantshare.checklists table.checklists-list .location { width: 130px; }
body.plantshare.checklists table.checklists-list .note { width: 60px; padding-right: 7px; }
body.plantshare.checklists table.checklists-list .note .note-field { display: none; }
body.plantshare.checklists table.checklists-list .note a { margin: 0; }
body.plantshare.checklists table.checklists-list .note a.row-btn { border-bottom: 0 !important; float: right; margin: 0 0 0 8px; text-indent: -9999px; }
body.plantshare.checklists table.checklists-list .note div.note-text { display: none; }
body.plantshare.checklists table.checklists-list thead { display: block; }
body.plantshare.checklists table.checklists-list thead tr th { padding: 7px 5px; text-align: left; text-transform: uppercase; }
body.plantshare.checklists table.checklists-list tbody { display: block; }
body.plantshare.checklists table.checklists-list tbody tr:nth-child(odd) { background-color: #e1f0d1; }
body.plantshare.checklists table.checklists-list tbody tr td { padding: 7px 5px; }

body.plantshare.checklists .checklists-section { background-color: #fff; border: 1px solid #c3d941; margin: 20px 0; min-height: 140px; padding: 10px 15px 20px; position: relative; }
body.plantshare.checklists .checklists-section input, body.plantshare.checklists .checklists-section textarea { border: 1px solid #ababab; box-shadow: inset 1px 1px 2px #ccc; display: block; font-size: inherit; line-height: 1em; padding: 7px 5px 5px; }
body.plantshare.checklists .checklists-section h4 { margin: 0 0 15px; font-size: 18px; }
body.plantshare.checklists .checklists-section header { margin: 0 0 10px; height: auto !important; }
body.plantshare.checklists .checklists-section header label { text-transform: none; }
body.plantshare.checklists .checklists-section header input, body.plantshare.checklists .checklists-section header textarea { margin: 5px 0 10px; width: 95%; height: auto; }
body.plantshare.checklists .checklists-section .import-sightings-link { background-color: #e0f0d1; display: block; font-weight: bold; margin: 0 0 25px; padding: 5px 10px; }
body.plantshare.checklists .checklists-section table#add-sightings-table { width: 678px; }
body.plantshare.checklists .checklists-section table#add-sightings-table div.form-data { display: none; }
body.plantshare.checklists .checklists-section table#add-sightings-table th, body.plantshare.checklists .checklists-section table#add-sightings-table td { padding: 15px 10px 5px 0; }
body.plantshare.checklists .checklists-section table#add-sightings-table td input { padding: 7px 5px 5px; margin: 0; }
body.plantshare.checklists .checklists-section table#add-sightings-table .name input { width: 160px; }
body.plantshare.checklists .checklists-section table#add-sightings-table .image { font-size: 0.9em; }
body.plantshare.checklists .checklists-section table#add-sightings-table .image img.checklist-thumb { max-width: 40px; max-height: 40px; }
body.plantshare.checklists .checklists-section table#add-sightings-table .date-sighted input { width: 70px; }
body.plantshare.checklists .checklists-section table#add-sightings-table .location input { width: 150px; }
body.plantshare.checklists .checklists-section table#add-sightings-table .date-posted input { width: 70px; }
body.plantshare.checklists .checklists-section table#add-sightings-table .note { padding-right: 0; width: 60px; }
body.plantshare.checklists .checklists-section table#add-sightings-table .note .note-field { display: none; }
body.plantshare.checklists .checklists-section table#add-sightings-table .note a { display: inline-block; }
body.plantshare.checklists .checklists-section table#add-sightings-table .note a.row-btn { border-bottom: 0; float: right; margin: 5px 0 0 8px; }
body.plantshare.checklists .checklists-section table#add-sightings-table thead { border-bottom: 1px solid #ccc; font-weight: normal; width: 678px; }
body.plantshare.checklists .checklists-section table#add-sightings-table thead th { text-transform: uppercase; }
body.plantshare.checklists .checklists-section table#add-sightings-table thead th span { text-transform: none; }
body.plantshare.checklists .checklists-section table#add-sightings-table tfoot { border-bottom: 1px solid #ccc; }
body.plantshare.checklists .checklists-section table#add-sightings-table tfoot td { font-size: .9em; padding-bottom: 10px; padding-top: 10px; }
body.plantshare.checklists .checklists-section .form-actions { padding: 15px 0 0; }
body.plantshare.checklists .checklists-section .form-actions a { margin: 7px 20px 0 0; display: block; float: left; vertical-align: middle; }
body.plantshare.checklists .checklists-section .form-actions #save-btn { margin: 0 20px 0 0; float: left; vertical-align: middle; }
body.plantshare.checklists .checklists-section .form-actions::after { display: block; content: " "; clear: both; }

body.plantshare#screen-images .box h2 { margin-top: 0.8em; }
body.plantshare#screen-images table.unscreened { margin: 20px 0; padding: 0; table-layout: fixed; overflow: hidden; width: 100%; text-align: center; }
body.plantshare#screen-images table.unscreened tr.header { height: 20px; }
body.plantshare#screen-images table.unscreened tr.header th { padding-bottom: 10px; }
body.plantshare#screen-images table.unscreened tr { height: 128px; vertical-align: top; }
body.plantshare#screen-images table.unscreened th.approval, body.plantshare#screen-images table.unscreened td.approval { width: 150px; overflow: hidden; }
body.plantshare#screen-images table.unscreened th.approval input, body.plantshare#screen-images table.unscreened td.approval input { width: 20px; }
body.plantshare#screen-images table.unscreened th.approval li, body.plantshare#screen-images table.unscreened td.approval li { float: left; }
body.plantshare#screen-images table.unscreened th.approval li label, body.plantshare#screen-images table.unscreened td.approval li label { width: 60px; }
body.plantshare#screen-images table.unscreened th.thumb, body.plantshare#screen-images table.unscreened td.thumb { width: 138px; }
body.plantshare#screen-images div.form-control { margin: 0 30px; }

/* Begin media queries styles for PlantShare. */
/* Portrait-orientation styles */
@media only screen and (max-width: 400px) { body.plantshare .box, body.plantshare .profile { width: 302px; }
  body.plantshare #main .profile table { margin-top: 0; }
  body.plantshare#locator #main #species-images { width: 294px; }
  body.plantshare#new-sighting textarea { width: 292px; }
  body.plantshare#find-people .person li a { display: none; /* hide for now: lightbox too big */ }
  .content form label, .content form input:not([type="submit"]), .content form textarea { width: 292px; } }
/* Landscape-orientation styles */
@media only screen and (min-width: 401px) and (max-width: 600px) { body.plantshare .box, body.plantshare .profile { width: 462px; }
  body.plantshare#locator #main #species-images { width: 462px; }
  body.plantshare#new-sighting #id_identification, body.plantshare#new-sighting #id_location { width: 353px; } }
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { body.plantshare #main .box { padding: 0; }
  body.plantshare #main .box > * { padding-left: 16px; padding-right: 16px; }
  body.plantshare #main .profile { width: inherit; }
  body.plantshare > table { margin-left: 16px; width: 90%; }
  body.plantshare .content #sidebar { background: none; border: 0; }
  body.plantshare#plantshare h1, body.plantshare#plantshare #find-people-form, body.plantshare#plantshare #recent-sightings-gallery { float: none; }
  body.plantshare h1 { margin-bottom: 12px; }
  body.plantshare #find-people-form, body.plantshare #recent-sightings-gallery { clear: both; }
  body.plantshare #find-people-form h2, body.plantshare #recent-sightings-gallery h2 { font-size: 16px; }
  body.plantshare #recent-sightings-gallery .img-gallery { padding-bottom: 10px; }
  body.plantshare .profile { margin-top: 10px; width: auto; }
  body.plantshare .profile a.edit { margin-top: 8px; }
  body.plantshare .profile div { height: auto; }
  body.plantshare #sightings-locator .suggester-menu { margin-left: 10px; margin-top: 51px; }
  body.plantshare #sightings-locator.mini .box { height: 424px; width: auto; }
  body.plantshare #sightings-locator.mini .box h4, body.plantshare #sightings-locator.mini .box h4 + p { display: none; }
  body.plantshare #sightings-locator.mini .box form { padding: 0 10px 0 0; width: auto; }
  body.plantshare .sign-up-call { width: auto; }
  body.plantshare .sign-up-call ul { list-style-position: inside; margin-left: 0; }
  body.plantshare .notification { width: auto; }
  body.plantshare .notification ul { margin-left: 0; }
  body.plantshare#new-sighting h1 { margin-bottom: 10px; }
  body.plantshare#new-sighting h1 + div { display: none; }
  body.plantshare#new-sighting div.location + label { padding-top: 8px; }
  body.plantshare.sighting form fieldset { width: auto; }
  body.plantshare.sighting form .location img { display: block; float: none; margin-bottom: 10px; }
  body.plantshare #location-map { margin: 0; }
  body.plantshare#profile .info.box { width: auto; }
  body.plantshare#profile .info.box .info-section .info.box .avatar { padding: 0 0 4px 0; width: auto; }
  body.plantshare#profile .info.box img { padding: 16px; }
  body.plantshare #sign-up #main form input { width: 290px; }
  body.plantshare .content form input[type=text], body.plantshare .content form input[type=password] { width: 292px; }
  body.plantshare #sightings-locator input[type=text] { clear: left; }
  body.plantshare#find-people #find-people-form input[type='text'] { width: 249px; }
  body.plantshare#find-people #main .box { width: auto; }
  body.plantshare#find-people #main .person ul { width: auto; }
  body.plantshare#find-people #main .person .name { font-size: 16px; }
  body.plantshare#plantshare #mini-sightings-map, body.plantshare#ask #mini-sightings-map { float: left; margin-bottom: 12px; margin-top: 14px; width: 97% !important; }
  body.plantshare#plantshare #ask #question-form, body.plantshare#plantshare #main #question-form, body.plantshare#ask #ask #question-form, body.plantshare#ask #main #question-form { padding-left: 0; }
  body.plantshare#plantshare #ask textarea, body.plantshare#plantshare #main textarea, body.plantshare#ask #ask textarea, body.plantshare#ask #main textarea { width: 90%; }
  body.plantshare#sightings #main .nav-links { padding: 8px 0; }
  body.plantshare#sightings #main > ul > li ul { margin: 0; }
  body.plantshare#sightings #main > ul > li ul li { margin-bottom: 12px; }
  body.plantshare#sightings #main > ul .title { display: inline-block; margin: 8px 0 12px 0; }
  body.plantshare#sightings #main > ul .photolink { float: none; margin: 8px 0 8px; }
  body.plantshare#sightings #main > ul .photolink + .title { display: block; margin-left: 0; margin-top: 0; }
  body.plantshare.sighting .map { float: left; margin: 0 20px; width: 85% !important; }
  body.plantshare.sighting .photos ul img { max-height: none; max-width: 100%; }
  body.plantshare#locator #main #sightings-status { clear: both; float: none; }
  body.plantshare#locator #sightings-locator .map { margin-top: 0; }
  body.plantshare#locator #sightings-map { width: 90% !important; }
  body.plantshare#profile .info-section .info.box table, body.plantshare#profile .location-section .info.box table { width: 100%; }
  body.plantshare.checklists #checklist-fillout #id_name { width: 95%; } }
/* These styles apply to smartphones and tablets */
/* Print styles for checklists */
@media only print { body.plantshare { background: white; }
  body.plantshare header, body.plantshare footer { display: none; }
  body.plantshare div#sidebar { display: none; }
  #checklist { background: white; }
  #checklist div#main { width: 100%; padding: 0; }
  #checklist div#main h1 { color: black; font-weight: bold; }
  #checklist div#main div.ps-section { width: 100%; color: black; }
  #checklist div#main div.ps-section table#checklist-detail { width: 100%; border: 1px solid black; border-collapse: collapse; background-color: white; }
  #checklist div#main div.ps-section table#checklist-detail .name { width: 25%; }
  #checklist div#main div.ps-section table#checklist-detail .image { width: 40px; text-align: center; }
  #checklist div#main div.ps-section table#checklist-detail .date-sighted { width: 10%; }
  #checklist div#main div.ps-section table#checklist-detail .location { width: 10%; }
  #checklist div#main div.ps-section table#checklist-detail .date-posted { width: 10%; }
  #checklist div#main div.ps-section table#checklist-detail .note { width: 35%; }
  #checklist div#main div.ps-section table#checklist-detail td, #checklist div#main div.ps-section table#checklist-detail th { border: 1px solid black; padding: 5px; }
  #checklist div#main div.ps-section table#checklist-detail tr { background-color: white; }
  #checklist div#main div.ps-section table#checklist-detail thead { width: 100%; display: table-header-group; border-bottom: 2px solid black; }
  #checklist div#main div.ps-section table#checklist-detail tbody { width: 100%; display: table-row-group; border-bottom: 2px solid black; }
  #checklist div#main div.ps-section table#checklist-detail tbody tr { height: 80px; }
  #checklist div#main div.ps-section table#checklist-detail td.note a { display: none; }
  #checklist div#main div.ps-section table#checklist-detail td.note div.note-text { display: block; } }
/* End media queries styles for PlantShare */
/* Dichotomous Key */
#dkey .offer-help-aside { float: right; margin: 1em 1em 0.5em 1em; text-align: right; color: #606060; }
#dkey .offer-help-aside a.button { display: inline-block; margin: 0.8em 1em; font-weight: normal; text-transform: uppercase; }
#dkey .offer-help-aside select { margin: 0.25em 1.0em; font-size: 1.33333em; }

#jump-nav { margin: 0 auto; max-width: 330px; }

#dkey .groupbox { position: relative; }
#dkey .groupbox ul { display: none; position: absolute; z-index: 300; right: 10px; background-color: white; text-align: left; }
#dkey .groupbox li { display: block; margin: 0; border-width: 1px 1px 0px 1px; border-style: solid; border-color: #bbc6b6; }
#dkey .groupbox li:last-child { border-bottom-width: 1px; }
#dkey .groupbox a { display: block; padding: 1em; color: black; line-height: 1.25em; }
#dkey .groupbox a:hover { background-color: #d3e7b4; text-decoration: none; }
#dkey .groupbox b { display: block; }

#dkey #main p { margin: 1em 0; max-width: 42em; }

#dkey p.figure { clear: right; float: right; margin-left: 1em; margin-bottom: 1em; width: 16em; font-size: 75%; }
#dkey p.figure a { display: block; margin-bottom: 0.5em; border-bottom: 1px solid black; padding-bottom: 0.5em; }
#dkey p.figure img { width: 16em; /* force thumbnails to a consistent width */ }
#dkey p.figure .number { font-weight: bold; margin-right: 0.5em; }

#dkey p.backlinks { margin-top: 0.57143em; margin-bottom: 0.64286em; font-size: 1.1em; }
#dkey p.backlinks a { text-decoration: none; margin-right: 0.5em; color: #519136; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; }
#dkey p.backlinks a:hover, #dkey p.backlinks a:focus { text-decoration: underline; }

#dkey a.what-lies-beneath { /* "See list of 7 species in 1a" */ text-decoration: none; border-bottom: 0; color: #27610a; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; text-decoration: underline; text-transform: uppercase; }
#dkey a.what-lies-beneath:hover, #dkey a.what-lies-beneath:focus { text-decoration: underline; }

#dkey > a.what-lies-beneath { display: block; max-width: 47.5em; text-align: right; }

#dkey ul.couplets { margin: 0em; max-width: 48em; padding: 1em 1em 0 0; line-height: 1.5em; }

#dkey ul.couplets ul { /* a couplet */ margin: 0em; padding-bottom: 0em; /* override browser default */ padding-left: 2%; /* indent of each level of couplet */ }

#dkey ul.couplets li { /* holds a lead and any <ul> beneath it */ display: block; position: relative; }

#dkey .lead { /* green box */ border-radius: 1.5em; margin: 0em 0em 1em 0em; border: 6px solid #d9dbb1; padding: 1em 1em 1em 1.5em; background-color: #d9dbb1; }
#dkey .lead.original-choice:before, #dkey .lead.alt-choice:before { display: block; position: absolute; right: -118px; height: 45px; width: 110px; content: " "; }
#dkey .lead.original-choice:before { background: url(/static/images/layout/original-choice.png); }
#dkey .lead.alt-choice:before { background: url(/static/images/layout/alternate-choice.png); }

#dkey .lead:after { /* "clear" the float for the button */ display: block; content: " "; height: 0px; clear: both; }

#dkey .letter { /* "1a." or "12b." or whatever */ font-weight: bold; padding-right: 0.5em; }

#dkey .button-block { /* contains what-lies-beneath and button */ float: right; margin: 0em 0em 0.4em 1.2em; text-align: right; }

#dkey a.what-lies-beneath { /* message that sits above the button */ display: inline-block; /* other styles inherited from a.what-lies-beneath rule above */ }

#dkey a.button { display: inline-block; margin-top: 6px; }

#dkey a.figure-link { /* clickable figure numbers: [Fig. 3] */ color: #27610a; text-decoration: underline; font-weight: bold; }

#dkey ul.couplets .chosen { border-color: #7abe58; }

#dkey ul.active > li > .lead, #dkey ul:target > li > .lead { background-color: #bedc8f; border-color: #bedc8f; }

#dkey .couplets .gloss { color: #27610a; cursor: pointer; }

#dkey a.show-all-button { display: inline-block; font-weight: normal; text-transform: uppercase; }

#dkey .image-type-selector { display: none; /* once images are loaded, our JS will un-hide */ max-width: none; }

#dkey div.taxon-images { margin-left: 0.75em; text-align: center; }
#dkey div.taxon-images figure { display: inline-block; margin: 0 1em 1em 0; width: 160px; vertical-align: top; }
#dkey div.taxon-images img { display: block; margin-bottom: 0.4em; border: 4px solid black; width: 160px; height: 149px; }
#dkey div.taxon-images a { font-size: 81.25%; text-decoration: none; }
#dkey div.taxon-images a:hover { text-decoration: underline; }

/* Begin media queries styles for Dichotomous Key. */
/* Portrait-orientation styles */
/* Landscape-orientation styles */
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { #dkey .offer-help-aside { float: none; text-align: center; }
  #dkey p.figure { float: none; display: block; margin: 1em auto; }
  #dkey a.what-lies-beneath { text-decoration: underline; } }
/* These styles apply to smartphones and tablets */
/* End media queries styles for Dichotomous Key */
/* Search results */
body.search-results h1 + p { margin-top: 12px; }

#search-results-list { margin: 1.6em 0; padding: 6px 0 0; }
#search-results-list .highlighted { font-weight: bold; }

#search-results-list li { list-style-type: none; margin: 0 0 2px; padding: 2px 0; }

#search-results-list img { float: left; margin: 0 10px 0 0; vertical-align: middle; }

#search-results-list a { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; }

#search-results-list h2 { display: inline-block; font-weight: normal; margin: -0.05em 0 0.2em; }

#search-results-list p { line-height: 140%; margin-left: 34px; margin-top: 2px; }

.search-navigation { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 15px; text-align: center; }
.search-navigation ul { display: inline; }
.search-navigation li { display: inline; margin: 0 2px; }

/* Begin media queries styles for Search results. */
/* Portrait-orientation styles */
/* Landscape-orientation styles */
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { .search-navigation { font-size: 18px; line-height: 200%; text-align: center; } }
/* These styles apply to smartphones and tablets */
/* End media queries styles for Search results */
/* Help section */
/* styles for all Help-section pages */
.help #main > ul, .help #main > div > ul { padding-left: 18px; padding-right: 5px; }

/* styles for individual pages */
/* About */
#about #main h2 { clear: both; }
#about #main img { float: right; margin: 5px 0 20px 20px; }
#about #main img.bookcover { margin: -5px 89px 10px 20px; }

/* Updates */
#updates #main ul { line-height: 140%; list-style-type: none; margin-bottom: 1rem; margin-top: 1rem; padding: 0; }
#updates #main ul ul { margin: 0.5rem 0 0.5rem 1rem; }
#updates h1 + nav { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 1rem; margin: 1rem 0; }
#updates h2 { margin-top: 1.5rem; }
#updates hr { background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); border: 0; height: 1px; margin: 1rem 0; }
#updates .ref { font-size: 11px; margin-left: 2rem; }

@media print { #updates #sidebar { display: none; }
  #updates #main { padding-left: 0; width: auto; } }
/* Getting Started */
#getting-started h2 { line-height: 185%; margin-top: 0; padding-top: 0; }
#getting-started .question { padding: 18px 0 18px 45px; background-position: left 22px; background-repeat: no-repeat; border-bottom: 1px solid #e2dfcb; }
#getting-started .first.question { margin: 11px 0 0 0; border-top: 1px solid #e2dfcb; background-image: url(/static/images/icons/1.png); }
#getting-started .second.question { background-image: url(/static/images/icons/2.png); }
#getting-started .third.question { background-image: url(/static/images/icons/3.png); }
#getting-started .fourth.question { background-image: url(/static/images/icons/4.png); }
#getting-started .fifth.question { background-image: url(/static/images/icons/5.png); }
#getting-started .sixth.question { margin: 0 0 11px 0; background-image: url(/static/images/icons/6.png); }
#getting-started a.screenshot { float: right; margin: 0 0 0 15px; color: #1a2e11; text-align: center; }
#getting-started a.screenshot:hover { text-decoration: none; }
#getting-started a.screenshot img { margin: 10px 0; vertical-align: middle; }
#getting-started a.screenshot img.screenshot-thumb { border: 5px solid #fff; box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.3); display: block; margin: 0; }
#getting-started a.onward-btn { float: right; width: 240px; margin: 10px 0; }
#getting-started .video-topic { height: 147px; margin-bottom: 4px; width: 196px; }
#getting-started .video-topic img { height: 147px; width: 196px; }
#getting-started .video-topic a { cursor: pointer; }

/* Advanced Map to Groups */
#advanced-map h2 { clear: left; padding-top: 8px; }
#advanced-map #plant-map-list { margin: 10px 0; }
#advanced-map #plant-map-list + h2 { padding-top: 48px; }
#advanced-map #group-section { height: 200px; }
#advanced-map .plant-group { cursor: default; float: left; height: 185px; margin: 0 10px 10px 0; padding: 2px 0 0; position: relative; width: 110px; }
#advanced-map .plant-group.last { margin: 0 0 10px 0; }
#advanced-map .plant-group:hover .frame { border-color: #1a2e12; }
#advanced-map .plant-group:hover h2 { background: #1a2e12; color: #fff; }
#advanced-map .plant-group.active h2 { background: #1a2e12; color: #fff; }
#advanced-map .plant-group.active .frame { border-color: #1a2e12; }
#advanced-map .plant-group h2 { bottom: 146px; color: #27610a; font-size: 12px; font-weight: 400; line-height: 120%; margin: 0 0 0 0; padding: 6px 0 6px 5px; position: absolute; width: 105px; }
#advanced-map .plant-group .image { position: absolute; top: 40px; }
#advanced-map .plant-group .frame { border: 5px solid rgba(255, 255, 255, 0.8); height: 91px; position: absolute; top: 0; width: 100px; z-index: 100; }
#advanced-map .plant-group .img-container { box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.6); height: 101px; margin-bottom: 6px; overflow: hidden; width: 110px; }
#advanced-map .plant-subgroup { cursor: default; float: left; height: 264px; margin: 0 11px 11px 0; padding: 17px 0 0 0; width: 160px; }
#advanced-map .plant-subgroup.last { margin-right: 0; }
#advanced-map .plant-subgroup .image { position: relative; }
#advanced-map .plant-subgroup .frame { border: 5px solid #1a2e12; height: 129px; position: absolute; top: 0; width: 150px; z-index: 100; }
#advanced-map .plant-subgroup h3 { background: #1a2e12; color: #fff; font-size: 12px; height: 50px; line-height: 120%; margin: 0 0 0 0; padding: 6px; }
#advanced-map .plant-subgroup .img-container { height: 139px; overflow: hidden; width: 160px; }
#advanced-map p.video { background: url(/static/images/icons/icon3.png) left 4px no-repeat transparent; margin: 2px 0; padding: 3px 0 0 22px; }
#advanced-map p.list { background: url(/static/images/icons/icon1.png) left 4px no-repeat transparent; margin: 2px 0 0; padding: 3px 0 0 22px; }

/* Glossary */
#glossary #alphabet { font-family: Verdana, sans-serif; height: 33px; list-style-type: none; margin: 7px 0; padding: 0; width: 712px; /* 2px wider than its parent box so no wrap in Moz */ }
#glossary #alphabet li { border-left: 1px solid #e1e1dc; float: left; font-size: 18px; margin: 0; padding: 0 7px; }
#glossary #alphabet li:first-child { border-left: 0; }
#glossary #alphabet li.inactive { color: #ccc; }
#glossary #alphabet li .current a { color: #000; }
#glossary #alphabet li .current a:hover { text-decoration: none; }
#glossary #terms { background-color: #fff; border: 1px solid #e1e1dc; clear: left; margin: 0 0 24px 0; width: 710px; }
#glossary #terms dt, #glossary #terms dd { border-top: 1px solid #e1e1dc; min-height: 24px; }
#glossary #terms dt { clear: left; float: left; line-height: 27px; padding: 7px 10px 0 38px; width: 190px; }
#glossary #terms dt:first-child, #glossary #terms dt:first-child + dd { border-top: 0; }
#glossary #terms dt a { border-bottom: 0; float: left; margin-left: -34px; }
#glossary #terms dd { margin-left: 224px; padding: 13px; }
#glossary #terms img { padding-left: 4px; padding-top: 1px; }

/* "Advanced ID Tools" page */
#advanced-id #main .dk-landing-section { float: left; font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; height: 410px; padding-left: 20px; position: relative; width: 328px; }
#advanced-id #main .dk-landing-section:first-of-type { border-right: 1px solid #b4d57f; padding-left: 0; padding-right: 10px; }
#advanced-id #main .dk-landing-section h2 { font-size: 18px; line-height: 20px; }
#advanced-id #main .dk-landing-section section { margin: 10px 0 0; }
#advanced-id #main .dk-landing-section section p { margin: 10px 0; }
#advanced-id #main .dk-landing-section section ul { line-height: 16px; list-style-type: disc; margin: 10px 0; padding: 0 0 0 15px; }
#advanced-id #main .dk-landing-section section ul li { margin: 10px 0; }
#advanced-id #main .dk-landing-section > a { bottom: 0; margin: 0 0 0 20px; position: absolute; width: 235px; }

/* System Requirements */
#system-requirements #main .desktop { float: left; padding: 10px 25px 10px 0; width: 160px; }
#system-requirements #main .tablet { float: left; padding: 12px 10px 48px 20px; width: 70px; }
#system-requirements #main .smartphone { float: left; padding: 12px 40px 83px 15px; vertical-align: top; width: 30px; }

/* Video Help Topics */
#video .video-topic { display: flex; flex-direction: column-reverse; float: left; height: 16em; margin: 10px 16px 10px 0; position: relative; width: 220px; }
#video .video-topic h2 { height: 4em; margin: 0; }
#video .video-topic img { height: 137px; width: 220px; }
#video .video-topic > p { color: #554e16; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 16px; line-height: 105%; margin-top: 8px; }
#video .video-topic .missing-image { height: 137px; margin-bottom: 3px; width: 220px; }
#video .video-topic .missing-image p { left: auto; margin: 55px 0; position: absolute; text-align: center; top: auto; white-space: nowrap; width: 100%; }

/* Contributors */
#contributors #main ul { list-style-type: none; padding-left: 0; }
#contributors #main li { margin: 0; }

/* Species List */
#list .content { padding-bottom: 18px; }
#list .content h1 { padding-bottom: 12px; }
#list .content table { width: 100%; }
#list .content table th { text-align: center; vertical-align: bottom; }
#list .content table th.name { width: 16%; }
#list .content table th.common { width: 13%; }
#list .content table th.family { width: 13%; }
#list .content table th.dist { width: 12%; }
#list .content table th.native { width: 9%; }
#list .content table th.wetland { width: 5%; }
#list .content table th.group { width: 12%; }
#list .content table th.subgroup { width: 20%; }

/* Legal notification pages */
.legal #main p + p, .legal #main p + ul { margin-top: 8px; }
.legal #main ol.terms { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; list-style-type: upper-roman; margin-top: 0; }
.legal #main ol.terms > li { font-size: 1.6em; /* h2 font size, for roman numerals */ }
.legal #main ol.terms > li > h2 { font-size: inherit; }
.legal #main ol.terms > li > h3 { font-size: initial; }
.legal #main ol.terms ul { list-style-type: disc; }
.legal #main ol.terms li p, .legal #main ol.terms li li { font-family: Verdana, Geneva, "Lucida Sans Unicode", sans-serif; font-size: 12px; }
.legal #main ol.terms li li { line-height: 20px; }
.legal #main ol.terms li li li { margin-left: 26px; }

/* Begin media queries styles for the Help section. */
/* Portrait-orientation styles */
@media only screen and (max-width: 400px) { #about #main > img { width: 57%; }
  #about #main img.bookcover { width: auto; }
  #advanced-map #group-section { height: 600px; }
  #glossary #alphabet { height: 99px; } }
/* Landscape-orientation styles */
@media only screen and (min-width: 401px) and (max-width: 600px) { #advanced-map #group-section { height: 400px; }
  #glossary #alphabet { height: 66px; } }
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { #sidebar { margin-bottom: 12px; }
  #about #main ul { margin-left: 8px; padding-left: 6px; }
  #about #main > img, #about #main img.bookcover { margin-bottom: 8px; margin-left: 8px; margin-right: 0; }
  #getting-started .question { padding: 16px 0 18px 38px; }
  #getting-started .question h2 { line-height: 130%; margin: 2px 0 4px; }
  #getting-started .question p { margin: 0; }
  #getting-started a.screenshot img.screenshot-thumb { margin: 10px 0 0; }
  #getting-started a.onward-btn { float: none; margin: 0 auto 20px; }
  #advanced-map #plant-map-list { margin-left: 8px; margin-right: 8px; margin-top: 0; }
  #advanced-map .plant-subgroup { padding: 36px 0 0; }
  #glossary #alphabet { line-height: 250%; width: auto; }
  #glossary #alphabet li { border: 0; padding: 1px 10px; }
  #glossary #terms { width: auto; }
  #glossary #terms img { padding-left: 2px; }
  #glossary #terms dt { border-top: 0; clear: none; float: none; font-weight: bold; padding-bottom: 0; width: auto; }
  #glossary #terms dd { border-top: 0; margin: 0; padding: 0 5px 10px 39px; }
  #system-requirements #main .desktop { padding: 10px 20px 10px 5px; width: 80px; }
  #system-requirements #main .tablet { padding: 12px 8px 14px 10px; width: 35px; }
  #system-requirements #main .smartphone { padding: 12px 28px 31px 7px; width: 15px; }
  #video .video-topic { margin-right: 12px; }
  #video .video-topic > p { font-size: 14px; }
  #video .missing-image p { margin-left: 0; margin-right: 0; } }
/* These styles apply to smartphones and tablets */
@media only screen and (max-width: 1024px) { /* Disable hover states on Advanced Map to Groups page. */
  #advanced-map .plant-group:hover .frame { border: 5px solid rgba(255, 255, 255, 0.8); }
  #advanced-map .plant-group:hover h2 { background: inherit; color: #27610a; }
  .legal #main ol.terms { font-size: 18px; padding-left: 32px; } }
/* End media queries styles for the Help section */
.modal-wrap { border: 5px solid rgba(255, 255, 255, 0.5); border-radius: 5px; }

.modal-wrap .inner { background: #fff; padding: 0 0 20px 0; }
.modal-wrap .inner h4.heading, .modal-wrap .inner h3.heading { margin: 0; padding: 24px 0 0 1.5em; }
.modal-wrap .inner h4.heading { font-size: 18px; }
.modal-wrap .inner h3.heading { margin-left: 305px; }
.modal-wrap .inner p { font-size: 12px; margin: 0; padding: 4px 20px 0; }

.modal-wrap #choices { padding: 10px 20px 0 20px; }
.modal-wrap #choices ul { list-style-type: none; }
.modal-wrap #choices li { margin: 0 0 14px; }

.modal-wrap #plant-details { padding: 10px 10px 0 60px; }

.modal-wrap .list-item { border-top: none; margin: 0 0 0 0; padding: 0 0 0 0; }
.modal-wrap .list-item h4 { color: #7a6f1f; }
.modal-wrap .list-item p { padding: 0 0 7px 0; }
.modal-wrap .list-item .details { float: left; margin: 0 0 0 10px; width: 560px; }

.modal-wrap .img-gallery { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; margin-top: 14px; }

.modal-wrap a.go-to-species-page { margin: 2em 0 0; width: 170px; }

/* Additional styles and overrides for partner sites */
#home.partner-site header.partner-site .container { position: relative; }
#home.partner-site header.partner-site h1 { width: 260px; }
#home.partner-site header.partner-site .site-name { float: none; font-size: 22px; left: 178px; position: absolute; top: 60px; }
#home.partner-site header.partner-site .site-name i { color: #fff; font-size: 16px; }
#home.partner-site header.partner-site nav li.home a { padding: 5px 8px 0; /* consistent padding in 'separated' area */ }
#home.partner-site .three-col { background: none; height: 10px; }

header.partner-site .go-botany, header.partner-site .go-botany a { width: 170px; }
header.partner-site .site-name { color: #27610a; float: left; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 14px; position: relative; top: 45px; width: 650px; }
header.partner-site .site-name b { margin-right: 10px; }
header.partner-site .site-name a { padding-left: 10px; text-decoration: none; }
header.partner-site nav li a { padding: 5px 32px 0; /* fewer sections, more horizontal padding */ }

/* Begin media queries styles for partner site customizations */
/* Portrait-orientation styles */
/* Landscape-orientation styles */
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { #home.partner-site header.partner-site h1 { background-position: -58px -17px; height: 56px; margin-left: 0; width: 200px; }
  #home.partner-site header.partner-site .site-name { font-size: 14px; left: 43px; top: 36px; width: 200px; }
  #home.partner-site .three-col { height: 0; margin-bottom: 0; }
  header.partner-site .container { position: relative; }
  header.partner-site .site-name { float: none; font-size: 12px; left: 66px; line-height: 12px; position: absolute; top: 42px; width: 150px; }
  header.partner-site .site-name b { margin-right: 0; }
  header.partner-site .site-name i { display: none; }
  header.partner-site .go-botany a { background-position: left -9px; }
  /* Show full-size sections button for now (search is omitted) */
  header.partner-site nav > a { width: 80px; }
  header.partner-site nav > a span { display: inline; font-size: 14px; line-height: 160%; padding-left: 23px; position: absolute; } }
/* Begin media queries styles for partner site customizations */
/* Finally, include global media queries for smartphones and tablets. These should be last. */
/* Begin global media queries styles.  So far there are three sections for smartphones (two fixed-width layouts to cover portrait and landscape orientations, with a section common to both orientations) and some additional styles for tablets. Using fixed-width layouts allows some pages to have a wider central content area for now. Various SASS "partials" (_home.scss, _help.scss, etc.) have their own media queries arranged like the ones below. Think of those as modular extensions to these. */
/* Portrait-orientation styles */
@media only screen and (max-width: 400px) { body, header .container, .content .container { width: 320px; }
  body { padding-top: 110px; }
  header #search form { width: 220px; }
  header nav #search input { width: 192px; }
  #nav { left: 40px; width: 310px; }
  .content #main { width: 304px; }
  .content #sidebar { float: none; }
  .footer__container { width: 320px; } }
/* Landscape-orientation styles */
@media only screen and (min-width: 401px) and (max-width: 600px) { html { -webkit-text-size-adjust: none; }
  body { padding-top: 75px; }
  body, header .container, .content .container { width: 480px; }
  .content #main { width: 464px; }
  .footer__container { width: 480px; } }
/* These styles are common to both smartphone widths */
@media only screen and (max-width: 600px) { body { margin: 0 auto; padding: 0; }
  body#home .id img { width: auto; }
  body#home header nav #search-suggest .menu { top: 83px; }
  #breadcrumb { font-size: 0.87em; }
  #breadcrumb li { display: inline-block; height: 32px; list-style-type: none; margin: 0 2px 0 0; }
  #breadcrumb .label, #breadcrumb .this-page { display: none; /* Hide 'You are Here' and current page title */ }
  #breadcrumb a { display: inline-block; padding: 6px 0; -webkit-tap-highlight-color: transparent; }
  #breadcrumb a:hover { text-decoration: none; }
  #breadcrumb a:active { background: #27610a; color: #fff; }
  h1 { font-size: 18px; margin: 6px 0; }
  h2 { font-size: 16px; }
  h3 { font-size: 14px; }
  header nav { background: #21555c; border-radius: 0; clear: left; height: 32px; padding: 0; }
  header nav > a { background: #437829; border: 1px solid #437829; border-radius: 0.3em; display: inline-block; font-size: 1.2em; margin: 0 0.5em; padding: 0.2em 1em; }
  header nav #search { margin-left: 0.5em; margin-right: 0.5em; }
  header nav > ul { display: none; /* will use bottom navigation instead of top */ }
  header nav #search-suggest .menu { top: 83px; }
  header p.go-botany { margin: 0; padding: 0.7em 0 0.4em 8px; width: auto; }
  header p.go-botany a { background-size: 100px 42px; width: 100px; }
  header p.go-botany img { width: auto; }
  header p.go-botany .tagline { bottom: 0.5em; display: block; font-size: 0.9em; left: 11em; line-height: 1.3; margin: 0; padding: 0; }
  header .container { padding: 0; }
  .content { padding: 0; }
  .content .container { padding: 0; }
  .content #main { background: none; float: none; min-height: inherit; padding-bottom: 14px; padding-left: 0; margin-left: 8px; margin-right: 8px; }
  .content #main .smallscreen-anchor-nav { display: block; padding: 8px 0 16px; }
  .content #main .smallscreen-anchor-nav a { font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 14px; padding: 8px 0; text-decoration: underline; }
  .content #sidebar { background: #fff; border: 1px solid #c3d941; clear: left; height: auto; margin-left: 8px; margin-right: 8px; }
  .content #sidebar .section { padding-bottom: 16px; }
  .footer { box-shadow: none; height: auto; margin: 14px 0 0; }
  .footer__container { display: block; height: auto; padding: 0; }
  .footer__site-name { margin-left: 14px; }
  .footer__publisher, .footer__navigation { margin: 0; padding: 0; width: auto; }
  .footer__publisher { margin: 14px 0 0 6px; padding: 12px 8px 10px; }
  .footer__navigation { padding-left: 0; }
  .footer__navigation-list-item { display: block; margin: 0 0 1px 0; }
  .footer__navigation-list--primary .footer__navigation-list-item a { background: #21555c; color: #fff; display: block; font-family: "Trebuchet MS", Helvetica, Arial, "Lucida Sans Unicode", sans-serif; font-size: 14px; padding: 14px 14px; position: relative; text-decoration: none; }
  .footer__navigation-list--primary .footer__navigation-list-item a[href] { color: #fff; }
  .footer__navigation-list--primary .footer__navigation-list-item a[href]:after { border-color: #ccc; border-style: solid; border-width: 3px 3px 0 0; content: " \a0"; display: inline-block; height: 6px; position: absolute; right: 14px; top: 16px; vertical-align: middle; width: 6px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  .footer__navigation-list-item::after { content: none; }
  .footer__navigation-list--secondary { display: inline-block; margin-top: 12px; text-align: center; width: 100%; }
  .footer__navigation-list--secondary .footer__navigation-list-item { display: inline; font-size: 11px; line-height: 14px; margin: 0 0.5em; }
  .footer__navigation-list--secondary .footer__navigation-list-item:after { content: none; }
  .footer__support { height: 63px; margin: 14px 1em 0; padding: 0; width: auto; }
  .footer__nsf-logo { margin: 0.5em 1em; padding-bottom: 6px; }
  .footer__nsf-note { padding-right: 12px; padding-top: 4px; }
  /* Footer navigation: current section, page */
  body#home .footer__navigation-list-item.home a { background-color: #85c446; color: #000; }
  body#home .footer__navigation-list-item.home a::after { border-color: #666; }
  body.simple .footer__navigation-list-item.simple a { background-color: #85c446; color: #000; }
  body.simple .footer__navigation-list-item.simple a::after { border-color: #666; }
  body.plantshare .footer__navigation-list-item.plantshare a { background-color: #85c446; color: #000; }
  body.plantshare .footer__navigation-list-item.plantshare a::after { border-color: #666; }
  body.full .footer__navigation-list-item.full a { background-color: #85c446; color: #000; }
  body.full .footer__navigation-list-item.full a::after { border-color: #666; }
  body.dkey .footer__navigation-list-item.dkey a { background-color: #85c446; color: #000; }
  body.dkey .footer__navigation-list-item.dkey a::after { border-color: #666; }
  body.teaching .footer__navigation-list-item.teaching a { background-color: #85c446; color: #000; }
  body.teaching .footer__navigation-list-item.teaching a::after { border-color: #666; }
  body.help .footer__navigation-list-item.help a { background-color: #85c446; color: #000; }
  body.help .footer__navigation-list-item.help a::after { border-color: #666; }
  .gb-tooltip { width: 200px; }
  #sb-overlay { /* Fix: make the Shadowbox overlay cover the entire background on small screens in iOS. */ height: 120%; }
  #sb-wrapper { /* Move the Shadowbox image as far as possible to the top of the screen on small screens, so there is room for the navigation controls at bottom. */ margin-top: -55px; } }
/* These styles apply to smartphones and tablets */
@media only screen and (max-width: 1024px) { table { border-collapse: collapse; } }
/* End global media queries styles */
/* Please do not add new regular styles after the media queries, or they may not get overridden properly. Instead, add them before the media queries. */