html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
header, nav, section, article, aside, footer, main { display:block; }

body { font-family: "Lora", serif; font-size: 20px; line-height: 145%; color: #404040; font-weight: 300; text-rendering: optimizeLegibility; hyphens: auto;}
h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 1em 0; font-weight: 300; line-height: 125%;}
h1 { font-size: 2.5em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
p { margin: 1em 0; }
em { font-style: italic;}
strong, th, dt { font-weight: 700;}
ul, ol { margin: 1em 0em 1em 1.5em;}
ul li { list-style-type: disc;}
ol li { list-style-type: decimal;}
blockquote { margin: 2em;}
blockquote cite { color: #8f8f8f;}
blockquote cite:before { content: '—';}
td, th { padding: 0.4em; font-size: 0.85em;}
.table { width: 100%; }
.table td, .table th { border-bottom: 1px solid #ebebeb;}
dd { margin: 1em 1.5em;}
figcaption { text-align: center; font-style: italic; font-size: 0.8em;}

.main { width: 960px; margin: auto;}
article header { text-align: center;}
article header h2 { font-size: 2.5em; margin-top: 0.75em;}
footer { text-align: center; margin-top: 3em; font-size: 0.85em;}
nav ul { margin: 0;}
nav li { display: inline-block; list-style-type: none;}

.post h2 { margin-bottom: 0.5em; }
.post aside { color: #8f8f8f; margin-bottom: 2.5em; font-size: 0.85em; }

.archive h3 { margin: 0.5em 0; padding:0 0 0 40px; white-space: nowrap; }
.archive .bali { background:url('/img/Indonesia.png') center left no-repeat; }
.archive .australia, .archive .tasmania { background:url('/img/Australia.png') center left no-repeat; }
.archive .new-zealand { background:url('/img/New-Zealand.png') center left no-repeat; }
.archive .vietnam { background:url('/img/Vietnam.png') center left no-repeat; }
.archive .new-caledonia { background:url('/img/New-Caledonia.png') center left no-repeat; }
.archive .samoa { background:url('/img/Samoa.png') center left no-repeat; }
.archive .czech-republic { background:url('/img/Czech-Republic.png') center left no-repeat; }
.archive .other { background:url('/img/backpack.png') center left no-repeat; }
.archive ul { margin-top: 1em; margin-bottom: 2em; }
.archive h3 span { font-size: 0.8em; }
.archive .hidden { display: none; }
.older aside, .archive aside { color: #8f8f8f; font-size: 0.85em; margin-bottom: 0.5em;}

.listing h2 { font-size: 2em; margin-bottom: 0.5em;}
.listing aside { color: #8f8f8f; font-size: 0.85em; margin-bottom: 1.5em; }
.listing a.image { border: none; }

.map #map-canvas, .map #leaflet-map { width: 960px; height: 540px; margin: auto;}
.gpx footer { padding: 0.5em 0; margin: 0 auto; width: 960px; }
.gpx table { margin: 0 auto; }
.gpx thead tr:first-of-type { background: none; }
.gpx tr:nth-of-type(odd) { background: #eee; }

.content { width: 640px; margin: auto; }
article footer { width: 800px; margin: 2em auto 2em; }

.main > header { text-align: center; color: #d3d3d3;}
.main > header h1 { font-size: 1em; margin: 0.5em 0 0.25em 0; }
.main > header nav { font-size: 0.85em; }

a, a:visited { color: #3c6dbc; text-decoration: underline; }
a:hover { text-decoration: none; }
.main > header a, .main > header a:visited { text-decoration: none; color: #d3d3d3;}
.main > header a:hover { color: #8f8f8f; border-color: #8f8f8f; }
.listing h2 a, .listing h2 a:visited { text-decoration: none; color: #404040; }
.listing h2 a:hover { text-decoration: underline; }

.clearfix, section, footer, .main, header { *zoom: 1; }
.clearfix:before, .clearfix:after, section:before, section:after, footer:before, footer:after, header:before, header:after { display: table; line-height: 0; content: "";}
.clearfix:after, section:after, footer:after, header:after { clear: both;}

.youtube { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.cardboard { background: url("/img/cardboard.jpg") center left no-repeat; }

.gallery.spotlight-group { padding-left: 0; max-width: 100%; justify-content: center; display: grid;  grid-gap: 5px; grid-auto-flow: row dense; grid-template-columns: repeat(auto-fit, 200px); grid-auto-rows: 200px; }
.gallery.spotlight-group li { list-style: none; padding: 0; }

@media screen and (max-width: 640px) {
  main, header, footer { margin-left: 0.5em; margin-right: 0.5em; }
  .main, article footer, .content, .map #map-canvas, .map #leaflet-map, .gpx footer { width: 100%; }
  .map #map-canvas, .map #leaflet-map { height: 270px; }
  .leaflet-top.leaflet-right {display: none; }
  main { font-size: 0.85em; }
  article img { width: 100%; height: auto; }

  .gpx table, .gpx thead, .gpx tbody, .gpx tfoot, .gpx th, .gpx td, .gpx tr { display: block; }
  .gpx thead tr { position: absolute; top: -9999px; left: -9999px; }
  .gpx td { border: none; position: relative; padding-left: 50%; }
  .gpx td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }

  .gpx td:nth-of-type(1):before { content: "Description"; }
  .gpx td:nth-of-type(2):before { content: "Distance (km)"; }
  .gpx td:nth-of-type(3):before { content: "Moving duration"; }
  .gpx td:nth-of-type(4):before { content: "Average speed (km/h)"; }
  .gpx td:nth-of-type(5):before { content: "Elevation gain (m)"; }
  .gpx td:nth-of-type(6):before { content: "Elevation loss (m)"; }

  .newsletter-signup input[type="email"] { width: 80%; }
}

@media screen and (min-width: 641px) and (max-width: 960px) {
  main, header, footer { margin-left: 0.5em; margin-right: 0.5em; }
  .main, article footer, .map #map-canvas, .map #leaflet-map, .gpx footer { width: 100%; }
  article img { width: 100%; height: auto; }
}