html {height: 100%;}
body {background: #fff; font-size: 100.1%; color: #676765; line-height: 1.4; height: 100%;}
* {margin: 0; padding: 0; font-family: arial,FreeSans,verdana,sans-serif; font-size: 1em;}
sub, sup {font-size: 0.65em}
sub {line-height: 0.5em}
img, fieldset {border: none}
ul {list-style: none}
ol {padding: 0 0 0 2em}
table {border-collapse: collapse; border-spacing: 0; empty-cells: show;}
select > option {padding: 0 16px 0 3px}
textarea {overflow: auto;}
button {border-style: inset; border-width: 0; border: none; background: none; cursor: pointer; text-align: left; overflow: visible; vertical-align: middle;}
acronym {border-bottom: dotted 1px;}
hr,
legend {display: none;}

a {color: #676765; text-decoration: none;}
a:hover {color: rgb(140,197,64);}


.jumpers,
.scripted span.wai {position: absolute; left: -9999px; top: -9999px;}

select {color: #676765;}

/* Pseudo preloads
----- */
.jumpers {background: url('i/backgrounds/direct-access.gif') -9999px -9999px no-repeat;}

/* Page
----- */
#page {min-height: 100%; font-size: 0.874em; position: relative; background: #fff;}
#container {padding: 0 0 96px; width: 980px; margin: 0 auto; position: relative;}


#toolStripe {background: #e5e1e2; font-size: .846em;}

#toolStripeInner {width: 950px; margin: 0 auto; padding: 2px 0 0 0;}

#localisation {background: #6f7073 url('i/bg/localisation.png') 0 0 no-repeat; display: block; float: left; color: #fff; text-transform: uppercase; font-size: 0.833em; margin: 0 37px 3px 0; font-weight: bold; text-decoration: none; line-height: 1;}
#localisation span {display: block; background: url('i/bg/localisation.png') 100% 0 no-repeat;}
#localisation span span {background-position: 100% 100%;}
#localisation span span span {background-position: 0 100%; text-align: center; padding: 0.5em 9px; white-space: nowrap; min-width: 135px;}

#siteTools {float: left; font-size: 0.917em;}
#siteTools li {float: left; vertical-align: baseline; line-height: 2;}
#siteTools li,
#siteTools form,
#siteTools form div {display: inline;}
#siteTools li:before {content: '  |  ';}
#siteTools li:first-child:before {content: ''; float: left;}
#siteTools input {border: none; padding: 0.2em; width: 130px; margin: 0 0 0 0.3em;}
#siteTools button {background: none; border: none; vertical-align: baseline; padding: 0 0.2em; line-height: 1; text-transform: uppercase;}

#siteTools .multiLang {
	position: relative;
}
#siteTools .multiLang .sub {
	position: absolute; top: 2em; left: -10px; z-index: 350;
	padding: 5px 10px;
	background: rgb(229,225,226);
	display: none;
}
#siteTools .multiLang:hover .sub {
	display: block;
}
#siteTools .multiLang .sub li {
	line-height: 1.4;
}
#siteTools .multiLang .sub li:before {
	content: ''; display: none;
}

#parentSite {float: right; line-height: 2; font-size: 0.917em;}
#parentSite a {display: block; overflow: hidden; padding: 0 0 0 16px; background: url('i/bg/veolia-xs.png') 0 50% no-repeat;}
#parentSite a:hover {color: rgb(215,0,27);}

