Changeset 288 for presentations/trunk

Timestamp:

Dec 18, 2008, 3:56:39 PM (17 years ago)

Author:

garnier

Message:

simplification des feuilles, amelioration du style print

Location:

presentations/trunk/Tools/Css

Files:

• #styles.css# (deleted)
• print.css (modified) (2 diffs)
• print.css~ (deleted)
• screen.css (modified) (1 diff)
• screen.css~ (deleted)
• slidy.css~ (deleted)
• styles.css (modified) (3 diffs)
• styles.css~ (deleted)
• stylesGeant4.css~ (deleted)

presentations/trunk/Tools/Css/print.css

@@ -2 +2 @@
 
 /* Definition for print media
-   */
+    */
 
 @media print {
-  * html div.slide {
-    height: 100%;
-    overflow: auto;
-    padding: 0px;
-  }                   /* end ie6-hack */
-  div.slide { page-break-after: always; }
-  div.handout { display: block; }
-
+  body {
+    size: landscape;
+  }
+  div.slide#cover {  
+    text-align: center;
+  }
+  div.handout { 
+    display: block; 
+  }
+  
+  div.slide { 
+    font-size: 12pt;
+  }
   @page :left {
   margin-left: 1cm;
@@ -21 +26 @@
   margin-right: 4cm;
 }
-h1 {
-  margin:  0em 0 0.1em;
-  margin-bottom:  1em;
-  padding-left:   0px;
-  padding-bottom: 0.3em;
-  font-size: 1.5em;
-  border-bottom: medium dotted #291873;
+  img           {
+    border: 0;
+    background-color: transparent;
+  }
+  
+  body, p, td, li, ul, ol {
+    font-family:Verdana,Helvetica,Arial,sans-serif;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-family:"Trebuchet MS",Geneva,Arial,Helvetica,SunSans-Regular,Verdana,sans-serif;
+    margin:0;
+  }
+  h1 {
+    color:#336699;
+  }
+  div.incremental { 
+    position: relative;  
+  }
 }
-
-}

presentations/trunk/Tools/Css/screen.css

@@ -1 +1 @@
 @charset "UTF-8";
