/* Older mobiles (iPhone 5 or early Androids */
@media only screen and (max-width:375px) { 
 body { font-family:sans-serif; font-size:12; }
 .cut  { display:none; }  /* for content we want to lose entirely */
 h1,span.nudge  { font-size:1.1em; } 
  p { margin-bottom:0.1em; margin-top:-20em; line-height:1.4em; }
  .jumps > li > a { padding:14px 0 0 40px; margin:-7px 0 0 -20px; opacity:0.7; }
}

/* Modern portrait mobile eg iPhone 6/7/8 or most Androids */
/* This should have comfortable space for the notes under the picture */
@media only screen and (min-width:375px) and (max-width:500px) { 
 body { font-family:sans-serif; font-size:14; }
 .cut  { display:none; }  /* for content we want to lose entirely */
 h1,span.nudge  { font-size:1.2em; } 
 p { margin-bottom:0.2em; margin-top:-16em; line-height:1.4em; }
 .jumps > li > a { padding:20px 0 0 40px; margin:-10px 0 0 -20px; opacity:0.4;}
}

/* Tablet or landscape mobile (use most of the available width) */
@media only screen and (min-width:500px) and (max-width:768px) { 
 body   { font-family:serif; font-size:15; }
 h1,span.nudge  { font-size:1.2em; } 
 p { margin-bottom:0.2em; margin-top:-4.5em; line-height:1.3em; }
 .jumps > li > a { padding:20px 0 0 40px; margin:-10px 0 0 -20px; opacity:0.3;}
}

/* Desktop assuming decent monitor */
@media only screen and (min-width:768px) { 
 body { font-family:Cambria,Palatino,"Book Antiqua",serif; }
 span.hdr,span.nudge { font-size:1.6em; }
 span.hdr { font-weight:bold; }

 p { margin-bottom:0.5em; margin-top:-4.5em; line-height:1.3em; }
 .jumps > li > a { padding:40px 0 0 100px; margin:-20px 0 0 -50px; opacity:0.3;}
}

/*********************************************/
/* Styles for all devices from here down ... */
/*********************************************/

*     { margin:0; padding:0; box-sizing:border-box; }  /* recommended reset */
body  { color:#F0F0F0; background-color:#040808; margin-top:0.4em; margin-left:2%; margin-right:2%; }
.hide { display:none; } 

div.galley { width:100%; height:90%; overflow:hidden; margin-bottom:5em; max-width:1460; } /* else some links fall off the bottom! */
p  { font-size:1em; }

span.nudge { text-align:right; color:#FFC; cursor:hand; }
span.nudge:hover { color:#97D838; }

img.preload { width:0; height:0; }    /* Old-school trick to get next page ready in advance */
img.aerial { position:absolute; top:0; left:0; }

/* Jumps done with fancy li tags now for better phone use */
.jumps > li     { position:absolute; list-style-type:none; }
.jumps > li > a { display:inline-block; 
                  border-radius:15px; border:3px solid yellow; background:Gray; }
                  
.jumps > li > a:hover { background:ForestGreen; border:3px solid orange; opacity:0.6; }

 a:visited { color:#FFC; }
 a         { color:#FFC; text-decoration:none; }
 a:hover   { color:#97D838; }