@import "reset.css";

/*FOUT*/
/* p, h1, h2, h3, h4, h5, h6, li { opacity: 0; } */
ul#resultat li, ul#resultat p { opacity: 1; }


/* ------------------------------------
	DECLARATIONS GENERALES
 ------------------------------------ */

	html { background: url(../images/backTop.jpg) repeat-x 0 -1.2em; overflow-y: scroll;  }
	body { 
		background: url(../images/backBottom.jpg) repeat-x 0 66.5em;
		font-size: 12px;
	  font-family: "ronnia-1","ronnia-2","Geneva","Verdana","Arial","sans-serif;";
	}
	em { font-style: italic; }
	
	hr { height: 0; border: none; }
	
	h1 { 
		color: #582a05;
		font-size: 2.5em;
		white-space: nowrap;
		letter-spacing: 1px;
		margin: 0.9em 0.5em 0.8em 12.5em;
		overflow: visible;
		position: relative;
		text-indent: 1.6em;
		z-index: -1;
		text-align: left;
		line-height: 0.9em;
	}
	h1 span {
		color: #EFE7E5;
		letter-spacing: 2px;
		font-size: 0.8em;
		
	}
	h1 img { position: absolute; left: 0; top: -0.2em; }
	
	h2 {
		text-align: center;
		margin: 7px auto 0;
		font-size: 22px;
		color: #906949;
		position: relative;
		font-weight: normal;
		text-shadow: 0 -1px 0 #CFC5C2;
		border-bottom: 1px solid #e4d9d1;
		line-height: 1.95em;
		width: 9.7em;
		letter-spacing: -1px;
	}
	
	
	h3, h4, h5, h6 {
		color:#582a05;
		position: relative;
		text-align: left;
	}
	
	h3 {
		margin: 1em 0 0 2em;
		font-size: 1.5em;
		font-weight: bold;
	}
	h3 span { font-size: 0.9em; color: #dac9bc; font-weight: normal; margin-left: 1em; }

	h3 a {
		color: #dac9bc;
		font-size: 0.8em;
		font-weight: normal;
		line-height: 0.9em;
	}
	
	
	h4 {
		font-size: 1.3em;
	}
	
	
	h5 {
		font-size: 1.9em;
		line-height: 1.2em;
		float:left;
		text-indent: -0.8em;
	}
	
	h6 {
		font-size: 1.6em;
		text-indent: -0.7em;
		line-height: 1.5em;
		margin: 4em 2.5em 4em 2em;
		float: right;
	}
	
	p {
		color:#757575;
		text-align: justify;
		position: relative; 
		margin: 0.8em 2.8em 0;
		font-weight: 300;
		font-size: 13px;
		line-height: 1.35em;
	}
	
	a {
		color: #582a05;
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
	
	input, a { 	outline: none; }


/* ------------------------------------
	STRUCTURE GENERALE
 ------------------------------------ */

	div#container {
		width: 79em;
		margin: 0 auto;
		position: relative;
	}
	
	p.nouvelle { position: absolute; width: 16em; font-size: 2.2em; color: #EEE9E4; font-weight: 400; margin: 0.2em 0 0 0; top: -3em; line-height: 1em; text-align: left; display: none;  }
	
	p.nouvelle span { font-size: 0.6em;font-weight: 500 }
	p.nouvelle em { font-size: 1.2em; font-style: normal;font-weight: 600; }
	
	div#leftBar {
		width: 18.7em;
		padding: 0.3em;
		background: white;
		margin: -4em 1.2em 0 0;
		float: left;
		position: relative;
		display: inline-block;
	}
	
	div#contenu {
		width: 57.8em;
		padding: 0.3em;
		background: white;
		position: relative;
		height: 61.3em;
		display: inline-block;
		text-align: center;
		overflow: visible;
	}
	
	div#footer {
		padding: 4em 0 0 1.5em;
		width: 56.8em;
		display: inline-block;
		overflow: visible;
	}
	
	img[alt="ombreG"] {
		position: absolute;
		left: -0.8em;
	}
	
	img[alt="ombreD"] {
		position: absolute;
		right: -0.8em;
	}
	
	#leftBar img[alt="ombreD"], #leftBar img[alt="ombreG"] { top: 3.5em; }


