@charset "UTF-8";
/* CSS de graphibub.fr */



* {margin:0;padding:0}


<!-------------------------------------------------------- Structure principale --------------------------------------------------------------- */


html, body {
	width: 100%;
	height: 100%;
}


body {
	margin: auto auto auto auto;
	background-color: #fefbf4;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: small;
	text-align: justify;
	color: #4e4e4e;
}

h1 {
	font-family: "Times New Roman";
	font-size: 1.4em;
	color: #ff9000;
}

h2 {
	font-family: "Times New Roman";
	font-size: 1.7em;
	color: #ff9000;
}

.conteneur {
	width: 810px;
	margin: 0 auto 0 auto;
}


strong {
	font-weight:normal; 
}


a.lien-courant {
	text-decoration: none;
	color: #ff9c00;
}

a.lien-courant:hover {
	color: #ff0000;
}

a img { border: 0px; }

a:hover {border:0px }




/* ------------ lightbox ------------ */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #000; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #000; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* ------------ lightbox ------------ */





/* --------------------------------------------------------------- Menu --------------------------------------------------------------- */

.menu #waxcontainer{
	z-index:2;
	position:relative;
	top:8px;
	width:480px;
	height:47px;
	background:url(images/menu/fond-menu.png) no-repeat;
	margin:0;
}

.menu #waxnav{
	position:relative;
	top:11px;
	left:11px;
	font-family:"Arial Black";
	font-size:1.2em;
	font-variant:small-caps;
}

.menu #waxnav ul{
	margin:0px;
	padding:0 0 0 0;
	list-style-type:none;
	width:auto;
}

.menu #waxnav ul li{
	display:block;
	float:left;
	margin:0 1px;
}

.menu #waxnav ul li a{
	display:block;
	float:left;
	color:#009ed3;
	text-decoration:none;
	padding:0 0 0 5px;
	/padding:0 0 0 4px; /* ------------ pour IE 6 et 7 ------------ */
	height:28px;
	line-height:25px;
}

.menu #waxnav ul li a span{
	padding:0 5px 0 0;
	/padding:0 4px 0 0 ; /* ------------ pour IE 6 et 7 ------------ */
}

.menu #waxnav ul li a:hover,.menu #waxnav ul li a.current{
	color:#fff;
	background:#009ed3 url(images/menu/bluewax_navtopleft.gif) no-repeat top left;
}

.menu #waxnav ul li a:hover span,.menu #waxnav ul li a.current span{
	display:block;
	width:auto;
	background:#009ed3 url(images/menu/bluewax_navtopright.gif) no-repeat top right;
}



/* --------------------------------------------------------------- Header --------------------------------------------------------------- */


#panneau {
	z-index:1;
	position:absolute;
	margin: 0 0 0 275px;
	background-image: url(images/panneau.png);
	background-repeat: no-repeat;
	width: 533px;
	height: 385px;
}


#etoile {
	position:relative;
	z-index:1;
	margin: 0 0 0 418px;
}


#bandeau {
	position:relative;
	top:-9px;
}

#h-mosaique {
	background-image: url(images/dechirure-h.png);
	background-repeat: repeat-x;
	margin: 0 0 0 0;
	height: 18px;
}

#mosaique {
	background-image: url(images/fond-mosaique.jpg);
	background-repeat: repeat;
	margin: 0 0 0 0;
	height: 210px;
}


#besoin {
	background-image: url(images/besoin-com.png);
	background-repeat: no-repeat;
	position: relative;
	top: 30px;
	width: 469px;
	height: 140px;
}


#cinqmin {
	background-image: url(images/cinqmin.png);
	background-repeat: no-repeat;
	position: relative;
	top: 30px;
	width: 464px;
	height: 135px;
}


#whatelse {
	background-image: url(images/whatelse.png);
	background-repeat: no-repeat;
	position: relative;
	top: 30px;
	width: 460px;
	height: 138px;
}


#en-savoir-plus {
	background-image: url(images/en-savoir-plus.png);
	background-repeat: no-repeat;
	position: relative;
	top: 30px;
	width: 469px;
	height: 142px;
}


#toute-votre-com {
	background-image: url(images/toute-votre-com.png);
	background-repeat: no-repeat;
	position: relative;
	top: 25px;
	width: 470px;
	height: 147px;
}


#b-mosaique {
	background-image: url(images/dechirure-b.jpg);
	background-repeat: repeat-x;
	margin: 0 0 0 0;
	height: 18px;
}






/* --------------------------------------------------------------- Header Autre --------------------------------------------------------------- */


#header-autre {
	position:relative;
}


#mosaique-autre {
	background-image: url(images/fond-mosaique.jpg);
	background-repeat: repeat;
	margin: 0 0 0 0;
}


#b-mosaique-autre {
	background-image: url(images/dechirure-b.jpg);
	background-repeat: repeat-x;
	margin: 0 0 0 0;
	height: 18px;
}

