/* $Header: /home/whb/www/thistime/RCS/thistime.css,v 1.1 2019/10/22 21:44:42 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;
 margin: 8px 0 0 0;
 padding: 0 0 0 8px;
 font: 32pt Rockwell,Times-Roman,Courier,serif;
 text-shadow: 1px 1px white;
 background: #CCC url(img/ThisTime-1500s.png) left top no-repeat;
 height: 1.2em;
}

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

div.info_outer {
 background: #CCCCCC url(img/thistime-282.png);
 margin: 0 0 0 10em;	/* margin-left ∝ nav.width */
 padding: 80px 0 1em 0;
}
div.info {
 margin: 0 20px 10px 20px; padding: 0.5ex 1em;
 background: #EDEDED;
 border: 1px solid #888;
 overflow: auto;
 max-width: 66em;
}
div.info h1 {
 font: 166% Rockwell,Times-Roman,Courier,serif bold; color: #444;
 margin-top: 0; margin-bottom: 0.1ex;
}

div.toon {
 /* the "slim" grey part ensure the wide grey part */
 background: linear-gradient(to right, black, 2%, #EDEDED, 10%, #EDEDED);
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 transition: 2s ease;
}
div.toon:hover {
 background: black;
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
/* Doesn't work: div.toon.a:hover { background: #00F; } */
/* Doesn't work: div.toon.a { text-decoration: underline; } */

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; }