/* "Big screen" means, approximately, bigger than a phone */

.column:nth-child(odd) {

    clear: both;

    float: left;

    width: 49%;

}

.column:nth-child(even) {

    float: right;

    width: 49%;

}

li.column {

    margin-bottom: 1em;

}

.left {

    float: left;

    margin-right: 1.5em;

}

.right {

    float: right;

    margin-left: 1.5em;

}

.picture {

    width: 30em;

    max-width: 35%;

    padding: .75em;

}

dl {

    border: 3px double #ccc;

    padding: 0.5em;

}

dt {

    clear: left;

    float: left;

    text-align: center;

    width: 10em;

    margin: 0em 1em 0.5em 0.5em;

    font-weight: bold;

    color: green;

}

dt:after {

    content: ":";

}

dd {

    margin: 0 0 2.5em 11.5em;

}

.small-left {

    float: left;

    height: auto;

}

.small-right {

    float: right;

    height: auto;

}

.medium-right {

    float: right;

    height: auto;

}

img.blog-right {

    float: right;

    padding-left: 1em;

    margin: .25em;

    min-width: 8%;

    max-width: 30%;

    width: auto;

}

#contractpatch-follow {

    float: left;

    width: 30em;

    margin-right: 1.5em;

    /* Below from .shaded, but we don't want the class on non-big screens. */

    padding: .75em;

    background: #F0FFB8;

}

#contractpatch-follow h2 {

    font-size: large;

}

#contractpatch-blog h3:first-child {

    /* Don't let the first blog headline clear below #contractpatch-follow. */

    clear: right;

}

.supporter-form-input {

    margin-bottom: .5em;

}

.supporter-form-input label,

.supporter-form-input .input-group {

    display: inline-block;

    width: 49%;

}

.supporter-form-input label {

    text-align: right;

    padding-right: .3em;

}

.form-error, .supporter-form-input p {

    margin-left: 51%;

}

* { margin: 0; padding: 0; }

img { border: 0; }

body { margin: 0; padding: 0; }

.clear { clear: both; }

.hidden { display: none; }

p, h1, h2, h3, h4, h5, h6, #mainContent ul, #mainContent ol {

  /* margin-top: 1em; */

  margin-bottom: 1em;

}

p {

  line-height: 1.6;

}

html {

  /* Standard colorss. */

  --khaki-green: #587733;

  --light-green: #afe478;

  --washed-green: #daf4be;

  --light-blue: #92d4d1;

  --washed-blue: #ddfbfa;

  --navy: #224c57;

  --orange: #ec6343;

  --orange-dim: #e05340;

  --orange-dimmer: #ce3520;

}

/* 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 {

  /* 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 .1s ease-out;

  font-weight: bold;

}

a:hover { text-decoration: underline; }

/* Missing links */

a, form { position: relative; }

.fixme,

a[href$="#fixme"]:before,

form[action$="#fixme"]:before {

  border: 1px solid var(--orange);

  border-radius: 6px;

  content: '?';

  font-size: 0.6rem;

  color: var(--orange);

  position: absolute;

  top: -4px;

  right: -4px;

  padding: 1px;

  background: yellow;

  /* opacity: 0.8; */

  width: 12px;

  text-align: center;

}

input:focus {

  z-index: 3;

  border-color: #86b7fe;

  box-shadow: 0 0 0 .25rem rgb(236, 99, 67, .5);

};

a.read-more {

    cursor: pointer;

    font-style: italic;

}

.btn-orange {

  color: white;

  background: var(--orange);

  border: 1px solid var(--orange-dim);

}

.btn-orange:hover, .btn-orange:active {

  background: var(--orange-dim);

  text-decoration: none;

  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);

}

.btn-orange:focus {

  box-shadow: 0 0 0 .25rem var(--orange-dim);

}

.btn-white {

  color: var(--orange);

  background: white;

  border: 1px solid #777;

}

.btn-white:hover, .btn-white:active {

  background: #eee;

  text-decoration: none;

  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);

}

.btn-white:focus {

  box-shadow: 0 0 0 .25rem #ddd;

}

a svg {

  transition: all .2s ease;

}

a:hover svg {

  transform: scale(1.1);

}

.toggle-control  {

cursor: pointer;

text-decoration: none; color: #557733;

}

.toggle-control:hover { text-decoration: underline; color: #577632; }

/* FIXME: We should do this:          */

/* http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom */

.donate-sidebar {

  background: var(--light-green) no-repeat;

  position: sticky;

  bottom: 0;

  width: auto;

  padding: 0.5rem 1rem;

  margin: 0 -1rem;

  border-radius: 8px 8px 0 0;

  border: 1px solid #90d468;

}

.donate-sidebar:hover {

  background: #a0d870;

}

p.footnote {

    font-size: 85%;

}

h1 { margin-top: .75em; margin-bottom: .5em; }

h2 { margin-top: .75em; margin-bottom: .5em; }

h3 { margin-top: .6em; margin-bottom: .4em; }

#mainContent ul, #mainContent ol { padding-left: 1.5em; }

.internalNavigate { width: 19%; float: right; }

#mainContent .internalNavigate ul { list-style-type: none; padding-left: 0; }

.internalNavigate ul li { margin-top: .3em; margin-bottom: .3em; }

/* Header */

body > header {

  /* background: linear-gradient(to top right, white, white, var(--washed-blue) 80%); */

  overflow: auto; /* Prevent logo top margin popping out. */

}

#conservancyheader img {

  max-height: 75px;

  width: auto;

}

@media screen and (min-width: 30em) {

  #conservancyheader img {

    max-height: 90px;

  }

}