added FSF nav header to ryf1p
[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
658e30ec 6body { margin: 0; min-width: 320px; }
1e7a45c4 7
b4ed810a
VSB
8a { transition: 0.3s; }
9
bbb30910
AE
10
11/* etcetera */
12
13
14.feed-icons,
15.more-link {
16 margin-top: 15px;
17 clear: both;
18}
19.more-link {
20 font-weight: bold;
21}
22
23.block-views {
24 margin-top: 20px;
25}
26
27/* Navbar */
28
29
1e7a45c4
VSB
30.navbar-default {
31 background: #000;
32 color: #FFF;
33 border: none;
34 border-radius: 0px;
35 box-sizing: content-box;
1e7a45c4
VSB
36 align-items: center;
37 margin-bottom: 100px;
38 min-height: 100px;
39}
40
b766958e
AE
41.navbar-header,
42#navbar-collapse {
1e7a45c4
VSB
43 max-width: 1150px;
44 padding: 0;
45 margin: 0 auto;
bfc9c2d3
VSB
46 border: none;
47 overflow: hidden;
1e7a45c4
VSB
48}
49
67263bd5 50.navbar-default .navbar-toggle { display: none; }
bfc9c2d3 51
1e7a45c4
VSB
52.navbar-header {
53 position: absolute;
54 top: 5px;
55}
56
67263bd5 57.navbar-brand { display: none; }
ccc0e97e
VSB
58
59#block-ryf-main-menu .navbar-nav { margin-left: 180px; }
60
ee748803
AE
61.navbar-default .navbar-nav > li > a:focus {
62 outline: none;
63}
64
65.navbar-default .navbar-nav > li > a,
0af85f8e 66.navbar-default .navbar-nav > .active > a,
ee748803
AE
67.navbar-default .navbar-nav > li > a:link,
68.navbar-default .navbar-nav > .active > a:link,
69.navbar-default .navbar-nav > li > a:visited,
70.navbar-default .navbar-nav > .active > a:visited {
b4ed810a 71 color: #FFF;
0af85f8e 72 background: #000;
b4ed810a 73 border-bottom: 2px solid transparent;
0af85f8e
AE
74 padding-bottom: 10px;
75 margin-bottom: 5px;
b4ed810a
VSB
76}
77
ee748803 78.navbar-default .navbar-nav > li > a:hover,
0af85f8e 79.navbar-default .navbar-nav > .active > a:hover,
ee748803
AE
80.navbar-default .navbar-nav > li > a:active,
81.navbar-default .navbar-nav > .active > a:active {
b4ed810a 82 color: #edd400;
ee748803 83 background: #000;
b4ed810a
VSB
84 border-bottom: 2px solid #edd400;
85 padding-bottom: 5px;
0af85f8e 86 margin-bottom: 10px;
b4ed810a
VSB
87}
88
cafdcde8 89.page-header {
357e6db1 90 border-bottom: 2px solid #000;
cafdcde8
VSB
91 font-size: 2em;
92}
93
2cbded31
VSB
94.region-header .search-block-form {
95 width: 300px;
96 float: right;
97}
98
2f113c95
AE
99@media screen and (min-width: 520px) and (max-width: 599px) {
100 .logo img { margin-left: 50px; }
101 #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
102}
aa4eefa7 103
2f113c95
AE
104@media screen and (min-width: 600px) and (max-width: 767px) {
105 .logo img { margin-left: 100px; }
106 #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
107}
108
109@media screen and (max-width: 767px) {
110 .logo img { height: 150px; margin-top: 25px; }
111 .navbar-default { min-height: 230px; margin-bottom: 30px; }
112 #block-ryf-main-menu .navbar-nav { max-width: 130px; }
113}
114
81342c63
AE
115@media screen and (min-width: 768px) {
116 .navbar-nav { margin-top: 40px; }
117}
118
5235611e 119
cd0efca0
AE
120/* Selectors */
121
5235611e 122
cd0efca0
AE
123@media screen and (min-width: 768px) {
124 .form-inline .form-item .select-wrapper {
125 display: block;
126 }
127 .form-inline .form-actions {
128 margin-top: 21px;
129 }
130}
131
5235611e 132
16670121 133/* RYF List */
b4ed810a 134
5235611e 135
bd3568e1 136.ryf-list-row {
aa68642c
AE
137 padding: 0;
138 margin: 0 auto;
139 overflow: auto;
140}
141
16670121
VSB
142.ryf-list {
143 float: left;
144 margin: 0;
145 padding: 0.5em;
146 position:relative;
147 list-style: none;
148}
b4ed810a 149
16670121
VSB
150.ryf-list article {
151 border: 1px solid #ececec;
152 border-radius: 5px;
153 padding: 1em;
154 box-shadow: 2px 2px 5px #ddd;
155 transition: 0.3s;
156}
1e7a45c4 157
16670121
VSB
158.ryf-list article:hover {
159 box-shadow: 0px 0px 5px #aaa;
b4ed810a 160}
1e7a45c4 161
16670121 162.ryf-list .field--type-image {
c51f46de 163 width: 150px;
de63e943 164 height: 150px;
16670121
VSB
165 background: #fff;
166 border-radius: 10px;
167 display: flex;
c51f46de
AE
168 align-items: center;
169}
170
171.ryf-list .field--name-field-image {
00e72ccd 172 margin: 0 auto 10px auto;
1e7a45c4 173}
b4ed810a 174
16670121
VSB
175.ryf-list img {
176 max-width: 150px;
00e72ccd
AE
177 max-height: 150px;
178 object-fit: contain;
16670121
VSB
179 overflow: hidden;
180}
181
182.ryf-list img:hover {
183 border-radius: 0;
ccc0e97e 184}
b4ed810a 185
ccc0e97e 186.ryf-list h2 {
b4ed810a
VSB
187 text-align: left;
188 font-size: 1.5em;
189 font-weight: 500;
190 line-height: 1.2em;
16670121
VSB
191 margin: 0;
192 padding: 0;
193 padding-bottom: 1em;
b4ed810a
VSB
194}
195
196.ryf-list a {
197 color: #118991;
198 text-decoration: none;
199}
200
201.ryf-list a:hover {
202 color: #000;
203}
1e7a45c4 204
ccc0e97e
VSB
205.ryf-list .node-readmore,
206.ryf-list .tags,
207.ryf-list .supplier {
b4ed810a
VSB
208 width: 100%;
209 float: left;
210 font-size: 0.9em;
211 border-top: 1px solid #ccc4c4;
212 margin-top: 5px;
213 padding-top: 5px;
214 color: #afadad;
215}
16670121
VSB
216
217.ryf-list .node-readmore {
218 text-align: right;
219}
220
e3fe14a1 221@media screen and (min-width: 450px) and (max-width: 659px) {
bd3568e1 222 .ryf-list-row {
aa68642c
AE
223 max-width: 600px;
224 }
e3fe14a1
AE
225 .ryf-list {
226 max-width: 300px;
227 float: none;
228 margin: 0 auto;
229 }
230}
231@media screen and (min-width: 660px) and (max-width: 767px) {
bd3568e1 232 .ryf-list-row {
aa68642c
AE
233 max-width: 600px;
234 }
e3fe14a1
AE
235 .ryf-list-row {
236 margin: 0 auto;
237 max-width: 660px;
238 }
239 .ryf-list {
240 max-width: 300px;
241 float: left;
242 }
b9bef353 243 .auto-clear .col-xs-12:nth-child(odd){clear:left;}
e3fe14a1
AE
244}
245
16670121 246
dbd9476a
AE
247/* Vendors list */
248
5235611e 249
bd3568e1 250.vendors-list-row {
df611aac 251 padding: 10px;
00227dc4
AE
252 margin: 0 auto;
253 overflow: auto;
254}
255
dbd9476a
AE
256@media screen and (max-width: 767px) {
257 .vendors-list-row {
258 margin: 0px auto;
259 }
260
261 .vendors-list {
262 margin-bottom: 40px;
263 list-style: none;
9203a4fd
AE
264
265 overflow: auto;
dbd9476a
AE
266 }
267
268 .vendors-list .views-field-field-icon {
269 width: 220px;
270
271 margin: 0px auto 20px auto;
272 }
273
274 .vendors-list .views-field-field-icon img {
275 margin: 0 auto;
276 }
277
b766958e
AE
278 .vendors-list .views-field-name,
279 .vendors-list .views-field-description__value {
dbd9476a
AE
280 max-width: 300px;
281 margin: 0 auto 10px auto;
282 }
283
284 .vendors-list .views-field-name {
285 font-weight: bold;
286 font-size: 18px;
287 text-align: center;
288 }
289
290}
291
292@media screen and (min-width: 768px) {
293 .vendors-list-row {
294 width: 600px;
295 margin: 0px auto;
296 }
297
298 .vendors-list {
299 list-style: none;
300 clear: left;
9203a4fd
AE
301
302 overflow: auto;
dbd9476a
AE
303 }
304
305 .vendors-list .views-field-field-icon {
306 width: 220px;
307 height: 220px;
308
309 margin-bottom: 40px;
310
311 float: left;
312 }
313
314 .vendors-list .views-field-field-icon img {
315 margin: 0 auto;
316 }
317
b766958e
AE
318 .vendors-list .views-field-name,
319 .vendors-list .views-field-description__value {
dbd9476a
AE
320 margin-left: 300px;
321 }
322
323 .vendors-list .views-field-name {
324 margin-bottom: 10px;
325 font-weight: bold;
326 font-size: 18px;
327 }
328}
329
330
f39cdbbc
AE
331/* Sidebars */
332
333
334@media screen and (max-width: 767px) {
335 .path-products #block-views-block-categories-categories-block { display: none; }
336}
337
338
222cefba
AE
339/* Vendor and Category taxonomy term pages */
340
341
5df3859d
AE
342.view-taxonomy-term .view-header .field--name-field-icon img {
343 margin: 0 auto;
344}
345
346.view-filters {
347 clear: left;
348}
349
728032e9
AE
350.view-taxonomy-term .view-header .field--name-field-vendor-support-link,
351.view-taxonomy-term .view-header .field--name-field-vendor-support-email {
352 margin-top: 15px;
353}
354
222cefba
AE
355@media screen and (max-width: 559px) {
356 .view-taxonomy-term .view-header {
357 margin: 0 auto 40px auto;
358
359 overflow: auto;
360 }
361
362 .view-taxonomy-term .view-header .field--name-field-icon {
363 margin: 0 auto 20px auto;
364 width: 220px;
365 }
366
728032e9
AE
367 .view-taxonomy-term .view-header .field--name-description,
368 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
369 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
222cefba 370 max-width: 360px;
728032e9 371 margin: 15px auto 0 auto;
222cefba
AE
372 padding: 0 10px;
373 }
374
222cefba
AE
375}
376
5df3859d 377@media screen and (min-width: 560px) {
222cefba
AE
378 .view-taxonomy-term .view-header {
379 margin: 0 0 40px 0;
380
381 overflow: auto;
382 }
383
384 .view-taxonomy-term .view-header .field--name-field-icon {
385 width: 220px;
386
387 float: left;
388 }
389
728032e9
AE
390 .view-taxonomy-term .view-header .field--name-description,
391 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
392 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
222cefba
AE
393 margin-left: 260px;
394 }
395
222cefba
AE
396}
397
398@media screen and (min-width: 768px) {
399 .view-taxonomy-term .view-header {
300bf8f5 400 max-width: 700px;
222cefba
AE
401 }
402}
403
404
4d7da022
AE
405/* Product */
406
5235611e 407
d679ca4e
AE
408@media screen and (max-width: 767px) {
409 .page-node-type-product .product {
410 max-width: 382px;
411 margin: 0 auto;
412 }
413}
414
21d9e444
AE
415@media screen and (min-width: 768px) and (max-width: 991px) {
416 .page-node-type-product .product {
417 width: 700px;
418 margin: 0 auto;
419 }
4d7da022
AE
420}
421
21d9e444
AE
422@media screen and (min-width: 992px) {
423 .page-node-type-product .product {
424 width: 800px;
425 margin: 0 auto;
426 }
427}
4d7da022 428
d679ca4e
AE
429.page-node-type-product .product .field--name-field-image {
430 padding: 10px;
4d7da022 431
d679ca4e
AE
432 border: 1px solid #888;
433 border-radius: 10px;
434}
4d7da022 435
aa0f7f3d
AE
436.page-node-type-product .product .field--name-field-image img {
437 margin: 0 auto;
438}
439
d679ca4e
AE
440.page-node-type-product .product .field--name-field-extra-images {
441 padding: 5px;
4d7da022 442
d679ca4e
AE
443 display: flex;
444 align-items: center;
4d7da022 445
d679ca4e
AE
446 border: 1px solid #888;
447 border-radius: 10px;
448}
4d7da022 449
d679ca4e
AE
450.page-node-type-product .product .field--name-field-extra-images .field--item {
451 display: inline-block;
452 margin: auto;
453 padding: 5px;
454}
4d7da022 455
b766958e
AE
456.page-node-type-product .product .field--name-field-categories,
457.page-node-type-product .product .field--name-field-vendor {
d679ca4e
AE
458 margin: 10px 10px 20px 0px;
459 padding: 10px;
460 border: 1px solid #888;
461 border-radius: 10px;
462}
463
433e107d
AE
464.page-node-type-product .product .field--name-field-categories .field--item {
465 display: list-item;
466 list-style: circle;
467 margin-left: 15px;
468}
469
28ff698e
AE
470/* product page colors */
471.page-node-type-product .product .field--name-field-image {
eee49201 472 background-color: #fff;
28ff698e
AE
473 border-color: #aaa;
474}
475.page-node-type-product .product .field--name-field-extra-images {
ebebd91d 476 background-color: #f3f3f3;
28ff698e
AE
477 border-color: #aaa;
478}
479.page-node-type-product .product .field--name-field-categories {
8be2a870
AE
480 background-color: #def;
481 border-color: #8ad;
28ff698e
AE
482}
483.page-node-type-product .product .field--name-field-vendor {
8be2a870
AE
484 background-color: #dfe;
485 border-color: #8da;
28ff698e
AE
486}
487
d679ca4e
AE
488@media screen and (max-width: 767px) {
489 .page-node-type-product .product .field--name-field-extra-images {
490 margin: 10px auto 0px auto;
21d9e444 491 }
4d7da022 492
b766958e
AE
493 .page-node-type-product .product .field--name-body,
494 .page-node-type-product .product .field--name-field-vendor-product-link,
495 .page-node-type-product .product .field--name-field-certification-details,
496 .page-node-type-product .product .field--name-field-certification-date,
497 .page-node-type-product .product .field--name-field-source-code-links {
21d9e444
AE
498 margin-bottom: 20px;
499 }
4d7da022 500
b766958e
AE
501 .page-node-type-product .product .field--name-field-categories,
502 .page-node-type-product .product .field--name-field-vendor {
9b263139 503 margin-bottom: 0px;
21d9e444 504 float: left;
21d9e444 505 }
4d7da022 506
21d9e444 507 .page-node-type-product .product .field--name-body {
9b263139 508 padding-top: 20px;
21d9e444
AE
509 clear: both;
510 }
4d7da022
AE
511}
512
21d9e444
AE
513
514@media screen and (min-width: 768px) {
515 .page-node-type-product .product .field--name-field-image {
516 width: 382px;
21d9e444 517 float: left;
21d9e444
AE
518 }
519
520 .page-node-type-product .product .field--name-field-extra-images {
521 float: left;
522 clear: left;
523
524 width: 382px;
21d9e444 525 margin-top: 10px;
21d9e444
AE
526 }
527
b766958e
AE
528 .page-node-type-product .product .field--name-body,
529 .page-node-type-product .product .field--name-field-vendor-product-link,
530 .page-node-type-product .product .field--name-field-certification-details,
531 .page-node-type-product .product .field--name-field-certification-date,
532 .page-node-type-product .product .field--name-field-source-code-links {
21d9e444
AE
533 margin-left: 400px;
534 margin-bottom: 20px;
535 }
536
537 .page-node-type-product .product .field--name-field-categories {
538 float: left;
539 clear: left;
540 }
541
542 .page-node-type-product .product .field--name-field-vendor {
543 float: left;
544 }
545
4d7da022
AE
546}
547
548
9f8b2429
AE
549/* News and Product Announcements */
550
551
552.page-node-type-product-announcement .page-header,
fa74cee2 553.page-node-type-product-announcement .tabs--primary,
9f8b2429
AE
554.page-node-type-product-announcement .region-content,
555.page-node-type-general-news-item .page-header,
fa74cee2 556.page-node-type-general-news-item .tabs--primary,
dca6d2ea
AE
557.page-node-type-general-news-item .region-content,
558.page-node-type-page .page-header,
fa74cee2 559.page-node-type-page .tabs--primary,
dca6d2ea 560.page-node-type-page .region-content,
9f8b2429 561.path-news .page-header,
fa74cee2 562.path-news .tabs--primary,
9f8b2429
AE
563.path-news .region-content {
564 max-width: 800px;
565 margin: 0 auto;
566}
567
8499d9cd
AE
568/* don't apply above max-width rule to main page */
569.path-frontpage .page-header,
fa74cee2 570.path-frontpage .tabs--primary,
8499d9cd
AE
571.path-frontpage .region-content {
572 max-width: 2000px; /* high number beyond the max */
573}
574
dca6d2ea
AE
575.page-node-type-page .page-header {
576 margin-bottom: 20px;
577}
578
e9d294a4
AE
579.path-news h2,
580.block-views-blocknews-news-block article h2 {
9f8b2429
AE
581 font-size: 25px;
582}
583
584.page-node-type-product-announcement .author,
585.page-node-type-general-news-item .author {
586 margin: 10px 0 20px 0;
587 font-style: oblique;
588}
589
590.page-node-type-product-announcement .field--name-body,
591.page-node-type-general-news-item .field--name-body {
592 margin-bottom: 20px;
593}
594
595.page-node-type-product-announcement .field--name-field-external-news-link,
596.page-node-type-general-news-item .field--name-field-external-news-link {
597 margin-bottom: 20px;
598}
599
600.page-node-type-product-announcement .field--name-field-vendor-page,
601.page-node-type-product-announcement .field--name-field-announced-products {
602 margin-bottom: 20px;
603}
604
605
41399eb4
AE
606/* Search Results */
607
608
609@media screen and (max-width: 600px) {
f12cbe51 610 .path-search .region-content > ol {
41399eb4
AE
611 width: 300px;
612 }
613}
614@media screen and (min-width: 601px) and (max-width 1000px) {
f12cbe51 615 .path-search .region-content > ol {
41399eb4
AE
616 width: 560px;
617 }
618}
619@media screen and (min-width: 1001px) {
f12cbe51 620 .path-search .region-content > ol {
41399eb4
AE
621 width: 900px;
622 }
623}
624
f12cbe51 625.path-search .region-content > ol {
41399eb4
AE
626 margin: 0 auto;
627 padding-left: 0;
628 overflow: auto;
629}
630
f12cbe51 631.path-search .region-content > ol li {
41399eb4
AE
632 width: 280px;
633 height: 280px;
634 margin: 0px auto;
635 padding: 10px;
636
637 float: left;
638
639 list-style: none;
640 overflow: hidden;
641}
642
f12cbe51 643.path-search .region-content > ol li h3 {
41399eb4
AE
644 text-align: center;
645}
646
f12cbe51 647.path-search .region-content > ol li .search-image {
41399eb4
AE
648 width: 100px;
649 height: 100px;
650
651 margin: 0 auto;
652
653 display: flex;
654 align-items: center;
655}
656
f12cbe51 657.path-search .region-content > ol li img {
41399eb4
AE
658}
659
660
16670121
VSB
661/* Footer */
662
5235611e 663
16670121
VSB
664.footer {
665 background: #333;
666 color: #FFF;
667}
668
06d8ab9f 669/* full page width for footer */
c900f9d4 670.footer {
c900f9d4
AE
671 width: 100%;
672}
673
16670121
VSB
674.footer a { color: #edd400; }
675
676.footer a:hover { color: #FFF; }
677
678.footer h4 { font-weight: bold; }
679
680.footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
681
0bd91ac3
AE
682#fsf-logo-footer { margin-bottom: 10px; }
683
18f8d3b1
AE
684@media print { #fsf-logo-footer { filter: invert(100%) } }
685