/* Some ::first-letter Experiments
(c) 2005 Tom W.M. */

.example {
 padding: 1em;
 border: 1px solid lightgrey;
}
.example :hover::first-letter,
.example :hover .first-letter {
 background-color: #ddd;
}

/* example 1 */
#firstletter-ex1-ex p {
 text-indent: 0; /* Firefox does this automatically, but Opera and IE don't */
}
#firstletter-ex1-ex p::first-letter {
 line-height: 1;
 float: left;
 font-size: 3em;
 padding-right: .1em;
}

/* example 2 */
#firstletter-ex2-ex {
 padding-left: 4em; /* add a margin to put the letter in */
}
#firstletter-ex2-ex p {
 text-indent: 0;
}
#firstletter-ex2-ex p::first-letter {
 line-height: 1;
 display: block; /* this doesn't work */
 float: left;
 font-size: 3em;
 width: 1em; /* this doesn't work (at least in Firefox 1.06), whatever the value */
 margin-left: -1em; /* pull it into the margin */
 text-align: right; /* this doesn't work */
}

/* example 3 */
#firstletter-ex3-ex {
 padding-left: 4em; /* add a margin to put the letter in */
}
#firstletter-ex3-ex p {
 text-indent: 0;
}
#firstletter-ex3-ex p span.first-letter {
 display: block; /* this is implied by setting float:left, but IE doesn't actually apply it by default */
 line-height: 1;
 float: left;
 font-size: 3em;
 line-height: 1.2;
 width: 1em; /* IE doesn't seem to respect this */
 margin-left: -1.1em; /* pull it into the margin */
 padding-right: .1em; /* push it away from the text just a little */
 text-align: right;
}

/* example 4 */
#firstletter-ex4-ex p {
 text-indent: 0;
}
#firstletter-ex4-ex p span.first-letter {
 font-family: Times,"Times New Roman", serif;
 display: block;
 float: left;
 line-height: 70px;
 font-size: 50px;
 margin-top: .2em;
 margin-right: .1em;
 background-image: url(lettercontainer.png);
 background-repeat: no-repeat;
 background-position: top left;
 width: 70px;
 height: 70px;
 text-align: center;
}

/* example 5 */
#firstletter-ex5-ex p {
 text-indent: 50%;
 margin-top: 4em; /* because the first letter below has no line-height, but lots of actual height, the paragraph needs to be pushed down.  Strangely, setting this to the font-size of the first letter doesn't work.  Perhaps this is because I change fonts. */
}
#firstletter-ex5-ex p::first-letter {
 font-family: Times,"Times New Roman", serif;
 font-size: 7em;
 margin-left: -.35em;
 line-height: 0; /* prevents the large letter from messing up the line-height--line-height of 1 doesn't work for large font sizes */
}