/** * If using a CSS pre-processor, tell it to overwrite this file. If not, place * your custom CSS modifications here. */ /* Lato font */ @font-face { font-family: "Lato"; src: url("../fonts/Lato-Regular.ttf") format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: "Lato"; src: url('../fonts/Lato-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: "Lato"; src: url('../fonts/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } /* Universal */ body { font-family: "Lato", Helvetica, Arial, sans-serif; margin: 0; min-width: 320px; } a { transition: 0.3s; } section { position: relative; } /* etcetera */ .visually-hidden.focusable:focus { position: absolute !important; background: #000; color: #FFF; padding: 0.5em; z-index: 9999; } .main-container { min-height: 50vh; } h2.block-title { background: #337AB7; color: #FFF; padding: 0.5em; } h2.block-title a:visited, h2.block-title a:focus, h2.block-title a:active, h2.block-title a { color: #FFF; } h2.block-title a:hover { color: #FFF; } .feed-icons a { background: url('../images/rss.svg') top left no-repeat; background-size: contain; height: 20px; overflow: hidden; display: block; text-indent: 25px; font-size: 1em; width: fit-content; margin-top: 1em; float: right; } .view-display-id-news_page .feed-icons a { margin-top: -30px; } .more-link { border: 1px solid #ddd; border-radius: .5em; padding: .5em; text-align: center; width: 50%; margin: 0 auto; font-weight: bold; margin-top: 2em; } .more-link:hover { background: #EEE; color: #000; } .block-views { margin-top: 20px; } /* Navbar */ .navbar-default { background: #000; color: #FFF; border: none; border-radius: 0px; box-sizing: content-box; align-items: center; min-height: 100px; } .navbar-header, #navbar-collapse { max-width: 1150px; padding: 0; margin: 0 auto; border: none; overflow: hidden; } .navbar-default .navbar-toggle { display: none; } .navbar-header { position: absolute; top: 5px; } .navbar-brand { display: none; } #block-ryf-main-menu .navbar-nav { margin-left: 195px; } .navbar-default .navbar-nav > li > a:focus { outline: none; } .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:link, .navbar-default .navbar-nav > li > a:visited { color: #FFF; background: #000; border-bottom: 2px solid transparent; padding-bottom: 10px; margin-bottom: 5px; } .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li > a:hover { color: #edd400; background: #000; border-bottom: 2px solid #edd400; padding-bottom: 5px; margin-bottom: 10px; } .navbar-default .navbar-nav > li > a.is-active { border-bottom: 2px solid #FFF; background: #000; padding-bottom: 5px; margin-bottom: 10px; } .page-header { border-bottom: 2px solid #000; font-size: 2em; } .region-header .search-block-form { width: 300px; float: right; } nav .search-block-form { position: absolute; width: 300px; right: 10%; top: 30px; } /* * @media screen and (min-width: 520px) and (max-width: 599px) { * .logo img { margin-left: 50px; } * #block-ryf-main-menu .navbar-nav { margin-left: 230px; } * } * * @media screen and (min-width: 600px) and (max-width: 767px) { * .logo img { margin-left: 100px; } * #block-ryf-main-menu .navbar-nav { margin-left: 280px; } * } * * @media screen and (max-width: 767px) { * .logo img { height: 150px; margin-top: 25px; } * .navbar-default { min-height: 230px; margin-bottom: 30px; } * #block-ryf-main-menu .navbar-nav { max-width: 130px; } * } * */ .region-navigation-collapsible .search-block-form { float: right; width: 210px; } @media screen and (min-width: 768px) { .navbar-default { margin-bottom: 100px; } .navbar-nav { margin-top: 40px; } .region-header .breadcrumb { position: absolute; top: -70px; left: 200px; background: none; } .region-navigation-collapsible .search-block-form { padding-top: 50px; } } /* Selectors */ @media screen and (min-width: 768px) { .form-inline .form-item .select-wrapper { display: block; } .form-inline .form-actions { margin-top: 21px; } } /* News */ .view-news article { padding: 0.5em; margin: 0 10%; } .view-news p { line-height: 1.5em; font-size: 1.1em; } .view-news .node-readmore { padding: 0.5em 1em; border: 1px solid #DDD; border-radius: 0.5em; float: right; } .view-news .node-readmore:hover { background: #EEE; color: #000; } .view-news footer { color: #999; padding: 0.5em; text-align: right; } /* RYF List */ .ryf-list-row { padding: 0; margin: 0 auto; overflow: auto; } .ryf-list { float: left; margin: 0; padding: 0.5em; position: relative; list-style: none; } .ryf-list article { border: 1px solid #bbb; border-radius: 5px; padding: 1em; box-shadow: 2px 2px 5px #ddd; transition: 0.3s; } .ryf-list article:hover { box-shadow: 0px 0px 5px #aaa; } .ryf-list .field--type-image { border: 1px solid #ddd; border-left: 0px; border-right: 0px; background: #fff; height: 150px; width: 100%; overflow: hidden; border-radius: 5px; position: relative; text-align: center; } .ryf-list img { width: auto; height: 100%; margin: auto 0; display: inline-block; } .ryf-list h2 { text-align: left; font-size: 1.5em; line-height: 1.2em; margin: 0; padding: 0; } .ryf-list .field--name-body { display: block; border-radius: 5px; width: 100%; height: 0px; margin-top: 0px; z-index: 99; position: relative; background: #00000088; color: white; padding: 0em; transition: 0.2s; cursor: default; overflow: hidden; } .ryf-list:hover .field--name-body { height: 100px; margin-top: -100px; z-index: 99; position: relative; padding: 0.3em; transition: 0.3s; } .ryf-list a { color: #337AB7; } .ryf-list a:hover { color: #000; } .ryf-list .list-inline li { font-size: 0.9em; border: 1px solid #ddd; width: auto; border-radius: 0.5em; padding: 0.3em 0.5em; margin-top: 5px; float: right; } .ryf-list h2 a { display: inline-block; height: 55px; overflow: hidden; position: relative; } .ryf-list h2 a:after { content: '(...)'; float: right; display: block; position: absolute; bottom:5px; right: 2px; font-size: 0.8em; } .ryf-list .list-inline li:hover { background: #eee; } @media screen and (min-width: 450px) and (max-width: 659px) { .ryf-list-row { max-width: 600px; } .ryf-list { max-width: 300px; float: none; margin: 0 auto; } } @media screen and (min-width: 660px) and (max-width: 767px) { .ryf-list-row { max-width: 600px; } .ryf-list-row { margin: 0 auto; max-width: 660px; } .ryf-list { max-width: 300px; float: left; } .auto-clear .col-xs-12:nth-child(odd){clear:left;} } @media screen and (min-width: 55em) { .ryf-list article { min-height: 270px } } /* Vendors list */ .vendors-list-row { padding: 10px; margin: 0 auto; overflow: auto; } @media screen and (max-width: 767px) { .vendors-list-row { margin: 0px auto; } .vendors-list { margin-bottom: 40px; list-style: none; overflow: auto; } .vendors-list .views-field-field-icon { width: 220px; margin: 0px auto 20px auto; } .vendors-list .views-field-field-icon img { margin: 0 auto; } .vendors-list .views-field-name, .vendors-list .views-field-field-description-summary, .vendors-list .views-field-description__value { max-width: 300px; margin: 0 auto 10px auto; } .vendors-list .views-field-name { font-weight: bold; font-size: 18px; text-align: center; } } @media screen and (min-width: 768px) { .vendors-list-row { width: 600px; margin: 0px auto; } .vendors-list { list-style: none; clear: left; overflow: auto; } .vendors-list .views-field-field-icon { width: 220px; height: 220px; margin-bottom: 40px; float: left; } .vendors-list .views-field-field-icon img { margin: 0 auto; } .vendors-list .views-field-name, .vendors-list .views-field-field-description-summary, .vendors-list .views-field-description__value { margin-left: 300px; } .vendors-list .views-field-name { margin-bottom: 10px; font-weight: bold; font-size: 18px; } } /* Sidebars */ @media screen and (max-width: 767px) { .path-products #block-views-block-categories-categories-block { display: none; } } /* Vendor and Category taxonomy term pages */ .view-taxonomy-term .view-header .field--name-field-icon img { margin: 0 auto; } .view-filters { clear: left; } .view-taxonomy-term .view-header .field--name-field-vendor-support-link, .view-taxonomy-term .view-header .field--name-field-vendor-support-email { margin-top: 15px; } @media screen and (max-width: 559px) { .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header { margin: 0 auto 40px auto; overflow: auto; } .view-taxonomy-term .view-header .field--name-field-icon { margin: 0 auto 20px auto; width: 220px; } .view-taxonomy-term .view-header .field--name-description, .view-taxonomy-term .view-header .field--name-field-description-summary, .view-taxonomy-term .view-header .field--name-field-vendor-support-link, .view-taxonomy-term .view-header .field--name-field-vendor-support-email { max-width: 360px; margin: 15px auto 0 auto; padding: 0 10px; } } @media screen and (min-width: 560px) { .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header { margin: 0 0 40px 0; overflow: auto; } .view-taxonomy-term .view-header .field--name-field-icon { width: 220px; float: left; } .view-taxonomy-term .view-header .field--name-description, .view-taxonomy-term .view-header .field--name-field-description-summary, .view-taxonomy-term .view-header .field--name-field-vendor-support-link, .view-taxonomy-term .view-header .field--name-field-vendor-support-email { margin-left: 260px; } } @media screen and (min-width: 768px) { .view-taxonomy-term .view-header { max-width: 700px; } } /* Product */ @media screen and (max-width: 767px) { .page-node-type-product .product { max-width: 382px; margin: 0 auto; } } @media screen and (min-width: 768px) and (max-width: 991px) { .page-node-type-product .product { width: 700px; margin: 0 auto; } } @media screen and (min-width: 992px) { .page-node-type-product .product { width: 800px; margin: 0 auto; } } .page-node-type-product .product .field--name-field-image { padding: 10px; border: 1px solid #888; border-radius: 10px; } .page-node-type-product .product .field--name-field-image img { margin: 0 auto; } .page-node-type-product .product .field--name-field-extra-images { padding: 0 11px; display: flex; align-items: center; } .page-node-type-product .product .field--name-field-extra-images .field--item { display: inline-block; margin-right: 15px; padding: 5px; } .page-node-type-product .product .field--name-field-extra-images .field--item:last-child { margin-right: 0; } .page-node-type-product .product .field--name-field-categories, .page-node-type-product .product .field--name-field-vendor { margin: 10px 10px 20px 0px; padding: 10px; } .page-node-type-product .product .field--name-field-categories .field--item { display: list-item; list-style: circle; margin-left: 15px; } #block-views-block-categories-categories-block ul { margin: 0; padding: 0 10px; list-style: none; } #block-views-block-categories-categories-block li { padding: 5px 10px; border: 1px solid #DDD; border-radius: 5px; list-style: none; margin: 5px 0; } #block-views-block-categories-categories-block li:hover { background: #EEE; color: #000; } #block-views-block-categories-categories-block a { width: 100%; display: block; } /* product page colors */ .page-node-type-product .product .field--name-field-image { background-color: #fff; border-color: #aaa; } @media screen and (max-width: 767px) { .page-node-type-product .product .field--name-field-extra-images { margin: 10px auto 0px auto; } .page-node-type-product .product .field--name-body, .page-node-type-product .product .field--name-field-vendor-product-link, .page-node-type-product .product .field--name-field-certification-details, .page-node-type-product .product .field--name-field-certification-date, .page-node-type-product .product .field--name-field-source-code-links { margin-bottom: 20px; } .page-node-type-product .product .field--name-field-categories, .page-node-type-product .product .field--name-field-vendor { margin-bottom: 0px; float: left; } .page-node-type-product .product .field--name-body { padding-top: 20px; clear: both; } } @media screen and (min-width: 768px) { .page-node-type-product .product .field--name-field-image { width: 382px; float: left; } .page-node-type-product .product .field--name-field-extra-images { float: left; clear: left; width: 382px; margin-top: 10px; } .page-node-type-product .product .field--name-body, .page-node-type-product .product .field--name-field-vendor-product-link, .page-node-type-product .product .field--name-field-certification-details, .page-node-type-product .product .field--name-field-certification-date, .page-node-type-product .product .field--name-field-source-code-links { margin-left: 400px; margin-bottom: 20px; } .page-node-type-product .product .field--name-field-categories { float: left; clear: left; } .page-node-type-product .product .field--name-field-vendor { float: left; } } /* News and Product Announcements */ .page-node-type-product-announcement .page-header, .page-node-type-product-announcement .tabs--primary, .page-node-type-product-announcement .region-content, .page-node-type-general-news-item .page-header, .page-node-type-general-news-item .tabs--primary, .page-node-type-general-news-item .region-content, .page-node-type-page .page-header, .page-node-type-page .tabs--primary, .page-node-type-page .region-content, .path-news .page-header, .path-news .tabs--primary, .path-news .region-content { max-width: 800px; margin: 0 auto; } /* don't apply above max-width rule to main page */ .path-frontpage .page-header, .path-frontpage .tabs--primary, .path-frontpage .region-content { max-width: 2000px; /* high number beyond the max */ } .page-node-type-page .page-header { margin-bottom: 20px; } .path-news h2, .block-views-blocknews-news-block article h2 { font-size: 25px; } .page-node-type-product-announcement .author, .page-node-type-general-news-item .author { margin: 10px 0 20px 0; font-style: oblique; } .page-node-type-product-announcement .field--name-body, .page-node-type-general-news-item .field--name-body { margin-bottom: 20px; } .page-node-type-product-announcement .field--name-field-external-news-link, .page-node-type-general-news-item .field--name-field-external-news-link { margin-bottom: 20px; } .page-node-type-product-announcement .field--name-field-vendor-page, .page-node-type-product-announcement .field--name-field-announced-products { margin-bottom: 20px; } /* Search Results */ @media screen and (max-width: 600px) { .path-search .region-content > ol { width: 300px; } } @media screen and (min-width: 601px) and (max-width 1000px) { .path-search .region-content > ol { width: 560px; } } @media screen and (min-width: 1001px) { .path-search .region-content > ol { width: 900px; } } .path-search .region-content > ol { margin: 0 auto; padding-left: 0; overflow: auto; } .path-search .region-content > ol li { width: 280px; height: 280px; margin: 0px auto; padding: 10px; float: left; list-style: none; overflow: hidden; } .path-search .region-content > ol li h3 { text-align: center; } .path-search .region-content > ol li .search-image { width: 100px; height: 100px; margin: 0 auto; display: flex; align-items: center; } .path-search .region-content > ol li img { } /* Footer */ .footer { background: #333; color: #FFF; } #email-signup .email-input { color: #000; display: block; margin-bottom: 10px; } #email-signup .action-button { color: #000; display: block; } /* full page width for footer */ .footer { width: 100%; } .footer a { color: #edd400; } .footer a:hover { color: #FFF; } .footer h4 { font-weight: bold; } .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; } #fsf-logo-footer { margin-bottom: 10px; } @media print { #fsf-logo-footer { filter: invert(100%) } }