/* --------------------------------------------------------
    Main stylesheet
    Site: Catin Beauté
    Created by: Umen Innovation 
    Filename: styles.css
   -------------------------------------------------------- */

/* --------------------------------------------------------
    COLORS
    Grey: 				#646466
	Charcoal:         #363636
   -------------------------------------------------------- */

@import url(reset.css);

/*** Commun ***/
html { font-size: 62.5%; height: 100%; background: #d2d1ca url(../images/bg.gif) repeat-y center top;}
html, body,#footer{margin:0 auto; }
body > #container {height: auto; min-height: 100%;}
body {
	color: #767561 ;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 125%;
	height: 100%;
	line-height: 1.6em;
	position: relative;
}
#bkg{width:1000px; margin: 0 auto;}
a{ text-decoration:none; color:#000;}
a:hover{text-decoration:underline;}
a.current{text-decoration:none;}
strong{color:#363636;}
.noir{color:#000;}

.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

#container { height: 100%; margin: 0 auto; padding: 0 150px 0 97px; position: relative; width: 900px;  background:transparent url(../images/spiral.png) no-repeat 796px top;}
h1 {position:absolute;top:40px;left:330px;}
h1 a{background:transparent url(../images/logo.gif) no-repeat left top; display:block; width:104px; height:104px;  text-indent:-9999px; overflow:hidden; color:#363636;}
h2,h1{font-size:100%;}


body.accueil #bkg{background:transparent url(../images/accueil.png) no-repeat 472px 194px;}
body.coiffure #bkg{background:transparent url(../images/coiffure.png) no-repeat 472px 194px;}
body.esthetique #bkg{background:transparent url(../images/esthetique.png) no-repeat 472px 194px;}
body.ameublement #bkg{background:transparent url(../images/ameublement.png) no-repeat 472px 194px;}
body.evenements #bkg{background:transparent url(../images/evenement.png) no-repeat 472px 194px;}
body.formation #bkg{background:transparent url(../images/formation.png) no-repeat 472px 194px;}
body.historique #bkg{background:transparent url(../images/historique.png) no-repeat 495px 194px;}
body.carriere #bkg{background:transparent url(../images/carriere.png) no-repeat 472px 194px; }
/*** Header ***/
#header {padding:170px 0 20px 0; position:relative;width:760px;}
#header ul{ list-style:none; display:inline-block;}
#header ul.menu{ border-top:1px #767561 solid; border-bottom:1px #767561 solid; width:100%; }
#header ul li{display:inline; float:left; margin-right:13px; }

#header ul li a{display:block; color:#848379; padding:3px; }
#header .menu a.current{color:#fff; background-color:#999; text-decoration:none;}
#header ul#meta-nav{ position:absolute;  font-size:90%; right:-8px; bottom:45px; }
*+html #header ul#meta-nav{bottom: 65px; }
#header ul#meta-nav li{margin-right:5px;}


/*** Contenu principal ***/
#mainContent{width:395px;padding-bottom:20px;}
#mainContent li{padding-left:10px; background:transparent url(../images/bullet.gif) no-repeat left 6px; }
.accueil #mainContent{width:100%; padding-bottom:0;}
div#lesLogos {position:relative; height:180px;}
div#lesLogos a{ position:absolute; display:block; overflow:hidden; text-indent:-999px;}
.accueil div#lesLogos a.wella{background:transparent url(../images/wella.gif) no-repeat left top; width:55px; height:34px; top:20px;}
.accueil div#lesLogos a.pro-seb{background:transparent url(../images/sebastian.gif) no-repeat left top; width:112px; height:20px; top:27px; left:65px;}
.accueil div#lesLogos a.rusk{background:transparent url(../images/rusk.gif) no-repeat left top; width:86px; height:15px; top:31px; left:186px;}
.accueil div#lesLogos a.zotos{
	background:transparent url(../images/zotos.gif) no-repeat left top;
	width:59px;
	height:42px;
	top:4px;
	left:283px
}
.accueil div#lesLogos a.bain2terre{
	background:transparent url(../images/bain2terre.gif) no-repeat left top;
	width:59px;
	height:82px;
	left:354px;
}
.accueil div#lesLogos a.breton{background:transparent url(../images/breton.gif) no-repeat left top; width:37px; height:36px; top:68px; width:37px;}
.accueil div#lesLogos a.epillys{
	background:transparent url(../images/epillyss.gif) no-repeat left top;
	width:37px;
	height:36px;
	left:55px;
	top:68px;
}
.accueil div#lesLogos a.labo-nature{
	background:transparent url(../images/laboratoireNature.gif) no-repeat left top;
	width:105px;
	height:42px;
	top:68px;
	left:105px;
}
.accueil div#lesLogos a.kms-california{
	background:transparent url(../images/kms.gif) no-repeat left top;
	width:105px;
	height:42px;
	top:68px;
	left:220px;
}
.accueil div#lesLogos a.copines{
	background:transparent url(../images/copines.gif) no-repeat left top;
	width:125px;
	height:23px;
	left:13px;
	top:117px;
}
.accueil div#lesLogos a.sexyhair{
	background:transparent url(../images/sexyhair.gif) no-repeat left top;
	width:75px;
	height:23px;
	left:60px;
	top:149px;
}
.accueil div#lesLogos a.goldwell{background:transparent url(../images/goldwell.gif) no-repeat left top; width:144px; height:29px; top: 116px; left:164px;}
.accueil div#lesLogos a.diadermine{background:transparent url(../images/diadermine.jpg) no-repeat left top; width:143px; height:25px; top: 148px; left:164px;}
.accueil div#lesLogos a.senscience{
	background:transparent url(../images/senscience.gif) no-repeat left top;
	width:59px;
	height:71px;
	top: 55px;
	left:305px;
}
.accueil div#lesLogos a.patrice{
	background:transparent url(../images/patrice.gif) no-repeat left top;
	width:58px;
	height:80px;
	top:89px;
	right:483px;
}