#contact {float: right; position: relative;}
#contactTgt {display: none; position: absolute; z-index: 990; right: -5px; background-repeat: no-repeat; background-position: 0 100%; padding: 0 0 15px 0;}
#contactTgt.by1 {width: 186px;}
#contactTgt.by2 {width: 366px;}
#contactTgt.by3 {width: 546px;}
#contactTgt.by4 {width: 726px;}
#contactTgt.by5 {width: 906px;}
#contact > #contactTgt.by1 {background-image: url('i/bg/contactTgt-b-3-by1.png');}
#contact > #contactTgt.by2 {background-image: url('i/bg/contactTgt-b-3-by2.png');}
#contact > #contactTgt.by3 {background-image: url('i/bg/contactTgt-b-3-by3.png');}
#contact > #contactTgt.by4 {background-image: url('i/bg/contactTgt-b-3-by4.png');}
#contact > #contactTgt.by5 {background-image: url('i/bg/contactTgt-b-3-by5.png');}
#contactTgtInner {color: #fff; background-repeat: repeat-y; background-position: 0 0; padding: 15px 0 8px 0; font-size: 0.917em;}
#contactTgt.by1 > #contactTgtInner {background-image: url('i/bg/contactTgt-3-by1.png');}
#contactTgt.by2 > #contactTgtInner {background-image: url('i/bg/contactTgt-3-by2.png');}
#contactTgt.by3 > #contactTgtInner {background-image: url('i/bg/contactTgt-3-by3.png');}
#contactTgt.by4 > #contactTgtInner {background-image: url('i/bg/contactTgt-3-by4.png');}
#contactTgt.by5 > #contactTgtInner {background-image: url('i/bg/contactTgt-3-by5.png');}
#contactTgtInner a {color: #fff; text-decoration: none;}
#contactTgtInner a:hover {text-decoration: underline;}
#contactCall {line-height: 2; font-size: 0.833em; font-weight: bold; background: #82c12d url('i/bg/contact-3.png') 0 0 no-repeat; display: block; margin: 0 0 0 20px; text-transform: uppercase; color: #fff; padding: 0 0 2px 0; overflow: hidden;}
#contactCall span {display: block; background: url('i/bg/contact-3.png') 100% 0 no-repeat;}
#contactCall span a {display: block; padding: 0.1em 30px 0 30px; background: url('i/bg/contact-arrow-3.png') 100% 50% no-repeat; color: #fff;}

#contactTgtInner .npslinks li {list-style: none; margin: 0;}
#contactTgtInner .npslinks li > a {background: url('i/bg/nps-fff.png') 0 0.4em no-repeat;}

#contactTgt .title {display: block; text-transform: uppercase; margin-bottom: 0.5em; font-weight: normal;}
#contactTgt ul li {list-style: disc; margin-left: 1.8em;}

#contactTgt.by2 .cols {background: url('i/bg/contactTgt-cols2.png') 0 0 repeat-y;}
#contactTgt.by3 .cols {background: url('i/bg/contactTgt-cols3.png') 0 0 repeat-y;}
#contactTgt.by4 .cols {background: url('i/bg/contactTgt-cols4.png') 0 0 repeat-y;}
#contactTgt.by5 .cols {background: url('i/bg/contactTgt-cols5.png') 0 0 repeat-y;}

#contactTgt .col {float: left; width: 150px; padding: 0 15px;}

#contactTgt .btn {display: table; display: inline-block; color: #82c12d; background: #fff url('i/bg/contact-btn-3.png') 0 0 no-repeat;}
#contact #contactTgt .btn:hover {text-decoration: none; color: #333;}
#contactTgt .btn span {display: table; display: inline-block; background: url('i/bg/contact-btn-3.png') 100% 0 no-repeat;}
#contactTgt .btn span span {background-position: 100% 100%;}
#contactTgt .btn span span span {padding: 0.2em 8px 0.1em 8px; background-position: 0 100%;}

/* Extranet
----- */
#extranet {float: right; position: relative;}
#extranetTgt {display: none; position: absolute; z-index: 990; right: -4px; background-repeat: no-repeat; background-position: 0 100%; padding: 0 0 15px 0; width: 200px; background-image: url('i/bg/extranetTgt-b-3.png');}

#extranetTgtInner {color: #fff; background-repeat: repeat-y; background-position: 0 0; padding: 15px 15px 8px 15px; font-size: 0.917em; background-image: url('i/bg/extranetTgt-3.png');}