+
+
 
 /* Definition for screen, projection media   */
 @media projection, screen {
-  body {
-    margin : 0;
-    padding : 0;
-    width : 100%;
-    height : 100%;
-    color : black;
-    background : white url(../Images/header.gif) repeat-x left top;
-    font-size : 20pt;
-  }
-  img#fullscreen {
-    position : absolute;
-    top : 2.5em;
-    bottom : 40px;
-    left : 0;
-    right : auto;
-    max-width : 100%;
-    max-height : 100%;
-    z-index : 300;
-    overflow : auto;
-    display : block;
-    visibility : visible;
-  }
-  h1 {
-    margin : 0 0 0.1em 1em;
-    padding-left : 100px;
-    padding-bottom : 0.3em;
-    font-size : 1.5em;
-    border-bottom : medium dotted #291873;
-    background : url(../Images/h3_marker.gif) no-repeat 0 0.3em;
-  }
+body {
+  background: white url(../Images/header.gif) repeat-x left top;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  color: black;
+  font-family: Comic Sans MS, Verdana, Arial, sans-serif;
+}
+
+
+
+blockquote { 
+  margin: 0.3em 0; 
+  padding: 0.8em ; 
+  background-color: #E6E7F5 ; 
+}
+blockquote ul,
+blockquote ol { 
+  margin-left: 0em; 
+}
+
+h1 {
+  margin:  0em 0 0.1em;
+  padding-left: 100px;
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: medium dotted #291873;
+  background:  url(../Images/h3_marker.gif)  no-repeat 0px 0.3em;
+}
+
+h2 {
+  margin:  0.1em 0 0.5em 1em;
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: medium dotted #291873;
+  text-align: center;
+}
+
+h4 {
+  margin: 0 0 0.5em;
+  border-bottom: 2px dotted #291873;
+  font-size: 1em;
+}
+
+ul, ol { 
+  margin-top: 0.5em; 
+  margin-bottom: 0.3em; 
+  line-height: 1.15; 
+}
+
+  p  {
+    margin: 0.5em 0;
+    line-height: 1.15;
+  }
+  ul li  {
+    list-style-type: none;
+    margin: 0.3em 2em 0.3em 1em;
+    font-size: 100%; 
+    list-style-image: url(../Images/bullet_blue.gif) ;
+  }
+
+  ul li ul li {
+    list-style-image: url(../Images/li_marker.gif);
+    font-size: 95%; 
+  }
+
+  ul li ul li ul li{
+    list-style-image: url(../Images/blue_square.gif) ;
+    font-size: 100%; 
+  }
+
+  ul li ul li ol li {
+    list-style-image: url(../Images/blue_square.gif) ;
+  }             
+  ol li  { margin: 0.3em 1em 0.3em 2em; }
+  dl     { margin: 0.3em 2em 0.3em 1em; font-size: 1em; line-height: 1.15; }
+  dl dt  { margin: 0.3em 2em 0.3em 1em; font-size: 95% }
+  dl dd  { margin: 0 0 0 1em; font-size: 1em;}
+
+  ul{
+    list-style-type: square;
+    font-size: 95%;
+    color: #000011
+  }
+  ul ul       {
+    list-style-type: disc;
+    font-size: 90%;
+    line-height: 1.05;
+    color: #111199
+  }
+  ul ul ul    {
+    list-style-type: circle;
+    font-size: 85%;
+    color: #9900DD
+  }
+  ul ul ul ul {
+    list-style-type: disc;
+    font-size: 80%;
+    color: #334455
+  }
+
+  ul ul, ul ol, ul dl, ul p, ol ul, ol ol, ol p,
+  dl dl, dl ul, dl ol, dl p { margin-top: 0; margin-bottom: 0; font-size: 1em; }
+
+  /* rectangular blue bullet + unfold/nofold/fold widget */
+
+  /*
+     setting class="outline on ol or ul makes it behave as an
+     ouline list where blocklevel content in li elements is
+     hidden by default and can be expanded or collapsed with
+     mouse click. Set class="expand" on li to override default
+     */
+
+  ol.outline li:hover { cursor: pointer }
+  ol.outline li.nofold:hover { cursor: default }
+
+  ul.outline li:hover { cursor: pointer }
+  ul.outline li.nofold:hover { cursor: default }
+
+  ol.outline { list-style:decimal; }
+  ol.outline ol { list-style-type:lower-alpha }
+
+  ol.outline li.nofold {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/nofold-dim.bmp) no-repeat 0px 0.5em;
+  }
+  ol.outline li.unfolded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold-dim.gif) no-repeat 0px 0.5em;
+  }
+  ol.outline li.folded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold-dim.gif) no-repeat 0px 0.5em;
+  }
+  ol.outline li.unfolded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold.bmp) no-repeat 0px 0.5em;
+  }
+  ol.outline li.folded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold.bmp) no-repeat 0px 0.5em;
+  }
+
+  ul.outline li.nofold {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/nofold-dim.bmp) no-repeat 5px 8px;
+  }
+
+  ul.outline li.unfolded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold-dim.gif) no-repeat 5px 8px;
+  }
+  ul.outline li.folded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold-dim.gif) no-repeat 5px 8px;
+  }
+
+  ul.outline li.unfolded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold.bmp) no-repeat 5px 8px;
+  }
+
+  ul.outline li.folded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold.bmp) no-repeat 5px 8px;
+  }
+
+  li ul.outline li.nofold {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/nofold-dim.bmp) no-repeat 5px 8px;
+  }
+  li ul.outline li.unfolded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold-dim.gif) no-repeat 5px 8px;
+  }
+  li ul.outline li.folded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold-dim.gif) no-repeat 5px 8px;
+  }
+  li ul.outline li.unfolded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold.bmp) no-repeat 5px 8px;
+  }
+  li ul.outline li.folded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold.bmp) no-repeat 5px 8px;
+  }
+
+  ul.outline li:hover { cursor: pointer }
+  ul.outline li.nofold:hover { cursor: default }
+
+
+  script  {
+    font-family: OCRB, Courier New, SimSun, Century, monospace;    
+    background-color: #efefef;
+    font-size: 1.2em;   
+  }
+
+  pre {
+    overflow: auto;
+    margin: 0.3em 0;
+    padding: 0.1em 0.5em;
+    background-color: #bfbfbf;
+    font-size: 0.8em;
+    font-family: OCRB, Courier New, SimSun, Century, monospace;    
+    line-height: 1.0;
+  }
+  pre * {   font-family: OCRB, Courier New, SimSun, Century, monospace; }
+  pre span { display: none; }
+  pre.output {
+    font-size: 0.6em;
+    background-color: #efefef;
+  }
+  pre.ex { 
+    margin-top: 0.5em;
+    padding-top: 0.9em;
+  }
+
+  dl dd pre   { font-size: 0.8em; }
+
+  div.ex {
+    overflow: auto;
+    margin: 0.3em 0;
+    padding: 0.1em 0.5em;
+    /*  background-color: #bfbfbf;*/
+    background: #ffccff;
+    /*  font-size: 0.8em;*/
+    font-family: OCRB, Courier New, SimSun, Century, monospace;
+    line-height: 1.0;
+  }
+
+  table {
+    width: 100%;
+    font-size: 80%;
+    border-top: thin solid #291873;
+    border-left: thin solid #291873;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  table.noborder {
+    margin: auto;
+    width: 85%;
+    border-style: none;
+    border-width: 0px;
+    border-right: solid #FFFFFF;
+    border-bottom: solid #FFFFFF;
+    border-spacing: 2px 10px; 
+    background-color: #efefef;
+  }
+
+  table.noborder tr { 
+  }
+
+  table.noborder td {
+    border-style: none;
+    border-width: 0px;
+    border-right: solid #FFFFFF;
+    border-bottom: solid #FFFFFF;
+    padding: 15px;
+  }     
+
+  table.tds {
+    margin: auto;
+    width: 55%;
+    border-style: none;
+    border-width: 0px;
+    border-right: solid #FFFFFF;
+    border-bottom: solid #FFFFFF;
+    border-spacing: 2px 10px; 
+    background-color: #efefef;
+  }
+
+  table.tds td {
+    border-style: none;
+    border-width: 0px;
+    border-right: solid #FFFFFF;
+    border-bottom: solid #FFFFFF;
+    padding: 10px;
+  }     
+
+  th, td {
+    border-right: thin solid #291873;
+    border-bottom: thin solid #291873;
+    font-size: 1.8em;
+    padding: 0 0.2em;
+    line-height: 1.2;
+  }
+
+  th { background-color: #E6E7F5 ; }
+
+  html>body th, html>body td { font-size: 1.2em; }
+
+  img           { border: 0; background-color: transparent; }
+  strong        { font-weight: bold; }
+  em            { color: #291873; font-style: italic; }
+  cite          { font-style: normal; }
+  abbr, acronym { border-bottom-color: silver; }
+
+  code   { font-family: monospace; }
+  kbd    {
+    margin: 0 0.1em;
+    border: thin solid gray;
+    background-color: #ccc;
+    color: #666;
+    font-family: Verdana, Arial,  sans-serif;
+    font-size: 1em;
+  }
+
+  a:link    { border-bottom: thin dashed; color: #291B66; text-decoration: none; }
+  a:visited { border-bottom: thin dashed; color: #291B66; text-decoration: none; }
+  a:hover   { color: #4A31BA; }
+  a:active  { color: #291B66; }
+
+  /* General Classes */
+  p.goto                { text-align: right; }
+  p.goto span           { color: white; }
+  p.flow                { text-align: center; }
+  a.longuri             { font-size: 0.8em; }
+  span.uppercase        { text-transform: uppercase; }
+
+  /* All Slides */
+  /* 
+     * A sidebar has the same color and the same rounded corners as the H1
+     * title, but on all sides. It is floated to the right.
+     */
+  div.sidebar
+  {
+    float: right;
+    clear: right;
+    margin: 0 -28px 0.5em 1em;  /* 28px = width of the shadow */
+    width: 30%;
+    color: white;
+    background: url(../Images/blueround-right.png) right center repeat-y;
+    padding: 40px 40px 0 20px;  /* Top 40px reserved for ::before */
+  }
+  div.sidebar:before
+  {
+    display: block;
+    line-height: 0;
+    margin: -40px -40px 0 -20px;        /* height 40px - margin-top 40px = 0 */
+    background: url(../Images/blueround-topright.png) right top no-repeat;
+    text-align: left;
+    content: url(../Images/blueround-topleft.png); /* height is 40px */
+  }
+  div.sidebar:after
+  {
+    display: block;
+    line-height: 0;
+    margin: 0 -40px 0 -20px;
+    background: url(../Images/blueround-bottomright.png) right bottom no-repeat;
+    text-align: left;
+    content: url(../Images/blueround-bottomleft.png);
+  }
+  div.sidebar > *:first-child
+  {
+    margin-top: -20px;
+  }    
+
+
+  /*
+     * pour centrer horizontalement et verticalement
+     */ 
+  div.vfill {
+    position:relative; 
+    top: 50%;
+    margin-top: -200px;
+  }
+
+  div.hfill {    
+    position:relative;
+    left: 50%; 
+    margin-left: -350px; /* moitié de la largeur */
+  }
+
+  div.hvfill {
+    position:relative; 
+    left: 50%; 
+    margin-left: -350px; /* moitié de la largeur */
+  }
+
+  /*
+     * A div.callout has a lighter background and also rounded corners.
+     */
+  
+  div.callout {
+    clear: both;
+    margin: 1em -20px 0 0;              /* 20px = width of the shadow */
+    max-width: 1600px;
+    color: #291873;
+    background: url(../Images/lightblueround-right.png) right center repeat-y;
+    padding: 40px 40px 0 20px;  /* Top 40px reserved for ::before */
+    font-style: normal;
+  }
+
+  div.callout:before {
+    display: block;
+    line-height: 0;
+    margin: -40px -40px 0 -20px;        /* Height + margin-top = 0 */
+    background: url(../Images/lightblueround-topright.png) right top no-repeat;
+    text-align: left;
+    content: url(../Images/lightblueround-topleft.png); /* Height is 40px */
+  }
+
+  div.callout:after {
+    display: block;
+    line-height: 0;
+    margin: 0 -40px 0 -20px;
+    background: url(../Images/lightblueround-bottomright.png) right bottom no-repeat;
+    text-align: left;
+    content: url(../Images/lightblueround-bottomleft.png);
+    clear: both;
+  }
+
+  div.callout > *:first-child, address > *:first-child
+  {
+    margin-top: -20px;
+  }
+
+  div.callout signature { 
+    text-align: right;
+    padding-left: 5em;
+  }
+
   div.slide {
-    width : auto;
-    height : auto;
-    z-index : 20;
-    top : 0;
-    bottom : 0;
-    left : 0;
-    right : 0;
-    margin : 0;
-    padding : 2em 40px 0;
-    border : 0;
-  }
-  a:link {
-    border-bottom : thin dashed;
-    color : #291b66;
-    text-decoration : none;
-  }
-  a:visited {
-    border-bottom : thin dashed;
-    color : #291b66;
-    text-decoration : none;
-  }
-  a:hover {
-    color : #4a31ba;
-  }
-  a:active {
-    color : #291b66;
-  }
+    width: auto;
+    height: auto;
+    z-index: 20;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 2em 40px 0;
+    border: 0;
+    border-style: none;
+    display: block;
+    visibility: visible;
+    position: absolute;
+    border-style: none;
+  }
+
+
+  img#fullscreen { 
+    position: absolute;
+    top: 2.5em;
+    bottom: 40px;
+    left: 0em;
+    right: auto;
+    max-width: 100%;
+    max-height: 100%;
+    z-index: 300;
+    overflow: auto;
+    display: block;
+    visibility: visible;
+
+
+  }
+
+  /* logo */
+  div.logo {
+    background-color: transparent;
+    background-image: url(../Logos/logo.jpg) ;
+    background-repeat:  no-repeat;
+    background-attachment: fixed;
+    background-position: 95% 50px; 
+  }
+
+  div.slideLogo {
+    width: auto;
+    height: auto;
+    z-index: 20;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 2em 40px 0;
+    border: 0;
+    background: transparent;
+    background-color: transparent;
+    background-image: url(../Logos/logo.jpg) ;
+    background-repeat:  no-repeat;
+    background-attachment: fixed;
+    background-position: 95% 50px; 
+  }
+
+
+  /* Cover */
   div#cover {
-    width : auto;
-    height : auto;
-    background-color : white;
-    color : black;
-    background-repeat : no-repeat;
-    background-image : url(../Logos/logoLAL50ansgrand.jpg);
-    background-attachment : fixed;
-    background-position : 97% 90%;
+    /*  width: 100%;
+       height: 100%;
+       background-color: white;
+       background: white;       */
+    color: black;
+    background-repeat:  no-repeat;
+    background-image: url(../Logos/lhc.gif);
+    background-attachment: fixed;       
+    background-position: 50% 55% ;
+  }
+
+
+
+  div#cover h1 {
+    margin: 1em 0 1.2em;
+    line-height: 1.0;
+    background-color: #8B8EBE;
+    color: white;
+    text-align: center;
+  }
+
+  div#cover p {
+    font-size: 1.0em;
+    font-weight: bold;
+    line-height: 1.0;
+    color: #291873;
+    text-align: center;
+  }
+
+  div#cover p#title 
+  {
+    font-size: 1.5em;
+    font-weight: bold;
+    line-height: 1.0;
+    color: #291873;
+    text-align: center;    
+  }
+
+  div#cover p#subtitle 
+  {
+    text-align: center;    
+  }
+
+  div#cover p#date {
+    margin: 2em 0 1.2em;;
+    font-size: 0.8em;
+    text-align: center;
+  }
+
+  div#cover p#author {
+    margin: 1em 0 1.2em;;
+    padding-top: 100px;
+    font-size: 0.8em;
+    text-align: center;
+  }
+
+  div#cover p#event {
+    margin: 2em 0 1.2em;;
+    font-size: 1em;
+    text-align: center;
+  }
+
+  h2#introduction { display: none; }
+
+  table.xhtml2modules th { width: 50%; }
+  table.css3modules th   { width: 50%; }
+
+  /* The Day of Web Standards */
+  div#tdows {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    color: black;
+  }
+  html>body div#tdows { width: auto; height: auto; }
+  div#tdows h3 {
+    margin-top: 0.2em;
+    border: 0;
+    background: none;
+    text-align: center;
+  }
+  div#tdows h3 a { 
+    display: block;
+    padding-bottom: 220px;
+    border: 0;
+    background: url(../Images/tdows.png) no-repeat center bottom;
+    text-decoration: none;
+  }
+  div#tdows p {
+    font-size: 1.5em;
+    text-align: center;
+  }
+
+  /* Thank You */
+
+  div#thanks, div#ad {
+    width: 100%;
+    height: 100%;
+    background: #291873;
+    color: white;
+    text-align: center;
+  }
+  html>body div#thanks { width: auto; height: auto; }
+  html>body div#thanks p { margin-top: 4em; }
+
+  div#thanks p, div#ad p {
+    margin: 2.5em 0 0.2em;
+    padding-left: 0;
+    border: 0;
+    font-size: 2em;
+    font-weight: bold;
+  }
+
+  div#ad { width: auto; height: auto; }
+  div#ad p { margin-top: 4em; font-size: 1.5em;}
+
+  /* Gestion des guillemets à la française */
+
+  /* Opera ne comprend toujours pas :lang() */
+  *[lang="en"] {
+    quotes:"\201C" "\201D" "\2018" "\2019";
+  }
+  *[lang="fr"] {
+    quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";
+  }
+
+  /* pour les navigateurs qui supportent le selecteur :lang() */
+  :lang(en) {
+    quotes:"\201C" "\201D" "\2018" "\2019";
+  }
+  :lang(fr) {
+    quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";
+  }
+
+  /* The following styles are applied to js/slidy.js  */
+
+  /*.hidden { display: none; visible: hidden }
+  */
+
+  div.toc {
+    position: absolute;
+    top: auto;
+    bottom: 4em;
+    left: 4em;
+    right: auto;
+    width: 60%;
+    max-width: 30em;
+    height: 30em;
+    border: solid thin black;
+    padding: 1em;
+    background: rgb(240,240,240);
+    color: black;
+    z-index: 300;
+    overflow: auto;
+    display: block;
+    visibility: visible;
+  }
+
+  .toolbar {
+    position: fixed;
+    z-index: 200;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0.5em;
+    text-align: right;
+    padding: 1em;
+    background-color: #291873;
+    color: white;
+    font-size: 0.8em;
+  }
+  .toolbar a:link    { color: white; }
+  .toolbar a:visited { color: #ddd; }
+  .toolbar a:active  { color: white; }
+  .toolbar a:hover   { color: white; }
+
+  .copyright { font-size: 0.8em; background: white;}
+  .footnote { font-size: smaller; padding-top: 3em; margin-left: 3em; }
+
+
+
+  /* table of content */
+
+  div.tocref {
+    width: 5em;
+    text-align: right;
+    float: left;
+    margin:0;
+  }
+
+  div.tocentry {
+    text-align: left;
+    margin-left: 5.7em;
+  }
+
+  div.tocsep {
+    clear: both;
+  }
+  
+  div.incremental { 
+    margin-left: 4em;
+    position: relative;  
   }
 }

