@charset "UTF-8";
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
/**
* Breakpoints
*/
/**
* Typography
*/
/**
* Grid
*/
/**
* Colors
*/
/**
* Icons
*/
/**
* Spacing
*/
/**
* Font Sizes
*/
/**
* Components
*/
/**
* Animations
*/
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
/*
* Media query to respond to a minimum size (mobile first)
*/
/*
* Media query to respond to a maximum size
*/
/*
* Output font size in px/rem
*/
/*
* Placeholder mixin for
*/
/**
* Clearfix
*/
/*
* Site Container
* Standardizes max-width and centering for main layout elements (header, footer, main)
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
font-size: 18px;
font-size: 1.125rem;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2rem;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1rem; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1rem; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
}
sup {
top: -0.5rem;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625rem;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
html {
font-size: 16px;
scroll-padding-top: 150px;
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
body {
background-color: #616d70;
color: #444444;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
text-size-adjust: none;
}
p {
margin: 0;
}
p + p {
margin-top: 1em;
}
h1.center, .h1.center,
h2.center, .h2.center,
h3.center, .h3.center,
h4.center, .h4.center,
h5.center, .h5.center,
h6.center, .h6.center,
p.center, div.center, li.center {
text-align: center;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2.p {
font-size: 16px;
color: #444444;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*
Highlight/reveal content of anochor id when directed there from URL
go to this id on the page...
*/
*:target {
animation-name: revealText;
animation-direction: normal;
animation-duration: 2s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
@keyframes revealText {
0% {
clip-path: inset(0px 1000% 0px 0%);
-webkit-clip-path: inset(0px 100% 0px 0%);
}
100% {
clip-path: inset(0px 0px 0px 0px);
-webkit-clip-path: inset(0px 0px 0px 0px);
}
}
hr + h1, hr + .h1,
hr + h2, hr + .h2,
hr + h3, hr + .h3,
hr + h4, hr + .h4 {
margin-top: 0;
}
hr {
margin: 1.5em 0;
padding: 0;
border-width: 0;
border-top-width: 2px;
border-style: dotted;
border-color: #616D70;
}
/* The somewhat bulletproof repetition of heading styles is so that something like looks exactly like */
h1, .h1 {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 40px;
font-size: 2.5rem;
margin: 2rem 0 1.5rem 0;
line-height: 1;
}
h1:first-child, .h1:first-child {
margin-top: 0;
}
h2, .h2 {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 28px;
font-size: 1.75rem;
text-transform: none;
margin: 1.5rem 0 0 0;
line-height: 1.15;
}
h2:first-child, .h2:first-child {
margin-top: 0;
}
h3, .h3 {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 24px;
font-size: 1.5rem;
text-transform: none;
margin: 1.25rem 0 0.9375rem 0;
line-height: 1.15;
}
h3:first-child, .h3:first-child {
margin-top: 0;
}
h4, .h4 {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 20px;
font-size: 1.25rem;
text-transform: uppercase;
margin: 1.25rem 0 0.9375rem 0;
line-height: 1.15;
}
h4:first-child, .h4:first-child {
margin-top: 0;
}
h5,
.h5 {
margin-bottom: 5px;
}
h5:first-child,
.h5:first-child {
margin-top: 0;
}
a {
color: #0272B0;
}
a:active, a:focus {
color: #01476F;
}
a:hover {
color: #025B8D;
}
.green {
color: #00A839;
}
.blue {
color: #1C1D25;
}
table {
border: 1px solid #999;
border-collapse: collapse;
}
table.w100 {
width: 100%;
}
table td, table th {
border: 1px solid #999;
margin: 0;
border-collapse: collapse;
padding: 3px 5px;
}
table th {
font-weight: bold;
color: #fff;
}
sup.footnote {
margin-right: 5px;
}
sup.footnote a {
text-decoration: none;
}
sup.footnote a::before {
content: "[";
}
sup.footnote a::after {
content: "]";
}
.bg-blue-light {
background-color: #F3F4F7;
padding: 2rem 0;
margin: 40px 0 0 0;
}
.bg-white {
background-color: #ffffff;
}
.bg-pink {
background-color: #FFFAFE;
}
.bg-pink-blob {
background-color: #ffffff;
background-image: url("/assets/img/backgrounds/blobs/pink-1.svg");
background-repeat: no-repeat;
background-position: top 0 left 0;
}
.bg-stripes {
position: relative;
background-color: #F2F8F4;
background-image: linear-gradient(#ffffff 0%, #ffffff 20%, #F2F8F4 20%, #F2F8F4 80%, #ffffff 80%, #ffffff 100%);
background-size: cover;
}
@media only screen and (max-width: 900px) {
.bg-stripes {
background-color: #F2F8F4;
background-image: none;
}
}
p.round-blue-callout {
background-color: #F3F4F7;
color: #1C1D25;
font-weight: 700;
display: table;
margin: 0 auto 2em auto;
text-align: center;
width: auto;
padding: 16px 32px;
font-size: 22px;
font-size: 1.375rem;
line-height: 1.75rem;
border-radius: 72px;
}
ul.circle-check {
list-style: none;
padding-left: 0;
}
ul.circle-check li {
padding-left: 40px;
background-image: url(/assets/img/icons/circle-check.svg);
background-repeat: no-repeat;
background-position: 0px 1px;
min-height: 2em;
}
ol > li {
margin-bottom: 1rem;
}
ol > li p + ul, ol > li ul + p {
margin-top: 1rem;
}
img.garnish {
content: url("/assets/img/icons/garnish.svg");
width: 35px;
height: 22px;
margin: 0;
}
/*
p, div {
&.garnish {
background: transparent url('/assets/img/icons/garnish.svg') no-repeat;
background-size: 35px 22px;
padding-top: 30px;
}
}
ul {
// list-style-type: image;
list-style-image: url('/assets/img/icons/garnish.svg');
list-style-position: inside;
li.garnish {
content:"\n";
// background: transparent url('/assets/img/icons/garnish.svg') no-repeat;
// background-size: 35px 22px;
padding-top: 30px;
// display:block;
// width:100%;
}
}
*/
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
/*
The goal is to often globally define the styles for buttons, inputs, labels,
menus, and so on... so they can be reused throughout the site and kept consistent.
Keep the HTML markup consistent, and load these styles.
*/
/*
Buttons, used throughout the site, not just forms
Must account for vertically centering the text, but also allowing the text to wrap
and the button to grow for unplanned circumstances.
*/
a.cta,
input.cta,
button.cta {
position: relative;
display: block;
min-height: 50px;
border-radius: 8px;
color: #ffffff;
background-color: #1C1D25;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.125;
font-weight: 400;
text-align: center;
padding: 16px 24px;
text-decoration: none;
background-image: url("/assets/img/icons/arrow-right.svg");
background-size: 25px 25px;
background-repeat: no-repeat;
background-position: center right 24px;
padding-right: 55.25px;
}
a.cta:hover,
input.cta:hover,
button.cta:hover {
background-color: #0E7C92;
}
a.cta.big,
input.cta.big,
button.cta.big {
font-size: 1.75rem;
}
a.cta.green,
input.cta.green,
button.cta.green {
border-color: #006121;
background-color: #006121;
}
a.cta.green:hover, a.cta.green:focus,
input.cta.green:hover,
input.cta.green:focus,
button.cta.green:hover,
button.cta.green:focus {
border-color: #05DD4E;
background-color: #05DD4E;
}
a.cta.wauto,
input.cta.wauto,
button.cta.wauto {
display: inline-block;
position: relative;
padding-left: 37px;
padding-right: 37px;
background-image: url("/assets/img/icons/arrow-right.svg");
background-size: 19px 19px;
background-repeat: no-repeat;
background-position: center right 37px;
padding-right: 60.75px;
}
a.cta.wauto.center,
input.cta.wauto.center,
button.cta.wauto.center {
display: table;
margin: 0 auto;
}
a.cta.w260,
input.cta.w260,
button.cta.w260 {
max-width: 260px;
}
a.cta.w315,
input.cta.w315,
button.cta.w315 {
max-width: 315px;
}
a.cta.w355,
input.cta.w355,
button.cta.w355 {
max-width: 355px;
}
a.cta.wide,
input.cta.wide,
button.cta.wide {
padding-left: 10px;
padding-right: 10px;
}
a.cta.clear,
input.cta.clear,
button.cta.clear {
background-color: transparent;
border: 1.5px solid #ffffff;
}
a.cta.clear:hover, a.cta.clear:focus,
input.cta.clear:hover,
input.cta.clear:focus,
button.cta.clear:hover,
button.cta.clear:focus {
background-color: rgba(255, 255, 255, 0.1);
}
a.cta.clear2,
input.cta.clear2,
button.cta.clear2 {
background-color: transparent;
border: 1.5px solid #000000;
color: #000000;
}
a.cta.clear2:hover, a.cta.clear2:focus,
input.cta.clear2:hover,
input.cta.clear2:focus,
button.cta.clear2:hover,
button.cta.clear2:focus {
background-color: rgba(0, 0, 0, 0.1);
}
a.cta.disabled, a.cta:disabled,
input.cta.disabled,
input.cta:disabled,
button.cta.disabled,
button.cta:disabled {
background-color: #101010;
}
a.cta.disabled:hover, a.cta.disabled:focus, a.cta:disabled:hover, a.cta:disabled:focus,
input.cta.disabled:hover,
input.cta.disabled:focus,
input.cta:disabled:hover,
input.cta:disabled:focus,
button.cta.disabled:hover,
button.cta.disabled:focus,
button.cta:disabled:hover,
button.cta:disabled:focus {
background-color: #101010;
cursor: not-allowed;
}
input.cta,
button.cta {
border: none;
-webkit-appearance: none;
cursor: pointer;
}
/*
Form elements in general
*/
input[type=checkbox] + label,
input[type=radio] + label {
cursor: pointer;
}
input[type=checkbox]:disabled + label,
input[type=radio]:disabled + label {
cursor: not-allowed;
}
/*--------------------------------------------------------------------
| Messages for alerts, notices, etc.
|---------------------------------------------------------------------
*/
div.message,
p.message {
padding: 10px;
margin-bottom: 2rem;
background-color: #fc3;
color: #000;
font-weight: normal;
}
div.message p,
p.message p {
color: inherit;
}
div.message ul,
p.message ul {
background-color: #fea;
}
div.message.error,
p.message.error {
background-color: #C50101;
color: #ffffff;
padding: 10px;
width: auto;
height: auto;
}
div.message.error::before,
p.message.error::before {
background-image: none;
}
span.message {
padding: 0 5px;
}
span.highlight {
background-color: #fea;
}
.error {
font-weight: bold;
color: #C50101;
}
.error_msg {
background-color: #C50101;
color: #ffffff;
font-weight: 500;
padding: 10px;
}
form fieldset {
margin: 0;
padding: 20px 0;
background-color: #ffffff;
border: none;
}
form fieldset legend {
float: left;
width: 100%;
display: block;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 1.875rem;
margin-bottom: 10px;
text-transform: uppercase;
}
form fieldset legend + * {
clear: both;
}
@media (min-width: 600px) {
form fieldset {
margin-bottom: 40px;
}
form fieldset legend {
margin-bottom: 20px;
}
}
@media (min-width: 600px) {
form .form_row {
display: flex;
flex-wrap: wrap;
}
}
form .form_field {
margin: 0 0 20px;
}
@media (min-width: 600px) {
form .form_field {
margin-right: 20px;
}
form .form_field.wfull {
width: 100%;
}
}
@media (min-width: 600px) {
form .form_field.w250 button.cta {
width: 250px;
}
}
form .form_field h4,
form .form_field label {
display: block;
font-weight: 400;
font-size: 0.875rem;
color: #1C1D25;
margin: 0;
height: auto;
min-height: 24px;
line-height: 24px;
}
form .form_field h4.required,
form .form_field label.required {
font-weight: 700;
}
form .form_field h4.disabled,
form .form_field label.disabled {
cursor: not-allowed;
}
form .form_field h4 {
font-family: "Roboto", sans-serif;
text-transform: none;
}
form .form_field span.note {
color: #666;
font-size: 0.9rem;
}
form .form_field.fieldnote {
padding-top: 0;
margin-top: -15px;
}
form .form_field.fieldnote span br {
display: none;
}
@media (min-width: 600px) {
form .form_field.fieldnote {
padding-top: 25px;
margin-top: inherit;
}
form .form_field.fieldnote span br {
display: inline-block;
}
}
form .form_field.text input,
form .form_field.text input[type=email],
form .form_field.text input[type=password],
form .form_field.text input[type=tel],
form .form_field.text input[type=text] {
display: block;
background-color: #f9f9f9;
border: 1px solid #C5C6CF;
border-radius: 5px;
height: 40px;
font-size: 1rem;
padding: 0 5px;
line-height: 40px;
color: #46495B;
width: 100%;
display: inline-block;
}
form .form_field.textarea {
width: 100%;
}
form .form_field.textarea textarea {
display: block;
background-color: #f9f9f9;
border: 1px solid #C5C6CF;
border-radius: 5px;
font-size: 1rem;
padding: 10px 5px;
color: #46495B;
width: 100%;
height: 200px;
}
form .form_field.select label {
margin-bottom: 0;
}
form .form_field.select select {
background-color: #f9f9f9;
padding: 0 5px;
height: 40px;
line-height: 40px;
border: 1px solid #C5C6CF;
width: 100%;
border-radius: 4px;
}
form .form_field.checkbox {
margin-top: 10px;
margin-bottom: 30px;
}
form .form_field.checkbox input[type=checkbox] {
display: none;
}
form .form_field.checkbox input[type=checkbox] ~ label span.error_flag {
display: block;
position: absolute;
top: 0;
left: calc(100% + 5px);
margin: 0;
}
form .form_field.checkbox input[type=checkbox] + label {
cursor: pointer;
margin: 0 2em 0 5px;
display: inline-block;
line-height: 20px;
height: 20px;
padding-left: 25px;
text-indent: 0;
position: relative;
}
form .form_field.checkbox input[type=checkbox] + label input[type=checkbox] {
display: inline-block;
}
form .form_field.checkbox input[type=checkbox] + label:before {
height: 20px;
padding-left: 20px;
width: auto;
background-size: 100px 600px;
background-position: 0 -260px;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
background-image: url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
}
form .form_field.checkbox input[type=checkbox]:checked + label:before {
background-position-x: -20px;
}
form .form_field.radio h4 {
height: auto;
min-height: 24px;
margin: 0;
}
form .form_field.radio label + span.note {
display: block;
margin-top: 0.5em;
}
form .form_field.radio input[type=radio] {
opacity: 0;
position: absolute;
z-index: -1;
margin: 25px 0 0 93px;
}
form .form_field.radio input[type=radio] + label {
margin: 0;
display: inline-block;
border: 1px solid #C5C6CF;
border-left-width: 0;
background-color: #F9F9F9;
min-width: 100px;
padding: 0 10px;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: bold;
position: relative;
}
form .form_field.radio input[type=radio] + label:hover {
border-color: #666666;
background-color: #666666;
color: #FFFFFF;
}
form .form_field.radio input[type=radio] + label:first-of-type {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-width: 1px;
}
form .form_field.radio input[type=radio] + label:last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
form .form_field.radio input[type=radio]:checked + label, form .form_field.radio input[type=radio]:checked + label:hover {
border-color: #067EAB;
background-color: #00AEEF;
color: #ffffff;
border-bottom-width: 2px;
}
form .form_field.radio input[type=radio]:disabled + label, form .form_field.radio input[type=radio]:disabled + label:hover {
border-color: #C5C6CF;
background-color: #f9f9f9;
color: #C5C6CF;
}
form .form_field.radio input[type=radio]:checked:disabled + label, form .form_field.radio input[type=radio]:checked:disabled + label:hover {
border-color: #666666;
background-color: #666666;
color: #FFFFFF;
}
form input:disabled,
form select:disabled,
form textarea:disabled {
cursor: not-allowed;
}
form .checkbox_options {
margin-bottom: 30px;
}
form .checkbox_options .form_field.checkbox {
margin: 0;
}
form .checkbox_options.checkbox_wrap {
width: 100%;
}
form ul.checkbox_options {
list-style: none;
padding: 0;
margin: 0 0 30px;
}
form div.checkbox-multiple + div.checkbox-multiple {
margin-left: 3em;
}
form .button_group {
display: flex;
margin-bottom: 10px;
max-width: 520px;
}
form .button_group a.cta,
form .button_group button,
form .button_group input[type=submit] {
flex: 1 1 0;
margin-right: 20px;
}
form .button_group a.cta:last-child,
form .button_group button:last-child,
form .button_group input[type=submit]:last-child {
margin-right: 0;
}
form p.message.error span.icon.w16.error,
form div.message.error span.icon.w16.error {
border: 1px solid #fff;
border-radius: 9px;
width: 18px;
height: 18px;
}
form div.note, form p.note {
color: #666;
font-size: 0.9rem;
margin-top: 5px;
}
form div.note *, form p.note * {
font-size: inherit;
}
form p + ol {
margin-top: 0;
}
form ol {
padding-left: 20px;
}
form ol ol {
padding-left: 20px;
list-style-type: lower-alpha;
}
form .hidden {
display: none;
}
form button.cta {
width: 100%;
}
form .icon {
display: inline-block;
height: 20px;
width: 20px;
background-color: transparent;
background-image: url("../img/icons/msf_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0 0;
background-size: 80px 480px;
}
form .icon.error {
width: 16px;
height: 16px;
position: relative;
}
form .icon.error::before {
content: "";
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
background-image: url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 80px 480px;
background-position: 0 -256px;
}
form .error_flag {
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
overflow: hidden;
color: #C50101;
border-radius: 7.5px;
position: relative;
vertical-align: bottom;
margin-bottom: 4px;
font-family: "Roboto", sans-serif;
text-transform: none;
font-size: 0.75rem;
font-weight: 700;
}
form .error_flag::before {
content: "";
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
background-image: url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 80px 480px;
background-position: 0 -256px;
}
form .error_flag.active, form .error_flag:hover {
width: auto;
height: auto;
background-color: #C50101;
color: #ffffff;
padding-right: 8px;
padding-left: 18px;
}
form .error_flag.active::before, form .error_flag:hover::before {
top: 2px;
left: 2px;
background-size: 60px 360px;
background-position: -12px -192px;
width: 12px;
height: 12px;
}
form .disabled_flag {
display: inline-block;
min-width: 16px;
height: 16px;
line-height: 16px;
overflow: hidden;
font-weight: 700;
color: #ffffff;
border-radius: 7.5px;
position: relative;
vertical-align: bottom;
text-indent: 16px;
margin-bottom: 4px;
font-size: 0.8rem;
}
form .disabled_flag::before {
content: "";
display: block;
height: 12px;
width: 12px;
position: absolute;
top: 2px;
left: 2px;
background-color: transparent;
background-image: url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 60px 360px;
background-position: 0 -168px;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
header.page {
position: sticky;
top: 0;
padding: 0;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
-webkit-box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.0705882353);
-moz-box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.0705882353);
box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.0705882353);
z-index: 100;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
header.page nav#agent {
display: flex;
flex-flow: row;
align-items: center;
width: 100%;
background-color: #2A2B37;
color: #fff;
font-weight: 400;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.75rem;
justify-content: right;
margin: 0 auto;
padding: 8px;
max-width: 1440px;
}
header.page div.agent_phone {
padding-right: 1rem;
border-right: 1px solid white;
margin-right: 1rem;
}
header.page div.agent_phone a {
text-decoration: none;
}
header.page a {
white-space: nowrap;
color: #fff;
}
header.page br {
display: none;
}
header.page div.agent_portal {
font-size: 1rem;
margin-right: 4.5rem;
}
header.page div.container {
height: 100px;
display: flex;
flex-flow: row;
align-items: center;
}
@media screen and (max-width: 620px) {
header.page nav#agent {
justify-content: space-between;
line-height: 1rem;
font-size: 12px;
font-size: 0.75rem;
padding: 6px 8px;
}
header.page nav#agent a {
text-decoration: none;
}
header.page nav#agent div.agent_phone {
border: 0px;
padding-right: 0;
border-right: 0;
margin-right: 0;
}
header.page nav#agent br {
display: inline;
}
header.page nav#agent div.agent_portal {
font-size: 12px;
font-size: 0.75rem;
margin-right: 0;
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
/* -------------------------------------------------------------------------- */
/* 1. LAYOUT & OVERLAY LOGIC */
/* -------------------------------------------------------------------------- */
input#menuToggleCheckbox {
display: none;
}
input#menuToggleCheckbox ~ main div#menu-modal {
z-index: 2;
background-color: rgba(0, 0, 0, 0.8666666667);
position: fixed;
inset: 139px 0 0 0;
width: 100%;
height: 100vh;
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.5s, opacity 0.5s linear;
}
/* -------------------------------------------------------------------------- */
/* 2. HEADER & NAVIGATION (DESKTOP) */
/* -------------------------------------------------------------------------- */
header.page div.nav_wrapper {
background-color: #1C1D25;
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 1440px;
height: 95px;
margin: 0 auto;
padding: 0 24px 5px 24px;
z-index: 1;
user-select: none;
width: 100%;
}
header.page div.nav_wrapper a.header-logo {
display: flex;
align-items: center;
height: 100%;
line-height: 0;
}
header.page div.nav_wrapper a.header-logo img {
height: 100vh;
max-height: 47px;
width: auto;
max-width: 200px;
flex-shrink: 0;
display: block;
}
header.page div.nav_wrapper label#menuToggleButton {
display: none;
}
header.page div.nav_wrapper nav#sitenav {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
header.page div.nav_wrapper nav#sitenav form.searchbar {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 8px;
transform: translateY(10px);
width: 100px;
}
header.page div.nav_wrapper nav#sitenav form.searchbar label {
display: none;
}
header.page div.nav_wrapper nav#sitenav form.searchbar input#site-search {
width: 250px;
max-width: 40px;
height: 40px;
background-image: url("/assets/img/icons/search.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 18px;
font-size: 1.125rem;
color: transparent;
transition: max-width 0.3s ease, background-color 0.3s ease;
}
header.page div.nav_wrapper nav#sitenav form.searchbar input#site-search:focus {
color: #46495b;
background-image: url("/assets/img/icons/search-33.svg");
background-position: 10px center;
background-color: #F2F2F2;
max-width: 250px;
padding-left: 40px;
cursor: text;
border-radius: 5px;
border: 0;
outline: none;
box-shadow: none;
}
header.page div.nav_wrapper nav#sitenav form.searchbar input#site-search:focus ~ a.cta {
display: none;
}
header.page div.nav_wrapper nav#sitenav form.searchbar input#site-search:focus ~ button#close-search {
display: block;
}
header.page div.nav_wrapper nav#sitenav form.searchbar button#close-search {
display: none;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: none;
border: 0;
color: #A2A2A2;
font-size: 24px;
cursor: pointer;
line-height: 40px;
padding: 0 10px;
z-index: 5;
}
header.page div.nav_wrapper nav#sitenav form.searchbar button#close-search:hover {
color: #1C1D25;
}
header.page div.nav_wrapper nav#sitenav ul {
list-style: none;
display: flex;
margin: 0 auto;
padding: 0;
transform: translateY(10px);
}
header.page div.nav_wrapper nav#sitenav ul li {
margin: 0 10px;
font-weight: 500;
font-size: 21px;
font-size: 1.3125rem;
line-height: 40px;
}
header.page div.nav_wrapper nav#sitenav ul li a {
color: #0E7C92;
padding: 28px 5px;
text-decoration: none;
display: inline-block;
}
header.page div.nav_wrapper nav#sitenav ul li a:hover, header.page div.nav_wrapper nav#sitenav ul li a:focus {
color: #ffffff;
}
header.page div.nav_wrapper nav#sitenav span#menuLabel, header.page div.nav_wrapper nav#sitenav div.navTitleBlock {
display: none;
}
/* -------------------------------------------------------------------------- */
/* 3. MOBILE STYLES (MAX-WIDTH: 900PX) */
/* -------------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
header.page div.nav_wrapper {
flex-direction: column;
align-items: flex-end;
}
header.page div.nav_wrapper a.header-logo {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin: 0 10px;
}
header.page div.nav_wrapper label#menuToggleButton {
display: block;
position: absolute;
top: 26px;
right: 14px;
padding: 7px 10px;
transform: translateY(3px);
}
header.page div.nav_wrapper label#menuToggleButton span {
display: block;
width: 35px;
height: 3px;
margin-top: 8.66px;
background: #0E7C92;
transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
header.page div.nav_wrapper label#menuToggleButton span.line1 {
margin-top: 0;
transform-origin: 0% 0%;
}
header.page div.nav_wrapper label#menuToggleButton span.line2 {
transform-origin: 0% 100%;
}
header.page div.nav_wrapper label#menuToggleButton span.line3 {
transform-origin: 0px 3px;
}
header.page div.nav_wrapper nav#sitenav {
position: fixed;
top: 139px;
right: -310px;
width: 300px;
height: 100vh;
background: #ffffff;
display: block;
overflow-y: auto;
box-shadow: -10px 0px 10px 1px rgba(0, 0, 0, 0.0705882353);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
-webkit-font-smoothing: antialiased;
}
header.page div.nav_wrapper nav#sitenav form.searchbar {
padding: 20px 40px 0 40px;
margin-top: 20px;
flex-direction: column;
align-items: flex-start;
transform: none;
}
header.page div.nav_wrapper nav#sitenav form.searchbar label {
display: block;
text-transform: uppercase;
}
header.page div.nav_wrapper nav#sitenav form.searchbar input#site-search {
width: 100%;
max-width: none;
background-color: #F2F2F2;
background-image: url("/assets/img/icons/search-33.svg");
background-position: 10px center;
padding-left: 40px;
border-radius: 5px;
transition: none;
}
header.page div.nav_wrapper nav#sitenav form.searchbar a.cta {
display: flex;
width: 100%;
font-size: 22px;
font-size: 1.375rem;
margin-top: 10px;
justify-content: center;
}
header.page div.nav_wrapper nav#sitenav span#menuLabel {
display: block;
margin: 30px 0 0 40px;
font-weight: 700;
text-transform: uppercase;
}
header.page div.nav_wrapper nav#sitenav ul {
flex-direction: column;
margin: 0;
padding: 50px 0 0 0;
transform: none;
}
header.page div.nav_wrapper nav#sitenav ul li {
margin: 0;
font-size: 26px;
font-size: 1.625rem;
}
header.page div.nav_wrapper nav#sitenav ul li a {
display: block;
padding: 10px 20px 10px 40px;
color: #1C1D25;
}
header.page div.nav_wrapper nav#sitenav ul li a:hover {
color: #ffffff;
background-color: #1C1D25;
}
input#menuToggleCheckbox:checked ~ main div#menu-modal {
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear;
}
input#menuToggleCheckbox:checked + header.page div.nav_wrapper label#menuToggleButton {
z-index: 2000;
}
input#menuToggleCheckbox:checked + header.page div.nav_wrapper label#menuToggleButton span.line1 {
transform: translate(6px, 0px) rotate(45deg);
}
input#menuToggleCheckbox:checked + header.page div.nav_wrapper label#menuToggleButton span.line2 {
opacity: 0;
transform: scale(0.2);
}
input#menuToggleCheckbox:checked + header.page div.nav_wrapper label#menuToggleButton span.line3 {
transform: translate(6px, 0px) rotate(-45deg);
}
input#menuToggleCheckbox:checked + header.page div.nav_wrapper nav#sitenav {
transform: translateX(-100%);
}
}
@media (min-width: 901px) {
body, html {
overflow: auto !important;
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
main {
max-width: 1440px;
margin: 0 auto;
padding: 0;
background-color: #fff;
}
main.bg-blobs {
background-image: url(/assets/img/backgrounds/blobs/pink-1.svg), url(/assets/img/backgrounds/blobs/green-1.svg), url(/assets/img/backgrounds/blobs/pink-2.svg);
background-repeat: no-repeat, no-repeat;
background-position: top 600px right -300px, top 2100px left -200px, top 4400px right -200px;
}
@media screen and (max-width: 620px) {
main.bg-blobs {
background-position: top 700px right -200px, top 3000px left -160px, top 6800px left -160px;
}
}
/* Main */
main {
/* template, no sidebars */
}
main .grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "content";
column-gap: 15px;
row-gap: 0;
max-width: 1200px;
padding: 0;
margin: 0 auto;
}
main .grid.sidebar.right {
grid-template-columns: 1fr 250px;
grid-template-areas: "content sidebar";
}
main .grid.sidebar.left {
grid-template-columns: 250px 1fr;
grid-template-areas: "sidebar content";
}
main .grid article,
main .grid section {
grid-area: content;
padding: 15px 5px;
}
main .grid aside {
position: sticky;
top: 140px;
align-self: start;
padding: 15px 5px;
grid-area: sidebar;
}
main .grid aside h5 {
text-transform: uppercase;
margin-bottom: 0.5rem;
}
main .grid aside ul.table-of-contents {
list-style: none;
margin: 0;
padding: 0;
}
main .grid aside ul.table-of-contents li {
margin: 0;
}
main .grid aside ul.table-of-contents li a {
display: block;
border-left: 4px solid #E0E6E5;
padding: 10px 10px 10px 24px;
line-height: 1rem;
margin: 0;
text-decoration: none;
color: inherit;
transition: all 100ms ease-in-out;
}
main .grid aside ul.table-of-contents li a:hover {
background-color: #F2F8F4;
}
/*
@media(min-width: 500px) {
main {
.grid {
}
}
}
*/
@media (max-width: 750px) {
main .grid.sidebar {
/* template, sidebar on right */
}
main .grid.sidebar.right {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-template-areas: "sidebar" "content";
}
main .grid.sidebar {
/* template, sidebar on left */
}
main .grid.sidebar.left {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-template-areas: "sidebar" "content";
}
main .grid {
/* template, sidebars on both sides. */
}
main .grid.sidebars {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-template-areas: "left" "content" "right";
}
main .grid article,
main .grid section {
padding: 10px 5px;
}
main .grid aside {
position: relative;
top: unset;
align-self: unset;
padding: 10px 5px;
/*
ul.table-of-contents {
display: none;
}
*/
}
}
.youtube-thumbnail-16-9 {
/*
width: 100%;
*/
object-fit: cover;
aspect-ratio: 16/9;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
dialog {
border: none;
max-width: 90%;
max-height: 80%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
border-radius: 1rem;
padding: 1rem;
overflow: visible;
}
dialog img {
width: 100%;
height: auto;
max-width: none;
max-height: 80vh;
border-radius: 0.5rem;
}
.lightbox-close {
position: absolute;
top: 0;
right: 0;
translate: 100% 0;
border: 0;
padding: 0;
width: 2rem;
height: 2rem;
background: none;
cursor: pointer;
}
.lightbox-close img {
width: 100%;
height: 100%;
object-fit: contain;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
main header {
position: relative;
width: 100%; /* Full width of the viewport */
background-color: #F2F8F4; /* Background color */
padding: 20px 170px; /* Adjust padding to add space around the content */
display: flex;
flex-direction: column; /* Stack children vertically */
justify-content: center; /* Vertically center the content */
align-items: flex-start; /* Left-align the content */
text-align: left; /* Left-align the text */
height: 100px; /* Ensure header has enough height for vertical centering (you can adjust this value) */
}
main header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #F2F8F4; /* Same background color */
z-index: -1; /* Keep it behind the content */
}
@media only screen and (max-width: 1200px) {
main header {
padding: 20px 60px;
}
}
@media only screen and (max-width: 600px) {
main header {
padding: 20px 20px;
}
}
main header h1 {
max-width: 1100px;
margin: 0; /* Remove margins to prevent centering */
}
main header h1 + p {
margin-bottom: 1.25rem;
}
main header p {
max-width: 1100px;
margin: 0; /* Remove margins to prevent centering */
}
main header.hero {
padding: 10px 0 0 54px;
display: flex;
flex-direction: justify-self;
align-items: stretch;
gap: 20px;
background-image: url("/assets/img/backgrounds/heading-hero.svg");
}
@media only screen and (max-width: 600px) {
main header.hero {
padding: 10px 0 0 20px;
}
}
main header.hero h1 {
text-align: left;
}
main header.hero p {
text-align: left;
}
main header.hero div.content {
padding-top: 50px;
width: 100%;
}
main header.hero div.content h1, main header.hero div.content h2, main header.hero div.content h3, main header.hero div.content h2.p {
max-width: 500px;
margin-left: 0;
}
main header.hero div.content h1 {
font-size: 54px;
font-size: 3.375rem;
line-height: 3.875rem;
}
main header.hero div.content h2.p {
font-weight: normal;
font-size: 26px;
font-size: 1.625rem;
}
main header.hero img.hero {
content: url("/assets/img/hero.png");
width: 600px;
margin-top: 5px;
height: min-content;
object-fit: scale-down;
max-width: 50%;
border-radius: 0;
}
@media only screen and (max-width: 900px) {
main header.hero img.hero {
display: none;
}
main header.hero div.content h1, main header.hero div.content p {
max-width: 100%;
}
}
@media only screen and (max-width: 900px) {
main header.hero ~ section.content_block {
flex-direction: column;
}
main header.hero ~ section.content_block.reverse {
flex-direction: column;
}
main header.hero ~ section.content_block div.imagestack {
width: 100%;
}
main header.hero ~ section.content_block div.content {
width: 100%;
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
main section.content_body {
padding: 50px 170px;
}
@media only screen and (max-width: 1200px) {
main section.content_body {
padding: 50px 60px;
}
}
@media only screen and (max-width: 600px) {
main section.content_body {
padding: 50px 20px;
}
}
main section div.content {
grid-area: content;
}
main section div.content h2 {
font-weight: 700;
font-size: 45px;
font-size: 2.8125rem;
}
main section div.content p {
font-size: 22px;
font-size: 1.375rem;
}
main section div.content p.descriptor {
text-transform: uppercase;
color: #006121;
font-weight: 700;
}
main section div.content.center {
text-align: center;
}
main section.content_block {
padding: 100px 55px;
display: flex;
flex-direction: row;
gap: 80px;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 600px) {
main section.content_block {
padding: 0 20px;
}
}
main section.content_block:first-of-type {
padding-top: 50px;
}
main section.content_block div.content {
width: 525px;
}
main section.content_block div.content h2 {
font-weight: 700;
font-size: 45px;
font-size: 2.8125rem;
}
main section.content_block div.content p {
font-size: 22px;
font-size: 1.375rem;
}
main section.content_block div.content p.descriptor {
text-transform: uppercase;
color: #006121;
font-weight: 700;
}
main section.content_block div.content.center {
text-align: center;
}
main section.hug {
margin: 0 auto;
padding: 0 40px 0 0;
justify-content: left;
max-width: 1120px;
}
@media only screen and (max-width: 900px) {
main section.hug {
padding: 0 55px;
}
}
@media only screen and (max-width: 600px) {
main section.hug {
padding: 0 20px;
}
}
main section.reverse {
flex-direction: row-reverse;
}
main section.insurance-broker + p {
margin-top: 2rem;
}
main section.insurance-broker div.content span.title {
display: block;
font-family: "Roboto", sans-serif;
word-spacing: 0em;
font-weight: 900;
font-size: 28px;
font-size: 1.75rem;
text-transform: none;
margin: 1.25rem 0 0.9375rem 0;
line-height: 1.15;
}
@media only screen and (max-width: 800px) {
main section.insurance-broker div.content span.title {
font-size: 22px;
font-size: 1.375rem;
margin: 1.125rem 0 0.875rem 0;
}
}
main section.articles, main section.articles-featured {
padding: 50px 54px;
}
@media only screen and (max-width: 600px) {
main section.articles, main section.articles-featured {
padding: 50px 20px;
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
main section.excerpt-routing:first-of-type {
padding-top: 60px;
}
main section.excerpt-routing {
display: grid;
padding: 40px 0;
margin: 0 auto;
width: calc(100% - 320px);
grid-template-areas: "photo content";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr;
column-gap: 56px;
row-gap: 0;
/*
padding: 40px 170px;
display: flex;
flex-direction: row;
gap: 80px;
align-items: center;
justify-content: center;
*/
}
main section.excerpt-routing div.content {
grid-area: content;
}
main section.excerpt-routing div.content h2 {
font-weight: 700;
font-size: 32px;
font-size: 2rem;
}
main section.excerpt-routing div.content p {
font-size: 22px;
font-size: 1.375rem;
}
main section.excerpt-routing div.content p.descriptor {
text-transform: uppercase;
color: #006121;
font-weight: 700;
}
main section.excerpt-routing div.content a.cta {
background-color: unset;
padding: 10px 20px 10px 0;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.125rem;
height: auto;
border: unset;
min-height: unset;
border-radius: unset;
background-image: url('data:image/svg+xml;utf8,');
background-position: center right 0px;
color: #0272B0;
}
main section.excerpt-routing div.content.center {
text-align: center;
}
main section.excerpt-routing:nth-child(even) {
grid-template-columns: 1fr 300px;
grid-template-rows: 1fr;
grid-template-areas: "content photo";
}
main section.excerpt-routing div.imagestack {
grid-area: photo;
}
main section.excerpt-routing div.imagestack:after {
background-color: #FF3DD1;
}
main section.excerpt-routing:nth-of-type(4n-2) div.imagestack:after, main section.excerpt-routing:nth-of-type(4n-1) div.imagestack:after {
background-color: #05DD4E;
}
@media only screen and (max-width: 1200px) {
main section.excerpt-routing {
padding: 40px 0px;
gap: 60px;
width: calc(100% - 100px);
}
}
@media only screen and (max-width: 760px) {
main section.excerpt-routing {
padding: 30px 0 60px 0;
grid-template-areas: "photo" "content";
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 30px;
margin: 0 auto 0 auto;
}
main section.excerpt-routing:nth-child(even) {
grid-template-areas: "photo" "content";
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
main section.excerpt-routing div.imagestack {
max-width: 100%;
width: 100%;
}
main section.excerpt-routing div.content {
width: 100%;
}
}
@media only screen and (max-width: 450px) {
main section.excerpt-routing {
width: calc(100% - 60px);
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
main form .form_field label {
text-transform: uppercase;
font-weight: 700;
}
main form input#site-search {
background-image: url("/assets/img/icons/search-33.svg");
background-repeat: no-repeat;
background-position: 10px center;
background-size: 24px 24px;
background-color: #F2F2F2;
padding-left: 40px;
margin: 0;
font-size: 18px;
font-size: 1.125rem;
display: block;
/* background-color: #f9f9f9; */
/* border: 1px solid #c5c6cf; */
border-radius: 5px;
height: 40px;
line-height: 40px;
color: #46495b;
width: 100%;
}
main .posts_nav {
max-width: calc(100% - 350px);
margin: 2rem auto 0 auto;
text-align: center;
padding: 2rem 0;
border-top: 1px dotted #ccc;
}
main .posts_nav a.page-numbers, main .posts_nav span {
padding: 5px 10px;
margin: 0 0.25rem;
}
main .posts_nav a.page-numbers:visited {
color: black;
}
main .posts_nav a.page-numbers:hover {
background-color: #f2f2f2;
}
main .posts_nav a.page-numbers.next:hover,
main .posts_nav a.page-numbers.prev:hover {
background-color: transparent;
}
main .posts_nav a.prev.page-numbers {
padding: 0;
margin: 0;
}
main .posts_nav a.next.page-number {
padding: 0;
margin: 0;
}
main div.search-results:first-of-type {
padding-top: 30px;
}
main div.search-results {
display: grid;
padding: 10px 0;
margin: 0 auto;
width: calc(100% - 320px);
column-gap: 56px;
row-gap: 0;
}
main div.search-results span.title {
font-weight: 700;
font-size: 24px;
font-size: 1.5rem;
margin: 0 0 0.5rem 0;
}
main div.search-results p {
margin: 0 0 1rem 0;
font-size: 18px;
font-size: 1.125rem;
}
main div.search-results a {
text-decoration: inherit;
color: inherit;
}
main div.search-results a:hover,
main div.search-results a:active {
background-color: #eee;
margin: -10px;
padding: 10px;
border-radius: 8px;
}
main div.search-results img {
max-width: 100%;
max-height: 225px;
width: 100%;
object-fit: cover;
}
@media only screen and (max-width: 1000px) {
main div.search-results {
padding: 20px 0px;
gap: 30px;
width: calc(100% - 100px);
}
}
@media only screen and (max-width: 760px) {
main div.search-results {
padding: 20px 0;
margin: 0 auto 0 auto;
}
main div.search-results img {
max-width: 100%;
max-height: 100px;
width: 100%;
object-fit: cover;
}
main div.search-results div.content {
width: 100%;
}
}
@media only screen and (max-width: 450px) {
main div.search-results {
width: calc(100% - 60px);
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
div.bio {
display: grid;
padding: 80px 0;
margin: 0 auto;
/* sub grid */
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr;
grid-template-areas: "photo content";
column-gap: 80px;
row-gap: 0;
}
div.bio .imagestack {
grid-area: photo;
max-height: 400px;
}
div.bio .imagestack:after {
background-color: #FF3DD1;
border-radius: 10px;
}
div.bio:nth-child(even) .imagestack:after {
background-color: #05DD4E;
}
div.bio .content {
position: relative;
grid-area: content;
color: #000;
font-weight: 400;
text-align: left;
}
div.bio .content h4, div.bio .content .h4 {
text-transform: none;
color: #616D70;
}
@media only screen and (max-width: 900px) {
div.bio {
column-gap: 40px;
}
}
@media only screen and (max-width: 750px) {
div.bio {
grid-template-columns: auto;
grid-template-areas: "photo" "content";
padding: 40px 0;
}
div.bio .imagestack {
width: 100%;
max-width: 100%;
max-height: unset;
margin: 0 auto 30px auto;
}
div.bio .content {
width: 100%;
margin: 0 auto;
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
div.about-values {
display: grid;
padding: 0;
margin: 3rem auto 8rem auto;
/* sub grid */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
column-gap: 80px;
row-gap: 40px;
}
@media only screen and (max-width: 900px) {
div.about-values {
gap: 40px;
}
}
@media only screen and (max-width: 800px) {
div.about-values {
grid-template-columns: auto;
margin-bottom: 4rem;
}
}
div.about-values div {
position: relative;
grid-template-columns: repeat(2, 50%);
color: #000;
font-weight: 400;
text-align: left;
}
div.about-values div h3 {
margin-bottom: 0;
font-size: 26px;
font-size: 1.625rem;
}
div.about-values div h4, div.about-values div .h4 {
text-transform: none;
color: #616D70;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
main section.footnotes {
padding: 1.5rem 0;
margin: 0 80px 0 200px;
max-width: 718px;
}
@media only screen and (max-width: 900px) {
main section.footnotes {
margin: 0 auto;
}
}
main section.footnotes h5 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.75rem;
margin: 0 0 5px 0;
}
main section.footnotes ul, main section.footnotes ol {
list-style-type: none;
padding: 0;
margin: 0;
counter-reset: list;
}
main section.footnotes ul li, main section.footnotes ol li {
font-size: 12px;
font-size: 0.75rem;
line-height: 1rem;
margin: 0.25rem 0 0 0;
}
main section.footnotes ul li::before, main section.footnotes ol li::before {
content: " [" counter(list) "] ";
counter-increment: list;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
section.articles div.grid-wrapper {
margin-top: 2em;
display: grid;
grid-template-columns: repeat(3, 33.33%);
gap: 40px 20px;
grid-auto-flow: row;
align-items: start;
margin-right: 54px;
}
@media only screen and (max-width: 900px) {
section.articles div.grid-wrapper {
grid-template-columns: repeat(2, 50%);
}
}
@media only screen and (max-width: 600px) {
section.articles div.grid-wrapper {
grid-template-columns: repeat(1, 100%);
}
}
section.articles div.grid-wrapper.col4 {
grid-template-columns: repeat(4, 25%);
}
@media only screen and (max-width: 900px) {
section.articles div.grid-wrapper.col4 {
grid-template-columns: repeat(2, 50%);
margin-right: 0;
}
}
@media only screen and (max-width: 500px) {
section.articles div.grid-wrapper.col4 {
grid-template-columns: repeat(1, 100%);
}
}
section.articles div.grid-wrapper.col4 article.excerpt a.link_block img {
display: block;
object-fit: cover;
height: 100%;
aspect-ratio: 1/1;
}
@media only screen and (max-width: 800px) {
section.articles div.grid-wrapper.col4 article.excerpt a.link_block img {
width: 100%;
height: 100%;
}
}
section.articles div.grid-wrapper article.excerpt a.link_block {
display: block;
padding: 0;
margin: 0 auto;
width: 100%;
text-decoration: none;
color: inherit;
}
section.articles div.grid-wrapper article.excerpt a.link_block img {
display: block;
object-fit: cover;
width: 100%;
height: auto;
border-radius: 10px;
aspect-ratio: 15/8;
margin-bottom: 1em;
}
@media only screen and (max-width: 800px) {
section.articles div.grid-wrapper article.excerpt a.link_block img {
width: 100%;
height: auto;
}
}
section.articles div.grid-wrapper article.excerpt a.link_block .content p, section.articles div.grid-wrapper article.excerpt a.link_block .content h3 {
margin: 0;
}
section.articles div.grid-wrapper article.excerpt a.link_block .content p.title, section.articles div.grid-wrapper article.excerpt a.link_block .content h3.title {
font-size: 22px;
font-size: 1.375rem;
font-weight: bold;
line-height: 28px;
margin-bottom: 0.5rem;
}
section.articles div.grid-wrapper article.excerpt a.link_block .content p.excerpt, section.articles div.grid-wrapper article.excerpt a.link_block .content h3.excerpt {
font-size: 18px;
font-size: 1.125rem;
}
section.articles div.grid-wrapper article.excerpt a.link_block .content p + span.green, section.articles div.grid-wrapper article.excerpt a.link_block .content h3 + span.green {
display: block;
margin-top: 0.5em;
}
section.articles div.grid-wrapper article.excerpt a.link_block .content span.date {
font-size: 16px;
font-size: 1rem;
line-height: 20px;
color: #616D70;
}
section.articles div.grid-wrapper article.excerpt a.link_block .content span.category {
display: inline-block;
font-size: 16px;
font-size: 1rem;
background-color: #ccc;
color: #333;
border-radius: 12px;
line-height: 24px;
height: 24px;
padding: 0 12px;
}
section.articles div.grid-wrapper article.excerpt a.link_block .content span + span {
margin-left: 0.5em;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
section.articles-featured article.excerpt {
margin-top: 2em;
}
section.articles-featured article.excerpt a.link_block {
display: grid;
padding: 0;
margin: 0 auto;
/* sub grid */
grid-template-columns: 600px 1fr;
grid-template-rows: 1fr;
grid-template-areas: "photo content";
column-gap: 32px;
row-gap: 1rem;
width: 100%;
text-decoration: none;
color: inherit;
}
@media only screen and (max-width: 1100px) {
section.articles-featured article.excerpt a.link_block {
grid-template-columns: 50% 1fr;
}
}
@media only screen and (max-width: 800px) {
section.articles-featured article.excerpt a.link_block {
grid-template-columns: 1fr;
grid-template-areas: "photo" "content";
}
}
section.articles-featured article.excerpt a.link_block img {
grid-area: "photo";
object-fit: cover;
width: 100%;
height: 320px;
border-radius: 10px;
aspect-ratio: 15/8;
}
@media only screen and (max-width: 800px) {
section.articles-featured article.excerpt a.link_block img {
width: 100%;
height: auto;
}
}
section.articles-featured article.excerpt a.link_block .content p {
margin: 0;
}
section.articles-featured article.excerpt a.link_block .content p.title {
font-size: 31px;
font-size: 1.9375rem;
font-weight: bold;
line-height: 1.15;
margin-bottom: 0.5rem;
}
section.articles-featured article.excerpt a.link_block .content p.excerpt {
font-size: 22px;
font-size: 1.375rem;
}
section.articles-featured article.excerpt a.link_block .content p span.date {
font-size: 16px;
font-size: 1rem;
line-height: 20px;
color: #616D70;
}
section.articles-featured article.excerpt a.link_block .content p span.category {
display: inline-block;
font-size: 16px;
font-size: 1rem;
background-color: #ccc;
color: #333;
border-radius: 12px;
line-height: 24px;
height: 24px;
padding: 0 12px;
}
section.articles-featured article.excerpt a.link_block .content p span + span {
margin-left: 1em;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
footer {
background-color: #1C1D25;
color: #ffffff;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 32px 0;
}
footer .footer-top {
position: relative;
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
footer .footer-top a.footer-logo {
display: block;
line-height: 0;
transform: translateY(-10px);
}
footer .footer-top a.footer-logo img {
height: 47px;
width: auto;
}
footer .footer-top nav.footer-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
footer .footer-top nav.footer-nav ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
list-style-type: none;
gap: 32px;
}
footer .footer-top nav.footer-nav ul li a {
color: #ffffff;
font-size: 18px;
font-size: 1.125rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
footer .footer-top nav.footer-nav ul li a:hover, footer .footer-top nav.footer-nav ul li a:focus {
color: #0E7C92;
}
footer .footer-bottom {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px;
}
footer .footer-bottom p {
text-align: center;
margin: 0;
font-size: 14px;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
}
@media only screen and (max-width: 700px) {
footer .footer-top {
flex-direction: column;
align-items: center;
gap: 24px;
}
footer .footer-top nav.footer-nav {
position: static;
left: auto;
transform: none;
}
footer .footer-top nav.footer-nav ul {
flex-direction: column;
align-items: center;
gap: 16px;
}
footer .footer-top nav.footer-nav ul li a {
display: block;
padding: 8px 0;
}
footer .footer-bottom {
text-align: center;
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
div.content_wrapper {
width: 100%;
}
body.product div.imagestack {
max-width: 300px;
margin-top: 2rem;
}
body.product div.imagestack.right {
float: right;
margin-left: 2rem;
margin-right: 0;
}
body.product {
font-size: 1.2rem;
}
body.product .bg-navy {
background-color: #616D70;
}
body.product .bg-navy h1, body.product .bg-navy h2, body.product .bg-navy h3, body.product .bg-navy h4, body.product .bg-navy h5, body.product .bg-navy h6, body.product .bg-navy p, body.product .bg-navy div, body.product .bg-navy ul, body.product .bg-navy li, body.product .bg-navy dd, body.product .bg-navy dt {
color: #fff;
}
body.product .bg-gray-light {
background-color: #E0E6E5;
}
body.product .bg-green-light {
background-color: #F2F8F4;
}
body.product .bg-white {
background-color: #ffffff;
}
body.product main {
max-width: 100%;
background-image: url(/assets/img/backgrounds/blobs/pink-1.svg), url(/assets/img/backgrounds/blobs/green-1.svg), url(/assets/img/backgrounds/blobs/pink-2.svg);
background-repeat: no-repeat, no-repeat;
background-position: top 600px right -300px, top 2200px left -200px, top 2700px right -200px;
}
@media screen and (max-width: 850px) {
body.product main {
background-position: top 450px right -200px, top 2700px left -160px, top 3200px right -200px;
}
}
body.product main div.content_body {
margin: 0 auto;
max-width: 1200px;
}
body.product header.page nav#agent,
body.product header.page div.nav_wrapper nav#sitenav,
body.product input#menuToggleCheckbox + header.page div.nav_wrapper nav#sitenav {
display: none;
}
body.product header {
max-width: 100%;
position: relative;
}
body.product footer {
max-width: 100%;
flex-direction: row;
}
body.product footer nav {
display: none;
}
body.product footer.footer p {
text-align: center;
width: 100%;
}
body.product section {
max-width: 1200px;
padding: 2rem;
margin: 0 auto;
}
body.product section::after {
content: "";
display: table;
clear: both;
}
body.product section.hero {
max-width: 100%;
padding: 0;
background-size: cover;
background-position: 50% 50%;
width: 100%;
aspect-ratio: 16/9;
object-fit: contain;
position: relative;
display: flex;
align-items: center;
max-height: 600px;
}
body.product section.hero div.content {
margin: 0 auto;
text-align: center;
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.8));
text-shadow: 0px 1px 8px black;
}
body.product section.hero div.content h1 {
color: #fff;
}
body.product section.hero div.content p {
color: #fff;
margin-bottom: 1.5em;
}
body.product section.hero div.content a.cta {
font-size: 2rem;
background-color: rgba(28, 29, 37, 0.8);
}
body.product section.hero div.content a.cta:hover {
background-color: rgba(97, 109, 112, 0.8);
}
body.product section.overview {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: 1fr fit-content(400px);
grid-template-areas: "intro benefits";
column-gap: 50px;
}
body.product section.overview h2 {
margin-bottom: 1rem;
}
body.product section.overview div.intro {
grid-area: "intro";
}
body.product section.why_choose {
max-width: 1200px;
padding: 2rem;
border-radius: 1rem;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "main secondary";
grid-gap: 10px;
}
body.product section.why_choose h2 {
margin-bottom: 1rem;
}
body.product section.why_choose div.main {
grid-area: "main";
}
body.product section.why_choose div.secondary {
grid-area: "secondary";
display: grid;
margin: 0;
/* sub grid */
}
body.product section.testimonials {
width: 100%;
max-width: 100%;
padding: 3rem 0 0 0;
}
body.product section.testimonials h2 {
max-width: 1200px;
padding: 0 2rem 2rem 2rem;
width: 100%;
margin: 0 auto;
}
/* Benefit Blocks */
div.benefits {
display: grid;
margin: 2rem 0 0 0;
/* sub grid */
grid-gap: 20px;
min-width: 200px;
color: #000;
justify-content: space-between;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
@media screen and (min-width: 500px) {
div.benefits {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 800px) {
div.benefits {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
div.benefits div.benefit {
display: grid;
align-items: flex-start;
grid-gap: 1rem;
padding: 10px;
grid-template-columns: 100%;
grid-template-rows: 100px auto;
border-radius: 1rem;
grid-template-areas: "icon" "content";
}
div.benefits div.benefit img {
display: block;
grid-area: icon;
width: 100%;
aspect-ratio: 1/1;
max-width: 100px;
margin: 0 auto 0 auto;
object-fit: fit;
padding: 7.5%;
border: 2px solid #000;
border-radius: 50%;
overflow: visible;
background-color: #fff;
}
div.benefits div.benefit div.content {
grid-area: content;
text-align: center;
margin: 0;
padding: 0;
}
div.benefits div.benefit div.content h3 {
font-size: 1.2rem;
font-weight: bold;
margin: 0;
}
div.benefits div.benefit div.content p {
font-size: 1rem;
}
div.benefits.green div.benefit {
background-color: #F2F8F4;
color: #006121;
}
div.imagestack {
position: relative;
max-width: 523px;
}
div.imagestack:before, div.imagestack:after {
content: "";
position: absolute;
z-index: 0;
}
div.imagestack:after {
display: block;
height: 100%;
width: 100%;
border-radius: 10px;
background-color: #000000;
top: 0px;
left: 0;
transform: rotate(5deg);
}
div.imagestack.pink:after {
background-color: #FF3DD1;
}
div.imagestack.green:after {
background-color: #05DD4E;
}
div.imagestack.none:before, div.imagestack.none:after {
content: "";
position: unset;
z-index: unset;
}
div.imagestack.none:after {
display: unset;
height: unset;
width: unset;
border-radius: unset;
background-color: unset;
top: unset;
left: unset;
transform: unset;
}
div.imagestack.none img {
border-radius: 0;
margin: 0;
}
div.imagestack img {
border: 0px;
border-radius: 10px;
width: 100%;
height: 100%;
z-index: 1;
position: relative;
object-fit: cover;
}
div.imagestack.left {
max-width: 400px;
float: left;
margin-right: 3rem;
margin-bottom: 2rem;
}
@media screen and (max-width: 850px) {
div.imagestack.left {
float: none;
margin: 0 auto 3rem auto;
max-width: 523px;
}
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
/*
Icons are based on a grid where each icon is 30px x 30px;
*/
/* Basic Icons */
.sprite_icon {
display: inline-block;
vertical-align: text-top;
overflow: hidden;
position: relative;
}
.sprite_icon::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
background-image: url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 150px 900px;
background-position: 0 0;
}
.sprite_icon + .sprite_icon {
margin-left: 2rem;
}
/* sizes */
.sprite_icon.w30 {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
line-height: 30px;
padding-left: 30px;
text-indent: 0;
}
.sprite_icon.icon_left {
padding-left: 60px;
width: auto;
}
/*
background-color: transparent;
background-image:url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 80px 480px;
background-position: 0 -256px;
*/
.sprite_icon.w30.show_content {
width: auto;
height: auto;
text-indent: 10px;
}
.sprite_icon.w30::before {
height: 30px;
width: 30px;
background-size: 150px 900px;
background-position: 0 0;
}
/* Add icon column indexes .sprite_col_# */
.sprite_icon.w30.sprite_col_1::before,
.sprite_icon.w30.col-1::before {
background-position-x: 0px;
}
.sprite_icon.w30.hover_col_1:hover::before,
.sprite_icon.w30.hover_col_1:active::before {
background-position-x: 0px;
}
.sprite_icon.w30.sprite_col_2::before,
.sprite_icon.w30.col-2::before {
background-position-x: -30px;
}
.sprite_icon.w30.hover_col_2:hover::before,
.sprite_icon.w30.hover_col_2:active::before {
background-position-x: -30px;
}
.sprite_icon.w30.sprite_col_3::before,
.sprite_icon.w30.col-3::before {
background-position-x: -60px;
}
.sprite_icon.w30.hover_col_3:hover::before,
.sprite_icon.w30.hover_col_3:active::before {
background-position-x: -60px;
}
.sprite_icon.w30.sprite_col_4::before,
.sprite_icon.w30.col-4::before {
background-position-x: -90px;
}
.sprite_icon.w30.hover_col_4:hover::before,
.sprite_icon.w30.hover_col_4:active::before {
background-position-x: -90px;
}
.sprite_icon.w30.sprite_col_5::before,
.sprite_icon.w30.col-5::before {
background-position-x: -120px;
}
.sprite_icon.w30.hover_col_5:hover::before,
.sprite_icon.w30.hover_col_5:active::before {
background-position-x: -120px;
}
/*
set up icons for use in flags, such as a field level error message
with an icon next to it.
*/
.sprite_icon.flag {
font-weight: 700;
}
.sprite_icon.flag.active,
.sprite_icon.flag:hover {
width: auto;
background-color: #C50101;
color: #ffffff;
}
.sprite_icon.w30.flag {
width: 30px;
height: 30px;
margin-bottom: 6px;
padding-left: 30px;
font-size: 22.5px;
border-radius: 15px;
vertical-align: middle;
}
.sprite_icon.w30.flag.active,
.sprite_icon.w30.flag:hover {
width: auto;
padding-right: 15px;
padding-left: 0;
text-indent: 37.5px;
}
.sprite_icon.w30.flag.active::before,
.sprite_icon.w30.flag:hover::before {
top: 3.75px;
left: 5.625px;
height: 22.5px;
width: 22.5px;
background-size: 112.5px 675px;
}
.sprite_icon.w25 {
width: 25px;
height: 25px;
min-width: 25px;
min-height: 25px;
line-height: 25px;
padding-left: 25px;
text-indent: 0;
}
.sprite_icon.icon_left {
padding-left: 50px;
width: auto;
}
/*
background-color: transparent;
background-image:url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 80px 480px;
background-position: 0 -256px;
*/
.sprite_icon.w25.show_content {
width: auto;
height: auto;
text-indent: 8.3333333333px;
}
.sprite_icon.w25::before {
height: 25px;
width: 25px;
background-size: 125px 750px;
background-position: 0 0;
}
/* Add icon column indexes .sprite_col_# */
.sprite_icon.w25.sprite_col_1::before,
.sprite_icon.w25.col-1::before {
background-position-x: 0px;
}
.sprite_icon.w25.hover_col_1:hover::before,
.sprite_icon.w25.hover_col_1:active::before {
background-position-x: 0px;
}
.sprite_icon.w25.sprite_col_2::before,
.sprite_icon.w25.col-2::before {
background-position-x: -25px;
}
.sprite_icon.w25.hover_col_2:hover::before,
.sprite_icon.w25.hover_col_2:active::before {
background-position-x: -25px;
}
.sprite_icon.w25.sprite_col_3::before,
.sprite_icon.w25.col-3::before {
background-position-x: -50px;
}
.sprite_icon.w25.hover_col_3:hover::before,
.sprite_icon.w25.hover_col_3:active::before {
background-position-x: -50px;
}
.sprite_icon.w25.sprite_col_4::before,
.sprite_icon.w25.col-4::before {
background-position-x: -75px;
}
.sprite_icon.w25.hover_col_4:hover::before,
.sprite_icon.w25.hover_col_4:active::before {
background-position-x: -75px;
}
.sprite_icon.w25.sprite_col_5::before,
.sprite_icon.w25.col-5::before {
background-position-x: -100px;
}
.sprite_icon.w25.hover_col_5:hover::before,
.sprite_icon.w25.hover_col_5:active::before {
background-position-x: -100px;
}
/*
set up icons for use in flags, such as a field level error message
with an icon next to it.
*/
.sprite_icon.flag {
font-weight: 700;
}
.sprite_icon.flag.active,
.sprite_icon.flag:hover {
width: auto;
background-color: #C50101;
color: #ffffff;
}
.sprite_icon.w25.flag {
width: 25px;
height: 25px;
margin-bottom: 5px;
padding-left: 25px;
font-size: 18.75px;
border-radius: 12.5px;
vertical-align: middle;
}
.sprite_icon.w25.flag.active,
.sprite_icon.w25.flag:hover {
width: auto;
padding-right: 12.5px;
padding-left: 0;
text-indent: 31.25px;
}
.sprite_icon.w25.flag.active::before,
.sprite_icon.w25.flag:hover::before {
top: 3.125px;
left: 4.6875px;
height: 18.75px;
width: 18.75px;
background-size: 93.75px 562.5px;
}
.sprite_icon.w20 {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
line-height: 20px;
padding-left: 20px;
text-indent: 0;
}
.sprite_icon.icon_left {
padding-left: 40px;
width: auto;
}
/*
background-color: transparent;
background-image:url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 80px 480px;
background-position: 0 -256px;
*/
.sprite_icon.w20.show_content {
width: auto;
height: auto;
text-indent: 6.6666666667px;
}
.sprite_icon.w20::before {
height: 20px;
width: 20px;
background-size: 100px 600px;
background-position: 0 0;
}
/* Add icon column indexes .sprite_col_# */
.sprite_icon.w20.sprite_col_1::before,
.sprite_icon.w20.col-1::before {
background-position-x: 0px;
}
.sprite_icon.w20.hover_col_1:hover::before,
.sprite_icon.w20.hover_col_1:active::before {
background-position-x: 0px;
}
.sprite_icon.w20.sprite_col_2::before,
.sprite_icon.w20.col-2::before {
background-position-x: -20px;
}
.sprite_icon.w20.hover_col_2:hover::before,
.sprite_icon.w20.hover_col_2:active::before {
background-position-x: -20px;
}
.sprite_icon.w20.sprite_col_3::before,
.sprite_icon.w20.col-3::before {
background-position-x: -40px;
}
.sprite_icon.w20.hover_col_3:hover::before,
.sprite_icon.w20.hover_col_3:active::before {
background-position-x: -40px;
}
.sprite_icon.w20.sprite_col_4::before,
.sprite_icon.w20.col-4::before {
background-position-x: -60px;
}
.sprite_icon.w20.hover_col_4:hover::before,
.sprite_icon.w20.hover_col_4:active::before {
background-position-x: -60px;
}
.sprite_icon.w20.sprite_col_5::before,
.sprite_icon.w20.col-5::before {
background-position-x: -80px;
}
.sprite_icon.w20.hover_col_5:hover::before,
.sprite_icon.w20.hover_col_5:active::before {
background-position-x: -80px;
}
/*
set up icons for use in flags, such as a field level error message
with an icon next to it.
*/
.sprite_icon.flag {
font-weight: 700;
}
.sprite_icon.flag.active,
.sprite_icon.flag:hover {
width: auto;
background-color: #C50101;
color: #ffffff;
}
.sprite_icon.w20.flag {
width: 20px;
height: 20px;
margin-bottom: 4px;
padding-left: 20px;
font-size: 15px;
border-radius: 10px;
vertical-align: middle;
}
.sprite_icon.w20.flag.active,
.sprite_icon.w20.flag:hover {
width: auto;
padding-right: 10px;
padding-left: 0;
text-indent: 25px;
}
.sprite_icon.w20.flag.active::before,
.sprite_icon.w20.flag:hover::before {
top: 2.5px;
left: 3.75px;
height: 15px;
width: 15px;
background-size: 75px 450px;
}
.sprite_icon.w16 {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
line-height: 16px;
padding-left: 16px;
text-indent: 0;
}
.sprite_icon.icon_left {
padding-left: 32px;
width: auto;
}
/*
background-color: transparent;
background-image:url("../img/icons/icon_sprites.svg?v=20200310");
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 80px 480px;
background-position: 0 -256px;
*/
.sprite_icon.w16.show_content {
width: auto;
height: auto;
text-indent: 5.3333333333px;
}
.sprite_icon.w16::before {
height: 16px;
width: 16px;
background-size: 80px 480px;
background-position: 0 0;
}
/* Add icon column indexes .sprite_col_# */
.sprite_icon.w16.sprite_col_1::before,
.sprite_icon.w16.col-1::before {
background-position-x: 0px;
}
.sprite_icon.w16.hover_col_1:hover::before,
.sprite_icon.w16.hover_col_1:active::before {
background-position-x: 0px;
}
.sprite_icon.w16.sprite_col_2::before,
.sprite_icon.w16.col-2::before {
background-position-x: -16px;
}
.sprite_icon.w16.hover_col_2:hover::before,
.sprite_icon.w16.hover_col_2:active::before {
background-position-x: -16px;
}
.sprite_icon.w16.sprite_col_3::before,
.sprite_icon.w16.col-3::before {
background-position-x: -32px;
}
.sprite_icon.w16.hover_col_3:hover::before,
.sprite_icon.w16.hover_col_3:active::before {
background-position-x: -32px;
}
.sprite_icon.w16.sprite_col_4::before,
.sprite_icon.w16.col-4::before {
background-position-x: -48px;
}
.sprite_icon.w16.hover_col_4:hover::before,
.sprite_icon.w16.hover_col_4:active::before {
background-position-x: -48px;
}
.sprite_icon.w16.sprite_col_5::before,
.sprite_icon.w16.col-5::before {
background-position-x: -64px;
}
.sprite_icon.w16.hover_col_5:hover::before,
.sprite_icon.w16.hover_col_5:active::before {
background-position-x: -64px;
}
/*
set up icons for use in flags, such as a field level error message
with an icon next to it.
*/
.sprite_icon.flag {
font-weight: 700;
}
.sprite_icon.flag.active,
.sprite_icon.flag:hover {
width: auto;
background-color: #C50101;
color: #ffffff;
}
.sprite_icon.w16.flag {
width: 16px;
height: 16px;
margin-bottom: 3.2px;
padding-left: 16px;
font-size: 12px;
border-radius: 8px;
vertical-align: middle;
}
.sprite_icon.w16.flag.active,
.sprite_icon.w16.flag:hover {
width: auto;
padding-right: 8px;
padding-left: 0;
text-indent: 20px;
}
.sprite_icon.w16.flag.active::before,
.sprite_icon.w16.flag:hover::before {
top: 2px;
left: 3px;
height: 12px;
width: 12px;
background-size: 60px 360px;
}
.sprite_icon.arrow_up.w30::before {
background-position-y: 0px;
}
.sprite_icon.w30.hover_arrow_up:hover::before,
.sprite_icon.w30.hover_arrow_up:active::before {
background-position-y: 0px;
}
.sprite_icon.flag.w30.arrow_up:hover::before,
.sprite_icon.flag.w30.arrow_up.active::before {
background-position: -22.5px 0px;
}
.sprite_icon.arrow_up.w25::before {
background-position-y: 0px;
}
.sprite_icon.w25.hover_arrow_up:hover::before,
.sprite_icon.w25.hover_arrow_up:active::before {
background-position-y: 0px;
}
.sprite_icon.flag.w25.arrow_up:hover::before,
.sprite_icon.flag.w25.arrow_up.active::before {
background-position: -18.75px 0px;
}
.sprite_icon.arrow_up.w20::before {
background-position-y: 0px;
}
.sprite_icon.w20.hover_arrow_up:hover::before,
.sprite_icon.w20.hover_arrow_up:active::before {
background-position-y: 0px;
}
.sprite_icon.flag.w20.arrow_up:hover::before,
.sprite_icon.flag.w20.arrow_up.active::before {
background-position: -15px 0px;
}
.sprite_icon.arrow_up.w16::before {
background-position-y: 0px;
}
.sprite_icon.w16.hover_arrow_up:hover::before,
.sprite_icon.w16.hover_arrow_up:active::before {
background-position-y: 0px;
}
.sprite_icon.flag.w16.arrow_up:hover::before,
.sprite_icon.flag.w16.arrow_up.active::before {
background-position: -12px 0px;
}
.sprite_icon.arrow_down.w30::before {
background-position-y: -30px;
}
.sprite_icon.w30.hover_arrow_down:hover::before,
.sprite_icon.w30.hover_arrow_down:active::before {
background-position-y: -30px;
}
.sprite_icon.flag.w30.arrow_down:hover::before,
.sprite_icon.flag.w30.arrow_down.active::before {
background-position: -22.5px -22.5px;
}
.sprite_icon.arrow_down.w25::before {
background-position-y: -25px;
}
.sprite_icon.w25.hover_arrow_down:hover::before,
.sprite_icon.w25.hover_arrow_down:active::before {
background-position-y: -25px;
}
.sprite_icon.flag.w25.arrow_down:hover::before,
.sprite_icon.flag.w25.arrow_down.active::before {
background-position: -18.75px -18.75px;
}
.sprite_icon.arrow_down.w20::before {
background-position-y: -20px;
}
.sprite_icon.w20.hover_arrow_down:hover::before,
.sprite_icon.w20.hover_arrow_down:active::before {
background-position-y: -20px;
}
.sprite_icon.flag.w20.arrow_down:hover::before,
.sprite_icon.flag.w20.arrow_down.active::before {
background-position: -15px -15px;
}
.sprite_icon.arrow_down.w16::before {
background-position-y: -16px;
}
.sprite_icon.w16.hover_arrow_down:hover::before,
.sprite_icon.w16.hover_arrow_down:active::before {
background-position-y: -16px;
}
.sprite_icon.flag.w16.arrow_down:hover::before,
.sprite_icon.flag.w16.arrow_down.active::before {
background-position: -12px -12px;
}
.sprite_icon.arrow_left.w30::before {
background-position-y: -60px;
}
.sprite_icon.w30.hover_arrow_left:hover::before,
.sprite_icon.w30.hover_arrow_left:active::before {
background-position-y: -60px;
}
.sprite_icon.flag.w30.arrow_left:hover::before,
.sprite_icon.flag.w30.arrow_left.active::before {
background-position: -22.5px -45px;
}
.sprite_icon.arrow_left.w25::before {
background-position-y: -50px;
}
.sprite_icon.w25.hover_arrow_left:hover::before,
.sprite_icon.w25.hover_arrow_left:active::before {
background-position-y: -50px;
}
.sprite_icon.flag.w25.arrow_left:hover::before,
.sprite_icon.flag.w25.arrow_left.active::before {
background-position: -18.75px -37.5px;
}
.sprite_icon.arrow_left.w20::before {
background-position-y: -40px;
}
.sprite_icon.w20.hover_arrow_left:hover::before,
.sprite_icon.w20.hover_arrow_left:active::before {
background-position-y: -40px;
}
.sprite_icon.flag.w20.arrow_left:hover::before,
.sprite_icon.flag.w20.arrow_left.active::before {
background-position: -15px -30px;
}
.sprite_icon.arrow_left.w16::before {
background-position-y: -32px;
}
.sprite_icon.w16.hover_arrow_left:hover::before,
.sprite_icon.w16.hover_arrow_left:active::before {
background-position-y: -32px;
}
.sprite_icon.flag.w16.arrow_left:hover::before,
.sprite_icon.flag.w16.arrow_left.active::before {
background-position: -12px -24px;
}
.sprite_icon.arrow_right.w30::before {
background-position-y: -90px;
}
.sprite_icon.w30.hover_arrow_right:hover::before,
.sprite_icon.w30.hover_arrow_right:active::before {
background-position-y: -90px;
}
.sprite_icon.flag.w30.arrow_right:hover::before,
.sprite_icon.flag.w30.arrow_right.active::before {
background-position: -22.5px -67.5px;
}
.sprite_icon.arrow_right.w25::before {
background-position-y: -75px;
}
.sprite_icon.w25.hover_arrow_right:hover::before,
.sprite_icon.w25.hover_arrow_right:active::before {
background-position-y: -75px;
}
.sprite_icon.flag.w25.arrow_right:hover::before,
.sprite_icon.flag.w25.arrow_right.active::before {
background-position: -18.75px -56.25px;
}
.sprite_icon.arrow_right.w20::before {
background-position-y: -60px;
}
.sprite_icon.w20.hover_arrow_right:hover::before,
.sprite_icon.w20.hover_arrow_right:active::before {
background-position-y: -60px;
}
.sprite_icon.flag.w20.arrow_right:hover::before,
.sprite_icon.flag.w20.arrow_right.active::before {
background-position: -15px -45px;
}
.sprite_icon.arrow_right.w16::before {
background-position-y: -48px;
}
.sprite_icon.w16.hover_arrow_right:hover::before,
.sprite_icon.w16.hover_arrow_right:active::before {
background-position-y: -48px;
}
.sprite_icon.flag.w16.arrow_right:hover::before,
.sprite_icon.flag.w16.arrow_right.active::before {
background-position: -12px -36px;
}
.sprite_icon.close_x.w30::before {
background-position-y: -120px;
}
.sprite_icon.w30.hover_close_x:hover::before,
.sprite_icon.w30.hover_close_x:active::before {
background-position-y: -120px;
}
.sprite_icon.flag.w30.close_x:hover::before,
.sprite_icon.flag.w30.close_x.active::before {
background-position: -22.5px -90px;
}
.sprite_icon.close_x.w25::before {
background-position-y: -100px;
}
.sprite_icon.w25.hover_close_x:hover::before,
.sprite_icon.w25.hover_close_x:active::before {
background-position-y: -100px;
}
.sprite_icon.flag.w25.close_x:hover::before,
.sprite_icon.flag.w25.close_x.active::before {
background-position: -18.75px -75px;
}
.sprite_icon.close_x.w20::before {
background-position-y: -80px;
}
.sprite_icon.w20.hover_close_x:hover::before,
.sprite_icon.w20.hover_close_x:active::before {
background-position-y: -80px;
}
.sprite_icon.flag.w20.close_x:hover::before,
.sprite_icon.flag.w20.close_x.active::before {
background-position: -15px -60px;
}
.sprite_icon.close_x.w16::before {
background-position-y: -64px;
}
.sprite_icon.w16.hover_close_x:hover::before,
.sprite_icon.w16.hover_close_x:active::before {
background-position-y: -64px;
}
.sprite_icon.flag.w16.close_x:hover::before,
.sprite_icon.flag.w16.close_x.active::before {
background-position: -12px -48px;
}
.sprite_icon.x_checkbox.w30::before {
background-position-y: -150px;
}
.sprite_icon.w30.hover_x_checkbox:hover::before,
.sprite_icon.w30.hover_x_checkbox:active::before {
background-position-y: -150px;
}
.sprite_icon.flag.w30.x_checkbox:hover::before,
.sprite_icon.flag.w30.x_checkbox.active::before {
background-position: -22.5px -112.5px;
}
.sprite_icon.x_checkbox.w25::before {
background-position-y: -125px;
}
.sprite_icon.w25.hover_x_checkbox:hover::before,
.sprite_icon.w25.hover_x_checkbox:active::before {
background-position-y: -125px;
}
.sprite_icon.flag.w25.x_checkbox:hover::before,
.sprite_icon.flag.w25.x_checkbox.active::before {
background-position: -18.75px -93.75px;
}
.sprite_icon.x_checkbox.w20::before {
background-position-y: -100px;
}
.sprite_icon.w20.hover_x_checkbox:hover::before,
.sprite_icon.w20.hover_x_checkbox:active::before {
background-position-y: -100px;
}
.sprite_icon.flag.w20.x_checkbox:hover::before,
.sprite_icon.flag.w20.x_checkbox.active::before {
background-position: -15px -75px;
}
.sprite_icon.x_checkbox.w16::before {
background-position-y: -80px;
}
.sprite_icon.w16.hover_x_checkbox:hover::before,
.sprite_icon.w16.hover_x_checkbox:active::before {
background-position-y: -80px;
}
.sprite_icon.flag.w16.x_checkbox:hover::before,
.sprite_icon.flag.w16.x_checkbox.active::before {
background-position: -12px -60px;
}
.sprite_icon.expand.w30::before {
background-position-y: -180px;
}
.sprite_icon.w30.hover_expand:hover::before,
.sprite_icon.w30.hover_expand:active::before {
background-position-y: -180px;
}
.sprite_icon.flag.w30.expand:hover::before,
.sprite_icon.flag.w30.expand.active::before {
background-position: -22.5px -135px;
}
.sprite_icon.expand.w25::before {
background-position-y: -150px;
}
.sprite_icon.w25.hover_expand:hover::before,
.sprite_icon.w25.hover_expand:active::before {
background-position-y: -150px;
}
.sprite_icon.flag.w25.expand:hover::before,
.sprite_icon.flag.w25.expand.active::before {
background-position: -18.75px -112.5px;
}
.sprite_icon.expand.w20::before {
background-position-y: -120px;
}
.sprite_icon.w20.hover_expand:hover::before,
.sprite_icon.w20.hover_expand:active::before {
background-position-y: -120px;
}
.sprite_icon.flag.w20.expand:hover::before,
.sprite_icon.flag.w20.expand.active::before {
background-position: -15px -90px;
}
.sprite_icon.expand.w16::before {
background-position-y: -96px;
}
.sprite_icon.w16.hover_expand:hover::before,
.sprite_icon.w16.hover_expand:active::before {
background-position-y: -96px;
}
.sprite_icon.flag.w16.expand:hover::before,
.sprite_icon.flag.w16.expand.active::before {
background-position: -12px -72px;
}
.sprite_icon.magnifying_glass.w30::before {
background-position-y: -210px;
}
.sprite_icon.w30.hover_magnifying_glass:hover::before,
.sprite_icon.w30.hover_magnifying_glass:active::before {
background-position-y: -210px;
}
.sprite_icon.flag.w30.magnifying_glass:hover::before,
.sprite_icon.flag.w30.magnifying_glass.active::before {
background-position: -22.5px -157.5px;
}
.sprite_icon.magnifying_glass.w25::before {
background-position-y: -175px;
}
.sprite_icon.w25.hover_magnifying_glass:hover::before,
.sprite_icon.w25.hover_magnifying_glass:active::before {
background-position-y: -175px;
}
.sprite_icon.flag.w25.magnifying_glass:hover::before,
.sprite_icon.flag.w25.magnifying_glass.active::before {
background-position: -18.75px -131.25px;
}
.sprite_icon.magnifying_glass.w20::before {
background-position-y: -140px;
}
.sprite_icon.w20.hover_magnifying_glass:hover::before,
.sprite_icon.w20.hover_magnifying_glass:active::before {
background-position-y: -140px;
}
.sprite_icon.flag.w20.magnifying_glass:hover::before,
.sprite_icon.flag.w20.magnifying_glass.active::before {
background-position: -15px -105px;
}
.sprite_icon.magnifying_glass.w16::before {
background-position-y: -112px;
}
.sprite_icon.w16.hover_magnifying_glass:hover::before,
.sprite_icon.w16.hover_magnifying_glass:active::before {
background-position-y: -112px;
}
.sprite_icon.flag.w16.magnifying_glass:hover::before,
.sprite_icon.flag.w16.magnifying_glass.active::before {
background-position: -12px -84px;
}
.sprite_icon.star_outline.w30::before {
background-position-y: -240px;
}
.sprite_icon.w30.hover_star_outline:hover::before,
.sprite_icon.w30.hover_star_outline:active::before {
background-position-y: -240px;
}
.sprite_icon.flag.w30.star_outline:hover::before,
.sprite_icon.flag.w30.star_outline.active::before {
background-position: -22.5px -180px;
}
.sprite_icon.star_outline.w25::before {
background-position-y: -200px;
}
.sprite_icon.w25.hover_star_outline:hover::before,
.sprite_icon.w25.hover_star_outline:active::before {
background-position-y: -200px;
}
.sprite_icon.flag.w25.star_outline:hover::before,
.sprite_icon.flag.w25.star_outline.active::before {
background-position: -18.75px -150px;
}
.sprite_icon.star_outline.w20::before {
background-position-y: -160px;
}
.sprite_icon.w20.hover_star_outline:hover::before,
.sprite_icon.w20.hover_star_outline:active::before {
background-position-y: -160px;
}
.sprite_icon.flag.w20.star_outline:hover::before,
.sprite_icon.flag.w20.star_outline.active::before {
background-position: -15px -120px;
}
.sprite_icon.star_outline.w16::before {
background-position-y: -128px;
}
.sprite_icon.w16.hover_star_outline:hover::before,
.sprite_icon.w16.hover_star_outline:active::before {
background-position-y: -128px;
}
.sprite_icon.flag.w16.star_outline:hover::before,
.sprite_icon.flag.w16.star_outline.active::before {
background-position: -12px -96px;
}
.sprite_icon.star_filled.w30::before {
background-position-y: -270px;
}
.sprite_icon.w30.hover_star_filled:hover::before,
.sprite_icon.w30.hover_star_filled:active::before {
background-position-y: -270px;
}
.sprite_icon.flag.w30.star_filled:hover::before,
.sprite_icon.flag.w30.star_filled.active::before {
background-position: -22.5px -202.5px;
}
.sprite_icon.star_filled.w25::before {
background-position-y: -225px;
}
.sprite_icon.w25.hover_star_filled:hover::before,
.sprite_icon.w25.hover_star_filled:active::before {
background-position-y: -225px;
}
.sprite_icon.flag.w25.star_filled:hover::before,
.sprite_icon.flag.w25.star_filled.active::before {
background-position: -18.75px -168.75px;
}
.sprite_icon.star_filled.w20::before {
background-position-y: -180px;
}
.sprite_icon.w20.hover_star_filled:hover::before,
.sprite_icon.w20.hover_star_filled:active::before {
background-position-y: -180px;
}
.sprite_icon.flag.w20.star_filled:hover::before,
.sprite_icon.flag.w20.star_filled.active::before {
background-position: -15px -135px;
}
.sprite_icon.star_filled.w16::before {
background-position-y: -144px;
}
.sprite_icon.w16.hover_star_filled:hover::before,
.sprite_icon.w16.hover_star_filled:active::before {
background-position-y: -144px;
}
.sprite_icon.flag.w16.star_filled:hover::before,
.sprite_icon.flag.w16.star_filled.active::before {
background-position: -12px -108px;
}
.sprite_icon.accessibility.w30::before {
background-position-y: -300px;
}
.sprite_icon.w30.hover_accessibility:hover::before,
.sprite_icon.w30.hover_accessibility:active::before {
background-position-y: -300px;
}
.sprite_icon.flag.w30.accessibility:hover::before,
.sprite_icon.flag.w30.accessibility.active::before {
background-position: -22.5px -225px;
}
.sprite_icon.accessibility.w25::before {
background-position-y: -250px;
}
.sprite_icon.w25.hover_accessibility:hover::before,
.sprite_icon.w25.hover_accessibility:active::before {
background-position-y: -250px;
}
.sprite_icon.flag.w25.accessibility:hover::before,
.sprite_icon.flag.w25.accessibility.active::before {
background-position: -18.75px -187.5px;
}
.sprite_icon.accessibility.w20::before {
background-position-y: -200px;
}
.sprite_icon.w20.hover_accessibility:hover::before,
.sprite_icon.w20.hover_accessibility:active::before {
background-position-y: -200px;
}
.sprite_icon.flag.w20.accessibility:hover::before,
.sprite_icon.flag.w20.accessibility.active::before {
background-position: -15px -150px;
}
.sprite_icon.accessibility.w16::before {
background-position-y: -160px;
}
.sprite_icon.w16.hover_accessibility:hover::before,
.sprite_icon.w16.hover_accessibility:active::before {
background-position-y: -160px;
}
.sprite_icon.flag.w16.accessibility:hover::before,
.sprite_icon.flag.w16.accessibility.active::before {
background-position: -12px -120px;
}
.sprite_icon.bicycle.w30::before {
background-position-y: -330px;
}
.sprite_icon.w30.hover_bicycle:hover::before,
.sprite_icon.w30.hover_bicycle:active::before {
background-position-y: -330px;
}
.sprite_icon.flag.w30.bicycle:hover::before,
.sprite_icon.flag.w30.bicycle.active::before {
background-position: -22.5px -247.5px;
}
.sprite_icon.bicycle.w25::before {
background-position-y: -275px;
}
.sprite_icon.w25.hover_bicycle:hover::before,
.sprite_icon.w25.hover_bicycle:active::before {
background-position-y: -275px;
}
.sprite_icon.flag.w25.bicycle:hover::before,
.sprite_icon.flag.w25.bicycle.active::before {
background-position: -18.75px -206.25px;
}
.sprite_icon.bicycle.w20::before {
background-position-y: -220px;
}
.sprite_icon.w20.hover_bicycle:hover::before,
.sprite_icon.w20.hover_bicycle:active::before {
background-position-y: -220px;
}
.sprite_icon.flag.w20.bicycle:hover::before,
.sprite_icon.flag.w20.bicycle.active::before {
background-position: -15px -165px;
}
.sprite_icon.bicycle.w16::before {
background-position-y: -176px;
}
.sprite_icon.w16.hover_bicycle:hover::before,
.sprite_icon.w16.hover_bicycle:active::before {
background-position-y: -176px;
}
.sprite_icon.flag.w16.bicycle:hover::before,
.sprite_icon.flag.w16.bicycle.active::before {
background-position: -12px -132px;
}
.sprite_icon.asterisk.w30::before {
background-position-y: -360px;
}
.sprite_icon.w30.hover_asterisk:hover::before,
.sprite_icon.w30.hover_asterisk:active::before {
background-position-y: -360px;
}
.sprite_icon.flag.w30.asterisk:hover::before,
.sprite_icon.flag.w30.asterisk.active::before {
background-position: -22.5px -270px;
}
.sprite_icon.asterisk.w25::before {
background-position-y: -300px;
}
.sprite_icon.w25.hover_asterisk:hover::before,
.sprite_icon.w25.hover_asterisk:active::before {
background-position-y: -300px;
}
.sprite_icon.flag.w25.asterisk:hover::before,
.sprite_icon.flag.w25.asterisk.active::before {
background-position: -18.75px -225px;
}
.sprite_icon.asterisk.w20::before {
background-position-y: -240px;
}
.sprite_icon.w20.hover_asterisk:hover::before,
.sprite_icon.w20.hover_asterisk:active::before {
background-position-y: -240px;
}
.sprite_icon.flag.w20.asterisk:hover::before,
.sprite_icon.flag.w20.asterisk.active::before {
background-position: -15px -180px;
}
.sprite_icon.asterisk.w16::before {
background-position-y: -192px;
}
.sprite_icon.w16.hover_asterisk:hover::before,
.sprite_icon.w16.hover_asterisk:active::before {
background-position-y: -192px;
}
.sprite_icon.flag.w16.asterisk:hover::before,
.sprite_icon.flag.w16.asterisk.active::before {
background-position: -12px -144px;
}
.sprite_icon.checkbox.w30::before {
background-position-y: -390px;
}
.sprite_icon.w30.hover_checkbox:hover::before,
.sprite_icon.w30.hover_checkbox:active::before {
background-position-y: -390px;
}
.sprite_icon.flag.w30.checkbox:hover::before,
.sprite_icon.flag.w30.checkbox.active::before {
background-position: -22.5px -292.5px;
}
.sprite_icon.checkbox.w25::before {
background-position-y: -325px;
}
.sprite_icon.w25.hover_checkbox:hover::before,
.sprite_icon.w25.hover_checkbox:active::before {
background-position-y: -325px;
}
.sprite_icon.flag.w25.checkbox:hover::before,
.sprite_icon.flag.w25.checkbox.active::before {
background-position: -18.75px -243.75px;
}
.sprite_icon.checkbox.w20::before {
background-position-y: -260px;
}
.sprite_icon.w20.hover_checkbox:hover::before,
.sprite_icon.w20.hover_checkbox:active::before {
background-position-y: -260px;
}
.sprite_icon.flag.w20.checkbox:hover::before,
.sprite_icon.flag.w20.checkbox.active::before {
background-position: -15px -195px;
}
.sprite_icon.checkbox.w16::before {
background-position-y: -208px;
}
.sprite_icon.w16.hover_checkbox:hover::before,
.sprite_icon.w16.hover_checkbox:active::before {
background-position-y: -208px;
}
.sprite_icon.flag.w16.checkbox:hover::before,
.sprite_icon.flag.w16.checkbox.active::before {
background-position: -12px -156px;
}
.sprite_icon.lock.w30::before {
background-position-y: -420px;
}
.sprite_icon.w30.hover_lock:hover::before,
.sprite_icon.w30.hover_lock:active::before {
background-position-y: -420px;
}
.sprite_icon.flag.w30.lock:hover::before,
.sprite_icon.flag.w30.lock.active::before {
background-position: -22.5px -315px;
}
.sprite_icon.lock.w25::before {
background-position-y: -350px;
}
.sprite_icon.w25.hover_lock:hover::before,
.sprite_icon.w25.hover_lock:active::before {
background-position-y: -350px;
}
.sprite_icon.flag.w25.lock:hover::before,
.sprite_icon.flag.w25.lock.active::before {
background-position: -18.75px -262.5px;
}
.sprite_icon.lock.w20::before {
background-position-y: -280px;
}
.sprite_icon.w20.hover_lock:hover::before,
.sprite_icon.w20.hover_lock:active::before {
background-position-y: -280px;
}
.sprite_icon.flag.w20.lock:hover::before,
.sprite_icon.flag.w20.lock.active::before {
background-position: -15px -210px;
}
.sprite_icon.lock.w16::before {
background-position-y: -224px;
}
.sprite_icon.w16.hover_lock:hover::before,
.sprite_icon.w16.hover_lock:active::before {
background-position-y: -224px;
}
.sprite_icon.flag.w16.lock:hover::before,
.sprite_icon.flag.w16.lock.active::before {
background-position: -12px -168px;
}
.sprite_icon.delete.w30::before {
background-position-y: -450px;
}
.sprite_icon.w30.hover_delete:hover::before,
.sprite_icon.w30.hover_delete:active::before {
background-position-y: -450px;
}
.sprite_icon.flag.w30.delete:hover::before,
.sprite_icon.flag.w30.delete.active::before {
background-position: -22.5px -337.5px;
}
.sprite_icon.delete.w25::before {
background-position-y: -375px;
}
.sprite_icon.w25.hover_delete:hover::before,
.sprite_icon.w25.hover_delete:active::before {
background-position-y: -375px;
}
.sprite_icon.flag.w25.delete:hover::before,
.sprite_icon.flag.w25.delete.active::before {
background-position: -18.75px -281.25px;
}
.sprite_icon.delete.w20::before {
background-position-y: -300px;
}
.sprite_icon.w20.hover_delete:hover::before,
.sprite_icon.w20.hover_delete:active::before {
background-position-y: -300px;
}
.sprite_icon.flag.w20.delete:hover::before,
.sprite_icon.flag.w20.delete.active::before {
background-position: -15px -225px;
}
.sprite_icon.delete.w16::before {
background-position-y: -240px;
}
.sprite_icon.w16.hover_delete:hover::before,
.sprite_icon.w16.hover_delete:active::before {
background-position-y: -240px;
}
.sprite_icon.flag.w16.delete:hover::before,
.sprite_icon.flag.w16.delete.active::before {
background-position: -12px -180px;
}
.sprite_icon.error.w30::before {
background-position-y: -480px;
}
.sprite_icon.w30.hover_error:hover::before,
.sprite_icon.w30.hover_error:active::before {
background-position-y: -480px;
}
.sprite_icon.flag.w30.error:hover::before,
.sprite_icon.flag.w30.error.active::before {
background-position: -22.5px -360px;
}
.sprite_icon.error.w25::before {
background-position-y: -400px;
}
.sprite_icon.w25.hover_error:hover::before,
.sprite_icon.w25.hover_error:active::before {
background-position-y: -400px;
}
.sprite_icon.flag.w25.error:hover::before,
.sprite_icon.flag.w25.error.active::before {
background-position: -18.75px -300px;
}
.sprite_icon.error.w20::before {
background-position-y: -320px;
}
.sprite_icon.w20.hover_error:hover::before,
.sprite_icon.w20.hover_error:active::before {
background-position-y: -320px;
}
.sprite_icon.flag.w20.error:hover::before,
.sprite_icon.flag.w20.error.active::before {
background-position: -15px -240px;
}
.sprite_icon.error.w16::before {
background-position-y: -256px;
}
.sprite_icon.w16.hover_error:hover::before,
.sprite_icon.w16.hover_error:active::before {
background-position-y: -256px;
}
.sprite_icon.flag.w16.error:hover::before,
.sprite_icon.flag.w16.error.active::before {
background-position: -12px -192px;
}
.sprite_icon.edit.w30::before {
background-position-y: -510px;
}
.sprite_icon.w30.hover_edit:hover::before,
.sprite_icon.w30.hover_edit:active::before {
background-position-y: -510px;
}
.sprite_icon.flag.w30.edit:hover::before,
.sprite_icon.flag.w30.edit.active::before {
background-position: -22.5px -382.5px;
}
.sprite_icon.edit.w25::before {
background-position-y: -425px;
}
.sprite_icon.w25.hover_edit:hover::before,
.sprite_icon.w25.hover_edit:active::before {
background-position-y: -425px;
}
.sprite_icon.flag.w25.edit:hover::before,
.sprite_icon.flag.w25.edit.active::before {
background-position: -18.75px -318.75px;
}
.sprite_icon.edit.w20::before {
background-position-y: -340px;
}
.sprite_icon.w20.hover_edit:hover::before,
.sprite_icon.w20.hover_edit:active::before {
background-position-y: -340px;
}
.sprite_icon.flag.w20.edit:hover::before,
.sprite_icon.flag.w20.edit.active::before {
background-position: -15px -255px;
}
.sprite_icon.edit.w16::before {
background-position-y: -272px;
}
.sprite_icon.w16.hover_edit:hover::before,
.sprite_icon.w16.hover_edit:active::before {
background-position-y: -272px;
}
.sprite_icon.flag.w16.edit:hover::before,
.sprite_icon.flag.w16.edit.active::before {
background-position: -12px -204px;
}
.sprite_icon.info.w30::before {
background-position-y: -540px;
}
.sprite_icon.w30.hover_info:hover::before,
.sprite_icon.w30.hover_info:active::before {
background-position-y: -540px;
}
.sprite_icon.flag.w30.info:hover::before,
.sprite_icon.flag.w30.info.active::before {
background-position: -22.5px -405px;
}
.sprite_icon.info.w25::before {
background-position-y: -450px;
}
.sprite_icon.w25.hover_info:hover::before,
.sprite_icon.w25.hover_info:active::before {
background-position-y: -450px;
}
.sprite_icon.flag.w25.info:hover::before,
.sprite_icon.flag.w25.info.active::before {
background-position: -18.75px -337.5px;
}
.sprite_icon.info.w20::before {
background-position-y: -360px;
}
.sprite_icon.w20.hover_info:hover::before,
.sprite_icon.w20.hover_info:active::before {
background-position-y: -360px;
}
.sprite_icon.flag.w20.info:hover::before,
.sprite_icon.flag.w20.info.active::before {
background-position: -15px -270px;
}
.sprite_icon.info.w16::before {
background-position-y: -288px;
}
.sprite_icon.w16.hover_info:hover::before,
.sprite_icon.w16.hover_info:active::before {
background-position-y: -288px;
}
.sprite_icon.flag.w16.info:hover::before,
.sprite_icon.flag.w16.info.active::before {
background-position: -12px -216px;
}
.sprite_icon.marker.w30::before {
background-position-y: -570px;
}
.sprite_icon.w30.hover_marker:hover::before,
.sprite_icon.w30.hover_marker:active::before {
background-position-y: -570px;
}
.sprite_icon.flag.w30.marker:hover::before,
.sprite_icon.flag.w30.marker.active::before {
background-position: -22.5px -427.5px;
}
.sprite_icon.marker.w25::before {
background-position-y: -475px;
}
.sprite_icon.w25.hover_marker:hover::before,
.sprite_icon.w25.hover_marker:active::before {
background-position-y: -475px;
}
.sprite_icon.flag.w25.marker:hover::before,
.sprite_icon.flag.w25.marker.active::before {
background-position: -18.75px -356.25px;
}
.sprite_icon.marker.w20::before {
background-position-y: -380px;
}
.sprite_icon.w20.hover_marker:hover::before,
.sprite_icon.w20.hover_marker:active::before {
background-position-y: -380px;
}
.sprite_icon.flag.w20.marker:hover::before,
.sprite_icon.flag.w20.marker.active::before {
background-position: -15px -285px;
}
.sprite_icon.marker.w16::before {
background-position-y: -304px;
}
.sprite_icon.w16.hover_marker:hover::before,
.sprite_icon.w16.hover_marker:active::before {
background-position-y: -304px;
}
.sprite_icon.flag.w16.marker:hover::before,
.sprite_icon.flag.w16.marker.active::before {
background-position: -12px -228px;
}
.sprite_icon.clock.w30::before {
background-position-y: -600px;
}
.sprite_icon.w30.hover_clock:hover::before,
.sprite_icon.w30.hover_clock:active::before {
background-position-y: -600px;
}
.sprite_icon.flag.w30.clock:hover::before,
.sprite_icon.flag.w30.clock.active::before {
background-position: -22.5px -450px;
}
.sprite_icon.clock.w25::before {
background-position-y: -500px;
}
.sprite_icon.w25.hover_clock:hover::before,
.sprite_icon.w25.hover_clock:active::before {
background-position-y: -500px;
}
.sprite_icon.flag.w25.clock:hover::before,
.sprite_icon.flag.w25.clock.active::before {
background-position: -18.75px -375px;
}
.sprite_icon.clock.w20::before {
background-position-y: -400px;
}
.sprite_icon.w20.hover_clock:hover::before,
.sprite_icon.w20.hover_clock:active::before {
background-position-y: -400px;
}
.sprite_icon.flag.w20.clock:hover::before,
.sprite_icon.flag.w20.clock.active::before {
background-position: -15px -300px;
}
.sprite_icon.clock.w16::before {
background-position-y: -320px;
}
.sprite_icon.w16.hover_clock:hover::before,
.sprite_icon.w16.hover_clock:active::before {
background-position-y: -320px;
}
.sprite_icon.flag.w16.clock:hover::before,
.sprite_icon.flag.w16.clock.active::before {
background-position: -12px -240px;
}
.sprite_icon.calendar.w30::before {
background-position-y: -630px;
}
.sprite_icon.w30.hover_calendar:hover::before,
.sprite_icon.w30.hover_calendar:active::before {
background-position-y: -630px;
}
.sprite_icon.flag.w30.calendar:hover::before,
.sprite_icon.flag.w30.calendar.active::before {
background-position: -22.5px -472.5px;
}
.sprite_icon.calendar.w25::before {
background-position-y: -525px;
}
.sprite_icon.w25.hover_calendar:hover::before,
.sprite_icon.w25.hover_calendar:active::before {
background-position-y: -525px;
}
.sprite_icon.flag.w25.calendar:hover::before,
.sprite_icon.flag.w25.calendar.active::before {
background-position: -18.75px -393.75px;
}
.sprite_icon.calendar.w20::before {
background-position-y: -420px;
}
.sprite_icon.w20.hover_calendar:hover::before,
.sprite_icon.w20.hover_calendar:active::before {
background-position-y: -420px;
}
.sprite_icon.flag.w20.calendar:hover::before,
.sprite_icon.flag.w20.calendar.active::before {
background-position: -15px -315px;
}
.sprite_icon.calendar.w16::before {
background-position-y: -336px;
}
.sprite_icon.w16.hover_calendar:hover::before,
.sprite_icon.w16.hover_calendar:active::before {
background-position-y: -336px;
}
.sprite_icon.flag.w16.calendar:hover::before,
.sprite_icon.flag.w16.calendar.active::before {
background-position: -12px -252px;
}
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
.accordion {
margin: 0;
padding: 0;
max-width: 1000px;
margin: 2rem auto;
}
.accordion:focus-within {
border-color: hsl(216, 94%, 43%);
}
.accordion {
/*
&:focus-within dt {
background-color: hsl(0deg 0% 97%);
}
*/
/*
&>*+* {
border-top: 1px solid hsl(0deg 0% 52%);
}
*/
}
.accordion dt {
margin: 0;
padding: 0;
background-color: transparent;
}
.accordion dt button {
/*
background: none;
color: hsl(0deg 0% 13%);
display: block;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 1em 1.5em;
position: relative;
text-align: left;
width: 100%;
outline: none;
border-style: none;
*/
text-align: left;
font-size: 1.25rem;
font-weight: 700;
background-color: transparent;
width: 100%;
position: relative;
display: block;
border: 0;
border-bottom: 1px dotted #E0E6E5;
color: #14253a;
padding: 10px 20px;
margin: 10px 0 0 0;
cursor: pointer;
}
.accordion dt button::before {
content: "";
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 50%;
bottom: 50%;
margin: auto 0;
right: 30px;
background-color: transparent;
background-image: url("../img/icons/icon_sprites.svg?v=20200310");
background-blend-mode: lighten;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 80px 480px;
background-position: 0px -352px;
}
.accordion dt button[aria-expanded=true] {
background-color: #F3F4F7;
border: 1px dotted #E0E6E5;
border-bottom: 0;
}
.accordion dt button[aria-expanded=true]::before {
background-position: 0px -368px;
}
.accordion dt button::-moz-focus-inner {
border: 0;
}
.accordion dt button:focus, .accordion dt button:hover {
background-color: #F3F4F7;
}
.accordion dt button :focus {
outline: 4px solid transparent;
}
.accordion dd {
margin: 0;
padding: 1em 1.5em;
background-color: #F3F4F733;
border: 1px dotted #E0E6E5;
border-top: 0;
}
.accordion {
/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
}
.accordion dd[hidden] {
display: none;
}
.accordion > *:first-child dt button,
.accordion > *:first-child {
border-radius: 5px 5px 0 0;
}
.accordion > *:last-child dt button,
.accordion > *:last-child {
border-radius: 0 0 5px 5px;
}
/*
.accordion-title {
display: block;
pointer-events: none;
border: transparent 2px solid;
border-radius: 5px;
padding: 0.25em;
outline: none;
}
dt button:focus .accordion-title {
border-color: hsl(216deg 94% 43%);
}
*/
/*
.accordion-icon {
border: solid currentcolor;
border-width: 0 2px 2px 0;
height: 0.5rem;
pointer-events: none;
position: absolute;
right: 2em;
top: 50%;
transform: translateY(-60%) rotate(45deg);
width: 0.5rem;
}
dt button:focus .accordion-icon,
dt button:hover .accordion-icon {
border-color: hsl(216deg 94% 43%);
}
dt button[aria-expanded="true"] .accordion-icon {
transform: translateY(-50%) rotate(-135deg);
}
*/
/*
Theme Name: mnKnow.net
Theme URI: http://www.mnknow.net/
Description: Custom theme for mnKnow.net (Minnesota Knowledge Network).
Author: Pounce
Author URI: http://www.pounce.com/
Version: 0.1
Tags: custom, pounce, mnknow.net
*/
ul.progress-bar {
list-style: none;
padding-inline-start: 0;
padding: 4rem 0;
margin: 0 auto;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
align-content: stretch;
width: 100%;
counter-reset: progressbar;
}
ul.progress-bar li {
display: block;
position: relative;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
margin: 0;
padding: 10px 1rem 0 1rem;
width: inherit;
text-align: center;
}
ul.progress-bar li::before {
content: "";
position: absolute;
height: 3px;
width: 100%;
top: -12px;
right: -50%;
background-color: #05DD4E;
z-index: 0;
}
ul.progress-bar li:last-child::before {
width: 0;
background-color: transparent;
display: none;
}
ul.progress-bar li::after {
content: "";
text-align: center;
line-height: 25px;
color: #fff;
width: 25px;
height: 25px;
display: block;
background-color: #05DD4E;
border-radius: 50%;
position: absolute;
left: calc(50% - 12px); /* subtract half width of indicator */
top: -24px;
}
ul.progress-bar li b {
display: block;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
}
ul.progress-bar li.complete::before, ul.progress-bar li.complete::after {
background-color: green;
}
ul.progress-bar li.complete::after {
content: "✓";
}
ul.progress-bar li.current::after, ul.progress-bar li.active::after {
content: "";
font-weight: bold;
background-color: white;
width: 17px;
height: 17px;
border: 4px solid dodgerblue;
}
ul.progress-bar.counter li::after {
counter-increment: progressbar;
content: counter(progressbar);
}
/* vertical / mobile version */
@media only screen and (max-width: 700px) {
/* make list vertical */
ul.progress-bar {
flex-direction: column;
padding: 4rem 0 2rem 25px;
padding-left: 25px;
margin: auto;
max-width: 500px;
}
ul.progress-bar li {
text-align: left;
padding: 0 0 3rem 10px;
}
ul.progress-bar li::before {
height: 100%;
width: 3px;
top: 15px;
left: -14px;
}
ul.progress-bar li::after {
width: 25px;
height: 25px;
top: 4px; /* subtract half width of indicator */
left: -25px;
}
ul.progress-bar li b {
text-align: left;
}
}
/*# sourceMappingURL=main.css.map */