/*
Theme Name: 10h20 - Maison Branchee
Theme URI: http://10h20.com/
Description: Theme site Maison Branchee
Version: 0.1
Author: Stéphane & Fabrice Di Giovanni
Tags: Magazine
*/

/**********************************************************************************
********************************** RESET CSS **************************************
**********************************************************************************/
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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

html, body, applet, object, pre, iframe,  abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
}

body {line-height:normal;}

h1, h2, h3, h4, h5, h6, p, blockquote {}

a:link, a:visited, a:hover, a:active { font-weight:bold; color:#00CCFF; text-decoration:none}
a:hover { text-decoration:underline}
	
ol, ul {list-style: none;}

blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}


/**********************************************************************************
*********************************** GENERIC ***************************************
**********************************************************************************/
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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	font-family:Arial, Helvetica, sans-serif;
}

html { color:#827062; font-size:12px;}

a img {border: none;}

body { background:#F8F6F7; }

.clearall { clear:both; }



input[type="text"], input[type="password"] {
 color:#827062;
 border:1px solid #E6E6E6;
 cursor:pointer;
 font-size:14px;
 padding:7px 10px;
 line-height:15px;
 overflow:auto;
 }
 
textarea {
color:#827062;
cursor:pointer;
font-size:14px;
letter-spacing:1px;
padding:7px 10px;
font-family:Arial, Helvetica, sans-serif;
 }



input[type="submit"], input[type="reset"] {
border:1px solid #E6E6E6;
height:34px;
margin:0 10px;
border:1px outset #00CCFF;
background-color:#00CCFF;
color:#FFFFFF;
cursor:pointer;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
 }
 

#contactForm input[type="text"], #contactForm input[type="password"] {
 width:463px; 
 background:url(Images/fondInputContact.png) no-repeat;
 }
 
#contactForm textarea {
background:transparent url(Images/fondTextareaContact.png) no-repeat scroll 0 0;
width:463px;
height:123px;
 }



/**********************************************************************************
******************************* STRUCTURE Site *********************************
**********************************************************************************/
#master { width:994px; margin-left:auto; margin-right:auto; background:url(Images/fondSite.gif) repeat-y center; margin-top:30px;}
	#header {background:#F8F6F7 url(Images/fondSiteTop.gif) no-repeat center bottom; height:20px;}
	#page { width:970px; background-color:#FFF; margin:0 12px }
		#bandeau {height:120px; position:relative;}
			#telephone { background-color:#903; position:absolute; top:19px; right:31px; width: 224px; height:82px }
		#navigation { height:40px;}
		#content {clear:both;}
			#visuelTop { background:url(Images/visuelBase.jpg) no-repeat bottom left;}
				#visuelContainer { position:relative; height:380px; width:970px; overflow:hidden;}			
	
	#footer { clear:both; text-align:center; background:#F8F6F7 url(Images/fondSiteBas.gif) no-repeat center top; padding:35px 0; font-size:11px; }

/* bandeau
**********************************************************************************/
#bandeau h1 {margin:0; padding:0}
#bandeau h1 img {border:0;}

/*Menu de navigation 
**********************************************************************************/
#navigation {background:url(Images/fondNav.jpg) repeat-x left bottom; }
#navigation ul {margin:0; padding:0; float:left; background-color:#BEF0FB;}
#navigation ul li{ display:inline; text-transform:uppercase; font-size:11px; float:left; padding:14px; background:url(Images/fondNav.jpg) repeat-x left bottom; margin-left:1px;}
#navigation ul li.firstItem {margin-left:0; padding:7px; height:27px;}
#navigation a:link, #navigation a:active, #navigation a:visited { text-decoration:none; color:#00CCFF; font-weight:normal;}
#navigation a:hover {color:#827062;}

/* Visuel anime
**********************************************************************************/
#sliders {overflow:hidden;}

#sliders>* {display:none;}

#titlebar{padding:20px; position:relative; text-align:left; top:79px; z-index:0;}
	#titlebar h1{color:#62B9D4; font-size:40px; letter-spacing:-2px; padding:10px;}
	
