/* This is a variant of the W3C Confetti Menu.  It uses borders instead of outlines on hover.
    Opera does okay with borders. Firefox renders it fine. */

html, body
{
     margin: 0; padding: 0;
     text-align: center;
     font-family: Verdana, Helvetica, Arial, sans-serif;
     height: 100%;
}
body
{
     background: #eee; 
     font-size: 62.5%; 
}
#container
{
     width: 55em;
     text-align: left;
     margin: -20em 0 0 -27.5em;
     border: 1px dotted #ccc;
     background: whitesmoke;
     height: 40em;
     position: absolute;
     top: 50%; left: 50%;
     z-index: 1;
}
h1
{
     color: #999;
     margin: 0;
     font-weight: normal;
     font-size: 1.4em;
     letter-spacing: 0.05em;
     position: absolute;
     top: 20px; left: 20px;
     font-variant: small-caps;
     z-index: 11;
}

/* Confetti Styles */

a
{
     text-decoration: none;
     z-index: 9;
     position: absolute;
     display: block; 
}
a:hover
{
     z-index: 10;
     -moz-border-radius: 8px;
     border-radius: 8px; 
}
.georgia
{
     font-size: 6em;
     color: #36c;
     letter-spacing: 0.05em;     
     top: 20px; left: 10px;
     font-family: Georgia, Palatino, serif;
}
.georgia:hover
{
     color: #fc0;
     background: #36c;
     border: 8px solid #36c;
}
.century
{
     color: #c03080;
     font-size: 4em;
     font-style: italic;
     top: 100px; right: 150px;
     font-family: "Century Gothic", Futura, sans-serif;
}
.century:hover
{
     color: white;
     background: #c03080;
     border: 8px solid #c03080;
}
.rounded
{
     color: #389c40;
     font-size: 5em;
     text-transform: lowercase;
     top: 190px; right: 43px;
     font-family: Arial Rounded MT Bold, Helvetica, Arial, sans-serif;
}
.rounded:hover
{
     color: #ffe;
     background:  #389c40;
     border: 8px solid  #389c40;
}
.brush
{
     color: #e85818;
     font-size: 7em;
     bottom: 40px; left: 30px;
     font-family: "Brush Script MT", "Monotype Corsiva", cursive;
}
.brush:hover
{
     color: #ffe;
     background: MidnightBlue;
     border: 8px solid  MidnightBlue;
}
.fax
{
     font-size: 4.2em;
     letter-spacing: 0.05em; 
     background: #a00;
     color: #fff;
     border: 8px solid #a00;
     -moz-border-radius: 8px;
     border-radius: 8px;
     left: 50px; top: 40%;
     font-family: "Lucida Fax", "Lucida Bright", Times, serif;
     font-variant: small-caps;
}
.fax:hover
{
     background: deeppink;
     color: #fff;
     border: 8px solid deeppink;
}
.futura
{
     font-size: 8em;
     color: #00b4c0;
     right: 100px; top: 45px;
     font-family: Futura, Impact, Helvetica, sans-serif;
}
.futura:hover
{
     color: #ffe8d0;
     background: #00b4c0;
     border: 8px solid #00b4c0;
}
.times
{
     color: #000;
     font-size: 8.4em;
     top: 230px; left: 150px;
     font-weight: 800;
     font-family: Times, "Times New Roman", Garamond, serif;
}
.times:hover
{
     color: whitesmoke;
     background: #000;
     border: 8px solid #000;
}
.gill
{
     font-size: 6em;
     color: #DAA520;
     top: 20px; right: 50px;
     font-family: "Gill Sans MT", "Gill Sans", "Lucida Sans", sans-serif;
}
.gill:hover
{
     background: #daa520;
     color: #F5F5DC;
     border: 8px solid #daa520;
}
.garamond
{
     font-size: 6.8em;
     color: #8968CD;
     bottom: 5px; right: 50px;
     letter-spacing: 0.075em;
     font-family: Garamond, Palatino, "Palatino Linotype", "Book Antiqua", serif;
}
.garamond:hover
{
     color: #FFE1FF;
     background: #8968CD;
     border: 8px solid  #8968CD;
}