﻿/* ----------------------------------------------- */
/* ------------ RESET GENERAL ---------------------*/
/* ----------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,images,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ul,ol,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,textarea,select,img
	{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	border: none;
	list-style: none;
}

/* ----------------------------------------------- */
/* ------------ MISE EN PAGE GENERAL --------------*/
/* ----------------------------------------------- */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #CCC;
}

.hide
{
display:none;
}

.italic{
	font-style:italic
}
.rose
{
	color:#ed1e79;
}
.vert
{
	color:#7ccd31;
}
.gris
{
	color:#111;
}
.clear
{
	clear:both;
}

p.cadre_fonce
{
margin:50px 0 5px 0;
line-height: 22px;
height:22px;
background-color: #464646;
color: #FFF;
font-size:1.2em;
}

#guillemets
{
position:relative;
float:right;
top:25px;
right:25px;
height:36px;
width:42px;
background: url(../img/guillemets.png) top left no-repeat;
}

p.cadre_clair
{
height:22px;
line-height: 22px;
background-color: #FFF;
color: #464646;
font-size:1.2em;
text-align:center;
font-style:italic;
font-weight:bold;
}

#content
{
	width:988px;
	border: 1px solid #999;
	padding:4px;
	text-align: left;
	margin: 20px auto 0 auto;
	background-color: #FFF;
}
#illustration
{
	float:left;
	width:322px;
	height:650px;
	background: url(../img/illustration.jpg) center left no-repeat;
}

#menu
{
     position: relative;
	float:left;
	height:650px;
	width: 229px;
	background: url(../img/barres.gif) top left repeat-y;
}


#followUs
{
position: absolute;
bottom:5px;
left: 5px;
}

#followUs p
{
    float:left;
    padding-top:16px;
    font-size: 0.9em;
    color: #FFF;
}

#papillon
{
	position:relative;
	top:100px;
	right:100px;
	height:41px;
	width:49px;
	background: url(../img/papillon.png) top left no-repeat;
}

#logo
{
	position:relative;
	top:68px;
	right:95px;
	width:230px;
	height:174px;
	background: url(../img/logo-slogan.png) top left no-repeat ;
}
#elements_menu_txt
{
position:relative;
text-align:right;
top:630px;
padding-right:20px;
font-size:0.9em;
}


#elements_menu_txt li
{
	display: inline;
	color: #7CCD31;
}

#elements_menu_txt a
{
	color:#999;
	text-decoration:none;
}

#elements_menu_txt a:hover
{
	text-decoration:underline;
}

#elements_menu
{
position:relative;
top:130px;
}


#elements_menu li a
{
	display: block;
	width:145px;
	height:25px;
	
}



#elements_menu a#m_bienvenue{background: url(../img/bienvenue-blanc.png) 10px center no-repeat;}
#elements_menu a#m_bienvenue:hover, #elements_menu a#mh_bienvenue{background: url(../img/bienvenue-rose.png) 10px center no-repeat #fff;border-top:1px solid #464646;border-bottom:1px solid #464646; height:23px;}

#elements_menu a#m_metier{background: url(../img/metier-blanc.png) 10px center no-repeat;}
#elements_menu a#m_metier:hover, #elements_menu a#mh_metier{background: url(../img/metier-rose.png) 10px center no-repeat #fff;border-top:1px solid #464646;border-bottom:1px solid #464646; height:23px;}

#elements_menu a#m_competences{background: url(../img/competences-blanc.png) 10px center no-repeat;}
#elements_menu a#m_competences:hover, #elements_menu a#mh_competences{background: url(../img/competences-rose.png) 10px center no-repeat #fff;border-top:1px solid #464646;border-bottom:1px solid #464646; height:23px;}

#elements_menu a#m_portfolio{background: url(../img/portfolio-blanc.png) 10px center no-repeat;}
#elements_menu a#m_portfolio:hover, #elements_menu a#mh_portfolio{background: url(../img/portfolio-rose.png) 10px center no-repeat #fff;border-top:1px solid #464646;border-bottom:1px solid #464646; height:23px;}

