/***** Reset CSS *****/

* {
border:0;
margin:0;
padding:0;
list-style:none;
font-size:100%;
outline:none; }

label, input.sub {
cursor:pointer; }

input, textarea, select {
border:1px solid #000;
padding:2px;
vertical-align:middle; }

.invis {
position:absolute;
left:-9999px; }

.retour_ch {
margin-bottom:10px; }

/***** Flash & Déco *****/

@font-face {
font-family:'Cooper Std Black';
src: local('Cooper Std Black'), url('CooperBlackStd.otf'); }

/***** Stylage contenu *****/

/* ACCUEIL */

div.text_accueil{
position:relative;
width:875px;/*875*/
height:321px;
background:transparent url(img/accueil_texte_fond.png) no-repeat center top;
overflow:hidden;
margin-top:30px;
color:#062326;
letter-spacing:1px;
font-family:"Tahoma",Arial,Sans-serif;}

div.text_accueil cite{
position:absolute;
display:block;
width:217px;
height:321px;
background:transparent url(img/slogan.png) no-repeat;
text-indent:-9999px;
margin:0 10px 0 130px;
top:0;
left:0;}

div.text_accueil p,div.text_accueil h4,div.text_accueil ul{
width:465px;
margin-left:350px;}

div.text_accueil h3,div.carroussel_accueil h3{
height:20px;
font-family:Cooper Std Black, Arial, Verdana, sans-serif;
color:#fff;
margin:60px 0 20px 0;
line-height:20px;}

div.text_accueil h3{
width:500px;
height:20px;
margin-left:350px;}

div.text_accueil h3 span{
margin:10px;}

div.text_accueil p{
font-size:85%;
text-align:justify;
line-height:15px;
margin-bottom:15px;}

div.text_accueil h4{
letter-spacing:2px;
margin-bottom:10px;}

div.text_accueil ul{
text-align:justify;}

div.text_accueil li{
display:inline;
font-size:85%;}

/* CARROUSEL ACCUEIL */

div.carroussel_accueil{
position:relative;
width:875px;
height:371px;
background:transparent url(img/accueil_carroussel_fond.png) no-repeat center bottom;
margin:30px 0 0 40px;}

div.carroussel_accueil h3{
position:absolute;
width:100%;
bottom:35px;
text-align:center;
letter-spacing:2px;}

span.nav_carousel { cursor:pointer; z-index:10; position:absolute; top:140px; cursor:pointer; display:block; text-indent:-9999px; width:36px; height:75px; }  
span.precedent { left:0; background:transparent url(img/fleche_gauche.png) no-repeat; }  
span.suivant { right:0; background:transparent url(img/fleche_droite.png) no-repeat; }

span.nav_carousel:hover { opacity:0.8; } 
span.disabled { display:none; } 

div.conteneur_carousel { text-align:center; position:relative; width:644px; height:286px; margin:30px auto; }  
div.carousel { width:574px; margin:0 auto; overflow:hidden; }  
div.carousel ul li { float:left; width:574px; height:288px; text-align:center; position:relative;}

div.carousel ul li  span.f_site_web{
position:absolute;
display:block;
width:89px;
height:93px;
background:transparent url(img/fanion_siteweb.png) no-repeat;
top:2px;
left:18px;}

/* lightbox */

/* SERVICES */

div.service{
width:960px;
margin-top:20px;
overflow:hidden;
position:relative;
min-height:130px;
font-family:"Tahoma",Arial,Sans-serif;
}

div.service span{
position:absolute;
display:block;
width:121px;
height:171px;
margin:0 10px 0;
top:0;
left:0;}

div.service span.decoweb{background:transparent url(img/services_deco_webdesign.png) no-repeat;}
div.service span.decoint{background:transparent url(img/services_deco_integration.png) no-repeat;}
div.service span.decoprint{background:transparent url(img/services_deco_print.png) no-repeat;}
div.service span.decoid{background:transparent url(img/services_deco_identite-visuelle.png) no-repeat;}

div.service h3,div.service p{
width:755px;
margin:0 0 10px 145px;}

div.service h3{
height:30px;
color:#fff;
font-size:150%;
font-family:Cooper Std Black, Arial, Verdana, sans-serif;
background:transparent url(img/star_3.png)no-repeat top left;
letter-spacing:2px;
padding-left:30px;}

