@charset "UTF-8";
/* CSS Document */

/* BALISES
--------------------------------------------- */
img{
border:none;
}

img, div, input, a, span, span a, .class, ul, li { behavior: url("sty/iepngfix.htc") }

body{ 
font-family: Arial, verdana, Helvetica, sans-serif;
margin:0;
background:#333f44 url(../img/general/fond.jpg) no-repeat top center;
color:#FFFFFF;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:12px;
}

a{ text-decoration:none;}

.barre_horizontale {
width:864px;
height:4px;
margin:0 0 10px 10px;
float:left;
background:transparent url(../img/icones/barre_hor.gif) repeat-x right top;
}

h2{
color:#FFFFFF;
}

h6{
font-size:14px;
}

.txt_li, h6, .apresdate, #referencecontent ul li a.savoir_plus:hover, #menu_b a:hover, #menu_validation a:hover, .stripTransmitter a:hover, .stripTransmitter a.current, .stripTransmitter a.current:hover, a, a.current:hover, a.current:focus{
color:#008DFF;
}

a.current:active{
color:#000000;
}


h2, h6{
height:19px;
margin:0;
overflow:hidden;
}

h2{
font-size:13px;
padding:5px 15px 0 15px;
background-color:#008DFF;
}

#header h1#logo_cw{
float:left;
width:300px;
height:103px;
}

h3{
font-size:12px;
width:800px;
color:#a5d738;
width:854px;
padding:0 0 3px 0;
margin:0;
overflow:hidden;
border-bottom:1px dotted #2A3438;
float:left;
clear:both;
}

h4{
font-size:14px;
height:17px;
width:827px;
color:#a7ce3d;
padding:0 15px 5px 12px;
margin:10px 0 0 0;
overflow:hidden;
border-bottom:1px dotted #2A3438;
float:left;
}

h5{
width:244px;
font-size:14px;
height:15px;
color:#b7b7b7;
padding:0 15px 5px 0;
margin:10px 0 0 12px;
border-bottom:1px dotted #2A3438;
float:left;
}

ul {
list-style-type:none;
margin:0;
padding:0;
}

#preloader{
height:100px;
width:100px;
left:50%;
top:50%;
margin-left:-50px; /* La moitier de la largeur */
margin-top:-50px; /* La moitier de la hauteur */
position:relative;
}

.txt_webdesign, #der_rea p{
margin:0;
padding:10px 0 10px 0;
text-align:justify;
float:left;
overflow:hidden;
width:854px;
}

.bfull{
float:left;
width:854px;
height:1px;
border-bottom:1px dotted #2A3438;
}

.datecv{
padding:10px 12px 4px 12px;
color:#b7b7b7;
text-align:justify;
float:left;
width:830px;
clear:both;
}

.apresdate{
padding:0 10px 0 12px;
text-align:justify;
float:left;
width:830px;
clear:both;
}

.descv{
margin:0;
padding:6px 12px 10px 12px;
text-align:justify;
width:830px;
clear:both;
float:left;
}

.blanc{
float:left;
border-bottom:1px dotted #2A3438;
background:transparent url(../img/cv/blanc.png) repeat top left;
}

.txt_li{
padding:5px 0;
margin:0 0 0 5px;
height:15px;
overflow:hidden;
border-bottom:1px dotted #2A3438;
border-top:1px dotted #2A3438;
display:block;
}

a:hover span.txt_li{
color:#a5d738;
}

.txt_webdesign{
width:820px;
font-size:13px;
}

.title_des{
color:#A5D738;
}


/* CONTACT
--------------------------------------------- */
#nom, #mail, #tel, #twitter, #facebook {
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:bold;
margin:10px 0 10px 12px;
padding:0 0 0 30px;
width:248px;
}

#nom {
background:transparent url(../img/formulaire/profile.gif) no-repeat scroll left top;
}

#twitter{
background:transparent url(../img/formulaire/twitter.png) no-repeat scroll left top;
}

#facebook{
background:transparent url(../img/formulaire/facebook.png) no-repeat scroll left top;
}

#mail {
background:transparent url(../img/formulaire/mail.gif) no-repeat scroll left top;
}

