/* 
Title:		VH1 master navigation styles
*/


/* navigation
---------------------------------------------------- */
#navigation {
	border:1px none #ff0000;
}
#nav {
	position: relative;
	width: 980px;
	height: 31px;
}
#nav ul#navlist {
	z-index: 500;
	float: left;
	height: 31px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#nav ul#navlist li {
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	font-size: 17px;
	text-align: center;
}
#nav ul#navlist li a,
#nav ul#navlist li span {
	height: 38px;
	display: block;
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-decoration: none;
	color: #8b8b8b;
}

/* HOME DEFAULT */
#nav ul#navlist li#n-home {
	background: #8b8b8b url(../img/nav.gif) 0px 0px;
}
#nav ul#navlist li#n-music {
	background: #8b8b8b url(../img/nav.gif) 888px 0px;
}
#nav ul#navlist li#n-shows {
	background: #8b8b8b url(../img/nav.gif) 789px 0px;
}
#nav ul#navlist li#n-movies {
	background: #8b8b8b url(../img/nav.gif) 684px 0px;
}
#nav ul#navlist li#n-news {
	background: #8b8b8b url(../img/nav.gif) 576px 0px;
}
#nav ul#navlist li#n-photos {
	background: #8b8b8b url(../img/nav.gif) 129px 0px;
}
#nav ul#navlist li#n-video {
	background: #8b8b8b url(../img/nav.gif) 258px 0px;
}
#nav ul#navlist li#n-community {
	background: #8b8b8b url(../img/nav.gif) 415px 0px;
}
#nav ul#navlist li .n-link {
	height: 31px;
	font-size: 8px;
}
#nav ul#navlist li#n-home .n-link {
	width: 92px;
}
#nav ul#navlist li#n-music .n-link {
	width: 99px;
}
#nav ul#navlist li#n-shows .n-link {
	width: 105px;
}
#nav ul#navlist li#n-movies .n-link {
	width: 108px;
}
#nav ul#navlist li#n-news .n-link {
	width: 161px;
}
#nav ul#navlist li#n-photos .n-link {
	width: 129px;
}
#nav ul#navlist li#n-video .n-link {
	width: 129px;
}
#nav ul#navlist li#n-community .n-link {
	width: 157px;
}

/* HOME HOVER */
#nav ul#navlist li#n-home:hover,
#nav ul#navlist li#n-home.sfhover {
	background: #454545 url(../img/nav.gif) 0px 31px;
}
/* MUSIC HOVER */
#nav ul#navlist li#n-music:hover,
#nav ul#navlist li#n-music.sfhover {
	background: #454545 url(../img/nav.gif) 888px 31px;
}
/* SHOWS HOVER */
#nav ul#navlist li#n-shows:hover,
#nav ul#navlist li#n-shows.sfhover {
	background: #454545 url(../img/nav.gif) 789px 31px;
}
/* MOVIES HOVER */
#nav ul#navlist li#n-movies:hover,
#nav ul#navlist li#n-movies.sfhover {
	background: #454545 url(../img/nav.gif) 684px 31px;
}
/* NEWS HOVER */
#nav ul#navlist li#n-news:hover,
#nav ul#navlist li#n-news.sfhover {
	background: #454545 url(../img/nav.gif) 576px 31px;
}
/* PHOTOS HOVER */
#nav ul#navlist li#n-photos:hover,
#nav ul#navlist li#n-photos.sfhover {
	background: #454545 url(../img/nav.gif) 129px 31px;
}
/* VIDEO HOVER */
#nav ul#navlist li#n-video:hover,
#nav ul#navlist li#n-video.sfhover {
	background: #454545 url(../img/nav.gif) 258px 31px;
}
/* COMMUNITY HOVER */
#nav ul#navlist li#n-community:hover,
#nav ul#navlist li#n-community.sfhover {
	background: #454545 url(../img/nav.gif) 415px 31px;
}
/* REMOVES THE MAIN NAV BACKGROUNDS FROM THE SUBNAV HOVERS*/
#nav ul#navlist li #shows-grid a:hover,
#nav ul#navlist ul#home_ul li a:hover,
#nav ul#navlist ul#music_ul li a:hover,
#nav ul#navlist ul#movies_ul li a:hover,
#nav ul#navlist ul#news_ul li a:hover,
#nav ul#navlist ul#photos_ul li a:hover,
#nav ul#navlist ul#video_ul li a:hover,
#nav ul#navlist ul#community_ul li a:hover,
#nav ul#navlist li#music_artist a:hover {
	background-image: none;
}
/* suckerfish dropdowns */
#nav ul#navlist li ul { /* second-level lists */
	clear: left;
	position: absolute;
	width: 220px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin: -1px 0 0 0;
	padding: 0;
	list-style: none;
	top: 32px;
}
#nav ul#navlist li ul ul { /* third-and-above-level lists */
	top: 0;
}
#nav ul#navlist li:hover ul ul,
#nav ul#navlist li.sfhover ul ul {
	left: -999em;
}
#nav ul#navlist li:hover ul,
#nav ul#navlist li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
/* 	broke the bottom two out so the first level will align to the left
 	and the second level will align to the right of the first
 	this effects all but the movies which are declared afterward 
	Still need to determine where the colors are being set
	*/