div.service p{
font-size:80%;
letter-spacing:1px;
text-align:justify;
color:#062326;}



/* A PROPOS */

div.apropos{
overflow:hidden;}

div.apropos h3{
color:#fff;
font-family:Cooper Std Black, Arial, Verdana, sans-serif;
font-size:150%;
letter-spacing:1.7px;
margin:15px 0 30px 140px;
margin-bottom:25px;}

div.apropos p img{
float:left;
margin-top:25px;}

div.apropos p{
font-size:85%;
letter-spacing:1px;
margin-bottom:10px;}


div.apropos p.typospe{
display:block;
width:592px;
height:111px;
background:transparent url(img/osez.png) no-repeat;
margin-left:270px;
text-indent:-9999px;}


/***** Layout *****/

html{
background:#01A4BC url(img/fond_html.jpg) no-repeat center top;}

body {
font:100%/1.3 Arial, Verdana, sans-serif;
background:transparent url(img/body_trame.png) repeat; }

div#global{
width:960px;
margin:0 auto;}

div#entete{
width:960px;
height:165px;
overflow:hidden;
position:relative;
margin-bottom:30px;}

div#entete h1 a{
display:block;
width:327px;
height:131px;
background:transparent url(img/logo_sale-gosse-studio_graphiste_freelance.png) no-repeat;
text-indent:-9999px;
margin-top:30px auto;}

ul#menu{
position:absolute;
width:635px;
height:28px;
background:transparent url(img/menu_fond.png) no-repeat center top;
bottom:0;
right:0;
overflow:hidden;
font-family:Cooper Std Black, Arial, Verdana, sans-serif;}

ul#menu li{
float:left;}

ul#menu li a{
position:relative;
display:block;
width:105px;
height:28px;
color:#fff;
text-decoration:none;
text-align:center;
line-height:23px;
margin-left:11px;
margin-right:11px;
font-weight:normal;
font-size:80%;
letter-spacing:1px;}

ul#menu li a:hover{
color:#ACDFE8;}


ul#menu li a span.texte { 
position:relative; /* pour faire fonctionner le z-index */
z-index:2; /* niveau de superposition */ }

ul#menu li a span.background { 
display:none; /* l'élément est masqué au départ */
width:100%; /* toute la largeur du lien */
height:100%; /*... et toute sa hauteur */
position:absolute; /* on sort l'élément du flux */
top:0; /* et on le cale en haut */
left:0; /* ... à gauche */
z-index:1; /* ... et en dessous du texte [optionnel] */
background:transparent url(img/menu_li_fond.png) no-repeat; /* notre image d'arrière-plan, centrée horizontalement et calée en haut */ }

ul#menu li a.courant span.background { 
display:block; /* pour la page courante l'arrière-plan est affiché */ }

ul#menu li a.courant{
color:#ACDFE8;}

div#pied{
position:relative;
width:955px;
height:130px;
background:transparent url(img/pied_fond.png) no-repeat;
margin:30px auto 0;
overflow:hidden;
color:#fff;}

div#pied div#deco1{
position:absolute;
width:89px;
height:103px;
background:transparent url(img/pied_contact.png) no-repeat;
top:0;
left:57px;}

div#pied div#deco2{
position:absolute;
width:52px;
height:96px;
background:transparent url(img/pied_qlqmots.png) no-repeat;
top:0;
left:422px;}

div#pied div.tel{
position:absolute;
width:223px;
font-family:Cooper Std Black, Arial, Verdana, sans-serif;
top:15px;
left:174px;
letter-spacing:1px;
line-height:20px;}

div#pied div.tel span.line1{
font-size:90%;}

div#pied div.tel span.line2{
font-size:135%;}

div#pied div.tel span.line3{
font-size:170%;}

div#pied ul{
position:absolute;
top:-9920px;
left:-9375px;
font-size:65%;}

div#pied ul li{
line-height:12px;}

div#pied ul li a{
color:#fff;
text-decoration:none;
letter-spacing:1px;}

div#pied ul li a:hover{
text-decoration:underline;}

div#pied div#qlqmots{
position:absolute;
width:416px;
top:20px;
right:35px;}

div#pied div#qlqmots h3{
margin-bottom:5px;
font-size:95%;
letter-spacing:1px;
font-family:Cooper Std Black, Arial, Verdana, sans-serif;}

div#pied div#qlqmots p{
font-size:75%;}

/*ENCONSTRUCTION*/

div#entete h1 a.titre_enconstruction{
margin:30px auto;}

div#contenu p.enconstruction{
font-weight:bold;
color:#fff;
text-align:center;
margin-top:30px;}