/* som_menus.css */

#sfanav {	
	position: relative;
	top: 0;
	height: 30px;
	margin: 0 auto 0 auto;
	padding: 0;
	width: 960px;
	overflow: hidden;
	background-color: #5f259f;
	z-index: 100;
}
#sfanav ul {
	position: relative;
	top: -1px;
	float: right;
	list-style: none;
	height: 31px;
	margin: 0;
	padding: 0; 
}
#sfanav ul li {
	float: left;
	margin: 0 0 0 1em; 
	padding: 0;
}

#mainnav {
	position: relative;
	top: 95px;
	left: 5px;
	width: 950px; 
	height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0;
	text-align: left;
	vertical-align: top;
	z-index: 100;
	background: url(../../images/menu_xtile.jpg) repeat-x;
	/*box-shadow: 0 0 4px #444;
	-moz-box-shadow: 0 0 4px #444;
	-webkit-box-shadow: 0 0 4px #444;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;*/
	behavior: url(includes/PIE.htc);
}
#main_navigation, #main_navigation ul { /* all lists */
	padding: 0 0 5px 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}
#main_navigation a {
	display: block;
	width: 80px;
	color: #FFF;
	text-decoration: none;
	height: auto; 
}
#main_navigation a:hover { color: #999; }

#main_navigation li { /* all list items */
	float: left;
	padding: 1px 0 4px 0;
	margin: 0 0 0 8px;
	width: 86px; /* width needed or else Opera goes nuts */
	line-height: 1;
}
#main_navigation li a { padding: 6px 0 8px 0; text-align: center; } /* center top-level text */ 
#main_navigation li ul li { padding: 0; }
#main_navigation li ul li a { text-align: left; width: 10.9em; padding: 5px 0 5px 0; border-bottom: 1px solid #666; } /* left-align child-level text; width sets hoverable area */
#main_navigation li ul li a:hover { background-color: #111; border-bottom: 1px solid #777; }

#main_navigation li ul { /* second-level lists */
	position: absolute;
	top: 30px;
	width: 12.2em;
	left: -9999em; /* using left instead of display to hide menus since 'display: none' isn't read by screen readers */
	border: 1px solid #000;
	margin-left: 20px; /* align the text with parent navigation's left text edge (accommodation for main level centered text) */
	background: url(../../images/menu_gradient.png) repeat top left;
	box-shadow: 0 0 4px #000;
	-moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
	-moz-border-radius: 0 0 9px 9px;
	-webkit-border-radius: 0 0 9px 9px;
	border-radius: 0 0 9px 9px;
	behavior: url(includes/PIE.htc);
}

#main_navigation li ul ul { /* third-and-above-level lists */
	margin: -22px 0 0 10.9em; /* align the popout list with top of second level li */
	top: inherit;
	border: 1px solid #000;
	display: inline;
	box-shadow: 0 0 4px #000;
	-moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
	-moz-border-radius: 9px; 
	-webkit-border-radius: 9px;
	border-radius: 9px; 
	behavior: url(includes/PIE.htc);
}

#main_navigation li:hover ul ul, #main_navigation li:hover ul ul ul, 
#main_navigation li.sf_hover ul ul, #main_navigation li.sf_hover ul ul ul {
	left: -999em;
}

#main_navigation li:hover ul, #main_navigation li li:hover ul, 
#main_navigation li li li:hover ul, #main_navigation li.sf_hover ul, 
#main_navigation li li.sf_hover ul, #main_navigation li li li.sf_hover ul { /* lists nested under hovered list items */
	left: auto; 
}

.double {
	margin: -6px 0 4px 8px; /* spacing for multi-line, top level menu items */
}
.arrow { 
	display: block; 
	background: url(../../images/arrow.png) no-repeat top left;
	height: 10px; 
	width: 11px; 
	border: 0; 
	float: right; 
	margin-right: 0; 
	position: relative;
	right: -4px;
}

