Improving aesthetics of volunteer carousel item.
[libreplanet-static.git] / 2015 / assets / css / custom.css
CommitLineData
da24cbe6
DT
1body {
2 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
3 font-size: 14px;
4 line-height: 1.428571429;
5 color: #333333;
6}
7
4df3d3d6 8
9h2, h3 {
10 color: rgb(88, 208, 121);
11}
12
13h2 small, h2 .small,
14h3 small, h3 .small {
15 color: rgba(88, 208, 121, 0.6);
16}
17
18
da24cbe6
DT
19h3 {
20 font-size: 20px;
21}
22
23.lp-banner {
24 box-shadow: 0px 1px 5px rgba(255, 255, 255, 0.7);
25 margin-bottom: 20px;
26 text-shadow: 0px 1px 0px #ffffff;
27 background-image: url(/2014/assets/img/l-noise.png);
28}
29
30.lp-head img {
4c57fab0 31 margin: 0.5em 0 0.001em -1.5em;
da24cbe6
DT
32}
33
34.lp-head p {
4c57fab0 35 margin: 0.9em 0 0.001em -3.21em;
da24cbe6
DT
36}
37
38#lp-panel {
39 max-width: 32%;
40 margin-left: 0.3em;
41 float: right;
42}
43
44#lp-panel ul {
45 list-style: square;
46 padding-left: 0.4em;
47}
48
49#lp-panel li {
50 margin-bottom: 0.5em;
51}
52
a6b43cb0 53#lp-updates {
54 max-width: 35%;
55 margin-left: 0.3em;
56}
57
da24cbe6
DT
58@media (max-width:767px) {
59 .lp-head img {
60 margin: 1.5em auto 0.001em auto;
61 }
62 .lp-head p {
63 margin: 0.5em 0 0 0;
64 text-align: center;
65 }
66 #lp-panel {
67 max-width: 100%;
68 margin-left: 0;
69 float: none;
70 }
a6b43cb0 71 #lp-updates {
72 max-width: 100%;
73 margin-left: 0;
74 }
da24cbe6
DT
75}
76
77.lp-thumbnail {
78 float: right;
79 margin-left: 0.5em;
80}
81
82
83@media (max-width: 635px) {
84 .lp-thumbnail {
85 float: none;
86 margin-left: 0;
87 }
88}
89
90
91@media (min-width: 768px) and (max-width:991px) {
92 .lp-head img {
4c57fab0 93 margin-top: 1.0em;
da24cbe6
DT
94 }
95 .lp-head p {
4c57fab0 96 margin: 0.9em 0 0 -2.3em;
da24cbe6
DT
97 }
98}
99
100@media (min-width:1200px) {
101 .lp-head p {
4c57fab0 102 margin: 0.9em 0 0.001em -6.21em;
da24cbe6
DT
103 }
104}
105
106.lp-signup {
107 margin-right: 10px;
108 margin-left: 10px;
109}
110
111.lp-banner .container {
112 padding-right: 5px;
113 padding-left: 5px;
114 margin-right: auto;
115 margin-left: auto;
116}
117
118
119.btn-register-lp14 {
4c57fab0 120 margin-top: 0.5em;
da24cbe6
DT
121 margin-bottom: 0.3em;
122 color: #ffffff;
123 text-shadow: 0px 0px 0px #ffffff;
07756ed6
ZR
124 background-color: rgba(58, 208, 61, 0.6);
125 background-color: rgba(58, 208, 61, 0.6);
da24cbe6
DT
126}
127
128.btn-register-lp14:hover,
129.btn-register-lp14:focus,
130.btn-register-lp14:active,
131.btn-register-lp14.active,
132.open .dropdown-toggle.btn-register-lp14 {
133 color: #ffffff;
134 background-color: rgba(74, 161, 74, 0.9);
135 border-color: rgba(57, 132, 57, 0.2);
136}
137
138.btn-register-lp14:active,
139.btn-register-lp14.active,
140.open .dropdown-toggle.btn-register-lp14 {
141 background-image: none;
142}
143
144
145@media (min-width:1280px) {
146 .btn-block {
147 display: block;
148 margin-right:auto;
149 margin-left:auto;
150 width: 85%;
151 padding-right: 0;
152 padding-left: 0;
153 }
154}
155
156
157.fsf-donate-button {
158 margin-left: 24%;
159 margin-top: 5px;
160 margin-bottom: 10px;
161 width:56%;
162}
163
164@media (max-width:768px) {
165 .fsf-donate-button {
166 margin-left: 38%;
167 margin-top: 5px;
168 margin-bottom: 10px;
169 width:22%;
170 }
171}
172
173@media (min-width:320px) and (max-width:360px) {
174 .fsf-donate-button {
175 margin-left: 28%;
176 margin-top: 5px;
177 margin-bottom: 10px;
178 width:46%;
179 }
180}
181
182.page-header {
183 padding-bottom: 9px;
184 margin: 40px 0 20px;
185 border-bottom: none;
186}
187
188
189.form-control:-moz-placeholder {
190 color: #777777;
191}
192
193.form-control::-moz-placeholder {
194 color: #777777;
195}
196
197.form-control:-ms-input-placeholder {
198 color: #777777;
199}
200
201.form-control::-webkit-input-placeholder {
202 color: #777777;
203}
204
205.form-control {
206 display: block;
207 width: 100%;
208 height: 34px;
209 padding: 6px 12px;
210 font-size: 14px;
211 line-height: 1.428571429;
212 color: #555555;
213 vertical-align: middle;
214 background-color: rgba(250, 250, 250, 0.7);
215 border: 1px solid #cccccc;
216 border-radius: 4px;
217 -webkit-box-shadow: none;
218 box-shadow: none;
219 -webkit-transition: border-color ease-in-out 0.15s;
220 transition: border-color ease-in-out 0.15s;
221}
222
223.form-control:focus {
9967b03c 224 border-color: rgb(88, 208, 121);
da24cbe6
DT
225 outline: 0;
226 -webkit-box-shadow: none;
227 box-shadow: none;
228}
229
230.scholarship-input-annotation {
231 margin-bottom: -0.6em;
232}
233
234.lp-signup .form-group {
235 margin-bottom: 2px;
236}
237
238.lp-label-news {
239 display: inline-block;
240}
241
242.checkbox .help-block {
243 display: inline-block;
244 margin-top: 0;
245 margin-bottom: 10px;
246 color: #737373;
247}
248
249.form-group .lp-left-form-checkbox-text {
250 text-align:right;
251 font-weight: bold;
252}
253
254@media screen and (min-width: 320px) and (max-width: 768px){
255 .form-group .lp-left-form-checkbox-text {
256 text-align: left;
257 font-weight: bold;
258 }
259}
260
261.field-required {
262 color: rgba(128, 0, 0, 0.6);
263}
264
265.radio-inline,
266.checkbox-inline {
267 display: inline-block;
268 padding-left: 30px;
269 margin-bottom: 0;
270 font-weight: normal;
271 vertical-align: middle;
272 cursor: pointer;
273}
274
275.radio-clear-link {
276 display: inline-block;
277 padding-left: 5px;
278 margin-bottom: 0;
279 margin-top: 5px;
280 font-weight: normal;
281 vertical-align: middle;
282 cursor: pointer;
283}
284
285.btn-default {
286 color: #ffffff;
4df3d3d6 287 background-color: rgba(88, 208, 121, 0.8);
288 border-color: rgba(88, 208, 121, 0.5);
da24cbe6
DT
289}
290
291.btn-default:hover,
292.btn-default:focus,
293.btn-default:active,
294.btn-default.active,
295.open .dropdown-toggle.btn-default {
296 color: #ffffff;
4df3d3d6 297 background-color: rgba(88, 208, 121, 1.0);
298 border-color: rgba(88, 208, 121, 0.2);
da24cbe6
DT
299}
300
301@media (min-width:768px) {
302 .nav {
303 padding-left: 0;
304 margin-bottom: 0;
305 list-style: none;
306 padding-top: 1.0em;
307 }
308 .lp-home {
309 padding-top: 2.0em;
04915224 310 padding-bottom: 1.0em;
da24cbe6
DT
311 }
312 .nav-padding-top {
313 margin-top: 4.12em;
314 }
315}
316
317.nav > li {
318 position: relative;
319 display: block;
320 color: #ffffff;
321 text-shadow: 0px 0px 0px #dadada;
322 text-align: center;
323 margin-bottom: 0.4em;
324 border: none;
325 border-radius: 5px;
326}
327
328.nav > li > a {
329 position: relative;
330 display: block;
331 padding: 10px 15px;
332 background-color: rgba(145, 145, 145, 0.8);
333 transition: background-color 1s;
334}
335
336.nav > li.fsf-donate > a {
4df3d3d6 337 background-color: rgba(58, 208, 61, 0.6);
da24cbe6
DT
338 margin-top: 20px;
339}
340
341.nav > li > a:hover,
342.nav > li > a:focus {
343 text-decoration: none;
4df3d3d6 344 background-color: rgba(88, 208, 121, 1.0);
da24cbe6
DT
345}
346
347.nav-pills > li > a {
348 border-radius: 5px;
349 color: inherit;
350}
351
352.nav-pills > li.active > a,
353.nav-pills > li.active > a:hover,
354.nav-pills > li.active > a:focus {
355 color: #ffffff;
4df3d3d6 356 background-color: rgba(88, 208, 121, 1.0);
da24cbe6
DT
357}
358
359.btn-carousel {
360 font-size: 1.15em;
361 font-weight: 100;
362}
363
364.carousel-control .icon-prev,
365.carousel-control .icon-next,
366.carousel-control .glyphicon-chevron-left,
367.carousel-control .glyphicon-chevron-right {
368 position: absolute;
369 top: 50%;
370 left: 50%;
371 z-index: 5;
372 display: none;
373}
374
375.carousel-caption-tr {
376 position: absolute;
377 font-size: 1.1em;
378 top: 5%;
379 bottom: auto;
380 right: 1.5%;
381 left: 38%;
382 z-index: 10;
383 padding-top: 10px;
384 padding-bottom: 10px;
385 color: #ffffff;
386 text-align: center;
60678eee 387 background-color: rgba(0, 0, 0,0.6);
da24cbe6
DT
388 border-radius: 8px;
389}
390
da24cbe6
DT
391.carousel-caption-bl {
392 position: absolute;
393 font-size: 1.1em;
394 top: auto;
395 bottom: 5%;
396 right: 45%;
397 left: 2%;
398 z-index: 10;
399 padding-top: 10px;
400 padding-bottom: 10px;
401 padding-left: 10px;
402 padding-right: 10px;
403 color: #ffffff;
404 text-align: center;
60678eee 405 background-color: rgba(0, 0, 0,0.6);
da24cbe6
DT
406 border-radius: 8px;
407}
408
409.carousel-caption-tl {
410 position: absolute;
411 font-size: 1.1em;
412 top: 5%;
413 bottom: auto;
414 right: 34%;
415 left: 2%;
416 z-index: 10;
417 padding-top: 10px;
418 padding-bottom: 10px;
419 color: #ffffff;
420 text-align: center;
60678eee 421 background-color: rgba(0, 0, 0,0.6);
da24cbe6
DT
422 border-radius: 8px;
423}
424
e1cd6657 425.carousel-caption-center {
507b61ce
ZR
426 position: absolute;
427 font-size: 1.1em;
428 top: 50%;
429 bottom: auto;
eb47f340
ZR
430 left: 35%;
431 right: 65%;
507b61ce
ZR
432 z-index: 10;
433 padding-top: 10px;
434 padding-bottom: 10px;
435 color: #ffffff;
436 text-align: center;
437 background-color: rgba(0, 0, 0,0.6);
438 border-radius: 8px;
439}
440
da24cbe6
DT
441@media screen and (min-width: 1280px) {
442 .carousel-caption-tr {
443 padding-bottom: 10px;
444 margin-left: 65px;
445 margin-right: auto;
446 }
447
448 .carousel-caption-bl {
449 padding-bottom: 10px;
450 margin-left: auto;
451 margin-right: 65px;
452 }
453
454}
455
456@media screen and (min-width: 600px) and (max-width: 980px){
457 .btn-carousel {
458 font-size: 0.9em;
459 font-weight: 200;
460 }
461}
462
463@media screen and (min-width: 320px) and (max-width: 480px){
464 .carousel-caption-tl {
465 right: 2%;
466 }
467
468 .btn-carousel {
469 font-size: 0.85em;
470 font-weight: 200;
471 }
472 .carousel-caption-tr {
473 left: 1%;
474 }
475}
476
477a {
9967b03c 478 color: rgb(88, 208, 121);
da24cbe6
DT
479 text-decoration: none;
480}
481
482a:hover,
483a:focus {
4df3d3d6 484 color: rgb(38, 208, 61);
da24cbe6
DT
485 text-decoration: none;
486}
487
488hr {
489 margin-top: 20px;
490 margin-bottom: 20px;
491 border: 0;
492 border-top: 1px solid #bababa;
493}
494
495.margin-top {
496 margin-top: 22px;
497}
498
499.speaker {
500 vertical-align:top;
501}
502
503.session-speaker h3 {
504 margin-top: 0em;
505}
506
507.session-speaker {
508 margin-bottom: 1.8em;
509}
510
511.speaker-photo {
512 padding-top:23px;
513 padding-right:15px;
514}
515
516.lp-video {
517 width: 100%;
518}
519
520/* Footer - adapted from <http://getbootstrap.com/examples/sticky-footer/>
521-------------------------------------------------- */
522
523html,
524body {
525 height: 100%;
526}
527
528#wrapper {
529 min-height: 100%;
530 height: auto !important;
531 height: 100%;
532 margin: 0 auto -60px;
533 padding: 0 0 60px;
534}
535
536#footer {
537 height: auto;
538 border-top: 2px solid #dadada;
539 box-shadow: 0px 1px 9px rgba(255, 255, 255, 0.7);
540 background-color: rgb(255, 255, 255);
541 margin-top: 1.5em;
542}
543
544#footer .container p {
545 margin: 1.4em 0;
546}