@charset "UTF-8";

/***********************************************************************
	Official HEROES HIP HIP HURRAY style sheet  
	Created: October 2008 by Cathy Burkholder
	Last Updated: October 2008

 CONTENTS:  	
	
	HTML TAGS
	---------
	body, h1-4, pre, code, select, imput, textarea, table, td, th
		
 	IDs
	---------
	content-well, footer, nav, meet, music, cdparty, printables
	
	CLASSES
	---------
	feature, left-column, right-column, box, main-content, gone, hidden, meet 
	
/************************************************************************/




/*****************************************

                  TAGS
				   
*****************************************/

body {
	background: #FFEE00 url("/heroes/_images/background.png") repeat-x;
	padding: 0;
	margin: 0;
	font: 13px Tahoma, "Comic Sans MS", sans-serif;
	*font: x-small;
	*font-size: small;
	}
	
body * {line-height: 1.22em;}	

h1{	font: bold 200% "American Typewriter", Chalkboard,"Comic Sans MS", "Times New Roman", serif;
	text-transform:uppercase;
	color: #00A5FF;	}
h2{
	font: bold 150% "American Typewriter", Chalkboard,"Comic Sans MS", "Times New Roman", serif;	
	color: #4ADE00;	
	}
	

h3{
	font-size: 120%; 
	margin: 0; 
	padding: 0;}
h4{}

pre, code {
	font: 115% monospace;
	*font-size: 100%;
	}

select, input, textarea {font: 99% arial,helvetica,clean,sans-serif;}
	
table {
	font: 100%;
	font-size: inherit;
	}
	
td {
	border-bottom: #EED572 1px solid; 
	margin: 0; 
	padding: 2;
	}	

th {
	text-align: left;
	border-bottom: #EED572 2px solid;
	}	
	
blockquote{
	font-style:italic;
	font-family:"Times New Roman", Times, serif;
	font-size: 115%;}
/*****************************************

                  IDs
				   
*****************************************/
	
/*        HEADER */
#header {
	width: 850px;
	margin: 0 auto;
	padding: 0 0 0 20px;
	}

#logo {
	position: relative;
	left: -20px;	}
	
/*        NAV */	

#nav{ 
	height: 30px;
	background: #FFEE00;
	margin-top: -40px;
	padding-top: 50px;
	}
#nav li{
	float: left;
	list-style:none;
	background: #FFEE00;
	}
#nav li a {
	background: url("/heroes/_images/bg-box/bg-navbutton.gif") center no-repeat;
	width: 160px;
	height: 20px;
	display: block;
	text-decoration: none;
	color: #FFF;
	text-transform:uppercase;
	font-size: small;
	letter-spacing: .1em;
	text-align: center;
	}
#nav li.selected a {
	background: url("/heroes/_images/bg-box/bg-navbutton-selected.gif") center no-repeat;
	color: #000;
	}
#nav li a:hover {
	background: url("/heroes/_images/bg-box/bg-navbutton-hover.gif") center no-repeat;
	color: #FFF;
	}
	
	
#nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav li li a {
	display: block;
	width: 160px;
	padding: 5px 0;
	background: none;
	color: #000;
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 160px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
*:first-child+html #nav { height: 1%;}
*:first-child+html #nav li { height: 1%;}

#content {
	clear: left;
	color: #ccc;
}

/*        CONTENT-WELL */
#content-well {
	width: 850px;
	margin: 10px auto;
	padding: 0 0 0 20px;
	clear: both;
	}



/*        FOOTER */
#footer {
	width: 840px;
	clear: both;
	float: left;
	background: #FFFF61;
	padding: 5px;
	margin: 40px 0 15px 0;
	display: inline;
	}

#footer #buttons {
	float: right;
	margin: -40px 0;
	}


/*        box interiors */
#meet{width: 790px; margin: 0 auto;}
#bernard{background: #FFF url("/heroes/_images/bg-box/bg-box-bernard.png") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#music{ background: #FFF url("/heroes/_images/bg-box/bg-box-ipod.png") left top no-repeat; padding-left: 100px; border: #FFF 1px solid;}
#cdparty{ background: #FFF url("/heroes/_images/bg-box/bg-box-cd.png") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#printables{background: #FFF url("/heroes/_images/bg-box/bg-fingerpuppet.jpg") left top no-repeat; padding-left: 100px; border: #FFF 1px solid;}
#flickr{background: #FFF url("/heroes/_images/bg-box/bg-box-flickr.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#parade{background: #FFF url("/heroes/_images/bg-box/bg-parade.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#youtube{background: #FFF url("/heroes/_images/bg-box/bg-box-youtube.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#cdheroes{background: #FFF url("/heroes/_images/bg-box/bg-box-cd-heroes.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#dvdheroes{background: #FFF url("/heroes/_images/bg-box/bg-box-dvd-heroes.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}

#firemuseum{background: #FFF url("/heroes/_images/bg-box/bg-box-firemuseum.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#familymag{background: #FFF url("/heroes/_images/bg-box/bg-box-familymag.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#dvdcd{background: #FFF url("/heroes/_images/bg-box/bg-box-dvdcd.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}
#dvdparty{background: #FFF url("/heroes/_images/bg-box/bg-box-dvdparty.jpg") left top no-repeat; padding-left: 150px; border: #FFF 1px solid;}

/*****************************************

                  CLASSES
				   
*****************************************/


.box{ 
	padding: 10px; 
	clear: both; 
	margin: 0 0 10px 0; 
	}
.box h2{ margin: 0; padding: 0;}
.box ul{padding:0}
.box li {
	list-style: none;
	border-bottom: #EED572 1px solid; 
	padding: 4px 0;
	margin: 0;
	}
	
.feature { 
	font-size: large;
	border: #000 1px solid;
	}
	
.half-column {
	width: 420px;
	float: left;
	display: inline; 
	}
.next {margin-left: 10px; display:inline;}
	
.main-content{ 
	width: 850px;
	border: #FFF 10px solid;
	background: #FFF url("/heroes/_images/bg-box/bg-box.png") left top no-repeat; 
	margin: 0;
	padding: 10px;
	}
	
.meet{width: 230px; border-right: #F6ED00 1px solid; margin-left: 25px; display: none;}

.white{ background-color: #FFF; border: #FFF 1px solid;}
.yellow{ background-color: #FE0; }
.gradient{ background: #FFF url("/heroes/_images/bg-box/bg-box.jpg") left top no-repeat; padding-left: 100px; border: #FFF 1px solid;}

.pullout{ width: 200px; float: right;}
.gone {display: none;}
.hidden {visibility: hidden;}