#elements_menu a#m_references{background: url(../img/references-blanc.png) 10px center no-repeat;}
#elements_menu a#m_references:hover, #elements_menu a#mh_references{background: url(../img/references-rose.png) 10px center no-repeat #fff;border-top:1px solid #464646;border-bottom:1px solid #464646; height:23px;}

#elements_menu a#m_contact{background: url(../img/contact-blanc.png) 10px center no-repeat;}
#elements_menu a#m_contact:hover, #elements_menu a#mh_contact{background: url(../img/contact-rose.png) 10px center no-repeat #fff;border-top:1px solid #464646;border-bottom:1px solid #464646; height:23px;}

#texteVertical
{
	position:relative;
	float:left;
	right:67px;
	top:15px;
	width:18px;
	height:622px;
	background:url(../img/texte-vertical.gif) top left no-repeat;
}

#paysage
{
	float:left;
	width:437px;
	height: 650px;
	margin:0;
	padding:0;
	background: url(../img/paysage.jpg) top right no-repeat;
}

#titre_partie_contact
{
	float:left;
	position: relative;
	top:20px;
	right:70px;
	margin-right:-48px;
	width:48px;
	height:206px;
	background: url(../img/contact.png) top right no-repeat;
}

#titre_partie_references
{
	float:left;
	position: relative;
	top:20px;
	right:65px;
	margin-right:-48px;
	width:48px;
	height:236px;
	background: url(../img/references.png) top right no-repeat;
}

#titre_partie_metier
{
	float:left;
	position: relative;
	top:20px;
	right:70px;
	margin-right:-48px;
	width:48px;
	height:206px;
	background: url(../img/metier.png) top right no-repeat;
}

#titre_partie_bienvenue
{
	float:left;
	position: relative;
	top:20px;
	right:70px;
	margin-right:-48px;
	width:48px;
	height:206px;
	background: url(../img/bienvenue.png) top right no-repeat;
}

#titre_partie_portfolio
{
	float:left;
	position: relative;
	top:20px;
	right:70px;
	margin-right:-48px;
	width:48px;
	height:206px;
	background: url(../img/portfolio.png) top right no-repeat;
}

#titre_partie_competences
{
	float:left;
	position: relative;
	top:20px;
	right:70px;
	margin-right:-48px;
	width:48px;
	height:206px;
	background: url(../img/competences.png) top right no-repeat;
}

#contenu
{
	float:left;
	position:relative;
	left:30px;
	height:100%;
	width: 208px;
	padding:0 5px;
	border-left:1px solid #999;
	border-right:1px solid #777;
	background: #fff;
}

#contenu p
{
	color: #7d7d7d;
	font-size:1em;
	margin:10px 0px 20px 15px;
}

#cartouche_metier p
{
	color: #7d7d7d;
	font-size:1em;
	margin:8px 0px 5px 15px;
}

#contenu p.aeration
{
	color: #7d7d7d;
	font-size:1em;
	margin:40px 0px 40px 15px;
}

#contenu h1
{
	margin:10px 0 5px 25px;
}

#contenu li, #cartouche_metier li
{
	list-style-type: none;
	background: url(../img/puce.gif) 0px 3px no-repeat;
	color: #7d7d7d;
	font-size:1em;
	margin-left: 15px;
	padding-left:10px;
}


#illustration_haut
{
        float: right;
	position:relative;
	
	width:72px;
	height:57px;
	background: url(../img/illustration-verte.gif) top left no-repeat;
}



#petitpapd
{
	position:relative;
	top:420px;
	left:300px;
	width:36px;
	height:32px;
	background: url(../img/petit-papillon-droit.png) top left no-repeat;
}

#petitpapd2
{
	position:relative;
	float:left;
	top:340px;
	left:330px;
	width:36px;
	height:32px;
	background: url(../img/petit-papillon-droit.png) top left no-repeat;
}

#grandpapd
{
	position:relative;
	bottom:180px;
	left:330px;
	width:32px;
	height:26px;
	background: url(../img/papillon-droit.png) top left no-repeat;
}

