8dae779e |
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; |
fb170731 |
151 | text-shadow: #AAAA80 3px 3px 5px; |
8dae779e |
152 | } |
153 | |
154 | h2 { |
155 | margin: 0.5em 0; |
156 | font-size: 1.3em; |
157 | font-weight: bold; |
158 | text-align: center; |
fb170731 |
159 | text-shadow: #AAAA80 2px 2px 3px; |
8dae779e |
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; |
fb170731 |
192 | -moz-box-shadow: #AAAA80 1px 1px 3px 2px; |
8dae779e |
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; |
fb170731 |
207 | text-shadow: #AAAA80 1px 1px 2px; |
8dae779e |
208 | } |
209 | |
210 | /***** misc formatting *****/ |
211 | |
212 | mark { |
213 | font-weight: bold; |
fb170731 |
214 | color: #FFEEAA; |
8dae779e |
215 | background-color: transparent; |
fb170731 |
216 | text-shadow: #CCCC00 2px 2px 3px; |
8dae779e |
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 | |
fb170731 |
244 | mark a:link { color: #FFFFCC; } |
245 | mark a:visited { color: #FFEE80; } |
246 | mark a:hover, mark a:active { color: #FFFFDD; } |
247 | |
8dae779e |
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 | |