/********** Structure générale **********/
* { margin: 0; padding: 0; }
HTML { height: 100%; }
BODY { font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #FFF; background: #272727 url(../pics/charte/bg-body.jpg) repeat-x; height: 100%; }
#global { width: 1000px; background: #272727 url(../pics/charte/bg-global.jpg) top left repeat-y; height: 100%;  }
HTML>BODY #global { min-height: 100%; height: auto; }

H1 { position: absolute; top: 0; left: 0; width: 300px; height: 125px; background: url(../pics/charte/logo.gif) center center no-repeat; text-indent: -3000px; font-size: 0px; }
H2 { position: absolute; top: 330px; left: 340px; width: 550px; height: 30px; text-indent: -5000px; background-position: left center; background-repeat: no-repeat; }
A { color: #9CD224; text-decoration: underline; }
A:hover { color: #FFF; }

/********** Menu **********/
#bandeau { display:block; position:absolute; float:left; width: 700px; top:125px; left:300px; height: 175px; background: #272727 url(../pics/charte/bg-bandeau.jpg) top right no-repeat; }
#menu MENU { height: 170px; margin: 5px 0 0 0; padding: 10px 0 0 0; background: url(../pics/charte/bg-menu.jpg) left top no-repeat; list-style: none; display: none; }
#menu LI { color: #FFF; font-size: 10px; padding: 0 20px 2px 20px; }
#menu A { color: #FFF; text-decoration: none; }
#menu A:hover { color: #9CD224; text-decoration: underline;  }

/********** Colonne de gauche **********/
#vignette { display: block; width: 299px; height: 253px; text-indent: -5000px; }
#col { position:absolute; left:0; top:125px; width: 300px; padding-bottom: 20px; }
#col H3 { margin: 20px 45px 0 20px; padding-bottom: 10px; font-size: 15px; font-weight: bold; }
#col H4 { margin: 10px 45px 5px 20px; color: #9CD224; font-size: 10px; font-weight: bold; }
#col P  { margin: 0 45px 5px 20px; font-size: 10px; }
#col MENU { margin: 0 45px 35px 22px; font-size: 10px; list-style: none; }
#col LI { margin-bottom: 5px; padding-left: 8px; background: url(../pics/charte/li-menu.gif) 0px 6px no-repeat; }
#col LI A { color: #FFF !important; text-decoration: none !important; }
#col LI A:hover { color: #9CD224 !important; }
#col LI A.actif { color: #9CD224 !important; font-weight: bold; }

	/* Vignettes */
	#global.home #vignette { background-image: url(../pics/charte/vignettes/croissance.jpg); }
	#global.error #vignette { background-image: url(../pics/charte/vignettes/erreur.jpg); }
	#global.news #vignette { background-image: url(../pics/charte/vignettes/stylo.jpg); }
	#global.audit #vignette, #global.audit-methode #vignette, #global.audit-objectifs #vignette, #global.audit-offre #vignette { background-image: url(../pics/charte/vignettes/database.jpg); }
	#global.autour #vignette { background-image: url(../pics/charte/vignettes/prise.jpg); }
	#global.contact #vignette { background-image: url(../pics/charte/vignettes/contact.jpg); }
	#global.gotham #vignette { background-image: url(../pics/charte/vignettes/gotham.jpg); }
	#global.externalisation #vignette, #global.temoignages #vignette { background-image: url(../pics/charte/vignettes/pouces.jpg); }
	#global.glossaire #vignette { background-image: url(../pics/charte/vignettes/lunettes.jpg); }
	#global.integration #vignette, #global.methodologie #vignette { background-image: url(../pics/charte/vignettes/schema.jpg); }
	#global.portfolio #vignette { background-image: url(../pics/charte/vignettes/emc2.jpg); }
	#global.services #vignette { background-image: url(../pics/charte/vignettes/schema-vide.jpg); }
	#global.referencement #vignette { background-image: url(../pics/charte/vignettes/croissance.jpg); }

	/* Extranet */
	#col FORM { position: relative; width: 210px; height: 45px; margin: 30px 0 10px 20px; padding: 10px; background: url(../pics/charte/bg-col-form.gif) no-repeat; }
	#col FORM H4 { position: absolute; left: 14px; top: 12px; margin: 0; font-size: 10px; font-weight: normal; color: #FFF; }
	#col FORM P { margin: 0 0 5px 0; padding-left: 70px; height: 17px; line-height: 17px; vertical-align: middle; }
	#col FORM P * { vertical-align: middle; }
	#col FORM INPUT { width: 100px; padding: 1px 1px 1px 3px; background: #4E4E4E url(../pics/charte/bg-input.jpg) repeat-x; color: #FFF; font-size: 10px; border: 1px solid #626262; border-left: 1px solid #000; border-top: 1px solid #000; }
	#col FORM INPUT.login { width: 16px; height: 17px; margin-left: 5px; text-indent: -3000px; font-size: 0px; border: none; cursor: pointer; background: url(../pics/charte/btn-login.gif) no-repeat !important; }

/********** Contenu **********/
#article { width: 550px; height: 450px; margin: 0 0 0 340px; padding-top: 370px; padding-bottom: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; }
#article-wide { width: 620px; height: 450px; margin: 0 0 0 340px; padding-top: 370px; padding-bottom: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; }
*>#article, *>#article-wide { height: auto; min-height: 450px; }
#article H3, #article-wide H3 { margin: 15px 0 5px 0; color: #9CD224; font-weight: bold; font-size: 14px; clear: both; }
#article P, #article-wide P  { margin-bottom: 15px; line-height: 16px; font-size: 11px; }
#article UL, #article-wide UL { margin: 0 0 10px 30px; line-height: 16px; list-style: square; line-height: 16px; }
#article A , #article-wide A { text-decoration: none; }
#article A:hover, #article-wide A:hover { text-decoration: underline; }
A.contact { width: 200px; height: 52px; display: block; float: right; font-size: 0px; text-indent: -5000px; outline: 0; background: url(../pics/charte/bg-contact.jpg) top center; margin: 0 5px 0 0; }
A.contact:hover { background: url(../pics/charte/bg-contact.jpg) bottom center; }
A.gloss { border-bottom: 1px dashed; text-decoration: none !important; color: #FFF; }
UL.services A, #global.plan #article A { color: #FFF; text-decoration: none; }

	/* Titres */
	#global.home H2 { background-image: url(../pics/charte/titres/h2-index.gif); }
	#global.erreur H2 { background-image: url(../pics/charte/titres/h2-erreur.gif); }
	#global.news H2 { background-image: url(../pics/charte/titres/h2-actualites.gif); }
	#global.audit-methode H2 { background-image: url(../pics/charte/titres/h2-audit-methode.gif); }
	#global.audit-objectifs H2 { background-image: url(../pics/charte/titres/h2-audit-objectifs.gif); }
	#global.audit-offre H2 { background-image: url(../pics/charte/titres/h2-audit-offre.gif); }
	#global.audit H2 { background-image: url(../pics/charte/titres/h2-audit.gif); }
	#global.autour H2 { background-image: url(../pics/charte/titres/h2-autour.gif); }
	#global.cgu H2 { background-image: url(../pics/charte/titres/h2-cgu.gif); }
	#global.contact H2 { background-image: url(../pics/charte/titres/h2-contact.gif); }
	#global.gotham H2 { background-image: url(../pics/charte/titres/h2-gotham.gif); }
	#global.equipe H2 { background-image: url(../pics/charte/titres/h2-equipe.gif); }
	#global.externalisation H2 { background-image: url(../pics/charte/titres/h2-externalisation.gif); }
	#global.crise H2 { background-image: url(../pics/charte/titres/h2-gestion-crise.gif); }
	#global.glossaire H2 { background-image: url(../pics/charte/titres/h2-glossaire.gif); }
	#global.integration H2 { background-image: url(../pics/charte/titres/h2-integration-xhtml.gif); }
	#global.mentions H2 { background-image: url(../pics/charte/titres/h2-mentions.gif); }
	#global.methodologie H2 { background-image: url(../pics/charte/titres/h2-methodologie.gif); }
	#global.plan H2 { background-image: url(../pics/charte/titres/h2-plan.gif); }
	#global.portfolio H2 { background-image: url(../pics/charte/titres/h2-portfolio.gif); }
	#global.services H2 { background-image: url(../pics/charte/titres/h2-services.gif); }
	#global.referencement H2 { background-image: url(../pics/charte/titres/h2-referencement.gif); }
	#global.temoignages H2 { background-image: url(../pics/charte/titres/h2-temoignages-clients.gif); }

	/* Actualités */
	P.pagingNav { margin-top: 30px; }
	P.pagingNav A, SPAN.currentOffset { padding: 2px 7px 2px 7px; font-weight: bold; color: #FFF; background: #272727; border: 1px solid #333; outline: none; }
	SPAN.currentOffset, P.pagingNav A:hover { background: #9CD224; text-decoration: none !important; }
	#global.news P.date { margin-bottom: 0; }

	/* Page d'accueil */
	Q { display: block; height: 40px; margin-bottom: 30px; text-indent: -5000px; background: url(../pics/charte/bg-q.jpg) center center no-repeat; }
	ADDRESS { height: 25px; text-indent: -5000px; background: url(../pics/charte/bg-phone.gif) center center no-repeat; }

	/* Audit */
	#prix-audit { position: absolute; left: 721px; top: 503px; width: 248px; height: 150px; text-indent: -5000px; background: url(../pics/charte/prix-audit-internet.jpg) left top no-repeat; }
	#audit-ergonomie { background: url(../pics/charte/ul-audit-ergonomie.gif) 0px 4px no-repeat; }
	#audit-notoriete { background: url(../pics/charte/ul-audit-notoriete.gif) 0px 4px no-repeat; }
	#audit-concurrence { background: url(../pics/charte/ul-audit-concurrence.gif) 0px 4px no-repeat; }
	#audit-performance { background: url(../pics/charte/ul-audit-performance.gif) 0px 4px no-repeat; }
	#audit-ergonomie, #audit-notoriete, #audit-concurrence, #audit-performance { padding-left: 70px !important; height: 60px; }
	*>#audit-ergonomie, *>#audit-notoriete, *>#audit-concurrence, *>#audit-performance { height: auto; min-height: 60px; }

	/* Contact */
	#contact { padding: 10px 27px 6px 0; margin-bottom: 16px;  }
	#contact P { margin: 0 0 11px 0 !important; }
	#contact INPUT { background: #404040 url(pics/charte/bg-input-contact.gif) top right no-repeat; border-bottom: 1px solid #5C5C5C; border-right: 1px solid #5C5C5C; border-top: 1px solid #212121; border-left: 1px solid #212121; color: #FFF; font-size: 13px; width: 141px; padding: 1px 15px 2px 3px; }
	#contact INPUT.bouton { width: 80px; background: #404040 !important; font-weight: bold; border-top: 1px solid #5C5C5C; border-left: 1px solid #5C5C5C; border-bottom: 1px solid #212121; border-right: 1px solid #212121; margin: 10px 0 0 442px; padding: 3px 0 3px 0 !important; cursor: pointer; }
	#contact TEXTAREA { font-family: Verdana, Helvetica, sans-serif; background: #404040; border-bottom: 1px solid #5C5C5C; border-right: 1px solid #5C5C5C; border-top: 1px solid #212121; border-left: 1px solid #212121; color: #FFF; font-size: 12px; overflow: auto; width: 515px; height: 98px; padding: 2px 0 2px 3px; }
	#contact SELECT   { background: #404040; border-bottom: 1px solid #5C5C5C; border-right: 1px solid #5C5C5C; border-top: 1px solid #212121; border-left: 1px solid #212121; color: #FFF; font-size: 13px; width: 182px; padding: 1px 0 2px 0; }
	#contact LABEL    { display: block; float: left; font-size: 13px; width: 55px; padding: 3px 0 0 0; }
	#contact P.gauche {  width: 216px; }
	#contact P.droite { width: 257px; }
	#contact P.droite LABEL { width: 93px !important; }
	#contact P.spacer { margin-bottom: 6px !important; height: 19px; }
	#contact P#text   { line-height: 30px !important; padding-top: 3px !important; margin-bottom: 7px !important; }
	#contact LABEL.inline { display: inline !important; float: none !important; }
	P.contactSent { background: #404040; padding: 15px 20px 15px 20px; font-weight: bold; color: #FFF; clear: both; }
	P.error { background: #404040; padding: 15px 20px 15px 20px; font-weight: bold; color: #F90; clear: both; }
	#global.contact ADDRESS { background-position: left center; }
	P.email { height: 23px; background: url(../pics/charte/email.gif) left top no-repeat; }
	P.locaux { float: left; width: 120px; margin: 0 20px 50px 0; }

	/* Equipe */
	.idcard { background: #404040; width: 275px; height: 110px; float: left; margin: 0 12px 12px 0; padding: 5px; }
	.idcard h3  { font-size: 11px !important; color: #9CD224; font-weight: bold; margin: 5px 0 3px 0 !important; clear: none !important;}
	.idcard h4  { font-size: 10px !important; margin: 0 0 5px 0 !important; }
	.idcard P   { font-size: 10px !important; margin: 0 0 0 0 !important; }
	.idcard IMG { float: left; padding: 0 10px 0 0 !important; }

	/* Mentions légales */
	.rcs { float: left; margin: 64px 10px 10px 80px !important; }

	/* Portfolio */
	#global.portfolio #article-wide H3 { clear: both; padding: 15px 0 0 0; }
	#global.portfolio #article-wide DIV { float: left; margin: 0 3px 5px 0; }
	#global.portfolio #article-wide DIV A { outline: none; }
	#tooltip { padding: 3px 8px 10px 15px; font-size: 10px; color: #9CD224; background: url(../pics/charte/bg-tooltip.png) left bottom no-repeat; }

	/* Témoignages */
	.testimonial { background: #404040; width: 580px; height: 168px; margin: 0 0 10px 0; padding: 6px 15px 0 6px; }
	.testimonial IMG { float: left; border: 1px solid #212121; margin: 0 15px 0 0!important; }
	.testimonial P   { margin: 5px 15px 0 0;  }
	.testimonial H3  { clear: none!important; text-align: right; font-size: 11px !important; color: #FFF !important; margin: 20px 10px 0 0 !important; }

/********** Pied de page **********/
#footer { clear: both; background: #272727 url(../pics/charte/bg-footer.jpg) bottom left repeat-y; height: 30px; padding: 20px 0 10px 0; }
#footer P { margin: 0 40px 0 320px; padding: 5px 0 5px 20px; background: #313131;  }
#footer A { text-decoration: none; color: #FFF; }
#footer A:hover { text-decoration: underline; color: #9CD224; }

/********** Surdéfinitions et styles génériques  **********/
IMG { border: 0; }
.left    { text-align: left !important; }
.right   { text-align: right !important; }
.center  { text-align: center !important; }
.justify { text-align: justify !important; }
.middle  { vertical-align: middle; }
.gauche  { float: left; }
.droite  { float: right; }
.s { text-decoration: underline; }
.spacer { clear: both; height: 1px; font-size: 1px; }
.clear { clear: both; }
.decalGauche { margin-left: 30px !important; }