github.com/olivere/camlistore@v0.0.0-20140121221811-1b7ac2da0199/website/talks/2011-05-07-Camlistore-Sao-Paolo/styles.css (about)

     1  /*
     2    Google I/O 2011 HTML slides template
     3  
     4    Authors: Luke Mahé (code)
     5             Marcin Wichary (code and design)
     6             Dominic Mazzoni (browser compatibility)
     7             Charles Chen (ChromeVox support)
     8  
     9    URL: http://code.google.com/p/io-2011-slides/
    10  */
    11  
    12  /* Framework */
    13  
    14  html {
    15    height: 100%;
    16  }
    17  
    18  body {
    19    margin: 0;
    20    padding: 0;
    21  
    22    display: block !important;
    23  
    24    height: 100%;
    25    min-height: 740px;
    26    
    27    overflow-x: hidden;
    28    overflow-y: auto;
    29  
    30    background: rgb(215, 215, 215);
    31    background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    32    background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    33    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    34    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
    35  
    36    -webkit-font-smoothing: antialiased;
    37  }
    38  
    39  .slides {
    40    width: 100%;
    41    height: 100%;
    42    left: 0;
    43    top: 0;
    44    
    45    position: absolute;
    46  
    47    -webkit-transform: translate3d(0, 0, 0);
    48  }
    49  
    50  .slides > article {
    51    display: block;
    52  
    53    position: absolute;
    54    overflow: hidden;
    55  
    56    width: 900px;
    57    height: 700px;
    58  
    59    left: 50%;
    60    top: 50%;
    61  
    62    margin-left: -450px;
    63    margin-top: -350px;
    64    
    65    padding: 40px 60px;
    66  
    67    box-sizing: border-box;
    68    -o-box-sizing: border-box;
    69    -moz-box-sizing: border-box;
    70    -webkit-box-sizing: border-box;
    71  
    72    border-radius: 10px;
    73    -o-border-radius: 10px;
    74    -moz-border-radius: 10px;
    75    -webkit-border-radius: 10px;
    76  
    77    background-color: white;
    78  
    79    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    80    border: 1px solid rgba(0, 0, 0, .3);
    81  
    82    transition: transform .3s ease-out;
    83    -o-transition: -o-transform .3s ease-out;
    84    -moz-transition: -moz-transform .3s ease-out;
    85    -webkit-transition: -webkit-transform .3s ease-out;
    86  }
    87  .slides.layout-widescreen > article {
    88    margin-left: -550px;
    89    width: 1100px;
    90  }
    91  .slides.layout-faux-widescreen > article {
    92    margin-left: -550px;
    93    width: 1100px;
    94    
    95    padding: 40px 160px;
    96  }
    97  
    98  .slides > article:not(.nobackground):not(.biglogo) {
    99    background: url(images/colorbar.png) 0 600px repeat-x;
   100  
   101    background-size: 100%, 225px;  
   102  
   103    background-color: white;  
   104  }
   105  .slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
   106  .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
   107    background-position-x: 0, 840px;
   108  }
   109  
   110  /* Clickable/tappable areas */
   111  
   112  .slide-area {
   113    z-index: 1000;
   114  
   115    position: absolute;
   116    left: 0;
   117    top: 0;
   118    width: 150px;
   119    height: 700px;  
   120  
   121    left: 50%;
   122    top: 50%;
   123  
   124    cursor: pointer;  
   125    margin-top: -350px;  
   126    
   127    tap-highlight-color: transparent;
   128    -o-tap-highlight-color: transparent;
   129    -moz-tap-highlight-color: transparent;
   130    -webkit-tap-highlight-color: transparent;
   131  }
   132  #prev-slide-area {
   133    margin-left: -550px;
   134  }
   135  #next-slide-area {
   136    margin-left: 400px;
   137  }
   138  .slides.layout-widescreen #prev-slide-area,
   139  .slides.layout-faux-widescreen #prev-slide-area {
   140    margin-left: -650px;
   141  }
   142  .slides.layout-widescreen #next-slide-area,
   143  .slides.layout-faux-widescreen #next-slide-area {
   144    margin-left: 500px;
   145  }
   146  
   147  /* Slide styles */
   148  
   149  article.biglogo {
   150    background: white url(images/googleio-logo.png) 50% 50% no-repeat;
   151  
   152    background-size: 600px;
   153  }
   154  
   155  /* Slides */
   156  
   157  .slides > article {
   158    display: none;
   159  }
   160  .slides > article.far-past {
   161    display: block;
   162    transform: translate(-2040px);
   163    -o-transform: translate(-2040px);
   164    -moz-transform: translate(-2040px);
   165    -webkit-transform: translate3d(-2040px, 0, 0);
   166  }
   167  .slides > article.past {
   168    display: block;
   169    transform: translate(-1020px);
   170    -o-transform: translate(-1020px);
   171    -moz-transform: translate(-1020px);
   172    -webkit-transform: translate3d(-1020px, 0, 0);
   173  }
   174  .slides > article.current {
   175    display: block;
   176    transform: translate(0);
   177    -o-transform: translate(0);
   178    -moz-transform: translate(0);
   179    -webkit-transform: translate3d(0, 0, 0);
   180  }
   181  .slides > article.next {
   182    display: block;
   183    transform: translate(1020px);
   184    -o-transform: translate(1020px);
   185    -moz-transform: translate(1020px);
   186    -webkit-transform: translate3d(1020px, 0, 0);
   187  }
   188  .slides > article.far-next {
   189    display: block;
   190    transform: translate(2040px);
   191    -o-transform: translate(2040px);
   192    -moz-transform: translate(2040px);
   193    -webkit-transform: translate3d(2040px, 0, 0);
   194  }
   195  
   196  .slides.layout-widescreen > article.far-past,
   197  .slides.layout-faux-widescreen > article.far-past {
   198    display: block;
   199    transform: translate(-2260px);
   200    -o-transform: translate(-2260px);
   201    -moz-transform: translate(-2260px);
   202    -webkit-transform: translate3d(-2260px, 0, 0);
   203  }
   204  .slides.layout-widescreen > article.past,
   205  .slides.layout-faux-widescreen > article.past {
   206    display: block;
   207    transform: translate(-1130px);
   208    -o-transform: translate(-1130px);
   209    -moz-transform: translate(-1130px);
   210    -webkit-transform: translate3d(-1130px, 0, 0);
   211  }
   212  .slides.layout-widescreen > article.current,
   213  .slides.layout-faux-widescreen > article.current {
   214    display: block;
   215    transform: translate(0);
   216    -o-transform: translate(0);
   217    -moz-transform: translate(0);
   218    -webkit-transform: translate3d(0, 0, 0);
   219  }
   220  .slides.layout-widescreen > article.next,
   221  .slides.layout-faux-widescreen > article.next {
   222    display: block;
   223    transform: translate(1130px);
   224    -o-transform: translate(1130px);
   225    -moz-transform: translate(1130px);
   226    -webkit-transform: translate3d(1130px, 0, 0);
   227  }
   228  .slides.layout-widescreen > article.far-next,
   229  .slides.layout-faux-widescreen > article.far-next {
   230    display: block;
   231    transform: translate(2260px);
   232    -o-transform: translate(2260px);
   233    -moz-transform: translate(2260px);
   234    -webkit-transform: translate3d(2260px, 0, 0);
   235  }
   236  
   237  /* Styles for slides */
   238  
   239  .slides > article {
   240    font-family: 'Open Sans', Arial, sans-serif;
   241  
   242    color: rgb(102, 102, 102);
   243    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
   244  
   245    font-size: 30px;
   246    line-height: 36px;
   247  
   248    letter-spacing: -1px;
   249  }
   250  
   251  b {
   252    font-weight: 600;
   253  }
   254  
   255  .blue {
   256    color: rgb(0, 102, 204);
   257  }
   258  .yellow {
   259    color: rgb(255, 211, 25);
   260  }
   261  .green {
   262    color: rgb(0, 138, 53);
   263  }
   264  .red {
   265    color: rgb(255, 0, 0);
   266  }
   267  .black {
   268    color: black;
   269  }
   270  .white {
   271    color: white;
   272  }
   273  
   274  a {
   275    color: rgb(0, 102, 204);
   276  }
   277  a:visited {
   278    color: rgba(0, 102, 204, .75);
   279  }
   280  a:hover {
   281    color: black;
   282  }
   283  
   284  p {
   285    margin: 0;
   286    padding: 0;
   287  
   288    margin-top: 20px;
   289  }
   290  p:first-child {
   291    margin-top: 0;
   292  }
   293  
   294  h1 {
   295    font-size: 60px;
   296    line-height: 60px;
   297  
   298    padding: 0;
   299    margin: 0;
   300    margin-top: 200px;
   301    padding-right: 40px;
   302  
   303    font-weight: 600;
   304  
   305    letter-spacing: -3px;
   306  
   307    color: rgb(51, 51, 51);
   308  }
   309  
   310  h2 {
   311    font-size: 45px;
   312    line-height: 45px;
   313  
   314    position: absolute;
   315    bottom: 150px;
   316  
   317    padding: 0;
   318    margin: 0;
   319    padding-right: 40px;
   320  
   321    font-weight: 600;
   322  
   323    letter-spacing: -2px;
   324  
   325    color: rgb(51, 51, 51);
   326  }
   327  
   328  h3 {
   329    font-size: 30px;
   330    line-height: 36px;
   331  
   332    padding: 0;
   333    margin: 0;
   334    padding-right: 40px;
   335  
   336    font-weight: 600;
   337  
   338    letter-spacing: -1px;
   339  
   340    color: rgb(51, 51, 51);
   341  }
   342  
   343  article.fill h3 {
   344    background: rgba(255, 255, 255, .75);
   345    padding-top: .2em;
   346    padding-bottom: .3em;
   347    margin-top: -.2em;
   348    margin-left: -60px;
   349    padding-left: 60px;
   350    margin-right: -60px;
   351    padding-right: 60px;
   352  }
   353  
   354  ul {
   355    list-style: none;
   356    margin: 0;
   357    padding: 0;
   358  
   359    margin-top: 40px;
   360  
   361    margin-left: .75em;
   362  }
   363  ul:first-child {
   364    margin-top: 0;
   365  }
   366  ul ul {
   367    margin-top: .5em;
   368  }
   369  li {
   370    padding: 0;
   371    margin: 0;
   372  
   373    margin-bottom: .5em;
   374  }
   375  li::before {
   376    content: '·';
   377  
   378    width: .75em;
   379    margin-left: -.75em;
   380  
   381    position: absolute;
   382  }
   383  
   384  pre {
   385    font-family: 'Droid Sans Mono', 'Courier New', monospace;
   386  
   387    font-size: 20px;
   388    line-height: 28px;
   389    padding: 5px 10px;
   390    
   391    letter-spacing: -1px;
   392  
   393    margin-top: 40px;
   394    margin-bottom: 40px;
   395  
   396    color: black;
   397    background: rgb(240, 240, 240);
   398    border: 1px solid rgb(224, 224, 224);
   399    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);
   400    
   401    overflow: hidden;
   402  }
   403  
   404  code {
   405    font-size: 95%;
   406    font-family: 'Droid Sans Mono', 'Courier New', monospace;
   407  
   408    color: black;
   409  }
   410  
   411  iframe {
   412    width: 100%;
   413  
   414    height: 620px;
   415  
   416    background: white;
   417    border: 1px solid rgb(192, 192, 192);
   418    margin: -1px;
   419    /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
   420  }
   421  
   422  h3 + iframe {
   423    margin-top: 40px;
   424    height: 540px;
   425  }
   426  
   427  article.fill iframe {
   428    position: absolute;
   429    left: 0;
   430    top: 0;
   431    width: 100%;
   432    height: 100%;
   433  
   434    border: 0;
   435    margin: 0;
   436  
   437    border-radius: 10px;
   438    -o-border-radius: 10px;
   439    -moz-border-radius: 10px;
   440    -webkit-border-radius: 10px;
   441  
   442    z-index: -1;
   443  }
   444  
   445  article.fill img {
   446    position: absolute;
   447    left: 0;
   448    top: 0;
   449    min-width: 100%;
   450    min-height: 100%;
   451  
   452    border-radius: 10px;
   453    -o-border-radius: 10px;
   454    -moz-border-radius: 10px;
   455    -webkit-border-radius: 10px;
   456  
   457    z-index: -1;
   458  }
   459  img.centered {
   460    margin: 0 auto;
   461    display: block;
   462  }
   463  
   464  table {
   465    width: 100%;
   466    border-collapse: collapse;
   467    margin-top: 40px;
   468  }
   469  th {
   470    font-weight: 600;
   471    text-align: left;
   472  }
   473  td,
   474  th {
   475    border: 1px solid rgb(224, 224, 224);
   476    padding: 5px 10px;
   477    vertical-align: top;
   478  }
   479  
   480  .source {
   481    position: absolute;
   482    left: 60px;
   483    top: 644px;
   484    padding-right: 175px;
   485    
   486    font-size: 15px;
   487    letter-spacing: 0;  
   488    line-height: 18px;
   489  }
   490  
   491  q {
   492    display: block;
   493    font-size: 60px;
   494    line-height: 72px;
   495    
   496    margin-left: 20px;
   497    
   498    margin-top: 100px;
   499    margin-right: 150px;    
   500  }
   501  q::before {
   502    content: '“';
   503    
   504    position: absolute;
   505    display: inline-block;
   506    margin-left: -2.1em;
   507    width: 2em;
   508    text-align: right;
   509    
   510    font-size: 90px;
   511    color: rgb(192, 192, 192);
   512  }
   513  q::after {
   514    content: '”';
   515  
   516    position: absolute;  
   517    margin-left: .1em;
   518  
   519    font-size: 90px;
   520    color: rgb(192, 192, 192);  
   521  }
   522  div.author {
   523    text-align: right;  
   524    font-size: 40px;
   525    
   526    margin-top: 20px;
   527    margin-right: 150px;    
   528  }
   529  div.author::before {
   530    content: '—';
   531  }
   532  
   533  /* Size variants */
   534  
   535  article.smaller p,
   536  article.smaller ul {
   537    font-size: 20px;
   538    line-height: 24px;
   539    letter-spacing: 0;
   540  }
   541  article.smaller table {
   542    font-size: 20px;
   543    line-height: 24px;
   544    letter-spacing: 0;
   545  }
   546  article.smaller pre {
   547    font-size: 15px;
   548    line-height: 20px;
   549    letter-spacing: 0;
   550  }
   551  article.smaller q {
   552    font-size: 40px;
   553    line-height: 48px;
   554  }
   555  article.smaller q::before,
   556  article.smaller q::after {
   557    font-size: 60px;
   558  }
   559  
   560  /* Builds */
   561  
   562  .build > * {
   563    transition: opacity 0.5s ease-in-out 0.2s;
   564    -o-transition: opacity 0.5s ease-in-out 0.2s;
   565    -moz-transition: opacity 0.5s ease-in-out 0.2s;
   566    -webkit-transition: opacity 0.5s ease-in-out 0.2s;
   567  }
   568  
   569  .to-build {
   570    opacity: 0;
   571  }
   572  
   573  /* Pretty print */
   574  
   575  .prettyprint .str, /* string content */
   576  .prettyprint .atv { /* a markup attribute value */
   577    color: rgb(0, 138, 53); 
   578  }  
   579  .prettyprint .kwd, /* a keyword */
   580  .prettyprint .tag { /* a markup tag name */
   581    color: rgb(0, 102, 204);
   582  }
   583  .prettyprint .com { /* a comment */
   584    color: rgb(127, 127, 127); 
   585    font-style: italic; 
   586  }  
   587  .prettyprint .lit { /* a literal value */
   588    color: rgb(127, 0, 0);
   589  }  
   590  .prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */
   591  .prettyprint .opn, 
   592  .prettyprint .clo { 
   593    color: rgb(127, 127, 127); 
   594  }
   595  .prettyprint .typ, /* a type name */
   596  .prettyprint .atn, /* a markup attribute name */ 
   597  .prettyprint .dec, 
   598  .prettyprint .var { /* a declaration; a variable name */
   599    color: rgb(127, 0, 127);
   600  }