fix typo in name
[slides.git] / devtreff201311 / slides.css
1 /**************************
2  * styles for talk slides *
3  *    by Robert Kaiser    *
4  *    <kairo@kairo.at>    *
5  *   (for FOSDEM 2013)    *
6  **************************/
7
8
9 /***** base style *****/
10
11 @font-face {
12   font-family: 'Open Sans';
13   src: url('template/OpenSans-Regular-webfont.woff');
14   font-weight: normal;
15   font-style: normal;
16 }
17
18 @font-face {
19   font-family: 'Open Sans';
20   src: url('template/OpenSans-Semibold-webfont.woff');
21   font-weight: bold;
22   font-style: normal;
23 }
24
25 @font-face {
26   font-family: 'Open Sans';
27   src: url('template/OpenSans-Italic-webfont.woff');
28   font-weight: normal;
29   font-style: italic;
30 }
31
32 html {
33   overflow: hidden; /* to make translations not paint scrollbars */
34   background: #f5f1e8 url("template/page-background.png") top left repeat;
35   height: 100%;
36 }
37
38 body {
39   margin: 0px;
40   padding: 0px;
41   border: 0px;
42   font-family: "Open Sans", sans-serif;
43   font-size: 2em;
44   color: #333333;
45   background: url("template/page-background-top.png") top left repeat-x;
46   height: 100%;
47 }
48
49 ul {
50   padding-left: 1.2em;
51   margin-bottom: 0.5em;
52 }
53
54 ul:first-child,
55 ul:last-child {
56   margin-top: 0;
57 }
58
59 #header {
60   height: 40px;
61   position: relative;
62   border-top: 1px solid white;
63 }
64
65 #headerlogo {
66   position: absolute;
67   display: block;
68   right: 20px;
69   top: 0;
70   text-indent: -2000px;
71   font-size: 1px;
72   overflow: hidden;
73   height: 41px;
74   width: 148px;
75   background: url("template/mozilla-tab.png") no-repeat;
76 }
77
78 #header-text {
79   position: relative;
80   top: 5px;
81   left: 25px;
82   width: calc(100% - 50px);
83   font-size: 20px;
84   font-weight: bold;
85   color: #808080;
86 }
87
88 #header-text.neartime {
89   color: #80AACC;
90 }
91
92 #header-text.ontime {
93   color: #80CC80;
94 }
95
96 #header-text.overtime {
97   color: #FF8080;
98 }
99
100 #subheader-text {
101   color: #808080;
102   position: relative;
103   top: 3px;
104   left: 25px;
105   width: calc(100% - 50px);
106   font-size: 10px;
107 }
108
109 #slidenav {
110   position: absolute;
111   right: 200px;
112   top: 15px;
113   font-size: 10px;
114 }
115
116 #slidenav a:link,
117 #slidenav a:visited {
118   color: #484848;
119 }
120
121 #slidenav a:hover,
122 #slidenav a:active {
123   color: #0073aa;
124 }
125
126 #slidenav .nolink {
127   color: #A0A0A0;
128 }
129
130 article {
131   position: absolute;
132   width: 100%;
133   /* header is 40px, 7px to have a bit of distance,
134    * 3px height-reducing on the bottom for safety */
135   top: 47px;
136   height: calc(100% - 50px);
137   overflow: auto;
138
139   transition-property: transform, opacity;
140   transition-duration: 3s;
141   transition-timing-function: ease;
142   transform-origin: center 5em;
143
144   opacity: 0;
145 /*
146   transform: translate(-100%, 0);
147 */
148 /*
149   transform: scale(0.1) rotate(360deg) translate(-200%, 0);
150 */
151   transform: scale(0.1) translate(-400%, 0);
152 }
153
154 article[aria-selected="true"] {
155   opacity: 1;
156   transform: scale(1) rotate(0deg) translate(0, 0);
157 }
158
159 article[aria-selected="true"] ~ article {
160   opacity: 0;
161 /*
162   transform: translate(100%, 0);
163 */
164 /*
165   transform: scale(0.1) rotate(-360deg) translate(200%, 0);
166 */
167   transform: scale(0.1) translate(400%, 0);
168 }
169
170 /***** headers *****/
171
172 h1, h2, h3, h4 {
173   margin: 0.5em 0;
174   font-weight: bold;
175   color: #484848;
176   text-align: center;
177 }
178
179 h1 {
180   margin-top: 0;
181   font-size: 1.7em;
182   text-shadow: #AAAA80 3px 3px 5px;
183 }
184
185 h2 {
186   font-size: 1.3em;
187   text-shadow: #AAAA80 2px 2px 3px;
188 }
189
190 h3 {
191   font-size: 1.1em;
192 }
193
194 h4 {
195   font-size: 1em;
196   text-align: left;
197 }
198
199 /***** boxes *****/
200
201 .simplebox {
202   padding: 0.5em;
203 }
204
205 .captionedbox {
206   padding: 0px;
207 }
208
209 .simplebox,
210 .captionedbox {
211   margin: 1em;
212   box-shadow: 0 0 0 1px #fff inset;
213   background: #fff;
214   background-image: radial-gradient(center 45px, ellipse farthest-corner, #f5f1e8 0, #fff 100%);
215   border-bottom: 1px solid #ddd;
216 }
217
218 .captionedbox-content {
219   margin: 0;
220   padding: 0.5em;
221   border: 0px;
222   border-top: 1px solid #d6d6d6;
223 }
224
225 .captionedbox-caption {
226   margin: 0;
227   padding: 0.5em;
228   font-weight: bold;
229   text-shadow: #AAAA80 1px 1px 2px;
230 }
231
232 /***** misc formatting *****/
233
234 mark {
235   font-weight: bold;
236   color: #FF6600;
237   background-color: transparent;
238   text-shadow: #AAAA80 2px 2px 3px;
239 }
240
241 .border {
242   border: 1px solid #6d7581;
243   padding: 0.5em;
244 }
245
246 .sshot {
247   box-shadow: #6d7581 1px 1px 3px 2px;
248 }
249
250 .slidepic {
251   float: right;
252   margin-left: .5em;
253 }
254
255 .ensurepicinbox {
256   clear: both;
257   font-size: 1px;
258   margin: 0;
259 }
260
261 .largetext {
262   font-size: 2em;
263 }
264
265 ul > li {
266   margin: 0.5em 0;
267 }
268
269 .columns2 {
270   -moz-columns: 2;
271 }
272
273 ul.nobullets > li {
274   list-style-type: none;
275 }
276
277 .cent {
278   text-align: center;
279 }
280
281 .topmargin {
282   margin-top: 0.5em;
283 }
284
285 .akey {
286   text-decoration: underline;
287 }
288
289 a:link, a:visited { color: #0096dd; text-decoration: none; }
290 a:hover, a:active { color: #FF6600; text-decoration: underline; }
291
292 mark a:link, mark a:visited { color: #FF6600; }
293 mark a:hover, mark a:active { color: #FF6600; }
294
295 /***** small stuff *****/
296
297 .small,
298 .small {
299   font-size: 0.75em;
300 }
301
302 ul.small,
303 .small ul {
304   padding: 0px;
305   border: 0px;
306   margin: 0px 0px 0px 1em;
307 }
308
309 ul.small > li
310 .small ul > li {
311   margin: 0px;
312   padding: 0px;
313   border: 0px;
314 }
315
316 /***** specific slides *****/
317