/* --------------------------------------------------------------------- Print Styles ------------------------------------------------------------------------ */ .isVisuallyHidden { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; } @keyframes infinite-spinning { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .isHidden { display: none; } @media screen and (min-width: 320px) { .isHiddenSM { display: none; } } @media screen and (min-width: 768px) { .isHiddenSM { display: block; } .isHiddenMD { display: none; } } @media screen and (min-width: 1025px) { .isHiddenMD { display: block; } } /* --------------------------------------------------------------------- RESET CSS (thanks Eric Meyer) ------------------------------------------------------------------------ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html { overflow-y: scroll; /* Always show a vertical scrollbar, even when there is no scrolling */ } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* --------------------------------------------------------------------- HTML5 Element Reset ------------------------------------------------------------------------ */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } audio, canvas, video, progress, picture { display: inline-block; } template { display: none; } /* --------------------------------------------------------------------- Form Reset Styles ------------------------------------------------------------------------ */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } input[type="search"] { -webkit-appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } ::-moz-focus-inner { border: 0; padding: 0; } @font-face { font-family: "montserrat"; src: url("/assets/media/fonts/montserrat-regular-webfont.eot"); src: url("/assets/media/fonts/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/media/fonts/montserrat-regular-webfont.woff2") format("woff2"), url("/assets/media/fonts/montserrat-regular-webfont.woff") format("woff"), url("/assets/media/fonts/montserrat-regular-webfont.ttf") format("truetype"), url("/assets/media/fonts/montserrat-regular-webfont.svg#montserratregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "montserrat"; src: url("/assets/media/fonts/montserrat-bold-webfont.eot"); src: url("/assets/media/fonts/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/media/fonts/montserrat-bold-webfont.woff2") format("woff2"), url("/assets/media/fonts/montserrat-bold-webfont.woff") format("woff"), url("/assets/media/fonts/montserrat-bold-webfont.ttf") format("truetype"), url("/assets/media/fonts/montserrat-bold-webfont.svg#montserratbold") format("svg"); font-weight: bold; font-style: normal; } @font-face { font-family: "open_sans"; src: url("/assets/media/fonts/opensans-regular-webfont.eot"); src: url("/assets/media/fonts/opensans-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/media/fonts/opensans-regular-webfont.woff2") format("woff2"), url("/assets/media/fonts/opensans-regular-webfont.woff") format("woff"), url("/assets/media/fonts/opensans-regular-webfont.ttf") format("truetype"), url("/assets/media/fonts/opensans-regular-webfont.svg#opensansregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "open_sans"; src: url("/assets/media/fonts/opensans-bold-webfont.eot"); src: url("/assets/media/fonts/opensans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/media/fonts/opensans-bold-webfont.woff2") format("woff2"), url("/assets/media/fonts/opensans-bold-webfont.woff") format("woff"), url("/assets/media/fonts/opensans-bold-webfont.ttf") format("truetype"), url("/assets/media/fonts/opensans-bold-webfont.svg#opensansbold") format("svg"); font-weight: bold; font-style: normal; } @font-face { font-family: "oswald"; src: url("/assets/media/fonts/oswald-regular-webfont.eot"); src: url("/assets/media/fonts/oswald-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/media/fonts/oswald-regular-webfont.woff2") format("woff2"), url("/assets/media/fonts/oswald-regular-webfont.woff") format("woff"), url("/assets/media/fonts/oswald-regular-webfont.ttf") format("truetype"), url("/assets/media/fonts/oswald-regular-webfont.svg#oswaldregular") format("svg"); font-weight: normal; font-style: normal; } body { position: relative; left: 0; transition: left 300ms ease-in-out; font-family: "open_sans", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; line-height: 1.5; color: #323232; } img { max-width: 100%; } a { color: #3d91bd; text-decoration: underline; font-weight: bold; } a:hover { cursor: pointer; text-decoration: underline; color: #00a0cc; } a.two { color: #00a0cc; text-decoration: underline; font-weight: bold; } a.two:hover { cursor: pointer; text-decoration: underline; color: #3d91bd; } hr { margin: 30px 0; height: 1px; border: none; background: #dadada; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } #main:focus, header:focus { outline: 0; } ::-webkit-input-placeholder { color: #323232; } :-moz-placeholder { /* Firefox 18- */ color: #323232; } ::-moz-placeholder { /* Firefox 19+ */ color: #323232; } :-ms-input-placeholder { color: #323232; } .defaultFontSize { font-size: 12px; line-height: 12px; } /*doc --- title: Wrapper name: wrapper category: Layout --- Global wrapper to constrain width at largest breakpoint Class | Description --------------------------- | ---------------------------------------------------- `.wrapper` | Base class ```html_example
``` */ .wrapper { margin: 0 auto; max-width: 1025px; position: relative; } /*doc --- title: Container name: container category: Layout --- Global container to constrain generic elements. Class | Description --------------------------- | ---------------------------------------------------- `.container` | Base class ```html_example
``` */ .container { width: 100%; box-sizing: border-box; } .mix-container_dark { background-color: #5c6a6f; } .mix-container_smoke { background-color: #f7f7f7; } /*doc --- title: Grid name: grid category: Layout --- The Grid object is a layout object that organizes content into columns. Any combination of column widths may be used as long as they add up to 12. This grid is percentage-based, so the content within it will automatically flex at different window/device widths. The Grid object may have up to 12 children; they all require a class of `.grid-col`. The Grid object has a single level of applicable depth. Each child of `.grid` must have the `.grid-col` class, optionally combined with a `.grid-col_` extension to define the column width. The `.grid` and `.grid-col` elements should not contain any other CSS object classes; they are strictly intended to create horizontal layout for other objects to be placed within. Class | Description -------------------------------- | --------------------------------------------------------------- `.grid` | base object `.grid-col` | required child object ## Breakpoint-specific Modifiers The grid column layout may be modified at each breakpoint, allowing adjustments in page/template layout. Add one of the following mixin classes for as many breakpoints as a change in necessary. Mixins of a particular breakpoint should still add up to 12 columns per grid row. .grid-col left, width, and margin properties are reset at every breakpoint to quarantine breakpoint specific styles at target sizes ## Push and Pull Extensions Push and pull modify the 'left' property, where push adds distance from the left and pull subracts distance from the left. Each push and pull extension correlates to a grid column with, and moves the column by the same amount of space equal to (column with + gutter spacing) in either direction. The most common use case for these extensions are when you have a stacked layout on mobile, where column A is on top of column B, that changes into floats at the next breakpoint where column A is to the right of column B. It allows you to visually change the order of the layout without actually changing the order of the markup. ### Small Breakpoint Widths Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_1of12SM` | Mixin class: 1 column wide at the small breakpoint `.mix-grid-col_2of12SM` | Mixin class: 2 columns wide at the small breakpoint `.mix-grid-col_3of12SM` | Mixin class: 3 columns wide at the small breakpoint `.mix-grid-col_4of12SM` | Mixin class: 4 columns wide at the small breakpoint `.mix-grid-col_5of12SM` | Mixin class: 5 columns wide at the small breakpoint `.mix-grid-col_6of12SM` | Mixin class: 6 columns wide at the small breakpoint `.mix-grid-col_7of12SM` | Mixin class: 7 columns wide at the small breakpoint `.mix-grid-col_8of12SM` | Mixin class: 8 columns wide at the small breakpoint `.mix-grid-col_9of12SM` | Mixin class: 9 columns wide at the small breakpoint `.mix-grid-col_10of12SM` | Mixin class: 10 columns wide at the small breakpoint `.mix-grid-col_11of12SM` | Mixin class: 11 columns wide at the small breakpoint `.mix-grid-col_12of12SM` | Mixin class: 12 columns wide at the small breakpoint ### Small Breakpoint Push Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_push1of12SM` | Mixin class: push 1 column at the small breakpoint `.mix-grid-col_push2of12SM` | Mixin class: push 2 columns at the small breakpoint `.mix-grid-col_push3of12SM` | Mixin class: push 3 columns at the small breakpoint `.mix-grid-col_push4of12SM` | Mixin class: push 4 columns at the small breakpoint `.mix-grid-col_push5of12SM` | Mixin class: push 5 columns at the small breakpoint `.mix-grid-col_push6of12SM` | Mixin class: push 6 columns at the small breakpoint `.mix-grid-col_push7of12SM` | Mixin class: push 7 columns at the small breakpoint `.mix-grid-col_push8of12SM` | Mixin class: push 8 columns at the small breakpoint `.mix-grid-col_push9of12SM` | Mixin class: push 9 columns at the small breakpoint `.mix-grid-col_push10of12SM` | Mixin class: push 10 columns at the small breakpoint `.mix-grid-col_push11of12SM` | Mixin class: push 11 columns at the small breakpoint `.mix-grid-col_push12of12SM` | Mixin class: push 12 columns at the small breakpoint ### Small Breakpoint Pull Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_pull1of12SM` | Mixin class: pull 1 column at the small breakpoint `.mix-grid-col_pull2of12SM` | Mixin class: pull 2 columns at the small breakpoint `.mix-grid-col_pull3of12SM` | Mixin class: pull 3 columns at the small breakpoint `.mix-grid-col_pull4of12SM` | Mixin class: pull 4 columns at the small breakpoint `.mix-grid-col_pull5of12SM` | Mixin class: pull 5 columns at the small breakpoint `.mix-grid-col_pull6of12SM` | Mixin class: pull 6 columns at the small breakpoint `.mix-grid-col_pull7of12SM` | Mixin class: pull 7 columns at the small breakpoint `.mix-grid-col_pull8of12SM` | Mixin class: pull 8 columns at the small breakpoint `.mix-grid-col_pull9of12SM` | Mixin class: pull 9 columns at the small breakpoint `.mix-grid-col_pull10of12SM` | Mixin class: pull 10 columns at the small breakpoint `.mix-grid-col_pull11of12SM` | Mixin class: pull 11 columns at the small breakpoint `.mix-grid-col_pull12of12SM` | Mixin class: pull 12 columns at the small breakpoint ### Medium Breakpoint Widths Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_1of12MD` | Mixin class: 1 column wide at the medium breakpoint `.mix-grid-col_2of12MD` | Mixin class: 2 columns wide at the medium breakpoint `.mix-grid-col_3of12MD` | Mixin class: 3 columns wide at the medium breakpoint `.mix-grid-col_4of12MD` | Mixin class: 4 columns wide at the medium breakpoint `.mix-grid-col_5of12MD` | Mixin class: 5 columns wide at the medium breakpoint `.mix-grid-col_6of12MD` | Mixin class: 6 columns wide at the medium breakpoint `.mix-grid-col_7of12MD` | Mixin class: 7 columns wide at the medium breakpoint `.mix-grid-col_8of12MD` | Mixin class: 8 columns wide at the medium breakpoint `.mix-grid-col_9of12MD` | Mixin class: 9 columns wide at the medium breakpoint `.mix-grid-col_10of12MD` | Mixin class: 10 columns wide at the medium breakpoint `.mix-grid-col_11of12MD` | Mixin class: 11 columns wide at the medium breakpoint `.mix-grid-col_12of12MD` | Mixin class: 12 columns wide at the medium breakpoint ### Medium Breakpoint Push Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_push1of12MD` | Mixin class: push 1 column at the medium breakpoint `.mix-grid-col_push2of12MD` | Mixin class: push 2 columns at the medium breakpoint `.mix-grid-col_push3of12MD` | Mixin class: push 3 columns at the medium breakpoint `.mix-grid-col_push4of12MD` | Mixin class: push 4 columns at the medium breakpoint `.mix-grid-col_push5of12MD` | Mixin class: push 5 columns at the medium breakpoint `.mix-grid-col_push6of12MD` | Mixin class: push 6 columns at the medium breakpoint `.mix-grid-col_push7of12MD` | Mixin class: push 7 columns at the medium breakpoint `.mix-grid-col_push8of12MD` | Mixin class: push 8 columns at the medium breakpoint `.mix-grid-col_push9of12MD` | Mixin class: push 9 columns at the medium breakpoint `.mix-grid-col_push10of12MD` | Mixin class: push 10 columns at the medium breakpoint `.mix-grid-col_push11of12MD` | Mixin class: push 11 columns at the medium breakpoint `.mix-grid-col_push12of12MD` | Mixin class: push 12 columns at the medium breakpoint ### Medium Breakpoint Pull Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_pull1of12MD` | Mixin class: pull 1 column at the medium breakpoint `.mix-grid-col_pull2of12MD` | Mixin class: pull 2 columns at the medium breakpoint `.mix-grid-col_pull3of12MD` | Mixin class: pull 3 columns at the medium breakpoint `.mix-grid-col_pull4of12MD` | Mixin class: pull 4 columns at the medium breakpoint `.mix-grid-col_pull5of12MD` | Mixin class: pull 5 columns at the medium breakpoint `.mix-grid-col_pull6of12MD` | Mixin class: pull 6 columns at the medium breakpoint `.mix-grid-col_pull7of12MD` | Mixin class: pull 7 columns at the medium breakpoint `.mix-grid-col_pull8of12MD` | Mixin class: pull 8 columns at the medium breakpoint `.mix-grid-col_pull9of12MD` | Mixin class: pull 9 columns at the medium breakpoint `.mix-grid-col_pull10of12MD` | Mixin class: pull 10 columns at the medium breakpoint `.mix-grid-col_pull11of12MD` | Mixin class: pull 11 columns at the medium breakpoint `.mix-grid-col_pull12of12MD` | Mixin class: pull 12 columns at the medium breakpoint ### Large Breakpoint Widths Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_1of12LG` | Mixin class: 1 column wide at the large breakpoint `.mix-grid-col_2of12LG` | Mixin class: 2 columns wide at the large breakpoint `.mix-grid-col_3of12LG` | Mixin class: 3 columns wide at the large breakpoint `.mix-grid-col_4of12LG` | Mixin class: 4 columns wide at the large breakpoint `.mix-grid-col_5of12LG` | Mixin class: 5 columns wide at the large breakpoint `.mix-grid-col_6of12LG` | Mixin class: 6 columns wide at the large breakpoint `.mix-grid-col_7of12LG` | Mixin class: 7 columns wide at the large breakpoint `.mix-grid-col_8of12LG` | Mixin class: 8 columns wide at the large breakpoint `.mix-grid-col_9of12LG` | Mixin class: 9 columns wide at the large breakpoint `.mix-grid-col_10of12LG` | Mixin class: 10 columns wide at the large breakpoint `.mix-grid-col_11of12LG` | Mixin class: 11 columns wide at the large breakpoint `.mix-grid-col_12of12LG` | Mixin class: 12 columns wide at the large breakpoint ### Large Breakpoint Push Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_push1of12LG` | Mixin class: push 1 column at the large breakpoint `.mix-grid-col_push2of12LG` | Mixin class: push 2 columns at the large breakpoint `.mix-grid-col_push3of12LG` | Mixin class: push 3 columns at the large breakpoint `.mix-grid-col_push4of12LG` | Mixin class: push 4 columns at the large breakpoint `.mix-grid-col_push5of12LG` | Mixin class: push 5 columns at the large breakpoint `.mix-grid-col_push6of12LG` | Mixin class: push 6 columns at the large breakpoint `.mix-grid-col_push7of12LG` | Mixin class: push 7 columns at the large breakpoint `.mix-grid-col_push8of12LG` | Mixin class: push 8 columns at the large breakpoint `.mix-grid-col_push9of12LG` | Mixin class: push 9 columns at the large breakpoint `.mix-grid-col_push10of12LG` | Mixin class: push 10 columns at the large breakpoint `.mix-grid-col_push11of12LG` | Mixin class: push 11 columns at the large breakpoint `.mix-grid-col_push12of12LG` | Mixin class: push 12 columns at the large breakpoint ### Large Breakpoint Pull Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_pull1of12LG` | Mixin class: pull 1 column at the large breakpoint `.mix-grid-col_pull2of12LG` | Mixin class: pull 2 columns at the large breakpoint `.mix-grid-col_pull3of12LG` | Mixin class: pull 3 columns at the large breakpoint `.mix-grid-col_pull4of12LG` | Mixin class: pull 4 columns at the large breakpoint `.mix-grid-col_pull5of12LG` | Mixin class: pull 5 columns at the large breakpoint `.mix-grid-col_pull6of12LG` | Mixin class: pull 6 columns at the large breakpoint `.mix-grid-col_pull7of12LG` | Mixin class: pull 7 columns at the large breakpoint `.mix-grid-col_pull8of12LG` | Mixin class: pull 8 columns at the large breakpoint `.mix-grid-col_pull9of12LG` | Mixin class: pull 9 columns at the large breakpoint `.mix-grid-col_pull10of12LG` | Mixin class: pull 10 columns at the large breakpoint `.mix-grid-col_pull11of12LG` | Mixin class: pull 11 columns at the large breakpoint `.mix-grid-col_pull12of12LG` | Mixin class: pull 12 columns at the large breakpoint ```html_example
A
B

A
B
``` ### Horizontal Text Alignment Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_alignRight` | Aligns content of this column to the right `.mix-grid-col_centerContent` | Centers content of this column to the right ```html_example
A
B
``` ### Spacing Mixins Class | Description -------------------------------- | --------------------------------------------------------------- `.mix-grid-col_spacedSM` | Gives grid columns more horizontal space at the small breakpoint `.mix-grid-col_reverseMD` | Floats grid columns right at the medium breakpoint `.mix-grid-col_verticalPushMD` | Gives grid columns more vertical space at the medium breakpoint `.mix-grid-col_reverseLG` | Floats grid columns right at the large breakpoint ```html_example
A
B

A
B

A
B

A
B
``` */ .grid { margin-left: 0; } .grid:before, .grid:after { content: " "; display: table; } .grid:after { clear: both; } .grid-col { float: left; width: 100%; margin-left: 0; box-sizing: border-box; position: relative; } .mix-grid-col_alignRight { text-align: right; } .mix-grid-col_centerContent { text-align: center; } /*doc --- title: Vertical Rhythm name: vr category: Layout --- Vertical Rhythm is an abstract intra modular object used to add a vertical space between objects. A good vertical rhythm object uses single-direction spacing declarations, e.g. margin-bottom. Keeping all spacing in the same direction provides predictability; by adding, moving or removing an element the vertical rhythm of the page will remain consistent. Use this object to provide vertical spacing between major sections of the page. Do not use this object to create space within objects, that's a function of container objects. Class | Description --------------------------- | ---------------------------------------------------- `.vr` | Base class. `.vr_2n` | Extension class, providing 2n the spacing `.vr_3n` | Extension class, providing 3n the spacing `.vr_4n` | Extension class, providing 4n the spacing `.vr_5n` | Extension class, providing 5n the spacing `.vr_6n` | Extension class, providing 6n the spacing `.vr_7n` | Extension class, providing 6n the spacing ```html_example
this has been added
``` */ .vr { margin-bottom: 0.9em; } .vr_2n { margin-bottom: 1.8em; } .vr_3n { margin-bottom: 2.7em; } .vr_4n { margin-bottom: 3.6em; } .vr_5n { margin-bottom: 4.5em; } .vr_6n { margin-bottom: 5.4em; } .vr_7n { margin-bottom: 6.3em; } /*doc --- title: Blocks name: blocks category: Layout --- The `blocks` object provides a wrappable row-style layout for elements. Any number of children may be present, forming rows as they stack on the page. The number of objects in each row may change across breakpoints using the mixin classes. This object uses the inline-block layout construct to allow for the formation of natural rows without necessitating a clearfix. Individual blocks may vary in height, each new row will start below all children of the previous row. Because of this layout construct, the font-size is reset to the default size within each block. **Note** Blocks are "reset" at each breakpoint, meaning the margin/width calculations of a mixin class will only apply at it's intended breakpoint. After another breakpoint is crossed, the block layout will maintain the measurements of the previous breakpoint if no additional breakpoint class is defined. make sure to define how this object should behave at **each** breakpiont. ## Default object structure Class | Description --------------------------- | ---------------------------------------------------- `.blocks` | Base class `.blocks_2up` | extension class used to generate two blocks per row `.blocks_3up` | extension class used to generate three blocks per row ## "Medium" breakpoint-specific mixins Class | Description --------------------------- | ---------------------------------------------------- `.mix-blocks_2upMD` | mixin class converting the layout to 2 items per row `.mix-blocks_3upMD` | mixin class converting the layout to 3 items per row `.mix-blocks_4upMD` | mixin class converting the layout to 4 items per row ## "Large" breakpoint-specific mixins Class | Description --------------------------- | ---------------------------------------------------- `.mix-blocks_2upLG` | mixin class converting the layout to 2 items per row `.mix-blocks_3upLG` | mixin class converting the layout to 3 items per row `.mix-blocks_4upLG` | mixin class converting the layout to 4 items per row ## utility mixins Class | Description --------------------------- | ---------------------------------------------------- `.mix-blocks_equal` | mixin class making all contents of children equal height `.mix-blocks-item_unequal` | mixin class designed to override one element if '.mix-blocks_equal' is used and allow it to be its natural width This example shows how the `blocks` object changes layout across breakpoints. ```html_example ``` This example demonstrates how blocks "reset" at different breakpoints. Notice the width of the blocks is incorrect at the medium breakpoint. ```html_example ``` This example shows how items can be the same size using the '.mix-blocks_equal' mixin, as well as demonstrates how to override it on a specific item using '.mix-blocks-item_unequal"' ```html_example ``` */ .blocks { font-size: 0; margin-left: -3.8961038961%; } .blocks > * { display: inline-block; vertical-align: top; width: 96.25%; margin-left: 3.75%; margin-bottom: 3.75%; font-size: 16px; } .blocks_2up > * { width: 46.25%; } .blocks_3up > * { width: 29.5833333333%; } .blocks_4up > * { width: 21.25%; } .mix-blocks_equal { display: flex; flex-wrap: wrap; } .mix-blocks_equal > * { display: flex; margin-bottom: 0; } .mix-blocks_equal > * > * { width: 100%; /* Fix a FF bug which causes children of flexed items to ignore their containers widths */ box-sizing: border-box; /* Fix a FF bug which causes children of flexed items to ignore their containers widths */ margin-bottom: 12px; } .mix-blocks-item_unequal { display: inline-block; } .mix-blocks_tableCells > li { display: inline-table; /* Fix for IE */ } .mix-blocks_tableCells > li > a { display: table-cell; } /*doc --- title: Horizontal List name: hList category: Layout --- Horizontal Lists are a common layout construct. Items of a list float next to each other and the base class clears the floats. Class | Description --------------------------- | ---------------------------------------------------- `.hList` | Base class. `.hList_inline` | Extension class. Creates a list of inline block elements instead of using floats `.mix-hList_inline` | Unlike the '.hList_inline' extension, this mixin makes the entire list and inline element, instead of the children of the list `.hList_inline_ctr` | Centers the children of an inline hList. `.hList_2n` | Extension class. Increase the spacing between items `.hList_3n` | Extension class. Increase the spacing between items `.hList_4n` | Extension class. Increase the spacing between items `.hList_flush` | Extension class. Remove the spacing between items `.hList_divided` | Extension class. Add a border divider between the items `.hList_pipedWide` | Extension class. Add a wide border divider between the items `.mix-hList_base` | Mixin class. Change the divided or pipedWide border color. `.mix-hList_medium` | Mixin class. Change the divided or pipedWide border color. `.mix-hList_stackMobile` | Use when you want the list to be a vertical list on mobile and horizontal everywhere else. ## Default examples: ```html_example ``` ## Divided examples: ```html_example ``` ## Border color change examples: ```html_example ``` ## Stack mobile example: ```html_example ``` ## Inline examples: ```html_example ``` */ .hList:before, .hList:after { content: " "; display: table; } .hList:after { clear: both; } .hList > * { float: left; } .hList > * + * { margin-left: 5px; } .hList_2n > * + * { margin-left: 10px; } .hList_3n > * + * { margin-left: 15px; } .hList_4n > * + * { margin-left: 20px; } .hList_divided > * + * { margin-left: 5px; padding-left: 5px; } .hList_pipedWide > * + * { margin-left: 10px; padding-left: 10px; } .hList_flush > * { margin: 0; } .mix-hList_stackMobile > * { float: none; } .mix-hList_stackMobile > * + * { margin: 10px 0 0; } .hList_inline > * { display: inline-block; vertical-align: middle; float: none; line-height: 0; } .hList_inline_ctr { text-align: center; } .mix-hList_inline { display: inline-block; } /*doc --- title: Buffer name: buffer category: Layout --- Buffers the content from the side of the viewport. Class | Description --------------------------- | ---------------------------------------------------- `.buffer` | Base class. ## Extensions and Mixins Class | Description --------------------------- | ---------------------------------------------------- `.mix-buffer_kill` | Removes default buffer spacing at the small breakpoint `.mix-buffer_onlySM` | Applies the default buffer spacing only at the small breakpoint `.mix-buffer_onlyMD` | Applies the default buffer spacing only at the medium breakpoint `.mix-buffer_thickMD' | Makes a buffer that applies extra spacing at the medium breakpoint `.mix-buffer_LG` | Applies the default buffer spacing only at the large breakpoint `.mix-buffer_thickLG` | Makes a buffer that applies extra spacing at the large breakpoint ```html_example
default buffer
buffer with '.mix-buffer_kill' applied
buffer with '.mix-buffer_onlySM' applied
buffer with '.mix-buffer_onlyMD' applied
buffer with '.mix-buffer_thickMD' applied
buffer with '.mix-buffer_LG' applied
buffer with '.mix-buffer_thickLG' applied
``` */ .buffer { padding: 0 10px; } .mix-buffer_kill { padding: 0; } .mix-buffer_onlySM { padding: 0 10px; } /*doc --- title: Media name: media category: Layout --- The media object is a piece of media on the left with descriptive content to the right. Review the origination of this object on (Nicole Sullivan's blog)[http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/]. This object is unique in the fact that it allows for any size media combined with any length of content while maintaining it's layout construct. The `.media-md` child may contain any type of media (image, video, icon, etc.). The width of this child is determined by the intrinsic width of the media. The `.media-bd` child will consume any remaining space to the right of the media. This child established a new (block formatting context)[http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/] allowing the content of this child to maintain a hard line as it passes the vertical space consumed by the `.media-md` child. Class | Description --------------------------- | ---------------------------------------------------- `.media` | Base class. `.media_inverse` | Extension to show the media element to the right of the body content instead of the left `.media_spaced` | Adds a vertical gutter between media element and body content when stacked and horizontal gutter when floated side-by-side `.media-md` | Actual media element, such as an image or icon `.media-md_persistent` | Starts floating the media element at small breakpoint `.mix-media-md_ctr` | Centers the media element `.mix-media_floated` | Causes media elements to stack on mobile and be L/R on tablet and desktop `.media-bd` | Content to accompany the media element ## Default example: ```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus!
``` ## Persistent example: ```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus!
``` ## Floated example: ```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus!
``` ## Inverse example: ```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus!
``` ## Spaced example: ```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus!
``` ## Center example: ```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus suscipit unde, in odio sit quidem corporis voluptatem maxime, dignissimos fugit, nihil ut magnam sed laudantium, earum dolore numquam doloremque natus!
``` */ .media:before, .media:after { content: " "; display: table; } .media:after { clear: both; } .media-md { float: none; } .media-md_persistent { float: left; } .media-md > img { display: block; } .media-bd { overflow: hidden; } /* Additional media object layout options */ .media_inverse > .media-md { float: right; } .media_spaced > .media-md { margin-right: 10px; } .media_spaced.media_inverse > .media-md { margin-left: 10px; margin-right: 0; } .mix-media-md_ctr > * { margin: 0 auto; } .articleSection { display: flex; } .articleSection:before, .articleSection:after { content: " "; display: table; } .articleSection:after { clear: both; } .articleSection-md > img { display: block; } .articleSection-bd { overflow: hidden; } .articleSection_inverse > .articleSection-md { order: 1; } .articleSection-md-caption { font-size: 10px; margin: 10px 0px; padding-left: 10px; } .articleSection_full { display: block; } .articleSection_full > .articleSection-md, .articleSection_full > .articleSection-bd { width: 100%; max-width: 100%; padding: 0; } /*doc --- title: Breadcrumbs name: breadcrumbs category: Container --- A `breadcrumbs` is a generic container to show a trail of navigation to aid users. Seperators are automatically added via CSS with `:after`. Class | Description ------------------------------- | ---------------------------------------------------- `.breadcrumbs` | Base class ```html_example
  1. Home
  2. Example
  3. Page
``` */ .breadcrumbs { overflow: hidden; margin: 20px 0; } .breadcrumbs > * { float: left; position: relative; } .breadcrumbs > *, .breadcrumbs > *:after { font-size: 14px; } .breadcrumbs > *:after { content: "|"; display: inline-block; } .breadcrumbs > *:last-child:after { content: none; } .breadcrumbs > * + *, .breadcrumbs > *:after { margin-left: 10px; } .breadcrumbs > *:first-child { margin-left: 16px; } .breadcrumbs > *:first-child:before { content: ' '; display: block; width: 12px; height: 12px; position: absolute; left: -16px; top: 5px; background: url(/assets/media/images/arrow-left_green.svg) no-repeat; background-size: 100% 100%; } /*doc --- title: FindAndCompare name: findAndCompare category: container --- Class | Description --------------------------- | ---------------------------------------------------- `.findAndCompare` | Base class ```html_example ``` */ .findAndCompare-bd:before, .findAndCompare-bd:after { content: " "; display: table; } .findAndCompare-bd:after { clear: both; } .findAndCompare_embedded { max-width: 575px; margin: 0px auto; } /*doc --- title: Link Columns name: linkColumns category: container --- Class | Description --------------------------------------- | ------------------------------------------------- `.linkColumns` | Base class. CLears floats */ .linkColumns { width: 100%; font-size: 0; margin-bottom: 20px; } .linkColumns-col a { margin-bottom: 15px; } .linkColumnList { margin-bottom: 10px; } .linkColumnList > * { margin: 0 0px 10px; } .linkColumnList > *:last-child { margin-bottom: 0; } /*doc --- title: newsListing name: newsListing category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.newsListing` | Base class. ```html_example ``` */ .newsListing { width: 100%; font-size: 0; } .newsListing-browseMore { font-size: 16px; } .newsListing-browseMore:before, .newsListing-browseMore:after { content: " "; display: table; } .newsListing-browseMore:after { clear: both; } .newsListing-browseMore > a { float: right; } .newsListing_alt li { margin-bottom: 24px; } .newsListing_alt a { text-decoration: none; color: #5c6a6f; } .newsListing_alt a:hover { text-decoration: underline; } .newsListing_alt a > *:first-child { font-size: 16px; font-weight: normal; } .newsListing_alt a > *:last-child { font-size: 22px; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; } /*doc --- title: staffListing name: staffListing category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.staffListing` | Base class. ```html_example ``` */ .staffListing { width: 100%; } /*doc --- title: dataTable name: dataTable category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.dataTable` | Base class. ```html_example ``` */ .dataTable { width: 100%; } /*doc --- title: outcomeRating name: outcomeRating category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.outcomeRating` | Base class. ```html_example ``` */ .outcomeRating { width: 240px; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; } .outcomeRating-display { padding: 5px; width: 100%; height: 45px; background: #E1E1E1; box-sizing: border-box; position: relative; text-align: left; } .outcomeRating-bar { width: 100%; height: 100%; } .outcomeRating_better .outcomeRating-bar { background-color: #161F63; } .outcomeRating_somewhat .outcomeRating-bar { background-color: #434776; } .outcomeRating_good .outcomeRating-bar { background-color: #6C6F97; } .outcomeRating_worse .outcomeRating-bar { background-color: #9698BC; } .outcomeRating_worst .outcomeRating-bar { background-color: #C3C4E3; } .outcomeRating-rating { color: #ffffff; line-height: 35px; padding-left: 10px; font-size: 16px; width: 200px; } .outcomeRating-text { text-align: center; font-size: 14px; } .outcomeRating_notRated .outcomeRating-text, .outcomeRating_notRated .outcomeRating-rating { color: #323232; } .outcomeRating-barLines { position: absolute; top: 5px; left: 5px; display: table; box-sizing: border-box; width: 230px; } .outcomeRating_notRated .outcomeRating-barLines { display: none; } .outcomeRating-line { content: 's'; box-sizing: border-box; height: 35px; position: relative; display: table-cell; width: 28.75px; } .outcomeRating-line + .outcomeRating-line { border-left: 1px solid #E1E1E1; } .mix-outcomeRating_centered { margin: 0px auto; } /*doc --- title: searchResults name: searchResults category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.searchResults` | Base class. ```html_example ``` */ .searchResults { width: 100%; } .searchResults-item { width: 100%; border-bottom: 1px solid #B3B3B3; } .searchResults-item:first-child { border-top: 1px solid #B3B3B3; } .searchResultsHeader { width: 100%; background: #f7f7f7; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; text-transform: uppercase; text-align: center; } /*doc --- title: radioGroup name: radioGroup category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.radioGroup` | Base class. ```html_example ``` */ /*doc --- title: inputCombo name: inputCombo category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.inputCombo` | Base class. ```html_example ``` */ /*doc --- title: buttonList name: buttonList category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.buttonList` | Base class. ```html_example ``` */ .buttonList > * { display: inline-block; margin-right: 12px; margin-bottom: 12px; } /*doc --- title: SearchFilters name: searchFilters category: container --- Class | Description --------------------------- | ---------------------------------------------------- `.searchFilters` | Base class ```html_example ``` */ .searchFilters { margin-bottom: 24px; } /*doc --- title: pagination name: pagination category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.pagination` | Base class. ```html_example ``` */ .pagination { text-align: center; margin: 0px auto; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #3c7974; margin-bottom: 24px; font-size: 0; } .pagination > * + * { margin-left: 8px; } .pagination > *:hover { cursor: pointer; background-color: #eeeeee; } .pagination > .previous, .pagination > .next { border: 2px solid #dadada; font-size: 30px; width: 40px; height: 40px; } .pagination > .previous a, .pagination > .next a { display: inline-block; width: 100%; height: 100%; } .pagination > .isActive { background: #ebebeb; } .pagination > .isPlaceHolder { width: 10px; } .pagination > .isPlaceHolder:hover { cursor: default; background: none; } .pagination > * > * { text-decoration: none; } .pagination > * > *:hover { text-decoration: none; } /*doc --- title: demoStat name: demoStat category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.demoStat` | Base class. ```html_example ``` */ .demoStat { text-align: center; } .demoStat-hd, .demoStat-ft { font-size: 20px; line-height: 20px; text-transform: uppercase; color: #3D91BD; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; } .demoStat-hd { margin: 0px 0px 12px 0px; } .demoStat-ft { margin: 12px 0px 0px 0px; } .demoStat-bd > img { display: inline-block; margin-right: 12px; width: 30px; height: 75px; } .demoStat-stat { display: inline-block; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; } .demoStat-stat > *:first-child { font-size: 56px; line-height: 56px; font-weight: bold; color: #3D91BD; } .demoStat-stat > *:last-child { font-size: 14px; color: #3D91BD; } .demoStat_spaced { margin-bottom: 12px; } /*doc --- title: demoSimple name: demoSimple category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.demoSimple` | Base class. ```html_example ``` */ .demoSimple { display: inline-block; box-sizing: border-box; padding: 24px; width: 200px; height: 112px; margin: 0px auto; text-align: center; } .demoSimple-hd, .demoSimple-ft { font-size: 14px; line-height: 16px; color: #3D91BD; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; } .demoSimple-hd { font-size: 20px; text-transform: uppercase; margin-bottom: 12px; } .demoSimple-stat { display: inline-block; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; } .demoSimple-stat > * { font-size: 30px; line-height: 36px; font-weight: bold; color: #3D91BD; width: auto; } .mix-demoSimple_smoke { background: #f7f7f7; } /*doc --- title: demoFraction name: demoFraction category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.demoFraction` | Base class. ```html_example ``` */ .demoFraction { text-align: center; } .demoFraction-hd, .demoFraction-ft { font-size: 14px; color: #3D91BD; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; } .demoFraction-hd { font-size: 20px; text-transform: uppercase; margin-bottom: 12px; } .demoFraction-bd > img { display: inline-block; margin-right: 12px; } .demoFraction-stat { display: inline-block; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; } .demoFraction-stat > * { display: inline-block; font-size: 14px; line-height: 14px; color: #3D91BD; width: 36px; } .demoFraction-stat > *:first-child, .demoFraction-stat > *:last-child { font-size: 30px; line-height: 36px; font-weight: bold; color: #3D91BD; width: auto; } /*doc --- title: demoGroup name: demoGroup category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.demoGroup` | Base class. ```html_example ``` */ .demoGroup { text-align: center; } .demoGroup > * { vertical-align: middle; } /*doc --- title: Stat comparison name: statComparison category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.statComparison` | Base class. ```html_example ``` */ .statComparison-bd { margin-bottom: 12px; font-size: 0px; padding-left: 12px; overflow: hidden; background: linear-gradient(to right, #f7f7f7, white, white, #f7f7f7); display: flex; } .statComparison-bd > * { display: inline-block; width: 50%; background: #f7f7f7; box-sizing: border-box; padding: 24px; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); } .statComparison-bd > *:first-child { margin-left: -12px; } .statComparison-bd > *:last-child { margin-left: 12px; } .statComparison-bd > * > * { transform: skewX(20deg); -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); } .statComparison-ft { background: #f7f7f7; text-transform: uppercase; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #3D91BD; text-align: center; padding: 12px 0; width: 100%; } /*doc --- title: infographic name: infographic category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.infographic` | Base class. ```html_example ``` */ .infographic { font-size: 0; margin-bottom: 24px; } /*doc --- title: infographicItem name: infographicItem category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.infographicItem` | Base class. ```html_example ``` */ .infographicItem { box-sizing: border-box; padding: 12px; } .mix-infographicItem_smoke { background-color: #f7f7f7; } .mix-infographicItem_center { margin: 0 auto; } .infographicItem_orbEquals::after { background: #3D91BD; content: ''; background-image: url(/assets/media/images/equals.png); background-repeat: no-repeat; background-size: 21px 21px; background-position: 10px; } .infographicItem_orbPlus::after { background: #3D91BD; content: ''; background-image: url(/assets/media/images/plus.png); background-repeat: no-repeat; background-size: 21px 21px; background-position: 10px; } .infographicItem_orbMinus::after { background: #3D91BD; content: ''; background-image: url(/assets/media/images/minus.png); background-repeat: no-repeat; background-size: 21px 21px; background-position: 10px; } /*doc --- title: infographicGroup name: infographicGroup category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.infographicGroup` | Base class. ```html_example ``` */ .infographicGroup { position: relative; } /*doc --- title: percentageBar name: percentageBar category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.percentageBar` | Base class. ```html_example ``` */ .percentageBar { width: 100%; position: relative; } .percentageBar:before, .percentageBar:after { content: " "; display: table; } .percentageBar:after { clear: both; } .percentageBar-bd > * { -webkit-transition: width 0.2s ease-out; -moz-transition: width 0.2s ease-out; -o-transition: width 0.2s ease-out; transition: width 0.2s ease-out; } /*doc --- title: percentageBarLabel name: percentageBarLabel category: Container --- Percentage bar labels are absolutely positioned across a percentage bar to indicate different increments. This is used on the program summary page to show average, shortest, and longest wait. These can be places above or below the bar. On smaller breakpoints the bar will be vertical, not horizontal. All labels will be moved to the right of the bar. ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.percentageBarLabel` | Base class. ```html_example ``` */ .percentageBarLabel { position: absolute; width: 90px; margin-left: -45px; text-align: center; } .percentageBarLabel-hd { font-size: 14px; text-transform: uppercase; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #3D91BD; line-height: 16px; } .percentageBarLabel-bd { font-size: 28px; text-transform: uppercase; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #3D91BD; line-height: 30px; } .percentageBarLabel-ft { font-size: 14px; text-transform: uppercase; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #3D91BD; line-height: 16px; } /*doc --- title: Transplant Data Grid name: transplantDataGrid category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.transplantDataGrid` | Base class. ```html_example ``` */ .transplantDataGrid { width: 100%; font-size: 0; } .transplantDataGrid-item { font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; display: table; vertical-align: middle; padding: 6px; box-sizing: border-box; } .transplantDataGrid-item > * { display: table-cell; vertical-align: middle; box-sizing: border-box; } .transplantDataGrid-item > *:first-child { font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24px; width: 40px; text-align: center; } .transplantDataGrid-item > *:last-child { line-height: 14px; font-size: 12px; color: #5c6a6f; } /*doc --- title: Summary List name: summaryList category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.summaryList` | Base class. ```html_example ``` */ /*doc --- title: Summary Item name: summaryItem category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.summaryItem` | Base class. ```html_example ``` */ .summaryItem { text-align: center; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; box-sizing: border-box; } .summaryItem-hd { font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #77888e; text-transform: uppercase; margin-bottom: 12px; } .mix-summaryItem-hd_dark { color: #5c6a6f; } .summaryItem-bd { font-size: 28px; line-height: 28px; } .summaryItem-ft { text-transform: uppercase; line-height: 18px; width: 100px; margin: 0px auto; } /*doc --- title: outcomeTable name: outcomeTable category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.outcomeTable` | Base class. ```html_example ``` */ .outcomeTable { font-size: 0; margin-bottom: 24px; text-align: center; } .outcomeTable-column { box-sizing: border-box; vertical-align: top; border-bottom: 1px solid #E1E1E1; } .outcomeTable-column + .outcomeTable-column { border-left: 1px solid #E1E1E1; } .outcomeTable-column:last-child { border-right: 1px solid #E1E1E1; } .outcomeTable-cell + .outcomeTable-cell { border-left: 1px solid #E1E1E1; } .outcomeTable-column-hd { height: 80px; display: inline-table; width: 100%; border-top: 1px solid #E1E1E1; } .outcomeTable-column-hd_sub { text-transform: none; font-size: 16px; } .outcomeTable-column-hd, .outcomeTable-cell_header { font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; text-transform: uppercase; background: #f7f7f7; text-align: center; color: #5c6a6f; } .outcomeTable-cell_header, .outcomeTable-column-hd_small { font-size: 12px; } .outcomeTable-column-hd > div, .outcomeTable-cell_header > div { display: table-cell; vertical-align: middle; text-align: center; } .outcomeTable-cell_header { border-top: 1px solid #E1E1E1; border-left: 1px solid #E1E1E1; } .outcomeTable-column-hd_blank { background: none; border-top: 1px solid white; } .outcomeTable-numberCellData { font-size: 24px; display: table-cell; vertical-align: middle; font-weight: bold; } /*doc --- title: ratingCircle name: ratingCircle category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.ratingCircle` | Base class. ```html_example ``` */ .ratingCircle { font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; width: 100%; text-transform: uppercase; } .ratingCircle-display { box-sizing: border-box; position: relative; margin-bottom: 6px; } .ratingCircle-orb { width: 60px; height: 60px; border-radius: 60px; border: 4px solid #E1E1E1; margin: 0px auto; } .ratingCircle_better .ratingCircle-orb { background-color: #161F63; } .ratingCircle_somewhat .ratingCircle-orb { background-color: #434776; } .ratingCircle_good .ratingCircle-orb { background-color: #6C6F97; } .ratingCircle_worse .ratingCircle-orb { background-color: #9698BC; } .ratingCircle_worst .ratingCircle-orb { background-color: #C3C4E3; } .ratingCircle-rating { color: #ffffff; line-height: 60px; font-size: 24px; text-align: center; } .ratingCircle-text { text-align: center; font-size: 12px; } .ratingCircle_notRated .ratingCircle-text { color: #B3B3B3; } /*doc --- title: demoBar name: demoBar category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.demoBar` | Base class. ```html_example ``` */ .demoBar { font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; width: 100%; font-size: 20px; padding-top: 24px; } .demoBar-display { box-sizing: border-box; position: relative; height: 156px; width: 100px; margin: 0px auto 6px auto; } .demoBar-bar { width: 100%; position: absolute; bottom: 0; } .demoBar_living .demoBar-bar { background-color: #929c9f; } .demoBar_deceased .demoBar-bar { background-color: #d0dedd; } .demoBar-rating { color: #ffffff; line-height: 60px; font-size: 24px; text-align: center; } .demoBar-text { text-align: center; font-size: 12px; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; } .demoBar-data { position: absolute; top: -30px; width: 100%; } /*doc --- title: Timeline name: timeline category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.timeline` | Base class. ```html_example ``` */ .timeline { width: 90%; height: 100px; max-width: 800px; margin: 0 auto; } .timeline-events-wrapper { width: 100%; position: relative; height: 100%; } .timeline-events-wrapper select { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; } .timeline-events { width: 100%; position: absolute; left: 0; top: 49px; height: 2px; background: #d0dedd; } .timeline-events ol { position: absolute; top: 24px; text-align: justify; width: 100%; box-sizing: border-box; } .timeline-events ol:after { content: ''; display: inline-block; width: 100%; } .timeline-events ol > li { display: inline-block; } .timeline-events a { text-align: center; color: #3D91BD; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: normal; text-decoration: none; position: relative; } .timeline-events a:before { content: ''; position: absolute; left: 50%; right: auto; height: 14px; width: 14px; margin-left: -7px; bottom: 36px; border-radius: 50%; border: 2px solid #B3C1C1; background: #ffffff; } .timeline-events a.isSelected:before { bottom: 32px; background: #3D91BD; height: 22px; width: 22px; margin-left: -11px; } /*doc --- title: mapContainer name: mapContainer category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.mapContainer` | Base class. ```html_example ``` */ .mapContainer { width: 100%; border: 1px solid #E1E1E1; margin-bottom: 24px; } .mapContainer-bd { box-sizing: border-box; padding: 24px; font-size: 18px; } /*doc --- title: buttonGroup name: buttonGroup category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.buttonGroup` | Base class. ```html_example ``` */ /*doc --- title: skipMain name: skipMain category: Container --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.skipMain` | Base class. ```html_example ``` */ a.skipMain { left: -999px; position: absolute; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: -999; } a.skipMain:focus, a.skipMain:active { color: #ffffff; background-color: #264e4b; left: 0; top: 0; width: 200px; height: auto; overflow: auto; padding: 12px; text-align: center; font-size: 16px; z-index: 999; } /*doc --- title: Button name: btn category: Content --- The `.btn` object is a versatile content object. Various HTML elements may be used, in order to provide the most semantically correct markup for a use case. Additionally, buttons have a design-specified visual hierarchy to indicate the user different types of action. Buttons may be disabled, both visually and/or functionally. ## HTML tags for creating buttons The following HTML tags may be used to create a button. ```html_example A Tag ``` ## Button hierarchy Class | Description --------------------------- | ---------------------------------------------------- `.btn` | Base class. `.btn_primary` | Extension class. `.btn_secondary` | Extension class. `.btn_tertiary` | Extension class. `.btn_quaternary` | Extension class. Signify user action hierarchy on a page by using these button variations. ```html_example ``` ## Disabling buttons Add a class to the `.btn` element to visually disable it. Functionally disable ` ``` ## Size Mixins These mixins change the width, padding, or font size of a button Class | Description --------------------------- | ---------------------------------------------------- `.mix-btn_full` | Long button mixin to stretch to full width `.mix-btn_condensed` | Strips min-width. decreases padding and font-size ```html_example ``` ## Typography Mixins These mixins specifically change font properties of a button Class | Description ------------------------------- | ---------------------------------------------------- `.mix-btn_textCaseAuto` | Remove uppercase text transform from base button ```html_example ``` */ .btn { position: relative; display: inline-block; box-sizing: border-box; max-width: 100%; margin: 0; padding: 14px 20px; border: none; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; font-size: 14px; line-height: normal; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border-radius: 3px; -webkit-appearance: none; } .btn:not([disabled]):not(.isDisabled):hover { text-decoration: none; } .btn_primary { color: #ffffff; background-color: #00a0cc; border-bottom: 2px solid #d3d3d3; } .btn_primary:not([disabled]):not(.isDisabled):hover { background-color: #3d91bd; color: #ffffff; } .btn_primary.isDisabled, .btn_primary[disabled] { background-color: #B3B3B3 !important; cursor: default !important; } .btn_secondary { color: #3d91bd; background-color: #ffffff; border-bottom: 2px solid #4c5558; } .btn_secondary:not([disabled]):not(.isDisabled):hover { background-color: #eeeeee; } .btn_secondary.isDisabled, .btn_secondary[disabled] { background-color: #f5f5f5; cursor: default !important; } .btn_tertiary { font-weight: bold; background: none; color: #3d91bd; padding: 9px 0px 11px 0px; text-transform: none; } .btn_tertiary:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 11px; border-width: 0 0 1px; border-style: solid; } .btn_tertiary:not([disabled]):not(.isDisabled):hover { color: #00a0cc; } .btn_tertiary.isDisabled, .btn_tertiary[disabled] { color: #6f9d9a; cursor: default !important; } .btn_quaternary { font-weight: bold; background: none; color: #3d91bd; border: 2px solid #dadada; padding: 10px 25px; vertical-align: middle; } .btn_quaternary:not([disabled]):not(.isDisabled):hover { color: #00a0cc; border: 2px solid #00a0cc; } .btn_quaternary.isActive { border: 2px solid #00a0cc; } .mix-btn_fullWidth { width: 100%; } .mix-btn_wide { min-width: 300px; } .mix-btn_textCaseAuto { text-transform: none; } .mix-btn_condensed { padding: 10px 20px 10px 20px; min-width: 0; font-size: 11px; } .mix-btn_tall { height: 70px; } /*doc --- title: Heading name: hdg category: Content --- Heading objects will most often be paired with HTML heading tags (h1, h2, h3, etc). Maintaining a clear document outline is recommended. Only use one h1 tag per page.
Headings differ from the '.title' class in that they are usable in more situations. The '.title' class has very bold text the ability to add a dotted border underline, and margins that change at varying breakpoints. The '.title' class is for use in places like page headings or headings for major sections of a page. ## Default Examples: Class | Description --------------------------- | ---------------------------------------------------- `.hdg` | Base class. Sets base font family and line-height. `.hdg_h1` | Heading 1 extension. Sets font size. `.hdg_h2` | Heading 2 extension. Sets font size. `.hdg_h3` | Heading 3 extension. Sets font size. `.hdg_h4` | Heading 4 extension. Sets font size. `.hdg_h5` | Heading 5 extension. Sets font size. `.hdg_h6` | Heading 6 extension. Sets font size. ```html_example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
``` ## Mixin Examples: Mixin Class | Description --------------------------- | ---------------------------------------------------- `.mix-hdg_default` | Sets heading to use default base font. `.mix-hdg_dottedUnderline` | Adds dotted border under hdg. `.mix-hdg_dottedUnderline_flat` | Mix-in extension. Removes `margin-bottom` from underline. `.mix-hdg_sansSerif` | Sets heading to use the san serif base font. `.mix-hdg_primaryDarkest` | Sets heading to use the darkest primary base color. `.mix-hdg_greyscaleMedium` | Sets heading to use the medium grayscale base color. `.mix-hdg_greyscale` | Sets heading to use the default grayscale base color. `.mix-hdg_greyscaleDarkest` | Sets heading to use the darkest grayscale base color. `.mix-hdg_white` | Sets heading to solid white. `.mix-hdg_bold` | Sets heading to bold. `.mix-hdg_condensed` | Sets the heading's `line-height` to 1. `.mix-hdg_ctr` | Sets heading to `text-align: center;`. ```html_example

Heading 3 - Dotted Underline

Heading 3 - Dotted Underline Flat

Heading 3 - Font - Sans Serif

Heading 3 - Font - Color - Primary Darkest

Heading 3 - Font - Color - Grayscale Medium

Heading 3 - Font - Color - Greyscale Default

Heading 3 - Font - Color - Greyscale Darkest

Heading 3 - Font - Color - White

Heading 3 - Font - Bold

Heading 3 - Condensed

Heading 3 - Centered

``` */ .hdg { font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: normal; font-weight: normal; color: #070072; } .hdg_h1 { font-size: 40px; } .hdg_title { font-size: 40px; } .mix-hdg_bold { font-weight: bold; } .mix-hdg_primaryDarkest { color: #2d5d59; } .mix-hdg_white { color: #ffffff; } .mix-hdg_regentGrey { color: #77888e; } .mix-hdg_white { color: #ffffff; } .mix-hdg_condensed { line-height: 1; } .mix-hdg_ctr { text-align: center; } .mix-hdg_uppercase { text-transform: uppercase; } /*doc --- title: Text name: text category: Content --- The purpose of the text object is to manage outlier bits of content. When an object is focused on layout, or box-model properties (container objects), or specific pieces of content (headings and buttons) this object may be used to handle edge cases where text needs to be styled inside those other objects. A a general rule, the object should manage and style it's content. When that does not make sense, use this object to style the content in order to keep the parent object clean and intentional. Use this object **sparingly** as it can easily become a crutch. ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.text` | Base class. ## Text Styling This object has no base styling and no children. All classes in this object are mixins. Class | Description --------------------------- | ---------------------------------------------------- `.mix-text_weightBold` | Applies `font-weight: bold;` `.mix-text_styleItalic` | Applies `font-style: italic;` `.mix-text_superscript` | Mimics the native `` tag functionality `.mix-text_subscript` | Mimics the native `` tag functionality `.mix-text_center` | Centers the text `.mix-text_small` | Makes the text smaller `.mix-text_error` | Adds error styling to text ```html_example
mix-text_weightBold
mix-text_styleItalic
normal text subscript text
normal text superscript text
mix-text_small
mix-text_error
``` */ .mix-text_weightBold { font-weight: bold; } .mix-text_styleItalic { font-style: italic; } .mix-text_superscript { vertical-align: super; font-size: smaller; } .mix-text_subscript { vertical-align: sub; font-size: smaller; } .mix-text_center { text-align: center; } .mix-text_small { font-size: 0.75em; } .userContent { font-family: "open_sans", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: inherit; font-weight: normal; font-style: normal; font-variant: normal; line-height: inherit; color: #323232; } .userContent p { margin: 0 0 12px 0; } .userContent .introText { line-height: 2; } .userContent strong, .userContent b { font-weight: bold; } .userContent i, .userContent em { font-style: italic; } .userContent ol, .userContent ul { margin-left: 12px; } .userContent ul { list-style-type: disc; list-style-position: inside; margin-bottom: 12px; } .userContent ol { list-style-type: decimal; list-style-position: inside; margin-bottom: 12px; } .userContent li { margin-bottom: 12px; } .userContent ul ul, .userContent ol ul { list-style-type: circle; list-style-position: inside; margin-left: 12px; } .userContent ol ol, .userContent ul ol { list-style-type: lower-latin; list-style-position: inside; margin-left: 12px; } .userContent table tr + tr { border-top: 1px solid black; } .userContent table td { padding: 8px; } .userContent table td + td { border-left: 1px solid black; } /*doc --- title: News Tile name: newsTile category: Content --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.newsTile` | Base class. ```html_example ``` */ .newsTile { display: block; position: relative; margin-bottom: 24px; padding: 20px; box-sizing: border-box; background: #00a0cc; color: #ffffff; } .newsTile:hover { background: #6f9d9a; } .newsTile-bd { position: absolute; bottom: 20px; } /*doc --- title: Input Error name: inputError category: Content --- ## Object Definition Class | Description --------------------------- | ---------------------------------------------------- `.inputError` | Base class. ```html_example ``` */ .inputError { color: red; position: absolute; bottom: 0px; left: 2px; display: none; } .mix-inputError_push { bottom: -20px; } .inputError_wrapper { position: relative; } /*doc --- title: Header name: header category: Landmark --- Handles high level styling and positioning of header elements. Class | Description ------------------------------ | ------------------------------------------------- `.header` | Base class. `.header-logo` | Handles display, positioning, and z-index of logo across breakpoints. ```html_example intentionally excluded. not meant to be a reusable element. would not display correctly in styleguide. ``` */ .header { width: 100%; position: relative; } .header > * { box-sizing: border-box; } .header-logo > * { display: block; width: 100%; height: auto; } /*doc --- title: Header name: header category: Landmark --- Handles high level styling and positioning of header elements. Class | Description ------------------------------ | ------------------------------------------------- `.header` | Base class. `.header-logo` | Handles display, positioning, and z-index of logo across breakpoints. ```html_example intentionally excluded. not meant to be a reusable element. would not display correctly in styleguide. ``` */ .headerUtility { padding: 24px 12px; } .headerUtility:before, .headerUtility:after { content: " "; display: table; } .headerUtility:after { clear: both; } .headerUtility > * { box-sizing: border-box; } /*doc --- title: HeaderMainNav name: headerMainNav category: Landmark --- Containing list for main navigation. Class | Description ------------------------------ | ------------------------------------------------- `.headerMainNav` | Base class. ```html_example intentionally excluded. not meant to be a reusable element. would not display correctly in styleguide. ``` */ .headerNav { background: #323232; position: relative; } .headerNavLink { color: #ffffff; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; text-decoration: none; font-weight: bold; } .headerNavLink:hover { color: #ffffff; } /*doc --- title: HeaderSubNav name: headerSubNav category: Landmark --- Containing list for main navigation. Class | Description ------------------------------ | ------------------------------------------------- `.headerSubNav` | Base class. ```html_example intentionally excluded. not meant to be a reusable element. would not display correctly in styleguide. ``` */ .headerSubNavLink { color: #ffffff; font-size: 12px; letter-spacing: 1px; font-family: "open_sans", Arial, "Helvetica Neue", Helvetica, sans-serif; text-decoration: none; font-weight: normal; } .headerSubNavLink:hover { color: #ffffff; } /*doc --- title: HeaderDropdown name: headerDropdown category: Landmark --- Dropdown item for a main navigation item. Class | Description ------------------------------ | ------------------------------------------------- `.headerDropdown` | Base class. `.headerDropdown-trigger` | Child class. Manages visual styles and active state of trigger element. `.headerDropdown-panel` | Child class. Manages visual styles and active state of panel element. Internal panel contents are styled as a separate object. ```html_example intentionally excluded. not meant to be a reusable element. would not display correctly in styleguide. ``` */ .headerDropdown { position: relative; } .headerNavLink-icon { display: inline-block; width: 10px; height: 10px; background: url(/assets/media/images/arrow-down_white.svg) no-repeat; background-size: 100% 100%; margin-left: 6px; } /*doc --- title: hero name: hero category: Landmark --- Class | Description ------------------------------ | ------------------------------------------------- `.headerHero` | Base class. ```html_example intentionally excluded. not meant to be a reusable element. would not display correctly in styleguide. ``` */ .hero { width: 100%; height: auto; overflow: auto; background: url(/assets/media/images/home_background.png); background-size: cover; background-repeat: no-repeat; margin-bottom: 40px; position: relative; } .hero:after { content: ' '; background: #264e4b; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.15; z-index: 0; } .hero > * { z-index: 1; } .heroTitle { font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; color: #ffffff; } .heroBody { color: #ffffff; box-sizing: border-box; } /*doc --- title: Footer name: footer category: Landmark --- Handles high level styling and positioning of footer elements. Class | Description ------------------------------ | ------------------------------------------------- `.footer` | Base class. ```html_example intentionally excluded. not meant to be a reusable element. would not display correctly in styleguide. ``` */ .footer-bd { background: #323232; padding: 40px 0; } } .footer-border{ width: 100%; height: 15px; background: #46aace; background: -webkit-linear-gradient(to right, #dcecc9 0%, #b3ddcc 10%, #8acccd 20%, #62bdd1 30%, #46aace 40%, #3d91bd 50%, #3577ae 60%, #2f5f9e 70%, #26458e 80%, #1c2b7f 90%, #162065 95%, #151a4c 100%); background: -o-linear-gradient(to right, #dcecc9 0%, #b3ddcc 10%, #8acccd 20%, #62bdd1 30%, #46aace 40%, #3d91bd 50%, #3577ae 60%, #2f5f9e 70%, #26458e 80%, #1c2b7f 90%, #162065 95%, #151a4c 100%); background: -moz-linear-gradient(to right, #dcecc9 0%, #b3ddcc 10%, #8acccd 20%, #62bdd1 30%, #46aace 40%, #3d91bd 50%, #3577ae 60%, #2f5f9e 70%, #26458e 80%, #1c2b7f 90%, #162065 95%, #151a4c 100%); background: linear-gradient(to right, #dcecc9 0%, #b3ddcc 10%, #8acccd 20%, #62bdd1 30%, #46aace 40%, #3d91bd 50%, #3577ae 60%, #2f5f9e 70%, #26458e 80%, #1c2b7f 90%, #162065 95%, #151a4c 100%); } .footer-ft { padding: 20px 0 20px; font-size: 11px; text-align: center; } .footer-bd a { text-decoration: none; font-weight: normal; } .footer-bd a:hover { text-decoration: underline; } .footerLogos { max-width: 600px; margin: 0 auto !important; } .footerCopy { max-width: 600px; margin: 0 auto; } .footerNav { list-style: none; text-align: center; } .footerNav > * { display: inline; font-weight: bold; text-transform: uppercase; } .footerNav a { text-decoration: none; } .footerNav a:hover { text-decoration: underline; } .footerNav > * + * { margin-left: 10px; border-left: 1px solid #dadada; padding-left: 10px; } /*doc --- title: Footer Menu name: footerMenu category: Landmark --- The footer menu is a unique object that styles navigation components wthin the footer. These menus are shown as a columned list at the large breakpoint and are collapsed on smaller breakpoints Class | Description ------------------------------ | ------------------------------------------------- `.footerMenu` | Base class. `.footerMenu_first` | Extension of base class to add a border to the top of the element ```html_example
``` */ .footerMenu { margin-bottom: 20px; letter-spacing: 0.5px; } .footerMenu > * { display: block; } .footerMenu > a:hover { color: #ffffff; } .footerMenu-icon { display: inline-block; width: 10px; height: 10px; background: url(/assets/media/images/arrow-down_white.svg) no-repeat; background-size: 100% 100%; margin-left: 6px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } /*doc --- title: Footer Menu List name: footerMenuList category: Landmark --- Class | Description ------------------------------ | ------------------------------------------------- `.footerMenuList` | Provides spacing from other footer elements. `.footerMenuList > *` | Adds spacing to all children, except the last child which has it's margins explicitly removed. Side margins are removed at the large breakpoint. *See Site Footer for example usage* */ .footerMenuList { margin-bottom: 10px; } .footerMenuList > * { margin: 0; } .footerMenuList > *:last-child { margin-bottom: 0; } .footerMenuList > * > a { color: #ffffff; font-size: 12px; } .fieldset:before, .fieldset:after { content: " "; display: table; } .fieldset:after { clear: both; } .mix-fieldset_borderBottom { border-bottom: 1px solid #dadada; } .textField { margin-bottom: 24px; } .textField-input { width: 100%; height: 45px; box-sizing: border-box; font-size: 14px; border: 1px solid #eeeeee; resize: none; } .textField-input_short { height: 35px; } .textField-input_tall { height: 350px; } .mix-textField-input_padded { padding: 0px 24px; } .mix-textField-input_paddedLite { padding: 0px 12px; } .mix-textField-input_smallText { font-size: 12px; } .selectMenu { margin-bottom: 24px; } .mix-selectMenu_inline { display: inline-block; } .mix-selectMenu_inline + .mix-selectMenu_inline { margin-left: 24px; } .selectMenu-input { width: 100%; } .mix-selectMenu-input_widthAuto { width: auto; } .radioButton { font-size: 12px; } .grid { margin-left: -3.125%; } .grid-col { width: 96.9696969697%; margin-left: 3.0303030303%; left: auto; } .mix-grid-col_1of12SM { width: 5.303030303%; } .mix-grid-col_push1of12SM { left: 8.3333333333%; } .mix-grid-col_pull1of12SM { left: -8.3333333333%; } .mix-grid-col_2of12SM { width: 13.6363636364%; } .mix-grid-col_push2of12SM { left: 16.6666666667%; } .mix-grid-col_pull2of12SM { left: -16.6666666667%; } .mix-grid-col_3of12SM { width: 21.9696969697%; } .mix-grid-col_push3of12SM { left: 25%; } .mix-grid-col_pull3of12SM { left: -25%; } .mix-grid-col_4of12SM { width: 30.303030303%; } .mix-grid-col_push4of12SM { left: 33.3333333333%; } .mix-grid-col_pull4of12SM { left: -33.3333333333%; } .mix-grid-col_5of12SM { width: 38.6363636364%; } .mix-grid-col_push5of12SM { left: 41.6666666667%; } .mix-grid-col_pull5of12SM { left: -41.6666666667%; } .mix-grid-col_6of12SM { width: 46.9696969697%; } .mix-grid-col_push6of12SM { left: 50%; } .mix-grid-col_pull6of12SM { left: -50%; } .mix-grid-col_7of12SM { width: 55.303030303%; } .mix-grid-col_push7of12SM { left: 58.3333333333%; } .mix-grid-col_pull7of12SM { left: -58.3333333333%; } .mix-grid-col_8of12SM { width: 63.6363636364%; } .mix-grid-col_push8of12SM { left: 66.6666666667%; } .mix-grid-col_pull8of12SM { left: -66.6666666667%; } .mix-grid-col_9of12SM { width: 71.9696969697%; } .mix-grid-col_push9of12SM { left: 75%; } .mix-grid-col_pull9of12SM { left: -75%; } .mix-grid-col_10of12SM { width: 80.303030303%; } .mix-grid-col_push10of12SM { left: 83.3333333333%; } .mix-grid-col_pull10of12SM { left: -83.3333333333%; } .mix-grid-col_11of12SM { width: 88.6363636364%; } .mix-grid-col_push11of12SM { left: 91.6666666667%; } .mix-grid-col_pull11of12SM { left: -91.6666666667%; } .mix-grid-col_12of12SM { width: 96.9696969697%; } .mix-grid-col_push12of12SM { left: 100%; } .mix-grid-col_pull12of12SM { left: -100%; } .mix-grid-col_spacedSM { margin-bottom: 24px; } .articleSection { flex-flow: column; } .articleSection-md { margin: 0 auto; } .articleSection_inverse > .articleSection-md, .articleSection_inverse > .articleSection-bd { float: none; } .articleSection-md > img { margin: 0 auto; } .media { flex-flow: column; } .media-md { margin: 0 auto; } .media_inverse > .media-md, .media_inverse > .media-bd { float: none; } .media-md > img { margin: 0 auto; } .mix-media-bd_spaced { padding-left: 0px; } .media-md { margin-bottom: 24px; } .mix-media-md_fixedWidth { max-width: 400px; } .container { padding: 12px; } .linkColumns { display: block; } .linkColumns-col { display: block; vertical-align: top; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0px; margin-bottom: 20px; } .linkColumns-col a { font-size: 14px; } .linkColumns-col_secondary { padding: 0; } .linkColumns-col_secondary > .linkColumnList { background: #f7f7f7; padding: 15px; } .linkColumns-col_secondary + .linkColumns-col_secondary { border: none; } .linkColumns-col_secondary > .linkColumnList > li:last-child { margin-top: 24px; } .newsListing { width: 100%; font-size: 0; } .newsListing-col { display: inline-block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .staffListingItem { display: block; width: 100%; } .staffListingItem:first-child { border-top: 1px solid #5c6a6f; } .staffListingItem + .staffListingItem { border-top: 1px solid #5c6a6f; } .staffListingItem:last-child { border-bottom: 1px solid #5c6a6f; } .staffListingItem-name { display: block; padding: 24px 0px; } .staffListingItem-title { display: block; padding: 24px 0px; border-top: 1px solid #5c6a6f; } .inputCombo { margin-bottom: 12px; width: 100%; display: flex; flex-direction: column; } .inputCombo-inputWrap { display: block; width: 100%; margin-bottom: 12px; order: 1; } .inputCombo > .inputCombo-submit { width: 100%; order: 2; } .findAndCompare-bd > * { padding: 0; height: auto; position: relative; width: 100%; text-align: center; margin-bottom: 18px; } .findAndCompare_embedded { max-width: 100%; } .radioGroup > * { display: inline-block; } .searchResultsHeader { display: none; } .searchResultsHeaderTooltips { width: 100%; box-sizing: border-box; background: #ebebeb; padding: 10px 20px; font-size: 14px; margin-bottom: 12px; } .searchResultsHeaderTooltips > * { display: none; } .searchResultsHeaderTooltips > *.isSelected { display: block; } .searchResults-item { padding: 12px 0px; display: block; font-size: 0; } .searchResults-item > * { display: inline-block; box-sizing: border-box; } .searchResults-name { width: 85%; white-space: normal; font-size: 14px; padding-right: 12px; margin-bottom: 24px; } .searchResults-name-bd { font-size: 14px; } .searchResults-distance { text-align: center; font-size: 14px; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; width: 15%; white-space: normal; margin-bottom: 24px; } .searchResults-transplantVolume { text-align: center; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; margin-bottom: 12px; width: 50%; } .searchResults-transplantVolume-label { font-size: 18px; } .searchResults-transplantVolume-hd { font-size: 28px; line-height: 28px; } .searchResults-transplantVolume-bd { text-transform: uppercase; font-size: 14px; line-height: 16px; } .searchResults-transplantRate { text-align: center; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; width: 50%; margin-bottom: 12px; } .searchResults-transplantRate-label { font-size: 18px; } .searchResults-transplantRate-hd { font-size: 28px; line-height: 28px; } .searchResults-transplantRate-bd { text-transform: uppercase; font-size: 14px; line-height: 16px; } .searchResults-outcomeRating { width: 240px; margin: 0px auto; display: block; } .searchResults-outcomeRating-label { font-size: 18px; text-align: center; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; } .searchResults-name-label { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; } .infographicGroup { display: block; overflow: hidden; } .infographicGroup > * { margin: 0 auto; display: block; } .infographicItem { max-width: 465px; } .infographicItem_connectedBottom, .infographicItem_connectedBottomSM { margin-bottom: 96px; } .infographicItem_connectedBottom, .infographicItem_connectedTop, .infographicItem_connectedBottomSM { position: relative; } .infographicItem_connectedBottom::before, .infographicItem_connectedTop::before, .infographicItem_connectedBottomSM::before { content: ' '; display: block; position: absolute; left: 50%; margin-left: -1px; width: 2px; height: 72px; background: #eeeeee; } .infographicItem_connectedBottomSM::before { bottom: -48px; } .infographicItem_connectedTop::before { top: -48px; } .infographicItem_orbTop::after, .infographicItem_orbBottomSM::after { display: inline-block; position: absolute; left: 50%; margin-left: -21px; width: 42px; height: 42px; border-radius: 42px; color: #ffffff; line-height: 42px; font-size: 35px; text-align: center; } .infographicItem_orbTop::after { top: -48px; } .infographicItem_orbBottomSM::after { bottom: -69px; } .infographicItem_connectedTop.infographicItem_orbTop { padding-top: 24px; } .infographicItem_connectedTop.infographicItem_orbTop::before { top: -74px; height: 90px; } .infographicItem_connectedBottomSM.infographicItem_orbBottomSM::before { bottom: -96px; height: 96px; } .demoGroup > * { margin-bottom: 12px; } .transplantDataGrid > * { width: 50%; display: inline-table; } .transplantDataGrid > * { border-bottom: 1px solid #E1E1E1; } .transplantDataGrid > *:nth-child(even) { border-left: 1px solid #E1E1E1; } .transplantDataGrid > *:nth-last-child(-n+2) { border-bottom: none; } .summaryList { text-align: center; } .summaryList > * { display: block; padding: 24px 0px; position: relative; } .summaryList > *:first-child { padding-top: 0px; } .summaryList > * + *::before { content: ' '; height: 1px; width: 200px; background: #E1E1E1; position: absolute; left: 50%; top: 0; margin-left: -100px; } .summaryItem { width: 100%; } .outcomeTable-column { display: block; border-right: 1px solid #E1E1E1; margin: 0px auto 24px auto; width: 100%; } .outcomeTable-cell { width: 50%; height: 112px; display: inline-table; box-sizing: border-box; vertical-align: top; padding: 8px 4px; border-top: 1px solid #E1E1E1; } .mix-outcomeTable-column_showLG { display: none; } .percentageBar-bd { width: 100%; height: 12px; background: #c4deeb; position: relative; } .percentageBar-bd > * { height: 24px; background: url(/assets/media/images/barimg.png); position: absolute; top: -6px; left: 0; } .mix-percentageBar-bd_thick { height: 36px; } .mix-percentageBar-bd_thick > * { top: 0; height: 36px; } .percentageBarLabels { width: 100%; height: 102px; position: relative; padding: 12px; box-sizing: border-box; } .percentageBar_verticalSM { height: 675px; width: 240px; margin: 0 auto 24px auto; } .percentageBar_verticalSM > .percentageBar-bd { width: 12px; height: 100%; background: #d0dedd; position: relative; float: left; } .percentageBar_verticalSM > .percentageBar-bd > * { width: 24px; background: url(/assets/media/images/barimg.png); position: absolute; top: 0; left: 0; } .percentageBar_verticalSM > .mix-percentageBar-bd_thick { width: 36px; } .percentageBar_verticalSM > .mix-percentageBar-bd_thick > * { left: 0; width: 36px; } .percentageBar_verticalSM .percentageBarLabels { width: 200px; height: 100%; position: absolute; left: 60px; padding: 12px; box-sizing: border-box; display: inline-block; } .percentageBar_0 { width: 0%; } .percentageBar_verticalSM .percentageBar_0 { height: 0%; } .percentageBar_1 { width: 1%; } .percentageBar_verticalSM .percentageBar_1 { height: 1%; } .percentageBar_2 { width: 2%; } .percentageBar_verticalSM .percentageBar_2 { height: 2%; } .percentageBar_3 { width: 3%; } .percentageBar_verticalSM .percentageBar_3 { height: 3%; } .percentageBar_4 { width: 4%; } .percentageBar_verticalSM .percentageBar_4 { height: 4%; } .percentageBar_5 { width: 5%; } .percentageBar_verticalSM .percentageBar_5 { height: 5%; } .percentageBar_6 { width: 6%; } .percentageBar_verticalSM .percentageBar_6 { height: 6%; } .percentageBar_7 { width: 7%; } .percentageBar_verticalSM .percentageBar_7 { height: 7%; } .percentageBar_8 { width: 8%; } .percentageBar_verticalSM .percentageBar_8 { height: 8%; } .percentageBar_9 { width: 9%; } .percentageBar_verticalSM .percentageBar_9 { height: 9%; } .percentageBar_10 { width: 10%; } .percentageBar_verticalSM .percentageBar_10 { height: 10%; } .percentageBar_11 { width: 11%; } .percentageBar_verticalSM .percentageBar_11 { height: 11%; } .percentageBar_12 { width: 12%; } .percentageBar_verticalSM .percentageBar_12 { height: 12%; } .percentageBar_13 { width: 13%; } .percentageBar_verticalSM .percentageBar_13 { height: 13%; } .percentageBar_14 { width: 14%; } .percentageBar_verticalSM .percentageBar_14 { height: 14%; } .percentageBar_15 { width: 15%; } .percentageBar_verticalSM .percentageBar_15 { height: 15%; } .percentageBar_16 { width: 16%; } .percentageBar_verticalSM .percentageBar_16 { height: 16%; } .percentageBar_17 { width: 17%; } .percentageBar_verticalSM .percentageBar_17 { height: 17%; } .percentageBar_18 { width: 18%; } .percentageBar_verticalSM .percentageBar_18 { height: 18%; } .percentageBar_19 { width: 19%; } .percentageBar_verticalSM .percentageBar_19 { height: 19%; } .percentageBar_20 { width: 20%; } .percentageBar_verticalSM .percentageBar_20 { height: 20%; } .percentageBar_21 { width: 21%; } .percentageBar_verticalSM .percentageBar_21 { height: 21%; } .percentageBar_22 { width: 22%; } .percentageBar_verticalSM .percentageBar_22 { height: 22%; } .percentageBar_23 { width: 23%; } .percentageBar_verticalSM .percentageBar_23 { height: 23%; } .percentageBar_24 { width: 24%; } .percentageBar_verticalSM .percentageBar_24 { height: 24%; } .percentageBar_25 { width: 25%; } .percentageBar_verticalSM .percentageBar_25 { height: 25%; } .percentageBar_26 { width: 26%; } .percentageBar_verticalSM .percentageBar_26 { height: 26%; } .percentageBar_27 { width: 27%; } .percentageBar_verticalSM .percentageBar_27 { height: 27%; } .percentageBar_28 { width: 28%; } .percentageBar_verticalSM .percentageBar_28 { height: 28%; } .percentageBar_29 { width: 29%; } .percentageBar_verticalSM .percentageBar_29 { height: 29%; } .percentageBar_30 { width: 30%; } .percentageBar_verticalSM .percentageBar_30 { height: 30%; } .percentageBar_31 { width: 31%; } .percentageBar_verticalSM .percentageBar_31 { height: 31%; } .percentageBar_32 { width: 32%; } .percentageBar_verticalSM .percentageBar_32 { height: 32%; } .percentageBar_33 { width: 33%; } .percentageBar_verticalSM .percentageBar_33 { height: 33%; } .percentageBar_34 { width: 34%; } .percentageBar_verticalSM .percentageBar_34 { height: 34%; } .percentageBar_35 { width: 35%; } .percentageBar_verticalSM .percentageBar_35 { height: 35%; } .percentageBar_36 { width: 36%; } .percentageBar_verticalSM .percentageBar_36 { height: 36%; } .percentageBar_37 { width: 37%; } .percentageBar_verticalSM .percentageBar_37 { height: 37%; } .percentageBar_38 { width: 38%; } .percentageBar_verticalSM .percentageBar_38 { height: 38%; } .percentageBar_39 { width: 39%; } .percentageBar_verticalSM .percentageBar_39 { height: 39%; } .percentageBar_40 { width: 40%; } .percentageBar_verticalSM .percentageBar_40 { height: 40%; } .percentageBar_41 { width: 41%; } .percentageBar_verticalSM .percentageBar_41 { height: 41%; } .percentageBar_42 { width: 42%; } .percentageBar_verticalSM .percentageBar_42 { height: 42%; } .percentageBar_43 { width: 43%; } .percentageBar_verticalSM .percentageBar_43 { height: 43%; } .percentageBar_44 { width: 44%; } .percentageBar_verticalSM .percentageBar_44 { height: 44%; } .percentageBar_45 { width: 45%; } .percentageBar_verticalSM .percentageBar_45 { height: 45%; } .percentageBar_46 { width: 46%; } .percentageBar_verticalSM .percentageBar_46 { height: 46%; } .percentageBar_47 { width: 47%; } .percentageBar_verticalSM .percentageBar_47 { height: 47%; } .percentageBar_48 { width: 48%; } .percentageBar_verticalSM .percentageBar_48 { height: 48%; } .percentageBar_49 { width: 49%; } .percentageBar_verticalSM .percentageBar_49 { height: 49%; } .percentageBar_50 { width: 50%; } .percentageBar_verticalSM .percentageBar_50 { height: 50%; } .percentageBar_51 { width: 51%; } .percentageBar_verticalSM .percentageBar_51 { height: 51%; } .percentageBar_52 { width: 52%; } .percentageBar_verticalSM .percentageBar_52 { height: 52%; } .percentageBar_53 { width: 53%; } .percentageBar_verticalSM .percentageBar_53 { height: 53%; } .percentageBar_54 { width: 54%; } .percentageBar_verticalSM .percentageBar_54 { height: 54%; } .percentageBar_55 { width: 55%; } .percentageBar_verticalSM .percentageBar_55 { height: 55%; } .percentageBar_56 { width: 56%; } .percentageBar_verticalSM .percentageBar_56 { height: 56%; } .percentageBar_57 { width: 57%; } .percentageBar_verticalSM .percentageBar_57 { height: 57%; } .percentageBar_58 { width: 58%; } .percentageBar_verticalSM .percentageBar_58 { height: 58%; } .percentageBar_59 { width: 59%; } .percentageBar_verticalSM .percentageBar_59 { height: 59%; } .percentageBar_60 { width: 60%; } .percentageBar_verticalSM .percentageBar_60 { height: 60%; } .percentageBar_61 { width: 61%; } .percentageBar_verticalSM .percentageBar_61 { height: 61%; } .percentageBar_62 { width: 62%; } .percentageBar_verticalSM .percentageBar_62 { height: 62%; } .percentageBar_63 { width: 63%; } .percentageBar_verticalSM .percentageBar_63 { height: 63%; } .percentageBar_64 { width: 64%; } .percentageBar_verticalSM .percentageBar_64 { height: 64%; } .percentageBar_65 { width: 65%; } .percentageBar_verticalSM .percentageBar_65 { height: 65%; } .percentageBar_66 { width: 66%; } .percentageBar_verticalSM .percentageBar_66 { height: 66%; } .percentageBar_67 { width: 67%; } .percentageBar_verticalSM .percentageBar_67 { height: 67%; } .percentageBar_68 { width: 68%; } .percentageBar_verticalSM .percentageBar_68 { height: 68%; } .percentageBar_69 { width: 69%; } .percentageBar_verticalSM .percentageBar_69 { height: 69%; } .percentageBar_70 { width: 70%; } .percentageBar_verticalSM .percentageBar_70 { height: 70%; } .percentageBar_71 { width: 71%; } .percentageBar_verticalSM .percentageBar_71 { height: 71%; } .percentageBar_72 { width: 72%; } .percentageBar_verticalSM .percentageBar_72 { height: 72%; } .percentageBar_73 { width: 73%; } .percentageBar_verticalSM .percentageBar_73 { height: 73%; } .percentageBar_74 { width: 74%; } .percentageBar_verticalSM .percentageBar_74 { height: 74%; } .percentageBar_75 { width: 75%; } .percentageBar_verticalSM .percentageBar_75 { height: 75%; } .percentageBar_76 { width: 76%; } .percentageBar_verticalSM .percentageBar_76 { height: 76%; } .percentageBar_77 { width: 77%; } .percentageBar_verticalSM .percentageBar_77 { height: 77%; } .percentageBar_78 { width: 78%; } .percentageBar_verticalSM .percentageBar_78 { height: 78%; } .percentageBar_79 { width: 79%; } .percentageBar_verticalSM .percentageBar_79 { height: 79%; } .percentageBar_80 { width: 80%; } .percentageBar_verticalSM .percentageBar_80 { height: 80%; } .percentageBar_81 { width: 81%; } .percentageBar_verticalSM .percentageBar_81 { height: 81%; } .percentageBar_82 { width: 82%; } .percentageBar_verticalSM .percentageBar_82 { height: 82%; } .percentageBar_83 { width: 83%; } .percentageBar_verticalSM .percentageBar_83 { height: 83%; } .percentageBar_84 { width: 84%; } .percentageBar_verticalSM .percentageBar_84 { height: 84%; } .percentageBar_85 { width: 85%; } .percentageBar_verticalSM .percentageBar_85 { height: 85%; } .percentageBar_86 { width: 86%; } .percentageBar_verticalSM .percentageBar_86 { height: 86%; } .percentageBar_87 { width: 87%; } .percentageBar_verticalSM .percentageBar_87 { height: 87%; } .percentageBar_88 { width: 88%; } .percentageBar_verticalSM .percentageBar_88 { height: 88%; } .percentageBar_89 { width: 89%; } .percentageBar_verticalSM .percentageBar_89 { height: 89%; } .percentageBar_90 { width: 90%; } .percentageBar_verticalSM .percentageBar_90 { height: 90%; } .percentageBar_91 { width: 91%; } .percentageBar_verticalSM .percentageBar_91 { height: 91%; } .percentageBar_92 { width: 92%; } .percentageBar_verticalSM .percentageBar_92 { height: 92%; } .percentageBar_93 { width: 93%; } .percentageBar_verticalSM .percentageBar_93 { height: 93%; } .percentageBar_94 { width: 94%; } .percentageBar_verticalSM .percentageBar_94 { height: 94%; } .percentageBar_95 { width: 95%; } .percentageBar_verticalSM .percentageBar_95 { height: 95%; } .percentageBar_96 { width: 96%; } .percentageBar_verticalSM .percentageBar_96 { height: 96%; } .percentageBar_97 { width: 97%; } .percentageBar_verticalSM .percentageBar_97 { height: 97%; } .percentageBar_98 { width: 98%; } .percentageBar_verticalSM .percentageBar_98 { height: 98%; } .percentageBar_99 { width: 99%; } .percentageBar_verticalSM .percentageBar_99 { height: 99%; } .percentageBar_100 { width: 100%; } .percentageBar_verticalSM .percentageBar_100 { height: 100%; } .percentageBarLabel_inline, .percentageBarLabel_inlineSM { width: auto; text-align: left; text-transform: uppercase; margin-left: 0px; } .percentageBarLabel_inline > .percentageBarLabel-hd, .percentageBarLabel_inlineSM > .percentageBarLabel-hd { display: inline-block; font-size: 12px; line-height: 12px; } .percentageBarLabel_inline > .percentageBarLabel-bd, .percentageBarLabel_inlineSM > .percentageBarLabel-bd, .percentageBarLabel_inlineSM > .percentageBarLabel-ft { display: inline-block; font-size: 12px; line-height: 12px; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #5c6a6f; } .percentageBarLabel_lineTop:before { content: ' '; width: 2px; height: 48px; background: #9dbcbb; position: absolute; top: -54px; left: 50%; margin-left: -1px; } .percentageBarLabel_inlineSM.percentageBarLabel_lineTop:before { content: ' '; height: 2px; width: 48px; background: #9dbcbb; position: absolute; top: 50%; left: -66px; margin-top: -1px; } .percentageBarLabel_inline:after { content: ' '; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #5c6a6f; position: absolute; left: 0; margin-left: -8px; margin-top: 6px; z-index: 2; } .percentageBar_verticalSM .percentageBarLabel_inline:after { content: ' '; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #5c6a6f; position: absolute; left: 0; margin-left: -8px; margin-top: 6px; z-index: 2; } .percentageBarLabel_0 { left: 0%; } .percentageBar_verticalSM .percentageBarLabel_0 { top: 0%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_1 { left: 1%; } .percentageBar_verticalSM .percentageBarLabel_1 { top: 1%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_2 { left: 2%; } .percentageBar_verticalSM .percentageBarLabel_2 { top: 2%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_3 { left: 3%; } .percentageBar_verticalSM .percentageBarLabel_3 { top: 3%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_4 { left: 4%; } .percentageBar_verticalSM .percentageBarLabel_4 { top: 4%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_5 { left: 5%; } .percentageBar_verticalSM .percentageBarLabel_5 { top: 5%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_6 { left: 6%; } .percentageBar_verticalSM .percentageBarLabel_6 { top: 6%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_7 { left: 7%; } .percentageBar_verticalSM .percentageBarLabel_7 { top: 7%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_8 { left: 8%; } .percentageBar_verticalSM .percentageBarLabel_8 { top: 8%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_9 { left: 9%; } .percentageBar_verticalSM .percentageBarLabel_9 { top: 9%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_10 { left: 10%; } .percentageBar_verticalSM .percentageBarLabel_10 { top: 10%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_11 { left: 11%; } .percentageBar_verticalSM .percentageBarLabel_11 { top: 11%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_12 { left: 12%; } .percentageBar_verticalSM .percentageBarLabel_12 { top: 12%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_13 { left: 13%; } .percentageBar_verticalSM .percentageBarLabel_13 { top: 13%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_14 { left: 14%; } .percentageBar_verticalSM .percentageBarLabel_14 { top: 14%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_15 { left: 15%; } .percentageBar_verticalSM .percentageBarLabel_15 { top: 15%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_16 { left: 16%; } .percentageBar_verticalSM .percentageBarLabel_16 { top: 16%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_17 { left: 17%; } .percentageBar_verticalSM .percentageBarLabel_17 { top: 17%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_18 { left: 18%; } .percentageBar_verticalSM .percentageBarLabel_18 { top: 18%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_19 { left: 19%; } .percentageBar_verticalSM .percentageBarLabel_19 { top: 19%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_20 { left: 20%; } .percentageBar_verticalSM .percentageBarLabel_20 { top: 20%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_21 { left: 21%; } .percentageBar_verticalSM .percentageBarLabel_21 { top: 21%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_22 { left: 22%; } .percentageBar_verticalSM .percentageBarLabel_22 { top: 22%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_23 { left: 23%; } .percentageBar_verticalSM .percentageBarLabel_23 { top: 23%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_24 { left: 24%; } .percentageBar_verticalSM .percentageBarLabel_24 { top: 24%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_25 { left: 25%; } .percentageBar_verticalSM .percentageBarLabel_25 { top: 25%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_26 { left: 26%; } .percentageBar_verticalSM .percentageBarLabel_26 { top: 26%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_27 { left: 27%; } .percentageBar_verticalSM .percentageBarLabel_27 { top: 27%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_28 { left: 28%; } .percentageBar_verticalSM .percentageBarLabel_28 { top: 28%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_29 { left: 29%; } .percentageBar_verticalSM .percentageBarLabel_29 { top: 29%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_30 { left: 30%; } .percentageBar_verticalSM .percentageBarLabel_30 { top: 30%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_31 { left: 31%; } .percentageBar_verticalSM .percentageBarLabel_31 { top: 31%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_32 { left: 32%; } .percentageBar_verticalSM .percentageBarLabel_32 { top: 32%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_33 { left: 33%; } .percentageBar_verticalSM .percentageBarLabel_33 { top: 33%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_34 { left: 34%; } .percentageBar_verticalSM .percentageBarLabel_34 { top: 34%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_35 { left: 35%; } .percentageBar_verticalSM .percentageBarLabel_35 { top: 35%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_36 { left: 36%; } .percentageBar_verticalSM .percentageBarLabel_36 { top: 36%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_37 { left: 37%; } .percentageBar_verticalSM .percentageBarLabel_37 { top: 37%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_38 { left: 38%; } .percentageBar_verticalSM .percentageBarLabel_38 { top: 38%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_39 { left: 39%; } .percentageBar_verticalSM .percentageBarLabel_39 { top: 39%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_40 { left: 40%; } .percentageBar_verticalSM .percentageBarLabel_40 { top: 40%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_41 { left: 41%; } .percentageBar_verticalSM .percentageBarLabel_41 { top: 41%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_42 { left: 42%; } .percentageBar_verticalSM .percentageBarLabel_42 { top: 42%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_43 { left: 43%; } .percentageBar_verticalSM .percentageBarLabel_43 { top: 43%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_44 { left: 44%; } .percentageBar_verticalSM .percentageBarLabel_44 { top: 44%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_45 { left: 45%; } .percentageBar_verticalSM .percentageBarLabel_45 { top: 45%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_46 { left: 46%; } .percentageBar_verticalSM .percentageBarLabel_46 { top: 46%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_47 { left: 47%; } .percentageBar_verticalSM .percentageBarLabel_47 { top: 47%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_48 { left: 48%; } .percentageBar_verticalSM .percentageBarLabel_48 { top: 48%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_49 { left: 49%; } .percentageBar_verticalSM .percentageBarLabel_49 { top: 49%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_50 { left: 50%; } .percentageBar_verticalSM .percentageBarLabel_50 { top: 50%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_51 { left: 51%; } .percentageBar_verticalSM .percentageBarLabel_51 { top: 51%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_52 { left: 52%; } .percentageBar_verticalSM .percentageBarLabel_52 { top: 52%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_53 { left: 53%; } .percentageBar_verticalSM .percentageBarLabel_53 { top: 53%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_54 { left: 54%; } .percentageBar_verticalSM .percentageBarLabel_54 { top: 54%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_55 { left: 55%; } .percentageBar_verticalSM .percentageBarLabel_55 { top: 55%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_56 { left: 56%; } .percentageBar_verticalSM .percentageBarLabel_56 { top: 56%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_57 { left: 57%; } .percentageBar_verticalSM .percentageBarLabel_57 { top: 57%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_58 { left: 58%; } .percentageBar_verticalSM .percentageBarLabel_58 { top: 58%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_59 { left: 59%; } .percentageBar_verticalSM .percentageBarLabel_59 { top: 59%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_60 { left: 60%; } .percentageBar_verticalSM .percentageBarLabel_60 { top: 60%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_61 { left: 61%; } .percentageBar_verticalSM .percentageBarLabel_61 { top: 61%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_62 { left: 62%; } .percentageBar_verticalSM .percentageBarLabel_62 { top: 62%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_63 { left: 63%; } .percentageBar_verticalSM .percentageBarLabel_63 { top: 63%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_64 { left: 64%; } .percentageBar_verticalSM .percentageBarLabel_64 { top: 64%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_65 { left: 65%; } .percentageBar_verticalSM .percentageBarLabel_65 { top: 65%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_66 { left: 66%; } .percentageBar_verticalSM .percentageBarLabel_66 { top: 66%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_67 { left: 67%; } .percentageBar_verticalSM .percentageBarLabel_67 { top: 67%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_68 { left: 68%; } .percentageBar_verticalSM .percentageBarLabel_68 { top: 68%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_69 { left: 69%; } .percentageBar_verticalSM .percentageBarLabel_69 { top: 69%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_70 { left: 70%; } .percentageBar_verticalSM .percentageBarLabel_70 { top: 70%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_71 { left: 71%; } .percentageBar_verticalSM .percentageBarLabel_71 { top: 71%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_72 { left: 72%; } .percentageBar_verticalSM .percentageBarLabel_72 { top: 72%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_73 { left: 73%; } .percentageBar_verticalSM .percentageBarLabel_73 { top: 73%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_74 { left: 74%; } .percentageBar_verticalSM .percentageBarLabel_74 { top: 74%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_75 { left: 75%; } .percentageBar_verticalSM .percentageBarLabel_75 { top: 75%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_76 { left: 76%; } .percentageBar_verticalSM .percentageBarLabel_76 { top: 76%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_77 { left: 77%; } .percentageBar_verticalSM .percentageBarLabel_77 { top: 77%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_78 { left: 78%; } .percentageBar_verticalSM .percentageBarLabel_78 { top: 78%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_79 { left: 79%; } .percentageBar_verticalSM .percentageBarLabel_79 { top: 79%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_80 { left: 80%; } .percentageBar_verticalSM .percentageBarLabel_80 { top: 80%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_81 { left: 81%; } .percentageBar_verticalSM .percentageBarLabel_81 { top: 81%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_82 { left: 82%; } .percentageBar_verticalSM .percentageBarLabel_82 { top: 82%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_83 { left: 83%; } .percentageBar_verticalSM .percentageBarLabel_83 { top: 83%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_84 { left: 84%; } .percentageBar_verticalSM .percentageBarLabel_84 { top: 84%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_85 { left: 85%; } .percentageBar_verticalSM .percentageBarLabel_85 { top: 85%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_86 { left: 86%; } .percentageBar_verticalSM .percentageBarLabel_86 { top: 86%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_87 { left: 87%; } .percentageBar_verticalSM .percentageBarLabel_87 { top: 87%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_88 { left: 88%; } .percentageBar_verticalSM .percentageBarLabel_88 { top: 88%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_89 { left: 89%; } .percentageBar_verticalSM .percentageBarLabel_89 { top: 89%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_90 { left: 90%; } .percentageBar_verticalSM .percentageBarLabel_90 { top: 90%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_91 { left: 91%; } .percentageBar_verticalSM .percentageBarLabel_91 { top: 91%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_92 { left: 92%; } .percentageBar_verticalSM .percentageBarLabel_92 { top: 92%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_93 { left: 93%; } .percentageBar_verticalSM .percentageBarLabel_93 { top: 93%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_94 { left: 94%; } .percentageBar_verticalSM .percentageBarLabel_94 { top: 94%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_95 { left: 95%; } .percentageBar_verticalSM .percentageBarLabel_95 { top: 95%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_96 { left: 96%; } .percentageBar_verticalSM .percentageBarLabel_96 { top: 96%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_97 { left: 97%; } .percentageBar_verticalSM .percentageBarLabel_97 { top: 97%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_98 { left: 98%; } .percentageBar_verticalSM .percentageBarLabel_98 { top: 98%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_99 { left: 99%; } .percentageBar_verticalSM .percentageBarLabel_99 { top: 99%; left: 0; transform: translateY(-50%); z-index: 1; } .percentageBarLabel_100 { left: 100%; } .percentageBar_verticalSM .percentageBarLabel_100 { top: 100%; left: 0; transform: translateY(-50%); z-index: 1; } .mix-percentageBarLabel_inline_high { bottom: 38px; } .mix-percentageBarLabel_inline_med { bottom: 22px; } .mix-percentageBarLabel_inline_low { bottom: 6px; } .percentageBarLabel_inline:before { content: ' '; width: 1px; background: #dadada; position: absolute; top: 20px; } /** * Vertical on Small offset changes */ .percentageBar_verticalSM .mix-percentageBarLabel_inline_high, .percentageBar_verticalSM .mix-percentageBarLabel_inline_med, .percentageBar_verticalSM .mix-percentageBarLabel_inline_low { bottom: inherit; } .percentageBar_verticalSM .percentageBarLabel_inline:before { content: ' '; width: 1px; background: #dadada; position: absolute; top: 13px; left: -30px; } /** * Arrow line height settings for standard */ .percentageBarLabel_inline.mix-percentageBarLabel_inline_high:before { height: 44px; } .percentageBarLabel_inline.mix-percentageBarLabel_inline_med:before { height: 28px; } .percentageBarLabel_inline.mix-percentageBarLabel_inline_low:before { height: 12px; } /** * Arrow line width settings for vertical */ .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_high:before, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_med:before, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_low:before { height: 1px; width: 24px; } /** * Arrow positioning for standard */ .percentageBarLabel_inline.mix-percentageBarLabel_inline_high:after { bottom: -48px; } .percentageBarLabel_inline.mix-percentageBarLabel_inline_med:after { bottom: -32px; } .percentageBarLabel_inline.mix-percentageBarLabel_inline_low:after { bottom: -16px; } /** * Arrow positioning for vertical */ .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_high:after, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_med:after, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_low:after { bottom: auto; top: 0; left: -28px; } .mix-percentageBarLabel_pushSM > * { margin-top: 30px; } .timeline-events ol { padding: 0 24px; } .timeline-events a { font-size: 14px; } .mapContainer { display: block; } .mapContainer-bd { width: 100%; height: 220px; } .mapContainer-map { width: 100%; position: relative; height: 300px; } .mapContainer-map > iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .pagination > * { display: inline-block; font-size: 14px; font-weight: bold; line-height: 30px; height: 30px; width: 28px; border-radius: 2px; box-sizing: border-box; vertical-align: middle; } .pagination > .previous, .pagination > .next { border: 2px solid #dadada; font-size: 24px; width: 30px; height: 30px; background: url(/assets/media/images/arrowLarge-right_green.svg) no-repeat; background-size: 70% 70%; background-position: 50%; } .pagination > .previous:hover, .pagination > .next:hover { background-color: #eeeeee; } .pagination > .previous { transform: rotate(180deg); } .buttonGroup { width: 100%; display: block; font-size: 0; } .buttonGroup > * { display: block; text-align: center; } .buttonGroup > * { border-left: 2px solid #dadada; border-right: 2px solid #dadada; } .buttonGroup > *:first-child { border-radius: 4px 4px 0px 0px; border-top: 2px solid #dadada; } .buttonGroup > *:last-child { border-radius: 0px 0px 4px 4px; border-bottom: 2px solid #dadada; } .buttonGroup > * + * { border-top: 2px solid #dadada; } .buttonGroup > * > * { font-weight: bold; background: none; color: #00a0cc; padding: 12px 12px; vertical-align: middle; box-sizing: border-box; font-size: 14px; text-transform: uppercase; border: none; display: inline-block; text-decoration: none; width: 100%; } .buttonGroup > * > *:not([disabled]):not(.isDisabled):hover { color: #00a0cc; background-color: transparent; cursor: pointer; } .buttonGroup > * > *.isActive { background-color: transparent; } .buttonGroup > * > * { font-size: 14px; } .searchFilters { display: block; } .searchFilters > * { display: block; width: 100%; text-align: center; position: relative; margin: 12px 0px; } .searchFilter-separated:before { content: ''; width: 2px; height: 50px; background: #ebebeb; position: absolute; left: 0; top: -5px; } .searchFilter-minSpacing { margin: 0px 0px; } .dataTable tr { width: 100%; } .dataTable-row:first-child { border-top: 1px solid #5c6a6f; } .dataTable-row + .dataTable-row { border-top: 1px solid #5c6a6f; } .dataTable-row:last-child { border-bottom: 1px solid #5c6a6f; } .dataTable-row > td { padding: 4px; border-right: 1px solid #5c6a6f; } .dataTable-row > td:last-child { border-right: none; } .asideContent-right, .asideContent-left { margin-bottom: 12px; } .hdg_h1 { font-size: 26px; } .hdg_h2 { font-size: 22px; } .hdg_h3 { font-size: 20px; } .hdg_h4 { font-size: 18px; } .hdg_h5 { font-size: 16px; } .hdg_h6 { font-size: 12px; } .newsTile { height: 100px; margin-bottom: 12px; } .newsTile_primary { height: 200px; } .inputError { font-size: 10px; } .header-logo { width: 50%; max-width: 400px; float: none; margin: 0 auto 12px auto; } .header-logo > * { display: block; width: 100%; height: auto; text-align: center; } .header-search { width: 100%; float: none; padding: 0px 12px; } .headerMainNav { display: block; width: 100%; padding: 30px; box-sizing: border-box; } .headerMainNav > * { display: block; text-align: left; white-space: nowrap; margin-bottom: 10px; } .headerNavLink { line-height: 16px; } .headerDropdown-trigger { cursor: pointer; } .headerDropdown-panel { display: none; background: #5c6a6f; z-index: 1; text-align: left; padding: 0px 20px 20px; } .headerDropdown.isActive > .headerDropdown-panel, .no-touch .headerDropdown:hover > .headerDropdown-panel { display: block; z-index: 3; } .heroTitle { font-size: 36px; margin: 20px 60px; line-height: 1.2; } .heroBody { color: #ffffff; margin: 20px 0px 0px 0px; width: 100%; padding: 25px 30px; background-color: #77888e; } .heroBody > p { font-size: 18px; margin: 10px 0px 15px; } .heroBody > .btn { width: 100%; } .footerMenu { margin-left: 20px; } .fieldset-submit { float: none; width: 100%; } .grid { margin-left: -2.6041666667%; } .grid-col { width: 97.461928934%; margin-left: 2.538071066%; left: auto; } .mix-grid-col_1of12MD { width: 5.7952622673%; } .mix-grid-col_push1of12MD { left: 8.3333333333%; } .mix-grid-col_pull1of12MD { left: -8.3333333333%; } .mix-grid-col_2of12MD { width: 14.1285956007%; } .mix-grid-col_push2of12MD { left: 16.6666666667%; } .mix-grid-col_pull2of12MD { left: -16.6666666667%; } .mix-grid-col_3of12MD { width: 22.461928934%; } .mix-grid-col_push3of12MD { left: 25%; } .mix-grid-col_pull3of12MD { left: -25%; } .mix-grid-col_4of12MD { width: 30.7952622673%; } .mix-grid-col_push4of12MD { left: 33.3333333333%; } .mix-grid-col_pull4of12MD { left: -33.3333333333%; } .mix-grid-col_5of12MD { width: 39.1285956007%; } .mix-grid-col_push5of12MD { left: 41.6666666667%; } .mix-grid-col_pull5of12MD { left: -41.6666666667%; } .mix-grid-col_6of12MD { width: 47.461928934%; } .mix-grid-col_push6of12MD { left: 50%; } .mix-grid-col_pull6of12MD { left: -50%; } .mix-grid-col_7of12MD { width: 55.7952622673%; } .mix-grid-col_push7of12MD { left: 58.3333333333%; } .mix-grid-col_pull7of12MD { left: -58.3333333333%; } .mix-grid-col_8of12MD { width: 64.1285956007%; } .mix-grid-col_push8of12MD { left: 66.6666666667%; } .mix-grid-col_pull8of12MD { left: -66.6666666667%; } .mix-grid-col_9of12MD { width: 72.461928934%; } .mix-grid-col_push9of12MD { left: 75%; } .mix-grid-col_pull9of12MD { left: -75%; } .mix-grid-col_10of12MD { width: 80.7952622673%; } .mix-grid-col_push10of12MD { left: 83.3333333333%; } .mix-grid-col_pull10of12MD { left: -83.3333333333%; } .mix-grid-col_11of12MD { width: 89.1285956007%; } .mix-grid-col_push11of12MD { left: 91.6666666667%; } .mix-grid-col_pull11of12MD { left: -91.6666666667%; } .mix-grid-col_12of12MD { width: 97.461928934%; } .mix-grid-col_push12of12MD { left: 100%; } .mix-grid-col_pull12of12MD { left: -100%; } .mix-grid-col_reverseMD { float: right; } .mix-grid-col_verticalPushMD { margin-top: 20px; } .mix-grid-col_spacedSM { margin-bottom: 0; } .mix-buffer_onlySM { padding: 0; } .mix-buffer_thickMD { padding: 0 20px; } .mix-buffer_onlyMD { padding: 0 10px; } .vr { margin-bottom: 1em; } .vr_2n { margin-bottom: 2em; } .vr_3n { margin-bottom: 3em; } .vr_4n { margin-bottom: 4em; } .vr_5n { margin-bottom: 5em; } .vr_6n { margin-bottom: 6em; } .vr_7n { margin-bottom: 7em; } .blocks { margin-left: -3.2258064516%; } .blocks > * { margin-left: 3.125%; margin-bottom: 3.125%; } .mix-blocks_2upMD > * { width: 46.875%; } .mix-blocks_3upMD > * { width: 30.2083333333%; } .mix-blocks_4upMD > * { width: 21.875%; } .mix-blocks-item_hero2upMD2wide { width: 96.875%; } .mix-blocks-item_hero3upMD2wide { width: 63.5416666667%; } .mix-blocks-item_hero4upMD2wide { width: 46.875%; } .mix-blocks_equal > * { margin-bottom: 0; } .mix-blocks_equal > * > * { margin-bottom: 24px; } .mix-hList_stackMobile > * { float: left; } .hList.mix-hList_stackMobile > * + * { margin: 0 0 0 5px; } .hList_2n.mix-hList_stackMobile > * + * { margin: 0 0 0 10px; } .hList_3n.mix-hList_stackMobile > * + * { margin: 0 0 0 15px; } .hList_4n.mix-hList_stackMobile > * + * { margin: 0 0 0 20px; } .worse{ margin-left:400px; } .better{ } .media-md { float: left; } media-md_Image{ padding:4px; margin:4px;} .mix-media-md_ctr > * { margin: 0; } .media_spaced > .media-md { margin: 0 10px 0 0; } .mix-media-bd_spaced { padding-left: 24px; } .mix-media-md_fixedWidth { width: 400px; } .articleSection-md { float: left; } .container { padding: 25px 30px; } .staffListingItem { display: table; width: 100%; } .staffListingItem:first-child { border-top: 1px solid #5c6a6f; } .staffListingItem + .staffListingItem { border-top: 1px solid #5c6a6f; } .staffListingItem:last-child { border-bottom: 1px solid #5c6a6f; } .staffListingItem-name { display: table-cell; width: 40%; border-right: 1px solid #5c6a6f; padding: 24px 24px 24px 0px; } .staffListingItem-title { display: table-cell; padding: 24px; border-top: none; } .inputCombo { margin-bottom: 24px; display: -webkit-flex; display: flex; flex-direction: row; -webkit-flex-direction: row; height: 42px; } .inputCombo:before, .inputCombo:after { content: " "; display: table; } .inputCombo:after { clear: both; } .inputCombo-inputWrap { display: block; padding-right: 24px; width: auto; -webkit-flex-grow: 1; flex-grow: 1; } .inputCombo > .inputCombo-submit { width: auto; display: inline-block; } .mix-inputCombo-inputWrap_lightPad { padding-right: 12px; } .newsListing-col { display: inline-block; vertical-align: top; width: 48.829268292%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .newsListing-col + .newsListing-col { margin-left: 2.341463414%; } .findAndCompare-bd { height: 40px; } .findAndCompare-bd > * { padding: 0px 16px; height: auto; float: left; position: relative; width: auto; text-align: left; margin-bottom: 0px; } .findAndCompare-bd > *:first-child { padding-left: 0px; padding-top: 6px; } .findAndCompare-bd > *:first-child:after { content: ''; width: 1px; height: 42px; background: #ebebeb; position: absolute; right: 0; top: 0; } .findAndCompare-bd > *:last-child { padding-right: 0px; padding-top: 2px; float: none; overflow: hidden; } .findAndCompare-bd > *:last-child:before { content: ''; width: 1px; height: 42px; background: #ebebeb; position: absolute; left: 0; top: 0; } .findAndCompare_embedded { max-width: 575px; margin: 0px auto; } .findAndCompare-bd .selectMenu-input { max-width: 120px; } .radioGroup > * { display: block; } .searchResultsHeaderTooltips { margin-bottom: 24px; } .searchResults-item { padding: 24px 0px; display: flex; flex-direction: row; } .searchResults-item > * { display: inline-block; } .searchResultsHeader { display: flex; flex-direction: row; } .searchResultsHeader > * { display: inline-block; line-height: 34px; } .searchResultsHeader > .hasTooltip { text-decoration: underline; cursor: pointer; } .searchResultsHeader > .hasTooltip > a { color: #5c6a6f; } .searchResultsHeader > .isSelected { background: #ebebeb; } .searchResults-name { padding-right: 12px; flex-grow: 1; width: auto; margin-bottom: 0px; } .searchResultsHeader-name { flex-grow: 1; width: auto; } .searchResults-name-bd { font-size: 14px; } .searchResults-distance { font-size: 16px; width: 148px; flex-shrink: 0; padding: 0px 12px; margin-bottom: 0px; } .searchResultsHeader-distance { width: 148px; } .searchResults-transplantVolume { text-align: center; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; width: 170px; flex-shrink: 0; padding: 0px 12px; } .searchResultsHeader-transplantVolume { width: 170px; } .searchResults-transplantVolume-label { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; } .searchResults-transplantVolume-hd { font-size: 28px; line-height: 28px; } .searchResults-transplantVolume-bd { text-transform: uppercase; line-height: 18px; } .searchResults-transplantRate { display: none; } .searchResultsHeader-transplantRate { display: none; } .searchResults-transplantRate-label { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; } .searchResults-transplantRate-hd { font-size: 28px; line-height: 28px; max-width: 100px; margin: 0 auto; } .searchResults-transplantRate-bd { text-transform: uppercase; font-size: 16px; line-height: 18px; max-width: 100px; margin: 0 auto; } .searchResults-outcomeRating, .searchResultsHeader-outcomeRating { width: 240px; flex-shrink: 0; } .searchResults-outcomeRating-label { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; } .searchResults-distance-label, .searchResults-name-label { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; } .searchFilters > * { width: auto; text-align: left; margin-bottom: 0px; position: relative; padding: 0px 6px; box-sizing: border-box; display: inline-block; } .searchFilters > *:last-child { display: block; } .searchFilter-separated:before { content: ''; width: 2px; height: 50px; background: #B3B3B3; position: absolute; left: 0; top: 0; } .searchFilter-breakMD { display: block; } .searchFilter-minSpacing { padding: 0px 0px !important; } .demoGroup > *:last-child { margin-left: 24px; } .summaryList { text-align: center; } .summaryList > * { display: inline-block; height: 100px; vertical-align: middle; padding: 0px 12px; box-sizing: border-box; } .summaryList > * + * { border-left: 1px solid #E1E1E1; } .summaryList > * + *::before { display: none; } .summaryItem { width: 200px; } .outcomeTable-column { display: inline-block; border-right: none; width: 182px; margin: 0; } .outcomeTable-column_double { width: 364px; } .outcomeTable-cell { width: 181px; height: 127px; display: inline-table; box-sizing: border-box; vertical-align: top; padding: 8px 4px; border-top: 1px solid #E1E1E1; } .mix-outcomeTable-column_showLG { display: none; } .percentageBar_verticalSM { height: auto; width: 80%; } .percentageBar_verticalSM > .percentageBar-bd { height: 12px; width: 100%; background: #d0dedd; position: relative; float: left; } .percentageBar_verticalSM > .percentageBar-bd > * { height: 24px; background: url(/assets/media/images/barimg.png); position: absolute; top: 0; left: 0; } .percentageBar_verticalSM > .mix-percentageBar-bd_thick { height: 36px; width: 100%; } .percentageBar_verticalSM > .mix-percentageBar-bd_thick > * { left: 0; height: 36px; } .percentageBar_verticalSM .percentageBarLabels { width: 100%; height: 102px; position: relative; padding: 12px; box-sizing: border-box; display: inline-block; left: auto; } .percentageBar_verticalSM .percentageBar_0 { height: inherit; } .percentageBar_0 { width: 0% !important; } .percentageBar_verticalSM .percentageBar_1 { height: inherit; } .percentageBar_1 { width: 1% !important; } .percentageBar_verticalSM .percentageBar_2 { height: inherit; } .percentageBar_2 { width: 2% !important; } .percentageBar_verticalSM .percentageBar_3 { height: inherit; } .percentageBar_3 { width: 3% !important; } .percentageBar_verticalSM .percentageBar_4 { height: inherit; } .percentageBar_4 { width: 4% !important; } .percentageBar_verticalSM .percentageBar_5 { height: inherit; } .percentageBar_5 { width: 5% !important; } .percentageBar_verticalSM .percentageBar_6 { height: inherit; } .percentageBar_6 { width: 6% !important; } .percentageBar_verticalSM .percentageBar_7 { height: inherit; } .percentageBar_7 { width: 7% !important; } .percentageBar_verticalSM .percentageBar_8 { height: inherit; } .percentageBar_8 { width: 8% !important; } .percentageBar_verticalSM .percentageBar_9 { height: inherit; } .percentageBar_9 { width: 9% !important; } .percentageBar_verticalSM .percentageBar_10 { height: inherit; } .percentageBar_10 { width: 10% !important; } .percentageBar_verticalSM .percentageBar_11 { height: inherit; } .percentageBar_11 { width: 11% !important; } .percentageBar_verticalSM .percentageBar_12 { height: inherit; } .percentageBar_12 { width: 12% !important; } .percentageBar_verticalSM .percentageBar_13 { height: inherit; } .percentageBar_13 { width: 13% !important; } .percentageBar_verticalSM .percentageBar_14 { height: inherit; } .percentageBar_14 { width: 14% !important; } .percentageBar_verticalSM .percentageBar_15 { height: inherit; } .percentageBar_15 { width: 15% !important; } .percentageBar_verticalSM .percentageBar_16 { height: inherit; } .percentageBar_16 { width: 16% !important; } .percentageBar_verticalSM .percentageBar_17 { height: inherit; } .percentageBar_17 { width: 17% !important; } .percentageBar_verticalSM .percentageBar_18 { height: inherit; } .percentageBar_18 { width: 18% !important; } .percentageBar_verticalSM .percentageBar_19 { height: inherit; } .percentageBar_19 { width: 19% !important; } .percentageBar_verticalSM .percentageBar_20 { height: inherit; } .percentageBar_20 { width: 20% !important; } .percentageBar_verticalSM .percentageBar_21 { height: inherit; } .percentageBar_21 { width: 21% !important; } .percentageBar_verticalSM .percentageBar_22 { height: inherit; } .percentageBar_22 { width: 22% !important; } .percentageBar_verticalSM .percentageBar_23 { height: inherit; } .percentageBar_23 { width: 23% !important; } .percentageBar_verticalSM .percentageBar_24 { height: inherit; } .percentageBar_24 { width: 24% !important; } .percentageBar_verticalSM .percentageBar_25 { height: inherit; } .percentageBar_25 { width: 25% !important; } .percentageBar_verticalSM .percentageBar_26 { height: inherit; } .percentageBar_26 { width: 26% !important; } .percentageBar_verticalSM .percentageBar_27 { height: inherit; } .percentageBar_27 { width: 27% !important; } .percentageBar_verticalSM .percentageBar_28 { height: inherit; } .percentageBar_28 { width: 28% !important; } .percentageBar_verticalSM .percentageBar_29 { height: inherit; } .percentageBar_29 { width: 29% !important; } .percentageBar_verticalSM .percentageBar_30 { height: inherit; } .percentageBar_30 { width: 30% !important; } .percentageBar_verticalSM .percentageBar_31 { height: inherit; } .percentageBar_31 { width: 31% !important; } .percentageBar_verticalSM .percentageBar_32 { height: inherit; } .percentageBar_32 { width: 32% !important; } .percentageBar_verticalSM .percentageBar_33 { height: inherit; } .percentageBar_33 { width: 33% !important; } .percentageBar_verticalSM .percentageBar_34 { height: inherit; } .percentageBar_34 { width: 34% !important; } .percentageBar_verticalSM .percentageBar_35 { height: inherit; } .percentageBar_35 { width: 35% !important; } .percentageBar_verticalSM .percentageBar_36 { height: inherit; } .percentageBar_36 { width: 36% !important; } .percentageBar_verticalSM .percentageBar_37 { height: inherit; } .percentageBar_37 { width: 37% !important; } .percentageBar_verticalSM .percentageBar_38 { height: inherit; } .percentageBar_38 { width: 38% !important; } .percentageBar_verticalSM .percentageBar_39 { height: inherit; } .percentageBar_39 { width: 39% !important; } .percentageBar_verticalSM .percentageBar_40 { height: inherit; } .percentageBar_40 { width: 40% !important; } .percentageBar_verticalSM .percentageBar_41 { height: inherit; } .percentageBar_41 { width: 41% !important; } .percentageBar_verticalSM .percentageBar_42 { height: inherit; } .percentageBar_42 { width: 42% !important; } .percentageBar_verticalSM .percentageBar_43 { height: inherit; } .percentageBar_43 { width: 43% !important; } .percentageBar_verticalSM .percentageBar_44 { height: inherit; } .percentageBar_44 { width: 44% !important; } .percentageBar_verticalSM .percentageBar_45 { height: inherit; } .percentageBar_45 { width: 45% !important; } .percentageBar_verticalSM .percentageBar_46 { height: inherit; } .percentageBar_46 { width: 46% !important; } .percentageBar_verticalSM .percentageBar_47 { height: inherit; } .percentageBar_47 { width: 47% !important; } .percentageBar_verticalSM .percentageBar_48 { height: inherit; } .percentageBar_48 { width: 48% !important; } .percentageBar_verticalSM .percentageBar_49 { height: inherit; } .percentageBar_49 { width: 49% !important; } .percentageBar_verticalSM .percentageBar_50 { height: inherit; } .percentageBar_50 { width: 50% !important; } .percentageBar_verticalSM .percentageBar_51 { height: inherit; } .percentageBar_51 { width: 51% !important; } .percentageBar_verticalSM .percentageBar_52 { height: inherit; } .percentageBar_52 { width: 52% !important; } .percentageBar_verticalSM .percentageBar_53 { height: inherit; } .percentageBar_53 { width: 53% !important; } .percentageBar_verticalSM .percentageBar_54 { height: inherit; } .percentageBar_54 { width: 54% !important; } .percentageBar_verticalSM .percentageBar_55 { height: inherit; } .percentageBar_55 { width: 55% !important; } .percentageBar_verticalSM .percentageBar_56 { height: inherit; } .percentageBar_56 { width: 56% !important; } .percentageBar_verticalSM .percentageBar_57 { height: inherit; } .percentageBar_57 { width: 57% !important; } .percentageBar_verticalSM .percentageBar_58 { height: inherit; } .percentageBar_58 { width: 58% !important; } .percentageBar_verticalSM .percentageBar_59 { height: inherit; } .percentageBar_59 { width: 59% !important; } .percentageBar_verticalSM .percentageBar_60 { height: inherit; } .percentageBar_60 { width: 60% !important; } .percentageBar_verticalSM .percentageBar_61 { height: inherit; } .percentageBar_61 { width: 61% !important; } .percentageBar_verticalSM .percentageBar_62 { height: inherit; } .percentageBar_62 { width: 62% !important; } .percentageBar_verticalSM .percentageBar_63 { height: inherit; } .percentageBar_63 { width: 63% !important; } .percentageBar_verticalSM .percentageBar_64 { height: inherit; } .percentageBar_64 { width: 64% !important; } .percentageBar_verticalSM .percentageBar_65 { height: inherit; } .percentageBar_65 { width: 65% !important; } .percentageBar_verticalSM .percentageBar_66 { height: inherit; } .percentageBar_66 { width: 66% !important; } .percentageBar_verticalSM .percentageBar_67 { height: inherit; } .percentageBar_67 { width: 67% !important; } .percentageBar_verticalSM .percentageBar_68 { height: inherit; } .percentageBar_68 { width: 68% !important; } .percentageBar_verticalSM .percentageBar_69 { height: inherit; } .percentageBar_69 { width: 69% !important; } .percentageBar_verticalSM .percentageBar_70 { height: inherit; } .percentageBar_70 { width: 70% !important; } .percentageBar_verticalSM .percentageBar_71 { height: inherit; } .percentageBar_71 { width: 71% !important; } .percentageBar_verticalSM .percentageBar_72 { height: inherit; } .percentageBar_72 { width: 72% !important; } .percentageBar_verticalSM .percentageBar_73 { height: inherit; } .percentageBar_73 { width: 73% !important; } .percentageBar_verticalSM .percentageBar_74 { height: inherit; } .percentageBar_74 { width: 74% !important; } .percentageBar_verticalSM .percentageBar_75 { height: inherit; } .percentageBar_75 { width: 75% !important; } .percentageBar_verticalSM .percentageBar_76 { height: inherit; } .percentageBar_76 { width: 76% !important; } .percentageBar_verticalSM .percentageBar_77 { height: inherit; } .percentageBar_77 { width: 77% !important; } .percentageBar_verticalSM .percentageBar_78 { height: inherit; } .percentageBar_78 { width: 78% !important; } .percentageBar_verticalSM .percentageBar_79 { height: inherit; } .percentageBar_79 { width: 79% !important; } .percentageBar_verticalSM .percentageBar_80 { height: inherit; } .percentageBar_80 { width: 80% !important; } .percentageBar_verticalSM .percentageBar_81 { height: inherit; } .percentageBar_81 { width: 81% !important; } .percentageBar_verticalSM .percentageBar_82 { height: inherit; } .percentageBar_82 { width: 82% !important; } .percentageBar_verticalSM .percentageBar_83 { height: inherit; } .percentageBar_83 { width: 83% !important; } .percentageBar_verticalSM .percentageBar_84 { height: inherit; } .percentageBar_84 { width: 84% !important; } .percentageBar_verticalSM .percentageBar_85 { height: inherit; } .percentageBar_85 { width: 85% !important; } .percentageBar_verticalSM .percentageBar_86 { height: inherit; } .percentageBar_86 { width: 86% !important; } .percentageBar_verticalSM .percentageBar_87 { height: inherit; } .percentageBar_87 { width: 87% !important; } .percentageBar_verticalSM .percentageBar_88 { height: inherit; } .percentageBar_88 { width: 88% !important; } .percentageBar_verticalSM .percentageBar_89 { height: inherit; } .percentageBar_89 { width: 89% !important; } .percentageBar_verticalSM .percentageBar_90 { height: inherit; } .percentageBar_90 { width: 90% !important; } .percentageBar_verticalSM .percentageBar_91 { height: inherit; } .percentageBar_91 { width: 91% !important; } .percentageBar_verticalSM .percentageBar_92 { height: inherit; } .percentageBar_92 { width: 92% !important; } .percentageBar_verticalSM .percentageBar_93 { height: inherit; } .percentageBar_93 { width: 93% !important; } .percentageBar_verticalSM .percentageBar_94 { height: inherit; } .percentageBar_94 { width: 94% !important; } .percentageBar_verticalSM .percentageBar_95 { height: inherit; } .percentageBar_95 { width: 95% !important; } .percentageBar_verticalSM .percentageBar_96 { height: inherit; } .percentageBar_96 { width: 96% !important; } .percentageBar_verticalSM .percentageBar_97 { height: inherit; } .percentageBar_97 { width: 97% !important; } .percentageBar_verticalSM .percentageBar_98 { height: inherit; } .percentageBar_98 { width: 98% !important; } .percentageBar_verticalSM .percentageBar_99 { height: inherit; } .percentageBar_99 { width: 99% !important; } .percentageBar_verticalSM .percentageBar_100 { height: inherit; } .percentageBar_100 { width: 100% !important; } /** * Override sm styles for inline switcher */ .percentageBarLabel_inlineSM { position: absolute; width: 90px; margin-left: -45px; text-align: center; } .percentageBarLabel_inlineSM > .percentageBarLabel-hd { font-size: 14px; text-transform: uppercase; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #5c6a6f; line-height: 16px; } .percentageBarLabel_inlineSM > .percentageBarLabel-bd { font-size: 28px; text-transform: uppercase; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #5c6a6f; line-height: 30px; display: block; } .percentageBarLabel_inlineSM > .percentageBarLabel-ft { font-size: 14px; text-transform: uppercase; font-family: "oswald", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #5c6a6f; line-height: 16px; display: block; } .percentageBarLabel_inlineSM.percentageBarLabel_lineTop:before { content: ' '; width: 2px; height: 48px; background: #9dbcbb; position: absolute; top: -54px; left: 50%; margin-left: -1px; } .percentageBarLabel_inline:before, .percentageBar_verticalSM .percentageBarLabel_inline:before { content: ' '; width: 1px; background: #dadada; position: absolute; top: 20px; left: auto; } .percentageBar_verticalSM .percentageBarLabel_inline:after { content: ' '; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #5c6a6f; border-bottom: none; position: absolute; left: 0; margin-left: -8px; margin-top: 6px; z-index: 2; } .percentageBar_verticalSM .percentageBarLabel_0 { left: 0%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_1 { left: 1%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_2 { left: 2%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_3 { left: 3%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_4 { left: 4%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_5 { left: 5%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_6 { left: 6%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_7 { left: 7%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_8 { left: 8%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_9 { left: 9%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_10 { left: 10%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_11 { left: 11%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_12 { left: 12%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_13 { left: 13%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_14 { left: 14%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_15 { left: 15%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_16 { left: 16%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_17 { left: 17%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_18 { left: 18%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_19 { left: 19%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_20 { left: 20%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_21 { left: 21%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_22 { left: 22%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_23 { left: 23%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_24 { left: 24%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_25 { left: 25%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_26 { left: 26%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_27 { left: 27%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_28 { left: 28%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_29 { left: 29%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_30 { left: 30%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_31 { left: 31%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_32 { left: 32%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_33 { left: 33%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_34 { left: 34%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_35 { left: 35%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_36 { left: 36%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_37 { left: 37%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_38 { left: 38%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_39 { left: 39%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_40 { left: 40%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_41 { left: 41%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_42 { left: 42%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_43 { left: 43%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_44 { left: 44%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_45 { left: 45%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_46 { left: 46%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_47 { left: 47%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_48 { left: 48%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_49 { left: 49%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_50 { left: 50%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_51 { left: 51%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_52 { left: 52%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_53 { left: 53%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_54 { left: 54%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_55 { left: 55%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_56 { left: 56%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_57 { left: 57%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_58 { left: 58%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_59 { left: 59%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_60 { left: 60%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_61 { left: 61%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_62 { left: 62%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_63 { left: 63%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_64 { left: 64%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_65 { left: 65%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_66 { left: 66%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_67 { left: 67%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_68 { left: 68%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_69 { left: 69%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_70 { left: 70%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_71 { left: 71%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_72 { left: 72%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_73 { left: 73%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_74 { left: 74%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_75 { left: 75%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_76 { left: 76%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_77 { left: 77%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_78 { left: 78%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_79 { left: 79%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_80 { left: 80%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_81 { left: 81%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_82 { left: 82%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_83 { left: 83%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_84 { left: 84%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_85 { left: 85%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_86 { left: 86%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_87 { left: 87%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_88 { left: 88%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_89 { left: 89%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_90 { left: 90%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_91 { left: 91%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_92 { left: 92%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_93 { left: 93%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_94 { left: 94%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_95 { left: 95%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_96 { left: 96%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_97 { left: 97%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_98 { left: 98%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_99 { left: 99%; top: auto; transform: none; } .percentageBar_verticalSM .percentageBarLabel_100 { left: 100%; top: auto; transform: none; } .mix-percentageBarLabel_inline_high, .percentageBar_verticalSM .mix-percentageBarLabel_inline_high { bottom: 38px; } .mix-percentageBarLabel_inline_med, .percentageBar_verticalSM .mix-percentageBarLabel_inline_med { bottom: 22px; } .mix-percentageBarLabel_inline_low, .percentageBar_verticalSM .mix-percentageBarLabel_inline_low { bottom: 6px; } /** * Arrow line height settings for standard */ .percentageBarLabel_inline.mix-percentageBarLabel_inline_high:before, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_high:before { height: 44px; width: 1px; } .percentageBarLabel_inline.mix-percentageBarLabel_inline_med:before, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_med:before { height: 28px; width: 1px; } .percentageBarLabel_inline.mix-percentageBarLabel_inline_low:before, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_low:before { height: 12px; width: 1px; } /** * Arrow positioning for standard */ .percentageBarLabel_inline.mix-percentageBarLabel_inline_high:after, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_high:after { bottom: -48px; left: 0; top: auto; } .percentageBarLabel_inline.mix-percentageBarLabel_inline_med:after, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_med:after { bottom: -32px; left: 0; top: auto; } .percentageBarLabel_inline.mix-percentageBarLabel_inline_low:after, .percentageBar_verticalSM .percentageBarLabel_inline.mix-percentageBarLabel_inline_low:after { bottom: -16px; left: 0; top: auto; } .mix-percentageBarLabel_pushSM > * { margin-top: 0px; } .timeline-events ol { padding: 0 48px; } .timeline-events a { font-size: 16px; } .mapContainer { display: flex; } .mapContainer-bd { width: 260px; flex: 0 0 260px; } .mapContainer-map { width: 100%; } .pagination > * { display: inline-block; font-size: 18px; font-weight: bold; line-height: 40px; height: 40px; width: 35px; border-radius: 2px; box-sizing: border-box; vertical-align: middle; } .pagination > .previous, .pagination > .next { border: 2px solid #dadada; font-size: 30px; width: 40px; height: 40px; } .buttonGroup { display: block; font-size: 0; } .buttonGroup > * { display: inline-block; } .buttonGroup > * { border-top: 2px solid #dadada; border-bottom: 2px solid #dadada; border-right: none; } .buttonGroup > *:first-child { border-radius: 4px 0px 0px 4px; border-left: 2px solid #dadada; } .buttonGroup > *:last-child { border-radius: 0px 4px 4px 0px; border-right: 2px solid #dadada; } .buttonGroup > * + * { border-left: 2px solid #dadada; } .buttonGroup > * > * { font-weight: bold; background: none; color: #3d91bd; padding: 12px 12px; vertical-align: middle; box-sizing: border-box; font-size: 14px; text-transform: uppercase; border: none; display: inline-block; text-decoration: none; } .buttonGroup > * > * { font-size: 12px; } .dataTable-row > td { padding: 24px; border-right: 1px solid #5c6a6f; } .asideContent-right { float: right; width: 400px; margin: 0px 0px 24px 24px; } .asideContent-left { float: left; width: 400px; margin: 0px 24px 24px 0px; } .hdg_h1 { font-size: 40px; } .hdg_h2 { font-size: 36px; } .hdg_h3 { font-size: 30px; } .hdg_h4 { font-size: 22px; } .hdg_h5 { font-size: 18px; } .hdg_h6 { font-size: 14px; } .newsTile { height: 155px; margin-bottom: 24px; } .newsTile_primary { height: 400px; } .header-search { width: 100%; padding: 0px 24px; } .headerMainNav { display: table; width: 100%; padding: 0px; } .headerMainNav > * { display: table-cell; width: 1025px; text-align: center; white-space: nowrap; } .headerNavLink { color: #ffffff; text-transform: uppercase; font-size: 11px; line-height: 40px; letter-spacing: 1px; font-family: "montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif; } .headerDropdown-trigger { cursor: pointer; } .headerDropdown-panel { display: block; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; position: absolute; clip: rect(0 0 0 0); overflow: hidden; background: #323232; z-index: 1; text-align: left; padding: 0px 20px 20px; } .headerDropdown.isActive > .headerDropdown-panel, .no-touch .headerDropdown:hover > .headerDropdown-panel, .headerDropdown.isTabbed > .headerDropdown-panel { display: block; position: absolute; left: 0px; width: auto; height: auto; margin: auto; padding: auto; border: auto; clip: auto; overflow: auto; z-index: 3; } .mix-headerDropdown_last > .headerDropdown-panel { right: 0px; left: auto !important; } .heroTitle { font-size: 56px; margin: 20px 60px; line-height: 1.2; } .heroBody { color: #ffffff; margin: 20px 60px; width: 500px; padding: 25px 30px; background-color: rgba(0, 0, 0, 0.25); } .heroBody > p { font-size: 18px; margin: 10px 0px 15px; } .heroBody > .btn { width: auto; } .fieldset-submit { float: right; width: auto; } .header-logo > * { width: 100%; } .header-search { display: none; } .headerNav { display: none; } .footer-bd { display: none; }