/******************************************************************************
**************************** STYLE DU CONTENEUR *******************************
******************************************************************************/
body
{
	background: url('pages/index/motif_fond.gif') repeat-x top, url('pages/index/motif_fond.gif') repeat-x 200px,
				url('pages/index/motif_fond.gif') repeat-x bottom;
	background-color: rgba(140,100,140,1);
}

#base
{
	position: relative;
	top: -8px;
	height: 810px;
	width: 900px;
	margin: auto;
	background-color: rgba(255,255,255,1);
}

header
{
	top: -5px;
	height: 150px;
}

#bloc_header
{
	position: relative;
	top: -8px;
	height: 150px;
	width: 900px;
	margin: auto;
	background-color: rgba(140,100,140,1);
}

#drapeau
{
	position: absolute;
	top: 15px;
	left: 20px;
	height: 85px;
	width: 120px;
	background: url('pages/index/ghad.gif')
}

#smiley
{
	position: absolute;
	top: 30px;
	left: 560px; /*550px;*/
	height: 100px;
	width: 114px;
	background: url('pages/index/smiley.png')
}

#smiley_F
{
    transition-property: opacity;
    transition-duration: 500ms;
	transition-timing-function: linear;
	position: absolute;
	top: 30px;
	left: 560px; /*550px;*/
	height: 100px;
	width: 114px;
	background: url('pages/index/smiley_F.png');
	opacity: 1; /*0;*/
}

#smiley_F:hover
{
	opacity: 1;
}

#titre
{
	position: absolute;
	top: -10px; /*-20px;*/
	left: 160px;
}

#titre h1
{
	font-size: 38px; /*45px;*/
    color: rgba(240,110,180,0.9);
    text-shadow: -2px -2px 4px rgba(250,200,250,1), 2px 2px 4px rgba(50,20,50,1);
}


#sous-titre
{
	position: absolute;
	top: 45px; /*35px;*/
	left: 160px;
}

#sous-titre h1
{
	font-size: 28px; /*35px;*/
	font-style: italic;
    color: rgba(240,110,180,0.8);
    text-shadow: -2px -2px 4px rgba(250,200,250,1), 2px 2px 4px rgba(50,20,50,1);
}

#photo
{
	position: absolute;
	top: -11px;
	left: 180px;
	width: 700px;
	height: 20px;
	text-align: right;
	z-index: 10;
}




#photo img
{
    transition-property: width, height;
    transition-duration: 500ms;
	transition-timing-function: linear;
	width: 210px;
	height: 140px;
}

#photo img:hover
{
	width: 640px;
	height: 427px;
	box-shadow: -2px -2px 4px rgba(250,200,250,1), 5px 5px 4px rgba(50,20,50,1);
	border-radius: 10px;
}

footer
{
	position: relative;
	top: -33px;
	height: 30px;
	margin: auto;
}

#bloc_footer
{
	position: relative;
	top: 4px;
	height: 30px;
	width: 900px;
	margin: auto;
	text-align: center;
	background: rgba(140,100,140,1);
	padding-top: 0px;
}

#bloc_footer h4
{
	position: relative;
	top: 5px;
	color: rgba(230,230,230,1);
}

#bloc_footer h5
{
	position: relative;
	top: 5px;
	color: rgba(230,230,230,1);
}


/******************************************************************************
********************************* NAVIGATION **********************************
******************************************************************************/

#bloc_menu
{
	position: absolute;
	top: 120px;
	left: 0px; /*20px;*/
	width: 900px;
	height: 35px;
	margin: auto;

}

#menu_1
{
	position: absolute;
	left: 0px;
	z-index: 1;
}

#menu_2
{
	position: absolute;
	left: 140px; /*130px;*/
	z-index: 1;
}

#menu_3
{
	position: absolute;
	left: 280px; /*260px;*/
	z-index: 1;
}

#menu_4
{
	position: absolute;
	left: 420px; /*390px;*/
	z-index: 1;
}

/* Paramètrage de la hauteur finale de chaque menu après déroulement, qui dépend
du nombre d'items du menu considéré, à savoir 45px pour l'en-tête du menu, 20px
pour chaque Item, plus 10px de marge basse */

#menu_1 nav:hover
{
	position: relative;
	top: -1px;
	left: 1px;
	height: 275px;
}

#menu_2 nav:hover
{
	position: relative;
	top: -1px;
	left: 1px;
	height: 135px;
}

#menu_3 nav:hover
{
	position: relative;
	top: -1px;
	left: 1px;
	height: 135px;
}

#menu_4 nav:hover
{
	position: relative;
	top: -1px;
	left: 1px;
	height: 160px; /*155px;*/
}

/* Paramètrage du comportement commun à tous les menus */

nav
{
	/* Paramètres de la transition */
    transition-property: top, color, height, background-color;
    transition-duration: 500ms;
	transition-timing-function: linear;
	/* État initial */
    width: 140px; /*130px;*/
    height: 30px;
    color: rgba(230,230,230,1);
    background-color: rgba(180,180,180,0.5);
	/* Masquage de la liste à puce du menu déroulant */
	overflow: hidden;
}

nav:hover
{
	color: rgba(245,245,245,1);
	background-color: rgba(150,130,150,1);
	box-shadow: 4px 8px 8px #1c1a19;
}

.menu
{
	position: relative;
	top: -20px; /*-15px;*/
	width: 130px; /*130px;*/
	z-index: 1;
}

.menu h3
{
	text-shadow: 2px 2px 4px black;
	text-align: center;
}

.menu a
{
    transition-property: color, background-color;
    transition-duration: 350ms;
	transition-timing-function: linear;
	text-decoration: none;
	color: rgba(245,245,245,1);
}

.menu a:hover
{
	color: rgba(110,80,110,1);
	background-color: rgba(230,230,230,1);
}



.menu ul
{
	padding-left: 0px;
    list-style-type: none;		/* suppression des puces de la liste */
}


/******************************************************************************
************************************ PAGE *************************************
******************************************************************************/

#cadre
{
	height: 810px;
	width: 900px;
	border-style: none;
	padding: -5px;
}