/* ------------------------------------
	MENU PRINCIPAL
 ------------------------------------ */

	ul#menuPrinc {
	 	background: url(../images/backMenu.jpg) repeat-x center left; 
		background-image: -webkit-gradient(linear, left top, left bottom, from(#F0E8E6), to(#EEE6E4)); /* for webkit browsers */
		background-image: -moz-linear-gradient(top,  #F0E8E6,  #EEE6E4); /* for firefox 3.6+ */
		text-align: center;
		position: relative;
		margin: 2px auto 10px auto;
		border-top: 1px solid #e4d9d1;
		display: block;
		white-space: nowrap;
		width: 56em;
		overflow: hidden;
	}
	
	ul#menuPrinc li {
		display: inline-block;
		border-left: 1px solid #FBFAF9;
		margin: 0 -1px;
/* 		border-top: 1px solid #EDE7E2; */
		border-bottom: 1px solid #F3EFEC;
	}
	
	ul#menuPrinc li a {
		color: #582a05;
		text-decoration: none;
		font-size: 14px;
		padding: 0.8em 2.55em;
		display: block;
		background: white;
		opacity: 0.45;
		font-weight: bold;
		text-shadow: 0 -1px 0 #CFC5C2;
	}
	body[lang="en"] ul#menuPrinc li a { padding: 0.8em 2.68em; }
	
	ul#menuPrinc li:last-child a {
		color: #484643;
		background: none;
		opacity: 0.7;
	}
	
	
	ul#menuPrinc li:hover { border-top: 1px solid #F2EEEB; }
	ul#menuPrinc li.active { border-top: 1px solid #F6F3F0; }
	ul#menuPrinc li a:hover { opacity: 0.65; }
	ul#menuPrinc li a:active { opacity: 0.75; }
	ul#menuPrinc li.active a { opacity: 0.8; }
	ul#menuPrinc li.active:hover { background: none; }
	ul#menuPrinc li:first-child { border-left: none; }
	ul#menuPrinc li:last-child a:hover { color: #484643; opacity: 1; }

/* ------------------------------------
	CONTENU SIDEBAR
 ------------------------------------ */

	div#leftBar ul {
	 	background: url(../images/backBackSousMenu.jpg) repeat-x top left;

		background-image: -webkit-gradient(linear, left top, left bottom, from(#ECE6E1), to(#ffffff)); /* for webkit browsers */
		background-image: -moz-linear-gradient(top,  #ECE6E1,  #fff); /* for firefox 3.6+ */
	
		margin: 0 auto;
		width: 21.2em;
		height: 83em;
		position: relative;
		font-size: 10px;
	}
	
	div#leftBar ul li p {
		color: #582a05;
	}
	
	
	div#leftBar ul li {
		display: block;
		border-top: 1px solid white;
		border-bottom: 1px solid #e4d9d1;
		padding: 0.6em 1em;
		position: relative;
		margin: 0 auto;
		color: #ab8c73;
		font-size: 12px;
		font-style: italic;
	}
	#leftBar ul li:hover { background: rgba(255, 255, 255, 0.3) }
	div#leftBar ul li:first-child { background: white; opacity: 0.55; border-top: 1px solid #EDE7E2; }
	div#leftBar ul li:last-child { border-bottom: none; }
	
	div#leftBar ul li a {
		font-size: 1.1em;
		color: #505153;
		text-decoration: none;
		line-height: 1.2em;
		margin-top: 0.5em;
		display: block;
		font-style: normal;
	}
	div#leftBar ul#menuEquipe li a { display: inline; margin: 0; }
	
	div#leftBar ul li a.active, div#leftBar ul li a:hover {
		color: #582a05;
	}
	
	div#leftBar ul li span {
		font-size: 14px;
		color: #582a05;
		padding: 0.3em 0;
		text-align: center;
		font-style: normal;
		display: block;
	}
	
	div#leftBar ul li b {
		font-weight: 600;
		line-height: 1.7em;
		color: #906949;
		font-style: normal;
	}
	
	div#leftBar ul li sub {
		position:relative;
		font-size: 2.5em;
		font-weight: normal;
		line-height: 0;
		font-style: normal;
		color: #dac9bc;
	}
	#leftBar ul li img { float: left; margin: -0.2em 0.5em 0 1.2em; position: relative; top: 0; padding: 0 0.5em 0 0; border-right: 1px solid #e4d9d1; }


