wrapped css elements in "@media screen {...}"
[ryf-theme.git] / css / style.css
CommitLineData
1e7a45c4
VSB
1/**
2 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
3 * your custom CSS modifications here.
4 */
5
5b916836
VSB
6/* Lato font */
7
8@font-face {
9 font-family: "Lato";
90484a67 10 src: url("../fonts/Lato-Regular.ttf") format('truetype');
5b916836
VSB
11 font-weight: 400;
12 font-style: normal;
13}
14
15@font-face {
16 font-family: "Lato";
90484a67 17 src: url('../fonts/Lato-RegularItalic.ttf') format('truetype');
5b916836
VSB
18 font-weight: 400;
19 font-style: italic;
20}
21
22@font-face {
23 font-family: "Lato";
90484a67 24 src: url('../fonts/Lato-Bold.ttf') format('truetype');
5b916836
VSB
25 font-weight: 700;
26 font-style: normal;
27}
28
29
30/* Universal */
31
a48bd8b4
AE
32@media screen {
33
34 body {
35 font-family: "Lato", Helvetica, Arial, sans-serif;
36 margin: 0;
37 min-width: 320px;
38 }
39
40 a { transition: 0.3s; }
1e7a45c4 41
a48bd8b4 42 section { position: relative; }
b4ed810a 43
a48bd8b4 44}
bbb30910
AE
45
46/* etcetera */
47
a48bd8b4
AE
48@media screen {
49
50 .visually-hidden.focusable:focus {
51 position: absolute !important;
52 background: #000;
53 color: #FFF;
54 padding: 0.5em;
55 z-index: 9999;
56 }
57
58 .main-container { min-height: 50vh; }
59
60 h2.block-title {
61 background: #337AB7;
26f9e62d
VSB
62 color: #FFF;
63 padding: 0.5em;
a48bd8b4 64 }
092ce192 65
bbb30910 66
aca4887b 67
a48bd8b4
AE
68 h2.block-title a:visited,
69 h2.block-title a:focus,
70 h2.block-title a:active,
71 h2.block-title a {
72 color: #FFF;
73 }
aca4887b 74
a48bd8b4
AE
75 h2.block-title a:hover {
76 color: #FFF;
77 }
9493fc8b 78
a48bd8b4
AE
79 .feed-icons a {
80 background: url('../images/rss.svg') top left no-repeat;
81 background-size: contain;
82 height: 20px;
83 overflow: hidden;
84 display: block;
85 text-indent: 25px;
86 font-size: 1em;
87 width: fit-content;
88 margin-top: 1em;
89 float: right;
90 }
9493fc8b 91
a48bd8b4
AE
92 .view-display-id-news_page .feed-icons a {
93 margin-top: -30px;
94 }
3cc6e9f4 95
a48bd8b4
AE
96 .more-link {
97 border: 1px solid #ddd;
98 border-radius: .5em;
99 padding: .5em;
100 text-align: center;
101 width: 50%;
102 margin: 0 auto;
103 font-weight: bold;
104 margin-top: 2em;
105 }
3cc6e9f4 106
a48bd8b4
AE
107 .more-link:hover {
108 background: #EEE;
109 color: #000;
110 }
bbb30910 111
a48bd8b4
AE
112 .block-views {
113 margin-top: 20px;
114 }
3cc6e9f4 115
bbb30910
AE
116}
117
118/* Navbar */
119
a48bd8b4 120@media screen {
1e7a45c4 121
a48bd8b4
AE
122 .navbar-default {
123 background: #000;
124 color: #FFF;
125 border: none;
126 border-radius: 0px;
127 box-sizing: content-box;
128 align-items: center;
129 min-height: 100px;
130 }
1e7a45c4 131
a48bd8b4
AE
132 .navbar-header,
133 #navbar-collapse {
134 max-width: 1150px;
135 padding: 0;
136 margin: 0 auto;
137 border: none;
138 overflow: hidden;
139 }
bfc9c2d3 140
a48bd8b4 141 .navbar-default .navbar-toggle { display: none; }
1e7a45c4 142
a48bd8b4
AE
143 .navbar-header {
144 position: absolute;
145 top: 5px;
146 }
ccc0e97e 147
a48bd8b4 148 .navbar-brand { display: none; }
ccc0e97e 149
a48bd8b4 150 #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
ee748803 151
a48bd8b4
AE
152 .navbar-default .navbar-nav > li > a:focus {
153 outline: none;
154 }
b4ed810a 155
a48bd8b4
AE
156 .navbar-default .navbar-nav > li > a,
157 .navbar-default .navbar-nav > li > a:link,
158 .navbar-default .navbar-nav > li > a:visited {
159 color: #FFF;
160 background: #000;
161 border-bottom: 2px solid transparent;
162 padding-bottom: 10px;
163 margin-bottom: 5px;
164 }
b4ed810a 165
a48bd8b4
AE
166 .navbar-default .navbar-nav > li > a:focus,
167 .navbar-default .navbar-nav > li.active > a:hover,
168 .navbar-default .navbar-nav > li > a:hover {
169 color: #edd400;
170 background: #000;
171 border-bottom: 2px solid #edd400;
172 padding-bottom: 5px;
173 margin-bottom: 10px;
174 }
1fb61412 175
a48bd8b4
AE
176 .navbar-default .navbar-nav > li > a.is-active {
177 border-bottom: 2px solid #FFF;
178 background: #000;
179 padding-bottom: 5px;
180 margin-bottom: 10px;
181 }
cafdcde8 182
a48bd8b4
AE
183 .page-header {
184 border-bottom: 2px solid #000;
185 font-size: 2em;
186 }
187
188 .region-header .search-block-form {
189 width: 300px;
190 float: right;
191 }
192
193 nav .search-block-form {
194 position: absolute;
195 width: 300px;
196 right: 10%;
197 top: 30px;
198 }
2cbded31 199
1fb61412
VSB
200}
201
d2af0057
AE
202@media screen and (max-width: 767px) {
203 #block-ryf-main-menu .navbar-nav { max-width: 130px; }
204}
a48bd8b4 205
31ef14eb
AE
206.region-navigation-collapsible .search-block-form {
207 float: right;
208 width: 210px;
209}
210
81342c63 211@media screen and (min-width: 768px) {
4f6bd63c
VSB
212
213 .navbar-default {
214 margin-bottom: 100px;
215 }
216 .navbar-nav {
217 margin-top: 40px;
218 }
219 .region-header .breadcrumb {
220 position: absolute;
221 top: -70px;
222 left: 200px;
223 background: none;
224 }
225 .region-navigation-collapsible .search-block-form {
0b5c01d8 226 padding-top: 50px;
4f6bd63c 227 }
81342c63
AE
228}
229
a48bd8b4
AE
230@media screen {
231
232 .maintenance-page #navbar {
233 margin-bottom: 120px;
234 }
9ec7bd06
AE
235}
236
5235611e 237
cd0efca0
AE
238/* Selectors */
239
5235611e 240
cd0efca0
AE
241@media screen and (min-width: 768px) {
242 .form-inline .form-item .select-wrapper {
243 display: block;
244 }
245 .form-inline .form-actions {
246 margin-top: 21px;
247 }
248}
249
9d4869aa
VSB
250/* News */
251
a48bd8b4 252@media screen {
9d4869aa 253
a48bd8b4
AE
254 .view-news article {
255 padding: 0.5em;
256 margin: 0 10%;
257 }
9d4869aa 258
a48bd8b4
AE
259 .view-news p {
260 line-height: 1.5em;
261 font-size: 1.1em;
262 }
9d4869aa 263
a48bd8b4
AE
264 .view-news .node-readmore {
265 padding: 0.5em 1em;
266 border: 1px solid #DDD;
267 border-radius: 0.5em;
268 float: right;
269 }
270
271 .view-news .node-readmore:hover {
272 background: #EEE;
273 color: #000;
274 }
275
276 .view-news footer {
277 color: #999;
278 padding: 0.5em;
279 text-align: right;
280 }
9d4869aa 281
9d4869aa
VSB
282}
283
5235611e 284
16670121 285/* RYF List */
b4ed810a 286
5235611e 287
a48bd8b4 288@media screen {
aa68642c 289
a48bd8b4
AE
290 .ryf-list-row {
291 padding: 0;
292 margin: 0 auto;
293 overflow: auto;
294 }
b4ed810a 295
a48bd8b4
AE
296 .ryf-list {
297 float: left;
298 margin: 0;
299 padding: 0.5em;
300 position: relative;
301 list-style: none;
302 }
1e7a45c4 303
a48bd8b4
AE
304 .ryf-list article {
305 border: 1px solid #bbb;
306 border-radius: 5px;
307 padding: 1em;
308 box-shadow: 2px 2px 5px #ddd;
309 transition: 0.3s;
310 }
311
312 .ryf-list article:hover {
313 box-shadow: 0px 0px 5px #aaa;
314 }
315
316 .ryf-list .field--type-image {
317 border: 1px solid #ddd;
318 border-left: 0px;
319 border-right: 0px;
320 background: #fff;
321 height: 150px;
322 width: 100%;
323 overflow: hidden;
324 border-radius: 5px;
325 position: relative;
326 text-align: center;
327 display: flex;
328 align-items: center;
329 }
1e7a45c4 330
a48bd8b4
AE
331 .ryf-list .field--type-image a {
332 display: inline-block;
333 margin: 0 auto;
334 }
c9c0ee2c 335
a48bd8b4
AE
336 .ryf-list .field--type-image img {
337 width: auto;
338 max-height: 150px;
339 margin: 0 auto;
340 display: inline-block;
341 }
16670121 342
a48bd8b4
AE
343 .ryf-list h2 {
344 text-align: left;
345 font-size: 1.5em;
346 line-height: 1.2em;
347 margin: 0;
348 padding: 0;
349 }
b4ed810a 350
a48bd8b4
AE
351 .ryf-list .field--name-body {
352 display: block;
353 border-radius: 5px;
354 width: 100%;
355 height: 0px;
356 margin-top: 0px;
357 z-index: 99;
358 position: relative;
359 background: #00000088;
360 color: white;
361 padding: 0em;
362 transition: 0.2s;
363 cursor: default;
364 overflow: hidden;
365 }
489d2ac8 366
a48bd8b4
AE
367 .ryf-list:hover .field--name-body {
368 height: 100px;
369 margin-top: -100px;
370 z-index: 99;
371 position: relative;
372 padding: 0.3em;
373 transition: 0.3s;
374 }
489d2ac8 375
a48bd8b4
AE
376 .ryf-list a {
377 color: #337AB7;
378 }
b4ed810a 379
a48bd8b4
AE
380 .ryf-list a:hover {
381 color: #000;
382 }
b4ed810a 383
a48bd8b4
AE
384 .ryf-list .list-inline li {
385 font-size: 0.9em;
386 border: 1px solid #ddd;
387 width: auto;
388 border-radius: 0.5em;
389 padding: 0.3em 0.5em;
390 margin-top: 5px;
391 float: right;
392 }
1e7a45c4 393
a48bd8b4
AE
394 .ryf-list h2 a {
395 display: inline-block;
396 height: 55px;
397 width: 100%;
398 overflow: hidden;
399 position: relative;
400 }
16670121 401
a48bd8b4
AE
402 .ryf-list h2 a:after {
403 content: '(...)';
404 float: right;
405 display: block;
406 position: absolute;
407 bottom:5px;
408 right: 2px;
409 font-size: 0.8em;
410 }
489d2ac8 411
a48bd8b4
AE
412 .ryf-list .list-inline li:hover {
413 background: #eee;
414 }
489d2ac8 415
16670121
VSB
416}
417
e3fe14a1 418@media screen and (min-width: 450px) and (max-width: 659px) {
bd3568e1 419 .ryf-list-row {
aa68642c
AE
420 max-width: 600px;
421 }
e3fe14a1
AE
422 .ryf-list {
423 max-width: 300px;
424 float: none;
425 margin: 0 auto;
426 }
427}
428@media screen and (min-width: 660px) and (max-width: 767px) {
bd3568e1 429 .ryf-list-row {
e3fe14a1
AE
430 margin: 0 auto;
431 max-width: 660px;
432 }
433 .ryf-list {
434 max-width: 300px;
435 float: left;
436 }
b9bef353 437 .auto-clear .col-xs-12:nth-child(odd){clear:left;}
e3fe14a1
AE
438}
439
fd931c9b
VSB
440@media screen and (min-width: 55em) {
441
442 .ryf-list article {
489d2ac8 443 min-height: 270px
fd931c9b
VSB
444 }
445
446}
447
16670121 448
dbd9476a
AE
449/* Vendors list */
450
5235611e 451
a48bd8b4 452@media screen {
00227dc4 453
a48bd8b4
AE
454 .vendors-list-row {
455 padding: 10px;
456 margin: 0 auto;
457 overflow: auto;
458 }
dbd9476a 459
a48bd8b4
AE
460 .vendors-list {
461 margin-bottom: 40px;
462 list-style: none;
dbd9476a 463
a48bd8b4
AE
464 overflow: auto;
465 }
dbd9476a 466
a48bd8b4
AE
467 .vendors-list .views-field-field-icon {
468 width: 220px;
469 height: 220px;
dbd9476a 470
a48bd8b4
AE
471 display: flex;
472 align-items: center;
dbd9476a 473
a48bd8b4
AE
474 margin: 0px auto 20px auto;
475 }
dbd9476a 476
a48bd8b4
AE
477 .vendors-list .views-field-field-icon img {
478 margin: 0 auto;
479 }
480
481 .vendors-list .views-field-name,
482 .vendors-list .views-field-field-description-summary,
483 .vendors-list .views-field-description__value {
484 max-width: 300px;
485 margin: 0 auto 10px auto;
486 }
487
488 .vendors-list .views-field-name {
489 font-weight: bold;
490 font-size: 18px;
491 text-align: center;
492 }
dbd9476a 493
dbd9476a
AE
494}
495
496
f39cdbbc
AE
497/* Sidebars */
498
499
500@media screen and (max-width: 767px) {
501 .path-products #block-views-block-categories-categories-block { display: none; }
502}
503
504
222cefba
AE
505/* Vendor and Category taxonomy term pages */
506
507
a48bd8b4 508@media screen {
5df3859d 509
a48bd8b4
AE
510 .view-taxonomy-term .view-header .field--name-field-icon img {
511 margin: 0 auto;
512 }
513
514 .view-filters {
515 clear: left;
516 }
517
518 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
519 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
520 margin-top: 15px;
521 }
5df3859d 522
728032e9
AE
523}
524
222cefba 525@media screen and (max-width: 559px) {
c71d4a08 526 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
222cefba 527 margin: 0 auto 40px auto;
222cefba
AE
528 overflow: auto;
529 }
530
531 .view-taxonomy-term .view-header .field--name-field-icon {
532 margin: 0 auto 20px auto;
533 width: 220px;
534 }
535
728032e9 536 .view-taxonomy-term .view-header .field--name-description,
3ad409a4 537 .view-taxonomy-term .view-header .field--name-field-description-summary,
bcb5e2c7 538 .view-taxonomy-term .view-header .field--name-field-vendor-website,
728032e9
AE
539 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
540 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
222cefba 541 max-width: 360px;
728032e9 542 margin: 15px auto 0 auto;
222cefba
AE
543 padding: 0 10px;
544 }
545
222cefba
AE
546}
547
5df3859d 548@media screen and (min-width: 560px) {
c71d4a08 549 .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
222cefba 550 margin: 0 0 40px 0;
222cefba
AE
551 overflow: auto;
552 }
553
554 .view-taxonomy-term .view-header .field--name-field-icon {
555 width: 220px;
222cefba
AE
556 float: left;
557 }
558
728032e9 559 .view-taxonomy-term .view-header .field--name-description,
3ad409a4 560 .view-taxonomy-term .view-header .field--name-field-description-summary,
bcb5e2c7 561 .view-taxonomy-term .view-header .field--name-field-vendor-website,
728032e9
AE
562 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
563 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
06e30721 564 margin: 15px auto 0 260px;
222cefba
AE
565 }
566
222cefba
AE
567}
568
569@media screen and (min-width: 768px) {
570 .view-taxonomy-term .view-header {
300bf8f5 571 max-width: 700px;
222cefba
AE
572 }
573}
574
575
4d7da022
AE
576/* Product */
577
5235611e 578
d679ca4e
AE
579@media screen and (max-width: 767px) {
580 .page-node-type-product .product {
581 max-width: 382px;
582 margin: 0 auto;
583 }
584}
585
21d9e444
AE
586@media screen and (min-width: 768px) and (max-width: 991px) {
587 .page-node-type-product .product {
588 width: 700px;
589 margin: 0 auto;
590 }
4d7da022
AE
591}
592
21d9e444
AE
593@media screen and (min-width: 992px) {
594 .page-node-type-product .product {
595 width: 800px;
596 margin: 0 auto;
597 }
598}
4d7da022 599
a48bd8b4 600@media screen {
aa0f7f3d 601
a48bd8b4
AE
602 .page-node-type-product .product .field--name-field-image {
603 padding: 10px;
4d7da022 604
a48bd8b4
AE
605 border: 1px solid #888;
606 border-radius: 10px;
607 }
4d7da022 608
a48bd8b4
AE
609 .page-node-type-product .product .field--name-field-image img {
610 margin: 0 auto;
611 }
d679ca4e 612
a48bd8b4
AE
613 .page-node-type-product .product .field--name-field-extra-images {
614 padding: 0 11px;
615 display: flex;
616 align-items: center;
617 }
433e107d 618
a48bd8b4 619 .page-node-type-product .product .field--name-field-extra-images .field--item {
77fcf082 620 display: inline-block;
a48bd8b4
AE
621 margin-right: 15px;
622 padding: 5px;
623 }
624 .page-node-type-product .product .field--name-field-extra-images .field--item:last-child {
625 margin-right: 0;
626 }
b6875de9 627
a48bd8b4
AE
628 .page-node-type-product .product .field--name-field-categories,
629 .page-node-type-product .product .field--name-field-vendor {
630 margin: 10px 10px 20px 0px;
631 padding: 10px;
632 }
633
634 .page-node-type-product .product .field--name-field-categories .field--item {
635 display: list-item;
636 list-style: circle;
637 margin-left: 15px;
638 }
639
640 /* Mostly from Bootstrap 3 button CSS */
641 .page-node-type-product .product .field--name-field-vendor-product-link a {
642 color: #fff;
643 background-color: #337ab7;
644 border-color: #2e6da4;
645 display: inline-block;
646 margin-bottom: 0;
647 font-weight: normal;
648 text-align: center;
649 white-space: nowrap;
650 vertical-align: middle;
651 -ms-touch-action: manipulation;
652 touch-action: manipulation;
653 cursor: pointer;
654 background-image: none;
655 border: 1px solid transparent;
656 padding: 6px 12px;
657 font-size: 14px;
658 line-height: 1.42857143;
659 border-radius: 4px;
660 -webkit-user-select: none;
661 -moz-user-select: none;
662 -ms-user-select: none;
663 user-select: none;
664 text-decoration: none;
665 }
666
667 #block-views-block-categories-categories-block ul {
668 margin: 0; padding: 0 10px;
669 list-style: none;
670 }
671
672 #block-views-block-categories-categories-block li {
673 padding: 5px 10px;
674 border: 1px solid #DDD;
675 border-radius: 5px;
676 list-style: none;
677 margin: 5px 0;
678 }
679
680 #block-views-block-categories-categories-block li:hover {
681 background: #EEE;
682 color: #000;
683 }
684
685 #block-views-block-categories-categories-block a {
686 width: 100%;
687 display: block;
688 }
b6875de9 689
a48bd8b4
AE
690 /* product page colors */
691 .page-node-type-product .product .field--name-field-image {
692 background-color: #fff;
693 border-color: #aaa;
694 }
b6875de9 695
28ff698e 696}
28ff698e 697
d679ca4e
AE
698@media screen and (max-width: 767px) {
699 .page-node-type-product .product .field--name-field-extra-images {
700 margin: 10px auto 0px auto;
21d9e444 701 }
4d7da022 702
b766958e
AE
703 .page-node-type-product .product .field--name-body,
704 .page-node-type-product .product .field--name-field-vendor-product-link,
705 .page-node-type-product .product .field--name-field-certification-details,
706 .page-node-type-product .product .field--name-field-certification-date,
707 .page-node-type-product .product .field--name-field-source-code-links {
21d9e444
AE
708 margin-bottom: 20px;
709 }
4d7da022 710
b766958e
AE
711 .page-node-type-product .product .field--name-field-categories,
712 .page-node-type-product .product .field--name-field-vendor {
9b263139 713 margin-bottom: 0px;
21d9e444 714 float: left;
21d9e444 715 }
4d7da022 716
21d9e444 717 .page-node-type-product .product .field--name-body {
9b263139 718 padding-top: 20px;
21d9e444
AE
719 clear: both;
720 }
4d7da022
AE
721}
722
21d9e444
AE
723
724@media screen and (min-width: 768px) {
725 .page-node-type-product .product .field--name-field-image {
726 width: 382px;
21d9e444 727 float: left;
21d9e444
AE
728 }
729
730 .page-node-type-product .product .field--name-field-extra-images {
731 float: left;
732 clear: left;
21d9e444 733 width: 382px;
21d9e444 734 margin-top: 10px;
21d9e444
AE
735 }
736
b766958e
AE
737 .page-node-type-product .product .field--name-body,
738 .page-node-type-product .product .field--name-field-vendor-product-link,
739 .page-node-type-product .product .field--name-field-certification-details,
740 .page-node-type-product .product .field--name-field-certification-date,
741 .page-node-type-product .product .field--name-field-source-code-links {
21d9e444
AE
742 margin-left: 400px;
743 margin-bottom: 20px;
744 }
745
746 .page-node-type-product .product .field--name-field-categories {
747 float: left;
748 clear: left;
749 }
750
751 .page-node-type-product .product .field--name-field-vendor {
752 float: left;
753 }
754
4d7da022
AE
755}
756
757
9f8b2429
AE
758/* News and Product Announcements */
759
760
a48bd8b4
AE
761@media screen {
762
763 .page-node-type-product-announcement .page-header,
764 .page-node-type-product-announcement .tabs--primary,
765 .page-node-type-product-announcement .region-content,
766 .page-node-type-general-news-item .page-header,
767 .page-node-type-general-news-item .tabs--primary,
768 .page-node-type-general-news-item .region-content,
769 .page-node-type-page .page-header,
770 .page-node-type-page .tabs--primary,
771 .page-node-type-page .region-content,
772 .path-news .page-header,
773 .path-news .tabs--primary,
774 .path-news .region-content {
775 max-width: 800px;
776 margin: 0 auto;
777 }
9f8b2429 778
a48bd8b4
AE
779 /* don't apply above max-width rule to main page */
780 .path-frontpage .page-header,
781 .path-frontpage .tabs--primary,
782 .path-frontpage .region-content {
783 max-width: 2000px; /* high number beyond the max */
784 }
8499d9cd 785
a48bd8b4
AE
786 .page-node-type-page .page-header {
787 margin-bottom: 20px;
788 }
dca6d2ea 789
a48bd8b4
AE
790 .path-news h2,
791 .block-views-blocknews-news-block article h2 {
792 font-size: 25px;
793 }
9f8b2429 794
a48bd8b4
AE
795 .page-node-type-product-announcement .author,
796 .page-node-type-general-news-item .author {
797 margin: 10px 0 20px 0;
798 font-style: oblique;
799 }
9f8b2429 800
a48bd8b4
AE
801 .page-node-type-product-announcement .field--name-body,
802 .page-node-type-general-news-item .field--name-body {
803 margin-bottom: 20px;
804 }
9f8b2429 805
a48bd8b4
AE
806 .page-node-type-product-announcement .field--name-field-external-news-link,
807 .page-node-type-general-news-item .field--name-field-external-news-link {
808 margin-bottom: 20px;
809 }
810
811 .page-node-type-product-announcement .field--name-field-vendor-page,
812 .page-node-type-product-announcement .field--name-field-announced-products {
813 margin-bottom: 20px;
814 }
9f8b2429 815
9f8b2429
AE
816}
817
818
41399eb4
AE
819/* Search Results */
820
821
822@media screen and (max-width: 600px) {
f12cbe51 823 .path-search .region-content > ol {
41399eb4
AE
824 width: 300px;
825 }
826}
827@media screen and (min-width: 601px) and (max-width 1000px) {
f12cbe51 828 .path-search .region-content > ol {
41399eb4
AE
829 width: 560px;
830 }
831}
832@media screen and (min-width: 1001px) {
f12cbe51 833 .path-search .region-content > ol {
41399eb4
AE
834 width: 900px;
835 }
836}
837
a48bd8b4
AE
838@media screen {
839
840 .path-search .region-content > ol {
841 margin: 0 auto;
842 padding-left: 0;
843 overflow: auto;
844 }
41399eb4 845
a48bd8b4
AE
846 .path-search .region-content > ol li {
847 width: 280px;
848 height: 320px;
849 margin: 0px auto;
850 padding: 10px;
41399eb4 851
a48bd8b4 852 float: left;
41399eb4 853
a48bd8b4
AE
854 list-style: none;
855 overflow: hidden;
856 }
41399eb4 857
a48bd8b4
AE
858 .path-search .region-content > ol li h3 {
859 text-align: center;
860 }
41399eb4 861
a48bd8b4
AE
862 .path-search .region-content > ol li .search-image {
863 width: 220px;
864 height: 220px;
41399eb4 865
a48bd8b4 866 margin: 0 auto;
41399eb4 867
a48bd8b4
AE
868 display: flex;
869 align-items: center;
870 }
41399eb4 871
a48bd8b4
AE
872 .path-search .region-content > ol li p {
873 display: block;
874 width: 220px;
875 margin: 0 auto;
876 }
59ee2942 877
a48bd8b4
AE
878 .path-search .region-content > ol li img {
879 }
41399eb4
AE
880}
881
882
16670121
VSB
883/* Footer */
884
a48bd8b4 885@media screen {
16670121 886
a48bd8b4
AE
887 .footer {
888 background: #333;
889 color: #FFF;
890 }
06b1f67a 891
a48bd8b4
AE
892 #email-signup .email-input {
893 color: #000;
894 display: block;
895 margin-bottom: 10px;
896 }
897 #email-signup .action-button {
898 color: #000;
899 display: block;
900 }
fd931c9b 901
a48bd8b4 902 /* full page width for footer */
c900f9d4 903
a48bd8b4
AE
904 .footer {
905 width: 100%;
906 }
907
908 .footer a { color: #edd400; }
16670121 909
a48bd8b4 910 .footer a:hover { color: #FFF; }
16670121 911
a48bd8b4 912 .footer h4 { font-weight: bold; }
16670121 913
a48bd8b4 914 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
16670121 915
a48bd8b4
AE
916 #fsf-logo-footer { margin-bottom: 10px; }
917}
0bd91ac3 918
18f8d3b1
AE
919@media print { #fsf-logo-footer { filter: invert(100%) } }
920