#liens-menu-autre {
	text-align:center;
	padding:5px 0 0 0;
	font-size: 1.4em;
}

#liens-haut {
	text-align:center;
	padding:5px 0 5px 0;
}




/* --------------------------------------------------------------- Index --------------------------------------------------------------- */


#home {
	z-index: 2;
	position:absolute;
	margin: 95px 0 0 597px;
	background-image: url(images/home.png);
	background-repeat: no-repeat;
	width: 64px;
	height: 61px;
}



#confort-visuel {
	text-align:center;
	margin:10px 0 5px 0;
}


#derniers-projets {
	width:190px;
	margin:0 0 0 15px;
}

#puce-1 {
	float:left;
	margin:15px 10px 0 0;
}

#der-proj-1 {
padding: 15px 0 0 0;
}

#der-proj-2 {
padding: 5px 0 0 0;
}

#navigateurs {
	float:right;
	width:210px;
	height:200px;
}






/* ---- SlideShow-Portfolio ---- */
#fond-slideshow {
	float:left;
	margin:10px 0 0 0;
	background-color:#ffda00;
	width:590px;
	height:270px;
}

ul#slideshow li{
	list-style-type: none;
}

ul#slideshow li img{
	list-style-type: none;
	margin:10px;
}
/* ---- Fin-SlideShow-Portfolio ---- */





/* ---- SlideShow-Com ---- */
div#SlideShow-Com {
	width: 810px ;
	margin:20px 0 0 0;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

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

ul#galerie_mini img {
padding:0 0 3px 0;
background-color:#ff9000;
}

ul#galerie_mini img:hover {
background-color:#009ed3;
}


ul#galerie_mini li {
	float: left ;
}

ul#galerie_mini li a img {
	margin: 0px 6px ;
}

dl#photo {
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt {
	width:0px;
	height:0px;
}

dl#photo dd {
	margin: 0 ;
}

	
/* ---- Fin-SlideShow-Com ---- */




/* --------------------------------------------------------------- A Propos --------------------------------------------------------------- */


#point {
	z-index: 2;
	position:absolute;
	margin: 95px 0 0 599px;
	background-image: url(images/point.png);
	background-repeat: no-repeat;
	width: 54px;
	height: 67px;
}


.point-intero {
	background-image: url(images/point-intero.png);
	background-repeat: no-repeat;
	height:45px;
	padding-left:45px;
	line-height:40px;
}	


.texte-intero {
	padding:15px 0 0 0;
}	


#moi, #freelance, #tarifs  {
	margin-top: 20px;
	float:left;
	width:236px;
}


.separateur-verti {
	float:left;
	margin:0 23px 0 23px;
	width:4px;
	height:296px;
}	



.separateur-horiz {
	margin:0 0 20px 0;
	width:797px;
	height:2px;
}	


/* --------- Compétences ---------- */
.separateur-verti-petit {
	float:left;
	margin:0 15px 0 15px;
	width:4px;
	height:154px;
}	

#tableau-competences{
	width: 810px;
	margin: 20px 0 0 0;
}

#rea, #pub, #iv, #edi, #illu, #web {
	float:left;
	margin: 10px 0 0 0;
} 


div#realisations {
	background-image: url(images/colonne.jpg);
	background-repeat: no-repeat;
	margin: 0 0 0 185px;
	width: 400px;
}


#tableau-competences dt {
	margin-bottom: 10px;
	font: normal 1.4em Georgia, "Times New Roman", Times, serif;
	color: #009ed3;
}


/* --------- Fin Compétences ---------- */





/* --------------------------------------------------------------- Portfolio --------------------------------------------------------------- */


#rouleau {
	z-index: 2;
	position:absolute;
	margin: 72px 0 0 580px;
	background-image: url(images/rouleau.png);
	background-repeat: no-repeat;
	width: 103px;
	height: 95px;
}

.img-portfolio {
	margin:3px 3px 3px 3px;
	float:left;
}

a.img-portfolio img {
	border:4px solid #ff9000;
}

a.img-portfolio:hover img {
	border:4px solid #ffda00;
}


#edition, #illustration, #webdesign  {
	margin: 15px 0 5px 0;
	font: normal 2.5em "Impact";
	color: #ff9000;
}




/* --------------------------------------------------------------- DEVIS --------------------------------------------------------------- */


#calc {
	z-index: 2;
	position:absolute;
	margin: 85px 0 0 597px;
	background-image: url(images/calc.png);
	background-repeat: no-repeat;
	width: 66px;
	height: 84px;
}


p#devis {
	padding: 40px 0 10px 0;
	
}


#form {
	margin: 0 auto 0 auto;
	width: 810px;
}

input, textarea {
	background:#dcf2ff;
	color: #009ed3;
}

#taille {
	padding: 100px 0 0 0;
	float:right;
	width:240px;
}

#liste-devis {
	margin: 15px 0 20px 18px;
}

#veuillez {
	margin: 15px 0 20px 0;
}

