@@ -5,23 +5,88 @@ body { margin: 0; padding: 0; }
.hidden { display: none; }
p, h1, h2, h3, h4, h5, h6, #mainContent ul, #mainContent ol {
margin-top: 1em;
/* margin-top: 1em; */
margin-bottom: 1em;
}
p {
line-height: 1.6;
html {
/* Standard colorss. */
--khaki-green: #587733;
--light-green: #afe478;
--light-blue: #92d4d1;
--navy: #224c57;
--orange: #ec6343;
--orange-dim: #e05340;
/* Some Tachyons-like classes to apply those standard colors. */
.bg-light-blue { background: var(--light-blue); }
.bg-orange { background: var(--orange); }
.orange { color: var(--orange); }
.b--light-blue { border-color: var(--light-blue); }
.navy { color: var(--navy); }
body {
/* font-family: "Lucida Grande",Verdana,Lucida,Helvetica,Arial,sans-serif; */
font-family: "Lucida Sans Unicode", "Lucida Grande", "Verdana", "FreeSans", sans-serif;
font-size: large;
/* Native font stack as per Bootstrap 5.1. */
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue", Arial,
"Noto Sans",
"Liberation Sans",
sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: .875rem;
color: #333;
a {
text-decoration: none;
color: var(--navy);
transition: all .2s ease;
font-weight: bold;
a:hover { text-decoration: underline; }
a { text-decoration: none; color: #557733; }
a:hover { text-decoration: underline; color: #577632; }
a.read-more {
cursor: pointer;
font-style: italic;
.btn-orange {
color: white;
background: var(--orange);
border: 1px solid var(--orange-dim);
.btn-orange:hover {
background: var(--orange-dim);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
.btn-white {
color: var(--orange);
background: white;
.btn-white:hover {
background: #eee;
a svg {
a:hover svg {
transform: scale(1.1);
.toggle-control {
text-decoration: none; color: #557733;
@@ -49,15 +114,11 @@ p.footnote {
h1 { margin-top: .75em; margin-bottom: .5em; }
h2 { margin-top: .75em; margin-bottom: .5em; }
/* h2 { margin-top: .75em; margin-bottom: .5em; } */
h3 { margin-top: .6em; margin-bottom: .4em; }
#mainContent h1 { border-bottom: 1px solid #00334b; }
#mainContent h2 { border-bottom: 1px solid #aaa; }
#mainContent ul, #mainContent ol { padding-left: 1.5em; }
#mainContent img { margin: 3px; }
.internalNavigate { width: 19%; float: right; }
#mainContent .internalNavigate ul { list-style-type: none; padding-left: 0; }
@@ -66,17 +127,15 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
/* Header */
#conservancyheader {
margin: 0;
/* Leave 0 padding on the right so the header image is clipped by the edge of
* the browser window. */
padding: 10px 0 10px 17px;
max-width: 1140px;
margin: 0 auto;
padding: 10px 0;
/* background-color: #d1ff96; */
/* background-color: #92CC58; */
/* background-color: #BDD8A2; */
/* background-color: #92cc58; */
/* background-color: #b5cd9d; */
background-color: #ffffff;
border-bottom: 1px solid #808080;
text-indent: -5000px; /* hide in favor of image */
#logobutton {
@@ -84,51 +143,31 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
padding: 0;
height: 120px;
width: 100%;
min-width: 350px; /* So at least tree and text is visible */
background: url(/img/conservancy-header.png) no-repeat;
background-size: contain;
/* Navigation bar */
#navbar-outer { background: #577632; }
#navbar { margin-left: 104px; margin-top: 3px; float: left; display: inline; }
#navbar-outer { background: var(--navy); }
#navbar { margin-top: 3px; max-width: 1140px; margin: 0 auto;}
#navbar ul { list-style: none; }
#navbar-clear { clear: both; border-bottom: 1px solid #808080; }
#navbar li.supporter a {
display: block;
background: #fafafe;
padding: .2em .8em;
margin-right: 3px;
border: 1px solid #808080;
font-size: .8em;
background: #ffd843;
background: -moz-linear-gradient(top, #fff, #ffd533);
background: -webkit-linear-gradient(top, #fff, #ffd533);
background: linear-gradient(to bottom, #fff, #ffd533);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffd533', GradientType=0);
border-color: #ffffff;
#navbar-clear { clear: both; }
#navbar li a {
background: #eaf1f1;
background: -moz-linear-gradient(top, #fff, #eaf1f1);
background: -webkit-linear-gradient(top, #fff, #eaf1f1);
background: linear-gradient(to bottom, #fff, #eaf1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaf1f1', GradientType=0);
#navbar li:hover a { background: #577632; color: #fff; }
#navbar li.supporter:hover a { background: #577632; color: #CE1F1F; }
padding: .5em .8em .1em;
margin: 0 3px .1em 0;
border-bottom: 4px solid transparent;
#navbar li:hover a {
border-bottom: 4px solid var(--light-green);
#navbar li { float: left; display: inline; margin-bottom: 3px; }
#mainContent {
margin-left: 50px;
margin-right: 50px;
#sidebar + #mainContent {
float: left;
@@ -390,23 +429,7 @@ body.conservancy-donate #navbar ul li.donate a,
body.conservancy-npoacct #navbar ul li.npoacct a,
body.conservancy-sponsors #navbar ul li.sponsors a /* NO COMMA HERE! */
{
color: #000033;
background: -moz-linear-gradient(bottom, #fff, #eaf1f1);
background: -webkit-linear-gradient(bottom, #fff, #eaf1f1);
background: linear-gradient(to top, #fff, #eaf1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaf1f1', endColorstr='#ffffff', GradientType=0);
body.conservancy-supporter #navbar ul li.supporter a
background: -moz-linear-gradient(bottom, #fff, #ffd533);
background: -webkit-linear-gradient(bottom, #fff, #ffd533);
background: linear-gradient(to top, #fff, #ffd533);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd533', endColorstr='#ffffff', GradientType=0);
#supporters ul {