/*
  Author: Bert Bos <bert@w3.org> (Adapted from work by Håkon Wium Lie)
  Created: 17 August 1999
  Version: $Revision: 1.13 $

  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>

  This works by setting an offset from the bottom of the link area.
  The height of the line plus the bottom margin are equal to the top margin,
  so the line doesn't contribute to the height of its parent in any way.
*/
div.example { border: #F0A dotted; padding: 0.5em; margin: 1em 2em; z-index: 100; }

div.example-map {			/* Reserve some room for the links */ 
    z-index: 100;
    padding-top: 200px;
    padding-bottom: 1px;
    margin-left: -2em;
    margin-right: -2em;
    /* width: 100%; */
    margin-bottom: 4em;
    margin-top: 5em;
    clear: both;
    text-shadow: 0.2em 0.2em /* 0.2em */ silver;
  }
DIV.map {			/* Reserve some room for the links */ 
  z-index: 100;
  padding-top: 180px;
  padding-bottom: 1px;
  margin-left: -4%;
  margin-right: -6em;
  /* width: 100%; */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver;
}

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10, #p11{
  display: block; white-space: nowrap; text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A, #p11 A {
  text-decoration: none}

#p1, #p1 A {color: #FF0; font: 60px/1 "Impact", "Helvetica Narrow", sans-serif}
#p2, #p2 A {color: #A0A; font: italic 70px/1 "Georgia", serif}
#p3, #p3 A {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A {color: #37F; font: bold 50px/1 "Courier New", "Courier", monospace}
#p5, #p5 A {color: #F73; font: bold 45px/1 "Verdana", sans-serif}
#p6, #p6 A {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A {color: #088; font: italic 40px/1 "Verdana", sans-serif}
#p8, #p8 A {color: #606; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A {color: #FC0; font: italic 30px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #8C0; font: bold 30px/1 "Verdana", sans-serif}
#p11, #p11 A {color: #8C0; font: bold 30px/1 "Verdana", sans-serif}


#p1 {text-align: left;  margin: -220px 0 160px 0}	     /* top right */
#p2 {text-align: center;   margin: -250px 5% 180px 5%}	   /* top  */
#p3 {text-align: right;  margin: -200px 15% 160px 10%}	    /* top left */
#p4 {text-align: left;  margin: -160px 0 110px 15%}	      /* center right */
#p5 {text-align: center;   margin: -120px 0 75px 0}	     /* center left */
#p6 {text-align: right;   margin: -150px 10% 125px 0}	    /* bottom center */
#p7 {text-align: left;  margin: -85px 0 45px 5%}		      /* bottom right */
#p8 {text-align: center;   margin: -50px 0 30px 0}	     /* bottom left */
#p9 {text-align: right;  margin: -40px 20% 0px 0}		      /* bottom right */
#p10 {text-align: left;  margin: -120px 0 90px 0}	     /* center left */
#p11 {text-align: left;  margin: -100px 0 70px 0}	     /* center left */