.coiffure div#lesLogos{height:205px;}
.coiffure div#lesLogos a.wella{background:transparent url(../images/wella.gif) no-repeat left top; width:55px; height:34px; top:20px; left:0;}
.coiffure div#lesLogos a.pro-seb{background:transparent url(../images/sebastian.gif) no-repeat left top; width:112px; height:20px; top:27px; left:65px;}
.coiffure div#lesLogos a.rusk{background:transparent url(../images/rusk.gif) no-repeat left top; width:86px; height:15px; top:27px; left:186px;}
.coiffure div#lesLogos a.zotos{background:transparent url(../images/zotos.gif) no-repeat left top; width:59px; height:42px; top:74px; left:0px  }
.coiffure div#lesLogos a.bain2terre{
	background:transparent url(../images/bain2terre.gif) no-repeat left top;
	width:62px;
	height:78px;
	top:56px;
	left:77px;
}
.coiffure div#lesLogos a.labo-nature{
	background:transparent url(../images/laboratoireNature.gif) no-repeat left top;
	width:105px;
	height:42px;
	top:54px;
	left:235px;
}
.coiffure div#lesLogos a.kms-california{
	background:transparent url(../images/kms.gif) no-repeat left top;
	width:105px;
	height:42px;
	top:154px;
	left:12px;
}
.coiffure div#lesLogos a.goldwell{
	background:transparent url(../images/goldwell.gif) no-repeat left top;
	width:138px;
	height:29px;
	top: 174px;
	left:120px;
}
.coiffure div#lesLogos a.senscience{
	background:transparent url(../images/senscience.gif) no-repeat left top;
	width:59px;
	height:71px;
	bottom:74px;
	right:179px;
	z-index:100;
}
.coiffure div#lesLogos a.sexyhair{
	background:transparent url(../images/sexyhair.gif) no-repeat left top;
	width:75px;
	height:23px;
	left:107px;
	top:141px;
}
.coiffure div#lesLogos a.patrice{
	background:transparent url(../images/patrice.gif) no-repeat left top;
	width:58px;
	height:80px;
	top:116px;
	right:67px;
}
.coiffure a img{margin-bottom:5px;}
.coiffure a img.play{margin-bottom:-2px;}
.coiffure  .video1{
					float:left;
					margin:10px;
					display:block;
}
					
