/****** FILE: themes/gamry/css/base.css *****/ /* Fancybox Fixes */ .fancybox-lock .fancybox-overlay { overflow-y:hidden !important; } html,body { margin:0; padding:0; } .fancybox-nav { max-width:80px; } /* Fancybox Fixes */ html { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -moz-box-sizing: inherit; -webkit-box-sizing: inherit; box-sizing: inherit; } html, body, div, img, form { margin: 0; padding: 0; border: 0; } table, tr, td, div { text-align: left; vertical-align: top; margin: 0; padding: 0; border: 0; } table, table *, table:before, table *:before, table:after, table *:after { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } html { overflow-y: scroll; } p, ul, ol, li { padding: 0; margin: 0; } p { margin-bottom: 15px; } ul, ol { padding: 0; margin: 0; list-style-position: outside; } /* Images never exceed their container (WCAG 2.1 SC 1.4.10 Reflow). Before this, images were constrained only per component -- .rd-blog-prose img, .rd-sr-promo img, #logo > img and so on -- so any image wider than its column pushed the page sideways instead of scaling down. A fixed 280x204 CTA banner was doing exactly that on the shows-and-conferences page, and every image an editor uploads oversized would do it again. `height: auto` is required alongside, not optional: browsers honour an height attribute as a presentational hint, so constraining width without it squashes the picture rather than scaling it. Lowest possible specificity (0,0,1), and base.css loads first, so every component rule still wins -- .rd-logo img keeps its fixed height, and the WIRIS equation images keep their inline `max-width: none`. */ img { max-width: 100%; height: auto; } li { padding: 0; margin: 0 0 0 20px; } a { text-decoration: none; } a[href]:hover { text-decoration: underline; } a[href^=tel]:hover { text-decoration:none; cursor:text; } /* =================================================================== ACCESSIBILITY (WCAG 2.1 AA) — do not remove these rules. =================================================================== */ /* 2.4.7 Focus Visible. This slot used to hold `a:focus { outline: none; }`, which stripped the focus indicator from every link on every page (base.css is loaded site-wide by PageController::$BaseCSS). #4a90c2 is the one ring colour that clears 3:1 (1.4.11) against every background used on this site: #fff, #fbfbfa, #f2f4f5, the #17242b footer, the #0f1b21 hero, AND the #003e69 navy button fill — so no per-context overrides are needed. :focus-visible means mouse clicks stay ring-free; keyboard users get it. */ :focus-visible { outline: 3px solid #4a90c2; outline-offset: 2px; } /* 1.4.1 Use of Color — links inside a block of text must not be distinguished by colour alone. Measured before this fix: prose links sat at 1.2–1.6:1 against the surrounding body text (3:1 required) with no underline, because of the `a { text-decoration: none }` above. Every failing link on the site was inside a

(verified across 22 page types), so scoping to `p` fixes all of them without touching navigation, which uses `li > a` throughout. */ p a[href] { text-decoration: underline; text-underline-offset: 2px; } .rd-pd-lede li a[href] { text-decoration: underline; text-underline-offset: 2px; } /* ...but links styled as BUTTONS are not "links in a block of text" and must stay undecorated. `p.more > a` is the legacy classless download button. */ p a[href].rd-btn, p a[href][class*="btn"], p a[href][class*="button"], p.more > a[href] { text-decoration: none; } address { font-style:normal; } .clear { clear: both; } .left { float: left; margin: 0 15px 5px 0; } .right { float: right; margin: 0 0 5px 15px; } .centered { margin-bottom: 20px; text-align: center; } .bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; } .strike { text-decoration: line-through; } .rollover { display: block; background-position: center top; background-repeat: no-repeat; text-indent: -999em; } .rollover:hover { background-position: center bottom; } .seo_title { margin: 0; padding: 0; text-indent: -999em; overflow: hidden; border: 0; } #MemberLoginForm_LoginForm #Remember{ float:right; width:65%; } #MemberLoginForm_LoginForm #Remember label { width:auto; } /****** FILE: themes/gamry/css/font-awesome.css *****/ /*! * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url('/themes/gamry/css/fonts/fontawesome/fontawesome-webfont.eot?v=4.3.0'); src: url('/themes/gamry/css/fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('/themes/gamry/css/fonts/fontawesome/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('/themes/gamry/css/fonts/fontawesome/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('/themes/gamry/css/fonts/fontawesome/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('/themes/gamry/css/fonts/fontawesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.28571429em; text-align: center; } .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: 0.14285714em; text-align: center; } .fa-li.fa-lg { left: -1.85714286em; } .fa-border { padding: .2em .25em .15em; border: solid 0.08em #eeeeee; border-radius: .1em; } .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #ffffff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-glass:before { content: "\f000"; } .fa-music:before { content: "\f001"; } .fa-search:before { content: "\f002"; } .fa-envelope-o:before { content: "\f003"; } .fa-heart:before { content: "\f004"; } .fa-star:before { content: "\f005"; } .fa-star-o:before { content: "\f006"; } .fa-user:before { content: "\f007"; } .fa-film:before { content: "\f008"; } .fa-th-large:before { content: "\f009"; } .fa-th:before { content: "\f00a"; } .fa-th-list:before { content: "\f00b"; } .fa-check:before { content: "\f00c"; } .fa-remove:before, .fa-close:before, .fa-times:before { content: "\f00d"; } .fa-search-plus:before { content: "\f00e"; } .fa-search-minus:before { content: "\f010"; } .fa-power-off:before { content: "\f011"; } .fa-signal:before { content: "\f012"; } .fa-gear:before, .fa-cog:before { content: "\f013"; } .fa-trash-o:before { content: "\f014"; } .fa-home:before { content: "\f015"; } .fa-file-o:before { content: "\f016"; } .fa-clock-o:before { content: "\f017"; } .fa-road:before { content: "\f018"; } .fa-download:before { content: "\f019"; } .fa-arrow-circle-o-down:before { content: "\f01a"; } .fa-arrow-circle-o-up:before { content: "\f01b"; } .fa-inbox:before { content: "\f01c"; } .fa-play-circle-o:before { content: "\f01d"; } .fa-rotate-right:before, .fa-repeat:before { content: "\f01e"; } .fa-refresh:before { content: "\f021"; } .fa-list-alt:before { content: "\f022"; } .fa-lock:before { content: "\f023"; } .fa-flag:before { content: "\f024"; } .fa-headphones:before { content: "\f025"; } .fa-volume-off:before { content: "\f026"; } .fa-volume-down:before { content: "\f027"; } .fa-volume-up:before { content: "\f028"; } .fa-qrcode:before { content: "\f029"; } .fa-barcode:before { content: "\f02a"; } .fa-tag:before { content: "\f02b"; } .fa-tags:before { content: "\f02c"; } .fa-book:before { content: "\f02d"; } .fa-bookmark:before { content: "\f02e"; } .fa-print:before { content: "\f02f"; } .fa-camera:before { content: "\f030"; } .fa-font:before { content: "\f031"; } .fa-bold:before { content: "\f032"; } .fa-italic:before { content: "\f033"; } .fa-text-height:before { content: "\f034"; } .fa-text-width:before { content: "\f035"; } .fa-align-left:before { content: "\f036"; } .fa-align-center:before { content: "\f037"; } .fa-align-right:before { content: "\f038"; } .fa-align-justify:before { content: "\f039"; } .fa-list:before { content: "\f03a"; } .fa-dedent:before, .fa-outdent:before { content: "\f03b"; } .fa-indent:before { content: "\f03c"; } .fa-video-camera:before { content: "\f03d"; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: "\f03e"; } .fa-pencil:before { content: "\f040"; } .fa-map-marker:before { content: "\f041"; } .fa-adjust:before { content: "\f042"; } .fa-tint:before { content: "\f043"; } .fa-edit:before, .fa-pencil-square-o:before { content: "\f044"; } .fa-share-square-o:before { content: "\f045"; } .fa-check-square-o:before { content: "\f046"; } .fa-arrows:before { content: "\f047"; } .fa-step-backward:before { content: "\f048"; } .fa-fast-backward:before { content: "\f049"; } .fa-backward:before { content: "\f04a"; } .fa-play:before { content: "\f04b"; } .fa-pause:before { content: "\f04c"; } .fa-stop:before { content: "\f04d"; } .fa-forward:before { content: "\f04e"; } .fa-fast-forward:before { content: "\f050"; } .fa-step-forward:before { content: "\f051"; } .fa-eject:before { content: "\f052"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-plus-circle:before { content: "\f055"; } .fa-minus-circle:before { content: "\f056"; } .fa-times-circle:before { content: "\f057"; } .fa-check-circle:before { content: "\f058"; } .fa-question-circle:before { content: "\f059"; } .fa-info-circle:before { content: "\f05a"; } .fa-crosshairs:before { content: "\f05b"; } .fa-times-circle-o:before { content: "\f05c"; } .fa-check-circle-o:before { content: "\f05d"; } .fa-ban:before { content: "\f05e"; } .fa-arrow-left:before { content: "\f060"; } .fa-arrow-right:before { content: "\f061"; } .fa-arrow-up:before { content: "\f062"; } .fa-arrow-down:before { content: "\f063"; } .fa-mail-forward:before, .fa-share:before { content: "\f064"; } .fa-expand:before { content: "\f065"; } .fa-compress:before { content: "\f066"; } .fa-plus:before { content: "\f067"; } .fa-minus:before { content: "\f068"; } .fa-asterisk:before { content: "\f069"; } .fa-exclamation-circle:before { content: "\f06a"; } .fa-gift:before { content: "\f06b"; } .fa-leaf:before { content: "\f06c"; } .fa-fire:before { content: "\f06d"; } .fa-eye:before { content: "\f06e"; } .fa-eye-slash:before { content: "\f070"; } .fa-warning:before, .fa-exclamation-triangle:before { content: "\f071"; } .fa-plane:before { content: "\f072"; } .fa-calendar:before { content: "\f073"; } .fa-random:before { content: "\f074"; } .fa-comment:before { content: "\f075"; } .fa-magnet:before { content: "\f076"; } .fa-chevron-up:before { content: "\f077"; } .fa-chevron-down:before { content: "\f078"; } .fa-retweet:before { content: "\f079"; } .fa-shopping-cart:before { content: "\f07a"; } .fa-folder:before { content: "\f07b"; } .fa-folder-open:before { content: "\f07c"; } .fa-arrows-v:before { content: "\f07d"; } .fa-arrows-h:before { content: "\f07e"; } .fa-bar-chart-o:before, .fa-bar-chart:before { content: "\f080"; } .fa-twitter-square:before { content: "\f081"; } .fa-facebook-square:before { content: "\f082"; } .fa-camera-retro:before { content: "\f083"; } .fa-key:before { content: "\f084"; } .fa-gears:before, .fa-cogs:before { content: "\f085"; } .fa-comments:before { content: "\f086"; } .fa-thumbs-o-up:before { content: "\f087"; } .fa-thumbs-o-down:before { content: "\f088"; } .fa-star-half:before { content: "\f089"; } .fa-heart-o:before { content: "\f08a"; } .fa-sign-out:before { content: "\f08b"; } .fa-linkedin-square:before { content: "\f08c"; } .fa-thumb-tack:before { content: "\f08d"; } .fa-external-link:before { content: "\f08e"; } .fa-sign-in:before { content: "\f090"; } .fa-trophy:before { content: "\f091"; } .fa-github-square:before { content: "\f092"; } .fa-upload:before { content: "\f093"; } .fa-lemon-o:before { content: "\f094"; } .fa-phone:before { content: "\f095"; } .fa-square-o:before { content: "\f096"; } .fa-bookmark-o:before { content: "\f097"; } .fa-phone-square:before { content: "\f098"; } .fa-twitter:before { content: "\f099"; } .fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; } .fa-github:before { content: "\f09b"; } .fa-unlock:before { content: "\f09c"; } .fa-credit-card:before { content: "\f09d"; } .fa-rss:before { content: "\f09e"; } .fa-hdd-o:before { content: "\f0a0"; } .fa-bullhorn:before { content: "\f0a1"; } .fa-bell:before { content: "\f0f3"; } .fa-certificate:before { content: "\f0a3"; } .fa-hand-o-right:before { content: "\f0a4"; } .fa-hand-o-left:before { content: "\f0a5"; } .fa-hand-o-up:before { content: "\f0a6"; } .fa-hand-o-down:before { content: "\f0a7"; } .fa-arrow-circle-left:before { content: "\f0a8"; } .fa-arrow-circle-right:before { content: "\f0a9"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-arrow-circle-down:before { content: "\f0ab"; } .fa-globe:before { content: "\f0ac"; } .fa-wrench:before { content: "\f0ad"; } .fa-tasks:before { content: "\f0ae"; } .fa-filter:before { content: "\f0b0"; } .fa-briefcase:before { content: "\f0b1"; } .fa-arrows-alt:before { content: "\f0b2"; } .fa-group:before, .fa-users:before { content: "\f0c0"; } .fa-chain:before, .fa-link:before { content: "\f0c1"; } .fa-cloud:before { content: "\f0c2"; } .fa-flask:before { content: "\f0c3"; } .fa-cut:before, .fa-scissors:before { content: "\f0c4"; } .fa-copy:before, .fa-files-o:before { content: "\f0c5"; } .fa-paperclip:before { content: "\f0c6"; } .fa-save:before, .fa-floppy-o:before { content: "\f0c7"; } .fa-square:before { content: "\f0c8"; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: "\f0c9"; } .fa-list-ul:before { content: "\f0ca"; } .fa-list-ol:before { content: "\f0cb"; } .fa-strikethrough:before { content: "\f0cc"; } .fa-underline:before { content: "\f0cd"; } .fa-table:before { content: "\f0ce"; } .fa-magic:before { content: "\f0d0"; } .fa-truck:before { content: "\f0d1"; } .fa-pinterest:before { content: "\f0d2"; } .fa-pinterest-square:before { content: "\f0d3"; } .fa-google-plus-square:before { content: "\f0d4"; } .fa-google-plus:before { content: "\f0d5"; } .fa-money:before { content: "\f0d6"; } .fa-caret-down:before { content: "\f0d7"; } .fa-caret-up:before { content: "\f0d8"; } .fa-caret-left:before { content: "\f0d9"; } .fa-caret-right:before { content: "\f0da"; } .fa-columns:before { content: "\f0db"; } .fa-unsorted:before, .fa-sort:before { content: "\f0dc"; } .fa-sort-down:before, .fa-sort-desc:before { content: "\f0dd"; } .fa-sort-up:before, .fa-sort-asc:before { content: "\f0de"; } .fa-envelope:before { content: "\f0e0"; } .fa-linkedin:before { content: "\f0e1"; } .fa-rotate-left:before, .fa-undo:before { content: "\f0e2"; } .fa-legal:before, .fa-gavel:before { content: "\f0e3"; } .fa-dashboard:before, .fa-tachometer:before { content: "\f0e4"; } .fa-comment-o:before { content: "\f0e5"; } .fa-comments-o:before { content: "\f0e6"; } .fa-flash:before, .fa-bolt:before { content: "\f0e7"; } .fa-sitemap:before { content: "\f0e8"; } .fa-umbrella:before { content: "\f0e9"; } .fa-paste:before, .fa-clipboard:before { content: "\f0ea"; } .fa-lightbulb-o:before { content: "\f0eb"; } .fa-exchange:before { content: "\f0ec"; } .fa-cloud-download:before { content: "\f0ed"; } .fa-cloud-upload:before { content: "\f0ee"; } .fa-user-md:before { content: "\f0f0"; } .fa-stethoscope:before { content: "\f0f1"; } .fa-suitcase:before { content: "\f0f2"; } .fa-bell-o:before { content: "\f0a2"; } .fa-coffee:before { content: "\f0f4"; } .fa-cutlery:before { content: "\f0f5"; } .fa-file-text-o:before { content: "\f0f6"; } .fa-building-o:before { content: "\f0f7"; } .fa-hospital-o:before { content: "\f0f8"; } .fa-ambulance:before { content: "\f0f9"; } .fa-medkit:before { content: "\f0fa"; } .fa-fighter-jet:before { content: "\f0fb"; } .fa-beer:before { content: "\f0fc"; } .fa-h-square:before { content: "\f0fd"; } .fa-plus-square:before { content: "\f0fe"; } .fa-angle-double-left:before { content: "\f100"; } .fa-angle-double-right:before { content: "\f101"; } .fa-angle-double-up:before { content: "\f102"; } .fa-angle-double-down:before { content: "\f103"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-angle-down:before { content: "\f107"; } .fa-desktop:before { content: "\f108"; } .fa-laptop:before { content: "\f109"; } .fa-tablet:before { content: "\f10a"; } .fa-mobile-phone:before, .fa-mobile:before { content: "\f10b"; } .fa-circle-o:before { content: "\f10c"; } .fa-quote-left:before { content: "\f10d"; } .fa-quote-right:before { content: "\f10e"; } .fa-spinner:before { content: "\f110"; } .fa-circle:before { content: "\f111"; } .fa-mail-reply:before, .fa-reply:before { content: "\f112"; } .fa-github-alt:before { content: "\f113"; } .fa-folder-o:before { content: "\f114"; } .fa-folder-open-o:before { content: "\f115"; } .fa-smile-o:before { content: "\f118"; } .fa-frown-o:before { content: "\f119"; } .fa-meh-o:before { content: "\f11a"; } .fa-gamepad:before { content: "\f11b"; } .fa-keyboard-o:before { content: "\f11c"; } .fa-flag-o:before { content: "\f11d"; } .fa-flag-checkered:before { content: "\f11e"; } .fa-terminal:before { content: "\f120"; } .fa-code:before { content: "\f121"; } .fa-mail-reply-all:before, .fa-reply-all:before { content: "\f122"; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: "\f123"; } .fa-location-arrow:before { content: "\f124"; } .fa-crop:before { content: "\f125"; } .fa-code-fork:before { content: "\f126"; } .fa-unlink:before, .fa-chain-broken:before { content: "\f127"; } .fa-question:before { content: "\f128"; } .fa-info:before { content: "\f129"; } .fa-exclamation:before { content: "\f12a"; } .fa-superscript:before { content: "\f12b"; } .fa-subscript:before { content: "\f12c"; } .fa-eraser:before { content: "\f12d"; } .fa-puzzle-piece:before { content: "\f12e"; } .fa-microphone:before { content: "\f130"; } .fa-microphone-slash:before { content: "\f131"; } .fa-shield:before { content: "\f132"; } .fa-calendar-o:before { content: "\f133"; } .fa-fire-extinguisher:before { content: "\f134"; } .fa-rocket:before { content: "\f135"; } .fa-maxcdn:before { content: "\f136"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-html5:before { content: "\f13b"; } .fa-css3:before { content: "\f13c"; } .fa-anchor:before { content: "\f13d"; } .fa-unlock-alt:before { content: "\f13e"; } .fa-bullseye:before { content: "\f140"; } .fa-ellipsis-h:before { content: "\f141"; } .fa-ellipsis-v:before { content: "\f142"; } .fa-rss-square:before { content: "\f143"; } .fa-play-circle:before { content: "\f144"; } .fa-ticket:before { content: "\f145"; } .fa-minus-square:before { content: "\f146"; } .fa-minus-square-o:before { content: "\f147"; } .fa-level-up:before { content: "\f148"; } .fa-level-down:before { content: "\f149"; } .fa-check-square:before { content: "\f14a"; } .fa-pencil-square:before { content: "\f14b"; } .fa-external-link-square:before { content: "\f14c"; } .fa-share-square:before { content: "\f14d"; } .fa-compass:before { content: "\f14e"; } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: "\f150"; } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: "\f151"; } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: "\f152"; } .fa-euro:before, .fa-eur:before { content: "\f153"; } .fa-gbp:before { content: "\f154"; } .fa-dollar:before, .fa-usd:before { content: "\f155"; } .fa-rupee:before, .fa-inr:before { content: "\f156"; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: "\f157"; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: "\f158"; } .fa-won:before, .fa-krw:before { content: "\f159"; } .fa-bitcoin:before, .fa-btc:before { content: "\f15a"; } .fa-file:before { content: "\f15b"; } .fa-file-text:before { content: "\f15c"; } .fa-sort-alpha-asc:before { content: "\f15d"; } .fa-sort-alpha-desc:before { content: "\f15e"; } .fa-sort-amount-asc:before { content: "\f160"; } .fa-sort-amount-desc:before { content: "\f161"; } .fa-sort-numeric-asc:before { content: "\f162"; } .fa-sort-numeric-desc:before { content: "\f163"; } .fa-thumbs-up:before { content: "\f164"; } .fa-thumbs-down:before { content: "\f165"; } .fa-youtube-square:before { content: "\f166"; } .fa-youtube:before { content: "\f167"; } .fa-xing:before { content: "\f168"; } .fa-xing-square:before { content: "\f169"; } .fa-youtube-play:before { content: "\f16a"; } .fa-dropbox:before { content: "\f16b"; } .fa-stack-overflow:before { content: "\f16c"; } .fa-instagram:before { content: "\f16d"; } .fa-flickr:before { content: "\f16e"; } .fa-adn:before { content: "\f170"; } .fa-bitbucket:before { content: "\f171"; } .fa-bitbucket-square:before { content: "\f172"; } .fa-tumblr:before { content: "\f173"; } .fa-tumblr-square:before { content: "\f174"; } .fa-long-arrow-down:before { content: "\f175"; } .fa-long-arrow-up:before { content: "\f176"; } .fa-long-arrow-left:before { content: "\f177"; } .fa-long-arrow-right:before { content: "\f178"; } .fa-apple:before { content: "\f179"; } .fa-windows:before { content: "\f17a"; } .fa-android:before { content: "\f17b"; } .fa-linux:before { content: "\f17c"; } .fa-dribbble:before { content: "\f17d"; } .fa-skype:before { content: "\f17e"; } .fa-foursquare:before { content: "\f180"; } .fa-trello:before { content: "\f181"; } .fa-female:before { content: "\f182"; } .fa-male:before { content: "\f183"; } .fa-gittip:before, .fa-gratipay:before { content: "\f184"; } .fa-sun-o:before { content: "\f185"; } .fa-moon-o:before { content: "\f186"; } .fa-archive:before { content: "\f187"; } .fa-bug:before { content: "\f188"; } .fa-vk:before { content: "\f189"; } .fa-weibo:before { content: "\f18a"; } .fa-renren:before { content: "\f18b"; } .fa-pagelines:before { content: "\f18c"; } .fa-stack-exchange:before { content: "\f18d"; } .fa-arrow-circle-o-right:before { content: "\f18e"; } .fa-arrow-circle-o-left:before { content: "\f190"; } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: "\f191"; } .fa-dot-circle-o:before { content: "\f192"; } .fa-wheelchair:before { content: "\f193"; } .fa-vimeo-square:before { content: "\f194"; } .fa-turkish-lira:before, .fa-try:before { content: "\f195"; } .fa-plus-square-o:before { content: "\f196"; } .fa-space-shuttle:before { content: "\f197"; } .fa-slack:before { content: "\f198"; } .fa-envelope-square:before { content: "\f199"; } .fa-wordpress:before { content: "\f19a"; } .fa-openid:before { content: "\f19b"; } .fa-institution:before, .fa-bank:before, .fa-university:before { content: "\f19c"; } .fa-mortar-board:before, .fa-graduation-cap:before { content: "\f19d"; } .fa-yahoo:before { content: "\f19e"; } .fa-google:before { content: "\f1a0"; } .fa-reddit:before { content: "\f1a1"; } .fa-reddit-square:before { content: "\f1a2"; } .fa-stumbleupon-circle:before { content: "\f1a3"; } .fa-stumbleupon:before { content: "\f1a4"; } .fa-delicious:before { content: "\f1a5"; } .fa-digg:before { content: "\f1a6"; } .fa-pied-piper:before { content: "\f1a7"; } .fa-pied-piper-alt:before { content: "\f1a8"; } .fa-drupal:before { content: "\f1a9"; } .fa-joomla:before { content: "\f1aa"; } .fa-language:before { content: "\f1ab"; } .fa-fax:before { content: "\f1ac"; } .fa-building:before { content: "\f1ad"; } .fa-child:before { content: "\f1ae"; } .fa-paw:before { content: "\f1b0"; } .fa-spoon:before { content: "\f1b1"; } .fa-cube:before { content: "\f1b2"; } .fa-cubes:before { content: "\f1b3"; } .fa-behance:before { content: "\f1b4"; } .fa-behance-square:before { content: "\f1b5"; } .fa-steam:before { content: "\f1b6"; } .fa-steam-square:before { content: "\f1b7"; } .fa-recycle:before { content: "\f1b8"; } .fa-automobile:before, .fa-car:before { content: "\f1b9"; } .fa-cab:before, .fa-taxi:before { content: "\f1ba"; } .fa-tree:before { content: "\f1bb"; } .fa-spotify:before { content: "\f1bc"; } .fa-deviantart:before { content: "\f1bd"; } .fa-soundcloud:before { content: "\f1be"; } .fa-database:before { content: "\f1c0"; } .fa-file-pdf-o:before { content: "\f1c1"; } .fa-file-word-o:before { content: "\f1c2"; } .fa-file-excel-o:before { content: "\f1c3"; } .fa-file-powerpoint-o:before { content: "\f1c4"; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: "\f1c5"; } .fa-file-zip-o:before, .fa-file-archive-o:before { content: "\f1c6"; } .fa-file-sound-o:before, .fa-file-audio-o:before { content: "\f1c7"; } .fa-file-movie-o:before, .fa-file-video-o:before { content: "\f1c8"; } .fa-file-code-o:before { content: "\f1c9"; } .fa-vine:before { content: "\f1ca"; } .fa-codepen:before { content: "\f1cb"; } .fa-jsfiddle:before { content: "\f1cc"; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: "\f1cd"; } .fa-circle-o-notch:before { content: "\f1ce"; } .fa-ra:before, .fa-rebel:before { content: "\f1d0"; } .fa-ge:before, .fa-empire:before { content: "\f1d1"; } .fa-git-square:before { content: "\f1d2"; } .fa-git:before { content: "\f1d3"; } .fa-hacker-news:before { content: "\f1d4"; } .fa-tencent-weibo:before { content: "\f1d5"; } .fa-qq:before { content: "\f1d6"; } .fa-wechat:before, .fa-weixin:before { content: "\f1d7"; } .fa-send:before, .fa-paper-plane:before { content: "\f1d8"; } .fa-send-o:before, .fa-paper-plane-o:before { content: "\f1d9"; } .fa-history:before { content: "\f1da"; } .fa-genderless:before, .fa-circle-thin:before { content: "\f1db"; } .fa-header:before { content: "\f1dc"; } .fa-paragraph:before { content: "\f1dd"; } .fa-sliders:before { content: "\f1de"; } .fa-share-alt:before { content: "\f1e0"; } .fa-share-alt-square:before { content: "\f1e1"; } .fa-bomb:before { content: "\f1e2"; } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: "\f1e3"; } .fa-tty:before { content: "\f1e4"; } .fa-binoculars:before { content: "\f1e5"; } .fa-plug:before { content: "\f1e6"; } .fa-slideshare:before { content: "\f1e7"; } .fa-twitch:before { content: "\f1e8"; } .fa-yelp:before { content: "\f1e9"; } .fa-newspaper-o:before { content: "\f1ea"; } .fa-wifi:before { content: "\f1eb"; } .fa-calculator:before { content: "\f1ec"; } .fa-paypal:before { content: "\f1ed"; } .fa-google-wallet:before { content: "\f1ee"; } .fa-cc-visa:before { content: "\f1f0"; } .fa-cc-mastercard:before { content: "\f1f1"; } .fa-cc-discover:before { content: "\f1f2"; } .fa-cc-amex:before { content: "\f1f3"; } .fa-cc-paypal:before { content: "\f1f4"; } .fa-cc-stripe:before { content: "\f1f5"; } .fa-bell-slash:before { content: "\f1f6"; } .fa-bell-slash-o:before { content: "\f1f7"; } .fa-trash:before { content: "\f1f8"; } .fa-copyright:before { content: "\f1f9"; } .fa-at:before { content: "\f1fa"; } .fa-eyedropper:before { content: "\f1fb"; } .fa-paint-brush:before { content: "\f1fc"; } .fa-birthday-cake:before { content: "\f1fd"; } .fa-area-chart:before { content: "\f1fe"; } .fa-pie-chart:before { content: "\f200"; } .fa-line-chart:before { content: "\f201"; } .fa-lastfm:before { content: "\f202"; } .fa-lastfm-square:before { content: "\f203"; } .fa-toggle-off:before { content: "\f204"; } .fa-toggle-on:before { content: "\f205"; } .fa-bicycle:before { content: "\f206"; } .fa-bus:before { content: "\f207"; } .fa-ioxhost:before { content: "\f208"; } .fa-angellist:before { content: "\f209"; } .fa-cc:before { content: "\f20a"; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: "\f20b"; } .fa-meanpath:before { content: "\f20c"; } .fa-buysellads:before { content: "\f20d"; } .fa-connectdevelop:before { content: "\f20e"; } .fa-dashcube:before { content: "\f210"; } .fa-forumbee:before { content: "\f211"; } .fa-leanpub:before { content: "\f212"; } .fa-sellsy:before { content: "\f213"; } .fa-shirtsinbulk:before { content: "\f214"; } .fa-simplybuilt:before { content: "\f215"; } .fa-skyatlas:before { content: "\f216"; } .fa-cart-plus:before { content: "\f217"; } .fa-cart-arrow-down:before { content: "\f218"; } .fa-diamond:before { content: "\f219"; } .fa-ship:before { content: "\f21a"; } .fa-user-secret:before { content: "\f21b"; } .fa-motorcycle:before { content: "\f21c"; } .fa-street-view:before { content: "\f21d"; } .fa-heartbeat:before { content: "\f21e"; } .fa-venus:before { content: "\f221"; } .fa-mars:before { content: "\f222"; } .fa-mercury:before { content: "\f223"; } .fa-transgender:before { content: "\f224"; } .fa-transgender-alt:before { content: "\f225"; } .fa-venus-double:before { content: "\f226"; } .fa-mars-double:before { content: "\f227"; } .fa-venus-mars:before { content: "\f228"; } .fa-mars-stroke:before { content: "\f229"; } .fa-mars-stroke-v:before { content: "\f22a"; } .fa-mars-stroke-h:before { content: "\f22b"; } .fa-neuter:before { content: "\f22c"; } .fa-facebook-official:before { content: "\f230"; } .fa-pinterest-p:before { content: "\f231"; } .fa-whatsapp:before { content: "\f232"; } .fa-server:before { content: "\f233"; } .fa-user-plus:before { content: "\f234"; } .fa-user-times:before { content: "\f235"; } .fa-hotel:before, .fa-bed:before { content: "\f236"; } .fa-viacoin:before { content: "\f237"; } .fa-train:before { content: "\f238"; } .fa-subway:before { content: "\f239"; } .fa-medium:before { content: "\f23a"; } /****** FILE: themes/gamry/css/layout.css *****/ body { background:#e7f3fb; font-family: var(--gm-font-body); } body > iframe { display:block; height:0px; } div.wrap { width:100%; padding:0 2%; } div.wrap > * { width:100%; max-width:1230px; margin: 0 auto; display:block; } #cookie-warning-wrap { background:#003f69; position:relative; z-index:100; } #cookie-warning { padding:20px 70px 20px 0; color:#ecf0f2; font-size:15px; line-height:1.1em; position:relative; } #cookie-warning p { margin:0; } #cookie-warning a { color:#A8C4EB; } #cookie-warning a:hover { color:#A8C4EB; text-decoration:underline; } #accept-cookies { display:block; color:#ecf0f2 !important; position:absolute; right:0; top:50%; transform:translateY(-50%); line-height:1em; padding:6px 10px; border:1px solid #ecf0f2; border-radius:4px; font-weight:600; } #accept-cookies:hover { background:#ecf0f2; color:#003f69 !important; text-decoration:none !important; } #site-alert { display:none; position:fixed; bottom:0; right:0; transform:translateX(100%); padding:1.5%; z-index:99999; width:400px; max-width:100%; } #site-alert.show { transition:all ease 1s; display:block; transform:translateX(0); transition-delay:100ms; } #site-alert.hide { transform:translateX(100%); transition:all linear 300ms; } #site-alert .site-alert__container { background:#fff; border-radius:15px; box-shadow:2px 2px 10px 0 rgba(0,0,0,0.5); border:1px solid #dedede; padding:30px; position:relative; } #site-alert .site-alert__close { position:absolute; top:0; right:0; font-size:60px; color:#000; width:30px; height:40px; line-height:40px; text-align:center; } #site-alert .site-alert__close:hover { text-decoration:none; color:#000; } #site-alert .site-alert__content { } #site-alert .site-alert__message { font-size:18px; line-height:1.3; } #site-alert .site-alert__message * { text-align:center; } #site-alert .site-alert__message .logo { display:block; margin:20px auto; max-width:100%; width:250px; } #site-alert .site-alert__message strong { font-size:30px; display:block; } /*-- Site Search --*/ #site_search { display:none; z-index:1000000; position:absolute; top:0; right:0; border:3px solid #f8b016; width:300px; background:#FFF; -webkit-border-radius:0 0 15px 15px; border-radius:0 0 15px 15px; padding:5px 15px 15px; border-top:none; } #site_search:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } #site_search > span { font-size:20px; font-weight:500; color:#003f69; } #close_search { display:block; float:right; height:15px; width:15px; position:relative; border:none; background:none; padding:0; cursor:pointer; } #close_search:before, #close_search:after { display:block; content:''; height:0px; right:0; background:#ccc; border-top:1px solid #ccc; border-bottom:1px solid #CCC; width:120%; position:absolute; top:50%; transform-origin:center; } #close_search:before { transform:rotate(45deg); } #close_search:after { transform:rotate(-45deg); } #close_search:hover:before, #close_search:hover:after { border-color:#999; } #site_search .field { width:100%; clear:both; padding-top:6px; } #site_search .field input { display:block; height:30px; padding:0 6px; width:100%; border:1px solid #aaa; } #site_search_submit { display:block; float:right; color:#003f69 !important; background:none; font-weight:500; text-transform:uppercase; line-height:16px; font-size:16px; padding:6px 12px; border:1px solid #cccccc; margin-top:5px; } #site_search_submit:hover, #site_search_submit:focus { color:#FFF !important; background:#003f69; text-decoration:none !important; } #site_search input[type=text]::-webkit-input-placeholder { color:#bbb; font-style:italic; } #site_search input[type=text]:-moz-placeholder { color:#bbb; font-style:italic; } #site_search input[type=text]::-moz-placeholder { color:#bbb; font-style:italic; } #site_search input[type=text]:-ms-input-placeholder { color:#bbb; font-style:italic; } #close_search:before, #close_search:after, #site_search_submit { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } /*-- Header --*/ #header_wrap { background:#FFF; border-top:8px solid #f8b016; overflow:visible !important; } #header_wrap > header { padding:5px 0 0; position:relative; } #header_wrap > header:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } #logo { display:block; float:left; margin-top:25px; margin-bottom:15px; } #logo:hover { text-decoration:none; } #logo > img { display:block; max-width:100%; } #head_right { float:right; } #show_search { float:left; background:#0f3c6b; margin:2px 10px 0 0; display:block; width:24px; height:24px; -webkit-border-radius:50%; border-radius:50%; border:1px solid #07446d; -webkit-box-shadow:inset 0 0 0 1px #FFF; box-shadow:inset 0 0 0 1px #FFF; overflow:hidden; position:relative; padding:0; cursor:pointer; } #show_search .fa { display:block; position:relative; z-index:1; color:#fff; font-size:11px; line-height:24px; text-align:center; width:100%; } #show_search:before { display:block; position:absolute; content:''; top:2px; right:2px; bottom:2px; left:2px; -webkit-border-radius:50%; border-radius:50%; background: #1d77b2; /* Old browsers */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZDc3YjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMGYzYzZiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-radial-gradient(center, ellipse cover, #1d77b2 0%, #0f3c6b 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, #1d77b2 0%,#0f3c6b 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, #1d77b2 0%,#0f3c6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d77b2', endColorstr='#0f3c6b',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } #show_search:hover { text-decoration:none; } #show_search:hover:before { opacity:0; } #show_search img { display:block; position:relative; z-index:1; } /*#lang_select { display:block; list-style:none; padding:0; margin:0; float:right; } #lang_select:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } #lang_select > li { display:block; float:left; margin:0 0 0 6px; } #lang_select > li > a { display:block; } #lang_select > li > a:hover { text-decoration:none; } #lang_select > li > a > img { display:block; } #lang_select > li > a:hover > img { -moz-transform: translateY(-5px); -webkit-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }*/ #lang_select { float:right; border:1px solid #eee; -webkit-border-radius:4px; border-radius:4px; position:relative; font-size:16px; } #lang_select > .current_lang { display:block; height:30px; line-height:30px; padding:0 0 0 10px; } #lang_select > .current_lang:hover { cursor:pointer; } #lang_select .expand { display:block; height:30px; width:30px; position:relative; float:right; } #lang_select .expand:before { display:block; position:absolute; content:''; left:10px; top:7px; border-right:1px solid #bbb; border-bottom:1px solid #bbb; width:10px; height:10px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #lang_select > .current_lang:hover .expand:before, #lang_select.open > .current_lang .expand:before { border-color:#666; } #lang_select > ul { display:none; list-style:none; overflow:hidden; min-width:100%; background:#FFF; z-index:2; padding:0; margin:0; position:absolute; right:0; border:1px solid #ccc; -webkit-border-radius:4px 0 4px 4px; border-radius:4px 0 4px 4px; } #lang_select > ul li { display:block; padding:0; margin:0; } #lang_select > ul a { display:block; text-align:right; color:#000; padding:5px 10px; } #lang_select > ul a:hover { text-decoration:none; background:#ddd; } header > nav { display:block; margin-left:275px; } header > nav:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } header > nav > ul { display:block; list-style:none; padding:0; margin:0; line-height:0; float:right; } header > nav > ul:after { display:block; width:100%; height:0; visibility:hidden; content:''; height:0px; } header > nav > ul > li { display:block; margin:0 35px 0 0; position:relative; float:left; } header > nav > ul > li > a { display:block; font-size:18px; color:#003f69; height:40px; line-height:36px; } header > nav > ul > li:hover > a, header > nav > ul > li > a:hover, header > nav > ul > li > a.section, header > nav > ul > li > a.current { text-decoration:none !important; color:#a9770a; } header > nav li.tab-link { position:absolute; bottom:0; right:0; margin:0; float:none; } header > nav li.tab-link > a { font-size:19px; font-weight:500; height:auto; line-height:30px; position:relative; padding:2px 15px 0 0; border-radius:6px 6px 0 0; } header > nav li.tab-link > a:hover { padding-top:5px !important; } header > nav li.tab-link > a:before { display:block; position:absolute; left:8px; bottom:0; height:27px; } header > nav #client-login > a { color:#fabc38; padding-left:37px; background-color:#003f69; } header > nav #client-login > a:hover { color:#fabc38; } header > nav #client-login > a:before { font-family: "FontAwesome"; content: "\f233"; height: 100%; display: flex; align-items: flex-end; font-size: 22px; } header > nav #head-shop { right:240px; } header > nav #head-shop > a { color:#003f69; padding-left:44px; background-color:#fabc38; } header > nav #head-shop > a:hover { color:#003f69; } header > nav #head-shop > a:before { font-family: "FontAwesome"; content: "\f07a"; height: 100%; display: flex; align-items: flex-end; font-size: 25px; } /*-- Dropdowns are styled below --*/ .nav_toggle { display:none; } header > nav li.tab-link > a, #show_search:before, #lang_select > li > a > img { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } /*-- Nav --*/ #nav_wrap { background:#ecf0f2; position:relative; min-height:10px; overflow:visible !important; } #nav_wrap > nav { } nav.desktop { } nav.desktop > ul { display:block; list-style:none; text-align:justify; font-size:1px; height:55px; } nav.desktop > ul:after { display:inline-block; width:100%; content:''; height:0; visibility:hidden; } nav.desktop > ul > li { display:inline-block; margin:0; position:relative; vertical-align:top; } nav.desktop > ul > li > a { display:inline-block; vertical-align:top; font-size:20px; color:#003f69; line-height:55px; height:55px; padding:0; font-weight:500; position:relative; text-align:center; } nav.desktop > ul > li > a:after { display:block; position:absolute; content:''; left:0; right:0; bottom:0; height:0; background:#f8b016; } nav.desktop > ul > li > a:hover { text-decoration:none; } nav.desktop > ul > li:hover > a:after, nav.desktop > ul > li > a.section:after, nav.desktop > ul > li > a.current:after { height:6px; } nav.desktop > ul > li > a:after { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } /*-- Dropdowns --*/ header > nav .dropdown, nav.desktop .dropdown { display:block; list-style:none; position:absolute; z-index:200000; background:#FFF; width:225px; left:50%; -webkit-box-shadow:0 2px 5px -2px #000; box-shadow:0 2px 5px -2px #000; border-bottom:3px solid #f8b016; -webkit-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } header > nav .dropdown > li, nav.desktop .dropdown > li { display:block; margin:0; } header > nav .dropdown > li > a, nav.desktop .dropdown li > a { display:block; font-size:15px; color:#003f69; padding:10px 15px; text-align:center; position:relative; overflow:hidden; line-height:17px; } header > nav .dropdown > li > a:before, nav.desktop .dropdown li > a:before { position:absolute; left:-30px; top:30%; content:'\f0da'; color:#003f69; font-family:FontAwesome; } header > nav .dropdown > li > a:after, nav.desktop .dropdown li > a:after { position:absolute; right:-30px; top:30%; content:'\f0d9'; color:#003f69; font-family:FontAwesome; } header > nav .dropdown > li > a:hover, nav.desktop .dropdown li > a:hover { text-decoration:none; } header > nav .dropdown > li > a:hover:before, nav.desktop .dropdown li > a:hover:before { left:10px; } header > nav .dropdown > li > a:hover:after, nav.desktop .dropdown li > a:hover:after { right:10px; } header > nav .dropdown > li > a:hover:before, header > nav .dropdown > li > a:hover:after, nav.desktop .dropdown li > a:hover:before, nav.desktop .dropdown li > a:hover:after { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } /** Flyout menus removed — the desktop product/company nav no longer nests a second level. All multi-level menus now render as a single flat mega panel (see Includes/Dropdown.ss + .dropdown.mega rules in redesign.css). **/ nav.mobile .dropdown > li > ul > li { list-style: none;; margin-left: 1em; } /*-- Main --*/ #main_wrap { background:#FFF; } #main { } #page_type { padding:4% 0; } #page_type:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } .typography .product-top h1, .typography .page-title > h1, .typography .product-name > h1, #page_type .bio_information > h1:first-of-type, #page_type > h1:first-of-type, #page_left > h1:first-of-type, #page_left > div > h1:first-of-type, #minisite_right > h1:first-of-type { font-size:36px; font-weight:500; line-height:1.1em; color:#003f69; font-style:italic; } #page_left { margin-right:370px; } #page_left > .inside { float:left; width:100%; } #page_right { float:right; width:330px; padding:20px; border:1px #d6e5f0 solid; border-bottom: 6px solid #f8b016; -webkit-border-radius: 2px 2px 3px 3px; border-radius: 2px 2px 3px 3px; background: #ecf0f2; /* Old browsers */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZWNmMGYyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(-45deg, #ecf0f2 0%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #ecf0f2 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #ecf0f2 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf0f2', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } #page_right:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } .page_columns { clear:both; } .page_columns:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } .page_col { float:left; margin-left:2%; } * > .page_col:first-of-type { margin-left:0; } .cols_2 { width:48%; } .cols_3 { width:32%; } #bottom_content { clear:both; padding-top:30px; } .contentSearchForm { position: relative; max-width: 100% !important; margin-bottom: 30px; } .contentSearchForm input.text { color: #000; font-weight: normal; font-size: 17px; padding: 3px 30px 3px 8px; width: 100% !important; border: 2px solid #cccccc; border-radius: 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .contentSearchForm input.text::-webkit-input-placeholder {color:#345FA4;font-style:italic;} .contentSearchForm input.text:-moz-placeholder {color:#345FA4;font-style:italic;} .contentSearchForm input.text::-moz-placeholder {color:#345FA4;font-style:italic;} .contentSearchForm input.text:-ms-input-placeholder {color:#345FA4;font-style:italic;} .contentSearchForm input.btn {position:absolute;top:5px;right:5px;width:22px;height:21px;background:url(/themes/gamry/images/tech-support-search-button.png) no-repeat 0 0;padding:0;cursor:pointer;border:none;} .cta-widget { text-align:center; } /*-- Market Applications --*/ .market-apps { display:block; list-style:none; padding:40px 0 0; text-align:justify; font-size:1px; } .market-apps:after { display:inline-block; width:100%; content:''; height:0; visibility:hidden; } .market-apps > li { display:inline-block; margin:0 0 2%; width:32%; position:relative; } .market-apps a { display:block; color:#FFF !important; } .market-apps a:hover { text-decoration:none; color:#FFF !important; } .typography .market-apps a, .typography .market-apps a *, .typography .market-apps a:hover, .typography .market-apps a:hover * { color:#FFF !important; text-decoration:none !important; } .typography .market-apps h3, .market-apps h3 { display:block; padding:15px 5px !important; margin:0 !important; background:#023150; color:#FFF !important; text-align:center; text-transform:uppercase; font-size:19px; font-weight:500; line-height:1em; } .market-apps .btm { padding-top:63%; position:relative; overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:cover; } .market-apps .info { position:absolute; overflow:hidden; height:100%; left:0; right:0; top:102%; background:rgba(0,0,0,0.75); padding:5%; } .market-apps .info p { display:block; margin:0 !important; color:#FFF; font-size:16px; line-height:1.2em; text-align:center; position:relative; top:-200%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .market-apps a:hover .info { top:0; } .market-apps a:hover .info p { top:50%; } .market-apps .info, .market-apps .info p { -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } @media(max-width:1000px){ .market-apps .info p { font-size:1.45vw; } } @media(max-width:800px){ .market-apps h3 { font-size:15px; } } @media (max-width:600px){ .market-apps { text-align:center; } .market-apps > li { width:40%; margin:0 2% 4%; } .market-apps h3 { font-size:19px; } .market-apps .info p { font-size:2.5vw; } } @media(max-width:400px){ .market-apps > li { max-width:230px; width:80%; margin:0 auto 4%; display:block; } .market-apps h3 { font-size:19px; } .market-apps .info p { font-size:3.8vw; } } /*-- Footer --*/ #footer_wrap { border-bottom:8px solid #f8b016; position:relative; } #footer_wrap:before { display:block; position:absolute; content:''; top:0; right:0; bottom:0; left:0; z-index:1; background:url(/themes/gamry/images/global/footer_wrap_before.png) top center repeat-x; } #footer_wrap:after { display:block; position:absolute; content:''; top:60px; right:0; bottom:0; left:60%; background:url(/themes/gamry/images/global/footer_wrap_after.png) top left no-repeat; } #footer_wrap > footer { padding:50px 0 75px; position:relative; z-index: 5; } #footer_wrap > footer:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } #social { display:block; padding:0; margin:0; list-style:none; text-align:center; } #social li { display:inline-block; margin:10px 6px 0; } #social a { display:block; width:48px; height:48px; background-color:#003f69; background-position:top center; background-repeat:no-repeat; text-indent:-99999px; -webkit-border-radius:50%; border-radius:50%; overflow:hidden; position:relative; } #social a:hover { text-decoration:none; background-color:#FFF; -webkit-box-shadow:0 0 0 3px #003f69; box-shadow:0 0 0 3px #003f69; } #social a:before { display:block; position:absolute; top:0; right:0; bottom:0; left:0; content:''; background-position:bottom center; background-repeat:no-repeat; opacity:0; } #social a:hover:before { opacity:1; } #icon_fb,#icon_fb:before { background-image:url(/themes/gamry/images/global/icon_fb.png); } #icon_li,#icon_li:before { background-image:url(/themes/gamry/images/global/icon_li.png); } #icon_tw,#icon_tw:before { background-image:url(/themes/gamry/images/global/icon_tw.png); } #icon_x,#icon_x:before { background-image:url(/themes/gamry/images/global/icon_x.png); } #icon_gp,#icon_gp:before { background-image:url(/themes/gamry/images/global/icon_gp.png); } #icon_gmb,#icon_gmb:before { background-image:url(/themes/gamry/images/global/icon_gmb.png); } #icon_in,#icon_in:before { background-image:url(/themes/gamry/images/global/icon_in.png); } #icon_yt,#icon_yt:before { background-image:url(/themes/gamry/images/global/icon_yt.png); } #icon_it,#icon_it:before { background-image:url(/themes/gamry/images/global/icon_it.png); } footer > address { display:block; float:left; color:#003f69; font-size:16px; line-height:26px; } footer > address img { display:block; max-width:100%; margin-bottom:10px; } footer > address h6 { text-transform:uppercase; display:inline-block; margin:0; font-size:16px; line-height:26px; } footer > address a { color:#003f69; text-decoration:none; } footer > address a:hover { color:#003f69; text-decoration:none; cursor:text; } footer > nav { display:block; margin:45px 0 0 15%; padding:0 0 0 4%; border-left:1px solid #7fa2b9; } footer > nav p { display:none; } footer > nav > ul { display:block; list-style:none; padding: 0; margin:0; text-align:justify; font-size:1px; } footer > nav > ul:after { content:""; display:inline-block; height:0; visibility:hidden; width:100%; } footer > nav > ul > li { display:inline-block; margin:0 0 20px 0; } footer > nav > ul > li > h6 { text-transform:uppercase; margin:0; font-weight:500; font-size:16px; line-height:26px; display:inline-block; } footer > nav ul ul { display:block; list-style:none; margin:0; padding:0; } footer > nav ul ul li { display:block; margin:0; line-height:26px; font-size:16px; } footer > nav a { color:#003f69; } footer > nav a:hover { color:#003f69; text-decoration:underline; } #copyright { clear:both; padding:70px 0 0; text-align:center; font-size:12px; line-height:16px; color:#003f69; margin:0; } #copyright a { color:#003f69; } #copyright a:hover { color:#003f69; } #social a, #social a:before { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } #static-flag { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index: 25000; } #static-flag ul { display:flex; flex-direction:column; justify-content: flex-end; align-items:flex-end; list-style: none; margin:0; padding:0; } #static-flag li { display:block; margin:2px 0; padding:0; } #static-flag a { display:block; background:#003f69; border-radius:8px 0 0 8px; position:relative; } #static-flag svg { display:block; width:30px; min-width:30px; } #static-flag .icon { display:block; padding:10px; background:#003f69; position: relative; border-radius:8px 0 0 8px; transition:all ease 300ms; } #static-flag .text { display:block; color:#FFFFFF; height:100%; transition:all ease 300ms; white-space: nowrap; font-size:20px; padding:12px 15px 10px 10px; background:#003f69; border-radius:8px 0 0 8px; position: absolute; right:40px; transform:translateX(100%); } #static-flag a:hover .icon { padding-right:15px; } #static-flag a:hover .text { transform:translateX(0); } @media(max-width:1350px) { #static-flag { display:none; } } /*-- Global --*/ /* Product Reviews */ .product-review { overflow:hidden; padding:10px 0; } .typography .product-review h4 { margin:0 0 10px; font-size:24px; line-height:1.1em; font-weight:500 !important; } .typography .product-review h4:before { content:'\201C'; font-size:40px; color:#f8b016; vertical-align:middle; } .typography .product-review h4:after { content:'\201D'; font-size:40px; color:#f8b016; vertical-align:middle; } .product-review .org { line-height:1em; } .product-review .rating { vertical-align:middle; } .product-review .rating .stars { display:inline-block; background:#ccc; position:relative; width:90px; margin-left:10px; vertical-align:text-bottom; } .product-review .rating .stars img { display:block; max-width:100%; margin:0; position:relative; z-index:2; } .product-review .rating .stars .fill { display:block; position:absolute; top:0; left:0; bottom:0; background:#f8b016; } .typography .product-review p { margin-bottom:8px; } .typography .product-review p.app { line-height:1.1em; } .typography .product-review p.comment { font-size:17px; margin-bottom:3px; } .reviews-provider { font-size:14px; text-align:right; } .reviews-provider a, .reviews-provider a:hover { text-decoration:none; } /*-- Widgets --*/ .Logicbrush_UserFormsUtils_Widgets_UserFormWidget > h3, .EmbeddedFormWidget > h3, .DynamicsFormWidget > h3 { color:#FFF !important; font-size:23px; text-align:center; font-size:23px; font-weight:500 !important; padding:8px 5px !important; background:#013773; border-radius:8px 8px 0 0; } /*-- Old --*/ .tech-table { padding-left:0px !important; } @media(min-width:900px){ #technical-support { border-collapse: collapse; margin-bottom: 60px; } #technical-support .data-img { padding: 20px 20px 0 0; vertical-align: top; } #technical-support .data-img img { min-width:50px; } #technical-support .Row { border-bottom: 1px solid #999999; } #technical-support .Row:last-child { border-bottom: none; } #technical-support .Row .data { padding: 20px 15px 5px 0; } #technical-support .Row div:nth-child(2) { padding-right: 30px; border-right: 1px solid #999999; } #technical-support .Row div:nth-child(3) { padding-left: 30px; } #technical-support .Row:first-child .data-img { padding-top: 10px; } #technical-support .Row:first-child .data { padding-top: 10px; } #technical-support .Row:last-child .data { padding-bottom: 0; } #technical-support .Row .data h3 { margin-bottom: 5px; } } @media(max-width:900px){ #technical-support .data-img { text-align: center; margin-bottom: 15px; } #technical-support .data { text-align:center; margin-bottom: 40px; padding-right: 0 !important; } } /*#left_container{width:380px;float:left;} #left_container .announcements{width:380px;float:left;} #left_container .announcements h2{font:normal 20px/22px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#345fa4;padding-bottom:10px;} #left_container .announcements ul{width:368px;float:left;list-style:none;background:#f5f8fb;padding:6px;padding-bottom:0;} #left_container .announcements ul li{width:368px;float:left;margin-bottom:6px;background:#fff;padding:10px 0;} #left_container .announcements ul li h5{width:50px;float:left;text-align:center;font:normal 11px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#b8b8b9;text-transform:uppercase;padding-top:2px;} #left_container .announcements ul li h5 img{float:none;margin-bottom:0;} #left_container .announcements ul li h5 span{width:100%;float:left;text-align:center;} #left_container .announcements ul li .text_side{width:310px;float:left;font-size:12px !important;} #left_container .announcements ul li .text_side div,#left_container .announcements ul li .text_side p{font-size:12px;line-height:16px;} #left_container .announcements ul li h3{font:normal 14px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#333;padding-bottom:5px;} #left_container .announcements ul li h3 a{color:#333;} #left_container .announcements ul li p{font:normal 12px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#444f5a;}*/ #left_container .sign_up{width:360px;float:left;background:#83b5db url(/themes/gamry/images/blue_box.png) repeat-x 0 0;padding:10px 10px 0;} #left_container .sign_up form{width:360px;float:left;} #left_container .sign_up form label{width:360px;float:left;font:normal 16px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#fff;} #left_container .sign_up form h4{width:360px;float:left;font:normal 13px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#fff;padding-bottom:6px;} #left_container .sign_up form .input_bg{width:235px;float:left;height:36px;padding:0 9px 8px 5px;background:url(/themes/gamry/images/input_bg.jpg) no-repeat 0 0;} #left_container .sign_up form input{width:235px;float:left;background:none;border:none;height:26px;font:normal 13px/26px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#333;} #left_container .sign_up form input.btn{width:102px;float:right;height:26px;background:url(/themes/gamry/images/sign_up.jpg) no-repeat 0 0;cursor:pointer;} #left_container .sign_up{width:360px;float:left;background:#83b5db url(/themes/gamry/images/blue_box.png) repeat-x 0 0;padding:10px 10px 0;} #page_left .latest_news{width:380px;float:left;padding-top:25px;padding-bottom:35px;} #page_left .latest_news h2{font:normal 16px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#345fa4;padding-bottom:10px;} #page_left .latest_news ul{width:380px;float:left;list-style:none;background:#f5f8fb;margin-bottom:10px;} #page_left .latest_news ul li{width:380px;float:left;border-bottom:1px solid #fff;padding:7px 0;} .pType{ margin:0; float:left; min-height:50px; } .pContent{margin-left:70px;} .pContent .entry-summary{margin:15px 0;} #page_left .latest_news ul li h5, .pType h5{color:#b8b8b9;text-transform:uppercase;} #page_left .latest_news ul li h5 img, .pType h5 img{margin:0 auto;display:block;} #page_left .latest_news ul li h5 span, .pType h5 span{text-align:center;display:block;} #page_left .latest_news ul li .text_side{width:260px;float:left;padding-left:5px;} #page_left .latest_news ul li h3{font:normal 12px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#333;} #page_left .latest_news ul li h3 a{color:#333;} #page_left .latest_news ul li p, #sidebar_news p,p.posted{font:normal 10px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#9ab1c9;text-transform:uppercase;} #page_left .latest_news ul li p span, #sidebar_news p span, p.posted span{color:#415264;font-weight:bold;} #page_left .latest_news h6{font:12px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#858585;} #page_left .latest_news h6 a{color:#4177b8;} #left_container .social_bg{width:348px;float:left;height:46px;padding:10px 15px 0;background:url(/themes/gamry/images/social_bg.jpg) no-repeat 0 0;} #left_container .social_bg h3{font:bold 12px/20px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#4177b8;} #left_container .social_bg h4{font:normal 12px/20px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#666;letter-spacing:-.05em;} #left_container .social_bg ul{width:auto;float:right;list-style:none;padding-right:5px;padding-top:2px;} #left_container .social_bg ul li{width:auto;float:left;padding-left:17px;} #right_container{width:551px;float:right;} #right_container .product{width:551px;float:left;} #right_container .product h2{color:#345fa4;font:normal 20px/22px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#345fa4;padding-bottom:10px;} #right_container .product h2{color:#345fa4;font:normal 20px/22px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#345fa4;padding-bottom:10px;} #right_container .product .pro_gallery{width:551px;float:left;color:#f5f5f5;padding:12px 0;background:#f5f5f5;position:relative;} #right_container .product .pro_gallery #belt2{width:511px;float:left;padding:0;margin:0;position:relative;overflow:hidden;} #right_container .product .pro_gallery .left_arrow{width:auto;float:left;position:absolute;top:63px;left:5px;z-index:9999;} #right_container .product .pro_gallery .right_arrow{width:auto;float:left;position:absolute;top:63px;right:5px;z-index:9999;} #right_container .product .pro_gallery .panel2{width:511px;float:left;} #right_container .product .pro_gallery .panel2 ul{width:auto;float:left;} #right_container .product .pro_gallery #belt2 li{width:130px;margin-left:1px;background:#fff;padding-bottom:10px;padding-left:0;} #right_container .product .pro_gallery #belt2 li h3{width:130px;clear:left;color:#ce5a51;font:normal 12px/15px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;text-align:center;} #right_container .product .pro_gallery #belt2 li h3 a{color:#ce5a51;text-decoration:none;} #right_container .product .pro_gallery #belt2 li img{width:126px;} #right_container .product .pro_gallery a.see_all{color:#345fa4;font:normal 11px/15px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#345fa4;width:auto;float:left;margin-left:22px;display:inline;} #right_container .product .pro_gallery ul{list-style:none;margin:0;padding:0;float:right;margin-right:22px;} #right_container .product .pro_gallery ul.bulet li{width:11px;height:11px;padding-left:10px;float:left;} #right_container .product .pro_gallery ul.bulet li a{width:11px;float:left;height:11px;background:url(/themes/gamry/images/grey_btn.jpg) no-repeat 0 0;font-size:2px;} #right_container .product .pro_gallery ul.bulet li a.active{width:11px;float:left;height:11px;background:url(/themes/gamry/images/grey_btn.jpg) no-repeat 0 bottom;} #right_container .two_col{width:551px;float:left;padding-top:38px;} #right_container .two_col h3{font:normal 20px/22px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#345fa4;padding-bottom:11px;} #right_container .two_col p{font:normal 12px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#333;} #right_container .two_col p a{font:normal 12px/16px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;color:#c63124;} #right_container .two_col .col1{width:207px;float:left;background:url(/themes/gamry/images/grey_line.jpg) repeat-x 0 0;padding:18px 11px 0;} #right_container .two_col .col2{width:300px;float:right;background:url(/themes/gamry/images/grey_line.jpg) repeat-x 0 0;padding:18px 5px 0 13px;} #right_container .two_col .col2 .video_box{width:300px;float:left;padding-bottom:5px;} #right_container .two_col .col2 h3{font:normal 16px/18px 'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;} .breadcrums{float:left;width:100%;height:27px;padding:2px 0 4px;background:url(/themes/gamry/images/breadcum_bg.gif) no-repeat 0 0;font-family:var(--gm-font-body);margin-left:8px;display:inline;} .breadcrums ul{list-style:none;padding:0 0 0 10px;margin:0 !important;} .breadcrums ul li{float:left;padding:0 18px 0 5px;background:url(/themes/gamry/images/bread_arrow.gif) no-repeat right 0;height:27px;font-size:10px;color:#3a3a3a;line-height:27px;} .breadcrums ul li a{float:left;text-decoration:underline;color:#c83225;} .breadcrums ul li.current a{color:#3a3a3a;text-decoration:none;font-weight:bold;font-size:11px;} .left_container{float:left;width:70%;} .right_container{float:right;width:28%; padding-left:2%; border-left:1px solid #003f69; } .top_section{width:100%;} .top_section .thumb{float:left;max-width:400px;} .top_section .thumb img{float:left;border:1px solid #ccc;} .top_section .thumb .enlarge{float:left;width:100%;text-align:center;font-size:11px;color:#3b3b3b;font-style:italic;padding:8px 0 0;} .top_section .thumb .enlarge a{color:#3b3b3b;text-decoration:none;} .top_section .detail{clear:both; } .top_section .detail h1{font-size:24px;color:#345fa4;padding:0 0 10px;font-weight:normal;} .tab_section{float:left;width:100%;padding:45px 0 0;} .tab_section ul.tabs{float:left;list-style:none;padding:0 0 0 17px;margin:0 !important;} .tab_section ul.tabs li{float:left;position:relative;margin-left:-5px;} .tab_section ul.tabs li a{float:left;height:41px;padding-left:5px;text-decoration:none;background:url(/themes/gamry/images/tab_lft.gif) no-repeat 0 0;font-size:14px;font-weight:bold;color:#2c2c2c;} .tab_section ul.tabs li a span{float:left;width:147px;text-decoration:none;background:url(/themes/gamry/images/tab_rht.gif) no-repeat 100% 0;cursor:pointer;padding:17px 10px 0 0;text-align:center;} .tab_section ul.tabs li.ui-state-active a{background:url(/themes/gamry/images/tab_lft_hover.gif) no-repeat 0 0;} .tab_section ul.tabs li.ui-state-active a span{background:url(/themes/gamry/images/tab_rht_hover.gif) no-repeat right 0;padding-top:12px;height:41px;} .tab_section ul.tabs li.index_4{z-index:4;} .tab_section ul.tabs li.index_3{z-index:3;} .tab_section ul.tabs li.index_2{z-index:2;} .tab_section ul.tabs li.index_1{z-index:1;} #accordion .tab_content{border:9px solid #e7e7e7;max-width:100%;} .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {border-color:#cecece !important;} .ui-accordion .ui-accordion-header {font-size:18px !important;color: #345fa4 !important; } .ui-accordion .ui-state-active { background:#024383; color:#FFF !important; } .ui-accordion .ui-state-active .ui-icon { background-image:url(/themes/gamry/js/jqueryui/1.11.4/images/ui-icons_ffffff_256x240.png) !important; } /*#accordion .tab_content .tabs_detail{float:left;width:100%;}*/ /*#accordion .tab_content .tabs_detail p{display:block;color:#000;padding:0 0 17px;}*/ .ui-tabs-hide{display:none;} .tab_content table{width:100%;border:1px solid #eaeaea;border-collapse:collapse;border-spacing:0;margin:0 0 60px 0;} .tab_content table tr td{padding:5px 10px;border:1px solid #eaeaea;border-collapse:collapse;border-spacing:0;} ul.tabs li.ui-state-active{z-index:10;} .right_block{float:left;width:100%;padding:0 0 45px;} .right_block h4{display:block;font-size:14px;color:#345fa4;padding:0 0 10px;} .right_block ul{list-style:none;} .right_block ul li{float:left;width:100%;line-height:23px;font-size:12px;color:#444;} .right_block ul li a{text-decoration:underline;color:#444;} .right_block ul li a.current{color:#010101;text-decoration:none;} .right_block ul.second li{line-height:28px;} .online_order{float:left;width:224px;position:relative;height:79px;background:url(/themes/gamry/images/online_order_img.gif) no-repeat 0 0;margin:0 0 30px -4px;text-indent:-9999px;} .signup_row{float:left;width:956px;padding:1px;border:1px solid #3968b0;margin:81px 0 0;font-family:var(--gm-font-body);} .signup_row .inner_sec{float:left;width:100%;background:url(/themes/gamry/images/signup_bg.gif) repeat-x 0 0;height:43px;padding:11px 0 0;} .signup_row .inner_sec label{float:left;width:520px;font-size:13px;color:#fff;padding:7px 10px 0 16px;} .signup_row .inner_sec .input_box{float:left;width:279px;height:36px;background:url(/themes/gamry/images/signup_input.gif) no-repeat 0 0;} .signup_row .inner_sec .input_box input{float:left;width:250px;height:15px;font:13px/15px DejaVuSans,'DejaVusSans',Verdana,Arial,Helvetica,sans-serif;padding:7px 0 7px 12px;color:#333;background:none;border:none;} input:focus{font-style:normal;color:#333;} .signup_row .inner_sec .btn_signup{float:left;width:112px;height:36px;background:url(/themes/gamry/images/signup_btn.gif) no-repeat 0 0;padding:0;margin:0 0 0 3px;display:inline;border:none;cursor:pointer;} #sibling_nav{margin:0 0 18px 0;padding:0 !important;} .clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;font-size:0;} #download_list{list-style:none;margin:0;padding:2px !important;border:1px solid #ddd;} #download_list li a{display:block;padding:5px 2px 5px 35px;margin:0;text-decoration:none;background:url(/themes/gamry/images/icons/page_pdf.png) 10px center no-repeat #f5f5f5;} #download_list li.odd a{background-color:#f9f9f9;} #download_list li a:hover{background-color:#eaeaea;} #download_list li{margin:0 !important;padding:0 !important;} #productGallery{list-style:none;margin:0;padding:0;} #productGallery li{float:left;margin:0 20px 20px 0;height:127px;overflow:hidden;} #productGallery li a{display:block;height:125px;width:125px;overflow:hidden;} #productGallery li img{display:block;} #distributors{position:relative;} #distributor_toc{margin:20px 0 0 0;padding:0;list-style:none;background:#fff;position:relative;z-index:100;float:right;width:73%;} #distributor_toc li{list-style:none;margin:0 0 2% 0;padding:0;width:24%;float:left;} #distributor_list{list-style:none;margin:0;padding:0;width:21%;float:left;background:#eaeaea;padding:2%;height:450px;position:relative;} #distributor_list li{list-style:none;margin:0;display:none;position:relative;} .dist_list_ul,.dist_list_ul li{list-style:none;margin:0;padding:0;} .dist_list_ul li{padding:0 0 20px 0;float:left;width:45%;height:350px;clear:right;margin:0 4% 20px 0;border-bottom:1px solid #ddd;} #dist_map{display:block;float:none !important;margin:20px 0;} #dist_map h4{margin-top:0;} .distCompant h4{font-size:14px !important;text-transform:uppercase;color:#666 !important;} .tag_cloud{padding:10px 15px;background:#ecf1f7;border:1px #9db5d9 solid;} .tag_cloud p a{font-size:12px !important;padding:2px 5px;float:left;margin:0 5px 5px 0;} .tag_cloud p a:hover{background:#5a7b9c;color:#fff;text-decoration:none;} .tag_cloud p{margin:18px 0 0 0;} .tag_cloud h3{text-transform:uppercase;color:#5a7b9c !important;margin:0 !important;font-weight:bold !important;} .authorDate, .entry-meta{color:#777;font-size:13px;margin-bottom:10px;line-height:1.1em;} #Sidebar .tagcloud a{font-size:100%;} /* #Sidebar .tagcloud a{display:block;font-size:14px !important;border-top:1px solid #f3f3f3;padding:5px;} #Sidebar .tagcloud{border-bottom:1px solid #f3f3f3;} #Sidebar .tagcloud a:hover{text-decoration:none;background:#ecf1f7;} */ .post{padding:10px 0;margin:10px 0;border-bottom:1px dotted #ddd;} .post h3 a{font-weight:bold;text-decoration:none;} #tooltip{position:absolute;z-index:3000;background-color:#000;padding:10px;color:#fff;opacity:.85;} #SearchResults{list-style:none;margin:0;padding:0;} #SearchResults li{padding:0 0 15px 0;margin:0;} #SearchResults { list-style: none; } #SearchResults > li { padding:25px 0 0 0; margin:25px 0 0 0; border-top:1px solid #666; } #SearchResults a.searchResultHeader { font-weight:bold; font-size:1.2em; } #SearchResults > li p { margin-bottom:5px; overflow: hidden; max-height: 150px; width: 100%; position: relative; } #SearchResults > li p::after { content: ""; position: absolute; width:100%; top:100px; left: 0px; height: 50px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } #SearchResults em { background: #ffe79b; } #SearchForm_Results div.middleColumn, #SearchForm_Results div.Actions { width:100%; } #searchQuery { padding-top: 20px; } #pagination { padding:25px 0 0 0; margin:25px 0 0 0; border-top:1px solid #666; } .pagenum { padding: 0 5px; } .gsc-control-cse{padding:0 !important;} .gcsc-branding{display:none;} #sidebar_news{list-style:none;margin:8px 0 20px 0;padding:0;border-top:1px dotted #ddd;} #sidebar_news li{border-bottom:1px dotted #ddd;padding:0 0 5px 0;margin:0 0 5px 0;} #sidebar_news li p{margin:0; } #sidear_news li a{display:block;font-size:12px;color:#000 !important;} #sidebar_news li.all_news{padding:10px 0 0 0;border:none;} #sidebar_news li.all_news a{font-weight:bold;} .pContent h3{margin:0 !important;line-height:1em !important;} .archiveMonths, .archiveMonths li, .blog-categories, .blog-categories li{list-style:none;margin-left:0 !important;padding-left:0 !important;} p.tagcloud a{text-transform:lowercase;font-size:smaller;} .typography h4{border-bottom:0 !important;font-weight:bold !important;} p.tagcloud a:last-child span{display:none;} .OrderingWidget{display:none;} ul.PageNumbers{display:block;list-style:none;padding:0;} ul.PageNumbers>li{display:inline-block;list-style:none;padding:0;} ul.PageNumbers>li a{text-decoration:none;} ul.PageNumbers>li.active{font-weight:bold !important;} .MenuWidget li{list-style:none; margin:0;} .MenuWidget li.section{font-weight:bold;} .MenuWidget a span{color:inherit;} .Logicbrush_UserFormsUtils_Widgets_UserFormWidget form{margin-top: 1em;} .right_container h3{border-bottom:1px solid #eee;margin-bottom:10px;padding-bottom:2px;} #comments-holder .message.good{font-weight:bold;padding:7px 10px;background-color:#ecf9d0;border:solid 1px #8fbe00;color:#5D7A04;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .blogPreviousNext{margin:10px 0;padding:10px 0;border-top:1px dotted #ddd;border-bottom:1px dotted #ddd;} .blogPreviousNext:after{content:"";display:table;clear:both;} .blogPreviousNext .previous{float:left;} .blogPreviousNext .next{float:right;} .blogSummary img{display:none !important;} .wide .left_container,.ContactPage .left_container{width:910px;} .ContactPage td{vertical-align:top;} #page_callouts{padding-bottom:20px;width:864px;margin:0 auto;} #page_callouts:after{display:block;content:' ';clear:both;} #page_callouts>div{padding:20px 40px;float:left;text-align:center;} #page_callouts img{margin-bottom:10px;} #page_callouts a{font-size:22px;text-decoration:none;} #twitter-feed{background:#E6E6E6;width:930px;box-sizing:border-box;padding:10px 20px;border-radius:15px;position:relative;margin:0 auto;color:#003F69;margin-top:10px;} #twitter-feed > ul{display:block;overflow:hidden;top:0;width:890px;} #twitter-feed li{display:block;margin:0;padding:0;text-indent:0;font-size:11px;height:14px;width:890px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} #twitter-feed li+li{display:none;} #twitter-feed .user,#twitter-feed .interact{display:none;} #twitter-feed .tweet{display:inline;} #twitter-credit{font-size:12px;margin-left:30px;margin-top:1px;} @media print{#header,#menu,.breadcrums,.right_container,.signup_row,#footer{display:none !important;} html,body,#page_type,.left_container{background:none !important;margin:0 !important;padding:0 !important;width:auto !important;} } /** Literature Database **/ /*.LiteratureDatabase #Form_DatabaseSearchForm { max-width: 100%; position: relative; margin-top: 2em; margin-bottom: 3em; } .LiteratureDatabase #Form_DatabaseSearchForm label.left { display: none; } .LiteratureDatabase #Form_DatabaseSearchForm .middleColumn { margin: 9px 10px 0 0 !important; } .LiteratureDatabase #Form_DatabaseSearchForm .middleColumn input { box-sizing: border-box; border-radius: 4px; padding: 3px 7px; } .LiteratureDatabase #Form_DatabaseSearchForm #Author .middleColumn input, .LiteratureDatabase #Form_DatabaseSearchForm #Title .middleColumn input, .LiteratureDatabase #Form_DatabaseSearchForm #Journal .middleColumn input, .LiteratureDatabase #Form_DatabaseSearchForm #Publisher .middleColumn input { width: 142px; } .LiteratureDatabase .wide #Form_DatabaseSearchForm #Author .middleColumn input, .LiteratureDatabase .wide #Form_DatabaseSearchForm #Title .middleColumn input, .LiteratureDatabase .wide #Form_DatabaseSearchForm #Journal .middleColumn input, .LiteratureDatabase .wide #Form_DatabaseSearchForm #Publisher .middleColumn input { width: 199px; font-size: larger; height: 25px; } .LiteratureDatabase #Form_DatabaseSearchForm #Year .middleColumn input { width: 56px; } .LiteratureDatabase .wide #Form_DatabaseSearchForm #Year .middleColumn input { width: 64px; font-size: larger; height: 25px; } .LiteratureDatabase #Form_DatabaseSearchForm #Keywords .middleColumn input { width: 510px; } .LiteratureDatabase .wide #Form_DatabaseSearchForm #Keywords .middleColumn input { width: 748px; font-size: larger; height: 25px; }*/ /*.LiteratureDatabase #Form_DatabaseSearchForm .Actions #Form_DatabaseSearchForm_action_doSearch { position: absolute; margin-top: -23px; right: 10px; box-sizing: border-box; width: 142px; padding: 5px; border-radius: 4px; background: #345fa4; color: white; height: 23px; }*/ /*.LiteratureDatabase .wide #Form_DatabaseSearchForm.Actions #Form_DatabaseSearchForm_action_doSearch { height: 25px; } .LiteratureDatabase #Form_DatabaseSearchForm .Actions #Form_DatabaseSearchForm_action_doSearch:hover { background: #4781df; } .LiteratureDatabase #Form_DatabaseSearchForm+table { margin-top: 2em; margin-right: 10px; border-collapse: collapse; margin-bottom: 1em; width: 100%; } .LiteratureDatabase #Form_DatabaseSearchForm+table thead tr { border-bottom: 1px solid #ccc; } .LiteratureDatabase #Form_DatabaseSearchForm+table tbody tr td { padding-top: 1.5em; vertical-align: top; } .LiteratureDatabase #Form_DatabaseSearchForm+table tbody tr td a { font-size: 145%; font-weight: normal; }*/ .tech { color:#FF0000; } .profileDownloads { border-collapse: collapse; width: 100%; } .profileDownloads tr { border-bottom: 1px solid #ccc; vertical-align: top; } .profileDownloads tr th { padding: 0.5em 0; text-align: left; } .profileDownloads tr td { padding: 0.5em 0; } .profileDownloads tr .serialNumberColumn { width: 80px; } .profileDownloads tr.hasNotes { border-bottom: 1px solid #e0e0e0; } .profileDownloads tr td ul:first-child { margin-top: 0; } .profileDownloads tr td ul:last-child { margin-bottom: 0; } .profileDownloads tr td.popUpCell { position: relative; } .profileDownloads tr td.popUpCell a { cursor: pointer; display: block; text-decoration: underline; } .profileDownloads tr td.popUpCell .popUp { position: absolute; width: 200px; padding: 10px; background: #ffffff !important; box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5); top: 28px; left: -1000000px; opacity: 0; border-radius: 6px; z-index: 100; border: 4px solid #999999; transform: translate(0px, 10px); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: opacity 250ms, left 0ms 250ms, transform 250ms, top 250ms; transition: opacity 250ms, left 0ms 250ms, transform 250ms, top 250ms; } .profileDownloads tr td.popUpCell:hover .popUp { opacity: 1; left: -81px; transform: translate(0px, 0px) !important; -webkit-transition: opacity 250ms, transform 250ms; transition: opacity 250ms, transform 250ms; } .alertMessage { padding: 15px; margin-bottom: 20px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; } .alertMessage.success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alertMessage.warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .alertMessage.danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .profileDownloads .downloadList, .profileDownloads .downloadList li { margin: 0; padding: 0; list-style: none; } .registeredModelList .model .content:after { display: block; content: ' '; clear: both; } .registeredModelList .model { padding: 20px; background: #f6f6f6; margin-bottom: 20px; } .registeredModelList .model h3 { margin: 0 0 10px 0; } .registeredModelList .model img { float: left; } .registeredModelList .model .content { margin-bottom: 10px; } .registeredModelList .model .text { color: #666666; margin-left: 80px; font-size: 18px; } .registeredModelList .model .profileDownloadsContainer { display: block; max-height: 0; opacity: 0; overflow: hidden; -webkit-transition: all 250ms, max-height 1000ms; transition: all 250ms, max-height 1000ms; } .registeredModelList .model .profileDownloadsContainer.show { max-height: 800px; opacity: 1; overflow: visible; } .hidden { display: none !important; } .calendar th { text-align: center; line-height: 4em; } .calendar td { text-align: center; color: #777; } .calendar td a { background: #0a65a2; border-radius: 50%; width: 2em; height: 2em; display: inline-block; text-align: center; line-height: 2em; color: white !important; text-decoration: none !important; } .calendar td strong { color: red !important; } .calendar td a:hover, .calendar td a:hover strong { color: #a9770a !important } /* Mega-menu styling now lives entirely in redesign.css (.rd-header .dropdown.mega). The old block here (fixed 520–600px width, Alegreya Sans titles) was superseded and its min-width fought the content-sized panels, so it was removed. */ /****** FILE: themes/gamry/css/form.css *****/ #form_page_left { width:45%; float:left; } #form_page_right { width:50%; float:right; } form.userform, .form_full { width:700px; max-width:100%; margin:0px auto; clear:both; } form.userform:after, .form_full:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } .ContactPage form.userform { display:none !important; } fieldset { border:none; padding:0; margin:0; width:100%; min-width:0; } form:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } .formMessage { font-weight: bold; text-align: center; margin-bottom: 20px; } .formSubMessage { font-weight: bold; text-align: left; margin: 20px 0 5px 95px; } .form-error { border:2px solid #c00000; background:#f0f0f0; color:#c00000; padding:20px; font-size:16px; font-weight:bold; } div.requiredField > label:after { content:" *"; color:#c00000; margin-right:-10px; font-size:0.8em; } div.field { margin-bottom: 8px; } div.field:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } div.field > label, .userform legend.left { width:30%; min-height:24px; padding-top:6px; line-height:18px; float:left; color:#353231; font-size:16px; display:block; text-align:right !important; margin:0px; } fieldset.field > div, div.field > div, .Actions { width:65%; min-height:30px; float:right; } .userform-fields > div > div { width: 100%; } span.readonly { display:block; width:auto; min-height:30px; padding-top:6px; line-height:18px; font-size:14px; color:#039; } div.field > div select, div.field > div textarea, div.field > div input[type=text], div.field > div input[type=email], div.field > div input[type=number], div.field > div input[type=password] { width: 100%; height:auto; min-height:43px; padding:10px; border: 1px #ccc solid; color: #353231; font: normal 15px/15px Arial, sans-serif; margin-bottom: 2px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } div.field > div input[type=text]:focus, div.field > div input[type=email]:focus, div.field > div input[type=number]:focus, div.field > div input[type=password]:focus, div.field > div select:focus, div.field > div textarea:focus { border-color:#999; outline:none; box-shadow:0 0 3px 1px #999; } div.field > div option { background:#FFF; } div.field > div textarea { resize:vertical; } fieldset.field .optionset, div.field .optionset { list-style:none; margin:0; padding:0; } fieldset.field .optionset li, div.field .optionset li { margin:0; padding:0; } input.currency { background:url(/themes/gamry/images/icons/money_dollar.png) no-repeat center left #ffffff !important; text-indent:15px !important; } .radio_input { float:left; width:auto; padding-right:30px; height:30px; line-height:30px; } .radio_input:last-child { padding-right:0px !important; } .radio_input input { margin:8px 5px 0px 0px !important; padding:0px !important; float:left !important; } .radio_input label { width:auto !important; clear:none !important; cursor:pointer; } .checkbox_ct > label { margin-bottom: -22px; margin-left: 30px; } .checkbox_ct > input { float: left; clear: both; } div.checkbox:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } div.checkbox > input { margin-left:35%; } div.checkbox > label { text-align:left !important; float:right; width:61%; padding-top:2px !important; } span.message.required { color:#c00000; display:block; clear:both; text-align:left; } label.error { color:#c00000; } .message { text-align: center; font: bold 15px/15px Verdana, sans-serif; margin-bottom: 20px; } .message.good { color: #757c5d; } .message.bad { color: #892516; } .Actions input, .btn-toolbar input { color:#FFF; font-size:16px; outline:none; border:none; padding:8px 15px; background:#003f69; margin-bottom:3px; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .Actions input:hover, .Actions input:focus, .btn-toolbar input:hover, .btn-toolbar input:focus { cursor:pointer; background: #012C49; } .middleColumn label { font-size:16px; } .stacked.col2 .fieldgroup-field { width:49%; float:left; margin-left:2%; } .stacked.col2 .fieldgroup-field:first-child { margin-left:0; } .stacked.col3 .fieldgroup-field { width:32%; float:left; margin-left:2%; } .stacked.col3 .fieldgroup-field:first-child { margin-left:0; } .stacked label.right { font-style:italic; margin:0; text-align:left !important; font-size:14px; float:none; } .stacked input.required + label.right:after, .stacked select.required + label.right:after, .stacked textarea.required + label.right:after{ content:" *"; color:#c00000; } .field.confirmedpassword > div { float:none; width:100%; } .showOnClick > a { margin-left:35%; } .userform .left { font-weight:normal !important; } /* Headers */ h3.form-header { clear:both; width:65%; float:right; padding:0 0 5px 0; margin:20px 0 5px 0; border-bottom:solid 1px #2b3966; } /* Sidebar Forms */ #page_right div.field { margin-bottom:0; } #page_right div.field > label { width:100% !important; line-height:18px; clear:both; text-align:left !important; min-height:0; font-size: 0.95em; } #page_right div.field > div { width:100% !important; min-height:30px; float:left !important; clear:left !important; margin-left:0 !important; } #page_right div.checkbox > input { margin-left:0; float:left; } #page_right div.checkbox > label { padding-top:0px !important; float:none; clear:none; padding-left:20px; } #page_right h3.form-header { width:100% !important; float:left !important; margin-bottom:0px !important; } #page_right .stacked input.required + label.right { overflow:hidden; white-space:nowrap; font-size:11px !important; } #page_right div.field > div select, #page_right div.field > div textarea, #page_right div.field > div input[type=text], #page_right div.field > div input[type=email], #page_right div.field > div input[type=number], #page_right div.field > div input[type=password] { min-height:0; padding:3px 5px; } #page_right .Actions { width:100%; float:none; text-align:right; margin-top:8px; } #page_right .Actions input { border-radius:6px; } .field.big-title { margin:6px 0; } .field.big-title > legend { display:block; float:none; color:#1c50a4; font-size:18px; font-weight:bold; } .field.big-title > div { width:100%; float:none; } /* Responsive Code */ .ui-widget { z-index:500 !important; } @media(max-width: 600px){ .userform legend.left, div.field > label { width:100% !important; padding-top:15px !important; line-height:18px; clear:both; text-align:left !important; } fieldset.field > div, div.field > div { width:100% !important; min-height:30px; float:left !important; clear:left !important; margin-left:0 !important; } div.checkbox > input { margin-left:0; float:left; } div.checkbox > label { padding-top:0px !important; float:none; clear:none; padding-left:20px; } h3.form-header { width:100% !important; float:left !important; margin-bottom:0px !important; } .stacked input.required + label.right { overflow:hidden; white-space:nowrap; font-size:11px !important; } .showOnClick > a { margin-left:0; } .Actions { text-align:right; float:none; width:100%; } } @media(max-width: 430px){ .centeredForm { width:100% !important; } .Actions input { display:block; width:100%; text-align:center; } } #search_pages { float:left; width:46%; } .searchResults { margin: 0px auto; padding: 0 0 30px 0; } .searchResults li { border-bottom: 1px solid #ccc; padding: 30px 0; list-style-type: none; margin:0; } .searchResults a.searchResultHeader { font-size: 18px; border-bottom: none; } .searchResults p { margin: 12px 0; } .searchPagination { padding-top: 15px; } .searchPagination a, .searchPagination .currentPage { padding: 0 5px; text-decoration: none; } .searchPagination .currentPage { font-weight:bold; } .searchPagination .pagination { float: left; } .searchPagination p { float: right; } .searchPagination .next, .searchPagination .prev { font-size: 14px; } .searchPagination .next { margin-left: 15px; } .searchPagination .prev { margin-right: 15px; } .searchPagination .next:hover, .searchPagination .prev:hover { text-decoration:none; } #search_products { float:right; width:50%; padding-left:4%; border-left:1px solid #ccc; } .searchProdResults { display:block; margin:40px auto 0; padding:0 0 20px 0; } .searchProdResults:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } .searchProdResults > li { display:block; float:left; width:49%; margin:0; padding:2% 4%; border-top:1px solid #CCC; } .searchProdResults > li:nth-child(even) { border-left:1px solid #CCC; } .searchProdResults > li:nth-child(odd) { clear:left; } .searchProdResults > li:nth-child(-n+2) { border-top:none; } .searchProdResults .searchResultProdImg { display:block; } .searchProdResults .searchResultProdImg > img { display:block; max-width:100%; } .searchProdResults .searchResultProdHeader { text-align:center; } .searchProdResults .readMoreLink { text-align:center; margin-bottom:0; } .fh-search { margin-top:10px; } @media(max-width:700px){ #search_pages { width:100%; float:none; } #search_products { width:100%; float:none; padding:30px 0 0; margin:30px 0 0; border:none; border-top:1px solid #ccc; } } @media(max-width:400px){ .searchProdResults > li { width:80%; float:none; max-width:300px; margin:0 auto; padding:30px 0; border:none !important; border-top:1px solid #ccc !important; } .searchProdResults > li:first-child { border-top:none !important; } } form .field .message.error { display: block; clear: both; font-weight: normal; text-align: left;; background: rgba(255,0,0,0.5); border: 1px solid red; color: white; padding: 0.5em; line-height: 1.2; font-size: 80%; } /****** FILE: themes/gamry/css/typography.css *****/ /* CSS Document */ .typography pre { font-family: var(--gm-font-mono); display: block; font-size: 0.6em; margin: 2em 5em; padding: 0.5em; border: 1px #ccc solid; background: #eee; ; } .typography table { margin: 0 0 18px 0; color: #666; border-collapse: collapse; } .typography tr {} .typography td { border: 0px solid #999; padding: 5px; } .typography { font-size: 16px; line-height: 24px; } .typography * { color: #444; } /** CMS LIST STYLES **/ .typography ul, .typography ol { margin-bottom: 15px; } .typography ul ul, .typography ol ol { margin-bottom: 0px; } /* HEADER STYLES */ /* Big and ugly to preserve styles when applying bold and/or italics to headers in the SilverStripe editor */ .typography h1, .typography h1 strong, .typography h1 em, .typography h2, .typography h2 strong, .typography h2 em, .typography h3, .typography h3 strong, .typography h3 em, .typography h4, .typography h4 strong, .typography h4 em, .typography h5, .typography h5 strong, .typography h5 em, .typography h6, .typography h6 strong, .typography h6 em { margin: 0 0 12px 0; padding: 0; font-weight: bold; color: #353231; } .typography h1, .typography h1 strong, .typography h1 em { font-size: 36px; line-height: 1.15em; } .typography h2, .typography h2 strong, .typography h2 em { font-size: 30px; line-height: 1.15em; } .typography h3, .typography h3 strong, .typography h3 em { font-size: 20px; line-height: 1.15em; } .typography h4, .typography h4 strong, .typography h4 em { font-size: 18px; line-height: 1.15em; } .typography h5, .typography h5 strong, .typography h5 em { font-size: 16px; line-height: 1.15em; } .typography h6, .typography h6 strong, .typography h6 em { font-size: 13px; line-height: 1.15em; } .typography blockquote { background: #f2efed; border: 1px #757c5d solid; padding: 10px; } /* LINK STYLES */ .typography a, .typography a * { color: #0a65a2 !important; text-decoration: none; } .typography a:hover { color: #0a65a2 !important; text-decoration: underline; } .typography .blue, .typography .blue * { color: #024383 !important; } .typography a.button, a.button { padding: 5px 20px; background: #003f69; color: #FFF !important; text-decoration: none; border-radius: 4px; display: inline-block; } .typography a.button:hover, a.button:hover { color: #FFF !important; background: #012C49; } a.button-back { background: #999; } .typography table {} .typography table tr td {} .typography strong { font-weight: bold !important; } .typography em { font-style: italic !important; } /* WYSIWYG EDITOR ALIGNMENT CLASSES */ .typography .left, .typography .text-left, .text-left { text-align: left; } .typography .center, .typography .text-center, .text-center { text-align: center; } .typography .right, .typography .text-right, .text-right { text-align: right; } .typography img { max-width: 100%; height: auto; } .typography img.right { float: right; margin: 0 0 5px 15px; } .typography img.left { float: left; margin: 0 15px 5px 0; } .typography img.center { display: block; margin: 0 auto 5px; } .typography .captionImage { max-width: 100%; } .typography .captionImage img { padding: 0; max-width: 100%; height: auto !important; } .typography .captionImage p { margin: 0; font: bold 10px/14px Arial, sans-serif; } .typography .captionImage.left { float: left; margin: 0 10px 5px 0; padding: 5px; background: #e8e8e8; text-align: center; } .typography .captionImage.right { float: right; margin: 0 0 5px 10px; padding: 5px; background: #e8e8e8; text-align: center; } .typography .captionImage.center { display: block; margin: 0 auto 5px; } .typography .superscript { vertical-align: baseline; font-size: 0.8em !important; position: relative; top: -0.4em; } .typography .subscript { vertical-align: baseline; font-size: 0.8em !important; position: relative; bottom: -0.4em; } .typography iframe { max-width: 100%; } .right form .field label { color: #555 !important; font: bold 14px/19px Arial, sans-serif !important; } .right form .field .sort-control label { font-weight: normal !important; font-size: 11px !important; } @media (max-width:500px) { .typography img { display: block; float: none !important; margin-left: auto !important; margin-right: auto !important; } .typography blockquote { margin-left: 10px; margin-right: 10px; } } .hover-underline-animation { display: inline-block; position: relative; color: #0087ca; } .hover-underline-animation::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; /* background-color: #0087ca;*/ background-color: #F8B016; transform-origin: bottom right; transition: transform 0.25s ease-out; } .hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; } /****** FILE: themes/gamry/css/responsive.css *****/ nav.mobile { display:none; overflow-y:scroll; position:fixed; z-index:99800; text-align:left; background:rgba(12, 20, 26, 0.94); padding:0 20px 20px 35px; top:0;bottom:0; width:300px; } nav.mobile > ul { list-style: none; max-width:300px; clear:both; } nav.mobile > ul:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } nav.mobile > ul > li { padding:2px 2px 0; margin: 0; } nav.mobile a { display:block; padding:15px 15px 15px 5px; color:#fff; font-size:16px; line-height:18px; } nav.mobile a.hc:before { display: inline-block; float: left; font-family: FontAwesome; color: #fff; content: '\f055'; margin-left: -25px; } nav.mobile a.hc.open:before { content: '\f056'; } nav.mobile > ul ul a { font-weight:normal; padding:10px; font-size: 14px; } nav.mobile ul.dropdown { list-style: none; padding:0; } nav.mobile ul.dropdown:after { display: block; height: 1px; width: 100%; content: ''; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYzJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjg2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.86) 63%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.86) 63%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0.86) 63%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */ } nav.mobile ul .dropdown li { margin-left: 0; margin-top:1px; } nav.mobile #nav_close { display: block; float: right; margin: 10px 0 10px 0px; font-size: 18px; padding-left: 30px; border:none; background:none; cursor:pointer; font-family:inherit; color:inherit; } #nav_close:before { display: inline-block; content: '\f00d'; float: left; margin-left: -20px; font-family: FontAwesome; } .nav_toggle { position:absolute; top:7px; right:0; z-index:999; padding:8px 0 8px 8px; border:none; background:none; cursor:pointer; } .nav_toggle .bar { display:block; height:3px; background:#003f69; border-radius:2px; margin-top:4px; width:26px; position:relative; } .nav_toggle .bar:first-child { margin-top:0; } .nav_toggle:hover { text-decoration:none; } .nav_toggle { display:none; } #nav_close { display:none; } .mobile .nav_toggle { display:block; } #mobile_contact { display:none; } .mobile header > nav { padding:0; margin:0; } @media (max-width:500px){ nav.mobile { bottom:0; background:rgba(45, 45, 45, 0.95); border:none; padding-left:40px; } nav.mobile.open { position:fixed; width:106% !important; } nav.mobile a { font-size:18px; } nav.mobile > ul:last-child > li:last-child:after, nav.mobile ul.dropdown:after { display:none !important; } nav.mobile > ul > li { position:relative; } nav.mobile > ul > li:after { display: block; height: 1px; width: 100%; content: ''; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYzJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjg2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.86) 63%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.86) 63%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0.86) 63%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */ } /* #nav_close { visibility:hidden; } */ .nav_toggle.open { box-shadow:none; background:none; position:fixed; right:2%; top:11px; } .nav_toggle.open .bar { background:#FFF; } .nav_toggle.open .bar1 { transform:rotate(225deg); transform-origin:left; left:22px; top:14px; } .nav_toggle.open .bar2 { transform:translate(-150px) rotate(360deg); opacity:0; } .nav_toggle.open .bar3 { transform:rotate(-225deg); transform-origin:left; left:22px; top:-18px; } .nav_toggle .bar { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } } @media(max-width:1375px){ nav.desktop > ul > li:first-child { position:initial; } nav.desktop > ul > li:first-child .dropdown { left:0; -moz-transform: translateX(0%); -webkit-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } @media(max-width:1000px){ #lang_select { margin-right:45px; } } @media(max-width:900px){ footer > address { float:none; text-align:center; margin-top:30px; } footer > address > img { margin-left:auto; margin-right:auto; } footer > nav { margin-left:0; padding-left:0; border:none; border-top:1px solid #7fa2b9; margin-top:20px; padding-top:20px; } } @media (max-width:800px){ #page_left { margin-right:0; } #page_left > .inside { float:none; } #page_right { width:100%; float:none; min-height:0 !important; margin-top:30px; } #rotating_images { max-width:320px; margin:0 auto 20px; } .page_col { float:none; width:100%; margin:0; } #form_page_left, #form_page_right { float:none; width:100%; } } @media (max-width:700px){ .nav_toggle { background:#FFF; -webkit-border-radius:5px; border-radius:5px; } footer > nav > ul { text-align:center; } footer > nav > ul > li { width:30%; margin-bottom:20px; } } @media (max-width:550px){ #cookie-warning { padding-top:10px; padding-bottom:10px; } footer > nav > ul > li { width:45%; } #wsa_embed { z-index:149 !important; } } @media (max-width:450px){ #header_wrap > header { text-align:center; } #site_search { width:100%; } #head_right { float:none; } #head_right:after { content:"."; display:block; height:0; clear:both; zoom:1; visibility:hidden; } #lang_select { float:left; margin:0; } #lang_select > ul { left:0; right:auto; } #lang_select > ul a { text-align:left; } #logo { float:none; display:inline-block; margin-top:15px; } #mobile_contact { display: block; margin: 10px auto 20px auto; background: #f8b016; width: 200px; height: 40px; line-height: 40px; color: #003e69; font-size: 20px; font-weight: 700; border-radius: 10px; } } @media (max-width:400px){ footer > nav > ul > li { width:100%; } } /* Mobile menu two-section grouping (Products / Company & Support) */ nav.mobile li.mobile-sect { list-style:none; padding:6px 5px 8px; margin-right:15px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#93a2a9; } nav.mobile li.mobile-sect:after { display:none !important; } nav.mobile #top_nav li.mobile-sect { border-top:1px solid rgba(255,255,255,.16); margin-top:12px; padding-top:16px; } nav.mobile .mobile_top a { color:#5cbcd6; font-weight:600; } nav.mobile #top_nav .tab-link a { border:1px solid rgba(255,255,255,.18); border-radius:8px; margin:8px 15px 0 0; padding:11px 14px; } /* Mobile: title link navigates; separate toggle button opens the submenu */ nav.mobile a.hc:before { content:none !important; display:none !important; } nav.mobile > ul li { position:relative; } nav.mobile a.hc { padding-right:60px; } nav.mobile .hc-toggle { position:absolute; top:0; right:0; width:56px; height:48px; padding:0; margin:0; background:none; border:none; border-left:1px solid rgba(255,255,255,.09); color:#93a2a9; cursor:pointer; font-family:FontAwesome; font-size:19px; line-height:48px; text-align:center; } nav.mobile .hc-toggle:before { content:'\f055'; } nav.mobile .hc-toggle.open { color:#5cbcd6; } nav.mobile .hc-toggle.open:before { content:'\f056'; } /* Applications mega-menu on mobile: grouped list inside the accordion */ nav.mobile .dropdown.mega { display:block; padding:0; } nav.mobile .dropdown.mega .mega-group { display:block; } nav.mobile .dropdown.mega .mega-group-title { display:block; padding:12px 15px 5px 20px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#93a2a9; } nav.mobile .dropdown.mega .mega-group > ul { list-style:none; padding:0; margin:0; } nav.mobile .dropdown.mega .mega-group > ul > li { margin:0; } nav.mobile .dropdown.mega .mega-group > ul > li > a { display:block; padding:9px 15px 9px 30px; font-size:14px; color:#c7d3d8; } nav.mobile .dropdown.mega .mega-group > ul > li > a:hover { color:#fff; } /****** FILE: themes/gamry/css/redesign.css *****/ /* =================================================================== GAMRY REDESIGN — Phase 1: Header / navigation Design language: blue #003e69, IBM Plex Sans/Mono + Space Grotesk =================================================================== */ :root { /* blog article content width: rail 210 + gap 56 + prose. Fixed px (not em) so it resolves identically regardless of an element's own font-size. 1040 → prose ≈ 774px (~85 chars/line, the upper edge of a comfortable measure). Tune this one number. */ --rd-blog-shell: 1040px; /* Featured photo width — deliberately INDEPENDENT of --rd-blog-shell so changing the column measure never resizes the hero image. Capped to the column only so it can't overflow when the column is narrower than this. Tune this one number for photo size. */ --rd-blog-img: 900px; /* ---- Type system ------------------------------------------------------ Three faces, the pairing the homepage carousel already used: a display face for headings, a text face for everything read in sentences, and a monospace for labels, spec values and code (it is what keeps figures aligned in columns). A fourth face, 'Alegreya Sans', used to be the base font on body (layout.css). It was a text face designed for literary prose - it sets old-style figures, so digits sat below cap height and varied in height, which is poor on a site built out of spec numbers. It was inherited by every page, so it sat under the redesigned components in a different face. Removed 2026-08-13. Change the font site-wide by editing these three values. Note that roughly 270 declarations still name the families literally rather than through these tokens; swapping those is a mechanical follow-up that changes nothing visually. Until then, edit these AND search for the literal names. */ --gm-font-display: 'Space Grotesk', sans-serif; --gm-font-body: 'IBM Plex Sans', sans-serif; --gm-font-mono: 'IBM Plex Mono', monospace; --gm-navy: #003e69; --gm-navy-hover: #00567f; --gm-ink: #17242b; --gm-body: #47535b; --gm-muted: #5f6b72; /* WCAG 1.4.3: was #6c7981, which measured 4.06:1 on --gm-panel #f2f4f5, 4.32:1 on --gm-bg #fbfbfa and 4.48:1 on #fff — all under 4.5:1, and it is the colour of every small mono meta label on the site (none of which is large-text exempt). #636f77 is the same hue darkened until the WORST background it actually renders on (#f2f4f5) clears 4.5:1 → 4.68 / 4.98 / 5.16. Still lighter than --gm-muted, so the token hierarchy is intact. Verified it renders on light backgrounds ONLY — dark sections use --gm-on-dark-faint, so darkening this is safe. */ --gm-faint: #636f77; --gm-border: #e6eaec; --gm-bg: #fbfbfa; --gm-panel: #f2f4f5; /* on dark backgrounds only — do NOT use in light sections */ --gm-on-dark: #c3cdd2; --gm-on-dark-muted: #aeb9be; --gm-on-dark-faint: #8a969c; --gm-on-dark-accent: #7bb8dd; /* ---- header tokens (design_handoff_header) ---- The navy is sampled from the logo SVG's own fills: logo and utility bar are the SAME #003e69 by design. Do not lighten one to "match" the other. */ --gm-surface: #ffffff; --gm-border-ctl: #d5dcdf; --gm-border-soft: #eef1f2; --gm-onnavy: #d3e0ea; /* utility labels on navy — AA on #003e69 */ --gm-onnavy-rule: rgba(255,255,255,.28); /* language divider */ --gm-onnavy-pill: rgba(255,255,255,.45); /* registration pill border (decorative) */ --gm-onnavy-open: rgba(255,255,255,.16); /* open utility trigger fill */ } /* =================================================================== HEADER — two-tier (design_handoff_header, reviewed 2026-08) Tier 1 .rd-util : solid navy band, 13.5px IBM Plex Sans labels. Tier 2 .rd-prod : white, 17px Space Grotesk labels + the logo. The tiers are deliberately, strongly differentiated so the PRODUCT bar reads as the dominant one — that was the central goal of the revision. Do not equalise their type sizes or fills. Panels are anchored to .rd-util-inner / .rd-prod-inner rather than to .rd-header, because those are the 1360px-capped, centred content boxes: it makes a full-width mega panel's edges line up with the header content on any viewport, which a header-anchored left:0/right:0 does not. =================================================================== */ .rd-header, .rd-header * { box-sizing: border-box; } .rd-header #mobile_contact { display: none; } .rd-header { position: relative; z-index: 9000; background: var(--gm-surface); font-family: 'IBM Plex Sans', sans-serif; } /* .rd-util sits above .rd-prod so its panels overlay the product bar */ .rd-util { position: relative; z-index: 2; background: var(--gm-navy); } .rd-prod { position: relative; z-index: 1; background: var(--gm-surface); box-shadow: inset 0 -1px 0 var(--gm-border-soft); } /* Full-bleed: both bars span the whole viewport. The content is NOT capped — the navy band and the product bar run edge to edge, and each dropdown is a box anchored under its own trigger (see .rd-panel below), so there is no centred content box for panels to align to. */ .rd-util-inner, .rd-prod-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .rd-util-inner { gap: 24px; padding: 0 32px; } .rd-prod-inner { gap: 28px; padding: 22px 32px 20px; } /* ---- tier 1: utility bar ---- */ .rd-util-nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; list-style: none; margin: 0; padding: 0; } .rd-util-nav li { margin: 0; } .rd-navitem { position: static; } .rd-trig { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font: inherit; border-radius: 6px; } .rd-trig--util { padding: 11px 10px; font-size: 13.5px; font-weight: 600; color: var(--gm-onnavy); } .rd-trig--util:hover { color: #fff; } /* Open state — colour is never the only cue: aria-expanded changes too */ .rd-trig--util[aria-expanded="true"] { color: #fff; background: var(--gm-onnavy-open); } .rd-chev { flex: none; transition: transform 120ms ease; } .rd-trig[aria-expanded="true"] .rd-chev { transform: rotate(180deg); } .rd-util-actions { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .rd-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-size: 13px; white-space: nowrap; } /* Commerce: filled. The more frequent destination. */ .rd-pill--filled { padding: 7px 14px; background: #fff; color: var(--gm-navy); font-weight: 600; } .rd-pill--filled:hover { background: #e5ebee; color: var(--gm-navy); } /* One-time account task: outlined. These two must NOT look alike. */ .rd-pill--outline { padding: 6px 13px; border: 1px solid var(--gm-onnavy-pill); color: #fff; font-weight: 500; } .rd-pill--outline:hover { border-color: #fff; color: #fff; } /* A setting, not an action — no pill at all */ .rd-lang { position: relative; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--gm-onnavy-rule); font-size: 13px; } .rd-lang .current_lang { display: inline-flex; align-items: center; gap: 6px; color: var(--gm-onnavy); cursor: pointer; } .rd-lang .current_lang:hover { color: #fff; } .rd-lang .expand::after { content: '\f107'; font-family: FontAwesome; font-size: 11px; } .rd-lang > ul { display: none; position: absolute; top: 100%; right: 0; z-index: 9600; margin: 0; padding: 8px 0; list-style: none; min-width: 150px; background: #fff; border: 1px solid var(--gm-border); border-radius: 10px; box-shadow: 0 18px 40px rgba(23,36,43,.16); } .rd-lang:hover > ul, .rd-lang:focus-within > ul { display: block; } .rd-lang > ul a { display: block; padding: 8px 16px; font-size: 14px; color: var(--gm-body); } .rd-lang > ul a:hover { color: var(--gm-navy); background: var(--gm-panel); } /* ---- tier 2: product bar ---- */ /* Fixed size, and NOT shrinkable. `max-width:100%` on the img inside a shrinkable flex item is a circular constraint — the browser resolved it against a collapsing container and rendered the logo at 150x38 even with 226px of spare room in the bar. The one-line fit is handled by the type scale below instead. */ .rd-header #logo.rd-logo { margin: 0; float: none; flex: none; } .rd-logo img { height: 62px; width: auto; display: block; } .rd-nav-wrap { margin-left: auto; } #nav_wrap { background: none !important; min-height: 0 !important; overflow: visible; position: static; } /* 6px was the handoff value, but that assumed a 1360px-capped bar; full-bleed with five long labels it read as one run-on string. 18px column gap on top of the triggers' own 12px padding gives ~42px between labels. */ .rd-prod-nav > ul { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: flex-end; align-items: center; list-style: none; margin: 0; padding: 0; height: auto; text-align: left; } .rd-prod-nav > ul::after { content: none !important; display: none !important; } .rd-prod-nav > ul > li { position: static; margin: 0; display: block; } .rd-prod-nav > ul > li::after { display: none !important; } /* Navy, not ink, and that is deliberate (confirmed 2026-08-13). This originally said `color: var(--gm-ink)` but never applied — layout.css:169 `nav.desktop > ul > li > a` sets #003f69 and outranks it, so the nav has always rendered navy. Asked about, navy is the preferred look ("not super dark"), so the declaration now matches reality on the design token rather than leaving an inert rule that invites someone to "fix" the nav to near-black. Applied for real in the high-specificity rule further down (~line 376). */ .rd-trig--prod { padding: 9px 12px; border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.005em; color: var(--gm-navy); white-space: nowrap; } .rd-trig--prod:hover { color: var(--gm-navy); } .rd-trig--prod[aria-expanded="true"] { color: var(--gm-navy); background: #eef3f6; } /* Bare glass — no circular fill. A filled navy circle read as a third CTA competing with the utility pills. */ .rd-search-btn { flex: none; margin-left: 10px; background: none; border: none; padding: 0; cursor: pointer; color: var(--gm-navy); display: inline-flex; align-items: center; justify-content: center; } .rd-search-btn:hover { color: var(--gm-navy-hover); } /* ---- dropdown panels (one shell for every menu) ---- */ .rd-panel { position: absolute; z-index: 9500; background: var(--gm-surface); border: 1px solid var(--gm-border); /* The 3px navy top edge is what visually attaches the panel to the header. The 1px --gm-border is what carries the panel bounds in high-contrast mode, so both are required. */ border-top: 3px solid var(--gm-navy); border-radius: 0 0 14px 14px; box-shadow: 0 26px 60px rgba(23,36,43,.18); padding: 34px 32px 30px; /* Hidden with visibility/opacity, never display:none, so the shadow can transition and the panel keeps its box for measurement. JS also sets [inert] when closed so its links leave the tab order. */ visibility: hidden; opacity: 0; pointer-events: none; /* Only OPACITY is transitioned. `visibility` is a discrete property, so transitioning it leaves the panel stuck at `hidden` until the transition engine completes the step — which never happens if the tab is not painting (background/throttled), leaving an "open" panel permanently invisible. Flipping visibility instantly and fading opacity gets the same effect with no dependency on the animation clock. */ transition: opacity 120ms ease; } .rd-panel.is-open { visibility: visible; opacity: 1; pointer-events: auto; } /* Each panel is a BOX anchored under its own trigger — not a full-width mega band. The

  • is the containing block (position:relative below), so the box hangs directly off the item you hovered, the way the previous header worked. Width is driven by the columns (max-content) and capped so a wide menu can never exceed the viewport. */ /* Cells & Accessories has SIX tree-derived columns: 6*156 min-width + 5*34 gap + 64 padding = ~1170px, which could not fit the old 1040px cap and could not shrink below the columns' min-width either, so the last column rendered outside the white box. The cap now clears six columns, and .rd-panel-grid wraps as a backstop so a seventh becomes a second row INSIDE the panel rather than overflowing it. */ /* 1272 = 7 columns x 152 + 6 gaps x 24 + 64 padding, i.e. exactly what the widest menu (Cells & Accessories) needs at the new column floor. Still inside 94vw at 1360px, the narrowest desktop width before the drawer takes over. */ .rd-panel { width: max-content; max-width: min(94vw, 1272px); } /* Utility panels drop from the navy bar and lay OVER the product bar. They open leftward-aligned to their trigger. */ .rd-panel--util { top: 100%; left: 0; } /* Single-column menus (About Us, Support, Resources, Contact Us) need a floor width — max-content alone makes a narrow, ragged box. */ .rd-panel--simple { min-width: 260px; } /* Product panels drop from the product bar. Right-anchored, because these triggers sit at the right end of the bar and a left-anchored wide box would run off the viewport. */ .rd-panel--prod { top: 100%; right: 0; } /* ...except the FIRST product menu (Potentiostats — the widest panel on the site): it sits leftmost in the bar, so right-anchoring would push its box off the left edge. Left-anchor that one. */ /* ...except the FIRST product menu, whose trigger is leftmost: right-anchoring its box to its own
  • would push it off the left edge. */ .rd-prod-nav > ul > li:first-child > .rd-panel--prod { left: 0; right: auto; } /* WIDE panels (>4 columns: Potentiostats at 5, Cells & Accessories at 7) do not fit hanging off their own trigger at all. Potentiostats can only use the ~858px to the RIGHT of its trigger — the nav is right-aligned, so that number barely moves with the viewport — and five columns plus the selector-tool button need ~956px. Cells is the mirror image: 1200px right-anchored to a trigger near the right end reached past the LEFT edge at 1360px. Both anchor to the product BAR instead: the
  • goes position:static, which makes .rd-prod-inner the containing block, and the panel right-aligns to the bar's gutter. The box still spans its own trigger horizontally. Narrow single-column menus keep hanging off their trigger, where bar-anchoring would strand them far to the right of the label that opened them. */ .rd-header .rd-prod-nav > ul > li.rd-navitem--wide { position: static; } .rd-prod-nav > ul > li.rd-navitem--wide > .rd-panel--prod { left: auto; right: 32px; } .rd-panel-inner { max-width: none; margin: 0; } /* FLEX, not grid. A grid whose tracks were `1fr` (or `minmax(_, max-content)`) inside a max-content box sized every track to 0 and let each column's text overflow on top of its neighbour — that is the "squished/overlapping columns" failure. Flex columns size to their own content, shrink only as far as min-width, and wrap their text instead of overlapping. */ .rd-panel-grid { position: relative; /* nowrap so the columns SHRINK to fit instead of breaking to a second row — flex wraps on base size and never shrinks to avoid a wrap, which turned the six-column Cells menu into a 906px-tall two-row panel. With the 1200px cap the six columns need 6*156 + 5*24 = 1056 of the 1136 available, so they fit one row with room to spare. A seventh column would not fit; that is the number to watch. */ display: flex; flex-wrap: nowrap; gap: 24px; align-items: flex-start; } .rd-panel-col { display: flex; flex-direction: column; /* 152px, not 140: at the old floor the longest single words in the Cells & Accessories headings ("Electrochemical", "Electrochemistry") did not fit, which is what forced the mid-word breaks. Raising the floor costs width only in the seven-column panel, which is capped to match below. */ flex: 0 1 auto; min-width: 152px; max-width: 240px; } /* The column carrying the button needs to stay wide enough for it to read on one line (~204px). Without this floor, proportional flex shrink squeezed it to 140px, the label broke onto three lines and pushed out of the panel. */ .rd-panel-grid--cta > .rd-panel-col:last-child { min-width: 236px; align-self: stretch; } /* Long product names wrap inside their column rather than forcing it wider — but at SPACES only. `overflow-wrap: break-word` was splitting headings mid-word in the narrow Cells & Accessories columns ("Spectro & Photo Electrochemistry", "Faraday Shields & Enclosures"), which reads as a typo. A single token longer than the column is preferable to a broken word; the column min-width below is sized so that does not occur. */ /* In the seven-column panel the headings get 19px -> 17.5px so the longest single word clears the 152px column without breaking. */ .rd-navitem--wide .rd-panel-head { font-size: 17.5px; } .rd-panel-head, .rd-panel-links a { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; } /* The 2px navy rule under each heading is what makes a panel scan as families rather than one long list. Load-bearing, not decoration. */ .rd-panel-head { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 19px; color: var(--gm-ink); padding-bottom: 12px; border-bottom: 2px solid var(--gm-navy); line-height: 1.25; } .rd-panel-links { display: flex; flex-direction: column; padding-top: 10px; } .rd-panel-links a { padding: 8px 0; font-size: 15.5px; color: var(--gm-body); } .rd-panel-links a:hover { color: var(--gm-navy); } /* Kill the legacy FontAwesome arrow glyphs injected on nav.desktop links */ .rd-panel a::before, .rd-panel a::after { content: none !important; display: none !important; } .rd-panel-viewall { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gm-border-soft); font-size: 15px; font-weight: 600; color: var(--gm-navy); } .rd-panel-viewall:hover { color: var(--gm-navy-hover); } /* Simple panels get no heading — the trigger is still visible directly above. Changed in review; do not add one back. */ .rd-panel--simple .rd-panel-links { padding-top: 0; } /* Selector-tool CTA — Potentiostats only. Absolutely positioned bottom-right of the grid so it shares a baseline with the last "View all" instead of adding a full-width footer row (this is already the tallest panel on the site). If a future menu's shortest column is shorter than the CTA, guard for collision — the current column set clears it. */ /* The CTA fills space the panel ALREADY has instead of reserving a row of its own. It is the last child of the last column: that column stretches to the row's height (set by the tallest column) and `margin-top:auto` drops the button to its foot, so the panel does not grow. In FLOW, not absolutely positioned — a ~222px button under a 156px column always overlapped whichever neighbouring column ran full height, from either side. The column widens to fit the button on its own, since flex sizes it from max-content. */ .rd-panel-cta { margin-top: auto; padding-top: 20px; display: flex; min-width: 0; } /* Stays on one line at normal widths; allowed to wrap only if the panel is squeezed hard enough that it would otherwise push past the panel edge. */ .rd-panel-cta a { white-space: normal; } .rd-panel-cta a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 8px; background: var(--gm-navy); color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 600; } .rd-panel-cta a:hover { background: var(--gm-navy-hover); color: #fff; } /* ---- legacy-specificity overrides ---- layout.css still styles this markup by ID and with `nav.desktop > ul > li`, both of which outrank plain classes. Each rule below exists ONLY to win that fight — matching the selector weight, not restyling anything. */ /* Each
  • IS the containing block for its own panel box — that is what makes a dropdown hang off the item you hovered instead of spanning the bar. layout.css already sets this for the product nav via `nav.desktop > ul > li`; declare it for both navs so the utility bar does not depend on that legacy rule. */ .rd-header .rd-prod-nav > ul > li, .rd-header .rd-util-nav ul > li { position: relative; } /* THE SQUISHED PRODUCT BAR. `nav.desktop > ul` (0,1,2) in layout.css beat `.rd-prod-nav > ul` (0,1,1) and forced `display:block`, which silently voided the flex `gap` — so the five labels sat with no space at all. It also sets `font-size:1px` (the old text-align:justify spacing hack), which collapsed even the inter-element whitespace, and a fixed `height:55px`. Two classes beats one, so these win. */ .rd-header .rd-prod-nav > ul { /* nowrap: the bar must stay one line. The logo flexes instead (see .rd-logo). */ display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0 18px; height: auto; font-size: inherit; text-align: left; } .rd-header .rd-prod-nav > ul > li { display: block; flex: none; } @media (max-width: 1560px) { .rd-header .rd-prod-nav > ul { gap: 0 10px; } } /* Legacy `#nav_wrap nav.desktop > ul > li > a` (1 id, 1 class) zeroed the trigger padding, so the labels had no internal breathing room either. Same id count, more classes. */ /* font-size too: `nav.desktop > ul > li > a` sets 20px, which beat the 17px on .rd-trig--prod and blew the labels up above the 1560px breakpoint. */ /* font-weight is the same story: that legacy rule sets 500 and outranks the 600 on .rd-trig--prod (line ~165), so the product nav rendered a weight lighter than the design asks for. Added here rather than in a new block because this selector already exists to out-specify exactly that rule. */ /* color too: navy is the chosen look (see the note on .rd-trig--prod above), but it was only happening by accident — layout.css's #003f69 was winning. Stated here on the --gm-navy token (#003e69) so it is intentional and owned by the design system. */ .rd-header #nav_wrap .rd-prod-nav > ul > li > .rd-trig--prod { padding: 9px 12px; font-size: 17px; font-weight: 600; color: var(--gm-navy); } @media (max-width: 1560px) { .rd-header #nav_wrap .rd-prod-nav > ul > li > .rd-trig--prod { padding: 8px 8px; font-size: 15.5px; } } /* `#show_search` painted a 24px navy filled circle. The handoff is explicit that the glass is bare: a filled navy circle read as a third CTA competing with the utility pills. */ .rd-header #show_search.rd-search-btn { float: none; width: auto; height: auto; margin: 0 0 0 10px; background: none; border: 0; border-radius: 0; /* layout.css also puts an inset 1px white ring on the button. */ box-shadow: none; /* It clipped to the 24px circle; the glass is 22px and must not be cropped. */ overflow: visible; color: var(--gm-navy); } .rd-header #show_search.rd-search-btn:hover { background: none; color: var(--gm-navy-hover); } /* The circle was NOT the element's own background — layout.css paints it with a radial-gradient ::before inset 2px, transitioned over 200ms and taken to opacity 0 on hover. Clearing `background` above left that disc untouched, so the glass sat on a navy blob that faded out under the cursor, which read as a rendering glitch. content: none removes the pseudo-element's box outright. */ .rd-header #show_search.rd-search-btn::before, .rd-header #show_search.rd-search-btn:hover::before { content: none; } /* `#lang_select` floated right inside a bordered, rounded box. The selector is a setting, not an action — plain label + chevron behind a 1px divider. */ .rd-header #lang_select.rd-lang { float: none; border: 0; border-radius: 0; border-left: 1px solid var(--gm-onnavy-rule); font-size: 13px; } /* TWO arrows were showing beside "English". The legacy stylesheet draws its own chevron on `.expand` as a rotated bordered square (`#lang_select .expand:before`, layout.css) while the redesign adds a FontAwesome chevron on the SAME element via `.rd-lang .expand::after`. Different pseudo-elements, so neither overrode the other and both painted. FontAwesome is loaded, so the redesign's chevron is the one that renders as intended and the legacy square is the extra. `content: none` removes the pseudo-element's box outright, and the 30x30 floated wrapper goes with it — inside the header's inline-flex row that box was also padding the label out to the right. Scoped to .rd-header and repeating the #id so it outranks layout.css's own #id selector. */ .rd-header #lang_select.rd-lang .expand { display: inline; float: none; position: static; width: auto; height: auto; } .rd-header #lang_select.rd-lang .expand::before { content: none; } /* "English" and the chevron were touching. `.rd-lang .current_lang` (line ~137) already asks for `display:inline-flex; gap:6px`, but layout.css sets `#lang_select > .current_lang { display: block }` — an ID selector, so it won. The element was never a flex container and `gap` does nothing outside flex/grid, leaving a 0px gap. Restated here with the #id repeated so it outranks layout.css. */ .rd-header #lang_select.rd-lang .current_lang { display: inline-flex; align-items: center; gap: 6px; } /* The dropdown PANEL was still entirely legacy. `.rd-lang > ul` (line ~140) and `.rd-lang > ul a` (line ~142) describe the redesigned panel, but every one of those declarations lost to layout.css:107-110 `#lang_select > ul` / `> ul a` — again ID vs class. Found by the 2026-08 inert-declaration sweep; the panel rendered 79px wide with one square corner, no padding, and z-index 2 (low enough to sit under page content). Only the box-shadow was getting through. Restated with the #id repeated. Also covers three things the sweep could not flag because it skips colours and shorthands: the #ccc border, the #000 link colour, and `text-align: right` on the links. */ .rd-header #lang_select.rd-lang > ul { z-index: 9600; min-width: 150px; padding: 8px 0; border: 1px solid var(--gm-border); border-radius: 10px; /* layout.css sets overflow:hidden; keep it so the 10px corners clip the hover fill. */ overflow: hidden; } .rd-header #lang_select.rd-lang > ul a { padding: 8px 16px; font-size: 14px; text-align: left; color: var(--gm-body); } .rd-header #lang_select.rd-lang > ul a:hover { color: var(--gm-navy); background: var(--gm-panel); text-decoration: none; } /* =================================================================== MOBILE (<1340px): the two tiers collapse into ONE hamburger drawer that drops DOWN below the header. responsive.js re-parents #top_nav into #nav_wrap > nav, so the drawer is: [Shop/Registration buttons] then "Products" then "Company" — products first, per the handoff. Breakpoint driven by responsive.js (:root.mobile). =================================================================== */ /* On mobile the header collapses to logo + hamburger only. The navy utility bar is hidden; its contents live in the drawer. */ :root.mobile .rd-util { display: none !important; } :root.mobile .rd-header .rd-prod-inner { padding: 14px 24px; } :root.mobile #show_search { display: none !important; } :root.mobile .rd-logo img { height: 56px; } /* WCAG 2.1 SC 1.4.10 Reflow: at 320px the header could not fit its own contents. Measured overflow was 6px on every page (scrollWidth 326), with .nav_toggle as the element pushed past the edge. Closed on the GAP rather than the logo or the padding, because the gap is the only one of the three that costs nothing here: .rd-prod-inner is justify-content:space-between, so at this width the logo and the hamburger are already pinned to opposite ends and the gap contributes no visible separation — it only acts as a minimum that forces the row wider than the viewport. Shrinking the logo would shrink the brand mark on every narrow-screen page, and shrinking the padding would pull the header out of alignment with the content below. Scoped to <=400px so nothing changes on ordinary phones (375px already passed). */ @media (max-width: 400px) { .rd-header .rd-prod-inner { gap: 12px; } } /* hamburger: bordered box, three ink bars (design spec) */ .rd-header .nav_toggle { position: static !important; top: auto !important; right: auto !important; border: 1px solid var(--gm-border-ctl); border-radius: 9px; width: 46px; height: 42px; padding: 0; background: none; box-shadow: none !important; } :root.mobile .rd-header .nav_toggle { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .rd-header .nav_toggle .bar { width: 20px !important; height: 2px !important; background: var(--gm-ink) !important; border-radius: 2px; margin: 0 !important; } .rd-header .nav_toggle.open { position: static !important; top: auto !important; right: auto !important; border-color: var(--gm-navy); background: #eef4f8; } /* responsive.css animates the open state into an X with `position:relative` plus `left:22px; top:14px` (and rotations) under @media (max-width:500px). Killing only the transform left the offsets in place, so the three bars slid out of the button box and drew as a stray dash with two lines beside it. Neutralise the offsets too — this design keeps three flat bars when open, just navy. */ .rd-header .nav_toggle .bar, .rd-header .nav_toggle.open .bar { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; } .rd-header .nav_toggle.open .bar { transform: none !important; opacity: 1 !important; background: var(--gm-navy) !important; } /* The drawer anchors to the product bar (full width), not to #nav_wrap. */ :root.mobile #nav_wrap { position: static !important; } :root.mobile .rd-header .rd-prod { position: relative; } :root.mobile #nav_wrap > nav.mobile, #nav_wrap > nav.mobile { display: none; position: absolute !important; top: 100%; left: 0 !important; right: 0 !important; width: auto !important; max-width: none; min-width: 0; bottom: auto !important; background: var(--gm-bg) !important; border: none; border-top: 1px solid var(--gm-border); box-shadow: 0 26px 44px rgba(23,36,43,0.16); padding: 4px 28px 28px !important; margin: 0; max-height: 76vh; overflow-y: auto; overflow-x: hidden; z-index: 8900; } :root.mobile #nav_wrap > nav.mobile.open { position: absolute !important; width: auto !important; } /* section eyebrow labels ("Products" / "Company") */ nav.mobile .mobile-sect { display: block; color: var(--gm-muted) !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.14em; text-transform: uppercase; padding: 18px 0 4px !important; margin: 0 !important; border: none !important; } nav.mobile #top_nav li.mobile-sect { border-top: none !important; margin-top: 0 !important; padding-top: 20px !important; } nav.mobile li.mobile-sect:after { display: none !important; } /* The desktop legacy-specificity overrides target `.rd-header .rd-prod-nav > ul` (0,2,1), which outranks `nav.mobile > ul` (0,1,2) — and responsive.js only swaps the `desktop` class for `mobile`, so the nav KEEPS .rd-prod-nav in the drawer. Result: both drawer lists stayed a horizontal nowrap flex row, every row 52px tall and the whole drawer 259px instead of a stacked list. These restore block flow with enough weight to win (:root.mobile adds a class). */ :root.mobile .rd-header nav.mobile > ul { display: block; gap: 0; height: auto; font-size: inherit; justify-content: normal; align-items: normal; } :root.mobile .rd-header nav.mobile > ul > li { display: block; flex: none; } /* top-level item rows */ nav.mobile > ul { max-width: none; padding: 0; margin: 0; list-style: none; } nav.mobile > ul > li { position: relative; padding: 0 !important; margin: 0; border-bottom: 1px solid var(--gm-border-soft); } nav.mobile > ul > li:after { display: none !important; } nav.mobile a { color: var(--gm-ink) !important; display: block; } nav.mobile a:hover { color: var(--gm-navy) !important; } /* In the drawer the triggers are buttons, not links — they only disclose, they never navigate (the family page is reached from "View all" inside). Style them like the old top-level rows so the drawer reads unchanged. */ nav.mobile > ul > li > .rd-trig { display: flex !important; align-items: center; justify-content: flex-start; width: 100%; padding: 15px 44px 15px 0 !important; border-radius: 0; background: none !important; text-align: left; font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; font-size: 16px !important; letter-spacing: 0 !important; color: var(--gm-ink) !important; line-height: 1.3; white-space: normal; } nav.mobile > ul > li > .rd-trig[aria-expanded="true"] { color: var(--gm-navy) !important; background: none !important; } /* The desktop chevron is replaced by the .hc-toggle affordance on mobile */ nav.mobile .rd-trig .rd-chev { display: none !important; } /* chevron toggle button injected by responsive.js */ nav.mobile .hc-toggle { position: absolute; top: 0; right: 0; width: 44px; height: 50px; padding: 0; margin: 0; background: none !important; border: none !important; color: var(--gm-body); cursor: pointer; font-family: FontAwesome; font-size: 17px; line-height: 50px; text-align: center; } nav.mobile .hc-toggle:before { content: '\f107' !important; display: inline-block; transition: transform .2s ease; } nav.mobile .hc-toggle.open { color: var(--gm-navy); } nav.mobile .hc-toggle.open:before { transform: rotate(180deg); } /* Expanded panel inside the accordion: strip the desktop shell entirely and stack the family columns. Overriding the desktop absolute/visibility rules is what makes slideToggle() work on it. */ nav.mobile .rd-panel { position: static !important; display: none; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 0 12px 8px !important; margin: 0; min-width: 0 !important; transition: none !important; } /* Deliberately NO `.is-open { display: block }` rule here. On mobile the panel's visibility is jQuery's alone (slideDown/slideUp write inline display). When the class ALSO supplied display, the two desynced: adding .is-open made the panel visible, so the slide that followed treated it as open and shut it again — aria said expanded while the panel stayed hidden. */ /* Fill the drawer, the way the old `ul.dropdown` did. The desktop panel is a content-sized box (`width: max-content` + a max-width cap) and its columns carry min/max widths for the flex row — left in place on mobile those made the submenu a 247px box floating inside a 319px drawer, and clamped each stacked group to 240px. Neutralise all of it so the accordion contents run the full width of the drawer. !important because the per-menu desktop caps (e.g. the 856px first-child rule) are more specific than a plain mobile selector. */ :root.mobile .rd-header nav.mobile .rd-panel { width: auto !important; max-width: none !important; } :root.mobile .rd-header nav.mobile .rd-panel-col { min-width: 0 !important; max-width: none !important; } nav.mobile .rd-panel-inner { max-width: none; margin: 0; } nav.mobile .rd-panel-grid { display: block !important; gap: 0 !important; } nav.mobile .rd-panel-col { display: block; margin-bottom: 14px; } nav.mobile .rd-panel-head { padding: 0 0 4px !important; font-family: 'Space Grotesk', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; color: var(--gm-navy) !important; border: none !important; } nav.mobile .rd-panel-links { padding-top: 0; } nav.mobile .rd-panel-links a { padding: 7px 0 !important; font-size: 14px !important; color: var(--gm-body) !important; } nav.mobile .rd-panel-viewall { display: inline-block; margin-top: 4px; padding: 7px 0 0 !important; border: none !important; font-size: 13.5px !important; color: var(--gm-navy) !important; } /* The absolute bottom-right CTA has no meaning in a stacked drawer */ nav.mobile .rd-panel-cta { position: static !important; display: block; margin-top: 10px; } nav.mobile .rd-panel-cta a { display: inline-flex; color: #fff !important; padding: 10px 16px; } /* Shop / Registration as full-width buttons at the TOP of the drawer, keeping the filled/outlined distinction from the navy bar. responsive.js moves them in; .rd-drawer-actions is its wrapper. */ nav.mobile .rd-drawer-actions { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 4px; } nav.mobile .rd-drawer-actions .rd-pill { display: flex; justify-content: center; width: 100%; padding: 13px 16px; border-radius: 10px; font-size: 15px; } nav.mobile .rd-drawer-actions .rd-pill--filled { background: var(--gm-navy) !important; color: #fff !important; } nav.mobile .rd-drawer-actions .rd-pill--filled:hover { background: var(--gm-navy-hover) !important; color: #fff !important; } nav.mobile .rd-drawer-actions .rd-pill--outline { background: none !important; border: 1px solid var(--gm-border-ctl); color: var(--gm-navy) !important; } nav.mobile .rd-drawer-actions .rd-pill--outline:hover { border-color: var(--gm-navy); color: var(--gm-navy) !important; } /* legacy side-flyout close button not used in the drop-down design */ nav.mobile #nav_close { display: none !important; } /* =================================================================== HOMEPAGE — Phase 2: spotlight hero carousel =================================================================== */ .rd-home { font-family: 'IBM Plex Sans', sans-serif; } .rd-hero { position: relative; overflow: hidden; background: #0f1b21; isolation: isolate; } /* =================================================================== WCAG 1.4.10 Reflow — Google reCAPTCHA is a FIXED 304px wide, which does not fit a 320px viewport once page gutters are subtracted (~280px available), so it forced the whole page to scroll sideways on any page carrying a form. Its width is Google's and cannot be changed, so let the widget scroll inside its own box: the page stops scrolling, which is what the SC requires. =================================================================== */ @media (max-width: 420px) { .g-recaptcha, #recaptchav2-sitekey-holder, div[id^="Nocaptcha-"] { max-width: 100%; overflow-x: auto; } /* The Dynamics form's own fixed field width is handled at its source, in DynamicsForm.css, by relaxing the --form-width token below 420px. */ } /* =================================================================== WCAG 2.5.8 Target Size (Minimum). Link lists inside sidebar widgets sat at a 23px line-height — 1px under the 24px minimum, so the 24px circles centred on adjacent links intersected and the spacing exception did not apply. 26px clears it with margin. Scoped to widget bodies so ordinary prose lists (which are not link lists) keep their normal measure. =================================================================== */ .WidgetHolder .right_block ul li { line-height: 26px; } /* =================================================================== Skip link (WCAG 2.4.1). Off-screen until focused, then pinned top-left. Not display:none — that would take it out of the tab order entirely. =================================================================== */ .rd-skiplink { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #003e69; color: #fff; padding: 12px 20px; font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; font-weight: 600; border-radius: 0 0 8px 0; text-decoration: none; } .rd-skiplink:focus { left: 0; } .rd-skiplink:focus-visible { outline: 3px solid #4a90c2; outline-offset: -6px; } /* the #main landmark carries tabindex="-1" purely as a focus target */ main[tabindex="-1"]:focus { outline: none; } .rd-hero-track { position: relative; display: grid; min-height: clamp(520px, 66vh, 680px); } /* slides stack in one grid cell (track auto-sizes to tallest); only opacity cross-fades — no position swap, so the text never reflows/glitches on switch */ .rd-hero-slide { grid-area: 1 / 1; opacity: 0; pointer-events: none; z-index: 0; display: flex; align-items: center; /* WCAG 1.4.10 Reflow: a grid item defaults to min-width:auto, so the track was sized to the slide's min-content width (340px) and the page scrolled sideways at a 320px viewport. min-width:0 lets it shrink to the cell. */ min-width: 0; background-color: #0f1b21; background-position: center; background-size: cover; background-repeat: no-repeat; transition: opacity .6s ease; } .rd-hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; } /* Hero weight on phones. The slide is a CSS background, so there is no srcset to reach for — every device was downloading Fill(2000,1125), which is 181-200 KB per slide and about 720 KB of the homepage's 1.4 MB on a 375px viewport. The template emits both sizes as custom properties; these two rules swap them, which is the srcset equivalent for a background image. 1200 wide is not arbitrary: a 375px slide on a 3x screen needs 1125 device pixels, so 1200 covers the sharpest phone in use and nothing more. The background-image MUST be declared here rather than in the template's style attribute. The first version of this set `background-image:var(--hero-lg)` inline, and an inline style beats any stylesheet rule, so the media query below never applied and mobile kept downloading all 1418 KB. The measurement was identical to the byte, which is the only reason it was caught. The template now emits the two variables and nothing else. */ .rd-hero-slide { background-image: var(--hero-lg); } /* RESPONSIVE BACKGROUNDS — one mechanism for every card and tile on the site. These images are CSS backgrounds, not , so srcset does not apply to them. Instead each template emits two sized variants as custom properties and this pair swaps them. Measured at 375px before this existed: the potentiostat cards fetched Pad(1680,1050) — 186 KB — into a box rendering 325px wide, and the homepage tiles fetched Pad(1040,780) into boxes of 279-325px. Between 2.5x and 5.2x too many pixels in every case. The selector matches on the presence of --img-sm rather than on a component class, so a template opts in by emitting the variables and needs no CSS of its own. It MUST live in the stylesheet and not in the style attribute: an inline background-image beats any stylesheet rule, and the first attempt at the hero above failed silently for exactly that reason — identical bytes, correct-looking markup, no effect. SPECIFICITY IS LOAD-BEARING HERE, hence the doubled attribute selector. Page stylesheets load after this one, and several components set the `background` SHORTHAND — for example `.rd-pot-card-img { background: #e7edf0 center/cover no-repeat; }` — which resets background-image to none. A single-attribute selector (0,1,0) ties with that class and loses on order, and the potentiostat cards rendered with NO image at all: 7 images and 9 KB on a page that had been fetching 488 KB. Doubling the attribute makes it 0,2,0 so it wins regardless of load order. The placeholder rule `.rd-pot-card-img.rd-card-img--ph` is also 0,2,0 and still wins on order, which is correct — that is the no-image case. */ [style*="--img-lg"][style*="--img-sm"] { background-image: var(--img-lg); } @media (max-width: 900px) { [style*="--img-lg"][style*="--img-sm"] { background-image: var(--img-sm); } } @media (max-width: 900px) { .rd-hero-slide { background-image: var(--hero-sm); } } .rd-hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,23,29,0.94) 30%, rgba(15,23,29,0.62) 58%, rgba(15,23,29,0.16)); } .rd-hero-inner { position: relative; z-index: 2; max-width: 680px; padding: 56px 40px; min-width: 0; } .rd-hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; } .rd-hero-eyebrow .spot { letter-spacing: 0.18em; text-transform: uppercase; color: #7bb8dd; } .rd-hero-eyebrow .count { color: #7c8e96; letter-spacing: 0.06em; } /* WCAG 1.4.3: #6f8189 was 4.32:1 on the #0f1b21 hero fallback */ .rd-hero-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(40px, 4.6vw, 66px); letter-spacing: -0.03em; line-height: 1.0; color: #fff; margin: 0 0 22px; text-wrap: balance; } .rd-hero-desc { font-size: 18px; line-height: 1.6; color: #c3cdd2; max-width: 40em; margin: 0 0 26px; } .rd-hero-featured { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 12px 16px; margin-bottom: 30px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .rd-hero-featured .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #7bb8dd; } .rd-hero-featured .prod { color: #fff; font-weight: 600; font-size: 15px; } .rd-hero-featured .spec { color: #9fb0b7; font-size: 13.5px; } .rd-hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .rd-btn { display: inline-flex; align-items: center; font-weight: 600; font-size: 16px; padding: 14px 28px; border-radius: 10px; line-height: 1; transition: background .15s ease, border-color .15s ease, color .15s ease; } .rd-btn-primary { background: #003e69; color: #fff; } .rd-btn-primary:hover { background: #00567f; color: #fff; text-decoration: none; } .rd-btn-ghost { color: #e7edf0; border: 1px solid rgba(255,255,255,0.28); padding: 14px 22px; } .rd-btn-ghost:hover { border-color: #fff; color: #fff; text-decoration: none; } /* controls: prev / thumbnails / next, bottom-right */ .rd-hero-controls { position: absolute; right: 40px; bottom: 34px; z-index: 4; display: flex; align-items: center; gap: 12px; } .rd-hero-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s ease, border-color .15s ease; } .rd-hero-arrow:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); } .rd-hero-thumbs { display: flex; gap: 10px; } .rd-hero-thumb { width: 74px; height: 52px; border-radius: 9px; border: none; padding: 0; cursor: pointer; background-color: #22333c; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0.5; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s ease, outline-color .2s ease; } .rd-hero-thumb:hover { opacity: 0.8; } .rd-hero-thumb.is-active { opacity: 1; outline-color: #7bb8dd; } /* 2.4.7: .rd-hero-thumb uses `outline` as its SELECTION indicator (transparent until .is-active), which at equal specificity beat the global :focus-visible ring in base.css and left focused thumbs with no visible indicator. Restate the ring here at higher specificity so focus still wins over selection. */ .rd-hero-thumb:focus-visible { outline-color: #4a90c2; outline-width: 3px; } /* Pause / play toggle — shares the arrow-button chrome (2.2.2) */ .rd-hero-playpause { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s ease, border-color .15s ease; } .rd-hero-playpause:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6); } .rd-hero-playpause .ico-play { display: none; } .rd-hero-playpause.is-paused .ico-pause { display: none; } .rd-hero-playpause.is-paused .ico-play { display: block; } @media (prefers-reduced-motion: reduce) { .rd-hero-slide { transition: none; } } /* ---- hero responsive ---- */ @media (max-width: 900px) { .rd-hero-inner { padding: 44px 24px; } .rd-hero-desc { font-size: 16px; } .rd-hero-controls { right: 20px; bottom: 20px; gap: 8px; } .rd-hero-thumbs { display: none; } .rd-hero-track { min-height: 500px; } } /* =================================================================== HOMEPAGE — Phase 3: auto-bound sections (below the hero) =================================================================== */ .rd-home .rd-sect { padding: 56px 0; } .rd-sect-inner { max-width: 100%; padding: 0 40px; margin: 0; } .rd-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #003e69; margin-bottom: 12px; } .rd-eyebrow--tight { margin-bottom: 10px; letter-spacing: 0.12em; } .rd-sect-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; color: #17242b; margin: 0; line-height: 1.1; text-wrap: balance; } .rd-sect-lead { font-size: 16px; line-height: 1.6; color: #485258; margin: 8px 0 0; max-width: 46em; } .rd-sect-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .rd-sect-head--stack { display: block; max-width: 44em; margin-bottom: 28px; } .rd-sect-more { font-weight: 600; font-size: 15px; color: #003e69; white-space: nowrap; } .rd-sect-more:hover { color: #00567f; } /* shared cards */ .rd-grid { display: grid; gap: 22px; } .rd-card { display: block; background: #fff; border: 1px solid #e6eaec; border-radius: 16px; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } a.rd-card:hover { border-color: #003e69; transform: translateY(-4px); box-shadow: 0 20px 44px rgba(23,36,43,0.14); text-decoration: none; } .rd-card-img { aspect-ratio: 4/3; background: #e7edf0 center/cover no-repeat; } /* A vector card image (a software product's SVG logo) must not be cropped: `cover` stretches a square mark across the 4:3 card. Contain it on white, with a little inset so the mark is not flush to the card edge. */ .rd-card-img--logo { background-color: #fff; background-size: 72%; background-position: center; } .rd-card-img--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a3a52, #0f2231); } .rd-card-img--ph span { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.72); padding: 0 16px; text-align: center; } .rd-card-body { padding: 18px; } .rd-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; font-weight: 600; color: #17242b; margin: 0 0 6px; line-height: 1.2; } .rd-card-title--sm { font-size: 19px; } .rd-card-desc { font-size: 13px; line-height: 1.45; color: var(--gm-body); margin: 0 0 14px; } .rd-card-link { font-weight: 600; font-size: 13px; color: #003e69; } /* trust strip */ .rd-trust { border-top: 1px solid #e6eaec; border-bottom: 1px solid #e6eaec; } .rd-trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; } .rd-trust-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted); } .rd-trust-stats { display: flex; gap: 40px; flex-wrap: wrap; } .rd-trust-stats .stat { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 500; color: #17242b; } .rd-trust-stats .lbl { font-size: 13.5px; color: var(--gm-body); } /* product rail */ .rd-grid-products { grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr)); } /* browse by application */ .rd-apps { background: #f2f4f5; border-top: 1px solid #e6eaec; } .rd-grid-apps { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; } .rd-card-theme { display: flex; flex-direction: column; } .rd-theme-banner { position: relative; aspect-ratio: 16/9; display: flex; align-items: flex-end; justify-content: space-between; padding: 16px 20px; background: #0f1b21 center/cover no-repeat; } .rd-theme-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,29,0.15) 35%, rgba(15,23,29,0.85)); } .rd-theme-banner--1 { background-image: linear-gradient(135deg, #0b3b53, #0f2231); } .rd-theme-banner--2 { background-image: linear-gradient(135deg, #3a2a1a, #241a12); } .rd-theme-banner--3 { background-image: linear-gradient(135deg, #113b2e, #0f2320); } .rd-theme-banner--4 { background-image: linear-gradient(135deg, #1a2c52, #12182f); } .rd-theme-name { position: relative; z-index: 1; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 21px; color: #fff; } .rd-theme-arrow { position: relative; z-index: 1; color: #7bb8dd; font-weight: 600; font-size: 18px; } .rd-card-theme:hover { border-color: #003e69; box-shadow: 0 20px 44px rgba(23,36,43,0.14); transform: translateY(-4px); } .rd-theme-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 20px; } .rd-pill { font-size: 13px; font-weight: 500; color: #485258; background: #f2f4f5; border: 1px solid #e6eaec; border-radius: 999px; padding: 5px 12px; } .rd-pill:hover { color: #003e69; border-color: #003e69; text-decoration: none; } /* Kolibrik lineup */ .rd-kolibrik { background: #f2f4f5; border-top: 1px solid #e6eaec; } .rd-kolibrik-head { margin-bottom: 26px; } /* Explicit column counts, not auto-fit minmax. The band holds exactly six models and .rd-sect-inner is full-bleed, so auto-fit landed on a different count at every width — 6-across at 1440 but an orphaned 5+1 at 1280. Fixed columns divide six evenly at each breakpoint (3x2, 2x3, 1x6) and give the wide rack photos room to read. */ .rd-grid-kolibrik { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } @media (max-width: 900px) { .rd-grid-kolibrik { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .rd-grid-kolibrik { grid-template-columns: 1fr; } } .rd-card-model { padding: 16px; border-radius: 14px; } /* Same box as .rd-model-viz it replaces, so cards keep aligning whichever one renders. */ .rd-model-img { aspect-ratio: 16/8; background: #fff center/contain no-repeat; border: 1px solid #e6eaec; border-radius: 10px; margin-bottom: 14px; } .rd-model-viz { aspect-ratio: 16/8; background: linear-gradient(135deg, #eef1f2, #dde4e6); border-radius: 10px; display: flex; align-items: center; padding: 0 14px; margin-bottom: 14px; } .rd-model-chip { width: 52px; height: 22px; border-radius: 4px; background: #17242b; } .rd-model-dots { display: flex; gap: 6px; margin-left: auto; } .rd-model-dots i { width: 8px; height: 8px; border-radius: 50%; } .rd-model-dots i:nth-child(1) { background: #003e69; } .rd-model-dots i:nth-child(2) { background: #8a969c; } .rd-model-dots i:nth-child(3) { background: #cfd8dc; } .rd-model-name { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500; color: #17242b; margin: 0 0 4px; } .rd-model-spec { font-size: 12.5px; color: var(--gm-body); margin: 0; } .rd-megaeis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); overflow: hidden; } /* Gradient stays as the no-photo fallback; an inline background-image overrides it. contain, not cover: the MegaEIS rack must not be cropped. */ .rd-megaeis-img { min-height: 220px; background: linear-gradient(135deg, #1a3a52, #0f2231); background-size: contain; background-position: center; background-repeat: no-repeat; } .rd-megaeis-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; } .rd-megaeis-title { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #17242b; margin: 0 0 10px; } .rd-megaeis-stats { display: flex; gap: 26px; margin-bottom: 18px; flex-wrap: wrap; } .rd-megaeis-stats .stat { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 500; color: #17242b; } .rd-megaeis-stats .lbl { font-size: 12.5px; color: var(--gm-body); } /* resources */ .rd-grid-resources { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); } /* Resource cards carry no image (their content is text — app notes, guides, posts), so instead of a placeholder picture they get a slim accent bar whose COLOUR encodes the kind. That is information a photo could not give and a blank box did not. */ .rd-res-accent { height: 4px; border-radius: 0; } .rd-res-accent--note { background: #0b3b53; } /* Application Note — teal-navy */ .rd-res-accent--guide { background: #b4791a; } /* Buying Guide — amber */ .rd-res-accent--blog { background: #1f6d4a; } /* Gamry Spark Blog — green */ .rd-card-resource .rd-eyebrow { margin-bottom: 12px; } /* responsive */ @media (max-width: 700px) { .rd-home .rd-sect { padding: 40px 0; } .rd-sect-inner { padding: 0 24px; } .rd-megaeis-body { padding: 28px 24px; } } /* =================================================================== FOOTER — Phase 3: dark redesign (site-wide), bound to FooterNavItems Overrides the legacy floated / yellow-bordered footer in layout.css. =================================================================== */ #footer_wrap { background: #17242b !important; border-bottom: none !important; font-family: 'IBM Plex Sans', sans-serif; } #footer_wrap:before, #footer_wrap:after { display: none !important; } #footer_wrap > footer { padding: 52px 40px 26px !important; max-width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 48px; } #footer_wrap > footer:after { content: none !important; } /* brand block (logo + address) */ #footer_wrap footer > address { float: none !important; display: block; color: #aeb9be !important; font-size: 13.5px !important; line-height: 1.6 !important; font-style: normal; flex: 1 1 240px; max-width: 300px; } #footer_wrap footer > address img { filter: brightness(0) invert(1); width: 210px; height: auto; margin-bottom: 16px; } #footer_wrap footer > address h6 { color: #cfd8dc !important; font-family: 'IBM Plex Mono', monospace; font-size: 11px !important; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.6 !important; } #footer_wrap footer > address a { color: #cfd8dc !important; } #footer_wrap footer > address a:hover { color: #7bb8dd !important; } /* nav columns */ #footer_wrap footer > nav { float: none !important; margin: 0 !important; padding: 0 !important; border-left: none !important; flex: 3 1 480px; } #footer_wrap footer > nav > ul { display: flex !important; flex-wrap: wrap; gap: 32px 48px; font-size: inherit !important; text-align: left !important; } #footer_wrap footer > nav > ul:after { content: none !important; } #footer_wrap footer > nav > ul > li { display: block !important; margin: 0 !important; min-width: 140px; } #footer_wrap footer > nav > ul > li > h6 { font-family: 'IBM Plex Mono', monospace; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.12em; text-transform: uppercase; color: #8a969c !important; margin: 0 0 14px !important; line-height: 1.4 !important; } #footer_wrap footer > nav > ul > li > h6 a { color: #8a969c !important; } #footer_wrap footer > nav ul ul { display: flex !important; flex-direction: column; gap: 9px; } #footer_wrap footer > nav ul ul li { font-size: 13.5px !important; line-height: 1.4 !important; } #footer_wrap footer > nav a { color: #cfd8dc !important; text-decoration: none; } #footer_wrap footer > nav a:hover { color: #7bb8dd !important; text-decoration: none; } /* social row */ #footer_wrap #social { flex-basis: 100%; text-align: left !important; margin: 8px 0 0 !important; order: 4; } #footer_wrap #social li { margin: 0 10px 0 0 !important; } #footer_wrap #social a { width: 38px !important; height: 38px !important; background-color: #223039 !important; } #footer_wrap #social a:hover { background-color: #003e69 !important; box-shadow: none !important; } /* bottom bar */ #footer_wrap #copyright { flex-basis: 100%; order: 5; clear: none !important; text-align: left !important; padding: 22px 0 0 !important; margin-top: 14px; border-top: 1px solid #2a3a43; color: #8a969c !important; font-size: 12.5px !important; } #footer_wrap #copyright a { color: #8a969c !important; } #footer_wrap #copyright a:hover { color: #7bb8dd !important; } @media (max-width: 700px) { #footer_wrap > footer { padding: 40px 24px 24px !important; gap: 28px; } #footer_wrap footer > nav > ul { gap: 24px 32px; } } /* =================================================================== HOMEPAGE — Phase 4: bespoke feature bands =================================================================== */ .rd-btn-sm { font-size: 15px; padding: 12px 24px; border-radius: 9px; } .rd-textlink { font-weight: 600; font-size: 15px; color: #003e69; } .rd-textlink:hover { color: #00567f; text-decoration: none; } .rd-textlink--light { color: #7bb8dd; } .rd-textlink--light:hover { color: #a9d1e8; } .rd-eyebrow--light { color: #7bb8dd; } .rd-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 44px; align-items: center; } /* promo card */ .rd-promo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); border: 1px solid #e6eaec; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(23,36,43,0.08); } .rd-promo-img { min-height: 280px; background: #e7edf0 center/cover no-repeat; } /* Applied only when a promo image is set. `contain` instead of `cover` so the instrument is never cropped; white rather than the #e7edf0 empty-state grey so the letterboxing is continuous with the Pad colour baked into the image. The grey stays on the base rule so an unset promo still reads as empty. aspect-ratio gives the slot a shape of its own instead of inheriting the height of the body copy beside it. Without it the box came out 599x291 — ratio 2.06 against the image's 1.41 — so `contain` fitted by height and the photo rendered at only 410px wide inside a 599px box, with ~95px of dead white each side. 4:3 is the closest standard ratio to these product photos (the Reference 3020 master is 1.289) and is the same canvas the category thumbnails use, so the image now fills the slot edge to edge and is about twice the area it was. min-height is dropped to 0 here so the ratio, not the old 280px floor, decides the height. align-self keeps the ratio honest when the body copy is the taller of the two columns (it is at around 768px, where the card is 416px but the image's own height is 257px). The default `stretch` would hand the box a definite height and override aspect-ratio, letterboxing it again; centring leaves the photo at its true proportions with the surplus split above and below, against the card's own white. */ .rd-promo-img--fit { background-color: #fff; background-size: contain; aspect-ratio: 4 / 3; min-height: 0; align-self: center; } .rd-promo-body { padding: 44px; display: flex; flex-direction: column; justify-content: center; } .rd-promo-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .rd-promo-badge { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background: #e6eff6; color: #003e69; padding: 5px 10px; border-radius: 6px; } .rd-promo-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-muted); } .rd-promo-title { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: #17242b; margin: 0 0 12px; line-height: 1.08; } .rd-promo-blurb { font-size: 16px; line-height: 1.6; color: #485258; margin: 0 0 26px; max-width: 34em; } /* Headline figures for the promoted instrument. Once the photo grew to fill a 4:3 slot the copy column read thin beside it — a badge, a title, two lines of blurb and a button against a 599x449 image. These three figures give that column real weight without inventing copy, since they come from the linked product page's own Spec* fields. flex-wrap with `white-space: nowrap` on the figure, rather than a three-column grid. The widest value here is the 3020's "±11 / ±36 V" — 11 monospace characters, ~139px — and in a grid it broke across two lines wherever the copy column got narrow (it did at 950px, 768px, 700px and 420px, so a breakpoint would have been guesswork). Now a figure can never break mid-value: when the row runs out of room the whole cell moves to the next line instead, which holds at every width. Hairlines top and bottom tie the row to the blurb above and the buttons below rather than letting it float as a third block. */ .rd-promo-stats { display: flex; flex-wrap: wrap; gap: 14px 30px; padding: 18px 0; margin: 0 0 26px; border-top: 1px solid #eef1f2; border-bottom: 1px solid #eef1f2; max-width: 34em; } .rd-promo-stat { min-width: 0; } .rd-promo-stat-v { font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; color: var(--gm-ink, #17242b); line-height: 1.05; white-space: nowrap; } .rd-promo-stat-pre { font-size: 0.58em; font-weight: 400; letter-spacing: 0; } .rd-promo-stat-suf { font-size: 0.5em; font-weight: 400; letter-spacing: 0; white-space: nowrap; } .rd-promo-stat-k { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin-top: 6px; } .rd-promo-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } /* 30K Booster dark band */ .rd-booster { position: relative; overflow: hidden; border-radius: 20px; background: #0f1b21; padding: 52px 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px; align-items: center; } .rd-booster-glow { position: absolute; top: -34%; left: 36%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(0,90,140,0.4), transparent 62%); pointer-events: none; } .rd-booster-body { position: relative; } .rd-booster-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0 0 28px; line-height: 1.06; max-width: 18em; } .rd-booster-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 24px; margin-bottom: 28px; } .rd-booster-points h3 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 6px; } .rd-booster-points p { font-size: 15px; line-height: 1.55; color: #aeb9be; margin: 0; } .rd-booster-img { position: relative; align-self: stretch; min-height: 260px; border-radius: 14px; background: #fff center/contain no-repeat; } /* ToolkitPy code block */ .rd-code { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 54px rgba(23,36,43,0.22); background: #0f1b21; } .rd-code-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #16242b; border-bottom: 1px solid #22333c; } .rd-code-bar span { width: 11px; height: 11px; border-radius: 50%; background: #3a4d57; } .rd-code-bar em { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #7f8f97; margin-left: 8px; font-style: normal; } .rd-code-body { margin: 0; padding: 22px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; line-height: 1.7; color: #c3cdd2; overflow-x: auto; } .rd-code-body .c { color: #7c8e96; } /* WCAG 1.4.3: #6f8189 was 4.32:1 on the #0f1b21 code bg; #7c8e96 = 5.14:1 */ .rd-code-body .k { color: #7bb8dd; } .rd-code-body .v { color: #e0a458; } /* accuracy contour */ .rd-contour-sect { background: #f2f4f5; border-top: 1px solid #e6eaec; } .rd-contour-figure { background: #fff; border: 1px solid #e6eaec; border-radius: 16px; padding: 22px; } .rd-contour-figure img { display: block; width: 100%; height: auto; border-radius: 8px; } .rd-contour-cap { display: block; margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--gm-muted); } /* advantages */ .rd-grid-adv { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; } .rd-adv { position: relative; overflow: hidden; border-radius: 18px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; } /* rd-adv-global.webp: iStock-2255200909, centre-ish 2:1 crop of the 4206x2366 master, merged 55% toward #080d11. Replaced the .rd-adv-dots radial texture this card used to carry — the map brings its own grid, and two grids on top of each other just read as noise. Same dim caveat as its neighbour below: the arcs are thin and bright and they cross the body copy. At 48% the copy measures 4.93:1 (title 12.69, eyebrow 7.00, link 6.51); 42% drops the body to 4.65 and 55% flattens the map to nothing, so this is the middle of a narrow window. Recipe lives in .image-import/theme-images/convert.php; re-derive rather than brighten. */ .rd-adv--global { background: #17242b url(../images/rd-adv-global.webp) center 45%/cover no-repeat; } .rd-adv--global::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,36,43,0.28) 30%, rgba(23,36,43,0.72)), linear-gradient(90deg, rgba(23,36,43,0.82) 0%, rgba(23,36,43,0.42) 55%, rgba(23,36,43,0) 100%); } /* z-index, not just position: the ::after scrim is the last child, so a positioned sibling with z-index:auto paints UNDER it and the copy would sit behind the scrim. */ .rd-adv-top { position: relative; z-index: 1; } /* rd-adv-unique.webp: iStock-2212958041, COMPOSED not cropped — see .image-import/theme-images/ convert.php. The copy is right-aligned from 24% of the card, and `cover` fits this card by WIDTH, so horizontal framing comes only from the source frame: background-position-x is inert here. The master has just 1930px to the right of the target, nowhere near the ~6000 needed to push it into that left gutter, so the frame is extended with the artwork's own background field and the target now sits in the gutter with the arrow entering the left edge. `left` (not `center`) matters only below the breakpoint, where the card goes near-square and cover starts cropping width — anchoring left keeps the target in frame instead of the empty field. Because the copy sits on that field rather than on the target's glow, the dim is 16% instead of the 53% the centred crop needed and the scrim is much lighter. Measured at 1440: body 6.48:1, title 17.72, link 8.27. Re-derive from the master; don't brighten the WebP. */ .rd-adv--unique { background: #0f1b21 url(../images/rd-adv-unique.webp) left center/cover no-repeat; align-items: flex-end; } .rd-adv--unique::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,29,0.18) 30%, rgba(15,23,29,0.62)), linear-gradient(270deg, rgba(15,23,29,0.42) 0%, rgba(15,23,29,0.16) 55%, rgba(15,23,29,0) 100%); } /* The left gutter is a WIDE-DESKTOP-ONLY feature: .rd-adv-text is max-width 30em, so from about 1300px down the copy fills the card and starts at the 40px padding — there is no open space for the target to sit in, and it ends up behind the text. Measured with the real text box at six widths: 1440 gave 6.48:1 while 1200/1024/768/480/320 all collapsed to 1.4-1.5:1 on the target's bright rings. So below the breakpoint the artwork goes back to being a texture: bias the frame toward the extended field and carry a heavier scrim. Now 5.52:1 at 1200 (the worst case, where the card is still wide enough that little of the target is cropped away) up to 8.7:1 at 320. Re-measure at 1440 AND at 1200 if you touch either rule — the wide one alone will look fine and hide a failure across every other width, which is exactly what happened the first time. */ @media (max-width: 1300px) { .rd-adv--unique { background-position: 68% center; } .rd-adv--unique::after { background: linear-gradient(180deg, rgba(15,23,29,0.71) 0%, rgba(15,23,29,0.84) 100%); } } .rd-adv-body { position: relative; z-index: 1; } .rd-adv-title { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; } .rd-adv-text { font-size: 15.5px; line-height: 1.6; color: #aeb9be; margin: 0 0 20px; max-width: 30em; } .rd-adv .rd-textlink { position: relative; z-index: 1; } /* CTA band */ @media (max-width: 700px) { .rd-split { gap: 28px; } .rd-booster { padding: 32px 24px; } .rd-promo-body { padding: 28px 24px; } } /* image-slot placeholders (used until real, properly-sized images are uploaded) */ .rd-booster-img--ph { background: linear-gradient(135deg, #1c3d55, #12222c) !important; } /* =================================================================== Shared breadcrumb (category / potentiostats / selector pages) =================================================================== */ .rd-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gm-muted); margin-bottom: 22px; flex-wrap: wrap; font-family: 'IBM Plex Sans', sans-serif; } .rd-breadcrumb a { color: var(--gm-muted); } .rd-breadcrumb a:hover { color: var(--gm-navy); text-decoration: none; } .rd-breadcrumb .current { color: var(--gm-ink); } /* =========================================================================== The Gamry Spark — blog post template (redesign). Shared by all BlogPost pages; every optional block (byline, featured image, tags, category) degrades to nothing. =========================================================================== */ /* --rd-blog-shell = the article's content width: rail 210 + gap 56 + prose 39em. Header content, body grid, and related grid all cap to it and center, so the column sits centered on the page instead of pinned left with a dead right gutter. */ .rd-blog { background: var(--gm-bg, #fbfbfa); color: var(--gm-ink, #17242b); } .rd-blog :where(a) { text-decoration: none; } /* post header — band stays full-width; inner content centers to the shell */ .rd-blog-head { background: var(--gm-surface, #fff); border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 26px 40px 38px; } .rd-blog-head .rd-breadcrumb { width: var(--rd-blog-shell); max-width: 100%; margin-inline: auto; } .rd-blog-headmax { max-width: var(--rd-blog-shell); margin-inline: auto; } .rd-blog-metarow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .rd-blog-chip { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; background: var(--gm-navy, #003e69); color: #fff; padding: 6px 11px; border-radius: 6px; } .rd-blog-chip:hover { background: var(--gm-navy-hover, #00567f); color: #fff; } .rd-blog-date { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-faint, #6c7981); } .rd-blog-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(31px, 3.2vw, 44px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.08; color: var(--gm-ink, #17242b); margin: 0; max-width: 22em; text-wrap: pretty; } .rd-blog-byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gm-border-soft, #eef1f2); } .rd-blog-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gm-tint, #f4f7fa); border: 1px solid var(--gm-border, #e6eaec); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; color: var(--gm-navy, #003e69); flex-shrink: 0; } .rd-blog-author { display: block; font-size: 15px; font-weight: 600; color: var(--gm-ink, #17242b); } /* Featured image = a promotional banner (wide/short), NOT a cropped hero. Show it whole at its natural aspect ratio; width capped by --rd-blog-img (independent of the column). */ .rd-blog-featimg { margin-top: 28px; max-width: min(var(--rd-blog-img), 100%); border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; overflow: hidden; } .rd-blog-featimg img { width: 100%; height: auto; display: block; } /* body grid — prose first in DOM; rail pulled left on wide via order */ /* minmax(0, 1fr), NOT 1fr. A bare `1fr` is `minmax(auto, 1fr)`, and the auto MINIMUM sizes the track to its item's min-content — so one 600px pasted table or caption wrapper widens the whole grid, and with it the page. The >=1000px rules below already say minmax(0, 1fr); this narrow default was the one place that did not, which is why the overflow only ever showed at 320-425. This is also what made the obvious fixes fail. Capping the offending child with max-width:100% resolves that percentage against a track the child itself widened, so the constraint chases the thing it is constraining. Fix the track first; then the child rules work. (2026-08-30) */ .rd-blog-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 46px 40px 10px; align-items: start; box-sizing: border-box; max-width: calc(var(--rd-blog-shell) + 80px); margin-inline: auto; } .rd-blog-prose { order: 1; max-width: 39em; min-width: 0; margin-inline: auto; } .rd-blog-rail { order: 2; position: static; display: flex; flex-direction: column; gap: 26px; } @media (min-width: 1000px) { .rd-blog-body { grid-template-columns: 210px minmax(0, 1fr); gap: 56px; } /* fill the grid cell — the column width is governed by --rd-blog-shell, not a per-element cap, so the prose grows with the shell instead of leaving a gutter. */ .rd-blog-prose { order: 2; max-width: none; } .rd-blog-rail { order: 1; position: sticky; top: 28px; } } /* rail */ .rd-blog-rail-block + .rd-blog-rail-block { padding-top: 22px; border-top: 1px solid var(--gm-border, #e6eaec); } .rd-blog-rail-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin-bottom: 11px; } .rd-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; } .rd-blog-tag { border: 1px solid var(--gm-border-ctl, #d5dcdf); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 13.5px; font-weight: 500; color: var(--gm-navy, #003e69); } .rd-blog-tag:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; } .rd-blog-share { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .rd-blog-share-link { font-size: 14px; font-weight: 500; color: var(--gm-navy, #003e69); cursor: pointer; } .rd-blog-share-link:hover { color: var(--gm-navy-hover, #00567f); } .rd-blog-morein { font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 600; color: var(--gm-navy, #003e69); } .rd-blog-morein:hover { color: var(--gm-navy-hover, #00567f); } /* prose — typography-led reading column */ .rd-blog-prose > p { font-size: 18px; line-height: 1.75; color: var(--gm-body, #47535b); margin: 0 0 22px; text-wrap: pretty; } .rd-blog-prose > p:first-of-type { font-size: 20.5px; line-height: 1.62; color: var(--gm-ink, #17242b); margin: 0 0 26px; } .rd-blog-prose > p:last-child { margin-bottom: 0; } .rd-blog-prose h2, .rd-blog-prose h3, .rd-blog-prose h4 { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--gm-ink, #17242b); margin: 36px 0 14px; } .rd-blog-prose a { color: var(--gm-navy, #003e69); } .rd-blog-prose a:hover { color: var(--gm-navy-hover, #00567f); } .rd-blog-prose sub, .rd-blog-prose sup { font-size: 0.7em; line-height: 0; } .rd-blog-prose ul, .rd-blog-prose ol { font-size: 18px; line-height: 1.75; color: var(--gm-body, #47535b); margin: 0 0 22px; padding-left: 1.4em; } .rd-blog-prose li { margin: 0 0 8px; } .rd-blog-prose img { max-width: 100%; height: auto; } /* A 640px embed with no cap pushed one post to 660 at a 320 viewport. .rd-cp-prose has had these two rules all along; .rd-blog-prose did not. (2026-08-30) */ .rd-blog-prose iframe, .rd-blog-prose embed, .rd-blog-prose object { max-width: 100%; border: 0; } .rd-blog-prose iframe { aspect-ratio: 16 / 9; height: auto; } .rd-blog-prose figure { margin: 30px 0; } .rd-blog-prose figure > :where(img, div) { border: 1px solid var(--gm-border, #e6eaec); border-radius: 14px; overflow: hidden; background: #fff; } .rd-blog-prose figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; color: var(--gm-faint, #6c7981); margin-top: 11px; line-height: 1.5; } .rd-blog-prose table { width: 100%; border-collapse: collapse; border: 1px solid var(--gm-border, #e6eaec); border-radius: 14px; overflow: hidden; margin: 30px 0; } /* ---------- Hard-width authored content (2026-08-30) ---------- 24 blog posts scrolled sideways at 320/375/425, worst +414px. Three shapes of pasted markup. (1) The ten eChem newsletters are HTML EMAIL pasted whole: Capping it with max-width does not work. The prose column sizes to min-content, so it grows to fit the 600px table, and the table's max-width:100% then resolves against the width it caused — the percentage chases the thing it is constraining. `width: auto !important` removes the fixed width instead. Scoped to the email tables by class: the general `.rd-blog-prose table { width: 100% }` above is deliberate for designed tables and must not be turned into shrink-to-fit. (2) The legacy caption wrapper, same as the app notes and product pages:
    `.rd-blog-prose img { max-width: 100% }` is obeyed and the image still overflows, for the same containing-block reason. (3) Long unbroken tokens — raw URLs pasted as link text — set the column's min-content width on their own. `overflow-wrap: anywhere`, not `break-word`: only `anywhere` affects intrinsic sizing, and it breaks a word only when it would otherwise overflow. */ .rd-blog-prose { overflow-wrap: anywhere; } /* SC 1.4.10 reflow: make the prose column a scroll container so legacy content cannot widen the page. Measured 2026-09-09 at 320px, and the numbers are the argument: the newsletters went 620 -> 320, the calibration page 387 -> 320, the autoranging FAQ 349 -> 320. The cause is NOT a missing minmax(0,1fr) - .rd-blog-body already has one and its track computes to a correct 280px. The grid ITEM exceeds its own track: a six-column table whose min-content is 329px drags .rd-blog-prose to 328px inside a 280px track, and the page grows with it. min-width:0 alone does not stop that (it already computes to 0px); the item has to become a scroll container, which is what overflow-x does. max-width:100% is the load-bearing declaration, and it MUST stay inside the media query. overflow-x alone measured as no fix at all: it makes the column a scroll container but does not make it narrower, so the prose stayed 600px wide in a 320px viewport and the page still overflowed. max-width is what pulls the item back inside its track. It cannot sit outside the query, though - line 1090 gives .rd-blog-prose a 39em reading measure and an unscoped max-width:100% silently overrides it, running desktop prose full-bleed. Below 900px that conflict cannot arise, because 39em is already wider than the viewport. Scoped to the prose column rather than to tables, also deliberately. The overflowing content is not always a table - one page overflowed on a coloured callout with an inline width:366px, another on a span - and `display:block; overflow-x:auto` applied to tables themselves measured WORSE (349 -> 351), because it changes how a table sizes. .rd-an-prose keeps its own .rd-an-tablewrap, which ApplicationNote.js adds at runtime. That mechanism exists only on app notes; content and blog pages have none, which is why this rule has to cover all three. */ @media (max-width: 900px) { .rd-blog-prose, .rd-an-prose, .rd-cp-prose { min-width: 0; max-width: 100%; overflow-x: auto; } /* A long word in a page TITLE overflows too, and this was the harder half to find because nothing in the content is at fault. On the spectroelectrochemistry notes the h1 needs 347px in a 280px column for the single word "Spectroelectrochemistry", and the page grows to 367. The reflow harness blames a table 400px further down - the widest RECT on the page, and inside a scroll container that was already handling it. Hiding those tables changed the overflow by nothing at all; the title was never listed. Same treatment .rd-blog-prose already gets on line 1153. `anywhere` rather than `break-word`: only `anywhere` reduces the min-content contribution, which is what a grid track actually measures. Applied to text elements generally rather than to the title classes, because the same long-word overflow turns up in ordinary copy: /application-notes/physechem/ overflows on a 28px inline-styled span reading "Electrochemical Techniques", and /quartz-crystal-microbalance/qcm-i-mini-dissipation/ on body text. Narrowing this to the four title classes fixed the first page and left the second at 542px. A horizontal-scroll rule on the tab strip that looked like the obvious culprit (nav.rd-tl-tabs reaching 580px) fixed NEITHER page - it is a red herring, wide but not the thing forcing the document open. */ main :where(p, h1, h2, h3, li, span) { overflow-wrap: anywhere; } } .rd-blog-prose table { max-width: 100%; } /* A table cannot shrink below its own min-content, and these email tables hold images and cells with hard widths, so width:auto alone still leaves them 459-602px wide. They get their own horizontal scroll box instead — the email keeps its intended 600px layout and scrolls inside the article rather than dragging the page sideways. The builder already sets display:block on table.outer inline, which is what makes overflow-x apply to it at all; it is restated here so the rule does not depend on that inline declaration surviving an editor's paste. */ .rd-blog-prose table.outer, .rd-blog-prose table.containerWrapper { display: block; width: auto !important; max-width: 100%; overflow-x: auto; } .rd-blog-prose table img, .rd-blog-prose td img { max-width: 100%; height: auto; } /* The email builder's own section wrappers, alongside its tables. Same treatment, same reason. */ .rd-blog-prose .columns-equal-class, .rd-blog-prose .wrap-section { width: auto !important; max-width: 100%; } .rd-blog-prose .captionImage { width: auto !important; max-width: 100%; } .rd-blog-prose .captionImage img { max-width: 100%; height: auto; } .rd-blog-prose thead th, .rd-blog-prose tr:first-child th { background: var(--gm-thead, #f7fafc); font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); } .rd-blog-prose th, .rd-blog-prose td { padding: 13px 20px; border-bottom: 1px solid var(--gm-border-row, #f4f6f7); text-align: left; vertical-align: baseline; } .rd-blog-prose tbody tr:nth-child(odd) { background: var(--gm-zebra, #fbfcfc); } .rd-blog-prose td:last-child { font-family: 'IBM Plex Mono', monospace; font-size: 14.5px; color: var(--gm-ink, #17242b); } /* related */ .rd-blog-related { padding: 56px 40px 10px; box-sizing: border-box; max-width: calc(var(--rd-blog-shell) + 80px); margin-inline: auto; } .rd-blog-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; } .rd-blog-allposts { font-size: 15px; font-weight: 600; color: var(--gm-navy, #003e69); white-space: nowrap; } .rd-blog-allposts:hover { color: var(--gm-navy-hover, #00567f); } .rd-blog-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; } .rd-blog-card { display: block; background: #fff; border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 24px; transition: border-color .15s ease; } .rd-blog-card:hover { border-color: var(--gm-navy, #003e69); } .rd-blog-card-meta { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gm-faint, #6c7981); margin-bottom: 14px; } .rd-blog-card-cat { color: var(--gm-navy, #003e69); } .rd-blog-card-title { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.3; color: var(--gm-ink, #17242b); margin-bottom: 10px; text-wrap: pretty; } .rd-blog-card-blurb { display: block; font-size: 14.5px; line-height: 1.55; color: var(--gm-muted, #5f6b72); } /* back to index */ .rd-blog-backindex { display: flex; justify-content: center; padding: 52px 40px 60px; } .rd-blog-backindex a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--gm-border-ctl, #d5dcdf); background: #fff; color: var(--gm-navy, #003e69); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; } .rd-blog-backindex a:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; } @media (max-width: 640px) { .rd-blog-head { padding: 20px 20px 28px; } .rd-blog-body { padding: 34px 20px 6px; } .rd-blog-related, .rd-blog-backindex { padding-left: 20px; padding-right: 20px; } .rd-blog-title { font-size: 28px; } } /* =========================================================================== Section-root landing pages (.rd-sr-*) — Application Notes, News, FAQs. Two modes: generated topic cards (App Notes, News) and editorial passthrough (FAQ root, whose content carries cross-section signposts we must not drop). =========================================================================== */ .rd-sr { background: var(--gm-bg, #fbfbfa); color: var(--gm-ink, #17242b); --rd-sr-shell: 1400px; } .rd-sr :where(a) { text-decoration: none; } /* header band */ .rd-sr-head { background: var(--gm-surface, #fff); border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 26px 40px 34px; } .rd-sr-headmax { max-width: var(--rd-sr-shell); margin-inline: auto; } .rd-sr-head .rd-breadcrumb { width: 100%; margin: 0 0 26px; } .rd-sr-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .rd-sr-head-main { min-width: 0; flex: 1 1 30em; } .rd-sr-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 12px; } .rd-sr-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.06; color: var(--gm-ink, #17242b); margin: 0; text-wrap: pretty; } .rd-sr-intro { margin-top: 18px; max-width: 34em; } .rd-sr-intro p { font-size: 17.5px; line-height: 1.65; color: var(--gm-body, #47535b); margin: 0 0 10px; } .rd-sr-intro p:last-child { margin-bottom: 0; } .rd-sr-intro a { color: var(--gm-navy, #003e69); font-weight: 500; } .rd-sr-count { text-align: right; font-family: 'IBM Plex Mono', monospace; } .rd-sr-count-n { display: block; font-size: 30px; color: var(--gm-navy, #003e69); line-height: 1; } .rd-sr-count-l { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); } /* generated topic cards */ .rd-sr-gridwrap { max-width: var(--rd-sr-shell); margin-inline: auto; padding: 40px 40px 0; box-sizing: border-box; } /* Wider columns (3-up at desktop, not 4) so the summary sits as a tidy block beside the icon instead of wrapping into four lines that run below it. */ .rd-sr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; align-items: stretch; } /* Card is a vertical stack: [icon + title] row, then the summary at FULL card width, then the entry count pinned to the bottom. The summary deliberately does NOT sit in a column beside the icon — at card width it wrapped to 3–4 short lines that hung below the icon, leaving dead space under it. */ .rd-sr-card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 22px; transition: border-color .15s ease; } .rd-sr-card:hover { border-color: var(--gm-navy, #003e69); } .rd-sr-card-top { display: flex; align-items: center; gap: 14px; } .rd-sr-card-icon { flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--gm-tint, #f4f7fa); border-radius: 12px; overflow: hidden; } .rd-sr-card-icon img { width: 40px; height: 40px; object-fit: contain; display: block; } .rd-sr-card-title { min-width: 0; font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.014em; line-height: 1.3; color: var(--gm-ink, #17242b); text-wrap: balance; } .rd-sr-card:hover .rd-sr-card-title { color: var(--gm-navy, #003e69); } .rd-sr-card-desc { display: block; margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--gm-muted, #5f6b72); } .rd-sr-card-meta { display: block; margin-top: auto; padding-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--gm-faint, #6c7981); } /* recent entries (news root) */ .rd-sr-recent { max-width: var(--rd-sr-shell); margin-inline: auto; padding: 46px 40px 0; box-sizing: border-box; } .rd-sr-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; } .rd-sr-h2 { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink, #17242b); margin: 0; } .rd-sr-recent-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gm-border, #e6eaec); } .rd-sr-recent-item { border-bottom: 1px solid var(--gm-border-soft, #eef1f2); } .rd-sr-recent-item > a { display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 16px 0; } .rd-sr-recent-item > a:hover { background: #f4f8fa; } .rd-sr-recent-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm-faint, #6c7981); } .rd-sr-recent-title { font-family: 'Space Grotesk', sans-serif; font-size: 17.5px; font-weight: 600; letter-spacing: -0.014em; color: var(--gm-ink, #17242b); line-height: 1.3; } .rd-sr-recent-item > a:hover .rd-sr-recent-title { color: var(--gm-navy, #003e69); } /* promos kept from the page's own widgets */ .rd-sr-promos { max-width: var(--rd-sr-shell); margin-inline: auto; padding: 46px 40px 0; box-sizing: border-box; } .rd-sr-promos-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; } .rd-sr-promo { background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 20px; overflow: hidden; } .rd-sr-promo img { max-width: 100%; height: auto; display: block; border-radius: 10px; } .rd-sr-promo h3, .rd-sr-promo h4 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 0 0 10px; } .rd-sr-promo a { color: var(--gm-navy, #003e69); font-weight: 500; } /* editorial passthrough (FAQ root): restyle the hand-built content in place */ .rd-sr-editorial { max-width: var(--rd-sr-shell); margin-inline: auto; padding: 40px 40px 0; box-sizing: border-box; } .rd-sr-editorial-inner { background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 18px; padding: 30px 32px; } .rd-sr-editorial-inner > p { font-size: 17px; line-height: 1.7; color: var(--gm-body, #47535b); max-width: 42em; } .rd-sr-editorial-inner h1, .rd-sr-editorial-inner h2 { font-family: 'Space Grotesk', sans-serif; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--gm-ink, #17242b); margin: 0 0 14px; } .rd-sr-editorial-inner h3, .rd-sr-editorial-inner h4 { font-family: 'Space Grotesk', sans-serif; font-size: 17.5px; font-weight: 600; letter-spacing: -0.012em; color: var(--gm-ink, #17242b); margin: 0 0 8px; } .rd-sr-editorial-inner h3 a, .rd-sr-editorial-inner h4 a { color: var(--gm-ink, #17242b); } .rd-sr-editorial-inner h3 a:hover, .rd-sr-editorial-inner h4 a:hover { color: var(--gm-navy, #003e69); } .rd-sr-editorial-inner a { color: var(--gm-navy, #003e69); } .rd-sr-editorial-inner img { max-width: 100%; height: auto; } /* The legacy tile grids inside that content. Flex (not an even grid) so each yellow icon cell takes only its own width and the adjacent text cell gets ALL the leftover room — an even grid gave the 93px icon a full 300px column and squeezed the summary to 275px, which is what made the blurbs wrap under the icons. */ .rd-sr-editorial-inner .tech-table { display: block; } .rd-sr-editorial-inner .Row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding-bottom: 24px !important; } /* icon cells: content width only */ .rd-sr-editorial-inner .Row > .data-img, .rd-sr-editorial-inner .Row > .note-img { flex: 0 0 auto; text-align: center; } /* text cells: grow to fill, two pairs per row on desktop, one per row when narrow */ .rd-sr-editorial-inner .Row > .data { flex: 1 1 300px; min-width: 0; } .rd-sr-editorial-inner .Row > .data > :first-child { margin-top: 0; } .rd-sr-editorial-inner .Row > .data p { margin-bottom: 0; max-width: none; } /* drop the legacy spacer cells that only held a 30px shim image */ .rd-sr-editorial-inner .Row > :empty, .rd-sr-editorial-inner .note-img img[width="30"] { display: none; } .rd-sr-editorial-inner .data-img img, .rd-sr-editorial-inner .note-img img { display: inline-block; width: 76px; max-width: 76px; height: auto; } .rd-sr-editorial-inner form { margin: 18px 0; } .rd-sr-editorial-inner input[type=text], .rd-sr-editorial-inner input[type=search] { border: 1px solid var(--gm-border-ctl, #d5dcdf); border-radius: 9px; padding: 10px 13px; font-size: 15px; } @media (max-width: 720px) { .rd-sr-head { padding: 20px 20px 26px; } .rd-sr-head .rd-breadcrumb { margin-bottom: 20px; } .rd-sr-count { text-align: left; } .rd-sr-gridwrap, .rd-sr-recent, .rd-sr-promos, .rd-sr-editorial { padding-left: 20px; padding-right: 20px; padding-top: 28px; } .rd-sr-editorial-inner { padding: 22px 20px; } .rd-sr-title { font-size: 30px; } } /* Mega-menu "View all X →" item: routes to a column's own page (Potentiostats lines, Cells subcategories). Sits under a hairline at the end of the column's list, quieter than the product links so it reads as a route, not another product. Columns without a page behind them (Applications themes) never render one. */ .rd-header .dropdown.mega .mega-group > ul > li.mega-viewall { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--gm-border-soft, #eef1f2); } .rd-header .dropdown.mega .mega-group > ul > li.mega-viewall > a { padding: 4px 4px; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--gm-navy, #003e69); white-space: normal; } .rd-header .dropdown.mega .mega-group > ul > li.mega-viewall > a:hover { color: var(--gm-navy-hover, #00567f); background: none; text-decoration: underline; } /* ========================================================================== Lead-capture widget restyle (2026-08) — "Request Information" and friends These widgets appear in every redesigned rail (.rd-ap-widget on Applications, .rd-cp-widget on content pages, .rd-form-widget on form/contact pages, .rd-tl-widgets on topic listings, .rd-fam-promo on product families) and two separate legacy layers were making them look out of place: 1. layout.css:409 gives the widget

    `color:#FFF !important` on a #013773 navy bar with 8px 8px 0 0 corners — designed for the old sidebar. Inside a white redesigned card the heading rendered WHITE ON WHITE where the bar was lost, and as a stray navy bar where it wasn't. 2. Dynamics 365 injects its own stylesheet at RUNTIME from the Microsoft CDN: Segoe UI, 30px-tall inputs with 2px corners, `padding:20px 30px` on every field block (10 blocks = ~400px of padding alone, which is why the form was 1339px tall in a 350px rail), and a legacy YELLOW #fabc38 submit button — the yellow the rest of the redesign removed. Because the D365 stylesheet loads after ours, the overrides below need !important to win. The injected markup itself is never touched — only styled. Class names verified against the live rendered form. ========================================================================== */ /* ---- shared host list ---- */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) :is(.DynamicsFormWidget, .EmbeddedFormWidget, .Logicbrush_UserFormsUtils_Widgets_UserFormWidget) > h3 { color: var(--gm-ink, #17242b) !important; background: none !important; border-radius: 0 !important; font-family: 'Space Grotesk', sans-serif !important; font-size: 19px !important; font-weight: 600 !important; text-align: left !important; padding: 0 !important; margin: 0 0 16px !important; line-height: 1.25 !important; } /* Kill the widget chrome the legacy sidebar added around these. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) .WidgetHolder { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; } /* ---- the injected Dynamics 365 form ---- */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm { font-family: 'IBM Plex Sans', sans-serif !important; font-size: 15px !important; max-width: 100% !important; color: var(--gm-body, #47535b) !important; } /* Field rows: strip the 20px/30px block padding and use a consistent gap. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm :is(.textFormFieldBlock, .phoneFormFieldBlock, .optionSetFormFieldBlock, .twoOptionFormFieldBlock, .lookupFormFieldBlock, .dateTimeFormFieldBlock, .multiOptionSetFormFieldBlock) { padding: 0 !important; margin: 0 0 16px !important; width: 100% !important; max-width: 100% !important; float: none !important; } /* Their layout wrappers float and carry fixed widths. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm :is(.columnContainer, .emptyContainer, .wrap-section, .columns-equal-class) { width: auto !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; } /* D365 lays multi-field rows out as a flex row (.columns-equal-class) of flex items (.columnContainer), and its gutters came from the per-column padding zeroed above — which left adjacent inputs touching at 0px. Restore the gutter with `gap` on the row instead of guessing their padding back, so it holds however many columns the form uses and collapses cleanly when the row wraps at narrow widths. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm :is(.columns-equal-class, .emptyContainer, .wrap-section) { gap: 18px !important; flex-wrap: wrap !important; } /* Labels */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm :is(label, .block-label, .phoneCountryCodeLabel) { font-family: 'IBM Plex Sans', sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--gm-muted, #5f6b72) !important; display: block !important; margin: 0 0 6px !important; line-height: 1.4 !important; } /* Controls — override their 30px height / 2px radius / 14px Segoe */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm :is(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url], select, textarea) { width: 100% !important; max-width: 100% !important; height: auto !important; box-sizing: border-box !important; border: 1px solid var(--gm-border-ctl, #d5dcdf) !important; border-radius: 10px !important; padding: 11px 13px !important; font-family: 'IBM Plex Sans', sans-serif !important; font-size: 15.5px !important; color: var(--gm-ink, #17242b) !important; background: #fff !important; } :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm textarea { min-height: 104px !important; resize: vertical !important; line-height: 1.55 !important; } /* WCAG 1.4.3: Dynamics 365 authors its field-description text with an INLINE style of color:#7f7f7f, which is 4.0:1 on white — under 4.5:1 and unreachable from a normal rule, hence !important (the same reason every other declaration in this block carries it). The real source is the form definition in Dynamics; this makes it compliant regardless of what Dynamics sends. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm label span, :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .lp-form-fieldLabel span { color: var(--gm-muted, #5f6b72) !important; } :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm :is(input, select, textarea):focus { /* 2.4.7: `outline: none !important` used to live here and, being !important, it beat the global :focus-visible ring in base.css — leaving these fields with only the translucent shadow below, which measures ~1.4:1 on white (invisible in practice). The outline is now allowed through; the sky border + shadow stay as the decorative treatment on top of it. */ border-color: var(--gm-sky, #7bb8dd) !important; box-shadow: 0 0 0 3px rgba(123,184,221,.35) !important; } /* Radio / checkbox groups */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .radiobuttons { display: flex !important; flex-direction: column !important; gap: 7px !important; } :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm :is(input[type=radio], input[type=checkbox]) { width: auto !important; height: auto !important; margin: 0 8px 0 0 !important; accent-color: var(--gm-navy, #003e69); } :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .radiobuttons label { display: inline !important; font-size: 15px !important; color: var(--gm-body, #47535b) !important; font-weight: 400 !important; } /* Submit — was legacy yellow #fabc38 at 100px wide */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .submitButtonWrapper { margin: 22px 0 0 !important; padding: 0 !important; text-align: left !important; } :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .submitButton { width: 100% !important; background: var(--gm-navy, #003e69) !important; color: #fff !important; font-family: 'IBM Plex Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; border: 0 !important; border-radius: 10px !important; padding: 14px 22px !important; cursor: pointer !important; transition: background .15s ease; } :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .submitButton:hover { background: var(--gm-navy-hover, #00567f) !important; } /* Validation / notification messages */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm :is(.notification-message, .recaptcha-error-text, .onFormSubmittedFeedbackMessage) { font-size: 13.5px !important; line-height: 1.5 !important; color: #8f2b26 !important; background: #fdf3f2 !important; border: 1px solid #f0d3d0 !important; border-radius: 9px !important; padding: 10px 12px !important; margin: 0 0 12px !important; } :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .notification-message-hide { display: none !important; } /* reCAPTCHA is a fixed 304px iframe — never let it push the rail sideways. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .g-recaptcha { max-width: 100% !important; overflow-x: auto !important; margin: 0 0 14px !important; } /* The loading spinner before the CDN responds — stop it reading as a broken box. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) .formLoader { min-height: 90px; display: flex; align-items: center; justify-content: center; } /* =================================================================== Legacy minisite flyout — removed site-wide (2026-08, client request). #minisite_flyout_ct is the fixed left-edge "Menu" tab rendered by Includes/MinisiteSidebar.ss. It reaches far more pages than the minisites it was built for: IQMinisite_PageController::onAfterInit() forces the minisite layout onto ANY page with ActivateMinisite set, and that flag is inherited (ProductListing, ProductListingType and TabPage all default it to true), so the tab was appearing on product, topic and resource pages. Hidden rather than deleted from the template: the same include also renders the in-page minisite navigation, which some pages still rely on. Removing the markup itself is the follow-up once that nav is confirmed unused. =================================================================== */ #minisite_flyout_ct { display: none !important; } /* ========================================================================== Legacy-sidebar lead-capture card (2026-08) Matches the Application Note download card. On an app note the gated form is a navy card built from purpose-written markup (.rd-an-dlcard + .rd-an-dform in css/pages/ApplicationNote.css). The legacy rails — Page.ss, MinisitePage.ss, LandingPage.ss — have no such markup: they emit a bare .WidgetHolder.DynamicsFormWidget with an

    , so the same Dynamics 365 form arrived unstyled. These rules reproduce the app-note card using the markup that already exists, so the two read as one component. Values are copied from ApplicationNote.css:71-83 deliberately — keep the two blocks in step if either changes. Scoped to .DynamicsFormWidget on purpose. These sidebars also carry CtaWidget, OpenTextWidget, MenuWidget and UserFormWidget, which must NOT become navy cards; they keep the lighter .rd-cp-widget treatment from the block above. !important is needed twice over: to beat the D365 stylesheet injected at runtime from the Microsoft CDN, and to beat the .rd-cp-widget rules above, which share this specificity and land earlier in the file. ========================================================================== */ .rd-sb-widgets .WidgetHolder.DynamicsFormWidget { background: var(--gm-navy, #003e69) !important; border-radius: 16px !important; padding: 24px !important; color: #fff !important; margin: 0 0 20px !important; } /* The widget

    stands in for .rd-an-dl-title. layout.css gives it `color:#FFF !important` on a navy bar, and the block above resets it to ink for light rails — on this navy card it needs to go back to white. */ .rd-sb-widgets .WidgetHolder.DynamicsFormWidget > h3 { font-family: 'Space Grotesk', sans-serif !important; font-size: 19px !important; font-weight: 700 !important; color: #fff !important; background: none !important; text-align: left !important; padding: 0 !important; margin: 0 0 14px !important; line-height: 1.25 !important; } /* .rd-an-dform label */ .rd-sb-widgets .WidgetNoteHolder, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm label, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm .lp-form-fieldLabel, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm label span, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm .lp-form-fieldLabel span { color: #8fb2c8 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; letter-spacing: 0.06em !important; text-transform: none !important; } .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm { font-family: 'IBM Plex Sans', sans-serif !important; color: #c3d3de !important; max-width: 100% !important; } /* .rd-an-dform inputs — white fields on the navy ground */ .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm input[type=text], .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm input[type=email], .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm input[type=tel], .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm select, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm textarea { width: 100% !important; background: #fff !important; border: 1px solid var(--gm-border-ctl, #d5dcdf) !important; border-radius: 9px !important; padding: 11px 13px !important; font-size: 15px !important; font-family: 'IBM Plex Sans', sans-serif !important; color: var(--gm-ink, #17242b) !important; box-sizing: border-box !important; height: auto !important; } .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm input:focus, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm select:focus, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm textarea:focus { outline: none !important; border-color: #7bb8dd !important; box-shadow: 0 0 0 3px rgba(123, 184, 221, .35) !important; } /* D365 pads every field block 20px/30px, which is unaffordable in a 300px rail. */ .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm :is([class*="lp-form-field"], .lp-form-fieldContainer, .containerBlock) { padding: 0 0 12px !important; margin: 0 !important; } /* .rd-an-dform submit — white button, navy label, full width */ .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm .submitButton, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm button, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm input[type=submit] { width: 100% !important; background: #fff !important; color: var(--gm-navy, #003e69) !important; font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; padding: 13px 16px !important; border: 0 !important; border-radius: 10px !important; cursor: pointer !important; text-transform: none !important; } .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm .submitButton:hover, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm button:hover { background: #eaf2f7 !important; } /* reCAPTCHA overflows a 300px rail at its default 304px width. */ .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm .g-recaptcha { transform: scale(.85); transform-origin: 0 0; } /* D365 wraps the phone input in .phoneCountryCode and puts its own 1px/2px-radius field chrome on the WRAPPER, so styling the input alone left a grey box drawn around the white one. It also sets .phoneCountryCodeLabel to display:block, which overrides the `hidden` attribute D365 itself puts on that element, surfacing a stray "+" chip. Both are inherited Microsoft styling, not design intent. */ .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm .phoneCountryCode { border: 0 !important; border-radius: 0 !important; background: none !important; padding: 0 !important; } .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm .phoneCountryCodeLabel[hidden] { display: none !important; } /* Field width. DynamicsForm.css pins `#page_right form.marketingForm { --form-width: 288px }` and applies it as `min-width: var(--form-width) !important`. That 288px was right when the rail held a bare form; the card above adds 24px of padding per side, so its content box is 240px and every field overflowed by exactly 48px. min-width beats width, so the width:100% rules above could not correct it — as that file's own comment says, the token is the real control. The token cannot simply be relaxed to 100%: this rail is shrink-to-fit (#minisite_right and #page_right have no width of their own) and was being sized BY that 288px min-width propagating up from the fields. Setting it to 100% collapsed the whole column to 0. So keep the intrinsic-sizing mechanism and just subtract the card's own padding, which reproduces the original 288px rail: 240 + 24 + 24. !important is required because `#page_right` carries an ID and outranks these classes. Keep the 24px in step with the card padding above. */ .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm { --form-width: calc(288px - 2 * 24px) !important; } .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm :is(input[type=text], input[type=email], input[type=tel], select, textarea) { max-width: 100% !important; } /* Below 420px DynamicsForm.css already relaxes --form-width to 100% for reflow; the card must not reimpose a fixed floor there. */ @media (max-width: 420px) { .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm { --form-width: 100% !important; } } /* Phone field, for the shared host list (contact pages, applications rails, content pages, topic listings, family promos). Same two pieces of Microsoft styling already corrected on the legacy-sidebar card and the Application Note card: 1. D365 puts its 1px/2px-radius field chrome on the .phoneCountryCode WRAPPER, so styling the input alone leaves a grey box drawn around the white one; 2. .phoneCountryCodeLabel is forced to display:block, overriding the `hidden` attribute D365 itself sets, surfacing a stray "+" chip on #f3f2f1. Both were visible on /contact-us/sales-2/ and /contact-us/international/, which are the site's primary lead-capture forms. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .phoneCountryCode { border: 0 !important; border-radius: 0 !important; background: none !important; padding: 0 !important; } :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm .phoneCountryCodeLabel[hidden] { display: none !important; } /* Required-asterisk wrapping on long field labels. D365 marks required fields with `label::after { content: "*"; display: inline-block }` and separately forces the label's own text wrapper to `.textFormFieldBlock label > * { display: inline-block }`. An inline-block whose text wraps is sized to the full available width, so the asterisk had no room on the last line and dropped to a line of its own — e.g. the "Please describe your application…" textarea label on /contact-us/sales-2/ and /contact-us/international/. Making the text wrapper `inline` lets it flow as normal text so the asterisk sits directly after the last word. Scoped to `label > span` rather than `label > *` so D365's inline-block layout for checkbox and two-option labels is left alone. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm label > span, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm label > span { display: inline !important; } /* Label typography authored in the Dynamics form designer. --------------------------------------------------------------------------- The "Please describe your application…" label on form 6a50e074-5ff4-ef11-be20-6045bd094e1b (embedded on BOTH /contact-us/sales-2/ and /contact-us/international/) carries inline styles set in the D365 form editor: font-style:italic; font-family:Arial,Verdana; font-size:14px. It rendered as grey italic Arial next to IBM Plex Sans labels. The correct fix is to clear that formatting in the Dynamics form designer — this is a CSS override of an editor's content decision, and it will silently win over any label formatting an editor sets in future. It is here because nobody on the web side currently has Dynamics access. REMOVE THIS BLOCK once the label is cleaned up at source. Only the four properties that diverge are overridden; colour already matches via the shared label rule above. !important is required to beat inline styles. */ :is(.rd-ap-widget, .rd-cp-widget, .rd-form-widget, .rd-tl-widgets, .rd-fam-promo) form.marketingForm label > span, .rd-sb-widgets .WidgetHolder.DynamicsFormWidget form.marketingForm label > span { font-family: 'IBM Plex Sans', sans-serif !important; font-size: 13.5px !important; font-style: normal !important; font-weight: 500 !important; } /****** FILE: themes/gamry/fancybox/jquery.fancybox.css *****/ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url(/themes/gamry/fancybox/fancybox_sprite.png); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url(/themes/gamry/fancybox/fancybox_loading.gif) center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url(/themes/gamry/fancybox/blank.gif); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { /*overflow: hidden !important;*/ width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url(/themes/gamry/fancybox/fancybox_overlay.png); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url(/themes/gamry/fancybox/fancybox_sprite@2x.png); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url(/themes/gamry/fancybox/fancybox_loading@2x.gif); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } /****** FILE: themes/gamry/js/jqueryui/1.11.4/jquery-ui.css *****/ /*! jQuery UI - v1.11.4 - 2016-07-01 * http://jqueryui.com * Includes: core.css, draggable.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, menu.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px * Copyright jQuery Foundation and other contributors; Licensed MIT */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; text-decoration: none; /*line-height: 1.3; font-size: 100%;*/ list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { min-height: 0; /* support: IE7 */ } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); /* support: IE8 */ } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-draggable-handle { -ms-touch-action: none; touch-action: none; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-selectable { -ms-touch-action: none; touch-action: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0 0; padding: .5em .5em .5em .7em; min-height: 0; /* support: IE7 */ font-size: 100%; } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-button { display: inline-block; position: relative; padding: 0; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2.2em; } /* button elements seem to need a little more width */ button.ui-button-icon-only { width: 2.4em; } .ui-button-icons-only { width: 3.4em; } button.ui-button-icons-only { width: 3.7em; } /* button text element */ .ui-button .ui-button-text { display: block; line-height: normal; } .ui-button-text-only .ui-button-text { padding: .4em 1em; } .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } /* no icon support for input elements, provide padding by default */ input.ui-button { padding: .4em 1em; } /* button icon element(s) */ .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } /* button sets */ .ui-buttonset { margin-right: 7px; } .ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } /* workarounds */ /* reset extra padding in Firefox, see h5bp.com/l */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-dialog { overflow: hidden; position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 20px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-se { width: 12px; height: 12px; right: -5px; bottom: -5px; background-position: 16px 16px; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: none; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { position: relative; margin: 0; padding: 3px 1em 3px .4em; cursor: pointer; min-height: 0; /* support: IE7 */ /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; filter: alpha(opacity=25); /* support: IE8 */ opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; /* Support: IE7 */ overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-button { display: inline-block; overflow: hidden; position: relative; text-decoration: none; cursor: pointer; } .ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; margin-top: -8px; position: absolute; top: 50%; } .ui-selectmenu-button span.ui-selectmenu-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em; display: block; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; } .ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to override default borders */ .ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* vertically center icon */ .ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } /* TR overrides */ .ui-spinner .ui-icon-triangle-1-s { /* need to fix icons sprite */ background-position: -65px -16px; } .ui-tabs { position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ /*.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }*/ .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url("/themes/gamry/js/jqueryui/1.11.4/images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x; color: #222222; font-weight: bold; } .ui-widget-header a { color: #222222; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url("/themes/gamry/js/jqueryui/1.11.4/images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x; font-weight: normal; color: #555555; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url("/themes/gamry/js/jqueryui/1.11.4/images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x; font-weight: normal; color: #212121; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #212121; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url("/themes/gamry/js/jqueryui/1.11.4/images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x; font-weight: normal; color: #212121; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #fcefa1; background: #fbf9ee url("/themes/gamry/js/jqueryui/1.11.4/images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x; color: #363636; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #363636; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #cd0a0a; background: #fef1ec url("/themes/gamry/js/jqueryui/1.11.4/images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); /* support: IE8 */ font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); /* support: IE8 */ background-image: none; } .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url("/themes/gamry/js/jqueryui/1.11.4/images/ui-icons_222222_256x240.png"); } .ui-widget-header .ui-icon { background-image: url("/themes/gamry/js/jqueryui/1.11.4/images/ui-icons_222222_256x240.png"); } .ui-state-default .ui-icon { background-image: url("/themes/gamry/js/jqueryui/1.11.4/images/ui-icons_888888_256x240.png"); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url("/themes/gamry/js/jqueryui/1.11.4/images/ui-icons_454545_256x240.png"); } .ui-state-active .ui-icon { background-image: url("/themes/gamry/js/jqueryui/1.11.4/images/ui-icons_454545_256x240.png"); } .ui-state-highlight .ui-icon { background-image: url("/themes/gamry/js/jqueryui/1.11.4/images/ui-icons_2e83ff_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("/themes/gamry/js/jqueryui/1.11.4/images/ui-icons_cd0a0a_256x240.png"); } /* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 4px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa; opacity: .3; filter: Alpha(Opacity=30); /* support: IE8 */ border-radius: 8px; } /****** FILE: themes/gamry/css/colorbox.css *****/ @charset "utf-8"; /* CSS Document */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute;top:0;left:0;z-index:99999;overflow:hidden;} #cboxOverlay{position:fixed;width:100%;height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left;margin:auto;border:0;display:block;} .cboxIframe{width:100%;height:100%;display:block;border:0;} #cboxOverlay{background:url(/themes/gamry/css/images/overlay.png) repeat 0 0;} #colorbox{} #cboxLoadedContent:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;} #cboxLoadedContent{display:inline-block;} html[xmlns] #cboxLoadedContent{display:block;} * html #cboxLoadedContent{height:1%;} #cboxTopLeft{width:21px;height:21px;background:url(/themes/gamry/css/images/controls.png) no-repeat -100px 0;} #cboxTopRight{width:21px;height:21px;background:url(/themes/gamry/css/images/controls.png) no-repeat -129px 0;} #cboxBottomLeft{width:21px;height:21px;background:url(/themes/gamry/css/images/controls.png) no-repeat -100px -29px;} #cboxBottomRight{width:21px;height:21px;background:url(/themes/gamry/css/images/controls.png) no-repeat -129px -29px;} #cboxMiddleLeft{width:21px;background:url(/themes/gamry/css/images/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px;background:url(/themes/gamry/css/images/controls.png) right top repeat-y;} #cboxTopCenter{height:21px;background:url(/themes/gamry/css/images/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px;background:url(/themes/gamry/css/images/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff;overflow:hidden;} #cboxError{padding:50px;border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute;bottom:4px;left:0;text-align:center;width:100%;color:#949494;background:#fff;} #cboxCurrent{display:none;left:-99999999px;position:absolute;bottom:4px;color:#949494;font-size:11px;} #cboxSlideshow{position:absolute;bottom:4px;right:30px;color:#0092ef;} #cboxPrevious{position:absolute;bottom:0;left:0;background:url(/themes/gamry/css/images/controls.png) no-repeat -75px 0;width:25px;height:25px;text-indent:-9999px;} #cboxPrevious.hover{background-position:-75px -25px;} #cboxNext{position:absolute;bottom:0;left:27px;background:url(/themes/gamry/css/images/controls.png) no-repeat -50px 0;width:25px;height:25px;text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(/themes/gamry/css/images/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(/themes/gamry/css/images/loading.gif) no-repeat center center;} #cboxClose{position:absolute;bottom:0;right:0;background:url(/themes/gamry/css/images/controls.png) no-repeat -25px 0;width:25px;height:25px;text-indent:-9999px;} #cboxClose.hover{background-position:-25px -25px;} .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);} .cboxIE6 #cboxTopLeft{background:url(/themes/gamry/css/images/ie6/borderTopLeft.png);} .cboxIE6 #cboxTopCenter{background:url(/themes/gamry/css/images/ie6/borderTopCenter.png);} .cboxIE6 #cboxTopRight{background:url(/themes/gamry/css/images/ie6/borderTopRight.png);} .cboxIE6 #cboxBottomLeft{background:url(/themes/gamry/css/images/ie6/borderBottomLeft.png);} .cboxIE6 #cboxBottomCenter{background:url(/themes/gamry/css/images/ie6/borderBottomCenter.png);} .cboxIE6 #cboxBottomRight{background:url(/themes/gamry/css/images/ie6/borderBottomRight.png);} .cboxIE6 #cboxMiddleLeft{background:url(/themes/gamry/css/images/ie6/borderMiddleLeft.png);} .cboxIE6 #cboxMiddleRight{background:url(/themes/gamry/css/images/ie6/borderMiddleRight.png);} /* .cboxIE6 #cboxTopLeft, .cboxIE6 #cboxTopCenter, .cboxIE6 #cboxTopRight, .cboxIE6 #cboxBottomLeft, .cboxIE6 #cboxBottomCenter, .cboxIE6 #cboxBottomRight, .cboxIE6 #cboxMiddleLeft, .cboxIE6 #cboxMiddleRight{_behavior:expression(this.src = this.src ? this.src:this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");} */ /****** FILE: themes/gamry/css/div-css.css *****/ @charset "utf-8"; /* CSS Document */ /*Image hover Overlay*/ .container { position: relative; width: 100%; } .container:hover .overlay { opacity: .5; } .image { display: block; width: auto; height: auto; } .support-img{ display: table-cell; vertical-align: middle; padding-right: 45px; padding-bottom: 25px; width: 100%; height: auto; } .overlay { position: absolute; top: 2px; bottom: 0; left: 2px; right: 0; height: 96%; width: 100%; opacity: 0; transition: .5s ease; border-radius: 10px; /*background-color: #008CBA;*/ background-color: #959391; } .support-text { color: white; text-shadow: #000 1px 0 10px; font-size: 36px; position: absolute; top: 50%; left: 50%; font-family: var(--gm-font-body); /*font-style:italic;*/ font-weight: 500; line-height: 36px; /* text-shadow: 1px 1px #ffffff;*/ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } .hover-text { /*color: white !important;*/ /*text-shadow: #000 1px 0 10px;*/ font-size: 36px; position: absolute; top: 51%; left: 49%; font-family: var(--gm-font-body); /* font-style:italic;*/ font-weight: 500; line-height: 36px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; opacity: 0; } a.hover-text:link { color: white!important; text-decoration: none!important; } a.hover-text:visited { color: white!important; text-decoration: none!important; } a.hover-text:hover { color: white!important; text-decoration: none!important; } /*landing page */ .tech-table-s { display: table; table-layout: fixed; /*height:425px;*/ position: relative; overflow-y: scroll; padding-left: 65px; } #myDIV { -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); position:absolute; margin-left: 5px; padding:35px 20px 10px 55px; /*without rollover image text margin-left: 55px; padding:35px 20px 10px 75px;*/ white-space: nowrap; width: 5px; height: 4px; color: black; z-index:1; } #myDIV2 { -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-70deg); position:absolute; margin-left: 180px; padding: 1px 5px 10px 55px; white-space: nowrap; width: 10px; height: 1px; color: black; z-index:1; } .myDIV { -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); position:absolute; margin-left: 5px; padding:25px 20px 10px 55px; /*without rollover image text margin-left: 55px; padding:35px 20px 10px 75px;*/ white-space: nowrap; width: 5px; height: 4px; color: black; z-index:1; } .myDIV2 { -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -o-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-70deg); position:absolute; margin-left: 180px; padding: 1px 5px 10px 55px; white-space: nowrap; width: 10px; height: 1px; color: black; z-index:1; } .TableB { display: table; overflow-y: scroll; -webkit-overflow-scrolling: touch; /*Remove table border around image column border: 1px solid #202020;*/ -webkit-box-shadow: 10px 10px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 10px 10px 5px rgba(50, 50, 50, 0.75); box-shadow: 10px 10px 5px rgba(50, 50, 50, 0.75); } .Table { overflow: visible; } .Table1 { display: table; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-scrolling: touch; padding-top:75px; } .Table1 { overflow: visible; } .Title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; } .Heading { display: table-row; font-weight: bold; text-align: center; } .Row { display: table-row; border-collapse:collapse; } .Cell { display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; width: 40px; vertical-align:middle; font-size:10px; font-weight:bold; border-collapse:collapse; } .CellP { display: table-cell; vertical-align:middle; padding-left: 10px; padding-right: 25px; width: 40px; /*Remove border lines around images border: solid; border-width: thin;*/ border-collapse:collapse; } .Cell1 { display: table-cell; padding-left: 10px; padding-right: 5px; vertical-align:middle; font-size:11px; width: 40px; } .Cellc { display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; width: 40px; vertical-align:middle; font-size:10px; font-weight:bold; background-color: rgba(46,182,238,0.7); background-color: rgba(46,182,238); border-collapse:collapse; } .Cell-Head { display: table-cell; vertical-align:bottom; } .tech-table { display: table; table-layout: fixed; /*height:425px;*/ position: relative; overflow-y: scroll; padding-left: 65px; -webkit-overflow-scrolling: touch; -ms-overflow-scrolling: touch; } @media screen and (min-width: 900px){ .tech-table { overflow: visible; } .data { display: table-cell; width:275px; padding-right:15px; } .app-data { display: table-cell; /* width:275px; /*padding-right:15px; padding-left: 35px;*/ } .data-img { display: table-cell; vertical-align: middle; padding-right: 45px; padding-bottom: 25px; } .note { display: table-cell; /*width:25px;*/ padding: 5px 5px 5px 0; text-align:center; overflow:auto; } .note-img { display: table-cell; /*vertical-align: middle;*/ /*padding: 25px 5px 5px 0;*/ } /*Tool Tip*/ .tooltip { position:relative; /* make span relative to anchor */ text-decoration:none; /* no underline */ cursor:pointer; /* make cursor point */ } .tooltip span { /* main body of tooltip */ position:absolute; /* AP it */ bottom:66px; /* FADE IN/OUT BEGIN */ left:50%; /* CENTER TOOLTIP */ margin-left:-72px; /* CENTER TOOLTIP */ width:130px; /* tootip width */ opacity:0; /* HIDE TOOLTIP in modern browsers */ visibility:hidden; /* HIDE TOOLTIP in IE */ padding:10px 5px; /* padding */ color:#fff; /* text color */ font:bold 95%/1.5 Arial, Helvetica, sans-serif; /* font */ text-align:center; /* center text */ pointer-events:none; /* no unintended tooltip popup for modern browsers */ border-radius:6px; /* round corners */ text-shadow:1px 1px 2px rgba(0, 0, 0, 0.6); /* text shadow */ background:rgb(46,182,238); /* IE6/7/8 */ background:rgba(46,182,238,.8); /* modern browsers */ border:2px solid rgb(255,255,255); /* IE6/7/8 */ border:2px solid rgba(255,255,255,.8); /* modern browsers */ box-shadow:0px 2px 4px rgba(0,0,0,0.5); /* shadow */ -webkit-transition:all 0.3s ease-in-out; /* animate tooltip */ -moz-transition:all 0.3s ease-in-out; /* animate tooltip */ -o-transition:all 0.3s ease-in-out; /* animate tooltip */ -ms-transition:all 0.3s ease-in-out; /* animate tooltip */ transition:all 0.3s ease-in-out; /* animate tooltip */ } .tooltip span.dif { /* different width tooltip */ width:190px; /* width */ margin-left:-102px; /* center it */ } .tooltip span:before, .tooltip span:after { /* bottom triangle - the white border */ content:''; /* add html content */ position:absolute; /* AP bottom triangle */ bottom:-13px; /* position bottom triangle */ left:50%; /* center bottom triangle */ margin-left:-12px; /* center bottom triangle */ border-left:12px solid transparent; /* build bottom triangle */ border-right:12px solid transparent; /* build bottom triangle */ border-top:12px solid rgb(255,255,255); /* build bottom triangle IE6/7/8 */ border-top:12px solid rgba(255,255,255,.8); /* build bottom triangle modern browsers */ } .tooltip span:after { /* top triangle - the blue background */ display: block; bottom:-10px; /* position top triangle */ margin-left:-10px; /* center top triangle */ border-width:10px; /* build top triangle */ border-top:10px solid rgb(46,182,238); /* build top triangle IE6/7/8 */ border-top:10px solid rgba(46,182,238,.8); /* build top triangle modern browsers */ } .tooltip:hover span { /* reveal tooltip */ opacity:1; /* REVEAL TOOLTIP in modern browsers */ bottom:44px; /* FADE IN/OUT END */ visibility:visible; /* REVEAL TOOLTIP in IE */ } .tooltip span:hover { visibility:hidden; /* hide tooltip when moving from link to span in IE */ } /*html tooltip*/ div.htmltooltip{ position: absolute; /*leave this and next 3 values alone*/ z-index: 1000; left: -1000px; top: -1000px; background: #003F69; border-right: 4px solid #eeeeee; border-bottom: 4px solid #eeeeee; /*border-width:thin;*/ border-radius:6px; /* round corners */ color: white; padding: 3px 3px 5px 10px; width: 250px; /*width of tooltip*/ font-family:var(--gm-font-body); font-size:13px; } } @media screen and (min-device-width:320px) and (max-device-width:768px) {.tooltip span{display:none;}.tooltip:hover span{display:block;} /* iPad & iPhone simulate :hover */ /*html tool tip on rollover / click for touch devices */ } abbr { border-bottom: 1px dotted #666; cursor: help; } .tooltip { position:absolute; background-color:#eeeefe; border: 1px solid #aaaaca; font-size: smaller; padding:4px; width: 160px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } /*Manuals table*/ .mTable { display: table; width: 100%; } .mTableRow { display: table-row; } .mTableHeading { display: table-header-group; background-color: #ddd; } .mTableCell, .mTableHead { display: table-cell; padding: 3px 10px; border: 1 px solid #999999; } .mTableHeading { display: table-header-group; background-color: #ddd; font-weight:bold; } .mTableFoot { display: table-footer-group; font-weight: bold; background-color: #ddd; } .mTableBody { display: table-row-group; } /*Specs Table*/ .spTable { display: table; width: 100%; } .spTableRow { display: table-row; } .spTableCell, .spTableHead { display: table-cell; padding: 3px 10px; width: 35%; } .spTableCellb { display: table-cell; padding: 3px 10px; width: 35%; background-color: #F7F9FA; } .spTableHeading { display: table-header-group; font-weight:bold; } .spTableFoot { display: table-footer-group; font-weight: bold; background-color: #ddd; } .spTableBody { display: table-row-group; } hr.half-width{ width:50%; margin: 0 auto; } /****** FILE: themes/gamry/css/tipsy.css *****/ .tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url(/themes/gamry/images/tipsy.gif); } .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-north { background-position: top center; } .tipsy-south { background-position: bottom center; } .tipsy-east { background-position: right center; } .tipsy-west { background-position: left center; }