fosdem2011/slides.css

   1 /**************************
   2  * styles for talk slides *
   3  *    by Robert Kaiser    *
   4  *    <kairo@kairo.at>    *
   5  * (for Linuxwochen 2009) *
   6  **************************/
   7
   8
   9 /***** base style *****/
  10
  11 html {
  12   overflow: hidden; /* to make translations not paint scrollbars */
  13 }
  14
  15 body {
  16   margin: 0px;
  17   padding: 0px;
  18   border: 0px;
  19   font-family: Arial,Helvetica,sans-serif;
  20   font-size: 2em;
  21   color: white;
  22   background-color: black;
  23 }
  24
  25 ul {
  26   padding-left: 1.2em;
  27   margin-bottom: 0.5em;
  28 }
  29
  30 ul:first-child,
  31 ul:last-child {
  32   margin-top: 0;
  33 }
  34
  35 #header {
  36   height: 38px;
  37   position: relative;
  38   border-bottom: 1px solid #781412;
  39   background: #000000 url("template/header-background.png") top left repeat-x;
  40   padding: 0 15px 0 0;
  41   z-index: 1;
  42 }
  43
  44 #headerlogo {
  45   height: 38px;
  46   width: 186px;
  47 }
  48
  49 #header-text {
  50   float: right;
  51   padding: 7px 20px;
  52   font-size: 24px;
  53   font-weight: bold;
  54   color: #CCCCCC;
  55 }
  56
  57 #header-text.neartime {
  58   color: #CCCCFF;
  59 }
  60
  61 #header-text.ontime {
  62   color: #CCFFCC;
  63 }
  64
  65 #header-text.overtime {
  66   color: #FF8080;
  67 }
  68
  69 #slidenav {
  70   background: #f02925 url("template/breadcrumbs-background.png") bottom repeat-x;
  71   padding: 4px 15px 30px 55px;
  72   font-size: 10px;
  73   color: #FFCCCC;
  74 }
  75
  76 #slidenav a:link,
  77 #slidenav a:visited {
  78   color: #FFFFFF;
  79 }
  80
  81 #slidenav a:hover,
  82 #slidenav a:active {
  83   color: #FFCCCC;
  84 }
  85
  86 #slidenav .nolink {
  87   color: #AA8080;
  88 }
  89
  90 #subheader-text {
  91   float: right;
  92   padding: 0 20px;
  93 }
  94
  95 article {
  96   position: absolute;
  97   width: 100%;
  98   /* header is 38px + 1px border, slidenav is 13px + 4px + 30px paddings,
  99      another 5px for safety */
 100   height: -moz-calc(100% - 90px);
 101   overflow: auto;
 102
 103   -moz-transition-property: -moz-transform, opacity;
 104   -moz-transition-duration: 3s;
 105   -moz-transition-timing-function: ease;
 106   -webkit-transition-property: -moz-transform, opacity;
 107   -webkit-transition-duration: 3s;
 108   -webkit-transition-timing-function: ease;
 109   -moz-transform-origin: center 5em;
 110
 111   opacity: 0;
 112 /*
 113   -moz-transform: translate(-100%, 0);
 114   -webkit-transform: translate(-100%, 0);
 115 */
 116 /*
 117   -moz-transform: scale(0.1) rotate(360deg);
 118   -webkit-transform: scale(0.1) rotate(360deg);
 119 */
 120   -moz-transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 121   -webkit-transform: scale(0.1) rotate(360deg) translate(-100%, 0);
 122 }
 123
 124 article[aria-selected="true"] {
 125   opacity: 1;
 126   -moz-transform: scale(1) rotate(0deg) translate(0, 0);
 127   -webkit-transform: scale(1) rotate(0deg) translate(0, 0);
 128 }
 129
 130 article[aria-selected="true"] ~ article {
 131   opacity: 0;
 132 /*
 133   -moz-transform: translate(100%, 0);
 134   -webkit-transform: translate(100%, 0);
 135 */
 136 /*
 137   -moz-transform: scale(0.1) rotate(-360deg);
 138   -webkit-transform: scale(0.1) rotate(-360deg);
 139 */
 140   -moz-transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 141   -webkit-transform: scale(0.1) rotate(-360deg) translate(100%, 0);
 142 }
 143
 144 /***** headers *****/
 145
 146 h1 {
 147   margin: 0 0 0.5em 0;
 148   font-size: 1.7em;
 149   font-weight: bold;
 150   text-align: center;
 151   text-shadow: #AAAA80 3px 3px 5px;
 152 }
 153
 154 h2 {
 155   margin: 0.5em 0;
 156   font-size: 1.3em;
 157   font-weight: bold;
 158   text-align: center;
 159   text-shadow: #AAAA80 2px 2px 3px;
 160 }
 161
 162 h3 {
 163   margin: 0.5em 0;
 164   font-size: 1.1em;
 165   font-weight: bold;
 166   text-align: center;
 167 }
 168
 169 h4 {
 170   margin: 0.5em 0;
 171   font-size: 1em;
 172   font-weight: bold;
 173   text-align: left;
 174 }
 175
 176 /***** boxes *****/
 177
 178 .simplebox {
 179   padding: 0.5em;
 180 }
 181
 182 .captionedbox {
 183   padding: 0px;
 184 }
 185
 186 .simplebox,
 187 .captionedbox {
 188   margin: 1em;
 189   border: 1px solid #FF8080;
 190   background-color: #400000;
 191   -moz-border-radius: .5em;
 192   -moz-box-shadow: #AAAA80 1px 1px 3px 2px;
 193 }
 194
 195 .captionedbox-content {
 196   margin: 0px;
 197   padding: 0.5em;
 198   border: 0px;
 199   border-top: 2px solid #9FCBF7;
 200   -moz-border-top-colors: #FFFFFF #FF8080;
 201   -moz-border-radius: 0 0 .5em .5em;
 202 }
 203
 204 .captionedbox-caption {
 205   margin: 0.5em;
 206   font-weight: bold;
 207   text-shadow: #AAAA80 1px 1px 2px;
 208 }
 209
 210 /***** misc formatting *****/
 211
 212 mark {
 213   font-weight: bold;
 214   color: #FFEEAA;
 215   background-color: transparent;
 216   text-shadow: #CCCC00 2px 2px 3px;
 217 }
 218
 219 .border {
 220   border: 1px solid #FF8080;
 221   padding: 0.5em;
 222 }
 223
 224 ul > li {
 225   margin: 0.5em 0;
 226 }
 227
 228 .cent {
 229   text-align: center;
 230 }
 231
 232 .topmargin {
 233   margin-top: 0.5em;
 234 }
 235
 236 .akey {
 237   text-decoration: underline;
 238 }
 239
 240 a:link { color: #CCCCFF; text-decoration: none; }
 241 a:visited { color: #EECCFF; text-decoration: none; }
 242 a:hover, a:active { color: #FFCCCC; text-decoration: underline; }
 243
 244 mark a:link { color: #FFFFCC; }
 245 mark a:visited { color: #FFEE80; }
 246 mark a:hover, mark a:active { color: #FFFFDD; }
 247
 248 /***** small stuff *****/
 249
 250 .small,
 251 .small {
 252   font-size: 0.75em;
 253 }
 254
 255 ul.small,
 256 .small ul {
 257   padding: 0px;
 258   border: 0px;
 259   margin: 0px 0px 0px 1em;
 260 }
 261
 262 ul.small > li
 263 .small ul > li {
 264   margin: 0px;
 265   padding: 0px;
 266   border: 0px;
 267 }
 268
 269 /***** specific slides *****/
 270