/** * TABLE OF CONTENTS * * # BASE STYLES * ## Font styles * ## Display Styles * ## Link Rules * ## List styles * ### Social Link List - Part 0.1 * ### Target Menu Link List * ## Blockquote Styles * ## Horzontal Line Styles * ## Heading Styles * ## Code/Pre Styles.multi-media_wrapper.multi-media_wrapper-image-only:empty * ## Clearfix Rules * ## Spacing Classes * # BOXED SECTION * ## Boxed Section Layout * ### Boxed Section Legacy Fixes * # MEDIA HEADER STYLES * ## Media Button Rules * ## Media List Spreads * # MAIN CONTENT LINKS * # RANKING DECORATIONS * # OTHER CONTENT LINKS * # FIGURES * # TABLES * ## Striped Tables * ## Lined Tables * ## Sortable Tables * ## Overflow Tables * # BUTTONS * # IMAGE FLOAT CLEARS * # SKIP LINKS * # MAIN NAV * ## Main Nav Modifier Styles * ## Logo Styles * # SEARCH BOX STYLES * # SITE HEADER * ## Header logo for Banner iframes * ## Top Banner Wrap * ## Header triggers * # SITE TITLE * ## NEW Sitetitle Logo * ## 2021 Sitetitle * ### Weather Widget * # GOLD BAR HEADING * # NAVIGATION * ## Primary Menu link and button components * ## Audience Menu and Quick Links * ## Category Nav Bar * # BODY SECTION STYLES * # MEDIA STYLES * ## Media Jumbo * ## Media Full * ### Meida Info Popup/Caption * # MULTI MEDIA HERO SECTION (2021) * # ALIGNMENT STYLES * # BANNER IMAGE * # MOVIE WITH CAPTION * # SUB BANNER * # SLIDESHOWS * ## Control Dots * ## Arrows * # SIGNUP FORM * ## Signup Form Button * # SIDEBARS * ## Right Sidebar * ## Sidebar Content * ## Right Sidebar * # BREADCRUMBS * # LEFT NAVIGATION * ## Main Links * # ADM Sticky Buttons * # CONNECT * ## Feed Imports * ## Event Feeds * ## Latest Posts * ## List Spread * ## Black overlay styles * ## Legacy Go Cards * ## Top Title * # NEWS, EVENTS AND ANNOUNCEMENTS * ## Events * ### No Events * ## Announcements * # SKILLBAR * # SOCIAL LINKS - PART 1 * # FEEDS * # SCREEN READER CLASSES * # SOCIAL LINKS - PART 2 * # CRITICAL LEGACY TOUT CSS * # FLICKER PHOTO GALLERY * # PROFILE LIST * # JUMP MENU * # SLIDERS (AKA ACCORDIONS) * ## Toggle Wrap * ## FAQS * # FROMS * ## OU Campus form code * ## Form Vaildation * # INFORMATION AND ALERT SLIVER * ## Alert Dimiss Button * ## Alert Nav Modifications * ## Notice blocks * # ALUMNI PROFILES PERSONNEL * ## Random personnel focus * # ICONS * # GIVING/GIFT BOXES * # LOCALIST WIDGET * # WEATHER WIDGET * # SEARCH BOXES INSIDE THE CMS * # FOOTER * # ROW LEFT IMAGE * # VIDEO IN MEDIAZONE BANNER * # MULTICOLUMN GRID SETUP * # TYPOGRAPHY - PART 1 * # SPLIT CLASSES * @ LARGER 320px MEDIA QUERY * @ LARGER 415px MEDIA QUERY * @ LARGER THAN 501px MEDIA QUERY * @ LARGER THAN 650px MEDIA QUERY * @ LARGER THAN 881px MEDIA QUERY * @ LARGER THAN 1230 MEDIA QUERY * # FANCYBOX * # GRID RULES * ## Grid Containers Setup * ## Grid Columns Setup * ## Grid Even Columns * ### Grid Even Columns Small * ### Grid Even Columns Medium * ### Grid Even Columns Large * ### Grid Even Columns Extra Large * ## Grid Uneven Columns * ### Grid Uneven Columns Small * ### Grid Uneven Columns Medium * ### Grid Uneven Columns Large * ### Grid Uneven Columns Extra Large * # POPOVER BOX * ## Popover Content * ## Popover Open Button * # TYPOGRAPHY * # FOOTER - PART 2 * ## Footer Contact Info * ## Footer Overwrites * ## Bar Separtor * ## Footer Links * ## Pre Footer * ## Footer Menus * ## Footer Contact Area * ### Footer Contact * ### Footer Contact and Social Section * #### Logo * #### Social * ##### Social Icons - Part 3 * ## Post Footer * # TO TOP BUTTON * # NAMED TESTIMONIALS * ## Testimonial Container Styles * ### Testimonial Typography Styles * ## Testimonial Info * ## Testimonial Flipped * # SKILLBAR * # PERSON PROFILE * ## Contact info icons * ## Person Social Links * ## Person Interests * # CARDS * ## Card Setup Styles * ## Standard Card Styles * ### Card hero * ### Card Content Section * ### Card Play Button * ### Card modifiers * ## Go Cards * ## News Cards * ## Background Image Card * ## Detail cards * ### Flipped Card Details * ## Card Button * # SHUTTER BUTTON * ## Shutter Button Color Modifiers * ## Shutter Button Cover Slider * # NEW TOUTS * ## Tout Colors & ## Tout Stat Modifiers * ## Tout with background Image * # SECTION FIT * ## Section Fit Last * ## Section Fit with Background * ## Section Fit Author Quote * ## Section Fit Background Color Styles * # BACKGROUND COLORS */ /* ========================================================================== # BASE STYLES ========================================================================== */ /** * Styles that are used to set up defaults for the page. */ @charset "UTF-8"; /* prettier-ignore */ /* @import url(//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,300,400,600,700&display=swap); */ @font-face { font-family: 'heading-characters'; font-style: normal; src: local('Georgia'), local('Times'), local('Times New Roman'); } @font-face { font-family: 'heading-numerals'; src: local('Times'), local('Times New Roman'); unicode-range: U+30-39; } * { margin: 0; } html, body { height: 100%; min-height: 100%; -webkit-font-smoothing: subpixel-antialiased; } .stick { min-height: 100%; /* margin: 0 auto -325px; */ /* margin: 0 auto -20.3125rem; */ } body { position: relative; /** * Set font-size to make em's to be base 10. Example: 10em -> 10px. * In order to convert ems to rems the general multiplication is 0.625. * Be wary of this conversion, a lot of elements have parent elements affecting the em font size. */ font-size: 62.5%; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; line-height: 1; } body, ul:not([class]) { color: #111; } body.pointer { cursor: pointer; } /* TODO: Move this further down the stylesheet */ input[type='submit'] { -webkit-border-radius: 0; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; } ul { padding-inline-start: 1.25em; } img { height: auto; /* font-size: 14px; */ color: #757575; font-weight: 600; line-height: 1.125; word-wrap: break-word; } /* ----------------- */ /* ## Font styles */ /* ----------------- */ html.font-very-small { font-size: 0.75rem; } html.font-small { font-size: 0.9rem; } html.font-large { font-size: 1.2rem; } html.font-very-large { font-size: 1.75rem; } @media (min-width: 2400px) { html.font-very-large { --max-width: 2048px; } } html.font-very-large .body-section * { -webkit-hyphens: auto; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-last: always; -webkit-hyphenate-limit-zone: 8%; -moz-hyphens: auto; -moz-hyphenate-limit-chars: 6 3 3; -moz-hyphenate-limit-lines: 2; -moz-hyphenate-limit-last: always; -moz-hyphenate-limit-zone: 8%; -ms-hyphens: auto; -ms-hyphenate-limit-chars: 6 3 3; -ms-hyphenate-limit-lines: 2; -ms-hyphenate-limit-last: always; -ms-hyphenate-limit-zone: 8%; hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; overflow-wrap: break-word; } p, [role='paragraph'] { /* font-size: 1.65em; */ font-size: 1.03125rem; /* 1.15625rem */ line-height: 1.7; } li p { font-size: 1em; } p.small { font-size: 1.5em; } .small { font-size: 0.9em; } .small a { text-underline-offset: 0.125em; } ul.small li, ol.small li { font-size: 0.875rem; } p.smaller { font-size: 1.3em; } .smaller { font-size: 0.73em; } p.smallest { font-size: 1em; } p .smallest { font-size: 0.6em; } .large { font-size: 180%; } .larger { font-size: 210%; } .largest { font-size: 225%; } /* These classes are used super specifically so they are designed to override any other font-weights */ .text-thin { font-weight: 300 !important; } .text-normal { font-weight: 400 !important; } .text-thick { font-weight: 600 !important; } .text-thicker { font-weight: 700 !important; } .text-uppercase { text-transform: uppercase; } p.date { float: left; margin: 0; } p.left, a.left, td.h2left { float: none; text-align: left; } p.right, a.right, td.right { float: none; text-align: right; } p.right .button { clear: both; } .more { float: right; margin: 0 0 0.25rem; font-size: 1rem; text-align: right; clear: both; } p.more { /* margin-bottom: 0.5em; */ margin-bottom: 0.53125rem; text-align: right; } p.preview, .theme { /* font-size: 1.7em; */ font-size: 1.0625rem; line-height: 1.5; } .text-left { text-align: left; } .text-right { text-align: right; } /* Center is legacy and should be fazed out eventually */ .text-center, .center { text-align: center; } p.center > img:only-child { display: inline-block; } .underline-on-hover { text-decoration: none; } a.nothing.underline-on-hover { text-decoration: none !important; } .underline-on-hover:hover { text-decoration: underline; } /* ----------------- */ /* End Font styles */ /* ----------------- */ /* ------------------------- */ /* ## Display Styles */ /* ------------------------- */ /* This rule is to be used to override anything that has a display on it to it's inital value. */ /* Seems to have some issues that it turns div into displaying inline */ .display-initial { display: block; display: initial; display: unset; display: revert; } .column-inner.display-initial { display: block; } .hide-content, .hidden, .popup, .hide-750 { display: none; } @media only screen and (max-width: 650px) { .show-for-tablet { display: none; } } @media only screen and (max-width: 881px) { .show-for-desktop { display: none; } } @media only screen and (min-width: 881px) { .hide-for-desktop { display: none; } } .stack-x > * + * { margin-left: 1rem; margin-left: var(--stack-x-gutter, 1rem) !important; } .stack > * + * { margin-top: 1rem; margin-top: var(--stack-y-gutter, 1rem) !important; } /* ------------------------- */ /* End Display Styles */ /* ------------------------- */ /* --------------- */ /* ## Link Rules */ /* --------------- */ a, .button-link, .mimic-link { padding-left: 0.125rem; padding-right: 0.125rem; color: inherit; text-decoration: underline; text-decoration: solid underline currentColor 3px; transition: box-shadow 0.2s, text-decoration 0.2s 0s; } /* Fix underlines on Firefox, they would break up too much without. */ /* @link: https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css */ @-moz-document url-prefix() { a, .button-link, .mimic-link { text-underline-offset: 3px; } } a:hover, .button-link:hover, .mimic-link:hover { text-decoration: none; } a:focus, .button-link:focus, .mimic-link:focus { outline: 1px dashed #000; } *:focus-within:hover, a:focus:active { outline: none !important; } .main a:hover, .main a:focus, .main .button-link:hover, .main .button-link:focus, .main .mimic-link:hover, .main .mimic-link:focus { text-decoration: none; text-decoration: solid underline transparent 3px; transition: text-decoration 0s; } .main a:hover, .main .button-link:hover, .main .mimic-link:hover { color: #000; box-shadow: inset 0 -1.5em 0 #fc0, 0 2px 0 0 #fc0; transition: box-shadow 0.2s, text-decoration 0.2s 0s; } /* accessibility fix for hover links needing something other than color to distinguish them*/ .main p a:hover { outline: 1px dashed #000; } a.goto, [id='main_links'] a, .localist_widget_container a, .socialpubs-menu a, .small-story-wrapper a, a[data-linked-image], a[data-fancybox-group], a.no-hover { transition: text-decoration 0s; } a.goto:hover, [id='main_links'] a:hover, .localist_widget_container a:hover, .socialpubs-menu a:hover, .small-story-wrapper a:hover, .gift-buttons a:hover, a[data-linked-image]:hover, a[data-fancybox-group]:hover, a.no-hover:hover { box-shadow: none; transition: text-decoration 0s; } /* Library page fix */ .btn-fig-container a { display: inline; padding: 0; transition: text-decoration 0s; } .btn-fig-container a:hover { box-shadow: none; transition: text-decoration 0s; } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a, h1 > a:visited, h2 > a:visited, h3 > a:visited, h4 > a:visited, h5 > a:visited, h6 > a:visited, .right-sidebar a, .right-sidebar a:visited, .none a, .none a:visited, .nobullet a, .nobullet a:visited, .blue, .blue:visited, .content .blue, .content .blue:visited { padding-left: 0; padding-right: 0; color: #315196; text-decoration: underline; } .main h1 > a:hover, .main h2 > a:hover, .main h3 > a:hover, .main h4 > a:hover, .main h5 > a:hover, .main h6 > a:hover, .main h1 > a:focus, .main h2 > a:focus, .main h3 > a:focus, .main h4 > a:focus, .main h5 > a:focus, .main h6 > a:focus, .right-sidebar a:hover, .right-sidebar a:focus, .none a:hover, .none a:focus, .nobullet a:hover, .nobullet a:focus, .blue:focus, .blue:hover, .content .blue:focus, .content .blue:hover { color: #315196; text-decoration: none; box-shadow: none; } .breadcrumbs a:hover { text-decoration: none; box-shadow: none; } a:focus { z-index: 1; outline: 1px dashed #000; } .breadcrumbs a, .footer__pre-nav-wrapper a, footer a { text-decoration: underline; } .main [class*='background-'] a, .main [class*='background-'] a:visited, .main [class*='background-'] a:active, .main [class*='background-'] a:hover, .main [class*='background-'] a:focus, [class*='background-'] a, [class*='background-'] a:visited, [class*='background-'] a:active, [class*='background-'] a:hover, [class*='background-'] a:focus { color: inherit; } .background-black a, .background-dark-gray a { transition: text-decoration 0s; } .background-black a:hover, .background-dark-gray a:hover { box-shadow: none; } /* Copyrite symbol in footer to link to Directly Edit page */ #de, #de:hover, #de:focus { text-decoration: none; } /* --------------- */ /* End Link Rules */ /* --------------- */ /* ----------------- */ /* ## List styles */ /* ----------------- */ .full-width ul, .section-fit ul, .fancybox-inner ul, .full-width ol, .fancybox-inner ol { /* margin-bottom: 1.35em; */ margin-bottom: 0.84375rem; font-size: 1rem; -webkit-overflow-scrolling: touch; } .full-width ul li ul, .full-width ul li ol, .full-width ol li ol, .full-width ol li ul { /* margin-top: 0.3em; */ margin-top: 0.1875rem; margin-bottom: 0; } .none li ul { list-style-type: disc; } p + ul, p + ol { /* margin-top: -0.7em; */ margin-top: -0.4375rem; } /* ### Social Link List - Part 0.1 */ ul[class*='social-'] { margin: 0; padding: 0; overflow: visible; list-style: none; } /* * Overwite .full-width .sidebar-content ul * This will let us center social icons in the sidear */ .sidebar-content ul[class*='social-'] { padding-left: 0; } ul[class*='social-'] li { left: 0; display: inline-block; width: auto !important; margin-top: 0.8rem; margin-bottom: 0.8rem; padding-right: 0; } /* * Overwite ul.social-medium a * This will let us center social icons in the sidear */ .sidebar-content ul[class*='social-'] li a { margin-left: 0; } .full-width li, .fancybox-inner li, .section-fit li { line-height: 1.5; } /* Put spacing between list items that are being used as just list items. This will avoid putting extra spacing at the end of a list due to a `margin-bottom` Added the `:not([class])` so cards and other items that are not simple lists stay unaffected */ /* TODO: Go through and remove the fixes I made for all the problems this caused */ .full-width ul:not([class]) li + li, .fancybox-inner ul:not([class]) li + li, .section-fit ul:not([class]) li + li, .full-width .none:not(.tout-row) li + li:not(.column), .full-width .nobullet li + li:not(.column), .full-width .no-bullet li + li:not(.column), .section-fit .none:not(.tout-row) li + li:not(.column) { margin-top: 0.8rem; } .full-width li p { margin-bottom: 0; } .none, .full-width .none, .fancybox-inner .none { padding-inline-start: 0; list-style-type: none; } .full-width .none li { left: 0; } .full-width td > ul:last-child { margin-bottom: 0; } .nobullet, .nobullet ul, .nobullets, .nobullets ul, ol.nobullet, ol.nobullet ol, ol.nobullets, ol.nobullets ol { list-style: none; } ol, ol ol ol ol { list-style: decimal; } ol ol { list-style: lower-alpha; } ol ol ol { list-style: lower-roman; } /* ### Target Menu Link List */ .target-menu { display: table; width: 100%; text-align: center; table-layout: fixed; line-height: 1.75; } .target-menu > li { display: inline-block; margin: 0 !important; /* TODO: Remove this !important */ padding: 0 !important; /* TODO: Remove this !important */ } .target-menu > li::after { display: inline-block; padding: 0 0.5rem 0 0.8rem; content: '\2193'; } .target-menu > li:last-of-type::after { display: none; } .target-menu a, .target-menu a:visited { padding: 0 0.2em; color: #000; font-weight: 400; text-decoration: underline; text-decoration: solid underline #222 3px; transition: box-shadow 0.2s, text-decoration 0.2s 0s; } .target-menu a:hover, .target-menu a:focus { color: #000; } .target-menu a:hover { text-decoration: none; text-decoration: solid underline transparent 3px; box-shadow: inset 0 -1.5em 0 #fc0, 0 2px 0 0 #fc0; transition: box-shadow 0.2s, text-decoration 0.2s 0s; } body.reduced .target-menu a, body.reduced .target-menu a:hover { transition: box-shadow 0s, text-decoration 0.2s; } @media (prefers-reduced-motion) { .target-menu a, .target-menu a:hover { transition: box-shadow 0s, text-decoration 0.2s; } } /* End Target Menu Links */ /* ----------------- */ /* End List styles */ /* ----------------- */ /* ---------------------- */ /* ## Blockquote Styles */ /* ---------------------- */ blockquote, q { position: relative; /* display: flex; */ /* flex-direction: column; */ /* flex-wrap: wrap; */ width: auto; min-width: 6.25rem; margin: 1rem 0; padding-left: 0.75rem; font-weight: 300; font-size: 1.25rem; font-family: heading-numerals, heading-characters, serif; font-style: italic; line-height: 1.5; quotes: none; } blockquote::after, q::after { content: ''; content: none; } blockquote::before, q::before { position: absolute; width: 0.25rem; height: 100%; height: calc(100% + 0.25rem); background: #fc0; transform: translateX(-1rem); content: ''; } .right-sidebar aside blockquote { color: #222; font-size: 1.21875rem; } blockquote span, blockquote p span { display: block; padding-top: 0.1875rem; font-weight: 600; font-size: 0.85em; /* keep */ font-style: normal; line-height: 1.5; text-align: right; } blockquote span::before { content: '—'; content: '\2015\00a0'; } blockquote * { margin-bottom: 0; font-size: 1em; } blockquote a { text-decoration: underline; } blockquote a:active, blockquote a:focus, blockquote a:hover { text-decoration: none; } /* -- Blockquote styles -- */ .right-sidebar a.popup-link:focus { outline: 0; } .right-sidebar a:focus blockquote { outline: 1px dashed #000; outline-offset: 2px; } /* ---------------------- */ /* End Blockquote Styles */ /* ---------------------- */ /* -------------------------- */ /* ## Horzontal Line Styles */ /* -------------------------- */ /* Stylelint disabled for the height of the `hr` */ /* stylelint-disable */ /* override normalize.css height: 0 */ .main hr { height: 1px; } hr { clear: both; height: 1px; margin: 1rem 0; border: 0; background: #333; } /* stylelint-enable */ hr + h2 { padding-top: 0; } hr.dots { border-color: #333; border-style: dotted; border-width: 0 0 2px; background: transparent; } /* Stylelint disabled for the height of the `hr` */ /* stylelint-disable */ hr.gold, hr.yellow { height: 5px; background: #fc0; } /* stylelint-enable */ .right-sidebar hr { margin: 0.75rem 0; } /* -------------------------- */ /* End Horzontal Line Styles */ /* -------------------------- */ /* ---------------------- */ /* ## Heading Styles */ /* ---------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.2; } .full-width .h1, .h1 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h1, .full-width .h1-like, .h1, .h1-like { font-size: 1.875rem; } .full-width .h2, .h2 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h2, .full-width .h2-like, .full-width .card-heading.h2-like, .full-width .card-header.h2-like, /* overwrite .card .card-header */ .h2, .h2-like { font-size: 1.75rem; } .full-width .h3, .h3 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h3, .full-width .h3-like, /* overwrite .card .card-header */ .h3, .h3-like { font-size: 1.5rem; } /* TODO: this is weak, we should revisit heading sizes in general */ .card-heading.h3-like, .card-header.h3-like { font-size: 1.9375rem; } .full-width .h4, .h4 { margin-top: 0.5rem; margin-bottom: 1rem; color: #000; font-weight: 400; } .full-width .h4, .full-width .h4-like, .h4, .h4-like { font-size: 1.25rem; } .full-width .h5, .h5 { margin-top: 0.5rem; margin-bottom: 1rem; color: #000; font-weight: 400; } .full-width .h5, .full-width .h5-like, .h5, .h5-like { font-size: 1.125rem; } .full-width .h6, .h6 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h6, .full-width .h6-like, .h6, .h6-like { font-size: 1.0625rem; } @media (min-width: 650px) { .full-width .h1, .h1 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h1, .full-width .h1-like, .h1, .h1-like { font-size: 3rem; } .full-width .h2, .h2 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h2, .full-width .h2-like, .full-width .card-heading.h2-like, .full-width .card-header.h2-like, /* overwrite .card .card-header */ .h2, .h2-like { font-size: 2.5rem; } .full-width .h3, .h3 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h3, .full-width .h3-like, .full-width .card-heading.h3-like, .full-width .card-header.h3-like, /* overwrite .card .card-header */ .h3, .h3-like { font-size: 1.9375rem; } .full-width .h4, .h4 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h4, .full-width .h4-like, .h4, .h4-like { font-size: 1.5625rem; } .full-width .h5, .h5 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h5, .full-width .h5-like, .h5, .h5-like { font-size: 1.25rem; } .full-width .h6, .h6 { margin-top: 0.5rem; margin-bottom: 1rem; font-weight: 400; } .full-width .h6, .full-width .h6-like, .h6, .h6-like { font-size: 1rem; } } aside h2, aside h3, aside h4, aside h5, aside h6 { clear: both; color: #000; font-weight: 600; font-size: 1.2em; } aside .sidebar h2, .right-sidebar aside .movie-description h2 { /* font-size: 20px */ font-size: 1.25rem; } aside .sidebar h3 { color: #333; /* font-size: 1.29em */ font-size: 1.209375rem; } aside .sidebar h4, aside .sidebar h5, aside .sidebar h6 { color: #555; font-weight: 600; font-size: 1.15em; } aside .sidebar-nobox h2 { color: #000; /* font-size: 1.2em */ font-size: 1.078125rem; } aside .sidebar-nobox h3 { color: #333; /* font-size: 1.05em */ font-size: 0.984375rem; } aside .sidebar-nobox h4, aside .sidebar-nobox h5, aside .sidebar-nobox h6 { color: #555; /* font-size: 1em */ font-size: 0.984375rem; } h1 a, h1 a:visited, h1 a:hover, h1 a:active { color: #000; font-weight: inherit; text-decoration: none; } h2, .h2 { margin-top: 0.5rem; margin-bottom: 0.5rem; /* font-size: 2.9em; */ font-size: 1.875rem; color: #222; font-weight: 600; } .full-width h3, .fancybox-inner h3 { /* font-size: 2.4em; */ font-weight: 600; font-size: 1.625rem; line-height: 1.3; } .main-content h3 { color: #444; } h2 strong, .full-width h3 strong { font-weight: 600; } .full-width h4, .fancybox-inner h4 { color: #666; font-weight: 600; font-size: 1.9em; line-height: 1.3; } .full-width h5, .full-width h6 { color: #666; font-weight: 600; font-size: 1.8em; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; line-height: 1.3; } h1, h1.pagetitle { margin: 0 0 0.5rem; font-weight: 400; font-size: 3em; } h1.pagetitle { margin-bottom: 1.25rem; } .graybar { clear: both; /* margin-bottom: 0.5em; */ margin-bottom: 0.75rem; /* padding: 0.4em; */ padding: 0.625rem; overflow: hidden; line-height: 1.25; background: #ececec none repeat scroll 0 0; } h2.graybar { font-weight: 600; font-size: 2.65em; } #intro article > h2 { font-size: 1.5em; } #intro article > h3 { font-size: 1.3em; } #content_body h2 + h3 { margin-top: 0; } /* ---------------------- */ /* End Heading Styles */ /* ---------------------- */ /* TODO: Move this with other font rules. Be careful with it getting overwritten */ .georgia { font-family: heading-numerals, heading-characters, serif; } /* ---------------------- */ /* ## Code/Pre Styles */ /* ---------------------- */ /* TODO: Can we delete these rules */ code, pre { font-size: 1rem; word-wrap: break-word; } code { display: block; /* margin-bottom: 1.4em; */ margin-bottom: 1rem; padding: 0.25rem 0.75rem; border: dashed 2px #000; background-color: #fff2cb; } code strong { color: #cf173c; } code em { font-weight: 800; font-style: normal; } /* ---------------------- */ /* End Code/Pre Styles */ /* ---------------------- */ /* TODO: Move this with other positioning styles? */ .middle { margin: 0 auto; } .full-width figure.middle { display: flex; margin: 0 auto; } /* ---------------------- */ /* ## Clearfix Rules */ /* ---------------------- */ .clearer { clear: both; } .clearfix::before, .clearfix::after { display: table; clear: both; content: ''; } /* ---------------------- */ /* End Clearfix Rules */ /* ---------------------- */ /* ---------------------- */ /* ## Spacing Classes */ /* ---------------------- */ .section-padding { padding-top: 1rem; padding-bottom: 1rem; } .section-padding-2x { padding-top: 2rem; padding-bottom: 2rem; } .padding-top { padding-top: 1rem !important; } .padding-top-2x, .top-title h2.padding-top-2x { padding-top: 2rem !important; } .padding-top-3x { padding-top: 3rem !important; } .padding-top-4x { padding-top: 4rem !important; } .padding-top-5x { padding-top: 5rem !important; } .padding-bottom { padding-bottom: 1rem !important; } .padding-bottom-2x { padding-bottom: 2rem !important; } .padding-bottom-3x { padding-bottom: 3rem !important; } .padding-bottom-4x { padding-bottom: 4rem !important; } .padding-bottom-5x { padding-bottom: 5rem !important; } @media (max-width: 880px) { .medium-padding-top { padding-top: 1rem !important; } .medium-padding-top-2x { padding-top: 2rem !important; } .medium-padding-top-3x { padding-top: 3rem !important; } .medium-padding-top-4x { padding-top: 4rem !important; } .medium-padding-top-5x { padding-top: 5rem !important; } .medium-padding-bottom { padding-bottom: 1rem !important; } .medium-padding-bottom-2x { padding-bottom: 2rem !important; } .medium-padding-bottom-3x { padding-bottom: 3rem !important; } .medium-padding-bottom-4x { padding-bottom: 4rem !important; } .medium-padding-bottom-5x { padding-bottom: 5rem !important; } } .margin-top-0 { margin-top: 0 !important; } .margin-top { margin-top: 1rem !important; } .margin-top-2x { margin-top: 2rem !important; } .margin-top-3x { margin-top: 3rem !important; } .margin-top-4x { margin-top: 4rem !important; } .margin-top-5x { margin-top: 5rem !important; } .margin-bottom-0 { margin-bottom: 0 !important; } .margin-bottom { margin-bottom: 1rem !important; } .margin-bottom-2x { margin-bottom: 2rem !important; } .margin-bottom-3x { margin-bottom: 3rem !important; } .margin-bottom-4x { margin-bottom: 4rem !important; } .margin-bottom-5x { margin-bottom: 5rem !important; } /* ---------------------- */ /* End Spacing Classes */ /* ---------------------- */ /* ========================================================================== # BOXED SECTION ========================================================================== */ .boxed-section { position: relative; box-sizing: border-box; margin-bottom: 2rem; } .boxed-section * { box-sizing: inherit; } @media (min-width: 650px) { .boxed-section > div { display: flex; flex-wrap: wrap; } } .boxed-section.border { padding: 1.5rem; border: 1px solid #ccc; box-shadow: inset 0 -4px #fc0; } /* ------------------------ */ /* ## Boxed Section Layout */ /* ------------------------ */ @media (min-width: 650px) { .boxed-section .item, .boxed-section .full-column { flex: 1; margin-right: 3%; } } .boxed-section .item:last-of-type, .boxed-section .full-column:last-of-type { flex: 1; margin-right: 0; } @media (min-width: 881px) { .boxed-section.to .item:last-of-type, .boxed-section.ot .item:first-of-type, .boxed-section.to .full-column:last-of-type, .boxed-section.ot .full-column:first-of-type { flex: 0.33; } .boxed-section.to .item:first-of-type, .boxed-section.ot .item:last-of-type, .boxed-section.to .full-column:first-of-type, .boxed-section.ot .full-column:last-of-type { flex: 0.66; } } @media (min-width: 650px) and (max-width: 881px) { .boxed-section.four .item, .boxed-section.four .full-column { flex: 0.5; min-width: 45%; max-width: 50%; } .boxed-section.four .item:nth-of-type(2n), .boxed-section.four .full-column:nth-of-type(2n) { margin-right: 0; } } @media (min-width: 650px) and (max-width: 1200px) { .boxed-section.five .item, .boxed-section.five .full-column { flex: 0.33; min-width: 30%; max-width: 50%; margin-right: 3%; } .boxed-section.five .item:nth-of-type(3n), .boxed-section.five .full-column:nth-of-type(3n) { margin-right: 0; } } /* ------------------------ */ /* End Boxed Section Layout */ /* ------------------------ */ /* ### Boxed Section Legacy Fixes */ /* Go button fixes */ .boxed-section [data-ga='Go-Button']:link { color: inherit; text-decoration-color: currentColor; } .boxed-section [data-ga='Go-Button']:link:hover { text-decoration: none; box-shadow: none; } .boxed-section [data-ga='Go-Button']:hover h2 { text-decoration: none; } /* Boxed Section image width fix .boxed-section img[width] { width: auto; } */ /* Boxed Section Lists */ .boxed-section ul:not([class*='none']) { padding-left: 1.25em; } /* End Boxed Section Legacy Fixes */ /* ----------------- */ /* END BOXED SECTION */ /* ----------------- */ /* ========================================================================== # MEDIA HEADER STYLES ========================================================================== */ /** * Styles that impact the hero section the webpages. * Some more just above here for linking rules. */ /* ----------------------- */ /* ## Media Button Rules */ /* ----------------------- */ #media.jumbo .text .button, #media.jumbo .text .button-blank { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.5rem; /* height: 100%; */ border: 1px solid currentColor; border-radius: 5px; background-color: hsl(48, 100%, 50%); box-shadow: none; } #media.jumbo .text .list-spread li + li a { margin-top: 1rem; } [id='media'].jumbo .text a { color: inherit; width: auto; } @media (min-width: 650px) { #media.jumbo .text .button, #media.jumbo .text .button-blank { min-height: 3rem; } #media.jumbo .text .list-spread li + li a { margin-top: 0; } } #media.jumbo .text .button, #media.jumbo .text .button:visited { color: #000; } #media.jumbo .text .button:hover { color: #fff; background-color: hsla(0, 100%, 0%, 1); } #media.jumbo .text .button-blank { color: #fff; background-color: hsla(0, 100%, 0%, 0.5); } #media.jumbo .text .button-blank:hover { color: #000; background-color: hsla(48, 100%, 50%, 1); } /* ------------------------ */ /* End Media Button Rules */ /* ------------------------ */ /* ------------------------ */ /* ## Media List Spreads */ /* ------------------------ */ /* Pretty sure these are used for making buttons in the header be two columns. If so, that got superceded by the grid-row class and rules */ #media.jumbo .text .list-spread { display: flex; flex-direction: column; overflow: visible; } @media (max-width: 649px) { #media.jumbo .text .list-spread > li { width: 100%; } } @media (min-width: 650px) { #media.jumbo .text .list-spread { flex-direction: row; } } #media.jumbo .text .list-spread li { display: inline-flex; flex: 1 1 auto; } #media.jumbo .text .list-spread.two li { flex: 50 1 auto; } #media.jumbo .text .list-spread.three li { flex: 33 1 auto; } #media.jumbo .text .list-spread.four li { flex: 25 1 auto; } #media.jumbo .text .list-spread.five li { flex: 20 1 auto; } #media.jumbo .text .list-spread li .button { padding: 0.5rem; } /* ------------------------ */ /* End Media List Spreads */ /* ------------------------ */ /* ========================================================================== # RANKING DECORATIONS ========================================================================== */ /** * Rankings are used in the content editor to apply highlighting to text. * It can be used inline (span.ranking) or with a list (p.ranking). The list has no real congruence so a set of p tags are used. */ .ranking { color: #000; font-weight: 600; } span.ranking { font-size: 1.25em; } /* The strong tag is used to change the color of the inline element and make it slightly larger */ .ranking strong { color: #a42277; font-size: 1.05em; } /* This is inteded to make an entire single statistic stick out while inside a paragraph */ span.ranking span { font-size: 1.15em; } p.ranking { font-size: 2em; line-height: 1.5; } p.ranking strong { padding-right: 0.25rem; font-size: 1.3em; } p.ranking em { color: #666; font-weight: 400; font-size: 0.9em; } /* Intended to be used on rankings so we can make sources unique */ p.ranking br + em { display: inline-block; margin-top: 0.25rem; } p.ranking em a, p.ranking em a:focus, p.ranking em a:active, p.ranking em a:hover { padding-left: 0.25rem; font-style: normal; } /* TODO: Where is this used? Can we get rid of it */ p.ranking em a:hover { text-decoration: underline !important; } p.ranking a { font-weight: 600; } h3 + p.ranking { padding-top: 0.75rem; } /* ------------------------ */ /* End Ranking Decorations */ /* ------------------------ */ /* ========================================================================== # OTHER CONTENT LINKS ========================================================================== */ .show-hide { cursor: pointer; } /* ========================================================================== # FIGURES ========================================================================== */ /** * Figures(photos) and captions styles. */ figure.caption { display: flex; flex-direction: column; width: 100%; margin: 1.25rem 0; /* padding: 2%; */ /* background: #ececec; */ border-bottom: 1px solid #000; } figure.caption.left { margin: 0 1.25rem 1.5rem 0; } figure.caption.left.wide-img { margin: 0 0 1rem; } figure.caption.right { margin: 0 0 1.25rem 1.25rem; } figure.caption.right.wide-img { margin: 0 0 1rem; } .sidebar figure.caption { margin: 0.5rem 0; } figure.caption p { margin: 0; line-height: 1.5; } figure.caption figcaption * { font-size: 0.9rem; } figure.caption figcaption > * + * { margin-top: 0.75rem; } figure.caption img { max-width: 100%; margin: 0 auto; } figure.caption figcaption { margin-bottom: 0.175rem; padding: 0.5rem; font-size: 0.9rem; line-height: 1.25; text-align: left; } /* ========================================================================== # TABLES ========================================================================== */ /** * General table styles */ table { font-size: 1.45em; line-height: 1.5; } caption, h2.caption { margin: 0; padding-bottom: 0.25rem; color: #3b5682; font-weight: bold; font-size: 1.4rem; line-height: 1.5; text-align: center; } table > caption { padding: 0.5rem 0.25rem; border-top: 1px solid #000; color: #000; font-weight: normal; } h2 + table caption, h3 + table caption { margin-top: 1.25rem; } form table, li table, .sidebar table { font-size: 1em; } .sidebar table { width: 100%; } .sidebar table th { text-align: left; } .sidebar table td { padding-bottom: 0.15rem; } table p { margin-bottom: 0; font-size: 1em; } .full-width table ul, .full-width table ol { font-size: 0.9rem; } td, th[scope='row'] { padding: 0.25rem; } th { padding: 0.25rem; color: #333; font-weight: bold; font-size: 1.15em; text-align: left; vertical-align: bottom; } th[scope='row'] { font-weight: 600; font-size: 1.05em; text-align: left; vertical-align: middle; } /* ------------------- */ /* ## Striped Tables */ /* ------------------- */ .striped { max-width: 100%; margin: 0 0 2.5rem; border-top: 1px solid #ccc; border-bottom: 5px solid #000; border-collapse: separate; border-spacing: 0; background: #fff; } /* this isn't a great fix, but I needed to get it looking good before the end of the day */ .striped + .dept_unit { margin-top: calc(-2.5rem - 0.0625rem); /* 0.0625rem = 1px */ } .striped + .dept_unit > div > .personnel-interests:last-of-type { margin-bottom: 2.5rem; } /* end not the greatest fix */ .striped tfoot tr:first-of-type th, .striped tfoot tr:first-of-type td { border-top: 1px dashed #999; } .striped th { padding-left: 0.5rem; padding-right: 0.5rem; } .striped td, .striped th[scope='row'] { padding: 0.375rem 0.5rem; background: transparent; } .striped .alt td, .striped .alt th[scope='row'], .striped.auto tbody tr:nth-child(odd):not(.note) td, .striped.auto tbody tr:nth-child(odd):not(.note) th, .table-sortable tbody tr:nth-child(odd):not(.note) td, .table-sortable tbody tr:nth-child(odd):not(.note) th { background-color: #e0e0e0; background-color: rgba(0, 0, 0, 0.12); } .striped tbody > tr.spacer th, .striped tbody > tr.spacer td, .striped.auto tbody > tr.spacer th, .striped.auto tbody > tr.spacer td { height: 1em; border-top-width: 0; border-bottom: 1px solid #e1e1e1; vertical-align: middle; background: transparent; } .striped tr + tr.spacer th, .striped tr + tr.spacer td, .striped.auto tr + tr.spacer th, .striped.auto tr + tr.spacer td { height: 2.1em; border-top: 1px solid #ccc; vertical-align: bottom; } .striped tr.note th, .striped tr.note td, .lines tr.note th, .lines tr.note td, .striped tfoot th, .striped tfoot td, .lines tfoot th, .lines tfoot td { border-top: 1px solid #ccc; color: #000; font-weight: 300; font-size: 0.95em; background-color: #fff; } tfoot p, tr.note p, tfoot.note p { margin-bottom: 0.5rem; line-height: 1.5; } .striped tr.note th ul, .striped tr.note td ul, .lines tr.note th ul, .lines tr.note td ul, .striped tfoot th ul, .striped tfoot td ul, .lines tfoot th ul, .lines tfoot td ul { margin-bottom: 0; } .slider-content .striped { border-top-color: #222; border-bottom-color: #222; } .striped::-webkit-scrollbar { width: 0.875rem; height: 0.875rem; -webkit-appearance: none; } .striped::-webkit-scrollbar-thumb { border: 3px solid #fff; border-radius: 8px; background-color: rgba(0, 0, 0, 0.3); } .striped td.white { background: transparent; } /* ------------------- */ /* End Striped Tables */ /* ------------------- */ /* ----------------- */ /* ## Lined Tables */ /* ----------------- */ .lines { background-color: #fff; } .lines td, .lines th { border: 1px solid #666; border-width: 0 1px 1px 0; } .lines tr:first-child td, .lines tr:first-child th { border-top: 1px solid #666; } .lines tr td:first-child, .lines tr th:first-child { border-left: 1px solid #666; } /* ----------------- */ /* End Lined Tables */ /* ----------------- */ /* -------------------- */ /* ## Sortable Tables */ /* -------------------- */ table.table-sortable thead th div { position: relative; padding-left: 0.5rem; cursor: pointer; } table.table-sortable thead th span { cursor: pointer; } table.table-sortable thead th:focus { outline-offset: -0.125rem; } table.table-sortable thead th span::after { display: inline-block; width: 0.5rem; height: 0.875rem; margin-left: 0.25rem; background: url(../../images/icons/table-sort-sprite.png) no-repeat; content: ''; } .tablesorter .filtered { display: none; } table.table-sortable thead .tablesorter-headerAsc span::after, table.table-sortable thead .headerSortUp span::after { background-position: -7px 0; } table.table-sortable thead .tablesorter-headerDesc span::after, table.table-sortable thead .headerSortDown span::after { background-position: -14px 0; } /* -------------------- */ /* End Sortable Tables */ /* -------------------- */ /** * scw fix from IT calendar garbage. It looks soooo bad, this makes it tolerable. * @link https://www.banweb.mtu.edu/pls/owa/campus_visit.visit */ table#scw.scw { width: 100%; max-width: 21.25rem; table-layout: auto; background-color: #ececec; } table.scw thead td[class$='scwWeek'] { color: #000; } table.scw .scwCellsWeekendDisabled, table.scw .scwCellsDisabled { border-color: #222 !important; color: #888; background-color: #000; } table.scw .scwInputDate { background-color: #fc0; } .full-width table h2 { font-size: 1.25rem; } .full-width table h3 { font-size: 1.125rem; } .full-width table h4, .full-width table h5, .full-width table h6 { font-size: 1rem; } /* highlight table rows on hover */ table:not(.mce-item-table) tr:not(.spacer), table:not(.mce-item-table) tr:not(.gsc-table-result):hover td, table:not(.mce-item-table) tr:not(.spacer):not, table:not(.mce-item-table) tr:not(.gsc-table-result):hover th { background-color: rgba(255, 206, 0, 0.2) !important; } /* ------------------- */ /* ## Overflow Tables */ /* ------------------- */ .offscreen-scroll { position: relative; /* display: flex; */ width: 100%; max-width: 100%; overflow: auto; overflow-y: hidden; } .offscreen-scroll > .offscreen-shadows, .offscreen-scroll::after { content: ''; position: absolute; top: 50%; left: var(--left, 0); z-index: 1; transform: translateY(-50%); width: var(--maxwidth, 100%); height: 200%; pointer-events: none; transition: box-shadow 0.5s, left 0.05s linear; outline: 105vw solid rgba(0, 0, 0, 0.25); } .offscreen-scroll.shadow-right > .offscreen-shadows, .offscreen-scroll.shadow-right::after { box-shadow: inset -10px 0 10px rgba(0, 0, 0, 0.25); } .offscreen-scroll.shadow-left > .offscreen-shadows, .offscreen-scroll.shadow-left::after { box-shadow: inset 10px 0 10px rgba(0, 0, 0, 0.25); } .offscreen-scroll.shadow-left.shadow-right > .offscreen-shadows, .offscreen-scroll.shadow-left.shadow-right::after { box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.25); } /* ------------------- */ /* End Overflow Tables */ /* ------------------- */ /* ---------- */ /* END TABLES */ /* ---------- */ /* --- Button Styles --- */ #main .button, #main .button-blank, #main .button-grey, #main .button-black, .gift-buttons a { display: block; max-width: 15.5rem; margin: 0 auto; padding: 0.75rem; border: 1px solid transparent; /* keep in line with button-transparent */ border-radius: 5px; font-weight: 600; font-size: 1rem; line-height: 1.5; text-align: center; text-shadow: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* Overwrite "article p a" style */ cursor: pointer; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, text-decoration 0.3s, border 0.3s; } button.not-button { padding: 0 0.25em; border: none; background-color: transparent; outline-offset: -1px; } button.not-button:hover { text-decoration: underline; } button.not-button:focus, button.not-button:active { border: none; outline: 1px dashed #000; box-shadow: none; } /* ========================================================================== # BUTTONS ========================================================================== */ /** * Button styles in all kinds of palces. * They can be blank/hollow or filled with gold or black */ .gift-buttons a, .gift-buttons a:visited { color: #fc0; } .main .button, .main .button-blank, .main .button-black, .main .button-grey { text-decoration: none; } .main .button:active, .main .button:focus, .main .button:hover, .main .button-blank:active, .main .button-blank:focus, .main .button-blank:hover, .main .button-black:active, .main .button-black:focus, .main .button-black:hover, .main .button-grey:active, .main .button-grey:focus, .main .button-grey:hover { text-decoration: underline; } #main .button, #main .button:visited { color: #333; } #main .button, .gift-buttons a { color: #333; background-color: #fc0; } #media .button-blank, #media .button-blank:visited { color: #fff; } #main .button-blank, #main .button-blank:visited { color: #333; } #main .button-blank { border: 1px solid #000; background: transparent; } #main .button:active, #main .button:focus, #main .button:hover, #main .button-blank:active, #main .button-blank:focus, #main .button-blank:hover, #main .button-black:active, #main .button-black:focus, #main .button-black:hover, #main .button-grey:active, #main .button-grey:focus, #main .button-grey:hover { /* Overwrite "article p a" style */ box-shadow: 0 10px 5px -7px rgba(0, 0, 0, 0.5); } #main .button:active, #main .button:focus, #main .button:hover, #main .button-blank:active, #main .button-blank:focus, #main .button-blank:hover { color: #fff; background-color: #000; border: 1px solid currentColor; } #main .background-black .button { border: 1px solid #fc0; } #main .background-gold .button-black, #main .background-yellow .button-black { border: 1px solid #000; } #main .button:focus, #main .button-blank:focus, div#main p .button:focus, /* Overwrite "#main p .button:focus" style */ div#main p .button-blank:focus /* Overwrite "#main p .button:focus" style */ { outline: 2px dashed #fc0; outline-offset: -2px; } #main .button-grey, #main .button-black, #main .button-grey:visited, #main .button-black:visited { color: #fff; } #main .button-grey, #main .button-black { background-color: #000; } #main .button-black:active, #main .button-black:focus, #main .button-black:hover, #main .button-grey:active, #main .button-grey:focus, #main .button-grey:hover { color: #000; background-color: #fc0; } #main .button-grey:focus, #main .button-black:focus, div#main p .button-grey:focus, /* Overwrite "#main p .button:focus" style */ div#main p .button-black:focus /* Overwrite "#main p .button:focus" style */ { outline: 2px dashed #000; outline-offset: -2px; } .gift-buttons a:active, .gift-buttons a:focus, .gift-buttons a:hover { color: #333; background-color: #d6d6d6; } #main .button:active, #main .button-grey:active, #main .button-black:active, #main .button-blank:active, .gift-buttons a:active { box-shadow: none; } #main p .button:focus, #main p .button-grey:focus { border: 0; outline: 0; } #main .button-link, #main .mimic-link { appearance: none; background: none; border: 0; } #content p .button, #content p .button-blank, #content p .button-black, #content p .button-grey { /* margin-bottom: 35px !important; */ margin-bottom: 2.1875rem !important; } #content table p .button, #content table p .button-blank, #content table p .button-black, #content table p .button-grey { margin-bottom: 0 !important; } /* ========================================================================== # IMAGE FLOAT CLEARS ========================================================================== */ /** * Puts margins on the left or right side of the paragraph when an image is floated left or right. * This typically has a heading that contains an image that was floated left. * example: small-left means there is a small image to the left of the content. */ .small-left, .small-right, .med-left, .med-right, .large-left, .large-right, .blog-med-left { clear: both; margin: 0; } .small-left .slider, .small-right .slider, .med-left .slider, .med-right .slider, .large-left .slider, .large-right .slider, .blog-med-left .slider { clear: none; } @media screen and (min-width: 480px) { .small-left, .small-right { clear: none; } .small-left { /* margin-left: 190px; */ margin-left: 11.875rem; } .small-right { /* margin-right: 190px; */ margin-right: 11.875rem; } .blog-med-left { /* margin-left: 316px; */ margin-left: 19.75rem; } } @media screen and (min-width: 650px) { .med-left, .med-right, .large-left, .large-right, .blog-med-left { clear: none; } .med-left { /* margin-left: 270px; */ margin-left: 17rem; } .med-right { /* margin-left: 270px; */ margin-right: 17rem; } .large-left { /* margin-left: 349px; */ margin-left: 21.8125rem; } .large-right { /* margin-right: 349px; */ margin-left: 21.8125rem; } .blog-med-left { /* margin-left: 316px; */ margin-left: 19.75rem; } } @supports (display: flow-root) { .small-left, .small-right, .med-left, .med-right, .large-left, .large-right, .blog-med-left { margin-left: 0; margin-right: 0; display: flow-root; } } /* ========================================================================== # SKIP LINKS ========================================================================== */ /** * Accessabliity links that are used for navigating further down the page, skipping the nav. */ #skip { height: 0; } #skip a { position: absolute; left: -100rem; z-index: 700; width: 1px; height: 1px; padding: 4px; border: 1px solid #fff; overflow: hidden; color: #000; font-weight: bold; font-size: 1.4em; text-decoration: none; background: #fc0; } #skip a:focus { left: 100px; width: 200px; height: unset; padding-top: 5px; text-decoration: underline; outline: 1px dashed #fff; } .skip-link { position: absolute; left: -100rem; z-index: 700; width: 1px; height: 1px; padding: 0.25rem; border: 1px solid #fff; color: #000; font-weight: 700; font-size: 1.4em; text-decoration: none; background: #fc0; } .skip-link:visited { color: #000; } .skip-link:focus { left: 6.5rem; width: 13rem; height: 1.25rem; padding-top: 0.25rem; text-decoration: underline; outline: 1px dashed #fff; } /* ========================================================================== # MAIN NAV ========================================================================== */ /** * The main navigation of the website. Includeing the header logo, audience menu, seach bars, and nav. */ /* ----------------------------- */ /* ## Main Nav Modifier Styles */ /* ----------------------------- */ nav.main-nav *:focus { outline: dashed 1px #000; outline-offset: -1px; } nav.main-nav *:focus:hover { outline: dashed 1px transparent; } nav.main-nav .nav-apply:focus, nav.main-nav .nav-give:focus { outline-offset: -2px; } @media screen and (min-width: 881px) { nav.main-nav *:focus { outline: dashed 1px #fc0; outline-offset: -1px; } nav.main-nav .yellow a:focus, nav.main-nav .yellow button:focus { outline: dashed 1px #000; outline-offset: -2px; } } nav.main-nav .sub ul > li a:focus { outline: dashed 1px #fff; outline-offset: -1px; } nav.main-nav .sub ul.sub-nav-open > li a:focus { outline: dashed 1px #000; outline-offset: -1px; } nav.main-nav .quick-links a:focus, nav.main-nav .audience-menu a:focus, nav.main-nav .quick-links button:focus, nav.main-nav .audience-menu button:focus { outline: dashed 1px hsl(50, 100%, 50%); outline-offset: -4px; } @media only screen and (min-width: 881px) { nav.main-nav .audience-menu .sub ul > li a:focus { text-decoration: underline; outline: dashed 1px #fc0; } nav.main-nav .quick-links ul > li a:focus, nav.main-nav .audience-menu ul > li a:focus { outline: dashed 1px #000; outline-offset: -4px; } } nav.main-nav .sub ul > li a:focus:hover, nav.main-nav .audience-menu .sub ul > li a:focus:hover { outline: dashed 1px transparent; } #header-search a:focus { outline-offset: -1px; } header.shrink #header-logo a:focus, #header-peoplenav .dropmenu li a:focus { text-decoration: none; outline-offset: 2px; } /* ----------------------------- */ /* End Main Nav Modifier Styles */ /* ----------------------------- */ /* ---------------- */ /* ## Logo Styles */ /* ---------------- */ .top-banner { width: 100%; min-height: 36px; } #header-logo img.left-logo { display: inline; width: auto; max-width: 100%; height: 36px; margin-top: 0.75rem; padding-left: 0.25rem; } #header-logo img.right-logo { display: none; } /* ---------------- */ /* End Logo Styles */ /* ---------------- */ /* ========================================================================== # SEARCH BOX STYLES ========================================================================== */ /* * Styles for the searchbox and its components. */ /* ---------------------- */ /* ## SEARCH BOX STYLES */ /* ---------------------- */ .search-box, .search-box *, .site-header, .site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; } /* Old, delete after new nav is implementd accross site */ #search-box { position: fixed; z-index: 10; width: 100%; height: 0; overflow: hidden; background: #fff; } /* Old, delete after new nav is implementd accross site */ #search-box.enable { top: 60px; height: auto; border-bottom: 5px solid #fc0; } .search-box { position: absolute; top: -200px; left: 0; z-index: 25; display: block; width: 100%; border-bottom: 5px solid #fc0; background: #fff; transition: top 0.3s ease; } body.reduced .search-box { transition: all 0s; } @media (prefers-reduced-motion) { .search-box { transition: all 0s; } } .search-box.shrink { position: fixed; } @media only screen and (min-width: 881px) { .search-box { top: -60px; background: #ececec; } } .search-box.search-open { top: 50px; } @media only screen and (min-width: 881px) { .search-box.search-open { top: 0; } } .search-wrap { padding: 0.5em 0.5em 0; } @media only screen and (min-width: 881px) { .search-wrap { display: flex; justify-content: space-between; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; padding: 1em 0; } } /* Old, delete after new nav is implementd across site */ #header-search form { position: relative; display: block; float: left; margin: 5px 5px 0 0; padding: 0 0 0 8px; background: #fff; } .field-wrap { /* width: 95%; */ margin: 1.5%; padding: 1%; padding-bottom: 0.5em; border: 1px solid #ececec; } @media only screen and (min-width: 881px) { .field-wrap { flex: 1; margin: 0 0.75em; padding: 0; } } .field-wrap form { display: flex; width: 100%; border: 1px solid #666; font-size: 15px; } /* for header pre 08-2018 */ #search-box .field-wrap form { display: block; } .field-wrap form .search-input { display: block; flex-grow: 1; float: left; width: 92%; margin: 4px 0; padding: 0.25em 0.5em; border: none; font-size: 15px; outline: none; } .search-submit-icon { display: block; float: right; width: 34px; height: 34px; border: none; color: transparent; text-transform: capitalize; text-indent: -5000em; background: #fc0 url(https://www.mtu.edu/mtu_resources/images/n/search-black.svg) center no-repeat; background-size: 20px; outline: none; cursor: pointer; } @media only screen and (min-width: 881) { .search-submit-icon { width: 34px; } } /* Old, delete after new nav is implementd accross site */ #q, #q2, #q3 { display: block; float: left; width: 100%; /* height: 100%; */ margin: 0; /* suspicous, on homepage but not here height: 1.625rem; margin: 0.25rem 0; */ padding: 0 0 0 0.5rem; border: none; font-size: 16px; outline: none; box-shadow: none; } #q:focus, #q2:focus, #q3:focus { outline: 1px dashed #000; outline-offset: -2px; } /* Old, delete after new nav is implementd accross site */ #sa, #sa2, #sa3 { display: block; float: right; width: 8%; height: 34px; border: none; border-left: 1px solid black; color: transparent; text-transform: capitalize; text-indent: -5000em; background: #fc0 url(//www.mtu.edu/mtu_resources/images/n/search-black.svg) center no-repeat; background-size: 20px; outline: none; cursor: pointer; } /* Old, delete after new nav is implementd accross site */ #search-nav { position: absolute; top: -70px; right: 0; float: right; width: 88px; margin-top: 10px; overflow: hidden; cursor: pointer; } /* Old, delete after new nav is implementd accross site */ #search-trigger { display: inline-block; width: 40px; height: 60px; margin-right: 0.1em; background: transparent url(//www.mtu.edu/mtu_resources/images/n/search.svg) no-repeat; background-position: center; background-size: 24px 24px; } /* Old, delete after new nav is implementd accross site */ #search-box.enable + #header + .nav-push + #navwrap #search-trigger { background-color: #fc0; background-image: url(//www.mtu.edu/mtu_resources/images/n/search-black.svg); } /* ---------------------- */ /* End Search Box Styles */ /* ---------------------- */ /* ========================================================================== # SITE HEADER ========================================================================== */ /* * This contains the entire nav. The logo, the audence menu, the naviagation, the buttons for search bar and audence nav. */ /* ------------------------------------- */ /* ## Header logo for Banner iframes */ /* Might want to move over to banner.css */ /* ------------------------------------- */ .nav-push { height: 60px; } #logo-print { display: none; } #header { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; background: #000; } #navwrap { z-index: 999; } #header-logo a:focus, #header-search a:focus, #header-peoplenav a:focus { outline: dashed 1px #fc0; outline-offset: 4px; } #header-logo a:focus:hover, #header-search a:focus:hover, #header-peoplenav a:focus:hover { outline: dashed 1px transparent; } #header .top-banner { min-height: 60px; } /* ----------------------------------- */ /* End Header logo for Banner iframes */ /* ----------------------------------- */ .site-header { position: relative; top: 0; z-index: 25; width: 100%; transition: top 0.3s ease; } body.reduced .site-header { transition: all 0s; } @media (prefers-reduced-motion) { .site-header { transition: all 0s; } } .site-header.shrink { position: fixed; } @media only screen and (min-width: 881px) { .search-box.search-open + .site-header { top: 61px; } } /* -------------------- */ /* ## Top Banner Wrap */ /* -------------------- */ /** * This is the upper half of the site header. * It contains the logo and audience menu items. * Within are a couple rules that affect the man nav as well. */ .top-banner-wrap { position: fixed; top: 0; left: 0; width: 100%; padding: 0.5rem 0.75rem; background: #000; } .top-banner-wrap::before, .top-banner-wrap::after { display: table; clear: both; content: ''; } .top-banner { width: 60%; } @media only screen and (min-width: 881px) { .top-banner-wrap { position: static; } .top-banner { width: 100%; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; } } .header-logo { float: left; width: 100%; line-height: 0; } .mt-logo, img.mt-logo[src$='.svg'] { width: auto; max-width: 100%; height: 36px; } .mt-logo:focus { outline-offset: 4px; } @media only screen and (min-width: 881px) { .header-logo { width: 30%; /* margin-top: 25px; */ /* margin-bottom: 25px; */ } .shrink .header-logo { margin-top: 0; margin-bottom: 0; } .mt-logo, img.mt-logo[src$='.svg'] { height: 5.5em; } .shrink .mt-logo, .shrink img.mt-logo[src$='.svg'] { height: 4.5em; } } /* --- main nav --- */ .navwrap { /* background: rgba(0, 0, 0, 0.8); */ background: #333; } /* Needed to target nav.main-nav explicitly so old header will work it puts .main-nav on li items and it will break */ nav.main-nav { width: 100%; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; font-size: 0.9375rem; transition: top 0.3s ease; } #header-dropmenu-trigger { display: inline-block; float: right; width: 44px; height: 60px; text-decoration: none; background: transparent url(//www.mtu.edu/mtu_resources/images/n/meatnav.svg) no-repeat; background-position: center; background-size: 24px 24px; } #navwrap + .sitetitle .sitetitle-logo, .subnav .category-nav li ul { display: none; } .site-header ~ .sitetitle { padding-top: 4.5rem; } @media only screen and (min-width: 881px) { .site-header ~ .sitetitle { padding-top: 0; } } #header-dropmenu-trigger.active { background-color: #fc0; background-image: url(//www.mtu.edu/mtu_resources/images/n/meatnav-black.svg); } /* ------------------- */ /* ## Header triggers */ /* ------------------- */ /** * This group is for the mobile menu and the search icon becuase the are on mobile. * The Audience and quick links nav are located further down in the CSS it _looks_ the same as the mobile menu, but it is not the same. * `.header-dropdown-trigger` is the mobile menu button * `.search-trigger` is the icon for the searchboxes. */ .header-dropdown-trigger, .search-trigger { position: fixed; width: 60px; height: 52px; border: none; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 24px 24px; } .header-dropdown-trigger { top: 0; right: 0; background-image: url(https://www.mtu.edu/mtu_resources/images/n/meatnav.svg); } nav.main-nav .header-dropdown-trigger:focus { outline-color: #fc0; outline-offset: -4px; } nav.main-nav .header-dropdown-trigger[aria-expanded='true']:focus { outline-color: #000; } @media only screen and (min-width: 881px) { .header-dropdown-trigger, .search-trigger { width: 60px; height: 60px; } .header-dropdown-trigger { display: none; } } .toggled .header-dropdown-trigger { background-color: #fc0; background-image: url(https://www.mtu.edu/mtu_resources/images/n/arrow-up-black.svg); } .search-trigger { top: 0; right: 60px; background-image: url(https://www.mtu.edu/mtu_resources/images/n/search.svg); } /* temp fix till js is implemented 1/4/2021 */ .primary-menu-wrap > ul > li.search-trigger a { border-top: none; } .search-trigger.search-open { background-color: hsl(50, 100%, 50%); background-image: url(https://www.mtu.edu/mtu_resources/images/n/arrow-up-black.svg); } .search-trigger > a { display: block; width: 100%; height: 100%; } nav.main-nav .search-trigger a:focus { outline: 1px dashed #fc0; outline-offset: -4px; } .primary-menu-wrap .search-trigger a { border: none; } .primary-menu-wrap .search-trigger a:focus { outline-color: #fc0; } /* ------------------- */ /* End Header triggers */ /* ------------------- */ .active #search-nav { position: absolute; top: -53px; right: 0; } #navwrap { position: fixed; right: 0; width: 100%; } #navwrap a[href] { color: #222; } /* -------------------- */ /* End Top Banner Wrap */ /* -------------------- */ /* ========================================================================== # SITE TITLE ========================================================================== */ /** * The sitetitle is the bar benieth the navigation. * Usually contains the page title but not necesarrily an h1. */ .sitetitle { height: auto; padding: 1.5em 0; border-bottom: 1px solid #b5b5b5; background-color: #ececec; } .sitetitle > div { margin: 0 10px; } .sitetitle > div h1 { margin-top: 0; margin-bottom: 0; font-size: 1.5rem; } .sitetitle > div span, .site-heading-header { margin: 0; font-size: 1.7em; line-height: 1.3; } .sitetitle > div span a, .sitetitle > div h1 a, .site-heading-header a { color: #000; font-weight: 300; text-decoration: none; } /* remove padding on site title link */ .sitetitle a, .site-title .title a { padding: 0; } /* ---------------------- ## NEW Sitetitle Logo * This is CSS for when the sitetitle gets updated. * If Header images have a down arrow arrow this has been implemented all `.sitetitle div > div` rules can be removed. ---------------------- */ .site-title-wrapper .sitetitle-logo a { position: static; width: auto; display: flex; align-items: center; width: 100%; justify-content: flex-end; } .site-title-wrapper .sitetitle-logo { display: none; flex: 0 1 auto; width: 30%; padding: 0.5rem 0.5rem 0.5rem 1rem; } .site-title-wrapper .sitetitle-logo img { width: auto; max-width: 8.5rem; max-height: 4.75rem; } @media (min-width: 650px) { .site-title-wrapper .sitetitle-logo { display: flex; } } /* ---------------------------- */ /* ## End NEW Sitetitle Logo */ /* ---------------------------- */ .sitetitle .sitetitle-logo { /* display: none; */ position: relative; } .sitetitle .sitetitle-logo img { max-width: 100%; } .sitetitle .logo-shift { max-width: 80%; } .sitetitle .logo-shift { max-width: 70%; } /* ----------------- */ /* ## 2021 Sitetitle */ /* ----------------- */ .site-title-wrapper { display: flex; position: relative; padding-top: var(--alertbarheight, 52px); max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0; width: 100%; } @media (min-width: 881px) { .site-title-wrapper { padding-top: 0; } } .site-title { display: flex; flex-direction: column; padding: 0.5rem 1rem; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; width: 100%; line-height: 1.2; } @media (min-width: 881px) { .site-title { padding: 0.75rem 0 0.75rem 0.75rem; } } /* extra 12px because the left nav jumps at that point */ @media (min-width: 1230px) { .site-title-wrapper { margin: 0 auto; } .site-title { padding: 0.75rem 0; } } .site-title-logo { position: relative; flex: 1 1 125px; margin: 0.5rem; width: 125px; display: flex; align-items: center; } @media (min-width: 881px) { .site-title-logo { margin-right: 0; } } .site-title-logo:empty { display: none; } .site-title-logo img { max-width: 100%; display: block; max-height: 4.5rem; margin-left: auto; } .site-title-wrapper .title a { font-size: 1.7rem; font-weight: 300; text-decoration: none; } /* Doing a max width because setting this to "normal" on desktop could produce unwanted affects. */ @media (max-width: 481px) { .site-title-wrapper .title a { word-break: break-word; } } .site-title-wrapper .title a:hover { text-decoration: underline; } .site-title-wrapper .title a, .site-title-wrapper .title a:visited { color: #000; } .site-title-wrapper .title h1 { margin-top: 0; margin-bottom: 0; } @media (min-width: 881px) { .site-title-wrapper .title a { font-size: 2.25rem; } } .site-title-wrapper .title a:hover { text-decoration: underline; } @media (min-width: 881px) { .site-title-wrapper .breadcrumbs { padding-top: 1rem; margin-bottom: 0 !important; } } .site-title-wrapper .breadcrumbs a { font-weight: 400; } .site-title-wrapper .title { max-width: 100%; } /* ----------------- ### Weather widget ----------------- */ .title-weather { padding-right: 6.5rem; } .weather-widget-wrapper { display: flex; align-items: center; position: absolute; height: auto; right: 0; } .weather-widget { display: flex; align-items: center; color: #000; text-decoration: none; } .weather-widget:hover { text-decoration: underline; } .weather-widget:visited { color: #000; } .weather-widget-temp { font-size: 1.75rem; } img.weather-widget-icon { width: 52px; margin-bottom: 1rem; } @media (min-width: 640px) { .weather-widget-wrapper { position: static; } .title-weather { padding-right: 0; } } /* ------------------ */ /* End 2021 Sitetitle */ /* ------------------ */ /* ========================================================================== # GOLD BAR HEADING ========================================================================== */ /* -- Heading that is large and has a golder underline even though it isn't a link -- */ .gold-bar-heading { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0.3em; font-weight: 300; font-size: 3rem; box-shadow: inset 0 -0.1em 0 0 #fc0; } @media (min-width: 480px) { .gold-bar-heading { font-size: calc(2rem + 1.3vw); } } @media (min-width: 1200px) { .gold-bar-heading { font-size: 3.6rem; } } .gold-bar-heading a, .gold-bar-heading a:visited { color: inherit; } .gold-bar-heading a { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; text-decoration: underline; } .gold-bar-heading a:hover { text-decoration: none; } /* --- primary menu --- */ /* ========================================================================== # NAVIGATION ========================================================================== */ .primary-menu-wrap { position: fixed; top: 52px; right: -75%; display: flex; flex-direction: column; width: 75%; border-bottom: 1px solid #ccc; background-color: #fff; transition: right 0.3s ease; } @media only screen and (min-width: 881px) { .primary-menu-wrap { position: relative; top: 0; right: 0; display: block; flex-direction: row; width: 100%; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; border: none; background: rgba(0, 0, 0, 0); } /* Top links that are outside of the main nav */ .primary-menu-wrap .audience-menu a { padding: 1em 10px; color: #fc0; font-weight: 400; } /* Sub menu lists */ .primary-menu-wrap .audience-menu .sub ul { display: flex; font-size: 15px; background: none; } } /* When the main menu is open on mobile */ .toggled .primary-menu-wrap { right: 0; max-height: 75vh; overflow-y: scroll; } /* TODO: `.main-nav ul` needs to be moved somewhere else, it is breaking the primary-menu-wrap styles. */ .main-nav ul { margin: 0; padding: 0; list-style: none; } /* ------------------------------------------- */ /* ## Primary Menu link and button components */ /* ------------------------------------------- */ /** * These are the two main components used in the nav and are really dynamic. * The button is used very differently between desktop and mobile. * `.primary-menu-wrap > ul > li > a` grabs the main link on the nav. of course there isn't a class on it. */ .primary-menu-wrap button { width: 100%; border: none; text-align: left; background: #fff; } .primary-menu-wrap a, .primary-menu-wrap button, .nav-section-head button { display: block; padding: 0.8rem; color: inherit; text-decoration: none; } .primary-menu-wrap .sub ul a { font-weight: 400; line-height: 1.2; } .primary-menu-wrap a:active, .primary-menu-wrap a:focus, .primary-menu-wrap a:hover { text-decoration: underline; box-shadow: none; } .primary-menu-wrap button { cursor: default; } .primary-menu-wrap > ul > li > a, .primary-menu-wrap button, .nav-section-head > button, .primary-menu-wrap .sub ul { position: relative; border-top: 1px solid #ccc; } /* ### Primary Menu Search Trigger */ @media screen and (min-width: 881px) { .primary-menu-wrap .search-trigger { position: absolute; top: 13px; right: 50px; width: 40px; height: 40px; } .primary-menu-wrap .search-trigger a { width: auto; /* height: 60px; */ } .primary-menu-wrap > ul > li > a, .nav-section-head > button, .primary-menu-wrap .sub ul { border: none; } } /* End Primary Menu Search Trigger */ @media only screen and (max-width: 880px) { .primary-menu-wrap .sub > a { padding-right: 66px; } } .primary-menu-wrap .sub ul { display: none; background: #f1f1f1; } .primary-menu-wrap .sub ul.sub-nav-open { display: block; } .primary-menu-wrap .sub > a::after, .primary-menu-wrap .sub > button::after, /* uncommented out becuase they should have dropdown menus on mobile. */ .nav-section-head > button::after { position: absolute; top: 0; right: 0; bottom: 0; width: 61px; /* Fix to make it match with the nav square */ border-left: 1px solid #ccc; background: url(https://www.mtu.edu/mtu_resources/images/n/arrow-down-black.svg) no-repeat center center; background-size: 24px; content: ''; } @media only screen and (max-width: 881px) { /* 2/19/20 TODO: remove the `.toggle-open` selector when javascript updated .primary-menu-wrap .sub [aria-expanded="true"]::after, .primary-menu-wrap .sub .toggle-open::after { background: url(https://www.mtu.edu/mtu_resources/images/n/arrow-up-black.svg) no-repeat center center; background-size: 1.25rem; } */ } @media screen and (min-width: 881px) { .primary-menu-wrap .sub a::after, .primary-menu-wrap button::after, .nav-section-head > button::after { display: none; } } .primary-menu-wrap .sub > button::after { border-left: none; } /* buttons used in mobile nav where an anchor is a parent */ @media (max-width: 880px) { .primary-menu-wrap .sub button, .mobile-nav-open-sub { max-height: 2.9rem; } } .primary-menu-wrap button.mobile-nav-open-sub { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: 100%; max-width: 3.8rem; border: none; text-indent: -99999px; background: transparent; } /* ------------------------------------------- */ /* End Primary Menu link and button components */ /* ------------------------------------------- */ /* --------------------------------- */ /* ## Audience Menu and Quick Links */ /* --------------------------------- */ /* Sets the search and audience menu on bottom of the mobile nav */ .search-quick, .audience-menu { order: 1; } /* audience menu */ .audience-menu > li button, .quick-links > a { background: #000; } .audience-menu > li:first-of-type > button, .quick-links > a { color: #fc0; } @media only screen and (min-width: 881px) { .search-quick, .audience-menu { position: absolute; order: unset; width: auto; } .search-quick { top: -74px; right: 0; } .audience-menu { top: -66px; right: 100px; } /* The nav gets shorter so we ened to bring up the audience men and the search icon up */ .shrink .audience-menu { top: -55px; } .shrink .search-quick { top: -63px; } /* Hide the button on the audience nav for desktop. Only needed for mobile. */ .audience-menu > li > button { display: none; } } .quick-links-toggle.quick-links-toggle-open[aria-expanded='true']::after { background-image: url(https://www.mtu.edu/mtu_resources/images/n/arrow-down.svg); background-size: 24px; } .quick-links .quick-links-nav.quick-links-nav-open { display: block; } @media only screen and (min-width: 881px) { /** * The 6 squares on the top right of the nav ON DESKTOP. * These styles are unique to desktop and w */ .quick-links .quick-links-toggle { position: absolute; top: 13px; right: 0; width: 40px; height: 40px; overflow: hidden; text-indent: -999999px; background-color: transparent; background-image: url(https://www.mtu.edu/mtu_resources/images/n/meatnav.svg); background-repeat: no-repeat; background-position: center center; background-size: 24px 24px; } .quick-links .quick-links-toggle-open { background-color: #fc0; background-image: url(https://www.mtu.edu/mtu_resources/images/n/meatnav-black.svg); } .quick-links .quick-links-nav.quick-links-nav-open { position: absolute; top: 53px; right: 0; z-index: 20; display: block; border: 3px solid #fc0; background: #fff; } .quick-links-nav li { border-bottom: 1px solid #ccc; } .quick-links-nav a { position: relative; padding-right: 50px; padding-left: 42px; color: #222; } .quick-links-nav a::before { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; vertical-align: middle; background-image: url(https://www.mtu.edu/mtu_resources/images/n/sprite.svg); background-repeat: no-repeat; background-size: 151px 21px; content: ''; } /* Quick Links Sprite map Styles */ .link-az::before { background-position: 0 0; } .link-banweb::before { background-position: -132px 0; } .link-map::before { background-position: -48px 0; } .link-canvas::before { background-position: -96px 0; } .link-email::before { background-position: -24px 0; } .link-mymt::before { background-position: -72px 0; } } .audience-menu .nav-section-head > button::after, .primary-menu-wrap .quick-links > a::after { background-image: url(https://www.mtu.edu/mtu_resources/images/n/arrow-down.svg); } /* --------------------------------- */ /* End Audience Menu and Quick Links */ /* --------------------------------- */ /* -------------------- */ /* ## Category Nav Bar */ /* -------------------- */ /* * This is the black bar that is underneith the logo and audience nav. * Contains all the individualized links for pages. */ .category-nav-bar { display: grid; grid-template-columns: 66px 1fr 1fr 66px; } @media only screen and (min-width: 881px) { /* remove mobile sub menu toggle for desktop */ .sub button.mobile-nav-open-sub { display: none; outline-offset: 4px; } /* category dropdown nav */ .category-nav-bar { display: flex; justify-content: space-between; width: 100%; min-height: 3.125rem; } .category-nav-bar > li { flex: 1 1 auto; } .category-nav-bar > li > a { text-align: center; } /* ### Categor nav bar butt and link styles */ /* Lots of styles that modify how submenus work and look */ /* change the arrow for desktop */ .category-nav-bar .sub button.mobile-nav-open-sub, .category-nav-bar .sub > button::after { position: absolute; top: 50%; right: 5px; display: block; width: 10px; height: 10px; padding: 0; border-top: 5px solid #fc0; border-right: 5px solid transparent; border-left: 5px solid transparent; overflow: hidden; background: transparent; transform: translateY(-50%); opacity: 0; } /* The last link get a yellow class, it turns the background yellow. Need black text */ .yellow button.mobile-nav-open-sub { color: #000; } .category-nav-bar .sub.primary-highlight button.mobile-nav-open-sub, .category-nav-bar .sub.primary-highlight > button::after, .category-nav-bar .sub.yellow button.mobile-nav-open-sub, .category-nav-bar .sub.yellow > button::after { border-top: 5px solid #000; } .category-nav-bar .sub button.mobi.le-nav-open-sub:active, .category-nav-bar .sub button.mobile-nav-open-sub:focus, .category-nav-bar .sub > button:active::after, .category-nav-bar .sub > button:focus::after { opacity: 1; } .category-nav-bar .main-nav-item > a, .category-nav-bar button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0.25rem 0.375rem; color: #fff; font-weight: 400; font-size: 1rem; line-height: 1.25; text-align: center; } .category-nav-bar button { flex-direction: initial; border: none; background: none; } .category-nav-bar .main-nav-item a:hover, .category-nav-bar .main-nav-item button:hover, .category-nav-bar .sub:hover > a, .category-nav-bar .sub.active > a, .category-nav-bar .sub:hover > button, .category-nav-bar .sub.active > button { color: #222; background-color: #ececec; } .category-nav-bar .sub > ul { position: absolute; width: 100%; min-width: 200px; border-bottom: 5px solid #fc0; background: #fff; } .category-nav-bar .sub:last-of-type > ul { right: 0; } .category-nav-bar .sub:hover > ul, .category-nav-bar .sub.active > ul { display: block; } .category-nav-bar .sub ul a { color: #000; } .category-nav-bar .sub ul a:hover, .category-nav-bar .sub ul a:focus { background: #ececec; } /* TODO: Possibly just a homepage style, remove? */ /* Apply button after search and audience nav */ .primary-highlight { flex: 0.5; } .category-nav-bar .main-nav-item.primary-highlight:last-of-type > a, .category-nav-bar .main-nav-item.primary-highlight:last-of-type > button, .category-nav-bar .main-nav-item.yellow:last-of-type > a, .category-nav-bar .main-nav-item.yellow:last-of-type > button { color: #222; background-color: rgba(255, 204, 0, 1); transition: background-color 0.2s ease; } .category-nav-bar .main-nav-item.primary-highlight:last-of-type > a:focus, .category-nav-bar .main-nav-item.primary-highlight:last-of-type > button:focus, .category-nav-bar .main-nav-item.yellow:last-of-type > a:focus, .category-nav-bar .main-nav-item.yelow:last-of-type > button:focus { outline-color: #000; } .category-nav-bar .main-nav-item.primary-highlight:last-of-type > a:hover, .category-nav-bar .main-nav-item.primary-highlight:last-of-type > button:hover, .category-nav-bar .main-nav-item.yellow:last-of-type > a:hover, .category-nav-bar .main-nav-item.yellow:last-of-type > button:hover { color: #222; background-color: #ececec; } } .main-nav-item { position: relative; grid-column-end: span 4; min-width: 11.5%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .main-nav-item { min-width: 0; } } .main-nav-item:first-of-type > a { border-top: 0 solid transparent; } .top-nav-item a { padding: 0.75em; border: none; font-size: 18px; text-align: center; text-transform: uppercase; background: #fc0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); } @media screen and (min-width: 881px) { .top-nav-item a { padding: 1em; font-size: inherit; text-transform: inherit; background: none; box-shadow: none; } } .main-nav ul ul { font-size: 0.8125rem; } /* -------------------- */ /* End Category Nav Bar */ /* -------------------- */ /* ========================================================================== # BODY SECTION STYLES ========================================================================== */ /** * Some basic stlyes to get the meat of the content in shape. */ #body_section { width: auto; margin-top: 3em; padding: 0 1rem; } /* Fix for full sized image not in the main content */ #body_section > p > img { max-width: 100%; } /* ========================================================================== # MEDIA STYLES ========================================================================== */ /** * Main header styles that usually contains an image. */ /* -------------- */ /* ## Media Jumbo */ /* -------------- */ #media.jumbo { background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; } #media.jumbo:not(.video) { display: table; width: 100%; } #media.jumbo .full-width > img { display: none; } #media.jumbo:not(.video), #media.jumbo:not(.video) .full-width { position: relative; min-height: 30vw; } /** * This is a fix for Firefox. * It will not reconize the min-height to fill the spot, * we need to have something push it open * Since it only applys to mobile we are using a @media(max-width). */ @media only screen and (max-width: 880px) { #media.jumbo:not(.video)::before, #media.jumbo:not(.video) .full-width::before { display: block; float: left; padding-top: 40%; content: ''; } } #media.jumbo:not(.video) .full-width { display: flex; width: 100%; margin: 0 auto; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #media.jumbo:not(.video) .full-width { display: block; } } @media only screen and (min-width: 881px) { #media.jumbo:not(.video), #media.jumbo:not(.video) .full-width { height: 45vw; min-height: 9.25rem; max-height: 34.5rem; } } .leftnav ~ #banner_image #media.jumbo:not(.video) .full-width, .leftnav ~ #banner_image #media.jumbo:not(.video) { max-height: 25rem; } #media.jumbo:not(.video) .full-width .text { display: table-cell; width: auto; height: auto; min-height: 0; margin: auto; padding: 2rem; color: #fff; text-align: center; vertical-align: middle; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #media.jumbo:not(.video) .full-width .text { display: block; width: 100%; max-width: 50rem; margin: 0 auto; } } #media.jumbo:not(.video) .full-width .text:empty { display: none; } #media.jumbo:not(.video) .text * { margin-bottom: 0; } #media.jumbo:not(.video) .text > * + * { padding-top: 1rem; } #media.jumbo .media-black .full-width .text { background-color: rgba(0, 0, 0, 0.75); } #media.jumbo .full-width .text input[type='text'] { color: #000; } #media.jumbo.left .full-width .text { text-align: left; } #media.jumbo.right .full-width .text { text-align: right; } #media.jumbo.left, #media.jumbo.right { float: none; } #media.jumbo .full-width .text h2, #media.jumbo .full-width .text h3, #media.jumbo .full-width .text h4, #media.jumbo .full-width .text h5, #media.jumbo .full-width .text p, #media.jumbo .full-width .white { color: #fff; } #media .full-width .text h2 { font-size: 2.7em; } #media.jumbo .full-width .text p { margin-bottom: 0; font-size: 1.6em; } #media.jumbo.bottom .full-width .text { padding-bottom: 4.5em; vertical-align: bottom; } #media.jumbo .full-width .text p[style^='text-align: right'] { text-align: left !important; } @media (min-width: 881px) { #media.jumbo .full-width .text p[style^='text-align: right'] { text-align: right !important; } } #media.jumbo .full-width .text h2.feature { font-weight: 300; font-size: 2.5rem; } #media.jumbo .full-width .text .feature { width: unset; margin: 0; padding: 0; border: 0 transparent solid; } @media (min-width: 881px) { #media.jumbo.left .media-black .full-width .text, #media.jumbo.right .media-black .full-width .text { max-width: 60%; } #media.jumbo.right .media-black .full-width .text, #media.jumbo .media-black .full-width .text.right { margin: auto 0 auto auto; } #media.jumbo.left .media-black .full-width .text, #media.jumbo .media-black .full-width .text.left { margin: auto auto auto 0; } #media.jumbo.top .media-black .full-width .text, #media.jumbo .media-black .full-width .text.top { margin: 0 auto auto auto; } #media.jumbo.bottom .media-black .full-width .text, #media.jumbo .media-black .full-width .text.bottom { margin: auto auto 0 auto; } } #media.jumbo.video .media-black { width: 100%; } #media.jumbo.video .full-width { position: relative; } /* --------------- */ /* End Media Jumbo */ /* --------------- */ /* -------------- */ /* ## Media Full */ /* -------------- */ #media.full img { width: 100%; margin-bottom: 0; } #media.full .media-black { background: transparent; } #media.full .text { display: none; } .videoWrapper { position: relative; top: 56.25%; left: 56.25%; height: 0; padding-bottom: 56.25%; transform: translate(-56.25%, -56.25%); } #ytplayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ---------------------------- */ /* ### Meida Info Popup/Caption */ /* ---------------------------- */ #info-click { position: absolute; right: 0; bottom: 8px; padding: 9px; border: 1px solid #fff; background: #fff; cursor: pointer; } #info-click > span { display: none; } #info-click:active, #info-click:hover { outline: none; } #info-launch { display: inline-block; width: 20px; height: 20px; margin: 0 auto; border: 1px solid #000; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; color: #000; font-size: 20px; font-family: 'Times New Roman', 'Georgia', serif; line-height: 20px; text-align: center; } #info-launch span { position: relative; left: -1%; } #caption { position: absolute; bottom: 0; left: 0; z-index: 3; display: none; box-sizing: border-box; width: 100%; height: auto; max-height: 200px; padding-right: 2%; padding-left: 2%; overflow-x: hidden; overflow-y: auto; text-align: center; background: rgba(0, 0, 0, 0.5); } #caption::-webkit-scrollbar { display: none; } #caption #hide-caption { width: 100%; height: 23px; margin: 0 auto; padding: 25px 0; background: url(//www.mtu.edu/mtu_resources/images/n/arrow-down.svg) no-repeat center; background-size: 28px 23px; cursor: pointer; } #caption #hide-caption:active, #caption #hide-caption:focus, #caption #hide-caption:hover { background: url(//www.mtu.edu/mtu_resources/images/n/arrow-down-yellow.svg) no-repeat center; background-size: 28px 23px; } #caption div + div { padding-bottom: 2em; color: #fff; } #intro { padding: 2.25rem 0.5rem; text-align: center; background: #ececec; } #intro::after { display: table; width: 100%; content: ''; } #intro div { font-size: 1.7em; line-height: 1.5; } #intro h1 { display: inline; font-size: 1em; } [id='intro'] p { margin-bottom: 0; padding: 0 0.5em; } [id='intro'] p + * { margin-top: 1.25em; } #body_section > .full-width:first-child { margin-top: -1rem; } #intro + #body_section > .full-width:first-child { margin-top: -3em; padding-top: 3em; border-top: 5px solid #fc0; } /* ---------------------------- */ /* End Meida Info Popup/Caption */ /* ---------------------------- */ /* -------------- */ /* End Media Full */ /* -------------- */ /* ========================================================================== # MULTI MEDIA HERO SECTION ========================================================================== */ /* Links */ .content .multi-media_wrapper a, .multi-media_wrapper a { padding: 0 0.2em; color: #fff; text-decoration-color: #fff; } .content .multi-media_wrapper a:hover, .multi-media_wrapper a:hover, .content .multi-media_wrapper a:focus, .multi-media_wrapper a:focus { background-color: #fc0; color: #000; } /* Buttons */ .multi-media_player-buttons { float: left; } .multi-media_player-button.toggle { padding: 1rem 0; text-align: left; } .multi-media_player-button.toggle:focus { background-color: transparent; outline: 1px dashed #fc0; box-shadow: 0 0 0 1px #000; } .multi-media_buttons { display: block; flex-wrap: wrap; justify-content: space-around; padding: 0; list-style-type: none; } /* Lists in content section */ .multi-media_content .list-spread { display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 650px) { .multi-media_content .list-spread { flex-direction: row; justify-content: space-between; align-items: stretch; } } #main .multi-media_content .list-spread > li { width: 100%; max-width: none; } @media screen and (min-width: 640px) { .multi-media_content .list-spread > li { width: auto; margin-bottom: 0; } } /* more buttons */ #main .multi-media_content li [class*='button'] { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0.75rem 1rem; border-radius: 5px; border-width: 1px; border-style: solid; font-size: 1rem; font-weight: 400; text-decoration: none; } #main .multi-media_content li [class*='button']:hover, #main .multi-media_content li [class*='button']:focus { text-decoration: underline; } #main .multi-media_content .button-blank, #main .multi-media_content .button-blank:visited { border-color: currentColor; color: #fff; background-color: #000; } #main .multi-media_content .button-blank:hover { border-color: currentColor; color: #000; background-color: #fc0; } #main .multi-media_content .button, #main .multi-media_content .button:visited { border-color: currentColor; color: #000; background-color: #fc0; } #main .multi-media_content .button:hover { border-color: currentColor; color: #fff; background-color: #000; } /* Media wrapper, container for image and content */ .multi-media_wrapper, .multi-media_wrapper > * { box-sizing: border-box; } /* managing the heights of the wrapper */ .multi-media_wrapper { position: relative; z-index: 0; display: flex; flex-wrap: wrap; width: 100%; min-height: 40vmin; overflow: hidden; background-color: #000; background-size: cover; } .main > .multi-media_wrapper { min-height: 15rem; } @media screen and (min-width: 881px) { .main > .multi-media_wrapper { height: 56.25vw; max-height: 34rem; } [id='banner_image'] .multi-media_wrapper-text-over-image { min-height: 45vw; } .rsidebar [id='banner_image'] .multi-media_wrapper-text-over-image, .leftnav ~ [id='banner_image'] .multi-media_wrapper-text-over-image { min-height: 30vw; } .main > .multi-media_wrapper-hero.multi-media_wrapper-slim { height: 45vw; max-height: 25rem; } /* bandaid fix for https://www.mtu.edu/research-forum/ */ .multi-media_wrapper-sub_banner.multi-media_wrapper-image-only:not(.multi-media_wrapper-slim) { max-height: 25rem; } } @media screen and (min-width: 1200px) { [id='banner_image'] .multi-media_wrapper-text-over-image { min-height: 35rem; } .rsidebar [id='banner_image'] .multi-media_wrapper-text-over-image, .leftnav ~ [id='banner_image'] .multi-media_wrapper-text-over-image { min-height: 25rem; } .leftnav ~ [id='banner_image'] .multi-media_wrapper-text-over-image.multi-media_wrapper-slim { min-height: 15rem; } } [id='banner_image'] .multi-media_wrapper-image-only, [id='sub_banner'] .multi-media_wrapper-image-only { min-height: 0; height: auto; } .multi-media_wrapper::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ''; } /* if there isn't any image, don't show the whole wrapper */ .multi-media_wrapper-image-only:empty, .multi-media_wrapper-image-only::before { display: none; } /* video */ [class='multi-media_wrapper']::before, .multi-media_wrapper-text-popup::before { background-image: linear-gradient(rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.75)); } .multi-media_wrapper-video::before { background-color: rgba(0, 0, 0, 0.1); background-image: none; } /* image */ .multi-media_wrapper.multi-media_wrapper-text-popup.multi-media_wrapper-slim .multi-media_img, .multi-media_wrapper.multi-media_wrapper-image-only.multi-media_wrapper-slim .multi-media_img, .multi-media_img { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; object-fit: cover; object-position: center center; } .multi-media_wrapper-text-popup.multi-media_wrapper-slim, .multi-media_wrapper-image-only.multi-media_wrapper-slim { padding-top: 30%; } .multi-media_wrapper-text-over-image.multi-media_wrapper-slim { padding-top: 0; min-height: 20vmin; } @media screen and (min-width: 1200px) { .multi-media_wrapper-text-over-image.multi-media_wrapper-slim { padding-top: 0; min-height: 15rem; } } .multi-media_wrapper-hero.multi-media_wrapper-slim { padding-top: 0; min-height: 30vmin; } @supports (object-fit: cover) { .multi-media_img.multi-media_img { height: 100%; } } /* if the banner is only an image, don't mess with it */ [id='banner_image'] .multi-media_wrapper-image-only .multi-media_img, [id='sub_banner'] .multi-media_wrapper-image-only .multi-media_img { position: static; z-index: auto; margin: 0; } /* .multi-media_wrapper-hero .multi-media_img { object-position: center top; } */ /* end managaing heights */ /* content */ .multi-media_inner { display: flex; position: relative; z-index: 0; width: 100%; max-width: 75rem; margin: 0 auto; transition: opacity 0.5s 0.2s; } .multi-media_content { display: block; margin: 0 auto; padding: 2rem; color: #fff; line-height: 1.5; background-color: transparent; } @media (min-width: 650px) { .multi-media_content { margin: auto; } } .multi-media_content::before { content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } @media screen and (min-width: 880px) { .multi-media_content { background-color: rgba(0, 0, 0, 0.6); } .multi-media_content::before { display: none; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ .multi-media_content { max-height: 18rem; margin-top: 5rem; } } .multi-media_content * { box-sizing: border-box; color: #fff; } .multi-media_content .feature { margin: 0; font-size: 1.7rem; font-weight: 200; } /* We only want the p tag that follows a `.feature` heading to get margin-top. */ .multi-media_content .feature + p { margin-top: 0.75rem; margin-bottom: 0.75rem; } .multi-media_content p + p { margin-bottom: 0.75rem; } @media (min-width: 880px) { .multi-media_content { max-width: 65%; } .multi-media_content .feature { font-size: 3rem; } } /* position content */ .multi-media_inner-left .multi-media_content { margin-left: 0; } .multi-media_inner-right .multi-media_content { margin-right: 0; } .multi-media_inner-top .multi-media_content { margin-top: 0; } .multi-media_inner-top-left .multi-media_content { margin-top: 0; margin-left: 0; } .multi-media_inner-top-right .multi-media_content { margin-top: 0; margin-right: 0; } .multi-media_inner-bottom .multi-media_content { margin-bottom: 0; } .multi-media_inner-bottom-left .multi-media_content { margin-bottom: 0; margin-left: 0; } .multi-media_inner-bottom-right .multi-media_content { margin-right: 0; margin-bottom: 0; } .multi-media_inner.inactive { opacity: 0; transition: opacity 0.5s; } /* popover content */ .multi-media_popover-wrapper { position: absolute; top: 0; left: 0; z-index: 0; display: flex; width: 100%; background-color: rgba(0, 0, 0, 0.5); transform: translateY(100%); transition: 0.5s transform; } @media (min-width: 640px) { .multi-media_popover-wrapper { height: 100%; } } .multi-media_popover-wrapper[aria-hidden='false'] { transform: translateY(0); } .multi-media_popover-wrapper .multi-media_content { background-color: transparent; } /* popover button */ .multi-media_info-button_wrapper { position: absolute; bottom: 0; left: 50%; z-index: 1; width: 100%; max-width: 75rem; padding: 0; font-size: 1rem; color: #fff; transform: translateX(-50%); } @media (min-width: 75rem) { .multi-media_info-button_wrapper { padding: 0; } } .multi-media_info-button { float: right; padding: 0.5rem 0.75rem; /* max-width: 65%; */ border: none; color: inherit; background-color: transparent; cursor: pointer; } .multi-media_info-button::before { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin-right: 0.5rem; padding: 0.1em; border-style: solid; border-width: 0.125rem; border-radius: 50%; line-height: 0; transition: transform 0.25s linear, border-color 0.2s, color 0.2s; content: 'i'; } .multi-media_info-button[aria-expanded='true']::before { padding: 0.1rem; border-color: #fc0; color: #fc0; font-size: 0.9rem; transform: rotate(360deg); content: '\2715'; } .toggle { border-width: 0; line-height: 1; background-color: transparent; } .media_popover-close { display: block; margin: 1rem auto 0; border: 6px solid transparent; min-width: 4rem; width: 30%; font-size: 2rem; text-align: center; background-color: transparent; cursor: pointer; } /* Hide this guy on mobile */ .multi-media_content .media_popover-close { display: none; } @media (min-width: 640px) { .multi-media_content .media_popover-close { display: block; } } .media_popover-close:hover, .media_popover-close:focus { background-color: rgba(0, 0, 0, 0.5); color: #fc0; } .media_popover-close:focus { outline: 1px dashed #fc0; } body.reduced .multi-media_popover-wrapper { z-index: -1; transform: translate(0); opacity: 0; transition: 0s transform, opacity 0.5s linear; } body.reduced .multi-media_popover-wrapper[aria-hidden='false'] { z-index: 0; opacity: 1; transition: 0s transform, opacity 0.5s linear; } body.reduced .multi-media_info-button::before { transition: all 0s; } @media (prefers-reduced-motion: reduce) { .multi-media_popover-wrapper { z-index: -1; transform: translate(0); opacity: 0; transition: 0s transform, opacity 0.5s linear; } .multi-media_popover-wrapper[aria-hidden='false'] { z-index: 0; opacity: 1; transition: 0s transform, opacity 0.5s linear; } .multi-media_info-button::before { transition: all 0s; } } /* -- Video Player -- */ .multi-media_player-wrapper { position: absolute; top: 50%; left: 50%; z-index: -1; align-items: center; justify-content: center; width: 60rem; height: 100%; transform: translate(-50%, -50%); } .multi-media_img-video { top: -10%; left: -10%; width: 120%; height: 120%; filter: blur(10px); } .multi-media_video-banner { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-size: cover; background-position: center center; } .multi-media_video-banner:hover { cursor: pointer; } /* .multi-media_video-banner::before, */ .multi-media_video-banner::after { position: absolute; content: ''; } /* .multi-media_video-banner::before { top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.45); } */ .multi-media_video-banner::after { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); width: 80px; height: 52px; background: #fc0 url(//www.mtu.edu/mtu_resources/images/n/playheads.svg) no-repeat center top; background-size: 100% 200%; border: 2px solid #000; box-shadow: 0 5px 10px 0 rgb(0 0 0 / 50%); } .multi-media_video-banner:hover::after { background-position: center bottom; } .multi-media_video-wrapper { position: absolute; top: 50%; left: 50%; width: 100vw; min-width: 38.75rem; height: 56vw; min-height: 21.875rem; transform: translate(-50%, -50%); opacity: 1; transition: opacity 1s 0.25s; } .multi-media_video-wrapper::before { position: absolute; top: -50%; left: -100%; display: block; width: 200%; height: 200%; background-color: #000; content: ''; } .multi-media_video { position: absolute; top: 50%; left: 50%; width: 160%; height: 100%; background-color: #f2f2f2; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } @media (min-width: 650px) { .multi-media_video { width: 100%; } video.multi-media_video { height: auto; } } .hero-player__button { display: flex; align-items: center; justify-content: center; width: 50em; height: 2em; border: 0 transparent solid; background: transparent; } /* ========================================================================== # ALIGNMENT STYLES ========================================================================== */ .left { float: left; } .right { float: right; } /* div.right.home-image { width: 35%; text-align: right; } */ /* these are set to !important because if you are setting these you mean it */ .align-left { margin-right: auto !important; margin-left: 0 !important; } .align-right { margin-right: 0 !important; margin-left: auto !important; } img.left { margin-right: 20px; margin-bottom: 10px; } img.right { margin-bottom: 10px; margin-left: 20px; } img.auto { width: auto !important; } iframe { border: none !important; } .full-width img, .full-width iframe { max-width: 100%; margin-bottom: 0.5em; } .full-width .gift img, .full-width .gift iframe { width: 100%; max-width: none; } /* ========================================================================== # BANNER IMAGE ========================================================================== */ #banner_image img, #banner_image img.img { display: block; width: auto; border: none; } @supports (object-fit: cover) { #banner_image img, #banner_image img.img { width: 100%; max-height: none; object-fit: cover; } } .vertical #sub_banner img { margin-bottom: 0; } #banner_image, #full-banner, #banner img { width: 100%; } #banner_image img, #banner_image iframe, #banner_image section { width: 100%; max-width: 100%; } /* ========================================================================== # MOVIE WITH CAPTION ========================================================================== */ /* TODO: Merge this with #sub_banner rules? */ .movie-wrapper button.playhead { top: 0; right: 0; left: auto; width: 100%; height: 80px; max-height: 80px; border-radius: 0; background-position: right top; background-size: 120px 160px; box-shadow: inset 0 5px 0 0 #fc0; transform: none; transition: background-size 0.1s, max-height 0.1s; } .movie.new-movie:hover img, .movie.new-movie:focus img { filter: brightness(0.75); } body.reduced .movie-wrapper button.playhead { animation: none; } @media (prefers-reduced-motion: reduce) { .movie-wrapper button.playhead { animation: none; } } @keyframes playhead-slide-in { 0% { background-position: 120% top; opacity: 0; } 100% { background-position: right top; opacity: 1; } } .movie-wrapper button.playhead-small { max-height: 40px; background-size: 60px 80px; } .movie-wrapper.preview > .movie:hover { cursor: pointer; } .movie-wrapper.preview:focus-within { outline: 1px dashed #000; outline-offset: 1px; } .movie-wrapper.preview:focus-within img { filter: brightness(0.75); } /* On mobile the playhead button is contained in .movie on desktop it is an achor tag */ .movie-wrapper.preview > .movie:active .playhead, .movie-wrapper.preview > .movie:focus .playhead, .movie-wrapper.preview > .movie:hover .playhead, .movie-wrapper.preview > a:active .playhead, .movie-wrapper.preview > a:focus .playhead, .movie-wrapper.preview > a:hover .playhead, .movie-wrapper.preview > .movie .playhead:focus { background-position: right bottom; box-shadow: inset 0 5px 0 0 #d1d1d1; animation: playhead-slide-up 0s 1 0s both; } .movie.new-movie button.playhead:focus { outline: none; } .movie-wrapper.preview .movie { top: 2px; width: 100%; margin-bottom: 0.1em; padding: 0; background-position: center; background-size: cover; outline: 1px solid rgba(0, 0, 0, 0.05); outline-offset: -1px; } .movie-title button { display: none; } .section-fit .movie-description, .full-width .movie-description { position: relative; border-bottom: 5px solid #000; } .inline-aside .movie-description { border-bottom: none; } .full-width .slider-content .movie-description { border-bottom: 1px solid #666; background-color: #fff; } /* Make movies in the banner have smaller font */ #sub_banner .movie-title h2, #banner_image .movie-title h2 { /* padding-bottom: 1rem; */ font-weight: 400; font-size: 2.1em; } .movie-title h2 { margin: 1rem 0 0; font-weight: 400; font-size: 1.6rem; } .full-width .movie-description p { margin: 0 0.5em 15px 0; font-size: 1rem; line-height: 1.5; } .full-width .movie-description p:last-child { margin-bottom: 15px; } .full-width .movie-wrapper.preview .movie-description h2 + p { margin-top: -15px; } .full-width .movie-wrapper.preview .movie > img { width: 100%; margin: 0; } /* ----------------------- */ /* End Movie with caption */ /* ----------------------- */ /* ========================================================================== # SUB BANNER ========================================================================== */ #sub_banner { width: 100%; overflow: hidden; } #sub_banner img { width: 100%; max-width: none; } #sub_banner .item:nth-child(2) .callout { margin-top: -0.5em; padding: 1em; text-align: center; background: #ececec; } #sub_banner .item:nth-child(2) .callout p { margin: 0; font-size: 1.5em; font-style: italic; } .leftnav + #content #sub_banner img, .leftnav + #content #sub_banner img.img, .leftnav + #content #banner_image + #sub_banner img, .leftnav + #banner_image + #content #sub_banner img.img { display: block; width: 100%; } #content:not(.rsidebar) #sub_banner img, #content:not(.rsidebar) #sub_banner img.img { max-width: 100%; } #banner_image .movie-wrapper, #sub_banner .movie-wrapper { margin: 0; } /* ### Sub Banner play button */ #banner_image .movie-title button, #sub_banner .movie-title button { display: block; } #banner_image button.playhead, #sub_banner button.playhead { top: 0; right: 0; left: auto; width: 100%; border-radius: 0; background-position: top right; box-shadow: inset 0 5px 0 0 #fc0; transform: none; } #banner_image .movie-wrapper.preview a.various:hover button.playhead, #banner_image .movie-wrapper.preview a.various:focus button.playhead, #sub_banner .movie-wrapper.preview a.various:hover button.playhead, #sub_banner .movie-wrapper.preview a.various:focus button.playhead { background-position: bottom right; box-shadow: inset 0 5px 0 0 #d1d1d1; } #banner_image .movie-title::before, #sub_banner .movie-title::before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient( to top, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0) 35% ); content: ''; } /* End Sub Banner play button */ #banner_image .movie-title > h2, #sub_banner .movie-title > h2 { padding: 0.5rem 1rem; color: #fff; } #banner_image .movie-description, #sub_banner .movie-description { max-height: 0; margin-top: 0; padding-top: 0; border-bottom: 5px solid #fc0; overflow-y: hidden; transition: max-height 0.3s, padding-top 0.2s 0.1s, border-bottom 0.3s; } #banner_image .movie-description.active, #sub_banner .movie-description.active { max-height: 300px; padding-top: 0.5rem; border-bottom: 5px solid #000; overflow-y: hidden; transition: max-height 0.5s, padding-top 0.35s, border-bottom 0.5s; } #banner_image .movie-title, #sub_banner .movie-title { position: absolute; bottom: 0; left: 0; z-index: 0; display: flex; align-items: flex-end; justify-content: space-between; width: 100%; color: white; } #banner_image .movie-title h2, #sub_banner .movie-title h2 { color: white; } #banner_image .movie-title button, #sub_banner .movie-title button { position: relative; right: 5px; z-index: 1; width: 45px; min-width: 45px; height: 45px; border: none; background: transparent; } #banner_image .movie-title button:focus, #sub_banner .movie-title button:focus { outline: 1px dashed #fc0; } #banner_image .movie-title button:hover::before, #banner_image .movie-title button:hover::after, #sub_banner .movie-title button:hover::before, #sub_banner .movie-title button:hover::after { background: #fff; } #banner_image .movie-title button::before, #banner_image .movie-title button::after, #sub_banner .movie-title button::before, #sub_banner .movie-title button::after { position: absolute; display: block; width: 20px; height: 5px; background-color: #fc0; transition: transform 0.2s 0.05s; content: ''; } #banner_image .movie-title button::before, #sub_banner .movie-title button::before { transform: translate(0) rotate(45deg); } #banner_image .movie-title.active button::before, #sub_banner .movie-title.active button::before { transform: translate(5px) rotate(45deg); } #banner_image .movie-title button::after, #sub_banner .movie-title button::after { transform: translate(12px) rotate(-45deg); } #banner_image .movie-title.active button::after, #sub_banner .movie-title.active button::after { transform: translate(5px) rotate(-45deg); } #banner_image .movie-title::before, #sub_banner .movie-title::before { position: absolute; bottom: 0; left: 0; top: auto; display: block; width: 100%; height: 125%; background: linear-gradient( to top, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0) 100% ); content: ''; z-index: -1; } #banner_image .movie.new-movie:hover::before, #sub_banner .movie.new-movie:hover::before, #banner_image .movie.new-movie:focus::before, #sub_banner .movie.new-movie:focus::before { background: linear-gradient( to top, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0) 35% ) !important; /* hate this important, fix it later*/ } #banner_image .movie-wrapper.preview:focus-within img, #sub_banner .movie-wrapper.preview:focus-within img, #banner_image .movie.new-movie:hover img, #sub_banner .movie.new-movie:hover img, #banner_image .movie.new-movie:focus-within img, #sub_banner .movie.new-movie:focus-within img { filter: none; } /* --------------------- */ /* End Sub Banner Video */ /* --------------------- */ /* ========================================================================== # SLIDESHOWS ========================================================================== */ /** * These are slideshows that aren't used for the header. * They are used inside content to have a carousel of images. */ .mtuslideshow { position: relative; width: 100%; border: 1px solid rgba(0, 0, 0, 0.5); box-sizing: border-box; } .mtuslideshow .fancybox .hover-fancybox, .mtuslideshow .content .item img { display: block; width: 100%; } .mtuslideshow .content { position: relative; overflow: hidden; } .mtuslideshow .info { margin-top: 0.5em; padding: 1rem; } .mtuslideshow .info:empty { display: none; } .mtuslideshow .info .links, .mtuslideshow .info > p { margin: 0; font-size: 1rem; } /* ---------------- */ /* ## Control Dots */ /* ---------------- */ .mtuslideshow .navigator { position: absolute; top: 0; right: 0; z-index: 1; display: block; padding: 1em; background: rgba(0, 0, 0, 0.5); } .mtuslideshow .navigator a { display: inline-block; float: left; width: 16px; height: 16px; margin: 0 2px; vertical-align: middle; background: url(//www.mtu.edu/mtu_resources/images/n/mtu-slideshow.svg) no-repeat 0 0; background-size: 16px 96px; cursor: pointer; } .mtuslideshow .navigator a.goto { background-position: 0 -64px; } .mtuslideshow .navigator a.active, .mtuslideshow .navigator a.goto:hover { background-position: 0 -80px; } .mtuslideshow .navigator a.next { background-position: 0 0; } .mtuslideshow .navigator a.next:hover { background-position: 0 -16px; } .mtuslideshow .navigator a.prev { background-position: 0 -32px; } .mtuslideshow .navigator a.prev:hover { background-position: 0 -48px; } /* ---------------- */ /* End Control Dots */ /* ---------------- */ /* ---------- */ /* ## Arrows */ /* ---------- */ .mtuslideshow a.navarrow { position: absolute; top: 50%; display: block; width: 42px; height: 55px; margin-top: -23px; background: url(//www.mtu.edu/mtu_resources/images/navarrows-white.png) no-repeat; } .mtuslideshow a.navarrow.prev { left: -7px; background-position: 0 0; } .mtuslideshow a.navarrow.prev:hover { background-position: 0 -55px; } .mtuslideshow a.navarrow.next { right: -8px; background-position: -42px 0; } .mtuslideshow a.navarrow.next:hover { background-position: -42px -55px; } /* ---------- */ /* End Arrows */ /* ---------- */ /* movies and videos */ /* TODO: Move this rule with other `.movie` rules */ .movie { position: relative; height: 0; padding-top: 25px; padding-bottom: 56.25%; } .movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #sub_banner .movie-wrapper { margin: 0; } /* ========================================================================== # SIGNUP FORM ========================================================================== */ .signup-form__form { display: flex; /* flex-wrap: wrap; */ /* removing this may allow for a very small email field, but it won't break by wrapping */ } .signup-form__email-label { flex: 1 1 auto; } .signup-form__email-field { width: 100%; height: 2.75rem; padding-left: 1rem; border: 1px solid #000; } .signup-form__email-field[type='text']:active, .signup-form__email-field[type='text']:focus { outline: 1px dashed #000; outline-offset: -3px; } /* ---------------------- */ /* ## Signup Form Button */ /* ---------------------- */ .signup-form__button { padding-right: 1.5rem; padding-left: 1.5rem; border: 1px solid #000; border-left: 0 solid transparent; font-weight: 600; text-decoration: underline transparent solid; background-color: hsl(50, 100%, 50%); transition: background-color 0.2s, color 0.2s, text-decoration 0.2s; } .signup-form__button:hover, .signup-form__button:focus { color: #fff; text-decoration: underline #fff solid; background-color: #000; } .signup-form__button:focus { outline-color: hsl(50, 100%, 50%); outline-offset: -2px; } /* ---------------------- */ /* End Signup Form Button */ /* ---------------------- */ /* ========================================================================== # SIDEBARS ========================================================================== */ .sidebar .sidebar-content a.sidebar-gallery img { width: 100%; } .sidebar .sidebar-content ul:not(.list-spread) li, .sidebar .sidebar-content ol:not(.list-spread) li, .sidebar-nobox ul:not(.list-spread) li, .sidebar-nobox ol:not(.list-spread) li { width: 90%; font-size: 1em; } .sidebar ul.contact li { margin-bottom: 0.15em; } /* ----------------- */ /* ## Right Sidebar */ /* ----------------- */ .right-sidebar { clear: both; } .right-sidebar:not(.no-info)::before { display: block; width: 68%; margin: 4em auto; border-bottom: 1px solid #999; content: ''; } .right-sidebar .sidebar { width: 100%; border: 1px solid #b5b5b5; border-bottom: none; word-break: normal; box-shadow: 0 5px 0 #000; } .right-sidebar .sidebar, .right-sidebar .sidebar-nobox { margin-bottom: 4em; } /* ----------------- */ /* End Right Sidebar */ /* ----------------- */ /* ------------------- */ /* ## Sidebar Content */ /* ------------------- */ .sidebar-content { padding: 1em; font-size: 1.5em; } .sidebar-content .slider .bar h4, .sidebar-content .slider .bar h3 { color: #333; font-size: 1.2em; } .sidebar-nobox .sidebar-content { padding: 0; } .sidebar-nobox .sidebar-title + .sidebar-content { padding-top: 1em; } /* This is intended specifically for biomedical undergraduate pages */ /* Buttons that were placed directly after our asset 'Program Funnel Buttons' */ /* @link https://www.mtu.edu/biomedical/undergraduate/degree/ */ .sidebar-nobox .sidebar-nobox + p > .button { margin-top: -2em !important; } .sidebar-nobox .sidebar-nobox ~ p { margin-bottom: 1.75rem; } .sidebar-content + .sidebar-content { margin-top: 4em; } .sidebar-content p { color: #000; font-size: inherit; } .sidebar-content p.small { font-size: 0.882em; } .sidebar-content p.smaller { font-size: 0.746em; } .sidebar-content p.smallest { font-size: 0.666em; } .sidebar-content p:last-child, .sidebar-content ul:last-child { margin-bottom: 0.5em; } .sidebar .sidebar-content a.sidebar-gallery img { width: 100%; } /* ------------------- */ /* End Sidebar Content */ /* ------------------- */ .sidebar .specialties { padding-top: 0.8em; } .sidebar-title { width: auto; padding: 10px 15px; background: #ececec; } aside .sidebar-title h2, aside .noboxed h2, .full-width .movie-description h2 { font-weight: 400; font-size: 2.1em; } aside .sidebar-title h2 { padding: 0; } .full-width .movie-description h2 { padding-bottom: 0.5rem; } .full-width .movie-description { padding-top: 0.5rem; } /* ----------------- */ /* ## Right Sidebar */ /* ----------------- */ .right-sidebar .calendar-item { width: auto; padding: 0 5% 5%; } .right-sidebar .calendar-item:first-child { padding: 5%; } .right-sidebar .calendar-item h3 { font-size: 1.9em; line-height: 1.2; } .right-sidebar .calendar-item .calendar-photo { float: left; width: 50%; } .right-sidebar .calendar-item .calendar-photo img { max-width: 100%; } .right-sidebar .calendar-item .calendar-desc { width: auto; } .right-sidebar .calendar-item .calendar-photo + .calendar-desc { float: right; width: 48%; } /* ----------------- */ /* End Right Sidebar */ /* ----------------- */ /* TODO: Move these closer to rules with calendars. */ .calendar-desc em { line-height: 1.5; } /* Site Title and Breadcrumbs */ .sitetitle a:focus, #weather-holder a:focus { text-decoration: none; outline: dashed 1px #000; outline-offset: 1px; } /* ========================================================================== # BREADCRUMBS ========================================================================== */ #breadcrumbs { margin-top: 6px; } #breadcrumbs li { left: 0; display: inline; margin-bottom: 0; padding: 0; font-size: 0.8125rem; } #breadcrumbs li a { color: #000; } .breadcrumbs a { padding: 0; } /* Make the '>' arrow for breadcrumbs */ .breadcrumbs li::after { display: inline-block; width: 0.35em; height: 0.35em; margin: 0 0.25em 0.15em; border-top: 1px solid black; border-right: 1px solid black; transform: rotate(45deg); content: ''; } .breadcrumbs li:last-of-type::after { display: none; } /* Make the home button on breadcrmbs the husky logo */ .breadcrumbs li a[href='/'] { position: relative; display: inline-block; width: 1.5em; height: 1.5em; overflow: hidden; text-indent: -9999px; vertical-align: text-bottom; background-image: url('https://www.mtu.edu/mtu_resources/images/logos/husky-icon.svg'); background-repeat: no-repeat; background-size: 100% 100%; } .breadcrumbs li a[href='/']:hover { background-color: #fc0; outline: 2px solid #000 !important; } .breadcrumbs li a[href='/'] svg { display: inline-block; width: 2em; height: 2em; vertical-align: text-bottom; fill: currentColor; } .breadcrumbs li a[href='/']:hover svg { color: #fc0; text-decoration: none; background-color: #000; outline: 2px solid #fc0; } #breadcrumbs ul { padding: 0; overflow: visible; line-height: 1.5; } .heading_link { height: 0; } #banner_sublinks { margin-bottom: 1em; } #banner_sublinks * { display: inline; } #banner_sublinks li { padding: 0; } #banner_sublinks li a { color: #315196; } #banner_image + #banner_sublinks { position: relative; top: -1.5em; } .banner-image + #banner_sublinks, #sub_banner + #banner_sublinks { position: relative; top: -0.5em; } /* ========================================================================== # LEFT NAVIGATION ========================================================================== */ .left.leftnav { float: none; } #toggle-left + nav #main_links { display: block; } @media (max-width: 881px) { #toggle-left + nav #main_links, #toggle-left + #main_links { display: none; } } #toggle-left .more-menu { display: inline; width: 20px; margin-right: 1em; } #toggle-left { overflow: hidden; font-size: 17px; line-height: 20px; cursor: pointer; } /* -------------- */ /* ## Main Links */ /* -------------- */ /* These are the links that are listed vertically in the left nav */ #main_links, #main_links ul { margin-bottom: 0; padding-left: 0; list-style-type: none; } #main_links ul { font-size: 16.25px; } #main_links { border-bottom: 5px solid #fc0; } #main_links li.nav-title { left: 0; padding-right: 0; } .nav-title-heading, #main_links li > span { font-size: 22px; font-weight: 600; } #main_links li.nav-title ul li.active > a, #breadcrumbs ul li.active > a { font-weight: bold; letter-spacing: -0.03em; } #breadcrumbs ul li.active { color: #000; font-weight: bold; letter-spacing: -0.03em; } #main_links li ul > li { left: 0; margin-bottom: 0.7em; padding-right: 0; line-height: 1.3; } #main_links li.nav-title li:first-child { margin-top: 0.5em; } .nav-title-heading, #main_links li > span { display: block; width: 100%; padding-bottom: 0.4em; border-bottom: 1px solid #000; } a.nav-title-heading { text-decoration: none; } a.nav-title-heading:hover { text-decoration: underline; } #main_links li:not(.active):last-child > span { border-color: transparent; } #main_links li ul li ul { font-size: 15px; } #main_links li ul li ul li { padding-left: 10px; } #main_links .nav-title .sublinks { display: none; } #main_links .nav-title.active .sublinks { display: block; } .sublinks a { text-decoration: none; } .sublinks a:hover { text-decoration: underline; } /* Left Navigation focus styles */ #main_links li a:focus { text-decoration: none; outline: dashed 1px #000; outline-offset: 1px; } /* -------------- */ /* End Main Links */ /* -------------- */ .leftnav > div:not(#toggle-left) { display: none; } /* TODO: Move this to other `table` rules */ #content table { overflow-x: scroll; -webkit-overflow-scrolling: touch; } /* ========================================================================== # ADM Sticky Buttons ========================================================================== */ :root { --admHeight: 3rem; } [id='adm-sticky-buttons'] { position: fixed; bottom: 0; left: 0; height: var(--admHeight); width: 100%; z-index: 900; background-color: #121212; font-size: 1rem; display: flex; justify-content: center; transform: translateY(100%); transition: transform 0.3s ease-out, opacity 0.25s; opacity: 0; } [id='adm-sticky-buttons'].show { transform: translateY(0); opacity: 1; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } [id='adm-sticky-buttons'].no-footer-buttons { position: sticky; } #adm-sticky-buttons:empty { display: none; } @media (min-width: 881px) { #adm-sticky-buttons { display: none; } } [id='adm-sticky-buttons'] > div { display: flex; flex: 1; background: #fc0; height: auto; } [id='adm-sticky-buttons'] a { display: flex; justify-content: center; align-items: center; color: #000; width: 100%; height: auto; } /* `-webkit-touch-callout: none` is to select specifically iPhones */ @supports (-webkit-touch-callout: none) { [id='adm-sticky-buttons'] { /* this 1.5rem only works becuase it is half of the --admHeight (3rem) */ height: calc(var(--admHeight) + env(safe-area-inset-bottom, 1.5rem)); } [id='adm-sticky-buttons'] a { padding-top: 1rem; align-items: flex-start; } } [id='adm-sticky-buttons'] a:hover { background-color: #121212; color: #fff; } [id='adm-sticky-buttons'] > div:nth-of-type(even) { background-color: #000; } [id='adm-sticky-buttons'] > div:nth-of-type(even) a, [id='adm-sticky-buttons'] > div:nth-of-type(even) a:visited { color: #fff; } /* ========================================================================== # CONNECT ========================================================================== */ .connect figure { margin: 0; } .connect figure img { max-width: 100%; } .connect-big { margin-top: 2em; } .connect figcaption { font-size: 1.7em; line-height: 1.5; } .connect figcaption span.time { color: #666; font-style: italic; } .connect .position { position: absolute; width: 35px; height: 35px; } .connect .item:nth-child(even) { position: relative; height: 400px; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: scroll; } .connect .right .position { position: relative; top: 35px; } .connect .right figure { position: relative; top: -35px; } .connect .right figcaption { margin-bottom: 0; } .news-widget > div.athphoto { background-position: center top; } /* ---------------- */ /* ## Feed Imports */ /* ---------------- */ /* Boxed section using grid for news feeds */ /* todo: remove rules that are causing me to make these importants */ /* todo: pull out all this column-inner bandaid stuff when the new cards get put into the snippet */ .feed-import { justify-content: space-between; width: 102%; margin: 0 0 0 -2%; padding: 2rem 0 0 0 !important; } @supports (display: grid) { .feed-import { width: 100%; margin: 0; padding: 0 !important; } .news.feed-import, .events.feed-import { display: grid !important; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); width: 100%; margin: 0; } .right-sidebar .news.feed-import, .right-sidebar .events.feed-import { grid-template-columns: none; } .news.feed-import { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } .column-inner .feed-import [role='img'] { position: relative; } .column-inner .feed-import a:hover .black { display: table; } .column-inner .feed-import a:hover .black > div { display: table-cell; text-align: center; vertical-align: middle; } .column-inner .feed-import .black span { padding: 0.5em 1.5em; border: 1px solid #fff; color: #fff; font-size: 1.7em; } .feed-import .card, .feed-import > a { width: 100% !important; min-width: 250px; margin-left: 2%; } /* Right sidebar feed fixes */ .right-sidebar .feed-import .card, .right-sidebar .feed-import a { min-width: 0; } .feed-import .card-go a::after { display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; content: ''; } .right-sidebar .feed-import .card-image { margin-bottom: 1rem; } @media (min-width: 881px) { .feed-import .card, .feed-import > a { width: 48% !important; } } @supports (display: grid) { .feed-import .card, .feed-import > a { grid-column-start: auto; grid-column-end: auto; width: 100% !important; margin: 0 !important; } } /* ---------------- */ /* End Feed Imports */ /* ---------------- */ /* This is the link button on the right side of the `.top-title` heading. */ [id='main'] div .top-title a { color: #000; font-weight: normal; text-decoration: none; box-shadow: none; } [id='main'] div .top-title a:focus { outline: 1px dashed #000; } /* Sometimes people put `.button` or `.button-hollow` on the top title links this will fix them */ /* Have to use the `#main` because the buttton classes are in the same specificity range */ #main .top-title div a[class^='button'] { border: 1px solid #000; background-color: transparent; font-size: 0.9375rem; border-radius: 0; padding: 0.45em 0.75em; transition: none; } #main .top-title div a[class^='button']:hover { color: #000; background-color: transparent; text-decoration: underline; box-shadow: none; } #main .top-title div a[class^='button'] + a { margin-left: 0.2em; } /* Weird Alex Code --- Couldn't find another way to handle this for the improvement from the president profile, also affects all profiles */ #content_body .boxed-only, .content-continued .boxed-only { display: none; } /* end wierd code */ .gift, .ou-form div.alert-success, .ou-form div.alert-danger { position: relative; top: 2px; left: 2px; width: 89.7%; padding: 2% 4%; outline: 1px solid #ccc; box-shadow: inset 0 -4px #fc0; } .ou-form div.alert-danger { box-shadow: inset 0 -4px #b60000; } /* ---------------- */ /* ## Latest Posts */ /* ---------------- */ .latest-post .author { margin-top: -10px; font-size: 1.45em; font-style: italic; } /* ---------------- */ /* End Latest Posts */ /* ---------------- */ /* --------------- */ /* ## List Spread */ /* --------------- */ /* List Spreads, alternative to boxed-sections */ ul.list-spread { padding: 15px 0 0 0; overflow: hidden; font-size: 10px; list-style-type: none; } ul.list-spread > li { margin-top: 0 !important; } .right-sidebar aside ul.list-spread.two > li, .right-sidebar ul.list-spread.three > li, .right-sidebar ul.list-spread.four > li, .right-sidebar ul.list-spread.five > li { width: 100%; } .full-width .list-spread > li, .list-spread > li { left: 0; margin: 0; padding: 0; text-align: center; vertical-align: top; } .full-width .list-spread.left-align li, .full-width .list-spread.left-align { text-align: left; } fieldset .list-spread { margin-bottom: -1em; font-size: 1em; } .list-spread > li h2, .list-spread > li h3, .list-spread > li h4, .list-spread > li h5, .list-spread > li h6 { max-width: 92%; margin: 0 auto 0.5em auto; text-align: center; } .list-spread > li p { max-width: 88%; margin: 0 auto; font-size: 1.7em; text-align: center; } .list-spread > li * p { font-size: 1em; text-align: inherit; } /* --------------- */ /* End List Spread */ /* --------------- */ /* ------------------------ */ /* ## Black overlay styles */ /* ------------------------ */ .black { position: absolute; display: none; width: 101%; height: 101%; background: rgba(0, 0, 0, 0.5); } .black-tout-filter { background: rgba(0, 0, 0, 0.45); } .black .gold-tout { color: #fc0; } /* ------------------------ */ /* End Black overlay styles */ /* ------------------------ */ /* widgets - Image Gos */ /* ------------------- */ /* ## Legacy Go Cards */ /* ------------------- */ /* Cards that have the [GO] on hover */ div.widget { margin: 2px; text-align: center; } div.widget p { margin: 0; } div.widget > a { text-decoration: none; } div.widget > div, div.widget > img { position: relative; width: 100%; margin: 0 auto; overflow: hidden; /* `background-image` defined in the html */ background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; } div.widget > div { padding-bottom: 50%; } div.widget div.black div { display: block; padding-top: 22%; vertical-align: middle; } div.widget h2 { margin-top: -0.6em; margin-bottom: 0.3em; padding-top: 0.6em; font-weight: 400; /* font-size: 2.65em; */ font-size: 1.65625rem; word-break: normal; } /* Linked Image with no 'Go'; galleries; Localist cards */ p a img, .gallery a img, .event-list .event-card { border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } p a:active img, p a:focus img, p a:hover img, .gallery a:active img, .gallery a:focus img, .gallery a:hover img { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.17), 0 4px 4px rgba(0, 0, 0, 0.22); } /* ------------------- */ /* End Legacy Go Cards */ /* ------------------- */ /* ------------- */ /* ## Top Title */ /* ------------- */ /** * Titles that go abouve boxed-sections */ .top-title { display: flex; flex-wrap: wrap; border-bottom: 1px solid #000; padding-bottom: 0.5rem; box-sizing: border-box; } .top-title > h2, .top-title > h3 { margin-bottom: 0 !important; } .top-title > * { flex: 1 1 auto; box-sizing: inherit; } .top-title > *:first-child { margin-right: 0.5rem; } .top-title > div { display: flex; align-items: center; min-width: 0; margin-left: 0; flex: 1 1 auto; flex-wrap: wrap; font-size: 0.9rem; } @media screen and (min-width: 881px) { .top-title > div { justify-content: flex-end; } } .top-title > div > a { outline: 1px solid black; display: inline-block; padding: 0.6rem 1rem; text-decoration: none; margin-top: 0.5rem; margin-bottom: 0.5rem; } .top-title > div > a { margin-right: 1em; } .top-title > div > a:last-of-type { margin-right: 0; } .top-title > div > a:last-of-type + div { margin-left: 0.5rem; } .top-title > div > a:hover { box-shadow: 0 5px 5px -5px #000; text-decoration: underline; background-color: #eee; } .top-title > div > div .social-links a:first-child { margin-left: 0; } /* ------------- */ /* End Top Title */ /* ------------- */ /* ========================================================================== # NEWS, EVENTS AND ANNOUNCEMENTS ========================================================================== */ /* ------- */ /* ## News */ /* ------- */ .news-widget article time { font-weight: bold; font-size: 1.3em; } #main .news-widget article h3 { margin: 0.6em 0; color: #000; font-weight: normal; font-size: 1.9em; line-height: 1.5; } .news-events a { display: block; width: 100%; } .news-events a.story { margin: 2em 0 1em; border-bottom: 1px solid #ccc; background: #ececec; } .news-events .news-widget > div { position: relative; height: 144px; overflow: hidden; text-align: center; background-color: #fc0; background-position: center; background-size: cover; } .news-events .events { margin-top: 2em; } .events .description { display: none; font-size: 0.8em; } /* --------- */ /* ## Events */ /* --------- */ .events .text h3 { margin: 0.75em 0 0.5em; font-weight: bold; font-size: 1.6em; } .events .item a:hover h3, .events .item a:focus h3 { text-decoration: underline; } /* ### No Events */ .no-feed { min-height: 200px; max-height: 25vh; padding: 0.75rem; background-color: #dedede; font-size: 1.2rem; } .no-feed::before { display: block; float: left; width: 1px; height: 1px; padding-top: 75%; content: ''; } .no-feed div span { display: block; padding: 0.25rem; background-color: #fff; line-height: 35px; font-weight: 600; } /* ---------------- */ /* ## Announcements */ /* ---------------- */ #main .announcements .item { margin-bottom: 1em; } #main .announcements .photo { float: right; width: 25%; margin-right: 0; margin-bottom: 1em; margin-left: 2%; } .full-width .announcements .photo img { max-width: 100%; } #main .announcements h3, #main .announcements h4 { margin: 0; color: #222; font-weight: 800; /* converted from 1.65em */ font-size: 1.03125rem; line-height: 1.1; } #main .announcements p { /* converted from 1.4em */ font-size: 0.875rem; } #main .announcements .text { float: left; width: 100%; } #main .announcements .photo + .text { float: left; width: 72%; } #personnel .announcements .photo { width: 17%; } #personnel .announcements .photo + .text { width: 81%; } /* ========================================================================== # SKILLBAR ========================================================================== */ /** * Plugin : an-skill-bar * Version: 1.0.1 * Description: A plugin that fills bars with a percentage you set. * Author: Hasan Misbah * Copyright 2018, Hasan Misbah * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ .skillbar { position: relative; display: block; width: auto; height: 15px; margin: 10px 5px 10px 0; padding: 10px; border-radius: 5px; overflow: hidden; font-weight: 600; background-color: #dcdcdc; } .skillbar.html .title { background-color: #000; } .skillbar.html .filled { background-color: #000; } .skillbar .title { left: 0; width: auto; height: 15px; border-radius: 5px 0 0 5px; color: #fc0; text-align: center; } .skillbar .percent, .skillbar .title { position: absolute; top: 0; z-index: 9; padding: 12px 6.5px; font-size: 12.9px; } .skillbar .percent { right: 0; color: #000; } .skillbar .filled { position: absolute; top: 0; left: 0; z-index: 8; height: 100%; border-radius: 5px 0 0 5px; } /* ========================================================================== # SOCIAL LINKS - PART 1 ========================================================================== */ [id='social-links'] a, .social-links a, .social-profile a, ul.social-small a, ul.social-medium a, ul.social-large a, [id='social-links'] a:visited, .social-links a:visited, .social-profile a:visited, ul.social-small a:visited, ul.social-medium a:visited, ul.social-large a:visited, [id='social-links'] a:hover, .social-links a:hover, .social-profile a:hover, ul.social-small a:hover, ul.social-medium a:hover, ul.social-large a:hover, [id='social-links'] a:active, .social-links a:active, .social-profile a:active, ul.social-small a:active, ul.social-medium a:active, ul.social-large a:active { position: relative; /* top: 4px; */ display: inline-block; width: 35px; min-height: 35px; margin-left: 0.75rem; padding: 0; border: none; line-height: 35px; text-indent: -9999em; box-shadow: none; } ul.social-medium a, ul.social-medium a:hover, [id='social-links'] a.medium, .social-links a.medium, .social-links a.medium:hover { width: 47px; height: 47px; line-height: 47px; } ul.social-large a, ul.social-large a:hover { width: 65px; height: 65px; line-height: 65px; } [id='social-links'] a:active, [id='social-links'] a:focus, [id='social-links'] a:hover, .social-links a:active, .social-links a:focus, .social-links a:hover, ul.social-medium a:active, ul.social-medium a:focus, ul.social-medium a:hover, ul.social-large a:active, ul.social-large a:focus, ul.social-large a:hover, .social-profile a:active, .social-profile a:focus, .social-profile a:hover { opacity: 0.85; } #social-links-large a, .social-links-large a { position: relative; display: inline-block; width: 75px; min-height: 75px; margin-left: 0.5em; padding: 0; border: none; text-indent: -9999em; box-shadow: none; } #social-links.small a, .social-links.small a { width: 25px; min-height: 25px; margin-left: 0.5em; line-height: 25px; } /* Social media icons */ #social-links-large a, #social-links-large a:visited, [id='social-links'] a, .social-links-large a, .social-links-large a:visited, .social-links a, .social-profile a, ul.social-small a, ul.social-medium a, ul.social-large a, [id='social-links'] a:visited, .social-profile a:visited, ul.social-small a:visited, ul.social-medium a:visited, ul.social-large a:visited { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } #social-links-large a:active, #social-links-large a:focus, #social-links-large a:hover, [id='social-links'] a:hover, .social-links-large a:active, .social-links-large a:focus, .social-links-large a:hover, .social-links a:hover, .social-profile a:hover, ul.social-small a:hover, ul.social-medium a:hover, ul.social-large a:hover, [id='social-links'] a:active, .social-links a:active, .social-profile a:active, ul.social-small a:active, ul.social-medium a:active, ul.social-large a:active, [id='social-links'] a:focus, .social-links a:focus, .social-profile a:focus, ul.social-small a:focus, ul.social-medium a:focus, ul.social-large a:focus { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19), 0 2px 5px rgba(0, 0, 0, 0.23); opacity: 0.85; } /* ========================================================================== # FEEDS ========================================================================== */ .feed-wrap { position: relative; margin: 1em 0; } .feed-profile { width: 100%; margin-bottom: 0.5em; overflow: hidden; color: #fff; line-height: 35px; background-color: #000; } .feed-profile a { display: inline-block; max-width: 85%; padding-left: 2%; color: #fff; font-size: 1rem; line-height: normal; vertical-align: middle; word-break: normal; background-size: 60%; } .feed-profile a:nth-child(2) { display: inline-block; float: right; width: 35px; height: 35px; } .feed-profile + .connect { height: 300px; border-bottom: 1px solid #999; overflow: hidden; overflow-y: scroll; } .feed-wrap .shadow { position: absolute; bottom: 0; width: 100%; height: 25px; -webkit-box-shadow: inset 0 -19px 29px -25px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 -19px 29px -25px rgba(0, 0, 0, 0.5); box-shadow: inset 0 -19px 29px -25px rgba(0, 0, 0, 0.5); } /* Scrollbars on social feeds. They are invisible otherwise (at least on Mac) */ #scrollerBar::-webkit-scrollbar { -webkit-appearance: none; } #scrollerBar::-webkit-scrollbar:vertical { width: 11px; } #scrollerBar::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 8px; background-color: rgba(0, 0, 0, 0.5); } #scrollerBar::-webkit-scrollbar-track { border-radius: 8px; background-color: #fff; } /* ========================================================================== # SCREEN READER CLASSES ========================================================================== */ label.label_in_textfield, [id='social-links'] a span, .social-links a span, .feed-profile a:nth-child(2) span, .sr-only { position: absolute; left: -100rem; } .show-for-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* ========================================================================== # SOCIAL LINKS - PART 2 ========================================================================== */ [id='social-links'] a.facebook, .social-links a.facebook, .full-width .sidebar a.facebook, a.facebook { background: #3b5998 url(//www.mtu.edu/mtu_resources/images/n/facebook.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.twitter, .social-links a.twitter, .full-width .sidebar a.twitter, a.twitter { background: #55acee url(//www.mtu.edu/mtu_resources/images/n/twitter.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.linkedin, .social-links a.linkedin, .full-width .sidebar a.linkedin, a.linkedin { background: #0077b5 url(//www.mtu.edu/mtu_resources/images/n/linkedin.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.instagram, .social-links a.instagram, .full-width .sidebar a.instagram, a.instagram { /* background: #252525 url(//www.mtu.edu/mtu_resources/images/n/instagram.svg) no-repeat; */ background: #d03275 url(//www.mtu.edu/mtu_resources/images/n/instagram.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.youtube, .social-links a.youtube, .full-width .sidebar a.youtube, a.youtube { background: #e52d27 url(//www.mtu.edu/mtu_resources/images/n/youtube.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.flickr, .social-links a.flickr, .full-width .sidebar a.flickr, a.flickr { background: #ff0084 url(//www.mtu.edu/mtu_resources/images/n/flickr.svg) no-repeat; background-position: center; background-size: 70%; } [id='main'] [id='social-links'] a.email, .main [id='social-links'] a.email, .full-width .sidebar a.email, a.email { background: #ccc url(//www.mtu.edu/mtu_resources/images/n/mail.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.print, .social-links a.print, .full-width .sidebar a.print, a.print { background: #ccc url(//www.mtu.edu/mtu_resources/images/n/printer.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.rss, .social-links a.rss, .full-width .sidebar a.rss, a.rss { background: #ee802f url(//www.mtu.edu/mtu_resources/images/n/rss.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.pinterest, .social-links a.pinterest, .full-width .sidebar a.pinterest, a.pinterest { background: #e60023 url(//www.mtu.edu/mtu_resources/images/n/pinterest.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.tiktok, .social-links a.tiktok, .full-width .sidebar a.tiktok, a.tiktok { background: #222 url(//www.mtu.edu/mtu_resources/images/n/tiktok.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.soundcloud, .social-links a.soundcloud, .full-width .sidebar a.soundcloud, a.soundcloud { background: #ff3a00 url(//www.mtu.edu/mtu_resources/images/n/soundcloud.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.snapchat, .social-links a.snapchat, .full-width .sidebar a.snapchat, a.snapchat { background: #fffc00 url(//www.mtu.edu/mtu_resources/images/n/snapchat.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.vimeo, .social-links a.vimeo, .full-width .sidebar a.vimeo, a.vimeo { background: #1ab7ea url(//www.mtu.edu/mtu_resources/images/n/vimeo.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.apple, .social-links a.apple, .full-width .sidebar a.apple, a.apple { background: #1ab7ea url(//www.mtu.edu/mtu_resources/images/n/apple.svg) no-repeat; background-position: center; background-size: 70%; } [id='social-links'] a.huskylink, .social-links a.huskylink, a.huskylink, [id='social-links'] a.mymichigantech, .social-links a.mymichigantech, a.mymichigantech { background: #000 url(//www.mtu.edu/mtu_resources/images/logos/michigan-tech-logo-new-left.svg) no-repeat; background-position: center; background-size: 65%; } p a.facebook, ul.inline li a.facebook, p a.twitter, ul.inline li a.twitter, p a.linkedin, ul.inline li a.linkedin, p a.instagram, ul.inline li a.instagram, p a.youtube, ul.inline li a.youtube, p a.pinterest, ul.inline li a.pinterest, p a.tiktok, ul.inline li a.tiktok, p a.snapchat, ul.inline li a.snapchat, p a.flickr, ul.inline li a.flickr { background: transparent; } p a.facebook::after, ul.inline li a.facebook::after, p a.twitter::after, ul.inline li a.twitter::after, p a.linkedin::after, ul.inline li a.linkedin::after, p a.instagram::after, ul.inline li a.instagram::after, p a.youtube::after, ul.inline li a.youtube::after, p a.pinterest::after, ul.inline li a.pinterest::after, p a.tiktok::after, ul.inline li a.tiktok::after, p a.snapchat::after, ul.inline li a.snapchat::after, p a.flickr::after, ul.inline li a.flickr::after { display: inline-block; width: 18px; height: 18px; margin-bottom: 1px; margin-left: 4px; vertical-align: middle; content: ''; } p a.facebook::after, ul.inline li a.facebook::after { background: #3b5998 url(//www.mtu.edu/mtu_resources/images/n/facebook.svg) no-repeat left top; background-position: center; background-size: 80%; } p a.twitter::after, ul.inline li a.twitter::after { background: #55acee url(//www.mtu.edu/mtu_resources/images/n/twitter.svg) no-repeat left top; background-position: center; background-size: 80%; } p a.linkedin::after, ul.inline li a.linkedin::after { background: #0077b5 url(//www.mtu.edu/mtu_resources/images/n/linkedin.svg) no-repeat left top; background-position: center; background-size: 80%; } p a.instagram::after, ul.inline li a.instagram::after { /* background: #252525 url(//www.mtu.edu/mtu_resources/images/n/instagram.svg) no-repeat left top; */ background: #d03275 url(//www.mtu.edu/mtu_resources/images/n/instagram.svg) no-repeat left top; background-position: center; background-size: 80%; } p a.youtube::after, ul.inline li a.youtube::after { background: #f00 url(//www.mtu.edu/mtu_resources/images/n/youtube.svg) no-repeat left top; background-position: center; background-size: 80%; } p a.pinterest::after, ul.inline li a.pinterest::after { background: #e60023 url(//www.mtu.edu/mtu_resources/images/n/pinterest.svg) no-repeat left top; background-position: center; background-size: 80%; } p a.tiktok::after, ul.inline li a.tiktok::after { background: #222 url(//www.mtu.edu/mtu_resources/images/n/tiktok.svg) no-repeat left top; background-position: center; background-size: 80%; } p a.snapchat::after, ul.inline li a.snapchat::after { background: #fffc00 url(//www.mtu.edu/mtu_resources/images/n/snapchat.svg) no-repeat left top; background-position: center; background-size: 80%; } p a.flickr::after, ul.inline li a.flickr::after { background: #ff0084 url(//www.mtu.edu/mtu_resources/images/n/flickr.svg) no-repeat left top; background-position: center; background-size: 80%; } /* ========================================================================== # CRITICAL LEGACY TOUT CSS ========================================================================== */ ul.touts li > div, ul.touts li > a > div, h2.tout { display: table; width: 190px; height: 190px; margin: 0.5em auto 0.25em; -webkit-border-radius: 95px; -moz-border-radius: 95px; border-radius: 95px; color: #000; font-weight: normal; font-size: 2.85em; text-align: center; background: #fc0; background-size: cover; } ul.touts li > div > span, ul.touts li > a > div > span { display: table-cell; font-weight: 600; font-size: inherit; line-height: 50px; letter-spacing: 1px; vertical-align: middle; } ul.touts li, ul.touts li a, ul.touts li span, ul.touts li p, ul.touts li p a { font-weight: 600; font-size: 1rem; line-height: 1.5; } ul.touts li a div div { display: none; } /* Icon Lists */ .icon-list a::after { line-height: 1.25; } /* Captions */ h2 + .caption-wrapper { margin-top: 0.5rem; } .caption-text { display: block; padding-bottom: 0.4em; border-bottom: 1px solid #000; font-size: 14px; font-family: heading-numerals, heading-characters, serif; line-height: 1.3; } /* ========================================================================== # FLICKER PHOTO GALLERY ========================================================================== */ .gallery { display: flex; flex-wrap: wrap; } .gallery .item { max-width: 32.15%; margin-right: 1.15%; margin-bottom: 10px; } @media screen and (min-width: 650px) { .gallery .item { max-width: 23.5%; margin-right: 1.5%; } } .gallery .item img { margin-bottom: 0; } .top-title + .gallery .item { margin-top: 0; } .gallery .photo_gallery .inner { margin: 1em 0; overflow: hidden; } #right_sidebar + #content .gallery .item { margin: 0.6em; } #content .gallery img.img { margin-bottom: 0; } /* ========================================================================== # PROFILE LIST ========================================================================== */ .profile-list .item { clear: both; padding: 5px 0; border-top: 1px solid #666; overflow: auto; } .profile-list .item:first-child { padding-top: 0; border-top: none; } .profile-list .photo { float: left; width: 170px; } #content .profile-list .photo img.img { margin: 0; } .profile-list .content { margin-left: 180px; } .profile-list .content h2 { font-size: 2em; } .profile-list h3 { font-size: 1.6em; line-height: 1.1; } .profile-list h4 { margin-top: 0; color: #000; font-size: 1.5em; } .profile-list h5 { font-size: 1.4em; } .profile-list p { font-size: 1.4em; } #academy-search { display: none; } .experts-photo { float: left; width: 170px; margin-right: 2em; } .experts-photo + h1 { font-size: 2.8em; } form#subForm { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 2em; } form#subForm .person { width: 100%; } /* ========================================================================== # JUMP MENU ========================================================================== */ .jump-menu { position: relative; box-sizing: border-box; border: 1px solid #cccccc; padding: 0 0.5rem; cursor: pointer; } .jump-menu * { box-sizing: inherit; } .jump-menu_heading { font-size: 1.5rem; background: url(//www.mtu.edu/mtu_resources/images/n/arrow-down-black.svg); background-position: center right; background-repeat: no-repeat; background-size: 1rem 1rem; } .jump-menu_items { position: absolute; left: 0rem; z-index: 1; display: none; width: 100%; max-height: 250px; margin-top: 1px; padding: 0; overflow-x: hidden; overflow-y: auto; font-size: 1rem; list-style-type: none; background-color: white; box-shadow: 0 35px 60px -15px rgb(0 0 0 / 30%); outline: 1px solid #cccccc; } .sidebar-nobox ul.jump-menu_items > li { width: 100%; } .jump-menu_items > li { padding: 0; box-shadow: inset 0 -1px 0 0 #cccccc; left: 0; } /* specificity hack */ .jump-menu_items.jump-menu_items { padding-inline-start: 0; } .jump-menu_items.jump-menu_items > li { left: 0; padding-right: 0; } .jump-menu_items > li > a { display: block; width: 100%; padding: 0.5rem; padding-left: 1.5rem; text-decoration: none; } .jump-menu_items > li > a:hover { background-color: #cccccc; text-decoration: underline; text-decoration: solid underline currentColor 3px; box-shadow: none; } .jump-menu.active .jump-menu_items { display: block; } /** * Dropdown menu with links in it that will allow a user to Select a different program */ img[src$='.svg'] { width: 100%; } /* ========================================================================== # SLIDERS (AKA ACCORDIONS) ========================================================================== */ /* TODO: go through this with some more granular comments */ .slider { clear: both; margin-bottom: 20px; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; } .slider + .slider { margin-top: -20px; border-top: 0; } .sliders { margin: 24px 0 30px; } /* If the sliders are in a row with left image this will keep them from having a huge top margin */ .left + [class*='left'] > .sliders { float: left; width: 100%; } .sliders + .sliders { margin-top: -30px; } .sliders + .sliders { margin-top: -30px; } .sliders + .sliders .slider:first-child { border-top: 0; } h2 + .sliders, h3 + .sliders, h4 + .sliders { margin-top: 0; } .sliders .item .slider { margin-bottom: 0; border-bottom: 0; } .sliders h2.graybar + .item, h2.graybar + .sliders, h2.graybar + .slider { margin-top: -11px; } .slider .slider-content { display: none; } .slider[aria-expanded='false'] .bar h2, .slider .bar h2, .slider[aria-expanded='false'] .bar .faq, .slider .bar .faq, .slider[aria-expanded='false'] .bar h4, .slider .bar h4, .slider .accordion-title > div { margin: 0 5px 0 0; padding: 0.4em 2em 0.4em 0.4em; /* font-size: 2em; */ font-size: 1.25rem; background-image: url(//www.mtu.edu/mtu_resources/images/n/arrow-down-black.svg); background-repeat: no-repeat; background-position: right center; background-size: 20px 20px; cursor: pointer; opacity: 0.85; line-height: 1.5; } .slider .bar h2, .slider .bar h4 { color: #000; background-image: url(//www.mtu.edu/mtu_resources/images/n/arrow-up-black.svg); } .slider:focus { border-color: #fff; outline: 1px dashed #888; outline-offset: -1px; } .slider .bar h2:hover, .slider .faq:hover, .slider .faq:focus, .slider:focus .bar h2, .slider .bar h4:hover, .slider:focus .bar h4, .slider .accordion-title > div:hover { text-decoration: underline; /* background-image: url(//www.mtu.edu/mtu_resources/images/n/arrow-up-yellow.svg); */ } /* .slider[aria-expanded="false"] .bar h2:hover, .slider[aria-expanded="false"]:focus .bar h2, .slider[aria-expanded="false"] .bar h4:hover, .slider[aria-expanded="false"]:focus .bar h4 { background-image: url(//www.mtu.edu/mtu_resources/images/n/arrow-down-yellow.svg); } */ .slider .bar h2.big { padding: 8px 30px 8px 8px; color: #222; font-weight: 600; font-size: 2.85em; } .slider[aria-expanded='false'] .bar h2.big, .slider .bar h2.big { background-size: 25px 25px; } /* Only Intended for mobile use */ @media (max-width: 649px) { /* makes the accordion title sticky when it is open */ .slider[aria-expanded='true'] .accordion-title { position: sticky; top: 3rem; background: #fff; z-index: 1; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } /* shadow because box-shadow won't work */ .slider[aria-expanded='true'] .accordion-title::before { content: ''; width: 100%; height: 15px; position: absolute; bottom: -15px; background-image: linear-gradient(to bottom, black, transparent); opacity: 0.4; } } .bar + .slider-content { height: auto; padding: 10px 2rem; border-top: 2px dashed #aaa; /* border-bottom: 1px solid #666; */ overflow: hidden; background: #ececec; } .hide-slider-style .slider-content { padding: 0; border: 0; background: none; } .slider-content h2 { /* font-size: 2.5em; */ font-size: 1.5625rem; } .slider-content h3 { color: #333; /* font-size: 2.3em; */ font-size: 1.4375rem; } .slider-content h4 { color: #444; /* font-size: 2em; */ font-size: 1.25rem; } .slider-content h5 { color: #555; /* font-size: 1.8em; */ font-size: 1.125rem; } /* --------------- */ /* ## Toggle Wrap */ /* --------------- */ .toggle-wrap { position: relative; display: table; box-sizing: border-box; min-width: 100%; } .toggle-wrap h2, .toggle-wrap .top-title { float: left; margin: 0; padding: 0; border: 0; background: none; } .graybar + .toggle-wrap { margin-top: 1.5rem; } .toggle-wrap.graybar { padding: 0.8em; background: #ececec none repeat scroll 0 0; } .graybar .toggle { padding-right: 3px; } .toggle-wrap.top-title { border-bottom: 1px solid #000; } .toggle-wrap .top-title h2 { margin-bottom: 0.15em; } .toggle-wrap.top-title p.toggle { padding-left: 6px; } [id='main'] .top-title .toggle a { padding-bottom: 5px; } .toggle-align { display: table-cell; padding: 0; vertical-align: bottom; } h2.toggle-align { color: #222; font-weight: 600; font-size: 1.5rem; } h2.graybar.toggle-align { margin-bottom: 0; } .toggle { display: table-cell; width: 90px; padding-right: 7px; color: #315196; font-weight: 600; font-size: 0.9rem; text-align: right; text-decoration: underline; vertical-align: bottom; cursor: pointer; } .toggle:focus, .toggle:hover { text-decoration: none; } .toggle:focus { outline: 1px dashed #000; } h3 + .sliders, .toggle-wrap + .sliders { margin-top: 6px; } /* --------------- */ /* End Toggle Wrap */ /* --------------- */ /* -------- */ /* ## FAQS */ /* -------- */ .faqs .item { padding: 1rem 0; overflow: hidden; border-bottom: 1px solid #bbb; } /* .faqs .item:focus { outline: 1px dashed #000; } */ .faqs .item:first-of-type { border-top: 1px solid #bbb; } .faqs .question { min-height: 1.8em; cursor: pointer; } .faqs .highlight { background: #ccc; } .faqs .question h2:not(.faq), .faqs p.number { float: left; width: 30px; height: 30px; margin: 0; padding: 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; font-weight: 600; font-size: 1.1rem; line-height: 1.7; text-align: center; background: #fc0; } .faqs p { margin-bottom: 0; } .faqs p + p, .faqs p + ul { margin-top: 1.25em; } .faqs + h3, .faqs + .toggle-wrap { padding-top: 1.25rem; } .faqs [aria-expanded='true'] .number { position: relative; text-indent: -999px; background-color: #000; } .faqs [aria-expanded='true'] .number::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; color: #fc0; font-size: 1.5rem; text-indent: 0; line-height: 1.22; content: '×'; } .faqs .question p:not(.number), .faqs h2.faq { margin: 1px 0 0 51px; padding-top: 2px; color: #315196; font-weight: bold; font-size: 1.1rem; line-height: 1.55; text-decoration: underline; } h2.faq { float: none; } .faqs .item:focus { outline: 0; } .faqs .item:focus p.number, .faqs .item:hover p.number { color: #fc0; background: #000; } .faqs .item:focus h2.faq, .faqs .item:hover h2.faq { text-decoration: none; } .faqs .answer { clear: both; margin: 0 0 0 51px; padding: 5px 0; } .faqs .wrapper { display: none; clear: left; } /* New FAQ's to have the same structure as regular sliders. We need the :not() in there so we don't affect legacy FAQ sliders. */ div:not(.faqs) .slider .number { position: absolute; top: 50%; transform: translateY(-50%); background-color: #fc0; width: 1.5rem; height: 1.5rem; border-radius: 1rem; display: flex; justify-content: center; align-items: center; } div:not(.faqs) .slider[aria-expanded='true'] .number { background-color: #000; color: #fff; } div:not(.faqs) .accordion-title { position: relative; } div:not(.faqs) .slider .accordion-title .faq.faq { margin-left: 1.5rem; } /* -------- */ /* End FAQS */ /* -------- */ /* ========================================================================== # FORMS ========================================================================== */ /* TODO: go through this with some more granular comments */ .sp_field { display: none; } select { background-color: #fff; } #spin img { width: auto; } .ou-form div.alert-success p:first-of-type::before { font-weight: bold; font-size: 30px; white-space: pre-line; content: 'Success!\A'; } .ou-form div.alert-danger p:first-of-type::before { font-weight: bold; font-size: 30px; white-space: pre-line; content: 'Oops!\A'; } form.validate { box-sizing: border-box; max-width: 100%; font-size: 1.6em; line-height: 1.5; } form.validate * { box-sizing: inherit; } form#banner-form.validate input[type='submit'], form#banner-form.validate input[type='reset'], form#banner-form.validate input[type='button'] { padding: 0.47em 0.8em; } form.validate label:not(.error), form.validate legend, .validate input[type='submit'], .validate input[type='reset'], .validate input[type='button'] { font-weight: 600; } /* Calendar and clock for date and time */ .validate label.date::after, .validate label.time::after { position: relative; left: 0.25rem; display: inline-block; width: 1.375rem; height: 1.4375rem; vertical-align: text-bottom; background: url(//www.mtu.edu/mtu_resources/images/n/date-range.svg) center no-repeat; opacity: 0.65; content: ''; pointer-events: none; } .validate label.time::after { background: url(//www.mtu.edu/mtu_resources/images/n/time.svg) center no-repeat; } .validate label.date.time::after { width: 3.125rem; background: url(//www.mtu.edu/mtu_resources/images/n/time.svg) right no-repeat, url(//www.mtu.edu/mtu_resources/images/n/date-range.svg) left no-repeat; } /* End date and time */ .validate legend { /* margin-left: -1.5%; */ } .sidebar form.validate { font-size: 1.133em; } form.validate p { font-size: inherit; line-height: inherit; } form.validate .item .left { margin-right: 1em; margin-bottom: 1em; } form.validate .item .left:last-child { margin-right: 0; } form.validate h2, form.validate h3, form.validate h4, form.validate h5, form.validate h6 { font-size: 22px; } form.validate label.error, form.validate span.error { position: relative; top: -1.9em; display: none; color: #b60000; } form.validate span.error { font-size: 15px; } form.validate label.error.invalid, form.validate span.error.invalid { display: block; } form.validate div.item + label.error { top: 0; } form.validate label span, form.validate legend span { color: #b60000; } form.validate .item { margin-bottom: 0.5em; } form.validate input, form.validate textarea, form.validate select, form.validate fieldset { width: 100%; margin-bottom: 1.7em; padding: 5px; border: 1px solid #777; } fieldset input[type='text'], fieldset input[type='tel'], fieldset input[type='email'], fieldset input[type='date'], fieldset textarea, fieldset select { border-color: #777; } .radio label, .checkbox label, input[type='radio'] + label, input[type='checkbox'] + label { cursor: pointer; } form.validate fieldset label { font-size: 15px; } /* Has to be larger than 13px because iPhone will zoom in when it is 13 and lower */ form.validate select { font-size: 14px; } input:read-only { background-color: #ececec; } /* ------------------------ */ /* ## OU Campus form code. */ /* ------------------------ */ .ou-form { margin: 25px 0 40px 0; } .ou-form .input-group { margin-bottom: 1.7em; } .form-group + .add-text { position: relative; top: -2em; } .ou-form fieldset .help-block { margin-bottom: -1.7em; } .validate .help-block { color: #555; font-size: 0.85em; line-height: 1.5; } input + .help-block { margin-top: 0.4em; } .ou-form .validate input[type='submit'], .ou-form .validate input[type='reset'], .ou-form .validate input[type='button'] { margin-top: 20px; border-radius: 5px; } form.validate p.submission { margin-top: 0; padding-top: 0; font-weight: 600; font-size: 1.3em; } .submission img { position: relative; top: 15px; margin: 0; padding-left: 10px; } /* ------------------- */ /* ## Form Vaildation */ /* ------------------- */ form.validate .item fieldset + p:not(:empty), form.validate .item .item + p:not(:empty), fieldset + label.error, label.error + .item p:not(:empty) { margin-top: -1.5em; margin-bottom: 1.5em; } form.validate input, form.validate textarea, form.validate select, .ou-form fieldset .help-block:last-of-type, .ou-form .input-group, form.validate .item fieldset p:not(:empty):last-of-type, form.validate fieldset.item .item:last-of-type, fieldset .form-group:last-child { margin-bottom: 0; } .validate label + input, .validate label + textarea, .validate label + select { margin-top: 0.25em; } .validate label.error + br { display: none; } .validate .form-group, form.validate .item { margin-bottom: 1.5em; } form.validate label.error, form.validate span.error { top: 0; } form.validate label.error { font-weight: 600; } form.validate span.error { font-weight: 300; font-size: 14px; } div.alert-danger { margin-bottom: 3.5em; } .validate input[type='text'].error, .validate input[type='date'].error, .validate input[type='tel'].error, .validate input[type='email'].error, .validate textarea.error, .validate .has-error input[type='text'], .validate .has-error input[type='date'], .validate .has-error input[type='tel'], .validate .has-error input[type='email'], .validate .has-error textarea, .validate .has-error fieldset, .validate select.error { border-color: #b60000; box-shadow: inset 0 0 0 1px #b60000; } .validate .has-error label, .validate .has-error legend { color: #b60000; } .sidebar form.validate input, .sidebar form.validate textarea, .sidebar form.validate select, .sidebar form.validate fieldset { width: 100%; padding: 3%; } .sidebar input[type='submit'], .sidebar input[type='reset'] { font-size: 0.78em; } form.validate .has-error .input-group label { color: inherit; } fieldset.has-error { border-color: #b60000; } form.validate input.shift, form.validate textarea.shift, form.validate select.shift, form.validate fieldset.shift { margin-bottom: 0.5em; } form.validate input[type='submit'] { padding: 0.5em; border: none; white-space: pre-wrap; background: #fc0; } form.validate input[type='submit'], form.validate input[type='reset'], form.validate input[type='button'] { width: auto; padding: 0.47em 0.8em; } form.validate input[type='submit']:focus, form.validate input[type='reset']:focus, form.validate input[type='button']:focus { outline: none; } form.validate input[type='reset'], form.validate input[type='button'] { border: none; color: #000; background: #ececec; } form.validate input[type='submit'] + input[type='reset'], form.validate input[type='reset'] + input[type='submit'], form.validate input[type='submit'] + input[type='button'], form.validate input[type='button'] + input[type='reset'] { margin-left: 1em; } form.validate input[type='submit'], form.validate input[type='reset'], form.validate input[type='button'] { width: auto; margin-bottom: 1.5em; padding-right: 38px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } form.validate input[type='button'] { margin-right: 10px; padding-right: 0.8em; } .reset-icon, .validate input[type='submit'] + span, .validate input[type='reset'] + span { position: relative; left: -27px; display: inline-block; width: 16px; height: 21px; vertical-align: text-bottom; background: url(//www.mtu.edu/mtu_resources/images/n/checkmark.svg) center no-repeat; background-size: 65%; opacity: 0.5; transition: background-size 0.08s ease-in-out, opacity 0.08s ease-in-out; pointer-events: none; } .reset-icon, .validate input[type='reset'] + span { background: url(//www.mtu.edu/mtu_resources/images/n/arrow-up-black.svg) center no-repeat; } /* reset-icon is kind of a throwaway that was only used on the /news/stories/ page */ .filters .reset-icon { position: absolute; left: 90%; height: 100%; } .validate input[type='submit']:focus, .validate input[type='reset']:focus, .validate input[type='button']:focus, .validate input[type='submit']:hover, .validate input[type='reset']:hover, .validate input[type='button']:hover { text-decoration: underline; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18), 0 4px 4px rgba(0, 0, 0, 0.22); } .validate input[type='submit']:active, .validate input[type='reset']:active, .validate input[type='button']:active { box-shadow: none; } form.validate input:invalid { outline: 2px solid #b60000; } input.error, textarea.error, .has-error input { border-color: #b60000; } input.error:focus, textarea.error { outline: none; } form.validate input:focus:invalid, input.error, textarea.error { color: #b60000; } form.validate .group { margin-bottom: 1.7em; } form.validate input[type='checkbox'], form.validate input[type='radio'] { width: auto; width: initial; margin: 5px 5px 0 20px; } form.validate .item p:empty, form.validate .item h2 + p:not(:empty) { margin: 0; } form.validate .clearer:not(.item) { height: 0; } form.validate select { /* Firefox */ /* width: 99%; */ font-size: 17px; } /* ------------------- */ /* End Form Vaildation */ /* ------------------- */ /* Setting Focus Styles */ input[type='text']:focus, input[type='email']:focus, input[type='date']:focus, input[type='number']:focus, input[type='tel']:focus, textarea:focus { border: 1px solid #3949ab; outline: 0; box-shadow: inset 0 0 0 1px #3949ab; } form.validate fieldset.active, form.validate select:focus { border: 1px solid #3949ab; outline: 0; box-shadow: inset 0 0 0 1px #3949ab; } label.active, fieldset.active legend { color: #3949ab; } fieldset.active legend { background-color: #fff; } input:read-only:focus { border-color: #999; outline-color: #999; } /* ========================================================================== # INFORMATION AND ALERT SLIVER ========================================================================== */ /* ---------------- */ /* ## Alert Sliver */ /* ---------------- */ .alert-sliver, .alert-sliver ~ .stick { --zindex: 75; } .alert-sliver ~ .stick { z-index: auto; } .alert-sliver { position: absolute; top: 0; left: 0; z-index: 75; z-index: var(--zindex); box-sizing: border-box; width: 100%; /* min-height: 3.5rem; min-height: var(--alertbarheight, 3.5rem); */ max-height: 20rem; overflow: hidden; color: #000; font-weight: 400; font-size: 0.9rem; background-color: #fff; } /* @media (min-width: 881px) { .alert-sliver { font-size: 1rem; } } */ .alert-sliver * { box-sizing: inherit; } .alert-sliver .notice h2 { padding-right: 2rem; font-size: 1.5em; } .alert-sliver .notice p { font-size: inherit; } .alert-sliver .notice h2, .alert-sliver .notice a { color: inherit; font-weight: inherit; } .alert-sliver .notice a { display: inline-block; padding: 0 2px; } .alert-sliver .notice a:focus { outline: 1px dashed #000; } .alert-sliver-inner { position: relative; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; padding: 0.5rem; } @media (min-width: 881px) { .alert-sliver-inner { padding: 0.75rem 1rem; } } .alert-sliver .notice, .alert-sliver .notice > * { margin: 0; } .alert-sliver .notice > * + * { margin-top: 0.5rem; margin-bottom: 0; } .alert-sliver .alert { padding: 0; border: none; } /* ----------------------- */ /* ## Alert Dimiss Button */ /* ----------------------- */ .alert-sliver-dismiss { position: absolute; top: 0.5rem; right: 0.25rem; display: block; width: 1em; height: 1em; padding: 0; border-color: #000; border-style: solid; border-width: 2px; border-radius: 100%; font-size: 1.5rem; background-color: transparent; cursor: pointer; transition: background-color 0.2s, color 0.2s; } @media (min-width: 881px) { .alert-sliver-dismiss { top: 0.75rem; right: 0.5rem; } } .alert-sliver-dismiss:focus { outline: 1px dashed #000; } .alert-sliver-dismiss:hover { color: #fff; background-color: #000; } .alert-sliver-dismiss::before { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: auto; content: '\00D7'; } .alert-sliver-dismiss.alert-closed::before { content: '\002B'; margin-bottom: 3px; } /* ----------------------- */ /* End Alert Dimiss Button */ /* ----------------------- */ /* --------------------------- */ /* ## Alert Nav Modifications */ /* --------------------------- */ /** * Modifcations that need to happen to the nav and its components when there is an alert bar. * There are a lot of rules for desktop and mobile so be wary when adding rules. * `--alertbarheight` - Alert Bar Height set by javascript on the html element. * It changes the padding and heights needed to accomodate the new alert. * `--zindex` - Setup the z-index of all the comonentes to the alert is over the search box but under the mobile menu. */ .alert-sliver ~ .stick .site-header { z-index: calc(var(--zindex) + 1); margin-top: 3.25rem; } .alert-sliver ~ .stick .sitetitle { padding-top: calc(var(--alertbarheight) + 0.5rem); } .alert-sliver ~ .stick .search-box { z-index: calc(var(--zindex) - 3); } .alert-sliver ~ .stick .search-box.search-open { top: 0; top: var(--alertbarheight); z-index: calc(var(--zindex) - 2); } @media (min-width: 881px) { .alert-sliver ~ .stick .site-header { z-index: calc(var(--zindex) - 3); margin-top: 0; margin-bottom: 0; padding-top: 3.5rem; padding-top: var(--alertbarheight, 3.5rem); } .alert-sliver ~ .stick .sitetitle { padding-top: 0; } .alert-sliver ~ .stick .search-box { top: calc(var(--alertbarheight) - 4rem); } .alert-sliver ~ .stick .search-box.search-open { top: 3.5rem; top: var(--alertbarheight, 3.5rem); } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ .alert-sliver ~ .stick .site-header.shrink { padding-top: 0; } } @media (max-width: 880px) { .alert-sliver ~ .stick .search-box { top: -13rem; } .alert-sliver ~ .stick .search-box, .alert-sliver ~ .stick .search-box.search-open { z-index: var(--zindex); } } /* ### Weather Bar Adustments */ @media (max-width: 881px) { .alert-sliver ~ .stick .weather-container.breadcrumbs { transform: translateY(calc(var(--alertbarheight) - 3.5rem)); } } @media (min-width: 650px) and (max-width: 881px) { .alert-sliver ~ .stick .weather-container.breadcrumbs { transform: translateY(calc(var(--alertbarheight) - 1rem)); } } /* --------------------------- */ /* End Alert Nav Modifications */ /* --------------------------- */ /* ---------------- */ /* End Alert Sliver */ /* ---------------- */ .information, .alert { clear: both; width: 100%; } .boxed-section.border.alert, .alert { border-bottom-color: #b60000; } .boxed-section.border.alert { box-shadow: inset 0 -4px #b60000; } /* ----------------- */ /* ## Notice blocks */ /* ----------------- */ /** * Notice blocks are used to alert students of current conditions. * Can be used in place of greybar headings. * ----------------------------- * Warning: Red/High Notice * Alert: Yellow/Medium Notice * Watch: Green/Low Notice */ /* When we can annex `.full-width`, get rid of these rules. Did this to fix the font color. */ /* Also will have to worry about `..main-content` too, but this overides it for now (02/25/2020).*/ .full-width .notice-warning, .full-width .notice-alert, .full-width .notice-watch, /* -------------------- */ .notice-warning, .notice-alert, .notice-watch { padding: 0.75rem; border-style: solid; border-width: 5px; color: #000; font-weight: 700; font-size: 2.25em; } .notice-warning > p, .notice-alert > p, .notice-watch > p { margin: 0; padding: 0; color: inherit; font-size: inherit; } .notice-warning { border-color: #af4448; background-color: #ffc2c2; /* background-color: #CE2029; */ } .notice-alert { border-color: #fbab18; background-color: #ffecb3; /* background-color: #FCB514; */ } .notice-watch { border-color: #4b830d; background-color: #dcedc8; /* background-color: #77933c; */ } /* ----------------- */ /* End Notice blocks */ /* ----------------- */ /* ========================================================================== # ALUMNI PROFILES PERSONNEL ========================================================================== */ #personnel .description, #personnel .description p { font-size: 17px; line-height: 1.5; } #alumni-wrapper > img.left { width: 170px; } /* -------------------------- */ /* ## Random personnel focus */ /* -------------------------- */ /** * A Personnel item that is randomly switched out via javascript */ .focus .item > h2 { clear: both; padding: 0.5em; overflow: hidden; background: #ececec none repeat scroll 0 0; } .focus .item > h2 span { float: right; font-size: 12px; } .focus .item .photo { float: left; max-width: 170px; margin: 0 1em 0.3em 0; font-size: 1.3em; } .focus .item .inner .photo { max-width: 120px; overflow-wrap: normal; } .focus .item .photo h3, .photo h3 { margin-bottom: 0.3em; font-size: 17px; } .photo .contact h2, .photo .contact h3 { color: #666; font-size: 2.2em; } .focus .item .photo p, .photo p { margin-bottom: 0.5em; font-size: 0.9rem; } .focus .item .inner h2 span { float: right; padding: 0.15em 0.8em; border: 1px solid #000; font-size: 15px; text-indent: 0; } .focus .item .inner h2 span:hover { background-color: #ececec; } .focus .item .inner h2 span a, .focus .item .inner h2 span a:visited { color: #000; } .focus .item .inner h2 span a:active, .focus .item .inner h2 span a:hover { text-decoration: underline; } /* Profile */ .full_focus h3 { margin-bottom: 0.5em; font-size: 1.6em; } .full_focus h4 { font-size: 1.5em; } /* -------------------------- */ /* End Random personnel focus */ /* -------------------------- */ /* ========================================================================== # ICONS ========================================================================== */ a.pdf::after, #main a[href$='pdf']::after, a.doc::after, #main a[href$='doc']::after, a.docx::after, #main a[href$='docx']::after, a.xls::after, #main a[href$='xls']::after, a.xlsx::after, #main a[href$='xlsx']::after, a.ppt::after, #main a[href$='ppt']::after, a.pptx::after, #main a[href$='pptx']::after { display: inline-block; width: 16px; height: 16px; margin-bottom: 1px; margin-left: 4px; vertical-align: middle; background: url(../../images/icons/icons-sprite.png) no-repeat left top; content: ''; } a.pdf::after, #main a[href$='pdf']::after { background-position: left top; } a.doc::after, a.docx::after, #main a[href$='doc']::after, #main a[href$='docx']::after { background-position: left -50px; } a.xls::after, a.xlsx::after, #main a[href$='xls']::after, #main a[href$='xlsx']::after { background-position: left -100px; } a.ppt::after, a.pptx::after, #main a[href$='ppt']::after, #main a[href$='pptx']::after { background-position: left -150px; } a.arrow { line-height: 1.5; } a.arrow::before { display: inline-block; height: 16px; padding-right: 0; padding-left: 16px; vertical-align: middle; background: url('data:image/gif;base64,R0lGODlhDAAJAIABAOzEG////yH5BAEAAAEALAAAAAAMAAkAAAITjB+Aa6B83JOUpoqzhRK254FBAQA7') no-repeat left center; /* A quick fix to make it black because I didn't want to figure out the data:image stuff */ filter: brightness(0); content: ''; } /* Removing incons from sections that can't support having them in there */ a.noicon::after, a.noicon::before, #main a.noicon::after, #main a.noicon::before, a.rollover::after, a.rollover::before, #container a.rollover::after, #container a.rollover::before, ul.social-large a::after, ul.social-large a::before, ul.social-medium a::after, ul.social-medium a::before, ul.social-small a::after, ul.social-small a::before, #main div.mediabox a[href$='pdf']::after, #banner_image .shadow > a::after, #banner_image .shadow > a::before, #main .button::after, #main .button::before { display: none; background: 0; } /* ========================================================================== # GIVING/GIFT BOXES ========================================================================== */ /* TODO: go through this with some more granular comments */ div.gift { position: relative; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 99%; padding: 1em; } div.gifts-4 { width: 23%; } div.gifts-3 { width: 32%; } div.gifts-2 { width: 48%; } #content div.gift img.img { display: block; width: 100%; margin-bottom: 0; padding: 0; border: none; background: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* This is the share buttons for the Gift section */ .gift-wrap + .right { width: 45px; margin: 0 0 0.5em 0.5em; padding: 0.2em 1em 0.5em 0.5em; background: #ececec; } .gift-wrap + .right > span { display: block; margin: 0.2em 0; font-size: 1.5em; line-height: 1.3; text-align: center; } .gift-wrap + .right li { left: 0; } div.gift-content { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 10px; background: #fff; } div.gift .progress-wrapper { float: none; background: transparent; } .progress-wrapper + h2 { margin-top: 1.3em; } div.gift .progress-bar { margin: 0; } .progress-bar { height: 30px; margin: 10px 10px 0; overflow: hidden; font-weight: bold; font-size: 15px; line-height: 30px; background: #ccc; } .gift-wrap .progress-bar { height: 40px; line-height: 40px; } .progress-bar span { float: right; margin-right: 10px; font-size: 15px; } .progress-bar .progress { width: 0; height: 30px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0); -webkit-transition: width 1s ease; transition: width 1s ease; } .gift-wrap .progress-bar .progress { height: 40px; } .progress-goal { float: right; margin: 8px 10px 10px; font-weight: bold; font-size: 15px; } .progress-wrapper { position: relative; float: left; width: 100%; margin-bottom: 11px; } .gift-wrap .progress-wrapper { margin-bottom: 0; } .progress-hover { position: absolute; top: -45px; left: 50%; margin-left: -75px; padding: 5px; border: 1px solid #999; font-size: 12px; line-height: 1.5; background: #e2e2e2; visibility: hidden; opacity: 0; } .progress-wrapper:hover .progress-hover { visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } .progress-hover::after { position: absolute; bottom: -12px; left: 42%; display: block; width: 24px; height: 12px; margin: 5px 0 0; background: url(//www.mtu.edu/mtu_resources/images/quote-bottom.png) no-repeat; content: ''; } div.gift-buttons { clear: both; text-align: center; } div.gift-buttons a, div.gift-buttons a:visited { display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 30%; margin: 0.5em 1.3% 0.5em; padding: 8px 0; color: #333; font-size: 1.5em; text-align: center; text-decoration: none; background: #fc0; } div.gift-buttons a:hover { text-decoration: underline; text-underline-offset: 2px; background-color: #ccc; } div.gift-buttons + p.disclaimer { margin-bottom: 0; margin-left: 0.5em; color: #666; font-size: 1.3em; } div.gift-buttons + p.disclaimer.full { margin-left: 1em; padding-bottom: 0.5em; } div.gift.mini + div.gift.mini { margin: 0 1%; } div.gift.mini { margin: 0 1%; } div.gift.mini div.progress-bar, div.gift.mini div.progress-bar div.progress { height: 6px; } div.gift.mini div.progress-goal, div.gift.mini div.progress-hover, div.gift.mini div.gift-description { display: none; } div.gift.mini div.gift-buttons a { position: relative; z-index: 800; width: 100%; margin-left: 0; } div.gift.mini h3 { margin: -6px 0 12px; font-size: 1.18em; } /* Specific to alumn/recognition/profiles/ */ /* ========================================================================== # Specific to alumn/recognition/profiles/ ========================================================================== */ #academy-name span { margin: 0 3px; font-size: 1rem; } #research-filter .shadow h3 { font-size: 1.7em; } #research-filter .filter-row { font-size: 1.5em; } #research-filter input[type='submit'] { display: block; float: right; height: 34px; margin-right: -40px; border: none; color: #000; background-color: #fc0; outline: none; cursor: pointer; } #research-filter form { margin-top: 1.5em; } #research-filter .filter-row select { max-width: 215px; } /* ========================================================================== # LOCALIST WIDGET ========================================================================== */ .lwn span { float: left; clear: right; min-width: 260px; margin-bottom: 10px; padding-left: 12px; font-weight: bold; font-size: 1rem; background-color: #e9e9e9; } .lwn a { float: left; clear: left; font-weight: bold; font-size: 24px; } .lw a.nothing { display: block; margin: 0 1em 1em 0; } .lw .description p { font-size: 17px; } #lwe .lwl { font-size: 15px; } .localist_widget_wrapper .lw_event_item_image img { max-width: 100px; max-height: 100px; } /* End Localist Widget */ /* ========================================================================== # WEATHER WIDGET ========================================================================== */ .weather-container { max-width: 1200px; max-width: var(--max-width, 1200px); height: 0; margin: 0 auto; text-align: right; } #weather-holder { padding-top: 55px; } @media only screen and (min-width: 881px) { #weather-holder { padding-top: 5px; } } #weather-holder a { color: #000; text-decoration: none; } #weather-holder a span { position: relative; top: -8px; font-size: 2em; } #weather-holder a img { position: relative; width: 50px; } /* Searches in CMS */ /* ========================================================================== # SEARCH BOXES INSIDE THE CMS ========================================================================== */ .insite-search-wrap { border: 1px solid #d9d9d9; overflow: hidden; background: #fff; } .insite-search-field { float: left; width: 80%; height: 30px; margin-right: 0; padding: 5px 1%; border: none; border-radius: 0; font-size: 1rem; line-height: 1; outline: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .insite-search-button { float: right; width: 40px; height: 40px; border: 0; border-radius: 0; color: transparent; text-transform: capitalize; text-indent: -5000em; background: #eee url(//www.mtu.edu/mtu_resources/images/n/search-black.svg) no-repeat center; background-size: 60%; outline: 0; cursor: pointer; } /* ========================================================================== # FOOTER ========================================================================== */ /* .push { height: 325px; } */ /* Footer */ #footer-fixed { position: static; bottom: 0; z-index: 899; width: 100%; margin-top: -62px; background: #000; outline: 0; } #footer-fixed a, #footer-fixed a:visited { padding: 0; border: none; color: #fff; box-shadow: none; } #footer-fixed a:active, #footer-fixed a:hover { text-decoration: underline; background: transparent; } #footer-fixed a:focus { text-decoration: underline; background: none; outline: dotted 1px #fc0; outline-offset: 1px; } .footer-sections { position: relative; width: 100%; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; padding: 8px 0; overflow: hidden; font-weight: 400; font-size: 1em; cursor: default; } #footer { overflow: hidden; background: #333; cursor: default; } .footer-sections div, #footer-trigger { display: none; padding-left: 1%; color: #fc0; } #footer .footer-sections div { display: block; padding-left: 0; font-size: 1.3em; } #footer .footer-sections div > span { display: block; width: 96%; margin: 4% 0; padding: 2%; font-size: 1.3em; background: #424242; } #footer .footer-sections div:first-child span { margin-top: 0; } #footer .footer-sections div ul { margin: 0; padding: 0 0 0 1em; list-style-type: none; } #footer .footer-sections div ul li { margin: 1em 0; } #footer-webmaster, #footer-eos { display: block; float: none; width: auto; margin: 0 10px; text-align: center; } #footer-webmaster p { margin-top: 1.15em; color: #fff; font-size: 13px; } #footer #footer-contact { text-transform: none; cursor: auto; } #footer-contact address { font-style: normal; } #footer-contact h4 { margin-left: 1em; color: #fff; font-size: 1em; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; } #footer-contact p { margin-bottom: 0.5em; margin-left: 1em; color: #fff; font-size: 1em; line-height: 1.5; } #footer-contact p.dept-name, #footer-contact p.dept-name a { font-weight: 800; } #footer .inner { width: 100%; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 10px auto 0; padding: 20px 0 9px; border-top: 1px solid #808084; overflow: hidden; text-align: center; } #footer-webmaster a { font-weight: normal; font-size: 1.3em; } #footer-webmaster p a { font-size: 1em; } #footer-eos a, #footer-eos a:visited { color: #fc0; font-size: 1.3em; font-style: italic; line-height: 1.25; } #footer p.right.footer-equity { display: inline-block; float: initial; margin-top: 15px; font-size: 1.25em; text-align: center; } p.right.footer-equity span.grey { color: #fc0; background: transparent; } #betabug { width: 100%; font-size: 1.3em; text-align: center; background: #e5e5e5; } #betabug a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 5px 5px 0 0; color: #333; font-weight: normal; font-size: 1rem; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); } #betabug a:hover { text-decoration: underline; } #thermometer h2 { font-size: 2em; text-align: center; } /* ========================================================================== # ROW LEFT IMAGE ========================================================================== */ .row-left-image .photo { float: left; max-width: 175px; margin-right: 15px; } .row-left-image .large-photo { /* float: none; */ max-width: 340px; /* margin: 0 auto; */ } .row-left-image .medium-photo { /* float: none; */ max-width: 250px; /* margin: 0 auto; */ } @media only screen and (min-width: 881px) { div.row-left-image .large-photo, div.row-left-image .medium-photo { float: left; } } .row-left-image .movie-row-left-image .movie-wrapper { float: left; max-width: 250px; margin-right: 15px; } /* TODO: Fix these with more permanent solutions */ /* Quick fix on 3/15/2022 by Bruce Brotherton */ /* This was done to get a news story out on time and have the elements display correctly on mobile */ @media (max-width: 640px) { .row-left-image .movie-row-left-image + div { width: 100%; } } .row-left-image .movie-row-left-image + div { display: flow-root; } .row-left-image h2 { padding-top: 0; } .row-left-image hr { margin-bottom: 2rem; } #mute-yt, #play-yt, #yt-yt { display: none; } .yt-iframe { width: 100%; max-height: 56.25vw; } .callout.row-left-image .left p { margin-bottom: 0; } .callout.row-left-image .left p a { display: inline-block; } .callout.row-left-image .button, .callout.row-left-image .button-blank { clear: both; } /* Video in mediazone banner */ /* ========================================================================== # VIDEO IN MEDIAZONE BANNER ========================================================================== */ .grey.blur-wrapper, .banner-wrap, .banner, .video-wrap iframe { height: 200px; } .banner-wrap { position: relative; top: 0; } .banner { position: relative; top: -200px; right: 0; z-index: 9; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; } #media div.grey { overflow: hidden; background: grey; -webkit-transform: translate3d(0, 0, 0); } .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; } .video-wrap { position: relative; height: 100%; } .banner > div:not(.next):not(.prev) { height: 100%; } h1.player { position: absolute; left: 50%; width: 95%; color: #fff; font-weight: 600; font-size: 2.75em; text-align: center; transform: translateX(-50%); } button.playhead { position: absolute; top: 50%; left: 50%; width: 60px; height: 40px; padding: 0; border: 0; background: transparent url(//www.mtu.edu/mtu_resources/images/n/playheads.svg) no-repeat 0 0; /* border-radius: 15px; */ background-size: 60px 80px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #media button.playhead { position: relative; top: 50%; left: 50%; display: inline-block; width: 68px; height: 44px; background: transparent url(//www.mtu.edu/mtu_resources/images/n/playheads.svg) no-repeat 0 0; background-size: 68px 90px; box-shadow: 0 0 10px #000; transform: translate(-50%, -50%); cursor: pointer; } #media button.playhead:hover { background-position: 0 -45px; } .jw-title { max-width: 90%; } #lclst_widget_footer { display: none; } /* Multiple Column Gird */ /* ========================================================================== # MULTICOLUMN GRID SETUP ========================================================================== */ .multi-column { /* Set CSS variable for width on the parent item */ display: flex; flex-wrap: wrap; -moz-justify-content: space-evenly; justify-content: center; float: left; width: 100%; margin-bottom: 2rem; } .multi-column-item { display: flex; flex: 1 0 auto; flex-direction: row; float: left; width: auto; /* Fallback in case flexbox isn't supported */ min-width: 150px; /* Fallback when CSS variables aren't supported */ max-width: 50%; max-width: var(--multi-width, 50%); margin: 0; } .multi-column-content { display: block; width: auto; min-width: 1px; /* This prevents IE11 from scaling images up on moblie. */ max-width: 100%; min-height: 1px; margin: 0 auto; padding: 0.25rem; text-align: center; } /* Add default underlines to certain links */ /* ========================================================================== # TYPOGRAPHY - PART 1 ========================================================================== */ /* remove bold: link lists, nav, etc */ .right-sidebar .calendar-item h3, .events .date, .aoi-program-name, nav.jump-menu h4, #footer-fixed a:visited, .slider .bar h2, .slider .bar h4, /* form.validate label.error, */ form.validate span.error, .tout-wrap-large a:hover .tout-circle div span { font-weight: 400; } /* Font color override: black */ .movie-description h2 { color: #000; } .movie-wrapper a.various { padding: 0; } /* We want to remove focus outline on hover OR remove outline in general */ #main p .button:hover, #main p .button-grey:hover, .movie-wrapper.preview a.various:focus:hover, .video-wrap button.playhead:focus:hover, .full-width a.fancybox:focus:hover { outline: 0 !important; } .fancybox .hover-img { position: absolute; } .fancybox .hover-fancybox { display: inline-block; position: relative; } .fancybox .hover-fancybox img { display: block; width: auto; } /* standard bottom margin */ p, [role='paragraph'], table, .banner-image, #sub_banner, #toggle-left, .connect figure img, .connect figcaption, div.widget > div, div.widget > img, .top-title, .caption-text, .focus .item > h2, fieldset .form-group { margin-bottom: 1.25em; } /* large bottom margin */ #banner_image, #sub_banner, .movie-wrapper, .jwplayer, #main_links, .left.leftnav, .full-width .list-spread > li, .list-spread > li, .news-events .left, .news-events, .events .item, .faqs, .information, .alert, .focus, .gift-wrap, div.gift-content div.more, #left-column .subitem, #right-column .subitem, .gallery { margin-bottom: 2.1em; } /* --- Class to make a 3 column unordered list that flows in a Z pattern. --- */ /* ========================================================================== # SPLIT CLASSES ========================================================================== */ .split-3 { display: flex; flex-wrap: wrap; align-items: center; max-width: 100%; color: #369; font-weight: bold; text-decoration: none; list-style-type: none; } .split-3 > li { flex: 1 0 100%; margin: 0.25rem; font-size: 13px !important; } @media screen and (min-width: 501px) { .split-3 > li { flex-basis: calc(50% - 1rem); flex-grow: 1; flex-shrink: 0; max-width: calc(50% - 1rem); } } @media screen and (min-width: 881px) { .split-3 > li { flex-basis: calc(33.33% - 1.5rem); flex-grow: 1; flex-shrink: 0; max-width: calc(33.33% - 1.5rem); } } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ # LARGER 320px MEDIA QUERY @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ @media only screen and (min-width: 320px) { #header-logo img.right-logo { display: inline; width: 178px; max-width: 100%; margin-bottom: 4px; } #navwrap .scrollable { font-size: 1.5em; } #navwrap + .sitetitle .sitetitle-logo { position: relative; display: block; height: 0; margin: 0 auto; } .sitetitle-logo > div > div, .sitetitle-logo > a { position: absolute; top: -33px; right: 2%; width: 12%; text-align: right; } .sitetitle div + div + .sitetitle-logo > div > div, .sitetitle div + div + .sitetitle-logo > a { top: -45px; } .sitetitle-logo img { max-width: 100%; max-height: 40px; } .sitetitle div + div + .sitetitle-logo img { max-height: 50px; } /* div.large-left, div.med-left { clear: left; } div.large-right, div.med-right { clear: right; } */ } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ # LARGER 415px MEDIA QUERY @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ @media only screen and (min-width: 415px) { .subnav .category-nav li a, .audience-pos .dropmenu li a, .menu-pos .dropmenu li a { width: 88%; } aside h2, aside h3, aside h4, aside h5, aside h6 { clear: none; } aside h2.clearer, aside h3.clearer, aside h4.clearer, aside h5.clearer, aside h6.clearer { clear: both; } ul.list-spread { text-align: center; } ul.list-spread.two > li, ul.list-spread.three > li, ul.list-spread.four > li, ul.list-spread.five > li { display: inline-block; width: 46.1%; } a div.widget:hover div.black { display: table; padding-bottom: 50%; } .insite-search-button { background-size: 48%; } .insite-search-field { width: 85%; } .localist_widget_wrapper .lw_event_item_image img { max-width: 150px; max-height: 150px; } } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ # LARGER THAN 501px MEDIA QUERY @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ @media only screen and (min-width: 501px) { .grey.blur-wrapper, .banner-wrap, .banner, .video-wrap iframe { height: 305px; } .banner { top: -305px; } h1.player { font-size: 4em; } } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ # LARGER THAN 650px MEDIA QUERY @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ @media only screen and (min-width: 650px) { h1, h1.pagetitle { font-size: 4em; } /* shoved the gridder items over 1em, had to remove for a quick fix */ #content_body ol > li, #content_body ul:not('.gridder') > li { left: 1em; } /* h2 { font-size: 2.9em } */ .full-width h3, .fancybox-inner h3 { /* font-size: 2.5em; */ font-size: 1.5rem; } .full-width h4, .fancybox-inner h4 { font-size: 2.1em; } .full-width h5, .full-width h6 { font-size: 1.7em; } .larger { font-size: 260%; } .largest { font-size: 320%; } p.preview, .theme { /* font-size: 1.9em; */ font-size: 1.1875rem; } blockquote.large { font-size: 2em; } #media .full-width .text h2 { font-size: 4em; } #media .full-width .text p { font-size: 1.6em; } ul.list-spread.two > li, ul.list-spread.three > li { margin-right: 2%; } ul.list-spread.three > li { display: inline-block; width: 29.5%; } ul.list-spread.two > li:last-child, ul.list-spread.three > li:last-child { margin-right: 0%; } #caption { max-height: 320px; } #left-column, #right-column { float: left; width: 48.5%; } #left-column { padding-right: 1.5%; } #right-column { padding-left: 1.5%; } figure.caption.left.wide-img { margin: 0 2em 2em 0; } figure.caption.right.wide-img { margin: 0 0 2em 2em; } .events .photo { margin-bottom: 2em; } #weather-holder a span { top: 0; font-size: 2.8em; } #weather-holder a img { width: 54px; } .focus[id] { overflow: hidden; } .focus[id] .photo { float: left; } .focus[id] .content { float: left; width: 72%; margin-left: 3%; } .leftnav + #content .focus[id] .content, .left.leftnav + * + * + #content .focus[id] .content, .left.leftnav + * + #content .focus[id] .content { width: 64%; } .right-sidebar .gallery .item { width: 100px; height: 100px; } [id='body_section'] .split { -webkit-columns: 2; -moz-columns: 2; columns: 2; } [id='body_section'] .split li { left: 1.15em; width: 95%; width: calc(100% - 1.15em); -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; line-height: 1.75; } #majors-minors-wrapper ul ul { -webkit-columns: 1; -moz-columns: 1; columns: 1; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .gallery { justify-content: flex-start; } ul.list-spread.four > li:nth-child(even) { margin-right: 3%; } ul.list-spread.four > li { display: inline-block; width: 20%; margin-right: 3%; } ul.list-spread.four > li:last-child { margin-right: 0%; } .flex, .flex .events-list { display: flex; flex-wrap: wrap; width: 100%; } #content.rsidebar .events .item { width: 48.5%; } .hide-750 { display: block; } /* weather widget */ #breadcrumbs.weather ul { max-width: 85%; } .weather-container.breadcrumbs #weather-holder { padding-top: 15px; padding-right: 10px; } } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ # LARGER THAN 881px MEDIA QUERY @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ @media only screen and (min-width: 881px) { body .button, body .button-blank { margin: auto; } body.pointer { cursor: default; } #search-box.enable + #header { top: 60px; } /* .top-banner { height: 105px; } */ .shrink .top-banner { height: auto; } #header.shrink .top-banner { height: 45px; transition: ease 0.2s; } #header-logo img.left-logo { height: 54px; margin-top: 26px; transition: ease-in-out 0.15s; } #header.shrink img.left-logo { height: 36px; margin-top: 3px; } #header-logo img.right-logo { width: 295px; height: auto; margin-bottom: 6px; transition: ease-in-out 0.15s; } #header.shrink img.right-logo { width: 221px; margin-bottom: 2px; } #header.shrink + .nav-push + #navwrap #search-nav { top: 7px; margin-top: 0; transition: ease 0.2s; } #header.shrink + .nav-push + #navwrap #search-trigger, #header.shrink + .nav-push + #navwrap #header-dropmenu-trigger { height: 45px; transition: ease 0.2s; } .header-icon { display: inline-block; width: 24px; height: 24px; margin-right: 4px; vertical-align: middle; background: url(//www.mtu.edu/mtu_resources/images/n/sprite.svg) no-repeat 0 0; background-size: 151px 21px; } .icon-link { background-position: 0 0; } .icon-email { background-position: -24px 0; } .icon-map { background-position: -48px 0; } .icon-key { background-position: -72px 0; } .icon-books { background-position: -96px 0; } .icon-banweb { background-position: -132px 0; } .header-shift { max-width: 1200px; max-width: var(--max-width, 1200px); height: 0; margin: 0 auto; } #search-nav { position: relative; top: -10px; z-index: 999; } .audience-pos { position: absolute; top: 0; width: 100%; max-height: 0; } .audience-shift { max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; } #search-box.enable { top: 0; height: 57px; border-width: 3px; background: #ececec; } #search-box div.search-wrap { display: block; max-width: 1200px; max-width: var(--max-width, 1200px); /* for header pre 08-2018 */ height: 45px; margin: 0 auto; padding-top: 13px; overflow: hidden; line-height: 45px; } div.field-wrap { float: right; width: 32%; margin: 0; padding: 0; background: #fff; } div.field-wrap { max-width: 50%; margin-right: 1.66%; } div.field-wrap:last-of-type { margin-right: 0; } #q, #q2, #q3 { width: 83.7%; padding-left: 4%; } #sa, #sa2, #sa3 { width: 34px; } #navwrap { top: 0; height: 0; } #navwrap + .sitetitle, .sitetitle { padding: 0; overflow: hidden; } .sitetitle > div, .sitetitle > div { margin: 1em 10px; } #breadcrumbs { margin-top: -0.5em; margin-bottom: 1.4em; } .sitetitle > div h1 { font-size: 2.25rem; } #navwrap + .sitetitle > div span, .sitetitle > div span, #navwrap + .sitetitle > div h1, #navwrap + .site-heading-header, .site-heading-header { font-size: 1.875rem; } .sitetitle-logo > div > div, .sitetitle-logo > a { top: -50px; } .sitetitle div + div + .sitetitle-logo > div > div, .sitetitle div + div + .sitetitle-logo > a { top: -85px; height: 85px; line-height: 85px; } .sitetitle div + div + .sitetitle-logo img { max-height: 75px; vertical-align: middle; } #navwrap .header-pos.move { height: 0; } #navwrap .scrollable { max-height: none; border: none; overflow: visible; font-size: 1.3em; } #search-box.enable + #header + .nav-push + #navwrap { top: 60px; } .subnav { position: fixed; top: 105px; z-index: 990; width: 100%; margin: 0 auto; background: rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } #subnav.shrink { top: 60px; } #search-box.enable + #header + .nav-push + #navwrap .subnav { top: 165px; } #search-box.enable + #header.shrink + .nav-push + #navwrap .subnav { top: 120px; } .subnav .category-nav { width: 100%; max-width: 1200px; max-width: var(--max-width, 1200px); max-height: none; margin: 0 auto; padding: 0; border-bottom: none; overflow: visible; color: #fff; list-style: none; } #header-peoplenav .nav-title, #header-dropmenu .nav-title { display: none; } .subnav .category-nav li { display: block; float: left; width: 12.5%; height: 65px; margin: 0; padding: 0; border: none; line-height: 1.2; text-align: center; background: none; cursor: pointer; } .category-nav li.in:not(.yellow):not(.active), .category-nav-bar li.in:not(.yellow):not(.active) { box-shadow: inset 0 -5px #fc0; } .subnav .category-nav li.yellow:last-of-type { background: #fc0; transition: 0.2s ease-out; } .subnav ul li.main-nav.yellow div > a { color: #000; background: transparent; } .subnav ul li.main-nav div > a { font-size: 16px; } .category-nav-bar.small-nav .main-nav-item a, .category-nav-bar.small-nav .main-nav-item button { font-size: 14px; } @media (min-width: 881px) { .main-nav-item ul { box-shadow: 0 0 0 1px rgb(0 0 0 / 5%); } } .subnav ul li.main-nav.four, .subnav ul.four li.main-nav { width: 25%; } .subnav ul li.main-nav.five, .subnav ul.five li.main-nav { width: 20%; } .subnav .category-nav li.main-nav.five ul li { width: 100%; min-width: 204.8px; } .subnav ul li.main-nav.six, .subnav ul.six li.main-nav { width: 16.66%; } .subnav ul li.main-nav.seven, .subnav ul.seven li.main-nav { width: 14.28%; } .subnav .category-nav li.sub div, .subnav .category-nav li div { display: inline; padding: 0; background: none; } .subnav .category-nav li:last-child { display: inline-block; content: ''; } #subnav .category-nav li a[href] { cursor: pointer; } .subnav .category-nav li a, .subnav .category-nav li a:visited, .subnav .category-nav li a:hover, .subnav .category-nav li a:active { display: table; width: 96%; height: 100%; padding: 0 2%; color: #fff; text-decoration: none; background: transparent; cursor: default; } .subnav .category-nav li a:hover, .subnav .category-nav li a:focus, .subnav .category-nav li a:active { text-decoration: underline; } .subnav .category-nav li span { display: table-cell; color: #fff; vertical-align: middle; word-break: normal; } .subnav .category-nav li a:focus span, .subnav .category-nav li.yellow:last-of-type span, .subnav .category-nav li.active span, .subnav .category-nav li:hover span { color: #000; } #navwrap .subnav .category-nav li ul li a:focus, #navwrap .subnav .category-nav li ul li a:focus span { color: #315196; } .subnav .category-nav li ul li, .subnav .category-nav li ul { display: none; float: left; border: none; } .subnav .category-nav li ul li { width: 100%; min-width: 200px; height: auto; text-align: left; background: #fff; } .subnav .category-nav li.main-nav ul li a { padding: 12px 0; } .subnav li.main-nav:last-child ul { float: right; } .subnav ul.category-nav > li:hover, .subnav ul.category-nav > li div a:focus, .subnav ul.category-nav li.active { background: #ececec; } .subnav ul.category-nav > li.yellow:hover, .subnav ul.category-nav li.yellow.active { background: #ececec; transition: 0.2s ease; } .subnav ul.category-nav li:hover ul, .subnav ul.category-nav li.active ul, .subnav ul.category-nav li:hover ul li, .subnav ul.category-nav li.active ul li { display: block; } .subnav ul.category-nav li.active ul { min-width: 100%; } .subnav .category-nav li ul { padding: 0; -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.3); } .subnav .category-nav li ul li span { padding: 0 15px; color: #000; } .subnav .category-nav li ul li:hover { background: #ececec; } .subnav .category-nav li ul li:last-child { border-bottom: 5px solid #fc0; } #navwrap .navhide { height: auto; overflow: visible; background: transparent; } #header-peoplenav { float: right; padding-right: 90px; text-align: right; } #header.shrink + .nav-push + #navwrap #header-peoplenav { margin-top: 20px; transition: ease 0.2s; } #header-peoplenav .dropmenu { margin: 0; padding: 0; list-style-type: none; } #header-peoplenav .dropmenu li { position: relative; top: 20px; display: inline; margin: 0 10px; border: none; } #header.shrink + .nav-push + #navwrap #header-peoplenav .dropmenu li { top: 0; transition: ease 0.2s; } #header-peoplenav .dropmenu li.give, #header-peoplenav .dropmenu li.apply { top: 20px; height: 45px; margin: 0; padding: 15px 10px 12px; background: #b60000; } #header-peoplenav .dropmenu li.give { right: -3px; margin-left: 85px; background: #333; } #header-peoplenav .dropmenu li.apply { background: #fc0; } #header-peoplenav .dropmenu li.apply a { color: #000; } #header-peoplenav .dropmenu li a { display: initial; width: auto; padding: 0; color: #fc0; font-size: 1.15em; line-height: initial; text-decoration: none; background: transparent; } #header-peoplenav .dropmenu li a:hover, #header-peoplenav .dropmenu li a:focus { text-decoration: underline; } #header-peoplenav .dropmenu li a:focus { color: #fff; } .scrollable.navhide #header-dropmenu { display: none; } #header-dropmenu li a:hover, #header-dropmenu li a:active { text-decoration: underline; } .menu-pos { max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; } .menu-shift { position: relative; top: 60px; right: -88px; z-index: 999; float: right; width: 230px; font-size: 14px; background: #fff; } #header.shrink + .nav-push + #navwrap .menu-shift { top: 45px; transition: ease 0.2s; } #header-dropmenu { border: 3px solid #fc0; } .nav-push { height: 170px; background-color: #ececec; } .nav-push.shift { height: 105px; } #main { overflow: hidden; } .full-width #main { overflow: visible; } #body_section { margin: 1.875rem auto; } .multi-media_wrapper + #body_section, .jumbo + #body_section { margin-top: 3rem; } .jumbo + #body_section .main-content > h2:not([class]):first-of-type { margin-top: 0; } /* .full-width ul, .full-width ol { overflow-x: visible; } */ .full-width ul { padding-inline-start: 2.25em; } div.leftnav + #content.rsidebar .row-left-image img[src*='170sq'].left, div.leftnav + #content.rsidebar img[src*='250sq'].left { max-width: 150px; height: auto; } div.leftnav + #content.rsidebar .row-left-image div.small-left, div.leftnav + #content.rsidebar div.med-left { margin-left: 170px; } .sidebar-content img.author, .sidebar-content .personnel img { width: 100%; max-width: 170px; margin-right: 10px; } #media.jumbo.video, #media.jumbo.video .full-width { height: 480px; min-height: 480px; } #play-yt + #mute-yt, #play-yt + #yt-yt, #mute-yt + #yt-yt { left: 40px; } #play-yt + #mute-yt + #yt-yt { left: 80px; } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0.2; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0.2; } } #mute-yt, #play-yt, #yt-yt { display: block; width: 30px; height: 30px; text-indent: -9999em; opacity: 1; -webkit-animation: fadeOut ease 1; -moz-animation: fadeOut ease 1; animation: fadeOut ease 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } #play-yt, #play-yt.play { position: absolute; bottom: 20px; left: 0; background: #fff url(//www.mtu.edu/mtu_resources/images/n/playhead2.svg) no-repeat 55% center; background-size: 45%; } #play-yt.pause { background-image: url(//www.mtu.edu/mtu_resources/images/n/pause.svg); background-position: center; } #mute-yt, #mute-yt.mute { position: absolute; bottom: 20px; left: 0; background: #fff url(//www.mtu.edu/mtu_resources/images/n/mute.svg) no-repeat center; background-size: 50%; } #mute-yt.loud { background-image: url(//www.mtu.edu/mtu_resources/images/n/loud.svg); } #yt-yt { position: absolute; bottom: 20px; left: 0; background: #000 url(//www.mtu.edu/mtu_resources/images/n/youtube.svg) no-repeat center; background-size: 50%; } #mute-yt:hover, #play-yt:hover, #yt-yt:hover { cursor: pointer; -webkit-animation: none !important; -moz-animation: none !important; animation: none !important; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; animation-fill-mode: backwards; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #media.jumbo.video .videoWrapper { display: block; } } #caption { max-height: 392px; } #media.jumbo .full-width .text h2.feature { font-size: 3.5rem; } .body-section #media.jumbo .full-width .text h2.feature { font-size: 2.5rem; } #info-click > span { display: inline; margin-right: 1em; color: #000; font-size: 1.5em; font-style: italic; line-height: 20px; vertical-align: top; } #intro div { max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; } #toggle-left { display: none; } #toggle-left.hide + #main_links, #toggle-left + #main_links, .leftnav > div:not(#toggle-left) { display: block !important; } .left.leftnav { display: block; float: left; width: 18.5%; min-height: 530px; margin-right: 3.25%; margin-bottom: 25%; } .left.leftnav a { padding-left: 0; padding-right: 0; } .left.leftnav ~ #banner_image, .left.leftnav ~ #content, #banner_image + #banner_sublinks { float: left; width: 78.25%; } /* .left.leftnav+*+.home-image+#content, .left.leftnav+*+*+.home-image+#content, .left.leftnav+.home-image+#content { width: 43%; } */ #content.rsidebar { float: left; width: 73.75%; margin-right: 3.25%; } #content { width: 100%; } .left.leftnav ~ #content.rsidebar, .banner-image + #banner_sublinks, #sub_banner + #banner_sublinks { width: 52%; } .full-width #content:not(.rsidebar) .movie-wrapper.preview .movie { height: 447px; } .full-width #content #right-column .movie-wrapper.preview .movie, .full-width #content #left-column .movie-wrapper.preview .movie { height: 212px; } .right-sidebar { float: left; clear: none; width: 23%; } .right-sidebar::before, .right-sidebar:not(.no-info)::before { display: none; content: ''; } .sidebar .sidebar-content ul li, .sidebar .sidebar-content ol li, .sidebar-nobox ul li, .sidebar-nobox ol li { padding-right: 0; } .news-events div.left { float: left; width: 65%; } .news-events a.story { width: 48.5%; } .news-events a.story:nth-child(2), .news-events a.story:nth-child(4), .news-events a.story:nth-child(6), .news-events a.story:nth-child(8) { margin-left: 3%; } .news-events .right { float: right; width: 31%; } /* equivalent of that mthumb stuff */ p.per-left, div.per-left { margin-left: 146px; } p.per-right, div.per-right { margin-right: 146px; } ul.list-spread.five > li:nth-child(even) { padding-right: 3%; } ul.list-spread.five > li { display: inline-block; width: 17.4%; padding-right: 3%; } ul.list-spread.five > li:last-child { padding-right: 0; } .gift-wrap + .right { width: auto; } .top-title.side { display: inline-block; float: left; width: 21%; height: 100%; border: 0; text-align: right; } .top-title.side h2 { float: right; margin: 0; margin-right: 20px; font-size: 3.35em; } .top-title.side + div { float: right; width: 79%; } .full-width .localist_widget_wrapper .lw_event_item_image img { max-width: 200px; max-height: 200px; } .full-width figure { display: inline-flex; flex-wrap: wrap; align-items: flex-start; } .full-width .fancybox { position: relative; width: 100%; height: 100%; overflow: hidden; } .mtuslideshow .fancybox { display: block; } .fancybox.nothing { display: inline-flex; flex-direction: column; width: auto; } .fancybox img { align-self: flex-start; margin-bottom: 0; } .fancybox .hover-img::after { position: absolute; bottom: 0; left: 0; display: flex; /* width: 20%; */ width: 3rem; /* height: 20%; */ height: 3rem; background-color: rgba(0, 0, 0, 0.25); background-image: url(//www.mtu.edu/mtu_resources/images/n/zoom-in.svg); background-repeat: no-repeat; background-position: center; background-size: 75%; transition: all 0.1s; content: ''; } .fancybox:hover .hover-img::after { width: 3.5rem; max-width: 4rem; height: 3.5rem; max-height: 4rem; background-color: rgba(0, 0, 0, 0.5); } /* preempt for when JS gets refactored. There will be no `.hover-img` */ /* The refactor is using fancybox 3.0 so it will be using `data-fancybox` */ /* .fancybox[data-fancybox] { position: relative; } .caption[style*="max-width"] .fancybox[data-fancybox]::after { display: block; } .fancybox[data-fancybox]::after { display: none; position: absolute; top: auto; right: auto; bottom: 0; left: 0; width: 3rem; height: 3rem; background: rgba(0, 0, 0, 0.5) url(//www.mtu.edu/mtu_resources/images/n/zoom-in.svg) no-repeat center; background-size: 80%; transition: all 0.05s linear; content: ""; } .fancybox[data-fancybox] img { display: block; } .fancybox[data-fancybox]:hover::after { height: 3.25rem; width: 3.25rem; background-color: rgba(0, 0, 0, 0.75); } */ .full-width div.collapse + div.slider-content a .hover-img::after { display: none; } .grey.blur-wrapper, .banner-wrap, .banner, .video-wrap iframe { height: 435px; } .banner { top: -435px; } h1.player { top: -5%; width: 80%; font-size: 6em; } #media button.playhead { width: 100px; height: 64px; background-size: 100px 135px; } #media button.playhead:hover { background-position: 0 -67px; } .gallery .item { display: flex; flex-wrap: wrap; min-width: 18.5%; /* if galleries are really acting wierd change this to a 'max-width' */ margin-right: 1.5%; } /* end main stuff */ /* .push { height: 308px; } */ /* .stick { margin-bottom: -308px; } */ .footer-sections { margin: 0 auto; padding: 16px 0; } .footer-sections div, #footer .footer-sections div { display: block; float: left; width: 18%; padding-left: 1%; font-size: 1.8em; } #footer .footer-sections div > span { display: none; } #footer-contact h4, #footer-contact p { margin-left: 0; } #footer-contact address { min-height: 116px; } #footer .footer-sections { padding: 8px 0; font-weight: 400; font-size: 1em; } .footer-sections ul, #footer .footer-sections div ul { margin: 0; padding: 0; list-style: none; } #footer .footer-sections div ul li { margin: 0; font-size: 0.725em; line-height: 1.6; } #footer #footer-contact { float: left; width: 21%; min-height: 122px; margin: 0; padding-right: 2px; font-weight: normal; text-align: left; } #footer-contact p, #footer-contact h4 { font-size: 0.725em; } #footer-contact p.dept-name { font-size: 0.75em; } #footer-contact p a { word-break: normal; } #footer-webmaster { float: left; width: 31%; height: 18px; margin: 0; margin-left: 10px; text-align: left; } #footer-eos { float: left; width: 64%; margin: 0; margin-left: 3%; font-style: italic; line-height: 1.25; text-align: right; } #footer-eos a { position: relative; right: 10px; } #footer p.right.footer-equity { display: inline-block; float: right; margin-top: 15px; margin-right: 10px; color: #fff; } #betabug { position: fixed; right: 6.5em; bottom: 0; z-index: 1000; width: auto; background: transparent; } #betabug a { color: #fff; background: rgba(0, 0, 0, 0.75); } /* No top navigation */ body.no-nav .subnav { display: none; } body.no-nav .nav-push { height: 105px; } } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ # LARGER THAN MEDIM LAPTOP MEDIA QUERY @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ @media only screen and (min-width: 1201px) { /* Pre 08-2018 header */ /* .top-banner { max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; } */ #header-logo img.left-logo { padding-left: 0; } #search-nav { margin-right: 0; } .full-width { max-width: 1200px; max-width: var(--max-width, 1200px); margin: 3rem auto; padding: 0; } .sitetitle > div { width: 1200px; margin: 1em auto; } .sitetitle-logo > div > div { right: 0; } #navwrap + .sitetitle .logo-shift, .sitetitle .logo-shift { max-width: none; } #navwrap + .sitetitle .logo-shift, .sitetitle .weather { max-width: 100%; } .breadcrumbs.logo-shift ul { margin-right: 15%; } #media .grey.blur-wrapper, .banner-wrap, .banner, .video-wrap iframe { height: 435px; } #media div.grey { width: 100%; border-bottom: 5px solid #fc0; overflow: hidden; } .banner { position: relative; top: -435px; width: 1200px; } .banner-wrap { position: relative; z-index: 1; overflow: hidden; background: rgba(0, 0, 0, 1); background-position: center; background-size: cover; } } /* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ # LARGER THAN 1230 MEDIA QUERY @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ @media only screen and (min-width: 1230px) { .subnav #rectangle, #header-search { margin-right: 0; } #footer-eos a { position: initial; } #footer-webmaster a { margin: 0; } #news, #body_section { padding: 0; } #personnel .announcements .photo + .text { width: 83%; } } /* Libraries */ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ /* ========================================================================== # FANCYBOX ========================================================================== */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { margin: 0; padding: 0; border: 0; vertical-align: top; outline: none; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #444; text-shadow: none; background: #f9f9f9; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { margin: 0; padding: 15px; color: #444; font-size: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 20px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-content .fancybox-image { background-color: #fff; } .fancybox-title strong { font-size: 18px; } .fancybox-title p { font-size: 15px; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../../images/n/fancybox_sprite.png') !important; } #fancybox-loading { position: fixed; top: 50%; left: 50%; z-index: 8060; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; cursor: pointer; opacity: 0.8; } #fancybox-loading div { width: 44px; height: 44px; background: url('../../images/n/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; z-index: 8040; width: 36px; height: 36px; cursor: pointer; } .fancybox-nav { position: absolute; top: 0; z-index: 8040; width: 50%; height: 100%; text-decoration: none; background: transparent url('../../images/n/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; z-index: 8040; width: 36px; height: 34px; margin-top: -18px; visibility: visible; cursor: pointer; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; max-width: 99999px; max-height: 99999px; overflow: visible !important; visibility: hidden; } /* Overlay helper */ .fancybox-lock { width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; z-index: 8010; display: none; overflow: hidden; background: url('../../images/n/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; right: 0; bottom: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; } /* Title helper */ .fancybox-title { position: relative; z-index: 8050; font: normal 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; text-shadow: none; visibility: hidden; } .fancybox-overlay[style*='block'] .fancybox-title, .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { padding-top: 10px; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; padding: 10px; color: #fff; background: #000; background: rgba(0, 0, 0, 0.8); } #comment-wrap .idc-new { display: none; } /* Retina graphics! */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../../images/n/fancybox_sprite@2x.png'); /* The size of the normal image, half the size of the hi-res image */ background-size: 44px 152px; } #fancybox-loading div { background-image: url('../../images/n/fancybox_loading@2x.gif'); /* The size of the normal image, half the size of the hi-res image */ background-size: 24px 24px; } } @media (max-width: 576px) { .fancybox-slide { padding: 22px !important; } } /* ------------ */ /* END FANCYBOX */ /* ------------ */ /* ========================================================================== # GRID RULES ========================================================================== */ /* ------------------------- */ /* ## Grid Containers Setup */ /* ------------------------- */ .grid-row { box-sizing: border-box; /* remove this when body gets box-sizing: border-box */ width: 100%; max-width: 75rem; margin: 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; font-size: 1rem; /* remove this when body gets box-sizing: border-box */ } .grid-row * { box-sizing: inherit; } @media (min-width: 75rem) { .grid-row { padding-right: 0; padding-left: 0; } } .grid-x { display: flex; flex-wrap: wrap; width: 100%; margin: 0 0 -2% -2%; } .grid-x + * { margin-top: 2rem; } @supports (display: grid) { .grid-x { display: grid; grid-gap: 1.5rem; grid-column-gap: 4%; grid-template-columns: repeat(12, 1fr); margin: 0; } @media (min-width: 55.0625rem) { .grid-x { grid-gap: 2.5rem; grid-column-gap: 3.33%; } } } .grid-y { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; } .grid-y.align-center { align-items: center; } .grid-y .column { width: auto; } @media (min-width: 40.625rem) { .grid-auto { display: flex; flex-wrap: nowrap; margin: 0 0 0 -2%; } @supports (display: grid) { .grid-auto { display: grid; grid-gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 0; } } .grid-auto > .column { grid-column-start: auto; grid-column-end: auto; } } @media (min-width: 40.625rem) { .grid-collapse { grid-gap: 0; } } /* ------------------------- */ /* End Grid Containers Setup */ /* ------------------------- */ /* ---------------------- */ /* ## Grid Columns Setup */ /* ---------------------- */ .column { flex: 1 1 auto; width: 100%; margin: 0 0 2% 2%; } @supports (display: grid) { .column { grid-column-start: 1; grid-column-end: 13; margin: 0; } } .grid-auto > .column { flex: 1; } .column img { display: block; width: auto; height: auto; max-width: 100%; } .column-inner > img:only-child { width: 100%; } /* ---------------------- */ /* End Grid Columns Setup */ /* ---------------------- */ /* --------------------- */ /* ## Grid Even Columns */ /* --------------------- */ /* ### Grid Even Columns Small */ @supports (display: grid) { .small-1-up { grid-template-columns: repeat(1, 1fr); } .small-1-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-1-up > .column { flex: 1 1 98%; } @supports (display: grid) { .small-2-up { grid-template-columns: repeat(2, 1fr); } .small-2-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-2-up > .column { flex: 1 1 48%; } @supports (display: grid) { .small-3-up { grid-template-columns: repeat(3, 1fr); } .small-3-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-3-up > .column { flex: 1 1 31.33333%; } @supports (display: grid) { .small-4-up { grid-template-columns: repeat(4, 1fr); } .small-4-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-4-up > .column { flex: 1 1 23%; } @supports (display: grid) { .small-5-up { grid-template-columns: repeat(5, 1fr); } .small-5-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-5-up > .column { flex: 1 1 18%; } @supports (display: grid) { .small-6-up { grid-template-columns: repeat(6, 1fr); } .small-6-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-6-up > .column { flex: 1 1 14.66667%; } @supports (display: grid) { .small-7-up { grid-template-columns: repeat(7, 1fr); } .small-7-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-7-up > .column { flex: 1 1 12.28571%; } @supports (display: grid) { .small-8-up { grid-template-columns: repeat(8, 1fr); } .small-8-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-8-up > .column { flex: 1 1 10.5%; } @supports (display: grid) { .small-9-up { grid-template-columns: repeat(9, 1fr); } .small-9-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-9-up > .column { flex: 1 1 9.11111%; } @supports (display: grid) { .small-10-up { grid-template-columns: repeat(10, 1fr); } .small-10-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-10-up > .column { flex: 1 1 8%; } @supports (display: grid) { .small-11-up { grid-template-columns: repeat(11, 1fr); } .small-11-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-11-up > .column { flex: 1 1 7.09091%; } @supports (display: grid) { .small-12-up { grid-template-columns: repeat(12, 1fr); } .small-12-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.small-12-up > .column { flex: 1 1 6.33333%; } /* ### Grid Even Columns Medium */ @media (min-width: 40.625rem) { @supports (display: grid) { .medium-1-up { grid-template-columns: repeat(1, 1fr); } .medium-1-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-1-up > .column { flex: 1 1 98%; } @supports (display: grid) { .medium-2-up { grid-template-columns: repeat(2, 1fr); } .medium-2-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-2-up > .column { flex: 1 1 48%; } @supports (display: grid) { .medium-3-up { grid-template-columns: repeat(3, 1fr); } .medium-3-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-3-up > .column { flex: 1 1 31.33333%; } @supports (display: grid) { .medium-4-up { grid-template-columns: repeat(4, 1fr); } .medium-4-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-4-up > .column { flex: 1 1 23%; } @supports (display: grid) { .medium-5-up { grid-template-columns: repeat(5, 1fr); } .medium-5-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-5-up > .column { flex: 1 1 18%; } @supports (display: grid) { .medium-6-up { grid-template-columns: repeat(6, 1fr); } .medium-6-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-6-up > .column { flex: 1 1 14.66667%; } @supports (display: grid) { .medium-7-up { grid-template-columns: repeat(7, 1fr); } .medium-7-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-7-up > .column { flex: 1 1 12.28571%; } @supports (display: grid) { .medium-8-up { grid-template-columns: repeat(8, 1fr); } .medium-8-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-8-up > .column { flex: 1 1 10.5%; } @supports (display: grid) { .medium-9-up { grid-template-columns: repeat(9, 1fr); } .medium-9-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-9-up > .column { flex: 1 1 9.11111%; } @supports (display: grid) { .medium-10-up { grid-template-columns: repeat(10, 1fr); } .medium-10-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-10-up > .column { flex: 1 1 8%; } @supports (display: grid) { .medium-11-up { grid-template-columns: repeat(11, 1fr); } .medium-11-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-11-up > .column { flex: 1 1 7.09091%; } @supports (display: grid) { .medium-12-up { grid-template-columns: repeat(12, 1fr); } .medium-12-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.medium-12-up > .column { flex: 1 1 6.33333%; } } /* ### Grid Even Columns Large */ @media (min-width: 55.0625rem) { @supports (display: grid) { .large-1-up { grid-template-columns: repeat(1, 1fr); } .large-1-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-1-up > .column { flex: 1 1 98%; } @supports (display: grid) { .large-2-up { grid-template-columns: repeat(2, 1fr); } .large-2-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-2-up > .column { flex: 1 1 48%; } @supports (display: grid) { .large-3-up { grid-template-columns: repeat(3, 1fr); } .large-3-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-3-up > .column { flex: 1 1 31.33333%; } @supports (display: grid) { .large-4-up { grid-template-columns: repeat(4, 1fr); } .large-4-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-4-up > .column { flex: 1 1 23%; } @supports (display: grid) { .large-5-up { grid-template-columns: repeat(5, 1fr); } .large-5-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-5-up > .column { flex: 1 1 18%; } @supports (display: grid) { .large-6-up { grid-template-columns: repeat(6, 1fr); } .large-6-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-6-up > .column { flex: 1 1 14.66667%; } @supports (display: grid) { .large-7-up { grid-template-columns: repeat(7, 1fr); } .large-7-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-7-up > .column { flex: 1 1 12.28571%; } @supports (display: grid) { .large-8-up { grid-template-columns: repeat(8, 1fr); } .large-8-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-8-up > .column { flex: 1 1 10.5%; } @supports (display: grid) { .large-9-up { grid-template-columns: repeat(9, 1fr); } .large-9-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-9-up > .column { flex: 1 1 9.11111%; } @supports (display: grid) { .large-10-up { grid-template-columns: repeat(10, 1fr); } .large-10-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-10-up > .column { flex: 1 1 8%; } @supports (display: grid) { .large-11-up { grid-template-columns: repeat(11, 1fr); } .large-11-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-11-up > .column { flex: 1 1 7.09091%; } @supports (display: grid) { .large-12-up { grid-template-columns: repeat(12, 1fr); } .large-12-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.large-12-up > .column { flex: 1 1 6.33333%; } } /* ### Grid Even Columns Extra Large */ @media (min-width: 75rem) { @supports (display: grid) { .xlarge-1-up { grid-template-columns: repeat(1, 1fr); } .xlarge-1-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-1-up > .column { flex: 1 1 6.33333%; } @supports (display: grid) { .xlarge-2-up { grid-template-columns: repeat(2, 1fr); } .xlarge-2-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-2-up > .column { flex: 1 1 14.66667%; } @supports (display: grid) { .xlarge-3-up { grid-template-columns: repeat(3, 1fr); } .xlarge-3-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-3-up > .column { flex: 1 1 23%; } @supports (display: grid) { .xlarge-4-up { grid-template-columns: repeat(4, 1fr); } .xlarge-4-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-4-up > .column { flex: 1 1 31.33333%; } @supports (display: grid) { .xlarge-5-up { grid-template-columns: repeat(5, 1fr); } .xlarge-5-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-5-up > .column { flex: 1 1 39.66667%; } @supports (display: grid) { .xlarge-6-up { grid-template-columns: repeat(6, 1fr); } .xlarge-6-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-6-up > .column { flex: 1 1 48%; } @supports (display: grid) { .xlarge-7-up { grid-template-columns: repeat(7, 1fr); } .xlarge-7-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-7-up > .column { flex: 1 1 56.33333%; } @supports (display: grid) { .xlarge-8-up { grid-template-columns: repeat(8, 1fr); } .xlarge-8-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-8-up > .column { flex: 1 1 64.66667%; } @supports (display: grid) { .xlarge-9-up { grid-template-columns: repeat(9, 1fr); } .xlarge-9-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-9-up > .column { flex: 1 1 73%; } @supports (display: grid) { .xlarge-10-up { grid-template-columns: repeat(10, 1fr); } .xlarge-10-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-10-up > .column { flex: 1 1 81.33333%; } @supports (display: grid) { .xlarge-11-up { grid-template-columns: repeat(11, 1fr); } .xlarge-11-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-11-up > .column { flex: 1 1 89.66667%; } @supports (display: grid) { .xlarge-12-up { grid-template-columns: repeat(12, 1fr); } .xlarge-12-up > .column { grid-column-start: auto; grid-column-end: auto; } } .grid-x.xlarge-12-up > .column { flex: 1 1 98%; } } /* ----------------------- */ /* ## Grid Uneven Columns */ /* ----------------------- */ /* ### Grid Uneven Columns Small */ .column.small-1 { flex: 0 1 6.33333%; } @supports (display: grid) { .column.small-1 { grid-column-start: auto; grid-column-end: span 1; } } .column.small-2 { flex: 0 1 14.66667%; } @supports (display: grid) { .column.small-2 { grid-column-start: auto; grid-column-end: span 2; } } .column.small-3 { flex: 0 1 23%; } @supports (display: grid) { .column.small-3 { grid-column-start: auto; grid-column-end: span 3; } } .column.small-4 { flex: 0 1 31.33333%; } @supports (display: grid) { .column.small-4 { grid-column-start: auto; grid-column-end: span 4; } } .column.small-5 { flex: 0 1 39.66667%; } @supports (display: grid) { .column.small-5 { grid-column-start: auto; grid-column-end: span 5; } } .column.small-6 { flex: 0 1 48%; } @supports (display: grid) { .column.small-6 { grid-column-start: auto; grid-column-end: span 6; } } .column.small-7 { flex: 0 1 56.33333%; } @supports (display: grid) { .column.small-7 { grid-column-start: auto; grid-column-end: span 7; } } .column.small-8 { flex: 0 1 64.66667%; } @supports (display: grid) { .column.small-8 { grid-column-start: auto; grid-column-end: span 8; } } .column.small-9 { flex: 0 1 73%; } @supports (display: grid) { .column.small-9 { grid-column-start: auto; grid-column-end: span 9; } } .column.small-10 { flex: 0 1 81.33333%; } @supports (display: grid) { .column.small-10 { grid-column-start: auto; grid-column-end: span 10; } } .column.small-11 { flex: 0 1 89.66667%; } @supports (display: grid) { .column.small-11 { grid-column-start: auto; grid-column-end: span 11; } } .column.small-12 { flex: 0 1 98%; } @supports (display: grid) { .column.small-12 { grid-column-start: auto; grid-column-end: span 12; } } /* ### Grid Uneven Columns Medium */ @media (min-width: 40.625rem) { .column.medium-1 { flex: 0 1 6.33333%; } @supports (display: grid) { .column.medium-1 { grid-column-start: auto; grid-column-end: span 1; } } .column.medium-2 { flex: 0 1 14.66667%; } @supports (display: grid) { .column.medium-2 { grid-column-start: auto; grid-column-end: span 2; } } .column.medium-3 { flex: 0 1 23%; } @supports (display: grid) { .column.medium-3 { grid-column-start: auto; grid-column-end: span 3; } } .column.medium-4 { flex: 0 1 31.33333%; } @supports (display: grid) { .column.medium-4 { grid-column-start: auto; grid-column-end: span 4; } } .column.medium-5 { flex: 0 1 39.66667%; } @supports (display: grid) { .column.medium-5 { grid-column-start: auto; grid-column-end: span 5; } } .column.medium-6 { flex: 0 1 48%; } @supports (display: grid) { .column.medium-6 { grid-column-start: auto; grid-column-end: span 6; } } .column.medium-7 { flex: 0 1 56.33333%; } @supports (display: grid) { .column.medium-7 { grid-column-start: auto; grid-column-end: span 7; } } .column.medium-8 { flex: 0 1 64.66667%; } @supports (display: grid) { .column.medium-8 { grid-column-start: auto; grid-column-end: span 8; } } .column.medium-9 { flex: 0 1 73%; } @supports (display: grid) { .column.medium-9 { grid-column-start: auto; grid-column-end: span 9; } } .column.medium-10 { flex: 0 1 81.33333%; } @supports (display: grid) { .column.medium-10 { grid-column-start: auto; grid-column-end: span 10; } } .column.medium-11 { flex: 0 1 89.66667%; } @supports (display: grid) { .column.medium-11 { grid-column-start: auto; grid-column-end: span 11; } } .column.medium-12 { flex: 0 1 98%; } @supports (display: grid) { .column.medium-12 { grid-column-start: auto; grid-column-end: span 12; } } } /* ### Grid Uneven Columns Large */ @media (min-width: 55.0625rem) { .column.large-1 { flex: 0 1 6.33333%; } @supports (display: grid) { .column.large-1 { grid-column-start: auto; grid-column-end: span 1; } } .column.large-2 { flex: 0 1 14.66667%; } @supports (display: grid) { .column.large-2 { grid-column-start: auto; grid-column-end: span 2; } } .column.large-3 { flex: 0 1 23%; } @supports (display: grid) { .column.large-3 { grid-column-start: auto; grid-column-end: span 3; } } .column.large-4 { flex: 0 1 31.33333%; } @supports (display: grid) { .column.large-4 { grid-column-start: auto; grid-column-end: span 4; } } .column.large-5 { flex: 0 1 39.66667%; } @supports (display: grid) { .column.large-5 { grid-column-start: auto; grid-column-end: span 5; } } .column.large-6 { flex: 0 1 48%; } @supports (display: grid) { .column.large-6 { grid-column-start: auto; grid-column-end: span 6; } } .column.large-7 { flex: 0 1 56.33333%; } @supports (display: grid) { .column.large-7 { grid-column-start: auto; grid-column-end: span 7; } } .column.large-8 { flex: 0 1 64.66667%; } @supports (display: grid) { .column.large-8 { grid-column-start: auto; grid-column-end: span 8; } } .column.large-9 { flex: 0 1 73%; } @supports (display: grid) { .column.large-9 { grid-column-start: auto; grid-column-end: span 9; } } .column.large-10 { flex: 0 1 81.33333%; } @supports (display: grid) { .column.large-10 { grid-column-start: auto; grid-column-end: span 10; } } .column.large-11 { flex: 0 1 89.66667%; } @supports (display: grid) { .column.large-11 { grid-column-start: auto; grid-column-end: span 11; } } .column.large-12 { flex: 0 1 98%; } @supports (display: grid) { .column.large-12 { grid-column-start: auto; grid-column-end: span 12; } } } /* ### Grid Uneven Columns Extra Large */ @media (min-width: 75rem) { .column.xlarge-1 { flex: 0 1 6.33333%; } @supports (display: grid) { .column.xlarge-1 { grid-column-start: auto; grid-column-end: span 1; } } .column.xlarge-2 { flex: 0 1 14.66667%; } @supports (display: grid) { .column.xlarge-2 { grid-column-start: auto; grid-column-end: span 2; } } .column.xlarge-3 { flex: 0 1 23%; } @supports (display: grid) { .column.xlarge-3 { grid-column-start: auto; grid-column-end: span 3; } } .column.xlarge-4 { flex: 0 1 31.33333%; } @supports (display: grid) { .column.xlarge-4 { grid-column-start: auto; grid-column-end: span 4; } } .column.xlarge-5 { flex: 0 1 39.66667%; } @supports (display: grid) { .column.xlarge-5 { grid-column-start: auto; grid-column-end: span 5; } } .column.xlarge-6 { flex: 0 1 48%; } @supports (display: grid) { .column.xlarge-6 { grid-column-start: auto; grid-column-end: span 6; } } .column.xlarge-7 { flex: 0 1 56.33333%; } @supports (display: grid) { .column.xlarge-7 { grid-column-start: auto; grid-column-end: span 7; } } .column.xlarge-8 { flex: 0 1 64.66667%; } @supports (display: grid) { .column.xlarge-8 { grid-column-start: auto; grid-column-end: span 8; } } .column.xlarge-9 { flex: 0 1 73%; } @supports (display: grid) { .column.xlarge-9 { grid-column-start: auto; grid-column-end: span 9; } } .column.xlarge-10 { flex: 0 1 81.33333%; } @supports (display: grid) { .column.xlarge-10 { grid-column-start: auto; grid-column-end: span 10; } } .column.xlarge-11 { flex: 0 1 89.66667%; } @supports (display: grid) { .column.xlarge-11 { grid-column-start: auto; grid-column-end: span 11; } } .column.xlarge-12 { flex: 0 1 98%; } @supports (display: grid) { .column.xlarge-12 { grid-column-start: auto; grid-column-end: span 12; } } } /* ----------------------- */ /* End Grid Uneven Columns */ /* ----------------------- */ .column-inner { display: flex; flex-direction: column; height: 100%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ div:not(.section-fit.background-white.full-section) .column-inner { height: auto; } } /* make the images in profiles that get the .left class sit to the left */ /* otherwise they get stretched out */ .column-inner .left { align-self: flex-start; } .row-reverse { flex-direction: row-reverse; } /* -------------- */ /* End Grid Rules */ /* -------------- */ /* ========================================================================== # POPOVER BOX ========================================================================== */ .popover { position: fixed; bottom: 0; left: 50%; z-index: 500; box-sizing: border-box; width: 100%; max-width: 80%; color: #fff; text-align: center; background: rgba(0, 0, 0, 0.7); transform: translateX(-50%); } .popover * { box-sizing: inherit; } /* overwriting rules for the popover */ .popover p { margin-bottom: 0; } .popover.popover--banner { width: 100%; max-width: none; color: #000; background-color: #fc0; } .popover__content-wrapper { position: relative; z-index: 1; max-height: 1000px; transition: max-height 1s ease-in-out; } .popover[aria-expanded='false'] .popover__content-wrapper { max-height: 0; overflow: hidden; transition: all 0.75s cubic-bezier(0, 1, 0, 1); } .popover-banner .popover__content-wrapper { width: 100%; } /* ------------------- */ /* ## Popover Content */ /* ------------------- */ .popover__content { position: relative; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; padding: 1rem 4%; font-size: 1rem; text-align: center; } .popover__content *:focus { outline: 1px dashed #000; } .popover__content--large { max-width: 1350px; } p a.popover__content__cta-button, a.popover__content__cta-button, .popover__content__cta-button { display: block; width: 20%; min-width: 225px; margin: 1rem auto 0; padding: 1rem; border: 2px solid #000; color: #000; font-size: 1.2rem; line-height: 1; text-shadow: none; background-color: #fc0; box-shadow: none; transition: all 0.2s; } p a.popover__content__cta-button:hover, a.popover__content__cta-button:hover, .popover__content__cta-button:hover { color: #fff; text-decoration: underline !important; /* SOMEONE MADE p a RULE WITH IMPORTANT */ background-color: #000; } /* ------------------- */ /* End Popover Content */ /* ------------------- */ /* ----------------------- */ /* ## Popover Open Button */ /* ----------------------- */ .popover__open-wrapper { position: relative; width: 100%; max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; } .popover__open-wrapper--large { max-width: 1350px; } .popover__open-wrapper svg { height: 0.8em; fill: currentcolor; } .popover__open-button { position: absolute; top: -2.75rem; right: 8%; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.75em 1em; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px 5px 0 0; color: #fff; font-weight: normal; font-size: 1.5em; text-decoration: none; background: rgba(0, 0, 0, 0.75); box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5); } @media (min-width: 1375px) { .popover__open-button { right: 0; } } .popover__open-button:hover { text-decoration: underline; } .popover__open-button:focus { border: 1px dashed #fff; } .popover[aria-expanded='true'] .popover__open-button { top: 100%; display: none; animation: none; } .popopen__close-button { position: absolute; top: -2.4rem; right: 4rem; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 1px solid transparent; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 2rem; background: #fc0; cursor: pointer; } .popopen__close-button:hover { border: 1px dashed #000; } @media (min-width: 768px) { .popopen__close-button { top: 0; right: 6rem; border-top-left-radius: 0; border-top-right-radius: 0; background: transparent; transition: none; } } .popover[aria-expanded='false'] .popopen__close-button { top: 4rem; display: none; } /* ----------------------- */ /* End Popover Open Button */ /* ----------------------- */ /* ========================================================================== # TYPOGRAPHY ========================================================================== */ /* These are probably way down here because they needed more specificity */ a.text-yellow, a:visited.text-yellow, a:active.text-yellow, .text-yellow, a.text-gold, a:visited.text-gold, a:active.text-gold, .text-gold { color: #fc0; } a.text-black, a:visited.text-black, a:active.text-black, .text-black { color: #000; } a.text-white, a:visited.text-white, a:active.text-white, .text-white { color: #fff; } .text-underline { text-decoration: underline; } .word-wrap, .word_wrap { word-break: break-word; } .hyphenate { -webkit-hyphens: auto; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -webkit-hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-last: always; -webkit-hyphenate-limit-zone: 8%; -moz-hyphens: auto; -moz-hyphenate-limit-chars: 6 3 3; -moz-hyphenate-limit-lines: 2; -moz-hyphenate-limit-last: always; -moz-hyphenate-limit-zone: 8%; -ms-hyphens: auto; -ms-hyphenate-limit-chars: 6 3 3; -ms-hyphenate-limit-lines: 2; -ms-hyphenate-limit-last: always; -ms-hyphenate-limit-zone: 8%; hyphens: auto; hyphenate-limit-chars: 6 3 3; hyphenate-limit-lines: 2; hyphenate-limit-last: always; hyphenate-limit-zone: 8%; } /* -------------------- */ /* End Typography Rules */ /* -------------------- */ /* ========================================================================== # FOOTER - PART 2 ========================================================================== */ /* -- Legacy Fix - REMOVE after 01/31/2019 -- */ #footer-fixed { font-size: 100%; } /* ----------------------- */ /* ## Footer Contact Info */ /* ----------------------- */ .footer__contact-info p { margin-bottom: 0; font-size: 1rem; } .footer__contact-info .dept-name a { font-size: 1.25rem; } .footer__contact-info .dept-name a, .footer__contact-info .dept-name a:visited { color: #fc0; } .footer__contact-info .dept-name a:hover, .footer__contact-info .dept-name a:visited:hover { color: #000; } /* ----------------------- */ /* End Footer Contact Info */ /* ----------------------- */ /* --------------------- */ /* ## Footer Overwrites */ /* --------------------- */ footer { box-sizing: border-box; font-size: 90%; } footer * { box-sizing: inherit; } .footer { overflow: visible; font-size: 1em; /* background-color: transparent; */ } .row { max-width: 1200px; max-width: var(--max-width, 1200px); margin: 0 auto; } footer .no-bullet { padding-left: 0; list-style-type: none; } /* --------------------- */ /* End Footer Overwrites */ /* --------------------- */ /* ---------------- */ /* ## Bar Separtor */ /* ---------------- */ /** * These are the seporators near the copyrite section that go between the list itesms. */ .bar-separator li { display: block; color: #fff; } .bar-separator li:last-of-type::after { margin: 0; border-right: 0 solid transparent; } @media (min-width: 650px) { .bar-separator li { display: inline-block; } .bar-separator li::after { position: relative; top: 0.1em; display: inline-block; height: 0.8em; margin: 0 0.5em 0 0.5em; border-right: 1px solid #fc0; content: ''; } } /* -- Footer General Styles -- */ footer { background-color: #000; /* quick fix to appease the OU Campus Accessability Checker */ background-image: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) ); } .mtu-footer h2 { color: #fff; font-size: 1.25em; } footer { clear: both; color: #fff; font-weight: 400; font-size: 140%; line-height: 1.5; text-decoration: none !important; } @media (min-width: 881px) { footer { font-size: 145%; } } /* ---------------- */ /* ## Footer Links */ /* ---------------- */ footer a, footer a:hover, footer a:visited, footer a:active { color: #fff; font-weight: 400; } footer a:hover, footer a:focus { text-decoration: none; } footer a:focus { outline: 1px dashed #fc0; outline-offset: 2px; } /* -------------- */ /* ## Pre Footer */ /* -------------- */ /** * These are the 2-4 big links/buttons that are just above the footer. * The last one is always gold. */ .footer__pre-nav-wrapper { min-height: 1em; color: #000; background-color: #232323; } .footer__pre-nav { display: flex; flex-direction: column; justify-content: flex-end; font-size: 1.25em; } @media (min-width: 881px) { .footer__pre-nav { flex-direction: row; } } .footer__pre-nav li { display: inline-block; flex: 1 0 auto; line-height: 1; text-align: center; } .footer__pre-nav li a { border-top: 1px solid #000; line-height: 1; } @media only screen and (min-width: 881px) { .footer__pre-nav li a { border-top: 0 solid transparent; } /* Original attempt at seporator bars */ /* TODO: Delete these rules? */ .footer__pre-nav li:first-of-type a { /* box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000; */ } .footer__pre-nav li:last-of-type a { /* box-shadow: none; */ } .footer__pre-nav li:only-of-type { max-width: 25%; background-color: #333; } } .footer__pre-nav a { display: inline-block; width: 100%; } /* ### Pre footer link/button styles */ a.footer-button, a.footer-button-give, a.footer-button-apply { padding: 1em 3em; border: 0 solid transparent; font-weight: 400; transition: background-color 0.2s, color 0.2s; } .footer-button:hover, .footer-button:visited:hover, .footer-button:active:hover, .footer-button:focus, .footer-button:visited:focus, .footer-button:active:focus, .footer-button-give:hover, .footer-button-give:visited:hover, .footer-button-give:active:hover, .footer-button-give:focus, .footer-button-give:visited:focus, .footer-button-give:active:focus, .footer-button-apply:hover, .footer-button-apply:visited:hover, .footer-button-apply:active:hover, .footer-button-apply:focus, .footer-button-apply:visited:focus, .footer-button-apply:active:focus { color: #222; background-color: #ececec; } footer .footer-button, footer .footer-button:visited, footer .footer-button:active, footer .footer-button-give, footer .footer-button-give:visited, footer .footer-button-give:active { color: #fc0; background-color: #232323; background-image: linear-gradient(rgba(35, 35, 35, 0), rgba(35, 35, 35, 0)); } @media (min-width: 881px) { .footer-button, .footer-button-give { box-shadow: inset -1px 0 0 #000; } } /* -- PRE FOOTER A TAG STYLES -- */ @media only screen and (min-width: 881px) { li.footer-button, li.footer-button-give, li.footer-button-apply { max-width: 34%; } } .footer-button a, .footer-button-give a, .footer-button-apply a { padding: 1em 3em; border: 0 solid transparent; font-weight: 400; } .footer-button a, .footer-button a:visited, .footer-button a:active, .footer-button-give a, .footer-button-give a:visited, .footer-button-give a:active { color: #fc0; /* background-color: transparent; */ } .footer-button-apply, .footer-button-apply:visited, .footer-button-apply:active { color: #000; background-color: #fc0; } @media (min-width: 881px) { .footer-button, .footer-button-give, .footer-button-apply { box-shadow: inset -1px 0 0 #000, -1px 0 0 #000; } } .footer-button-apply a, .footer-button-apply a:visited, .footer-button-apply a:active { color: #000; background-color: #fc0; } .footer-button a:hover, .footer-button a:visited:hover, .footer-button a:active:hover, .footer-button a:focus, .footer-button a:visited:focus, .footer-button a:active:focus, .footer-button-give a:hover, .footer-button-give a:visited:hover, .footer-button-give a:active:hover, .footer-button-give a:focus, .footer-button-give a:visited:focus, .footer-button-give a:active:focus, .footer-button-apply a:hover, .footer-button-apply a:visited:hover, .footer-button-apply a:active:hover, .footer-button-apply a:focus, .footer-button-apply a:visited:focus, .footer-button-apply a:active:focus { color: #222; background-color: #ececec; outline-color: #222; outline-offset: -2px; } /* -------------- */ /* End Pre Footer */ /* -------------- */ .footer, .footer__contact-info, .footer__contact-social, .footer__post-info { padding: 0 1em; } @media (min-width: 1200px) { .footer, .footer__contact-info, .footer__contact-social, .footer__post-info { padding: 0; } } .footer__contact-info-address { line-height: 1.55; } .footer { display: flex; flex-wrap: wrap; margin-top: 1em; } @media (min-width: 501px) { .footer { max-width: 1200px; max-width: var(--max-width, 1200px); } } /* ---------------- */ /* ## Footer Menus */ /* ---------------- */ /** * These are the list of links that are in the footer. */ .footer-menu__title { margin-top: 0.75em; margin-bottom: 1em; } .footer-menu { display: flex; flex: 1 0 100%; flex-direction: column; margin-bottom: 1rem; padding-right: 1rem; line-height: 1.25; } .footer-menu:last-of-type { padding-right: 0; } .footer-menu ul { font-size: 1em; } @media (min-width: 501px) { .footer-menu ul { font-size: 0.9em; } } .footer-menu li { margin-bottom: 1em; } .footer-menu a { text-decoration: none; } .footer-menu a:hover { text-decoration: underline; } @media (min-width: 501px) { .footer-menu { flex: 1 0 50%; } } @media (min-width: 881px) { .footer-menu { flex: 1 0 25%; min-width: 0; } } /* IE Overides */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-width: 501px) { .footer-menu { flex: 1 0 24%; flex-basis: calc(50% - 1rem); flex-grow: 1; flex-shrink: 0; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-width: 881px) { .footer-menu { flex: 1 0 49%; flex-basis: calc(25% - 1rem); flex-grow: 1; flex-shrink: 0; } } /* ---------------- */ /* End Footer Menus */ /* ---------------- */ /* ----------------------- */ /* ## Footer Contact Area */ /* ----------------------- */ /** * This whole section contains the logo in the footer,the contact block that has the specific college's info, and the social links and icons. */ /* ### Footer Contact */ .footer__contact { display: flex; flex-direction: row-reverse; flex-wrap: wrap; } .footer__contact-info { flex: 1 1 100%; margin-bottom: 1em; margin-top: 1em; line-height: 2; } @media (min-width: 881px) { .footer__contact-info { flex: 1 1 70%; text-align: right; } } .footer__contact-info a.text-gold, .footer__contact-info .bar-separator a { display: inline-block; margin: 0.25rem 0; } @media (min-width: 501px) { .footer__contact-info a.text-gold, .footer__contact-info .bar-separator a { display: inline; margin: 0; } } /* ------------------ */ /* ### Footer Contact and Social Section */ .footer__contact-social { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: 2em; } /* #### Logo */ .header-logo a { display: flex; } .header-logo a { max-height: 35px; } .shrink .header-logo a { max-height: 45px; } .mtu-logo { display: block; color: hsl(50, 100%, 50%); } .mtu-logo:visited { color: hsl(50, 100%, 50%); } .mtu-logo:hover { color: hsl(50, 100%, 100%); } .mtu-logo svg { width: 100%; height: auto; opacity: 1; fill: currentColor; } @media only screen and (min-width: 881px) { .header-logo a { max-height: 150px; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .mtu-logo svg { height: 40px; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 881px) { .mtu-logo svg { height: 70px; } .shrink .mtu-logo svg { height: 45px; } } /* End Logo */ /* #### Social */ /* Social Icons - Part 2 */ .social-icons, ul[class*='social-'] { flex: 0 1 auto; padding: 1em 0; } .social-icons > li { display: inline-block; margin-left: calc(0.5em + 0.5vw); } .social-icons > li a { display: inline-block; width: 3.5em; height: 3.5em; border-radius: 50%; overflow: hidden; color: #fff; text-indent: 100em; background-color: #666; background-size: 50%; transition: background-color 0.2s, filter 0.2s; } .social-icons > li a:hover { box-shadow: none; } @media (min-width: 881px) { .social-icons > li a { width: 3em; height: 3em; } } .social-icons > li a.facebook { color: #000; background-color: #1778f2; } .social-icons > li a.twitter { color: #000; background-color: #2494e8; } .social-icons > li a.instagram { color: #fff; /* background-color: #252525; */ background-color: #d03275; } .social-icons > li a.youtube { color: #000; background-color: #ff0000; } .social-icons > li a.vimeo { background-color: #00a2cd; } .social-icons > li a.snapchat { color: #000; background-color: #fffc00; } .social-icons > li a.linkedin { color: #fff; background-color: #0e76a8; } .social-icons > li a.apple { background-color: #666; } .social-icons > li a.pinterest { color: #fff; background-color: #e60023; } .social-icons > li a.tiktok { color: #fff; background-color: #222; } .social-icons > li a.flickr { background-color: #ff0084; } .social-icons > li a.soundcloud { background-color: #ff3a00; } .social-icons > li a.tiktok { background-color: #222; } .social-icons > li a.facebook:hover, .social-icons > li a.facebook:focus, .social-icons > li a.pinterest:hover, .social-icons > li a.pinterest:focus, .social-icons > li a.twitter:hover, .social-icons > li a.twitter:focus, .social-icons > li a.instagram:hover, .social-icons > li a.instagram:focus, .social-icons > li a.youtube:hover, .social-icons > li a.youtube:focus, .social-icons > li a.vimeo:hover, .social-icons > li a.vimeo:focus, .social-icons > li a.snapchat:hover, .social-icons > li a.snapchat:focus, .social-icons > li a.linkedin:hover, .social-icons > li a.linkedin:focus, .social-icons > li a.apple:hover, .social-icons > li a.apple:focus, .social-icons > li a.tiktok:hover, .social-icons > li a.tiktok:focus, .social-icons > li a.flickr:hover, .social-icons > li a.flickr:focus { background-color: #555 !important; filter: invert(1); } .social-icons > li a.facebook:focus, .social-icons > li a.pinterest:focus, .social-icons > li a.tiktok:focus, .social-icons > li a.flickr:focus, .social-icons > li a.twitter:focus, .social-icons > li a.instagram:focus, .social-icons > li a.youtube:focus, .social-icons > li a.vimeo:focus, .social-icons > li a.snapchat:focus, .social-icons > li a.linkedin:focus, .social-icons > li a.apple:focus { outline: 1px dashed #03f; outline-offset: 2px; } .social-icons > li a.facebook:hover:focus, .social-icons > li a.pinterest:hover:focus, .social-icons > li a.tiktok:hover:focus, .social-icons > li a.flickr:hover:focus, .social-icons > li a.twitter:hover:focus, .social-icons > li a.instagram:hover:focus, .social-icons > li a.youtube:hover:focus, .social-icons > li a.vimeo:hover:focus, .social-icons > li a.snapchat:hover:focus, .social-icons > li a.linkedin:hover:focus, .social-icons > li a.apple:hover:focus { outline: none; } /* End Social */ /* ----------------------- */ /* End Footer Contact Area */ /* ----------------------- */ /* --------------- */ /* ## Post Footer */ /* --------------- */ .footer__post-info { display: flex; flex-direction: column; justify-content: space-between; padding-top: 1em; padding-bottom: 3rem; border-top: 1px solid #6d6d6d; text-align: center; } .footer__post-info > div { margin-bottom: 1em; } .footer__pre-nav li:nth-of-type(1), .footer__pre-nav li:nth-of-type(2), .footer__pre-nav li:nth-of-type(3), .footer__pre-nav li:nth-of-type(4) { display: none; } @media (min-width: 881px) { .footer__post-info { flex-direction: row; text-align: center; } } #directedit:hover, #directedit:focus { text-decoration: none !important; } /* ----------------- */ .phone::before, .tollfree::before, .fax::before { color: #fff; } .phone::before { content: 'Ph: '; } .tollfree::before { content: 'Toll-Free: '; } .fax::before { content: 'Fax: '; } /* --------------- */ /* End Post Footer */ /* --------------- */ /* ========================================================================== # TO TOP BUTTON ========================================================================== */ .to-top { position: fixed; right: 0; bottom: -3rem; z-index: 1000; box-sizing: border-box; width: 3rem; height: 2.75rem; border: 1px solid transparent; border-bottom: 0 solid transparent; border-radius: 5px 0 0 5px; vertical-align: text-top; background-color: #fc0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); cursor: pointer; transition: bottom 0.5s; } .to-top-left { left: 0; right: auto; border-radius: 0 5px 5px 0; } body.reduced .to-top { transition: bottom 0s; } @media (prefers-reduced-motion) { .to-top { transition: bottom 0s; } } .to-top * { box-sizing: inherit; } .to-top.to-top-show { bottom: 3.5rem; } /* Had to do max width because the selector is very specific. */ /* It only applys if the sticky call to actions buttons are also on the page */ /* `-webkit-touch-callout: none` is to select specifically iPhones */ @supports (-webkit-touch-callout: none) { @media (max-width: 880px) { [id='adm-sticky-buttons'] ~ .main .to-top-show { bottom: calc(3.5rem + env(safe-area-inset-bottom)); } } } @media (min-width: 881px) { .to-top.to-top-show { bottom: 0; } } .to-top:focus-within { border: 1px dashed #000; border-bottom: 0 solid transparent; } .to-top:focus-within:hover { border: 1px solid transparent; border-bottom: 0 solid transparent; } @media (min-width: 881px) { .to-top { right: 1rem; border-radius: 5px 5px 0 0; } .to-top-left { left: 1rem; border-radius: 5px 5px 0 0; } } @media (min-width: 1200px) { .to-top { right: 2rem; } } .to-top-icon::before { position: absolute; top: 35%; left: 50%; display: block; width: 1.5em; height: 1.5em; border-top: 0.25rem solid black; border-right: 0 solid transparent; border-bottom: 0 solid transparent; border-left: 0.25rem solid black; transform: translate(-50%, -30%) rotate(45deg); content: ''; } .to-top-icon:focus { /* for Siteimprove */ outline: #fc0; } /* Overwrite some default links styles */ a.to-top-icon, a.to-top-icon:visited, a.to-top-icon:active, a.to-top-icon span, a.to-top-icon:visited span, a.to-top-icon:active span { color: #000; } a.to-top-icon { text-decoration: underline; text-decoration-thickness: 1px; padding: 0; } a.to-top-icon:hover { box-shadow: none; text-decoration-thickness: 1px; text-deoration: none; } /* The word 'Top' on the button */ .top-label { position: relative; top: 1.55rem; display: block; font-weight: 600; font-size: 1.2em; text-align: center; } /* ========================================================================== # NAMED TESTIMONIALS ========================================================================== */ .testimonial { margin: 0 auto 1.5rem; } /* TODO: What is the purpose of these `.testimonial + .testimonial` rules. */ .testimonial + .testimonial { box-sizing: border-box; margin-top: 1rem; } .testimonial + .testimonial * { box-sizing: inherit; } /* -------------------------------- */ /* ## Testimonial Container Styles */ /* -------------------------------- */ .testimonial__quote-wrapper { display: -webkit-box; display: flex; flex-wrap: wrap; } .testimonial__quote-wrapper > .testimonial__quote, .testimonial__quote-wrapper > .testimonial__info { box-sizing: border-box; } @media (min-width: 881px) { .testimonial__quote-wrapper { flex-wrap: nowrap; } } .testimonial__quote { position: relative; z-index: 0; width: 100%; margin: 0; padding: 2rem 1rem 3rem; background-color: #fc0; color: #000; } /* ### Testimonial Typography Styles */ /* This is gross and needs to addressed in our styles */ .testimonial__quote a { text-decoration: underline !important; } .testimonial__quote a:hover { text-decoration: none !important; } .testimonial__quote p { margin-bottom: 0; line-height: 1settings 5; } .testimonial__quote p + p { margin-top: 1.25em; } /* End Testimonial Typography Styles */ @media (min-width: 440px) { .testimonial__quote { padding: 2rem 4rem 3rem; } } @media (min-width: 881px) { .testimonial__quote { padding: 2rem 7rem 2rem 4rem; } } /* These rules make the quote looking graphic in the upper right */ .testimonial__quote::before { position: absolute; top: 1rem; left: 2rem; z-index: -1; display: block; width: 80px; height: 70px; background-image: linear-gradient(-225deg, transparent 35%, #ffe066 35%), linear-gradient(-225deg, transparent 35%, #ffe066 35%); background-repeat: no-repeat; background-position: left top, right top; background-size: 45% 100%; content: ''; } .testimonial__title { font-size: 1.75em; font-family: heading-numerals, heading-characters; } /* -------------------------------- */ /* End Testimonial Container Styles */ /* -------------------------------- */ /* -------------------- */ /* ## Testimonial Info */ /* -------------------- */ /** * The section where the testimonial author's photo, name, and title go. */ .testimonial__info { position: relative; z-index: 1; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-align: center; align-items: center; margin-top: -2rem; margin-right: auto; margin-left: auto; padding: 0 1rem; } @media (min-width: 440px) { .testimonial__info { flex-wrap: nowrap; margin-right: auto; margin-left: 3.5rem; padding: 1rem 0; } } @media (min-width: 881px) { .testimonial__info { width: 100%; margin-top: 0; margin-left: -5.3125rem; } } .testimonial__photo, .testimonial__author { -webkit-box-flex: 1; flex: 1 1 50%; } .full-width .testimonial__photo, .testimonial__photo { /* min-width: 4rem; */ width: 100%; max-width: 170px; margin-right: 1rem; border: 7px solid #fff; background-color: #fff; } .full-width div.testimonial__photo, div.testimonial__photo { align-self: center; width: 0; min-width: 0; max-width: 0; margin: 3rem 0 0; padding-right: 0.5rem; border: 0 solid transparent; } @media (max-width: 880px) { .full-width div.testimonial__photo + .testimonial__author, div.testimonial__photo + .testimonial__author { margin-top: -2rem; } .full-width div.testimonial__photo + .testimonial__author::before, div.testimonial__photo + .testimonial__author::before { position: absolute; display: block; width: 10px; height: 1px; margin-top: 0.8em; margin-left: -1em; background-color: #000; content: ''; } } @media (max-width: 440px) { .full-width div.testimonial__photo + .testimonial__author, div.testimonial__photo + .testimonial__author { margin-top: -1.5rem; } } @media (min-width: 881px) { .full-width div.testimonial__photo, div.testimonial__photo { margin: 0 0 0 5.25rem; border-top: 1.5em solid transparent; border-right: 0 solid transparent; border-bottom: 1.5em solid transparent; border-left: 1.5em solid #fc0; } } .testimonial__author { align-self: flex-start; padding-right: 1rem; padding-left: 0.5rem; font-size: 1rem; line-height: 1.5; } @media (min-width: 440px) { .testimonial__author { margin-top: 3rem; padding-left: 0; } } .testimonial__author__name { /* font-size: 1.1em; */ font-weight: bold; font-style: normal; } .testimonial__author__title { font-weight: 100; } /* -------------------- */ /* End Testimonial Info */ /* -------------------- */ @media (min-width: 881px) { .testimonial__author { align-self: center; margin-top: 0; } /* ----------------------- */ /* ## Testimonial Flipped */ /* ----------------------- */ .testimonial-flipped .testimonial__quote-wrapper, .testimonial-flipped .testimonial__info { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; } .testimonial-flipped .testimonial__quote { padding: 2rem 4rem 2rem 7rem; } .testimonial-flipped .testimonial__quote::before { right: 1rem; left: auto; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .testimonial-flipped .testimonial__author { padding-right: 0; padding-left: 1rem; text-align: right; } .testimonial-flipped .testimonial__info { margin-right: -5.3125rem; margin-left: 0; } .full-width .testimonial-flipped .testimonial__photo, .testimonial-flipped .testimonial__photo { margin-left: 1rem; } .full-width .testimonial-flipped div.testimonial__photo, .testimonial-flipped div.testimonial__photo { margin: 0 5.25rem 0 0.25rem; border-left: 0 solid transparent; border-right: 1.5em solid #fc0; } /* ----------------------- */ /* End Testimonial Flipped */ /* ----------------------- */ } /* --------------------- */ /* End Named Testimonial */ /* --------------------- */ /* ========================================================================== # SKILLBAR ========================================================================== */ /* Plugin : an-skill-bar Version: 1.0.1 Description: A plugin that fills bars with a percentage you set. Author: Hasan Misbah Copyright 2018, Hasan Misbah Free to use and abuse under the MIT license. http://www.opensource.org/licenses/mit-license.php */ .skillbar { position: relative; display: block; width: auto; height: 15px; margin: 10px 5px 10px 0; padding: 10px; border-radius: 5px; overflow: hidden; font-weight: 600; background-color: #dcdcdc; } .skillbar.html .title { background-color: #000; } .skillbar.html .filled { background-color: #000; } .skillbar .title { left: 0; width: auto; height: 15px; border-radius: 5px 0 0 5px; color: #fc0; text-align: center; } .skillbar .percent, .skillbar .title { position: absolute; top: 0; z-index: 9; padding: 12px 6.5px; font-size: 12.9px; } .skillbar .percent { right: 0; color: #000; } .skillbar .filled { position: absolute; top: 0; left: 0; z-index: 8; height: 100%; border-radius: 5px 0 0 5px; } /* ----------- */ /* ========================================================================== # PERSON PROFILE ========================================================================== */ .person { flex-wrap: wrap; width: 100%; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #222; } /* Clearer if there is anything after the profile, this will prevent floats from blowing out the container */ /* .person + *::before, */ .person::after { display: table; clear: both; content: ''; } @media (min-width: 649px) { .person { display: flex; } } .person .clearer { display: none; } .photo { flex: 1 1 28%; max-width: 170px; margin-right: 2%; margin-bottom: 2%; } .person .img { width: 100%; } .person-info, .person_bio { flex: 1 1 70%; flex-wrap: wrap; align-content: flex-start; float: left; width: 100%; } @media (min-width: 649px) { .person-info, .person_bio { display: flex; } } .personal { flex: 1 0 100%; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #bababa; } .person_bio .sliders { width: 100%; } .content_bio, .person_bio .slider { flex: 1 0 100%; } .name-title a { text-decoration-color: #000; } .personal ul, .personal li { margin: 0; padding: 0; } /* Quick fix because the person's info was getting pushed too far right */ #content_body .person_bio li { left: 0; } .personal li + li { padding-top: 0.5rem; } @media (min-width: 881px) { .personal li + li { padding-top: 0; } } .personal ul li { font-weight: 400; font-size: 1.2em; } .person_bio h2 { margin: 0 0 0.3em; padding: 0; font-weight: 600; font-size: 2.2em; } .person_bio h3, .person_bio .specialties h2 { margin: 0 0 0.3em; color: #232323; font-weight: 600; font-size: 1.7em; } .person_bio .left, .person_bio .right { flex: 1; float: none; min-width: 1px; } .person_bio .left { margin-right: 2%; } .person_bio .contact { font-size: 1.5em; line-height: 1.3; } .person_bio .top-title { width: 100%; } /* ---------------------- */ /* ## Contact info icons */ /* ---------------------- */ /* TODO: Should we remove `.left` and `.right`? */ .person_bio .left .place::before, .person_bio .left .cell-number::before, .person_bio .left .phone-number::before, .person_bio .left .email-address::before, .person_bio .left a::before, .person_bio .right .place::before, .person_bio .right .cell-number::before, .person_bio .right .phone-number::before, .person_bio .right .email-address::before, .person_bio .right li > a::before { position: relative; top: 0.2em; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 0.6em; background-image: url(//www.mtu.edu/mtu_resources/images/icons/link.svg); background-size: 1.2em 1.2em; content: ''; } /* If there is a link inside that somehow has a ::before already, this will hide it */ .person_bio .left .place a::before, .person_bio .left .phone-number a::before, .person_bio .left .cell-number a::before, .person_bio .left .email-address a::before, .person_bio .right .place a::before, .person_bio .right .phone-number a::before, .person_bio .right .cell-number a::before, .person_bio .right .email-address a::before { display: none; } .person_bio .left .cell-number::before, .person_bio .left .phone-number::before, .person_bio .right .cell-number::before, .person_bio .right .phone-number::before { background-image: url(//www.mtu.edu/mtu_resources/images/icons/phone.svg); } .person_bio .left .email-address::before, .person_bio .right .email-address::before { background-image: url(//www.mtu.edu/mtu_resources/images/icons/email.svg); } .person_bio .left .place::before, .person_bio .right .place::before { background-image: url(//www.mtu.edu/mtu_resources/images/icons/place.svg); } /* ---------------------- */ /* End Contact info icons */ /* ---------------------- */ .person .quote { position: relative; z-index: 2; max-width: 90%; margin: 0 auto; margin-top: 0.75rem; padding: 0.5rem; border: 1px solid #222; border-radius: 10px; font-size: 1.3em; background-color: #ececec; transform-origin: top center; } .person .quote::after { position: absolute; top: -3px; left: 50%; z-index: -1; display: block; width: 15px; height: 15px; border-top: 1px solid #222; border-left: 1px solid #222; background-color: #ececec; transform: rotate(45deg) translateX(-50%); content: ''; } img.safeplace-logo { max-width: 60px; } .person .contact li { padding-right: 0; } /* ----------------------- */ /* ## Person Social Links */ /* ----------------------- */ .person #social-links.medium a, .person .social-links.medium a { width: 40px; height: 40px; margin-bottom: 2%; border-radius: 50%; background-size: 50%; } /* -------------------- */ /* ## Person Interests */ /* -------------------- */ .personnel-interests { display: flex; padding: 0.5em; overflow: hidden; font-size: 1rem; line-height: 1.5; background-color: #f5f5f5; } .personnel-interests .left { flex-basis: 30%; } .personnel-interests .right { flex-basis: 70%; } /* Clearfix for ther personnel interests */ .personnel-interests::before, .personnel-interests::after { display: table; clear: both; content: ''; } .personnel-interests:nth-child(1) { border-top: 1px solid #ccc; } table .personnel-interests:nth-child(1) { border: none; } .personnel-interests:last-child { border-top: 1px solid #ccc; } table .personnel-interests:last-child { border: none; } .personnel-interests:nth-child(odd) { background-color: #e0e0e0; } /* ------------------ */ /* End Person Profile */ /* ------------------ */ /* ========================================================================== # CARDS ========================================================================== */ /* --------------------- */ /* ## Card Setup Styles */ /* --------------------- */ /* Todo: remove once cards have card-no-bar on them. */ /* override */ .column > .card, .column > li > .card { height: 100%; border: none; outline: none; } .column > .card:hover, .column > li > .card:hover, .column > .card:focus, .column > li > .card:focus { box-shadow: none; } .column-inner > .card, .column-inner > .card ~ *, .column-flex > .card ~ * { flex: 1; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .column-inner > .card { flex: auto; } .card-section, .card-section * { max-width: 100%; } } .column-inner > .card ~ * { max-width: 100%; margin-top: 0.5rem; } /* TODO: quick fix for report a concern, need to put a class on boxed-section grid to play better */ .section-border .column-inner { padding-top: 1rem; padding-right: 1rem; padding-left: 1rem; box-sizing: border-box; } .section-border .card { border: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 5px solid #fc0; margin-bottom: 1rem; } .section-border .feed-import .card { border: unset; } .section-border.alert { border-bottom-color: #b60000; } .full-width li.card { left: 0; padding-right: 0; } /* ------------------------ */ /* ## Standard Card Styles */ /* ------------------------ */ .card { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 5px solid #fc0; overflow: hidden; font-size: 1rem; box-shadow: 0 12px 4px -8px rgba(0, 0, 0, 0); transition: box-shadow 0.5s; transition-delay: 0.05s; } .card, .card:visited, .card:active { color: inherit; text-decoration-color: currentColor; } .card:link:visited, .card:link:focus-within { border: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 5px solid #fc0; } .card:hover, .card:focus-within { box-shadow: 0 12px 4px -8px rgba(0, 0, 0, 0.22); transition-delay: 0s; } .card:focus-within { outline: 1px dashed #000; } .card * { box-sizing: inherit; } a.card, .card a, a.card:hover, a.card:focus, .card a:hover, .card a:focus { transition: text-decoration 0s; } a.card:hover, a.card:focus, .card a:hover, .card a:focus { color: inherit; outline-color: #fff; outline-color: currentColor; box-shadow: none; } a.card.background-gold:hover { color: #000; } a.card:hover, a.card:focus { color: #fff; } .card a::after { /* These are !important to contest with #main a.noicon. Thought it would be better than making the whole rule more specific or making the #main .noicon less specific. */ content: '' !important; display: block !important; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .card-link { display: inline-flex; flex-direction: column; justify-content: stretch; width: 100%; color: inherit; text-decoration-color: currentColor; } .card:link, .card-link:link, .card-link:visited { text-decoration: none; } /* .card-header is on https://www.mtu.edu/admissions/ custom section */ .card:link .card-header, .card-link:link .card-header, /* remove if ever updated */ .card:link .card-heading, .card-link:link .card-heading { text-decoration: underline; } /* .card-header is on https://www.mtu.edu/admissions/ custom section */ .card:link:hover .card-header, .card:link:focus .card-header, .card-link:link:hover .card-header, .card-link:link:focus .card-header, /* remove if ever updated */ .card:link:hover .card-heading, .card:link:focus .card-heading, .card-link:link:hover .card-heading, .card-link:link:focus .card-heading { text-decoration: none; } /* ### Card hero */ /* The main graphic for the card */ .card-hero { position: relative; width: 100%; } /* date for calednar cards */ .card-hero .noimg { width: 100%; } /* TODO: figure out way to not have .column img override this rule */ .card-image, .column .card-image { width: 100%; height: 10rem; object-fit: cover; } .column > .movie-wrapper { margin-bottom: 0; } .card-image { display: block; outline: 1px solid rgba(0, 0, 0, 0.05); outline-offset: -1px; } /* Remove the alt tag from showing if there is no image */ .card-image[src=''] { color: transparent; } /* If there is an image with no source, put a placeholder image */ .card-image[src='']::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; background-image: url('http://www.mtu.edu/mtu_resources/images/logos/michigan-tech-logo-square.png'); background-repeat: no-repeat; background-position: center; background-size: 114px 116px; filter: grayscale(1); content: ''; } /* overwrite full-width img{margin-bottom:.5em} */ .full-width .card-image { margin-bottom: 0; } .card-hero + * { margin-top: 0.5em; } .card-heading, .card-header { margin: 0; padding: 0; color: inherit; line-height: 1.3; } /* Overiede the rule `aside .sidebar-nobox h2` */ aside .sidebar-nobox .card .card-heading { color: inherit; } /* ### Card Content Section */ .card-section { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; padding: 1rem; color: inherit; } .card-section .small { color: #000; } /* Making items stack inside the card section */ .card-section > * + * { margin: 0; margin-top: 0.75rem; padding-bottom: 0; } .card-section > * + *:empty { margin-top: 0; } .card-collapse .card-section { padding: 0; } .card-link + .card-section, .card-section + .card-section { flex-grow: 1; padding-top: 0; } .card-description { margin: 0; padding: 0; } .news-source, .card-date, .card-category { margin-bottom: 0.5rem; font-weight: 300; } .news-source::after { display: inline-block; width: 1em; height: 1em; margin-left: 0.5em; background-image: url('https://www.mtu.edu/mtu_resources/images/svg/open-in-browser.svg'); background-repeat: no-repeat; content: ''; } /* ### Card Play Button */ /* Play button for after content to signify it is a link to a video */ /* Button background */ .card-play-button { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; margin-right: -1.5em; margin-left: 0.5em; border-radius: 2px; font-size: 0.95em; vertical-align: middle; background-color: #fc0; transform: translateY(-0.05em); } /* Play button icon */ .card-play-button::after { display: block; border-top: 0.25em solid transparent; border-bottom: 0.25em solid transparent; border-left: 0.5em solid black; content: ''; } /* ### Card modifiers */ .card-no-border { border: none; } .card-no-border:hover { box-shadow: none; } .card-no-bar { border-bottom: 1px solid rgba(0, 0, 0, 0.07); } /* -- End Basic Card -- */ /* ------------ */ /* ## Go Cards */ /* ------------ */ /* ### Legacy Go Cards */ /* These rules are for legacy Go cards */ /* check mtu.edu/forest/ if you want to see them (02/27/2020) */ a[data-ga='Go-Button']:hover { box-shadow: none; } [data-ga='Go-Button'] .black span { top: 50%; left: 50%; z-index: 1; padding: 0.5rem 1.5rem; border: 1px solid #fff; color: #fff; font-size: 1.25rem; background-color: rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); opacity: 1; } [data-ga='Go-Button'] .black span:hover { text-decoration: underline; background-color: rgba(0, 0, 0, 0); } /* End legacy go cards */ .card-go { color: #000; text-decoration: none; } .card-go .card-hero { position: relative; } .card-go .card-hero::before, .card-go .card-hero::after { position: absolute; display: block; opacity: 0; transition: opacity 0.2s, background-color 0.2s; content: ''; } .card-go .card-hero::after { background-color: rgba(0, 0, 0, 0.5); } .card-go:hover .card-hero::before { top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 1; content: ''; } .card-go:hover .card-hero::after { top: 50%; left: 50%; z-index: 1; padding: 1rem 1.5rem; border: 1px solid #fff; color: #fff; font-size: 1.25em; transform: translate(-50%, -50%); opacity: 1; content: 'Go'; content: var(--text, 'Go'); } .card-hero:hover::after { text-decoration: underline; background-color: rgba(255, 255, 255, 0.025); } /* ------------ */ /* End Go Cards */ /* ------------ */ /* -------------- */ /* ## News Cards */ /* -------------- */ .card-featured-heading { border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .card-featured-heading .card-section { position: relative; border-left: 5px solid #fc0; } .card-featured-heading .card-heading::before, .card-featured-heading .card-header::before { position: absolute; left: 0; display: block; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; border-left: 0.5em solid #fc0; content: ''; } /* -------------- */ /* End News Cards */ /* -------------- */ /* ------------------------- */ /* ## Background Image Card */ /* ------------------------- */ .card-background-image { position: relative; z-index: 0; padding: 0; min-height: 12.5rem; border: none; color: #fff; background-color: #000; } a.card-background-image:link { color: #fff; } a.card-background-image:link:hover, a.card-background-image:link:focus { color: #fff; text-decoration: none; border: 0 solid transparent; } a.card-background-image.background-gold:link, a.card-background-image.background-gold:link:hover, a.card-background-image.background-gold:link:focus, a.card-background-image.background-gold:link:active, .card-background-image.background-gold a, .card-background-image.background-gold a:hover, .card-background-image.background-gold a:focus, .card-background-image.background-gold a:active, a.card-background-image.background-medium-gray:link, a.card-background-image.background-medium-gray:link:hover, a.card-background-image.background-medium-gray:link:focus, .card-background-image.background-medium-gray a, .card-background-image.background-medium-gray a:hover, .card-background-image.background-medium-gray a:focus, .card-background-image.background-medium-gray a:active { color: #000; } @media (min-width: 650px) { .card-background-image { min-height: 16.25rem; } } .card-background-image.background-black .card-hero::after, .card-background-image.background-yellow .card-hero::after, .card-background-image.background-gold .card-hero::after, .card-background-image.background-medium-gray .card-hero::after { display: none; } .card-background-image.background-medium-gray, .card-background-image.background-medium-gray:link, .card-background-image.background-medium-gray:visited { color: #000; } .card-background-image, .card-background-image:link, .card-background-image:visited, .card-background-image:active { color: #fff; } .card-background-image .card-hero, .card-background-image .card-hero::after { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; } .card-background-image .card-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .card-background-image .card-hero::after { z-index: 1; /* background-color: rgba(0, 0, 0, 0.4); */ background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.6) 8%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.25) 50% ); background-size: 100% 200%; background-position: top center; transition: background-position 0.05s linear; content: ''; } .card-background-image:hover .card-hero::after, .card-background-image:focus .card-hero::after { /* background-color: rgba(0, 0, 0, 0.25); */ background-position: bottom center; } /* ------------------------- */ /* End Background Image Card */ /* ------------------------- */ /* ---------------- */ /* ## Detail cards */ /* ---------------- */ /* These are horizontal cards with the image on the left or right of the content */ .card-detail { flex-direction: row; } .card-detail:link:hover { color: #000; } .card-detail:link:focus { border: none; } .card-detail .card-hero { flex: 0 1 35%; max-width: 160px; margin-right: 1rem; } .card-detail .card-hero .photo.noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: 127px; padding: 0.25rem; color: #315196; font-weight: 700; font-size: 1.5rem; text-align: center; background-color: #ececec; } .card-detail .card-image { width: 100%; height: auto; object-fit: contain; } .card-detail .card-section { flex: 1; padding-left: 0; /* Commented out because on some screen sizes larger words were going off the screen */ /* The `margin-right: 1rem` on the image pushed it out */ /* padding-right: 0; */ } /* ### Flipped Card Details */ .card-detail-flipped .card-section { padding-right: 1rem; padding-left: 0; } @media (min-width: 881px) { .card-detail-flipped { flex-direction: row-reverse; } .card-detail-flipped .card-hero { margin-right: 0; } } .card-detail .card-date { margin-bottom: 0; } .card-detail .card-date[class*='background-'] { padding: 0.5em; } .card-detail .card-hero + * { margin-top: 0; padding-top: 0; } /* ---------------- */ /* End Detail cards */ /* ---------------- */ /* --------- */ /* End Cards */ /* --------- */ /* --------------- */ /* ## Card Button */ /* --------------- */ @media (min-width: 650px) { .card:hover .card-button, .card:focus .card-button, .card:focus-within .card-button { transform: translateX(1rem); transition: transform 0.2s ease; } } body.reduced .card .card-button { transform: translateX(1rem); } @media (prefers-reduced-motion) { .card .card-button { transform: translateX(1rem); } } .card-button, .card-button:visited { color: #000; } .card-button { align-self: center; margin-top: auto; margin-bottom: 1em; padding: 0.8em; border-radius: 0.5em; background-color: #fc0; transition: transform 0.2s 0.25s ease; } .card-button.shutter-button { text-decoration: none; cursor: pointer; } @media (min-width: 650px) { .card-button { align-self: flex-end; border-radius: 0.5em 0 0 0.5em; transform: translateX(105%); } } /* --------------- */ /* End Card Button */ /* --------------- */ .instructor-profile .specialties { clear: both; } .instructor-profile img.img.left.author { max-width: 140px; padding: 0 1rem 0 0; margin: 0 0 1rem 0; } .instructor-contact h4 { font-size: 1.1rem; margin-bottom: 1rem; } .instructor-profile p.cta { margin-bottom: 1.5rem; } /* --------------- */ /* Begin Instructor Card */ /* --------------- */ /* --------------- */ /* End Instructor Card */ /* --------------- */ /* ========================================================================== # SHUTTER BUTTON ========================================================================== */ .shutter-button { position: relative; z-index: 2; border: none; overflow: hidden; font-weight: 600; text-align: center; text-decoration: underline; background: #fc0; outline: 1px dashed rgba(0, 0, 0, 0); } .shutter-button, .shutter-button:hover, .shutter-button:focus { background-color: #fc0; } .shutter-button:hover, .shutter-button:focus { transition: outline 0.5s 0.75s; animation: 1s shutter-in-text both; } /* ---------------------------------- */ /* ## Shutter Button Color Modifiers */ /* ---------------------------------- */ .shutter-button.background-black { color: #fff; } .shutter-button.background-black:hover, .shutter-button.background-black:focus { animation: 1s shutter-in-text-white both; } .shutter-button:focus { outline: 1px dashed #000; outline-offset: -5px; } .shutter-button.background-black, .shutter-button.background-black:hover, .shutter-button.background-black:focus { background-color: #000; } .shutter-button.background-black:focus { outline: 1px dashed #fff; outline-offset: -5px; } .shutter-button:hover:focus, .shutter-button.background-black:hover:focus { outline: none; } /* ---------------------------------- */ /* End Shutter Button Color Modifiers */ /* ---------------------------------- */ /* ------------------------------- */ /* ## Shutter Button Cover Slider */ /* ------------------------------- */ .shutter-button::after { position: absolute; top: 0; left: -100%; z-index: -1; display: block; width: 100%; height: 100%; background-color: #000; transition: all 0s; content: ''; } .shutter-button:hover::after, .shutter-button:focus::after { left: 100%; animation: 1s shutter-in both; } .shutter-button.background-black::after { background-color: #fff; } body.reduced .shutter-button { animation: none !important; transition: background-color 0.2s, color 0.2s !important; } body.reduced .shutter-button:hover, body.reduced .shutter-button:focus { background-color: #000; color: #fc0; text-decoration: none; } body.reduced .shutter-button.background-black:hover, body.reduced .shutter-button.background-black:focus { background-color: #fff; color: #000; } body.reduced .shutter-button:hover::after, body.reduced .shutter-button:focus::after { animation: none !important; transition: all 0s; } @media (prefers-reduced-motion) { .shutter-button { animation: none !important; transition: background-color 0.2s, color 0.2s !important; } .shutter-button:hover, .shutter-button:focus { background-color: #000; color: #fc0; text-decoration: none; } .shutter-button.background-black:hover, .shutter-button.background-black:focus { background-color: #fff; color: #000; } .shutter-button:hover::after, .shutter-button:focus::after { animation: none !important; transition: all 0s; } } @keyframes shutter-in { 0% { left: -100%; } 100% { left: 100%; } } @keyframes shutter-in-text { 0% { color: #000; text-decoration: underline #fc0; } 25% { color: #fc0; text-decoration: underline #fc0; } 100% { color: #000; text-decoration: underline #000; } } @keyframes shutter-in-text-white { 0% { color: #fff; text-decoration: underline #fff; } 25% { color: #000; text-decoration: underline #000; } 100% { color: #fff; text-decoration: underline #fff; } } /* ------------------ */ /* End Shutter Button */ /* ------------------ */ /* ========================================================================== # NEW TOUTS ========================================================================== */ /** * Somehow these are turned into squares with text to the right of them on mobile. * Then they are circles that have text below them for desktop. * A lot of it hinges on the `.tout-stat` styles. * `.tout-cell`: The container for the stat and the text. * `.tout-stat`: The main number for the tout, replaced with a GO when hovered. * `.tout-stat-inner`: The wrapper inside tout-stat to center the text. * `.tout-text`: The continuted content for the tout information. */ /* need to overwrite full-width ul */ ul.tout-row, .tout-row { box-sizing: border-box; width: 100%; padding-left: 0; } /* Set touts vertcially */ .sidebar-content .tout-row { flex-direction: column; align-items: center; } .tout-row * { box-sizing: inherit; } /* Set touts Horizontally */ @media (min-width: 650px) { ul.tout-row, .tout-row { display: flex; justify-content: space-around; margin-top: 2rem; margin-bottom: 2rem; /* overflow: auto; */ } } .full-width li.tout-cell { padding-right: 0; } .tout-cell { display: flex; align-items: center; margin-bottom: 1rem; } .tout-cell p, .tout-cell { font-weight: 600; line-height: 1.5; } @media (min-width: 650px) { .tout-cell { flex-direction: column; width: 100%; min-width: 0; margin-right: 3%; margin-bottom: 0; border-bottom: 0; } .tout-cell::before, .tout-cell::after { content: none; } /* Fixes for when the tout is put into the sidebar */ .right-sidebar .tout-cell, .tout-cell:last-of-type { margin-right: 0; } } a.tout-stat, a.tout-stat:visited, a.tout-stat:hover { color: inherit; } .tout-stat { flex: 1 0 40%; max-width: 175px; overflow: hidden; color: #000; font-weight: 600; font-size: 1.75rem; line-height: 1.25; text-align: center; background-color: #fc0; transition: background-color 0.2s, color 0.2s; } /* --------------- */ /* ## Tout Colors */ /* --------------- */ .background-black .tout-yellow:not(.tout-hollow) .tout-stat { color: #000; } .tout-black .tout-stat, .tout-black a.tout-stat, .tout-black a.tout-stat:visited { color: #fc0; } .tout-black .tout-stat { background-color: #000; } .tout-blue .tout-stat, .tout-blue a.tout-stat, .tout-blue a.tout-stat:visited { border-color: #00bfd5; background-color: #00bfd5; } .tout-green .tout-stat, .tout-green a.tout-stat, .tout-green a.tout-stat:visited { border-color: #6ca438; background-color: #6ca438; } .tout-light-green .tout-stat, .tout-light-green a.tout-stat, .tout-light-green a.tout-stat:visited { border-color: #c1cd23; background-color: #c1cd23; } .tout-burgundy .tout-stat, .tout-burgundy a.tout-stat, .tout-burgundy a.tout-stat:visited { border-color: #860e25; color: #fff; background-color: #860e25; box-shadow: 0 0 0 0 #860e25; } .tout-orange .tout-stat, .tout-orange a.tout-stat, .tout-orange a.tout-stat:visited { border-color: #ff4611; background-color: #ff4611; } .tout-gray .tout-stat, .tout-gray .tout-stat:visited { border-color: #8a8b8c; background-color: #8a8b8c; } /* --------------- */ /* End Tout Colors */ /* --------------- */ /* Only on mobile */ @media (max-width: 650px) { a.tout-stat:hover { color: #fc0; background-color: #000; box-shadow: inset 0 0 0 1px #fc0; } .tout-black a.tout-stat:hover { color: #000; background-color: #fc0; box-shadow: inset 0 0 0 1px #000; } } /* ----------------------- */ /* ## Tout Stat Modifiers */ /* ----------------------- */ @media (min-width: 650px) { /* Tout stat styles */ .tout-stat { position: relative; flex: 0 1 auto; width: 100%; height: auto; margin-bottom: 0.25rem; border-radius: 100%; font-size: calc(0.5rem + 2.5vw); } @media (min-width: 881px) { .tout-stat { font-size: 2.25rem; } } .tout-stat, .tout-stat:visited { border: 0.5rem solid #fc0; color: #000; } .tout-stat:focus, .tout-stat.tout-stat:focus { border-style: solid; border-width: 0.5rem; outline: none; } .tout-row:not(.tout-hollow) .tout-stat:focus, .tout-row:not(.tout-hollow) .tout-stat.tout-stat:focus { border-color: rgba(0, 0, 0, 0.5); } .tout-row.tout-hollow .tout-stat:focus, .tout-row.tout-hollow .tout-stat.tout-stat:focus { border-style: dashed; } .tout-black .tout-stat, .tout-black .tout-stat:visited { border-color: #000; background-color: #000; } .tout-hollow .tout-stat, .tout-hollow a.tout-stat, .tout-hollow a.tout-stat:visited { color: #000; background-color: transparent; } /* make this account for other classes that are actually used in the CMS */ .background-dark-gray .tout-stat, .background-dark-gray a.tout-stat, .background-dark-gray a.tout-stat:visited, .background-black .tout-stat, .background-black a.tout-stat, .background-black a.tout-stat:visited { color: #fff; } .tout-stat::before { float: left; width: 0; padding-top: 100%; content: ''; } /* Go overlay on hover */ #main a.tout-stat::after, .tout-stat:link::after { position: absolute; top: 50%; left: 50%; display: none; padding: 0.5em; border: 1px solid currentColor; color: #000; font-size: 0.75em; text-decoration: underline; background-color: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); content: 'Go'; } /* base.css overrides */ #main a.tout-stat::after { width: unset; height: unset; margin: unset; background-image: unset; } .background-dark-gray .tout-stat::after, .background-dark-gray .tout-stat::after:visited, .background-black .tout-stat::after, .background-black .tout-stat::after:visited { color: #fff; } } /* ----------------------- */ /* End Tout Stat Modifiers */ /* ----------------------- */ /* ------------------------------ */ /* ## Tout with background Image */ /* ------------------------------ */ .tout-hollow .tout-stat[style*='background-image'] .tout-stat-inner { color: #fff; } .tout-stat[style*='background-image'] { border: 0 solid transparent; color: #fff; background-repeat: no-repeat; background-position: center center; background-size: cover; } .tout-stat[style*='background-image']:focus { border-width: 0; } .tout-stat[style*='background-image']:not([style*='.svg']) .tout-stat-inner { background-color: rgba(0, 0, 0, 0.5); } /* make this account for other classes that are actually used in the CMS */ .background-black .tout-text { color: #fff; } .tout-stat-inner { padding: 0.5rem; } .tout-stat-inner:empty { min-height: 75px; } @media (min-width: 650px) { .tout-stat-inner { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } } /* Linked tout styles */ a.tout-stat { display: block; } a .tout-stat-inner { text-decoration: underline; } @media (min-width: 650px) { #main a.tout-stat:hover::after, #main a.tout-stat:focus::after, a.tout-stat:hover::after, a.tout-stat:focus::after { display: block; } a.tout-stat:hover .tout-stat-inner, a.tout-stat:focus .tout-stat-inner { display: none; } } /* Tout Text Styles */ .tout-text { width: 100%; padding: 0.5rem; text-align: left; } /* make this account for other classes that are actually used in the CMS */ .background-dark-gray .tout-text, .background-black .tout-text { color: #fff; } @media (min-width: 650px) { .tout-text { height: auto; text-align: center; } } /* -- End New Tout Styles -- */ /* -- quick override for section fit screen -- */ .section-border { border: 1px solid #b5b5b5; border-bottom: 5px solid #fc0; } .background-yellow .section-border { border: 1px solid #000; } .section-border.section-padding { box-sizing: border-box; padding: 1rem; } .section-fit .black-tout-filter { background: transparent; } /* ========================================================================== # SECTION FIT ========================================================================== */ /* Full width background colors and images */ .section-fit { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 20rem; padding: 3rem 4%; } .section-fit-background { transform: translatex(-1rem); width: calc(100% + 2rem); } .full-width .section-fit-background { transform: none; width: 100%; } .section-fit-background img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* -------------------- */ /* ## Section Fit Last */ /* -------------------- */ /* Sets the section fit to be flush with the footer */ .section-fit-last { margin-bottom: 0; } @media (min-width: 881px) { .section-fit-last { margin-bottom: -1.875rem; } .section-fit-last.background-yellow { margin-bottom: calc(-1.875rem + 1px); } .section-fit-last.background-yellow::after { border-bottom: 1px solid #000; } } .section-fit.full-section { padding-right: 0; padding-left: 0; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ .section-fit.background-white.full-section .column .center { max-width: 100%; } } /* -------------------- */ /* End Section Fit Last */ /* -------------------- */ /* The collapse will overide the `min-height: 20rem` */ .section-fit.section-fit-collapse { min-height: 0; } /* put everything on a z-index of 0 so I can give an :after -1 and it'll go behind everything */ .section-fit > * { z-index: 0; margin: auto; } .section-fit + * { margin-top: 2rem; } .section-fit + .section-fit { margin-top: 0; } /* todo: make this a little more robust */ .section-fit p { margin-bottom: 0; } .section-fit .full-width { margin: 0; } .section-fit p.largest, .section-fit p.larger, .section-fit p.large { line-height: 1.5; } .section-fit p + * { margin-top: 1.25rem; } /* ------------------------------- */ /* ## Section Fit with Background */ /* ------------------------------- */ .section-fit-background { position: relative; } .section-fit.section-fit-background, .section-fit[style*='background-image'] { z-index: 0; /* Needs to be here so the color won't cover the image. */ min-height: 15rem; color: #fff; background-color: #000; background-repeat: no-repeat; background-size: 0 0; } .section-fit.background-yellow.section-fit-background a:hover { color: #000; } .section-fit.background-yellow.section-fit-background:active { color: #fff; } @media (min-width: 881px) { .section-fit.section-fit-background, .section-fit[style*='background-image'] { min-height: 25rem; } } .section-fit.section-fit-background::before, .section-fit[style*='background-image']::before, .section-fit::after { position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); content: ''; } .section-fit.section-fit-background::before, .section-fit[style*='background-image']::before { z-index: -10; background-color: rgba(0, 0, 0, 0.5); } .section-fit.section-fit-background::before { z-index: 0; } /* Remove the black overlay that darkens the image */ .section-fit.background-nofilter::before, .section-fit.nofilter::before { display: none; } .section-fit::after { z-index: -11; background-color: inherit; background-image: inherit; background-repeat: no-repeat; background-position: center center; background-size: cover; } /* -- When section-fit is in the main content, only have it take up the space of the column -- */ .main-content .section-fit { position: relative; z-index: 0; background-position: center center; background-size: cover; } .main-content .section-fit::before { top: 0; left: 0; width: 100%; height: 100%; transform: translate(0); } .main-content .section-fit::after { display: none; } /* ---------------------------- */ /* ## Section Fit Author Quote */ /* ---------------------------- */ /* For when we have a blockqoute inside a section-fit */ .section-fit blockquote:not(.testimonial__quote):only-of-type { display: block; width: 100%; margin: 0; padding: 0; font-size: 1.5rem; font-style: normal; text-align: center; } @media (min-width: 650px) { .section-fit blockquote:not(.testimonial__quote):only-of-type { font-size: 2.6rem; } } .section-fit blockquote:not(.testimonial__quote):only-of-type a, .section-fit blockquote:not(.testimonial__quote):only-of-type a:visited { color: inherit; font-weight: inherit; } .section-fit blockquote:not(.testimonial__quote):only-of-type .author, .section-fit blockquote:only-of-type .author { max-width: 400px; margin: 1rem auto; padding: 0.5rem; border-style: solid; border-width: 1px; border-right-width: 0; border-left-width: 0; font-size: 1rem; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; text-align: center; } .section-fit blockquote:not(.testimonial__quote):only-of-type::before, .section-fit blockquote:not(.testimonial__quote):only-of-type .author::before { display: none; } .section-fit blockquote:not(.testimonial__quote):only-of-type .author { display: block; box-sizing: border-box; width: 100%; font-weight: normal; } /* ---------------------------- */ /* End Section Fit Author Quote */ /* ---------------------------- */ /* --------------------------------------- */ /* ## Section Fit Background Color Styles */ /* --------------------------------------- */ /* -- Background Colors -- */ .section-fit > h2 { padding-top: 0; } .section-fit.background-dark-gray h2, .section-fit.background-black h2 { padding-top: 0; color: #fff; } /* --------------------------------------- */ /* End Section Fit Background Color Styles */ /* --------------------------------------- */ /* ========================================================================== # BACKGROUND COLORS ========================================================================== */ .background-black { color: #fff; background-color: #000; } .background-black a:focus { outline-color: #fc0; } .background-white { color: #000; background-color: #fff; } .background-khaki { color: #000; background-color: #beb69f; } .background-gold, .background-yellow, .background-gold:visited, .background-yellow:visited, .background-gold:active, .background-yellow:active { color: #000; background-color: #fc0; } .background-smoke-gray, .background-light-gray { color: #000; background-color: #ececec; } .background-medium-gray { background-color: #b5b5b5; } .background-gray { background-color: #8a8b8c; } .background-dark-gray { color: #fff; background-color: #3d3d3d; } .background-blue { background-color: #00bfd5; } .background-dark-blue { color: #fff; background-color: #008197; } .background-orange { background-color: #ff4611; } .background-green { background-color: #6ca438; } .background-light-green { background-color: #c1cd23; } .background-purple { color: #fff; background-color: #a42277; } .background-pink { background-color: #ed255c; } /* -- End Background Colors -- */