#vous-etes {
	margin: 15px 0 20px 0;
}

#secteur {
	margin: 15px 0 0 0;
}

#envoi {
	display:block;
	margin: 20px 0 0 0;
}


#devis-img {
	position:relative;
	left:-10px;
	background-image: url(images/devis-2.jpg);
	background-repeat: no-repeat;
	width: 544px;
	height: 792px;
}

fieldset {
	border: none;
	font: normal 1em "Arial";
}

#formnom {
	margin: 120px 0 0 285px;
	width:230px;
	height:80px;
}

#formtel {
	margin: 5px 0 0 285px;
	width:230px;
	height:15px;
}

#formadressemail {
	margin: 5px 0 0 285px;
	width:230px;
	height:15px;
}


#designation-cadre{
	margin:65px 0 0 50px;
	width:327px;
}

#designation-cadre2, #designation-cadre3, #designation-cadre4 {
margin-top:10px;
}

.float-left{
	float: left;
	width:250px;
	height:68px;
}

.flaot-right{
	float: right;
	width:58px;
	height:68px;
	text-align:right;
}




/* --------------------------------------------------------------- Contact --------------------------------------------------------------- */




#telephone {
	z-index: 2;
	position:absolute;
	margin: 95px 0 0 580px;
	background-image: url(images/telephone.png);
	background-repeat: no-repeat;
	width: 95px;
	height: 61px;
}



#bloc-contact {
	width:459px;
	height:632px;
	float:left;
	background:url(images/enveloppe.jpg) no-repeat;
}

#form2 {
	margin: 20px 0 0 55px;
}

#bloc-contact #form2 .input{
	background-color:#f8f6f2;
	font:1.1em Verdana, Arial, Helvetica, sans-serif; 
	color:#009ed3;
	width:312px;
	height:16px;
	margin:3px 0;
	padding:4px 5px 0px 5px;
	border: solid 1px #666666;
}

#bloc-contact #form2 #message {
	background-color:#f8f6f2;
	font:1.1em Verdana, Arial, Helvetica, sans-serif; 
	color:#009ed3;
	width:312px;
	height:180px;
	margin:3px 0;
	padding:4px 5px 0px 5px;
	border: solid 1px #666666;	
}

#bloc-contact #form2 .champ{ position:relative}


#bloc-contact #form2  #envoi2{  
}



#bruno {
	margin:5px 0 0 0;
}



.separateur-verti-petit-2 {
	float:left;
	margin:0 18px 0 0;
	width:4px;
	height:154px;
}

#bloc-detail {
	margin: 40px 0 0 10px;
	width:300px;
	float:left;
}

#bloc-detail li {
	margin:5px 0;
	list-style-type: none;
}


.puce-contact {
	margin-right: 8px;
}












/* --------------------------------------------------------------- Glossaire --------------------------------------------------------------- */




#titrepagegloss {
	text-align: center;
	margin: 20px 0 30px 0;
}


#glossaire {
	width: 500px;
	margin: 0 auto 0 auto;
}

.titregloss {
	font-family: "Times New Roman";
	font-size: 1.4em;
	color: #ff9000;
	text-align: left;
	margin: 0 0 10px 0;
}


.paragraphegloss {
	font-size: 1em;
	text-align:justify;
	margin: 0 0 40px 0;
}








/* --------------------------------------------------------------- Faq --------------------------------------------------------------- */



#titrepagefaq {
	text-align: center;
	margin: 20px 0 30px 0;
}


#faq {
	width: 500px;
	margin: 0 auto 0 auto;
}

.titrefaq {
	font-family: "Times New Roman";
	font-size: 1.4em;
	color: #ff9000;
	text-align: left;
	margin: 0 0 10px 0;
}


.paragraphefaq {
	font-size: 1em;
	text-align:justify;
	margin: 0 0 40px 0;
}

.listefaq {
	list-style-type: circle;
	margin: 0 0 0 40px;
}

div.listefaq1 {
	margin: 0 0 40px 0;
	font-size: 1em;
	text-align:justify;
}







/* --------------------------------------------------------------- Envoyer --------------------------------------------------------------- */




#envoyer {
margin:50px 0 800px 0;
}

.envoyer {
	text-align:center;
	margin-bottom:10px;
}






/* --------------------------------------------------------------- Footer --------------------------------------------------------------- */



#footer {
	position:relative;
}

#h-mosaique-bas {
	background-image: url(images/dechirure-h.png);
	background-repeat: repeat-x;
	margin: 0 0 0 0;
	height: 18px;
}

#mosaique-bas {
	background-image: url(images/fond-mosaique.jpg);
	background-repeat: repeat;
	margin: 0 0 0 0;
}

#liens-bas {
	text-align:center;
	padding:5px 0 10px 0;
}

#siret {
	text-align:center;
	font-size: 0.7em;
	padding:0 0 10px 0;
}

#liens-menu-autre-bas {
	text-align:center;
	padding:5px 0 0 0;
	font-size: 1.4em;
}