#nav ul#navlist li li:hover ul,
#nav ul#navlist li li.sfhover ul { /* lists nested under hovered list items */
	left: 219px;
}
#nav ul#navlist li ul li {
	height: auto;
	text-transform: none;
	font-size: 11px;
	line-height: 11px;
}
/* the initial dropdowns (ALL) */
#nav ul#navlist li ul li a,
#nav ul#navlist li:hover ul li a,
#nav ul#navlist li.sfhover ul li a,
#nav ul#navlist li ul li span {
	width:202px;
	height: 11px;
	padding: 9px 8px;
	font-family: Arial, Geneva, Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	color: #fff;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #000000;
	background-image: none;
}
/* the initial dropdowns (photos) */
#nav ul#navlist li#n-photos ul ,
#nav ul#navlist li#n-photos:hover ul,
#nav ul#navlist li#n-photos.sfhover ul,
#nav ul#navlist li#n-photos ul {
	right:0px;
}
/* the initial dropdowns (community) */
#nav ul#navlist li#n-video ul ,
#nav ul#navlist li#n-video:hover ul,
#nav ul#navlist li#n-video.sfhover ul,
#nav ul#navlist li#n-video ul {
	right:0px;
}
/* the initial dropdowns (community) */
#nav ul#navlist li#n-community ul ,
#nav ul#navlist li#n-community:hover ul,
#nav ul#navlist li#n-community.sfhover ul,
#nav ul#navlist li#n-community ul {
	right:0px;
}
/* nav items without dropdowns */	
#nav ul#navlist li ul li.sub a,
#nav ul#navlist li ul li.sub span {
	background: #454545 url(../img/subnav.gif) 0px 0px;
}
/* dropdown nav items */
#nav ul#navlist li ul li.drop a,
#nav ul#navlist li ul li.drop span {
	background: #454545 url(../img/subnav.gif) 218px 0px;
}
#nav ul#navlist li ul li.first a,
#nav ul#navlist li ul li.drop ul li.first a,
#nav ul#navlist li ul li.first span {
	border:1px solid #000000;
}
/* SPECIAL CASE: This fixes the case were the first subnav
   item is a drop.  In this case, the non-first secondary
   subnav items have an extra border-top in them.  */
#nav ul#navlist li ul li.first ul li a {
	border-top:none;
}
/* SPECIAL CASE: This fixes the case were the first subnav
   item is a drop.  In this case, the alignment of the
   secondary subnav is off by -1px. */
#nav #navlist .first .sub2 {
	margin:0;
}
#nav ul#navlist li:hover,
#nav ul#navlist li.sfhover {
	z-index:1000;
}
#nav ul#navlist ul.sub2 {
	z-index:1000;
}







