@charset "utf-8";
/*
	Adapted from
	http://www.cssplay.co.uk/menus/flickerfree_mk2.html
*/

#nav {
	padding:0;
	margin:0;
	width:750px;
	height:50px;
	border:0;
	background: url(../img/site/canvas-buttons-all.jpg) no-repeat 0 0;
	background-color: #471410;
	position:relative;
	top:-2px; /* IE6 adds a hairline crack under the banner image */
}

#nav ul {
	margin:0;
	padding:0;
	list-style-type:none; /*remove bullets*/
}

#nav li {
	display:block;
	float:left;
	overflow: hidden;
	width:125px;
	border:0;
}

#nav a, #nav a#selected {
	display:block;
	width:125px;
	height:0;
	padding-top:50px;
	margin:0;
	text-decoration:none;
	border:0;
	overflow:hidden; /*Add overflow:hidden for IE if the text is large enough to cause IE to increase the vertical height of the button*/
	background-repeat: no-repeat;
}

/*
	The text is forced off the screen by using a top padding (50px) and overflow:hidden (there is also a hack for IE5.x). 
	This allows the background image to be displayed but not the text.
*/

* html #nav a:link, * html #nav a:visited {height:50px; he\ight:0;}

#nav a.trailer, #nav a.trailer:link, #nav a.trailer:visited { background-image: url(../img/site/trailer_btn.jpg); }
#nav a.story, #nav a.story:link, #nav a.story:visited {	background-image: url(../img/site/story_btn.jpg); }
#nav a.watch, #nav a.watch:link, #nav a.watch:visited { background-image: url(../img/site/watch_btn.jpg); }
#nav a.cast, #nav a.cast:link, #nav a.cast:visited { background-image: url(../img/site/cast_btn.jpg); }
#nav a.prod, #nav a.prod:link, #nav a.prod:visited { background-image: url(../img/site/prod_btn.jpg); }
#nav a.contact, #nav a.contact:link, #nav a.contact:visited { background-image: url(../img/site/contact_btn.jpg); }

#nav a.trailer:hover, #nav a.trailer:active { background-image: url(../img/site/trailer-o_btn.jpg); }
#nav a.story:hover, #nav a.story:active { background-image: url(../img/site/story-o_btn.jpg); }
#nav a.watch:hover, #nav a.watch:active { background-image: url(../img/site/watch-o_btn.jpg); }
#nav a.cast:hover, #nav a.cast:active { background-image: url(../img/site/cast-o_btn.jpg); }
#nav a.prod:hover, #nav a.prod:active { background-image: url(../img/site/prod-o_btn.jpg); }
#nav a.contact:hover, #nav a.contact:active { background-image: url(../img/site/contact-o_btn.jpg); }

* html #menu a:hover {height:50px; he\ight:0;}

#nav a#selected, #nav a#selected:hover {
	background-image: url(../img/site/canvas-button-selected.png);
}