#mail a, #twitter a, #facebook a{
color:#9ED4FF;
}

#mail a:hover, #twitter a:hover, #facebook a:hover{
color:#A5D738;
}

#tel {
background:transparent url(../img/formulaire/tel.gif) no-repeat scroll left top;
}

.titlenoir {
color:#a5d738;
font-size:12px;
font-weight:bold;
height:auto;
margin:0 0 5px;
padding:0 0 2px;
width:238px;
}

.fonborder{
border-right:1px dotted #2A3438;
padding-right:5px;
width:285px;
}

/* REALISATIONS
--------------------------------------------- */
.competencescv{
width:281px;
height:150px;
float:left;
margin:0 5px 0 0;
*margin:0 2px 0 0;
background:transparent url(../img/cv/blanc.png) repeat top left;
}

.competencescv1{
width:281px;
height:150px;
float:left;
background:transparent url(../img/cv/blanc.png) repeat top left;
}

/* GENERAL
--------------------------------------------- */
#conteneur{
width:884px;
margin:0 auto 0 auto;
position:relative;
}

#header { 
width: 865px; 
height:auto; 
margin:0 0 15px 0; 
padding-top:5px;
float:left;
overflow:hidden;
}

#center{
width:884px;
height:auto;
float:left;
margin-bottom:10px;
}

/* MENU
--------------------------------------------- */
#header ul{ 
float:right;
height:auto;
display:inline;
margin:50px 0 0 0; 
padding:0;
}

#header ul li{ 
list-style-type:none; 
float:left;
display:inline;
margin:0 0 0 10px;
display:block;
}

#header ul li.actif .start{
float:left;
background:transparent url(../img/general/start.png) no-repeat scroll 0 0; 
width:4px; 
height:24px;}

#header ul li.actif .middle{
float:left;
background:url(../img/general/end.png) no-repeat right top;
height:24px;
padding-right:2px;
}

#header ul li.actif a{
text-decoration:none; 
color:#FFFFFF;}

#header ul li.actif{
background:transparent url(../img/general/fleche.png) no-repeat scroll 50% 100%; 
height:29px;}

#header ul li a {
padding:4px 5px 0 5px; 
text-decoration:none; 
font-family: Arial, verdana, Helvetica, sans-serif; 
font-size:12px;
display:block;}

#header ul li a:hover , #header ul li a#actif{
color:#FFFFFF;}

/* DERNIERE REALISATION
--------------------------------------------- */
#drea_a{
width:883px;
height:356px;
overflow:hidden;
background:transparent url(../img/general/fond_rea.png) no-repeat left top;
margin:0 0 10px 0;
padding:0 0 0 10px;
float:left;
}

#drea{
width:854px;
height:auto;
margin:0 0 10px 0;
float:left;
border-bottom:1px dotted #2A3438;
}

#der_rea{
width:854px;
float:left;
}

/* REFERENCES ACCUEIL
--------------------------------------------- */

#referencecontent{
width:864px;
height:290px;
background:transparent url(../img/icones/barre_hor.gif) repeat-x top left;
margin:10px 0 0 10px;
padding-top:10px;
overflow:hidden;
float:left;
}

#referencecontent ul{
margin-top:15px;
width:1500px;
}

#referencecontent ul li{
background:transparent url(../img/icones/barre_verti.gif) repeat-y right;
margin:0 9px 0 0;
padding:0 9px 0 0;
float:left;
width:200px;
height:234px;
}

#referencecontent ul li a.savoir_plus{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
padding:0 0 0 10px;
background:transparent url(../img/general/flechebleu_droite.gif) no-repeat center left;
}

#referencecontent span{
display:block;
padding:3px;
width:190px;
color:#A5D738;
background-color:#2A3438;
}

#referencecontent p{
display:block;
padding:3px;
width:190px;
color:#83a3b0;
text-align:justify;
padding:0;
margin:3px 0 0 0;
height:45px;
overflow:hidden;
}

.img-reference{
width:196px;
height:143px;
}

.gauche, .droite{
width:6px;
height:9px;
float:left;
margin-bottom:5px;
}

