/*
Club style sheet.

If you want to see immediate
effects of changes to this,
you have to past it into
page_template.php and remove
the href="/style.css" reference
that pulls in the normal file.
*/
@charset "UTF-8";

@font-face {
  font-family: Quantification;
  src: local(Quantification),
      url(/Quantification.woff2) format( "woff2" ),
      url(/Quantification.ttf) format( "truetype" );
      font-display: swap;
}

/* Fontawesome css */
@font-face {
  font-family: FontAwesome;
  src: local(FontAwesome),
      url(/fontawesome.woff2) format( "woff2" ),
      url(/fontawesome.ttf ) format( "truetype" );
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: white;
  --element-text: white;
  --element-color: #E25728;
  --element-hover: #f7812d;
  --element-active: #f7812d;
  --element-light: #ff7f00;
  --element-background: #F9E7C2;
  --element-wash: #fffdd1;
  --element-separator: lightgray;

  --base-primary: #2e55a5;
  --base-secondary: #ff6d2d;
 
  --element-label: #2e55a5;
  --element-rule: #E25728;
  
  --element-alt-color: #2e55a5;
  --element-alt-hover: #4073db;
  --element-alt-active: #2e55a5;
  --element-alt-separator:silver;
  
  --element-internal: gainsboro;
  --element-expired: lightgray;
  --element-accent: #950027;
  --element-warnback: magenta;
  --element-warnfore: white;

  --element-ride-head-color: #0038a8;
  --element-ride-head-bkcolor: #F9F793;
  --element-ride-title-color: #F7F5BB;
  --element-ride-title-bkcolor: #3A996E;

  --button-radius: 5px;
}

body {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: clamp(8px, 2vw, 20px);
  padding-right: clamp(8px, 2vw, 20px);
  background-color: var(--background);
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.3em;
  color: black;
  -webkit-text-size-adjust: none;
  accent-color: var(--element-label);
}

li::marker {
  color: var(--element-label);
  font-size: 1.3em;
  line-height: 0;
}

hr.rulethin {
  height: 1px;
  border: none;
  color: var(--element-rule);
  background-color: var(--element-rule);
} 

hr.rulethick {
  height: 2px;
  border: none;
  color: var(--element-rule);
  background-color: var(--element-rule);
} 

h1, .h1 {
  display: block;
  margin: 0.67em 0 0.67em 0;
  color: var(--base-primary);
  font-size: 22px;
  line-height: 24px;
  font-weight: bold;
}

h2, .h2 {
  display: block;
  color: var(--base-primary);
  padding: 2px 6px 1px 0px;
  margin: 0 0 .2em 0;
  font-size: 20px;
  line-height: 22px;
  font-weight: bold;
}

h3, .h3 {
  display: block;
  color: var(--base-primary);
  padding: 2px 6px 1px 0px;
  margin: 0 0 .2em 0;
  font-size: 18px;
  line-height: 20px;
  font-weight: bold;
}

h4, .h4 {
  display: block;
  color: var(--base-primary);
  padding: 2px 4px 1px 0px;
  margin: 0 0 .2em 0;
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
}

h5, .h5 {
  display: block;
  color: var(--base-primary);
  padding: 2px 4px 1px 0px;
  margin: 0 0 .2em 0;
  font-size: 14px;
  font-weight: bold;
}

a:link, a:visited {
  color: var(--base-primary);
  text-decoration: none;
}
a:hover {
  color: #406CBE;
  text-decoration: underline;
}

.storybutton {
  color: var(--base-primary);
  border-color: var(--base-primary);
  border-style: solid;
  border-width: 1px;
  padding: 3px 6px 2px 6px;
  margin: 0 0 .5em 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--button-radius);
  -webkit-border-radius: var(--button-radius);
}

.keeptogether {
  white-space: nowrap;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-fw { /* Very useful to design list. */
  width: 1.28571429em;
  text-align: center;
}

button, button:link, button:visited {
  display: inline-block;
  outline: none;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  line-height: normal;
  margin: 2px 2px 2px 2px;
  padding: .5em 2em .55em;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--button-radius);
  -webkit-border-radius: var(--button-radius);
}

.buttonbase, a.buttonbase:link, a.buttonbase:visited {
  display: inline-block;
  outline: none;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: normal;
  margin: 2px 2px 2px 2px;
  padding: .5em 2em .55em;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--button-radius);
  -webkit-border-radius: var(--button-radius);
}

