1 /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
3 * 1. Set default font family to sans-serif.
4 * 2. Prevent iOS text size adjust after orientation change, without disabling
8 font-family: sans-serif;
10 -ms-text-size-adjust: 100%;
12 -webkit-text-size-adjust: 100%;
16 * Remove default margin.
21 /* HTML5 display definitions
22 ========================================================================== */
24 * Correct `block` display not defined for any HTML5 element in IE 8/9.
25 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
26 * Correct `block` display not defined for `main` in IE 11.
28 article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
32 * 1. Correct `inline-block` display not defined in IE 8/9.
33 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
35 audio, canvas, progress, video {
36 display: inline-block;
38 vertical-align: baseline;
42 * Prevent modern browsers from displaying `audio` without controls.
43 * Remove excess height in iOS 5 devices.
45 audio:not([controls]) {
50 * Address `[hidden]` styling not present in IE 8/9/10.
51 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
57 ========================================================================== */
59 * Remove the gray background color from active links in IE 10.
62 background: transparent; }
65 * Improve readability when focused and also mouse hovered in all browsers.
70 /* Text-level semantics
71 ========================================================================== */
73 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
76 border-bottom: 1px dotted; }
79 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
85 * Address styling not present in Safari and Chrome.
91 * Address variable `h1` font-size and margin within `section` and `article`
92 * contexts in Firefox 4+, Safari, and Chrome.
99 * Address styling not present in IE 8/9.
106 * Address inconsistent and variable font size in all browsers.
112 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
118 vertical-align: baseline; }
127 ========================================================================== */
129 * Remove border when inside `a` element in IE 8/9/10.
135 * Correct overflow not hidden in IE 9/10/11.
141 ========================================================================== */
143 * Address margin not present in IE 8/9 and Safari.
149 * Address differences between Firefox and other browsers.
152 box-sizing: content-box;
156 * Contain overflow in all browsers.
162 * Address odd `em`-unit font size rendering in all browsers.
164 code, kbd, pre, samp {
165 font-family: monospace, monospace;
169 ========================================================================== */
171 * Known limitation: by default, Chrome and Safari on OS X allow very limited
172 * styling of `select`, unless a `border` property is set.
175 * 1. Correct color not being inherited.
176 * Known issue: affects color of disabled elements.
177 * 2. Correct font properties not being inherited.
178 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
180 button, input, optgroup, select, textarea {
189 * Address `overflow` set to `hidden` in IE 8/9/10/11.
195 * Address inconsistent `text-transform` inheritance for `button` and `select`.
196 * All other form control elements do not inherit `text-transform` values.
197 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
198 * Correct `select` style inheritance in Firefox.
201 text-transform: none; }
204 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
205 * and `video` controls.
206 * 2. Correct inability to style clickable `input` types in iOS.
207 * 3. Improve usability and consistency of cursor style between image-type
208 * `input` and others.
210 button, html input[type="button"], input[type="reset"], input[type="submit"] {
211 -webkit-appearance: button;
217 * Re-set default cursor for disabled elements.
219 button[disabled], html input[disabled] {
223 * Remove inner padding and border in Firefox 4+.
225 button::-moz-focus-inner, input::-moz-focus-inner {
230 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
234 line-height: normal; }
237 * It's recommended that you don't attempt to style these elements.
238 * Firefox's implementation doesn't respect box-sizing, padding, or width.
240 * 1. Address box sizing set to `content-box` in IE 8/9/10.
241 * 2. Remove excess padding in IE 8/9/10.
243 input[type="checkbox"], input[type="radio"] {
244 box-sizing: border-box;
250 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
251 * `font-size` values of the `input`, it causes the cursor style of the
252 * decrement button to change from `default` to `text`.
254 input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
258 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
259 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
260 * (include `-moz` to future-proof).
262 input[type="search"] {
263 -webkit-appearance: textfield;
266 box-sizing: content-box; }
269 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
270 * Safari (but not Chrome) clips the cancel button when the search input has
271 * padding (and `textfield` appearance).
273 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
274 -webkit-appearance: none; }
277 * Define consistent border, margin, and padding.
280 border: 1px solid #c0c0c0;
282 padding: 0.35em 0.625em 0.75em; }
285 * 1. Correct `color` not being inherited in IE 8/9/10/11.
286 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
295 * Remove default vertical scrollbar in IE 8/9/10/11.
301 * Don't inherit the `font-weight` (applied by a rule above).
302 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
308 ========================================================================== */
310 * Remove most spacing between table cells.
313 border-collapse: collapse;
319 meta.foundation-version {
320 font-family: "1.1.0"; }
323 font-family: "small=0&medium=40rem&large=75rem&xlarge=90rem&xxlarge=120rem"; }
329 Global styles and settings for Foundation for Apps are stored here. This file must always
330 be imported, no matter what.
340 box-sizing: border-box; }
342 *, *:before, *:after {
343 box-sizing: inherit; }
350 font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
355 -webkit-font-smoothing: antialiased;
356 -moz-osx-font-smoothing: grayscale; }
361 -ms-interpolation-mode: bicubic;
362 display: inline-block;
363 vertical-align: middle; }
365 a, [ui-sref], [zf-open], [zf-close], [zf-toggle] {
368 #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object {
369 max-width: none !important; }
377 vertical-align: middle; }
380 margin-right: 0.25rem; }
384 a > .iconic *.iconic-property-accent {
391 .iconic *.iconic-property-accent {
395 .iconic-color-primary * {
398 .iconic-color-primary *.iconic-property-accent {
402 .iconic-color-success * {
405 .iconic-color-success *.iconic-property-accent {
409 .iconic-color-warning * {
412 .iconic-color-warning *.iconic-property-accent {
416 .iconic-color-alert * {
419 .iconic-color-alert *.iconic-property-accent {
423 .iconic-color-dark * {
426 .iconic-color-dark *.iconic-property-accent {
430 .iconic-color-secondary * {
433 .iconic-color-secondary *.iconic-property-accent {
441 A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.
444 Styles for the list inside an action sheet.
445 Don't include this mixin if you want to build custom controls inside the sheet.
448 Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.
450 .action-sheet-container {
452 display: inline-block; }
453 .action-sheet-container .button {
465 transition-property: -webkit-transform opacity;
466 transition-property: transform opacity;
467 transition-duration: 0.25s;
468 transition-timing-function: ease-out;
469 box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.25);
471 -webkit-transform: translateY(100%);
472 transform: translateY(100%); }
473 .action-sheet.is-active {
474 -webkit-transform: translateY(0%);
475 transform: translateY(0%); }
479 list-style-type: none;
480 -webkit-user-select: none;
481 -moz-user-select: none;
482 -ms-user-select: none;
484 .action-sheet ul:first-child {
486 .action-sheet ul:first-child li:first-child {
493 border-top: 1px solid #ccc; }
494 .action-sheet ul a:hover {
496 background: #f2f2f2; }
497 .action-sheet ul .alert > a {
499 .action-sheet ul .disabled > a {
500 pointer-events: none;
502 @media only screen and (min-width: 40em) {
512 pointer-events: none;
516 box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
528 -webkit-transform: translateX(-50%) translateY(110%);
529 transform: translateX(-50%) translateY(110%); }
530 .action-sheet.is-active {
532 pointer-events: auto; }
533 .action-sheet::before, .action-sheet::after {
540 border-left: 10px solid transparent;
541 border-right: 10px solid transparent;
542 margin-left: -10px; }
543 .action-sheet.is-active {
544 -webkit-transform: translateX(-50%) translateY(100%);
545 transform: translateX(-50%) translateY(100%); }
546 .action-sheet::before, .action-sheet::after {
550 border-bottom: 10px solid white; }
551 .action-sheet::before {
553 border-bottom-color: rgba(0, 0, 0, 0.15); }
563 pointer-events: none;
567 box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
579 -webkit-transform: translateX(-50%) translateY(-120%);
580 transform: translateX(-50%) translateY(-120%); }
581 .action-sheet.top.is-active {
583 pointer-events: auto; }
584 .action-sheet.top::before, .action-sheet.top::after {
591 border-left: 10px solid transparent;
592 border-right: 10px solid transparent;
593 margin-left: -10px; }
594 .action-sheet.top.is-active {
595 -webkit-transform: translateX(-50%) translateY(-110%);
596 transform: translateX(-50%) translateY(-110%); }
597 .action-sheet.top::before, .action-sheet.top::after {
600 border-top: 10px solid white;
602 .action-sheet.top::before {
604 border-top-color: rgba(0, 0, 0, 0.15); } }
605 .action-sheet.primary {
609 .action-sheet.primary::before {
611 .action-sheet.primary::before, .action-sheet.primary::after {
612 border-top-color: #00558b; }
613 .action-sheet.primary.top::before, .action-sheet.primary.top::after {
614 border-bottom-color: #00558b; }
615 .action-sheet.primary ul {
618 list-style-type: none;
619 -webkit-user-select: none;
620 -moz-user-select: none;
621 -ms-user-select: none;
623 .action-sheet.primary ul:first-child {
625 .action-sheet.primary ul:first-child li:first-child {
627 .action-sheet.primary ul a {
632 border-top: 1px solid #006cb0; }
633 .action-sheet.primary ul a:hover {
635 background: #00609e; }
636 .action-sheet.primary ul .alert > a {
638 .action-sheet.primary ul .disabled > a {
639 pointer-events: none;
645 .action-sheet.dark::before {
647 .action-sheet.dark::before, .action-sheet.dark::after {
648 border-top-color: #232323; }
649 .action-sheet.dark.top::before, .action-sheet.dark.top::after {
650 border-bottom-color: #232323; }
651 .action-sheet.dark ul {
654 list-style-type: none;
655 -webkit-user-select: none;
656 -moz-user-select: none;
657 -ms-user-select: none;
659 .action-sheet.dark ul:first-child {
661 .action-sheet.dark ul:first-child li:first-child {
663 .action-sheet.dark ul a {
668 border-top: 1px solid #393939; }
669 .action-sheet.dark ul a:hover {
671 background: #2e2e2e; }
672 .action-sheet.dark ul .alert > a {
674 .action-sheet.dark ul .disabled > a {
675 pointer-events: none;
682 A generic list component that can accomodate a variety of styles and controls.
690 - Checkbox/radio inputs
693 Adds styles for a block list container.
695 $font-size: global font size for the list.
696 $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.
701 -webkit-user-select: none;
702 -moz-user-select: none;
703 -ms-user-select: none;
705 .block-list, .block-list ul {
706 list-style-type: none; }
711 Styles block list headers on the selector you include this mixin in (normally a <header>).
713 $color - color of the header.
714 $font-size - font size of the header.
715 $offset - left margin to add to the header, to line it up with the list items.
718 Styles block list items on the selector you include this mixin in (normally an <li>).
720 $color - color of items.
721 $color-hover - color of items on hover.
722 $background - background of items.
723 $background-hover - background of items on hover.
724 $border - border between items.
725 $padding - padding on items.
728 Adds label styles to the class you include this mixin in.
730 $color - color of the label.
731 $left-class - extra class to flip the orientation of the label.
732 $left-padding - left padding to use for left-hand labels.
735 Adds support for chevrons, which appear on the right-hand side of the item.
737 $color - color of the chevron.
738 $padding - include the global padding of block list items here.
741 Adds icon styles. Call this mixin on a block list container.
743 $size - size of the icon as a percentage (decimal) of the list item's height.
744 $item-selector - overrides the 'li' selector used for list items.
747 Adds support for text fields, select menus, and checkbox/radio groups in block lists.
749 $color - color of select menu arrow.
750 $background-hover - color of select menu when hovered over.
751 $padding - include the global padding of block list items here.
752 $dropdown-class - class to use for list items that contain a dropdown.
753 $switch-class - class to use for switches inside list items.
758 margin-right: -1rem; }
759 .block-list input[type="text"], .block-list input[type="password"], .block-list input[type="date"], .block-list input[type="datetime"], .block-list input[type="datetime-local"], .block-list input[type="month"], .block-list input[type="week"], .block-list input[type="email"], .block-list input[type="number"], .block-list input[type="search"], .block-list input[type="tel"], .block-list input[type="time"], .block-list input[type="url"], .block-list input[type="color"], .block-list textarea {
764 padding: 0.8rem 1rem;
766 .block-list input[type="text"]:hover, .block-list input[type="text"]:focus, .block-list input[type="password"]:hover, .block-list input[type="password"]:focus, .block-list input[type="date"]:hover, .block-list input[type="date"]:focus, .block-list input[type="datetime"]:hover, .block-list input[type="datetime"]:focus, .block-list input[type="datetime-local"]:hover, .block-list input[type="datetime-local"]:focus, .block-list input[type="month"]:hover, .block-list input[type="month"]:focus, .block-list input[type="week"]:hover, .block-list input[type="week"]:focus, .block-list input[type="email"]:hover, .block-list input[type="email"]:focus, .block-list input[type="number"]:hover, .block-list input[type="number"]:focus, .block-list input[type="search"]:hover, .block-list input[type="search"]:focus, .block-list input[type="tel"]:hover, .block-list input[type="tel"]:focus, .block-list input[type="time"]:hover, .block-list input[type="time"]:focus, .block-list input[type="url"]:hover, .block-list input[type="url"]:focus, .block-list input[type="color"]:hover, .block-list input[type="color"]:focus, .block-list textarea:hover, .block-list textarea:focus {
768 .block-list li > input[type="checkbox"], .block-list li > input[type="radio"] {
771 .block-list li > input[type="checkbox"] + label, .block-list li > input[type="radio"] + label {
775 .block-list li > input[type="checkbox"]:checked + label::before, .block-list li > input[type="radio"]:checked + label::before {
776 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" viewBox="0 0 32 32"><path fill="black" d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm6.906 8.875l2.219 2.031-12.063 13.281-6.188-6.188 2.125-2.125 3.938 3.938 9.969-10.938z"/></svg>');
778 background-size: 100% 100%;
783 pointer-events: none;
784 margin-top: -0.25em; }
785 @media screen and (min-width: 0\0) {
786 .block-list li > input[type="checkbox"]:checked + label::before, .block-list li > input[type="radio"]:checked + label::before {
787 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrMl0FugzAQRY3TRZeoFyhVL0BOkGTXJezaHZwguUnECaCrdFd6gqQnCN11Uyk5QekNOlONJWMVGMCgfGlkEIY3HnsG2xFM3d96PjQB2AJsWdPtAPYOln+dTwXnuw4DHEGzBvNFN6EDCTiS9XIAwB40acNoucKoxODIie0AwAOCu8KOSnIiNx/MakK+A7sW9oTferxx3fP3T1nURoBG/irGVahHwjHm/Ggx7E3TMVdrQmoP0gngghhpZQ3QvG/EdPLUelARWI8Aycjq9Md0qMIdbcNhjmOKLoY7quk3l1Rebeqg4AwFkmq7LWGOh1pmNY0etZAWSq0OX8HoS4JvWuCopbSY26EGR/CW86K0BF+pwkLwlPuyHJhOCl5oe4ZtF++vOqST+GdOYwO+71pN2VNAjmQGPCe42weuHDg0PI8olUwnYrXTGQJH9gxq8l1LKvrQx4O6/YY32Kp/ugb3ey7gZ4xAzuhYiYTxB/UHZFAuaREVXZ2g6yFlvEC2yoKEmbsRZYNgVLk2JeaOaG+xLHN+WCszDWMqLGOrJFa1DlApjSdwoHJGqGzLIb0+cas0wh5Bh780ngswx8GJD7h8sHg2wLA/mfDLPZpdxOF0quP5rwADAAFIzSRvu1m5AAAAAElFTkSuQmCC'); } }
788 .block-list .with-dropdown {
790 .block-list .with-dropdown select {
791 -webkit-appearance: none;
792 -moz-appearance: none;
797 padding: 0.8rem 1rem;
802 background-color: transparent; }
803 .block-list .switch {
807 -webkit-transform: translateY(-50%);
808 transform: translateY(-50%); }
809 .block-list.with-icons li > a, .block-list.with-icons li > span, .block-list.with-icons li > label {
810 padding-left: 2.8rem; }
811 .block-list.with-icons li img, .block-list.with-icons li .iconic {
818 pointer-events: none; }
823 margin-bottom: 0.5em;
827 text-transform: uppercase; }
830 border-bottom: 1px solid #d0d0d0; }
831 .block-list li:first-child {
832 border-top: 1px solid #d0d0d0; }
833 .block-list li > a, .block-list li > span, .block-list li > label {
835 padding: 0.8rem 1rem;
839 .block-list li > span {
841 .block-list li > a, .block-list li > label {
843 .block-list li > a:hover, .block-list li > label:hover {
845 .block-list li > a:hover, .block-list li > label:hover, .block-list li select:hover {
846 background: #f4f4f4; }
847 .block-list li.caution > a, .block-list li.caution > a:hover {
849 .block-list li.disabled > a {
851 .block-list li.disabled > a, .block-list li.disabled > a:hover {
853 .block-list li.disabled > a:hover {
854 background: transparent; }
855 .block-list li.with-chevron::after {
861 -webkit-transform: translateY(-50%);
862 transform: translateY(-50%);
866 .block-list li.with-chevron .block-list-label {
867 padding-right: 1.5rem; }
868 .block-list li .block-list-label {
869 display: inline-block;
873 pointer-events: none; }
874 .block-list li .block-list-label.left {
878 .button, .button-group > li > a, .button-group > li > label, .button-group > li > button {
879 display: inline-block;
884 -webkit-appearance: none;
885 -webkit-font-smoothing: antialiased;
886 transition: background 0.25s ease-out;
887 vertical-align: middle;
889 margin: 0 1rem 1rem 0;
895 display: inline-block;
897 margin: 0 1rem 1rem 0;
903 vertical-align: middle;
904 margin-right: 0.25em;
906 .button:hover, .button:focus {
912 .button .iconic *.iconic-property-accent {
916 font-size: 0.63rem; }
917 .button.tiny .iconic {
920 vertical-align: middle;
921 margin-right: 0.25em;
924 font-size: 0.72rem; }
925 .button.small .iconic {
928 vertical-align: middle;
929 margin-right: 0.25em;
932 font-size: 1.17rem; }
933 .button.large .iconic {
936 vertical-align: middle;
937 margin-right: 0.25em;
947 .button.secondary:hover, .button.secondary:focus {
950 .button.secondary .iconic * {
953 .button.secondary .iconic *.iconic-property-accent {
959 .button.success:hover, .button.success:focus {
962 .button.success .iconic * {
965 .button.success .iconic *.iconic-property-accent {
971 .button.warning:hover, .button.warning:focus {
974 .button.warning .iconic * {
977 .button.warning .iconic *.iconic-property-accent {
983 .button.alert:hover, .button.alert:focus {
986 .button.alert .iconic * {
989 .button.alert .iconic *.iconic-property-accent {
995 .button.info:hover, .button.info:focus {
998 .button.info .iconic * {
1001 .button.info .iconic *.iconic-property-accent {
1005 background: #232323;
1007 .button.dark:hover, .button.dark:focus {
1008 background: #1e1e1e;
1010 .button.dark .iconic * {
1013 .button.dark .iconic *.iconic-property-accent {
1017 border: 1px solid #00558b;
1018 background: transparent;
1020 .button.hollow:hover, .button.hollow:focus {
1021 border-color: #008ee8;
1022 background: transparent;
1024 .button.hollow .iconic * {
1027 .button.hollow .iconic *.iconic-property-accent {
1030 .button.hollow:hover .iconic * {
1033 .button.hollow:hover .iconic *.iconic-property-accent {
1036 .button.hollow.secondary {
1037 border: 1px solid #f1f1f1;
1038 background: transparent;
1040 .button.hollow.secondary:hover, .button.hollow.secondary:focus {
1041 border-color: #f4f4f4;
1042 background: transparent;
1044 .button.hollow.secondary .iconic * {
1047 .button.hollow.secondary .iconic *.iconic-property-accent {
1050 .button.hollow.secondary:hover .iconic * {
1053 .button.hollow.secondary:hover .iconic *.iconic-property-accent {
1056 .button.hollow.success {
1057 border: 1px solid #43AC6A;
1058 background: transparent;
1060 .button.hollow.success:hover, .button.hollow.success:focus {
1061 border-color: #6dc68e;
1062 background: transparent;
1064 .button.hollow.success .iconic * {
1067 .button.hollow.success .iconic *.iconic-property-accent {
1070 .button.hollow.success:hover .iconic * {
1073 .button.hollow.success:hover .iconic *.iconic-property-accent {
1076 .button.hollow.warning {
1077 border: 1px solid #F08A24;
1078 background: transparent;
1080 .button.hollow.warning:hover, .button.hollow.warning:focus {
1081 border-color: #f4a75b;
1082 background: transparent;
1084 .button.hollow.warning .iconic * {
1087 .button.hollow.warning .iconic *.iconic-property-accent {
1090 .button.hollow.warning:hover .iconic * {
1093 .button.hollow.warning:hover .iconic *.iconic-property-accent {
1096 .button.hollow.alert {
1097 border: 1px solid #F04124;
1098 background: transparent;
1100 .button.hollow.alert:hover, .button.hollow.alert:focus {
1101 border-color: #f4715b;
1102 background: transparent;
1104 .button.hollow.alert .iconic * {
1107 .button.hollow.alert .iconic *.iconic-property-accent {
1110 .button.hollow.alert:hover .iconic * {
1113 .button.hollow.alert:hover .iconic *.iconic-property-accent {
1116 .button.hollow.info {
1117 border: 1px solid #A0D3E8;
1118 background: transparent;
1120 .button.hollow.info:hover, .button.hollow.info:focus {
1121 border-color: #b8deee;
1122 background: transparent;
1124 .button.hollow.info .iconic * {
1127 .button.hollow.info .iconic *.iconic-property-accent {
1130 .button.hollow.info:hover .iconic * {
1133 .button.hollow.info:hover .iconic *.iconic-property-accent {
1136 .button.hollow.dark {
1137 border: 1px solid #232323;
1138 background: transparent;
1140 .button.hollow.dark:hover, .button.hollow.dark:focus {
1141 border-color: #5a5a5a;
1142 background: transparent;
1144 .button.hollow.dark .iconic * {
1147 .button.hollow.dark .iconic *.iconic-property-accent {
1150 .button.hollow.dark:hover .iconic * {
1153 .button.hollow.dark:hover .iconic *.iconic-property-accent {
1159 pointer-events: none; }
1163 margin-bottom: 1rem;
1164 list-style-type: none;
1165 display: -webkit-inline-flex;
1166 display: -ms-inline-flexbox;
1167 display: inline-flex;
1170 font-size: 0.9rem; }
1171 .button-group > li {
1172 -webkit-flex: 0 0 auto;
1175 .button-group > li > a, .button-group > li > label, .button-group > li > button {
1180 .button-group > li > input + label {
1182 .button-group > li:not(:last-child) > a, .button-group > li:not(:last-child) > label, .button-group > li:not(:last-child) > button {
1183 border-right: 1px solid #004068; }
1184 .button-group .iconic {
1187 vertical-align: middle;
1188 margin-right: 0.25em;
1191 .button-group.segmented, .button-group.segmented.secondary, .button-group.segmented.success, .button-group.segmented.warning, .button-group.segmented.alert {
1192 border: 1px solid #00558b;
1193 transition-property: background color; }
1194 .button-group.segmented > li > input[type="radio"] {
1197 .button-group.segmented > li > a, .button-group.segmented.secondary > li > a, .button-group.segmented.success > li > a, .button-group.segmented.warning > li > a, .button-group.segmented.alert > li > a, .button-group.segmented > li > label, .button-group.segmented.secondary > li > label, .button-group.segmented.success > li > label, .button-group.segmented.warning > li > label, .button-group.segmented.alert > li > label, .button-group.segmented > li > button, .button-group.segmented.secondary > li > button, .button-group.segmented.success > li > button, .button-group.segmented.warning > li > button, .button-group.segmented.alert > li > button {
1199 background: transparent; }
1202 display: -webkit-inline-flex;
1203 display: -ms-inline-flexbox;
1204 display: inline-flex;
1206 .button-group > li {
1207 -webkit-flex: 0 0 auto;
1210 .button-group > li > a, .button-group > li > label, .button-group > li > button {
1211 background: #00558b;
1213 border-color: #004876; }
1214 .button-group > li > a:hover, .button-group > li > a:focus, .button-group > li > label:hover, .button-group > li > label:focus, .button-group > li > button:hover, .button-group > li > button:focus {
1215 background: #004876;
1217 .button-group > li > a .iconic *, .button-group > li > label .iconic *, .button-group > li > button .iconic * {
1220 .button-group > li > a .iconic *.iconic-property-accent, .button-group > li > label .iconic *.iconic-property-accent, .button-group > li > button .iconic *.iconic-property-accent {
1223 .button-group > li.is-active > a, .button-group > li.is-active > label, .button-group > li.is-active > button {
1224 background: #004876; }
1225 .button-group.secondary > li > a, .button-group.secondary > li > label, .button-group.secondary > li > button {
1226 background: #f1f1f1;
1228 border-color: #cdcdcd; }
1229 .button-group.secondary > li > a:hover, .button-group.secondary > li > a:focus, .button-group.secondary > li > label:hover, .button-group.secondary > li > label:focus, .button-group.secondary > li > button:hover, .button-group.secondary > li > button:focus {
1230 background: #cdcdcd;
1232 .button-group.secondary > li > a .iconic *, .button-group.secondary > li > label .iconic *, .button-group.secondary > li > button .iconic * {
1235 .button-group.secondary > li > a .iconic *.iconic-property-accent, .button-group.secondary > li > label .iconic *.iconic-property-accent, .button-group.secondary > li > button .iconic *.iconic-property-accent {
1238 .button-group.secondary > li.is-active > a, .button-group.secondary > li.is-active > label, .button-group.secondary > li.is-active > button {
1239 background: #cdcdcd; }
1240 .button-group.success > li > a, .button-group.success > li > label, .button-group.success > li > button {
1241 background: #43AC6A;
1243 border-color: #39925a; }
1244 .button-group.success > li > a:hover, .button-group.success > li > a:focus, .button-group.success > li > label:hover, .button-group.success > li > label:focus, .button-group.success > li > button:hover, .button-group.success > li > button:focus {
1245 background: #39925a;
1247 .button-group.success > li > a .iconic *, .button-group.success > li > label .iconic *, .button-group.success > li > button .iconic * {
1250 .button-group.success > li > a .iconic *.iconic-property-accent, .button-group.success > li > label .iconic *.iconic-property-accent, .button-group.success > li > button .iconic *.iconic-property-accent {
1253 .button-group.success > li.is-active > a, .button-group.success > li.is-active > label, .button-group.success > li.is-active > button {
1254 background: #39925a; }
1255 .button-group.warning > li > a, .button-group.warning > li > label, .button-group.warning > li > button {
1256 background: #F08A24;
1258 border-color: #dc750f; }
1259 .button-group.warning > li > a:hover, .button-group.warning > li > a:focus, .button-group.warning > li > label:hover, .button-group.warning > li > label:focus, .button-group.warning > li > button:hover, .button-group.warning > li > button:focus {
1260 background: #dc750f;
1262 .button-group.warning > li > a .iconic *, .button-group.warning > li > label .iconic *, .button-group.warning > li > button .iconic * {
1265 .button-group.warning > li > a .iconic *.iconic-property-accent, .button-group.warning > li > label .iconic *.iconic-property-accent, .button-group.warning > li > button .iconic *.iconic-property-accent {
1268 .button-group.warning > li.is-active > a, .button-group.warning > li.is-active > label, .button-group.warning > li.is-active > button {
1269 background: #dc750f; }
1270 .button-group.alert > li > a, .button-group.alert > li > label, .button-group.alert > li > button {
1271 background: #F04124;
1273 border-color: #dc2c0f; }
1274 .button-group.alert > li > a:hover, .button-group.alert > li > a:focus, .button-group.alert > li > label:hover, .button-group.alert > li > label:focus, .button-group.alert > li > button:hover, .button-group.alert > li > button:focus {
1275 background: #dc2c0f;
1277 .button-group.alert > li > a .iconic *, .button-group.alert > li > label .iconic *, .button-group.alert > li > button .iconic * {
1280 .button-group.alert > li > a .iconic *.iconic-property-accent, .button-group.alert > li > label .iconic *.iconic-property-accent, .button-group.alert > li > button .iconic *.iconic-property-accent {
1283 .button-group.alert > li.is-active > a, .button-group.alert > li.is-active > label, .button-group.alert > li.is-active > button {
1284 background: #dc2c0f; }
1285 .button-group > li.secondary > a, .button-group > li.secondary > label, .button-group > li.secondary > button {
1286 background: #f1f1f1;
1288 border-color: #f1f1f1; }
1289 .button-group > li.secondary > a:hover, .button-group > li.secondary > a:focus, .button-group > li.secondary > label:hover, .button-group > li.secondary > label:focus, .button-group > li.secondary > button:hover, .button-group > li.secondary > button:focus {
1290 background: #cdcdcd;
1292 .button-group > li.secondary > a:hover, .button-group > li.secondary > a:focus, .button-group > li.secondary > label:hover, .button-group > li.secondary > label:focus, .button-group > li.secondary > button:hover, .button-group > li.secondary > button:focus {
1293 border-color: #b5b5b5; }
1294 .button-group > li.secondary > a .iconic *, .button-group > li.secondary > label .iconic *, .button-group > li.secondary > button .iconic * {
1297 .button-group > li.secondary > a .iconic *.iconic-property-accent, .button-group > li.secondary > label .iconic *.iconic-property-accent, .button-group > li.secondary > button .iconic *.iconic-property-accent {
1300 .button-group > li.success > a, .button-group > li.success > label, .button-group > li.success > button {
1301 background: #43AC6A;
1303 border-color: #43AC6A; }
1304 .button-group > li.success > a:hover, .button-group > li.success > a:focus, .button-group > li.success > label:hover, .button-group > li.success > label:focus, .button-group > li.success > button:hover, .button-group > li.success > button:focus {
1305 background: #39925a;
1307 .button-group > li.success > a:hover, .button-group > li.success > a:focus, .button-group > li.success > label:hover, .button-group > li.success > label:focus, .button-group > li.success > button:hover, .button-group > li.success > button:focus {
1308 border-color: #32814f; }
1309 .button-group > li.success > a .iconic *, .button-group > li.success > label .iconic *, .button-group > li.success > button .iconic * {
1312 .button-group > li.success > a .iconic *.iconic-property-accent, .button-group > li.success > label .iconic *.iconic-property-accent, .button-group > li.success > button .iconic *.iconic-property-accent {
1315 .button-group > li.warning > a, .button-group > li.warning > label, .button-group > li.warning > button {
1316 background: #F08A24;
1318 border-color: #F08A24; }
1319 .button-group > li.warning > a:hover, .button-group > li.warning > a:focus, .button-group > li.warning > label:hover, .button-group > li.warning > label:focus, .button-group > li.warning > button:hover, .button-group > li.warning > button:focus {
1320 background: #dc750f;
1322 .button-group > li.warning > a:hover, .button-group > li.warning > a:focus, .button-group > li.warning > label:hover, .button-group > li.warning > label:focus, .button-group > li.warning > button:hover, .button-group > li.warning > button:focus {
1323 border-color: #c2670d; }
1324 .button-group > li.warning > a .iconic *, .button-group > li.warning > label .iconic *, .button-group > li.warning > button .iconic * {
1327 .button-group > li.warning > a .iconic *.iconic-property-accent, .button-group > li.warning > label .iconic *.iconic-property-accent, .button-group > li.warning > button .iconic *.iconic-property-accent {
1330 .button-group > li.alert > a, .button-group > li.alert > label, .button-group > li.alert > button {
1331 background: #F04124;
1333 border-color: #F04124; }
1334 .button-group > li.alert > a:hover, .button-group > li.alert > a:focus, .button-group > li.alert > label:hover, .button-group > li.alert > label:focus, .button-group > li.alert > button:hover, .button-group > li.alert > button:focus {
1335 background: #dc2c0f;
1337 .button-group > li.alert > a:hover, .button-group > li.alert > a:focus, .button-group > li.alert > label:hover, .button-group > li.alert > label:focus, .button-group > li.alert > button:hover, .button-group > li.alert > button:focus {
1338 border-color: #c2270d; }
1339 .button-group > li.alert > a .iconic *, .button-group > li.alert > label .iconic *, .button-group > li.alert > button .iconic * {
1342 .button-group > li.alert > a .iconic *.iconic-property-accent, .button-group > li.alert > label .iconic *.iconic-property-accent, .button-group > li.alert > button .iconic *.iconic-property-accent {
1345 .button-group.segmented {
1346 border-color: #00558b; }
1347 .button-group.segmented > li > a, .button-group.segmented > li > label, .button-group.segmented > li > button {
1348 border-color: #00558b;
1350 .button-group.segmented > li > a:hover, .button-group.segmented > li > label:hover, .button-group.segmented > li > button:hover {
1351 background: rgba(0, 85, 139, 0.25);
1353 .button-group.segmented > li > a .iconic *, .button-group.segmented > li > label .iconic *, .button-group.segmented > li > button .iconic * {
1356 .button-group.segmented > li > a .iconic *.iconic-property-accent, .button-group.segmented > li > label .iconic *.iconic-property-accent, .button-group.segmented > li > button .iconic *.iconic-property-accent {
1359 .button-group.segmented > li.is-active > a, .button-group.segmented > li.is-active > a:hover, .button-group.segmented > li > input:checked + label, .button-group.segmented > li > input:checked + label:hover {
1360 background: #00558b;
1362 .button-group.segmented > li.is-active > a .iconic *, .button-group.segmented > li > input:checked + label .iconic * {
1365 .button-group.segmented > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented > li > input:checked + label .iconic *.iconic-property-accent {
1368 .button-group.segmented.secondary {
1369 border-color: #f1f1f1; }
1370 .button-group.segmented.secondary > li > a, .button-group.segmented.secondary > li > label, .button-group.segmented.secondary > li > button {
1371 border-color: #f1f1f1;
1373 .button-group.segmented.secondary > li > a:hover, .button-group.segmented.secondary > li > label:hover, .button-group.segmented.secondary > li > button:hover {
1374 background: rgba(241, 241, 241, 0.25);
1376 .button-group.segmented.secondary > li > a .iconic *, .button-group.segmented.secondary > li > label .iconic *, .button-group.segmented.secondary > li > button .iconic * {
1379 .button-group.segmented.secondary > li > a .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > label .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > button .iconic *.iconic-property-accent {
1382 .button-group.segmented.secondary > li.is-active > a, .button-group.segmented.secondary > li.is-active > a:hover, .button-group.segmented.secondary > li > input:checked + label, .button-group.segmented.secondary > li > input:checked + label:hover {
1383 background: #f1f1f1;
1385 .button-group.segmented.secondary > li.is-active > a .iconic *, .button-group.segmented.secondary > li > input:checked + label .iconic * {
1388 .button-group.segmented.secondary > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.secondary > li > input:checked + label .iconic *.iconic-property-accent {
1391 .button-group.segmented.success {
1392 border-color: #43AC6A; }
1393 .button-group.segmented.success > li > a, .button-group.segmented.success > li > label, .button-group.segmented.success > li > button {
1394 border-color: #43AC6A;
1396 .button-group.segmented.success > li > a:hover, .button-group.segmented.success > li > label:hover, .button-group.segmented.success > li > button:hover {
1397 background: rgba(67, 172, 106, 0.25);
1399 .button-group.segmented.success > li > a .iconic *, .button-group.segmented.success > li > label .iconic *, .button-group.segmented.success > li > button .iconic * {
1402 .button-group.segmented.success > li > a .iconic *.iconic-property-accent, .button-group.segmented.success > li > label .iconic *.iconic-property-accent, .button-group.segmented.success > li > button .iconic *.iconic-property-accent {
1405 .button-group.segmented.success > li.is-active > a, .button-group.segmented.success > li.is-active > a:hover, .button-group.segmented.success > li > input:checked + label, .button-group.segmented.success > li > input:checked + label:hover {
1406 background: #43AC6A;
1408 .button-group.segmented.success > li.is-active > a .iconic *, .button-group.segmented.success > li > input:checked + label .iconic * {
1411 .button-group.segmented.success > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.success > li > input:checked + label .iconic *.iconic-property-accent {
1414 .button-group.segmented.warning {
1415 border-color: #F08A24; }
1416 .button-group.segmented.warning > li > a, .button-group.segmented.warning > li > label, .button-group.segmented.warning > li > button {
1417 border-color: #F08A24;
1419 .button-group.segmented.warning > li > a:hover, .button-group.segmented.warning > li > label:hover, .button-group.segmented.warning > li > button:hover {
1420 background: rgba(240, 138, 36, 0.25);
1422 .button-group.segmented.warning > li > a .iconic *, .button-group.segmented.warning > li > label .iconic *, .button-group.segmented.warning > li > button .iconic * {
1425 .button-group.segmented.warning > li > a .iconic *.iconic-property-accent, .button-group.segmented.warning > li > label .iconic *.iconic-property-accent, .button-group.segmented.warning > li > button .iconic *.iconic-property-accent {
1428 .button-group.segmented.warning > li.is-active > a, .button-group.segmented.warning > li.is-active > a:hover, .button-group.segmented.warning > li > input:checked + label, .button-group.segmented.warning > li > input:checked + label:hover {
1429 background: #F08A24;
1431 .button-group.segmented.warning > li.is-active > a .iconic *, .button-group.segmented.warning > li > input:checked + label .iconic * {
1434 .button-group.segmented.warning > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.warning > li > input:checked + label .iconic *.iconic-property-accent {
1437 .button-group.segmented.alert {
1438 border-color: #F04124; }
1439 .button-group.segmented.alert > li > a, .button-group.segmented.alert > li > label, .button-group.segmented.alert > li > button {
1440 border-color: #F04124;
1442 .button-group.segmented.alert > li > a:hover, .button-group.segmented.alert > li > label:hover, .button-group.segmented.alert > li > button:hover {
1443 background: rgba(240, 65, 36, 0.25);
1445 .button-group.segmented.alert > li > a .iconic *, .button-group.segmented.alert > li > label .iconic *, .button-group.segmented.alert > li > button .iconic * {
1448 .button-group.segmented.alert > li > a .iconic *.iconic-property-accent, .button-group.segmented.alert > li > label .iconic *.iconic-property-accent, .button-group.segmented.alert > li > button .iconic *.iconic-property-accent {
1451 .button-group.segmented.alert > li.is-active > a, .button-group.segmented.alert > li.is-active > a:hover, .button-group.segmented.alert > li > input:checked + label, .button-group.segmented.alert > li > input:checked + label:hover {
1452 background: #F04124;
1454 .button-group.segmented.alert > li.is-active > a .iconic *, .button-group.segmented.alert > li > input:checked + label .iconic * {
1457 .button-group.segmented.alert > li.is-active > a .iconic *.iconic-property-accent, .button-group.segmented.alert > li > input:checked + label .iconic *.iconic-property-accent {
1460 .button-group.tiny {
1461 font-size: 0.63rem; }
1462 .button-group.small {
1463 font-size: 0.72rem; }
1464 .button-group.large {
1465 font-size: 1.17rem; }
1466 .button-group.expand {
1467 display: -webkit-flex;
1468 display: -ms-flexbox;
1470 .button-group.expand > li {
1474 .button-group.expand > li > a, .button-group.expand > li > label, .button-group.expand > li > button {
1479 .button-group li.disabled > a, .button-group li.disabled > label, .button-group li.disabled > button {
1482 pointer-events: none; }
1493 border: 1px solid #ededed;
1494 margin-bottom: 0.5rem;
1498 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1500 .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
1508 margin-bottom: 0.5rem;
1509 background: #00558b;
1512 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1514 .card.primary h1, .card.primary h2, .card.primary h3, .card.primary h4, .card.primary h5, .card.primary h6 {
1520 .card.primary .card-divider {
1521 background: #0065a5;
1525 margin-bottom: 0.5rem;
1526 background: #43AC6A;
1529 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1531 .card.success h1, .card.success h2, .card.success h3, .card.success h4, .card.success h5, .card.success h6 {
1537 .card.success .card-divider {
1538 background: #4ab873;
1542 margin-bottom: 0.5rem;
1543 background: #F08A24;
1546 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1548 .card.warning h1, .card.warning h2, .card.warning h3, .card.warning h4, .card.warning h5, .card.warning h6 {
1554 .card.warning .card-divider {
1555 background: #f19233;
1559 margin-bottom: 0.5rem;
1560 background: #F04124;
1563 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1565 .card.alert h1, .card.alert h2, .card.alert h3, .card.alert h4, .card.alert h5, .card.alert h6 {
1571 .card.alert .card-divider {
1572 background: #f14e33;
1576 margin-bottom: 0.5rem;
1577 background: #232323;
1580 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1582 .card.dark h1, .card.dark h2, .card.dark h3, .card.dark h4, .card.dark h5, .card.dark h6 {
1588 .card.dark .card-divider {
1589 background: #323232;
1593 background: #ededed;
1610 .close-button:hover {
1613 .thumbnail, ul.thumbnails > li img {
1615 box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25); }
1617 ul.thumbnails > li {
1618 margin-bottom: 1rem; }
1619 ul.thumbnails > li a {
1626 Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.
1632 - Checkboxes and radio buttons
1634 - Progress bars and meters
1636 input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
1637 -webkit-appearance: none;
1638 -moz-appearance: none;
1644 border: 1px solid #ccc;
1649 -webkit-font-smoothing: antialiased;
1650 vertical-align: middle; }
1651 input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="week"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="color"]:hover, textarea:hover {
1652 border: 1px solid #bbb;
1655 input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus {
1657 border: 1px solid #999;
1660 label > input[type="text"], label > input[type="password"], label > input[type="date"], label > input[type="datetime"], label > input[type="datetime-local"], label > input[type="month"], label > input[type="week"], label > input[type="email"], label > input[type="number"], label > input[type="search"], label > input[type="tel"], label > input[type="time"], label > input[type="url"], label > input[type="color"], label > textarea {
1661 margin-top: 0.5rem; }
1663 input[type="search"] {
1664 box-sizing: border-box; }
1666 input.disabled, input[disabled], input[readonly], fieldset[disabled] input {
1668 input.disabled, input.disabled:hover, input[disabled], input[disabled]:hover, input[readonly], input[readonly]:hover, fieldset[disabled] input, fieldset[disabled] input:hover {
1669 background-color: #f2f2f2; }
1674 margin-bottom: 0.5rem;
1676 label > input, label > textarea {
1677 margin-top: 0.5rem; }
1679 input[type="checkbox"], input[type="radio"] {
1682 label > input[type="checkbox"], label > input[type="radio"] {
1683 margin-right: 0.25rem; }
1684 input[type="checkbox"] + label, input[type="radio"] + label {
1685 display: inline-block;
1686 margin-left: 0.5rem;
1689 vertical-align: baseline; }
1692 display: -webkit-flex;
1693 display: -ms-flexbox;
1695 -webkit-flex-flow: row nowrap;
1696 -ms-flex-flow: row nowrap;
1697 flex-flow: row nowrap;
1698 -webkit-align-items: stretch;
1699 -ms-flex-align: stretch;
1700 align-items: stretch;
1701 margin-bottom: 1rem; }
1702 label > .inline-label {
1703 margin-top: 0.5rem; }
1704 .inline-label > input, .inline-label > select {
1709 .inline-label > .form-label {
1710 -webkit-flex: 0 0 auto;
1715 border: 1px solid #ccc;
1717 display: -webkit-flex;
1718 display: -ms-flexbox;
1720 -webkit-align-items: center;
1721 -ms-flex-align: center;
1722 align-items: center; }
1723 .inline-label > .form-label:first-child {
1725 .inline-label > .form-label:last-child {
1727 .inline-label > a, .inline-label > button, .inline-label > input[type="button"], .inline-label > input[type="submit"] {
1728 -webkit-flex: 0 0 auto;
1731 display: -webkit-flex;
1732 display: -ms-flexbox;
1734 -webkit-align-items: center;
1735 -ms-flex-align: center;
1736 align-items: center;
1748 -webkit-appearance: none;
1749 -moz-appearance: none;
1758 border: 1px solid #ccc;
1759 background: #fafafa url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: black"></polygon></svg>') right 10px center no-repeat;
1760 background-size: 8px 8px;
1761 padding-right: 1.625rem; }
1763 background-color: #f0f0f0; }
1766 select::-ms-expand {
1769 input[type="range"] {
1770 -webkit-appearance: none;
1771 -moz-appearance: none;
1776 margin-top: 0.25rem;
1777 margin-bottom: 0.25rem;
1780 input[type="range"]:focus {
1782 input[type="range"]::-webkit-slider-runnable-track {
1785 input[type="range"]::-webkit-slider-thumb {
1786 -webkit-appearance: none;
1787 background: #00558b;
1790 margin-top: -0.25rem; }
1791 input[type="range"]::-moz-range-track {
1792 -moz-appearance: none;
1795 input[type="range"]::-moz-range-thumb {
1796 -moz-appearance: none;
1797 background: #00558b;
1800 margin-top: -0.25rem; }
1801 input[type="range"]::-ms-track {
1807 border-top: 0.25rem solid #fff;
1808 border-bottom: 0.25rem solid #fff; }
1809 input[type="range"]::-ms-thumb {
1810 background: #00558b;
1814 input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper {
1818 line-height: 1.5rem;
1819 vertical-align: middle;
1820 margin-left: 0.5em; }
1822 input[type="number"]::-webkit-outer-spin-button {
1823 -webkit-appearance: none;
1824 background: #00558b; }
1827 -webkit-appearance: none;
1828 -moz-appearance: none;
1832 margin-bottom: 1rem;
1836 progress::-webkit-progress-bar {
1838 progress::-webkit-progress-value {
1839 background: #00558b; }
1840 progress::-moz-progress-bar {
1841 background: #00558b; }
1842 progress.high::-webkit-progress-value {
1843 background: #43AC6A; }
1844 progress.high::-moz-progress-bar {
1845 background: #43AC6A; }
1846 progress.medium::-webkit-progress-value {
1847 background: #e7cf00; }
1848 progress.medium::-moz-progress-bar {
1849 background: #e7cf00; }
1850 progress.low::-webkit-progress-value {
1851 background: #F04124; }
1852 progress.low::-moz-progress-bar {
1853 background: #F04124; }
1857 meter::-webkit-meter-bar {
1859 meter::-webkit-meter-optimum-value {
1860 background: #43AC6A; }
1861 meter::-webkit-meter-suboptimum-value {
1862 background: #e7cf00; }
1863 meter::-webkit-meter-even-less-good-value {
1864 background: #F04124; }
1865 meter::-moz-meter-bar {
1866 background: #00558b; }
1867 meter:-moz-meter-optimum::-moz-meter-bar {
1868 background: #43AC6A; }
1869 meter:-moz-meter-sub-optimum::-moz-meter-bar {
1870 background: #e7cf00; }
1871 meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
1872 background: #F04124; }
1878 The friendly panel is an all-purpose container for hiding content off-screen.
1881 - Position at top, right, bottom, or left
1882 - Anchor to grid block or window
1883 - Define max width or height
1884 - Transform into grid block depending on screen size
1916 .panel-top.is-active {
1917 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); }
1933 @media only screen and (min-width: 18.75em) {
1936 .panel-right.is-active {
1937 box-shadow: -3px 0 10px rgba(0, 0, 0, 0.25); }
1953 .panel-bottom.is-active {
1954 box-shadow: 2px -3px 10px rgba(0, 0, 0, 0.25); }
1970 @media only screen and (min-width: 18.75em) {
1973 .panel-left.is-active {
1974 box-shadow: 3px 0 10px rgba(0, 0, 0, 0.25); }
1983 Foundation's magical, flexbox-powered grid.
1986 - Horizontal or vertical grids
1987 - Auto-sizing or percentage width grid blocks
1988 - Independently-scrollable blocks
1994 Define the size of a grid block. Blocks are flex items. By default, they stretch to fill all available space, based on the size of sibling blocks. This is the "expand" behavior.
1996 If set to "shrink", the block will contract and only fill as much space as it needs for its content.
1998 If set to a number, the block will be given a percentage width, based on the total number of columns (12 by default). Percentage widths don't work if a block is inside a vertical grid.
2002 @param {number|string} $size - Sizing behavior of the block. Should be expand, shrink, or a number.
2004 @output The flex-basis, flex-grow, and flex-shrink properties.
2007 Set the orientation of blocks within this block. The grid is re-oriented by changing the flex direction of the block.
2011 @param {string} $orientation - Direction of the grid, either horizontal or vertical.
2013 @output A flex-flow property to match the direction given.
2016 Stretch a grid's child blocks across its cross-axis, making every column appear to have the same height.
2020 @param {bool} $stretch - Stretch blocks if true, or align blocks to top if false.
2022 @output Sets align-items to "stretch" if $stretch is true, or "flex-start" (the default value) if false.
2025 Set the alignment of blocks within a grid.
2027 left: Items align to the left.
2028 right: Items align to the right.
2029 center: Items align to the center.
2030 justify: Items are spaced equally apart so they occupy the space of the entire grid.
2031 spaced: Items are given equal space to their left and right.
2035 @param {string} $align - Alignment to use.
2037 @output An appropriate justify-content value.
2040 Set the source order of a block. Items with lower numbers appear first. If multiple items have the same number, the one in the HTML first will appear first.
2044 @param {number} $order - Position in source order.
2046 @output An order property.
2049 Collapse a content block by removing the padding.
2053 @param {bool} $collapse - Collapses the block if true.
2055 @output A padding value.
2057 @todo No way to reverse collapse using this mixin. Solution:
2058 - If true, add padding: 0;
2059 - If false, add padding: 1rem;
2060 - If null, add nothing, to cut down on CSS output
2061 - Make null the default value
2064 Constrain the size of a block to the size of the average grid row, and center-align it. This imitates the behavior of ordinary Foundation rows.
2068 @param {bool} $container - Adds container styles if true.
2070 @output A maximum width and the good old margin: 0 auto for center alignment.
2073 Add negative margins to a block, equal to the padding of a content block. This aligns the edges of a block nested inside a content block.
2077 @param {bool} $nest - Adds negative margins if true.
2079 @output Negative margin values.
2082 Offset a block by adding a left margin.
2086 @param {number | bool} $offset - If false, nothing is output. If a number, offsets the column by the specified number of columns.
2088 @output A left margin based on the number of columns specified, and the global number of columns.
2091 Resets styles set by panels. Use this when a panel transforms into a block on larger screens.
2095 @output Resets to transform, position, and a few visual styles.
2098 Frames are containers that stretch to the full dimmensions of the browser window.
2101 Groups are collections of content items. They're the "rows" of Foundation for Apps.
2104 Blocks are containers for actual content. They're the "columns" of Foundation for Apps.
2106 .vertical.grid-frame, .vertical.grid-block, .vertical.small-grid-block, .vertical.medium-grid-block, .vertical.large-grid-block {
2107 -webkit-flex-flow: column nowrap;
2108 -ms-flex-flow: column nowrap;
2109 flex-flow: column nowrap;
2110 -webkit-align-items: stretch;
2111 -ms-flex-align: stretch;
2112 align-items: stretch; }
2113 .small-vertical.grid-frame, .small-vertical.grid-block, .small-vertical.small-grid-block, .small-vertical.medium-grid-block, .small-vertical.large-grid-block {
2114 -webkit-flex-flow: column nowrap;
2115 -ms-flex-flow: column nowrap;
2116 flex-flow: column nowrap;
2117 -webkit-align-items: stretch;
2118 -ms-flex-align: stretch;
2119 align-items: stretch; }
2120 .small-horizontal.grid-frame, .small-horizontal.grid-block, .small-horizontal.small-grid-block, .small-horizontal.medium-grid-block, .small-horizontal.large-grid-block {
2121 -webkit-flex-flow: row wrap;
2122 -ms-flex-flow: row wrap;
2123 flex-flow: row wrap; }
2124 @media only screen and (min-width: 40em) {
2125 .medium-vertical.grid-frame, .medium-vertical.grid-block, .medium-vertical.small-grid-block, .medium-vertical.medium-grid-block, .medium-vertical.large-grid-block {
2126 -webkit-flex-flow: column nowrap;
2127 -ms-flex-flow: column nowrap;
2128 flex-flow: column nowrap;
2129 -webkit-align-items: stretch;
2130 -ms-flex-align: stretch;
2131 align-items: stretch; }
2132 .medium-horizontal.grid-frame, .medium-horizontal.grid-block, .medium-horizontal.small-grid-block, .medium-horizontal.medium-grid-block, .medium-horizontal.large-grid-block {
2133 -webkit-flex-flow: row wrap;
2134 -ms-flex-flow: row wrap;
2135 flex-flow: row wrap; } }
2136 @media only screen and (min-width: 75em) {
2137 .large-vertical.grid-frame, .large-vertical.grid-block, .large-vertical.small-grid-block, .large-vertical.medium-grid-block, .large-vertical.large-grid-block {
2138 -webkit-flex-flow: column nowrap;
2139 -ms-flex-flow: column nowrap;
2140 flex-flow: column nowrap;
2141 -webkit-align-items: stretch;
2142 -ms-flex-align: stretch;
2143 align-items: stretch; }
2144 .large-horizontal.grid-frame, .large-horizontal.grid-block, .large-horizontal.small-grid-block, .large-horizontal.medium-grid-block, .large-horizontal.large-grid-block {
2145 -webkit-flex-flow: row wrap;
2146 -ms-flex-flow: row wrap;
2147 flex-flow: row wrap; } }
2148 .align-right.grid-frame, .align-right.grid-block, .align-right.small-grid-block, .align-right.medium-grid-block, .align-right.large-grid-block {
2149 -webkit-justify-content: flex-end;
2151 justify-content: flex-end; }
2152 .align-center.grid-frame, .align-center.grid-block, .align-center.small-grid-block, .align-center.medium-grid-block, .align-center.large-grid-block {
2153 -webkit-justify-content: center;
2154 -ms-flex-pack: center;
2155 justify-content: center; }
2156 .align-justify.grid-frame, .align-justify.grid-block, .align-justify.small-grid-block, .align-justify.medium-grid-block, .align-justify.large-grid-block {
2157 -webkit-justify-content: space-between;
2158 -ms-flex-pack: justify;
2159 justify-content: space-between; }
2160 .align-spaced.grid-frame, .align-spaced.grid-block, .align-spaced.small-grid-block, .align-spaced.medium-grid-block, .align-spaced.large-grid-block {
2161 -webkit-justify-content: space-around;
2162 -ms-flex-pack: distribute;
2163 justify-content: space-around; }
2164 .wrap.grid-frame, .wrap.grid-block, .wrap.small-grid-block, .wrap.medium-grid-block, .wrap.large-grid-block {
2165 -webkit-flex-wrap: wrap;
2166 -ms-flex-wrap: wrap;
2168 -webkit-align-items: flex-start;
2169 -ms-flex-align: start;
2170 align-items: flex-start; }
2172 .shrink.grid-block, .shrink.grid-content, .shrink.small-grid-block, .shrink.small-grid-content, .shrink.medium-grid-block, .shrink.medium-grid-content, .shrink.large-grid-block, .shrink.large-grid-content {
2173 -webkit-flex: 0 0 auto;
2176 .noscroll.grid-block, .noscroll.grid-content, .noscroll.small-grid-block, .noscroll.small-grid-content, .noscroll.medium-grid-block, .noscroll.medium-grid-content, .noscroll.large-grid-block, .noscroll.large-grid-content {
2180 display: -webkit-flex;
2181 display: -ms-flexbox;
2186 -webkit-backface-visibility: hidden;
2187 backface-visibility: hidden;
2188 -webkit-flex: 1 1 auto;
2191 -webkit-flex-flow: row wrap;
2192 -ms-flex-flow: row wrap;
2193 flex-flow: row wrap;
2194 -webkit-flex-wrap: nowrap;
2195 -ms-flex-wrap: nowrap;
2197 -webkit-align-items: stretch;
2198 -ms-flex-align: stretch;
2199 align-items: stretch;
2200 -webkit-justify-content: flex-start;
2201 -ms-flex-pack: start;
2202 justify-content: flex-start;
2208 display: -webkit-flex;
2209 display: -ms-flexbox;
2214 -webkit-backface-visibility: hidden;
2215 backface-visibility: hidden;
2216 -webkit-flex: 1 1 auto;
2219 -webkit-flex-flow: row wrap;
2220 -ms-flex-flow: row wrap;
2221 flex-flow: row wrap;
2222 -webkit-flex-wrap: nowrap;
2223 -ms-flex-wrap: nowrap;
2225 -webkit-align-items: stretch;
2226 -ms-flex-align: stretch;
2227 align-items: stretch;
2228 -webkit-justify-content: flex-start;
2229 -ms-flex-pack: start;
2230 justify-content: flex-start;
2236 -webkit-overflow-scrolling: touch;
2237 -ms-overflow-style: -ms-autohiding-scrollbar; }
2243 -webkit-overflow-scrolling: touch;
2244 -ms-overflow-style: -ms-autohiding-scrollbar;
2245 -webkit-flex: 1 1 auto;
2248 .grid-content.collapse {
2250 .grid-content .grid-block {
2252 margin-right: -1rem;
2253 -webkit-flex-wrap: wrap;
2254 -ms-flex-wrap: wrap;
2256 overflow: visible; }
2257 .grid-content .grid-block.nowrap {
2258 -webkit-flex-wrap: nowrap;
2259 -ms-flex-wrap: nowrap;
2261 -webkit-align-items: stretch;
2262 -ms-flex-align: stretch;
2263 align-items: stretch; }
2264 .grid-content .grid-block .grid-content {
2265 overflow: visible; }
2268 max-width: 56.25rem;
2270 .grid-container.contain-left {
2271 max-width: 56.25rem;
2272 margin: 0 auto 0 0; }
2273 .grid-container.contain-right {
2274 max-width: 56.25rem;
2275 margin: 0 0 0 auto; }
2278 display: -webkit-flex;
2279 display: -ms-flexbox;
2284 -webkit-backface-visibility: hidden;
2285 backface-visibility: hidden;
2286 -webkit-flex: 1 1 auto;
2289 -webkit-flex-flow: row wrap;
2290 -ms-flex-flow: row wrap;
2291 flex-flow: row wrap;
2292 -webkit-flex-wrap: nowrap;
2293 -ms-flex-wrap: nowrap;
2295 -webkit-align-items: stretch;
2296 -ms-flex-align: stretch;
2297 align-items: stretch;
2298 -webkit-justify-content: flex-start;
2299 -ms-flex-pack: start;
2300 justify-content: flex-start;
2306 -webkit-overflow-scrolling: touch;
2307 -ms-overflow-style: -ms-autohiding-scrollbar; }
2308 .small-grid-block.panel {
2309 -webkit-transform: none;
2316 background: transparent;
2322 .small-grid-content {
2326 -webkit-overflow-scrolling: touch;
2327 -ms-overflow-style: -ms-autohiding-scrollbar;
2328 -webkit-flex: 1 1 auto;
2331 .small-grid-content.panel {
2332 -webkit-transform: none;
2339 background: transparent;
2345 @media only screen and (min-width: 40em) {
2346 .medium-grid-block {
2347 display: -webkit-flex;
2348 display: -ms-flexbox;
2353 -webkit-backface-visibility: hidden;
2354 backface-visibility: hidden;
2355 -webkit-flex: 1 1 auto;
2358 -webkit-flex-flow: row wrap;
2359 -ms-flex-flow: row wrap;
2360 flex-flow: row wrap;
2361 -webkit-flex-wrap: nowrap;
2362 -ms-flex-wrap: nowrap;
2364 -webkit-align-items: stretch;
2365 -ms-flex-align: stretch;
2366 align-items: stretch;
2367 -webkit-justify-content: flex-start;
2368 -ms-flex-pack: start;
2369 justify-content: flex-start;
2375 -webkit-overflow-scrolling: touch;
2376 -ms-overflow-style: -ms-autohiding-scrollbar; }
2377 .medium-grid-block.panel {
2378 -webkit-transform: none;
2385 background: transparent;
2391 @media only screen and (min-width: 40em) {
2392 .medium-grid-content {
2396 -webkit-overflow-scrolling: touch;
2397 -ms-overflow-style: -ms-autohiding-scrollbar;
2398 -webkit-flex: 1 1 auto;
2401 .medium-grid-content.panel {
2402 -webkit-transform: none;
2409 background: transparent;
2415 @media only screen and (min-width: 75em) {
2417 display: -webkit-flex;
2418 display: -ms-flexbox;
2423 -webkit-backface-visibility: hidden;
2424 backface-visibility: hidden;
2425 -webkit-flex: 1 1 auto;
2428 -webkit-flex-flow: row wrap;
2429 -ms-flex-flow: row wrap;
2430 flex-flow: row wrap;
2431 -webkit-flex-wrap: nowrap;
2432 -ms-flex-wrap: nowrap;
2434 -webkit-align-items: stretch;
2435 -ms-flex-align: stretch;
2436 align-items: stretch;
2437 -webkit-justify-content: flex-start;
2438 -ms-flex-pack: start;
2439 justify-content: flex-start;
2445 -webkit-overflow-scrolling: touch;
2446 -ms-overflow-style: -ms-autohiding-scrollbar; }
2447 .large-grid-block.panel {
2448 -webkit-transform: none;
2455 background: transparent;
2461 @media only screen and (min-width: 75em) {
2462 .large-grid-content {
2466 -webkit-overflow-scrolling: touch;
2467 -ms-overflow-style: -ms-autohiding-scrollbar;
2468 -webkit-flex: 1 1 auto;
2471 .large-grid-content.panel {
2472 -webkit-transform: none;
2479 background: transparent;
2546 -webkit-flex: 0 0 8.33333%;
2547 -ms-flex: 0 0 8.33333%;
2549 max-width: 8.33333%; }
2557 margin-left: 8.33333%; }
2560 -webkit-flex-flow: row wrap;
2561 -ms-flex-flow: row wrap;
2562 flex-flow: row wrap;
2564 list-style-type: none; }
2565 .small-up-1 > li, .small-up-1 > div, .small-up-1 > section {
2566 padding: 0 1rem 1rem;
2567 -webkit-flex: 0 0 100%;
2572 -webkit-flex: 0 0 16.66667%;
2573 -ms-flex: 0 0 16.66667%;
2574 flex: 0 0 16.66667%;
2575 max-width: 16.66667%; }
2583 margin-left: 16.66667%; }
2586 -webkit-flex-flow: row wrap;
2587 -ms-flex-flow: row wrap;
2588 flex-flow: row wrap;
2590 list-style-type: none; }
2591 .small-up-2 > li, .small-up-2 > div, .small-up-2 > section {
2592 padding: 0 1rem 1rem;
2593 -webkit-flex: 0 0 50%;
2598 -webkit-flex: 0 0 25%;
2612 -webkit-flex-flow: row wrap;
2613 -ms-flex-flow: row wrap;
2614 flex-flow: row wrap;
2616 list-style-type: none; }
2617 .small-up-3 > li, .small-up-3 > div, .small-up-3 > section {
2618 padding: 0 1rem 1rem;
2619 -webkit-flex: 0 0 33.33333%;
2620 -ms-flex: 0 0 33.33333%;
2621 flex: 0 0 33.33333%; }
2624 -webkit-flex: 0 0 33.33333%;
2625 -ms-flex: 0 0 33.33333%;
2626 flex: 0 0 33.33333%;
2627 max-width: 33.33333%; }
2635 margin-left: 33.33333%; }
2638 -webkit-flex-flow: row wrap;
2639 -ms-flex-flow: row wrap;
2640 flex-flow: row wrap;
2642 list-style-type: none; }
2643 .small-up-4 > li, .small-up-4 > div, .small-up-4 > section {
2644 padding: 0 1rem 1rem;
2645 -webkit-flex: 0 0 25%;
2650 -webkit-flex: 0 0 41.66667%;
2651 -ms-flex: 0 0 41.66667%;
2652 flex: 0 0 41.66667%;
2653 max-width: 41.66667%; }
2661 margin-left: 41.66667%; }
2664 -webkit-flex-flow: row wrap;
2665 -ms-flex-flow: row wrap;
2666 flex-flow: row wrap;
2668 list-style-type: none; }
2669 .small-up-5 > li, .small-up-5 > div, .small-up-5 > section {
2670 padding: 0 1rem 1rem;
2671 -webkit-flex: 0 0 20%;
2676 -webkit-flex: 0 0 50%;
2690 -webkit-flex-flow: row wrap;
2691 -ms-flex-flow: row wrap;
2692 flex-flow: row wrap;
2694 list-style-type: none; }
2695 .small-up-6 > li, .small-up-6 > div, .small-up-6 > section {
2696 padding: 0 1rem 1rem;
2697 -webkit-flex: 0 0 16.66667%;
2698 -ms-flex: 0 0 16.66667%;
2699 flex: 0 0 16.66667%; }
2702 -webkit-flex: 0 0 58.33333%;
2703 -ms-flex: 0 0 58.33333%;
2704 flex: 0 0 58.33333%;
2705 max-width: 58.33333%; }
2713 margin-left: 58.33333%; }
2716 -webkit-flex-flow: row wrap;
2717 -ms-flex-flow: row wrap;
2718 flex-flow: row wrap;
2720 list-style-type: none; }
2721 .small-up-7 > li, .small-up-7 > div, .small-up-7 > section {
2722 padding: 0 1rem 1rem;
2723 -webkit-flex: 0 0 14.28571%;
2724 -ms-flex: 0 0 14.28571%;
2725 flex: 0 0 14.28571%; }
2728 -webkit-flex: 0 0 66.66667%;
2729 -ms-flex: 0 0 66.66667%;
2730 flex: 0 0 66.66667%;
2731 max-width: 66.66667%; }
2739 margin-left: 66.66667%; }
2742 -webkit-flex-flow: row wrap;
2743 -ms-flex-flow: row wrap;
2744 flex-flow: row wrap;
2746 list-style-type: none; }
2747 .small-up-8 > li, .small-up-8 > div, .small-up-8 > section {
2748 padding: 0 1rem 1rem;
2749 -webkit-flex: 0 0 12.5%;
2750 -ms-flex: 0 0 12.5%;
2754 -webkit-flex: 0 0 75%;
2768 -webkit-flex-flow: row wrap;
2769 -ms-flex-flow: row wrap;
2770 flex-flow: row wrap;
2772 list-style-type: none; }
2773 .small-up-9 > li, .small-up-9 > div, .small-up-9 > section {
2774 padding: 0 1rem 1rem;
2775 -webkit-flex: 0 0 11.11111%;
2776 -ms-flex: 0 0 11.11111%;
2777 flex: 0 0 11.11111%; }
2780 -webkit-flex: 0 0 83.33333%;
2781 -ms-flex: 0 0 83.33333%;
2782 flex: 0 0 83.33333%;
2783 max-width: 83.33333%; }
2791 margin-left: 83.33333%; }
2794 -webkit-flex-flow: row wrap;
2795 -ms-flex-flow: row wrap;
2796 flex-flow: row wrap;
2798 list-style-type: none; }
2799 .small-up-10 > li, .small-up-10 > div, .small-up-10 > section {
2800 padding: 0 1rem 1rem;
2801 -webkit-flex: 0 0 10%;
2806 -webkit-flex: 0 0 91.66667%;
2807 -ms-flex: 0 0 91.66667%;
2808 flex: 0 0 91.66667%;
2809 max-width: 91.66667%; }
2817 margin-left: 91.66667%; }
2820 -webkit-flex-flow: row wrap;
2821 -ms-flex-flow: row wrap;
2822 flex-flow: row wrap;
2824 list-style-type: none; }
2825 .small-up-11 > li, .small-up-11 > div, .small-up-11 > section {
2826 padding: 0 1rem 1rem;
2827 -webkit-flex: 0 0 9.09091%;
2828 -ms-flex: 0 0 9.09091%;
2829 flex: 0 0 9.09091%; }
2832 -webkit-flex: 0 0 100%;
2843 margin-left: 100%; }
2846 -webkit-flex-flow: row wrap;
2847 -ms-flex-flow: row wrap;
2848 flex-flow: row wrap;
2850 list-style-type: none; }
2851 .small-up-12 > li, .small-up-12 > div, .small-up-12 > section {
2852 padding: 0 1rem 1rem;
2853 -webkit-flex: 0 0 8.33333%;
2854 -ms-flex: 0 0 8.33333%;
2855 flex: 0 0 8.33333%; }
2857 @media only screen and (min-width: 40em) {
2859 -webkit-flex: 0 0 8.33333%;
2860 -ms-flex: 0 0 8.33333%;
2862 max-width: 8.33333%; }
2868 margin-left: 8.33333%; }
2870 -webkit-flex-flow: row wrap;
2871 -ms-flex-flow: row wrap;
2872 flex-flow: row wrap;
2874 list-style-type: none; }
2875 .medium-up-1 > li, .medium-up-1 > div, .medium-up-1 > section {
2876 padding: 0 1rem 1rem;
2877 -webkit-flex: 0 0 100%;
2881 @media only screen and (min-width: 40em) {
2883 -webkit-flex: 0 0 16.66667%;
2884 -ms-flex: 0 0 16.66667%;
2885 flex: 0 0 16.66667%;
2886 max-width: 16.66667%; }
2892 margin-left: 16.66667%; }
2894 -webkit-flex-flow: row wrap;
2895 -ms-flex-flow: row wrap;
2896 flex-flow: row wrap;
2898 list-style-type: none; }
2899 .medium-up-2 > li, .medium-up-2 > div, .medium-up-2 > section {
2900 padding: 0 1rem 1rem;
2901 -webkit-flex: 0 0 50%;
2905 @media only screen and (min-width: 40em) {
2907 -webkit-flex: 0 0 25%;
2918 -webkit-flex-flow: row wrap;
2919 -ms-flex-flow: row wrap;
2920 flex-flow: row wrap;
2922 list-style-type: none; }
2923 .medium-up-3 > li, .medium-up-3 > div, .medium-up-3 > section {
2924 padding: 0 1rem 1rem;
2925 -webkit-flex: 0 0 33.33333%;
2926 -ms-flex: 0 0 33.33333%;
2927 flex: 0 0 33.33333%; } }
2929 @media only screen and (min-width: 40em) {
2931 -webkit-flex: 0 0 33.33333%;
2932 -ms-flex: 0 0 33.33333%;
2933 flex: 0 0 33.33333%;
2934 max-width: 33.33333%; }
2940 margin-left: 33.33333%; }
2942 -webkit-flex-flow: row wrap;
2943 -ms-flex-flow: row wrap;
2944 flex-flow: row wrap;
2946 list-style-type: none; }
2947 .medium-up-4 > li, .medium-up-4 > div, .medium-up-4 > section {
2948 padding: 0 1rem 1rem;
2949 -webkit-flex: 0 0 25%;
2953 @media only screen and (min-width: 40em) {
2955 -webkit-flex: 0 0 41.66667%;
2956 -ms-flex: 0 0 41.66667%;
2957 flex: 0 0 41.66667%;
2958 max-width: 41.66667%; }
2964 margin-left: 41.66667%; }
2966 -webkit-flex-flow: row wrap;
2967 -ms-flex-flow: row wrap;
2968 flex-flow: row wrap;
2970 list-style-type: none; }
2971 .medium-up-5 > li, .medium-up-5 > div, .medium-up-5 > section {
2972 padding: 0 1rem 1rem;
2973 -webkit-flex: 0 0 20%;
2977 @media only screen and (min-width: 40em) {
2979 -webkit-flex: 0 0 50%;
2990 -webkit-flex-flow: row wrap;
2991 -ms-flex-flow: row wrap;
2992 flex-flow: row wrap;
2994 list-style-type: none; }
2995 .medium-up-6 > li, .medium-up-6 > div, .medium-up-6 > section {
2996 padding: 0 1rem 1rem;
2997 -webkit-flex: 0 0 16.66667%;
2998 -ms-flex: 0 0 16.66667%;
2999 flex: 0 0 16.66667%; } }
3001 @media only screen and (min-width: 40em) {
3003 -webkit-flex: 0 0 58.33333%;
3004 -ms-flex: 0 0 58.33333%;
3005 flex: 0 0 58.33333%;
3006 max-width: 58.33333%; }
3012 margin-left: 58.33333%; }
3014 -webkit-flex-flow: row wrap;
3015 -ms-flex-flow: row wrap;
3016 flex-flow: row wrap;
3018 list-style-type: none; }
3019 .medium-up-7 > li, .medium-up-7 > div, .medium-up-7 > section {
3020 padding: 0 1rem 1rem;
3021 -webkit-flex: 0 0 14.28571%;
3022 -ms-flex: 0 0 14.28571%;
3023 flex: 0 0 14.28571%; } }
3025 @media only screen and (min-width: 40em) {
3027 -webkit-flex: 0 0 66.66667%;
3028 -ms-flex: 0 0 66.66667%;
3029 flex: 0 0 66.66667%;
3030 max-width: 66.66667%; }
3036 margin-left: 66.66667%; }
3038 -webkit-flex-flow: row wrap;
3039 -ms-flex-flow: row wrap;
3040 flex-flow: row wrap;
3042 list-style-type: none; }
3043 .medium-up-8 > li, .medium-up-8 > div, .medium-up-8 > section {
3044 padding: 0 1rem 1rem;
3045 -webkit-flex: 0 0 12.5%;
3046 -ms-flex: 0 0 12.5%;
3047 flex: 0 0 12.5%; } }
3049 @media only screen and (min-width: 40em) {
3051 -webkit-flex: 0 0 75%;
3062 -webkit-flex-flow: row wrap;
3063 -ms-flex-flow: row wrap;
3064 flex-flow: row wrap;
3066 list-style-type: none; }
3067 .medium-up-9 > li, .medium-up-9 > div, .medium-up-9 > section {
3068 padding: 0 1rem 1rem;
3069 -webkit-flex: 0 0 11.11111%;
3070 -ms-flex: 0 0 11.11111%;
3071 flex: 0 0 11.11111%; } }
3073 @media only screen and (min-width: 40em) {
3075 -webkit-flex: 0 0 83.33333%;
3076 -ms-flex: 0 0 83.33333%;
3077 flex: 0 0 83.33333%;
3078 max-width: 83.33333%; }
3084 margin-left: 83.33333%; }
3086 -webkit-flex-flow: row wrap;
3087 -ms-flex-flow: row wrap;
3088 flex-flow: row wrap;
3090 list-style-type: none; }
3091 .medium-up-10 > li, .medium-up-10 > div, .medium-up-10 > section {
3092 padding: 0 1rem 1rem;
3093 -webkit-flex: 0 0 10%;
3097 @media only screen and (min-width: 40em) {
3099 -webkit-flex: 0 0 91.66667%;
3100 -ms-flex: 0 0 91.66667%;
3101 flex: 0 0 91.66667%;
3102 max-width: 91.66667%; }
3108 margin-left: 91.66667%; }
3110 -webkit-flex-flow: row wrap;
3111 -ms-flex-flow: row wrap;
3112 flex-flow: row wrap;
3114 list-style-type: none; }
3115 .medium-up-11 > li, .medium-up-11 > div, .medium-up-11 > section {
3116 padding: 0 1rem 1rem;
3117 -webkit-flex: 0 0 9.09091%;
3118 -ms-flex: 0 0 9.09091%;
3119 flex: 0 0 9.09091%; } }
3121 @media only screen and (min-width: 40em) {
3123 -webkit-flex: 0 0 100%;
3132 margin-left: 100%; }
3134 -webkit-flex-flow: row wrap;
3135 -ms-flex-flow: row wrap;
3136 flex-flow: row wrap;
3138 list-style-type: none; }
3139 .medium-up-12 > li, .medium-up-12 > div, .medium-up-12 > section {
3140 padding: 0 1rem 1rem;
3141 -webkit-flex: 0 0 8.33333%;
3142 -ms-flex: 0 0 8.33333%;
3143 flex: 0 0 8.33333%; } }
3145 @media only screen and (min-width: 75em) {
3147 -webkit-flex: 0 0 8.33333%;
3148 -ms-flex: 0 0 8.33333%;
3150 max-width: 8.33333%; }
3156 margin-left: 8.33333%; }
3158 -webkit-flex-flow: row wrap;
3159 -ms-flex-flow: row wrap;
3160 flex-flow: row wrap;
3162 list-style-type: none; }
3163 .large-up-1 > li, .large-up-1 > div, .large-up-1 > section {
3164 padding: 0 1rem 1rem;
3165 -webkit-flex: 0 0 100%;
3169 @media only screen and (min-width: 75em) {
3171 -webkit-flex: 0 0 16.66667%;
3172 -ms-flex: 0 0 16.66667%;
3173 flex: 0 0 16.66667%;
3174 max-width: 16.66667%; }
3180 margin-left: 16.66667%; }
3182 -webkit-flex-flow: row wrap;
3183 -ms-flex-flow: row wrap;
3184 flex-flow: row wrap;
3186 list-style-type: none; }
3187 .large-up-2 > li, .large-up-2 > div, .large-up-2 > section {
3188 padding: 0 1rem 1rem;
3189 -webkit-flex: 0 0 50%;
3193 @media only screen and (min-width: 75em) {
3195 -webkit-flex: 0 0 25%;
3206 -webkit-flex-flow: row wrap;
3207 -ms-flex-flow: row wrap;
3208 flex-flow: row wrap;
3210 list-style-type: none; }
3211 .large-up-3 > li, .large-up-3 > div, .large-up-3 > section {
3212 padding: 0 1rem 1rem;
3213 -webkit-flex: 0 0 33.33333%;
3214 -ms-flex: 0 0 33.33333%;
3215 flex: 0 0 33.33333%; } }
3217 @media only screen and (min-width: 75em) {
3219 -webkit-flex: 0 0 33.33333%;
3220 -ms-flex: 0 0 33.33333%;
3221 flex: 0 0 33.33333%;
3222 max-width: 33.33333%; }
3228 margin-left: 33.33333%; }
3230 -webkit-flex-flow: row wrap;
3231 -ms-flex-flow: row wrap;
3232 flex-flow: row wrap;
3234 list-style-type: none; }
3235 .large-up-4 > li, .large-up-4 > div, .large-up-4 > section {
3236 padding: 0 1rem 1rem;
3237 -webkit-flex: 0 0 25%;
3241 @media only screen and (min-width: 75em) {
3243 -webkit-flex: 0 0 41.66667%;
3244 -ms-flex: 0 0 41.66667%;
3245 flex: 0 0 41.66667%;
3246 max-width: 41.66667%; }
3252 margin-left: 41.66667%; }
3254 -webkit-flex-flow: row wrap;
3255 -ms-flex-flow: row wrap;
3256 flex-flow: row wrap;
3258 list-style-type: none; }
3259 .large-up-5 > li, .large-up-5 > div, .large-up-5 > section {
3260 padding: 0 1rem 1rem;
3261 -webkit-flex: 0 0 20%;
3265 @media only screen and (min-width: 75em) {
3267 -webkit-flex: 0 0 50%;
3278 -webkit-flex-flow: row wrap;
3279 -ms-flex-flow: row wrap;
3280 flex-flow: row wrap;
3282 list-style-type: none; }
3283 .large-up-6 > li, .large-up-6 > div, .large-up-6 > section {
3284 padding: 0 1rem 1rem;
3285 -webkit-flex: 0 0 16.66667%;
3286 -ms-flex: 0 0 16.66667%;
3287 flex: 0 0 16.66667%; } }
3289 @media only screen and (min-width: 75em) {
3291 -webkit-flex: 0 0 58.33333%;
3292 -ms-flex: 0 0 58.33333%;
3293 flex: 0 0 58.33333%;
3294 max-width: 58.33333%; }
3300 margin-left: 58.33333%; }
3302 -webkit-flex-flow: row wrap;
3303 -ms-flex-flow: row wrap;
3304 flex-flow: row wrap;
3306 list-style-type: none; }
3307 .large-up-7 > li, .large-up-7 > div, .large-up-7 > section {
3308 padding: 0 1rem 1rem;
3309 -webkit-flex: 0 0 14.28571%;
3310 -ms-flex: 0 0 14.28571%;
3311 flex: 0 0 14.28571%; } }
3313 @media only screen and (min-width: 75em) {
3315 -webkit-flex: 0 0 66.66667%;
3316 -ms-flex: 0 0 66.66667%;
3317 flex: 0 0 66.66667%;
3318 max-width: 66.66667%; }
3324 margin-left: 66.66667%; }
3326 -webkit-flex-flow: row wrap;
3327 -ms-flex-flow: row wrap;
3328 flex-flow: row wrap;
3330 list-style-type: none; }
3331 .large-up-8 > li, .large-up-8 > div, .large-up-8 > section {
3332 padding: 0 1rem 1rem;
3333 -webkit-flex: 0 0 12.5%;
3334 -ms-flex: 0 0 12.5%;
3335 flex: 0 0 12.5%; } }
3337 @media only screen and (min-width: 75em) {
3339 -webkit-flex: 0 0 75%;
3350 -webkit-flex-flow: row wrap;
3351 -ms-flex-flow: row wrap;
3352 flex-flow: row wrap;
3354 list-style-type: none; }
3355 .large-up-9 > li, .large-up-9 > div, .large-up-9 > section {
3356 padding: 0 1rem 1rem;
3357 -webkit-flex: 0 0 11.11111%;
3358 -ms-flex: 0 0 11.11111%;
3359 flex: 0 0 11.11111%; } }
3361 @media only screen and (min-width: 75em) {
3363 -webkit-flex: 0 0 83.33333%;
3364 -ms-flex: 0 0 83.33333%;
3365 flex: 0 0 83.33333%;
3366 max-width: 83.33333%; }
3372 margin-left: 83.33333%; }
3374 -webkit-flex-flow: row wrap;
3375 -ms-flex-flow: row wrap;
3376 flex-flow: row wrap;
3378 list-style-type: none; }
3379 .large-up-10 > li, .large-up-10 > div, .large-up-10 > section {
3380 padding: 0 1rem 1rem;
3381 -webkit-flex: 0 0 10%;
3385 @media only screen and (min-width: 75em) {
3387 -webkit-flex: 0 0 91.66667%;
3388 -ms-flex: 0 0 91.66667%;
3389 flex: 0 0 91.66667%;
3390 max-width: 91.66667%; }
3396 margin-left: 91.66667%; }
3398 -webkit-flex-flow: row wrap;
3399 -ms-flex-flow: row wrap;
3400 flex-flow: row wrap;
3402 list-style-type: none; }
3403 .large-up-11 > li, .large-up-11 > div, .large-up-11 > section {
3404 padding: 0 1rem 1rem;
3405 -webkit-flex: 0 0 9.09091%;
3406 -ms-flex: 0 0 9.09091%;
3407 flex: 0 0 9.09091%; } }
3409 @media only screen and (min-width: 75em) {
3411 -webkit-flex: 0 0 100%;
3420 margin-left: 100%; }
3422 -webkit-flex-flow: row wrap;
3423 -ms-flex-flow: row wrap;
3424 flex-flow: row wrap;
3426 list-style-type: none; }
3427 .large-up-12 > li, .large-up-12 > div, .large-up-12 > section {
3428 padding: 0 1rem 1rem;
3429 -webkit-flex: 0 0 8.33333%;
3430 -ms-flex: 0 0 8.33333%;
3431 flex: 0 0 8.33333%; } }
3433 .grid-content .modal .grid-block {
3434 -webkit-flex-wrap: nowrap;
3435 -ms-flex-wrap: nowrap;
3436 flex-wrap: nowrap; }
3442 A navigational component which can display the current screen the user is on, along with additional controls or menu items.
3444 The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order:
3450 display: -webkit-flex;
3451 display: -ms-flexbox;
3453 -webkit-flex: 0 0 auto;
3456 -webkit-align-items: center;
3457 -ms-flex-align: center;
3458 align-items: center;
3459 -webkit-justify-content: flex-start;
3460 -ms-flex-pack: start;
3461 justify-content: flex-start;
3462 overflow: visible; }
3464 font-weight: bold; }
3465 .title-bar .left, .title-bar .center, .title-bar .right {
3467 white-space: nowrap;
3468 overflow: visible; }
3469 .title-bar .left:first-child:last-child, .title-bar .center:first-child:last-child, .title-bar .right:first-child:last-child {
3478 -webkit-flex: 0 0 25%;
3481 .title-bar .center {
3485 -webkit-flex: 0 0 50%;
3488 text-align: center; }
3493 -webkit-flex: 0 0 25%;
3496 text-align: right; }
3497 .title-bar .left:first-child {
3498 -webkit-flex: 1 1 auto;
3501 .title-bar .left:first-child + .right:last-child {
3502 -webkit-flex: 1 1 auto;
3505 .title-bar .center:first-child:not(:last-child) {
3507 .title-bar .center + .left {
3508 margin-right: -25%; }
3514 border-bottom: 1px solid #ccc; }
3515 .title-bar.primary {
3516 background: #00558b;
3519 border-bottom: 1px solid #ccc; }
3520 .title-bar.primary a, .title-bar.primary a:hover {
3522 .title-bar.primary .iconic * {
3525 .title-bar.primary .iconic *.iconic-property-accent {
3529 background: #232323;
3532 border-bottom: 1px solid #ccc; }
3533 .title-bar.dark a, .title-bar.dark a:hover {
3535 .title-bar.dark .iconic * {
3538 .title-bar.dark .iconic *.iconic-property-accent {
3544 border-top: 1px solid #ccc; }
3551 white-space: nowrap;
3552 display: inline-block;
3557 padding: 0.33333rem 0.5rem;
3558 background: #00558b;
3562 background: #00558b;
3566 background: #43AC6A;
3570 background: #F08A24;
3574 background: #F04124;
3578 background: #232323;
3586 -webkit-align-items: center;
3587 -ms-flex-align: center;
3588 align-items: center;
3589 -webkit-justify-content: center;
3590 -ms-flex-pack: center;
3591 justify-content: center;
3592 display: -webkit-inline-flex;
3593 display: -ms-inline-flexbox;
3594 display: inline-flex;
3595 border-radius: 1000px; }
3601 background: #00558b;
3604 background: #f1f1f1;
3607 background: #00558b;
3610 background: #43AC6A;
3613 background: #F08A24;
3616 background: #F04124;
3619 background: #232323;
3623 list-style-type: none;
3625 .inline-list li, .inline-list dt, .inline-list dd {
3626 display: inline-block;
3628 margin-right: -2px; }
3637 A generic, flexible menu component.
3640 - Orient horizontally and vertically
3641 - Change orientation at certain breakpoints
3642 - Items with icons above, below, or to the left or right
3643 - Text labels for vertical menus and badges for horizontal menus
3646 display: -webkit-flex;
3647 display: -ms-flexbox;
3649 -webkit-align-items: stretch;
3650 -ms-flex-align: stretch;
3651 align-items: stretch;
3653 list-style-type: none; }
3655 -webkit-flex: 1 0 auto;
3658 -webkit-align-items: center;
3659 -ms-flex-align: center;
3660 align-items: center; }
3661 .menu-bar > li > a {
3662 display: -webkit-flex;
3663 display: -ms-flexbox;
3665 -webkit-flex-flow: column nowrap;
3666 -ms-flex-flow: column nowrap;
3667 flex-flow: column nowrap;
3668 -webkit-align-items: center;
3669 -ms-flex-align: center;
3670 align-items: center;
3676 Set the alignment of menu items (li) within a menu-bar
3678 left: Items align to the left.
3679 right: Items align to the right.
3680 center: Items align to the center.
3681 justify: Items are spaced equally apart so they occupy the space of the entire grid.
3682 spaced: Items are given equal space to their left and right.
3686 @param {string} $align - Alignment to use.
3688 @output An appropriate justify-content value.
3695 .menu-bar > li > a {
3697 .menu-bar > li > a:hover {
3698 background: #ededed;
3700 .menu-bar .is-active > a {
3701 background: #ededed;
3703 .menu-bar .iconic * {
3706 .menu-bar .iconic *.iconic-property-accent {
3709 .menu-bar, .menu-bar.horizontal {
3714 -webkit-flex-flow: row nowrap;
3715 -ms-flex-flow: row nowrap;
3716 flex-flow: row nowrap;
3720 .menu-bar > li > a, .menu-bar.horizontal > li > a {
3721 -webkit-flex-flow: column nowrap;
3722 -ms-flex-flow: column nowrap;
3723 flex-flow: column nowrap; }
3724 .menu-bar.vertical {
3728 -webkit-flex-flow: column nowrap;
3729 -ms-flex-flow: column nowrap;
3730 flex-flow: column nowrap;
3734 .menu-bar.vertical > li > a {
3735 -webkit-flex-flow: row nowrap;
3736 -ms-flex-flow: row nowrap;
3737 flex-flow: row nowrap; }
3738 .menu-bar.condense > li {
3739 -webkit-flex: 0 0 auto;
3742 .menu-bar.align-right {
3743 -webkit-justify-content: flex-end;
3745 justify-content: flex-end; }
3746 .menu-bar.align-center {
3747 -webkit-justify-content: center;
3748 -ms-flex-pack: center;
3749 justify-content: center; }
3750 .menu-bar.align-justify {
3751 -webkit-justify-content: space-between;
3752 -ms-flex-pack: justify;
3753 justify-content: space-between; }
3754 .menu-bar.align-spaced {
3755 -webkit-justify-content: space-around;
3756 -ms-flex-pack: distribute;
3757 justify-content: space-around; }
3758 .menu-bar.small-condense li {
3759 -webkit-flex: 0 0 auto;
3762 .menu-bar.small-expand li {
3763 -webkit-flex: 1 0 auto;
3766 .menu-bar.small-align-left {
3767 -webkit-justify-content: flex-start;
3768 -ms-flex-pack: start;
3769 justify-content: flex-start; }
3770 .menu-bar.small-align-right {
3771 -webkit-justify-content: flex-end;
3773 justify-content: flex-end; }
3774 .menu-bar.small-align-center {
3775 -webkit-justify-content: center;
3776 -ms-flex-pack: center;
3777 justify-content: center; }
3778 .menu-bar.small-align-justify {
3779 -webkit-justify-content: space-between;
3780 -ms-flex-pack: justify;
3781 justify-content: space-between; }
3782 .menu-bar.small-align-spaced {
3783 -webkit-justify-content: space-around;
3784 -ms-flex-pack: distribute;
3785 justify-content: space-around; }
3786 @media only screen and (min-width: 40em) {
3787 .menu-bar.medium-condense li {
3788 -webkit-flex: 0 0 auto;
3791 .menu-bar.medium-expand li {
3792 -webkit-flex: 1 0 auto;
3795 .menu-bar.medium-align-left {
3796 -webkit-justify-content: flex-start;
3797 -ms-flex-pack: start;
3798 justify-content: flex-start; }
3799 .menu-bar.medium-align-right {
3800 -webkit-justify-content: flex-end;
3802 justify-content: flex-end; }
3803 .menu-bar.medium-align-center {
3804 -webkit-justify-content: center;
3805 -ms-flex-pack: center;
3806 justify-content: center; }
3807 .menu-bar.medium-align-justify {
3808 -webkit-justify-content: space-between;
3809 -ms-flex-pack: justify;
3810 justify-content: space-between; }
3811 .menu-bar.medium-align-spaced {
3812 -webkit-justify-content: space-around;
3813 -ms-flex-pack: distribute;
3814 justify-content: space-around; } }
3815 @media only screen and (min-width: 75em) {
3816 .menu-bar.large-condense li {
3817 -webkit-flex: 0 0 auto;
3820 .menu-bar.large-expand li {
3821 -webkit-flex: 1 0 auto;
3824 .menu-bar.large-align-left {
3825 -webkit-justify-content: flex-start;
3826 -ms-flex-pack: start;
3827 justify-content: flex-start; }
3828 .menu-bar.large-align-right {
3829 -webkit-justify-content: flex-end;
3831 justify-content: flex-end; }
3832 .menu-bar.large-align-center {
3833 -webkit-justify-content: center;
3834 -ms-flex-pack: center;
3835 justify-content: center; }
3836 .menu-bar.large-align-justify {
3837 -webkit-justify-content: space-between;
3838 -ms-flex-pack: justify;
3839 justify-content: space-between; }
3840 .menu-bar.large-align-spaced {
3841 -webkit-justify-content: space-around;
3842 -ms-flex-pack: distribute;
3843 justify-content: space-around; } }
3844 .menu-bar.small-horizontal {
3849 -webkit-flex-flow: row nowrap;
3850 -ms-flex-flow: row nowrap;
3851 flex-flow: row nowrap;
3855 .menu-bar.small-horizontal > li > a {
3856 -webkit-flex-flow: column nowrap;
3857 -ms-flex-flow: column nowrap;
3858 flex-flow: column nowrap; }
3859 .menu-bar.small-vertical {
3863 -webkit-flex-flow: column nowrap;
3864 -ms-flex-flow: column nowrap;
3865 flex-flow: column nowrap;
3869 .menu-bar.small-vertical > li > a {
3870 -webkit-flex-flow: row nowrap;
3871 -ms-flex-flow: row nowrap;
3872 flex-flow: row nowrap; }
3873 @media only screen and (min-width: 40em) {
3874 .menu-bar.medium-horizontal {
3879 -webkit-flex-flow: row nowrap;
3880 -ms-flex-flow: row nowrap;
3881 flex-flow: row nowrap;
3885 .menu-bar.medium-horizontal > li > a {
3886 -webkit-flex-flow: column nowrap;
3887 -ms-flex-flow: column nowrap;
3888 flex-flow: column nowrap; }
3889 .menu-bar.medium-vertical {
3893 -webkit-flex-flow: column nowrap;
3894 -ms-flex-flow: column nowrap;
3895 flex-flow: column nowrap;
3899 .menu-bar.medium-vertical > li > a {
3900 -webkit-flex-flow: row nowrap;
3901 -ms-flex-flow: row nowrap;
3902 flex-flow: row nowrap; } }
3903 @media only screen and (min-width: 75em) {
3904 .menu-bar.large-horizontal {
3909 -webkit-flex-flow: row nowrap;
3910 -ms-flex-flow: row nowrap;
3911 flex-flow: row nowrap;
3915 .menu-bar.large-horizontal > li > a {
3916 -webkit-flex-flow: column nowrap;
3917 -ms-flex-flow: column nowrap;
3918 flex-flow: column nowrap; }
3919 .menu-bar.large-vertical {
3923 -webkit-flex-flow: column nowrap;
3924 -ms-flex-flow: column nowrap;
3925 flex-flow: column nowrap;
3929 .menu-bar.large-vertical > li > a {
3930 -webkit-flex-flow: row nowrap;
3931 -ms-flex-flow: row nowrap;
3932 flex-flow: row nowrap; } }
3933 .menu-bar > li > img, .menu-bar > li > .iconic, .menu-bar.icon-top > li > img, .menu-bar.icon-top > li > .iconic {
3937 .menu-bar > li > a, .menu-bar.icon-top > li > a {
3938 -webkit-flex-flow: column nowrap;
3939 -ms-flex-flow: column nowrap;
3940 flex-flow: column nowrap; }
3941 .menu-bar > li > a > img, .menu-bar > li > a > .iconic, .menu-bar.icon-top > li > a > img, .menu-bar.icon-top > li > a > .iconic {
3942 margin: 0 0 1rem 0; }
3943 .menu-bar.icon-right > li > img, .menu-bar.icon-right > li > .iconic {
3947 .menu-bar.icon-right > li > a {
3948 -webkit-flex-flow: row-reverse nowrap;
3949 -ms-flex-flow: row-reverse nowrap;
3950 flex-flow: row-reverse nowrap; }
3951 .menu-bar.icon-right > li > a > img, .menu-bar.icon-right > li > a > .iconic {
3952 margin: 0 0 0 1rem; }
3953 .menu-bar.icon-bottom > li > img, .menu-bar.icon-bottom > li > .iconic {
3957 .menu-bar.icon-bottom > li > a {
3958 -webkit-flex-flow: column-reverse nowrap;
3959 -ms-flex-flow: column-reverse nowrap;
3960 flex-flow: column-reverse nowrap; }
3961 .menu-bar.icon-bottom > li > a > img, .menu-bar.icon-bottom > li > a > .iconic {
3962 margin: 1rem 0 0 0; }
3963 .menu-bar.icon-left > li > img, .menu-bar.icon-left > li > .iconic {
3967 .menu-bar.icon-left > li > a {
3968 -webkit-flex-flow: row nowrap;
3969 -ms-flex-flow: row nowrap;
3970 flex-flow: row nowrap;
3971 -webkit-align-items: center;
3972 -ms-flex-align: center;
3973 align-items: center; }
3974 .menu-bar.icon-left > li > a > img, .menu-bar.icon-left > li > a > .iconic {
3975 margin: 0 1rem 0 0; }
3976 .menu-bar.small-icon-top > li > img, .menu-bar.small-icon-top > li > .iconic {
3980 .menu-bar.small-icon-top > li > a {
3981 -webkit-flex-flow: column nowrap;
3982 -ms-flex-flow: column nowrap;
3983 flex-flow: column nowrap; }
3984 .menu-bar.small-icon-top > li > a > img, .menu-bar.small-icon-top > li > a > .iconic {
3985 margin: 0 0 1rem 0; }
3986 .menu-bar.small-icon-right > li > img, .menu-bar.small-icon-right > li > .iconic {
3990 .menu-bar.small-icon-right > li > a {
3991 -webkit-flex-flow: row-reverse nowrap;
3992 -ms-flex-flow: row-reverse nowrap;
3993 flex-flow: row-reverse nowrap; }
3994 .menu-bar.small-icon-right > li > a > img, .menu-bar.small-icon-right > li > a > .iconic {
3995 margin: 0 0 0 1rem; }
3996 .menu-bar.small-icon-bottom > li > img, .menu-bar.small-icon-bottom > li > .iconic {
4000 .menu-bar.small-icon-bottom > li > a {
4001 -webkit-flex-flow: column-reverse nowrap;
4002 -ms-flex-flow: column-reverse nowrap;
4003 flex-flow: column-reverse nowrap; }
4004 .menu-bar.small-icon-bottom > li > a > img, .menu-bar.small-icon-bottom > li > a > .iconic {
4005 margin: 1rem 0 0 0; }
4006 .menu-bar.small-icon-left > li > img, .menu-bar.small-icon-left > li > .iconic {
4010 .menu-bar.small-icon-left > li > a {
4011 -webkit-flex-flow: row nowrap;
4012 -ms-flex-flow: row nowrap;
4013 flex-flow: row nowrap;
4014 -webkit-align-items: center;
4015 -ms-flex-align: center;
4016 align-items: center; }
4017 .menu-bar.small-icon-left > li > a > img, .menu-bar.small-icon-left > li > a > .iconic {
4018 margin: 0 1rem 0 0; }
4019 @media only screen and (min-width: 40em) {
4020 .menu-bar.medium-icon-top > li > img, .menu-bar.medium-icon-top > li > .iconic {
4024 .menu-bar.medium-icon-top > li > a {
4025 -webkit-flex-flow: column nowrap;
4026 -ms-flex-flow: column nowrap;
4027 flex-flow: column nowrap; }
4028 .menu-bar.medium-icon-top > li > a > img, .menu-bar.medium-icon-top > li > a > .iconic {
4029 margin: 0 0 1rem 0; } }
4030 @media only screen and (min-width: 40em) {
4031 .menu-bar.medium-icon-right > li > img, .menu-bar.medium-icon-right > li > .iconic {
4035 .menu-bar.medium-icon-right > li > a {
4036 -webkit-flex-flow: row-reverse nowrap;
4037 -ms-flex-flow: row-reverse nowrap;
4038 flex-flow: row-reverse nowrap; }
4039 .menu-bar.medium-icon-right > li > a > img, .menu-bar.medium-icon-right > li > a > .iconic {
4040 margin: 0 0 0 1rem; } }
4041 @media only screen and (min-width: 40em) {
4042 .menu-bar.medium-icon-bottom > li > img, .menu-bar.medium-icon-bottom > li > .iconic {
4046 .menu-bar.medium-icon-bottom > li > a {
4047 -webkit-flex-flow: column-reverse nowrap;
4048 -ms-flex-flow: column-reverse nowrap;
4049 flex-flow: column-reverse nowrap; }
4050 .menu-bar.medium-icon-bottom > li > a > img, .menu-bar.medium-icon-bottom > li > a > .iconic {
4051 margin: 1rem 0 0 0; } }
4052 @media only screen and (min-width: 40em) {
4053 .menu-bar.medium-icon-left > li > img, .menu-bar.medium-icon-left > li > .iconic {
4057 .menu-bar.medium-icon-left > li > a {
4058 -webkit-flex-flow: row nowrap;
4059 -ms-flex-flow: row nowrap;
4060 flex-flow: row nowrap;
4061 -webkit-align-items: center;
4062 -ms-flex-align: center;
4063 align-items: center; }
4064 .menu-bar.medium-icon-left > li > a > img, .menu-bar.medium-icon-left > li > a > .iconic {
4065 margin: 0 1rem 0 0; } }
4066 @media only screen and (min-width: 75em) {
4067 .menu-bar.large-icon-top > li > img, .menu-bar.large-icon-top > li > .iconic {
4071 .menu-bar.large-icon-top > li > a {
4072 -webkit-flex-flow: column nowrap;
4073 -ms-flex-flow: column nowrap;
4074 flex-flow: column nowrap; }
4075 .menu-bar.large-icon-top > li > a > img, .menu-bar.large-icon-top > li > a > .iconic {
4076 margin: 0 0 1rem 0; } }
4077 @media only screen and (min-width: 75em) {
4078 .menu-bar.large-icon-right > li > img, .menu-bar.large-icon-right > li > .iconic {
4082 .menu-bar.large-icon-right > li > a {
4083 -webkit-flex-flow: row-reverse nowrap;
4084 -ms-flex-flow: row-reverse nowrap;
4085 flex-flow: row-reverse nowrap; }
4086 .menu-bar.large-icon-right > li > a > img, .menu-bar.large-icon-right > li > a > .iconic {
4087 margin: 0 0 0 1rem; } }
4088 @media only screen and (min-width: 75em) {
4089 .menu-bar.large-icon-bottom > li > img, .menu-bar.large-icon-bottom > li > .iconic {
4093 .menu-bar.large-icon-bottom > li > a {
4094 -webkit-flex-flow: column-reverse nowrap;
4095 -ms-flex-flow: column-reverse nowrap;
4096 flex-flow: column-reverse nowrap; }
4097 .menu-bar.large-icon-bottom > li > a > img, .menu-bar.large-icon-bottom > li > a > .iconic {
4098 margin: 1rem 0 0 0; } }
4099 @media only screen and (min-width: 75em) {
4100 .menu-bar.large-icon-left > li > img, .menu-bar.large-icon-left > li > .iconic {
4104 .menu-bar.large-icon-left > li > a {
4105 -webkit-flex-flow: row nowrap;
4106 -ms-flex-flow: row nowrap;
4107 flex-flow: row nowrap;
4108 -webkit-align-items: center;
4109 -ms-flex-align: center;
4110 align-items: center; }
4111 .menu-bar.large-icon-left > li > a > img, .menu-bar.large-icon-left > li > a > .iconic {
4112 margin: 0 1rem 0 0; } }
4113 .menu-bar.label-side > li {
4114 position: relative; }
4115 .menu-bar.label-side > li > a {
4116 padding-right: 3.2rem; }
4117 .menu-bar.label-side .menu-bar-label {
4122 line-height: 1.2rem;
4124 border-radius: 1000px;
4128 pointer-events: none;
4131 -webkit-transform: translateY(-50%);
4132 transform: translateY(-50%); }
4133 .menu-bar.label-corner > li {
4134 position: relative; }
4135 .menu-bar.label-corner > li > a {
4136 padding-right: 3.2rem; }
4137 .menu-bar.label-corner .menu-bar-label {
4142 line-height: 1.2rem;
4144 border-radius: 1000px;
4148 pointer-events: none;
4152 background: #00558b; }
4153 .menu-bar.primary > li > a {
4155 .menu-bar.primary > li > a:hover {
4156 background: #0065a5;
4158 .menu-bar.primary .is-active > a {
4159 background: #0065a5;
4161 .menu-bar.primary .iconic * {
4164 .menu-bar.primary .iconic *.iconic-property-accent {
4168 background: #232323; }
4169 .menu-bar.dark > li > a {
4171 .menu-bar.dark > li > a:hover {
4172 background: #323232;
4174 .menu-bar.dark .is-active > a {
4175 background: #323232;
4177 .menu-bar.dark .iconic * {
4180 .menu-bar.dark .iconic *.iconic-property-accent {
4183 .menu-bar > li.title {
4186 font-weight: bold; }
4189 display: -webkit-flex;
4190 display: -ms-flexbox;
4192 -webkit-align-items: center;
4193 -ms-flex-align: center;
4194 align-items: center;
4195 -webkit-justify-content: space-between;
4196 -ms-flex-pack: justify;
4197 justify-content: space-between;
4198 -webkit-flex-wrap: wrap;
4199 -ms-flex-wrap: wrap;
4201 @media only screen and (min-width: 40em) {
4203 -webkit-flex-wrap: nowrap;
4204 -ms-flex-wrap: nowrap;
4205 flex-wrap: nowrap; } }
4206 .menu-group > .menu-group-left, .menu-group > .menu-group-right {
4207 -webkit-flex: 1 1 100%;
4210 @media only screen and (min-width: 40em) {
4211 .menu-group > .menu-group-left, .menu-group > .menu-group-right {
4212 -webkit-flex: 0 0 auto;
4215 .menu-group .menu-bar {
4217 .menu-group .menu-bar > li {
4218 -webkit-flex: 0 0 auto;
4221 .menu-group.primary {
4222 background-color: #00558b; }
4223 .menu-group.primary .menu-bar {
4224 background: #00558b; }
4225 .menu-group.primary .menu-bar > li > a {
4227 .menu-group.primary .menu-bar > li > a:hover {
4228 background: #0065a5;
4230 .menu-group.primary .menu-bar .is-active > a {
4231 background: #0065a5;
4233 .menu-group.primary .menu-bar .iconic * {
4236 .menu-group.primary .menu-bar .iconic *.iconic-property-accent {
4240 background-color: #232323; }
4241 .menu-group.dark .menu-bar {
4242 background: #232323; }
4243 .menu-group.dark .menu-bar > li > a {
4245 .menu-group.dark .menu-bar > li > a:hover {
4246 background: #323232;
4248 .menu-group.dark .menu-bar .is-active > a {
4249 background: #323232;
4251 .menu-group.dark .menu-bar .iconic * {
4254 .menu-group.dark .menu-bar .iconic *.iconic-property-accent {
4262 The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it.
4264 Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same.
4270 -webkit-flex: 0 0 auto;
4278 @media only screen and (min-width: 40em) {
4281 max-width: 600px; } }
4282 .modal .grid-content, .modal .grid-block {
4284 .modal .close-button, .modal [fa-close] {
4289 border-radius: 0px; }
4298 .collapse > .modal {
4309 background-color: rgba(51, 51, 51, 0.7);
4310 -webkit-align-items: center;
4311 -ms-flex-align: center;
4312 align-items: center;
4313 -webkit-justify-content: center;
4314 -ms-flex-pack: center;
4315 justify-content: center; }
4316 .modal-overlay.is-active {
4317 display: -webkit-flex;
4318 display: -ms-flexbox;
4321 @-webkit-keyframes shake {
4322 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
4323 -webkit-transform: translateX(7%);
4324 transform: translateX(7%); }
4326 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
4327 -webkit-transform: translateX(-7%);
4328 transform: translateX(-7%); }
4331 -webkit-transform: translateX(0);
4332 transform: translateX(0); } }
4335 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
4336 -webkit-transform: translateX(7%);
4337 transform: translateX(7%); }
4339 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
4340 -webkit-transform: translateX(-7%);
4341 transform: translateX(-7%); }
4344 -webkit-transform: translateX(0);
4345 transform: translateX(0); } }
4347 @-webkit-keyframes spin-cw {
4349 -webkit-transform: rotate(0deg);
4350 transform: rotate(0deg); }
4353 -webkit-transform: rotate(360deg);
4354 transform: rotate(360deg); } }
4356 @keyframes spin-cw {
4358 -webkit-transform: rotate(0deg);
4359 transform: rotate(0deg); }
4362 -webkit-transform: rotate(360deg);
4363 transform: rotate(360deg); } }
4365 @-webkit-keyframes spin-ccw {
4367 -webkit-transform: rotate(0deg);
4368 transform: rotate(0deg); }
4371 -webkit-transform: rotate(-360deg);
4372 transform: rotate(-360deg); } }
4374 @keyframes spin-ccw {
4376 -webkit-transform: rotate(0deg);
4377 transform: rotate(0deg); }
4380 -webkit-transform: rotate(-360deg);
4381 transform: rotate(-360deg); } }
4383 @-webkit-keyframes wiggle {
4385 -webkit-transform: rotate(7deg);
4386 transform: rotate(7deg); }
4388 35%, 45%, 55%, 65% {
4389 -webkit-transform: rotate(-7deg);
4390 transform: rotate(-7deg); }
4392 0%, 30%, 70%, 100% {
4393 -webkit-transform: rotate(0);
4394 transform: rotate(0); } }
4398 -webkit-transform: rotate(7deg);
4399 transform: rotate(7deg); }
4401 35%, 45%, 55%, 65% {
4402 -webkit-transform: rotate(-7deg);
4403 transform: rotate(-7deg); }
4405 0%, 30%, 70%, 100% {
4406 -webkit-transform: rotate(0);
4407 transform: rotate(0); } }
4412 .slideInDown.ng-enter, .slideInDown.ng-hide-remove {
4413 transition-duration: 500ms;
4414 transition-timing-function: ease;
4415 transition-delay: 0;
4416 transition-property: -webkit-transform, opacity;
4417 transition-property: transform, opacity;
4418 -webkit-backface-visibility: hidden;
4419 backface-visibility: hidden;
4420 -webkit-transform: translateY(-100%);
4421 transform: translateY(-100%); }
4422 .slideInDown.ng-enter.ng-enter-active, .slideInDown.ng-hide-remove.ng-hide-remove-active {
4423 -webkit-transform: translateX(0) translateY(0);
4424 transform: translateX(0) translateY(0); }
4426 .slideInLeft.ng-enter, .slideInLeft.ng-hide-remove {
4427 transition-duration: 500ms;
4428 transition-timing-function: ease;
4429 transition-delay: 0;
4430 transition-property: -webkit-transform, opacity;
4431 transition-property: transform, opacity;
4432 -webkit-backface-visibility: hidden;
4433 backface-visibility: hidden;
4434 -webkit-transform: translateX(100%);
4435 transform: translateX(100%); }
4436 .slideInLeft.ng-enter.ng-enter-active, .slideInLeft.ng-hide-remove.ng-hide-remove-active {
4437 -webkit-transform: translateX(0) translateY(0);
4438 transform: translateX(0) translateY(0); }
4440 .slideInUp.ng-enter, .slideInUp.ng-hide-remove {
4441 transition-duration: 500ms;
4442 transition-timing-function: ease;
4443 transition-delay: 0;
4444 transition-property: -webkit-transform, opacity;
4445 transition-property: transform, opacity;
4446 -webkit-backface-visibility: hidden;
4447 backface-visibility: hidden;
4448 -webkit-transform: translateY(100%);
4449 transform: translateY(100%); }
4450 .slideInUp.ng-enter.ng-enter-active, .slideInUp.ng-hide-remove.ng-hide-remove-active {
4451 -webkit-transform: translateX(0) translateY(0);
4452 transform: translateX(0) translateY(0); }
4454 .slideInRight.ng-enter, .slideInRight.ng-hide-remove {
4455 transition-duration: 500ms;
4456 transition-timing-function: ease;
4457 transition-delay: 0;
4458 transition-property: -webkit-transform, opacity;
4459 transition-property: transform, opacity;
4460 -webkit-backface-visibility: hidden;
4461 backface-visibility: hidden;
4462 -webkit-transform: translateX(-100%);
4463 transform: translateX(-100%); }
4464 .slideInRight.ng-enter.ng-enter-active, .slideInRight.ng-hide-remove.ng-hide-remove-active {
4465 -webkit-transform: translateX(0) translateY(0);
4466 transform: translateX(0) translateY(0); }
4468 .slideOutBottom.ng-leave, .slideOutBottom.ng-hide-add {
4469 transition-duration: 500ms;
4470 transition-timing-function: ease;
4471 transition-delay: 0;
4472 transition-property: -webkit-transform, opacity;
4473 transition-property: transform, opacity;
4474 -webkit-backface-visibility: hidden;
4475 backface-visibility: hidden;
4476 -webkit-transform: translateX(0) translateY(0);
4477 transform: translateX(0) translateY(0); }
4478 .slideOutBottom.ng-leave.ng-leave-active, .slideOutBottom.ng-hide-add.ng-hide-add-active {
4479 -webkit-transform: translateY(100%);
4480 transform: translateY(100%); }
4482 .slideOutRight.ng-leave, .slideOutRight.ng-hide-add {
4483 transition-duration: 500ms;
4484 transition-timing-function: ease;
4485 transition-delay: 0;
4486 transition-property: -webkit-transform, opacity;
4487 transition-property: transform, opacity;
4488 -webkit-backface-visibility: hidden;
4489 backface-visibility: hidden;
4490 -webkit-transform: translateX(0) translateY(0);
4491 transform: translateX(0) translateY(0); }
4492 .slideOutRight.ng-leave.ng-leave-active, .slideOutRight.ng-hide-add.ng-hide-add-active {
4493 -webkit-transform: translateX(100%);
4494 transform: translateX(100%); }
4496 .slideOutUp.ng-leave, .slideOutUp.ng-hide-add {
4497 transition-duration: 500ms;
4498 transition-timing-function: ease;
4499 transition-delay: 0;
4500 transition-property: -webkit-transform, opacity;
4501 transition-property: transform, opacity;
4502 -webkit-backface-visibility: hidden;
4503 backface-visibility: hidden;
4504 -webkit-transform: translateX(0) translateY(0);
4505 transform: translateX(0) translateY(0); }
4506 .slideOutUp.ng-leave.ng-leave-active, .slideOutUp.ng-hide-add.ng-hide-add-active {
4507 -webkit-transform: translateY(-100%);
4508 transform: translateY(-100%); }
4510 .slideOutLeft.ng-leave, .slideOutLeft.ng-hide-add {
4511 transition-duration: 500ms;
4512 transition-timing-function: ease;
4513 transition-delay: 0;
4514 transition-property: -webkit-transform, opacity;
4515 transition-property: transform, opacity;
4516 -webkit-backface-visibility: hidden;
4517 backface-visibility: hidden;
4518 -webkit-transform: translateX(0) translateY(0);
4519 transform: translateX(0) translateY(0); }
4520 .slideOutLeft.ng-leave.ng-leave-active, .slideOutLeft.ng-hide-add.ng-hide-add-active {
4521 -webkit-transform: translateX(-100%);
4522 transform: translateX(-100%); }
4524 .fadeIn.ng-enter, .fadeIn.ng-hide-remove {
4525 transition-duration: 500ms;
4526 transition-timing-function: ease;
4527 transition-delay: 0;
4528 transition-property: opacity;
4530 .fadeIn.ng-enter.ng-enter-active, .fadeIn.ng-hide-remove.ng-hide-remove-active {
4533 .fadeOut.ng-leave, .fadeOut.ng-hide-add {
4534 transition-duration: 500ms;
4535 transition-timing-function: ease;
4536 transition-delay: 0;
4537 transition-property: opacity;
4539 .fadeOut.ng-leave.ng-leave-active, .fadeOut.ng-hide-add.ng-hide-add-active {
4542 .hingeInFromTop.ng-enter, .hingeInFromTop.ng-hide-remove {
4543 transition-duration: 500ms;
4544 transition-timing-function: ease;
4545 transition-delay: 0;
4546 transition-property: -webkit-transform, opacity;
4547 transition-property: transform, opacity;
4548 -webkit-transform: perspective(2000px) rotateX(-90deg);
4549 transform: perspective(2000px) rotateX(-90deg);
4550 -webkit-transform-origin: top;
4551 transform-origin: top;
4553 .hingeInFromTop.ng-enter.ng-enter-active, .hingeInFromTop.ng-hide-remove.ng-hide-remove-active {
4554 -webkit-transform: rotate(0deg);
4555 transform: rotate(0deg);
4558 .hingeInFromRight.ng-enter, .hingeInFromRight.ng-hide-remove {
4559 transition-duration: 500ms;
4560 transition-timing-function: ease;
4561 transition-delay: 0;
4562 transition-property: -webkit-transform, opacity;
4563 transition-property: transform, opacity;
4564 -webkit-transform: perspective(2000px) rotateY(-90deg);
4565 transform: perspective(2000px) rotateY(-90deg);
4566 -webkit-transform-origin: right;
4567 transform-origin: right;
4569 .hingeInFromRight.ng-enter.ng-enter-active, .hingeInFromRight.ng-hide-remove.ng-hide-remove-active {
4570 -webkit-transform: rotate(0deg);
4571 transform: rotate(0deg);
4574 .hingeInFromBottom.ng-enter, .hingeInFromBottom.ng-hide-remove {
4575 transition-duration: 500ms;
4576 transition-timing-function: ease;
4577 transition-delay: 0;
4578 transition-property: -webkit-transform, opacity;
4579 transition-property: transform, opacity;
4580 -webkit-transform: perspective(2000px) rotateX(90deg);
4581 transform: perspective(2000px) rotateX(90deg);
4582 -webkit-transform-origin: bottom;
4583 transform-origin: bottom;
4585 .hingeInFromBottom.ng-enter.ng-enter-active, .hingeInFromBottom.ng-hide-remove.ng-hide-remove-active {
4586 -webkit-transform: rotate(0deg);
4587 transform: rotate(0deg);
4590 .hingeInFromLeft.ng-enter, .hingeInFromLeft.ng-hide-remove {
4591 transition-duration: 500ms;
4592 transition-timing-function: ease;
4593 transition-delay: 0;
4594 transition-property: -webkit-transform, opacity;
4595 transition-property: transform, opacity;
4596 -webkit-transform: perspective(2000px) rotateY(90deg);
4597 transform: perspective(2000px) rotateY(90deg);
4598 -webkit-transform-origin: left;
4599 transform-origin: left;
4601 .hingeInFromLeft.ng-enter.ng-enter-active, .hingeInFromLeft.ng-hide-remove.ng-hide-remove-active {
4602 -webkit-transform: rotate(0deg);
4603 transform: rotate(0deg);
4606 .hingeInFromMiddleX.ng-enter, .hingeInFromMiddleX.ng-hide-remove {
4607 transition-duration: 500ms;
4608 transition-timing-function: ease;
4609 transition-delay: 0;
4610 transition-property: -webkit-transform, opacity;
4611 transition-property: transform, opacity;
4612 -webkit-transform: perspective(2000px) rotateX(-90deg);
4613 transform: perspective(2000px) rotateX(-90deg);
4614 -webkit-transform-origin: center;
4615 transform-origin: center;
4617 .hingeInFromMiddleX.ng-enter.ng-enter-active, .hingeInFromMiddleX.ng-hide-remove.ng-hide-remove-active {
4618 -webkit-transform: rotate(0deg);
4619 transform: rotate(0deg);
4622 .hingeInFromMiddleY.ng-enter, .hingeInFromMiddleY.ng-hide-remove {
4623 transition-duration: 500ms;
4624 transition-timing-function: ease;
4625 transition-delay: 0;
4626 transition-property: -webkit-transform, opacity;
4627 transition-property: transform, opacity;
4628 -webkit-transform: perspective(2000px) rotateY(-90deg);
4629 transform: perspective(2000px) rotateY(-90deg);
4630 -webkit-transform-origin: center;
4631 transform-origin: center;
4633 .hingeInFromMiddleY.ng-enter.ng-enter-active, .hingeInFromMiddleY.ng-hide-remove.ng-hide-remove-active {
4634 -webkit-transform: rotate(0deg);
4635 transform: rotate(0deg);
4638 .hingeOutFromTop.ng-leave, .hingeOutFromTop.ng-hide-add {
4639 transition-duration: 500ms;
4640 transition-timing-function: ease;
4641 transition-delay: 0;
4642 transition-property: -webkit-transform, opacity;
4643 transition-property: transform, opacity;
4644 -webkit-transform: rotate(0deg);
4645 transform: rotate(0deg);
4646 -webkit-transform-origin: top;
4647 transform-origin: top;
4649 .hingeOutFromTop.ng-leave.ng-leave-active, .hingeOutFromTop.ng-hide-add.ng-hide-add-active {
4650 -webkit-transform: perspective(2000px) rotateX(-90deg);
4651 transform: perspective(2000px) rotateX(-90deg);
4654 .hingeOutFromRight.ng-leave, .hingeOutFromRight.ng-hide-add {
4655 transition-duration: 500ms;
4656 transition-timing-function: ease;
4657 transition-delay: 0;
4658 transition-property: -webkit-transform, opacity;
4659 transition-property: transform, opacity;
4660 -webkit-transform: rotate(0deg);
4661 transform: rotate(0deg);
4662 -webkit-transform-origin: right;
4663 transform-origin: right;
4665 .hingeOutFromRight.ng-leave.ng-leave-active, .hingeOutFromRight.ng-hide-add.ng-hide-add-active {
4666 -webkit-transform: perspective(2000px) rotateY(-90deg);
4667 transform: perspective(2000px) rotateY(-90deg);
4670 .hingeOutFromBottom.ng-leave, .hingeOutFromBottom.ng-hide-add {
4671 transition-duration: 500ms;
4672 transition-timing-function: ease;
4673 transition-delay: 0;
4674 transition-property: -webkit-transform, opacity;
4675 transition-property: transform, opacity;
4676 -webkit-transform: rotate(0deg);
4677 transform: rotate(0deg);
4678 -webkit-transform-origin: bottom;
4679 transform-origin: bottom;
4681 .hingeOutFromBottom.ng-leave.ng-leave-active, .hingeOutFromBottom.ng-hide-add.ng-hide-add-active {
4682 -webkit-transform: perspective(2000px) rotateX(90deg);
4683 transform: perspective(2000px) rotateX(90deg);
4686 .hingeOutFromLeft.ng-leave, .hingeOutFromLeft.ng-hide-add {
4687 transition-duration: 500ms;
4688 transition-timing-function: ease;
4689 transition-delay: 0;
4690 transition-property: -webkit-transform, opacity;
4691 transition-property: transform, opacity;
4692 -webkit-transform: rotate(0deg);
4693 transform: rotate(0deg);
4694 -webkit-transform-origin: left;
4695 transform-origin: left;
4697 .hingeOutFromLeft.ng-leave.ng-leave-active, .hingeOutFromLeft.ng-hide-add.ng-hide-add-active {
4698 -webkit-transform: perspective(2000px) rotateY(90deg);
4699 transform: perspective(2000px) rotateY(90deg);
4702 .hingeOutFromMiddleX.ng-leave, .hingeOutFromMiddleX.ng-hide-add {
4703 transition-duration: 500ms;
4704 transition-timing-function: ease;
4705 transition-delay: 0;
4706 transition-property: -webkit-transform, opacity;
4707 transition-property: transform, opacity;
4708 -webkit-transform: rotate(0deg);
4709 transform: rotate(0deg);
4710 -webkit-transform-origin: center;
4711 transform-origin: center;
4713 .hingeOutFromMiddleX.ng-leave.ng-leave-active, .hingeOutFromMiddleX.ng-hide-add.ng-hide-add-active {
4714 -webkit-transform: perspective(2000px) rotateX(-90deg);
4715 transform: perspective(2000px) rotateX(-90deg);
4718 .hingeOutFromMiddleY.ng-leave, .hingeOutFromMiddleY.ng-hide-add {
4719 transition-duration: 500ms;
4720 transition-timing-function: ease;
4721 transition-delay: 0;
4722 transition-property: -webkit-transform, opacity;
4723 transition-property: transform, opacity;
4724 -webkit-transform: rotate(0deg);
4725 transform: rotate(0deg);
4726 -webkit-transform-origin: center;
4727 transform-origin: center;
4729 .hingeOutFromMiddleY.ng-leave.ng-leave-active, .hingeOutFromMiddleY.ng-hide-add.ng-hide-add-active {
4730 -webkit-transform: perspective(2000px) rotateY(-90deg);
4731 transform: perspective(2000px) rotateY(-90deg);
4734 .zoomIn.ng-enter, .zoomIn.ng-hide-remove {
4735 transition-duration: 500ms;
4736 transition-timing-function: ease;
4737 transition-delay: 0;
4738 transition-property: -webkit-transform, property;
4739 transition-property: transform, property;
4740 -webkit-transform: scale(1.5);
4741 transform: scale(1.5);
4743 .zoomIn.ng-enter.ng-enter-active, .zoomIn.ng-hide-remove.ng-hide-remove-active {
4744 -webkit-transform: scale(1);
4745 transform: scale(1);
4748 .zoomOut.ng-leave, .zoomOut.ng-hide-add {
4749 transition-duration: 500ms;
4750 transition-timing-function: ease;
4751 transition-delay: 0;
4752 transition-property: -webkit-transform, property;
4753 transition-property: transform, property;
4754 -webkit-transform: scale(0.5);
4755 transform: scale(0.5);
4757 .zoomOut.ng-leave.ng-leave-active, .zoomOut.ng-hide-add.ng-hide-add-active {
4758 -webkit-transform: scale(1);
4759 transform: scale(1);
4762 .spinIn.ng-enter, .spinIn.ng-hide-remove {
4763 transition-property: -webkit-transform, opacity;
4764 transition-property: transform, opacity;
4765 -webkit-transform: rotate(-270deg);
4766 transform: rotate(-270deg);
4768 .spinIn.ng-enter.ng-enter-active, .spinIn.ng-hide-remove.ng-hide-remove-active {
4769 -webkit-transform: rotate(0);
4770 transform: rotate(0);
4773 .spinOut.ng-leave, .spinOut.ng-hide-add {
4774 transition-property: -webkit-transform, opacity;
4775 transition-property: transform, opacity;
4776 -webkit-transform: rotate(0);
4777 transform: rotate(0);
4779 .spinOut.ng-leave.ng-leave-active, .spinOut.ng-hide-add.ng-hide-add-active {
4780 -webkit-transform: rotate(270deg);
4781 transform: rotate(270deg);
4784 .spinInCCW.ng-enter, .spinInCCW.ng-hide-remove {
4785 transition-property: -webkit-transform, opacity;
4786 transition-property: transform, opacity;
4787 -webkit-transform: rotate(270deg);
4788 transform: rotate(270deg);
4790 .spinInCCW.ng-enter.ng-enter-active, .spinInCCW.ng-hide-remove.ng-hide-remove-active {
4791 -webkit-transform: rotate(0);
4792 transform: rotate(0);
4795 .spinOutCCW.ng-leave, .spinOutCCW.ng-hide-add {
4796 transition-property: -webkit-transform, opacity;
4797 transition-property: transform, opacity;
4798 -webkit-transform: rotate(0);
4799 transform: rotate(0);
4801 .spinOutCCW.ng-leave.ng-leave-active, .spinOutCCW.ng-hide-add.ng-hide-add-active {
4802 -webkit-transform: rotate(-270deg);
4803 transform: rotate(-270deg);
4807 Transition modifiers
4810 transition-duration: 750ms !important; }
4813 transition-duration: 250ms !important; }
4816 transition-timing-function: linear !important; }
4819 transition-timing-function: ease !important; }
4822 transition-timing-function: ease-in !important; }
4825 transition-timing-function: ease-out !important; }
4828 transition-timing-function: ease-in-out !important; }
4831 transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }
4834 transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }
4837 transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }
4840 transition-delay: 300ms !important; }
4843 transition-delay: 700ms !important; }
4849 -webkit-animation-name: shake;
4850 animation-name: shake;
4851 -webkit-animation-duration: 500ms;
4852 animation-duration: 500ms;
4853 -webkit-animation-timing-function: ease;
4854 animation-timing-function: ease;
4855 -webkit-backface-visibility: hidden;
4856 backface-visibility: hidden;
4857 -webkit-transform: translate3d(0, 0, 0);
4858 transform: translate3d(0, 0, 0);
4859 -webkit-animation-delay: 0;
4860 animation-delay: 0; }
4863 -webkit-animation-name: spin-cw;
4864 animation-name: spin-cw;
4865 -webkit-animation-duration: 500ms;
4866 animation-duration: 500ms;
4867 -webkit-animation-timing-function: ease;
4868 animation-timing-function: ease;
4869 -webkit-backface-visibility: hidden;
4870 backface-visibility: hidden;
4871 -webkit-transform: translate3d(0, 0, 0);
4872 transform: translate3d(0, 0, 0);
4873 -webkit-animation-delay: 0;
4874 animation-delay: 0; }
4877 -webkit-animation-name: spin-ccw;
4878 animation-name: spin-ccw;
4879 -webkit-animation-duration: 500ms;
4880 animation-duration: 500ms;
4881 -webkit-animation-timing-function: ease;
4882 animation-timing-function: ease;
4883 -webkit-backface-visibility: hidden;
4884 backface-visibility: hidden;
4885 -webkit-transform: translate3d(0, 0, 0);
4886 transform: translate3d(0, 0, 0);
4887 -webkit-animation-delay: 0;
4888 animation-delay: 0; }
4891 -webkit-animation-name: wiggle;
4892 animation-name: wiggle;
4893 -webkit-animation-duration: 500ms;
4894 animation-duration: 500ms;
4895 -webkit-animation-timing-function: ease;
4896 animation-timing-function: ease;
4897 -webkit-backface-visibility: hidden;
4898 backface-visibility: hidden;
4899 -webkit-transform: translate3d(0, 0, 0);
4900 transform: translate3d(0, 0, 0);
4901 -webkit-animation-delay: 0;
4902 animation-delay: 0; }
4907 .shake.infinite, .spin-cw.infinite, .spin-ccw.infinite, .wiggle.infinite {
4908 -webkit-animation-iteration-count: infinite;
4909 animation-iteration-count: infinite; }
4910 .shake.linear, .spin-cw.linear, .spin-ccw.linear, .wiggle.linear {
4911 -webkit-animation-timing-function: linear !important;
4912 animation-timing-function: linear !important; }
4913 .shake.ease, .spin-cw.ease, .spin-ccw.ease, .wiggle.ease {
4914 -webkit-animation-timing-function: ease !important;
4915 animation-timing-function: ease !important; }
4916 .shake.easeIn, .spin-cw.easeIn, .spin-ccw.easeIn, .wiggle.easeIn {
4917 -webkit-animation-timing-function: ease-in !important;
4918 animation-timing-function: ease-in !important; }
4919 .shake.easeOut, .spin-cw.easeOut, .spin-ccw.easeOut, .wiggle.easeOut {
4920 -webkit-animation-timing-function: ease-out !important;
4921 animation-timing-function: ease-out !important; }
4922 .shake.easeInOut, .spin-cw.easeInOut, .spin-ccw.easeInOut, .wiggle.easeInOut {
4923 -webkit-animation-timing-function: ease-in-out !important;
4924 animation-timing-function: ease-in-out !important; }
4925 .shake.bounceIn, .spin-cw.bounceIn, .spin-ccw.bounceIn, .wiggle.bounceIn {
4926 -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
4927 animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }
4928 .shake.bounceOut, .spin-cw.bounceOut, .spin-ccw.bounceOut, .wiggle.bounceOut {
4929 -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
4930 animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }
4931 .shake.bounceInOut, .spin-cw.bounceInOut, .spin-ccw.bounceInOut, .wiggle.bounceInOut {
4932 -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
4933 animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }
4934 .shake.slow, .spin-cw.slow, .spin-ccw.slow, .wiggle.slow {
4935 -webkit-animation-duration: 750ms !important;
4936 animation-duration: 750ms !important; }
4937 .shake.fast, .spin-cw.fast, .spin-ccw.fast, .wiggle.fast {
4938 -webkit-animation-duration: 250ms !important;
4939 animation-duration: 250ms !important; }
4940 .shake.delay, .spin-cw.delay, .spin-ccw.delay, .wiggle.delay {
4941 -webkit-animation-delay: 300ms !important;
4942 animation-delay: 300ms !important; }
4943 .shake.long-delay, .spin-cw.long-delay, .spin-ccw.long-delay, .wiggle.long-delay {
4944 -webkit-animation-delay: 700ms !important;
4945 animation-delay: 700ms !important; }
4948 transition-delay: 150ms;
4949 transition-duration: 0; }
4952 transition-delay: 150ms;
4953 transition-duration: 0; }
4956 transition-delay: 150ms;
4957 transition-duration: 0; }
4959 .position-absolute {
4961 position: relative; }
4963 .ui-animation.ng-enter-active, .ui-animation.ng-leave-active {
4964 position: absolute !important;
4965 -webkit-backface-visibility: hidden;
4966 backface-visibility: hidden;
4967 -webkit-transform-style: preserve-3d;
4977 An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well.
4979 Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.
4981 .notification, .static-notification {
4983 display: -webkit-flex;
4984 display: -ms-flexbox;
4988 margin-bottom: .5rem;
4990 .notification h1, .static-notification h1 {
4993 .notification p, .static-notification p {
4995 .is-active.notification, .is-active.static-notification {
4996 display: -webkit-flex;
4997 display: -ms-flexbox;
4999 .notification .close-button, .static-notification .close-button {
5002 .notification-container {
5005 display: -webkit-flex;
5006 display: -ms-flexbox;
5008 -webkit-flex-direction: column;
5009 -ms-flex-direction: column;
5010 flex-direction: column; }
5016 background: #00558b;
5018 border-radius: 4px; }
5019 .notification, .notification h1, .notification h2, .notification h3, .notification h4, .notification h5, .notification h6 {
5021 .notification.success {
5022 background: #43AC6A;
5024 border-radius: 4px; }
5025 .notification.success, .notification.success h1, .notification.success h2, .notification.success h3, .notification.success h4, .notification.success h5, .notification.success h6 {
5027 .notification.warning {
5028 background: #F08A24;
5030 border-radius: 4px; }
5031 .notification.warning, .notification.warning h1, .notification.warning h2, .notification.warning h3, .notification.warning h4, .notification.warning h5, .notification.warning h6 {
5033 .notification.alert {
5034 background: #F04124;
5036 border-radius: 4px; }
5037 .notification.alert, .notification.alert h1, .notification.alert h2, .notification.alert h3, .notification.alert h4, .notification.alert h5, .notification.alert h6 {
5039 .notification.dark {
5040 background: #232323;
5042 border-radius: 4px; }
5043 .notification.dark, .notification.dark h1, .notification.dark h2, .notification.dark h3, .notification.dark h4, .notification.dark h5, .notification.dark h6 {
5046 .static-notification {
5047 background: #00558b;
5050 position: fixed !important; }
5051 .static-notification, .static-notification h1, .static-notification h2, .static-notification h3, .static-notification h4, .static-notification h5, .static-notification h6 {
5053 .static-notification.top-right {
5057 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5058 .static-notification.top-right {
5063 .static-notification.top-left {
5067 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5068 .static-notification.top-left {
5073 .static-notification.top-middle {
5076 margin-left: -12.5rem;
5078 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5079 .static-notification.top-middle {
5084 .static-notification.bottom-right {
5089 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5090 .static-notification.bottom-right {
5095 .static-notification.bottom-left {
5100 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5101 .static-notification.bottom-left {
5106 .static-notification.bottom-middle {
5109 margin-left: -12.5rem;
5112 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5113 .static-notification.bottom-middle {
5118 .static-notification.success {
5119 background: #43AC6A;
5121 border-radius: 4px; }
5122 .static-notification.success, .static-notification.success h1, .static-notification.success h2, .static-notification.success h3, .static-notification.success h4, .static-notification.success h5, .static-notification.success h6 {
5124 .static-notification.warning {
5125 background: #F08A24;
5127 border-radius: 4px; }
5128 .static-notification.warning, .static-notification.warning h1, .static-notification.warning h2, .static-notification.warning h3, .static-notification.warning h4, .static-notification.warning h5, .static-notification.warning h6 {
5130 .static-notification.alert {
5131 background: #F04124;
5133 border-radius: 4px; }
5134 .static-notification.alert, .static-notification.alert h1, .static-notification.alert h2, .static-notification.alert h3, .static-notification.alert h4, .static-notification.alert h5, .static-notification.alert h6 {
5136 .static-notification.dark {
5137 background: #232323;
5139 border-radius: 4px; }
5140 .static-notification.dark, .static-notification.dark h1, .static-notification.dark h2, .static-notification.dark h3, .static-notification.dark h4, .static-notification.dark h5, .static-notification.dark h6 {
5143 .notification-container {
5147 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5148 .notification-container {
5153 .notification-container.top-right {
5157 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5158 .notification-container.top-right {
5163 .notification-container.top-left {
5167 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5168 .notification-container.top-left {
5173 .notification-container.top-middle {
5176 margin-left: -12.5rem;
5178 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5179 .notification-container.top-middle {
5184 .notification-container.bottom-right {
5189 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5190 .notification-container.bottom-right {
5195 .notification-container.bottom-left {
5200 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5201 .notification-container.bottom-left {
5206 .notification-container.bottom-middle {
5209 margin-left: -12.5rem;
5212 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5213 .notification-container.bottom-middle {
5219 .notification-icon {
5220 -webkit-flex: 0 0 60px;
5224 -webkit-align-self: flex-start;
5225 -ms-flex-item-align: start;
5226 align-self: flex-start; }
5227 .notification-icon img {
5231 .notification-content {
5240 A generic container that stays fixed to the left, top, right, or bottom of the screen, and is summoned when needed. When an off-canvas panel is open, the app frame shifts over to reveal the menu.
5245 -webkit-overflow-scrolling: touch;
5246 transition: -webkit-transform 0.25s ease-out;
5247 transition: transform 0.25s ease-out;
5249 .is-active.off-canvas {
5250 -webkit-transform: translate(0, 0) !important;
5251 transform: translate(0, 0) !important; }
5252 .off-canvas ~ .grid-frame {
5253 -webkit-transform: translate(0, 0, 0);
5254 transform: translate(0, 0, 0);
5255 transition: -webkit-transform 0.25s ease-out;
5256 transition: transform 0.25s ease-out;
5257 -webkit-backface-visibility: hidden;
5258 backface-visibility: hidden;
5259 background: white; }
5263 Get shadow values for later use
5275 box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.25);
5276 -webkit-transform: translateX(-100%);
5277 transform: translateX(-100%);
5280 .off-canvas.is-active ~ .grid-frame {
5281 -webkit-transform: translateX(250px) !important;
5282 transform: translateX(250px) !important; }
5285 Get shadow values for later use
5297 -webkit-transform: translateY(-100%);
5298 transform: translateY(-100%);
5299 box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.25); }
5300 .off-canvas.top.is-active ~ .grid-frame {
5301 -webkit-transform: translateY(250px) !important;
5302 transform: translateY(250px) !important; }
5305 Get shadow values for later use
5318 box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.25);
5319 -webkit-transform: translateX(100%);
5320 transform: translateX(100%); }
5321 .off-canvas.right.is-active ~ .grid-frame {
5322 -webkit-transform: translateX(-250px) !important;
5323 transform: translateX(-250px) !important; }
5324 .off-canvas.bottom {
5326 Get shadow values for later use
5339 -webkit-transform: translateY(100%);
5340 transform: translateY(100%);
5341 box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.25); }
5342 .off-canvas.bottom.is-active ~ .grid-frame {
5343 -webkit-transform: translateY(-250px) !important;
5344 transform: translateY(-250px) !important; }
5347 Get shadow values for later use
5359 box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.25);
5360 -webkit-transform: translateX(-100%);
5361 transform: translateX(-100%); }
5362 .off-canvas.left.is-active ~ .grid-frame {
5363 -webkit-transform: translateX(250px) !important;
5364 transform: translateX(250px) !important; }
5365 .off-canvas.detached {
5368 .off-canvas.detached, .off-canvas.detached.is-active {
5369 -webkit-transform: none;
5371 .off-canvas.detached ~ .grid-frame {
5373 box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
5374 .off-canvas.primary {
5375 background: #00558b;
5378 background: #232323;
5385 A floating container that can anchor to any other on-screen element, and contain any content, including grid blocks or panels.
5392 transition: opacity 0.25s ease-out;
5393 pointer-events: none; }
5394 .tether-enabled.popup {
5396 pointer-events: auto; }
5402 box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
5405 background: #232323;
5407 box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
5410 background: #00558b;
5412 box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
5422 display: inline-block; }
5428 -ms-touch-action: manipulation;
5429 touch-action: manipulation;
5435 .switch > label::after {
5443 Defines the dimmensions of the switch.
5445 $width - width of the switch.
5446 $height - height of the switch.
5451 border-radius: 9999px; }
5452 .switch > label::after {
5455 .switch input:checked + label::after {
5459 .switch > label::after {
5461 border-radius: 9999px;
5462 transition: left 0.15s ease-out;
5463 border: 4px solid #ccc; }
5464 .switch input:checked + label {
5465 background: #00558b;
5467 .switch input:checked + label::after {
5468 border-color: #00558b; }
5472 .switch.small > label::after {
5475 .switch.small input:checked + label::after {
5480 .switch.large > label::after {
5483 .switch.large input:checked + label::after {
5494 display: -webkit-flex;
5495 display: -ms-flexbox;
5497 background: transparent;
5498 -webkit-flex-flow: row wrap;
5499 -ms-flex-flow: row wrap;
5500 flex-flow: row wrap; }
5505 display: -webkit-flex;
5506 display: -ms-flexbox;
5508 background: transparent;
5509 -webkit-flex-flow: column nowrap;
5510 -ms-flex-flow: column nowrap;
5511 flex-flow: column nowrap; }
5513 background: #f3f3f3;
5517 -webkit-flex: 0 1 auto;
5522 .tabs .tab-item.is-active {
5523 background: #ececec;
5525 .tabs .tab-item.is-active:hover {
5526 background: #e7e7e7; }
5527 .tabs .tab-item:hover {
5528 background: #e7e7e7; }
5532 .tab-contents .tab-content {
5534 .tab-contents .tab-content.is-active {
5541 The trusy accordion allows you to create a series of vertical tabs.
5544 border: 1px solid #cbcbcb; }
5548 background: #f3f3f3;
5552 .accordion-title:hover {
5553 background: #e7e7e7; }
5554 .is-active > .accordion-title {
5555 background: #ececec;
5558 .accordion-content {
5561 .is-active > .accordion-content {
5568 Includes typographic resets for many common elements, and a few helper classes.
5572 - Ordered/unordered lists
5579 /* Typography resets */
5580 div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
5584 /* Default Link Styles */
5587 text-decoration: none;
5588 line-height: inherit; }
5596 /* Default paragraph styles */
5598 font-family: inherit;
5599 font-weight: normal;
5602 margin-bottom: 1.25rem;
5603 text-rendering: optimizeLegibility; }
5605 font-size: 1.21875rem;
5608 font-size: 0.875rem;
5610 font-style: italic; }
5612 /* Default header styles */
5613 h1, h2, h3, h4, h5, h6 {
5614 font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
5615 font-weight: normal;
5618 text-rendering: optimizeLegibility;
5620 margin-bottom: 0.5rem;
5622 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
5628 font-size: 2.125rem; }
5631 font-size: 1.6875rem; }
5634 font-size: 1.375rem; }
5637 font-size: 1.125rem; }
5640 font-size: 1.125rem; }
5648 font-weight: normal;
5650 margin-bottom: 0.5rem; }
5654 border-width: 1px 0 0;
5656 margin: 1.25rem 0 1.1875rem;
5659 /* Helpful Typography Defaults */
5662 line-height: inherit; }
5666 line-height: inherit; }
5671 line-height: inherit; }
5674 font-family: Consolas, 'Liberation Mono', Courier, monospace;
5675 font-weight: normal;
5677 background-color: #fbfbfb;
5679 border-style: solid;
5680 border-color: #e2e2e2;
5681 padding: 0.125rem 0.3125rem 0.0625rem; }
5687 margin-bottom: 1.25rem;
5688 list-style-position: outside;
5689 font-family: inherit; }
5693 margin-left: 1.1rem; }
5694 ul li ul, ul li ol, ol li ul, ol li ol {
5695 margin-left: 1.25rem;
5698 /* Lists without bullets */
5701 ul.no-bullet, ul.no-bullet li ul, ul.no-bullet li ol {
5702 list-style-type: none; }
5704 /* Definition Lists */
5706 margin-bottom: 0.3rem;
5707 font-weight: bold; }
5709 margin-bottom: 0.75rem; }
5713 text-transform: uppercase;
5716 border-bottom: 1px dotted #ddd;
5720 text-transform: none; }
5724 margin: 0 0 1.25rem;
5725 padding: 0.5625rem 1.25rem 0 1.1875rem;
5726 border-left: 1px solid #ddd; }
5729 font-size: 0.8125rem;
5731 blockquote cite:before {
5732 content: "\2014 \0020"; }
5733 blockquote cite a, blockquote cite a:visited {
5736 blockquote, blockquote p {
5740 @media only screen and (min-width: 40em) {
5741 h1, h2, h3, h4, h5, h6 {
5744 font-size: 2.75rem; }
5746 font-size: 2.3125rem; }
5748 font-size: 1.6875rem; }
5750 font-size: 1.4375rem; }
5752 font-size: 1.125rem; }
5754 font-size: 1rem; } }
5760 Responsive helper classes to assist you in quickly doing basic formatting and layout.
5763 - Vertical alignment
5769 display: -webkit-flex;
5770 display: -ms-flexbox;
5772 -webkit-align-items: center;
5773 -ms-flex-align: center;
5774 align-items: center;
5775 -webkit-justify-content: space-between;
5776 -ms-flex-pack: justify;
5777 justify-content: space-between; }
5778 .v-align .align-top {
5779 -webkit-align-self: flex-start;
5780 -ms-flex-item-align: start;
5781 align-self: flex-start; }
5782 .v-align .align-center {
5783 -webkit-align-self: center;
5784 -ms-flex-item-align: center;
5785 align-self: center; }
5786 .v-align .align-bottom {
5787 -webkit-align-self: flex-end;
5788 -ms-flex-item-align: end;
5789 align-self: flex-end; }
5790 .v-align .small-align-top {
5791 -webkit-align-self: flex-start;
5792 -ms-flex-item-align: start;
5793 align-self: flex-start; }
5794 .v-align .small-align-center {
5795 -webkit-align-self: center;
5796 -ms-flex-item-align: center;
5797 align-self: center; }
5798 .v-align .small-align-bottom {
5799 -webkit-align-self: flex-end;
5800 -ms-flex-item-align: end;
5801 align-self: flex-end; }
5802 @media only screen and (min-width: 40em) {
5803 .v-align .medium-align-top {
5804 -webkit-align-self: flex-start;
5805 -ms-flex-item-align: start;
5806 align-self: flex-start; } }
5807 @media only screen and (min-width: 40em) {
5808 .v-align .medium-align-center {
5809 -webkit-align-self: center;
5810 -ms-flex-item-align: center;
5811 align-self: center; } }
5812 @media only screen and (min-width: 40em) {
5813 .v-align .medium-align-bottom {
5814 -webkit-align-self: flex-end;
5815 -ms-flex-item-align: end;
5816 align-self: flex-end; } }
5817 @media only screen and (min-width: 75em) {
5818 .v-align .large-align-top {
5819 -webkit-align-self: flex-start;
5820 -ms-flex-item-align: start;
5821 align-self: flex-start; } }
5822 @media only screen and (min-width: 75em) {
5823 .v-align .large-align-center {
5824 -webkit-align-self: center;
5825 -ms-flex-item-align: center;
5826 align-self: center; } }
5827 @media only screen and (min-width: 75em) {
5828 .v-align .large-align-bottom {
5829 -webkit-align-self: flex-end;
5830 -ms-flex-item-align: end;
5831 align-self: flex-end; } }
5834 display: none !important; }
5837 visibility: hidden; }
5839 .hide-for-small:not(.ng-hide) {
5840 display: block !important;
5841 display: none !important; }
5842 .hide-for-small[class*="grid-block"]:not(.ng-hide) {
5843 display: -webkit-flex !important;
5844 display: -ms-flexbox !important;
5845 display: flex !important;
5846 display: none !important; }
5848 .show-for-small:not(.ng-hide) {
5849 display: none !important;
5850 display: block !important; }
5851 .show-for-small[class*="grid-block"]:not(.ng-hide) {
5852 display: none !important;
5853 display: -webkit-flex !important;
5854 display: -ms-flexbox !important;
5855 display: flex !important; }
5857 .hide-for-small-only:not(.ng-hide) {
5858 display: block !important; }
5859 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5860 .hide-for-small-only:not(.ng-hide) {
5861 display: none !important; } }
5862 .hide-for-small-only[class*="grid-block"]:not(.ng-hide) {
5863 display: -webkit-flex !important;
5864 display: -ms-flexbox !important;
5865 display: flex !important; }
5866 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5867 .hide-for-small-only[class*="grid-block"]:not(.ng-hide) {
5868 display: none !important; } }
5870 .show-for-small-only:not(.ng-hide) {
5871 display: none !important; }
5872 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5873 .show-for-small-only:not(.ng-hide) {
5874 display: block !important; } }
5875 .show-for-small-only[class*="grid-block"]:not(.ng-hide) {
5876 display: none !important; }
5877 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
5878 .show-for-small-only[class*="grid-block"]:not(.ng-hide) {
5879 display: -webkit-flex !important;
5880 display: -ms-flexbox !important;
5881 display: flex !important; } }
5883 .hide-for-medium:not(.ng-hide) {
5884 display: block !important; }
5885 @media only screen and (min-width: 40em) {
5886 .hide-for-medium:not(.ng-hide) {
5887 display: none !important; } }
5888 .hide-for-medium[class*="grid-block"]:not(.ng-hide) {
5889 display: -webkit-flex !important;
5890 display: -ms-flexbox !important;
5891 display: flex !important; }
5892 @media only screen and (min-width: 40em) {
5893 .hide-for-medium[class*="grid-block"]:not(.ng-hide) {
5894 display: none !important; } }
5896 .show-for-medium:not(.ng-hide) {
5897 display: none !important; }
5898 @media only screen and (min-width: 40em) {
5899 .show-for-medium:not(.ng-hide) {
5900 display: block !important; } }
5901 .show-for-medium[class*="grid-block"]:not(.ng-hide) {
5902 display: none !important; }
5903 @media only screen and (min-width: 40em) {
5904 .show-for-medium[class*="grid-block"]:not(.ng-hide) {
5905 display: -webkit-flex !important;
5906 display: -ms-flexbox !important;
5907 display: flex !important; } }
5909 .hide-for-medium-only:not(.ng-hide) {
5910 display: block !important; }
5911 @media only screen and (min-width: 40em) and (max-width: 74.9375rem) {
5912 .hide-for-medium-only:not(.ng-hide) {
5913 display: none !important; } }
5914 .hide-for-medium-only[class*="grid-block"]:not(.ng-hide) {
5915 display: -webkit-flex !important;
5916 display: -ms-flexbox !important;
5917 display: flex !important; }
5918 @media only screen and (min-width: 40em) and (max-width: 74.9375rem) {
5919 .hide-for-medium-only[class*="grid-block"]:not(.ng-hide) {
5920 display: none !important; } }
5922 .show-for-medium-only:not(.ng-hide) {
5923 display: none !important; }
5924 @media only screen and (min-width: 40em) and (max-width: 74.9375rem) {
5925 .show-for-medium-only:not(.ng-hide) {
5926 display: block !important; } }
5927 .show-for-medium-only[class*="grid-block"]:not(.ng-hide) {
5928 display: none !important; }
5929 @media only screen and (min-width: 40em) and (max-width: 74.9375rem) {
5930 .show-for-medium-only[class*="grid-block"]:not(.ng-hide) {
5931 display: -webkit-flex !important;
5932 display: -ms-flexbox !important;
5933 display: flex !important; } }
5935 .hide-for-large:not(.ng-hide) {
5936 display: block !important; }
5937 @media only screen and (min-width: 75em) {
5938 .hide-for-large:not(.ng-hide) {
5939 display: none !important; } }
5940 .hide-for-large[class*="grid-block"]:not(.ng-hide) {
5941 display: -webkit-flex !important;
5942 display: -ms-flexbox !important;
5943 display: flex !important; }
5944 @media only screen and (min-width: 75em) {
5945 .hide-for-large[class*="grid-block"]:not(.ng-hide) {
5946 display: none !important; } }
5948 .show-for-large:not(.ng-hide) {
5949 display: none !important; }
5950 @media only screen and (min-width: 75em) {
5951 .show-for-large:not(.ng-hide) {
5952 display: block !important; } }
5953 .show-for-large[class*="grid-block"]:not(.ng-hide) {
5954 display: none !important; }
5955 @media only screen and (min-width: 75em) {
5956 .show-for-large[class*="grid-block"]:not(.ng-hide) {
5957 display: -webkit-flex !important;
5958 display: -ms-flexbox !important;
5959 display: flex !important; } }
5961 .hide-for-large-only:not(.ng-hide) {
5962 display: block !important; }
5963 @media only screen and (min-width: 75em) and (max-width: 89.9375rem) {
5964 .hide-for-large-only:not(.ng-hide) {
5965 display: none !important; } }
5966 .hide-for-large-only[class*="grid-block"]:not(.ng-hide) {
5967 display: -webkit-flex !important;
5968 display: -ms-flexbox !important;
5969 display: flex !important; }
5970 @media only screen and (min-width: 75em) and (max-width: 89.9375rem) {
5971 .hide-for-large-only[class*="grid-block"]:not(.ng-hide) {
5972 display: none !important; } }
5974 .show-for-large-only:not(.ng-hide) {
5975 display: none !important; }
5976 @media only screen and (min-width: 75em) and (max-width: 89.9375rem) {
5977 .show-for-large-only:not(.ng-hide) {
5978 display: block !important; } }
5979 .show-for-large-only[class*="grid-block"]:not(.ng-hide) {
5980 display: none !important; }
5981 @media only screen and (min-width: 75em) and (max-width: 89.9375rem) {
5982 .show-for-large-only[class*="grid-block"]:not(.ng-hide) {
5983 display: -webkit-flex !important;
5984 display: -ms-flexbox !important;
5985 display: flex !important; } }
5987 @media only screen and (orientation: portrait) {
5988 .hide-for-portrait {
5989 display: none !important; }
5990 .hide-for-portrait[class*="grid-block"] {
5991 display: -webkit-flex !important;
5992 display: -ms-flexbox !important;
5993 display: flex !important; } }
5995 .show-for-portrait {
5996 display: none !important; }
5997 @media only screen and (orientation: portrait) {
5998 .show-for-portrait {
5999 display: block !important; }
6000 .show-for-portrait[class*="grid-block"] {
6001 display: -webkit-flex !important;
6002 display: -ms-flexbox !important;
6003 display: flex !important; } }
6005 @media only screen and (orientation: landscape) {
6006 .hide-for-landscape {
6007 display: none !important; }
6008 .hide-for-landscape[class*="grid-block"] {
6009 display: -webkit-flex !important;
6010 display: -ms-flexbox !important;
6011 display: flex !important; } }
6013 .show-for-landscape {
6014 display: none !important; }
6015 @media only screen and (orientation: landscape) {
6016 .show-for-landscape {
6017 display: block !important; }
6018 .show-for-landscape[class*="grid-block"] {
6019 display: -webkit-flex !important;
6020 display: -ms-flexbox !important;
6021 display: flex !important; } }
6032 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
6033 .small-only-text-left {
6034 text-align: left; } }
6036 @media only screen and (min-width: 40em) {
6038 text-align: left; } }
6040 @media only screen and (min-width: 40em) and (max-width: 74.9375rem) {
6041 .medium-only-text-left {
6042 text-align: left; } }
6044 @media only screen and (min-width: 75em) {
6046 text-align: left; } }
6048 @media only screen and (min-width: 75em) and (max-width: 89.9375rem) {
6049 .large-only-text-left {
6050 text-align: left; } }
6053 text-align: right; }
6056 text-align: right; }
6058 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
6059 .small-only-text-right {
6060 text-align: right; } }
6062 @media only screen and (min-width: 40em) {
6063 .medium-text-right {
6064 text-align: right; } }
6066 @media only screen and (min-width: 40em) and (max-width: 74.9375rem) {
6067 .medium-only-text-right {
6068 text-align: right; } }
6070 @media only screen and (min-width: 75em) {
6072 text-align: right; } }
6074 @media only screen and (min-width: 75em) and (max-width: 89.9375rem) {
6075 .large-only-text-right {
6076 text-align: right; } }
6079 text-align: center; }
6081 .small-text-center {
6082 text-align: center; }
6084 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
6085 .small-only-text-center {
6086 text-align: center; } }
6088 @media only screen and (min-width: 40em) {
6089 .medium-text-center {
6090 text-align: center; } }
6092 @media only screen and (min-width: 40em) and (max-width: 74.9375rem) {
6093 .medium-only-text-center {
6094 text-align: center; } }
6096 @media only screen and (min-width: 75em) {
6097 .large-text-center {
6098 text-align: center; } }
6100 @media only screen and (min-width: 75em) and (max-width: 89.9375rem) {
6101 .large-only-text-center {
6102 text-align: center; } }
6105 text-align: justify; }
6107 .small-text-justify {
6108 text-align: justify; }
6110 @media only screen and (min-width: 0em) and (max-width: 39.9375rem) {
6111 .small-only-text-justify {
6112 text-align: justify; } }
6114 @media only screen and (min-width: 40em) {
6115 .medium-text-justify {
6116 text-align: justify; } }
6118 @media only screen and (min-width: 40em) and (max-width: 74.9375rem) {
6119 .medium-only-text-justify {
6120 text-align: justify; } }
6122 @media only screen and (min-width: 75em) {
6123 .large-text-justify {
6124 text-align: justify; } }
6126 @media only screen and (min-width: 75em) and (max-width: 89.9375rem) {
6127 .large-only-text-justify {
6128 text-align: justify; } }
6133 .clearfix:before, .clearfix:after {