#extranetTgtInner a {color: #fff; text-decoration: none;}
#extranetTgtInner a:hover {text-decoration: underline;}
#extranetCall {line-height: 2; font-size: 0.833em; font-weight: bold; background: #bbb7b7 url('i/bg/extranet-3.png') 0 0 no-repeat; display: block; margin: 0 0 0 20px; text-transform: uppercase; color: #fff; padding: 0 0 2px 0; overflow: hidden;}
#extranetCall span {display: block; background: url('i/bg/extranet.png') 100% 0 no-repeat;}
#extranetCall span a {display: block; padding: 0.1em 30px 0 30px; background: url('i/bg/extranet-lock.png') 100% 50% no-repeat; color: #fff;}
.connected #extranetCall span a {background-image: url('i/bg/extranet-unlocked.png');}

#extranetTgtInner .npslinks li {list-style: none; margin: 0;}
#extranetTgtInner .npslinks li > a {background: url('i/bg/nps-fff.png') 0 0.4em no-repeat;}

#extranetTgt .title {display: block; text-transform: uppercase; margin-bottom: 0.5em; font-weight: normal;}
#extranetTgt ul li {list-style: disc; margin-left: 1.8em;}

#extranetTgt .btn {display: table; display: inline-block; color: #82c12d; background: #fff url('i/bg/extranet-btn.png') 0 0 no-repeat;}
#extranet #extranetTgt .btn:hover {text-decoration: none; color: #333;}

#extranetTgt .btn span {display: table; display: inline-block; background: url('i/bg/extranet-btn-3.png') 100% 0 no-repeat;}
#extranetTgt .btn span span {background-position: 100% 100%;}
#extranetTgt .btn span span span {padding: 0.2em 8px 0.1em 8px; background-position: 0 100%;}
#extranetTgt span.btn span span span {padding: 0;}

#extranetTgt span.btn {margin-top: 0.5em;}
#extranetTgt .btn button {border-style: inset; border-width: 0; border: none; padding: 0.2em 8px 0.1em 8px; line-height: 1.1; background: none;}


#extranetTgt form {margin: 0;}
#extranetTgt fieldset {margin: 0;}
#extranetTgt input {width: 160px; border: none; backgrounbd: #fff;}


#wrapper {position: relative;}
.tv #wrapper {background: #080d0f url('i/backgrounds/veolia-tv.jpg') 0 7px no-repeat; padding: 0 0 5em 0;}
#curve {display: block; z-index: 200; position: absolute; top: 0; left: 0; width: 980px; height: 66px;}

html>body #curve {background: url('i/backgrounds/curve.png') 0 0 no-repeat;}


/* 
----- */
#logo {padding: 22px 22px 0 15px; float: left; position: relative; z-index: 333;}
#logo img {display: block;}
#logo.logo-name {padding: 18px 18px 0 15px;}
#logo.logo-activity {padding: 18px 18px 0 0;}
#logo.logo-client {padding: 18px 0 7px 15px;}

#siteName {padding: 16px 0 4px 54px; font-size: 1.166em; display: block; line-height: 1; clear: left; float: left; position: relative; z-index: 333;}

#navigation {float: right; clear: right; padding-top: 31px; padding-bottom: 5px; margin-right: 12px; /*width: 644px;*/ font-size: .917em;}
#navigation.navigation-name {padding-top: 21px;}
#navigation.navigation-activity {padding-top: 21px;}
#navigation.navigation-client {padding-top: 33px;}
#navigation ul {float: right; width: 674px; text-align: right;}
#navigation ul ul {float: none; width: auto; text-align: left;}
#navigation li {display: inline-block; font-size: 1.3em; font-weight: bold; position: relative;}

#navigation li:before {content: '|';}
#navigation li:first-child:before {content: ''; display: none;}
#navigation li a {display: inline-block; padding: 0 3px 0 4px;}
#navigation li strong a {color: rgb(140,197,64);}

