

/*
--------------------------------------------------------------------
-                      Style du corps du document                  -
--------------------------------------------------------------------
*/

img{
	border: none;
}

body
{
	/* Taille de la page */
	margin: 0px;
	width: 100%;
	height: 100%;
 	min-width: 1000px;
	max-width: 1600px;
	
	/* Fon du body */
	background-image: url(commune_gfx/img_fond_de_page.gif);
	background-position: center;
}

#page
{
	display: block;
	width:1000px;
	
	overflow:hidden;
	
	margin-left: auto;
	margin-right: auto;
}



/*
--------------------------------------------------------------------
-                  Tuturiaux utilisés pour les "tableaux"          -
--------------------------------------------------------------------
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
--------------------------------------------------------------------
*/

/*
--------------------------------------------------------------------
-                          Style l'en-tete                         -
--------------------------------------------------------------------
 */

#en_tete
{
	/* Type de position et marges */
	position: relative;
	
	/* Position et taille */
	width: 1000px;
	height: 230px;
	
	overflow: hidden;
	
	/* Fond */
	background-image: url(commune_gfx/img_en_tete_fond.gif);
}



#en_tete_logo
{

	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:10px;
	top:0px;
	width:300px;
	height:120px;
	
	/* Fond */
	/*background-image: url(commune_gfx/img_en_tete_logo.gif);*/
}

#en_tete_rechercher
{

	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:10px;
	top:120px;
	height:60px;
	width: 300px;
	
	text-align: center;
	
	overflow: hidden;
}



#en_tete_ours
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:310px;
	top:0px;
	width: 220px;
	height: 170px;
	
	/* Fond */
	background-image: url(commune_gfx/img_en_tete_ours_normal.jpg);
}


#en_tete_illustrations
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:530px;
	top:40px;
	width: 460px;
	height: 130px;

	text-align: center;
}


#en_tete_mon_panier
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:530px;
	top:40px;
	width: 460px;
	height: 40px;
}


#en_tete_panier
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:530px;
	top:80px;
	width: 460px;
	height: 130px;
	
	/* Police */
	color: #FFFFFF;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	font-family: Verdana;
}

#en_tete_boutons
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:530px;
	top:10px;
	width: 440px;
	height: 30px;
	
	text-align: right;
	vertical-align: bottom;
}


#en_tete_panier img
{
	background-color: white;
	
	/* */
	border-width: 1px;
	border-style: solid;
	border-color: #a2a2f8;
	
}

#en_tete_menu
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:10px;
	top:170px;
	width: 980px;
	height: 50px;
}


/*
--------------------------------------------------------------------
-                         Style corps de page                      -
--------------------------------------------------------------------
*/



#corps
{

	/* Type de position et marges */
	position: relative;
	overflow: hidden;
	
	/* Position et taille */
	width: 1000px;
	
	/* Padding */
	padding-left: 10px;
	padding-right: 10px;
	
	/* Fond */
	background-image: url(commune_gfx/img_fond_corps.gif);
	background-repeat: repeat-y;
}


#corps_haut
{
	/* Type de position et marges */
	position: relative;
	overflow: hidden;
	
	/* Position et taille */
	width: 980px;
	height: 60px;
	
	/* Fond */
	background-image: url(commune_gfx/img_corps_haut.gif);
	background-repeat: no-repeat;
}


#corps_haut_titre_gauche
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:30px;
	top: 20px;
	width: 220px;
	height: 30px;

}

#corps_haut_titre_droite
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:300px;
	top:20px;
	width: 150px;
	height: 30px;
}



#corps_milieu
{
	/* Type de position et marges */
	position: relative;
	overflow: hidden;
	
	/* Position et taille */
	width: 980px;
}

#corps_milieu_1
{
	/* Position et taille */
	width: 30px;
	border: none;
}

#corps_milieu_1_image
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left: 0px;
	top: 0px;
	width: 30px;
	height: 100%;
}


#corps_conteneur_gauche
{
	/* Position et taille */
	width: 220px;
	height: 520px;
	border: none;
	
	/* Fond */
	background-color: rgb(211,211,250);
}


#corps_milieu_2
{
	/* Position et taille */
	width: 50px;
	bottom: 0px;
	border: none;
}

#corps_milieu_2_image
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left: 250px;
	top: 0px;
	width: 50px;
	height: 100%;
}



#corps_conteneur_droite
{
	/* Position et taille */
	width: 650px;
	border: none;
	
	/* Fond */
	background-color: rgb(211,247,214);
}

