/* ----=== Forme principale ===---- */
html {background: url(../images/up_background.jpg) #000000 no-repeat; background-position: center top; margin-left:-12px;} /* Background creuvasse */
body {width:978px; margin:0 auto; font:13px normal Verdana, Arial, Helvetica, sans-serif;}
abbr {text-decoration:underline; color:#006600; cursor:help;}
/* ----=== Entête ===---- */
div#entete {margin-left:15px;} /* Placer le logo avec la fissure */
div#entete a#logo {background:url(../images/logo_chris.jpg) no-repeat; display:block; width:498px; height:289px; text-indent:-999999px; margin-left:4px;} /* Remplacer le lien par le logo */
div#entete ul#nav_principal {position:absolute; top:292px;} /* PLacer le menu selon la grille */
div#entete ul#nav_principal li {float:left;} /* Affiche les liens en ligne */
/* Remplacer les liens par leur image respective */
div#entete ul#nav_principal li#accueil {width:225px;}
div#entete ul#nav_principal li#accueil a {background:url(../images/naviguation/lien_accueil.jpg); display:block; width:210px; height:61px; text-indent:-999999px;}
div#entete ul#nav_principal li#accueil a.actif {background-position:0 100%;}
div#entete ul#nav_principal li#accueil a:hover {background-position:0 100%;}
div#entete ul#nav_principal li#portfolio {width:284px}
div#entete ul#nav_principal li#portfolio a {background:url(../images/naviguation/lien_portfolio.jpg); display:block; width:268px; height:61px; text-indent:-999999px;}
div#entete ul#nav_principal li#portfolio a.actif {background-position:0 100%;}
div#entete ul#nav_principal li#portfolio a:hover {background-position:0 100%;}
div#entete ul#nav_principal li#propos {margin:0 3px; width:245px;}
div#entete ul#nav_principal li#propos a {background:url(../images/naviguation/lien_propos.jpg); display:block; width:235px; height:61px; text-indent:-999999px;}
div#entete ul#nav_principal li#propos a.actif {background-position:0 100%;}
div#entete ul#nav_principal li#propos a:hover {background-position:0 100%;}
div#entete ul#nav_principal li#contact {width:219px;}
div#entete ul#nav_principal li#contact a {background:url(../images/naviguation/lien_contact.jpg); display:block; width:218px; height:61px; text-indent:-999999px;}
div#entete ul#nav_principal li#contact a.actif {background-position:0 100%;}
div#entete ul#nav_principal li#contact a:hover {background-position:0 100%;}
div#entete ul#nav_principal span.tiret {width:14px; height:7px; background:#000000; display:block; text-indent:-999999px; float:right; position:relative; bottom:30px;}
/* ----=== Conteneur ===---- */
div#conteneur {background:#FFFFFF; width:978px; margin-top:65px; margin-left:12px; position:relative;} /* Background conteneur (contenu de la page) */
div#conteneur a {color:#333333;}
div#conteneur a:hover {color:#000000;}
div#conteneur strong {font-weight:bold;}
/* div#conteneur #sep_vert_haut {height:6px; display:block; background-color:#a5c52c;} */
/* --- News --- */
div#conteneur #bloc_nouvelles {padding-top:25px; margin-left:13px; width:298px; display:block; position:absolute; left:0;}
div#conteneur #bloc_nouvelles h2 {background:url(../images/contenu/back_news.png); width:298px; height:87px; text-indent:-999999px;}
div#conteneur #bloc_nouvelles .nouvelle {margin-top:20px; position:relative; display:block;}
div#conteneur #bloc_nouvelles .nouvelle .date_news {background:url(../images/contenu/back_date.png) no-repeat; width:66px; height:64px; font-family:Arial Black, Helvetica, sans-serif; display:block; text-align:center; color:white; padding-top:0; position:absolute; left:0;}
div#conteneur #bloc_nouvelles .nouvelle .date_news .jour {font-size:36px; margin-bottom:-30px;}
div#conteneur #bloc_nouvelles .nouvelle .date_news .mois {font-size:14px;}
div#conteneur #bloc_nouvelles .nouvelle .contenu_news {display:block; width:222px; margin-left:70px;}
div#conteneur #bloc_nouvelles .nouvelle .contenu_news h3 {font-size:18px; color:#333333; margin-bottom:1em;}
div#conteneur #bloc_nouvelles .nouvelle .contenu_news .redacteur_news {text-align:right; font-style:italic; margin-top:1em;}
/* --- Contenu --- */
div#conteneur #contenu {position: relative; left:320px; width:650px; background:url(../images/contenu/sep_nouvelle.png) repeat-y; padding-left:20px; padding-top:25px;}
div#conteneur #contenu #reseaux {position:absolute; top:15px; right:30px;}
div#conteneur #contenu #reseaux a#facebook_icon {background:url(../images/reseaux/facebook.png); width:21px; height:21px; display:inline-block; text-indent:-999999px; position:relative; bottom:4px;}
div#conteneur #contenu #reseaux a#twitter_icon {background:url(../images/reseaux/twitter.png); width:21px; height:21px; display:inline-block; text-indent:-999999px; position:relative; bottom:4px;}
/* 3 raisons de me choisir */
div#conteneur #contenu #trois_raisons #head_raisons {background:url(../images/contenu/back_head_3raisons.jpg) no-repeat; width:627px; height:136px; display:block; text-indent:-999999px;}
div#conteneur #contenu #trois_raisons #corps_raisons {background:url(../images/contenu/back_3raisons.jpg) no-repeat; width:627px; height:232px; display:block;}
div#conteneur #contenu #trois_raisons #corps_raisons dl {position:relative; top:15px; left:32px;}
div#conteneur #contenu #trois_raisons #corps_raisons dd {margin:12px 0;}
div#conteneur #contenu #trois_raisons dt#design {background:url(../images/contenu/back_titre_design.png) no-repeat; width:103px; height:28px; display:block; text-indent:-999999px;}
div#conteneur #contenu #trois_raisons dt#interactivite {background:url(../images/contenu/back_titre_interactivite.png) no-repeat; width:179px; height:33px; display:block; text-indent:-999999px;}
div#conteneur #contenu #trois_raisons dt#imprime {background:url(../images/contenu/back_titre_imprime.png) no-repeat; width:120px; height:33px; display:block; text-indent:-999999px;}
div#conteneur #contenu #trois_raisons .dot_liens {background:url(../images/contenu/round_link_dot.png) no-repeat; width:20px; height:19px; display:block; text-indent:-999999px; float:left; margin-right:5px; position:relative; bottom:2px;}
div#conteneur #contenu #trois_raisons #foot_raisons {background:url(../images/contenu/back_foot_3raisons.jpg) no-repeat; width:627px; height:57px; display:block; position:relative;}
div#conteneur #contenu #trois_raisons #photo_chris {background:url(../images/contenu/photo_chris.png) no-repeat; width:315px; height:421px; display:block; position:absolute; right:-15px; bottom:0;}
/* Recentes réalisations */
div#conteneur #contenu #recent_realisations {margin-top:20px;}
div#conteneur #contenu #recent_realisations h2 {background:url(../images/contenu/back_titre_realisation_recent.jpg) no-repeat; width:627px; height:57px; display:block; text-indent:-999999px;}
div#conteneur #contenu #recent_realisations #realisations {position:relative; width:627px;}
div#conteneur #contenu #recent_realisations #realisations .carousel {position:relative; visibility:hidden; left:-5000px; margin-top:15px; margin-bottom:10px;}
div#conteneur #contenu #recent_realisations #realisations .carousel ul li {margin-left:6px; margin-right:6px;}
div#conteneur #contenu #recent_realisations #realisations .prev {background:url(../images/next.jpg); border:none; cursor: pointer; text-indent:-999999px; height:101px; width:40px; float:left;}
div#conteneur #contenu #recent_realisations #realisations .next {background:url(../images/prev.jpg); border:none; cursor: pointer; text-indent:-999999px; height:101px; width:40px; position:absolute; top:0; right:0;}
/* Formulaire contact */
div#conteneur #formulaire_contact {padding-bottom:20px; position:relative; width:550px;}
div#conteneur #formulaire_contact h2 {background:url(../images/contenu/back_titre_formulaire_contact.jpg) no-repeat; width:627px; height:57px; display:block; text-indent:-999999px; margin-bottom:20px;}
div#conteneur #formulaire_contact fieldset {margin-top:12px;}
div#conteneur #formulaire_contact label {padding-bottom:3px; font-weight:bold;}
div#conteneur #formulaire_contact input, div#conteneur #formulaire_contact textarea {border: 2px #CCCCCC solid; padding: 4px 5px;}
div#conteneur #formulaire_contact select {margin-bottom:-4px; height:28px;}
div#conteneur #formulaire_contact #envoi_message {color:#669933;}
div#conteneur #formulaire_contact #envoi_message_erreur, div#conteneur #formulaire_contact .obligatoire, div#conteneur #formulaire_contact .erreur {color:#8B3434; font-weight:bold;}
div#conteneur #formulaire_contact .erreur {font-size:11px; margin-top:5px;}
div#conteneur #formulaire_contact .erreur_input {border: 2px #A34745 solid;}
/* div#conteneur #formulaire_contact .valid_input {border: 2px #669933 solid;} */
div#conteneur #formulaire_contact .facultatif {font-size:10px;}
/* div#conteneur #formulaire_contact .valid_check {background: url(../images/formulaire/valid.png) no-repeat; width:31px; height:31px; display:inline-block; margin-bottom:-8px;} */
div#conteneur #formulaire_contact .invalid_check {background: url(../images/formulaire/invalid.png) no-repeat; width:31px; height:31px; display:inline-block; margin-bottom:-10px;}
form#form_comm {background:#E5E5E5; width:526px; padding:10px 15px 10px 15px; margin-top:15px;}
/* ----=== Affichage des boutons de partage ===---- */
div#liens_partage {float:right; margin-top:-30px;}
#share_fb {background:url(../images/reseaux/icon_fb.png); display:inline-block; width:27px; height:27px; text-indent:-999999px;}
#share_twitter {background:url(../images/reseaux/icon_tw.png); display:inline-block; width:27px; height:27px; text-indent:-999999px;}
#share_google {background:url(../images/reseaux/icon_gg.png); display:inline-block; width:27px; height:27px; text-indent:-999999px;}
#share_fb:hover {background-position:left bottom;}
#share_twitter:hover {background-position:left bottom;}
#share_google:hover {background-position:left bottom;}
/* ----=== Affichage des commentaires ===---- */
div#tete_comm {background: url(../images/formulaire/topComment.png); display:block; width:554px; height:37px; margin-top:10px;}
div#pied_comm {background: url(../images/formulaire/bottomComment.png); display:block; width:554px; height:16px; margin-top:-15px;}
div#comm_aff {position:relative; background:#d3dab5; width:539px; padding-left:15px;}
p#p_nom_com {font-weight:bold; width:200px; display:block; color:#657D33;}
p#p_date_com {width:150px; display:block; position:absolute; left:445px; font-size:11px; color:#657D33;}
p#p_com_com {font-style:italic;}
/* ----=== Portfolio ===---- */
div#conteneur #portfolio_contenu {padding-top:23px; padding-left:10px; min-height:650px; padding-bottom:20px;}
div#conteneur #portfolio_contenu p {margin-bottom:15px; width:535px; line-height:20px;}
div#conteneur #portfolio_contenu img#fancybox_img {border:1px solid #CCC; padding:2px; margin:10px 5px 10px 0; margin-top:0px;}
div#conteneur #portfolio_contenu #realisation {padding-bottom:30px;}
div#conteneur #portfolio_contenu #realisation h3 {margin-top:15px;}
/* ----=== Propos ===---- */
div#conteneur #propos_contenu {padding-top:23px; padding-left:10px; padding-bottom:20px; width:963px; display:inline-block;}
div#conteneur #propos_contenu h2#titre_propos {background:url(../images/contenu/quisuisje.jpg) no-repeat; width:551px; height:59px; display:block; text-indent:-999999px; margin-bottom:20px;}
div#conteneur #propos_contenu p {margin-bottom:15px; line-height:20px;}
div#conteneur #propos_contenu h3#dii {background:url(../images/contenu/dii.jpg) no-repeat; width:556px; height:48px; display:block; text-indent:-999999px; margin-bottom:20px;}
div#conteneur #propos_contenu h4 {font-size:20px; font-weight:bold; margin-botttom:5px;}
div#conteneur #propos_contenu #texte_propos {padding-bottom:30px;}
div#conteneur #propos_contenu #texte_propos h3 {margin-top:15px;}
div#conteneur #propos_contenu #texte_propos p {width:545px;}
div#conteneur #propos_contenu #photo_propos {display:block; float:right; width:401px; margin-top:-3px;}
div#conteneur #propos_contenu span#photographie {background:url(../images/contenu/photo_propos.jpg) no-repeat; width:401px; height:536px; display:block; text-indent:-999999px;}
div#conteneur #propos_contenu #photo_propos p {text-align:right; margin-right:10px;}
/* ----=== Contact ===---- */
div#conteneur #propos_contenu #conteneur_formulaire {margin-top:-23px; margin-bottom:-20px; width:632px; background:url(../images/contenu/sep_nouvelle2.png) repeat-y; background-position:right;}
div#conteneur #propos_contenu #conteneur_formulaire #formulaire_contact {padding-top:23px;}
div#conteneur #propos_contenu #coordonnee {display:block; float:right; margin-right:5px;}
div#conteneur #propos_contenu #coordonnee h3#coordonnees_titre {background:url(../images/contenu/coordonnees.jpg) no-repeat; width:316px; height:83px; display:block; text-indent:-999999px;}
div#conteneur #propos_contenu #coordonnee p {margin-top:20px;}
/* ----=== Footer ===---- */
div#footer {clear:both; color:white; margin-top:15px; margin-bottom:15px; width:978px; margin-left:12px;}
div#footer a {float:right; color:white; text-decoration:none;}