/*--------------------------------------------------------------------------------
    CSS - Feuille de style générale
    
    projet: 	Portfolio Ophélie Brunet
    modifie le: 2009-09-18
    auteur: 	Jean-Christophe Brebion
    email: 		jean-christophe@fairytree.net
    site web: 	http://www.fairytree.net  
    
--------------------------------------------------------------------------------*/


/*----- STYLES DE BASE -----*/
html {
    font-size: 100%; /* Évite un bug d'IE 6-7 */
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, FreeSans, sans-serif;
    font-size: 0.75em;
    line-height: 1.5em; 
    color: #1a171b;
    background: #f3f1f1 url(images/bg-body.jpg) repeat-x 0 0;
}

/*--- Titres ---*/
h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 .5em 0;
    line-height: 1.2;
    font-weight: bold;
    font-style: normal;
}
h1 {
    font-size: 1.75em;
}
h2 {
    font-size: 1.5em;
}
h3 {
	color:  #dc2b69;
	font-size: 1.3em;
}
h4 {
    font-size: 1em;
    margin: 1em 0 .5em 0;
}

/*--- Listes ---*/
ul, ol {
    margin: .75em 0 .75em 32px;
    padding: 0;
}

/*--- Paragraphes ---*/
p {
    margin: .75em 0;
}
address {
    margin: .75em 0;
    font-style: normal;
}

/*--- Liens ---*/
a {
    text-decoration: underline;
}
a:link {
    color: #dc2b69;
}
a:visited {
    color: #dc2b69;
}
a:hover, a:focus, a:active {
    color: #000;
}
a img {
    border: none;
}

/* Divers éléments de type en-ligne */
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}

/* ----- STYLES DE BASE SUPPLÉMENTAIRES ----- */

/* Met en évidence les abréviations */
abbr, acronym {
    border-bottom: 1px dotted;
    cursor: help;
}

/* Met en évidence les citations */
blockquote {
    margin: .75em 0 .75em 20px;
    padding: 0 0 0 10px;
    border-left: solid 2px #ddd;
}
q {
    font-style: italic;
    quotes: none; /* Supprime les guillemets automatiques */
}
cite {
    font-style: italic;
}
q cite, q q {
    font-style: normal
}

/* Rapproche les paragraphes dans les listes et citations */
blockquote p, li p {
    margin: .5em 0;
}

/* Mise en forme simple pour les tableaux */
table {
    margin: 0;
    border: 1px solid gray; /* Pas de bordure = "none". */
    border-collapse: collapse; /* Valeur par défaut: "separate". */
    border-spacing: 0;
}
table td, table th {
    padding: 4px; /* Pas de retrait autour du texte = "0". */
    border: 1px solid #ccc; /* Pas de bordure = "none". */
    vertical-align: top; /* Valeur par défaut: "middle" */
    text-align: left;
}

/*----- MISE EN PAGE  -----*/
#wrapper {
	width: 950px;
	margin: 20px auto;
	overflow: hidden;
}

/*--- Header ---*/
#header {
	width: 950px;
	height: 210px;
	background: url(images/bg-header.png) no-repeat 0 0;
	position: relative;
}
#header h1 {
	position: absolute;
	top: 10px;
	left: 40px;
}

/* Menu de navigation */
#topnav {
	width: 950px;
	height:  65px;
	overflow: hidden;
	position: absolute;
	top: 148px;
	left: 0;
}
#topnav ul {
	margin-left: 25px;
}
#topnav ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline;
}
#topnav ul li a,
#topnav ul li span {
	display: inline;
	float: left;
	height: 45px;
	width: 152px;
	margin-right: 5px;
	padding: 0;
	text-indent: -9999px;
}
#topnav ul li span,
#topnav ul li a:hover { height: 51px;}
#topnav ul li#topnav1 a { background: url(images/onglet-accueil.jpg) no-repeat 0 0;}
#topnav ul li#topnav1 a:hover { background: url(images/onglet-accueil.jpg) no-repeat 0 -90px;}
#topnav ul li#topnav1 span { background: url(images/onglet-accueil.jpg) no-repeat 0 -90px;}

#topnav ul li#topnav2 a { background: url(images/onglet-services.jpg) no-repeat 0 0;}
#topnav ul li#topnav2 a:hover { background: url(images/onglet-services.jpg) no-repeat 0 -90px;}
#topnav ul li#topnav2 span { background: url(images/onglet-services.jpg) no-repeat 0 -90px;}