.gauche{
float:left;
margin-right:15px;
background:transparent url(../img/general/fleche_gauche.png) no-repeat -5px -5px;
}

.gauche a{
background:transparent url(../img/general/fleche_gauche.png) no-repeat -5px -5px;
width:6px;
height:9px;
display:block;
}

.gauche a:hover{
background:transparent url(../img/general/fleche_gauche.png) no-repeat -5px -23px;
margin-right:10px;
}

.droite {
background:transparent url(../img/general/fleche_droite.png) no-repeat -5px -5px;
width:6px;
height:9px;
display:block;
}

.droite a:hover {
background:transparent url(../img/general/fleche_droite.png) no-repeat -5px -23px;
}


.hfull_bleu{
border-bottom:1px dotted #2A3438;
border-top:1px dotted #2A3438;
width:854px;
}


/* EDITO
--------------------------------------------- */
#edito{
width:452px;
height:auto;
margin:0 19px 0 10px;
*margin:0 9px 0 5px;
float:left;
overflow:hidden;
background:transparent url(../img/icones/barre_verti.gif) repeat-y right top;
}

.medito{
width:auto;
height:150px;
overflow:hidden;
}

.medito span{
width:420px;
height:auto;
padding:5px 0;
text-align:justify;
float:left;
overflow:hidden;
}

.barre_vertical{
background:transparent url(../img/icones/barre_verti.gif) repeat-y right top;
}

#bedito{
background:transparent url(../img/general/b_edito.gif) no-repeat;
width:452px;
height:8px;
}

/* COMPETENCES
--------------------------------------------- */
#competences{
width:373px;
height:auto;
float:left;
}

#bcompetences{
background:transparent url(../img/general/b_competences.gif) no-repeat;
width:393px;
height:8px;
}

#listcompetences, #desportfolio, .listcompetences1{
margin:0 12px 0 0;
*margin:0 6px 0 0;
padding:10px 0 0 0;
float:left;
clear:both;
width:auto;
}

#listcompetences, .listcompetences1{
width:360px;
padding-bottom:10px;
}

#desportfolio{
width:820px;
}

#desportfolio li{
background:transparent url(../img/general/puce_ampoule.png) no-repeat scroll left center;
padding:0 0 0 25px;
margin:0 0 5px 10px;
}

#listcompetences li{
padding:0 0 0 25px;
margin-bottom:12px;
}

.listcompetences1 li{
padding:0 0 0 20px;
margin:0 0 9px 10px;
background:transparent url(../img/general/puce_ampoule.png) no-repeat left center;
}

.photoshop{
background:transparent url(../img/icones/photoshop.gif) no-repeat left center;
}

.dreamweaver{
background:transparent url(../img/icones/dreamweaver.gif) no-repeat left center;
}

.flash{
background:transparent url(../img/icones/flash.gif) no-repeat left center;
}

.illustrator{
background:transparent url(../img/icones/illustrator.gif) no-repeat left center;
}

.indesign{
background:transparent url(../img/icones/indesign.gif) no-repeat left center;
}

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

.hfull{
width:864px;
height:8px;
}

.phraseportfolio{
margin:0;
}

#desportfolio{
padding:10px 0 10px 0;
}

#ulimg_portfolio{
width:884px;
height:auto;
}

#ulimg_portfolio ul{
width:884px;
height:auto;
}

#ulimg_portfolio ul li{
width:159px;
height:186px;
float:left;
margin:10px 17px 20px 0; 
}

#ulimg_portfolio ul li a:hover img{
}

#ulimg_portfolio ul li a {
cursor:pointer;
display:block;
}

#ulimg_portfolio ul li a:hover{
color:#A5D738;
}

#ulimg_portfolio ul li a:active {
color:red;
}

.img_li{
height:159px;
width:149px;
overflow:hidden;
padding:5px 5px 5px 5px;
display:block;
}

.img_li a:hover{
color:#A5D738;
}



/* COPYRIGHT
--------------------------------------------- */
#copyright{
width:860px;
float:left;
margin:10px 0 0 10px;
padding:5px 0 0 0;
border-top:5px solid #2a3438;
}

#menu_b{
margin:12px 0 0 10px;
font-size:11px;
float:left;
}