.gris_bold
{
	font-size:1.1em;
	font-weight:bold;
	color: #333;
	margin:20px 20px 20px 0;
}

p.gris_bold
{
	text-align:right;
}

#cartouche_vert
{
	position:relative;
	width:401px;
	height:262px;
	background: url(../img/cartouche-vert.png) top left no-repeat;
	padding:5px;
}


#cartouche_gris
{
	margin-top:30px;
	position:relative;
	width:288px;
	height:224px;
	background: url(../img/cartouche-gris.png) top left no-repeat;
}

#cartouche_metierBas
{
        position:relative;
        margin:0;
        padding:0;
        left:20px;
        top:15px;
	width:262px;
	height:178px;
	background: url(../img/cartouche-metier.png) top left no-repeat;
}

#cartouche_gris p
{
	padding: 5px 41px 5px 0;
	text-align:justify;
	color:#7d7d7d;
	line-height:13px;
}

#cartouche_metierBas p
{
    padding: 5px 35px 5px 0px;
    text-align:justify;
    color:#7d7d7d;
    line-height:13px;
}


#cartouche_vert h1
{
	margin-bottom:5px;
	padding-top: 5px;
	line-height:12px;
	margin-left:25px;
}

#cartouche_gris h1
{
	margin-bottom:3px;
	padding-top: 7px;
	line-height:12px;
	margin-left:17px;
}

#cartouche_vert li, #cartouche_gris li
{
	list-style-type: none;
	line-height:14px;
	background: url(../img/puce.gif) 0px 3px no-repeat;
	color: #7d7d7d;
	font-size:1em;
	margin-left: 15px;
	padding-left:10px;
}

#print
{
margin: 50px 0 0 30px;
height:100px;
}



#web p
{
float:left;
line-height: 13px;
color: #7d7d7d;
padding:15px 0 0 5px;
line-height: 13px;
position:relative;
margin-left:20px;
top:53px;
height:31px;
width:187px;
background: url(../img/fond-blanc-vert.png) top left no-repeat;
}

#txt_top
{
    padding-top:40px;
}

#groupeLogos
{
    padding-top:60px;
}

.groupeLogosLiens
{
margin: 0 11px 11px 0;
display: block;
height:100px;
width:125px;
float:left;
cursor:pointer;
}

#web_logo{background: url(../img/cartouche-web.png) top left no-repeat;}
#logos_logo{background: url(../img/cartouche-logo.png) top left no-repeat;}
#papeterie_logo{background: url(../img/cartouche-papeterie.png) top left no-repeat;}
#plaquette_logo{background: url(../img/cartouche-plaquette.png) top left no-repeat;}
#pub_logo{background: url(../img/cartouche-urbaine.png) top left no-repeat;}
#divers_logo{background: url(../img/cartouche-divers.png) top left no-repeat;}
#presse_logo{background: url(../img/cartouche-presse.png) top left no-repeat;}
#affiche_logo{background: url(../img/cartouche-affiche.png) top left no-repeat;}


#cartouche_metier
{
    position:relative;
    margin-top:30px;
    background-color:#fff;
    padding-top:3px;
    border-bottom:2px solid #333;
}

.ligneReference
{
	margin: 15px 15px 0 0 ;
	height:93px;
}

.ligneReference p
{
	
	color:#FFF;
	text-align:justify;
	font-style:italic;
	font-size:12px;
}

.ligneReference .signature
{
	font-size:11px;
	color:#464646;
	margin-top : 10px;
}

.logoReference
{

float:left;
width:122px;
height:100px;
margin-right:10px;
}

#logoCrediliance{background: url(../img/references/encart-crediliance.png) top left no-repeat;}
#logoAcceniom{background: url(../img/references/encart-acceniom.png) top left no-repeat;}
#logoIka{background: url(../img/references/encart-ika.png) top left no-repeat;}
#logoKsl{background: url(../img/references/encart-ksl.png) top left no-repeat;}