#topnav ul li#topnav3 a { background: url(images/onglet-portfolio.jpg) no-repeat 0 0;}
#topnav ul li#topnav3 a:hover { background: url(images/onglet-portfolio.jpg) no-repeat 0 -90px;}
#topnav ul li#topnav3 span { background: url(images/onglet-portfolio.jpg) no-repeat 0 -90px;}

#topnav ul li#topnav4 a { background: url(images/onglet-apropos.jpg) no-repeat 0 0;}
#topnav ul li#topnav4 a:hover { background: url(images/onglet-apropos.jpg) no-repeat 0 -90px;}
#topnav ul li#topnav4 span { background: url(images/onglet-apropos.jpg) no-repeat 0 -90px;}

#topnav ul li#topnav5 a {
	background: url(images/onglet-devis.jpg) no-repeat 0 0;
	width: 166px;
}
#topnav ul li#topnav5 a:hover { background: url(images/onglet-devis.jpg) no-repeat 0 -90px;}
#topnav ul li#topnav5 span {
	background: url(images/onglet-devis.jpg) no-repeat 0 -90px;
	width: 166px;
}

p#contact {
	position: absolute;
	top: -12px;
	right: 20px;
	text-indent: -9999px;
}
p#contact a {
	background: url(images/onglet-contact.jpg) no-repeat 0 0;
	height: 36px;
	width: 145px;
	display: block;
}
p#contact a:hover { background: url(images/onglet-contact.jpg) no-repeat 0 -36px;}
p#contact a.active { background: url(images/onglet-contact.jpg) no-repeat 0 -36px;}

/*--- Content ---*/
#content {
	background: url(images/bg-content.png) repeat-y 0 0;
	padding: 10px 50px 20px;
	overflow: hidden;
	min-height: 400px;
	position: relative;
}
#content h2 {
	position: relative;
	left: -23px;
}
#content ul {
	margin-left: 10px;
}
#content ul li {
	margin-bottom: 0.5em;
	list-style-position: inside;
}

/*--- Footer ---*/
#footer {
	background: url(images/bg-footer.png) no-repeat bottom left;
	width: 950px;
	height: 75px;
}
#footer ul {
	margin: 0 auto;
	padding-top: 28px;
	text-align: center;
}
#footer ul li {
	list-style: none;
	display: inline;
	padding: 0;
	margin: 0;
}
#footer ul li a {
	color: #fff;
	text-decoration: none;
	padding: 3px 15px 3px 15px;
	margin-left: -5px;
	background: url(images/bg-bottomnav-li.jpg) no-repeat right center;
}
#footer ul li a:hover {
	text-decoration: underline;
}
#footer ul li a.last {
	background: none;
}
#footer ul li a.active {
	font-weight: bold;
	text-decoration: underline;
}

/*----- ACCUEIL -----*/
body#accueil #content{
	padding: 20px 60px 20px;
}
body#accueil h2 {
	margin-bottom: -5px;
	position: static;
}
p#slogan {
	font-weight: bold;
	font-size: 1.3em;
	margin: 0;
	letter-spacing: -0.8px;
}
/*--- Bloc Chapeau ---*/
#chapeau {
	width: 540px;
	float: left;
}
/*--- Bloc Devis ---*/
#bloc-devis {
	width: 270px;
	float: right;
	padding-top: 40px;
}
#bloc-devis p {
	padding-left: 20px;
	margin-bottom: 0;
}
#bloc-devis a#bouton-devis {
	width: 259px;
	height: 89px;
	display: block;
	margin: 0 auto;
	text-indent: -9999px;
	background: url(images/bouton-devis.jpg) no-repeat 0 0;
	cursor: pointer;
}
#bloc-devis a#bouton-devis:hover { background: url(images/bouton-devis.jpg) no-repeat 0 -89px;}
#bloc-devis a#bouton-devis:active { background: url(images/bouton-devis.jpg) no-repeat 0 -178px;}

