brownbag-crashlife-2012/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: #6d7581;
  22   background: white url("template/page-background.png") top left repeat-x;
  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   padding: 0 15px 0 0;
  39   z-index: 1;
  40 }
  41
  42 #headerlogo {
  43   position: relative;
  44   display: block;
  45   text-indent: -500px;
  46   font-size: 1px;
  47   overflow: hidden;
  48   height: 48px;
  49   width: 186px;
  50   background: url("template/firefox-title.png") 5px 3px no-repeat;
  51 }
  52
  53 #header-text {
  54   float: right;
  55   padding: 7px 20px;
  56   font-size: 24px;
  57   font-weight: bold;
  58   color: #C0C8CA;
  59 }
  60
  61 #header-text.neartime {
  62   color: #A0C8DA;
  63 }
  64
  65 #header-text.ontime {
  66   color: #80CC80;
  67 }
  68
  69 #header-text.overtime {
  70   color: #FF8080;
  71 }
  72
  73 #slidenav {
  74   padding: 4px 15px 10px 55px;
  75   font-size: 10px;
  76   color: #A0C8DA;
  77 }
  78
  79 #slidenav a:link,
  80 #slidenav a:visited {
  81   color: #6d7581;
  82 }
  83
  84 #slidenav a:hover,
  85 #slidenav a:active {
  86   color: #0000FF;
  87 }
  88
  89 #slidenav .nolink {
  90   color: #A0C8DA;
  91 }
  92
  93 #subheader-text {
  94   float: right;
  95   padding: 0 20px;
  96   color: #6d7581;
  97 }
  98
  99 article {
 100   position: absolute;
 101   width: 100%;
 102   /* header is 38px + 1px border, slidenav is 13px + 4px + 10px paddings,
 103      another 5px for safety */
 104   height: -moz-calc(100% - 70px);
 105   overflow: auto;
 106
 107   -moz-transition-property: -moz-transform, opacity;
 108   -moz-transition-duration: 3s;
 109   -moz-transition-timing-function: ease;
 110   -webkit-transition-property: -moz-transform, opacity;
 111   -webkit-transition-duration: 3s;
 112   -webkit-transition-timing-function: ease;
 113   -moz-transform-origin: center 5em;
 114
 115   opacity: 0;
 116 /*
 117   -moz-transform: translate(-100%, 0);
 118   -webkit-transform: translate(-100%, 0);
 119 */
 120 /*
 121   -moz-transform: scale(0.1) rotate(360deg);
 122   -webkit-transform: scale(0.1) rotate(360deg);
 123 */
 124   -moz-transform: scale(0.1) rotate(360deg) translate(-200%, 0);
 125   -webkit-transform: scale(0.1) rotate(360deg) translate(-100%, 0);
 126 }
 127
 128 article[aria-selected="true"] {
 129   opacity: 1;
 130   -moz-transform: scale(1) rotate(0deg) translate(0, 0);
 131   -webkit-transform: scale(1) rotate(0deg) translate(0, 0);
 132 }
 133
 134 article[aria-selected="true"] ~ article {
 135   opacity: 0;
 136 /*
 137   -moz-transform: translate(100%, 0);
 138   -webkit-transform: translate(100%, 0);
 139 */
 140 /*
 141   -moz-transform: scale(0.1) rotate(-360deg);
 142   -webkit-transform: scale(0.1) rotate(-360deg);
 143 */
 144   -moz-transform: scale(0.1) rotate(-360deg) translate(200%, 0);
 145   -webkit-transform: scale(0.1) rotate(-360deg) translate(100%, 0);
 146 }
 147
 148 /***** headers *****/
 149
 150 h1 {
 151   margin: 0 0 0.5em 0;
 152   font-size: 1.7em;
 153   font-weight: bold;
 154   color: #505050;
 155   text-align: center;
 156   text-shadow: #AAAA80 3px 3px 5px;
 157 }
 158
 159 h2 {
 160   margin: 0.5em 0;
 161   font-size: 1.3em;
 162   font-weight: bold;
 163   color: #505050;
 164   text-align: center;
 165   text-shadow: #AAAA80 2px 2px 3px;
 166 }
 167
 168 h3 {
 169   margin: 0.5em 0;
 170   font-size: 1.1em;
 171   font-weight: bold;
 172   color: #505050;
 173   text-align: center;
 174 }
 175
 176 h4 {
 177   margin: 0.5em 0;
 178   font-size: 1em;
 179   font-weight: bold;
 180   color: #505050;
 181   text-align: left;
 182 }
 183
 184 /***** boxes *****/
 185
 186 .simplebox {
 187   padding: 0.5em;
 188 }
 189
 190 .captionedbox {
 191   padding: 0px;
 192 }
 193
 194 .simplebox,
 195 .captionedbox {
 196   margin: 1em;
 197   border: 1px solid #A0C8DA;
 198   background: white url("template/page-background.png") top left repeat-x;
 199   border-radius: .5em;
 200   box-shadow: #6d7581 1px 1px 3px 2px;
 201 }
 202
 203 .simplebox:first-child,
 204 .captionedbox:first-child {
 205   margin-top: 2px;
 206 }
 207
 208 .simplebox:last-child,
 209 .captionedbox:last-child {
 210   margin-bottom: 3px;
 211 }
 212
 213 .captionedbox-content {
 214   margin: 0px;
 215   padding: 0.5em;
 216   border: 0px;
 217   border-top: 2px solid #A0C8DA;
 218   -moz-border-top-colors: #A0C8DA #6d7581;
 219   border-radius: 0 0 .5em .5em;
 220 }
 221
 222 .captionedbox-caption {
 223   margin: 0.5em;
 224   font-weight: bold;
 225   text-shadow: #AAAA80 1px 1px 2px;
 226 }
 227
 228 /***** misc formatting *****/
 229
 230 mark {
 231   font-weight: bold;
 232   color: #FF6600;
 233   background-color: transparent;
 234   text-shadow: #AAAA80 2px 2px 3px;
 235 }
 236
 237 .border {
 238   border: 1px solid #6d7581;
 239   padding: 0.5em;
 240 }
 241
 242 ul > li {
 243   margin: 0.5em 0;
 244 }
 245
 246 .cent {
 247   text-align: center;
 248 }
 249
 250 .topmargin {
 251   margin-top: 0.5em;
 252 }
 253
 254 .akey {
 255   text-decoration: underline;
 256 }
 257
 258 a:link, a:visited { color: #447bc4; text-decoration: none; }
 259 a:hover, a:active { color: #FF6600; text-decoration: underline; }
 260
 261 mark a:link, mark a:visited { color: #FF6600; }
 262 mark a:hover, mark a:active { color: #FF6600; }
 263
 264 /***** small stuff *****/
 265
 266 .small,
 267 .small {
 268   font-size: 0.75em;
 269 }
 270
 271 ul.small,
 272 .small ul {
 273   padding: 0px;
 274   border: 0px;
 275   margin: 0px 0px 0px 1em;
 276 }
 277
 278 ul.small > li
 279 .small ul > li {
 280   margin: 0px;
 281   padding: 0px;
 282   border: 0px;
 283 }
 284
 285 /***** specific slides *****/
 286