ÿþ/*

  Author: Bert Bos <bert@w3.org> (Adapted from work by Hakon Wium Lie)

  Created: 17 August 1999

  Version: $Revision: 1.9 $



  The following section creates a set of partially overlapping

  headlines in different colors and font families. Negative

  margin values must be set on block-level elements to have an

  effect - in this document P elements are used and the selectors

  are named '#p*'.



  The source will look like this:



    <DIV CLASS="map">

      <P ID="p1"><A HREF="...">...</A></P>

      <P ID="p2"><A HREF="...">...</A></P>

      <P ID="p3"><A HREF="...">...</A></P>

      ...

    </DIV>



  The following works more or less, but see map.css for a better way.



*/



/* DIV.map {margin: 140px -7% 4em 0; clear: both} */

DIV.map {margin: 2em -6em 4em 0; padding: 0; clear: both}



#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {white-space: nowrap}

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {text-indent: 0}

#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {text-decoration: none}



#p1, #p1 A {color: #DDD; font: 100px/20px "Impact", sans-serif}

#p2, #p2 A {color: #000; font: italic 40px/20px "Georgia", serif}

#p3, #p3 A {color: #080; font: 40px/20px "Verdana", sans-serif}

#p4, #p4 A {color: #37F; font: bold 40px/20px "Courier New", "Courier", monospace}

#p5, #p5 A {color: #F73; font: bold 100px/20px "Verdana", sans-serif}

#p6, #p6 A {color: #22A; font: bold 25px/20px "Verdana", sans-serif}

#p7, #p7 A {color: #088; font: italic 80px/20px "Verdana", sans-serif}

#p8, #p8 A {color: #088; font: italic 20px/20px "Verdana", sans-serif}

#p9, #p9 A {color: #088; font: italic 20px/20px "Verdana", sans-serif}

#p10, #p10 A {color: #F73; font: bold 60px/20px "Verdana", sans-serif}



#p1 {text-align: right;  margin: 0 0 0 0}	/* top right */

#p2 {text-align: left;   margin: 50px 0 0 5%}	/* top left */

#p3 {text-align: center; margin: 110px 0 0 0}	/* center */

#p4 {text-align: right;  margin: 35px 0 0 0}	/* center right */

#p5 {text-align: left;   margin: 120px 0 0 0}	/* center left */

#p6 {text-align: center; margin: 100px 0 0 0}	/* bottom center */

#p7 {text-align: right;  margin: 60px 0 0 0}	/* bottom right */

#p8 {text-align: left;   margin: -10px 0 0 3%}	/* bottom left */

#p9 {text-align: right;  margin: 0px 0 0 0}	/* bottom right */

#p10 {text-align: left;   margin: 10px 0 0 0}	/* center left */