/* Eric Meyer's version of the reset stylesheet */
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

body { background: #000; font-size: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 1em;}

body.magenta, .magenta a { color: #402;}
body.cyan, .cyan a { color: #036;}
body.yellow, .yellow a { color: #553;}

.magenta a:hover,
.magenta .latest li#latest a, .magenta .music li#music a, .magenta .people li#people a, .magenta .personal li#personal a, .magenta .contact li#contact a, .magenta .bio li#bio a
{ color: #e09;}

.cyan a:hover,
.cyan .latest li#latest a, .cyan .music li#music a, .cyan .people li#people a, .cyan .personal li#personal a, .cyan .contact li#contact a, .cyan .bio li#bio a
{ color: #06f;}

.yellow a:hover,
.yellow .latest li#latest a, .yellow .music li#music a, .yellow .people li#people a, .yellow .personal li#personal a, .yellow .contact li#contact a, .yellow .bio li#bio a 
{ color: #fd0;}

#wrapper, h1, #gallery_nav, #photo_nav, div.contact, #error_page { position: absolute;}
#wrapper, .home h1, div.contact, #error_page { top: 50%; left: 0; width: 100%; margin-top: -280px; }
.home h1, div.contact { margin-top: -125px;}
#hero, .home h1 a { margin: 0 auto; position: relative; height: 480px;}
#hero { z-index: 18; text-align: left;}

h1 { top: 30px; left: 30px; z-index: 20;}
h1 a { position: absolute; width: 170px; height: 80px; }
h1 a img { height: 0;}
.home h1 a img { height: 250px;}
.magenta h1 a { background-image: url(/images/site/ep_magenta.gif);}
.cyan h1 a { background-image: url(/images/site/ep_cyan.gif);}
.yellow h1 a { background-image: url(/images/site/ep_yellow.gif);}
.home h1 a { background-image: none; }

#gallery_nav { top: 30px; right: 30px; z-index: 25;}
#gallery_nav li { float: left; font-size: 0.8125em; text-transform: uppercase;}
#gallery_nav li a { float: left; margin-right: 4px; padding-right: 11px; background-position: 100% 40%; background-repeat: no-repeat;}
#gallery_nav li#contact a { background-image: none;}
.magenta #gallery_nav li a { background-image: url(/images/site/slash_magenta.gif);}
.cyan #gallery_nav li a { background-image: url(/images/site/slash_cyan.gif);}
.yellow #gallery_nav li a { background-image: url(/images/site/slash_yellow.gif);}

.overview { margin-bottom: 20px;}

#photo_nav { bottom: 30px; left: 30px; right: 30px; height: 80px; overflow: hidden; text-align: left;}
#photo_nav li, #photo_nav li a { float: left; }
#photo_nav li a { height: 80px; font-size: 0.6875em; line-height: 4em; text-indent: -15000px; background-repeat: no-repeat; background-position: 0 0;}
#photo_nav li a:hover { background-position: 0 -80px;}

#scroll p a { position: absolute; width: 30px; height: 80px; bottom: 30px; background-position: 8px 0; background-repeat: no-repeat; text-indent: -5000px;}
#scroll p a:hover { background-position: 8px -81px;}
.magenta #scroll a#next { right: 0; background-image: url(/images/site/plus_magenta.gif); }
.magenta #scroll a#prev { left: 0; background-image: url(/images/site/plus_magenta.gif); }
.cyan #scroll a#next { right: 0; background-image: url(/images/site/plus_cyan.gif); }
.cyan #scroll a#prev { left: 0; background-image: url(/images/site/plus_cyan.gif); }
.yellow #scroll a#next { right: 0; background-image: url(/images/site/plus_yellow.gif); }
.yellow #scroll a#prev { left: 0; background-image: url(/images/site/plus_yellow.gif); }

#photo_nav li a, #hero p { font-family: "Trebuchet MS", "Lucida Sans", sans-serif; }
#hero p { font-size: 0.625em; margin-top: 10px; text-align: left; font-style: italic;}
a { text-decoration: none; }

#error_page { margin-top: -87px;} 
.contact #hero, p#email a, #error_page #hero { width: 400px; height: 250px;}
.contact #hero p, .contact #hero p a { text-indent: -5000px;}
p#email a { position: absolute; top: 0; left: 0; }
.magenta p#email a { background-image: url(/images/site/contact_magenta.gif);}
.cyan p#email a { background-image: url(/images/site/contact_cyan.gif);}
.yellow p#email a { background-image: url(/images/site/contact_yellow.gif);}

#error_page #hero h2 { text-transform: uppercase;}
#error_page #hero p { font-size: 0.75em;}

#bio_text { width: 430px; margin: 0 auto; padding-top: 180px; text-align: center;}
#bio_text p { line-height: 1.125em; margin-bottom: 1em;}

p#credit a { position: absolute; bottom: 20px; left: 22px; width: 65px; height: 70px; text-indent: -5000px;}
p#credit a:hover { background-position: 0 -70px;}
.magenta p#credit a { background-image: url(/images/site/sp_roundel_magenta.gif);}
.cyan p#credit a { background-image: url(/images/site/sp_roundel_cyan.gif);}
.yellow p#credit a { background-image: url(/images/site/sp_roundel_yellow.gif);}