tag === 1.6 as a unitless line-height (leading). This is the equivalent of 25.6 pixels since our framework's baseline font size is 1rem (16 pixels). Math: 16 x 1.8 = 28.8 ================================================== */ /* old = 1.6rem / 25.6 */ /* $Leading Matches our $baseline but w/o the unit specificity ================================================== */ /* old = 1.6 */ /* $Type-size Typographic scale (font-size only) as variables ================================================== */ /* 104px */ /* 96px */ /* 82px */ /* 74px */ /* 66px */ /* 56px */ /* 46px */ /* 38px */ /* 30px */ /* 24px */ /* 20px */ /* 18px */ /* 16px */ /* 16px */ /* 14px */ /* 13px */ /* 12px */ /* 11px */ /* 10px */ /* $Weights (font-weight) ================================================== */ /* $Kerning (letter-spacing) Note: set in em b/c should be relative to element not root. ================================================== */ /* $Leading (line-height) ================================================== */ /* $Style (font-style) ================================================== */ /* $Case ================================================== */ /* $Decoration ================================================== */ /* $Text-align ================================================== */ /* $Floats ================================================== */ /* $Display (block) ================================================== */ /* $Column-count (and related properties) ================================================== */ /* $Border-radius ================================================== */ /* 3px */ /* /utilities/_mixins.scss */ /* $Baseline Margins as multiples of base line-height (leading). All margins applied to bottom of elements to maintain some sense of a baseline grid. Baseline is defined on and

