/*-------------------------------------------------*/
/*-------------------------------------------------*/
/* ------------------- HEADER ---------------------*/
/*-------------------------------------------------*/
/*-------------------------------------------------*/

#logo {
	position			: relative;
	top					: 15px;
	left				: 419px;
	background-image	: url("../pictures/header/menu_logo.jpg");
	height				: 72px;
	width				: 122px;
	z-index				: 1;
}

#logo a {
	display	: block;
	height	: 72px;
	width	: 122px;
}

.menu {
    position	: relative;
	top			: -33px;
	background	: url("../pictures/header/background_menu.jpg") no-repeat center center;
    list-style	: none; 
    text-align	: center;
	margin		: 0px;
	padding		: 0px;
	width		: 960px;
	height		: 29px;
}

.menu li {
    position	: relative; /* must set it as relative, because .hover class top and left with absolute position will be positioned according to li.    */ 
    float		: left;
    width		: 106px;
    height		: 29px;
}

.menu li a {
    z-index		: 20; /* z-index must be higher than .hover class */
    display		: block; /* display as block and set the height according to the height of the menu to make the whole LI clickable   */ 
    height		: 29px;  
    position	: relative;
}

.menu li .hover {
	cursor		: pointer;
    position	: absolute; /* must be postion absolute     */
    width		: 106px;/*  width, height, left and top to fill the whole LI item   */  
    height		: 29px;  
    left		: 0px;   
    top			: 0px;
    z-index		: 0;
    display		: none;
}

.submenu {
    position	: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ 
    list-style	: none;
	padding		: 0px;
	margin		: 0px;
    left		: 0px;
	top			: 29px;  
    background	: #1b1b1b;
    display		: none;
    width		: 106px;
}

.submenu li{
    width	: 106px;  
    z-index		: 20; /* z-index must be higher than .hover class */  
}

.submenu li a {
    position	: relative;
    z-index		: 20; /* z-index must be higher than .hover class */  
    display		: block; /* display as block and set the height according to the height of the menu to make the whole LI clickable   */ 
    height		: 29px;
    width		: 106px;
} 

#menu-01 {
	left		: 101px;
    background	: url('../pictures/header/menu_esthetics_off.jpg') no-repeat center center;     
}

#menu-01-hover {
    background	: url('../pictures/header/menu_esthetics_on.jpg') no-repeat center center; 
}

#menu-01-hover2 {
	left		: 101px;
    background	: url('../pictures/header/menu_esthetics_on.jpg') no-repeat center center; 
}

#menu-02 {
	left		: 101px;
    background	: url('../pictures/header/menu_artists_off.jpg') no-repeat center center;     
}

#menu-02-hover {
    background	: url('../pictures/header/menu_artists_on.jpg') no-repeat center center; 
}

#menu-02-hover2 {
	left		: 101px;
    background	: url('../pictures/header/menu_artists_on.jpg') no-repeat center center; 
}

#menu-03 {
	left		: 101px;
    background	: url('../pictures/header/menu_creations_off.jpg') no-repeat center center;     
}

#menu-03-hover {
    background	: url('../pictures/header/menu_creations_on.jpg') no-repeat center center; 
}

#menu-03-hover2 {
	left		: 101px;
    background	: url('../pictures/header/menu_creations_on.jpg') no-repeat center center; 
}

#menu-04 {
	left		: 223px;
    background	: url('../pictures/header/menu_artisans_off.jpg') no-repeat center center;     
}

#menu-04-hover {
    background	: url('../pictures/header/menu_artisans_on.jpg') no-repeat center center; 
}

#menu-04-hover2 {
	left		: 223px;
    background	: url('../pictures/header/menu_artisans_on.jpg') no-repeat center center; 
}

#menu-05 {
	left		: 223px;
    background	: url('../pictures/header/menu_emotions_off.jpg') no-repeat center center;     
}

#menu-05-hover {
    background	: url('../pictures/header/menu_emotions_on.jpg') no-repeat center center; 
}

#menu-05-hover2 {
	left		: 223px;
    background	: url('../pictures/header/menu_emotions_on.jpg') no-repeat center center; 
}

#menu-06 {
	left		: 223px;
    background	: url('../pictures/header/menu_connections_off.jpg') no-repeat center center;     
}

#menu-06-hover {
    background	: url('../pictures/header/menu_connections_on.jpg') no-repeat center center; 
}

#menu-06-hover2 {
	left		: 223px;
    background	: url('../pictures/header/menu_connections_on.jpg') no-repeat center center; 
}

#menu-07 {
    background	: url('../pictures/header/submenu_contacts_off.jpg') no-repeat center center;     
}

#menu-07-hover {
    background	: url('../pictures/header/submenu_contacts_on.jpg') no-repeat center center; 
}

#menu-08 {
    background	: url('../pictures/header/submenu_boutiques_off.jpg') no-repeat center center;     
}

#menu-08-hover {
    background	: url('../pictures/header/submenu_boutiques_on.jpg') no-repeat center center; 
}