.buttonbase:active, a.buttonbase:active {
  position: relative;
  top: 1px;
}

.buttonbase:hover a.buttoncolor:link, a.buttoncolor:visited {
  text-decoration: none;
}

.buttoncolor, a.buttoncolor:link, a.buttoncolor:visited {
  border: none;
  color: white;
  background-color: var(--element-color);
}
.buttoncolor:hover, a.buttoncolor:hover {
  border: none;
  color: white;
  background-color: var(--element-hover);
}
.buttoncolor:active, a.buttoncolor:active {
  position: relative;
  top: 1px;
}

.buttondark, a.buttondark:link, a.buttondark:visited {
  border: none;
  color: white;
  background-color: #B5001B;
}
.buttondark:hover, a.buttondark:hover {
  border: none;
  color: white;
  background-color: #D70021;
}
.buttondark:active, a.buttondark:active {
  position: relative;
  top: 1px;
}

.buttonlight, a.buttonlight:link, a.buttonlight:visited {
  border: none;
  color: black;
  background-color: gainsboro;
}
.buttonlight:hover, a.buttonlight:hover {
  border: none;
  color: black;
  background-color: lightgray;
}

.buttonspecial, a.buttonspecial:link, a.buttonspecial:visited {
  border: none;
  color: white;
  background-color: var(--element-ride-title-bkcolor);
}
.buttonspecial:hover, a.buttonspecial:hover {
  border: none;
  color: white;
  background-color: #46b985;
}
.buttonspecial:active, a.buttonspecial:active {
  border: none;
  color: white;
  background-color: Gray;
}
.buttonspecial:active, a.buttonspecial:active {
  position: relative;
  top: 1px;
}

.buttonbig, a.buttonbig:link, a.buttonbig:visited {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: normal;
  margin: 2px 2px 2px 2px;
  padding: .5em 2em .55em;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--button-radius);
  -webkit-border-radius: var(--button-radius);
}

.buttonmedium, a.buttonmedium:link, a.buttonmedium:visited {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: normal;
  margin: 2px 2px 2px 2px;
  padding: .5em 2em .55em;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--button-radius);
  -webkit-border-radius: var(--button-radius);
}

.buttonschedule {
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height: normal;
  padding: .4em 1.0em .45em;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--button-radius);
  -webkit-border-radius: var(--button-radius);
}

.buttonsmall, a.buttonsmall:link, a.buttonsmall:visited {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: normal;
  margin: 2px 2px 2px 2px;
  padding: .35em 0.75em .35em 0.75em;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--button-radius);
  -webkit-border-radius: var(--button-radius);
}

.internalmessage {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  color: black;
  background-color: var(--element-internal);
  font-weight: bold;
}

.seriousmessage {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 10px 5px 10px;
  color:white;
  background-color:red;
  font-weight: bold;
}

.warningmessage {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 10px 5px 10px;
  color:var(--element-warnfore);
  background-color:var(--element-warnback);
  font-weight: bold;
}

.infomessage {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 10px 5px 10px;
  color:white;
  background-color:green;
  font-weight: bold;
}

.mediummessage {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 10px 5px 10px;
  color:white;
  background-color:goldenrod;
  font-weight: bold;
}

.boxmessage {
  top: 0;
  border: 2px solid var(--element-color);
  margin: 18px 0 7px 0;
  padding: 29px 7px 7px 7px;
  background-color: var(--element-wash);
  position: relative;
  overflow: hidden;
}

