/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)  html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} 

body {
	font: 14px/1em Geneva, Arial, sans-serif;
	padding: 1em; 
} */
nav {
	a {
		color: inherit;
		display: block;
		text-decoration: none;
	}
}
.main-navigation {
	.cf;
/*	font-size: 0.8em; */
	text-shadow: 0 1px 1px #ccc;
	
	ul, li, a {
		float: left;
	}
	ul {
/*		border: 1px solid #ddd; 
		border: 1px solid #ff1200;*/
		.border-radius();
		.linear-gradient();
		list-style:none;
	}

	li {
		position: relative;
		text-align: left;
		border-right: 1px solid #f2f2f2; 
		a {
/*			.linear-gradient(#dfdfdf, #c0bebe, 100%);   /*grey */
		margin-left: 5px;
		margin-right: 5px;
		background: #f2f2f2 !important; /* Old browsers */
    	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c2c2c2), to(#999999)) !important;
		background-image: -moz-linear-gradient(#c2c2c2, #999999) !important;
		background-image: -webkit-linear-gradient(#c2c2c2, #999999) !important;
		background-image: -o-linear-gradient(#c2c2c2, #999999) !important;
		background: -ms-linear-gradient(#c2c2c2, #999999) !important;
	 	background: linear-gradient(#c2c2c2, #999999) !important;
		text-align: left;
		.border-radius(3px);
		}
	}
	li:hover {
		a {
		/*	.linear-gradient(#dfdfdf, #c0bebe, 100%);  grey */
    	color: #fff;
		background: #6390cb !important; /* Old browsers */
    	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c2c2c2), to(#999999)) !important;
		background-image: -moz-linear-gradient(#c2c2c2, #999999) !important;
		background-image: -webkit-linear-gradient(#c2c2c2, #999999) !important;
		background-image: -o-linear-gradient(#c2c2c2, #999999) !important;
		background: -ms-linear-gradient(#c2c2c2, #999999) !important;
	 	background: linear-gradient(#c2c2c2, #999999) !important;
		.border-radius(3px);
		}
		.children {
			left: 50%;
			
			a {
				background: none;
			}
			a:hover {
				background: #133485; /* red */
				color: #133485;
			}
		}
	}
	li:last-child {
		border-right: none;
	}
	a {
		.border-radius(3px);
		height: auto; 
		line-height: 35px; 
		margin: 3px;
		padding: 0 15px;
	}
	.children {
		background: #fff;
		.box-shadow();
		left: -999em;
		margin-left: -65px;
		position: absolute;
		top: 30px;
		width: 230px; 
		z-index: 99;
		
		li, a {
			float: none;
			text-align: left;
		}
		li {
			border-right: none;
		}
		a {
			.border-radius(3px);
			height: auto;
			line-height: 30px;
			margin: 3px;
		}
	}
}

.border-radius (@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}
.box-shadow (@x: 0, @y: 5px, @blur: 5px, @spread: -5px, @color: #000) {
	-moz-box-shadow: @x @y @blur @spread @color;
	-webkit-box-shadow: @x @y @blur @spread @color;
	box-shadow: @x @y @blur @spread @color;
}
.linear-gradient (@start: #fff, @end: #ddd, @percent: 100%) {
	background: @start; /* Old */
	background: -moz-linear-gradient(top,  @start 0%, @end @percent); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(@percent,@end)); /* Chrome, Safari 4+ */
	background: -webkit-linear-gradient(top,  @start 0%,@end @percent); /* Chrome 10+, Safari 5.1+ */
	background: -o-linear-gradient(top,  @start 0%,@end @percent); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  @start 0%,@end @percent); /* IE 10+ */
	background: linear-gradient(top,  @start 0%,@end @percent); /* W3C */
}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

@media only screen and (max-width: 640px) {
	.main-navigation {
		ul {
			border: none;
			background: none;
			.border-radius(0);
			list-style:none;
		}
		li {
			border-right: none;
		}
		li:hover {
			a {
				.linear-gradient(#133485, #133485, 100%);
				color: #fff;
				text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
			}
			.children {			
				a {
					color: #000;
					text-shadow: 0 1px 1px #fff;
					padding: 0 0 0 5px;
					border: 0;
				}
				a:hover {
					.linear-gradient(#133485, #b91705, 100%); /* RED */
					color: #fff;
					text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
				}
			}
		}
		a {
			border: 1px solid #ddd;
			.border-radius();
			font-size: 12px;
			height: auto;
			.linear-gradient();
			line-height: 1em;
			padding: 15px; 
		}
		.children {
			border: 1px solid #133485;
			.border-radius(5px);
			top: 40px;
		}
	}
	.instructions {
		.border-radius();
		color: #fff;
		font-size: 1.2em;
		.linear-gradient(#ff8400, #e07400, 100%);
		line-height: 1em;
		margin: 0 0 5px;
		padding: 5px 10px;
		text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
	}
}

.main-navigation select {
/*	font-size: 1.5em; */
	font-size: 10pt;
	width: 300px;
	margin: 10px 10px 0px;
	border: #133485 solid 1px;
}