/*--- Bloc Prestations ---*/
#prestas {
	clear: both;
	padding-top: 30px;
}
#prestas .bloc-presta {
	width: 256px;
	float: left;
	margin-right: 25px;
}
#prestas .bloc-presta.last {
	margin-right: 0;
}
#prestas .bloc-presta h3 {
	margin-top: 0;
}
#prestas .bloc-presta h3 a {
	text-decoration: none;
}
#prestas .bloc-presta h3 a:hover {
	color: #d85482;
}
#prestas .bloc-presta img.screen-home {
	padding: 6px 6px 15px 6px;
	background: #d8d8d8 url(images/bg-screen-home.jpg) repeat-x bottom left;
}
#prestas .bloc-presta img.screen-home:hover {
	background: #bbb url(images/bg-screen-home_hover.jpg) repeat-x bottom left;
}

/*----- SERVICES -----*/
#liste-services {
	border: 1px solid #d8d8d8;
	background: #f5f4f4;
	padding: 15px 0;
}
#liste-services .bloc-service {
	margin: 30px 63px 30px;
	overflow: hidden;
	height: 100%;
}
#liste-services .bloc-service img {
	border: 6px solid #d8d8d8;
	float: left;
}
#liste-services .bloc-service .detail-service {
	width: 400px;
	float: right;
}
#liste-services .bloc-service .detail-service h3 {
	margin-top: 0;
}
a#bouton-print, a#bouton-logos, #bouton-web {
	display: block;
	width: 203px;
	height: 46px;
	margin-top: 10px;
	background: url(images/bouton-print.jpg) no-repeat 0 0;
	text-indent: -9999px;
	cursor: pointer;
	float: right;
}
a#bouton-print:hover { background: url(images/bouton-print.jpg) no-repeat 0 -46px;}
a#bouton-print:active { background: url(images/bouton-print.jpg) no-repeat 0 -92px;}

a#bouton-logos { background: url(images/bouton-logos.jpg) no-repeat 0 0;}
a#bouton-logos:hover { background: url(images/bouton-logos.jpg) no-repeat 0 -46px;}
a#bouton-logos:active { background: url(images/bouton-logos.jpg) no-repeat 0 -92px;}

a#bouton-web { background: url(images/bouton-web.jpg) no-repeat 0 0;}
a#bouton-web:hover { background: url(images/bouton-web.jpg) no-repeat 0 -46px;}
a#bouton-web:active { background: url(images/bouton-web.jpg) no-repeat 0 -92px;}

/*----- PORTFOLIO -----*/

body#portfolio h2 {
	margin-bottom: 30px;
}

/*--- Navigation secondaire (web/logos/print) ---*/
#secondarynav {
	width: 330px;
	position: absolute;
	top: 37px;
	right: 20px;
	text-align: right;
	font-size: 1.2em;
}
#secondarynav p {
	float: left;
	font-weight: bold;
}
#secondarynav ul li {
	display: inline;
	margin-right: 10px;
}
#secondarynav ul li a {
	color: #1a171b;
	text-decoration: none;
	padding-left: 20px;
	background: url(images/bg-secondarynav-li.jpg) no-repeat 0 -1px;
}
#secondarynav ul li a:hover, #secondarynav ul li.active a {
	color: #dc2b69;
	text-decoration: underline;
	background: url(images/bg-secondarynav-li_active.jpg) no-repeat 0 0;
}

/*--- Bloc projet ---*/
.bloc-projet {
	padding: 20px;
	background: #f5f4f4;
	border: 1px solid #d8d8d8;
	margin-bottom: 20px;
	overflow: hidden;
}
.bloc-projet-web img {
	border: 6px solid #d8d8d8;
	padding: 0;
	margin: 0;
	float: left;
}
.bloc-projet .detail-projet h3 {
	margin-top: 0;
}
.bloc-projet .detail-projet {
	width: 220px;
	float: right;
}
a.bouton-siteweb {
	width: 135px;
	height: 45px;
	display: block;
	margin: 20px auto;
	text-indent: -9999px;
	background: url(images/bouton-siteweb.jpg) no-repeat 0 0;
	cursor: pointer;
}
a.bouton-siteweb:hover { background: url(images/bouton-siteweb.jpg) no-repeat 0 -45px;}
a.bouton-siteweb:active { background: url(images/bouton-siteweb.jpg) no-repeat 0 -90px;}

/*--- Slider (Easy Slider 1.5) ---*/

.slider {
	border: 6px solid #d8d8d8;
	width: 550px;
	height: 235px;
}