#menu_b a, #menu_validation a{
text-decoration:none;
color:#FFFFFF;
padding:3px;
margin:0;
}

#menu_b a:hover, #menu_validation a:hover{
padding:3px;
margin:0;
background-color:#171D1F;
}

#menu_validation{
font-size:11px;
float:right;
margin:12px 0 0 0;
}

.f_left{
float:left;
}

/* CURRICULUM VITAE
--------------------------------------------- */
.b_pdf{
height:34px;
float:right;
margin:0 5px 10px 0;
}

/* REALISATIONS
--------------------------------------------- */
#fond_img{
width:854px;
height:auto;
float:left;
}

#des_rea{
padding:0;
margin:10px 0;
padding-bottom:10px;
float:left;
width:854px;
border-bottom:1px dotted #2A3438;
}

#des_rea p{
width:822px;
clear:both;
}

#realisations{
width:864px;
height:auto;
float:left;
}

.b_prevbottom{
float:right;
margin:10px 10px 10px 0;
}

.b_prevbottom a{
height:25px;
width:88px;
display:block;
background:transparent url(../img/webdesign/bprev1.png) no-repeat top right;
}

.b_prevbottom a:hover{
height:25px;
width:88px;
display:block;
background:transparent url(../img/webdesign/bprev1.png) no-repeat top left;
}

.b_nextbottom{
float:right;
margin:10px 30px 10px 0;
}

.b_nextbottom  a{
display:block;
height:25px;
width:88px;
background:transparent url(../img/webdesign/bnext1.png) no-repeat top right;
}

.b_nextbottom a:hover{
background:transparent url(../img/webdesign/bnext1.png) no-repeat top left;
}


.marginright10{
margin-right:10px;
}

.b_nextprevtop{
height:21px;
float:right;
margin-top:10px;
}


.lien_site a{
padding:3px;
color:#a5d738;
font-size:14px;
background-color:#333F44;
text-decoration:none;
}

.lien_site a:hover{
color:#333F44;
background-color:#a5d738;
}

.content_span{
float:left;
margin:0 10px 10px 0;
}

.animflash {
border:5px solid #2a3438;
width:854px;
margin:0 0 10px 0;
background-color:#FFFFFF;
float:left;
}

.stripViewer {
position:relative;
overflow: hidden;
margin: 0 0 5px 0;
width:1000px;
}

.stripViewer ul {
position:relative;
list-style-type: none;
overflow:hidden;
}
.stripViewer ul li {
float:left;
width:854px;
overflow:hidden;
padding:0 0 0 0;
}

.stripTransmitter ul {
position:relative;
margin-right:5px;
list-style-type: none;
}

.stripTransmitter ul li{
float:left;
}

.stripTransmitter a{
font-size:13px;
color:#FFFFFF;
text-decoration: none;
width: 15px;
height:14px;
margin-right:5px;
padding:3px 0 3px 5px;
background-color:#171d1f;
display: block;
}

.clear{
clear:both;
}

#back_to_top{
bottom:100px;
position:fixed;
right:5px;
z-index:10000;
}

#back_to_top a{
background-image:url(../img/general/back_to_top.png);
background-position:left top;
display:block;
height:29px;
width:89px;
}

#back_to_top a:hover{
background-image:url(../img/general/back_to_top.png);
background-position:left bottom;
display:block;
height:29px;
width:89px;
}


/* SLIDER JQUERY
--------------------------------------------- */
#tous_projets_webdesign{
background-color:#333f44;
height:auto;
width:865px;
display: none;
position:relative;
background:transparent url(../img/webdesign/gris_opacite.png) repeat top left;
z-index:10;
}

.slide {
margin: 0;
padding: 0;
width:100%;
}

p.slide{
margin-top:5px;
}

a.btn-slide {
background: url(../img/webdesign/voir_projets.png) no-repeat right top;
text-align: center;
width: 175px;
height: 31px;
padding: 2px 0 0 0;
margin: 0 auto;
display: block;
font-size:12px;
color:#ffffff;
}

a.btn-slide:hover {
	background-position:0 0;
}

.active {
	background-position:right 12px;
}