tag === 1.6 as a unitless line-height (leading). This is the equivalent of 25.6 pixels since our framework's baseline font size is 1rem (16 pixels). Math: 16 x 1.6 = 25.6 ================================================== */ /* $Group Self-clearing floats = 'clearfix' ================================================== */ /* $Screenreader Equivalent to '.visually-hidden' ================================================== */ /* /theme/_color.scss */ /* all based on above default */ .color--pearson-blue { color: #007fa3 !important; } .color--white, .color--chalk-white { color: white !important; } .color--white:link, .color--white:visited, .color--white:hover, .color--white:active, .color--white:focus { color: white !important; } .color--midnight-blue { color: #003057 !important; } .color--lime-green { color: #d2db0e !important; } .color--ice-blue { color: #d4eae4 !important; } .color--graphite-grey { color: #505759 !important; } .color--cappuccino { color: #333333 !important; } .color--ink-blue { color: #005a70 !important; } .color--grass-green { color: #008638 !important; } .color--marine-turquoise { color: #12b2a6 !important; } .color--fresh-green { color: #84bd00 !important; } .color--sunshine-yellow { color: #ffb81c !important; } .color--juicy-orange { color: #ea7600 !important; } .color--strawberry-red { color: #db0020 !important; } .color--royal-purple { color: #9e007e !important; } .color--hot-pink { color: #ea067e !important; } .bgcolor--pearson-blue { background-color: #007fa3; } .bgcolor--white, .bg.color--chalk-white { background-color: white; } .bgcolor--midnight-blue { background-color: #003057; } .bgcolor--lime-green { background-color: #d2db0e; } .bgcolor--ice-blue { background-color: #d4eae4; } .bgcolor--graphite-grey { background-color: #505759; } .bgcolor--cappuccino { background-color: #333333; } .bgcolor--ink-blue { background-color: #005a70; } .bgcolor--grass-green { background-color: #008638; } .bgcolor--toothpaste { background-color: #12b2a6; } .bgcolor--marine-turquoise { background-color: #12b2a6; } .bgcolor--fresh-green { background-color: #84bd00; } .bgcolor--sunshine-yellow { background-color: #ffb81c; } .bgcolor--juicy-orange { background-color: #ea7600; } .bgcolor--strawberry-red { background-color: #db0020; } .bgcolor--royal-purple { background-color: #9e007e; } .bgcolor--hot-pink { background-color: #ea067e; } .color--grey-lx15 { color: #f2f2f2 !important; } .color--grey-lx10 { color: #e6e6e6 !important; } .color--grey-lx5 { color: #d9d9d9 !important; } .color--grey { color: #cccccc !important; } .color--grey-dx5 { color: #bfbfbf !important; } .color--grey-dx10 { color: #b3b3b3 !important; } .color--grey-dx15 { color: #a6a6a6 !important; } .color--grey-dx20 { color: #999999 !important; } .color--grey-dx25 { color: #8c8c8c !important; } .color--grey-dx30 { color: gray !important; } .color--grey-dx35 { color: #737373 !important; } .color--grey-dx40 { color: #666666 !important; } .color--grey-dx45 { color: #595959 !important; } .color--grey-dx50 { color: #4d4d4d !important; } .color--grey-dx55 { color: #404040 !important; } .color--grey-dx60 { color: #333333 !important; } .bgcolor--grey-lx15 { background-color: #f2f2f2; } .bgcolor--grey-lx10 { background-color: #e6e6e6; } .bgcolor--grey-lx5 { background-color: #d9d9d9; } .bgcolor--grey { background-color: #cccccc; } .bgcolor--grey-dx5 { background-color: #bfbfbf; } .bgcolor--grey-dx10 { background-color: #b3b3b3; } .bgcolor--grey-dx15 { background-color: #a6a6a6; } .bgcolor--grey-dx20 { background-color: #999999; } .bgcolor--grey-dx25 { background-color: #8c8c8c; } .bgcolor--grey-dx30 { background-color: gray; } .bgcolor--grey-dx35 { background-color: #737373; } .bgcolor--grey-dx40 { background-color: #666666; } .bgcolor--grey-dx45 { background-color: #595959; } .bgcolor--grey-dx50 { background-color: #4d4d4d; } .bgcolor--grey-dx55 { background-color: #404040; } .bgcolor--grey-dx60 { background-color: #333333; } /* Base Much of this section is a reset or normalization of common elements. Changes to the rules defined in the 'Base' section should be rare and well justified. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary, rule { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; } * { box-sizing: border-box; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote, .blockquote { font-family: 'Open Sans', Verdana, sans-serf; font-weight: 300; font-size: 1rem; line-height: 1.7; margin: 1rem 0 1.75rem 0; } blockquote cite, .blockquote cite { display: block; margin-top: .5rem; font-size: .6875rem; font-style: normal; clear: both; max-width: 90%; } blockquote cite:before, .blockquote cite:before { content: '\2014'; color: gray; padding-right: .25rem; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } p, pre { margin: 0 0 1rem 0; } code, kbd, pre, samp { font-family: monospace,serif; _font-family: 'courier new',monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ''; content: none; } small { font-size: 75%; } sub, sup { font-size: 65%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.275rem; padding: 0 2px; padding: 0 0.1rem; } h1 sup, h2 sup { font-size: 43.75%; top: -.75rem; } sub { bottom: -.25rem; } a:link, a:visited { text-decoration: none; } a:hover, a:focus, a:active { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-weight: 400; } h1, .h1 { font-weight: 600; font-size: 2rem; line-height: 1.4; margin: 0 0 0.825rem 0; } h2, .h2 { font-size: 1.5rem; line-height: 1.4; margin: 0 0 0.415rem 0; } /*.h2-plus { font-size: 1.675rem; margin-bottom: .83rem ; }*/ h2 + p { margin-top: 0; } h3 + p { margin-top: .5rem; } /* double line-height flowline p + h2, ul + h2, ol + h2 dl + h2, div + h2 { margin-top: 49px; margin-top: 2.8rem; } */ h3, .h3 { font-size: 1.15rem; margin: 0 0 0.35rem 0; } h2 + h3 { font-weight: 400; } h2 + h3 em { font-style: italic; } h4, .match-h4, .h4 { font-weight: 700; font-size: .9rem; /*.9em;*/ text-transform: uppercase; margin: 0 0 0.45rem 0; } /*h4 em, .match-h4 em, .h4 em { font-family: 'OpenSans-Bold-Italic', Verdana, sans-serif; }*/ h5, .h5 { font-size: .825em; margin: 0 0 0.4125rem 0; } h6, .h6 { font-size: .6875rem; margin: 0 0 0.34375rem 0; } p, .match-p, .p { font-size: 1rem; line-height: 1.8rem; } header { position: relative; } iframe { overflow-x: hidden; overflow-y: auto; border: 0; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; } nav li { margin-bottom: 0; } ul, ol, dl { font-size: .875rem; } dl, menu, ol, ul { margin: 1rem 0; } dd { margin: 0; } menu, ol, ul, dl { padding: 0 0 0 2.5em; } li, dd { margin-bottom: .5rem; /*.75rem;*/ } li ul, li ol { font-size: .875rem; padding-left: 1rem; } li ol li { margin-left: 2rem; } img { border: 0; -ms-interpolation-mode: bicubic; max-width: 100%; } object, embed { max-width: 100%; } svg:not(:root) { overflow: hidden; } figure { margin: 0 0 1rem 0; padding: 0; max-width: 100%; display: block; } figcaption { font-size: .75rem; line-height: 1.6; color: #666666; padding: 0.25rem 0.125rem; display: block; } section { display: block; clear: both; position: relative; padding: 2.5rem 0; } aside { background-color: none; margin: 0; } aside p { font-size: 0.875rem; margin-bottom: 0.45rem; } aside p + h4 { margin-top: 2rem; } table { font-size: .75rem; border-collapse: collapse; border-spacing: 0; margin: 1.75rem 0; } colgroup.thirds col { width: 33.33%; } table p, table ul, table ol, table dl { font-size: .75rem; } th { font-weight: 700; font-size: .85rem; text-transform: uppercase; background-color: #f2f2f2; border-bottom: 1px solid #cccccc; padding: .5rem; text-align: left; } td { padding: .5rem; border-bottom: 1px solid #f2f2f2; vertical-align: top; } table tr:last-child td { border-bottom: none; } tfoot { font-size: .6875rem; color: #787878; } tfoot td { border-top: 1px solid #f2f2f2; } tfoot td p { font-size: .6875rem; } form { margin: 0; font-size: 90%; } form table { font-size: 100%; } form td { border: none; } fieldset { padding: 1rem; margin: 1.5rem 0; border: none; } legend { border: 0; padding: 0; white-space: normal; *margin-left: -0.4375em; } label { font-weight: bold; cursor: pointer; vertical-align: middle; } input[type=text], input[type=email], input[type=password], textarea, select, datalist option { color: #505759; background-color: white; border: 0.125rem solid #cccccc; padding: .5rem; margin: 0; width: 100%; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } textarea { line-height: 1.5; min-height: 7.5rem; overflow: auto; vertical-align: top; } input[type=submit] { display: inline-block; width: auto; margin: .5rem 0; } input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus, select:focus { color: #333333; border: 2px solid gray; outline: 0; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type=checkbox], input[type=checkbox]:active, input[type=checkbox]:focus { width: auto; display: inline-block; vertical-align: middle; box-sizing: border-box; padding: 0; border: none; *height: .8125em; *width: .8125em; } input[type=checkbox] { border: 1px solid #cccccc; } input[type=checkbox]:active, input[type=checkbox]:focus { border: 1px solid #666666; } input[type=radio] + label { margin-left: .25rem; } input[type=search] { -moz-appearance: textfield; -webkit-appearance: textfield; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* footer { color: $color--grey-dx30; background-color: $color--cappuccino; display: block; padding: 1.5rem 0 3rem 0; } */ /*footer dl { display: block; width: 20%; padding: 0; margin: 1rem 0 0 0; float: left; }*/ /* footer dt, footer dd { margin: 0; padding: 0; } footer dt { font-size: .875rem; margin-bottom: .25rem; } footer dd + dt { margin-top: 1.5rem; } footer dd { font-size: .6875rem; line-height: 1.2; margin-bottom: .45rem; } footer a:link, footer a:visited { text-decoration: none; } footer a:hover, footer a:active, footer a:focus { text-decoration: underline; } footer dd a, footer small a { color: #ddd!important; } footer dt a { color: #999!important; } footer div { display: block; } */ footer nav.wrapper { padding: 0 1rem; } footer div p { padding: 0.25rem 1rem 0 1rem; margin: 1.8rem 0 0 0; } @media screen and (max-width: 48em) { footer div p { padding: .25rem 0; } } /* footer small { font-size: .625rem; }*/ /* not an HTML5 element, but we've added it to our Modernizr JS lib file. */ rule { height: 1px; line-height: 1px; min-height: 1px; width: auto; background-color: #f2f2f2; margin: 1.5rem 0; } rule + h2 { margin-top: 0; } /* these are only classes but seems silly to lose them by placing them elsewhere in this file. */ .rule-dotted { background-color: transparent; border-top: 1px dotted #cccccc; } .rule-dashed { background-color: transparent; border-top: 1px dashed #f2f2f2; } .rule-dark { background-color: #cccccc; } .rule-medium { background-color: #d9d9d9; } .rule-small-margin { margin: .35rem 0; } .rule-extra-small-margin { margin: .25rem 0; } /*-----------------------------------------------*/ /* Layout The following may be considered improperly categorized, but '.wrapper', '.col', '.push', and '.pull' are really layout elements used to render our grid and center content where required. */ /* .wrapper is used to define the outermost boundary of our grid; equivalent to '.row' in similar grid structures. */ /*.wrapper { display: block; clear: both; position: relative; min-width: 320px; min-width: 20rem; max-width: 80rem; padding: 0 16px; padding: 0 1rem; margin: 0 auto; }*/ .wrapper { display: block; clear: both; position: relative; min-width: 20rem; /* 320px */ max-width: 90rem; /* bumping to match our current 1440px grid; formerly 80rem (1280px) */ padding: 0 1rem; margin: 0 auto; } @media (max-width: 20em) { .wrapper { min-width: 0; } } .wrapper:after { content: ""; display: table; clear: both; } /* firefox only: issue with overlapping margin @-moz-document url-prefix() { .wrapper { margin-bottom: 1.8rem; } } */ .wrapper .wrapper { padding-right: 0; padding-left: 0; max-width: none; min-width: 0; margin-right: -1rem; margin-left: -1rem; } nav.wrapper { padding: 0 2rem; margin-bottom: 0; } /* 12 column flexible grid .col~ and .offset are classes (generally applied to

elements) we use to render our flexible grid. sometimes the values used by these classes are used as part of the ruleset for existing elements (rather than applying the .col~ or .offset classes). .col + .col-(number) will define your containing column's width. .push-(number) acts as a 'push' class, 'pushing' your column away from the left. .pull-(number) acts as a 'pull' class, 'pulling' your column toward the left (pushes away from the right; the opposite of .push). */ .col, .no-col-stack .col { float: left; padding: 0 1rem; min-height: 1px; } /* when you need tighter gutter spacing */ .wrapper.has-narrow-gutters .col, .has-narrow-gutters .col { padding: 0 0.25rem; } .col-1, .no-col-stack .col-1 { width: 8.33%; } .col-2, .no-col-stack .col-2 { width: 16.66%; } .col-2h, .no-col-stack .col-2h { width: 20.825%; } .col-3, .no-col-stack .col-3 { width: 24.99%; } .col-4, .no-col-stack .col-4 { width: 33.33%; } .col-4h, .no-col-stack .col-4h { width: 37.495%; } .col-5, .no-col-stack .col-5 { width: 41.65%; } .col-6, .no-col-stack .col-6 { width: 50%; } .col-7, .no-col-stack .col-7 { width: 58.33%; } .col-8, .no-col-stack .col-8 { width: 66.66%; } .col-9, .no-col-stack .col-9 { width: 74.99%; } .col-10, .no-col-stack .col-10 { width: 83.33%; } .col-11, .no-col-stack .col-11 { width: 91.66%; } .col-12, .no-col-stack .col-12 { width: 100%; float: none; } /* push from left */ .push-1half { margin-left: 4.165%; } .push-1 { margin-left: 8.33%; } .push-2 { margin-left: 16.66%; } .push-3 { margin-left: 24.99%; } .push-4 { margin-left: 33.33%; } .push-5 { margin-left: 41.66%; } .push-6 { margin-left: 49.99%; } .push-7 { margin-left: 58.33%; } .push-8 { margin-left: 66.66%; } .push-9 { margin-left: 74.99%; } .push-10 { margin-left: 83.33%; } .push-11 { margin-left: 91.66%; } /* pull towards left */ .pull-1half { margin-right: 4.165%; } .pull-1 { margin-right: 8.33%; } .pull-2 { margin-right: 16.66%; } .pull-3 { margin-right: 24.99%; } .pull-4 { margin-right: 33.33%; } .pull-5 { margin-right: 41.66%; } .pull-6 { margin-right: 49.99%; } .pull-7 { margin-right: 58.33%; } .pull-8 { margin-right: 66.66%; } .pull-9 { margin-right: 74.99%; } .pull-10 { margin-right: 83.33%; } .pull-11 { margin-right: 91.66%; } /* utilize CSS column-count to render column flow. */ .col-span-all { -webkit-column-span: all; -moz-column-span: all; column-span: all; } .col-flow-rule { -webkit-column-rule: 1px solid #f2f2f2; -moz-column-rule: 1px solid #f2f2f2; column-rule: 1px solid #f2f2f2; } .col-flow-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .col-flow-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .col-flow-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .col-flow-2, .col-flow-3 { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } .col-flow h3 + p, .col-flow dl { page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid-column; column-break-inside: avoid; } /* flowlines in a grid create the horizontal spacing; increasing the top flowline of a '.wrapper' (think row) can be useful when laying some elements out in a sub-grid. */ .increased-top-flowline, .wrapper.increased-top-flowline { margin-top: 3rem; } /* specialized rules for product page hero space (pub data presented as "inside" laptop screen) */ .product-hero { padding-bottom: 1.25rem; } .frame { position: relative; z-index: 1; overflow: hidden; } .pub-data { padding: 7% 12% 5% 17%; width: 100%; position: absolute; top: 0; left: 0; z-index: 3; } .pub-data h1 { font-size: 1.75rem; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .pub-data h1 em { font-size: 1.125rem; } .cover-col { width: 27%; padding-left: 0; position: relative; } .regional-flag { position: absolute; top: -10%; left: -8%; z-index: 10; display: block; max-width: 32%; } .title-col { width: 73%; padding-top: .5rem; padding-left: 0; } .title-col h2 { font-weight: 600; font-size: 1.125rem; color: #505759; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .title-col p { font-size: 1rem; font-weight: 600; color: #777; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .is-frame { position: relative; z-index: 2; } /* ordering options */ .ordering-options li { background-color: #f2f2f2; padding: .75rem; margin-bottom: 1rem; } .ordering-options h3 { /* "Featured offer" */ font-size: 1.5rem; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .ordering-options h4, .ordering-options h5 { /* product title string AND price */ font-weight: 600; font-size: 1.125rem; margin-bottom: .125rem; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .ordering-options p { font-size: .75rem; } .featured-offer h4, .featured-offer h5 { font-weight: 700; font-size: 1.375rem; color: #505759; } /* featured offer */ .featured-offer, .ordering-options li.featured-offer { background: #ffff99; } /* featured offer in .product-hero space */ .product-hero .featured-offer { padding: 1.5rem; margin-top: 1.875rem; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /* maintain top margin on /students/ product page */ .product-hero .share-this + .featured-offer { margin-top: .5rem; } .product-hero .featured-offer h4 { margin-bottom: .5rem; } /*-------------------- May 2014: multiple featured offers --------------------*/ /* applies to educator view */ .has-multiple-offers .offer:first-of-type h4 { margin-top: 2em; } .has-multiple-offers .price { width: 100%; float: none; } .has-multiple-offers .price h5, .has-multiple-offers .price p { display: inline-block; } /* applies to both student and educators views */ .featured-offer .offer { margin-bottom: 2em; } .featured-offer .offer:last-child { margin-bottom: 0; } /* get bullets to display for lists inside column-count parent container */ .bullet-list li { display: inline-block; width: 100%; padding-left: 2rem; text-indent: -2rem; } .bullet-list li:before { content: '\2022'; margin-right: .75rem; } #slideshow-mobile-dashboard, #slideshow-mobile-dashboard figure img { max-width: 20rem; } #slideshow-results-cards .card { min-height: 17.25rem; margin: 0 1.5rem; } .pullquote { position: relative; padding-left: 1rem; border-left: .1875rem; border-left-style: solid; margin-bottom: 1rem; } .pullquote p { font-size: .925rem; } .pullquote p:first-of-type:before, .pullquote p:last-of-type:after { font-weight: bold; color: gray; } .pullquote p:first-of-type:before { content: '\201C'; padding-right: .25rem; } .pullquote p:last-of-type:after { content: '\201D'; padding-left: .25rem; } /* social media icons are unique enough to warrant their own module */ .social-group { margin: 0; padding: 0; list-style-type: none; } .social-group li, .social-group dd { font-size: 2rem; list-style-type: none; display: inline-block; margin: 0 1rem 0 0; } .social-group li:last-of-type, .social-group dd:last-of-type { margin-right: 0; } .social-group li a, .social-group dd a { opacity: .75; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .social-group li a:hover, .social-group li a:focus, .social-group dd a:hover, .social-group dd a:focus { opacity: .99; /* -webkit has trouble with sub-pixel rendering if we transition to 1 */ } .social-group li a:link, .social-group li a:visited, .social-group li a:hover, .social-group li a:active, .social-group li a:focus { text-decoration: none; } /* social colors */ .facebook { color: #3b579d !important; } .twitter { color: #00aced !important; } .youtube { color: #cd332d !important; } .pinterest { color: #cb2027 !important; } .instagram { color: #517fa4 !important; } .blog, .rss { color: #ff7210 !important; } .flag-simple { font-size: .6875rem; font-weight: 700; letter-spacing: 1px; padding: 0.25rem 0.5rem; } h1 .flag-simple { top: -.375rem; left: .5rem; } .mega .flag-simple { top: -.65rem; left: .5rem; } /* notifications above hero (count) */ .notification-count span { display: inline-block; vertical-align: middle; } .notification-count span:last-child { margin-top: .125rem; } .notification-count .flag-simple { font-size: .875rem; font-weight: 700; background-color: #fd2812; background: #fd2812; margin-right: .125rem; /* LL: match dimensions of notification icons */ display: inline-block; padding: 0; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; text-align: center; vertical-align: middle; } .corner-flag { width: 5rem; height: 5rem; position: absolute; top: -.125rem; left: -.125rem; border-style: solid; border-width: 5rem 5rem 0 0; -webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.35)); filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.35)); } .corner-flag em { font-style: normal; font-size: 1rem; text-align: center; color: white; display: block; margin-top: -3.125rem; margin-left: .6875rem; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-filter: none; filter: none; } .has-folded-corner:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 4rem 4rem 0; border-style: solid; border-color: white white #f7f7f7 #f7f7f7; background-color: white; } .utility-nav { font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; float: right; width: auto; padding: 0; display: inline-block; position: relative; z-index: 5; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .utility-nav li { float: left; text-align: right; display: inline-block; padding: 0 1.5rem 0 0; margin: 0; } .utility-nav li:last-of-type { padding-right: 0; } .utility-nav li a { display: inline-block; color: #505759; background: transparent; padding: 0 0.90625rem 0 0.5rem; position: relative; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .utility-nav li a::before { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 0; width: 0; background-color: transparent; visiblity: hidden; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media (min-width: 48em) { .utility-nav li a::before { background-color: #d2db0e; } } .no-flexbox .utility-nav li a::before { display: none !important; } .utility-nav li a:hover::before { visibility: visible; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); width: 100%; height: .25rem; } @media (min-width: 48em) { .utility-nav li a:hover::before { background-color: #005a70; } } .utility-nav.uses--light-text a { color: white; } .utility-nav li em { font-style: normal; margin-left: .25em; } .utility-nav li span { font-size: 1.15rem; /*1rem;*/ opacity: .75; } .trigger-menu { font-size: 0.875rem !important; font-weight: 700; color: white !important; text-transform: uppercase; background-color: #005a70; padding: 0 0.5rem; cursor: pointer; margin-top: -.25rem; } .no-flexbox .trigger-menu { -ms-transform: translateY(-1px); } .trigger-menu::before { content: '\2261'; font-size: 1.25rem !important; font-weight: 400 !important; width: 1.125rem; overflow: hidden; padding-right: .25rem; color: #eee !important; display: inline-block; float: left; } .no-flexbox .trigger-menu::before { margin-top: 1px; } .is-open .trigger-menu:before { content: '\2715'; font-size: 1rem !important; } .is-horizontal { clear: both; width: 100%; position: relative; z-index: 2; } .is-horizontal .wrapper { padding: 0 2rem 0 1.25rem; margin-bottom: 0; } .is-horizontal dl, .is-horizontal ul { font-size: .925rem; font-weight: 600; min-height: 3.1875rem; padding: 0; margin: 0; width: auto; display: inline-block; vertical-align: middle; } .is-horizontal dt { vertical-align: middle; font-size: 1.25rem; font-weight: 600; min-height: 3.1875rem; line-height: 3.1875rem; display: inline-block; float: left; margin: 0 1.5rem 0 0; width: auto; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } .is-horizontal dd, .is-horizontal li { list-style-type: none; float: left; display: inline-block; vertical-align: middle; line-height: 3.1875rem; padding: 0; margin: 0; } .is-horizontal dd:last-of-type, .is-horizontal li:last-of-type { margin-right: 0; } .is-horizontal a { display: block; padding: 0 0.75rem; height: 100%; position: relative; z-index: 2; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .is-horizontal a:link, .is-horizontal a:visited { text-decoration: none; color: #333333 !important; } .is-horizontal a:hover, .is-horizontal a:active, .is-horizontal a:focus { background-color: #005a70; } .is-horizontal ul a:hover, .is-horizontal ul a:active, .is-horizontal ul a:focus { background-color: #f7f7f7; } .is-horizontal dt a:hover, .is-horizontal dt a:focus { background-color: transparent; } .is-horizontal a [data-icon], .is-horizontal dt span { display: none; } .is-horizontal a[rel="ext"] [data-icon] { display: inline-block; } .is-horizontal dl a.current-node { background-color: #005a70 !important; color: white !important; cursor: default; } .is-horizontal ul a.current-node { background-color: transparent; cursor: default; } .is-horizontal dt a.current-node { background-color: transparent !important; } .is-horizontal + .is-horizontal { margin-top: -1.5rem; } .is-horizontal + .is-horizontal dl, .is-horizontal + .is-horizontal ul { font-size: .825rem; } .is-vertical { font-weight: 600; } .is-vertical dl, .is-vertical dt, .is-vertical dd { padding: 0; margin: 0; } .is-vertical dt:first-of-type { font-weight: 700; text-transform: uppercase; padding-bottom: .4rem; border-bottom: 3px solid #cccccc; } .is-vertical dd { font-size: .825rem; } .is-vertical dd a { display: block; width: 100%; height: 100%; padding: .5rem; border-bottom: 1px solid #f2f2f2; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .is-vertical dd:last-of-type a { border-bottom: 0; } .is-vertical dd a:link, .is-vertical dd a:visited { color: #555 !important; /* needed to ovr theme */ } .is-vertical dd a:hover, .is-vertical dd a:active, .is-vertical dd a:focus { background-color: #f7f7f7; text-decoration: none; } .is-vertical dd a.current-node { cursor: default; } .is-vertical dd a.current-node:hover, .is-vertical dd a.current-node:focus { background-color: transparent; } .featured-links { position: relative; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .featured-links * { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .featured-links .col { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .featured-links.has-compact-links .col-4 { width: 25%; } @media (min-width: 1299px) { .featured-links.has-compact-links .col-4 { width: 18%; } } .featured-links.has-compact-links dl { height: 12rem; } .featured-links.has-compact-links dt { float: none; width: auto; height: auto; border-right: none; } .featured-links.has-compact-links dd { padding: .25rem 0; } .featured-links a:link, .featured-links a:visited, .featured-links a:hover, .featured-links a:active, .featured-links a:focus { text-decoration: none; color: #003057 !important; } .featured-links a:hover, .featured-links a:active, .featured-links a:focus { text-decoration: underline; } .featured-links dt a:hover span, .featured-links dt a:active span, .featured-links dt a:focus span { opacity: 1; } .featured-links dl { width: 100%; margin: 0; padding: 1rem; height: 7.5rem; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .featured-links .col:nth-child(2) dl { margin: 0 auto; } .featured-links .col:last-child dl { float: right; } .featured-links dt { font-size: 1rem; font-weight: 600; line-height: 1.6; float: left; width: 50%; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.35); padding: 0 0.5rem 0 0; margin: 0 0 0.45rem 0; } .featured-links dt span { font-style: normal; font-size: 0.875rem; margin-left: .35rem; opacity: .5; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .featured-links dt span[data-icon]:before { vertical-align: baseline; } .featured-links dd { font-size: 0.875rem; white-space: nowrap; clear: right; padding: 0.25rem 0 0.25rem 55%; margin: 0; } .list-inline { margin: 0; padding: 0; } .list-inline li, .list-inline dt, .list-inline dd { display: inline-block; margin: 0; padding: 0; } .list-inline li:first-of-type, .list-inline dt { margin-right: .5rem; } .list-with-separators li:after, .list-with-separators dd:after { content: '|'; display: inline-block; padding: 0 0 0 0.375rem; opacity: .35; } .list-with-separators li:last-of-type:after, .list-with-separators dd:last-of-type:after { content: ''; display: none; } .form-inline input[type=text], .form-inline input[type=email] { display: inline-block; width: auto; padding: .5rem; } input[type=text].input-will-expand, .input-will-expand { min-width: 15rem; -webkit-transition: width 500ms ease; transition: width 500ms ease; -webkit-transition-delay: 250ms; transition-delay: 250ms; } .input-will-expand:focus, .form-inline .input-will-expand:focus { width: 73%; } .form-stacked input[type=text], .form-stacked input[type=email], .form-stacked input[type=password], .form-stacked textarea, .form-stacked select, .form-stacked p.error-msg { display: inline-block; width: 90%; margin-right: .5rem; float: left; } .form-stacked input[type=date], .form-stacked input.date, input.date { width: auto; } .form-stacked input[type=submit] { margin-top: 2rem; } .form-stacked textarea { height: 16rem; overflow-y: auto; } .form-stacked label { margin: 1rem 0 0.35rem 0; display: block; clear: both; } .form-stacked label:first-child { margin-top: 0; } .error, input.error, input[type=text].error, input[type=password].error, input[type=email].error, input[type=date].error { background-color: #ff9; border: 2px solid #f90; } .pass { color: #3fa85d; font-size: 135%; } .fail { color: #ca2f45; font-size: 135%; } .conditional { display: none; } .form-tablular table { width: 90%; border: 0; border-collapse: collapse; } .form-tabular table col { width: 46.5%; } .form-tabular table col:first-child { width: 32.5%; } .form-tabular table col:last-child { width: 21%; } .form-tabular table td { vertical-align: middle; padding: .5em; } .form-tabular table td.error { background: url(../images/ui/error.png) no-repeat 0.25em center scroll transparent; } .form-tabular table td.ok { background: url(../images/ui/ok.png) no-repeat 0.25em center scroll transparent; } .form-tabular table h2 { margin: 1em 0 0 0; padding: 0; } .form-tabular label { width: auto; margin: 0; padding: 0; vertical-align: middle; } .form-tabular input.submit { -webkit-transition: none; transition: none; border: 0; } .tip { font-size: .6875rem; font-weight: normal; color: #666666; margin: 0; } .error-msg { text-align: center; padding: 1rem; margin: 1rem 0; } .req:before { content: ' * '; display: inline-block; font-family: 'Lucida Console', 'Monaco', 'Courier New', monospace; font-weight: 400; font-size: 1.15rem; color: #e04854; padding: 0 0.25rem 0 0; } .radio-list { padding: 0; margin: 0; } .radio-list li { list-style-type: none; line-height: 1; padding: 0; margin: 0 1.5em 0 0; } .radio-list input[type=radio], input[type=radio] { display: inline-block; vertical-align: middle; width: auto; margin: 0; line-height: 1rem; } .radio-list label { display: inline-block; font-weight: normal; float: none; line-height: 1rem; vertical-align: middle; padding-left: .35rem; margin: 0; } .button { font-size: 1rem; font-weight: 600; color: #003057 !important; background: #d2db0e; line-height: 1; text-align: center; white-space: nowrap; display: inline-block; vertical-align: middle; text-decoration: none; cursor: pointer; border: none; border-radius: 0; padding: 1.2rem 1.4rem; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .button [data-icon] { color: #005a70; } .button:hover, .button:active, .button:focus { text-decoration: none; color: white !important; background-color: #003057 !important; } .button:hover [data-icon], .button:active [data-icon], .button:focus [data-icon] { color: #d4eae4; } .button:active { position: relative; top: 1px; -webkit-transform: translateY(3px); -ms-transform: translateY(3px); transform: translateY(3px); -webkit-animation: none; animation: none; } .csstransforms .button:active { top: 0; -webkit-transform: translateY(0.125rem); -ms-transform: translateY(0.125rem); transform: translateY(0.125rem); } .button-disabled:active { top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-animation: none; animation: none; } .csstransforms .button-disabled:active { top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .button-big-icon span { font-size: 1.15rem; } .button em { font-style: normal; color: inherit; padding-right: .35rem; } [data-icon].right { padding-left: .5em; } [data-icon].right-plus { padding-left: .6875em; } [data-icon].left { padding-right: .25em; } [data-icon].left-plus { padding-right: .5rem; } .button [data-icon].left { padding-right: .6875rem; } .button [data-icon].right { padding-left: .5em; } .button-big-icon [data-icon].left { padding-right: .5em; } .button-mega { font-size: 1.5rem; line-height: 1.5rem; padding: 1.5rem; } .button-mega [data-icon].right { padding-left: 1rem; } .button-plus { font-size: 1rem; line-height: 1; padding: 1rem; } .button-plus [data-icon].right { padding-left: .5rem; } .button-grey { background-color: #e5e5e5 !important; color: #555 !important; } .button-grey [data-icon] { opacity: .5; } /* disabled button */ .button-disabled { background-color: #e5e5e5 !important; color: #999 !important; cursor: default; text-shadow: 1px 1px 0px white; -webkit-filter: dropshadow(color=white, offx=1, offy=1); filter: dropshadow(color=white, offx=1, offy=1); } input[type=text] + input[type=submit].button { padding-top: .5rem; } .share-this { cursor: pointer; } .stLframe body, iframe iframe { overflow-y: hidden !important; } .has-drop-menu:after { content: 'â–¼'; display: inline-block; font-size: 95%; vertical-align: middle; float: right; } .drop-menu { position: absolute; z-index: 9999; min-width: 15rem; width: 90%; left: 5%; } .js .drop-menu { display: none; } .drop-menu ul { background-color: white; border: .1875rem solid #777; overflow: visible; padding: .75rem 0; margin: 0; } .drop-menu li { display: block; float: none; overflow: hidden; border-bottom: 1px solid #f2f2f2; padding: 0; margin: 0; } .drop-menu li:last-child { border-bottom: 0; } .drop-menu li a:link, .drop-menu li a:visited { font-size: .875rem; font-weight: bold; line-height: 1.5; color: #333333; padding: 0.35rem 0.7rem; display: block; width: 100%; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .drop-menu li a:hover, .drop-menu li a:active, .drop-menu li a:focus { background-color: #f2f2f2; text-decoration: none; color: #364395; } .drop-menu li a:after { content: 'â€º'; font-size: 1.5rem; font-weight: bold; float: right; padding-right: 2%; vertical-align: middle; } .drop-menu li a:hover:after, .drop-menu li a:focus:after { color: #0089b7; } .has-pointer { margin-top: -.5rem; } .has-pointer:before, .has-pointer:after { position: absolute; content: ' '; display: inline-block; } .has-pointer:after { top: -.4375rem; left: 12.5rem; border-left: .625rem solid transparent; border-right: .625rem solid transparent; border-bottom: 0.625rem solid white; } .has-pointer:before { top: -.75rem; left: 12.375rem; border-left: .75rem solid transparent; border-right: .75rem solid transparent; border-bottom: .75rem solid #777; } #search { position: relative; background: url(../images/ui/magnify-alt.png) no-repeat right center scroll white; background-size: 25px 20px; outline: 0; } #search:focus { border: 2px solid #b3b3b3; } .dropdown-menu { overflow-x: hidden; overflow-y: scroll; max-height: 30rem; position: absolute; top: 100%; left: 0; z-index: 1000; display: block; float: left; width: 30rem; padding: 0; margin: 0; list-style: none; background-color: white; border: 3px solid #cccccc; border: 0.1875rem solid #777777; background-clip: padding-box; } .dropdown-menu a { display: block; padding: 0.25rem 1rem; clear: both; color: #333333 !important; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .dropdown-menu a strong { color: #9d1248 !important; } .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a { text-decoration: none; color: white; background-color: #f2f2f2; } .dropdown-menu .active > a, .dropdown-menu .active > a:hover { text-decoration: none; background-color: #f2f2f2; } .dropdown-menu .disabled > a, .dropdown-menu .disabled > a:hover { color: gray; } .dropdown-menu .disabled > a:hover { text-decoration: none; background-color: transparent; cursor: default; } .dropdown-menu dl dt { font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; margin-bottom: .25rem; } .dropdown-menu dl dd { font-size: .75rem; color: #777; padding: 0; margin: 0 0 0.15rem 0; } .dropdown-menu dl dt + dd { font-size: .825rem; color: #333333; } .card-holder { padding-left: 1rem; } .card { position: relative; background: white; margin: 0 0 1.5rem 0; } .card-inner { padding: 1.5rem; } .card-inner .col:first-of-type, .card-inner .col:last-of-type { padding: 0; } .card-inner .col:first-of-type { padding-right: 1rem; } .card-inner .col:last-of-type { padding-left: 1rem; } .card-inner .col-12 { /* no padding if we're using the full width */ padding-right: 0 !important; padding-left: 0 !important; } .card-inner h3 { font-size: 1.25rem; margin-bottom: .45rem; } .card-inner dd { font-size: .75rem; } .card-inner h4 { margin-bottom: .25rem; } .card-inner p + h4, .card-inner p + .list-inline { margin-top: 1rem; } .card-inner .button, .blue .card-inner .button, .green .card-inner .button, .red .card-inner .button { margin-top: .5rem; margin-bottom: 1rem; /*old=.5rem;*/ min-width: 6rem; background: #d2db0e !important; color: #003057 !important; } .card-inner .button [data-icon], .blue .card-inner .button [data-icon], .green .card-inner .button [data-icon], .red .card-inner .button [data-icon] { color: #005a70 !important; } .card-inner .button:hover, .card-inner .button:active, .card-inner .button:focus, .blue .card-inner .button:hover, .blue .card-inner .button:active, .blue .card-inner .button:focus, .green .card-inner .button:hover, .green .card-inner .button:active, .green .card-inner .button:focus, .red .card-inner .button:hover, .red .card-inner .button:active, .red .card-inner .button:focus { background: #003057 !important; color: white !important; } .card-inner .button:hover [data-icon], .card-inner .button:active [data-icon], .card-inner .button:focus [data-icon], .blue .card-inner .button:hover [data-icon], .blue .card-inner .button:active [data-icon], .blue .card-inner .button:focus [data-icon], .green .card-inner .button:hover [data-icon], .green .card-inner .button:active [data-icon], .green .card-inner .button:focus [data-icon], .red .card-inner .button:hover [data-icon], .red .card-inner .button:active [data-icon], .red .card-inner .button:focus [data-icon] { color: #d4eae4 !important; } .card-inner figcaption { font-size: .6875rem; line-height: 1.5; } .card-inner blockquote { font-size: .925rem; color: #000; margin-top: 0; position: relative; } .card-moreinfo { display: none; } .card-expanded .card-moreinfo { display: block; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid #f2f2f2; } .card-moreinfo p { font-size: .875rem; line-height: 1.6; word-break: hyphenate; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .card-moreinfo .col-12 figure { float: none; } .card-moreinfo-toggle { text-align: center; color: #777 !important; font-size: 1.25rem; background-color: #f7f7f7; display: block; width: 100%; min-height: 1rem; position: relative; bottom: 0; } .card-moreinfo-toggle:link, .card-moreinfo-toggle:visited, .card-moreinfo-toggle:hover, .card-moreinfo-toggle:active .card-moreinfo-toggle:focus { text-decoration: none; } .card-moreinfo-toggle span[data-icon] { display: inline-block; -webkit-transition: .25s -webkit-transform ease; transition: .25s transform ease; } .card-expanded .card-moreinfo-toggle span[data-icon] { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .card-mini .card-inner { padding: 1rem 1.25rem; } .card-title { position: relative; } .card-title img { display: block; position: relative; z-index: 1; } .card-title header { position: absolute; bottom: 1rem; z-index: 2; padding: 0 1.25rem; width: 100%; } .card-title h2 { font-weight: 600; font-size: 1.5rem; display: block; max-width: 95%; margin: 0 auto; } .dialog-header { /* callout text with pointer */ font-size: 0.875rem; font-weight: 600; color: white; position: relative; padding: 0.35rem 0.5rem 0.5rem 0.5rem; margin-bottom: 1rem; } .dialog-header:after { content: ' '; height: 0; width: 0; border: .4375rem solid transparent; position: absolute; top: 99%; left: 10%; margin-left: .4375rem; } .filter-container { margin: 0 0 1rem 0; } .filter-container dl { list-style-type: none; padding: 0; margin: 0 0 0.5rem 0; } .filter-container dt { font-size: 0.875rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; padding: 0; margin: 0 0 0.45rem 0; } .filter-container dd { display: none; /* hidden by default as this is a toggle menu */ font-size: 0.8125rem; padding: 0; margin: 0 0 0.5rem 1.5rem; } dl.is-expanded { margin-bottom: 1.5rem; } .is-expanded dd { display: block; } .filter-container dt.has-tooltip { margin-bottom: 0; } .filter-container dt.has-tooltip a { margin-bottom: 0; } .is-tooltip { cursor: help; } .is-tooltip:hover, .is-tooltip:focus { text-decoration: none; } .is-tooltip span[data-icon] { font-size: 0.875rem; color: gray !important; } .filter-container input[type=checkbox] { float: left; vertical-align: bottom; margin-top: .125rem; } .filter-container label { font-weight: normal; display: block; line-height: 1.5; margin-left: 1.25rem; } .filter-container label img { display: inline-block; vertical-align: middle; height: 1rem; margin: 0 0.125rem; } .filter-container input[type=checkbox]:checked + label img { opacity: 1; -webkit-filter: grayscale(0); filter: grayscale(0); } .filter-container label em { font-size: 0.6875rem; font-style: normal; font-weight: normal !important; color: gray; } .toggle:link, .toggle:visited { display: block; padding: .35rem; margin-bottom: .35rem; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .toggle:hover, .toggle:active, .toggle:focus { text-decoration: none; background-color: #f2f2f2; } .toggle span[data-icon], .toggle-trigger span[data-icon] { display: inline-block; color: #737373; padding-right: .25rem; padding-left: .25rem; -webkit-transition: .1s -webkit-transform ease; transition: .1s transform ease; } .toggle-trigger.arrow-up-down span[data-icon] { -webkit-transition: none; transition: none; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform-style: preserve-3D; transform-style: preserve-3D; } .toggle.open span[data-icon], .toggle-trigger.open span[data-icon] { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .toggle-trigger.arrow-up-down.open span[data-icon] { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @-moz-document url-prefix() { .toggle-trigger.arrow-up-down.open span[data-icon]:before { vertical-align: top; } } .is-plus-minus, .is-plus-minus li, .is-plus-minus dt, .is-plus-minus dd { padding-left: 1.5em; list-style-type: none; } ul.is-plus-minus, dl.is-plus-minus { padding-left: 0; } .toggle-trigger.plus-minus { text-indent: -1.5em; padding-left: 1.5em; display: inline-block; } .toggle-trigger.plus-minus:before, .toggle--all.plus-minus:before { font-family: monospace; font-size: 105%; font-weight: 700; content: '\002B'; padding: 0.25em 0.5em; text-align: center; vertical-align: middle; color: gray; background-color: #f2f2f2; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; margin-right: .35em; } .toggle-trigger.plus-minus.is-minus:before, .toggle--all.plus-minus.is-minus:before { content: '\2212'; } .toggle-trigger.plus-minus:hover:before, .toggle-trigger.plus-minus:focus:before, .toggle--all.plus-minus:hover:before, .toggle--all.plus-minus:focus:before, .is-true-accordion .is-minus:link:before, .is-true-accordion .is-minus:hover:before, .is-true-accordion .is-minus:active:before, .is-true-accordion .is-minus:focus:before, .is-true-accordion .is-minus:hover:before { background-color: gray; color: #f2f2f2; } .no-csscolumns .toggle-target.has-column-count { display: block; } .no-csscolumns .toggle-target.has-column-count.screenreader { position: relative; overflow: visible; clip: rect(none); height: auto; width: auto; margin: inherit; } .no-csscolumns .target-has-column-count, .no-csscolumns .target-has-column-count:link, .no-csscolumns .target-has-column-count:visited, .no-csscolumns .target-has-column-count:hover, .no-csscolumns .target-has-column-count:active, .no-csscolumns .target-has-column-count:focus { color: #333333 !important; text-decoration: none !important; cursor: default; } .single-filter-set .filter-container ul { display: block; } .product-collection, .product-description { float: left; width: 73%; height: 100%; margin-left: 1.5%; padding-left: 1.5%; border-left: 1px dotted #cccccc; } /* filtering controls, etc. on product collection page */ .your-selections { display: none; padding-bottom: .5rem; border-bottom: 1px dotted #cccccc; margin-bottom: .5rem; } .your-selections span[data-icon] { color: #b3b3b3; padding-left: .25rem; } .your-selections a:hover span[data-icon], .your-selections a:active span[data-icon], .your-selections:focus span[data-icon] { text-decoration: none; } .your-selection li:first-of-type span[data-icon] { color: inherit; } .sort-pagination { margin-bottom: 1rem; } .sort-pagination h4, .your-selections h4 { color: #666666; float: left; margin: 0 0.5rem 0 0; } .sort-pagination ul, .your-selections ul { font-size: .75rem; line-height: 1.8; color: #cccccc; list-style-type: none; padding: 0; margin: 0; } .your-selections li, .sort-pagination li { display: inline-block; float: left; padding-bottom: .25rem; margin-right: 1rem; margin-bottom: .25rem; } .your-selections li:first-of-type a { font-weight: bold; } .sort-pagination li { margin-right: .1rem; } .sort-pagination a:link, .sort-pagination a:visited, .pagination li span { padding: 0.25rem 0.5rem; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .sort-pagination a:hover, .sort-pagination a:active, .sort-pagination a:focus { background-color: #f2f2f2; } .pagination { float: right; } .jp-disabled:link, .jp-disabled:visited, .jp-disabled:hover, .jp-disabled:active, .jp-disabled:focus { color: #b3b3b3 !important; cursor: default !important; text-decoration: none; } .date-badge { min-width: 7.5rem; } .news-entry p:last-child, .event-entry p:last-child { margin-bottom: 2rem; } .slideshow-pager { display: block; text-align: center; width: 100%; height: 30px; position: absolute; z-index: 300; bottom: -1.5rem; } .slideshow-pager a:link, .slideshow-pager a:visited { font-weight: normal; font-size: 0.6875rem; line-height: 1; text-align: center; text-decoration: none; color: #999 !important; display: inline-block; width: 1rem; height: 1rem; background-color: gray; margin: 0 0.65rem; opacity: .65; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .slideshow-pager a:hover, .slideshow-pager a:active, .slideshow-pager a:focus { opacity: 1; background-color: #cccccc; color: #cccccc !important; } .slideshow-pager a.activeSlide:link, .slideshow-pager a.activeSlide:visited, .slideshow-pager a.activeSlide:hover, .slideshow-pager a.activeSlide:active, .slideshow-pager a.activeSlide:focus { opacity: 1; background-color: #d2db0e; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } .js .slideshow-directional { opacity: 0; } .slideshow-directional { font-size: 1.5rem; font-weight: normal; line-height: 2.5; text-align: center; color: white !important; text-decoration: none; display: block; width: 0; height: 3rem; padding: .25rem; background-color: #333333; position: absolute; z-index: 98; top: 16%; opacity: .75; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } .slideshow-directional:hover, .slideshow-directional:focus { color: white !important; text-decoration: none; opacity: 0.9 !important; } .slideshow-outer-wrap:hover .slideshow-directional { opacity: .75; width: 1.5em; } .product-count { margin: 1.25em 0 1.5em 4%; max-width: 64rem; } .product-count h2 { font-size: .875rem; } .product-grid, .card-grid { list-style-type: none; display: block; clear: both; padding: 0; margin: 2rem 0 0 0; } .product-grid.is-flush { margin-right: -3%; margin-left: -3%; } .product-grid:after, .card-grid-:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .product-grid li, .card-grid li { display: inline-block; width: 30%; vertical-align: top; padding-bottom: 1em; margin: 0 1.5% 2% 1.5%; *display: inline; *zoom: 1; } .product-grid li > a, .card-grid li > a { display: block; color: #333333 !important; } .product-grid li > a:after, .card-grid li > a:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .product-list-container h4 { padding: 0.3em 0.6em; } .product-list { list-style: none; padding: 0; } .product-list li { clear: both; border-top: 1px solid #cccccc; padding: 1.3em 0; margin: 0; } .product-list li:first-child { border-top: none; padding-top: 0; } .product-list li dl { padding-top: 0; margin-top: 0; } .product-list .cover { float: left; margin: 0 1.2rem 0 0.5rem; position: relative; } .product-grid li { width: auto; padding: 0 1.5% 1rem 1.5%; margin: 0 1.5% 2% 1.5%; vertical-align: top; } .product-grid li .cover { display: block; } .product-grid dl { font-size: 0.875rem; line-height: 1.4; display: inline-block; max-width: 7.5625rem; margin: 0; padding: 0; } .product-grid dt { display: inline-block; position: relative; padding: 0; max-width: 7.5625rem; margin-bottom: .75rem; } .product-grid dd { padding: 0; margin-right: 0; margin-left: 0; margin-bottom: .25rem; } .iconstack { display: inline-block; padding: 0.5rem 0.25rem; background-color: white; background: white; } .iconstack img { display: block; height: 1rem; margin-bottom: .5rem; opacity: .65; } .iconstack img:last-of-type { margin-bottom: 0; } .product-grid .iconstack { position: absolute; z-index: 10; bottom: .5rem; left: -8%; } .iconstack.no-stack img { display: inline-block; float: left; margin: 0 0.125rem; } .features-legend dd { padding-left: 1.875rem; } .overlay { display: block; width: 100%; height: 100%; text-align: center; position: absolute; top: 0; left: 0; z-index: 100; opacity: 0; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .overlay span { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: white !important; display: block; padding: 0 8%; margin: .25rem auto 0 auto; } .overlay i { font-size: 4rem; color: #d9d9d9; display: block; margin: .5rem auto 0 auto; } .is-grid { display: block; padding: 0; margin: 0 -1.5%; } .is-grid li { display: inline-block; list-style-type: none; vertical-align: top; padding: 0 0 1rem 0; margin: 0 1.5% 2% 1.5%; } .links-use-transition a, .links-use-transition a span[data-icon], .uses-transition, .uses-transition span[data-icon] { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .color-block { display: block; position: relative; padding: 0.25rem 0.5rem; background: #f2f2f2; color: #505759; } .color-block-with-transparency { background: none; } .color-block:hover, .color-block:active, .color-block:focus { background: #d9d9d9; background: #d9d9d9; } .color-block-with-transparency:hover, .color-block-with-transparency:active, .color-block-with-transparency:focus { background: #f2f2f2; background: #f2f2f2; } .color-block.is-current-node { background: none; cursor: default; } .is-round { text-align: center; width: 9.625rem; height: 9.625rem; padding: 1rem; border-radius: 50%; } .is-round span[data-icon] { font-size: 2.5rem; display: block; margin: 0 0 0.125rem 0; } .is-round h3 { font-size: 1rem; line-height: 1.2; } .no-decoration a:link, .no-decoration a:visited, .no-decoration a:hover, .no-decoration a:active, .no-decoration a:focus, .no-decoration:link, .no-decoration:visited, .no-decoration:hover, .no-decoration:active, .no-decoration:focus { text-decoration: none; } .match-option-heights .color-block { min-height: 17.5rem; } .icon-sprite { width: 5rem; height: 5rem; display: block; overflow: hidden; margin: 0 auto 1rem auto; } .icon-sprite-small { width: 50px; height: 50px; margin-bottom: 8px; } .icon-sprite img { position: relative; top: -5rem; display: block; } .icon-sprite-small img { top: -50px; } .color-block:hover .icon-sprite img { top: 0; } /* list with icons */ .list-with-icons li.has-no-link { padding: 1rem; } .list-with-icons span[data-icon] { font-size: 2.25rem; float: left; } .list-with-icons p { padding-top: .75rem; padding-bottom: .75rem; padding-left: 3.5rem; margin: 0; line-height: 1.4; } #tab-to-top { text-align: center; position: fixed; z-index: 999; bottom: 5%; right: 5%; width: 3.5rem; height: 3.5rem; display: none; border-radius: 50%; } #tab-to-top a { text-decoration: none; font-size: 0.875rem; font-weight: 600; color: #003057 !important; line-height: 4.15; display: block; width: 3.5rem; height: 3.5rem; } #tab-to-top a:visited, #tab-to-top a:hover, #tab-to-top a:active, #tab-to-top a:focus { text-decoration: none; } /* don't show when inside