/**

Genre Navigation
***/

#genre-navigation ul.genre{background-image:url('../Graphics/sprites/genre_sprite.png');width:982px;background-repeat: no-repeat;position: relative;z-index: 999;}

#genre.entertainment #genre-navigation ul.genre {background-position: 0 -298px; height: 58px;}
#genre.comedy #genre-navigation ul.genre{background-position: 0 -142px; height: 58px;}
#genre.drama #genre-navigation ul.genre{background-position: 0 -220px; height: 58px;}
#genre.factual-entertainment #genre-navigation ul.genre,
#genre.popular-factual #genre-navigation ul.genre,
#genre.lifestyle #genre-navigation ul.genre{ background-position: 0 -376px; height: 58px; }
#genre.kids #genre-navigation ul.genre{ background-position: 0 -454px; height: 58px; }
#genre.licensing #genre-navigation ul.genre{ background-position: 0 -532px; height: 58px; }
#genre.theatrical #genre-navigation ul.genre{ background-position: 0 -610px; height: 58px; }


#genre-navigation ul.genre a {border:0px solid #000;text-indent:-9999px;}
#genre-navigation ul.genre li{float:left;position: relative;}

#genre-navigation ul.genre li.factual a,
#genre-navigation ul.genre li.entertainment a,
#genre-navigation ul.genre li.drama a,
#genre-navigation ul.genre li.comedy a,
#genre-navigation ul.genre li.theatrical a,
#genre-navigation ul.genre li.kids a,
#genre-navigation ul.genre li.licensing a{display:block;background-image:url('../Graphics/sprites/genre_sprite.png');}

#factual #genre-navigation ul.genre li.factual a,
#entertainment #genre-navigation ul.genre li.entertainment a,
#drama #genre-navigation ul.genre li.drama a,
#comedy #genre-navigation ul.genre li.comedy a,
#theatrical #genre-navigation ul.genre li.theatrical a,
#kids #genre-navigation ul.genre li.kids a,
#licensing #genre-navigation ul.genre li.licensing a{background:none;cursor:default;outline:0;}

#factual #genre-navigation ul.genre{background-position:0 -376px;height:60px;}
#genre-navigation ul.genre li.factual a{width:153px;height:50px;background-position:0 0;}
#genre-navigation ul.genre li.factual a:hover{background-position:0 -71px;}

#entertainment #genre-navigation ul.genre{background-position:0 -298px;height:60px;}
#genre-navigation ul.genre li.entertainment a{width:154px;height:50px;background-position:-153px 0;}
#genre-navigation ul.genre li.entertainment a:hover{background-position:-153px -71px;}

#drama #genre-navigation ul.genre{background-position:0 -220px;height:60px;}
#genre-navigation ul.genre li.drama a{width:134px;height:50px;background-position:-306px 0;}
#genre-navigation ul.genre li.drama a:hover{background-position:-306px -71px;}

#comedy #genre-navigation ul.genre{background-position:0 -142px;height:60px;}
#genre-navigation ul.genre li.comedy a{width:135px;height:50px;background-position:-440px 0;}
#genre-navigation ul.genre li.comedy a:hover{background-position:-440px -71px;}

#theatrical #genre-navigation ul.genre{background-position:0 -610px;height:60px;}
#genre-navigation ul.genre li.theatrical a{width:137px;height:50px;background-position:-575px 0;}
#genre-navigation ul.genre li.theatrical a:hover{background-position:-575px -71px;}

#kids #genre-navigation ul.genre{background-position:0 -454px;height:60px;}
#genre-navigation ul.genre li.kids a{width:135px;height:50px;background-position:-712px 0;}
#genre-navigation ul.genre li.kids a:hover{background-position:-712px -71px;}

#licensing #genre-navigation ul.genre{background-position:0 -532px;height:60px;}
#genre-navigation ul.genre li.licensing a{width:134px;height:50px;background-position:-847px 0;}
#genre-navigation ul.genre li.licensing a:hover{background-position:-847px -71px;}

ul.genre li ul li a{outline:0;}
ul.genre ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
ul.genre ul li{
	float:none;
}
ul.genre ul li.factual-ent a{
    display:block;
    background-image:url('../Graphics/menu/factual_entertainment.png') !important;
}
ul.genre ul li.popular-ent a{
    display:block;
    background-image:url('../Graphics/menu/popular_factual.png') !important;
}
ul.genre ul li.lifestyle-factual a{
    display:block;
    background-image:url('../Graphics/menu/lifestyle.png') !important;
}
ul.genre ul li.clips a{
    display:block;
    background-image:url('../Graphics/menu/on_Clips.png') !important;
}
ul.genre ul li.factual-ent a:hover,
ul.genre ul li.popular-ent a:hover,
ul.genre ul li.lifestyle-factual a:hover,
ul.genre ul li.clips a:hover{background-position:0 0 !important;}

ul.genre li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}