/* sub-navigation menu ------------------------------- */
#sub_navigation {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#sub_navigation li { margin: 0; }
#sub_navigation li a {
	display: block;
	color: #DDD;
	text-decoration: none;
	font-weight: bold;
	padding: 3px 0 3px 0;
	border-bottom: 1px solid #222;
	margin-top: -1px;
}
#sub_navigation li a:hover { 
	color: #888; 
	background-color: #222; 
	border-top: 1px solid #333; 
	border-bottom: 1px solid #333; 
	padding: 2px 0 3px 0; /* top padding = bottom padding -1px */
}
#sub_navigation ul { list-style-type: none; padding: 0; }
.subnav_default { color: #FFF; background-color: #555; }

#sub_navigation a.icon {
	display: block;
	width: 80%;
	margin: 1em auto 1em auto;
	text-align: center;
	background-color: #59178A;
	color: #EEE;
	font-size: 1.1em;
	font-weight: bold;
	padding: .5em;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
	-moz-transition: background-color .15s linear, color .15s linear;
	-webkit-transition: background-color .15s linear, color .15s linear;
	-o-transition: background-color .15s linear, color .15s linear;
	transition: background-color .15s linear, color .15s linear;
}
#sub_navigation a.icon:hover { color: #FFF; background-color: #724D8E; font-size: 1.1em; font-weight: bold; margin: 1em auto 1em auto; padding: .5em; }

/* MEDIA PLAYER MENUS ----------------------------- */
#media_menu { list-style: none; margin: 4px 0 12px 0; padding: 0; height: 40px; width: auto; }
#media_menu li { float: left; width: 100px; height: 30px; }
#media_menu a { display: block; width: 50px; height: 30px; } /* control width/height of menu item */
#media_menu a.default { background-position: 0px -50px; background-color: #000; }
#media_menu a.default span { color: #FFF; border-bottom: 1px solid #CCC; }

#audio_menu, #video_menu, #image_menu  {
	height: auto;
	margin: 0;
	padding-left: 0;
	overflow: hidden;
	float: left;
	border: 1px solid #666;
	-moz-border-radius: 9px; 
	-webkit-border-radius: 9px;
	border-radius: 9px; 
	behavior: url(includes/PIE.htc);	
}
#audio_menu, #video_menu { width: 360px; }
#image_menu { width: 200px; }

#audio_menu li:first-child, #video_menu li:first-child, #image_menu li:first-child {    
	-moz-border-radius: 9px 9px 0 0; 
	-webkit-border-radius: 9px 9px 0 0; 
	border-radius: 9px 9px 0 0; 
	behavior: url(includes/PIE.htc);	
}
#audio_menu li:last-child, #video_menu li:last-child, #image_menu li:last-child {    
	-moz-border-radius: 0 0 9px 9px; 
	-webkit-border-radius: 0 0 9px 9px;  
	border-radius: 0 0 9px 9px; 
	behavior: url(includes/PIE.htc);	
}

#audio_menu li, #video_menu li, #image_menu li { display: block; list-style-type: none; margin-left: 0; padding: 2px 2px 2px 16px; }
#audio_menu li a, #video_menu li a, #image_menu li a { color: #BBB; text-decoration: none; }
#audio_menu li.default_media, #video_menu li.default_media, #image_menu li.default_media { 
	background-color: #666; 
	background-image: url(../../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 4px 4px;
}
#audio_menu li.default_media a, #video_menu li.default_media a, #image_menu li.default_media a { color: #FFF; }
#audio_menu li:hover, #video_menu li:hover, #image_menu li:hover { 
	color: #FFF; 
	background-color: #444; 
	background-image: url(../../images/arrow.png);
	background-repeat: no-repeat;
	background-position: 4px 4px;
}
#audio_menu li span, #video_menu li span, #image_menu li span { display: block; }
#audio_menu li span.artist, #video_menu li span.artist { display: block; width: 140px; float: left; }
#audio_menu li span.title, #video_menu li span.title { display: block; width: 185px; float: left; }

a:hover, #main_navigation li a:hover span, #subnavigation li a:hover, a.link_head:hover {
	/* CSS3 support */
	-moz-transition: color .2s ease-in-out;
	-webkit-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}
#image_menu li:first-child.fullround {
	-moz-border-radius: 9px; 
	-webkit-border-radius: 9px;
	border-radius: 9px; 
	behavior: url(includes/PIE.htc);	
}
#main_navigation li a:hover, #pagelinks li a:hover {
 	-moz-transition: background-color .2s linear;
	-webkit-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	transition: background-color .2s linear;
}	

#main_navigation li ul, #main_navigation li ul li ul { opacity: .1; }
#main_navigation li:hover ul {
	opacity: 1;
 	-moz-transition: opacity .2s ease-out;
	-webkit-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
}