10.10) { $ma = -16; $mah = -14; $cpl = 0; $cpt = -6; $cf = 1; } else { $ma = 2; $mah = 2; $cpl = 1; $cpt = 1; $cf = 0.1; $tt = 'font-size: 1.5em;'; // this gives the illusion of magnifying the text but without the scaling } break; case "Firefox 3.x": $ext = "-moz-"; $ma = -16; $mah = -14; $cpl = 0; $cpt = -6; $cf = 1; break; case "Safari": $ext = "-webkit-"; $ma = -16; $mah = -14; $cpl = 0; $cpt = -6; $cf = 1; break; case "Google Chrome": $ext = "-webkit-"; $ma = -16; $mah = -14; $cpl = 0; $cpt = -6; $cf = 1; break; default: $ma = 2; $mah = 2; $cpl = 1; $cpt = 1; $cf = 0.8; } echo '/*'. $bro .', '.$ver.'*/'."\n"; ?> body {font: 100% "freesans", sans-serif; margin: 0; padding: 1ex;} h1 {width: 8em; position: absolute; left: 23em; text-align: right;} body>p {position: absolute; top: 29em; left: 48em; width: 14em; text-align: justify;} /* scale the containing div so that ALL the spaces between the section divs are scaled properly */ #content { position: absolute; left: em; top: em; font-size: em; padding: 1ex; transform:scale(0.8);} /* the handy ^= selector: definitely saves on repeated lines here */ div[id^="section"] { float: left; width: 18em; margin: 1ex ex 1ex 1ex; transition: all 0.6s; transform:scale(0.4); transform-origin: left top} div[id^="section"]:hover, div[id^="section"]:focus {transform:scale(0.6); transform-origin: left top; margin: 1ex ex 1ex 1ex; width:18em; transition: all 0.6s; } /* I found that if you do not declare properties in exactly the same way, transitions and transforms have a mard. So... */ div:target {width: 18em; margin: 1ex 8ex 1ex 1ex;transform:scale(1.1); transform-origin: left top; } div:target:hover, div:target:focus {width: 18em; margin: 1ex 8ex 1ex 1ex;transform:scale(1.1); transform-origin: left top; } /* for non-Javascript users, I added a page number at the top of each section */ h2.num {text-align: center; font-size: 0.7em;margin-bottom: 0.3ex} .c1 {background-color: #000; color: #fff; transition: all 1s} .c1 a:link, .c1 a:visited {color: yellow;} .c2 {background-color: yellow; color: #000; transition: all 1s} .c2 a:link, .c2 a:visited {color: green;} .c3 {background-color: green; color: #fff; transition: all 1s} .c3 a:link, .c3 a:visited {color: yellow;} .c4 {background-color: #ddd; color: #000; transition: all 1s} .c4 a:link, .c4 a:visited {color: green;}