/*////////////////////////////////////////////////////////////////////////////////*/
#nav ul#navlist li ul li:hover a,
#nav ul#navlist li ul li.sfhover a,
#nav ul#navlist li ul li:hover span,
#nav ul#navlist li ul li.sfhover span {
	background-image: none;
	background: #ea4072 url(../img/subnav.gif) 218px 58px;
	/*background: #00ff00;*/
	
}

/* SECONDARY: OFF */
#nav ul#navlist li ul li:hover ul li a,
#nav ul#navlist li ul li.sfhover ul li a,
#nav ul#navlist li ul li:hover ul li span,
#nav ul#navlist li ul li.sfhover ul li span {
	/*background-image: none;*/
	background: #8b8b8b url(../img/subnav.gif) 0px 58px;
	/*background: #0000ff;*/
	
}

/* SECONDARY: OVER */
#nav ul#navlist li ul li ul li a:hover,
#nav ul#navlist li ul li ul li a:hover,
#nav ul#navlist li ul li ul li span:hover,
#nav ul#navlist li ul li ul li span:hover {
	/*background-image: none;*/
	background: #ea4072 url(../img/subnav.gif) 0px 58px;
	/*background: #00ffff;*/
	
}


/*PRIMARY SUBNAV: Highlight, Dropdown */ /* works in XHTML but not HTML TRANS FF */
#nav ul#navlist .drop:hover .a_drop:hover,
#nav ul#navlist .drop.sfhover .a_drop:hover,
#nav ul#navlist .drop:hover .span_drop:hover,
#nav ul#navlist .drop.sfhover .span_drop:hover {
	background: #E33267 url(../img/subnav.gif) 218px 29px!important;
	/* background-image: none; */
	/* background: #ff0000; */
}

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








/*PRIMARY SUBNAV: Highlight, Default */
#nav #navlist .sub .a_sub:hover,
#nav #navlist .sub .span_sub:hover {
	background: #E33267 url(../img/subnav.gif) 0px 29px!important;
}

/*SECONDARY SUBNAV: Default*/
#nav #navlist .drop .sub2 li {
	width: 165px;
}
#nav #navlist .drop:hover .sub2 li a,
#nav #navlist .drop.sfhover .sub2 li a,
#nav #navlist .drop:hover .sub2 li span,
#nav #navlist .drop.sfhover .sub2 li span {
	background: #8b8b8b url(../img/subnav.gif) 0px 58px;
}
/*SECONDARY SUBNAV: Highlight*/
#nav #navlist .drop:hover .sub2 li:hover a,
#nav #navlist .drop.sfhover .sub2 li.sfhover a,
#nav #navlist .drop:hover .sub2 li:hover span,
#nav #navlist .drop.sfhover .sub2 li.sfhover span {
	background: #E33267 url(../img/subnav.gif) 0px 29px!important;
}





/***********************************************
	SHOWS SPECIFIC LAYOUT
***********************************************/
#nav ul#navlist li #shows-grid {
	z-index: 601;
	clear: left;
	position: absolute;
	width: 789px;
	left: -999em;
	border-top: 1px solid #000000;
	background: url(../img/shows_drop_bg_grey_orig.gif) repeat-y;
}
#nav ul#navlist #shows-grid div strong {
	height: 18px;
	color:#FFFF00;
	display:block;
	font-size:12px;
	font-weight:bold;
	text-align:left;
	font-family:arial;
	padding:5px 8px 0px;
} 
#nav ul#navlist li #shows-grid a:hover {
	background: #E33267 url(../img/subnav.gif) 0px 29px;
}
#nav ul#navlist li #shows-grid #shows-2 a:hover {
	background-color: #E33267;
}
#nav ul#navlist li:hover #shows-grid,
#nav ul#navlist li.sfhover #shows-grid {
	left: 0px;
	}