#content .slider ul, #content .slider ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.slider li {  
	width: 550px;
	height: 235px;
	overflow: hidden;
}
p#controls1, p#controls2, p#controls3, p#controls4, p#controls5, p#controls6, p#controls7, p#controls8,
p#controls9, p#controls10, p#controls11, p#controls12, p#controls13, p#controls14, p#controls15, p#controls16 {
	margin: 0;
	position: relative;
} 

.prevBtn, .nextBtn { 
	display:block;
	margin:0;
	overflow:hidden;
	text-indent:-8000px;		
	width:46px;
	height:46px;
	position:absolute;
	left: 20px;
	top: -150px;
}	
.nextBtn  { 
	left: 500px;
}														
.prevBtn a, .nextBtn a {  
	display: block;
	width: 46px;
	height: 46px;
	background: transparent url(images/prev.png) no-repeat 0 0;	
}	
.nextBtn a { background: transparent url(images/next.png) no-repeat 0 0;}	
.prevBtn a:hover { background: transparent url(images/prev.png) no-repeat 0 -46px;}	
.nextBtn a:hover { background: transparent url(images/next.png) no-repeat 0 -46px;}						


/*----- A PROPOS -----*/

#bloc-perso {
	position: absolute;
	bottom: 15px;
	right: 30px;
	width: 397px;
	height: 324px;
	padding: 20px 30px;
	background: url(images/bg-bloc-perso.jpg) no-repeat 0 0;
}
#bloc-perso h2 {
	margin: -48px 0 20px 0;
	width: 148px;
	height: 40px;
	text-indent: -9999px;
	background: url(images/titre-perso.png) no-repeat 0 0;
}
#bloc-perso img {
	margin: 0 10px 10px 0;
}

/*----- FORMULAIRES -----*/

div.form {
	background: #dcbc84;
	width: 600px;
	margin: 20px auto 0;
	padding: 30px 30px 15px;
	position: relative;
}

p#champs-obligatoires {
	font-style: italic;
	position: absolute;
	top: 0;
	right: 30px;
}
span.etoile {
	color: #dc2b69;
	font-size: 1.2em;
}

input, button, select {
    vertical-align: middle; /* Solution pb. d'alignement. */
}
fieldset {
	padding: 10px 20px;
	border: none;
	border-top: 1px solid #c19d69;
}
body#contact fieldset {
	border: none;
}
fieldset p {
	overflow: hidden;
	
}
legend {
	padding: 0 10px;
	display: inline;
	color: #9e763d;
	font-size: 1.1em;
}
label {
	float: left;
	text-align: right;
	width: 117px;
	font-weight: bold;
	color: #1a171b;
}
input, input[type="file"], textarea, select {
	border: 1px solid #c19d69;
	background: #fff;
	padding: 3px;
	margin: 0 10px;
	color: #1a171b;
}
input#cfEmail {
	width: 200px;
}
input#cfContact {
	background: url(images/bouton-envoi-contact.jpg) no-repeat 0 0;
	width: 216px;
	height: 53px;
	text-indent: -9999px;
	border: none;
	margin: 20px auto 0;
	display: block;
	cursor: pointer;
	font-size: 1px;
}
input#cfContact:hover { background: url(images/bouton-envoi-contact.jpg) no-repeat 0 -53px;}
input#cfContact:active { background: url(images/bouton-envoi-contact.jpg) no-repeat 0 -106px;}

input#cfDevis {
	background: url(images/bouton-envoi-devis.jpg) no-repeat 0 0;
	width: 216px;
	height: 53px;
	text-indent: -9999px;
	border: none;
	margin: 20px auto 0;
	display: block;
	cursor: pointer;
}
input#cfDevis:hover { background: url(images/bouton-envoi-devis.jpg) no-repeat 0 -53px;}
input#cfDevis:active { background: url(images/bouton-envoi-devis.jpg) no-repeat 0 -106px;}

div.errors {
	padding: 8px;
	margin-bottom: 10px;
	background: #fff;
	color: #dc2b69;
	border: 1px solid #dc2b69;
}
input.required, select.required, textarea.required { border: 1px solid #dc2b69;}
label.required { color: #dc2b69;}

p.thanks {
	background: #dcbc84;
	width: 600px;
	margin: 20px auto 0;
	padding: 15px 30px 15px;
}

/*----- SUPPRESSION OUTLINE -----*/
*:focus {
	outline: none;
}
*::-moz-focus-inner {
	border: none;
}