/* Minification failed. Returning unminified contents.
(11,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1031: Expected selector, found '('
(15,5): run-time error CSS1025: Expected comma or open brace, found '('
(26,15): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(46,27): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(51,27): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(57,27): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(65,19): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(287,19): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(455,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(474,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(478,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(480,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(544,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(573,5): run-time error CSS1030: Expected identifier, found '.'
(573,20): run-time error CSS1031: Expected selector, found ')'
(573,20): run-time error CSS1025: Expected comma or open brace, found ')'
(582,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(600,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(754,25): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(773,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(796,25): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(799,69): run-time error CSS1046: Expect comma, found '0'
(799,75): run-time error CSS1046: Expect comma, found '/'
(799,94): run-time error CSS1046: Expect comma, found '113'
(799,102): run-time error CSS1046: Expect comma, found '/'
(799,121): run-time error CSS1046: Expect comma, found '167'
(799,129): run-time error CSS1046: Expect comma, found '/'
(799,148): run-time error CSS1046: Expect comma, found '209'
(799,156): run-time error CSS1046: Expect comma, found '/'
(799,175): run-time error CSS1046: Expect comma, found '212'
(799,182): run-time error CSS1046: Expect comma, found '/'
(799,202): run-time error CSS1046: Expect comma, found '224'
(799,209): run-time error CSS1046: Expect comma, found '/'
(799,229): run-time error CSS1046: Expect comma, found '206'
(799,235): run-time error CSS1046: Expect comma, found '/'
(799,256): run-time error CSS1046: Expect comma, found '173'
(799,262): run-time error CSS1046: Expect comma, found '/'
(799,283): run-time error CSS1046: Expect comma, found '123'
(799,289): run-time error CSS1046: Expect comma, found '/'
(799,310): run-time error CSS1046: Expect comma, found '78'
(799,315): run-time error CSS1046: Expect comma, found '/'
(799,336): run-time error CSS1046: Expect comma, found '3'
(799,341): run-time error CSS1046: Expect comma, found '/'
(842,25): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(861,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(885,25): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(905,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(971,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(1056,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(1083,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(1300,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1315,29): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1321,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1329,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1429,14): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color'
(1519,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(1538,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2004,35): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2009,35): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2057,25): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2877,37): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2896,19): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2898,72): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2899,46): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(2969,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3299,31): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3309,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3316,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3389,35): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3390,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3469,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3470,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3471,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3472,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3473,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3474,25): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(3476,24): run-time error CSS1039: Token not allowed after unary operator: '-color-four'
(3476,45): run-time error CSS1039: Token not allowed after unary operator: '-color-three'
(3476,69): run-time error CSS1039: Token not allowed after unary operator: '-color-four'
(3477,24): run-time error CSS1039: Token not allowed after unary operator: '-color-four'
(3477,45): run-time error CSS1039: Token not allowed after unary operator: '-color-three'
(3477,69): run-time error CSS1039: Token not allowed after unary operator: '-color-four'
(3478,24): run-time error CSS1039: Token not allowed after unary operator: '-color-four'
(3478,45): run-time error CSS1039: Token not allowed after unary operator: '-color-three'
(3478,69): run-time error CSS1039: Token not allowed after unary operator: '-color-four'
(3479,34): run-time error CSS1039: Token not allowed after unary operator: '-color-one'
(3479,54): run-time error CSS1039: Token not allowed after unary operator: '-color-two'
(3480,33): run-time error CSS1039: Token not allowed after unary operator: '-color-one'
(3480,53): run-time error CSS1039: Token not allowed after unary operator: '-color-two'
(3481,37): run-time error CSS1039: Token not allowed after unary operator: '-stop-one'
(3489,15): run-time error CSS1039: Token not allowed after unary operator: '-color-one'
(3489,38): run-time error CSS1039: Token not allowed after unary operator: '-color-two'
(3489,68): run-time error CSS1039: Token not allowed after unary operator: '-color-three'
(3489,99): run-time error CSS1039: Token not allowed after unary operator: '-color-four'
(3490,10): run-time error CSS1039: Token not allowed after unary operator: '-stop-one'
(3493,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3494,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3495,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3496,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3497,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3503,31): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3528,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3568,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3581,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3599,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(3915,1): run-time error CSS1019: Unexpected token, found 'var('
(3915,5): run-time error CSS1019: Unexpected token, found '-'
(3915,22): run-time error CSS1031: Expected selector, found ')'
(3915,22): run-time error CSS1025: Expected comma or open brace, found ')'
(3929,1): run-time error CSS1019: Unexpected token, found 'var('
(3929,5): run-time error CSS1019: Unexpected token, found '-'
(3929,22): run-time error CSS1031: Expected selector, found ')'
(3929,22): run-time error CSS1025: Expected comma or open brace, found ')'
(3932,1): run-time error CSS1019: Unexpected token, found 'var('
(3932,5): run-time error CSS1019: Unexpected token, found '-'
(3932,22): run-time error CSS1031: Expected selector, found ')'
(3932,22): run-time error CSS1025: Expected comma or open brace, found ')'
*/
/* We use the broadest, but also least specific, reset here. */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
:root {
--primary-color: #003e7e;
--secondary-color: #0a79bf;
}
img (
image-rendering: -webkit-optimize-contrast;
)
/* Link Styling */
a {
color: var(--secondary-color);
font-weight: bold;
}
a:hover {
color: var(--primary-color);
}
a[href^="mailto:"] {
font-family: 'Oswald', sans-serif;
font-weight:500;
}
a.modal.iframe, li>a.modal.iframe {
font-family: 'Oswald', sans-serif;
font-weight:500;
}
a:active, a:focus {
outline: 0;
}
a:focus {
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
}
a:focus img {
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
}
.footer-site-info a:focus {
filter: saturate(0.75);
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
}
/* Body definitions */
body {
text-align: left;
background: var(--primary-color);
font: 100%/1.45 Verdana, Geneva, Arial, Helvetica, sans-serif; /* Controls font style (size, font face, color) throughout website */
color: #333;
}
/* Image Styling */
/* List definitions */
ol, ul {
list-style: none;
}
/* Table definitions */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
/* Inline quotes and blockquotes */
q:before {
content: '"';
}
q:after {
content: '"';
}
blockquote, q {
quotes: '"' '"';
}
blockquote {
text-indent: -1ex;
margin: 20px;
color:#333;
}
/* Large pullquotes */
blockquote.big {
font-size: 1.5em;
line-height: 1.4em;
text-align: right;
color: #666;
quotes:'\201C' '\201D';
}
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
blockquote.big:before, blockquote.big:after {
font-family: Georgia, Serif;
font-size:1.8em;
}
/*The figure class is used on divs in a handful of CMS articles to do pullquotes and sidebar blockquotes*/
.figure {
display: block;
float: right;
padding: 0 0 0 10px;
margin: 0 0 10px 10px;
width: 260px;
border-left: 3px solid #ccc;
}
.figure p {
text-align: right;
padding-right:20px;
color:#666;
margin-top: 7px;
font-size: 0.90em;
}
.figure p:before {
content: "\2014\00a0";
}
/* Common formatting - for now, ignore this section from the old common, and see if we can do without it */
/* Share Tools - Print, Email, Facebook, Twitter
-----------------------------------------------------------------------------*/
div.article-content-holder div.share-utility-box ul.page-tools-b.list-type-2 {
float: right;
width: 75%;
padding: 0;
margin: 0;
}
div.article-content-holder div.share-utility-box ul.page-tools-b.list-type-2 li {
padding-bottom:0;
}
ul.page-tools-b {
list-style: none;
padding: 0;
margin: 0 !important;
}
@media (max-width: 500px) {
ul.page-tools-b {
display: inline-grid;
grid-gap: .5rem;
grid-template-columns: 1fr 1fr;
}
}
ul.page-tools-b li {
padding: 0 !important;
margin: 0;
display:inline;
float:left;
list-style-type:none;
}
ul.page-tools-b li a, ul.page-tools-b li a:visited {
color: #999;
font-size:0.9em;
display: block;
padding: 0px;
border-right: 1px dotted #ccc;
}
ul.page-tools-b li a.addthis_button_compact {
border-right: 0;
}
.addthis_default_style .at300b, .addthis_default_style .at300m {
margin: 0px 10px 0px 0px;
padding:0px 10px 0px 0px;
display:block;
float:none;
line-height:12px; /*Important for padding*/
}
.addthis_default_style .at15t_twitter, .addthis_default_style .at15t_print, .addthis_default_style .at15t_email, .addthis_default_style .at15t_facebook {
margin: 0px 5px 0 0;
padding:0px;
}
.addthis_default_style .at15t_compact {
padding:0 0.6em 0 0;
margin:0 0 0 0;
}
/* --------------- Definition Lists ------------------*/
article dl, #content-wrapper-wide dl, body.mceContentBody dl {
width:550px;
margin:0 0 1.8em 0;
margin-top: 10px;
margin-left: 30px;
}
article dt, #content-wrapper-wide dt, body.mceContentBody dt {
font-weight:bold;
color: #333;
font-size: 1.1em;
margin: 20px 0 3px;
}
article dt.indent, #content-wrapper-wide dt.indent, body.mceContentBody dt.indent
article dd.indent, #content-wrapper-wide dd.indent, body.mceContentBody dd.indent {
margin-left:30px;
}
article dl.indent, #content-wrapper-wide dl.indent, body.mceContentBody dl.indent {
margin-left:60px;
}
article dl.double-indent, #content-wrapper-wide dl.double-indent, body.mceContentBody dl.double-indent {
margin-left:90px;
}
article dd ul, #content-wrapper-wide dd ul, body.mceContentBody dd ul {
font-size:1em;
}
.isolate {
margin-top:20px;
}
/*
.section-cartridge dt { was, now */
.associated-records dt {
color: #333;
font-size: 1.3em;
margin: 20px 0 0;
}
.associated-records dl {
margin:0 20px;
font-weight:bold;
width: auto;
}
.detail-record dl {
font-weight:normal;
}
/*Temporary dumping ground to test things that will get moved elsewhere later*/
a.feedback-button {
font-family: 'Oswald', sans-serif;
font-size: 1.4rem;
letter-spacing: 0.05em;
text-transform: uppercase;
writing-mode: vertical-lr;
background-color: #003e73;
position: fixed;
top: 150px;
left: -2px;
z-index: 1000;
padding: 8px;
border: 2px solid white;
}
.promo920 {
padding: 3.75rem 2rem;
max-width: 80rem;
margin:auto;
}
.promo920 img {
width: 100%;
}
/*---------------------------------------------------------------------------
Link Bar
------------------------
- this section styles the home page buttons
- optional scripts and HTML for this on beta.wisconsinhistory.org
---------------------------------------------------------------------------*/
#link-bar {
background: var(--primary-color);
}
#link-bar > div {
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: top;
margin: 15px 0 0 20px;
}
#link-bar > div h1 {
color:#fff;
text-transform:uppercase;
padding-bottom: 3px;
}
#link-bar li {
margin-bottom:5px;
padding-bottom: 0px ;
}
#link-bar a, #link-bar a:link, #link-bar a:active, #link-bar a:visited, #link-bar a:hover, #link-bar a:focus {
color:#cacaca;
}
#link-bar a.disable:hover {
color:#666 !important;
text-decoration:none !important;
}
#link-bar a:hover {
text-decoration:underline;
}
.social-media li a {
background: url('/images/site/social-media-sprite-circle.png');
display: block;
width: 15px;
height: 15px;
padding: 0 0 0 26px;
}
.social-media li a.facebook {
background-position: 0px 0px;
}
.social-media li a.facebook:hover {
background-position: 0px -15px;
}
/* 23 */
.social-media li a.flickr {
background-position: -60px 0px;
}
.social-media li a.flickr:hover {
background-position: -60px -15px;
}
/* 46 */
.social-media li a.rss {
background-position: -120px 0px;
}
.social-media li a.rss:hover {
background-position: -120px -15px;
}
/* 69 */
.social-media li a.tumblr {
background-position: -180px 0px;
}
.social-media li a.tumblr:hover {
background-position: -180px -15px;
}
/* 92 */
.social-media li a.twitter {
background-position: -240px 0px;
}
.social-media li a.twitter:hover {
background-position: -240px -15px;
}
/* 116 */
.social-media li a.youtube {
background-position: -300px 0px;
}
.social-media li a.youtube:hover {
background-position: -300px -15px;
}
/* 142 */
.social-media li a.e-newsletter {
background-position: -360px 0px;
}
.social-media li a.e-newsletter:hover {
background-position: -360px -15px;
}
/* 164 */
.social-media li a.pinterest {
background-position: -420px 0px;
}
.social-media li a.pinterest:hover {
background-position: -420px -15px;
}
/*---------------------------------------------------------------------------
EXTRA
---------------------------------------------------------------------------*/
.buy-button {
/*background: url('/images/site/BUY-button.gif') no-repeat 0 0 transparent;*/
background: #ca6115 url('/images/site/box-orange-gradient.gif') top repeat-x;
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: top;
width: 60px;
height: 32px;
padding: 4px 0 0 12px;
margin: 10px 0 91px 20px;
outline: none;
border: none;
color: #fff;
font-family: Helvetica, Arial, Sans-serif, sans-serif;
letter-spacing: -0.02em;
font-weight: bold;
text-transform: uppercase;
font-size: 1.6em;
cursor: pointer;
}
div.record-purchase-info {
line-height: 1.3em;
margin: 0 0 20px 20px;
display: inline-block;
*zoom: 1;
*display: inline;
}
.full-record-disclaimer {
border: 1px solid #ccc;
padding: 1rem 1.5rem;
font-size: 1rem;
border-radius: 15px;
background: #f1f1f1;
}
.full-record-disclaimer h1 {
font-size: 1.3em;
font-weight: bold;
}
.full-record-disclaimer p {
line-height: 1.4em;
margin-bottom: 1em;
}
.vr-form {
width:49%;
display:inline-block;
}
.major-link {
display: inline-block;
padding: .5rem .75rem;
border: 3px solid var(--primary-color);
color: #003e73;
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 1.4rem;
line-height: 1.4rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: .25rem;
}
.reverse {
color: #ffffff;
border-color: #ffffff;
text-transform: uppercase;
}
a.reverse:hover {
text-decoration: underline;
color: var(--secondary-color);
}
a.major-link:hover, a.reverse.major-link:hover {
background: var(--secondary-color);
color: #fff;
border-color: var(--secondary-color);
text-decoration: none;
text-shadow: none;
box-shadow: none;
}
.minor-link { /* THIS A BAD STYLE */
display: inline-block;
padding: .25rem .75rem;
border: 3px solid #5c93b9; /*Brand Colors: light blue*/
color: #5c93b9;
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 1rem;
line-height: 1.4rem;
letter-spacing: 0.05em;
text-transform: uppercase;
width: auto;
}
.directions-link {
display: inline-block;
padding: 5px 15px;
border-style: solid;
border-width: 2px;
border-color: #8b8f4f; /*Brand Colors: Green*/
color: #8b8f4f;
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 1rem;
line-height: 1.4rem;
letter-spacing: 0.05em;
text-transform: uppercase;
width: auto;
}
.dark .major-link {
border-color: white;
color: white;
}
[type="submit"] {
padding: 5px 15px;
background-color: #ca6115;
background-image: linear-gradient(rgba(102,102,102,0.35), transparent 50%);
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 500;
letter-spacing: 0.05em;
}
[type="submit"]:hover {
background-image: linear-gradient(transparent 50%, rgba(102,102,102,0.35));
}
.primary-action-button {
background-color: #ca6115;
font-size: 1.4rem;
line-height: 1.4rem;
text-transform: uppercase;
}
.secondary-action-button {
background-color: var(--primary-color);
font-size: 1rem;
vertical-align: bottom;
padding: 0 15px;
}
.card {
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
background: #fff; min-height: 200px;
padding: 1.5rem;
margin-bottom: 1rem;
}
/* Some homepage code that needs a media query Must figure out better solution*/
#primary {
grid-column: span 2;
}
@media (max-width: 730px) {
#primary {
grid-column: span 1;
}
}
/* End of that nonsense */
/* More nonsense */
:is(.pumpkin, .vine)::before, :is(.pumpkin, .vine)::after {
content: '';
}
.showoff-box {
display: grid;
grid-template-columns: 1fr;
background-color: #3d0050;
@media (min-width: 500px) {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 750px) {
grid-template-columns: 1fr 1fr 1fr;
}
}
.pumpkin {
grid-row: 2;
place-self: center;
margin-top: 50px;
margin-bottom: 200px;
position: relative;
height: 1px;
width: 200px;
z-index: 2;
&:first-child {
display: none;
@media (min-width: 500px) {
display: block;
}
}
&:last-child {
display: none;
@media (min-width: 750px) {
display: block;
}
}
&::before {
position: absolute;
left: 87px;
top: -45px;
height: 50px;
width: 50px;
border-left: 25px solid saddlebrown;
border-top: 10px solid transparent;
border-top-left-radius: 35px 50px;
}
&::after {
position: absolute;
height: 175px;
width: 200px;
border-radius: 45%;
background-color: orange;
background-image:
/* eyes */
radial-gradient(ellipse at center, darkred 0%, darkred 40%, transparent 40%),
radial-gradient(ellipse at center, darkred 0%, darkred 40%, transparent 40%),
radial-gradient(ellipse at center, tomato 0%, tomato 40%, transparent 40%),
radial-gradient(ellipse at center, tomato 0%, tomato 40%, transparent 40%),
/* nose */
radial-gradient(ellipse at center, darkred 0%, darkred 40%, transparent 40%),
/* teeth */
linear-gradient(50deg, transparent 50%, orange 50%),
linear-gradient(-50deg, transparent 50%, orange 50%),
linear-gradient(50deg, transparent 50%, orange 50%),
linear-gradient(-50deg, transparent 50%, orange 50%),
linear-gradient(50deg, transparent 50%, tomato 50%),
linear-gradient(-50deg, transparent 50%, tomato 50%),
/* mouth */
radial-gradient(ellipse at center, white 0%, yellow 20%, transparent 40%),
radial-gradient(ellipse at top, brown 0%, brown 60%, transparent 60%),
radial-gradient(ellipse at top, tomato 0%, tomato 60%, transparent 60%),
radial-gradient(ellipse at center, transparent 0%, transparent 49%, tomato 49.5%, tomato 50.5%, transparent 51%)
;
background-size:
/* eyes */
50px 50px,
50px 50px,
50px 50px,
50px 50px,
/* nose */
50px 50px,
/* teeth */
20px 20px,
20px 20px,
20px 20px,
20px 20px,
20px 20px,
20px 20px,
/* mouth */
40px 60px,
150px 45px,
156px 46px,
180px 350px
;
background-position:
/* eyes */
40px 30px,
110px 30px,
37px 30px,
113px 30px,
/* nose */
75px 65px,
/* teeth */
50px 120px,
70px 120px,
110px 120px,
130px 120px,
108px 120px,
72px 120px,
/* mouth */
80px 110px,
25px 120px,
22px 120px,
10px -87.5px
;
background-repeat: no-repeat;
box-shadow: inset 5px 0 5px tomato, inset -5px 0 5px tomato;
animation: flicker 1s infinite alternate;
}
}
@keyframes flicker {
to {
background-size:
/* eyes */
50px 50px,
50px 50px,
50px 50px,
50px 50px,
/* nose */
50px 50px,
/* teeth */
20px 20px,
20px 20px,
20px 20px,
20px 20px,
20px 20px,
20px 20px,
/* mouth */
40px 50px,
150px 45px,
156px 46px,
180px 350px
;
background-position:
/* eyes */
40px 30px,
110px 30px,
37px 30px,
113px 30px,
/* nose */
75px 65px,
/* teeth */
50px 120px,
70px 120px,
110px 120px,
130px 120px,
108px 120px,
72px 120px,
/* mouth */
80px 120px,
25px 120px,
22px 120px,
10px -87.5px
;
}
}
.meteor-background {
animation: 30s falling-meteor linear infinite;
background-color: var(--secondary-color);
background-image:
linear-gradient(transparent 575px, white 575px),
url("data:image/svg+xml,"),
radial-gradient(closest-side at 50% 88%, green 112%, transparent 113%),
radial-gradient(closest-side at 50% 88%, darkgreen 112%, transparent 113%);
background-size:
100% 100%,
100% 2580px,
50% 52%,
50% 51%
;
background-position:
0 0,
0 0,
0 0,
50% 0
;
@media (max-width: 800px) {
background-size:
100% 100%,
200% 50%,
50% 51%,
50% 52%
;
}
@media (max-width: 600px) {
background-size:
100% 100%,
400% 50%,
50% 51%,
50% 52%
;
}
@media (prefers-reduced-motion) {
animation: unset;
}
}
.rainbow-background {
background-color: var(--secondary-color);
background-image:
linear-gradient(transparent 575px, white 575px),
radial-gradient(closest-side at 50% 50%, transparent 64%, rgb(115 0 110 / 0.6) 70%, rgb(40 113 250 / 0.8) 75%, rgb(31 167 240 / 0.8) 77%, rgb(33 209 162 / 0.9) 79%, rgb(55 212 60 / 0.9) 80%, rgb(126 224 72 / 0.9) 83%, rgb(252 206 3 / 0.95) 84%, rgb(252 173 3 / 0.95) 86%, rgb(252 123 3 / 0.98) 88%, rgb(252 78 3 / 0.98) 90%, rgb(252 3 57 / 0.98) 90%, transparent 98%),
radial-gradient(closest-side at 50% 88%, green 112%, transparent 113%),
radial-gradient(closest-side at 50% 88%, darkgreen 112%, transparent 113%),
url("data:image/svg+xml,");
background-size:
100% 100%,
1760px 1760px,
50% 52%,
50% 51%,
33% 40%;
background-position:
0 0,
50% 15%,
0 0,
50% 0,
0 -10%;
background-repeat:
no-repeat,
no-repeat,
repeat,
repeat,
repeat;
/* @media (max-width: 800px) {
background-size:
100% 100%,
200% 50%,
50% 51%,
50% 52%
;
}
@media (max-width: 600px) {
background-size:
100% 100%,
400% 50%,
50% 51%,
50% 52%
;
} */
}
.rainy-background {
animation: 1s falling-rain linear infinite;
background-color: var(--secondary-color);
background-image:
linear-gradient(transparent 575px, white 575px),
url("data:image/svg+xml,"),
radial-gradient(closest-side at 50% 88%, green 112%, transparent 113%),
radial-gradient(closest-side at 50% 88%, darkgreen 112%, transparent 113%);
background-size:
100% 100%,
50% 50%,
50% 52%,
50% 51%
;
background-position:
0 0,
0 0,
0 0,
50% 0
;
@media (max-width: 800px) {
background-size:
100% 100%,
200% 50%,
50% 51%,
50% 52%
;
}
@media (max-width: 600px) {
background-size:
100% 100%,
400% 50%,
50% 51%,
50% 52%
;
}
@media (prefers-reduced-motion) {
animation: unset;
}
}
.snowy-background {
animation: 30s drifting-snow linear infinite;
background-color: var(--secondary-color);
background-image:
linear-gradient(transparent 300px, white 575px),
radial-gradient(closest-side at 50% 88%, #eef 112%, transparent 113%),
radial-gradient(closest-side at 50% 88%, #ccd 112%, transparent 113%),
url("data:image/svg+xml,")
;
background-size:
100% 100%,
50% 52%,
50% 51%,
50% 50%
;
background-position:
0 0,
0 0,
50% 0,
0 0
;
@media (max-width: 800px) {
background-size:
100% 100%,
50% 52%,
50% 51%,
200% 50%
;
}
@media (max-width: 600px) {
background-size:
100% 100%,
50% 52%,
50% 51%,
400% 50%
;
}
@media (prefers-reduced-motion) {
animation: unset;
}
}
@keyframes drifting-snow {
to {
background-position:
0 0,
0 0,
50% 0,
0 100%
;
}
}
@keyframes falling-meteor {
to {
background-position:
0 0,
0 5160px,
0 0,
50% 0
;
}
}
@keyframes falling-rain {
to {
background-position:
0 0,
0 100%,
0 0,
50% 0
;
}
}
.howling-wolf {
background-image:
url('../../images/WisconsinAdventures/WisconsinAdventuresMainSprite.png');
width: 100%;
aspect-ratio: 1/1;
background-size: 207%;
background-position: center top;
background-repeat: no-repeat;
position: relative;
/* animation: 5s wolf-eye steps(1, end) infinite; */
@media (min-width: 500px) {
aspect-ratio: 2.1/1;
background-size: cover;
&::before {
animation: 10s tree-sway alternate ease-in-out infinite;
}
}
@media (prefers-reduced-motion) {
&::before {
animation: unset;
}
}
&::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-image: url('../../images/WisconsinAdventures/WisconsinAdventuresTreesCroppedAndShrunk.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transform-origin: bottom;
}
}
@keyframes tree-sway {
from {
transform: skewX(1deg);
}
to {
transform: skewX(-1deg);
}
}
@keyframes wolf-eye {
0% {
background-position: center bottom;
}
20%, 40%, 60%, 80% {
background-position: center top;
}
}
/* derived from Animate.css's tada animation */
.tada:hover {
animation: 3s tada;
}
@media (prefers-reduced-motion) {
.tada:hover {
animation: unset;
}
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,
20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.ghosty {
contain: layout;
&::before {
content: '👻';
position: absolute;
z-index: -1;
left: -1.3rem;
font-size: 3rem;
rotate: -10deg;
top: -1rem;
transition: top 1s;
}
@media (min-width: 600px) {
&::before {
left: 1.3rem;
rotate: unset;
top: 0;
}
}
&:hover::before {
top: -3rem;
}
}
.turkey {
contain: layout;
&::before {
content: '🦃';
position: absolute;
z-index: -1;
left: -1.3rem;
font-size: 3rem;
rotate: -10deg;
top: -1rem;
/*transition: top 1s;*/
}
@media (min-width: 600px) {
&::before {
left: 1.3rem;
rotate: unset;
top: 0;
}
}
@media not (prefers-reduced-motion) {
&:hover::before {
/*top: -3rem;*/
animation: 3.1s sneaky-peek ;
}
}
}
@keyframes sneaky-peek {
0%, 100% {
top: 0;
}
64.5% {
top: -2.7rem;
}
96.8% {
top: -2.7rem;
}
}
/*---------------------------------------------------------------------------
Framework
-------------
This section styles the page framework and grid for each template.
Current page templates include:
- article template (articles, collection items)
- search result template (search result pages)
- section page template (family and preserve pages)
----------------------------------------------------------------------------*/
.clear {
clear:both;
}
/* This is a bad clearfix, requiring an empty div, so look into getting rid of it */
.clear-fix {
clear:both;
font-size:1px;
text-indent:-2000em;
display: block;
height: 1px;
}
/*#container { Used to be #container, now it's...*/
body > section, body > header, body > nav {
max-width: 80rem;
text-align:left;
margin:auto;
}
body > footer {
margin: 4rem auto 0 auto;
background: #fff;
font-size: 16px; /* remove this eventually when I fix the font size general */
}
/* Header and branding content
----------------*/
#logo {
margin: .5rem;
}
#logo img {
width: fit-content;
}
body > header > h1 {
text-indent: -1000em;
display: none;
}
/* Styling for the "New" Navigation and Search */
body > header {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding: 0 .5rem;
}
nav#secondary-nav {
font-size: 70%;
margin-top: 1rem;
}
#logo img {max-width: 17rem;}
@media (max-width: 700px) {
div#banner-elements {
display: none;
}
}
@media (max-width: 850px) {
nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
nav#secondary-nav {
grid-column: span 3;
}
body > nav > .major-link {
height: 1.5rem;
padding: 5px;
}
}
@media (max-width: 480px) {
div#banner-elements {
display: none;
}
.alert {
margin-bottom: 1rem;
}
nav {
display: grid;
grid-template-columns: 1fr 1fr;
}
body > nav > .major-link {
margin: .5rem .5rem 0;
}
a#Membership, a#Donate {
grid-column: span 2;
}
nav#secondary-nav {
grid-column: span 2;
}
#search-section {
justify-self: center;
}
}
/* Might need to rethink this above section placement */
/* Footer */
/* Footer Links
-----------------------------------------------------------------------------*/
body > footer > p {
clear:both;
color: #e6e3d1;
margin: -10px auto 10px auto;
top: 40px;
text-align:center;
}
body > footer > ul {
clear:both;
list-style: none;
margin: 0 auto 50px auto;
text-align:center;
}
body > footer > ul > li {
display:inline;
}
body > footer > ul > li + li {
border-left: 1px solid #a69285;
}
body > footer > ul > li > a, body > footer > ul > li > a:link, body > footer > ul > li > a:visited, body > footer > ul > li > a:active {
color: #e6e3d1;
padding: 0 5px 0 8px;
text-decoration: none;
}
body > footer > ul > li > a:hover, body > footer > ul > li > a:focus {
text-decoration: underline;
color: #fff;
}
/*---------------------------------------------------------------------------
Footer Styling
------------------------
---------------------------------------------------------------------------*/
footer p {
color: #6D6E71;
}
footer {
font: 100%/1.45 Verdana, Geneva, Arial, Helvetica, sans-serif; /* Controls font style (size, font face, color) throughout website */
}
footer h3 {
margin-bottom: .25rem;
color: var(--primary-color);
font-weight: 100;
}
.condensed {
font-family: 'Oswald', sans-serif;
filter: opacity(0.85);
}
.footer-site-info a {
filter: saturate(0);
}
.thank-you-banner {
background-color: #fff;
outline: solid 2px var(--primary-color);
outline-offset: -2rem;
padding: 5rem;
text-align: center;
margin: 2rem auto 4rem;
max-width: 70rem;
color: var(--primary-color);
}
.thank-you-banner h3 {
font-family: 'Oswald', sans-serif;
font-size: 4.5rem;
margin-top: 3rem;
margin-bottom: 2.5rem;
color: var(--primary-color);
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2.5px;
line-height: 4.5rem;
}
.newsletter {
background: #003e73;
padding: 4rem;
margin: auto;
color: white;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.newsletter .title, .newsletter-email {
margin-inline-start: 1rem;
margin-inline-end: 1rem;
}
.newsletter h4 {
font-family: 'Oswald', sans-serif;
font-size: 2rem;
margin-bottom: .25rem;
margin-top: 0;
color: #fff;
line-height: 2rem;
}
.newsletter p {
color:white;
}
.newsletter-subscribe {
align-self: center;
}
.newsletter-email {
min-width: 15rem;
text-align: center;
align-self: center;
padding: 1rem;
background: rgba(255,255,255, .1);
margin-inline-end: 3rem;
}
.footer-site-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
margin: auto;
max-width: 80rem;
margin: 3rem auto 0;
}
.footer-site-info picture {
width: 8rem;
margin-inline-start: 1rem;
margin-inline-end: 1rem;
fill: #6D6E71;
filter: opacity(0.85);
}
.footer-site-info .list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 1rem;
grid-column:2/6;
}
.list li {
line-height: 1.5rem;
margin-bottom: .5rem;
}
.footer-lower {
grid-row-start: 3;
border-top: 1px solid rgba(0,0,0,.15);
grid-column: 1/6;
padding: 1rem;
margin-top: 1rem;
display: flex;
justify-content: space-between;
font-family: 'Open Sans Condensed', sans-serif;
}
.social-links {
grid-row: 2;
grid-column: 1/6;
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.social-links svg {
max-width: 3rem;
height: 1.5rem;
margin: 1rem;
fill: var(--secondary-color);
filter: saturate(0);
filter: opacity(.75);
}
.footer-lower p {
margin: 0 .5rem;
}
footer a:hover, .footer-site-info a:hover, .social-links a:hover, .social-links a:hover svg {
filter: opacity(1) saturate(1);
}
@media (max-width: 720px) {
.footer-site-info {
grid-template-columns: 1fr 1fr 1fr;
}
footer .list {
grid-column: 2/4;
grid-template-rows: repeat(2, 1fr);
}
.footer-lower {
flex-wrap: wrap;
}
.thank-you-banner h3 {
font-size: 3.25rem;
margin-bottom: 1rem;
line-height: 3.25rem;
}
.thank-you-banner p {
line-height: 1.5rem;
}
.newsletter {
padding: 2rem;
}
}
@media (max-width: 450px) {
.newsletter {
text-align:center;
}
.newsletter-email {
min-width: 10rem;
margin-inline-end: 0;
margin: auto;
}
.footer-site-info {
margin:auto;
padding: 1.5rem;
}
.footer-site-info picture {
margin-inline-start: 0;
width: 6rem;
}
.footer-lower {
display:block;
}
.footer-lower p {
margin: 0;
}
.condensed {
margin-top: 1rem;
}
.social-links {
justify-content: space-around;
}
.social-links svg {
margin: .5rem;
}
}
/* Page navigation */
body > nav {
background-color: var(--primary-color);
z-index: 800;
}
body > nav > * { /*div, body > nav > ul {*/
display: inline-block;
*zoom: 1;
*display: inline;
}
body > nav > .major-link {
border-color: white;
border-width: 1px;
box-shadow: 0 0 0 1px #00254b;
color: white;
margin-top: .5rem;
}
body > nav > .major-link:hover,
body > nav > .major-link:focus {
background-color: white;
box-shadow: 0 0 0 1px white;
color: var(--primary-color);
}
body > nav > .major-link {
margin-left: 0.6rem;
}
/* This is totally related, that's why it's here */
@media (min-width: 500px) {
[for="search-toggle"] {
float: right;
}
}
body > nav {
padding-top: 1em;
margin-bottom: 1rem;
}
body > nav > ul {
background: none repeat scroll 0 0 transparent;
color: #fff;
margin-left: 20px;
height: 32px;
line-height: 32px;
width: 270px;
}
.no-link-top a {
cursor: default;
margin:17px 0 0 40px;
}
.no-link a {
cursor: default;
}
/* Top banner
-----------------------------------------------------------------------------*/
.alert {
background: #eba900;
padding: 1rem;
/* display: flex; */
/* flex-wrap: wrap;
align-items: baseline;
justify-content: space-around; */
max-width: 2000px !important;
text-align: left;
}
.alert h2 {
font-size: 1.15rem;
padding: 5px;
}
.alert h3 {
font-weight: 400;
color: black;
font-size: 1.15rem;
flex-grow: 2;
padding: 5px;
}
.alert p {
padding: 5px;
}
#banner-elements {
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
justify-content: space-between;
align-items: baseline;
padding: 0 1rem;
}
#banner-elements p {
color:#ffffff;
}
/*.sites-dropdown-form { was, now...*/
#banner-elements select {
font-size: 13.333px; /* You're asking, what's this for? It returns default font size, at least for FF, GC, and IE */
}
#banner-elements a, #banner-elements a:link, #banner-elements a:hover, #banner-elements a:focus, #banner-elements a:active, #banner-elements a:visited {
color:#ffffff;
font-weight:bold;
text-decoration:underline;
}
#forward { /* FORWARD link */
padding: 0;
margin: 0;
position: absolute;
top: 0px;
right: -40px;
}
/* Accessiblity: Skip Navigation Link styles
---------------------------------------------------------------------------*/
#skip a, #skip a:hover, #skip a:visited {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#skip a:active, #skip a:focus {
position:static;
width:auto;
height:auto;
}
/* Content grid boxes for various pages
----------------------------------*/
/*#content { was, now... */
body > section {
background-color:#fff;
position: relative;
z-index:0;
overflow:hidden;
padding-bottom: 1rem;
}
#content-wrapper-wide {
margin:20px 40px 40px 40px;
padding:20px 0px;
}
#content-wrapper-article {
border-top:solid 1px #ccc;
border-bottom:solid 1px #bbb;
max-width:910px;
margin:20px 20px 20px 20px;
padding:0;
float:left;
position:relative;
left:5px;
overflow:hidden;
}
#content-wrapper-serp, #content-wrapper-category {
max-width:930px;
margin:13px 0px 0px 20px;
padding:0;
float:left;
position:relative;
left:5px;
}
#content-wrapper-category ul.dim-list {
margin-top:0;
}
.category-heading {
float:left;
margin-top:20px;
margin-bottom:10px;
}
.content-box-large {
float: left;
display: block;
width: 75%;
margin: 0;
padding: 0;
}
.right-nav-box {
float: right;
display: block;
width: 200px;
margin: 0;
padding: 0;
min-height:900px; /* Fits membership content - this will need to change. Need to research a fix for the IE 7 padding bug with previous approach - 29px left padding to overlap line. */
}
.bottom-nav-box {
float:left;
display: block;
width: 622px;
margin: 0 0 0 0px;
padding: 0 0 20px 40px;
}
.share-utility-box {
display: block;
max-width: 75%;
margin: 0 0 1rem 0px;
padding: 10px 0 5px 0;
border-top:1px dotted #ccc;
border-bottom:1px dotted #ccc;
}
@media (max-width: 670px) {
.share-utility-box {
max-width: 100%;
}
}
div.share-utility-box + p {
clear:both;
}
.at-icon-wrapper {
border-radius: 100%;
padding: .25rem;
margin-inline-end: .25rem;
}
.addthis_default_style .at300b, .addthis_default_style .at300m {
display: flex;
align-items: center;
}
ul.page-tools-b li a {
border-right:0;
}
#content-wrapper-wide .share-utility-box {
float: left;
}
.article-side-bar {
position: relative;
border-top:solid 1px #ccc;
border-bottom:solid 1px #bbb;
height: 100%;
right: 25px;
}
.container .article-content-holder {
max-width:680px; /* This width is for the CMS Preview. */
}
.results-list {
display: inline-block;
*zoom: 1;
*display: inline;
margin-left: 18px;
margin-top: 5px; /* was set at 17px, adjusted when removed old search tips message. */
vertical-align: top;
max-width: 75%;
}
.guided-navigation {
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: top;
width: 260px;
margin-left: 20px;
margin-top: 5px;
}
.search-questions {
max-width: 75%;
margin: 16px 0 20px 302px;
border: 1px solid #929496;
}
.search-questions > h1.help {
font-size: 18px;
font-size: 1.125rem;
padding: 0;
font-weight: bold;
line-height: 34px;
line-height: 2.125rem;
text-transform: none;
color: #fff;
}
.search-questions > p {
margin-left: 20px;
}
hr {
border:0;
background-color:#ccc;
text-align:left;
height:1px;
margin: 20px 0;
}
.w640 {
width:75%;
/*max-width:640px !important; messes up video on About page...*/
}
/* SECTION CARTRIDGE ADD-ON: dark (creates a grey background with white text)
--------------- */
.dark {
background-color:#5c5c5c;
color:#fff;
}
.dark a, .dark a:link, .dark a:visited, .dark a:hover, .dark a:focus, .dark a:active {
color: #fff !important;
font-weight:bold;
}
.dark p, .dark h2 {
color: #fff !important;
}
.right-related div.record-description p {
display:none;
}
/* SECTION CARTRIDGE ADD-ONS: Remove default border, remove default background
--------------*/
.no-border {
border:none !important;
padding:0px 1px !important;
margin-bottom:15px !important;
}
/* Hides aspects that are on the page for accessiblity reasons
------------------- */
.structural {
position:absolute;
left:-9999px;
}
/* carouFredSel styles
----------------------------------------*/
.image_carousel {
position: relative;
clear:both;
}
.image_carousel ul {
margin:0;
padding:0;
}
.image_carousel li {
background-color: white;
padding: 0;
margin:0;
display: block;
float: left;
}
.section-cartridge .image_carousel {
max-width:340px;
float:right;
margin-left:20px;
}
.section-cartridge .image_carousel li {
background-color: transparent;
}
div.image_carousel ul#property li a {
background:none !important;
padding-right: 13px;
}
div.article-content-holder .image_carousel li, div#content-wrapper-wide .image_carousel li, body.mceContentBody .image_carousel li {
padding-bottom:20px;
background-color:transparent;
}
.image_carousel img {
border: 1px solid #ccc;
}
.image_carousel li p {
padding: 0 0 0 9em;
text-align:center;
width:200px;
height:20px;
display: block;
font-size:2em;
}
/* carouFredSel styles for pagination - all styles below are from plugin
----------------------------------------*/
a.prev, a.next, a.play, a.pause {
background: url('/images/site/miscellaneous_sprite.png') no-repeat scroll 0 0 transparent;
display: block;
height: 60px;
position: absolute;
width: 60px;
}
a.prev, a.next {
top: 35px;
}
a.play, a.pause {
left: 50%;
margin-left: -22px;
top: 185px;
z-index: 200;
}
a.next {
right: -12px;
background-position: -80px -24px;
}
a.prev {
left: -20px;
background-position: -15px -24px;
}
a.prev:hover {
background-position: -15px -85px;
}
a.prev.disabled {
background-position: -15px -145px !important;
cursor: default;
}
a.next:hover {
background-position: -80px -85px;
}
a.next.disabled {
background-position: -80px -145px !important;
cursor: default;
}
a.play {
background-position: -100px 0;
}
a.play:hover {
background-position: -100px -50px;
}
a.play.disabled {
background-position: -100px -100px !important;
cursor: default;
}
a.pause {
background-position: -150px 0;
}
a.pause:hover {
background-position: -150px -50px;
}
a.pause.disabled {
background-position: -150px -100px !important;
cursor: default;
}
a.prev span, a.next span, a.play span, a.pause span {
display: none;
}
/* NHD CMS Homepage
----------------------------------------*/
.container
{
max-width: 100%;
}
.left-div
{
display: inline-block;
max-width: 50%;
text-align: left;
padding: 30px;
background-color: #ddd;
border-radius: 3px;
margin: 15px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 20%;
margin: 15px;
}
/*----------------------------------------------------
NHD CMS Page Top Navigation Layout using nav
----------------------------------------*/
/*nav
{
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
}*/
article.cms-article > nav > ul
{
overflow: hidden;
display: flex;
list-style: none;
margin: 0px;
padding-top:0px;
flex-direction: column;
background-color: #f1f1f1;
}
article.cms-article > nav > ul li
{
margin-bottom: 0px;
}
article.cms-article > nav > ul li a
{
display: block;
color: black;
padding: 14px 25px;
text-transform: uppercase;
font-size: 17px;
border-bottom: 3px solid transparent;
}
article.cms-article > nav > ul li a:hover
{
border-bottom: 3px solid var(--primary-color);
}
article.cms-article > nav > ul li a.active
{
border-bottom: 3px solid var(--primary-color);
}
@media (min-width: 1025px) {
article.cms-article > nav > ul
{
flex-direction: row;
justify-content: space-between;
}
}
.accordion-toggle {
cursor: pointer;
padding: 5px;
margin: 8px 0 16px 16px;
}
.accordion-content {
display: none;
padding: 6px 20px;
}
.accordion-content.default {
display: block;
padding: 6px 20px;
}
/* This is for dealing with ActiveCampaign's careless style tag injection
It wouldn't normally be a problem except it gets injected in places where
we're using * to set display, so we don't want to override the display none */
body style {
display: none !important;
}
.stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.stack > * + * {
margin-block-start: 1rem;
}
/*.article-content-holder { was, now... */
/*article {*/
.two-columns-one {
/*position: relative;
float: left;
display: block;
left: 25px;*/
border-right: 1px var(--primary-color) solid;
/*border-top: 1px #ccc solid;*/
padding: 1.5rem;
max-width: 75%;
/*margin-inline-start: 25px;*/
margin-bottom: 0;
min-height: 900px; /* Fits membership content - this will need to change. Need to research a fix for the IE 7 padding bug with previous approach - 29px left padding to overlap line. */
}
.two-columns-two {
/*border-top: 1px #ccc solid;*/
padding: 15px 0 0 15px;
width: 210px;
padding: 30px 20px 40px 20px;
}
[class*=two-columns] {
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: top;
/*margin-top: 30px;*/
}
[class*=one-column] {
margin: 20px 40px 40px 40px;
padding: 20px 0px;
}
[class*=one-column] .associated-records {
max-width: 75%;
}
[class*=three-columns] {
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: top;
margin-inline-start: 1.5rem;
margin-bottom: 1rem;
}
.three-columns-one, .three-columns-three {
width: 260px;
}
.three-columns-two {
max-width: 360px;
}
.three-columns-wide {
max-width: 75%;
}
.three-columns-full {
max-width: 80rem;
}
/* Sibling Selector-based Display
Basic *-column div sibling selector is 1rem top margin with 16px fallback
Current restriction is to keep top margin off side-by-side inline-block siblings*/
[class*=one-column] div + div, [class*=two-columns] div + div, [class*=three-columns] div + div {
margin-top: 16px;
margin-top: 1rem;
}
/* for ul elements that need their li's displayed as inline-blocks */
.inline-list {
list-style: none;
}
.inline-list li {
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: top;
}
.inline-list.three-per-row li {
width: 28%;
margin: 0;
}
@media (max-width: 670px) {
.two-columns-one {
margin-inline-start: 0;
padding: 1rem;
max-width: -webkit-fill-available;
}
}
/***************************************************************************
Type
This section styles all typography and article formatting.
Current formatting includes:
- headings
- paragraphs
- lists (bulleted, numbered, data lists)
- special items (quotes, blockquotes, cite, etc)
****************************************************************************/
/* --------------- PARAGRAPHS ------------------*/
p {
margin: 0 0 0.85rem 0;
font-size: 16px;
line-height: 1.25rem;
}
.article-content-holder p, .record-type-info p{
font-size:1rem;
line-height:1.75rem;
margin:0 0 1.25rem 0;
}
div.content-image-left p, .content-image-top p, div.content-image-right p {
padding: 0 2px 0px 7px !important;
margin-bottom:2px !important;
font-size:1rem !important;
clear:both;
}
.RecordContainer p {
line-height:1.25rem;
margin-bottom: 1rem;
}
.hanging-indent {
text-indent:-25px;
padding-left:25px;
}
/* --------------- HEADINGS ------------------*/
h1, h2, h3, h4, h5, h6, dt, .TitleText {
font-family: Arial, Helvetica, sans-serif;
letter-spacing:normal;
}
h1{
padding: 0 0 0.6rem 0;
margin: 0;
font-size: 2rem;
line-height:2.2rem;
font-weight:normal;
}
h2 {
padding: 0;
margin: 0;
font-size: 1.75rem;
font-weight:bold;
}
h3 {
font-size: 1.3rem;
line-height: 1.5rem;
color:#4B90D1;
font-weight:bold;
}
.article-content-holder h3, #content-wrapper-wide h3 {
font-size: 1.5rem;
}
h4 {
margin-top: 1.75rem;
margin-bottom: .5rem;
line-height: 1.4rem;
color:#666;
font-weight:bold;
font-size: 1.5rem;
}
#link-bar h1 {
font-size: 1.25rem;
line-height: 1.25rem;
color:#666;
font-weight:bold;
}
.article-content-holder h4 {
font-size: 1.4rem;
}
h5 { /* seen on collection item detail record pages */
font-size: 1.15rem;
font-weight: bold;
margin: 1rem 0 .5rem 0;
}
.article-content-holder h5, #content-wrapper-wide h5 {
font-size: 1.3rem;
}
h6 {
font-size: 1.1rem;
line-height: 1.2rem;
font-weight:bold;
padding-top:20px;
}
.article-content-holder h6 {
font-size:1.2rem;
}
/* ARTICLE, HOME, AND WIDE PAGE SUBHEAD PADDING */
.article-content-holder h2,
.article-content-holder h3, #content-wrapper-wide h3,
.article-content-holder h4, #content-wrapper-wide h4,
.article-content-holder h5, #content-wrapper-wide h5,
.article-content-holder h6 {
padding: .2rem 0 .4rem;
}
/* UNDERLINED HEADINGS */
.underline {
border-bottom: #80a6d3 solid 1px;
width:100%;
margin-bottom:10px;
}
.article-content-holder h2.underline,
.article-content-holder h5.underline {
padding: .6rem 0 0.12rem;
}
.article-content-holder h2.underline {
font-size: 1.8rem;
font-weight:normal;
}
/* UPPERCASE */
.box-two, ul.page-tools-b li, .right-related .TitleText {
text-transform: uppercase;
}
/* REMOVE BOLD */
.share-utility-box a {
font-weight: normal;
}
/* CUSTOM HEADINGS */
/*H2 Custom Headings
-----------------------------*/
.content-image-left h2, .content-image-top h2, .content-image-right h2 {
font-size: 1.07rem;
font-weight: bold;
padding: 10px 2px 2px 7px;
}
.content-image-left h2 a, .content-image-top h2 {
font-size:1.07rem;
}
/*H3 Custom Headings
-----------------------------*/
.RecordContainer h3, .RecordContainer table caption {
font-size: 1.25rem;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#000000;
padding: 1.6rem 0 0.2rem;
clear:both;
}
.RecordContainer h3:after, .RecordContainer table caption:after {
padding: 0px 0px 0px 10px;
content:url('/images/site/arrow.gif');
display:none;
}
.page-title h3:after, h3.color:after {
content:none !important;
padding:0 !important;
}
.RecordContainer h3.color, .RecordContainer table caption.color {
text-transform:none;
color:#4B90D1 !important;
clear:none;
padding:0 !important;
}
h3.subtitle {
color: #999999;
font-size: 1.6rem;
line-height: 1.6rem;
padding: 0 0 15px;
text-transform: none;
}
div.record-title h3 a, div.record-title h3 {
font-size:1.2rem;
padding-top:0;
text-transform:none;
}
div.record-title h3 a:visited {
/* doesn't work correctly color:#800080; */
color:#0033CC;
}
div.record-title h3 a:hover, div.record-title h3 a:focus {
text-decoration: underline;
}
div.record-title h3 a:active {
color: #ca6115;
}
.right-related .TitleText {
margin:-1px 0 0 0 !important;
background: #3f3f3f url('/images/site/box-type-one-section-gradient.gif') top repeat-x;
padding-left:20px !important;
border-bottom:1px solid #444 !important;
}
.right-related .TitleText {
background: #3f3f3f url('/images/site/box-type-one-section-gradient.gif') top repeat-x;
border:0 !important;
color:#fff !important;
font-weight: normal !important;
font-size: 1.1rem !important;
padding: 5px 0 5px 15px !important;
margin:15px 0 0 0 !important;
}
.right-nav-box div.record-title h3 a {
font-size:1.1rem !important;
}
/*H4 Custom Headings
-----------------------------*/
.page-title h4 {
font-size: 1.1rem;
color: #999;
text-transform: uppercase;
letter-spacing:normal;
font-weight: bold;
padding:0;
}
.record-title h4, .record-caption h4 {
padding-top:0.6rem;
text-transform: uppercase;
color:#999;
font-weight:bold;
}
/*H5 Custom Headings
------------------------------------*/
.arrow-list h5 {
font-size: 1.3rem;
}
.RecordContainer > header > .content-type {
text-transform: uppercase;
font-size: 1.1rem;
font-weight: bold;
color: #999;
}
/* This fills in for h3.subtitles; for CMS articles it's an h2 and for everything else it's div.collection-area */
.RecordContainer > header > .collection-area,
.RecordContainer > header > h2 {
text-transform: none;
font-size: 1.6rem;
font-weight: bold;
padding: 0 0 15px;
color: #999;
line-height: 1.6rem;
}
/* Links styles */
.browse-links
{
display: block;
width: 150px;
height: 35px;
background-color: #003D7D;
color: white;
box-sizing: border-box;
-moz-box-sizing: border-box;
text-align: center;
padding-top: 5px;
font-family: 'Didact Gothic', sans-serif;
text-transform: uppercase;
text-decoration: none;
border: 3px solid #B99E80;
font-weight: bold;
font-size: 13px;
}
/* Search bread crumbs
-----------------------------*/
#crumbs-bar {
margin: 13px 20px;
margin: 0.8rem 1.25rem;
}
#crumbs-bar > h1 {
position: absolute;
left: -1000px;
}
#crumbs-bar > ul > li {
display: inline-block;
*zoom: 1;
*display: inline;
color: #333;
font-size: 0.95rem;
padding: 4px 10px 4px 7px;
border: 1px solid #ccc;
}
#crumbs-bar > ul > li:last-child {
border: none;
}
#crumbs-bar > ul > li + li {
margin-inline-start: 0.5rem;
}
#crumbs-bar > ul > li > a {
height: 11px;
display: inline-block;
*zoom: 1;
*display: inline;
margin-right: 7px;
vertical-align: top;
}
/* Search Results Pagination
-----------------------------*/
.results-list > h1 {
font-size: 1.5rem;
font-weight: bold;
margin-top: 16px;
margin-top: 1rem;
margin-inline-start: 8px;
margin-inline-start: 0.5rem;
}
.results-list > ul:first-of-type {
padding: 0 0.5rem 0.5rem;
}
.results-list > ul:last-of-type {
margin-top: 0.5rem;
}
.results-list > ul li {
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: middle;
text-align: center;
margin: 2px 3px 0 0;
padding: 0px 6px 1px;
}
.results-list li.previous-page a {
display: block;
text-indent: -1000rem;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid blue;
}
.results-list li.current-page {
font-weight: bold;
}
.results-list li.current-page {
border: 1px solid hsl(210, 20%, 75%);
}
.results-list li.next-page a {
display: block;
text-indent: -1000rem;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid blue;
}
/* Guided Search
-------------------------------*/
.guided-navigation > h1 {
position: absolute;
left: -1000px;
}
.guided-navigation > ul > li {
margin-bottom: 16px;
margin-bottom: 1rem;
padding: 8px 0;
padding: 0.5rem 0;
}
.guided-navigation > ul > li > * {
padding: 0 20px;
padding: 0 1.25rem;
}
.guided-navigation > ul > li > h1 {
color: hsl(210, 20%, 50%);
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3rem;
font-weight: bold;
min-height: 20px;
}
.guided-navigation > ul > li > ul > li {
color: hsl(210, 20%, 60%);
line-height: 1.8rem;
}
.guided-navigation > ul > li > ul > li + li {
padding-top: 3px;
}
/* Article Styles
---------------------*/
/* --------------- INDENTS ------------------*/
.indent, p.indent {
margin-inline-start:30px !important;
}
.double-indent, p.double-indent {
margin-inline-start:60px !important;
}
.triple-indent, p.triple-indent {
margin-inline-start:90px !important;
}
/* --------------- LISTS ------------------*/
.article-content-holder li li:first-child {
margin-top: 1.8rem !important;
}
.record-type-info ul, #content-wrapper-wide ul {
list-style-type:disc;
margin:0 0 1.8rem 0;
margin-inline-start:45px;
font-size:1.05rem;
}
.article-content-holder ul ul {
list-style-type:disc;
margin:0 0 0 0;
margin-inline-start:45px;
font-size:1.05rem;
}
.article-content-holder ul.double-indent {
margin-inline-start:75px;
}
.article-content-holder ul li, #content-wrapper-wide ul li, .article-content-holder ol li {
padding-bottom:10px;
line-height:1.6rem;
}
.article-content-holder ol {
list-style-type:decimal;
margin:0 0 1.8rem 0;
margin-inline-start:50px;
font-size:1.05rem;
}
.article-content-holder ol.triple-indent {
margin-inline-start:110px;
}
.article-content-holder ol li {
padding-bottom:10px;
}
li {
line-height: 1.3rem;
}
.article-content-holder ul.no-bullet {
list-style-type:none;
margin-inline-start:0px;
}
.download-box ul {
list-style-type:none !important;
margin:5px 5px 0 5px !important;
}
.download-box li {
padding: 0 0 0 40px;
margin:0;
}
.download-box li span {
font-size:0.85rem;
}
.article-content-holder ul.hanging-indent li {
list-style-type:none;
margin-inline-start:0px; /* As seen on 4-digit year timelines in HPC content, Chapter 1, Article 1 */
padding-left: 0;
text-indent: -54px;
}
/* columns */
.article-content-holder ul.column {
max-width:75%;
margin: 10px 0 20px 0;
overflow:hidden;
font-size:0.85rem;
}
.article-content-holder ul.column li {
line-height:1rem;
display:inline;
}
.image-list ul.column li {
float:left;
height:60px;
width:200px;
}
.image-list ul.column h2 {
margin:0;
padding:0;
padding-left:100px;
}
div#content div.image-list li a[target=_blank] {
padding-right:0px !important;
}
.image-list h2 {
margin-top:30px !important;
}
.image-list ul.column img {
position:absolute;
padding:15px 0 0 18px;
}
.image-list li a {
background:none!important;
}
.article-content-holder .double li { width:45%;} /* 2 col */
.article-content-holder .triple li { width:25%; } /* 3 col */
.article-content-holder .quad li { width:20%; } /* 4 col */
ul.bullet-list {
margin:0 0 1.8rem 0;
margin-inline-start: 30px !important;
list-style-type: disc !important;
}
ul.bullet-list li {
padding: 0;
}
/* ARROW LISTS (as seen on section pages) */
.record-type-info ul.arrow-list, .article-content-holder ul.arrow-list-indent, .article-content-holder ul.arrow-list ul, #content-wrapper-wide ul.arrow-list {
list-style-type:none;
padding:0;
margin:0 0 1rem 0;
}
.article-content-holder ul.arrow-list h2 {
padding:0;
margin:0;
}
.article-content-holder ul.arrow-list h5, .article-content-holder ul.arrow-list-indent h5, #content-wrapper-wide ul.arrow-list h5 {
padding:0;
margin:0 0 0 0;
font-size:1.1rem;
}
.article-content-holder ul.arrow-list li, .article-content-holder ul.arrow-list-indent li, #content-wrapper-wide ul.arrow-list li {
padding-top: 2px;
}
.arrow-list, .arrow-list-white, .arrow-list-indent {
margin:0;
padding:0;
}
.arrow-list li, .arrow-list-indent li {
background: url('/images/site/blue-circle-arrow.png') no-repeat;
background-position: 0px 2px;
padding: 0px 0px 10px 18px;
margin: 0px 10px 0px 0px;
}
.arrow-list-white li {
background: url('/images/site/white-circle-arrow.png') no-repeat;
background-position: 0px 2px;
padding: 0px 0px 10px 25px;
margin: 0px 10px 0px 20px;
font-weight:bold;
}
.record-type-info .arrow-list li {
font-size:1.1rem;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif
}
p.arrow-link {
background: url('/images/site/blue-circle-arrow.png') no-repeat;
background-position: 0px 0px;
padding: 0px 0px 0px 18px;
font-size:1rem;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:1.2rem;
}
p.arrow-description {
margin-inline-start:1rem;
margin-top:-.5rem;
line-height:1.2rem;
}
.article-content-holder ul.arrow-list-indent {
margin:0 0 0 30px;
padding: 10px 0 0;
}
.article-content-holder ul.arrow-list-indent li {
padding-bottom: 30px;
}
.article-content-holder ul.arrow-list-indent li:last-child {
padding-bottom: 2.8rem;
}
/* --------------- TABLES ------------------*/
.RecordContainer.cms-article table {
margin:0 0 1.8rem 0;
margin-right: 10px;
margin-inline-start: 21px;
border-collapse: collapse;
max-width: 590px;
}
.RecordContainer.cms-article table td {
padding: 10px;
vertical-align: top;
text-align: left;
border-bottom: 1px solid #ccc;
font-weight: normal;
color: #333;
}
.RecordContainer.cms-article table th {
font-weight:bold;
color: #333;
font-size: 1rem;
margin-bottom: 5px;
}
.RecordContainer.cms-article table caption {
padding: 0 0 .4rem 0;
margin: 0;
font-size: 1.5rem;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
/* New tables for records */
.RecordContainer[class$=record] table, .results-list > .search-record > table {
display: block;
/*padding-bottom: 20px;*/
/*width: 100%;*/
}
.RecordContainer[class$=record] table tbody, .RecordContainer[class$=record] table caption, .RecordContainer table tr,
.results-list > .search-record > table tbody, .results-list > .search-record > table caption, .results-list > .search-record > table tr {
display: block;
margin: 0;
}
.RecordContainer table tr, .results-list > .search-record > table tr {
line-height: 1.5rem;
}
.RecordContainer[class$=record] table th, .RecordContainer[class$=record] table td, .results-list > .search-record > table th, .results-list > .search-record > table td {
font-size: 1.05rem;
display: inline;
}
.RecordContainer[class$=record] table th, .RecordContainer[class$=record] table.long-description td,
.results-list > .search-record > table th, .results-list > .search-record > table.long-description td {
font-weight: normal;
color: #666;
}
.RecordContainer[class$=record] table td, .RecordContainer[class$=record] table.long-description th,
.results-list > .search-record > table td, .results-list > .search-record > table.long-description th {
font-weight: bold;
color: #000;
}
.RecordContainer[class$=record] table td::before, .results-list > .search-record > table td::before {
content: " "
}
/* --------------- Definition Lists ------------------*/
.record-type-info dl, #content-wrapper-wide dl {
max-width:550px;
margin:0 0 1.8rem 0;
margin-top: 10px;
margin-inline-start: 30px;
}
.record-type-info dt, #content-wrapper-wide dt {
font-weight:bold;
color: #333;
font-size: 1.1rem;
margin: 20px 0 3px;
}
.record-type-info dd ul {
font-size:1rem;
}
.record-type-info dl {
font-weight:normal;
}
/* Old Stickies */
/* Now they're record-type-info */
.record-type-info {
background-color:#fff;
margin-bottom: 20px;
min-height:10px;
z-index:0;
max-width:620px;
border:1px solid #ccc;
-moz-box-shadow: 0px 6px 6px #eee;
-webkit-box-shadow: 0px 8px 6px #eee;
box-shadow: 0px 6px 6px #eee;
-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#eeeeee');
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#eeeeee');
}
.record-type-info h1 {
padding: 0;
margin-bottom: 10px;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
text-transform: none;
line-height: 34px;
}
.info::before, .tip::before, .print::before, .help::before, .person::before, .cite::before, .buy::before, .book::before {
content: " ";
width: 60px;
height: 36px;
vertical-align: top;
zoom: 1;
display: inline-block;
*zoom: 1;
*display: inline;
}
.info, .light-blue { background: #88b0d7 url('/images/site/box-light-blue-gradient.gif') top repeat-x;}
.info::before {
background: url('/images/site/icon-info.png') 5px 2px no-repeat transparent;
}
.tips, .green { background: #98ab64 url('/images/site/box-green-gradient.gif') top repeat-x;}
.tips::before {
background: url('/images/site/icon-tack.png') 5px 2px no-repeat transparent;
}
.print, .orange { background: #ca6115 url('/images/site/box-orange-gradient.gif') top repeat-x;}
.print::before {
background: url('/images/site/icon-print.png') 5px 2px no-repeat transparent;
}
.help, .blue { background: #0062bd url('/images/site/box-blue-gradient.gif') top repeat-x;}
.help::before {
background: url('/images/site/icon-help.png') 5px 2px no-repeat transparent;
}
.person, .teal { background: #007b7d url('/images/site/box-teal-gradient.gif') top repeat-x;}
.person::before {
background: url('/images/site/icon-person.png') 5px 2px no-repeat transparent;
}
.cite, .brown { background: #8c5c2c url('/images/site/box-brown-gradient.gif') top repeat-x;}
.cite::before {
background: url('/images/site/icon-cite.png') 5px 2px no-repeat transparent;
}
.buy, .dark-blue { background: var(--primary-color) url('/images/site/box-dark-blue-gradient.gif') top repeat-x;}
.buy::before {
background: url('/images/site/icon-buy.png') 5px 2px no-repeat transparent;
}
.whi-buy h1 {
background: #003e73;
padding-left: 1rem;
}
.book, .wine { background: #7a3136 url('/images/site/box-wine-gradient.gif') top repeat-x;}
.book::before {
background: url('/images/site/icon-book.png') 5px 2px no-repeat transparent;
}
.grey {color:#666;}
.light-grey { background-color:#ddd !important;}
.black {color:#333;}
.blue-background {
background: var(--primary-color); /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--primary-color)', endColorstr='#0062bd'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(var(--primary-color)), to(#0062bd)); /* for webkit browsers */
background: -moz-linear-gradient(top, var(--primary-color), #0062bd); /* for firefox 3.6+ */
}
.record-type-info p, .record-type-info ul, .record-type-info ol, .record-type-info h2, .record-type-info h3, .record-type-info ul.arrow-list {
padding-right: 10px;
padding-left: 10px;
}
/* Search results Records */
.search-record {
border-top: 1px solid hsl(26, 46%, 45%);
margin: 0 10px;
overflow: hidden;
padding: 20px 3px;
}
.search-record h1 {
font-size: 1.3rem;
line-height: 1.3rem;
letter-spacing: normal;
}
.search-record .content-type {
font-size: 1.1rem;
font-weight: bold;
color: #999;
text-transform:uppercase;
}
/* Results List records
-----------------------------*/
.results-list .search-record > * {
display: block;
position: relative;
margin-inline-start: 160px;
margin-inline-start: 10rem;
}
.results-list .search-record > a {
float: left;
margin-inline-start: 0;
width: 144px;
}
.results-list .search-record > a > img {
display: block;
float: right;
max-width:150px;
}
/* Associated Records */
.associated-records > div,
.group-border {
border: 1px #929496 solid;
}
.associated-records > div > h1,
.associated-records > div > h2,
.associated-records > div > h5,
.associated-records > div > p,
.associated-records > div > strong,
.group-padding/*,
.associated-records > div > ul*/ {
padding: 6px 20px;
}
/*
.associated-records > div > :nth-child(2) {
padding-top: 4.5rem;
}
*/
.associated-records > div > img {
width:100%;
}
.associated-records > div > h1,
.group-heading {
background: var(--primary-color);
color: #fff;
font-weight: 500;
font-size: 1.6rem;
line-height: 1.6rem;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
letter-spacing: 0.05em;
}
.associated-records > div > h1.help {
font-size: 18px;
font-size: 1.125rem;
padding: 0;
font-weight: bold;
line-height: 34px;
line-height: 2.125rem;
text-transform: none;
}
.related-record, .featured-record {
margin: 0 10px;
padding: 20px 3px 20px;
border-top: 1px solid #ddd;
}
.chunk .related-record, .chunk .featured-record {
border-top: none;
}
.chunk .related-record img, .chunk .featured-record img {
width: unset;
}
#dynamicBooks>.related-record {
border: none;
padding: 0;
}
.record-image {
margin: 0 10px;
padding: 0px 3px;
border-top: 1px solid #ddd;
}
.related-record > h1, .featured-record > h1, .featured-photo > h1, .search-record h1 {
font-size: 1.3rem;
line-height: 1.3rem;
letter-spacing: normal;
font-weight: bold;
}
.featured-record > * {
display: block;
width: 75%;
padding-left: 26%;
}
.featured-record > a {
float: left;
padding-left: 0;
width: auto;
}
.featured-photo {
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: top;
overflow: hidden;
}
.featured-photo + div {
display: inline-block;
*zoom: 1;
*display: inline;
vertical-align: top;
width: 50%;
}
.featured-photo > * {
display: block;
/*padding-left: 150px;
width: 45%;*/
}
.featured-photo > a {
position: relative;
float: left;
padding-left: 0;
width: auto;
}
/* Buy Boxes with multiple buy options */
.whi-buy-options {
text-align: center;
margin-top: 2rem;
}
.whi-buy-options > div, .record-type-info > form {
display: inline-block;
*zoom: 1;
*display: inline;
text-align: center;
/*width: calc(50% - 4px);*/
margin-top: 0;
}
.whi-buy-options > div + div, .record-type-info > form + form {
border-left: 1px #ccc solid;
}
.whi-buy-options > div > * {
display: block;
margin: 0.5rem auto;
}
.whi-buy-options h2 {
font-size: 1.3rem;
}
.whi-buy-options p:last-child {
margin-top: 2rem;
font-size: 0.9rem;
font-style: italic;
}
/* image and slideshow titles
-------------------------*/
.enlarg-image a img, .enlarg-image a:hover img {
border: none;
}
.enlarg-image a span {
cursor: pointer;
}
.enlarg-image span {
position: absolute;
width: 30px;
height: 30px;
background: url('/images/site/enlarge.gif') left no-repeat;
left: 0;
top: 0;
text-indent: -2000rem;
z-index:1000;
}
.content-image-left, .content-image-right {
float: right;
margin: 5px 0 1rem;
margin-inline-start: 2rem;
padding: 0 0 0 10px;
border-left: solid 1px #ccc;
width: 260px;
position: relative;
clear: right;
}
@media (max-width: 500px) {
.content-image-left, .content-image-right {
float: none;
margin-inline-start: 0;
margin: 1rem 0;
padding: 0;
border: none;
width: inherit;
}
}
.RecordContainer .dark {
padding:0 !important;
}
.content-image-top {
margin: 0 0 20px 0;
padding: 0 0 20px 0 !important;
border-bottom: solid 1px #ccc;
max-width: 75%;
position:relative;
clear:right;
}
.slideshow {
width: 260px;
height:0px;
overflow:hidden;
}
.right {
float: right !important;
clear:none !important;
}
.left {
float: left !important;
clear:none !important;
}
/*------------------------------------*\
Dropdown Nav (as seen in hours cartridge on home page)
\*------------------------------------*/
#nav{
list-style:none;
font-weight:bold;
margin:10px 0;
width:100%;
}
#nav li{
margin-right:10px;
position:relative;
width:205px;
}
#nav-down-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid blue;
display:inline-block;
*zoom: 1;
*display: inline;
float:right;
margin-top:5px;
}
#nav a {
display:block;
padding:5px !important;
width:210px;
background:#fff !important;
text-decoration:none;
border:1px solid #929496;
border-radius: 2px 2px 2px 2px;
}
#nav ul a {
border:none;
border-radius:none;
}
#nav a:hover{
background:#3399ff !important;
color:#fff;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* IE7+ fix - make this the same as the background of where this is positioned. */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
border:1px solid #ddd;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
width:220px;
}
#nav ul li{
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Displays the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover ul li a:hover{ /* styles hover on each individual link. */
background:#3399ff !important;
color:#fff;
}
/*-- Content-Type Specific --*/
/* preserve-your-building-nav */
.preserve-your-building-nav > div {
background: #ddd;
font-size: 13.5px;
font-size: 1.2rem;
font-family: Arial, Verdana, sans-serif;
}
.preserve-your-building-nav > div > * {
padding-left: 20px;
}
.preserve-your-building-nav > div > h1 {
background: #98ab64;
font-size: 16.8px;
font-size: 1.25rem;
text-transform: none;
}
.preserve-your-building-nav > div > ul > li + li {
margin-top: 11px;
margin-top: 1em;
}
.related-product:hover {
background-color: #ccc;
}
/* Presentational cheats we still apparently need */
.bottom-margin {
margin-bottom: 1rem;
}
@property --stop-one {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --stop-two {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --color-one {
syntax: "";
inherits: false;
initial-value: white;
}
@property --color-two {
syntax: "";
inherits: false;
initial-value: white;
}
@property --color-three {
syntax: "";
inherits: false;
initial-value: white;
}
@property --color-four {
syntax: "";
inherits: false;
initial-value: white;
}
#record-search{
float:right;
}
#record-search .search-input {
max-width: 5em;
}
aside > #record-search {
margin: 2em 0 2em 0;
float:unset;
}
#search-section {
background-color: white;
}
#search-section > ul > li > form, #home-search-form > form, #record-search {
border-bottom: 1px solid hsl(210, 20%, 70%);
border-bottom-color: var(--primary-color);
}
#home-search-form form {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.big-hero .major-link {
color: var(--primary-color);
background-color: white;
border: none;
margin-bottom: 1em;
}
.big-hero .major-link:hover, .big-hero .major-link:focus {
color: var(--primary-color);
background-color: white;
border: none;
margin-bottom: 1em;
-webkit-box-shadow: 0 0 3px 1px #ddd;
-moz-box-shadow: 0 0 3px 1px #ddd;
box-shadow: 0 0 3px 1px #ddd;
}
#search-form {
width: 100%;
}
.user-term, .user-facet {
font-size: 1em;
height: 2em;
line-height: 2em;
}
input[name="terms"] {
font-size: 1.7em;
height: 2em;
line-height: 1.7em;
padding-left: 1em;
width: 87%;
}
input[name="addTerm"] {
border: 1px inset hsl(210, 10%, 60%);
font-size: 1.7em;
height: 2em;
line-height: 1.7em;
padding-left: 1em;
}
.search-button {
height: 2em;
font-size: 1.7em;
line-height: 1.0em;
padding: 0em 2em 0em 2em;
margin-left: 0;
background-color: #ca6115;
background-image: none;
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 500;
letter-spacing: 0em;
float:right;
}
.search-button:hover, .search-button:focus{
cursor: pointer;
background-color: #9c4b10;
}
#search-section {
z-index: 1;
}
#search-section > div > ul > li {
display: inline-block;
color: #ddd;
font-size: 1.5em;
padding: 0.5em 1.5em 1.5em 1.5em;
}
#search-section > div > ul > li > a {
color: #777;
font-weight: 500;
text-transform: uppercase;
}
#search-section > div > ul > li .active {
border-bottom: 3px solid var(--primary-color);
color: var(--primary-color);
font-weight: 500;
}
#search-section > div > ul > li a:not(.active):hover, #search-section > div > ul > li a:not(.active):focus {
color: black;
}
/*Affects all submits*/
[type="submit"]:hover {
background-color: #9c4b10;
}
.browse-stuff {
display: block;
padding: 8px 8px 0px 8px;
}
.browse-stuff > p {
font-size: 1.8em;
color: white;
font-family: 'Oswald', sans-serif;
font-weight: 500;
text-align: left;
line-height: 1em;
margin-bottom: .2em;
}
.browse-stuff > p:first-of-type {
font-size: 1.5em;
line-height: 1em;
}
.browse-stuff > p:last-of-type {
font-size: 1.1em;
line-height: 1.1em;
font-weight:100;
}
@media (max-width: 450px) {
.browse-stuff > p:last-of-type {
font-size: .6rem;
}
}
.browse-stuff .brand-underline {
text-transform: uppercase;
margin-bottom: 5px;
min-height: 2em;
}
.swag-line {
display: inline-block;
height: 2px;
margin-bottom: 10px;
background-color: white;
width: calc((50%) - 9px);
}
.swag-left-box {
background-color: white;
display: inline-block;
height: 8px;
width: 2px;
margin: 0 1px 0 -5px;
margin-bottom: 7px;
}
.swag-box {
background-color: white;
display: inline-block;
height: 8px;
width: 2px;
margin-bottom: 7px;
}
.swag-right-box {
background-color: white;
display: inline-block;
height: 8px;
width: 2px;
margin: 0 -5px 0 1px;
margin-bottom: 7px;
}
.swag-bar {
--stop-one: 8px;
--color-one: white;
--color-two: white;
--color-three: white;
--color-four: white;
background-color: var(--brand-blue);
background-image:
linear-gradient(var(--color-four) 0, var(--color-three) 50%, var(--color-four) 100%),
linear-gradient(var(--color-four) 0, var(--color-three) 50%, var(--color-four) 100%),
linear-gradient(var(--color-four) 0, var(--color-three) 50%, var(--color-four) 100%),
linear-gradient(to right, var(--color-one) 0, var(--color-two) 100%),
linear-gradient(to left, var(--color-one) 0, var(--color-two) 100%);
background-size: 2px 8px, 2px var(--stop-one), 2px 8px, calc(50% - 8px) 2px, calc(50% - 8px) 2px;
background-position: calc(50% - 8px) 2px, center, calc(50% + 8px) 2px, 0 5px, 100% 5px;
background-repeat: no-repeat;
height: 12px;
width: 100%;
margin-top: -2px;
margin-bottom: 12px;
transition: --color-one 0.5s ease, --color-two 0.5s ease 0.125s, --color-three 0.5s ease 0.25s, --color-four 0.5s ease 0.375s,
--stop-one 0.5s;
}
.browse-stuff:hover .swag-bar {
--stop-one: 10px;
--color-one: #ac5c2c;
--color-two: #9c5c2c;
--color-three: #9c5c2c;
--color-four: #ac5c2c;
}
#secondary-nav {
background-color: white;
border-bottom: 1px solid hsl(210, 20%, 70%);
border-bottom-color: var(--primary-color);
display: none;
padding-bottom: 7px;
padding-top: 7px;
}
#secondary-nav-toggle,
#search-toggle {
left: -1000px;
position: absolute;
}
label.major-link {
cursor: pointer;
user-select: none;
}
nav > input#secondary-nav-toggle:checked ~ nav,
nav > input#search-toggle:checked ~ #search-section {
display: block !important;
}
nav > input[type=checkbox]:active + label,
.browse-label:hover,
nav > input[type=checkbox]:checked + label {
background-color: white;
color: var(--primary-color);
}
body > nav > .donate-link {
color: white;
background-color: #7a3136;
border-color: white;
margin-bottom: 8px;
border-width: 1px;
border-style: solid;
box-shadow: 0 0 0 1px #00254b;
}
body > nav > .donate-link:hover, body > nav > .donate-link:focus {
color: #7a3136;
background-color: white;
box-shadow: 0 0 0 1px white;
border-width: 1px;
border-style: solid;
}
#secondary-nav ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
grid-gap: 1rem;
background: white;
padding: 1rem;
grid-column: 1/span 7;
}
#secondary-nav ul li {
filter: drop-shadow(0 0 3px rgba(0, 0, 0, .25));
/* display: inline-block;
height: 148px;
margin-left:4px;
margin-right:4px;
vertical-align: top;
width: 15%; */
}
.browse-stuff {
background-color: var(--primary-color);
}
.browse-stuff:hover span {
background-color: #8c5c2c;
}
body > nav > * {
text-align: center;
}
#search-section {
display: block;
align-self: center;
background-color: var(--primary-color);
margin: 0 .5rem;
width: 98%;
justify-self: right;
}
#home-search-form input.search-input {
border-radius: 5px 0 0 5px;
font-size: 1.25rem;
}
#home-search-form button.search-button {
border-radius: 0 5px 5px 0;
background: white;
font-size: 1.25rem;
}
.fa-search::before {
color: var(--primary-color);
}
@media (max-width: 450px) {
.browse-stuff > p:last-of-type {
font-size: .6rem;
}
#search-section {
justify-self: center;
}
}
a:link {
text-decoration: none;
}
.cms-article {
font-size: 16px;
font-size: 1rem;
}
.cms-article header h1:first-child{
padding: 10px 25px;
}
.cms-article ol {
list-style: decimal;
}
.cms-article ul {
list-style: disc;
margin: 0 0 1.8em 45px;
}
.cms-article ul > li {
margin-bottom: 8px;
font-size: 1rem;
}
.cms-article ul.inline-list {
margin: 0;
}
.cms-article ul[class*=arrow-list] {
list-style: none;
margin: 8px 0 16px 16px;
}
.cms-article ul[class*=arrow-list] > li {
margin: 0;
}
.cms-article table tr {
display: table-row;
}
/*Chunk Grid Style*/
.chunk {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
grid-gap: 1rem;
}
.large {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.small {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.half, .video, .sites {
grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
}
.chunk img {
width: 100%;
filter: drop-shadow(0 0 3px rgba(0,0,0,.25));
}
.fig img {
height: 100%;
}
.chunk a:hover img {
filter: sepia(100%) hue-rotate(190deg) saturate(100%) drop-shadow(0 0 3px rgba(0,0,0,.25));
}
/* Related Products
----------------------------------- */
.related-products-caption {
border: none !important;
font-weight: bold;
text-align: center;
width: 100%;
font-family: 'Oswald', sans-serif;
font-weight: 500;
}
.related-product {
border: none !important;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
filter: drop-shadow(1px 1px 4px rgba(0,0,0,.25));
background: white;
margin: 1rem 0;
padding: 1rem 0;
}
.product-title {
padding: 0 1rem;
}
.product-price {
display:none;
}
/*TMD - Edge sizes the children of a display: flex element by the size of their contents, instead of based on the size of their parent, so this should fix that*/
.related-product > * {
width: 100%;
}
/* Article banner and transparent overlay
----------------------------------- */
.category-banner {
background-size: cover;
height: 300px;
}
.transparent-text-wrapper {
background-color:rgba(0,0,0,0.5);
color: white;
height: 100%;
padding: 0 20px 0 20px;
width: 40%;
}
.transparent-text-wrapper h2 {
padding-top:20px;
}
/* HTML forms in CMS
----------------------------------- */
.cms-article label, body.mceContentBody label {
font-weight:bold;
padding-top:10px;
display:block;
}
.cms-article label.error {
color:#F00 !important;
}
.cms-article .float-field, body.mceContentBody .float-field {
float:left;
margin-right:6px;
}
.cms-article label span, body.mceContentBody label span {
font-weight:normal;
font-size: 0.9em;
}
.cms-article fieldset, body.mceContentBody fieldset {
background-color:#ddd;
padding: 1rem;
max-width:100%;
}
.cms-article legend, body.mceContentBody legend {
font-weight:bold;
font-size:1.4em;
font-family:Arial, Helvetica, sans-serif;
margin:0 0 0 -2px;
padding:30px 0 0 0;
}
.cms-article fieldset input[type="text"], .cms-article fieldset input[type="tel"], .cms-article fieldset input[type="email"], .cms-article fieldset textarea,
body.mceContentBody fieldset input[type="text"], body.mceContentBody fieldset input[type="tel"], body.mceContentBody fieldset input[type="email"], body.mceContentBody fieldset textarea {
background-color: #FCF7F9;
border:solid 1px #ddd;
padding:5px;
color:#666;
width: 95%;
}
.cms-article fieldset input[type="text"].error, .cms-article fieldset input[type="tel"].error, .cms-article fieldset input[type="email"].error, .cms-article fieldset textarea.error,
.cms-article fieldset input[type="text"].input-validation-error, .cms-article fieldset input[type="tel"].input-validation-error, .cms-article fieldset input[type="email"].input-validation-error, .cms-article fieldset textarea.input-validation-error {
background-color:#FCC !important;
border: solid 1px #F00 !important;
}
#btnSubmitFeedback {
font-size:14px;
padding: 8px 19px 9px;
margin:0 !important;
color:#fff !important;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
#btnSubmitFeedback:hover {
text-decoration: underline;
cursor:pointer;
}
/* Jquery UI overrides */
.ui-tabs {
padding: 0 !important;
}
.ui-tabs .ui-tabs-panel {
padding: 0 !important;
}
.ui-widget {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 1.05em !important;
}
.ui-widget-content {
border:0 !important;
background: transparent !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 0 !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 0 !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 0 !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 0 !important;
}
.ui-tabs .ui-tabs-nav li {
top:0 !important;
padding: 0 !important;
}
.ui-tabs .ui-tabs-nav li a {
padding: 0 !important;
}
.ui-widget-header {
background: none !important;
border: 0 !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: none !important;
border: 0 !important;
color: #333 !important;
font-weight: normal !important;
}
/***************************************************************************
Tabbed Menu and Wrapper - Membership Pages
-------
This section styles the tabbed menu on all donation pages
Current formatting includes tabs for:
- join or renew
- donate
- gift memberships
- monthly giving
****************************************************************************/
ul.internalMenu {
list-style-type: none !important;
padding-bottom: 35px !important;
border-bottom: 1px solid #ccc !important;
margin: 0 !important;
}
.press-tabs-wrapper ul.internalMenu {
list-style-type: none !important;
padding-bottom: 0px !important;
border-bottom: 1px solid #ccc !important;
margin: 0 0 -1px 0 !important;
max-width: 618px !important;
}
ul.internalMenu li, .press-tabs-wrapper div.ui-tabs .ui-tabs-nav li {
float: left !important;
height: 26px !important;
background-color: #fff !important;
margin: 0 -1px 0 0 !important;
padding: 4px 1em !important;
border: 1px solid #ccc !important;
text-transform:uppercase !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:1.2em !important;
}
.press-tabs-wrapper div.ui-tabs .ui-tabs-nav li {
margin-left: -2px !important;
}
ul.internalMenu li.selected, ul.internalMenu li.selected:hover,
.press-tabs-wrapper ul.internalMenu li.ui-tabs-selected, .press-tabs-wrapper ul.internalMenu li.ui-tabs-selected:hover {
border-bottom: 1px solid #ddd !important;
background-color: #ddd !important;
}
ul.internalMenu li.selected a, ul.internalMenu li.selected a:hover
.press-tabs-wrapper ul.internalMenu li.ui-tabs-selected a, .press-tabs-wrapper ul.internalMenu li.ui-tabs-selected a:hover {
color: #000 !important;
}
ul.internalMenu a, .press-tabs-wrapper ul.internalMenu a {
float: left !important;
display: block !important;
color: #666 !important;
text-decoration: none !important;
padding: 4px !important;
font-weight:normal !important;
}
ul.internalMenu a:hover, .press-tabs-wrapper ul.internalMenu a:hover {
color:#0033cc !important;
}
ul.internalMenu li:hover, .press-tabs-wrapper ul.internalMenu li:hover {
background-color: #fbfbfb !important;
border-bottom: 1px solid #ddd !important;
}
var(--secondary-color), .press-tabs-wrapper var(--secondary-color) {
font-family: Verdana, Arial, sans-serif !important;
line-height: 1.6em !important;
clear:both !important;
margin: 0 0 20px 0 !important;
padding:20px !important;
border-left: 1px solid #ccc !important;
border-right: 1px solid #ccc !important;
border-bottom: 1px solid #ccc !important;
background: #ddd !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#ffffff') !important; /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#fff)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #ddd, #fff) !important; /* for firefox 3.6+ */
}
var(--secondary-color) p, .press-tabs-wrapper .ui-widget-content p {
margin-bottom:1.8em !important;
}
var(--secondary-color) a, .press-tabs-wrapper .ui-widget-content a {
font-size:1em !important;
}
.right-nav-top-promo {
margin:20px 0;
}
/*---------------------------------------------------------------------------
Custom Styles
------------------------
Styles developed after the main styles
---------------------------------------------------------------------------*/
.left p, .right p {
margin-bottom:1.0em !important;
}
.left h2, .right h2 {
margin-bottom:1.0em !important;
}
/* New Sidebar Ribbon Style
--------------------------------------------*/
.sidebar {
float:right;
clear:right;
position:relative;
background-color:#fff;
width:260px;
margin:0 0 20px 20px;
min-height:10px;
border-left:1px solid #ccc;
z-index:0;
padding-left:10px;
}
.sidebar p:first-child {
margin-top:50px;
}
.ribbon {
position:relative;
width: 301px;
font-size: 20px!important;
background: #5c5c5c;
font-family: 'Helvetica Neue',Helvetica, sans-serif;
left:-20px;
margin-bottom:10px;
}
.ribbon h4 {
font-size: 16px!important;
color:#fff;
text-shadow: 0px 1px 2px #000;
margin:0;
padding: 15px 10px 15px 20px;
}
.ribbon:before {
content: '';
position: absolute;
top: 100%;
left: 0px;
height: 0;
width: 0;
border-top: 10px solid #333;
border-left: 10px solid transparent;
}
/* New sidebar for HOBO restoration how-tos
---------------------------------------------- */
.sidebar-restoration {
float:right;
clear:right;
position:relative;
background: #fff url('/images/site/sidebar-restoration-header.png') no-repeat 0 0;
width:250px;
margin:0 0 20px 20px;
min-height:10px;
border:1px solid #ccc;
z-index:0;
padding-left:10px;
padding-top:93px;
}
.sidebar-restoration div {
max-width:110px;
float:left;
padding-right: 20px;
}
.sidebar-restoration h6 {
padding-bottom:0px !important;
margin-bottom:0px !important;
}
.sidebar-restoration div.tools {
background: #fff url('/images/site/icon-tools.png') no-repeat 17px 0;
padding-left:60px;
}
.sidebar-restoration div.tools a {
font-size: 100% !important;
width:110px !important;
padding:0px !important;
}
/* Disabled links for commission navigation
-------------------------------------------------*/
li.grey, ul.grey {
color:#666;
font-weight:normal;
}
/* Popup styles
-------------------------------------------------*/
a.donate-now {
background:url('/images/site/DONATE-NOW-button.png') no-repeat 0 0 transparent;
display:block;
width:223px;
height:50px;
padding:0;
margin-top:5px;
position:absolute;
bottom:5px;
right:5px;
outline:none;
border:none;
color:#fff;
font-family: Helvetica,Arial,Sans-serif,sans-serif;
letter-spacing:-0.02em;
font-weight:bold;
text-transform:uppercase;
font-size:1.6em;
cursor: pointer;
}
a.donate-now:hover {
background-position: 0 -50px;
text-decoration:none;
}
a.donate-now span {
position:absolute;
left:-9999px;
}
div.popup-donate {
max-width: 480px;
height: 380px;
background-image:url('/images/site/membership-popup.jpg');
position:relative;
color:#fff;
font-size:1.25em;
}
.fund-address { /* Styles propery funding articles organizational address */
font-weight: normal;
display: block;
margin-left: 90px;
}
.source {
margin-top: 7px !important;
color: #444444;
font-size: 0.90em !important;
}
.section-cartridge .source {
margin-top: 0px !important;
}
.table-header {
background-color:#88b0d7;
}
.section-promo-image {
float:left;
margin: 2px 0 0 18px;
width:100px;
}
.award .section-promo-image {
margin: 0 0 0 2px;
width:55px;
}
.award {
padding-bottom: 15px;
}
.section-promo-description {
padding-left: 105px;
}
.award .section-promo-description {
padding-left: 40px;
}
.promo-top {
margin:0;
padding:10px 0 0 0;
}
.textbook {
margin-top:-10px;
padding-bottom:4px;
margin-bottom:-1px; /*used for the textbook top to a search results 360 cartridge. To switch to short promo, remove this line. Seen on Teach and Learn. */
border-bottom:1px solid #ccc;
background-color:#ddd;
}
.textbook div.section-promo-image {
margin:0;
padding:0;
width:150px;
height:117px;
overflow:hidden;
}
.textbook h2 {
padding-top: 20px;
margin-bottom: 0;
}
.textbook div.section-promo-description {
padding-left:150px;
}
/* New Purchase a copy styles October 2012
---------------------------------------------- */
.purchase-info {
border:1px solid #ccc;
max-width:605px;
margin-top:20px;
font-size:0.9em !important;
float:left;
}
.purchase-info p {
max-width:85%; /* Set to 70% with orange "buy this" button is added or 40% when dropdowns and add-to-cart button is added */
float:left;
padding:0 0 0 15px;
}
.purchase-info p.intro {
padding-top:15px;
}
.dropdown-wrapper {
float:left;
margin-left:20px;
}
.dropdown-wrapper div {
float:left;
clear:left;
padding-bottom:7px;
}
.no-clear {
clear:none !important;
}
.audio-360 {
display:block;
width:360px;
height:30px;
}
/* New Field Trip Table Styles
------------------------------------*/
.field-trip-details {
width:45% !important;
}
.field-trip-details td + td {
font-weight: bold;
}
/* Learn cartridge picture
------------------------------------*/
.learn {
background:url('/images/promo/Medium/bob-lafollette.png') no-repeat 100% 100% #ffffff;
overflow:hidden;
}
/* This Day styling
----------------------------------------*/
.whsbox {
font-family: arial, san-serif;
}
.whstitle {
font-size: 14px;
color: #132744;
font-weight: 900;
}
.whsheader {
font-size:11px;
font-weight: 900;
}
.whstext {
font-size:11px;
margin-top:2px;
margin:10px 20px 10px 66px; /* As seen on 4-digit year timelines in HPC content, Chapter 1, Article 1 */
padding-left: 0;
text-indent: -46px;
}
.this-day-wrapper {
margin-bottom:20px;
}
/* New Large Circle Number styling - circle-numbers
--------------------------------------*/
ol.circle-numbers {
counter-reset:li;
margin-left:0 !important;
padding-left:0 !important;
}
ol.circle-numbers > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 60px; /* Moves text over to make room for the numbers */
padding:0px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
min-height:60px;
}
ol.circle-numbers > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
position:absolute;
top:5px;
left:-35px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
behavior: url(PIE.htc);
width: 12px;
height: 12px;
padding: 0px 4px 6px 4px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 14px Arial, sans-serif;
margin-right:8px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
li ol.circle-numbers,
li ul.circle-numbers {margin-top:6px;}
ol.circle-numbers ol.circle-numbers li:last-child {margin-bottom:0;}
ol.circle-numbers h5 {font-family:Arial; font-size: 1.4em; margin:0; padding:0;}
/* New Large Circle Number styling - circle-numbers-large LARGER
--------------------------------------*/
ol.circle-numbers-large {
counter-reset:li;
margin-left:0 !important;
padding-left:0 !important;
}
ol.circle-numbers-large > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 60px; /* Moves text over to make room for the numbers */
padding:0px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
min-height:60px;
}
ol.circle-numbers-large > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
position:absolute;
top:5px;
left:-55px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
behavior: url(PIE.htc);
width: 18px;
height: 18px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 22px Arial, sans-serif;
margin-right:8px;
padding: 0 4px 8px 4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
li ol.circle-numbers-large,
li ul.circle-numbers-large {margin-top:6px;}
ol.circle-numbers-large ol.circle-numbers-large li:last-child {margin-bottom:0;}
ol.circle-numbers-large h5 {font-family:Arial; font-size: 1.4em; margin:0; padding:0;}
ol.circle-numbers h4, ol.circle-numbers-large h4 {line-height:1.6em;}
/* Accordion Styles
----------------------------*/
.ui-widget-content a {
color:#0033cc !important;
letter-spacing:normal !important;
/*font-size: 0.9em !important; AKT - removed this line because it was making CMS links tiny in accordion */
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color:#0033cc !important;
font-weight:bold !important;
font-size: 0.85em !important;
font-family: Arial, Helvetica, sans-serif;
letter-spacing:normal !important;
}
.ui-state-default .ui-icon, .ui-icon {
background-image: url(/jqueryui/css/ui-lightness/images/ui-icons_0008c4_256x240.png) !important;
}
.ui-accordion .ui-accordion-header a {
padding: 0.29em 0 0 1.8em !important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border:0 !important;
background:none !important;
}
.ui-accordion-content {
padding-bottom:0 !important;
}
.ui-accordion .ui-accordion-header .ui-icon {
left: 0 !important;
}
/* Our div-link-fake-buttons */
.button {
border: 1px solid #ccc;
margin-top: 40px;
margin-bottom: 60px;
padding-top: 5px;
min-height: 20px;
width: 45%;
border-radius: 8px;
filter: drop-shadow(0px 2px 2px rgba(0,0,0,.25));
text-align: center;
}
.button.dark-blue * {
color: white;
}
[class*=three-columns] .button.dark-blue {
width: 90%;
margin-left: auto;
margin-right: auto;
}
/**
For some groups, probably
*/
.download-box {
border: 1px solid #ccc;
max-width:590px;
margin: 2rem 0;
padding: 1rem 0;
min-height:20px;
filter: drop-shadow(1px 1px 6px rgba(0,0,0,.25));
border-radius: 8px;
-moz-border-radius: 8px; /* Firefox 3.6 and earlier */
-moz-box-shadow: 5px 5px 5px #888888; /* Firefox 3.6 and earlier */
}
.download-box h2 {
margin-left:10px;
}
.right-nav-box div.download-box {
padding: 8px 0 0 0;
margin: 10px 0 0px 0px;
display: block;
float: left;
min-height:45px;
width: 198px;
box-shadow: none;
-moz-box-shadow: none;
}
/*****************************************
For specific articles
*/
/* CS3531, Connect with the Society */
#flickr_badge_wrapper {
max-width:360px !important;
text-align:left;
}
/* CS2868, Native American Object Recovery Effort */
div.museum-object-recovery .floatleft {
margin:5px 10px 10px 0px;
clear:left;
float:left;
}
div.museum-object-recovery .photo-wrapper {
margin:0px 0px 10px 0px;
float:left;
}
div.museum-object-recovery .tallest {
margin-bottom:90px;
}
div.museum-object-recovery .tall {
margin-bottom:70px;
}
div.museum-object-recovery dl {
margin-left:5px;
}
div.museum-object-recovery dd {
margin-top:3px;
margin-bottom:6px;
}
div.museum-object-recovery .body h4 {
margin-bottom:10px;
font-size:125%;
}
div.museum-object-recovery .top {
border-top:1px #666 solid;
padding-top:10px;
}
div.museum-object-recovery dt {
font-weight:bold;
}
div.museum-object-recovery dt span {
font-weight:normal;
}
div.museum-object-recovery .style1 {
margin-top:0;
}
/* CS15265, */
#gmap {
display: block;
width: 360px;
height: 391px;
background: url('/images/restoration-map/restoration.png') no-repeat 0 0;
position: relative;
margin: 0 auto 2em auto;
}
#gmap a {
color: #000;
font-family: arial, sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
}
#gmap a span {
position:absolute;
left:-9999px;
}
a#roof {
display: block;
width: 227px;
height: 0;
padding-top: 140px;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
}
* html a#roof {
height: 120px;
height: 0;
}
a#roof:hover {
background: transparent url('/images/restoration-map/restoration-roof.png') no-repeat 0 0;
overflow: visible;
}
a#efficiency {
display: block;
width: 175px;
height: 0;
padding-top: 135px;
overflow: hidden;
position: absolute;
right: 0px;
top: 0px;
}
* html a#efficiency {
height: 105px;
height: 0;
}
a#efficiency:hover {
background: transparent url('/images/restoration-map/restoration-efficiency.png') no-repeat -185px 0;
overflow: visible;
}
a#paint {
display: block;
width: 60px;
height: 0;
padding-top: 265px;
overflow: hidden;
position: absolute;
right: 0px;
bottom: 0px;
}
* html a#paint {
height: 55px;
height: 0;
}
a#paint:hover {
background: transparent url('/images/restoration-map/restoration-paint.png') no-repeat -300px -126px;
overflow: visible;
}
a#systems {
display: block;
width: 86px;
height: 0;
padding-top: 92px;
overflow: hidden;
position: absolute;
left: 185px;
top: 120px;
}
* html a#systems {
height: 100px;
height: 0;
}
a#systems:hover {
background: transparent url('/images/restoration-map/restoration-systems.png') no-repeat -185px -120px;
overflow: visible;
}
a#exterior {
display: block;
width: 106px;
height: 0;
padding-top: 280px;
overflow: hidden;
position: absolute;
left: 80px;
bottom: 0px;
}
* html a#exterior {
height: 120px;
height: 0;
}
a#exterior:hover {
background: transparent url('/images/restoration-map/restoration-exterior.png') no-repeat -80px -111px;
overflow: visible;
}
a#interior {
display: block;
width: 160px;
height: 0;
padding-top: 195px;
overflow: hidden;
position: absolute;
right: 50px;
bottom: 0px;
}
* html a#interior {
height: 105px;
height: 0;
}
a#interior:hover {
background: transparent url('/images/restoration-map/restoration-interior.png') no-repeat -150px -196px;
overflow: visible;
}
a#windows {
display: block;
width: 50px;
height: 0;
padding-top: 280px;
overflow: hidden;
position: absolute;
left: 0px;
bottom: 0px;
}
* html a#windows {
height: 50px;
height: 0;
}
a#windows:hover {
background: transparent url('/images/restoration-map/restoration-windows.png') no-repeat 0px -111px;
overflow: visible;
}