#nav ul#navlist #shows-grid #shows-1 {
	position: relative;
	float: left;
	width: 220px;
	height: 300px;
	text-align: left;
}
#nav ul#navlist #shows-grid div#shows-2 div.shows-col1 {
	position: relative;
	width: 170px;
	float: left;
	border:1px none #ff0000;
	margin:0px;
}
#nav ul#navlist #shows-grid div#shows-2 div.shows-col2 {
	position: relative;
	float: left;
	width: 170px;
	margin: 0;
	border:1px none #00ff00;
	margin:0px;
}
#nav ul#navlist #shows-grid div#shows-2 div.shows-col3 {
	position: relative;
	float: left;
	width: 170px;
	margin: 0;
	border:1px none #0000ff;
	margin:0px;
}
.relinks_spacer {
	position:relative;
	padding:0px;
	float:left;
	width:3px;
	height:3px;
	font-size:1px;
}
.relinks_foot {
	position:relative;
	clear:both;
	width: 200px;
	height:20px;
}
#nav ul#navlist #shows-grid #shows-2 {
	position: relative;
	float: left;
	width: 550px;
	margin: 0;
	border:1px none #ff00ff;
}
#nav ul#navlist li #shows-grid div.relinks {
	height: 29px;
	margin: 0;
	padding: 0px;
	text-align: left;
	border-style: solid;
	border-width: 0px 1px 1px 1px;
	border-color: #000000;
	overflow: hidden;
	background: url(../img/subnav.gif) 0px 0px;
	width:218px;
}
#nav ul#navlist li #shows-grid div.relinks_first {
	width:218px;
	height: 29px;
	margin: 0;
	padding: 0px;
	text-align: left;
	border-style: solid;
	border-width: 0px 1px 1px 1px;
	border-color: #000000;
	background-color: #8b8b8b;
	overflow: hidden;
	background: #8b8b8b url(../img/subnav.gif) 218px 58px;
}
#nav ul#navlist li #shows-grid div.first {
	border-top:1px solid #000000;
}
#nav ul#navlist li #shows-grid div.relinks a,
#nav ul#navlist li #shows-grid div.relinks_first a {
	float: none;
	display: block;
	width: auto;
	height: 30;
	margin: 0;
	padding: 7px 8px;
	font-size: 11px;
	font-weight: normal;
	text-align: left;
	color: #fff;
	border: none;
	font-family: Arial, Geneva, Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	color: #fff;
}
#nav ul#navlist li #shows-grid div.relinks_first a:hover {
	background: #8b8b8b url(../img/subnav.gif) 218px 58px;
}
#nav ul#navlist li #shows-grid div a {
	float: none;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 5px 8px;
	font-size: 11px;
	font-weight: normal;
	text-align: left;
	color: #fff;
	border: none;
}
#nav ul#navlist li #shows-grid a#shows-all {
	clear: both;
	float: right;
	width: auto;
	height: auto;
	white-space: nowrap;
	margin: 10px 0 0 0;
	padding: 2px 4px;
	font-weight: bold;
	font-size: 11px;
	color: #fff;
	border: none;
	background: #4498c7;
	text-decoration:underline;
}
#nav ul#navlist li #shows-grid a#shows-all:hover {
	text-decoration: underline;
	font-weight: bold;
}
.all_shows, .all_shows a {
	font: bold 11px arial;
	color: #FFFFFF;
	text-decoration:none;
	background-color: #373737;
	width: 170px;
}
.all_shows A:hover {
	color: #FF6600;
	text-decoration:none;
	background-color:#ff6600;
}
/*** FOOTER STYLES  -  Mike Moloksher ***/
#footerHolder {
	clear:both;
	width:980px;
	overflow:hidden;
	background-color:#393939;
	padding:0px 0px 20px 0px;
	background-image: url(../img/bg_footerHolder_brdr.jpg);
	background-position:left top;
	background-repeat:repeat-x;
	float:left;
}