#corps_milieu_3
{
	
	/* Position et taille */
	width: 30px;
	bottom: 0px;
	border: none;
}

#corps_milieu_3_image
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left: 950px;
	top: 0px;
	width: 30px;
	height: 100%;
}



#corps_bas
{
	/* Type de position et marges */
	position: relative;
	overflow: hidden;
	
	/* Position et taille */
	width: 980px;
	height: 30px;
	
	/* Fond */
	background-image: url(commune_gfx/img_corps_bas.gif);
	background-repeat: no-repeat;
}




/*
--------------------------------------------------------------------
-                       Style corps de page VERT                   -
--------------------------------------------------------------------
*/


#corps_vert_haut
{
	/* Type de position et marges */
	position: relative;
	overflow: hidden;
	
	/* Position et taille */
	width: 980px;
	height: 60px;
	
	/* Fond */
	background-image: url(commune_gfx/img_corps_vert_haut.gif);
}



#corps_vert_haut_titre
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left:25px;
	top:20px;
	width: 150px;
	height: 30px;
}



#corps_vert_milieu
{
	/* Type de position et marges */
	position: relative;
	overflow: hidden;
	
	/* Position et taille */
	width: 980px;
}

#corps_vert_gauche
{
	/* Position et taille */
	width: 30px;
	border: none;
}

#corps_vert_gauche_image
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left: 0px;
	top: 0px;
	width: 30px;
	height: 100%;
}

#corps_vert_conteneur
{
	/* Position et taille */
	width: 920px;
	border: none;
	
	/* Fond */
	background-color: rgb(211,247,214);
}

#corps_vert_droite
{
	
	/* Position et taille */
	width: 30px;
	bottom: 0px;
	border: none;
}

#corps_vert_droite_image
{
	/* Type de position et marges */
	position:absolute;
	
	/* Position et taille */
	left: 950px;
	top: 0px;
	width: 30px;
	height: 100%;
}



#corps_vert_bas
{
	/* Type de position et marges */
	position: relative;
	overflow: hidden;
	
	/* Position et taille */
	width: 980px;
	height: 30px;
	
	/* Fond */
	background-image: url(commune_gfx/img_corps_vert_bas.gif);
}



/*
--------------------------------------------------------------------
-                         Style pied de page                      -
--------------------------------------------------------------------
*/

#pied_de_page
{
	/* Type de position et marges */
	position: relative;
	
	/* Position et taille */
	left: 0px;
	top: 0px;
	width: 1000px;
	height: 170px;
	
	/* Fond */
	background-image: url(commune_gfx/img_pied_de_page_fond.gif);
	background-repeat: no-repeat;
	background-position: bottom;
}

#menu_bas
{
	/* Padding */
	padding-top: 10px;
	padding-bottom: 10px;
	
	/* Couleur et alignement des textes */
	text-align: center;
	
	/* Couleur */
	color: #000000;
}

#pied_de_page_ours
{
	
	/* Type de position et marges */
	position:absolute;
	 
	/* Position et taille */
	left: 0px;
	top: 0px;
	width: 260px;
	height: 170px;
	
	/* Fond */
	background-image: url(commune_gfx/img_pied_de_page_ours_fee.jpg);
	background-repeat: no-repeat;
}

#pied_de_page_droite
{
	
	/* Type de position et marges */
	position:absolute;
	
	overflow: hidden;
	
	/* Position et taille */
	left: 330px;
	top: 10px;
	width: 650px;
	height: 130px;
}

#pied_de_page_cytadelle
{
    display: block;
    position: absolute;
    
    right: 10px;
    bottom: 0px;
    width: 100px;
    height: 40px;
}

#pied_de_page_droite img
{
	padding-left: 3px;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	background-color: white;
	
	/* */
	border-width: 1px;
	border-style: solid;
	border-color: #a2a2f8;
		
	/* Coins arrondis */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}



/*
--------------------------------------------------------------------
-                                 Menu                             -
--------------------------------------------------------------------
*/
div.menu
{
	/* Type de position*/
	display:none;
	position:absolute;
	
	/* Position et taille */
	width:200px;
	height:200px;
	z-index:5;
	
	/* Marges */
	margin-top: 215px;
	
	/* Padding */
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	
	/* Fond */
	background-color: rgb(216,235,255);
	border: solid 1px;
	
	/* Coins arrondis */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}


/*
--------------------------------------------------------------------
-                             Formulaires                          -
--------------------------------------------------------------------
*/


