source: presentations/trunk/Tools/Css/screen.css@ 288

@charset "UTF-8";



/* Definition for screen, projection media   */
@media projection, screen {
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;
    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;
  }
  
  div.incremental { 
    margin-left: 4em;
    position: relative;  
  }
}