/*
Theme Name: Bates Framework
Theme URI: https://www.bates.edu/
Description: PARENT THEME: Overarching Bates parent theme; a framework for all child themes.
Version: 5.19.1
Author: �㽶��Ƶ
Author URI: https://www.bates.edu
Requires as least: 5.2
*/
/*reset***/
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote{quotes:none}blockquote:after,blockquote:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}abbr[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
:root {
--icon�㽶��Ƶ_white: url("data:image/svg+xml,%3Csvg height='100px' width='100px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 91 91' version='1.1' x='0px' y='0px'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%0A%3E%3Cpath d='M63.1241785,52.479518 L87.8092531,77.1633266 C90.9328807,80.286794 90.9283109,85.3555048 87.8132327,88.4704234 C84.6918029,91.591693 79.6351413,91.5958688 76.505556,88.466444 L51.8204814,63.7826354 C38.7399296,71.779481 21.4196713,70.118516 10.100315,58.7997402 C-3.16576153,45.534344 -3.16576153,24.0268874 10.100315,10.7614912 C23.3663915,-2.50390491 44.8749512,-2.50390491 58.1410277,10.7614912 C69.460384,22.080267 71.1214343,39.399637 63.1241785,52.479518 L63.1241785,52.479518 Z M15.7521635,53.1481815 C5.60751679,43.004055 5.60751679,26.5571764 15.7521635,16.4130499 C25.8968103,6.26892347 42.3445324,6.26892347 52.4891792,16.4130499 C62.6338259,26.5571764 62.6338259,43.004055 52.4891792,53.1481815 C42.3445324,63.292308 25.8968103,63.292308 15.7521635,53.1481815 L15.7521635,53.1481815 Z' fill='white'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
--iconClose_white: url("data:image/svg+xml,%3Csvg height='50px' width='50px' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100'%3E%3Cpath class='st0' d='M61.2,50.5l32.1,32.1c3,3,3,7.7,0,10.7c-3,3-7.7,3-10.7,0L50.5,61.2L18.4,93.3c-3,3-7.7,3-10.7,0 c-3-3-3-7.7,0-10.7l32.1-32.1L7.7,18.4c-3-3-3-7.7,0-10.7s7.7-3,10.7,0l32.1,32.1L82.6,7.7c3-3,7.7-3,10.7,0c3,3,3,7.7,0,10.7 L61.2,50.5z'%3E%3C/path%3E%3C/svg%3E");
--iconMenu_white: url("data:image/svg+xml,%3Csvg height='54px' width='54px' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Crect x='2' y='2' width='50.8' height='7' rx='1' ry='1'%3E%3C/rect%3E%3Crect x='2' y='18.5' width='50.8' height='7' rx='1' ry='1'%3E%3C/rect%3E%3Crect x='2' y='35' width='50.8' height='7' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
--iconArrowUp_white: url("data:image/svg+xml,%3Csvg height='100px' width='100px' stroke='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' x='0px' y='0px' stroke-linecap='round' stroke-linejoin='round' stroke-width='14' %3E%3Cline x1='64' y1='20.5' x2='109' y2='65.5'%3E%3C/line%3E%3Cline x1='64' y1='20.5' x2='19' y2='65.5' %3E%3C/line%3E%3C/svg%3E");
--iconArrowUp_garnet: url("data:image/svg+xml,%3Csvg height='100px' width='100px' stroke='%23881124' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' x='0px' y='0px' stroke-linecap='round' stroke-linejoin='round' stroke-width='14' %3E%3Cline x1='64' y1='20.5' x2='109' y2='65.5'%3E%3C/line%3E%3Cline x1='64' y1='20.5' x2='19' y2='65.5' %3E%3C/line%3E%3C/svg%3E");
--iconMapPin_garnet: url("data:image/svg+xml,%3Csvg height='100px' width='100px' fill='%23881124' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100'%3E%3Cpath d='M82.1,34.9C80.9,19.2,68.1,6.5,52.3,5.4C33.5,4.1,17.8,19,17.8,37.6c0,6.7,2,12.9,5.5,18c4.2,6.2,16.2,23.7,22.6,33.1 c2,2.9,6.3,2.9,8.2,0c6.4-9.3,18.4-26.9,22.6-33.1C80.7,49.8,82.7,42.6,82.1,34.9z M50,56c-10.2,0-18.5-8.3-18.5-18.5 S39.8,19,50,19c10.2,0,18.5,8.3,18.5,18.5S60.2,56,50,56z'%3E%3C/path%3E%3C/svg%3E");
}
/*
* Helper Classes
*/
.hideForMobile, .hideForTablet {
display: none;
}
html {
scroll-behavior: smooth;
@media (prefers-reduced-motion: reduce) {
scroll-behavior: auto;
}
}
.js-lazyload {
background-image: none !important;
}
/*
* Site Structure
*/
.body-area {
min-height: 35vw; /* approximates a sticky footer w/o much trouble */
}
/* global navigation */
#globalNav {
font-weight: 300;
background: hsl(350, 78%, 30%);
padding: 5px 1em;
height: 3em;
text-align: center;
position: relative;
font-size: 14px;
.wrapper {
height: 100%;
position: relative;
}
}
#globalMenuButton, #global�㽶��ƵButton {
color: #fff;
text-transform: uppercase;
border: none;
height: 100%;
line-height: 3em;
font-size: 0;
display: block;
padding: 0 2em;
background-position: center 10px;
background-repeat: no-repeat;
width: 3rem;
font-weight: 400;
text-decoration: none;
}
#globalMenuButton {
float: left;
background-image: var(--iconMenu_white);
background-size: 27px;
.jqActive {
background-image: var(--iconClose_white);
background-size: 20px;
}
}
#globalWordmark {
background-image: url("/wp-content/themes/b/bates-framework/styles/images/wordmark-white.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
height: 100%;
width: 80px;
border: none;
display: inline-block;
-webkit-backface-visibility: hidden; /* To fix a bug in webkit where the wordmark was having jagged edges occasionally. @see http://stackoverflow.com/a/6898097/362769 */
}
#global�㽶��ƵButton {
float: right;
background-image: var(--icon�㽶��Ƶ_white);
background-size: 20px;
&.jqActive {
background-image: var(--iconClose_white);
}
}
#global�㽶��Ƶ {
overflow: hidden;
width: 0px;
height: 0;
float: right;
transition-property: width, background-color;
transition-duration: .2s;
background-color: #fff;
border-radius: 15px;
margin-top: 3px;
position: relative;
&.jqActive {
width: 50vw;
height: 2.4em;
padding: 0 0 0 7px;
}
& input[type="text"] {
border: none;
height: 0;
width: 0;
}
/* take away the focus blue border */
& input[type="text"]:focus {
outline: none !important;
box-shadow: none !important;
}
&.jqActive input[type="text"] {
width: 90%;
height: 100%;
}
& input[type="submit"] {
background-image: var(--icon�㽶��Ƶ_white);
background-repeat: no-repeat;
background-position: center;
background-size: 17px;
background-color: hsl(0, 0%, 60%);
background-position: center 8px;
height: 0;
width: 0;
border: none;
font-size: 0;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
border-radius: 0; /*iOS*/
}
&.jqActive input[type="submit"] {
width: 35px;
height: 120%;
}
}
.drawerPointer {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid var(--colorGarnet_dark2);
width: 0;
height: 0;
position: absolute;
display: none;
}
#globalNav .drawerPointer {
bottom: -5px;
left: 1.2em;
}
#globalMenu {
background: var(--colorGarnet_dark2);
color: var(--colorGray_light);
display: none;
position: relative;
padding: 2em;
overflow: auto;
border-bottom: 2px solid #000;
}
header {
padding: 10px 0 20px;
background-size: auto;
overflow: auto;
text-align: center;
}
.toggleSubMenu {
position: absolute;
display: block;
height: 33px;
width: 33px;
background-color: hsla(0, 0%, 10%, .2);
right: 5px;
top: 5px;
border-radius: 2em;
cursor: pointer;
transition: .2s transform;
&:before,
&:after {
content: '';
display: block;
position: absolute;
background: hsl(0, 0%, 100%);
width: 12px;
height: 2px;
left: 5px;
top: 5px;
border-radius: 2px;
}
&:before {
transform: rotate(45deg);
left: 7px;
top: 17px;
}
&:after {
transform: rotate(-45deg);
left: 15px;
top: 17px;
}
&.jqActive {
transform: rotate(180deg);
}
}
#globalMenu {
& ul a {
color: inherit;
border: none;
text-decoration: none;
}
& a:hover, & a:active {
text-decoration: underline;
}
& ul {
list-style-type: none;
margin: 0;
position: relative;
}
& li {
padding: .8em 0;
font-weight: 700;
}
& ul ul {
display: none;
padding-top: .5em;
padding-left: 1em;
color: hsl(22, 11%, 72%);
}
& .btn {
display: inline-block;
padding: .8em;
border: none;
border-radius: 4px;
font-weight: 300;
margin-right: 5px;
font-style: normal;
color: #fff;
background-color: #881124;
text-decoration: none;
}
& a.btn:hover, & a.btn:active {
text-decoration: none;
background-color: hsl(350, 100%, 22%);
box-shadow: 0 0 3px hsla(0,0%,0%,.2);
}
}
#globalMenu1 ul ul li {
font-weight: 400;
}
.button-section {
text-align: left;
padding: 1em 0;
float: left;
width: 50%;
font-style: italic;
box-sizing: border-box;
}
.global-menu2-col2.button-section {
text-align: center;
}
#globalMenu {
.btn.quad {
background: var(--colorGray_light);
color: var(--colorBlue);
transition: .3s background;
}
.btn.quad:hover {
background: white;
}
}
.tagline {
display: none;
font-weight: 300;
text-shadow: 0 0 4px hsla(0,0%,0%,.4);
}
#site-nav {
display: none;
text-align: left;
clear: both;
font-weight: 400;
position: relative;
}
#toggleSiteNav {
text-transform: uppercase;
color: #fff;
font-size: .9em;
border-radius: 3px;
display: inline-block;
border: none;
padding: 1.5em 1.1em 1.5em 3.9em;
background-image: url(/wp-content/themes/b/bates-framework/styles/images/global-menu-site_white.png);
background-position: 1em 13px;
background-repeat: no-repeat;
background-size: 22px;
background-color: hsl(0, 0%, 20%);
text-align: left;
width: 77px;
margin: 1em auto 0;
position: relative;
.drawerPointer {
bottom: 0;
left: 4.5em;
border-bottom-color: hsl(0, 0%, 20%);
}
&.jqActive {
background-position: 1em -62px;
border-radius: 3px 3px 0 0;
.drawerPointer {
display: block;
}
}
}
#site-nav {
& li {
position: relative;
}
& ul ul {
display: none;
padding-left: 1em;
/* bumped to 101 because gallery-slideshow is using 100 to stack it's slides
* and it's done programmatically via js and can't be modified. - JP
*/
z-index: 101;
}
& li a {
box-sizing: border-box;
padding: 1em 2em;
width: 73%;
line-height: 1.2em;
}
/* if it's not a link, don't make it look like one */
& li a[href="#"] {
cursor: text;
}
& .toggleSubMenu {
background-color: hsla(0,0%,10%,.8);
background-position: center;
}
}
a.nav-menu-context-edit-link[id^="nav-menu-context-edit-link"] {
position: absolute;
top: 2px;
right: 2px;
background: hsla(0,0%,0%,.5);
color: #fff;
border: none;
display: inline-block;
padding: 4px;
border-radius: 3px;
font-size: .8em;
text-decoration: none;
}
a.nav-menu-context-edit-link:hover {
border: none;
text-decoration: underline;
}
/* add class "hide" to a WP nav menu item to, uh, hide it. */
li.menu-item.hide {
display: none !important;
}
nav ul {
margin: 0;
}
nav a {
display: block;
text-decoration: none;
border-bottom: none;
}
.wrapper {
margin-left: auto;
margin-right: auto;
/* instead of just starting with the max-width, we'll have to do it this way, */
/* because the former is causing some overflow problems in iPhone. */
max-width: 100%;
@media(min-width: 952px){
max-width: 952px;
}
}
/* The next two rules make author supplied images not
* hang off the screen on small-screen devices.
*/
.wpcontent-area {
box-sizing: border-box;
& img {
max-width: 100%;
height: auto;
display: block;
}
/* But images in tables shouldn't have max-width */
& table img {
max-width: none;
}
}
.main-content {
margin-top: 2em;
margin-bottom: 2em;
padding-left: 4%;
padding-right: 4%;
}
.body-area p.byline {
border-bottom: 1px solid hsl(0, 0%, 90%);
padding-bottom: 1em;
font-size: .9em;
margin-bottom: 1em;
}
.breadcrumb {
font-size: 1.1em;
box-sizing: border-box;
clear: both;
background: #F6F6F6;
overflow: hidden;
white-space: nowrap;
/* Child <a> has padding-top & bottom of 1em, plus the font-size is 1em high (inherited from this);
Taking away this explicit height adds a tiny spacing under the a links on small views. Not sure why ??
*/
height: 3em;
* {
position: relative;
}
& a {
font-size: inherit;
box-sizing: border-box;
color: #545454;
text-decoration: none;
padding: 1em 1em;
overflow: hidden;
white-space: nowrap;
display: inline-block;
/*box-shadow: inset -5px 0 3px rgba(51, 51, 51, 0.1);*/
/* Use the box-shadow rules instead of the background-image stuff for a
* flat edged item. It looks a little less like a breadcrumbs and more
* like tabs.
*/
background-image: url('/wp-content/themes/b/bates-framework/styles/images/bc-fadebg-arrow.png');
background-position: 101% top;
/* 101 adds a perceived tiny bit of curve to the arrow. This solves a
* problem wherein 1 pixel of font seems to stick out past the
* arrow. Here's why it looks that way:
-------------------------------+
X
XX
X
XX XXX X
XX XX XXXXXXX
XX XX XXX
XXX XXXXXXXXXXX XX X
XXX XXXXXXXXX XX X
XX XX XX X
XX XX XXXXX X
XX XX XXXXX XX
XX XX XXXXX XXX
XX XX XX XX
XX XX XX X
XX XX XX XX
XX XX XXX XXXX
XXX XXX XXXXXX XXX
XXX XXX XXXXXX
XX
XX
XX
XX
XX
----------------------------+
The arrow point is just a background image.
Change the value to 100% for a regular pointy arrow
*/
background-size: contain;
background-repeat: no-repeat;
}
& a.bc-link {
transition-property: width;
transition-duration: .5s;
&:hover {
color: #000;
}
}
& a.bc-hiding {
width: 1vw !important;
}
& a.bc-clicked {
/*width: 12em !important;*/
width: 11em !important;
text-decoration: underline;
&:hover {
text-decoration: underline;
}
}
& a.bc-home-link {
color: currentColor;
font-weight: bold;
width: 3.6em;
padding-top: .8em;
padding-bottom: .7em;
& svg {
height: 1.2em;
width: 1.2em;
fill: currentColor;
}
&.bc-clicked {
width: 5em !important;
}
&:before {
content: '';
}
}
& a.bc-current-page,
& a.bc-fakelink
{
color: #222;
text-decoration: none;
background-image: none;
/*box-shadow: none;*/
pointer-events: none;
}
& a.bc-current-page:hover {
cursor: text;
}
}
.sidebar {
margin: 0 2% 2%;
border-top: 1px solid silver;
padding-top: 1em;
clear: both;
}
a.wordmark {
text-decoration: none;
font-family: "Sabon Next W01";
font-weight: 500;
}
footer {
background: #111;
color: #999;
padding: 2.5em 1.5em;
overflow: auto;
clear: both;
font-weight: 300;
line-height: 1.5em;
font-size: 1.1em;
text-align: center;
& ul {
list-style-type: none;
margin-left: 0;
}
& li {
padding: .2em;
font-weight: 400;
}
& h1 {
font-family: inherit;
font-size: 3em;
font-weight: inherit;
color: #fff;
margin-top: 0;
}
& a {
color: inherit;
}
& a:hover, & a:active {
color: #C8C6C3;
}
& .campaign-column {
margin: 1em 0 2em;
}
& .campaign-column p {
margin: 1em 0;
}
& .campaign-column img {
width: 170px;
max-width: 100%;
}
& .campaign-column a {
color: #fff;
}
& .wrapper {
overflow: auto;
}
}
#lastCallBtn {
background-color: #881124;
background-image: url('data:image/png;base64,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');
background-size: 25px;
background-repeat: no-repeat;
background-position: 14px 12px;
font-size: 1.2em;
color: #fff;
text-align: center;
display: inline-block;
border-radius: 4px;
padding: .9em .9em .9em 3em;
margin: 1.5em auto 2em;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
#socialFooter {
margin-top: 2em;
/* to avoid clipping the X outline */
padding-top: 2px;
display: grid;
grid-auto-flow: column;
justify-content: center;
gap: 1em;
& a {
height: 40px;
width: 40px;
background-color: gray;
border-radius: 3px;
background-image: url(/wp-content/themes/b/bates-framework/styles/images/icons/social/global-social-icons-02.svg);
background-size: 120px 80px;
transition: all .1s ease-in-out;
}
}
#footer-facebook {
background-position: left top;
&:hover {
background-color:#3B5998;
}
}
#footer-snapchat {
background-position: right top;
&:hover {
background-color:#FFFC00;
}
}
#footer-instagram {
background-position: left bottom;
&:hover {
background-image:
url(/wp-content/themes/b/bates-framework/styles/images/icons/social/global-social-icons-02.svg),
url(/wp-content/themes/b/bates-framework/styles/images/icons/social/instagram-gradient2-export.jpg)
;
}
}
#footer-youtube {
background-position: right bottom;
&:hover {
background-color:#CD201F;
}
}
a#footer-twitter {
background-image: url( /wp-content/themes/b/bates-framework/'styles/images/icons/social/global-social-icon-x-nopad.svg' );
background-size: 66%;
background-position: center;
background-repeat: no-repeat;
&:hover {
background-color: #000;
outline: .5px solid hsl( 0 0% 38% );
outline-offset: 1px;
}
}
a#footer-linkedin {
background-image: url("/wp-content/themes/b/bates-framework/styles/images/icons/social/global-social-icon-linkedin.svg");
background-size: contain;
background-repeat: no-repeat;
&:hover {
background-color: #0077B5;
}
}
a#footer-tiktok {
background-image: url("/wp-content/themes/b/bates-framework/styles/images/icons/social/global-social-icon-tiktok.svg");
background-size: contain;
background-repeat: no-repeat;
&:hover {
background-color: #fe2c55;
}
}
/****/
@media (min-width:550px) {
.hideForMobile {
display: block;
}
span.hideForMobile, img.hideForMobile {
display: inline;
}
#globalMenuButton, #global�㽶��ƵButton {
padding: 0 0 0 30px;
font-size: 1em;
background-position: left 11px;
}
#globalMenuButton {
background-size: 22px;
}
#global�㽶��ƵButton {
background-size: 18px;
width: auto;
}
#globalNav .drawerPointer {
left: 1.1em;
}
#globalMenu {
box-sizing: border-box;
font-size: 1.1em;
padding: 1.2em;
.toggleSubMenu {
display: none;
}
.button-section {
padding: 27px 2% 0;
text-align: left;
}
& li {
padding: .5em 0;
}
& ul ul {
display: block !important;
padding-left: 0;
}
}
#globalMenu1 > ul,
#globalMenu2 ul {
width: 46%; /* x2 = 92 */
padding: 2%; /* x4 = 8 */
box-sizing: inherit;
float: left;
}
#toggleSiteNav {
float: right;
margin-top: 1.3em;
background-size: 18px;
background-position: 1em 15px;
left: auto;
margin-right: 2em;
margin-bottom: 0;
&.jqActive {
border-radius: 3px 3px 0 0;
background-position: 1em -46px;
}
}
#site-nav {
position: relative;
top: -8px;
& li a {
width: 80%;
}
}
header {
text-align: left;
& h1 {
float: left;
max-width: 68%;
}
/* at this width, js takes the .tagline out of the h1 and inserts it below
* the site menu
*/
.tagline {
display: block;
font-size: 1.2rem;
clear: left;
opacity: .9;
}
}
.button {
max-width: 200px;
}
.wpcontent-area {
& img {
/* backwards compat style pre WP 5.0 */
display: inline;
}
& figure img {
display: block;
}
}
.halfs, .thirds, .fourths {
box-sizing: border-box;
float: left;
}
.halfs {
width: 50%;
}
.thirds {
width: 33%;
}
.fourths {
width: 50%;
}
footer {
text-align: left;
& > .wrapper {
display: grid;
grid-template-columns: 60% 40%;
gap: 2em;
align-items: flex-start;
}
.campaign-column {
margin: 0;
padding-right: 2em;
}
}
.breadcrumb a {
background-position: 100% top;
}
#socialFooter {
grid-column: 2;
grid-template-columns: repeat( 3, 40px );
grid-auto-flow: row;
}
} /* end min-width:550 */
/***/
@media (min-width:800px) {
.hideForTablet {
display: block;
}
span.hideForTablet, img.hideForTablet {
display: inline;
}
header {
background-size: cover;
padding-bottom: 0;
overflow: visible;
& h1 {
float: none;
max-width: none;
margin-left: 0;
}
/* at this width, js makes sure .tagline to within the h1 element inside header*/
.tagline {
margin: 10px 0 0 0;
line-height: 1em
}
}
#global�㽶��Ƶ {
margin-top: .5rem;
&.jqActive {
height: 1.7em;
width: 175px;
& input[type="submit"] {
background-position: center 4px;
background-size: 14px;
width: 30px;
}
}
& li {
padding: .5em 0;
}
}
#globalMenu1,
#globalMenu2 {
width: 46%;
padding: 0;
box-sizing: inherit;
float: left;
}
#globalMenu2 {
width: 54%;
.global-menu2-col1 {
width: 43%; /*56%*/
}
.global-menu2-col2 {
width: 48%; /*36%;*/
}
.global-menu2-col2.button-section {
margin-left: 4%;
}
}
#globalNav .button-section {
padding-top: 11px;
}
/**
* Sticky Global Nav
**/
#globalNav.fixedGlobal {
position: fixed;
z-index: 102;
width: 100%;
height: 3.3rem;
box-sizing: border-box;
box-shadow: 0 1px 5px hsla(0, 0%, 0%, 0.4);
&.jqActive {
box-shadow: none;
}
& ~ .body-area {
padding-top: 3.3rem;
}
#globalWordmark {
background-position: center 9px;
}
& + #globalMenu {
padding-top: 4.5rem;
position: fixed;
z-index: 101;
width: 100%;
box-sizing: border-box;
}
}
#toggleSiteNav {
display: none;
}
.toggleSubMenu {
display: none;
transform: rotate(-90deg);
}
#site-nav {
display: block;
position: relative;
top: initial;
font-size: 1em;
& ul ul .toggleSubMenu {
display: block;
background-color: transparent;
}
& ul ul li.menu-item-has-children > a {
padding-right: 32px;
}
& > ul {
position: relative;
display: -webkit-flex;
display: flex;
/* This makes the site menu items not wrap, but just go off the right side of the screen */
/* white-space: nowrap;*/
}
& li {
position: relative;
display: inline-block;
a {
display: inline-block;
padding: 1em;
line-height: 1em;
width: 100%; /* overriding earlier width */
&:active {
background: none;
box-shadow: none;
}
}
}
/* The submenu dropdowns */
& ul ul {
padding-left: 0;
position: absolute;
left: 0;
width: 260px;
white-space: normal;
& li {
display: block;
}
& a {
border: none;
box-sizing: border-box;
}
}
& li:hover > ul,
& li:focus > ul,
& li.js-focused > ul {
display: block;
}
& ul ul ul {
left: 100%;
top: 0;
}
}
/* end submenu drops
*/
.main-content.with-sidebar {
width: 66%;
box-sizing: border-box;
float: left;
}
.breadcrumb {
padding-left: .5em;
height: 2.5em;
& a {
font-size: .84em;
font-weight: 400;
padding: 1em .2em 1em 2em;
border-bottom: 2px solid transparent;
background: none;
}
& a.bc-link:hover {
color: #981328;
}
& a:before {
padding: 0 1em 0 .5em;
content: '\232A';
font-weight: bold;
transform: rotateX(-48deg);
position: absolute;
left: 0;
top: .5em;
opacity: .3;
font-size: 1.5em;
}
& a:hover:before {
color: #777; /*fake out */
}
& a:after {
display: block;
position: absolute;
right: 0;
height: 100%;
width: 10%;
}
& a.bc-hiding {
width: auto !important;
}
& a.bc-home-link {
width: auto;
}
.bc-current-page {
pointer-events: none;
}
}
.sidebar {
width: 33%;
box-sizing: border-box;
float: right;
margin: 2em 1% 0 0;
padding-top: 0;
padding-left: 2%;
border: 0;
clear: none;
}
footer > .wrapper {
grid-template-columns: 360px 1fr 1fr;
row-gap: 0;
}
.footer-links-wrap {
display: contents;
}
#socialFooter {
margin-top: 0;
grid-column: 3;
grid-row: 2;
}
#footer-twitter {
clear: right;
}
.fourths {
width: 25%;
}
} /* end min-width: 800px */
/***/
@media (min-width:1024px){
.main-content {
padding-right: 0;
padding-left: 0;
}
img.size-large {
width: 100%;
}
#site-nav li a {
font-size: 1em;
padding-top: 1.1em;
padding-bottom: 1.1em;
}
.breadcrumb {
padding-top: .2em;
padding-left: 0;
height: 2.8em;
font-size:1.1em;
}
} /* end min-width: 1024px
/***/
@media (min-width:1200px){
#globalNav {
height: 4em;
}
#globalWordmark {
width: 100px;
}
#globalMenuButton, #global�㽶��ƵButton {
background-size: 27px;
padding-left: 35px;
line-height: 3.7em;
font-size:1.1em;
}
#globalMenuButton {
background-size: 26px;
background-position: left 18px;
}
#global�㽶��ƵButton {
background-size: 23px;
background-position: left 17px;
}
#global�㽶��ƵButton.jqActive {
background-position: left 15px;
}
#global�㽶��Ƶ {
&.jqActive {
height: 2.2em;
width: 240px;
margin-top: .7rem;
& input[type="submit"] {
background-size: 17px;
background-position: center 6px;
width: 35px;
}
}
& input[type="text"] {
font-size: 1em;
}
}
.body-area {
min-height: 25vw;
}
/**
* Sticky Global Nav
**/
.fixedGlobal #globalWordmark {
background-position: center 13px;
}
#globalNav.fixedGlobal {
height: 4.1rem;
}
.body-area.fixedGlobal {
padding-top: 4.1rem;
}
.fixedGlobal + #globalMenu {
padding-top: 5rem;
}
#globalNav.fixedGlobal ~ .body-area {
padding-top: 4.1rem;
}
footer > .wrapper {
grid-template-columns: 360px 1fr 1fr 1fr;
}
footer #socialFooter {
grid-row: auto;
grid-column: auto;
}
} /* end min-width: 1200px */
/***/
@media (min-width: 1400px) {
.body-area {
min-height: 20vw;
}
.wrapper {
max-width: 1200px;
}
#site-nav {
font-size: 1.15em;
& ul ul {
width: 330px;
line-height: 1.2em;
& li a {
line-height: 1.2em;
}
}
}
.toggleSubMenu {
top: 13px;
}
.main-content.with-sidebar {
width: 70%;
}
.sidebar {
width: 28%;
margin-right: 1em;
}
#globalMenu1,#globalMenu2 {
font-size:1.2em;
}
.breadcrumb {
font-size: 1.2em;
height:3em;
}
.breadcrumb a:before {
top: .6em;
}
footer > .wrapper {
grid-template-columns: 460px 1fr 1fr 1fr;
}
}
/* hide the WebFonts popup thingie */
#mti_wfs_colophon {
display: none !important;
}