/*********************************************************************************************
 Nom : style.css
 Dernière mise à jours : 22/05/2008
 Description : Css de base
 Auteur : Pascal-André Allaire
 Email : paallaire@inpix.ca
*********************************************************************************************/

/*--------------------------------------------------------------------------------------------
!Reset des valeurs pour les balises
--------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/*********************************************************************************************
!Redéfinition balise
*********************************************************************************************/
strong { font-weight:bold;}
em { font-style:italic; }
sup {
	font-size:smaller;
	font-weight:normal;
	vertical-align:text-top
}


/*********************************************************************************************
!Class
*********************************************************************************************/

/* General */
.clear { clear:both;  height: 1%; line-height: 0; font-size: 1px;}
.float_left {
	float:left;
	margin-right: 16px;
}
.float_right {float:right;}
.display_inline { display:inline; }

/* Text */
.uppercase { text-transform:uppercase;}
.lowercase {text-transform:lowercase}
.capitalize {text-transform:capitalize;}
.text_right { text-align:right; }
.text_normal { font-weight:normal; }
.texte_fonce { color:#727272; }
.texte_rose { color:#E35491; }
.underline {
}

.blod_uppercase { text-transform:uppercase; font-weight:bold;}
.bold { font-weight:bold;}

/* Hide/show */
.hide { display:none;}
.show { visibility:hidden; }

.couleur_lien { color:#3d9ac3; }
.bordure { margin:0px 35px 28px 37px; border-top:1px solid #dbdbdb; }
.bordure_osez {
	margin:28px 0px 28px 0px;
	border-top:1px solid #dbdbdb;
}
.titre { color:#e35491; font-weight:bold; margin:0 0 27px 0; font-size:2em; line-height:1.1em; } 
.sous_titre { color:#e35491; font-weight:bold; margin:0 0 10px 0; font-size:1.4em; line-height:1.1em; } 
.bordure_top { border-top:1px solid #DBDBDB; width:100%; display:block; padding:6px 0 0 0; }

p.haut_de_page { width:100%; text-align:right; }
a.icon_haut_page { background:transparent url(../img/sante/haut_de_page.gif) no-repeat right 4px; margin:8px 0 0 0; padding:0 8px 0 0; }

/*--------------------------------------------------------------------------------------------
!Éléments commun qui se retrouvent sur plusieurs pages
--------------------------------------------------------------------------------------------*/

/*********************************************************************************************
!Couleur
*********************************************************************************************/
p, ul, span, h4 { color:#2f2f2f; }
li { color:#26637f }

/*********************************************************************************************
!img et description ( bloc avec une image + description
*********************************************************************************************/
.img_et_description { float:right; margin:0 0 15px 15px; width:274px }
.img_et_description p { padding:0 10px 0 10px; font-size:0.9em }

div.bloc_texte { width:376px; float:left; }

/*!p
*********************************************************************************************/
#colonne_gauche p,
#colonne_droite p,
#presentation_recette p { margin:0 0 15px 0; }

/* Image "plus" grand format */
p.plus { background: url(../img_en/g_plus.gif) 100px 0px no-repeat; width:100%; height:452px; text-indent:-9000px; display:block;}


/*********************************************************************************************
!liens
*********************************************************************************************/
a:link { text-decoration:none; color:#3d9ac3; }
a:visited { text-decoration:none; color:#3d9ac3;}
a:hover { text-decoration:underline; color:#3d9ac3; }
a:active { text-decoration:underline; color:#3d9ac3;}

/*********************************************************************************************
!body
*********************************************************************************************/
html, body {height: 100%;} 
body { background-color:#f9f4cc; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.2em; font-size:0.7em; }

#container { width: 1000px; text-align: left; margin:auto; position: relative; background: #fff url(../img/bg_container.gif) 0 0 repeat-y; min-height: 100% } 

/*********************************************************************************************
!header
*********************************************************************************************/

#header { background: url(../img/bg_menu_right.gif) top right no-repeat; width:30px; width:100%}
	#header h1 a { display:block; background: url(../img_en/logo_porc.jpg) 0 0 no-repeat; width:280px; height:158px; text-indent:-9000px; float:left; background-color:#f49cc2; color:#fff; }

#menu {  background: url(../img/bg_menu.gif) 0 0 repeat-x; height:83px; width:682px; float:left; background-color:#f49cc2; color:#fff; }
	#menu li { float:left; }
	#menu li a.btn_acc { display:block; background: url(../img_en/btn_acc.jpg) 0 0 no-repeat; width:140px; height:83px; text-indent:-9000px; }
	#menu li a.btn_recettes { display:block; background: url(../img_en/btn_recettes.jpg) 0 0 no-repeat; width:165px; height:83px; text-indent:-9000px; }
	#menu li a.btn_sante { display:block; background: url(../img_en/btn_sante.jpg) 0 0 no-repeat; width:118px; height:83px; text-indent:-9000px; }
	#menu li a.btn_coupe_cuisson { display:block; background: url(../img_en/btn_coupe_cuisson.jpg) 0 0 no-repeat; width:225px; height:83px; text-indent:-9000px; }
	
	#menu li a.actif { background-position:0 -89px; }
	
/*********************************************************************************************
!sous_menu
*********************************************************************************************/
#sous_menu { margin:-6px 0 0 0; width:682px; float:left; }

#sous_menu li { float:left; margin-right:4px }
	#sous_menu li a.btn_art_roti { background: url(../img/btn_art_roti.gif) 0 0 no-repeat; width:120px; height:30px; text-indent:-9000px; display:block; margin-left:35px;}
	#sous_menu li a.btn_guide_cuisson { background: url(../img/btn_guide_cuisson.gif) 0 0 no-repeat; width:129px; height:30px; text-indent:-9000px; display:block;} 
	#sous_menu li a.btn_oser { background: url(../img/btn_oser.gif) 0 0 no-repeat; width:120px; height:30px; text-indent:-9000px; display:block;}
	#sous_menu li a.btn_questionnaire { background: url(../img/btn_conaissance.gif) 0 0 no-repeat; width:200px; height:30px; text-indent:-9000px; display:block; margin-left:265px}
	#sous_menu li a.btn_francais { background: url(../img_en/btn_langue.jpg) 0 0 no-repeat; width:100px; height:30px; text-indent:-9000px; display:block; margin-left:544px}
		
	#sous_menu  li a.actif { background-position:0 -40px; }
	
/*********************************************************************************************
!Marge intérieur commun
*********************************************************************************************/
#recherche,
#visez_sante,
#colonne_gauche  { margin: 0 0 0 37px;}

/*!colonne
*********************************************************************************************/
#colonne_gauche { width:243px; float:left; display:inline; }
#colonne_droite { float:left; width:674px; margin:-60px 0 0 13px; }

body#politique #colonne_droite,
body#infolettre #colonne_droite,
body#plan_site #colonne_droite,
body#contact #colonne_droite,
body#sante #colonne_droite,
body#sante_questionnaire #colonne_droite,
body#coupe_et_cuisson #colonne_droite,
body#concours #colonne_droite { margin:-34px 0 0 13px; }

/*!contenu_principal
*********************************************************************************************/
#contenu_principal.plus {  background: url(../img_en/plus.gif) 35px 97% no-repeat; }

/*********************************************************************************************
!recherche
*********************************************************************************************/
#recherche { width:243px; float:left; display:inline; }
	#recherche h2 { background: url(../img_en/t_recherche_recettes.gif) 0 0 no-repeat; width:123px; height:36px; text-indent:-9000px; margin:0 0 20px 0; }
	
	#recherche label { margin:0 0 5px 0; display:block; }
	#recherche p { margin:0 0 4px 0 ;}

/*********************************************************************************************
!input #recherche
*********************************************************************************************/
	#recherche .select { width:234px; border:1px solid #9d9d9d; }
	#recherche .txt { width:234px; border:1px solid #9d9d9d; font-size:100%; }
	#recherche input.rec_btn_afficher { margin:5px 10px 5px 0; text-align:right; display:inline; }

/*********************************************************************************************
!presentation_recette ( accueil only et recette ? )
*********************************************************************************************/
#presentation_recette { float:left; width:674px; margin:-60px 0 0 13px; }
	#presentation_recette p { margin:0 0 4px 0 ;}
	
/*!Fils ariane
*********************************************************************************************/
#fils_ariane { margin:0 0 16px 0;}
#fils_ariane li { display:inline; color:#949494; }

/*********************************************************************************************
!pied_page
*********************************************************************************************/
#pied_page { background: url(../img/bg_pied_page.gif) 0 0 repeat-x; height:176px; padding: 10px 15px 0 17px; margin:28px 20px 0 20px }
	#pied_page ul li { display:inline; color:#949494; }
	#pied_page ul li a { color:#3d9ac4; }
	
	#pied_page p a.logo_ose_rose { background: url(../img_en/logo_ose_rose.gif) 0 0 no-repeat; width:117px; height:36px; text-indent:-9000px; display:block; }
	
/*--------------------------------------------------------------------------------------------
!Gabarit Politique de confidentialité
Description : Css seulement pour gabarit Politique de confidentialité
--------------------------------------------------------------------------------------------*/
body#politique #bloc_texte { float:left; width:442px; }

body#politique .img_politique_et_description {  margin:0 0 15px 15px; width:215px; float:left;}
	body#politique .img_politique_et_description p { padding:0 10px 0 10px; font-size:0.9em }


/*!Formulaire #form_participation et #form_infolettre
*********************************************************************************************/
#form_participation,
#form_infolettre  { padding:20px 0 20px 0; width:388px; }

	.div_i_txt { padding:0 0 10px 0; }
	.i_txt { width:234px; border:1px solid #9d9d9d; float:left}
	.label_i_txt { width:136px; margin:0 12px 0 0; display:block; float:left; text-align:right; }
	
#colonne_droite p.abonnez_vous { width:100%; text-align:right; margin:5px 0 0 0;  }

/*--------------------------------------------------------------------------------------------
!Gabarit Infolettre
Description : Css seulement pour gabarit Infolettre
--------------------------------------------------------------------------------------------*/	
body#infolettre h2.confirmation { background: url(../img/infolettre/t_confirmation.gif) 0 0 no-repeat; width:151px; height:21px; text-indent:-9000px; margin:0 0 20px 0; }
body#infolettre #liste_lien_rappel li { display:block; background:transparent url(../img/grand_livre/list_index_recherche.gif) no-repeat 0 7px; margin:8px 0 0 ;padding:0 0 0 7px; }

/*--------------------------------------------------------------------------------------------
!Gabarit Concours
Description : Css seulement pour gabarit Concours et participe concours
--------------------------------------------------------------------------------------------*/
body#concours h2.sous_titre {
	width:200px;
	height:18px;
	text-indent:-9000px;
	background-image: url(../img/concours/t_concours0812.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
}
body#concours #bloc_texte { float:left; width:348px; }
body#concours img.image_logo { margin:10px 0 10px 0; }

body#concours .img_concours_et_description {  margin:0 0 15px 15px; width:300px; float:left;}
	body#concours .img_concours_et_description p { padding:0 10px 0 10px; font-size:0.9em }
	
	body#concours dl { margin:0 0 10px 0; }
		body#concours dl dt { font-weight:bold; }
			body#concours dl dd.prix { font-size:1.2em; line-height:1.2em; font-weight:bold; }
			
	body#concours #grand_prix dt { margin:0 0 10px 0;  }
	
	body#concours a.btn_participez_concours {  background: url(../img/concours/participez_concours.gif) 0 0 no-repeat; width:161px; height:28px; text-indent:-9000px; display:block; margin:10px 0 0 0 }
	body#concours a.btn_participez_concours_gr {
	background: url(../img/concours/participez_concours_gr.gif) 0 0 no-repeat;
	width:247px;
	height:52px;
	text-indent:-9000px;
	display:block;
	margin:10px 0 0 0
}
	.bordure_top { border-top:1px solid #DBDBDB; width:348px; display:block; padding:6px 0 0 0; }
			
/*--------------------------------------------------------------------------------------------
!Gabarit Plan du site
Description : Css seulement pour gabarit Plan du site
--------------------------------------------------------------------------------------------*/	
#plan_site .bordure_haut { border-top:1px solid #dbdbdb; }

#plan_site .section { width:180px; float:left;  margin:0 40px 0 0; }
	#plan_site h2 { font-weight:bold; }
	#plan_site .section h2 { margin:20px 0 15px 0; font-weight:bold; }
	#plan_site ul { margin:0 0 20px 0; color:#3D9AC3; }
	
	#plan_site .section_avec_un_element { margin:48px 0 0 0 }/* effacer ? */

#plan_site p.mots_masculin { margin:50px 0 0 0; }

/*--------------------------------------------------------------------------------------------
!Gabarit Contactez-nous
Description : Css seulement pour gabarit Contactez-nous
--------------------------------------------------------------------------------------------*/	
#contactez_nous { margin:40px 0 0 30px; }
	#contactez_nous h2 { font-weight:bold; font-size:1.3em; line-height:1.3em; }
	#contactez_nous address { margin:0 0 10px 0; }
	
	#contactez_nous address,
	#contactez_nous ul li { font-size:1.2em; line-height:1.2em; }
	
	#contactez_nous span.moyen_communiquer { width:125px; display:block; float:left; font-weight:bold; }
	#contactez_nous span.numero { display:block; float:left; }
	#contactez_nous li.courriel { margin:0 0 10px 0; }
	
/*--------------------------------------------------------------------------------------------
!Gabarit Santé
Description : Css seulement pour gabarit Santé
--------------------------------------------------------------------------------------------*/	
body#sante h4 { margin:20px 0 20px 0; }
body#sante #colonne_droite { margin-left:0px; }	
body#sante #colonne_gauche { margin-right:13px; }
body#sante #fils_ariane.ajustement {margin:0pt 0pt 16px 13px }
body#sante div.bordure_droite { border-left:1px solid #DBDBDB; padding:0 0 0 13px }

/*********************************************************************************************
!cing_verites
*********************************************************************************************/	
body#sante h2.cing_verites { background: url(../img/sante/t_5_verite.gif) 0 0 no-repeat; width:321px; height:19px; text-indent:-9000px; margin:20px 0 20px 0; }

body#sante #liste_5_verites { padding:0 0 12px 0; border-bottom:1px solid #dbdbdb; }
	body#sante #liste_5_verites li { margin:8px 0 0 0; }
	
	
/*********************************************************************************************
!tableau_informatif
*********************************************************************************************/	
body#sante table.tableau_informatif { width:460px; margin:10px 0 10px 100px; }

	body#sante table.tableau_informatif td { padding:5px; }
	body#sante table.tableau_informatif td.sujet { background-color:#f4cde1; width:460px; font-weight:bold; }
	body#sante table.tableau_informatif td.col_titre { font-weight:bold; }
	
	body#sante table.tableau_informatif td.col1 { width:260px; }
	
	body#sante table.tableau_informatif td.col2,
	body#sante table.tableau_informatif td.col3 { width:100px; text-align:center; }
	
	body#sante table.tableau_informatif tr.ligne1 td.col1,
	body#sante table.tableau_informatif tr.ligne1 td.col2  { background-color:#fff; }
	
	body#sante table.tableau_informatif tr.ligne1 td.col3 { background-color:#f9e3ee; }
	
	body#sante table.tableau_informatif tr.ligne2 td.col1,
	body#sante table.tableau_informatif tr.ligne2 td.col2  { background-color:#fff2f8; }
	
	body#sante table.tableau_informatif tr.ligne2 td.col3 { background-color:#f4cde1; }
	
	/* v2 */
	body#sante table.v2 {  margin:0px 0 30px 100px; }
	body#sante table.v2 td.col1,
	body#sante table.v2 td.col2 { width:30px; }
	
	body#sante table.v2 td.col3 { text-align:left; width:332px; }
	
	/* v3 */
	body#sante table.v3 td.col3,
	body#sante table.v3 td.col4,
	body#sante table.v3 td.col5 { text-align:center; }
	
	body#sante table.v3 td.col1 { width:178px; }
	body#sante table.v3 td.col5 { width:100px; }
	
	body#sante table.v3 tr.ligne1 td.col1,
	body#sante table.v3 tr.ligne1 td.col2,
	body#sante table.v3 tr.ligne1 td.col3  { background-color:#fff; }
	
	body#sante table.v3 tr.ligne2 td.col3,
	body#sante table.v3 tr.ligne2 td.col4,
	body#sante table.v3 tr.ligne2 td.col5 { background-color:#FFF2F8; }
	
	body#sante table.v3 tr.ligne1 td.col2 { background-color:#FFF2F8; }
	body#sante table.v3 tr.ligne2 td.col2 { background-color:#F4CDE1; }
	
/*********************************************************************************************
!colonne gauche
*********************************************************************************************/		
body#sante h2.visez_sante {
	background: url(../img_en/sante/t_visez_santeMC.gif) 0 0 no-repeat;
	width:149px;
	height:21px;
	text-indent:-9000px;
	margin:0px 0 33px 0;
}
body#sante div.img_et_description { width:233px; margin-bottom:0px; }
body#sante div.bloc_texte { width:388px; }

body#sante h2.suggestion { background: url(../img_en/sante/t_suggestion.gif) 0 0 no-repeat; width:229px; height:25px; text-indent:-9000px; margin:0px 0 15px 0; }

body#sante img.image_visez_sante { margin:0 20px 15px 0;}

body#sante #colonne_gauche p { margin:0 0 15px 0;}

body#sante #suggestion_sante { padding:0 0 12px 0; }
	body#sante #suggestion_sante li { background:transparent url(../img/grand_livre/list_index_recherche.gif) no-repeat scroll 0pt 7px; margin:8px 0pt 0pt; padding:0pt 0pt 0pt 7px; }
	
/*--------------------------------------------------------------------------------------------
!Gabarit Santé (  questionnaire )
Description : Css seulement pour gabarit Santé ( questionnaire ) extension de santé
--------------------------------------------------------------------------------------------*/	
body#sante #question { width:650px; background-color:#f8ebf2; border:1px solid #dbdbdb; padding:12px; margin:28px 0 0 0; }
body#sante p.no_question { font-size:1.4em; line-height:1.4em; }

body#sante input.btn_question { float:left; margin:0 24px 0 0; }
body#sante input.btn_valider { margin:10px 0 0 0; }

/*--------------------------------------------------------------------------------------------
!Gabarit Coupe et cuisson
Description : Css seulement pour gabarit Coupe et cuisson
--------------------------------------------------------------------------------------------*/	
body#coupe_et_cuisson div.img_et_description { width:233px; margin-bottom:0px; }
body#coupe_et_cuisson div.bloc_texte { width:418px; }

body#coupe_et_cuisson h2.vedette { background: url(../img/coupe/t_vedette.gif) 0 0 no-repeat; width:187px; height:19px; text-indent:-9000px; margin:4px 0 24px 0; }

body#coupe_et_cuisson h2.maigre { background: url(../img/coupe/t_maigre.gif) 0 0 no-repeat; width:79px; height:21px; text-indent:-9000px; margin:0px 0 20px 0; }
body#coupe_et_cuisson h2.tendre { background: url(../img/coupe/t_tendre.gif) 0 0 no-repeat; width:79px; height:21px; text-indent:-9000px; margin:0px 0 20px 0; }
body#coupe_et_cuisson h2.different { background: url(../img/coupe/t_different.gif) 0 0 no-repeat; width:100px; height:21px; text-indent:-9000px; margin:0px 0 20px 0; }
body#coupe_et_cuisson h2.cuisson { background: url(../img_en/coupe/t_cuisson.gif) 0 0 no-repeat; width:238px; height:21px; text-indent:-9000px; margin:0px 0 20px 0; }

/* Flash */
body#coupe_et_cuisson #g_cochon { margin:0 0 0 50px; }
body#coupe_et_cuisson #container #p_cochon { position:absolute; top:180px; left:60px; }

/* tableau */
body#coupe_et_cuisson table.tableau_informatif { width:400px; margin:10px 0 20px 0px; }

	body#coupe_et_cuisson table.tableau_informatif td { padding:5px; }
	body#coupe_et_cuisson table.tableau_informatif td.sujet { background-color:#f4cde1; width:400px; font-weight:bold; }
	body#coupe_et_cuisson table.tableau_informatif td.col1,
	body#coupe_et_cuisson table.tableau_informatif td.col2 { width:200px; text-align:center; }
	
	body#coupe_et_cuisson table.tableau_informatif tr.ligne1 td.col1,
	body#coupe_et_cuisson table.tableau_informatif tr.ligne1 td.col2  { background-color:#fff; }
	
	body#coupe_et_cuisson table.tableau_informatif tr.ligne2 td.col1,
	body#coupe_et_cuisson table.tableau_informatif tr.ligne2 td.col2  { background-color:#fff2f8; }
	
	body#coupe_et_cuisson table.tableau_informatif tr.ligne_titre td.col1 { background-color:#f4cde1;  width:400px; text-align:left }
	body#guide_cuisson div.img_et_description { width:180px; }
	
.img_et_description { float:right; margin:0 0 15px 15px; width:180px }
.img_et_description p { padding:0 10px 0 10px; font-size:0.9em }