<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Who's On Top?</title>
<link rel="stylesheet" href="genstyle.css" type="text/css">
<style>
/*
* This page uses the z-index property and the hover
* pseudo-class to modify the z-index. That's what brings the
* frames forward when you point at them. As such, the top
* specs must be successive more negative to make each frame
* move back through the space used (but not occupied) by the
* preceding frames.
*/
/* To use absolute position, need a positioned wrapper. */
div.qholder { position: relative; }
/* This style applies to all the quote <div>'s. */
div.qholder > div { height: 11em; width: 23em; text-align: center;
border: 3pt solid rgb(0%,33%,0%); position: absolute;
font-size: 150%; padding-top: 30pt;
padding: 25pt 10pt 10pt 10pt }
/* These give the position of each of the frames. The z-index
* propery is used to specify the stacking order. Z-index
* increases forward toward you from the page. */
div.d1 { left: 7em; z-index: 1; background-color: rgb(67%,73%,100%) }
div.d2 { left: 13em; top: 2em; z-index: 2; background-color: rgb(53%,100%,93%) }
div.d3 { left: 2.5em; top: 8em; z-index: 5; background-color: rgb(100%,60%,60%) }
div.d4 { left: 6em; top: 12em; z-index: 3; background-color: rgb(73%, 93%, 100%) }
div.d5 { left: 12em; top: 10em; z-index: 1; background-color: rgb(60%,67%,80%) }
div.d6 { left: 1em; top: 5em; z-index: 10; background-color: rgb(100%,67%,47%) }
div.d7 { left: 4em; top: 3em; z-index: 4; background-color: rgb(60%,100%,60%) }
/* This styles the attribution. */
div.name { text-align: right; margin-right: 20pt; margin-top: 20pt;
font-size: 80%; font-style: italic;}
/* This changes the z-index of the frame when the mouse moves over it. */
div.qholder div:hover { z-index: 40; position: relative; }
</style>
</head>
<body>
<h1>Who's On Top?</h1>
<div class="qholder">
<div class="d1">The reports of my death are greatly exaggerated.
<div class="name">Mark Twain</div>
</div>
<div class="d2">I think there is a world market for maybe
five computers
<div class="name">Attributed to Thomas Watson<br>
(Watson founded IBM.<br>Unfortunately, he<br>probably never<br>
said this.)
</div>
</div>
<div class="d3">640K should be enough for anyone.
<div class="name">Attributed to Bill Gates<br>
(There is very little evidence<br>he actually said it,
but<br>I wish he had.)
</div>
</div>
<div class="d4">No matter how cynical I get, I just can't keep up.
<div class="name"> Nora Ephron </div>
</div>
<div class="d5">History is more or less bunk. …
We want to live in the present …
<div class="name"> Henry Ford</div>
</div>
<div class="d6">I might be in the basement.
I'll go upstairs and check.
<div class="name"> M C Escher</div>
</div>
<div class="d7">Fairy tales do not tell children the dragons
exist.
Children already know that dragons exist.
Fairy tales tell children the dragons can be killed.
<div class="name"> G K Chesterton</div>
</div>
</div>
</body>
</html>