4700: Make filters box large enough to contain all filters.
[libguestfs-talks.git] / 2019-kvm-forum / style.css
1 /* Red Hat red is rgb(238,0,0). */
2
3 body {
4     background: url(redhat.png) no-repeat;
5     background-position: 98% 6px;
6     background-size: auto 48px;
7     /* font-size: 28pt; */ /* For max */
8     font-size: 20pt; /* For 1024x768 */
9     font-family: Red Hat Text, liberation, helvetica;
10     /* font-family: helvetica; */
11
12     /* Can be used to scale the whole document. */
13     /*transform: translate(-10%,-10%) scale(0.75,0.75);*/
14 }
15
16 body td, body th { /* why?? */
17     font-size: 24pt;
18     padding-bottom: 8px;
19 }
20
21 h1 {
22     color: rgb(238,0,0);
23     /*font-size: 48px;*/
24     font-size: 40px;
25     top: 8;
26     left: 0;
27     border-bottom: 2px solid rgb(238,0,0);
28 }
29
30 h2 {
31     color: rgb(238,0,0);
32     font-size: 32px;
33     font-style: italic;
34     border-bottom: 2px solid rgb(238,0,0);
35 }
36
37 b {
38     color: rgb(238,0,0);
39 }
40
41 /* Title page. */
42 div#titlepage {
43     margin-top: 100px;
44     width: 80%;
45     margin-left: 10%;
46 }
47
48 div#titlepage p.title {
49     color: rgb(238,0,0);
50     font-weight: bold;
51     font-size: 48px;
52     text-align: left;
53 }
54
55 div#titlepage p.author {
56     font-size: 36px;
57     text-align: left;
58 }
59
60 div#titlepage p.abstract {
61     font-size: 28px;
62     text-align: left;
63 }
64
65 /* Code */
66 pre.code {
67     margin-left: 1em;
68     background: #eee;
69 }
70
71 code {
72     color: rgb(238,0,0);
73 }
74
75 /* Bullet points */
76 li {
77     padding-bottom: 16px;
78 }
79
80 /* Plugins box. */
81 div.plugins {
82     background: #f8f8ff;
83     border: 1px solid rgb(238,0,0);
84     border-radius: 15px;
85     margin-left: auto;
86     margin-right: auto;
87     width: 800px;
88     height: 400px;
89     /* Position relative is needed so that items may be
90        positioned inside. */
91     position: relative;
92 }
93
94 div.plugins p#caption {
95     position: absolute;
96     bottom: -5px; right: 5px;
97     color: rgb(238,0,0);
98     text-align: right;
99     font-size: 16px;
100     font-weight: bold;
101 }
102
103 div.plugins ul {
104     position: absolute;
105     top: 10%;
106     width: 700px;
107     height: 380px;
108     column-count: 4;
109     list-style-type: none;
110     margin: 0;
111 }
112
113 div.plugins ul li {
114     padding: 0px;
115     margin: 5px;
116 }
117
118 div.plugins ul li.highlighted {
119     border: 1px solid rgb(238,0,0);
120     background: #fff;
121     padding-left: 10px;
122     color: rgb(238,0,0);
123     border-radius: 20px;
124     font-weight: bold;
125 }
126
127 /* Filters box. */
128 div.filters {
129     background: #f8fff8;
130     border: 1px solid rgb(238,0,0);
131     border-radius: 15px;
132     margin-left: auto;
133     margin-right: auto;
134     width: 800px;
135     height: 280px;
136     /* Position relative is needed so that items may be
137        positioned inside. */
138     position: relative;
139 }
140
141 div.filters p.filtercaption {
142     position: absolute;
143     bottom: -5px; right: 5px;
144     color: rgb(238,0,0);
145     text-align: right;
146     font-size: 16px;
147     font-weight: bold;
148 }
149
150 div.filters ul {
151     position: absolute;
152     top: 10%;
153     width: 700px;
154     height: 260px;
155     column-count: 4;
156     list-style-type: none;
157     margin: 0;
158 }
159
160 div.filters ul li {
161     padding: 0px;
162     margin: 5px;
163 }
164
165 div.filters ul li.highlighted {
166     border: 1px solid rgb(238,0,0);
167     background: #fff;
168     padding-left: 10px;
169     color: rgb(238,0,0);
170     border-radius: 20px;
171     font-weight: bold;
172 }
173
174 /* For images which must be centered on the page. */
175 div.allcenter {
176     display: flex;
177     justify-content: center;
178     align-items: center;
179     height: 50vw;
180 }
181
182 div.all-center img {
183 }
184
185 /* Outlined text. */
186 .outline {
187     text-shadow: 2px 2px 0 rgb(238,0,0),
188                  -2px 2px 0 rgb(238,0,0),
189                  2px -2px 0 rgb(238,0,0),
190                  -2px -2px 0 rgb(238,0,0),
191                  0px 2px 0 rgb(238,0,0),
192                  0px -2px 0 rgb(238,0,0),
193                  -2px 0px 0 rgb(238,0,0),
194                  2px 0px 0 rgb(238,0,0),
195                  4px 4px 0 rgb(238,0,0),
196                  -4px 4px 0 rgb(238,0,0),
197                  4px -4px 0 rgb(238,0,0),
198                  -4px -4px 0 rgb(238,0,0),
199
200                  0px 4px 0 rgb(238,0,0),
201                  0px -4px 0 rgb(238,0,0),
202                  -4px 0px 0 rgb(238,0,0),
203                  4px 0px 0 rgb(238,0,0),
204                  2px 4px 0 rgb(238,0,0),
205                  -2px 4px 0 rgb(238,0,0),
206                  2px -4px 0 rgb(238,0,0),
207                  -2px -4px 0 rgb(238,0,0),
208                  4px 2px 0 rgb(238,0,0),
209                  -4px 2px 0 rgb(238,0,0),
210                  4px -2px 0 rgb(238,0,0),
211                  -4px -2px 0 rgb(238,0,0),
212
213                  4px 4px 0 rgb(255,128,128),
214                  -4px 4px 0 rgb(255,128,128),
215                  4px -4px 0 rgb(255,128,128),
216                  -4px -4px 0 rgb(255,128,128),
217                  0px 4px 0 rgb(255,128,128),
218                  0px -4px 0 rgb(255,128,128),
219                  -4px 0px 0 rgb(255,128,128),
220                  4px 0px 0 rgb(255,128,128),
221                  8px 8px 0 rgb(255,128,128),
222                  -8px 8px 0 rgb(255,128,128),
223                  8px -8px 0 rgb(255,128,128),
224                  -8px -8px 0 rgb(255,128,128),
225
226                  0px 8px 0 rgb(255,128,128),
227                  0px -8px 0 rgb(255,128,128),
228                  -8px 0px 0 rgb(255,128,128),
229                  8px 0px 0 rgb(255,128,128),
230                  4px 8px 0 rgb(255,128,128),
231                  -4px 8px 0 rgb(255,128,128),
232                  4px -8px 0 rgb(255,128,128),
233                  -4px -8px 0 rgb(255,128,128),
234                  8px 4px 0 rgb(255,128,128),
235                  -8px 4px 0 rgb(255,128,128),
236                  8px -4px 0 rgb(255,128,128),
237                  -8px -4px 0 rgb(255,128,128);
238 }
239
240 /* Warning symbol. */
241 span.warning {
242     background-color: yellow;
243     font-weight: bold;
244 }
245
246 /* Attribution for artwork etc. */
247 p.attribution {
248     position: absolute;
249     right: 10px;
250     bottom: 10px;
251     text-align: right;
252     font-size: 10pt;
253 }