#en_tete_rechercher_label
{
	/* Taille */
	width: 100px;
	height: 30px;
	
	/* Bordures */
	border-style: none;
	border-width: 0px;
	
	/* Fond */
	background-image: url(commune_gfx/label_je_recherche.gif);
	background-repeat: no-repeat;
}

#en_tete_rechercher_input
{

	/* Taille */
	width: 150px;
	height: 20px;
	
	/* Bordures */
	border-style: solid;
	border-width: 1px;
	border-color: rgb(170,194,252);
	
	/* Police */
	color: #000000;
	font-size: 12px;
	font-style: normal;
	font-family: Verdana;
	
	/* Fond */
	background-color: rgb(216,235,255);

}
#en_tete_rechercher_ok
{
	/* Taille */
	width: 30px;
	height: 30px;
	
	/* Bordures */
	border-style: none;
	border-width: 0px;
	
	/* Fond */
	background-image: url(commune_gfx/label_ok.gif);
}




/*
--------------------------------------------------------------------
-                          Boutons sans image                      -
--------------------------------------------------------------------
*/

#btn_nos_marques
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 0px;
	width: 120px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_nos_marques.gif);
	background-position: left top;
}
#btn_nos_marques:hover
{
	background-position: left bottom;
}


#btn_premier_age
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 120px;
	width: 110px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_premier_age.gif);
	background-position: left top;
}
#btn_premier_age:hover
{
	background-position: left bottom;
}




#btn_jouets
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 230px;
	width: 80px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_jouets.gif);
	background-position: left top;
}
#btn_jouets:hover
{
	background-position: left bottom;
}


#btn_jeux_de_societe
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 310px;
	width: 130px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_jeux_de_societe.gif);
	background-position: left top;
}
#btn_jeux_de_societe:hover
{
	background-position: left bottom;
}




#btn_activites
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 440px;
	width: 100px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_activites.gif);
	background-position: left top;
}
#btn_activites:hover
{
	background-position: left bottom;
}




#btn_plein_air
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 540px;
	width: 90px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_plein_air.gif);
	background-position: left top;
}
#btn_plein_air:hover
{
	background-position: left bottom;
}


#btn_peluches
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 630px;
	width: 90px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_peluches.gif);
	background-position: left top;
}
#btn_peluches:hover
{
	background-position: left bottom;
}

#btn_meubles_et_deco
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 720px;
	width: 150px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_meubles_et_deco.gif);
	background-position: left top;
}
#btn_meubles_et_deco:hover
{
	background-position: left bottom;
}

#btn_art_de_vivre
{
	/* Type de position*/
	position:absolute;
	
	/* Position et taille */
	top: 0px;
	left: 870px;
	width: 110px;
	height: 50px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_art_de_vivre.gif);
	background-position: left top;
}
#btn_art_de_vivre:hover
{
	background-position: left bottom;
}





#btn_creer_un_compte
{
	/* Position et taille */
	width: 130px;
	height: 25px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_creer_un_compte.gif);
	background-position: left top;
}
#btn_creer_un_compte:hover
{
	background-position: left bottom;
}



#btn_sidentifier
{
	/* Position et taille */
	width: 90px;
	height: 25px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_sidentifier.gif);
	background-position: left top;
}
#btn_sidentifier:hover
{
	background-position: left bottom;
}


#btn_mon_compte
{
	/* Position et taille */
	width: 115px;
	height: 25px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_mon_compte.gif);
	background-position: left top;
}
#btn_mon_compte:hover
{
	background-position: left bottom;
}

#btn_magasin
{
	/* Position et taille */
	width: 80px;
	height: 25px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_magasin.gif);
	background-position: left top;
}
#btn_magasin:hover
{
	background-position: left bottom;
}



#btn_deconnexion
{
	/* Position et taille */
	width: 115px;
	height: 25px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_deconnexion.gif);
	background-position: left top;
}
#btn_deconnexion:hover
{
	background-position: left bottom;
}




#btn_accueil
{
	/* Position et taille */
	width: 80px;
	height: 25px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_accueil.gif);
	background-position: left top;
}
#btn_accueil:hover
{
	background-position: left bottom;
}


#btn_contacts
{
	/* Position et taille */
	width: 80px;
	height: 25px;
	
	/* Fond */
	background-repeat: no-repeat;
	background-image:url(../gfx/boutons/btn_contacts.gif);
	background-position: left top;
}
#btn_contacts:hover
{
	background-position: left bottom;
}

