/* HEADER AND NAVIGATION */

#navigation-right {
float: right;
text-align: right;
display: none;
}
#navigation-left {
text-align:left;
}


/* LAYOUT TABLE

   The homepage is the only page laid out with a table. Table cells hold
   their columns however narrow the screen gets, so on a phone the photo
   fills the width and the text is pushed out of sight. Stacking the
   cells into blocks fixes it.

   Scoped to .layout on purpose: travels/projects and travels/gear use
   tables for real tabular data, and those must keep their columns. */

/* Direct children only. A descendant selector here would also catch any
   table nested inside the layout table - the day plan on a ride page -
   and collapse its rows into a single stacked column. */
.layout, .layout > tbody, .layout > tbody > tr, .layout > tbody > tr > td {
display: block;
width: auto;
}
.layout > tbody > tr > td {
margin-bottom: 30px;
}
.layout .column1, .layout .column2, .layout .column3 {
margin-left: 0;
margin-right: 0;
}
/* the portrait carries align=left, which floats it. At this width that
   leaves a gutter too narrow to read, so let it sit on its own line.
   Scoped to column1 so floated images elsewhere keep their float. */
.layout .column1 img {
float: none;
}


/* DAY PLAN TABLE

   Six columns of real data - day, date, route, distance, highlights,
   night stay - which will not fit a phone. Squeezing them to ~55px each
   wraps place names mid-word. So the table keeps its shape and scrolls
   inside itself instead, and the page never scrolls sideways. */

.tablescroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 20px 0;
}
.tablescroll .dayplan {
min-width: 620px;
margin-bottom: 4px;
}
.dayplan th, .dayplan td {
padding-right: 14px;
}
.dayplan th:last-child, .dayplan td:last-child {
padding-right: 0;
}


/* BODY AND FOOTER */

.wrapper {
margin: 20px 10px;
}
.footer {
margin: 20px 10px;
color: #aaa;
}
.map{
margin: 0px 0px 30px 0px;
float: left;
}
.highlights{
margin: 0px 10px 30px 0px;
}
.mobile-break{
clear: both;
}


/*  PHOTOGRAPHS */

.pics       {
max-width: 300px;
margin: 5px 0px 5px 0px; 
}
.thumbnails {
width: 300px;
margin: 5px 0px 5px 0px; 
}
.polopics {
margin: 0px 0px 5px 0px;
}


/* TILES */

.tile, .daytile, .instatile, .polotile {
margin-bottom: 20px;
}



/* FACEBOOK LIKE */

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