.boxmessage-title {
  top: 0;
  background-color: var(--element-color);
  font-weight: 700;
  color: white;
  padding: 2px 7px 2px 7px;
  position: absolute;
  min-height: 15px;
  white-space: nowrap;
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

form p {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}

.flexform-container {
  min-width: 354px;
  gap:10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.flexform-container > div {
  width: 350px;
  margin: 1px 15px 1px 4px;
  padding: 0px 0px 10px 0px;
  text-align: left;
}

.flexform-item {
  border-bottom: solid 2px var(--element-color);
}

fieldset {
  border: 1px solid var(--element-rule);
  margin-top: 16px;
  padding: 10px;
  width: 90%;
}
legend {
  font-weight: bold;
  font-size: 16px;
  line-height: normal;
  color: var(--element-label);
  padding-top: 0;
}

label {
  font-weight: bold;
  color: var(--element-label);
}

.label {
  font-weight: bold;
  color: var(--element-label);
}

.radiohighlight {
  background-color: var(--element-background);
  display: inline-block;
  margin-right: 0.4em;
  padding-left: 0.2em;
  padding-right: 0.3em;
}

.member-list {
  padding: 2px 6px 1px 0px;
  margin: 0 0 .5em 0;
  font-size: 18px;
}

/* member roster */
div.member-roster-entry {
  border: 1px solid var(--element-ride-head-color);
  position: relative;
  margin-right: 7px;
  margin-bottom: 7px;
}
div.member-roster-entry ul {
  list-style-type: none;
  list-style-image: none;
  padding: 5px 7px;
  margin: 0;
}
div.member-roster-entry ul li.member-name {
  font-weight: bold;
  color: var(--element-ride-head-color);
}
div.member-roster-entry ul li.member-phone {
  position: absolute;
  top: 18px;
  right: 12px;
}
div.member-roster-entry ul li.member-email {
  position: absolute;
  top: 5px;
  right: 12px;
}

.slide {
  border: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

.tablesimple td {
  border: 1px solid black;
}
.tablesimple th {
  border: 1px solid black;
}
.tablesimple table {
  border-collapse: collapse;
  width: 98%;
}

.tablenone {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
}

.StyledHeader {
  position: sticky;
  top: 0px;
  text-align: left;
}

.StyledRowHighlight {
  border: 2px solid black;
}

.StyledRowTotal {
  border: 2px solid black;
}

.StyledTable
{
  margin: 0px;
  padding: 0px;
  width: 100%;
  line-height: 1.3em;
}
.StyledTable table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid gray;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.StyledTable th {
  background-image: linear-gradient(to top, var(--element-color) 5%, var(--element-light) 100%);
  border: 1px solid gray;
  padding: 2px 4px 2px 4px;
  font-weight: bold;
  color: var(--element-text);
}

.StyledTable tr:nth-child(odd) {
  background-color: var(--element-background);
}
.StyledTable tr:nth-child(even)
{
  background-color: white;
}
.StyledTable td 
{
  border: 1px solid gray;
  padding: 2px 4px 2px 4px;
}

.flex-event-title {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.flex-event-title > div {
  justify-content: center;
}

/* Ride schedule */

.tooltiptext {
  font-size: 12px;
  font-weight: normal;
  visibility: hidden;
  background-color: rgba(0,0,0,.70);
  color: #fff;
  text-align: center;
  padding: 5px 5px 5px 5px;
  border-radius: 6px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  word-wrap: break-word;
  overflow: visible;
  overflow-wrap: break-word;
 
  position: absolute;
  z-index: 2;
}
  
.tooltip {
   position: relative;
}
.tooltip::before {
  font-size: 12px;
  font-weight: normal;
  visibility: hidden;
  background-color: rgba(0,0,0,.70);
  color: #fff;
  text-align: center;
  padding: 5px 5px 5px 5px;
  border-radius: 6px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  word-wrap: break-word;
  overflow: visible;
  overflow-wrap: break-word;
 
  position: absolute;
  z-index: 2;
}
.tooltip:hover::before {
   display: block;
}

.ride-tag {
  color: var(--element-ride-head-color);
  font-weight: bold;
  line-height: normal;
  border-style: solid;
  border-color: var(--element-ride-head-color);
  border-width: 1px 1px 1px 1px;
  margin: 2px 6px 2px 0;
  padding: 2px 6px 2px 6px;
  display: inline-block;
  outline: none;
  text-align: center;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  white-space: nowrap;
}
.ride-tag:hover, span.ride-tag:hover .tooltiptext {
  visibility: visible;
}

.buttondetail, a.buttondetail:link, a.buttondetail:visited {
  color: var(--element-ride-head-color);
  font-weight: bold;
  line-height: normal;
  background-color: #e0ebff;
  border-style: solid;
  border-color: var(--element-ride-head-color);
  border-width: 1px 1px 1px 1px;
  margin: 2px 6px 2px 0;
  padding: 2px 6px 2px 6px;
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  white-space: nowrap;
}
.buttondetail:hover, a.buttondetail:hover {
  color: var(--element-ride-head-color);
  background-color: #b3cdff;
}
.buttondetail:hover, a.buttondetail:hover .tooltiptext {
  visibility: visible;
}
.buttondetail:active, a.buttondetail:active {
  color: var(--element-ride-head-color);
  position: relative;
  top: 1px;
}

.ride-empty {
  position: relative;
  border: 2px solid #132046;
  margin-bottom: 7px;
  font-weight: bold;
  background-color: #e3e3e3;
  padding: 10px 5px 10px 5px;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

div.ride-date-bar {
  z-index:1;
  margin: 2px 0 -2px 0;
  padding: 2px 0px 0px 0px;
  background-color: var(--background);
  border-bottom: 2px solid #132046;
  position: sticky;
  top: 0px;
}

span.ride-date-date {
  z-index: 1;
  font-size: 16px;
  font-weight: bold;
  margin: -1px 0 0 0;
  padding: 0 25px 1px 10px;
  clear: left;
  border-color: #132046;
  border-style: solid;
  border-width: 2px 2px 0 2px;
  background-color: #F9BF36;
}

section.ride-post {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.25em;
  border: 2px solid #132046;
  margin-bottom: 7px;
  padding-bottom: 4px;
  position: relative;
  overflow: hidden;
}
section.ride-post ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
section.ride-post ul li {
  margin: 0;
  padding: 0;
}

section.ride-post ul li.ride-bar {
  color: var(--element-ride-head-color);
  background-color: var(--element-ride-head-bkcolor);
  padding: 0 10px;
  height: 30px;
  position: relative;
  border-width: 0 0 12px 0;
  border-bottom-style: solid;
  border-bottom-color: var(--element-accent);
  margin: 0 0 2px 0;
}
  
section.ride-post ul li.ride-start {
  font-weight: bold;
  padding: 3px 3px 3px 3px;
  top: 0px;
  left: 0px;
  width: 84px;
  height: 34px;
  text-align: center;
  position: absolute;
  margin: 0 0 2px 0;
  border-width: 0 0 1px 0;
  border-bottom-style: solid;
  border-bottom-color: var(--element-accent);
}
  
.ride-start-default {
  color: var(--element-ride-head-color);
  background-color: var(--element-ride-head-bkcolor);
}

.ride-start:hover .tooltiptext {
  visibility: visible;
}

.ride-start-recent {
  color: var(--element-ride-head-color);
  background:
     linear-gradient(to left,
         rgba(249,247,147,0) 0%,
         rgba(249,247,147,0) calc(50% - 2px),
         #fcba1c 100%, /* change to 50% to get a line. */
         rgba(249,247,147,0) calc(50% + 2px),
         rgba(249,247,147,0) 100%);
  background-color: var(--element-ride-head-bkcolor) ;
}

.ride-start-riding {
  color: var(--element-ride-title-color);
  background-color: var(--element-ride-title-bkcolor);
}

.ride-start-cancel1 {
  color: var(--element-ride-head-color);
  background:
       linear-gradient(to top right,
           rgba(249,247,147,0) 0%,
           rgba(249,247,147,0) calc(50% - 2px),
           red 100%, /* change to 50% to get a line. */
           rgba(249,247,147,0) calc(50% + 2px),
           rgba(249,247,147,0) 100%);
  background-color: var(--element-ride-head-bkcolor);
}

.ride-start-cancel2 {
  color: var(--element-ride-title-color);
  background:
       linear-gradient(to top right,
           rgba(249,247,147,0) 0%,
           rgba(249,247,147,0) calc(50% - 2px),
           red 100%, /* change to 50% to get a line. */
           rgba(249,247,147,0) calc(50% + 2px),
           rgba(249,247,147,0) 100%);
  background-color: var(--element-ride-title-bkcolor);
}

.ride-start-cancel3 {
  color: var(--element-ride-head-color);
  background:
       linear-gradient(to bottom left,
           rgba(249,247,147,0) 0%,
           rgba(249,247,147,0) calc(50% - 2px),
           red 100%, /* change to 50% to get a line. */
           rgba(249,247,147,0) calc(50% + 2px),
           rgba(249,247,147,0) 100%);
  background-color: var(--element-ride-head-bkcolor);
}

.ride-start-waitlist {
  color: var(--element-ride-title-color);
  background:
       linear-gradient(to top right,
           rgba(249,247,147,0) 0%,
           rgba(249,247,147,0) calc(50% - 2px),
           #474747 100%, /* change to 50% to get a line. */
           rgba(249,247,147,0) calc(50% + 2px),
           rgba(249,247,147,0) 100%);
  background-color: var(--element-ride-title-bkcolor);
}

section.ride-post ul li.ride-cat {
  font-size: 18px;
  font-weight: bold;
  color:var(--element-ride-head-bkcolor) ;
  background-color: #4164CB;
  padding: 2px 0px 2px 2px;
  top: 0px;
  left: 90px;
  width: 30px;
  height: 38px;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
  position: absolute;
}
.ride-cat:hover .tooltiptext {
  visibility: visible;
}

section.ride-post ul li.ride-miles {
  font-weight: bold;
  color: var(--element-ride-head-bkcolor) ;
  background-color: #4164CB;
  margin: 0 0 0 0;
  padding: 2px 4px 2px 0px;
  top: 0px;
  left: 120px;
  width: 40px;
  height: 38px;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  white-space: nowrap;
}

.ride-miles:hover .tooltiptext {
  visibility: visible;
}

section.ride-post ul li.ride-leaders {
  font-weight: normal;
  color: var(--element-ride-head-color);
  background-color: transparent;
  padding: 1px 10px;
  top: 0px;
  left: 164px;
  height: 19px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

li.ride-leaders:hover {
  overflow: visible;
}

.button-leader, a.button-leader:link, a.button-leader:visited {
  color: var(--element-ride-head-color);
  font-weight: bold;
  background-color: var(--element-ride-head-bkcolor);
  border-style: none;
  padding: 0 1px 0 1px;
  margin: 0 2px 0 2px;
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none; 
  border-radius: 0;
  -webkit-border-radius: 0;
  white-space: nowrap;
}
.button-leader:hover, a.button-leader:hover {
  color: var(--element-ride-head-color);
  font-weight: bold;
  background-color: #f7df28;
  border-style: none;
  margin: 0 4px 0 0;
  text-decoration: none;
  white-space: nowrap;
}
.button-leader:hover .tooltiptext {
  visibility: visible;
}
.button-leader:active, a.button-leader:active {
  color: var(--element-ride-head-color);
  font-weight: bold;
  background-color: #f7df28;
  border-style: none;
  margin: 0 4px 0 0;
  text-decoration: none;
  position: relative;
  top: 1px;
  white-space: nowrap;
}

section.ride-post ul li.ride-title {
  font-weight: bold;
  color: var(--element-ride-title-color);
  background-color: var(--element-ride-title-bkcolor);
  margin: 0 0 0 0;
  padding: 3px 10px 0 10px;
  max-width: inherit;
  top: 20px;
  left: 174px;
  height: 19px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

li.ride-title:hover {
  overflow: visible;
}

li.ride-title:hover .tooltiptext {
  visibility: visible;
}
  
section.ride-post div.ride-buttons {
  padding: 3px 5px 0px 5px;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media screen and (max-width:649px) 
{
  .coleadercount
  {
    color: var(--element-ride-head-color);
    font-weight: bold;
    background-color: var(--element-ride-head-bkcolor);
    border-style: none;
    padding: 0 1px 0 1px;
    margin: 0 2px 0 2px;
    text-align: center;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none; 
    border-radius: 0;
    -webkit-border-radius: 0;
    white-space: nowrap;
  }
}
@media screen and (min-width:650px)
{
  .coleadercount
  {
    display: none;
  }
}

@media screen and (max-width:649px)
{
  .coleader1
  {
    display: none;
  }
}  

@media screen and (max-width:749px)
{
  .coleader2
  {
    display: none;
  }
}  

@media screen and (max-width:849px)
{
  .coleader3
  {
    display: none;
  }
}  

section.ride-post div.ride-description {
  padding: 3px 5px 0px 5px;
}

@media screen and (max-width:769px)
{
  .locdetail
  {
    display: none;
  }
}  

/* Newsletter list. */
li.ps-archive-month {
  list-style-type: none;
  color: var(--element-ride-head-color);
  margin: 3px;
  width: 78px;
  height: 33px;
  padding-top: 6px;
  float: left;
  text-align: center;
}
li.is-authorized {
  padding-bottom: 14px;
}
p.newsletter-notice {
  text-align: center;
  font-weight: bold;
}
p.newsletter-notice a {
  padding: 3px 9px;
  border:1px solid #f7e859;
  margin-bottom: 2em;
}
p.newsletter-notice a:link, p.newsletter-notice a:visited {
  background-color: var(--element-ride-head-color);
  color: #f7e859;
  text-decoration: none;
}
p.newsletter-notice a:hover {
  background-color: #5bbf21;
  color: #fffdd1;
  text-decoration: underline;
}

/* End club style. */