css/style.css

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