/* ------------------------------------
	CONTENU FOOTER
 ------------------------------------ */

	p#footer {
		color: #bfafa4;
		font-size: 11px;
		left: 3.5em;
		position: relative;
		padding-bottom: 7em;
		top : 2em;
	}
	
	
	/* ------------------------------------
		CONTENU SPECIFIQUE -> TATTOO
	 ------------------------------------ */
	 	
	 	#slider h3 {
			top: 135px;
			z-index: 1000;
			background: url(../images/slideshow/backTitre.png) no-repeat left center;
			height:4em;
			position: absolute;
			width: 40em;
			font-size: 1.5em;
			left: -44px;
			color: white;
			padding: 2em 0 0 1em;
			line-height: 0.9em;
		}

		#showcase li { 
			width:620px;
			height:248px;
			overflow:hidden;
			display: block;
		}
		#slider { margin: 2em auto 0; position: relative;	border: 1px solid #e4d9d1; width: 620px; overflow: hidden;}
		
		#showcase { border: 1px #EDE7E2; width: 620px; margin: 0 auto; }


	/* ------------------------------------
		CONTENU SPECIFIQUE -> PORTFOLIO
	 ------------------------------------ */
 
		#portfolio { background: url(../images/loader.gif) center center no-repeat; overflow: hidden; }
		
		ul#resultat { list-style: none; }
		ul#resultat li { width: 695px; height: 56.5em; }
		ul#resultat li img { height: 548px; }
		
		div#leftBar select {
			width: 14.3em;
			margin: 0.2em auto;
			display: block;
			-moz-box-shadow: 0 1px 0 #CFC5C2;
			-webkit-box-shadow: 0 1px 0 #CFC5C2;
		}
		
		div#leftBar a#recherche, div#leftBar a#rechercheEn, div#leftBar a#autoSlide {
			font-family: Trebuchet MS, Verdana, Arial, sans-serif;
			font-size: 12px;
			width: 15.4em;
			background: url(../images/backBouton.jpg) left 1em repeat-x white;
			padding: 0.4em 0;
			border: 1px solid #c6a894;
			display: block;
			color: #5e5e5e;
			cursor: pointer;
			position: relative;
			margin: 0 auto;
			-moz-box-shadow: 0 1px 0 #CFC5C2;
			-webkit-box-shadow: 0 1px 0 #CFC5C2;
			outline: none !important;
			text-transform: uppercase;
			text-align: center;
		}
		
		div#leftBar a#recherche:hover, div#leftBar a#rechercheEn:hover, div#leftBar a#autoSlide:hover {
			background: #e6dcd5;
			color: #5d2615;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			top: 1px;
		}
		div#leftBar a#recherche:active, div#leftBar a#rechercheEn:active, div#leftBar a#autoSlide:active { 
			-moz-box-shadow: inset 0px 1px 0px #8f6355, 0px 1px 0px #fff;
			-webkit-box-shadow: inset 0px 1px 0px #8f6355, 0px 1px 0px #fff;
			top: 2px;
			padding: 0.5em 0 0.3em 0;
			background: #cdbbaf;
			border: 1px solid #b79985;
			text-shadow: 0px -1px 0px #c0a99a;
		}
		div#leftBar a#autoSlide { opacity: 0.7; } 
		 
		 
		div#leftBar span#prevBtn, div#leftBar span#nextBtn {
			width: 6.4em;
			background: url(../images/backBouton.jpg) left 0.8em repeat-x white;
			padding: 0.2em 0;
			border: 1px solid #c6a894;
			cursor: pointer;
			position: relative;
			margin: 0 auto;
			display: inline-block;
			outline: none;
			-moz-box-shadow: 0 1px 0 #CFC5C2;
			-webkit-box-shadow: 0 1px 0 #CFC5C2;
			opacity: 0.7;
		 }
		 
		 div#leftBar span#prevBtn:hover, div#leftBar span#nextBtn:hover {
			background: url(../images/backBouton.jpg) left -0.5em repeat-x white;
			color: #5d2615;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			top: 1px;
		}
		
		div#leftBar span#prevBtn:active, div#leftBar span#nextBtn:active {
			-moz-box-shadow: inset 0px 1px 0px #8f6355, 0px 1px 0px #fff;
			-webkit-box-shadow: inset 0px 1px 0px #8f6355, 0px 1px 0px #fff;
			top: 2px;
			padding: 0.1em 0 0.2em 0;
			background: #cdbbaf;
			text-shadow: 0px -1px 0px #c0a99a;
			color: white;
		}
		
		 div#leftBar span#prevBtn a, div#leftBar span#nextBtn a {
		 	font-family: Trebuchet MS, Verdana, Arial, sans-serif;
			font-size: 18px;
			color: #5e5e5e;
			text-decoration: none;
			line-height: 1.2em;
			text-align: center;
			display: block;
			outline: none;
			font-weight: normal;
			margin: 0;
		 }
		div#leftBar ul li b#nombreresultats { text-align: center; font-size: 0.9em; margin-top: 0.6em; display: block; color: #ab8c73; }
		
		#portfolio div#slider {
			margin-top: -5px;
			border: none;
			width: auto;
		}

	/* ------------------------------------
		CONTENU SPECIFIQUE -> CLIENTELE
	 ------------------------------------ */

		ul.clients  {
			color: #757575;
			list-style: none;
			text-align: left;
			margin: 1em 0 0 3em;
			line-height: 1.2em;
			display: block;
			position: absolute;
			top: 6em;
			width: 95%;
		}
		
		ul.clients li {
			float: left;
			clear: left;
			width: 48%;
			margin: 0;
			display: inline-block;
		}
		
		ul.clients li.droite  {
			float:right;
			clear: right;
			position: relative;
		}
		
		ul.clients a {
			color: #757575;
			font-size:1em;
		}
		
		ul.clients a:hover { color: #582A05; }
		ul.clients li span { color:#582a05; }
		ul#grandes.clients li.droite { top: -7em; }
		ul#moyennes.clients li.droite { top: -25em; }
		ul#onl.clients li.droite { top: -6em; }
		ul#societes.clients li.droite { top: -3.6em; }
		
		ul#moyennes {
			top: 16.5em;
		}
		
		ul#societes {
			top: 53.5em;
		}
		
		ul#onl {
			top: 44.5em;
		}


	/* ------------------------------------
		CONTENU SPECIFIQUE -> EQUIPE
	 ------------------------------------ */
		 
		div#leftBar ul li a[href="#mia"], div#leftBar ul li a[href="#emma"],
		div#leftBar ul li a[href="#annie"], div#leftBar ul li a[href="#cath"],
		div#leftBar ul li a[href="#rachel"] { 
			font-size: 1.2em;
			top: 0.21em;
			position: relative;
			color: #906949;
		}
		div#leftBar ul li a[href="#mia"].active,
		div#leftBar ul li a[href="#emma"].active,
		div#leftBar ul li a[href="#annie"].active,
		div#leftBar ul li a[href="#cath"].active,
		div#leftBar ul li a[href="#rachel"].active,
		div#leftBar ul li a[href="#mia"]:hover,
		div#leftBar ul li a[href="#emma"]:hover,
		div#leftBar ul li a[href="#annie"]:hover,
		div#leftBar ul li a[href="#cath"]:hover,
		div#leftBar ul li a[href="#rachel"]:hover { 
			color: #582a05;
		}
		
		#mia, #cath, #emma, #annie { display: none; }
		 
		div#mia h4, div#emma h4, div#annie h4, div#cath h4 { margin: 0 0 0 2.3em; }
		
		div#mia img {
			position: absolute;
			right: -60px;
			bottom: -33px;
		}
		div#mia p { width: 42%; }
		div#mia { background: url(../images/backAnnie.jpg) no-repeat center 3.5em; height: 55.2em; position: relative; }
		div#mia h5 { margin: 0.7em 0 0.7em 9em; }
		
		div#cath img {
			position: absolute;
			right: -90px;
			bottom: -1px;
		}
		
		#cath { background: url(../images/backCath.jpg) no-repeat center top; height: 56.2em; position: relative; }
		
		div#cath h5 { margin: 3.4em 0 1em 9em; }
		div#cath p { width: 42%; }
		
		div#annie { background: url(../images/backMia.jpg) no-repeat center top; height: 55.2em; }
			
		div#annie img {
			position: absolute;
			right: -100px;
			bottom: -1px;
		}
		
		div#annie h5 { margin: 10.5em 7em 2em 8em; }
		div#annie p { float: left; width: 42%; margin-right: 0; }
		
		div#emma { background: url(../images/backEmma.jpg) no-repeat center -4em; }
		div#emma img {
			position: absolute;
			right: -185px;
			bottom: -1px;
		}
		
		
		div#emma h5 { top: 12em; margin: 0.8em 0 2.5em 13.5em; float: none; }
		div#emma h3 { margin-top: 19em; }
		div#emma p { margin-right: 17em; }


	/* ------------------------------------
		CONTENU SPECIFIQUE -> CONTACT
	 ------------------------------------ */
		
		div#contenu iframe {
			border:1px solid #EFEAE7;
			margin-top: 2em;
		}