@media speech, tty, braille {
}

@media print, embossed {
	fieldset[id="externalNavigation"] {
		display:				none;
	}
}

@media screen, handheld, projection, tv{

	fieldset[id="externalNavigation"] {
		/*text-shadow:				0 1px 0 #000000; */
		box-shadow: 				0 0.2em 0.3em rgba(0, 0, 0, 0.5);
		background-color:			#000;
		background: 				linear-gradient(#595C64, #1B1B1C);
	}
	
	fieldset[id="externalNavigation"] > ul > li > span,
	fieldset[id="externalNavigation"] > ul > li > a {
		color:					#aaa;
	}


	fieldset[id="externalNavigation"] > ul > li > ul {
		background-color:			#fff;
		background-image:			url("../graphics/background-color.png");
		box-shadow: 				0 0.2em 0.3em rgba(0, 0, 0, 0.5);
		
		background-repeat:			no-repeat;
		background-size: 			100% 100%;
		background-origin: 			content-box;

	}
	

	fieldset[id="externalNavigation"] > ul > li:hover > a,
	fieldset[id="externalNavigation"] > ul > li:focus > a {
		background-color:			rgba(255,255,255,0.1);
	}

	fieldset[id="externalNavigation"] > ul > li > a:hover,
	fieldset[id="externalNavigation"] > ul > li > a:focus {
		color:					#ffffff;
		text-shadow: 				0 0 0.05em #fff;
	}
	
	/* inside menu cell */
	
	fieldset[id="externalNavigation"] > ul > li span[class~="abstract"] {
		color:					#999;
	}
	
	fieldset[id="externalNavigation"] > ul li > a > span[class~="icon"] {
		background-image:			url("../graphics/contact-passive.png");
	}

	fieldset[id="externalNavigation"] > ul ul > li > a:hover,
	fieldset[id="externalNavigation"] > ul ul > li > a:focus {
		background-color:			rgba(255,255,255,0.6);
	}

	fieldset[id="externalNavigation"] > ul li[id="data-mining"] > a:hover > span[class~="icon"],
	fieldset[id="externalNavigation"] > ul li[id="data-mining"] > a:focus > span[class~="icon"] {
		background-image:			url("../graphics/contact-active-2.png");
	}
	
	fieldset[id="externalNavigation"] > ul li[id="knowledge-representation"] > a:hover > span[class~="icon"],
	fieldset[id="externalNavigation"] > ul li[id="knowledge-representation"] > a:focus > span[class~="icon"] {
		background-image:			url("../graphics/contact-active-3.png");
	}
	fieldset[id="externalNavigation"] > ul li[id="knowledge-interaction"] > a:hover > span[class~="icon"],
	fieldset[id="externalNavigation"] > ul li[id="knowledge-interaction"] > a:focus > span[class~="icon"] {
		background-image:			url("../graphics/contact-active-4.png");
	}
	fieldset[id="externalNavigation"] > ul li[id="unified-design"] > a:hover > span[class~="icon"],
	fieldset[id="externalNavigation"] > ul li[id="unified-design"] > a:focus > span[class~="icon"] {
		background-image:			url("../graphics/contact-active-5.png");
	}

	fieldset[id="externalNavigation"] > ul li[id="help-contrast"] > a:hover > span[class~="icon"],
	fieldset[id="externalNavigation"] > ul li[id="help-contrast"] > a:focus > span[class~="icon"] {
		background-image:			url("../graphics/contact-active.png");
	}
	fieldset[id="externalNavigation"] > ul li[id="help-email"] > a:hover > span[class~="icon"],
	fieldset[id="externalNavigation"] > ul li[id="help-email"] > a:focus > span[class~="icon"] {
		background-image:			url("../graphics/contact-active.png");
	}
	fieldset[id="externalNavigation"] > ul li[id="help-viewer"] > a:hover > span[class~="icon"],
	fieldset[id="externalNavigation"] > ul li[id="help-viewer"] > a:focus > span[class~="icon"] {
		background-image:			url("../graphics/contact-active.png");
	}

	fieldset[id="externalNavigation"] > ul li > a:hover > strong,
	fieldset[id="externalNavigation"] > ul li > a:focus > strong  {
		color:					hsl(119,100%,30%);
	}
	fieldset[id="externalNavigation"] > ul li[id="data-mining"] > a:hover > strong,
	fieldset[id="externalNavigation"] > ul li[id="data-mining"] > a:focus > strong  {
		color:					hsl(276,100%,30%);
	}
	fieldset[id="externalNavigation"] > ul li[id="knowledge-representation"] > a:hover > strong,
	fieldset[id="externalNavigation"] > ul li[id="knowledge-representation"] > a:focus > strong  {
		color:					hsl(318,100%,30%);
	}
	fieldset[id="externalNavigation"] > ul li[id="knowledge-interaction"] > a:hover > strong,
	fieldset[id="externalNavigation"] > ul li[id="knowledge-interaction"] > a:focus > strong  {
		color:					hsl(63,100%,30%);
	}
	fieldset[id="externalNavigation"] > ul li[id="unified-design"] > a:hover > strong,
	fieldset[id="externalNavigation"] > ul li[id="unified-design"] > a:focus > strong  {
		color:					hsl(195,100%,30%);
	}

	fieldset[id="externalNavigation"] > ul li > a:hover > span[class~="abstract"],
	fieldset[id="externalNavigation"] > ul li > a:focus > span[class~="abstract"] {
		color:					#555;
	}
	
	
}