/*-----------------------------------------------------------------------------
Overlapping CSS Navigation
version:   1.0
date:      09/12/06
author:    george ornbo
email:     george at shapeshed dot com

Licensed under a 2.0 Creative Commons License

-----------------------------------------------------------------------------*/

*
	{
	border:0;
	margin:0;
	padding:0;
}

/*-----------------------------------------------------------------------------

Define the width of the nav div

-----------------------------------------------------------------------------*/

#nav
	{ 
	width:570px; 
	height: 32px;
	margin: 0;
	padding: 0;
	}

	
#nav ul 
	{
	list-style:none;
	width: 570px;
	height: 32px;
	margin: 0;
	padding: 0;
	}

#nav li 
	{
    list-style: none;
	display: inline;
	text-align: center;
	}

#nav li a 
	{
	text-decoration: none;
	display:block;
	float:left;	
	background: url('../_images/en/header/nav.gif') no-repeat;
	}	
	
/*-----------------------------------------------------------------------------

Define the width of each li item. This is used as a letter box to show the 
correct part of the background image

-----------------------------------------------------------------------------*/	
	
	
li#nav_destination a {
	width:151px;
	height:32px;
	 }
li#nav_event_calendar a {
	width:140px;
	height:32px;
	 }
li#nav_audio_translation a {
	width:140px;
	height:32px;
	 }
li#nav_travel_companies a {
	width:139px;
	height:32px;
	 }
	
/*-----------------------------------------------------------------------------

Position the background image within the left boxes we have created. Use hover states
to show the correct background position for hover states.

A negative margin is used to show the whole tab. As this doesn't work in IE a 
separate stylesheet is used for IE6 and below.

-----------------------------------------------------------------------------*/	

li#nav_destination a:link, li#nav_destination a:visited {	
	background-position: -0px -0px;
	}
	
li#nav_destination a:hover, li#nav_destination a:focus {	
	background-position: 0px -192px;
	}
	
li#nav_event_calendar a:link, li#nav_event_calendar a:visited {	
	background-position: -151px 0px;
	}
	
li#nav_event_calendar a:hover, li#nav_event_calendar a:focus {	
	background-position: -151px -256px;
	}	
	
li#nav_audio_translation a:link, li#nav_audio_translation a:visited {	
	background-position: -291px 0px;
	}
	
li#nav_audio_translation a:hover, li#nav_audio_translation a:focus {	
	background-position: -291px -64px;
	}	
	
li#nav_travel_companies a:link, li#nav_travel_companies a:visited {	
	background-position: -431px 0px;
	}
	
li#nav_travel_companies a:hover, li#nav_travel_companies a:focus {	
	background-position: -431px -64px;
	}

/*-----------------------------------------------------------------------------

Set the on states using the body id.

-----------------------------------------------------------------------------*/	

body#destinations li#nav_destination a:link, body#destinations li#nav_destination a:visited {
	background-position: 0px -64px;
	width: 151px;
	}

body#destinations li#nav_event_calendar a:link, body#destinations li#nav_event_calendar a:visited {
	background-position: -151px -32px;
	width: 140px;
	margin-left: 0px;
	}
	
body#destinations li#nav_event_calendar a:hover, body#destinations li#nav_event_calendar a:focus {
	background-position: -151px -64px;
	width: 140px;
	margin-left: 0px;
	}




body#event_calendar li#nav_event_calendar a:link, body#event_calendar li#nav_event_calendar a:visited {	
	background-position: -141px -128px;
	width: 150px;
	margin-left: -10px;
	}
	
body#event_calendar li#nav_destination a:link, body#event_calendar li#nav_destination a:visited {	
	background-position: -0px -96px;
	}

body#event_calendar li#nav_destination a:hover, body#event_calendar li#nav_destination a:focus {
	background-position: -0px -128px;
	}

body#event_calendar li#nav_audio_translation a:link, body#event_calendar li#nav_audio_translation a:visited {	
	background-position: -291px -32px;
	width: 130px;
	margin-left: 0px;
	}
	
body#event_calendar li#nav_audio_translation a:hover, body#event_calendar li#nav_audio_translation a:focus {	
	background-position: -291px -64px;
	width: 130px;
	margin-left: 0px;
	}
	
body#event_calendar li#nav_travel_companies a:link, body#event_calendar li#nav_travel_companies a:visited {	
	background-position: -411px -32px;
	width: 159px;
	margin-left: -10px;
	}
	
body#event_calendar li#nav_travel_companies a:hover, body#event_calendar li#nav_travel_companies a:focus {	
	background-position: -411px -64px;
	width: 159px;
	margin-left: -10px;
	}
	
	
	

body#translations li#nav_event_calendar a:link, body#translations li#nav_event_calendar a:visited {	
	background-position: -151px -160px;
	}

body#translations li#nav_event_calendar a:hover, body#translations li#nav_event_calendar a:focus {	
	background-position: -151px -192px;
	}
	
body#translations li#nav_audio_translation a:link, body#translations li#nav_audio_translation a:visited {	
	background-position: -281px -192px;
	width: 150px;
	margin-left: -10px;
	}

body#translations li#nav_travel_companies a:link, body#translations li#nav_travel_companies a:visited {	
	background-position: -431px -160px;
	width: 139px;
	}
	
body#translations li#nav_travel_companies a:hover, body#translations li#nav_travel_companies a:focus {	
	background-position: -431px -192px;
	width: 139px;
	}
	
	
	
	
body#travel_companies li#nav_travel_companies a:link, body#travel_companies li#nav_travel_companies a:visited {	
	background-position: -416px -256px;
	width: 154px;
	margin-left: -5px;
	}
	
body#travel_companies li#nav_audio_translation a:link, body#travel_companies li#nav_audio_translation a:visited {	
	background-position: -291px -224px;
	width: 130px;
	}

body#travel_companies li#nav_audio_translation a:hover, body#travel_companies li#nav_audio_translation a:focus {	
	background-position: -291px -256px;
	width: 130px;
	}

body#travel_companies li#nav_event_calendar a:hover, body#travel_companies li#nav_event_calendar a:focus {	
	background-position: -151px -256px;
	}