/* OPEN SANS - self hosted, files in style/fonts/ */

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(./fonts/opensans-roman.woff2) format('woff2');
}

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(./fonts/opensans-roman.woff2) format('woff2');
}

@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(./fonts/opensans-italic.woff2) format('woff2');
}


* {
	margin : 0px;
}

p {
	margin: 12px 0px 12px 0px;
}

html, body {
		height : auto;
		min-height : 100%;
}

body {
		background : #FFF none repeat scroll 0 50%;
		color : #000;
		font-family: 'Open Sans', lucida grande, Verdana, Arial, Tahoma, Helvetica;
		margin : 0px;
		padding : 0px;
		font-size : 14px;
		line-height : 1.6;
		text-align: left;
}

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

.header 
{margin: 10px 10px 20px 10px; }



/* BODY AND FOOTER */

.cover {
margin: 0px 0px 20px 0px
}

.banner {
background-color: #ffffcc;
border-top: 1px solid #ff9900;
border-bottom: 1px solid #ff9900;
padding: 4px;
margin-bottom: 30px;
}

.error {
background-color: #FCE0E0;
border: 1px solid #F0AFAF;
padding: 4px;
}

.info {
background-color: #D1FFD1;
border: 0px solid #579C3B;
padding: 4px;
text-align: center;
}

.tag {
font-size: 9px;
color: #fff; 
background:#eb5055;
padding: 0px 3px;
margin-left: 8px;
}

.container {
margin: 0px;
overflow: auto;
}

/* 2026 type refresh: cap the prose measure on trip pages. The anonymous
   inner div holds the travelogue text; 960px keeps two 450px photos per
   row intact (460+460 incl margins), whatever the body font size.
   Classed divs (tiles, map, highlights) are unaffected. */
.container > div:not([class]) {
max-width: 960px;
}

/* tile field labels (When/Where/Who) recede; values carry the ink */
.tilelabel {
color: #888;
}

.break{
clear:both;
}



/* PHOTOGRAPHS */

.pics, .instapics, .polopics, .thumbnails {
box-shadow: 1px 1px 5px  #ccc;
-webkit-box-shadow: 1px 1px 5px  #ccc;
-moz-box-shadow: 1px 1px 5px  #ccc;
}

.polopics, .instapics {
max-width: 300px;
}

.flags {
max-width: 24px;
}

.flagssmall {
max-width: 16px;
margin-bottom:-4px;
}


.column1, .column2, .column3 {
margin-right: 30px;
text-align:left;
}

/* rides: wider gutter between the two ride columns */
.ridecols .column1 {
margin-right: 60px;
}

.column3 {
margin-left: 30px;
}

.emailcomments {
margin: 40px 0px 40px 0px;
}

.fbcomments {
margin: 40px 0px 40px 0px;
display: none;
}

.copy {
color: #777;
}

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


/* ARCHIVED COMMENTS */

.comment {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom: 1px solid #eee;
max-width: 600px;
}

.commentmeta {
color: #888;
}


/* RIDES */

/* ride page header */

.ridehead {
margin: 0 0 30px 0;
}

.ridetitle {
font-size: 30px;
font-weight: bold;
line-height: 1.2em;
margin: 2px 0 6px 0;
}

.ridemeta {
color: #666;
}

.ridesection, .dayplan th, .eyebrow, .cardkicker {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
}

.iconlabel {
display: inline-block;
width: 12px;
margin-right: 6px;
vertical-align: -2px;
}

/* day by day table */

.dayplan {
width: 100%;
border-collapse: collapse;
margin: 0 0 20px 0;
}

.dayplan th {
text-align: left;
border-bottom: 1px solid #ccc;
padding: 8px 24px 10px 0;
}

.dayplan td {
border-bottom: 1px solid #eee;
padding: 16px 24px 16px 0;
vertical-align: top;
}

.dayplan th:last-child, .dayplan td:last-child {
padding-right: 0;
}

.dayplan .day {
color: #aaa;
white-space: nowrap;
}

.dayplan .date, .dayplan .dist {
color: #666;
white-space: nowrap;
}

.dayplan .notes {
width: 40%;
}

.dayplan .stay {
color: #000;
}


/* thread archive */

.threadhead {
margin: 8px 0 16px 0;
}

/* day-plan table following the archived thread: match the ~40px
   rhythm above the thread head (collapses with .tweetgroup's 32px) */
.tweetgroup + .tablescroll {
margin-top: 40px;
}

.tweetgroup {
margin: 0 0 32px 0;
}

.threadtext {
margin: 0 0 12px 0;
}

.photogrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.threadpic img {
width: 100%;
display: block;
}

.threadmap {
margin: 0 0 4px 0;
}


/* grid index */

.ridehero {
margin: 0 0 50px 0;
}

.eyebrow {
color: #888;
margin: 0 0 6px 0;
}

.herotitle {
font-size: 46px;
font-weight: bold;
line-height: 1.1em;
margin: 0 0 10px 0;
}

.sectionbar {
border-bottom: 1px solid #ccc;
padding: 0 0 8px 0;
margin: 0 0 24px 0;
overflow: auto;
}

.sectioncount {
float: right;
color: #888;
}

.ridegrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px 30px;
margin: 0 0 50px 0;
}

.cardpic {
width: 100%;
display: block;
margin: 0 0 12px 0;
box-shadow: 1px 1px 5px #ccc;
}

.cardkicker {
color: #888;
margin: 0 0 2px 0;
}

.cardmeta {
color: #666;
margin: 2px 0 0 0;
}

.cardline {
margin: 8px 0 0 0;
}


/* HOMEPAGE */

.homehero {
display: flex;
flex-wrap: wrap;
gap: 24px 100px;
align-items: flex-start;
margin: 10px 0 40px 0;
}

.homeintro {
flex: 1 1 480px;
max-width: 560px;
}

.homeportrait {
flex: 0 1 560px;
max-width: 560px;
}

.homeportrait img {
width: 100%;
box-shadow: 1px 1px 5px #ccc;
}

.homelinks {
margin: 30px 0 0 0;
}

.homelinks .cardline {
color: #666;
margin: 0 0 14px 0;
}


/* phone and tablet */

@media (max-width: 767px) {
.ridegrid, .photogrid {
grid-template-columns: 1fr;
}
.herotitle {
font-size: 34px;
}
.ridetitle {
font-size: 26px;
}
}

@media (min-width: 768px) and (max-width: 1023px) {
.ridegrid, .photogrid {
grid-template-columns: repeat(2, 1fr);
}
}