#navigation li .sub {position: absolute; right: 9999px; z-index: 555; padding: 28px 0 0 0;}
#navigation li .sub-b {padding: 0 0 9px 0;}
#navigation li .sub-c {width: 198px; padding: 0 20px 10px 20px;}
html>body #navigation li .sub {background: url('i/bg/subnav-t.png') 0 0 no-repeat;}
html>body #navigation li .sub-b {background: url('i/bg/subnav-b.png') 0 100% no-repeat;}
html>body #navigation li .sub-c {background: url('i/bg/subnav.png') 0 0 repeat-y;}
#navigation li:hover .sub {display: block; position: absolute; right: 0; margin-top: -5px;}

#navigation li ul li {display: block; font-size: 0.75em; font-weight: normal; position: static; border-top: solid 1px #b7b7b7;}
#navigation li ul li:first-child {border: none;}
#navigation li ul li:before {content: '';}
#navigation li ul li a {display: block; padding: 3px 0;}
#navigation li ul li:hover a,
#navigation li ul li a:hover {color: #000;}
#navigation li ul li:hover li a {color: #676765;}
#navigation li ul li:hover li a:hover {color: #000;}

#navigation li ul li li {font-size: 1em; margin-left: 37px; border-top: none;}
#navigation li ul li li a {padding: 1px 0;}

#navigation .sub .lock {background: url('i/bg/locked.png') 100% 0.3em no-repeat;}
.connected #navigation .sub .lock {background: url('i/bg/unlocked.png') 100% 0.3em no-repeat;}


/* 
----- */
.content p,
.content ul,
.content ol,
.content blockquote {margin-bottom: 0.85em;}

.content blockquote .inner {font-style: italic;display:inline}

.content ul li {list-style: disc; margin-left: 2.2em;}
.content ol {margin-left: 2.2em;}

.content .npslinks {display: table; display: inline-block; display: table-cell; padding-bottom: 0.85em;}
.content .npslinks li {margin: 0; list-style: none;}
.content .npslinks a {text-decoration: none; padding: 0 0 0 14px; display: table-cell; display: inline-block; background: url('i/bg/nps-3.gif') 0 0.4em no-repeat;}

.content .npslinks a:hover {background-position: -1000px 0.4em;}


.cs0 .npscolor,
.cs0 .npscolor a {color: rgb(140,197,64);}



