/*
	*	These rules set up some basic colors and positioning. 
	
		body {
			background:#fff;
			border-top:7px solid #54A4DE;
			margin:0;
			padding:0;
			color:#000;
			font:76%/130% Verdana, Geneva, Arial, Helvetica, sans-serif;
		} 
		h1{
			font:2em Verdana, Geneva, Arial, Helvetica, sans-serif;
			padding:5px 0 0 10px;
			margin:0
		}
		p {
			font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;
			padding:4em 0 0 2em !important
		}
		img {
			display:block;
			margin-top:1em;
			background:#eee
		}*/

	/*
	*	The rules for navigation start here. 
	*	Heavily inspired by the following articles:
	*		http://www.alistapart.com/articles/slidingdoors/
	*		http://www.alistapart.com/articles/mountaintop/
	*		http://www.alistapart.com/articles/sprites/
	*/
		#header {
			float:left;
			width:100%;
			background:#BBD9EE;
			padding:0;
			font-size:0.8em;
			line-height:normal;
		}
		#header ul {
			margin:0;
			padding:10px 0 0 10px;
			list-style:none;
		}
		#header li {
			display:inline;
			margin:0;
			padding:0;
		}
		.navegacion {
			width: 1200px;
			font-size: 9px;
		}
	/*
	*	For the next two rules:	
	*	1. A single image is used for the two doors, rather than one.
	*	2. Ascetically, the 'font-weight:bold' was removed to closely mimic the www.digital-web.com tabs.
	*	3. The padding was modified for personal preference.
	*/
	#header a {
		float:left;
		background:#E7F1F8 url("sliding-doors-mountaintops-1.png") no-repeat left top;
		padding:0 0 0 9px;
		text-decoration:none;
		color:#000;
	}
	#header a span {
		float:left;
		display:block;
		background:#E7F1F8 url("sliding-doors-mountaintops-1.png") no-repeat right top;
		padding:4px 10px 3px 3px;
	}
	/* Commented Backslash Hack hides rule from IE5-Mac \*/
	#header a span {float:none;}
	/* End IE5-Mac hack */

	/*
	*	1. At this point many things are simplified. The hover and background colors are set,
	*	and no positions are used because we aren't swapping images
	*	2. 'padding-bottom:4px;' on the current span pushes that tab 1px higher than the others, 
	*	exposing 1px of the background color of #header and giving the effect of an underline.
	*/
	
	#header #current a span {
		padding-bottom:4px;
	}
	#header a:hover, #header a:hover span {
		background-color:#54a4de;
		color:#000;
	}
	#header #current a span, #header #current a {
		background-color:#fff;
	}