Ignore:
Timestamp:
Dec 18, 2008, 3:56:39 PM (17 years ago)
Author:
garnier
Message:

simplification des feuilles, amelioration du style print

File:
1 edited

Legend:

Unmodified
Added
Removed

  • presentations/trunk/Tools/Css/screen.css

    r277 r288  
    11@charset "UTF-8";
     2
     3
    24
    35/* Definition for screen, projection media   */
    46@media projection, screen {
    5   body {
    6     margin : 0;
    7     padding : 0;
    8     width : 100%;
    9     height : 100%;
    10     color : black;
    11     background : white url(../Images/header.gif) repeat-x left top;
    12     font-size : 20pt;
    13   }
    14   img#fullscreen {
    15     position : absolute;
    16     top : 2.5em;
    17     bottom : 40px;
    18     left : 0;
    19     right : auto;
    20     max-width : 100%;
    21     max-height : 100%;
    22     z-index : 300;
    23     overflow : auto;
    24     display : block;
    25     visibility : visible;
    26   }
    27   h1 {
    28     margin : 0 0 0.1em 1em;
    29     padding-left : 100px;
    30     padding-bottom : 0.3em;
    31     font-size : 1.5em;
    32     border-bottom : medium dotted #291873;
    33     background : url(../Images/h3_marker.gif) no-repeat 0 0.3em;
    34   }
     7body {
     8  background: white url(../Images/header.gif) repeat-x left top;
     9  margin: 0;
     10  padding: 0;
     11  width: 100%;
     12  height: 100%;
     13  color: black;
     14  font-family: Comic Sans MS, Verdana, Arial, sans-serif;
     15}
     16
     17
     18
     19blockquote {
     20  margin: 0.3em 0;
     21  padding: 0.8em ;
     22  background-color: #E6E7F5 ;
     23}
     24blockquote ul,
     25blockquote ol {
     26  margin-left: 0em;
     27}
     28
     29h1 {
     30  margin:  0em 0 0.1em;
     31  padding-left: 100px;
     32  padding-bottom: 0.3em;
     33  font-size: 1.5em;
     34  border-bottom: medium dotted #291873;
     35  background:  url(../Images/h3_marker.gif)  no-repeat 0px 0.3em;
     36}
     37
     38h2 {
     39  margin:  0.1em 0 0.5em 1em;
     40  padding-bottom: 0.3em;
     41  font-size: 1.5em;
     42  border-bottom: medium dotted #291873;
     43  text-align: center;
     44}
     45
     46h4 {
     47  margin: 0 0 0.5em;
     48  border-bottom: 2px dotted #291873;
     49  font-size: 1em;
     50}
     51
     52ul, ol {
     53  margin-top: 0.5em;
     54  margin-bottom: 0.3em;
     55  line-height: 1.15;
     56}
     57
     58  p  {
     59    margin: 0.5em 0;
     60    line-height: 1.15;
     61  }
     62  ul li  {
     63    list-style-type: none;
     64    margin: 0.3em 2em 0.3em 1em;
     65    font-size: 100%;
     66    list-style-image: url(../Images/bullet_blue.gif) ;
     67  }
     68
     69  ul li ul li {
     70    list-style-image: url(../Images/li_marker.gif);
     71    font-size: 95%;
     72  }
     73
     74  ul li ul li ul li{
     75    list-style-image: url(../Images/blue_square.gif) ;
     76    font-size: 100%;
     77  }
     78
     79  ul li ul li ol li {
     80    list-style-image: url(../Images/blue_square.gif) ;
     81  }             
     82  ol li  { margin: 0.3em 1em 0.3em 2em; }
     83  dl     { margin: 0.3em 2em 0.3em 1em; font-size: 1em; line-height: 1.15; }
     84  dl dt  { margin: 0.3em 2em 0.3em 1em; font-size: 95% }
     85  dl dd  { margin: 0 0 0 1em; font-size: 1em;}
     86
     87  ul{
     88    list-style-type: square;
     89    font-size: 95%;
     90    color: #000011
     91  }
     92  ul ul       {
     93    list-style-type: disc;
     94    font-size: 90%;
     95    line-height: 1.05;
     96    color: #111199
     97  }
     98  ul ul ul    {
     99    list-style-type: circle;
     100    font-size: 85%;
     101    color: #9900DD
     102  }
     103  ul ul ul ul {
     104    list-style-type: disc;
     105    font-size: 80%;
     106    color: #334455
     107  }
     108
     109  ul ul, ul ol, ul dl, ul p, ol ul, ol ol, ol p,
     110  dl dl, dl ul, dl ol, dl p { margin-top: 0; margin-bottom: 0; font-size: 1em; }
     111
     112  /* rectangular blue bullet + unfold/nofold/fold widget */
     113
     114  /*
     115     setting class="outline on ol or ul makes it behave as an
     116     ouline list where blocklevel content in li elements is
     117     hidden by default and can be expanded or collapsed with
     118     mouse click. Set class="expand" on li to override default
     119     */
     120
     121  ol.outline li:hover { cursor: pointer }
     122  ol.outline li.nofold:hover { cursor: default }
     123
     124  ul.outline li:hover { cursor: pointer }
     125  ul.outline li.nofold:hover { cursor: default }
     126
     127  ol.outline { list-style:decimal; }
     128  ol.outline ol { list-style-type:lower-alpha }
     129
     130  ol.outline li.nofold {
     131    padding: 0 0 0 20px;
     132    background: transparent url(../Images/nofold-dim.bmp) no-repeat 0px 0.5em;
     133  }
     134  ol.outline li.unfolded {
     135    padding: 0 0 0 20px;
     136    background: transparent url(../Images/fold-dim.gif) no-repeat 0px 0.5em;
     137  }
     138  ol.outline li.folded {
     139    padding: 0 0 0 20px;
     140    background: transparent url(../Images/unfold-dim.gif) no-repeat 0px 0.5em;
     141  }
     142  ol.outline li.unfolded:hover {
     143    padding: 0 0 0 20px;
     144    background: transparent url(../Images/fold.bmp) no-repeat 0px 0.5em;
     145  }
     146  ol.outline li.folded:hover {
     147    padding: 0 0 0 20px;
     148    background: transparent url(../Images/unfold.bmp) no-repeat 0px 0.5em;
     149  }
     150
     151  ul.outline li.nofold {
     152    padding: 0 0 0 20px;
     153    background: transparent url(../Images/nofold-dim.bmp) no-repeat 5px 8px;
     154  }
     155
     156  ul.outline li.unfolded {
     157    padding: 0 0 0 20px;
     158    background: transparent url(../Images/fold-dim.gif) no-repeat 5px 8px;
     159  }
     160  ul.outline li.folded {
     161    padding: 0 0 0 20px;
     162    background: transparent url(../Images/unfold-dim.gif) no-repeat 5px 8px;
     163  }
     164
     165  ul.outline li.unfolded:hover {
     166    padding: 0 0 0 20px;
     167    background: transparent url(../Images/fold.bmp) no-repeat 5px 8px;
     168  }
     169
     170  ul.outline li.folded:hover {
     171    padding: 0 0 0 20px;
     172    background: transparent url(../Images/unfold.bmp) no-repeat 5px 8px;
     173  }
     174
     175  li ul.outline li.nofold {
     176    padding: 0 0 0 20px;
     177    background: transparent url(../Images/nofold-dim.bmp) no-repeat 5px 8px;
     178  }
     179  li ul.outline li.unfolded {
     180    padding: 0 0 0 20px;
     181    background: transparent url(../Images/fold-dim.gif) no-repeat 5px 8px;
     182  }
     183  li ul.outline li.folded {
     184    padding: 0 0 0 20px;
     185    background: transparent url(../Images/unfold-dim.gif) no-repeat 5px 8px;
     186  }
     187  li ul.outline li.unfolded:hover {
     188    padding: 0 0 0 20px;
     189    background: transparent url(../Images/fold.bmp) no-repeat 5px 8px;
     190  }
     191  li ul.outline li.folded:hover {
     192    padding: 0 0 0 20px;
     193    background: transparent url(../Images/unfold.bmp) no-repeat 5px 8px;
     194  }
     195
     196  ul.outline li:hover { cursor: pointer }
     197  ul.outline li.nofold:hover { cursor: default }
     198
     199
     200  script  {
     201    font-family: OCRB, Courier New, SimSun, Century, monospace;   
     202    background-color: #efefef;
     203    font-size: 1.2em;   
     204  }
     205
     206  pre {
     207    overflow: auto;
     208    margin: 0.3em 0;
     209    padding: 0.1em 0.5em;
     210    background-color: #bfbfbf;
     211    font-size: 0.8em;
     212    font-family: OCRB, Courier New, SimSun, Century, monospace;   
     213    line-height: 1.0;
     214  }
     215  pre * {   font-family: OCRB, Courier New, SimSun, Century, monospace; }
     216  pre span { display: none; }
     217  pre.output {
     218    font-size: 0.6em;
     219    background-color: #efefef;
     220  }
     221  pre.ex {
     222    margin-top: 0.5em;
     223    padding-top: 0.9em;
     224  }
     225
     226  dl dd pre   { font-size: 0.8em; }
     227
     228  div.ex {
     229    overflow: auto;
     230    margin: 0.3em 0;
     231    padding: 0.1em 0.5em;
     232    /*  background-color: #bfbfbf;*/
     233    background: #ffccff;
     234    /*  font-size: 0.8em;*/
     235    font-family: OCRB, Courier New, SimSun, Century, monospace;
     236    line-height: 1.0;
     237  }
     238
     239  table {
     240    width: 100%;
     241    font-size: 80%;
     242    border-top: thin solid #291873;
     243    border-left: thin solid #291873;
     244    border-collapse: collapse;
     245    border-spacing: 0;
     246  }
     247
     248  table.noborder {
     249    margin: auto;
     250    width: 85%;
     251    border-style: none;
     252    border-width: 0px;
     253    border-right: solid #FFFFFF;
     254    border-bottom: solid #FFFFFF;
     255    border-spacing: 2px 10px;
     256    background-color: #efefef;
     257  }
     258
     259  table.noborder tr {
     260  }
     261
     262  table.noborder td {
     263    border-style: none;
     264    border-width: 0px;
     265    border-right: solid #FFFFFF;
     266    border-bottom: solid #FFFFFF;
     267    padding: 15px;
     268  }     
     269
     270  table.tds {
     271    margin: auto;
     272    width: 55%;
     273    border-style: none;
     274    border-width: 0px;
     275    border-right: solid #FFFFFF;
     276    border-bottom: solid #FFFFFF;
     277    border-spacing: 2px 10px;
     278    background-color: #efefef;
     279  }
     280
     281  table.tds td {
     282    border-style: none;
     283    border-width: 0px;
     284    border-right: solid #FFFFFF;
     285    border-bottom: solid #FFFFFF;
     286    padding: 10px;
     287  }     
     288
     289  th, td {
     290    border-right: thin solid #291873;
     291    border-bottom: thin solid #291873;
     292    font-size: 1.8em;
     293    padding: 0 0.2em;
     294    line-height: 1.2;
     295  }
     296
     297  th { background-color: #E6E7F5 ; }
     298
     299  html>body th, html>body td { font-size: 1.2em; }
     300
     301  img           { border: 0; background-color: transparent; }
     302  strong        { font-weight: bold; }
     303  em            { color: #291873; font-style: italic; }
     304  cite          { font-style: normal; }
     305  abbr, acronym { border-bottom-color: silver; }
     306
     307  code   { font-family: monospace; }
     308  kbd    {
     309    margin: 0 0.1em;
     310    border: thin solid gray;
     311    background-color: #ccc;
     312    color: #666;
     313    font-family: Verdana, Arial,  sans-serif;
     314    font-size: 1em;
     315  }
     316
     317  a:link    { border-bottom: thin dashed; color: #291B66; text-decoration: none; }
     318  a:visited { border-bottom: thin dashed; color: #291B66; text-decoration: none; }
     319  a:hover   { color: #4A31BA; }
     320  a:active  { color: #291B66; }
     321
     322  /* General Classes */
     323  p.goto                { text-align: right; }
     324  p.goto span           { color: white; }
     325  p.flow                { text-align: center; }
     326  a.longuri             { font-size: 0.8em; }
     327  span.uppercase        { text-transform: uppercase; }
     328
     329  /* All Slides */
     330  /*
     331     * A sidebar has the same color and the same rounded corners as the H1
     332     * title, but on all sides. It is floated to the right.
     333     */
     334  div.sidebar
     335  {
     336    float: right;
     337    clear: right;
     338    margin: 0 -28px 0.5em 1em;  /* 28px = width of the shadow */
     339    width: 30%;
     340    color: white;
     341    background: url(../Images/blueround-right.png) right center repeat-y;
     342    padding: 40px 40px 0 20px;  /* Top 40px reserved for ::before */
     343  }
     344  div.sidebar:before
     345  {
     346    display: block;
     347    line-height: 0;
     348    margin: -40px -40px 0 -20px;        /* height 40px - margin-top 40px = 0 */
     349    background: url(../Images/blueround-topright.png) right top no-repeat;
     350    text-align: left;
     351    content: url(../Images/blueround-topleft.png); /* height is 40px */
     352  }
     353  div.sidebar:after
     354  {
     355    display: block;
     356    line-height: 0;
     357    margin: 0 -40px 0 -20px;
     358    background: url(../Images/blueround-bottomright.png) right bottom no-repeat;
     359    text-align: left;
     360    content: url(../Images/blueround-bottomleft.png);
     361  }
     362  div.sidebar > *:first-child
     363  {
     364    margin-top: -20px;
     365  }   
     366
     367
     368  /*
     369     * pour centrer horizontalement et verticalement
     370     */
     371  div.vfill {
     372    position:relative;
     373    top: 50%;
     374    margin-top: -200px;
     375  }
     376
     377  div.hfill {   
     378    position:relative;
     379    left: 50%;
     380    margin-left: -350px; /* moitié de la largeur */
     381  }
     382
     383  div.hvfill {
     384    position:relative;
     385    left: 50%;
     386    margin-left: -350px; /* moitié de la largeur */
     387  }
     388
     389  /*
     390     * A div.callout has a lighter background and also rounded corners.
     391     */
     392 
     393  div.callout {
     394    clear: both;
     395    margin: 1em -20px 0 0;              /* 20px = width of the shadow */
     396    max-width: 1600px;
     397    color: #291873;
     398    background: url(../Images/lightblueround-right.png) right center repeat-y;
     399    padding: 40px 40px 0 20px;  /* Top 40px reserved for ::before */
     400    font-style: normal;
     401  }
     402
     403  div.callout:before {
     404    display: block;
     405    line-height: 0;
     406    margin: -40px -40px 0 -20px;        /* Height + margin-top = 0 */
     407    background: url(../Images/lightblueround-topright.png) right top no-repeat;
     408    text-align: left;
     409    content: url(../Images/lightblueround-topleft.png); /* Height is 40px */
     410  }
     411
     412  div.callout:after {
     413    display: block;
     414    line-height: 0;
     415    margin: 0 -40px 0 -20px;
     416    background: url(../Images/lightblueround-bottomright.png) right bottom no-repeat;
     417    text-align: left;
     418    content: url(../Images/lightblueround-bottomleft.png);
     419    clear: both;
     420  }
     421
     422  div.callout > *:first-child, address > *:first-child
     423  {
     424    margin-top: -20px;
     425  }
     426
     427  div.callout signature {
     428    text-align: right;
     429    padding-left: 5em;
     430  }
     431
    35432  div.slide {
    36     width : auto;
    37     height : auto;
    38     z-index : 20;
    39     top : 0;
    40     bottom : 0;
    41     left : 0;
    42     right : 0;
    43     margin : 0;
    44     padding : 2em 40px 0;
    45     border : 0;
    46   }
    47   a:link {
    48     border-bottom : thin dashed;
    49     color : #291b66;
    50     text-decoration : none;
    51   }
    52   a:visited {
    53     border-bottom : thin dashed;
    54     color : #291b66;
    55     text-decoration : none;
    56   }
    57   a:hover {
    58     color : #4a31ba;
    59   }
    60   a:active {
    61     color : #291b66;
    62   }
     433    width: auto;
     434    height: auto;
     435    z-index: 20;
     436    top: 0;
     437    bottom: 0;
     438    left: 0;
     439    right: 0;
     440    margin: 0;
     441    padding: 2em 40px 0;
     442    border: 0;
     443    border-style: none;
     444    display: block;
     445    visibility: visible;
     446    position: absolute;
     447    border-style: none;
     448  }
     449
     450
     451  img#fullscreen {
     452    position: absolute;
     453    top: 2.5em;
     454    bottom: 40px;
     455    left: 0em;
     456    right: auto;
     457    max-width: 100%;
     458    max-height: 100%;
     459    z-index: 300;
     460    overflow: auto;
     461    display: block;
     462    visibility: visible;
     463
     464
     465  }
     466
     467  /* logo */
     468  div.logo {
     469    background-color: transparent;
     470    background-image: url(../Logos/logo.jpg) ;
     471    background-repeat:  no-repeat;
     472    background-attachment: fixed;
     473    background-position: 95% 50px;
     474  }
     475
     476  div.slideLogo {
     477    width: auto;
     478    height: auto;
     479    z-index: 20;
     480    top: 0;
     481    bottom: 0;
     482    left: 0;
     483    right: 0;
     484    margin: 0;
     485    padding: 2em 40px 0;
     486    border: 0;
     487    background: transparent;
     488    background-color: transparent;
     489    background-image: url(../Logos/logo.jpg) ;
     490    background-repeat:  no-repeat;
     491    background-attachment: fixed;
     492    background-position: 95% 50px;
     493  }
     494
     495
     496  /* Cover */
    63497  div#cover {
    64     width : auto;
    65     height : auto;
    66     background-color : white;
    67     color : black;
    68     background-repeat : no-repeat;
    69     background-image : url(../Logos/logoLAL50ansgrand.jpg);
    70     background-attachment : fixed;
    71     background-position : 97% 90%;
     498    /*  width: 100%;
     499       height: 100%;
     500       background-color: white;
     501       background: white;       */
     502    color: black;
     503    background-repeat:  no-repeat;
     504    background-image: url(../Logos/lhc.gif);
     505    background-attachment: fixed;       
     506    background-position: 50% 55% ;
     507  }
     508
     509
     510
     511  div#cover h1 {
     512    margin: 1em 0 1.2em;
     513    line-height: 1.0;
     514    background-color: #8B8EBE;
     515    color: white;
     516    text-align: center;
     517  }
     518
     519  div#cover p {
     520    font-size: 1.0em;
     521    font-weight: bold;
     522    line-height: 1.0;
     523    color: #291873;
     524    text-align: center;
     525  }
     526
     527  div#cover p#title
     528  {
     529    font-size: 1.5em;
     530    font-weight: bold;
     531    line-height: 1.0;
     532    color: #291873;
     533    text-align: center;   
     534  }
     535
     536  div#cover p#subtitle
     537  {
     538    text-align: center;   
     539  }
     540
     541  div#cover p#date {
     542    margin: 2em 0 1.2em;;
     543    font-size: 0.8em;
     544    text-align: center;
     545  }
     546
     547  div#cover p#author {
     548    margin: 1em 0 1.2em;;
     549    padding-top: 100px;
     550    font-size: 0.8em;
     551    text-align: center;
     552  }
     553
     554  div#cover p#event {
     555    margin: 2em 0 1.2em;;
     556    font-size: 1em;
     557    text-align: center;
     558  }
     559
     560  h2#introduction { display: none; }
     561
     562  table.xhtml2modules th { width: 50%; }
     563  table.css3modules th   { width: 50%; }
     564
     565  /* The Day of Web Standards */
     566  div#tdows {
     567    width: 100%;
     568    height: 100%;
     569    background-color: white;
     570    color: black;
     571  }
     572  html>body div#tdows { width: auto; height: auto; }
     573  div#tdows h3 {
     574    margin-top: 0.2em;
     575    border: 0;
     576    background: none;
     577    text-align: center;
     578  }
     579  div#tdows h3 a {
     580    display: block;
     581    padding-bottom: 220px;
     582    border: 0;
     583    background: url(../Images/tdows.png) no-repeat center bottom;
     584    text-decoration: none;
     585  }
     586  div#tdows p {
     587    font-size: 1.5em;
     588    text-align: center;
     589  }
     590
     591  /* Thank You */
     592
     593  div#thanks, div#ad {
     594    width: 100%;
     595    height: 100%;
     596    background: #291873;
     597    color: white;
     598    text-align: center;
     599  }
     600  html>body div#thanks { width: auto; height: auto; }
     601  html>body div#thanks p { margin-top: 4em; }
     602
     603  div#thanks p, div#ad p {
     604    margin: 2.5em 0 0.2em;
     605    padding-left: 0;
     606    border: 0;
     607    font-size: 2em;
     608    font-weight: bold;
     609  }
     610
     611  div#ad { width: auto; height: auto; }
     612  div#ad p { margin-top: 4em; font-size: 1.5em;}
     613
     614  /* Gestion des guillemets à la française */
     615
     616  /* Opera ne comprend toujours pas :lang() */
     617  *[lang="en"] {
     618    quotes:"\201C" "\201D" "\2018" "\2019";
     619  }
     620  *[lang="fr"] {
     621    quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";
     622  }
     623
     624  /* pour les navigateurs qui supportent le selecteur :lang() */
     625  :lang(en) {
     626    quotes:"\201C" "\201D" "\2018" "\2019";
     627  }
     628  :lang(fr) {
     629    quotes:"\AB\A0" "\A0\BB" "\201C\A0" "\A0\201D";
     630  }
     631
     632  /* The following styles are applied to js/slidy.js  */
     633
     634  /*.hidden { display: none; visible: hidden }
     635  */
     636
     637  div.toc {
     638    position: absolute;
     639    top: auto;
     640    bottom: 4em;
     641    left: 4em;
     642    right: auto;
     643    width: 60%;
     644    max-width: 30em;
     645    height: 30em;
     646    border: solid thin black;
     647    padding: 1em;
     648    background: rgb(240,240,240);
     649    color: black;
     650    z-index: 300;
     651    overflow: auto;
     652    display: block;
     653    visibility: visible;
     654  }
     655
     656  .toolbar {
     657    position: fixed;
     658    z-index: 200;
     659    top: auto;
     660    bottom: 0;
     661    left: 0;
     662    right: 0;
     663    height: 0.5em;
     664    text-align: right;
     665    padding: 1em;
     666    background-color: #291873;
     667    color: white;
     668    font-size: 0.8em;
     669  }
     670  .toolbar a:link    { color: white; }
     671  .toolbar a:visited { color: #ddd; }
     672  .toolbar a:active  { color: white; }
     673  .toolbar a:hover   { color: white; }
     674
     675  .copyright { font-size: 0.8em; background: white;}
     676  .footnote { font-size: smaller; padding-top: 3em; margin-left: 3em; }
     677
     678
     679
     680  /* table of content */
     681
     682  div.tocref {
     683    width: 5em;
     684    text-align: right;
     685    float: left;
     686    margin:0;
     687  }
     688
     689  div.tocentry {
     690    text-align: left;
     691    margin-left: 5.7em;
     692  }
     693
     694  div.tocsep {
     695    clear: both;
     696  }
     697 
     698  div.incremental {
     699    margin-left: 4em;
     700    position: relative; 
    72701  }
    73702}
Note: See TracChangeset for help on using the changeset viewer.