/*

Author: Jon Tan
Date: 15 Dec 2008
For: 24 Ways http://24ways.org/
Title: A Festive Type Folly (traditional scale)

----------------------------------------*/

#type{
font-size: 16px;
text-align: left;
background: #e8e9de;
border: 0.375em solid #fff;
width: 22.5em;
height: 13.125em;
position: relative;
}

#type h1{
font-family: "Times New Roman", serif;
font-size: 8.25em; /* 132px */
line-height: 1em;
font-weight: 400;
margin: 0;
padding: 0;
}

#type h1 em,
#type h1 strong,
#type h1 span{
line-height: 1em;
font-style: normal;
font-weight: 400;
position: absolute;
padding: 0.1em;
border: 1px solid transparent;
}

/* "24 Ways" positioning */

#type h1 a em{
font-size: 0.727em; /* (2) 96px */
left: 0.667em;
top: 0;
}
#type h1 a em span{
font-size: 1.375em; /* (4) 132px */
left: -0.379em;
top: 0.455em;
}
#type h1 a em span span{
font-size: 0.546em; /* (w) 72px */
font-style: italic;
text-transform: lowercase;
left: 0.806em;
top: 0;
}
#type h1 a em span span span{
font-size: 0.833em; /* (a) 60px */
top: 0.4em;
left: 0.667em;
}
#type h1 a em span span span span{
font-size: 2.2em; /* (y) 132px */
left: 0.091em;
top: -0.439em;
}
#type h1 a em span span span span span{
left: -9999px; /* (s) */
}

/* "to impress your friends" positioning */

#type h1 a strong{
font-size: 0.273em; /* (to) 36px */
font-weight: 400;
left: 3.194em;
top: 0.778em;
}
#type h1 strong span{
font-size: 1.667em; /* (i) 60px */
top: 0.133em;
left: 0.1em;
}
#type h1 strong span span{
font-size: 0.6em; /* (m) 36px */
left: 0.444em;
top: 0.333em;
}
#type h1 strong span span span{
font-size: 0.667em; /* (pre) 24px */
left: 1.25em;
top: 0.667em;
}
#type h1 strong span span span span{
font-size: 3em; /* (s) 72px */
left: 0.333em;
top: -0.361em;
}
#type h1 strong span span span span span{
font-size: 0.333em; /* (s) 24px */
left: 1.25em;
top: 1em;
}
#type h1 strong span span span span span span{
font-size: 1em; /* (your) 24px */
font-style: italic;
left: 0.083em;
top: 0.833em;
}
#type h1 strong span span span span span span span{
font-size: 1.5em; /* (friends) 36px */
left: -1em;
top: 0.5em;
}

/* link style and colours */

#type h1 a:link,
#type h1 a:visited{
text-decoration: none;
}
#type h1 a:focus,
#type h1 a:hover,
#type h1 a:active{
cursor: pointer; /* for IE */
}
#type h1 a:link em,
#type h1 a:visited em{
color: #624;
}
#type h1 a:link em span span,
#type h1 a:visited em span span,
#type h1 a:link strong span span span span,
#type h1 a:visited strong span span span span{
color: #b32720;
}
#type h1 a:link strong,
#type h1 a:visited strong{
color: #c8c9Be;
}
#type h1 a:link strong span,
#type h1 a:visited strong span,
#type h1 a:link strong span span span span span,
#type h1 a:visited strong span span span span span{
color: #474;
}

#type h1 a:focus em,
#type h1 a:hover em,
#type h1 a:active em,
#type h1 a:focus em span span,
#type h1 a:hover em span span,
#type h1 a:active em span span,
#type h1 a:focus strong span span span span,
#type h1 a:hover strong span span span span,
#type h1 a:active strong span span span span{
color: #804;
}
#type h1 a:focus strong,
#type h1 a:hover strong,
#type h1 a:active strong{
color: #b32720;
}
#type h1 a:focus strong span,
#type h1 a:hover strong span,
#type h1 a:active strong span,
#type h1 a:focus strong span span span span span,
#type h1 a:hover strong span span span span span,
#type h1 a:active strong span span span span span{
color: #d07;
}