.illustration {margin: 0 0 0.8em 0;}
.related .illustration {margin-bottom: 0.35em; clear: both;}
.illustration img,
.illustration object {display: block; margin: 0;}
.illustration .legend {color: #b1aeab; font-size: 0.9em; line-height: 1.2; margin: 0.2em 0 0 0;}
.illustration .legend * {color: #b1aeab; margin-bottom: 0;}
.full {width: 772px; position: relative; left: -30px;}
#overlayInnerContent .full,
.unscripted .full {width: auto; left: auto;}
.main .full {width: 531px;}
.related .full {width: 241px; left: -20px;}
.full .legend {text-align: right; padding-right: 11px;}
.right .legend {text-align: right;}
.half {width: 235px;}
.quarter {width: 80px;}
.inset .half {width: 265px;}
.inset .illustration img {border: none;}
.left {float: left; margin-right: 20px;}
.right {float: right; margin-left: 20px;}
.center {margin-left: auto; margin-right: auto;}


.illustration span.legend {display: block; background: #43413e; color: #fff; padding: 5px 10px; margin-top: 0; text-decoration: none;}
.content .illustration a {text-decoration: none;}
.content .illustration .legend a {text-decoration: underline;}
.illustration a:hover span.legend {color: #eee;}


.icoBox {display: block; overflow: hidden; position: relative;}
.icoIco {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.icoBox > .playIco {background: url('i/bg/play.png') 50% 50% no-repeat;}
.icoBox > .diapoIco {background: url('i/bg/diapo.png') 50% 50% no-repeat;}
.icoBox > .soundIco {background: url('i/bg/sound.png') 50% 50% no-repeat;}
.icoBox > .animIco {background: url('i/bg/anim.png') 50% 50% no-repeat;}

.text ul,
.text ol,
.text blockquote {display: table; display: inline-block; display: table-cell; padding-bottom: 0.85em;}

.text cite {font-style: normal;}

/* Shadow
----- */
.split {position: relative;}
.shadow-r {width: 10px; min-height: 100%; display: block; position: absolute; top: 0; left: 501px; z-index: 100; overflow: hidden;}
.shadowTop {position: absolute; top: -382px; left: 0; display: block; width: 10px; height: 100%; z-index: 101;}
html>body .shadowTop {background: url('i/backgrounds/shadow-right-tile.png') 0 0 repeat-y;}
.shadowBtm {position: absolute; bottom: 0; left: 0; display: block; width: 10px; height: 382px; z-index: 102;}
html>body .shadowBtm {background: url('i/backgrounds/shadow-right-btm.png') 0 0 no-repeat;}

/* Footer
----- */
#footer {font-size: 0.714em; text-align: right; width: 631px; min-height: 42px; position: absolute; bottom: 0; right: 0; padding: 38px 10px 0 0; color: #999; z-index: 200;}
#footer li {display: inline;}
#footer li:before {content: ' | ';}
#footer li:first-child:before {content: '';}
#footer a {color: #999;}
#footer a:hover {color: #999;}
#footer .copyright a {color: #000;}
#footer .rss a {padding: 0 16px 0 0; background: url('i/icons/rss.gif') 100% 50% no-repeat;}
#footer li a:hover {text-decoration: underline;}


/* Overlay
---------------------- */
#overlay {min-height: 100%; min-width: 100%; position: absolute; left: 0; top: 0; z-index: 5000;}
html>body #overlay {background: url('i/backgrounds/000-45.png'); background: rgba(0,0,0,0.45);}
#overlayContainer {width: 500px; height: 400px; position: absolute; left: 50%; margin-left: -50%; z-index: 5002; top: 0; border: solid 3px #333; font-size: 0.75em; color: #676765;}
#overlayContainer h1 {background: #f4f2f0; color: #000; font-size: 1.75em; padding: 20px 55px 20px 17px; font-weight: normal;}
/*padding: 10px 17px 5px 17px;*/
#overlayContainer .illustration {clear: both;}
#content #overlayInnerContent h1 {color: #D6001B; font-size: 1.15em; margin-bottom: 0.5em; font-weight: bold;}
#overlayContainer .content {color: #676765; padding: 17px;}
#overlayContainer img {/*border: solid 1px #676765;*/}
#overlayContainer .diaporama img {border: none;}
#content #overlayInnerContent img {border: solid 1px #676765;}
#overlayInnerContent.center .illustration {margin-left: auto; margin-right: auto;}
.hidden {display: none;}
.transparent {-moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}


/*#overlayContainer .rh h1 {font-size: 1.35em; margin: 0 25px 1em 0;}*/
#overlayContainer .rh .content {padding-bottom: 1em; color: #333;}


#overlayNav a {margin: 0 0 0 0; text-align: left; color: #676765; font-size: 0.9em; outline: none;}
#content #overlayNav a {color: #676765; font-size: 0.9em;}
#overlayNav ul {height: 30px; top: 3px; position: absolute; right: 35px;}
#overlayNav ul li {list-style: none; margin: 0; padding: 0;}
#overlayNav a:hover {text-decoration: underline;}
#overlayNav .closer {background: url('i/backgrounds/overlay-close.gif') 0 0 no-repeat; width: 37px; height: 37px; position: absolute; top: 7px; right: 7px;}
#overlayNav .closer:hover {background-position: -100px 0;}

#overlayNav .paging {color: #676765; font-size: 0.9em; padding: 0.8em 25px 0 25px;}
#overlayNav .previous {display: block; width: 20px; height: 30px; position: absolute; top: 0; left: 0; overflow: hidden;}
#overlayNav .previous span {display: block; width: 20px; height: 30px; background: url('i/backgrounds/diapo-nav.gif') -11px -45px no-repeat; text-indent: -9999px;}
#overlayNav .previous a {display: block; width: 20px; height: 30px; background: url('i/backgrounds/diapo-nav.gif') -11px -5px no-repeat; text-indent: -9999px;}
#overlayNav .next {display: block; width: 20px; height: 30px; position: absolute; top: 0; right: 0; overflow: hidden;}
#overlayNav .next span {display: block; width: 20px; height: 30px; background: url('i/backgrounds/diapo-nav.gif') -49px -45px no-repeat; text-indent: -9999px;}
#overlayNav .next a {display: block; width: 20px; height: 30px; background: url('i/backgrounds/diapo-nav.gif') -49px -5px no-repeat; text-indent: -9999px;}

#overlayContainer .legend {font-size: 0.85em; text-align: right; display: block; margin-top: 0.4em;}
#overlayContainer .legend,
#overlayContainer .legend * {color: #888;}

#overlayContainer object {display: block; /*border: solid 1px #676765;*/}
#overlayContainer object object {border: none;}
#overlayContainer .content {min-height: 29px;}
#overlayContainer .content a {text-decoration: underline;}

#loader {display: block; width: 32px; height: 32px; margin: -16px 0 0 -16px; opacity: 0.5; position: absolute; left: 50%; top: 50%; z-index: 5001;}

#overlayInnerContent {background: #fff; position: relative;}

/* Diaporama
----- */
.diaporama {position: relative; /*width: 516px;*/}
.diapo .data {margin-bottom: 0.85em;}
.full .diapo .data {padding: 0 31px 0 31px;}
.diaporama .media {background: #151515; height: 387px; margin-bottom: 1em; overflow: hidden; line-height: 387px; text-align: center;}
.diaporama .media img {display: inline; line-height: 387px; vertical-align: middle;}
.diaporama .media a {text-decoration: none;}
.scripted .diapo {position: absolute; top: -9999px;}
.diaporama .current {position: static; top: 0;}
.diapoNav {position: absolute; top: 0; left: 0; height: 387px; width: 100%;}

.diapoNav button {display: block; width: 35%; height: 387px; overflow: hidden; position: absolute; line-height: 387px; text-decoration: none; text-align: center; font-size: 60px; top: 0; z-index: 300; text-indent: -9999px; background: url('i/backgrounds/fff-00.png'); background: rgba(255,255,255,0); text-shadow: rgba(0,0,0,0.25) 1px 1px 5px;}
.diapoNav .prev {left: 0;}
.diapoNav .next {right: 0;}

.diapoNav .playPause {width: 40%; line-height: 395px; font-size: 35px; left: 30%; font-weight: bold; letter-spacing: 0.1em; text-shadow: rgba(0,0,0,0.5) 1px 1px 20px;}

.diapoNav > button:focus,
.diapoNav > button:hover {background: url('i/backgrounds/fff-15.png'); background: rgba(255,255,255,0.15); color: rgb(140,197,64); color: rgba(215,0,27,0.95); text-indent: 0; outline: none; -webkit-transition: all 0.25s ease;}

.diapoNav span {display: none; text-align: center; width: 44%; position: absolute; bottom: 0; left: 28%; color: #efefef; color: rgba(255,255,255,0.5); text-shadow: rgba(0,0,0,0.25) 1px 1px 5px;}
.diapoNav:hover span {display: block;}

.diapoNav .reposition {width: 1px; height: 1px; left: 0; outline: none;}
.diapoNav .reposition:focus {outline: none;}

#overlayInnerContent .diapo .data {padding: 0 17px 0.5em 17px; margin: 0;}


/* Floats
----- */
#toolStripeInner:after,
#contactTgtInner .cols:after,
#header:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