presentations/trunk/Tools/Css/styles.css

@@ -2 +2 @@
 
 
-@import "screen.css";
-@import "print.css";
-
-/* ***********************************************************
-   *
-   * Since:     2006-08-22
-   * Guideline: N/A
-   * Author: Vincent Garonne (based on Takahiro Mashiko's work)
-   *
-   * ***********************************************************
-   */
-
-* {
-  margin: 0;
-  padding: 0;
-  font-family: Comic Sans MS, Verdana, Arial, sans-serif;
-}
-
+
+/* Definition for screen, projection media   */
+@media projection, screen {
 body {
+  background: white url(../Images/header.gif) repeat-x left top;
+  font-size: 20pt;
   margin: 0;
   padding: 0;
@@ -26 +13 @@
   height: 100%;
   color: black;
-  background: white url(../Images/header.gif) repeat-x left top;
-  font-size: 18pt;
+  font-family: Comic Sans MS, Verdana, Arial, sans-serif;
 }
 
+
+
+blockquote { 
+  margin: 0.3em 0; 
+  padding: 0.8em ; 
+  background-color: #E6E7F5 ; 
+}
+blockquote ul,
+blockquote ol { 
+  margin-left: 0em; 
+}
+
 h1 {
-        margin:  0em 0 0.1em;
-        margin-bottom: 1em;
-        padding-left: 100px;
-        padding-bottom: 0.3em;
-        font-size: 1.5em;
-        border-bottom: medium dotted #291873;
-        background:  url(../Images/h3_marker.gif)  no-repeat 0px 0.3em;
-   }
-
-h2 {
   margin:  0em 0 0.1em;
-  margin-bottom: 1em;
+  padding-left: 100px;
   padding-bottom: 0.3em;
   font-size: 1.5em;
   border-bottom: medium dotted #291873;
+  background:  url(../Images/h3_marker.gif)  no-repeat 0px 0.3em;
 }
 
 h2 {
-  margin-top: 0.1em;
+  margin:  0.1em 0 0.5em 1em;
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: medium dotted #291873;
   text-align: center;
-   margin-bottom: 0.5em;
- }
+}
 
 h4 {
@@ -60 +51 @@
 }
 