.horloge { position:absolute; /*top:-80px;*/ top:0;	right:50px;	z-index:90;	height:80px; width:80px; background:url(Images/visuelHorloge.png) no-repeat bottom center;}
.etagere { position:absolute; /*top:-91px;*/top:0;  left:154px;	z-index:90;	height:91px; width:235px; background:url(Images/visuelEtagere.png) no-repeat bottom center;}		
.table{ position:absolute; top:-114px; left:77px; z-index:200; height:114px; width:273px; background:url(Images/visuelTable.png) no-repeat bottom center;}	
.sofa {	position:absolute; top:36px; left:-388px; z-index:150; height:257px; width:368px; background:url(Images/visuelSofa.png) no-repeat bottom center;}
.chaise { position:absolute; top:62px; right:-323px; z-index:100; height:261px; width:237px; background:url(Images/visuelChaise.png) no-repeat bottom center;}
.personnage { position:absolute; bottom:-334px; left:464px;	z-index:300; height:334px; width:252px;	background:url(Images/visuelPerso.png) no-repeat bottom center;}

/*Bulles visuel 
**********************************************************************************/
#content10 .sociable, #content4 .sociable, #content12  .sociable {display:none;}/* supp liens sociaux*/

	.modService4, .modService10, .modService12 { width:211px; position:absolute; z-index:1000;}	
	
	.modService4 .modServiceTop, .modService4 .modServiceCenter, .modService4 .modServiceBottom {opacity : 0.78; filter : alpha(opacity=78);}
	.modService10 .modServiceTop, .modService10 .modServiceCenter, .modService10 .modServiceBottom {opacity : 0.78; filter : alpha(opacity=78);}
	.modService12 .modServiceTop, .modService12 .modServiceCenter, .modService12 .modServiceBottom {opacity : 0.85; filter : alpha(opacity=85);}

	/* mode installation VERT*/
	.modService10 {bottom:136px; left:13px; }
		.modService10 .modServiceTop { background:url(Images/bulleVerteTop.png) no-repeat left top; width:211px; height:7px; }
		.modService10 .modServiceCenter { background-color:#D0DE35;  width:191px; padding:0px 10px 2px;}
		.modService10 .modServiceBottom { background:url(Images/bulleVerteBottom.png) no-repeat left top; width:211px; height:7px; }
	/* mod conseil et assistance Rose*/
	.modService4 {bottom:198px; left:282px;}
		.modService4 .modServiceTop { background:url(Images/bulleRoseTop.png) no-repeat left top; width:211px; height:7px; }
		.modService4 .modServiceCenter { background-color:#EC188A;  width:191px; padding:0px 10px 2px;}
		.modService4 .modServiceBottom { background:url(Images/bulleRoseBottom.png) no-repeat left top; width:211px; height:7px; }
	/* mod formation Orange*/
	.modService12 {top:180px; left:724px;}	
		.modService12 .modServiceTop { background:url(Images/bulleOrangeTop.png) no-repeat left top; width:211px; height:7px; }
		.modService12 .modServiceCenter { background-color:#FF9F40;  width:191px; padding:0px 10px 2px;}
		.modService12 .modServiceBottom { background:url(Images/bulleOrangeBottom.png) no-repeat left top; width:211px; height:7px; }
	
/*Contenu des modules 
**********************************************************************************/ 
 	.modService4 h3, .modService10 h3, .modService12 h3 { display:block; font-size:20px; color:#FFF; font-weight:normal; margin:0;}
	.modService4 p, .modService10 p, .modService12 p { color:#000; font-size:11px; font-weight:normal; margin:-1px 16px 8px 0;} 
		.modService4 a, .modService10 a, .modService12 a {background:transparent url(Images/btnPlusInformations.png) no-repeat scroll 0 0; display:block; font-size:9px; font-weight:normal; height:13px; margin:0; padding:6px 4px 5px; text-align:center; text-transform:uppercase; width:127px;}
			.modService4 a:hover, .modService10 a:hover, .modService12 a:hover { text-decoration:none; font-weight:bold}
			.modService10 a  {color:#ADBA2D}
			.modService4 a {color:#EC188A;}
			.modService12 a {color:#FF9F40;}
	
	#pastille10, #pastille4, #pastille12 { position:absolute; width:74px; height:74px; color:#FFF;}
	/* mode installation*/
	#pastille10 { background: url(Images/pastilles.png) no-repeat -5px -5px; bottom:-29px; right:-14px; height:77px; width:77px;}
	/* mod conseil et assistance */
	#pastille4 {background:transparent url(Images/pastilles.png) no-repeat -85px -4px; bottom:-29px; right:-14px; height:77px; width:77px; }
	/* mod formation */
	#pastille12 {background:transparent url(Images/pastilles.png) no-repeat -167px -5px; bottom:-29px; right:-14px; height:77px; width:77px;}
	/**/

					#pastille10 .heure, #pastille4 .heure, #pastille12 .heure { color:#FFFFFF; font-size:20px; font-weight:bold; letter-spacing:0; position:absolute; right:25px; top:9px;}									
					#pastille10 .txtLibre, #pastille4 .txtLibre, #pastille12 .txtLibre {color:#FFFFFF; font-size:11px; font-weight:normal; letter-spacing:0; position:absolute; right:14px; top:17px;}				
					#pastille10 .prix, #pastille4 .prix, #pastille12 .prix {color:#FFFFFF; font-size:32px; font-weight:bold; letter-spacing:-1px; position:absolute; right:24px; top:25px;}	
					
						#pastille10 .txtLibre {color:#9EAC03;}
						#pastille4 .txtLibre {color:#BA0058;}
						#pastille12 .txtLibre {color:#CD6D0E;}		
		
	/* gestion des pointes des bulles */
	.pointe10, .pointe4, .pointe12 { position:absolute}
		.pointe10 { bottom:-9px; left:120px;}
		/* mod conseil et assistance */
		.pointe4 { bottom:-9px; left:18px;}
		/* mod formation */
		.pointe12 { top:-9px; left:50px;}

/* Styles communs Blocs et pages du templates category single
 **********************************************************************************/ 
.bulleBleueS {background: url(Images/bulleBleue_G.png) no-repeat left top; padding-bottom:6px; float:left; margin:0 10px 21px 0;}
.bulleBleueS .bulleContent { background: url(Images/bulleBleue_D.png) no-repeat right top; }
.bulleBleueS .bulleContent h2 {padding:15px 9px 15px 0; color:#FFF; font-size:12px; background-color:#00CCFF; margin:0 4px 0 14px; font-weight:normal;}	

a.lienTriang:link, a.lienTriang:active, a.lienTriang:visited {
background: url(Images/flecheLien.gif) no-repeat scroll right center;
font-size:12px;
font-weight:normal;
padding:2px 13px 2px 2px;
text-transform:uppercase;
}
a.lienTriang:hover {color:#827062;}

#footer a:link, #footer a:active, #footer a:visited { 
color:#827062; text-decoration:none; font-weight:normal;}
#footer a:hover {color:#00CCFF; text-decoration:underline;}


	
/* Bloc Qui Sommes-nous 
 **********************************************************************************/ 
#quiSommesNous {background:#FFFFFF url(Images/fondQuiSommesNous.jpg) repeat-x left bottom; height:159px; padding:20px 0 10px 28px; position:relative;}
	/*#quiSommesNous h2 { width:130px; float:left; margin-right:10px}*/
	.separateurQSN { float:left; display:block; margin-top:24px;}
	#quiSommesNous p { clear:left; font-size:17px; line-height:18px; display:block; width:740px; font-weight: 100;}
	.liensQSN { position:absolute; top:20px; right:0; width:200px}
		.liensQSN a { display:block; background: url(Images/btn_quisommesnous.png) no-repeat 0 0; width:176px; height:27px; padding-bottom:5px; text-align:center; padding-top:18px; color:#00CCFF; font-size:14px; font-weight:normal; text-decoration:none }
			.liensQSN a:hover { font-weight:bold}

/* Bloc tutoriaux
 **********************************************************************************/ 
#tutoriaux { float:left; margin-top:20px; padding:0 20px 20px 20px; font-size:12px;  width:509px; border-right:1px solid #CCC}	
	#tutoriaux h3{ margin:0; padding:0}
		.modtutorial {border-bottom:1px dashed #DBD7D3; margin-bottom:20px; padding-bottom:20px;}
		.modtutorial a {color:#00CCFF;}
			.modtutorial .titre span, .modtutorial .titre a { font-size:11px}
			.modtutorial .titre h3 a { color:#827062; text-transform:uppercase; font-size:14px}
				.modtutorial .titre h3 a:link, .modtutorial .titre h3 a:visited, .modtutorial .titre h3 a:active {color:#827062;}
				.modtutorial .titre h3 a:hover {color:#00CCFF; }  		
				#tutoriaux .titre { margin-left:48px;}
			#tutoriaux .date {float:left; background:url(Images/fondDate.gif) no-repeat 0 0; color:#FFF; text-align:center; padding-top:4px; width:42px; height:46px }
				#tutoriaux .jour {color:#FFFFFF; font-size:28px; font-weight:bold; letter-spacing:-3px; line-height:24px; text-align:center;}
				#tutoriaux .mois {color:#FFFFFF; font-size:9px; line-height:10px; text-transform:uppercase;}			
			.modtutorial a.suite {text-transform:uppercase; font-size:11px; display:block; margin-right:50px}	
			.modtutorial .accroche { clear:both;}	
			.modtutorial .accroche p {margin:15px 0 0;}
			
/* Bloc Promo
 **********************************************************************************/ 
#promos {float:left; margin-top:20px; padding:0 20px 20px 20px; font-size:12px; width:380px; }
	#modPromo {width:353px; position:relative; margin-bottom:20px;}
	#modPromo .top {background: url(Images/fondpromoTop.png) no-repeat center top; height:14px; }
	#modPromo .center {background:url(Images/fondpromoRepeat.png) repeat-y;}
		#modPromo .center .content {background:url(Images/fondpromoCenter.png) no-repeat center bottom; padding:10px 120px 10px 20px; margin:0 5px; color:#00CCFF; overflow:hidden;}
			#modPromo .titrePromo h3 { margin:0; padding:0; color:#00CCFF; text-transform:uppercase; font-size:25px; letter-spacing:-1px; line-height:23px;}
				#modPromo .titrePromo h3 a:link, #modPromo .titrePromo h3 a:visited, #modPromo .titrePromo h3 a:active {color:#00CCFF; text-decoration:none;}
				#modPromo .titrePromo h3 a:hover {color:#827062;}
			#modPromo .datePromo {font-size:16px; margin-bottom:3px; letter-spacing:1px; }
			#modPromo .tarifPromo {background: url(Images/pastillePromo.png) no-repeat scroll center center; color:#FFFFFF; height:120px; position:absolute; right:-27px; top:-16px;	width:120px;}
			
					#modPromo .tarifPromo .heure { font-size:24px; font-weight:bold; letter-spacing:0; position:absolute; right:37px; top:17px;}									
					#modPromo .tarifPromo .txtLibre {font-size:12px; font-weight:bold; letter-spacing:0; position:absolute; right:37px; top:27px;}				
					#modPromo .tarifPromo .prix {font-size:47px; font-weight:bold; letter-spacing:-1px; position:absolute; right:37px; top:33px;}	
							
	#modPromo .bottom { background: url(Images/fondpromoBottom.png) no-repeat center bottom; height:14px; }
	
#promos h4 {color:#00CCFF; font-size:16px; font-weight:normal; letter-spacing:-1px; margin:0; padding:0; text-transform:uppercase;}
#promos p {margin-top:0; padding:0;}
	
/* Bloc partenaires 
 **********************************************************************************/ 
#partenaires { margin-top:20px; border-top:1px solid #CCC; padding:20px; text-align:center; overflow:hidden;}
#partenaires p {display:inline;}
	#partenaires p img {margin:0 75px;}
	
/* RUBRIQUE Liste des Posts
**********************************************************************************/
#rubriqueOffres { padding:40px; padding-top:50px; background-color:#fff;}
#rubriqueOffres h3 { margin:0; padding:0}

#rubriqueOffres #promoContainer {
border-bottom:1px dashed #DBD7D3;
float:left;
height:450px;
margin-bottom:20px;
margin-right:46px;
margin-top:5px;
overflow:auto;
padding-bottom:40px;
padding-top:18px;
width:398px;
}

#rubriqueOffres #modPromo  {position:relative; margin-top:20px; }

#rubriqueOffres .bulleBleueS {padding-bottom:6px; float:left; margin:0 10px 0 0;}