.coiffure  .video2{
					float:right;
					margin:10px;
					display:block;
}
					
.coiffure  .video3{
					
					clear:left;
					float:left;
					margin:10px;
					display:block;


}

.coiffure  .video4{
					float:right;
					margin-top:10px;
					margin-right:10px;
					display:block;
}

.carriere p {margin-bottom:10px;}
.carriere h3{margin-bottom:5px;}
.carriere hr{margin-top:15px; margin-bottom:15px;}

.savoir-plus{display:block; clear:both;}
.coiffure #videos h3 {margin-bottom:10px;}
.esthetique div#lesLogos {height:60px;}
.esthetique div#lesLogos a.copines{background:transparent url(../images/copines.gif) no-repeat left top; width:125px; height:23px; left:96px; top:15px;}
.esthetique div#lesLogos a.breton{background:transparent url(../images/breton.gif) no-repeat left top; width:37px; height:36px; top:10px; left:30px; }
.esthetique div#lesLogos a.epillys{background:transparent url(../images/epillyss.gif) no-repeat left top; width:37px; height:36px; left:252px; top:10px;}

.ameublement div#lesLogos{height:116px;}
.ameublement div#lesLogos a.belvedere{background:transparent url(../images/belvedere.gif) no-repeat left top; width:109px; height:19px; left:148px; top:15px;}
.ameublement div#lesLogos a.takara{background:transparent url(../images/takara.gif) no-repeat left top; width:108px; height:18px; left:147px; top:53px;}
.ameublement div#lesLogos a.cantin-ameublement{background:transparent url(../images/cantin-ameublements.png) no-repeat left top; width:79px; height:88px; left:285px; top:15px;}
.ameublement div#lesLogos a.silhouet-tone{background:transparent url(../images/silhouet-tone.gif) no-repeat left top; width:109px; height:41px; left:0px; top:15px;}

.range-pdf {line-height:1.2em;}
.range-pdf h3{ margin:20px 0;}
.range-pdf h4{ margin:15px 0 10px 0; font-size:12px; font-weight:normal;}
.range-pdf p{ text-transform:uppercase;}
.range-pdf li {padding-bottom:10px;}
.range-pdf span.pdf {padding-bottom:10px; display:block; font-weight:bold;}
.range-pdf a{ color:#767561; text-decoration:underline;}
.range-pdf a:hover{text-decoration:none;}
a.marque,a.marque:hover{color:#363636; font-weight:bold; text-decoration:none; cursor:default !important;font-size:12px;}
/*a.marque{display:block; text-indent:-9999px;}
.range-pdf a.wella{background:transparent url(../images/wella.gif) no-repeat left top; width:55px; height:34px;}
.range-pdf a.pro-seb{background:transparent url(../images/sebastian.gif) no-repeat left top; width:112px; height:20px; }
.range-pdf a.rusk{background:transparent url(../images/rusk.gif) no-repeat left top; width:86px; height:15px; }*/
/**Footer**/

input,textarea {border:1px solid #ccc; }
input{height:20px;}
td {padding-bottom:10px;}

.evenements #mainContent {min-height:370px;}
.evenements #mainContent a{color:#2b71e0; text-decoration:none;}
.evenements #mainContent a:hover{color:#2b71e0; text-decoration:underline;}

.btnConfirm{ border:1px solid #4e4e4e; background:#767561; font-size:10px; height:30px; padding:0 10px; cursor:pointer !important; color:#fff; }
.btnConfirm:hover,.btnConfirm:focus{background:none; color:#000;}
.evenements .btnConfirm{margin:20px 0 0 15px;}

#containFooter {background-color:#767561; }
#footer { height:95px; text-transform:uppercase;padding: 5px 0 0 0; width: 808px;  font-size:90%;}
#footer ul{ list-style:none; display:inline-block;}
#footer ul.menu{ border-top:1px #767561 solid; border-bottom:1px #767561 solid;}
#footer ul li{display:inline; float:left;  }
#footer ul li a{display:block; margin-right:10px; color:#a6a69a; }
#footer ul li a:hover,#footer ul li a:current{color:#231f20;}