-p  { margin: 0.5em 0; line-height: 1.15; }
-
-blockquote { margin: 0.3em 0; padding: 0.8em ; background-color: #E6E7F5 ; }
-blockquote ul,
-blockquote ol { margin-left: 0em; }
-
-ul, ol { margin-top: 0.5em; margin-bottom: 0.3em; line-height: 1.15; font-size: 100%;}
-
-ul li  {
-  list-style-type: none;
-  margin: 0.3em 2em 0.3em 1em;
-  font-size: 100%; 
-  list-style-image: url(../Images/bullet_blue.gif) ;
+ul, ol { 
+  margin-top: 0.5em; 
+  margin-bottom: 0.3em; 
+  line-height: 1.15; 
 }
 
-ul li ul li {
-  list-style-image: url(../Images/li_marker.gif);
-  font-size: 95%; 
+  p  {
+    margin: 0.5em 0;
+    line-height: 1.15;
+  }
+  ul li  {
+    list-style-type: none;
+    margin: 0.3em 2em 0.3em 1em;
+    font-size: 100%; 
+    list-style-image: url(../Images/bullet_blue.gif) ;
+  }
+
+  ul li ul li {
+    list-style-image: url(../Images/li_marker.gif);
+    font-size: 95%; 
+  }
+
+  ul li ul li ul li{
+    list-style-image: url(../Images/blue_square.gif) ;
+    font-size: 100%; 
+  }
+
+  ul li ul li ol li {
+    list-style-image: url(../Images/blue_square.gif) ;
+  }             
+  ol li  { margin: 0.3em 1em 0.3em 2em; }
+  dl     { margin: 0.3em 2em 0.3em 1em; font-size: 1em; line-height: 1.15; }
+  dl dt  { margin: 0.3em 2em 0.3em 1em; font-size: 95% }
+  dl dd  { margin: 0 0 0 1em; font-size: 1em;}
+
+  ul{
+    list-style-type: square;
+    font-size: 95%;
+    color: #000011
+  }
+  ul ul       {
+    list-style-type: disc;
+    font-size: 90%;
+    line-height: 1.05;
+    color: #111199
+  }
+  ul ul ul    {
+    list-style-type: circle;
+    font-size: 85%;
+    color: #9900DD
+  }
+  ul ul ul ul {
+    list-style-type: disc;
+    font-size: 80%;
+    color: #334455
+  }
+
+  ul ul, ul ol, ul dl, ul p, ol ul, ol ol, ol p,
+  dl dl, dl ul, dl ol, dl p { margin-top: 0; margin-bottom: 0; font-size: 1em; }
+
+  /* rectangular blue bullet + unfold/nofold/fold widget */
+
+  /*
+     setting class="outline on ol or ul makes it behave as an
+     ouline list where blocklevel content in li elements is
+     hidden by default and can be expanded or collapsed with
+     mouse click. Set class="expand" on li to override default
+     */
+
+  ol.outline li:hover { cursor: pointer }
+  ol.outline li.nofold:hover { cursor: default }
+
+  ul.outline li:hover { cursor: pointer }
+  ul.outline li.nofold:hover { cursor: default }
+
+  ol.outline { list-style:decimal; }
+  ol.outline ol { list-style-type:lower-alpha }
+
+  ol.outline li.nofold {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/nofold-dim.bmp) no-repeat 0px 0.5em;
+  }
+  ol.outline li.unfolded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold-dim.gif) no-repeat 0px 0.5em;
+  }
+  ol.outline li.folded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold-dim.gif) no-repeat 0px 0.5em;
+  }
+  ol.outline li.unfolded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold.bmp) no-repeat 0px 0.5em;
+  }
+  ol.outline li.folded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold.bmp) no-repeat 0px 0.5em;
+  }
+
+  ul.outline li.nofold {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/nofold-dim.bmp) no-repeat 5px 8px;
+  }
+
+  ul.outline li.unfolded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold-dim.gif) no-repeat 5px 8px;
+  }
+  ul.outline li.folded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold-dim.gif) no-repeat 5px 8px;
+  }
+
+  ul.outline li.unfolded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold.bmp) no-repeat 5px 8px;
+  }
+
+  ul.outline li.folded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold.bmp) no-repeat 5px 8px;
+  }
+
+  li ul.outline li.nofold {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/nofold-dim.bmp) no-repeat 5px 8px;
+  }
+  li ul.outline li.unfolded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold-dim.gif) no-repeat 5px 8px;
+  }
+  li ul.outline li.folded {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold-dim.gif) no-repeat 5px 8px;
+  }
+  li ul.outline li.unfolded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/fold.bmp) no-repeat 5px 8px;
+  }
+  li ul.outline li.folded:hover {
+    padding: 0 0 0 20px;
+    background: transparent url(../Images/unfold.bmp) no-repeat 5px 8px;
+  }
+
+  ul.outline li:hover { cursor: pointer }
+  ul.outline li.nofold:hover { cursor: default }
+
+
+  script  {
+    font-family: OCRB, Courier New, SimSun, Century, monospace;    
+    background-color: #efefef;
+    font-size: 1.2em;   
+  }
+
+  pre {
+    overflow: auto;
+    margin: 0.3em 0;
+    padding: 0.1em 0.5em;
+    background-color: #bfbfbf;
+    font-size: 0.8em;
+    font-family: OCRB, Courier New, SimSun, Century, monospace;    
+    line-height: 1.0;
+  }
+  pre * {   font-family: OCRB, Courier New, SimSun, Century, monospace; }
+  pre span { display: none; }
+  pre.output {
+    font-size: 0.6em;
+    background-color: #efefef;
+  }
+  pre.ex { 
+    margin-top: 0.5em;
+    padding-top: 0.9em;
+  }
+
+  dl dd pre   { font-size: 0.8em; }
+
+  div.ex {
+    overflow: auto;
+    margin: 0.3em 0;
+    padding: 0.1em 0.5em;
+    /*  background-color: #bfbfbf;*/
+    background: #ffccff;
+    /*  font-size: 0.8em;*/
+    font-family: OCRB, Courier New, SimSun, Century, monospace;
+    line-height: 1.0;
+  }
+
+  table {
+    width: 100%;
+    font-size: 80%;
+    border-top: thin solid #291873;
+    border-left: thin solid #291873;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  table.noborder {
+    margin: auto;
+    width: 85%;
+    border-style: none;
+    border-width: 0px;
+    border-right: solid #FFFFFF;
+    border-bottom: solid #FFFFFF;
+    border-spacing: 2px 10px; 
+    background-color: #efefef;
+  }
+
+  table.noborder tr { 
+  }
+
+  table.noborder td {
+    border-style: none;
+    border-width: 0px;
+    border-right: solid #FFFFFF;
+    border-bottom: solid #FFFFFF;
+    padding: 15px;
+  }     
+
+  table.tds {
+    margin: auto;
+    width: 55%;
+    border-style: none;
+    border-width: 0px;
+    border-right: solid #FFFFFF;
+    border-bottom: solid #FFFFFF;
+    border-spacing: 2px 10px; 
+    background-color: #efefef;
+  }
+
+  table.tds td {
+    border-style: none;
+    border-width: 0px;
+    border-right: solid #FFFFFF;
+    border-bottom: solid #FFFFFF;
+    padding: 10px;
+  }     
+
+  th, td {
+    border-right: thin solid #291873;
+    border-bottom: thin solid #291873;
+    font-size: 1.8em;
+    padding: 0 0.2em;
+    line-height: 1.2;
+  }
+
+  th { background-color: #E6E7F5 ; }
+
+  html>body th, html>body td { font-size: 1.2em; }
+
+  img           { border: 0; background-color: transparent; }
+  strong        { font-weight: bold; }
+  em            { color: #291873; font-style: italic; }
+  cite          { font-style: normal; }
+  abbr, acronym { border-bottom-color: silver; }
+
+  code   { font-family: monospace; }
+  kbd    {
+    margin: 0 0.1em;
+    border: thin solid gray;
+    background-color: #ccc;
+    color: #666;
+    font-family: Verdana, Arial,  sans-serif;
+    font-size: 1em;
+  }
+
+  a:link    { border-bottom: thin dashed; color: #291B66; text-decoration: none; }
+  a:visited { border-bottom: thin dashed; color: #291B66; text-decoration: none; }
+  a:hover   { color: #4A31BA; }
+  a:active  { color: #291B66; }
+
+  /* General Classes */
+  p.goto                { text-align: right; }
+  p.goto span           { color: white; }
+  p.flow                { text-align: center; }
+  a.longuri             { font-size: 0.8em; }
+  span.uppercase        { text-transform: uppercase; }
+
+  /* All Slides */
+  /* 
+     * A sidebar has the same color and the same rounded corners as the H1
+     * title, but on all sides. It is floated to the right.
+     */
+  div.sidebar
+  {
+    float: right;
+    clear: right;
+    margin: 0 -28px 0.5em 1em;  /* 28px = width of the shadow */
+    width: 30%;
+    color: white;
+    background: url(../Images/blueround-right.png) right center repeat-y;
+    padding: 40px 40px 0 20px;  /* Top 40px reserved for ::before */
+  }
+  div.sidebar:before
+  {
+    display: block;
+    line-height: 0;
+    margin: -40px -40px 0 -20px;        /* height 40px - margin-top 40px = 0 */
+    background: url(../Images/blueround-topright.png) right top no-repeat;
+    text-align: left;
+    content: url(../Images/blueround-topleft.png); /* height is 40px */
+  }
+  div.sidebar:after
+  {
+    display: block;
+    line-height: 0;
+    margin: 0 -40px 0 -20px;
+    background: url(../Images/blueround-bottomright.png) right bottom no-repeat;
+    text-align: left;
+    content: url(../Images/blueround-bottomleft.png);
+  }
+  div.sidebar > *:first-child
+  {
+    margin-top: -20px;
+  }    
+
+
+  /*
+     * pour centrer horizontalement et verticalement
+     */ 
+  div.vfill {
+    position:relative; 
+    top: 50%;
+    margin-top: -200px;
+  }
+
+  div.hfill {    
+    position:relative;
+    left: 50%; 
+    margin-left: -350px; /* moitié de la largeur */
+  }
+
+  div.hvfill {
+    position:relative; 
+    left: 50%; 
+    margin-left: -350px; /* moitié de la largeur */
+  }
+
+  /*
+     * A div.callout has a lighter background and also rounded corners.
+     */
+  
+  div.callout {
+    clear: both;
+    margin: 1em -20px 0 0;              /* 20px = width of the shadow */
+    max-width: 1600px;
+    color: #291873;
+    background: url(../Images/lightblueround-right.png) right center repeat-y;
+    padding: 40px 40px 0 20px;  /* Top 40px reserved for ::before */
+    font-style: normal;
+  }
+
+  div.callout:before {
+    display: block;
+    line-height: 0;
+    margin: -40px -40px 0 -20px;        /* Height + margin-top = 0 */
+    background: url(../Images/lightblueround-topright.png) right top no-repeat;
+    text-align: left;
+    content: url(../Images/lightblueround-topleft.png); /* Height is 40px */
+  }
+
+  div.callout:after {
+    display: block;
+    line-height: 0;
+    margin: 0 -40px 0 -20px;
+    background: url(../Images/lightblueround-bottomright.png) right bottom no-repeat;
+    text-align: left;
+    content: url(../Images/lightblueround-bottomleft.png);
+    clear: both;
+  }
+
+  div.callout > *:first-child, address > *:first-child
+  {
+    margin-top: -20px;
+  }
+
+  div.callout signature { 
+    text-align: right;
+    padding-left: 5em;
+  }
+
+  div.slide {
+    width: auto;
+    height: auto;
+    z-index: 20;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 2em 40px 0;
+    border: 0;
+    border-style: none;
+    display: block;
+    visibility: visible;
+    position: absolute;
+    border-style: none;
+  }
+
+
+  img#fullscreen { 
+    position: absolute;
+    top: 2.5em;
+    bottom: 40px;
+    left: 0em;
+    right: auto;
+    max-width: 100%;
+    max-height: 100%;
+    z-index: 300;
+    overflow: auto;
+    display: block;
+    visibility: visible;
+
+
+  }
+
+  /* logo */
+  div.logo {
+    background-color: transparent;
+    background-image: url(../Logos/logo.jpg) ;
+    background-repeat:  no-repeat;
+    background-attachment: fixed;
+    background-position: 95% 50px; 
+  }
+
+  div.slideLogo {
+    width: auto;
+    height: auto;
+    z-index: 20;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 2em 40px 0;
+    border: 0;
+    background: transparent;
+    background-color: transparent;
+    background-image: url(../Logos/logo.jpg) ;
+    background-repeat:  no-repeat;
+    background-attachment: fixed;
+    background-position: 95% 50px; 
+  }
+
+
+  /* Cover */
+  div#cover {
+    /*  width: 100%;
+       height: 100%;
+       background-color: white;
+       background: white;       */
+    color: black;
+    background-repeat:  no-repeat;
+    background-image: url(../Logos/lhc.gif);
+    background-attachment: fixed;       
+    background-position: 50% 55% ;
+  }
+
+
+
+  div#cover h1 {
+    margin: 1em 0 1.2em;
+    line-height: 1.0;
+    background-color: #8B8EBE;
+    color: white;
+    text-align: center;
+  }
+
+  div#cover p {
+    font-size: 1.0em;
+    font-weight: bold;
+    line-height: 1.0;
+    color: #291873;
+    text-align: center;
+  }
+
+  div#cover p#title 
+  {
+    font-size: 1.5em;
+    font-weight: bold;
+    line-height: 1.0;
+    color: #291873;
+    text-align: center;    
+  }
+
+  div#cover p#subtitle 
+  {
+    text-align: center;    
+  }
+
+  div#cover p#date {
+    margin: 2em 0 1.2em;;
+    font-size: 0.8em;
+    text-align: center;
+  }
+
+  div#cover p#author {
+    margin: 1em 0 1.2em;;
+    padding-top: 100px;
+    font-size: 0.8em;
+    text-align: center;
+  }
+
+  div#cover p#event {
+    margin: 2em 0 1.2em;;
+    font-size: 1em;
+    text-align: center;
+  }
+
+  h2#introduction { display: none; }
+
+  table.xhtml2modules th { width: 50%; }
+  table.css3modules th   { width: 50%; }
+
+  /* The Day of Web Standards */
+  div#tdows {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    color: black;
+  }
+  html>body div#tdows { width: auto; height: auto; }
+  div#tdows h3 {
+    margin-top: 0.2em;
+    border: 0;
+    background: none;
+    text-align: center;
+  }
+  div#tdows h3 a { 
+    display: block;
+    padding-bottom: 220px;
+    border: 0;
+    background: url(../Images/tdows.png) no-repeat center bottom;
+    text-decoration: none;
+  }
+  div#tdows p {
+    font-size: 1.5em;
+    text-align: center;
+  }
+
+  /* Thank You */
+
+  div#thanks, div#ad {
+    width: 100%;
+    height: 100%;
+    background: #291873;
+    color: white;
+    text-align: center;
+  }
+  html>body div#thanks { width: auto; height: auto; }
+  html>body div#thanks p { margin-top: 4em; }
+
+  div#thanks p, div#ad p {
+    margin: 2.5em 0 0.2em;
+    padding-left: 0;
+    border: 0;
+    font-size: 2em;
+    font-weight: bold;
+  }
+
+  div#ad { width: auto; height: auto; }
+  div#ad p { margin-top: 4em; font-size: 1.5em;}
+
+  /* Gestion des guillemets à la française */
+
+  /* Opera ne comprend toujours pas :lang() */
+  *[lang="en"] {
+    quotes:"\201C" "\201D" "\2018" "\2019";
+  }
+  *[lang="fr"] {
+    quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";
+  }
+
+  /* pour les navigateurs qui supportent le selecteur :lang() */
+  :lang(en) {
+    quotes:"\201C" "\201D" "\2018" "\2019";
+  }
+  :lang(fr) {
+    quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";
+  }
+
+  /* The following styles are applied to js/slidy.js  */
+
+  /*.hidden { display: none; visible: hidden }
+  */
+
+  div.toc {
+    position: absolute;
+    top: auto;
+    bottom: 4em;
+    left: 4em;
+    right: auto;
+    width: 60%;
+    max-width: 30em;
+    height: 30em;
+    border: solid thin black;
+    padding: 1em;
+    background: rgb(240,240,240);
+    color: black;
+    z-index: 300;
+    overflow: auto;
+    display: block;
+    visibility: visible;
+  }
+
+  .toolbar {
+    position: fixed;
+    z-index: 200;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0.5em;
+    text-align: right;
+    padding: 1em;
+    background-color: #291873;
+    color: white;
+    font-size: 0.8em;
+  }
+  .toolbar a:link    { color: white; }
+  .toolbar a:visited { color: #ddd; }
+  .toolbar a:active  { color: white; }
+  .toolbar a:hover   { color: white; }
+
+  .copyright { font-size: 0.8em; background: white;}
+  .footnote { font-size: smaller; padding-top: 3em; margin-left: 3em; }
+
+
+
+  /* table of content */
+
+  div.tocref {
+    width: 5em;
+    text-align: right;
+    float: left;
+    margin:0;
+  }
+
+  div.tocentry {
+    text-align: left;
+    margin-left: 5.7em;
+  }
+
+  div.tocsep {
+    clear: both;
+  }
+
+
 }
