/* $Header: /home/whb/www/glialtri/RCS/music.css,v 1.1 2023/05/04 21:47:04 whb Exp $ */

body {
 background: #E0E0E0;
 color: #333;
 font: 80% "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
 margin: 0; 
 padding: 0;
}
hr { border: none; border-top: 1px solid #DDDDDD; margin: 4px 0; }

div.title {
 position: absolute; top: 8px; left: 0; right: 0;
 overflow: hidden;
 white-space: nowrap;
 margin: 8px 0 0 0;
 padding: 0 0 0 8px;
 font: 32pt Rockwell,Arvo,Times-Roman,Courier,serif;
 text-shadow: 1px 1px white;
 background: #CCC url(img/glialtri-1500.png) left bottom;
 height: 1.2em;
}

div.nav {
 float: left;
 width: 6.2em;	/* = info_outer.margin, scaled for our font size */
 margin: 0; padding: 80px 0.5em 0 0; /* padding-top moves it below .title */
 font: 14pt Rockwell,Arvo,Times-Roman,Courier,serif; color: #444;
 text-align: right;
}
div.nav div { margin-bottom: 1.5ex; }

div.info_outer {
 background: #CCCCCC url(img/glialtri-1500bg.png);
 margin: 0 0 0 10em;	/* margin-left ∝ nav.width */
 padding: 80px 0 1em 0;
}
div.info {
 margin: 0 0 10px 20px; padding: 0.5ex 1em;
 background: #EDEDED;
 border: 1px solid #888;
 overflow: auto;
 max-width: 66em;
 min-width: 228px;	/* (img: 192px) + (2x margin-left (estimated)) */
 box-sizing: border-box;
}
div.info h1 {
 font: 166% Rockwell,Times-Roman,Courier,serif; color: #444;
 margin-top: 0; margin-bottom: 0.1ex;
}

/* flip - with no webkit or other prefixes! */
div.toon {
 transform: scale(1,-1);
 transition: 1s ease;
}
div.toon:hover {
 transform: scale(1,1);
}

div.foot {
 float: left;
 text-align: right; font-size: 75%;
 margin: 0 0 0 13.3em;	/* left = info_outer.margin, scaled for our font size */
}
div.foot p { margin-top: 0; }

/* @media screen and (hover: none) FAILS on my phone! */
/*OLD: @media screen and (max-width: 500px) */
@media screen and (pointer: coarse) {
  /* Move div.nav (default: along left side) to under the title-bar */
  div.nav {
   float: left; width: 100%; height: 2.4ex;
   margin: 8ex 0 2px 4px; padding: 2ex 0 2px 4px;
   font: inherit; font-weight: bold; color: #444;
   background: #E0E0E0;	/* = body */
   text-align: left;
  }
  div.nav div { display: inline; margin-bottom: 0; }
  div.info_outer {
   display: block;
   margin-left: 4px; margin-top: 0;
   padding-top: 14ex;
  }
  /* max-width shows up in Landscape mode */
  div.info { margin: 0 4px 0.8ex 4px; width: auto; max-width: 38em; }
  /* leave img.cvr alone */
  /* leave div.foot alone */
}