html {height: 100%;}
body {background: #fff; font-size: 100.1%; color: #858575; line-height: 1.4; height: 100%;}
* {margin: 0; padding: 0; font-family: arial,FreeSans,helvetica,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: #858575; text-decoration: none;}
a:hover {color: #906;}
a:focus {outline: none;}

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

select {color: #666;}


/* Page
---------------------- */
#page {font-size: 0.75em; margin: 0 auto; width: 980px; padding: 0 11px; background: #fff; position: relative; min-height: 100%;}
.intranet #page {width: 740px; padding: 0; margin: 0;}

/* Header
---------------------- */
#logo {position: absolute; width: 129px; height: 69px; left: 17px; top: 8px; z-index: 6;}
html > body #logo {background: url('i/logos/fondation.png') 0 0 no-repeat;}
#logo span,
#logo a {display: block; width: 100%; height: 100%; overflow: hidden; text-indent: -9999px;}

#head {position: relative; background-repeat: no-repeat; background-position: 100% 0; margin-bottom: 8px; padding: 55px 0 0 0;}

#head .curve {display: block; overflow: hidden; width: 1002px; height: 55px; position: absolute; z-index: 2; left: -11px; top: 0;}
html>body #head .curve {background: url('i/backgrounds/header-mask.png') 0 0 no-repeat;}

#head .cat {margin: 8px 0 7px 41px; line-height: 1.2; font-size: 16px;}
#head .cat,
#head .cat * {font-family: 'Trebuchet MS',arial,verdana,sans-serif;}
#head .cat h2 em {display: block; font-style: normal; height: 18px; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; text-indent: -9999px; margin-bottom: 4px;}
#head .cat p strong {font-size: 48px; font-weight: normal; display: block; line-height: 1;}
#head .cat p {float: right; display: block; position: relative; top: -4px;}
.cat-cs1 h2,
.cat-cs1 strong,
.cat-cs1 h2 a {color: #0d8ccf;}
.cat-cs2 h2,
.cat-cs2 strong,
.cat-cs2 h2 a {color: #f4a600;}
.cat-cs3 h2,
.cat-cs3 strong,
.cat-cs3 h2 a {color: #96bf0d;}
.cat-cs4 h2,
.cat-cs4 strong,
.cat-cs4 h2 a {color: #c90000;}

/* 
----- */
#navigation {background: url('i/backgrounds/nav.jpg') 0 50% repeat-x; text-transform: uppercase; line-height: 1.2; font-size: 0.9em; padding: 0 30px;}
#navigation ul {background: url('i/backgrounds/nav-separator.jpg') 0 100% no-repeat; padding: 0 0 0 4px;}
#navigation li {float: left; background: url('i/backgrounds/nav-separator.jpg') 100% 100% no-repeat; padding: 0 4px 0 0;}
#navigation li a {display: block; padding: 8px 20px 7px 20px; background: url('i/backgrounds/nav-on.jpg') -9999px 100% no-repeat; color: #666;}
#navigation li strong a,
#navigation li a:hover {background-position: 0 100%; background-repeat: repeat; color: #666;}
#navigation li strong {font-weight: normal;}

#navigation .prixDuLivre {float: right; background-position: 0 100%;}
#navigation .prixDuLivre span {display: block; padding: 0 0 0 4px; background: url('i/backgrounds/nav-separator.jpg') 0 100% no-repeat;}
#navigation .prixDuLivre span span {display: block; padding: 0 4px 0 0; background-position: 100% 100%;}

/* Rounded (put it here to avoid IE8 CC ) … errr, why's that ?
----- */
.rounded {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; position: relative;}
.semiRounded {-moz-border-radius: 8px 8px 0 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.roundFix .r {position: absolute; width: 9px; height: 9px; line-height: 9px; overflow: hidden;}
html>body .roundFix .r1 {left: 0; top: 0; background: url('i/backgrounds/nav-borders.png') 0 0 no-repeat;}
html>body .roundFix .r2 {right: 0; top: 0; background: url('i/backgrounds/nav-borders.png') 100% 0 no-repeat;}
html>body .roundFix .r3 {right: 0; bottom: 0; background: url('i/backgrounds/nav-borders.png') 100% -22px no-repeat;}
html>body .roundFix .r4 {left: 0; bottom: 0; background: url('i/backgrounds/nav-borders.png') 0 -22px no-repeat;}
#page .semiRounded .r3,
#page .semiRounded .r4 {display: none;}

html>body .diapo-in .roundFix .r1 {background-image: url('i/backgrounds/nav-borders-g.png');}
html>body .diapo-in .roundFix .r2 {background-image: url('i/backgrounds/nav-borders-g.png');}
html>body .diapo-in .roundFix .r3 {background-image: url('i/backgrounds/nav-borders-g.png');}
html>body .diapo-in .roundFix .r4 {background-image: url('i/backgrounds/nav-borders-g.png');}

html>body .inset-cs1 .roundFix .r1 {background-image: url('i/backgrounds/nav-borders-i-1.png');}
html>body .inset-cs1 .roundFix .r2 {background-image: url('i/backgrounds/nav-borders-i-1.png');}
html>body .inset-cs1 .roundFix .r3 {background-image: url('i/backgrounds/nav-borders-i-1.png');}
html>body .inset-cs1 .roundFix .r4 {background-image: url('i/backgrounds/nav-borders-i-1.png');}

html>body .inset-cs2 .roundFix .r1 {background-image: url('i/backgrounds/nav-borders-i-2.png');}
html>body .inset-cs2 .roundFix .r2 {background-image: url('i/backgrounds/nav-borders-i-2.png');}
html>body .inset-cs2 .roundFix .r3 {background-image: url('i/backgrounds/nav-borders-i-2.png');}
html>body .inset-cs2 .roundFix .r4 {background-image: url('i/backgrounds/nav-borders-i-2.png');}

html>body .inset-cs3 .roundFix .r1 {background-image: url('i/backgrounds/nav-borders-i-3.png');}
html>body .inset-cs3 .roundFix .r2 {background-image: url('i/backgrounds/nav-borders-i-3.png');}
html>body .inset-cs3 .roundFix .r3 {background-image: url('i/backgrounds/nav-borders-i-3.png');}
html>body .inset-cs3 .roundFix .r4 {background-image: url('i/backgrounds/nav-borders-i-3.png');}

html>body .inset-cs4 .roundFix .r1 {background-image: url('i/backgrounds/nav-borders-i-4.png');}
html>body .inset-cs4 .roundFix .r2 {background-image: url('i/backgrounds/nav-borders-i-4.png');}
html>body .inset-cs4 .roundFix .r3 {background-image: url('i/backgrounds/nav-borders-i-4.png');}
html>body .inset-cs4 .roundFix .r4 {background-image: url('i/backgrounds/nav-borders-i-4.png');}


/* 
----- */
.wired {background: url('i/backgrounds/wired.gif') 0 0 no-repeat; margin: 0 0 5px 0;}
.wired-b {background: url('i/backgrounds/wired.gif') 100% 0 no-repeat;}
.wired-c {background: url('i/backgrounds/wired.gif') 100% 100% no-repeat;}
.wired-d {background: url('i/backgrounds/wired.gif') 0 100% no-repeat; padding: 14px;}


/* Wrapper
---------------------- */
#wrapper {padding-bottom: 5em;}

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

.content h2 {color: #333; font-size: 1.1em; font-family: 'Trebuchet MS',arial,FreeSans,verdana,sans-serif; margin-bottom: 0.8em;}


.illustration {margin: 0 0 0.5em 0; line-height: 1;}
.illustration img {display: block;}
.illustration .legend {line-height: 1.2; margin: 0.3em 0; color: #999; font-size: 0.9em;}
.illustration .legend * {color: #999; margin-bottom: 0;}

.left .illustration {float: left; margin-right: 20px;}
.right .illustration {float: right; margin-left: 20px;}
.center .illustration {margin: 0 auto 1em auto;}

.illustration .deco {display: block; position: relative;}
html>body #page .deco span {display: block; position: absolute; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; width: 11px; height: 11px;}
html>body #page .deco span.a {left: 0; top: 0; background-image: url(i/backgrounds/mask-a.png);}
html>body #page .deco span.b {right: 0; top: 0; background-image: url(i/backgrounds/mask-b.png);}
html>body #page .deco span.c {left: 0; bottom: 0; background-image: url(i/backgrounds/mask-c.png);}
html>body #page .deco span.d {right: 0; bottom: 0; background-image: url(i/backgrounds/mask-d.png);}
html>body #page .inset .deco span.a {background-image: url(i/backgrounds/mask-a2.png);}
html>body #page .inset .deco span.b {background-image: url(i/backgrounds/mask-b2.png);}
html>body #page .inset .deco span.c {background-image: url(i/backgrounds/mask-c2.png);}
html>body #page .inset .deco span.d {background-image: url(i/backgrounds/mask-d2.png);}

html>body #page .inset-cs1 .deco span.a {background-image: url(i/backgrounds/mask-a-i1.png);}
html>body #page .inset-cs1 .deco span.b {background-image: url(i/backgrounds/mask-b-i1.png);}
html>body #page .inset-cs1 .deco span.c {background-image: url(i/backgrounds/mask-c-i1.png);}
html>body #page .inset-cs1 .deco span.d {background-image: url(i/backgrounds/mask-d-i1.png);}

html>body #page .inset-cs2 .deco span.a {background-image: url(i/backgrounds/mask-a-i2.png);}
html>body #page .inset-cs2 .deco span.b {background-image: url(i/backgrounds/mask-b-i2.png);}
html>body #page .inset-cs2 .deco span.c {background-image: url(i/backgrounds/mask-c-i2.png);}
html>body #page .inset-cs2 .deco span.d {background-image: url(i/backgrounds/mask-d-i2.png);}

html>body #page .inset-cs3 .deco span.a {background-image: url(i/backgrounds/mask-a-i3.png);}
html>body #page .inset-cs3 .deco span.b {background-image: url(i/backgrounds/mask-b-i3.png);}
html>body #page .inset-cs3 .deco span.c {background-image: url(i/backgrounds/mask-c-i3.png);}
html>body #page .inset-cs3 .deco span.d {background-image: url(i/backgrounds/mask-d-i3.png);}

html>body #page .inset-cs4 .deco span.a {background-image: url(i/backgrounds/mask-a-i4.png);}
html>body #page .inset-cs4 .deco span.b {background-image: url(i/backgrounds/mask-b-i4.png);}
html>body #page .inset-cs4 .deco span.c {background-image: url(i/backgrounds/mask-c-i4.png);}
html>body #page .inset-cs4 .deco span.d {background-image: url(i/backgrounds/mask-d-i4.png);}


/* 
----- */
.diapo {width: 173px; background: url('i/backgrounds/tv-bottom.png') 0 100% no-repeat; padding: 0 0 12px 0;}
.diapo-in {background: url('i/backgrounds/tv-top.png') 0 0 no-repeat; padding: 19px 22px 0 20px;}
.diapo .img {display: block; width: 131px; height: 100px; overflow: hidden; line-height: 1; position: relative; text-decoration: none; margin: 0 0 20px 0;}
.diapo .img .mask {display: block; width: 131px; height: 100px; overflow: hidden; line-height: 1; position: absolute; top: 0; left: 0;}
.diapo .img > .mask {background: url('i/backgrounds/tv-glow.png') 0 0 no-repeat;}
.diapo .newBtn {float: right; margin: 0; text-transform: none; font-size: 0.9em; background: #999 url('i/backgrounds/tv-btn.gif') 100% 50% no-repeat; padding-right: 20px;}
.diapo a.newBtn:hover {color: #efefef;}
.left .diapo {float: left; margin-right: 20px;}
.right .diapo {float: right; margin-left: 20px;}


/* Insets
---------------------- */

/* 
----- */
.newBtn {background: #858575; color: #fff; float: left; margin: 0 4px 4px 0; text-transform: uppercase; font-size: 0.8em; padding: 2px 10px 2px 10px; display: block; text-align: center; position: relative;}
.newBtn em {position: absolute; right: 5px; top: 50%; margin-top: -6px; width: 9px; height: 12px; display: block; overflow: hidden; background-position: 0 0; background-repeat: no-repeat;}

.cs1 .newBtn-current,
.newBtn-cs1 {background-color: #0d8ccf;}
.cs2 .newBtn-current,
.newBtn-cs2 {background-color: #f4a600;}
.cs3 .newBtn-current,
.newBtn-cs3 {background-color: #96bf0d;}
.cs4 .newBtn-current,
.newBtn-cs4 {background-color: #c00;}

.tags {margin: 0.2em 0 0.5em 0;}
.intro .tags {margin-top: 0;}
.suggestions {margin-top: 0.5em;}

/* Helpers
---------------------- */
.helpers li {display: inline;}
.helpers a:hover {text-decoration: underline;}
#footer {text-align: center; font-size: 0.85em; padding-bottom: 0.5em; width: 980px; margin: 0 auto 0.3em auto; position: absolute; bottom: 0;}
#jumpers ul {float: right; padding-top: 0.3em;}
#jumpers .corporation a {background: url(i/logos/veolia-xs.gif) 0 50% no-repeat; padding-left: 12px; font-weight: bold;}
#footer .corporation a {color: #999;}
#footer .atom a {background: url(i/icons/feed.gif) 0 0 no-repeat; padding-left: 15px; line-height: 15px;}

#footer a {color: #666;}
#jumpers a {color: #707070;}

#jumpers .lang:before {content: ' | ';}

#jumpers {line-height: 1; font-size: 0.9em; display: block; padding-top: 6px; min-height: 55px;}
#jumpers form,
#jumpers form div {display: inline;}
#jumpers li {line-height: 2;}

#jumpers .corporation {margin-left: 25px;}
#jumpers .text-version a {padding-left: 20px; background: url('i/backgrounds/stroked-eye.gif') 0 50% no-repeat;}

#jumpers input {border: solid 1px #b2acb3; padding: 1px 2px; color: #777; margin: 0 0 0 4px;}
#jumpers button {vertical-align: baseline; color: #666; font-size: 0.95em;}
#jumpers form:hover {color: #555;}
#jumpers form:hover input {border-color: #555;}
#jumpers form:hover button {color: #555;}
#jumpers input:focus {border-color: #666;}
#jumpers .search {margin-left: 20px;}
.scripted #jumpers .fancyField span {position: absolute; left: -9999px; top: -9999px;}

#footer li:before {content: ' | ';}
#footer li:first-child:before {content: '';}

.eof {display: none;}


/* 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 1px #222; font-size: 0.75em; color: #676765;}
#overlayContainer h1 {color: #BE0F10; font-size: 1.3em; margin: 0 125px 0.3em 0; font-weight: normal;}
#overlayContainer .illustration {clear: both;}
#content #overlayInnerContent h1 {color: #BE0F10; font-size: 1.15em; margin-bottom: 0.5em; font-weight: bold;}
#overlayContainer .content {color: #676765;}
#overlayContainer img {border: solid 1px #676765;}
#content #overlayInnerContent img {border: solid 1px #676765;}
#overlayInnerContent.center .illustration {margin-left: auto; margin-right: auto;}
.hidden {display: none;}

#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: 22px; height: 22px; position: absolute; top: 3px; right: 5px;}

#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: #f3f6f8; padding: 10px 17px 5px 17px; position: relative;}



/* Floats
---------------------- */
#jumpers:after,
#header:after,
.block:after,
#navigation ul:after,
#head .cat:after,
.diapo-in:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}