-
-ul li ul li ul li{
-  list-style-image: url(../Images/blue_square.gif) ;
-  font-size: 100%; 
-}
-
-ul li ul li ol li {
-  list-style-image: url(../Images/blue_square.gif) ;
-}               
-ol li  { margin: 0.3em 1em 0.3em 2em; }
-dl     { margin: 0.3em 2em 0.3em 1em; font-size: 1em; line-height: 1.15; }
-dl dt  { margin: 0.3em 2em 0.3em 1em; font-size: 95% }
-dl dd  { margin: 0 0 0 1em; font-size: 1em;}
-
-ul{
-  list-style-type: square;
-  font-size: 95%;
-  color: #000011
-}
-ul ul       {
-  list-style-type: disc;
-  font-size: 90%;
-  line-height: 1.05;
-  color: #111199
-}
-ul ul ul    {
-  list-style-type: circle;
-  font-size: 85%;
-  color: #9900DD
-}
-ul ul ul ul {
-  list-style-type: disc;
-  font-size: 80%;
-  color: #334455
-}
-
-ul ul, ul ol, ul dl, ul p, ol ul, ol ol, ol p,
-dl dl, dl ul, dl ol, dl p { margin-top: 0; margin-bottom: 0; font-size: 1em; }
-
-/* rectangular blue bullet + unfold/nofold/fold widget */
-
-/*
-   setting class="outline on ol or ul makes it behave as an
-   ouline list where blocklevel content in li elements is
-   hidden by default and can be expanded or collapsed with
-   mouse click. Set class="expand" on li to override default
-   */
-
-ol.outline li:hover { cursor: pointer }
-ol.outline li.nofold:hover { cursor: default }
-
-ul.outline li:hover { cursor: pointer }
-ul.outline li.nofold:hover { cursor: default }
-
-ol.outline { list-style:decimal; }
-ol.outline ol { list-style-type:lower-alpha }
-
-ol.outline li.nofold {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/nofold-dim.bmp) no-repeat 0px 0.5em;
-}
-ol.outline li.unfolded {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/fold-dim.gif) no-repeat 0px 0.5em;
-}
-ol.outline li.folded {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/unfold-dim.gif) no-repeat 0px 0.5em;
-}
-ol.outline li.unfolded:hover {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/fold.bmp) no-repeat 0px 0.5em;
-}
-ol.outline li.folded:hover {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/unfold.bmp) no-repeat 0px 0.5em;
-}
-
-ul.outline li.nofold {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/nofold-dim.bmp) no-repeat 5px 8px;
-}
-
-ul.outline li.unfolded {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/fold-dim.gif) no-repeat 5px 8px;
-}
-ul.outline li.folded {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/unfold-dim.gif) no-repeat 5px 8px;
-}
-
-ul.outline li.unfolded:hover {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/fold.bmp) no-repeat 5px 8px;
-}
-
-ul.outline li.folded:hover {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/unfold.bmp) no-repeat 5px 8px;
-}
-
-li ul.outline li.nofold {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/nofold-dim.bmp) no-repeat 5px 8px;
-}
-li ul.outline li.unfolded {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/fold-dim.gif) no-repeat 5px 8px;
-}
-li ul.outline li.folded {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/unfold-dim.gif) no-repeat 5px 8px;
-}
-li ul.outline li.unfolded:hover {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/fold.bmp) no-repeat 5px 8px;
-}
-li ul.outline li.folded:hover {
-  padding: 0 0 0 20px;
-  background: transparent url(../Images/unfold.bmp) no-repeat 5px 8px;
-}
-
-ul.outline li:hover { cursor: pointer }
-ul.outline li.nofold:hover { cursor: default }
-
-
-script  {
-  font-family: OCRB, Courier New, SimSun, Century, monospace;    
-  background-color: #efefef;
-  font-size: 1.2em;     
-}
-
-pre {
-  overflow: auto;
-  margin: 0.3em 0;
-  padding: 0.1em 0.5em;
-  background-color: #bfbfbf;
-  font-size: 0.8em;
-  font-family: OCRB, Courier New, SimSun, Century, monospace;    
-  line-height: 1.0;
-}
-pre * {   font-family: OCRB, Courier New, SimSun, Century, monospace; }
-pre span { display: none; }
-pre.output {
-  font-size: 0.6em;
-  background-color: #efefef;
-}
-pre.ex { 
-  margin-top: 0.5em;
-  padding-top: 0.9em;
-}
-
-dl dd pre   { font-size: 0.8em; }
-
-div.ex {
-  overflow: auto;
-  margin: 0.3em 0;
-  padding: 0.1em 0.5em;
-/*  background-color: #bfbfbf;*/
-  background: #ffccff;
-/*  font-size: 0.8em;*/
-  font-family: OCRB, Courier New, SimSun, Century, monospace;
-  line-height: 1.0;
-}
-
-table {
-  width: 100%;
-  font-size: 80%;
-  border-top: thin solid #291873;
-  border-left: thin solid #291873;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-table.noborder {
-  margin: auto;
-  width: 85%;
-  border-style: none;
-  border-width: 0px;
-  border-right: solid #FFFFFF;
-  border-bottom: solid #FFFFFF;
-  border-spacing: 2px 10px; 
-  background-color: #efefef;
-}
-
-table.noborder tr { 
-}
-
-table.noborder td {
-  border-style: none;
-  border-width: 0px;
-  border-right: solid #FFFFFF;
-  border-bottom: solid #FFFFFF;
-  padding: 15px;
-}       
-
-table.tds {
-  margin: auto;
-  width: 55%;
-  border-style: none;
-  border-width: 0px;
-  border-right: solid #FFFFFF;
-  border-bottom: solid #FFFFFF;
-  border-spacing: 2px 10px; 
-  background-color: #efefef;
-}
-
-table.tds td {
-  border-style: none;
-  border-width: 0px;
-  border-right: solid #FFFFFF;
-  border-bottom: solid #FFFFFF;
-  padding: 10px;
-}       
-
-th, td {
-  border-right: thin solid #291873;
-  border-bottom: thin solid #291873;
-  font-size: 1.8em;
-  padding: 0 0.2em;
-  line-height: 1.2;
-}
-
-th { background-color: #E6E7F5 ; }
-
-html>body th, html>body td { font-size: 1.2em; }
-
-img           { border: 0; background-color: transparent; }
-strong        { font-weight: bold; }
-em            { color: #291873; font-style: italic; }
-cite          { font-style: normal; }
-abbr, acronym { border-bottom-color: silver; }
-
-code   { font-family: monospace; }
-kbd    {
-  margin: 0 0.1em;
-  border: thin solid gray;
-  background-color: #ccc;
-  color: #666;
-  font-family: Verdana, Arial,  sans-serif;
-  font-size: 1em;
-}
-
-a:link    { border-bottom: thin dashed; color: #291B66; text-decoration: none; }
-a:visited { border-bottom: thin dashed; color: #291B66; text-decoration: none; }
-a:hover   { color: #4A31BA; }
-a:active  { color: #291B66; }
-
-/* General Classes */
-p.goto                { text-align: right; }
-p.goto span           { color: white; }
-p.flow                { text-align: center; }
-a.longuri             { font-size: 0.8em; }
-span.uppercase        { text-transform: uppercase; }
-
-/* All Slides */
-/* 
- * A sidebar has the same color and the same rounded corners as the H1
- * title, but on all sides. It is floated to the right.
- */
-    div.sidebar
-    {
-        float: right;
-        clear: right;
-        margin: 0 -28px 0.5em 1em;      /* 28px = width of the shadow */
-        width: 30%;
-        color: white;
-        background: url(../Images/blueround-right.png) right center repeat-y;
-        padding: 40px 40px 0 20px;      /* Top 40px reserved for ::before */
-    }
-    div.sidebar:before
-    {
-        display: block;
-        line-height: 0;
-        margin: -40px -40px 0 -20px;    /* height 40px - margin-top 40px = 0 */
-        background: url(../Images/blueround-topright.png) right top no-repeat;
-        text-align: left;
-        content: url(../Images/blueround-topleft.png); /* height is 40px */
-    }
-    div.sidebar:after
-    {
-        display: block;
-        line-height: 0;
-        margin: 0 -40px 0 -20px;
-        background: url(../Images/blueround-bottomright.png) right bottom no-repeat;
-        text-align: left;
-        content: url(../Images/blueround-bottomleft.png);
-    }
-    div.sidebar > *:first-child
-    {
-        margin-top: -20px;
-    }    
-
-
-/*
-   * pour centrer horizontalement et verticalement
-   */ 
-div.vfill {
-  position:relative; 
-  top: 50%;
-  margin-top: -200px;
-}
-
-div.hfill {    
-  position:relative;
-  left: 50%; 
-  margin-left: -350px; /* moitié de la largeur */
-}
-
-div.hvfill {
-  position:relative; 
-  left: 50%; 
-  margin-left: -350px; /* moitié de la largeur */
-}
-
-/*
- * A div.callout has a lighter background and also rounded corners.
- */
- 
-div.callout {
-  clear: both;
-  margin: 1em -20px 0 0;                /* 20px = width of the shadow */
-  max-width: 1600px;
-  color: #291873;
-  background: url(../Images/lightblueround-right.png) right center repeat-y;
-  padding: 40px 40px 0 20px;    /* Top 40px reserved for ::before */
-  font-style: normal;
-}
-
-div.callout:before {
-  display: block;
-  line-height: 0;
-  margin: -40px -40px 0 -20px;  /* Height + margin-top = 0 */
-  background: url(../Images/lightblueround-topright.png) right top no-repeat;
-  text-align: left;
-  content: url(../Images/lightblueround-topleft.png); /* Height is 40px */
-}
-
-div.callout:after {
-  display: block;
-  line-height: 0;
-  margin: 0 -40px 0 -20px;
-  background: url(../Images/lightblueround-bottomright.png) right bottom no-repeat;
-  text-align: left;
-  content: url(../Images/lightblueround-bottomleft.png);
-  clear: both;
-}
-
-div.callout > *:first-child, address > *:first-child
-{
-        margin-top: -20px;
-}
-
-div.callout signature { 
-  text-align: right;
-  padding-left: 5em;
-}
-
-div.slide {
-  width: auto;
-  height: auto;
-  z-index: 20;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0;
-  padding: 2em 40px 0;
-  border: 0;
-  border-style: none;
-  display: block;
-  visibility: visible;
-  position: absolute;
-}
-
-img#fullscreen { 
-  position: absolute;
-  top: 2.5em;
-  bottom: 40px;
-  left: 0em;
-  right: auto;
-  max-width: 100%;
-  max-height: 100%;
-  z-index: 300;
-  overflow: auto;
-  display: block;
-  visibility: visible;
-
-
- }
-
-/* logo */
-div.logo {
-  background-color: transparent;
-  background-image: url(../Logos/logo.jpg) ;
-  background-repeat:  no-repeat;
-  background-attachment: fixed;
-  background-position: 95% 50px; 
-}
-
-div.slideLogo {
-  width: auto;
-  height: auto;
-  z-index: 20;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0;
-  padding: 2em 40px 0;
-  border: 0;
-  background: transparent;
-  background-color: transparent;
-  background-image: url(../Logos/logo.jpg) ;
-  background-repeat:  no-repeat;
-  background-attachment: fixed;
-  background-position: 95% 50px; 
-}
-
-
-/* Cover */
-div#cover {
-/*  width: 100%;
-  height: 100%;
-  background-color: white;
-  background: white;    */
-  color: black;
-  background-repeat:  no-repeat;
-  background-image: url(../Logos/lhc.gif);
-  background-attachment: fixed; 
-  background-position: 50% 55% ;
-}
-
-
-
-div#cover h1 {
-  margin: 1em 0 1.2em;
-  line-height: 1.0;
-  background-color: #8B8EBE;
-  color: white;
-  text-align: center;
-}
-
-div#cover p {
-        font-size: 1.0em;
-        font-weight: bold;
-        line-height: 1.0;
-        color: #291873;
-        text-align: center;
-        }
-
-div#cover p#title 
-{
-        font-size: 1.5em;
-        font-weight: bold;
-        line-height: 1.0;
-        color: #291873;
-        text-align: center;    
-}
-
-div#cover p#subtitle 
-{
-  text-align: center;    
-}
-
-div#cover p#date {
-  margin: 2em 0 1.2em;;
-  font-size: 0.8em;
-  text-align: center;
-}
-
-div#cover p#author {
-  margin: 1em 0 1.2em;;
-  padding-top: 100px;
-  font-size: 0.8em;
-  text-align: center;
-}
-
-div#cover p#event {
-  margin: 2em 0 1.2em;;
-  font-size: 1em;
-  text-align: center;
-}
-
-/* Themes */
-h2#introduction { display: none; }
-
-div.themes {
-  width: auto;
-  height: auto;
-  background: #291873;
-  color: white;
-  text-align: center;
-}
-
-div.themes h2 {
-  margin: 1.8em 0 0.2em;
-  padding-left: 0;
-  border: 0;
-  font-size: 2.0em;
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-div.themes span { display: none; }
-
-table.xhtml2modules th { width: 50%; }
-table.css3modules th   { width: 50%; }
-
-/* The Day of Web Standards */
-div#tdows {
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  color: black;
-}
-html>body div#tdows { width: auto; height: auto; }
-div#tdows h3 {
-  margin-top: 0.2em;
-  border: 0;
-  background: none;
-  text-align: center;
-}
-div#tdows h3 a { 
-  display: block;
-  padding-bottom: 220px;
-  border: 0;
-  background: url(../Images/tdows.png) no-repeat center bottom;
-  text-decoration: none;
-}
-div#tdows p {
-  font-size: 1.5em;
-  text-align: center;
-}
-
-/* Thank You */
-
-div#thanks, div#ad {
-  width: 100%;
-  height: 100%;
-  background: #291873;
-  color: white;
-  text-align: center;
-}
-html>body div#thanks { width: auto; height: auto; }
-html>body div#thanks p { margin-top: 4em; }
-
-div#thanks p, div#ad p {
-  margin: 2.5em 0 0.2em;
-  padding-left: 0;
-  border: 0;
-  font-size: 2em;
-  font-weight: bold;
-}
-
-div#ad { width: auto; height: auto; }
-div#ad p { margin-top: 4em; font-size: 1.5em;}
-
-/* Gestion des guillemets à la française */
-
-/* Opera ne comprend toujours pas :lang() */
-*[lang="en"] {
-  quotes:"\201C" "\201D" "\2018" "\2019";
-}
-*[lang="fr"] {
-  quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";
-}
-
-/* pour les navigateurs qui supportent le selecteur :lang() */
-:lang(en) {
-  quotes:"\201C" "\201D" "\2018" "\2019";
-}
-:lang(fr) {
-  quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";
-}
-
-/* The following styles are applied to js/slidy.js  */
-
-/*.hidden { display: none; visible: hidden }
-*/
-
-div.toc {
-  position: absolute;
-  top: auto;
-  bottom: 4em;
-  left: 4em;
-  right: auto;
-  width: 60%;
-  max-width: 30em;
-  height: 30em;
-  border: solid thin black;
-  padding: 1em;
-  background: rgb(240,240,240);
-  color: black;
-  z-index: 300;
-  overflow: auto;
-  display: block;
-  visibility: visible;
-}
-
-.toolbar {
-  position: fixed;
-  z-index: 200;
-  top: auto;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 0.5em;
-  text-align: right;
-  padding: 1em;
-  background-color: #291873;
-  color: white;
-  font-size: 0.8em;
-}
-.toolbar a:link    { color: white; }
-.toolbar a:visited { color: #ddd; }
-.toolbar a:active  { color: white; }
-.toolbar a:hover   { color: white; }
-
-.copyright { font-size: 0.8em; background: white;}
-.footnote { font-size: smaller; padding-top: 3em; margin-left: 3em; }
-
-
-
-/* table of content */
-
-div.tocref {
-                width: 5em;
-                text-align: right;
-                float: left;
-                margin:0;
-}
-
-div.tocentry {
-                text-align: left;
-                margin-left: 5.7em;
-}
-
-div.tocsep {
-                clear: both;
-}
-