/* -------------------------------------------------- ----------------------------------------------------- BASE STYLES FOR U-M SCHOOL OF PUBLIC HEALTH WEBSITE ----------------------------------------------------- -------------------------------------------------- */ /* -------------------- ----------------------- STYLE SHEET IMPORTS ----------------------- -------------------- */ @import url("/_resources/styles/normalize.css"); @import url("/_resources/styles/foundation.css"); @import url("/_resources/fontawesome/css/all.min.css"); @import url("/_resources/styles/infographics.css"); @import url("/_resources/styles/contact-form.css"); /* SPECIAL FONTS */ /* ROBOTO font-family: 'Roboto', serif; */ @import url(//fonts.googleapis.com/css?family=Roboto:400,500,500italic,700,700italic,400italic,300italic,300); /* ROBOTO SLAB font-family: 'Roboto Slab', serif; */ @import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,300,700,100); /* ROBOTO CONDENSED font-family: 'Roboto Condensed', sans-serif; */ @import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300); .show-for-sr { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } /* 2020 fonts */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; src: local("Barlow Regular"), local("Barlow-Regular"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-regular.woff2") format("woff2"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-regular.woff") format("woff"); } @font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; src: local("Barlow Italic"), local("Barlow-Italic"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-italic.woff2") format("woff2"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-italic.woff") format("woff"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; src: local("Barlow Medium"), local("Barlow-Medium"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-500.woff2") format("woff2"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-500.woff") format("woff"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; src: local("Barlow Bold"), local("Barlow-Bold"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-700.woff2") format("woff2"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-700.woff") format("woff"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; src: local("Barlow ExtraBold"), local("Barlow-ExtraBold"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-800.woff2") format("woff2"), url("/_resources/styles/fonts/barlow/barlow-v4-latin-800.woff") format("woff"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; src: local("Barlow Semi Condensed Regular"), local("BarlowSemiCondensed-Regular"), url("/_resources/styles/fonts/barlow/barlow-semi-condensed-v5-latin-regular.woff2") format("woff2"), url("/_resources/styles/fonts/barlow/barlow-semi-condensed-v5-latin-regular.woff") format("woff"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; src: local("Barlow Semi Condensed SemiBold"), local("BarlowSemiCondensed-SemiBold"), url("/_resources/styles/fonts/barlow/barlow-semi-condensed-v5-latin-600.woff2") format("woff2"), url("/_resources/styles/fonts/barlow/barlow-semi-condensed-v5-latin-600.woff") format("woff"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800; src: local("Barlow Semi Condensed ExtraBold"), local("BarlowSemiCondensed-ExtraBold"), url("/_resources/styles/fonts/barlow/barlow-semi-condensed-v5-latin-800.woff2") format("woff2"), url("/_resources/styles/fonts/barlow/barlow-semi-condensed-v5-latin-800.woff") format("woff"); } /* nunito-sans-regular - latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; src: url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-regular.svg#NunitoSans') format('svg'); /* Legacy iOS */ } /* nunito-sans-italic - latin */ @font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; src: url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Nunito Sans Italic'), local('NunitoSans-Italic'), url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-italic.svg#NunitoSans') format('svg'); /* Legacy iOS */ } /* nunito-sans-600 - latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; src: url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-600.eot'); /* IE9 Compat Modes */ src: local('Nunito Sans SemiBold'), local('NunitoSans-SemiBold'), url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-600.woff') format('woff'), /* Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-600.svg#NunitoSans') format('svg'); /* Legacy iOS */ } /* nunito-sans-700 - latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; src: url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-700.eot'); /* IE9 Compat Modes */ src: local('Nunito Sans Bold'), local('NunitoSans-Bold'), url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-700.woff') format('woff'), /* Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-700.svg#NunitoSans') format('svg'); /* Legacy iOS */ } /* nunito-sans-800 - latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; src: url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-800.eot'); /* IE9 Compat Modes */ src: local('Nunito Sans ExtraBold'), local('NunitoSans-ExtraBold'), url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-800.woff') format('woff'), /* Modern Browsers */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('/_resources/styles/fonts/nunito-sans/nunito-sans-v5-latin-800.svg#NunitoSans') format('svg'); /* Legacy iOS */ } /* playfair-display-regular - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; src: url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-700 - latin */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700.woff') format('woff'), /* Modern Browsers */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } /* playfair-display-700italic - latin */ @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 700; src: url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/_resources/styles/fonts/playfair-display/playfair-display-v21-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */ } a, a:hover { transition: all 0.2s ease; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { font-weight: bold; } h2, h3 { color: #00274c; } h3 { font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; } h4 { color: #2F65A7; text-transform: uppercase; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 800; } .h1, .h2, .h3 { font-weight: bold; } .h1, .h2 { font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; } .h1 { font-size: 3rem; font-family: "Playfair Display", serif; text-transform: none; font-weight: bold; } .h2 { font-size: 2.25rem; color: #00274c; font-family: "Playfair Display", serif; text-transform: none; font-weight: bold; } .h3 { font-size: 1.875rem; color: #00274c; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; text-transform: none; font-weight: bold; } .h4 { font-size: 1.5rem; color: #2F65A7; text-transform: uppercase; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 800; } .border-heading { color: #ffcb05; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 600; margin-bottom: 0.125rem; } .border-heading::before { background-color: #00274c; content: ""; display: inline-block; height: 20px; margin-right: 0.5rem; width: 5px; } .large-text { font-size: 1.5rem; } .medium-text { font-size: 1.125rem; } .font-weight-semibold { font-weight: 600; } .lead { font-size: 1.125rem; } .dark { color: #ffffff; } .dark h1, .dark h5, .dark h6, .dark .h1, .dark .h5, .dark .h6 { color: #ffffff; } .dark h4, .dark .h4 { color: #e3e4e6; } .dark h2, .dark h3, .dark .h2, .dark .h3 { color: #ffcb05; } .dark h3.border-heading:before { background-color: #ffffff; } /* -------------------- ----------------------- GENERAL STYLES ----------------------- -------------------- */ body { background-color: #fff; color: #131516; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; } p, li { font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-size:16px !important; } h1, h1.pageTitle { font-size: 3rem; font-family: "Playfair Display", serif; text-transform: none; font-weight: bold; } h2 { font-size: 2.25rem; color: #00274c; font-family: "Playfair Display", serif; text-transform: none; font-weight: bold; } h3 { font-size: 1.875rem; color: #00274c; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; text-transform: none; font-weight: bold; } h4 { font-size: 1.5rem; color: #2F65A7; text-transform: uppercase; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 800; } h5 { font-size:18px; color: #222222; } h6 { font-size:16px; color: #222222; } abbr { font-size: inherit; text-decoration: none; font-weight: inherit; color: inherit; border: none; } a { color: #00274c; } a:hover { color: #00274c; } .clear { clear: both; } .center {text-align:center;} /* ACCESSIBLE HIDE CLASS */ /* making skip link visible on focus per marcom 7/15/19 */ .skip li{ list-style-type: none } .skip a { position: absolute; left: -99999px; top: 30px; } .skip a:focus, #skip a:active { left: 0; z-index:9999; height: auto; margin: 0 auto; font-size: .8em; } .screen-reader-text, .hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } /* .hidden a:link, .hidden a:visited, .hidden a:hover { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } .hidden a:active, .hidden a:focus { position:absolute; top: 5px; left:250px; width:auto; height:auto; font-size: .8em; color:#fff; } */ .dark-grey { /* background-color: #555555; */ background-color: #323131; } #container.light-grey { background-color: #c0c0c0; } .row { margin: 0 auto; max-width: 73em; width: 100%; } .bounce-up .animation-wrapper { opacity: 0; -moz-transition: all 700ms ease-out; -webkit-transition: all 700ms ease-out; -o-transition: all 700ms ease-out; transition: all 700ms ease-out; -moz-transform: translate3d(0px, 200px, 0px); -webkit-transform: translate3d(0px, 200px, 0px); -o-transform: translate(0px, 200px); -ms-transform: translate(0px, 200px); transform: translate3d(0px, 200, 0px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .bounce-up.in-view .animation-wrapper { opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px); } .animation-wrapper { display: block; z-index: 0; position: relative; } /* -------------------- ----------------------- HEADER ----------------------- -------------------- */ a.menuToggle { display: none; } .menuClose{ display: none; } #header { position: relative; } #header #branding { background-color: #00274c; color: #fff; padding: 32px 0 20px; position: relative; z-index: 99; } #header #branding a { color: #fff; } #header ul { list-style: none; margin: 0; } #header-first p img { padding-top: 10px; margin-bottom: -10px; } /* HEADER SECOND */ #header-second { text-align: right; } /* SOCIAL ICONS */ #header-second .social-icons li { display: inline-block; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; background-color: #fff; font-size: 16px; height: 23px; margin: 0 5px; text-align: center; width: 23px; } #header-second .social-icons li:first-child { margin-left: 0; } #header-second .social-icons li:last-child { margin-right: 0; } #header-second .social-icons li:hover { background-color: #ffcb05; } #header #branding #header-second .social-icons li a { color: #00274c; display: block; margin-top: -1px; } #header-second .social-icons li a:focus { color: #00274c; display: block; border:1px solid #ddd; } /* SEARCH BAR */ .gsc-search-box .gsc-search-box .gsc-input .gsc-input-box .gsc-input { box-shadow: none !important; } .gsc-search-box table.gsc-search-box { margin-bottom: 0 !important; } .gsc-input { padding-left: 10px !important; } .gsc-input-box { height: auto !important; } .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 { width: auto !important; height: auto !important; padding: 15px !important; } #search-area .gsc-search-box { display: none !important; } #header-second .search-area form label { display: none; } #header-second .search-area { float: right; margin: 0 0 15px; position: relative; text-align: left; width: 165px; } #header-second .search-area input, #header-second .search-area input[type="text"] { border: solid 1px #ffffff; margin: 0; background-color: #fff; font-size: 12px; color: #003e78; padding: 0 0 0 3px; height: inherit; } #header-second .search-area button { background-color: transparent; color: #000; font-size: 12px; margin: 0; padding: 0; position: absolute; right: 5px; top: 2px; } /* HAMBURGER MENU */ .hamburger-menu h4 { color: #ffffff; font-weight: 400; margin: 0; padding: 5px 10px; cursor: pointer; background-color: #444444; background-color: rgba(68,68,68,.85); display: none; } #main-nav.responsive { margin: 0; } #main-nav.responsive .hamburger-menu h4 { display: block; } .zone-header-menu #wrapper { position: relative; z-index: 99; } /* MAIN NAVIGATION */ #main-nav { background-color: #fff; margin: 0; padding: 0; position: relative; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); } #main-nav ul { font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; font-weight: 400; line-height: 1.5; text-align: center; } #main-nav ul li { display: inline-block; /*float: left;*/ font-size: 16px; } #main-nav ul li a { display: block; color: #555555; padding: 14px 25px; background-color: #fff; } #main-nav ul li a:hover, #main-nav ul li.active a { background-color: #dcdddf; /* removed 3/18 by pattyb after adding COVID-19 Resources to Heights global nav to make it so that nav does not wrap on rollover font-weight: bold;*/ } #main-nav ul li a:focus {border:0 solid #ddd;} #main-nav.responsive ul li { display: block; } /* AUDIENCE NAV */ #audience-nav { background-color: #00274c; background-color: rgba(0,39,76,.8); color: #ffcb0b; position: relative; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; padding: 0; min-width: 180px; display: inline-block; } #audience-nav p { margin-bottom: 0; font-size: 14px; text-transform: uppercase; position: relative; cursor: pointer; float: left; padding: 10px; } #audience-nav i { position: absolute; right: 0; cursor: pointer; padding: 13px; } #audience-nav .fa-minus-circle { display: none; } #audience-nav ul { display: none; margin: 0 40px 0 0; list-style: none; float: left; width: auto; height: 42px; } #audience-nav ul li { font-size: 14px; display: inline-block; text-transform: uppercase; float: left; padding: 10px 0; } #audience-nav ul li a { color: #ffcb0b; display: block; border-left: solid 1px #ffcb0b; } #audience-nav ul li:hover { color: #ffcb0b; background-color: #00274c; } #audience-nav ul li a:focus {border:1px solid #ddd;} #audience-nav li a span { padding: 11px; } #audience-nav li:first-child a { border: none; } /* NEW AUDIENCE NAV */ #audience-nav2 { text-align:right; } #audience-nav2 ul { list-style: none; padding: 0; margin: 0; } #audience-nav2 ul li { display: inline; padding-right: 20px; text-transform: uppercase; } #audience-nav2 ul li:last-child { padding-right: 0; } #header #branding #audience-nav2 ul li a { font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-size: 14px; color: #ffcb05; font-weight:bold; } #audience-nav2 ul li a:hover { color: #fff; } /* -------------------- ----------------------- CONTAINER ----------------------- -------------------- */ #container { max-width: 73em; margin: 0 auto; background-color: #ffffff; } /* #container.grey { background-color: #444444; margin-top:-40px; color:#fff; } */ #container.grey {background-color: #fff; color: #000;} #container.grey h1.featureTitle {color: #024794;} #container.grey p {color: #000;} #container.grey {margin-top:-40px;} .fullWidth { width: 100%; margin-left: auto; margin-right: auto; max-width:100%; } /* -------------------- ----------------------- CUSTOM HOME PAGE ----------------------- -------------------- */ #home { position: relative; } .home #main-content { padding-bottom: 0; } .second-row { padding-top: 70px; } .home h1#home-title { font-size: 48px; line-height: inherit; padding: 40px 0; color: #ffffff; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; /* text-shadow: 5px 7px 20px #2a2a2a; */ } /* HOME SLIDESHOW */ #home .dark-grey #main-content.column { padding: 0; } #main-content .carousel-caption { background-color: #323131; background-color: rgba(50,49,49,.6); bottom: 0; color: #fff; font-size: 20px; padding: 10px 20px 20px 100px; position: absolute; width: 100%; text-transform: italic; } #main-content .carousel-caption h2, #main-content .carousel-caption h2 { font-size: 36px; text-transform: normal; color: #fff; margin-bottom: 0; width:67%; font-weight: 500; } #main-content .carousel-caption p{ color: #fff; text-transform: normal; font-size: 20px; margin-bottom: 0; text-transform: uppercase; } #main-content .carousel-caption a{ text-decoration: none; color: #fff; } .owl-theme .owl-nav [class*="owl-"] { border-radius: 100% !important; color: #555555 !important; display: block; margin: 5px; padding: 4px 7px; position: absolute; top: 42%; width: 50px; height: 50px; background-color: #fff !important; background-color: rgba(255,255,255,.9) !important; font-size: 30px !important; } .owl-controls .owl-nav .owl-next { right: 1%; } .owl-controls .owl-nav .owl-next .fa.fa-chevron-right { margin-right: -5px; } .owl-controls .owl-nav .owl-prev .fa.fa-chevron-left { margin-left: -5px; } .owl-controls > .owl-nav > .owl-prev { left: 1%; } .owl-theme .owl-nav { margin-top: 0 !important; } /* INFOGRAPHICS */ .home #home-infographics img { margin: 30px; width: 23%; } #home h2.title { color: #00274c; font-size: 18px; font-weight: bold; text-transform: uppercase; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; } /* INTRO TEXT */ .home #intro-text { background-color: #ffffff; padding: 130px 40px 40px 40px; margin-top: -13%; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; color: #555555; } .home #intro-text p { font-size: 18px; line-height: 30px; } .home #intro-text a.call-to-action { font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; font-weight: 300; color: #ffffff; background-color: #777777; display: block; margin: 0 auto; padding: 10px; width: 280px; text-align: left; text-decoration: none; font-size: 16px; border: solid 1px #b6b6b6; } .home #intro-text a.call-to-action:hover { background-color: #000000; } .home #intro-text a.call-to-action:focus { background-color: #000000; } .home #intro-text a.call-to-action i { float: right; } #home #container.light-grey { padding: 60px 0; } .explore-apply-give { background-color: #fff; border: 1px solid #d3d5d6; float: right; margin-bottom: -185px; margin-left: 25px; margin-right: 30px; max-width: 320px; padding: 0; position: relative; right: 0; top: -255px; z-index: 999999; } #home .explore-apply-give h2.title { background-color: #ffcb05; margin: 0; padding: 20px; text-align: center; } .explore-content { padding: 10px 20px; text-align: center; font-family: "Playfair Display", serif; font-size: 16px; } .explore-content:after { content: ""; display: block; margin: 0 auto; width: 50%; border-bottom: 1px solid #ffcb05; } .explore-content:nth-child(4):after { display: none; } .explore-content a { color: #555555; } #home .explore-apply-give .explore-content a h3.title { font-size: 18px; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; text-transform: uppercase; } #home .video-text p, #home .spotlight-text p { color: #555555; font-size: 14px; } #home .video-title, #home .spotlight-title { font-size: 14px; color: #555555; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; font-weight: bold; margin-top: 15px; } #home .video-text p.video-title, #home .spotlight-text p.spotlight-title { margin-bottom: 5px; } #home .spotlight-text a { color: #B85C00; font-style: italic; } /* HOME EVENTS LIST */ .events .event { margin-bottom: 20px; } .postcard-left, .postcard-right { clear: both; display: table; margin-bottom: 15px; position: relative; } #home .yellow .events .event-date { padding: 10px; /* changed from color:#fff 9/27/19 by PB for color contrast accessibility fix */ color: #00274c; line-height: 34px; width: 80px; } .postcard-left > div, .postcard-right > div { display: table-cell; position: relative; } .events .event-date .event-month { display: block; text-align: center; text-transform: uppercase; font-size: 18px; } .events .event-date .event-day { display: block; text-align: center; font-size: 50px; font-weight: 300; } .events .event-text { color: #555555; font-size: 16px; line-height: 20px; position: relative; top: -10px; vertical-align: bottom; } .events .event-text a, .events .event-text a:hover, .events .event-text a:focus { color: #555555; } #home .yellow { background-color: #ffcb05; padding: 70px 0; } .events .event-text a:after { content: "\f0da"; font-family: "Font Awesome\ 5 Pro" !important; font-weight: 900; font-size: 16px; color: #B85900; padding-left: 7px; position: absolute; bottom: -1px; } .yellow .more-events { float: right; } .yellow .more-events a, .yellow .more-events a:hover, .yellow .more-events a:focus { color: #00274c; text-transform: uppercase; font-size: 14px; font-weight: bold; padding-right: 30px; } .yellow .more-events a:after { content: "\f0da"; font-family: "Font Awesome\ 5 Pro" !important; font-weight: 900; font-size: 16px; color: #B85900; padding-left: 7px; position: absolute; bottom: -1px; } /* PUBLIC HEALTH AND COME TO MICHIGAN */ #public-health { background-color: #666666; } #come-to-michigan { background-color: #003e78; } #public-health, #come-to-michigan { padding: 40px; } #public-health ul, #come-to-michigan ul { list-style: none; margin: 0; } #public-health h2.title, #come-to-michigan h2.title { color: #ffcb0b; font-weight: 400; text-transform: uppercase; margin: 0; } #public-health h3.subTitle, #come-to-michigan h3.subTitle { color: #ffffff; text-transform: uppercase; margin: 0 0 20px 0; font-size: 14px; } #public-health .fa-angle-right, #come-to-michigan .fa-angle-right { float: right; } #public-health img, #come-to-michigan img { width: 100%; } /*PUBLIC HEALTH*/ #public-health h3 { font-weight: 400; font-size: 22px; color: #fde47c; } #public-health h2.title { color: #fde47c; } #public-health .public-health-link { padding: 10px; background-color: #003e78; color: #ffffff; text-transform: uppercase; font-size: 14px; font-weight: 300; display: block; margin: 20px auto; text-align: center; width: 200px; } #public-health .public-health-link:hover { background-color: #0b5bb4; } #public-health .public-health-link:focus { background-color: #0b5bb4; } #public-health a:focus {border:1px solid #ffffff;} #public-health .public-health-list { margin-top: 40px; } #public-health .public-health-list li:first-child { border-top: dotted 1px #ffffff; padding-top: 15px; margin-top: 15px; } #public-health .public-health-list li { border-bottom: dotted 1px #ffffff; padding-bottom: 15px; margin-bottom: 15px; position: relative; } #public-health .public-health-list li a:hover span { text-decoration: underline; } #public-health .public-health-list span { color: #ffffff; font-weight: 400; font-size: 18px; width: 92%; margin: 0; display: inline-block; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; } #public-health .public-health-list i { background-color: #414141; color: #8cbfef; border-color: #8cbfef; position: absolute; top: 30%; right: 0; } /*COME TO MICHIGAN*/ #come-to-michigan ul.come-to-michigan-list li { margin-bottom: 20px; background-color: #000000; } #come-to-michigan ul.come-to-michigan-list a { color: #ffffff; } #come-to-michigan ul.come-to-michigan-list a:focus { color: #ffffff; } #come-to-michigan ul.come-to-michigan-list li a:hover img { opacity: .7; } #come-to-michigan ul.come-to-michigan-list p { padding: 10px 20px; text-transform: uppercase; margin: 0; font-size: 20px; } #come-to-michigan ul li.apply-now p { background-color: #ffcb0b; } #come-to-michigan ul li.career-paths p { background-color: #024794; } #come-to-michigan ul li.explore-visit p { background-color: #444444; } /*BOTTOM FEATURE IMAGE*/ #home-bottom-feature .caption { text-align: center; font-size: 18px; line-height: 30px; padding: 40px; margin: 0 60px 20px 60px; } #home-bottom-feature .caption p { margin-bottom: 0; } #home-bottom-feature .caption p a {color:#fff;text-decoration:underline;} #home-bottom-feature .caption p a:hover, #home-bottom-feature .caption p a:focus {text-decoration:underline;} #home-bottom-feature .caption p a:focus {border:1px solid #ddd;} /*HOME GRID*/ .grid { z-index: 5; position: relative; padding-top: 70px; padding-bottom: 70px; } a.grid-item { background-color: #252b2c; opacity: 1; margin:15px; width: 23%; position: relative; overflow: hidden; float: left; } a.grid-item img { display: block; position: relative; } .grid-overlay, a.grid-item img { width: 100%; } .grid-overlay { padding: 16px 32px; position: absolute; text-align: center; height: 100%; top: 0; left: 0; background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(30%,transparent),color-stop(100%,rgba(0,0,0,.8))); background-image: -webkit-linear-gradient(transparent 30%,rgba(0,0,0,.8)); background-image: -moz-linear-gradient(transparent 30%,rgba(0,0,0,.8)); background-image: -o-linear-gradient(transparent 30%,rgba(0,0,0,.8)); background-image: linear-gradient(transparent 30%,rgba(0,0,0,.8)); } .grid-item.with-image .grid-overlay { padding: 25px; z-index: 100; } .vjack:before { content: ""; height: 100%; margin-right: -.25em; display: inline-block; vertical-align: middle; } .grid-item.with-image .grid-overlay .vcenter { vertical-align: bottom; } .grid-item.with-image .grid-rollover .vcenter { vertical-align: middle; } .vbottom, .vcenter, .vjack:before { display: inline-block; } h3.grid-title {font-size:18px !important;} .grid-title, .grid-caption, .grid-icon { text-shadow: 0 0 2px rgba(0, 0, 0, 0.9); } .grid-rollover { background-color: #000; background-color: rgba(0,0,0,.65); padding: 1em 1.5em; position: absolute; height: 100%; width:100%; top: 0; left: 0; text-align: center; z-index: 200; } a.grid-item:nth-child(1) { margin-left: 0; } a.grid-item:nth-child(4) { margin-right: 0; } a.grid-item:nth-child(5) { margin-left: 0; clear: left; } a.grid-item:nth-child(8) { margin-right: 0; } a.grid-item:nth-child(9) { margin-left: 0; clear: left; } a.grid-item:nth-child(12) { margin-right: 0; } a.grid-item .grid-rollover .grid-title { color: #ffcb05; text-transform: uppercase; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-size: 18px; } a.grid-item .grid-rollover p.grid-caption { color: #fff; font-size: 18px; font-family: "Playfair Display", serif; line-height: 24px; margin-bottom: 0; } a.grid-item .grid-overlay .grid-title { display: none; } a.grid-item .grid-overlay p.grid-caption { color: #fff; font-size: 16px; line-height: 20px; margin-bottom: 0; text-align: left; } .grid img { display: block; height: auto; max-width: 100%; width: 100%; -webkit-transition: all 300ms; -moz-transition: all 300ms; transition: all 300ms; max-width: 100%; } .grid .imagecontainer:hover img { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); transform: scale(1.4); } .grid .imagecontainer { overflow: hidden; position: relative; } .grid .imagecontainer:hover .grid-overlay { opacity: 0; } .grid .imagecontainer:hover .contentcontainer { opacity: 1; } .grid .imagecontainer .contentcontainer.open { opacity: 1; } .grid .contentcontainer { color: #fff; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; -webkit-transition: all 300ms; -moz-transition: all 300ms; transition: all 300ms; -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; } /*HOME VIDEO*/ #home .video { background-color: #0c0b0b; } #home .video h2.title { color: #fff; display: block; font-family: "Playfair Display", serif; font-size: 40px; font-weight: normal; left: 0; margin-left: auto; margin-right: auto; position: absolute; text-align: center; text-transform: none; bottom: 200px; width: 100%; z-index: 1; } #home .testimonial { background-color: #e7dfca; padding-top: 70px; padding-bottom: 70px; text-align: center; } #home .testimonial .quote { color: #00274c; font-size: 43px; font-family: "Playfair Display", serif; line-height: 55px; } #home .testimonial .author { color: #555555; font-size: 16px; text-transform: uppercase; } #home .testimonial .title { color: #555555; display: block; font-size: 14px; margin: 0 auto; text-align: center; width: 35%; } /* -------------------- ----------------------- CONTENT ----------------------- -------------------- */ #content { background-color: #ffffff; padding: 60px 0 0 0; } .breadcrumbs { background-color: transparent; border: none; padding: 0; } #main-content .breadcrumbs { list-style-image: none; } .breadcrumbs li:first-child { list-style: none; margin-left: 0; } .breadcrumbs li { font-size: 14px !important; font-weight: 700; color: #767676; list-style-type: disc; margin-left: 30px; } .breadcrumbs li:before, .breadcrumbs li:last-child { display: none; } ul.breadcrumbs li a:focus {border:1px solid #1766B1;} /* -------------------- ----------------------- SIDEBAR NAVIGATION ----------------------- -------------------- */ #sidebar-left { margin-bottom: 40px; } #sidebar-left ul { list-style: none; margin: 0; } #sidebar-left ul ul.sub-menu { } .sidebar-nav ul li:first-child { border-top: solid 1px #6d6f71; } .sidebar-nav ul li { border-bottom: solid 1px #6d6f71; font-size: 14px; font-weight: 500; } .sidebar-nav ul li a { font-weight: 600; } .sidebar-nav ul li a:after { content: "\f0da"; font-family: "Font Awesome\ 5 Pro" !important; font-weight: 900; font-size: 16px; color: #00274c; padding-left: 5px; position: relative; top: 2px; } .sidebar-nav ul li.active a:after { content: "\f0d7"; } .sidebar-nav ul li a { display: block; padding: 10px; } .sidebar-nav ul li a:hover { background-color: #e5e5e5; } .sidebar-nav ul li.active > a { background-color: #e5e5e5; } .sidebar-nav ul li a:focus {border:1px solid #1766B1;} .sidebar-nav ul ul.sub-menu li { border: none; } .sidebar-nav ul ul.sub-menu li a { padding: 5px 0 5px 25px; color: #646668; font-weight: normal; } .sidebar-nav ul ul.sub-menu li:first-child a { padding-top: 10px; } .sidebar-nav ul ul.sub-menu li:last-child a { padding-bottom: 10px; } .sidebar-nav ul ul ul.sub-menu li a { padding-left: 45px; } .sidebar-nav ul li > ul.sub-menu > li a:after{ content: none; } .sidebar-nav ul.sub-menu > li > ul.sub-menu li a:before { content: none; } /* -- SUB-MENU -- .sidebar-nav ul.sub-menu { display: none; }*/ .sidebar-nav ul li.active > ul.sub-menu, .sidebar-nav ul li.ancestor-active > ul.sub-menu { display: block; } /* -------------------- ----------------------- MAIN CONTENT ----------------------- -------------------- */ #main-content { padding-bottom: 40px; } .pageTitle { border-bottom: solid 1px #b3c5d7; text-transform: none; margin-bottom: 40px; } #main-content p { font-size: 14px; line-height: 24px; } #main-content dl { font-size: 14px; line-height: 24px; } #main-content .pageTitle + p, #main-content.audience-page > p, #main-content.department-page > p { font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; /* font-size: 16px; */ /* line-height: 30px; */ /* color: #555555; */ } #main-content a { text-decoration: underline; } /* LISTS */ #main-content ul { /*list-style-image: url('/images/list-style-dot.png');*/ font-size: 14px; line-height: 24px; } #main-content ol { font-size: 14px; line-height: 24px; } /* DROP DOWN Accordions */ /* adding styles to make these h2 and h3 12/3/19 pb */ #main-content .drop-down { margin-bottom: 12px; background-color: #f2f2f3; border: 1px solid #d7d7d7; } #main-content .drop-down h5, #main-content .drop-down h2, #main-content .drop-down h3 { font-size: 14px; font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 600; color: #00274d; cursor: pointer; padding: 10px; margin: 0; background: #f2f2f3 url(/_resources/images/accordion-bg.png) no-repeat scroll right bottom; } #main-content .drop-down .drop-down-content h5, #main-content .drop-down .drop-down-content h2, #main-content .drop-down .drop-down-content h3 { background:none; } #main-content .drop-down h5 i, #main-content .drop-down h2 i, #main-content .drop-down h3 i { font-size: 12px; margin-top: 14px; padding: 0 5px; position: absolute; right: 10px; } #main-content .drop-down .fa-minus { display: none; } #main-content .drop-down p { margin: 10px; } #main-content .drop-down > div { padding: 0 10px 10px 10px; display: none; } /* adding styles to accomodate accordions inside accordions 6/4/19 PB */ #main-content .drop-down .drop-down-content .drop-down { margin-bottom: 12px; background-color: #f2f2f3; border: 1px solid #d7d7d7; } #main-content .drop-down .drop-down-content .drop-down h5, #main-content .drop-down .drop-down-content .drop-down h2 { font-size: 14px; font-weight: 500; color: #00274d; cursor: pointer; padding: 10px; margin: 0; background: #f2f2f3 url(/_resources/images/accordion-bg.png) no-repeat scroll right bottom; } #main-content .drop-down .drop-down-content .drop-down h5 i, #main-content .drop-down .drop-down-content .drop-down h2 i { font-size: 12px; margin-top: 14px; padding: 0 5px; position: absolute; right: 20px; } /* OLD DROP DOWN Accordions */ #main-content .drop-down-old { margin-bottom: 20px; } #main-content .drop-down-old h5 { background-color: #cde0f1; color: #00274c; padding: 5px; cursor: pointer; } #main-content .drop-down-old h5 i { padding: 0 5px; } #main-content .drop-down-old .fa-minus { display: none; } #main-content .drop-down-old p { margin: 10px; } #main-content .drop-down-old > div { padding: 0 10px 10px 10px; display: none; } /* Experimental DROP DOWNs WITh Images */ #main-content .drop-down-image { margin-bottom: 20px; } #main-content .drop-down-image h5 { border: 1px solid #ccc; background-color: #fff; color: #000; padding: 5px; cursor: pointer; min-height: 110px; } #main-content .drop-down-image h5 img { float:left; padding-right:5px; } #main-content .drop-down-image h5 i { float:left; padding: 0 5px; vertical-align:bottom; } #main-content .drop-down-image .fa-minus { float:left; display: none; vertical-align:bottom; } #main-content .drop-down-image p { margin: 10px; } #main-content .drop-down-image > div { padding: 0 10px 10px 10px; display: none; clear:both; } /* BLOCKQUOTE */ #main-content blockquote p { color: #00274c; font-size: 16px; line-height: 24px; margin-bottom: 10px; } #main-content blockquote { background-color: #eef1f8; border: none; font-size: 14px; line-height: 20px; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; padding-bottom: 1px; color: #00274c; } #main-content blockquote ul { margin-bottom: 10px; list-style: none; } #main-content blockquote li:before { content: '\f0da'; font-family: "Font Awesome\ 5 Pro" !important; font-weight: 900; float: left; margin-left: -1.5em; color: #587abc; } /* PULLQUOTE */ .pullquote-long { background-color:#fefefe; border-left:5px solid #ffcb05; padding-left: 25px; padding-top:0 ; margin-top:-20px; margin-left:20px; margin-right:20px; margin-bottom:50px; } .pullquote-long p { font-size: 16px !important; line-height: 26px !important; } .pullquote-short { background-color:#fefefe; border-left:5px solid #ffcb05; padding-left: 25px; padding-top:0 ; margin-top:-20px; margin-left:20px; margin-right:20px; margin-bottom:50px; } .pullquote-short p { font-size: 22px !important; line-height: 32px !important; } .fa-quote-left { color: #ffcb05 !important; font-size:1.5em; margin-left:20px; } /* TABLE */ table { border: none; width: 100%; } table thead { background-color: #024794; } table tbody tr th { background-color: #024794; } table thead tr th, table tbody tr th, table tbody tr th label { color: #ffffff; border: solid 1px #ffffff; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; padding: 10px 15px; vertical-align:top; } table thead tr th a, table tbody tr th a { color: #ffffff; } table tbody tr td { border: solid 1px #ffffff; font-size: 14px; padding: 10px 15px; vertical-align:top; } table tbody tr td li {font-size: 12px;} table tbody tr th { vertical-align:top; } table tr:nth-of-type(even) { background-color: #dfdfdf; } /* -------------------- ----------------------- STORIES SECTION ----------------------- -------------------- */ #main-content .degrees { font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif; font-size: 18px; color: #124E74; font-weight:bold; } /* -------------------- ----------------------- AUDIENCE PAGE ----------------------- -------------------- */ /* new dept landing page feature image styles 6/20/18 */ #feature-wrap { display: block; width:100%; background-color: #323131 !important; } #feature-wrap .feature-image { /* margin-top: -150px; */ position: relative; width: 1168px; height: 600px; background-size: cover; background-repeat: no-repeat; background-position: center; margin-left: auto; margin-right: auto; } /* end */ .feature-image { margin-top: -150px; position: relative; width: 100%; height: 548px; background-size: cover; background-repeat: no-repeat; background-position: bottom center; } .department-pageTitle-wrapper, .audience-pageTitle-wrapper { background-color: #333333; background-color: rgba(51,51,51,.75); bottom: 0; position: absolute; width: 100%; } .feature-image div.row { } .audience-pageTitle, .department-pageTitle { padding: 10px; } .department-pageTitle, .audience-pageTitle { padding-top: 5px; } .department-pageTitle .breadcrumbs, .audience-pageTitle .breadcrumbs { margin-bottom: 5px; display: none; } .department-pageTitle .breadcrumbs li, .audience-pageTitle .breadcrumbs li { color: #ffffff; list-style-image: none; list-style-type: disc; } .department-pageTitle .pageTitle, .audience-pageTitle .pageTitle { color: #fefefe; border: medium none; margin: 0; font-size: 50px; font-family: "Playfair Display", serif; } /* CONTENT BLOCKS/LINKS */ .audience-block { border-top: solid 1px #000000; padding-top: 40px; margin-top: 40px; } #main-content .audience-links ul { margin: 0; list-style: none; } .audience-links li { margin-bottom: 20px; font-weight: 500; text-transform: none; font-size: 16px; } .audience-links li:before { display: none; } #main-content .audience-links li a { background-color: #fff; border: solid 1px #ffcb05; display: block; padding: 10px; text-decoration: none; color: #6d6f71; } #main-content .audience-links li a:hover { background-color: #f8f8f8; color: #024794; } .audience-links li p { margin: 0; } .audience-links li h3 { margin-top: 0; color: #00274d; font-family: "Roboto", sans-serif; font-size: 16px; } .audience-links li p .fa { float: right; background-color: #fff; color: #ffcb05; border: 1px solid #ffcb05; } .audience-links [class*="column"] + [class*="column"]:last-child { float: left; } .fa-angle-right { color: #ffffff; border: solid 1px #ffffff; width: 23px; height: 23px; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; text-align: center; line-height: 21px; font-size: 20px; padding-left: 2px; } /* -------------------- ----------------------- SECONDARY AND TERTIARY PAGES ----------------------- -------------------- */ .large-image { position: relative; margin: 60px 0; } .large-image img { width: 100%; } .small-image { position: relative; float: left; margin: 0 10px 10px 10px; } .small-image img { /* removed 10-17-18 to fix small images being resized larger min-width: 350px; */ } .clickable-image { position: relative; float: left; display: inline-block; margin: 10px 10px 5px 0; } .clickable-image:last-child { clear: right; } .clickable-image .caption { margin: 0 0.625em; padding: 10px 10px 1px 10px; color: #ffffff; background-color: #333333; background-color: rgba(51,51,51,.85); font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; } .large-image .caption, .small-image .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; color: #ffffff; background-color: #333333; background-color: rgba(51,51,51,.85); font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; } .small-image .caption, .clickable-image .caption { margin: 0; } .large-image .caption p { margin-bottom: 10px } .clickable-image .caption p a:link,.clickable-image .caption p a:visited, .clickable-image .caption p a:hover, .clickable-image .caption p a:focus { color: #ffffff; font-family: "Roboto", sans-serif; font-weight: 700; font-size: 16px; text-decoration:none !important; } .clickable-image .caption p a:hover, .clickable-image .caption p a:focus { color: #ffcb05 !important; text-decoration:none !important; } #main-content .large-image p.caption-title, #main-content .small-image p.caption-title { color: #fff; font-weight: 700; cursor: pointer; margin-bottom: 0; font-family: "Roboto", sans-serif; font-size: 16px; } .large-image .caption .fa, .small-image .caption .fa { color: #ffcb05; font-size: 24px; padding-right: 10px; } .large-image .caption .fa-angle-down, .small-image .caption .fa-angle-down { display: none; } .large-image .caption .fa-caret-down, .small-image .caption .fa-caret-down { display: none; } .large-image .caption .slide-up, .small-image .caption .slide-up { display: none; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; padding: 0 24px; } .large-image .caption .slide-up a, .small-image .caption .slide-up a {color:#fff;} #main-content .audience-promo-links, .audience-promo-links { margin: 0 0 20px 0; list-style: none; } #main-content .audience-promo-links li a, .audience-promo-links li a { display: block; color: #6d6f71; background-color: #fff; margin: 10px 0; padding: 10px; text-decoration: none; border: 1px solid #ffcb05; border-top: 7px solid #ffcb05; min-height: 150px; } .audience-promo-links li a:hover, #main-content .audience-promo-links li a:hover { background-color: #fcda5b; } .audience-promo-links li h3 { margin-top: 0; color: #00274d; font-family: "Roboto", sans-serif; font-size: 16px; } #main-content .audience-promo-links li p { font-size: 14px; line-height: 18px; margin-bottom: 8px; } .audience-promo-links .fa-angle-right { color: #ffcb05; border: solid 1px #ffcb05; width: 23px; height: 23px; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; text-align: center; line-height: 21px; font-size: 20px; padding-left: 2px; margin: 0 auto; display: block; margin-top: 20px; } .audience-promo-links li a:hover .fa-angle-right { background-color: #fff; } #main-content .promo-links { margin: 20px 0 40px 0; /*float: left;*/ } #main-content .promo-links ul { margin: 0; list-style: none; } .promo-links li:before { display: none; } .promo-links li.column:last-child { float: left; } .promo-links li a { background-color: #fff; border: 1px solid #ffcb05; display: block; margin: 10px 0; font-weight: 400; padding: 10px; color: #6d6f71; } .promo-links li a:hover { background-color: #fcda5b; } #main-content .promo-links li a { text-decoration: none; } #main-content .promo-links h3 { margin-top: 0; color: #00274d; font-family: "Roboto", sans-serif; font-size: 16px; } #main-content .promo-links p { font-size: 14px; } .promo-links li span { min-height: 25px; display: inline-block; width: 85%; } .promo-links li .fa { float: right; } .promo-links .fa-angle-right { color: #ffcb05; border: solid 1px #ffcb05; width: 23px; height: 23px; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; text-align: center; line-height: 21px; font-size: 20px; padding-left: 2px; } .promo-links li a:hover .fa-angle-right { background-color: #fff; } /* -------------------- ----------------------- BOTTOM FEATURE ----------------------- -------------------- */ #feature-story { border: solid 1px #d7d7d7; margin: 20px 8px; padding: 15px; } #feature-story .image { float: right; margin-left: 15px; } #feature-story h1.featureTitle { font-size: 18px; text-transform: uppercase; color: #00274d; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; font-weight: 700; } #feature-story.department h1.featureTitle { color: #00274d; } #container.grey #feature-story p { font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; color: #6d6f71; margin: 0 0 10px 0; font-size: 14px; } #feature-story a:link {color:#8A4300;} #feature-story a:hover {color:#140AF4;} #feature-story a:visited {color:#140AF4;} #feature-story li {color:#fff;font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif;font-size: 14px;} #feature-story .read-full-story { display: inline-block; font-style: italic; padding: 0 0 10px; } #feature-story .read-full-story .fa-angle-right { color: #140AF4; border: solid 1px #140AF4; margin-left: 10px; float: right; } /* -------------------- ----------------------- FACULTY PAGES ----------------------- -------------------- */ #main-content .faculty-info ul { list-style-image: none; list-style: none; margin: 0 0 15px 0; } .faculty-bio, .faculty-contact { padding-left: 0; } .faculty-info ul li { font-size: 16px; line-height: 18px; } .faculty-contact li:first-child { border-top: solid 1px #dcdcdc; padding-top: 10px; } .faculty-contact li { border-bottom: solid 1px #dcdcdc; padding-bottom: 10px; margin-bottom: 10px; } .faculty-contact li i { color: #024794; font-size: 14px; width: 22px; } h3.staff-additional {margin-top:20px;} /* -------------------- ----------------------- DEPARTMENT PAGE ----------------------- -------------------- */ #main-content.department-page { padding-bottom: 0; } .department-page .page-infographic img { float: right; margin: 10px; } .new-dept-pageTitle { position: relative; margin-top: -150px; width: 100%; height: 100px; } new-dept-pageTitle h1.PageTitle { color: #fefefe; border: medium none; margin: 0; font-size: 50px; font-family: "Playfair Display", serif; } /* -------------------- ----------------------- NEWS ----------------------- -------------------- */ /* NEWS ARCHIVE */ #feature-story .column { padding: 0; } #feature-story.news-feature, #feature-story.story-feature { background-color: #f5f5f5; border-color: #d7d7d7; padding: 15px; margin-top: 0; } #feature-story.news-feature .featureTitle, #feature-story.story-feature .featureTitle { font-size: 18px; text-transform: uppercase; } #feature-story.news-feature p, #feature-story.story-feature p { color: #000000; margin-bottom: 10px; } #feature-story.news-feature img { float: right; margin-left: 10px; } #feature-story.news-feature .read-full-story, #feature-story.story-feature .read-full-story { text-decoration: none; } .news-item .fa-angle-right, .single-news .next-story .fa-angle-right, .story-item .fa-angle-right, .single-story .next-story .fa-angle-right { color: #024794; border: solid 1px #024794; width: 20px; height: 20px; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; text-align: center; line-height: 19px; font-size: 18px; padding-left: 1px; margin-left: 10px; } #main-content #news-archive-list, #main-content .news-archive-list, #main-content #story-archive-list { margin: 0; list-style: none; list-style-image: none; } #news-archive-list .news-item:first-child, .news-archive-list .news-item:first-child, #story-archive-list .story-item:first-child { border-top: solid 1px #024794; padding-top: 15px; margin-top: 15px; } #news-archive-list .news-item, .news-archive-list .news-item, #story-archive-list .story-item { border-bottom: solid 1px #00274c; padding-bottom: 15px; margin-bottom: 15px; } #story-archive-list .story-item a:link { color:#0827A0; } #story-archive-list .story-item a:hover, #story-archive-list .story-item a:focus { color: #140AF4; } #story-archive-list a.read-full-story:link { color:#BFECF8; } #story-archive-list a.read-full-story:hover { background-color: #222222; } #story-archive-list .read-full-story .fa-angle-right { color: #ffcb0b; border: solid 1px #ffcb0b; margin-left: 10px; float: right; } #news-archive-list .news-item p, #story-archive-list .story-item p { margin-bottom: 0; } /* NEWS SINGLE */ #news-feature-image { margin-bottom: 20px; } .single-news h2.news-post-title, .single-story h2.story-post-title { margin-bottom: 0; } .single-news h4.news-sub-title, .single-story h4.story-sub-title { margin: 0 0 60px 0; font-size: 18px; } .single-news .next-story, .single-story .next-story { margin: 40px 0 20px 0; } #main-content.single-news .next-story a, #main-content.single-story .next-story a { background-color: #e9e9e9; padding: 10px; text-decoration: none; text-transform: uppercase; font-size: 16px; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; } #main-content.single-news .next-story a:hover, #main-content.single-story .next-story a:hover { color: #024794; background-color: #f2f2f2; } /* -------------------- ----------------------- STORIES ----------------------- -------------------- */ #story-archive-list .story-item { float: left; } #story-archive-list .story-item h4 { margin-top: 0; } #story-archive-list .story-item h6 { margin: 15px 0 0 0; } #story-feature-image.large-image { margin: 20px 0; } #story-feature-image .caption { margin: 0; } .single-story h4.story-sub-title { border-bottom: solid 1px #b3c5d7; padding-bottom: 20px; margin-bottom: 20px; } .single-story .story-bio h5 { margin: 0; } .single-story hr { border-top: dotted #024794 1px; } /* -------------------- ----------------------- TIMELINE ----------------------- -------------------- */ #timeline { padding: 0; } #timeline li:before { display: none !important; } #timelinejs { margin-bottom: 30px; } #timelinejs div.timeline_dual div.timeline_element_left { clear: both; } #timelinejs .timeline_element .timeline_element_box { border-radius: 0; } #timelinejs .timeline_element .timeline_title { font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; text-align: center; font-size: 24px; font-weight: 700; color: #000; margin: 0; } #timelinejs .timeline_element .timeline_title .timeline_title_date { float: none; } #timelinejs .timeline_element:nth-child(3n-1) .timeline_title { background-color: #ebebeb; } #timelinejs .timeline_element .timeline_title, #timelinejs .timeline_element:nth-child(3n+0) .timeline_title { background-color: #cddbe8; } #timelinejs .timeline_element:nth-child(3n+1) .timeline_title { background-color: #fbf2d0; } /* -------------------- ----------------------- RESPONSIVE YOUTUBE EMBED does not work ----------------------- --------------------*/ .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* --------------------*/ .video-testimonials { text-align: center; } .form li strong { display: block; } .form label[for="PHONE_AREA"] { display: inline-block; font-weight: normal; } .form #PHONE_AREA { width: 18%; display: inline-block; margin-right: 3px; } .form #PHONE { display: inline-block; width: 77%; float: right; } label {font-weight:bold;} /* -------------------- ----------------------- RESEARCH STUFF ----------------------- -------------------- */ .research-projects .drop-down-content h6 { margin: 15px 0 0 0; } /* -------------------- ----------------------- FOOTER ----------------------- -------------------- */ #footer { background-color: #00274c; color: #fff !important; } #footer ul { list-style: none; margin: 0; } /* FOOTER TOP */ #footer-top { background-color: #dcdddf; border-bottom: 10px solid #ffcb05; } #footer-top h2 { font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; font-weight: bold; text-transform: uppercase; font-size: 14px !important; color: #00274c; } #footer-top h2 a { color: #00274c; } #footer-top #footer-menu { text-align: left; padding: 70px 0; } #footer-top #footer-menu li { font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; font-size: 14px; margin-bottom: 10px; } #footer-top #footer-menu li a { color: #555555; } #footer-top #footer-menu li a:hover { color: #00274c; } #footer a:focus {border:0 solid #ddd;} /* FOOTER SOCIAL ICONS */ #footer-top .social-icons { margin-top: 30px; line-height: 28px; } #footer-top .social-icons li { display: inline-block; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; background-color: #5a5a5b; font-size: 16px; height: 28px; margin-right: 5px; text-align: center; width: 28px; } #footer-top .social-icons li:last-child { margin-right: 0; } #footer-top .social-icons li:hover { background-color: #00274c; } #footer-top #footer-menu .social-icons li a { color: #dcdddf; display: block; } /* FOOTER CONTENT */ #footer-content { padding: 70px 0; } #footer-content a { color: #ffcb0b; text-decoration: underline; } #footer-content .fa { color: #ffcb0b; } /* FOOTER FIRST */ #footer-content #footer-first p { float: left; margin: 0 30px 0 0; } #footer-content #footer-first ul { font-size: 16px; line-height: 22px; margin-top: 10px; } #footer-content #footer-first ul li.phone { margin-top: 25px; font-weight: bold; } #footer-content #footer-first ul.copyright li:first-child { border: none; padding: 0; margin: 0; } #footer-content #footer-first ul.copyright li { float: left; border-left: solid 1px #ffffff; padding-left: 10px; margin-left: 10px; } /* FOOTER SECOND */ #footer-content #footer-second { text-align: right; } /* FOOTER BOTTOM */ #footer-bottom { background-color: #002042; color: #fff; text-align: center; font-size: 14px; padding: 20px 0; } #footer-bottom ul { list-style: none; margin: 0; } #footer-bottom ul li { display: inline-block; color: #fff; } #footer-bottom ul li::after { content: "|"; color: #ffcb05; padding: 0 20px; } #footer-bottom ul li:last-child:after { content: " "; } #footer-bottom a { font-size: 14px; color: #fff !important; } #footer-bottom a:hover { color: #fff !important; } /* -------------------- ----------------------- TIMELINE ----------------------- -------------------- */ #timeline { padding: 0; } #timeline li:before { display: none !important; } #timelinejs { margin-bottom: 30px; } #timelinejs div.timeline_dual div.timeline_element_left { clear: both; } #timelinejs .timeline_element .timeline_element_box { border-radius: 0; } #timelinejs .timeline_element .timeline_title { font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; text-align: center; font-size: 24px; font-weight: 700; color: #000; margin: 0; } #timelinejs .timeline_element .timeline_title .timeline_title_date { float: none; } #timelinejs .timeline_element:nth-child(3n-1) .timeline_title { background-color: #ebebeb; } #timelinejs .timeline_element .timeline_title, #timelinejs .timeline_element:nth-child(3n+0) .timeline_title { background-color: #cddbe8; } #timelinejs .timeline_element:nth-child(3n+1) .timeline_title { background-color: #fbf2d0; } /* TIMELINE */ #timeline { padding: 0; } #timeline li:before { display: none !important; } #timelinejs { margin-bottom: 30px; } #timelinejs div.timeline_dual div.timeline_element_left { clear: both; } #timelinejs .timeline_element .timeline_element_box { border-radius: 0; } #timelinejs .timeline_element .timeline_title { font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; text-align: center; font-size: 24px; font-weight: 700; color: #000; margin: 0; } #timelinejs .timeline_element .timeline_title .timeline_title_date { float: none; } #timelinejs .timeline_element:nth-child(3n-1) .timeline_title { background-color: #ebebeb; } #timelinejs .timeline_element .timeline_title, #timelinejs .timeline_element:nth-child(3n+0) .timeline_title { background-color: #cddbe8; } #timelinejs .timeline_element:nth-child(3n+1) .timeline_title { background-color: #fbf2d0; } /* infographics bar snippet styles added 7/27/18 by PB */ .gray { /*background-color:#EDEDED;*/ background-color:#fff !important; padding:10px; } .gray .animation-wrapper { /*background-color:#EDEDED;*/ background-color:#fff !important; padding-top: 20px !important; } .gray ul.infographics li { width: 22% !important; } .gray ul.infographics li:last-child { margin-right: 0 !important; } .gray .icon {color:#00264A;font-size: 50px !important;} .gray .source { font-size:16px !important; margin-top:10px; } .gray .category { font-size:30px !important; margin-top:10px; } .gray ul.infographics li a {text-decoration: none !important;} .gray ul.infographics li a:focus, ul.infographics li a:hover { color:#004B8D !important; } .gray ul.infographics li a:focus .icon, ul.infographics li a:hover .icon { color:#004B8D !important; } /* drop-left two column snippet styles added 12/19/19 */ .drop-left {float:right;} .drop-left ul.infographics.right li {text-align:center;} /* styles for blue bar with four images for precision health data science site 8/8/18 */ #blue-bar-four-images { width:100%; background-color: #49709A; color: #fff; margin-bottom:20px; } #blue-bar-four-images h2 { padding:20px; margin:0; color: #fff; } #blue-bar-four-images ul { list-style-type: none; width:100%; padding:0; margin:-30px 0 0 0; } #blue-bar-four-images ul li { float: left; background-color: #49709A; padding:30px 10px; width:25%; } #blue-bar-four-images ul li img { background-color: #fff; padding:10px; } /* centered div entered for new program pages 11/21/19 */ .centered{width: 90%; margin-left: auto; margin-right: auto;} /* display:none style for itemprop spans and divs in events http://schema.org/Place*/ .itemprop {display:none;} /* styles for shout outs 2/18/20 PB */ .shout-out { min-height:252px; background: #ffcb05 url('/the-heights/images/shoutout_comp.png') no-repeat; padding-top:100px; padding-right:0; padding-bottom: 0; padding-left: 190px; } .shout-out p, .shout-out h2 { color:#00274C; padding-left:180px; } /* -------------------- ----------------------- FIREFOX STYLES ----------------------- -------------------- @-moz-document url-prefix() { .feature-image { float: left; margin-bottom: 40px; } }*/ /* -------------------- ----------------------- MEDIA QUERIES ----------------------- -------------------- */ /* Large desktops and laptops */ @media (min-width: 1200px) { /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; background-size: contain; background-position: center; margin:auto; } /* end */ .siteNavigation { display: block !important; } } /* EXTRA LARGE */ @media only screen and (max-width: 1199px) { /*body { border: 2px solid #99273a; }*/ /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; height:500px; background-size: contain; background-position: center; margin:auto; } /* end */ .siteNavigation { display: block !important; } .feature-image { margin-top: -150px; } #feature-story p { margin-bottom: 20px; } #feature-story .read-full-story { margin-bottom: 20px; width: 300px; } .row { max-width: 70em; } #main-nav ul li a { padding: 14px 20px; } .explore-apply-give { max-width: 250px; } .explore-apply-give .explore-content p { font-size: 0.85rem; } .second-row .column.large-4.medium-6.small-12 { width: 33%; } a.grid-item { width: 22%; margin: 10px; } a.grid-item:nth-child(1) { margin-left: 25px; } a.grid-item:nth-child(5) { margin-left: 25px; } #home .testimonial .quote { padding: 0 20px; } } /* drop-left two column snippet styles added 12/19/19 */ @media only screen and (max-width: 1036px) { .drop-left {width:100%;float:right;} } /* centered div entered for new program pages 11/21/19 */ @media only screen and (max-width: 1000px){ .centered{width: 50%; margin-left: auto; margin-right: auto;} } @media only screen and (max-width: 960px) { /*body { border: 2px solid #0eb1dd; }*/ /* styles for blue bar with four images for precision health data science site 8/8/18 */ #blue-bar-four-images ul li { float:none; width:100%; text-align:center; } /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; background-size: contain; background-position: center; margin:auto; height: 472px; } /* end */ .siteNavigation { display: block !important; } .home #main-content { padding: 0; } /*CUSTOM HOME PAGE*/ #home-bottom-feature { padding: 0; } #home-bottom-feature.large-image { margin: 0; } #home-bottom-feature .caption { margin: 0; padding: 20px 10px; position: inherit; background-color: #333333; } #home #container.light-grey, #home #home-second { padding: 0; } #main-nav ul li a { padding: 14px 15px; } #audience-nav { min-width: 153px; margin-top: 15px; } #audience-nav p, #audience-nav ul li { font-size: 12px; line-height: 14px } #audience-nav ul { height: 34px; margin-right: 25px; } #audience-nav i { padding: 10px 7px; font-size: 14px; } #audience-nav li a span { padding: 9px 15px; } .second-row .column.large-4.medium-6.small-12 { width: 31%; } #main-content .carousel-caption h2 { font-size: 60px; width:100%; } #main-content .carousel-caption p { font-size: 18px; } a.grid-item:nth-child(4) { clear: left; margin-left: 25px; } a.grid-item:nth-child(5) { clear: none; margin-left: 20px; } /* THIS IS WHERE WE DROP OFF THE LAST THREE TILES ON MOBILE. Removed 1/17/18 per Beth a.grid-item:nth-child(7), a.grid-item:nth-child(8), a.grid-item:nth-child(9) { display: none; } Removing quote from mobile 1/17/18 per Beth*/ .testimonial {display: none;} a.grid-item { width: 30%;} .gray ul.infographics li:nth-child(3) {clear: left;} } /* LARGE: 900PX */ @media only screen and (max-width: 900px){ /*body { border: 2px solid #cb6741; }*/ /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; background-size: contain; background-position: center; margin:auto; height: 426px; } /* end */ .siteNavigation { display: block !important; } /* MAIN NAV */ #main-nav { padding: 0; margin: 0; } #main-nav ul li a { padding: 14px 10px; } /* FEATURED STORY */ #feature-story { padding: 40px 20px; border: none; margin: 0; } #feature-story.news-feature, #feature-story.story-feature { margin-bottom: 20px; } /*HOME PAGE*/ .home #home-infographics img { margin: 15px; } .second-row .column.large-4.medium-6.small-12 { width: 50%; } .explore-apply-give { max-width: 320px; top: 0; } .explore-apply-give .explore-content p { font-size: 1rem; } .second-row .column.large-4:nth-child(3) { float: left; } .second-row { padding-top: 40px; } a.grid-item:nth-child(3) { clear: left; margin-left: 25px; } a.grid-item:nth-child(4) { clear: none; margin-left: 10px; } a.grid-item:nth-child(5) { clear: none; margin-left: 20px; } /* THIS IS WHERE WE DROP OFF THE LAST THREE TILES ON MOBILE. Removed 1/17/18 per Beth a.grid-item:nth-child(5), a.grid-item:nth-child(6), a.grid-item:nth-child(7), a.grid-item:nth-child(8), a.grid-item:nth-child(9) { display: none; } Removing quote from mobile 1/17/18 per Beth*/ .testimonial {display: none;} a.grid-item { width: 45%; } .grid .contentcontainer { opacity: 1; } .grid-overlay { opacity: 0; } .grid-rollover { background-color: rgba(0, 0, 0, 0.65); } } /* MEDIUM/LARGE: 860PX */ @media only screen and (max-width: 860px) { /*body { border: 2px solid #f4ef42; }*/ /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; background-size: contain; background-position: center; margin:auto; height: 380px; } /* end */ .siteNavigation { display: block !important; } #home { margin-top: -55px; } .feature-image { margin-top: -150px } /*HOME PAGE*/ #audience-nav { width: 100%; margin: 0; text-align: center; background-color: #00274c; } #audience-nav p, #audience-nav i { display: none !important; } #audience-nav ul { display: block; width: auto; margin: 0; height: auto; float: none; } #audience-nav ul li { font-size: 14px; line-height: inherit; padding: 0; float: none; } #audience-nav ul li a { padding: 10px; border: none; } #audience-nav ul li a:hover { background-color: #003e78; } #audience-nav ul li a span { padding: 0; } #main-nav ul li a { padding: 14px 9px; } #header-second .social-icons li { margin: 0 4px; } #footer-top .social-icons li { margin-right: 0; } #main-content .carousel-caption h2 { font-size: 50px; width:100%; } #main-content .carousel-caption p { font-size: 18px; } #main-content .carousel-caption { font-size: 18px; } .explore-apply-give { max-width: 320px; top: 0; } #home .row.second-row .column.large-4:nth-child(3){ float: left !important; } .explore-apply-give .explore-content p { font-size: 1rem; } .second-row { padding-top: 20px; } #home .testimonial .quote { padding: 0 50px; } #home .testimonial .title { text-align: center; width: 55%; } a.grid-item:nth-child(5), a.grid-item:nth-child(7) { clear: left; margin-left: 0; } } @media only screen and (max-width: 770px) { /*body { border: 2px solid #41d861; }*/ /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; background-size: contain; background-position: center; margin:auto; height: 313px; } /* end */ .siteNavigation { display: block !important; } /*HOME PAGE*/ #home { margin-top: -42px; } .home #intro-text { padding: 110px 20px 20px 20px; } #main-nav ul li a { padding: 14px 6px; } #main-nav ul li { font-size: 14px; } #main-nav ul li:first-child a { padding: 14px 6px 14px 0; } #main-nav ul li:last-child a { padding: 14px 0 14px 6px; } #audience-nav2 ul li { padding-right: 10px; } #header-second .social-icons li { font-size: 14px; height: 20px; margin: 0 2px; width: 20px; } #main-content .carousel-caption h2 { font-size: 40px; width:100%; } #main-content .carousel-caption p { font-size: 16px; } #main-content .carousel-caption { font-size: 16px; padding: 5px 20px 10px 100px; } #footer-top .social-icons li { height: 22px; margin-top: -1px; margin-right: 0; width: 22px; } #footer-top h2 {font-size: 12px !important;} #footer-top #footer-menu .social-icons li a { margin-top: -3px; } #footer-top .social-icons { margin-top: 15px; } #footer #footer-top #footer-menu .row .columns.small-6 { margin-top: 20px; } #footer-top #footer-menu { padding: 30px 0; } #header-second .row .columns.large-6.medium-6.hide-for-small-only { display: none !important; } #header-second .row .columns.large-6.medium-6 { width: 100%; } #header-first.columns.large-7.medium-6.small-12 { width: 58.3333%; } #header-second.columns.large-5.medium-6.small-12 { width: 41.6667%; } #audience-nav2 ul li { padding-right: 25px; } .explore-apply-give { float: none; margin: 0 0 10px; max-width: inherit; position: inherit; top: 0; border: medium none; } .second-row .column.large-4.medium-6.small-12 { width: 100%; } .explore-apply-give .explore-content p { display: none; } .explore-content { padding: 5px 20px; } #home .explore-apply-give .explore-content a h3.title { margin-top: 0; } .explore-content::after { width: 100%; } .second-row { padding-top: 0; } .explore-content:nth-child(4)::after { display: block; } .feature-image { margin-top: -150px; } } /* styles for drop-left two col snippet added 12/19/19 */ @media only screen and (max-width: 700px) { .drop-left {width:100%;float:right;} } /* SMALL: 640PX */ @media only screen and (max-width: 640px) { /* styles for shout out added 02/18/20 */ .shout-out { padding-top:280px; padding-right:0; padding-bottom: 50px; padding-left: 10px; } .shout-out p, .shout-out h2 { padding-left: 10px; } /* body { border: 2px solid #9443c9; }*/ /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; background-size: contain; background-position: center; margin:auto; height: 313px; } /* end */ .siteNavigation { width: 310px; position: fixed; top: 0; right: -390px; z-index: 10000; display: none; overflow: hidden; height: 100%; overflow-x: hidden; overflow-y: scroll; background-color: #00274c; } .cover { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #4e5758; background: rgba(78,87,88,0.8); z-index: 5; } #header #branding { z-index: 4; } #header #branding a.menuToggle { display: block; color: #ffcb05 !important; background-color: transparent; text-transform: uppercase; text-align: right; text-decoration: none; padding: 0 .8em; border: none; font-size: 12px; font-weight: 500; float: right; } #header #branding a.menuToggle:hover { color: #fff; } #header #branding .menuToggle:before { display: block; content: "\f0c9"; font-family: "Font Awesome\ 5 Pro" !important; font-weight: 900; font-size: 3.25em; line-height: .9em; position: static; } .menuClose { display: block; color: #ffcb05; text-transform: uppercase; text-decoration: none; text-align: right; padding: 1.47143em 65px 1.47143em 15px; position: relative; } a.menuClose { color:#ffcb05; } a.menuClose:hover, a.menuClose:focus { color:#fff; } .menuClose:after { display: block; content: "\f00d"; font-family: "Font Awesome\ 5 Pro" !important; font-weight: 900; font-size: 2em; line-height: 1.22222em; position: absolute; top: 15px; right: 30px; } h1 { font-size: 32px; } h2 { font-size: 28px; } .breadcrumbs li { padding: 5px 0; } .pageTitle { margin-bottom: 20px; } /* HEADER */ #header-first { text-align: left; } #header-second { margin-top: 20px; text-align: center; } #header-first.columns.large-7.medium-6.small-12 { width: 100%; } #header-second.columns.large-5.medium-6.small-12 { width: 100%; } #header-second.columns.large-5.medium-6.small-12 .row .columns.small-12 { width: 50%; float: right; } #header-second.columns.large-5.medium-6.small-12 .row .columns.large-6.medium-6.small-12 { width: 50%; position: absolute; top: 5px; } #audience-nav2 { margin-left: 5px; margin-top: -5px; text-align: left; } #header-second #search-area { margin: 0 10px; } #main-nav ul { text-align: left; } #main-nav ul li { display: block; } #main-nav ul li a, #main-nav ul li:first-child a, #main-nav ul li:last-child a { padding: 14px 25px; } #main-nav ul.header-menu li:nth-child(odd) { background-color: #fff; } #main-nav ul.header-menu li:nth-child(even) { background-color: #e7e8e8; } #main-nav ul li { font-size: 16px; } #main-content .carousel-caption { position: inherit; padding: 10px 20px 20px; } .owl-theme .owl-nav [class*="owl-"] { top: 30%; } /* FOOTER */ #footer-content #footer-first, #footer-content #footer-second { text-align: center; } #footer-content #footer-first { margin-bottom: 20px; } #footer-content #footer-first p { float: none; margin: 0; } #footer-content #footer-first ul.copyright li { float: none; border: none; margin: 5px 0 0 0; padding: 0; } #footer-top .social-icons li { margin-right: 0; } #footer #footer-top #footer-menu .row { padding-left: 20px; } #footer-content { padding: 20px 0; } /* CONTENT */ #main-content { padding-bottom: 20px; } #content { padding-top: 20px; } #sidebar-left { margin-bottom: 30px; } /* FEATURED IMAGE */ .feature-image { margin: -180px 0 1.25em; } .department-pageTitle .pageTitle, .audience-pageTitle .pageTitle { font-size: 40px; } .department-pageTitle-wrapper, .audience-pageTitle-wrapper { bottom: 70px; margin-bottom: -70px; } .audience-pageTitle, .department-pageTitle { position: inherit; bottom: inherit; } .large-image { margin: 0 0 40px 0; } .small-image { margin: 0 0 20px 0; float: none; width: 100%; } .small-image img { width: 100%; } /* PROMO LINKS */ #main-content .audience-promo-links, .audience-promo-links { margin-bottom: 40px; } #main-content .promo-links { margin-bottom: 20px; } /* FEATURED STORY */ #feature-story { padding: 20px 0; } #feature-story .read-full-story { width: 100%; } #you-tube iframe { width: 100%; } .home #home-infographics img { margin: 5px; width: 30% } .home #home-title { font-size: 38px; line-height: 38px; padding: 20px 0 60px 0; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; text-shadow: 5px 7px 20px #2a2a2a; } .home #intro-text p { font-size: 16px; line-height: 28px; } #public-health, #come-to-michigan { padding: 20px; height: auto !important; } #home { margin-top: 0; } #container.home { padding-top: 0; background-size: 100%; background-position: inherit; } .home #home-title { font-size: 30px; line-height: 30px; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; text-shadow: 5px 7px 20px #2a2a2a; } .hide-for-small-only { display: none !important; } a.grid-item:nth-child(1), a.grid-item:nth-child(3) { margin-left: 15px; } #home .testimonial .quote { font-size: 30px; line-height: 35px; } #home .testimonial .quote::before { font-size: 40px; } #home .testimonial .quote::after { font-size: 40px; } #home .testimonial .title { width: 75%; } } /* styles for drop-left two col snippet added 12/19/19 */ @media only screen and (max-width: 600px) { .drop-left {width:100%;float:right;} .stat-left{float:left;} } /* EXTRA SMALL: 500PX */ @media only screen and (max-width: 500px) { /*body { border: 2px solid #ef4bcc; }*/ /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; background-size: contain; background-position: center; margin:auto; height: 240px; } /* end */ h1.pageTitle {font-size:30px !important;} #audience-nav ul li { display: block; } .department-page .page-infographic { text-align: center; } .department-page .page-infographic img { float: none; } #home { margin-top: 0; } .home #intro-text { padding-top: 80px; } .form #PHONE { width: 74%; } a.menuToggle { font-size: 10px; } #audience-nav2 ul li { padding-right: 5px; } #audience-nav2 { margin-left: 0; margin-top: -8px; } #header-second #search-area { width: 140px; } .grid { padding-bottom: 1px; padding-top: 1px; } a.grid-item:nth-child(1), a.grid-item:nth-child(2), a.grid-item:nth-child(3) { margin-left: 0; } a.grid-item { margin: 1px; width: 100%; } a.grid-item:nth-child(4) { clear: none; margin-left: 0; } #home .testimonial .quote { padding: 0 20px; } #home .testimonial .quote::before { font-size: 30px; } *, *::before, *::after { box-sizing: border-box; } #home .testimonial .quote::after { font-size: 30px; bottom: 120px; } #home .testimonial .title { width: 100%; } #home .testimonial { padding-bottom: 40px; padding-top: 40px; } } /* EXTRA TINY: 400PX */ @media only screen and (max-width: 400px) { /*body { border: 2px solid #9743c9; }*/ /* new dept landing page feature image styles 6/20/18 */ #feature-wrap .feature-image { width:100%; background-size: contain; background-position: center; margin:auto; height: 190px; } /* end */ h1.pageTitle {font-size:24px !important;} #home .testimonial .quote::before { left: -5px; } .home #home-infographics img { margin: 2px; width: 30% } #main-content .carousel-caption h2 { font-size: 30px; } #main-content .carousel-caption { font-size: 14px; } #main-content .carousel-caption p { font-size: 14px; line-height: 20px; } .owl-theme .owl-nav [class*="owl-"] { height: 32px; width: 32px; font-size: 18px !important; top: 25%; } .owl-controls .owl-nav .owl-next .fa.fa-chevron-right { margin-right: -3px; } .owl-controls .owl-nav .owl-prev .fa.fa-chevron-left { margin-left: -3px; } #footer #footer-menu ul.group-1, #footer #footer-menu ul.group-2, #footer #footer-menu ul.group-3, #footer #footer-menu ul.group-4 { /* removed per David Washington and Patty Bradley 9-20-19 display: none;*/ } #footer #footer-menu h3 { cursor: pointer; } #footer #footer-menu h3:after { content: "\f0da"; font-family: "Font Awesome\ 5 Pro" !important; font-weight: 900; font-size: 1.25em; line-height: 1.22222em; margin: 1px 0 0 5px; } #footer #footer-menu h3.open:after { content: "\f0d7"; } #footer #footer-top #footer-menu .row .columns.small-6 { width: 100%; margin-top: 20px; } #footer-top #footer-menu { padding: 20px 0; } #footer-top .social-icons { margin-top: 30px; } #footer-top .social-icons li { background-color: #5a5a5b; border-radius: 100%; display: inline-block; height: 34px; text-align: center; width: 34px; margin-right: 15px; } #footer-top #footer-menu .social-icons li a { margin-top: 3px; } #footer-top #footer-menu .social-icons li { font-size: 20px; } #footer-bottom a { font-size: 12px; color: #fff; } #footer-bottom ul li { font-size: 12px; } #footer-bottom ul li::after { padding: 0 10px; } } /* styles for drop-left two col snippet added 12/19/19 */ @media only screen and (max-width: 500px) { .drop-left {width:100%;float:right;} } @media only screen and (max-width: 400px) { .drop-left {width:100%;float:right;} .stat-left{float:left;} } /** CALL TO ACTION BUTTON **/ a.cta-button, .cta-button { position: relative; float: right; padding: 10px 60px 10px 20px; margin-left: 10px; background: #00274C; color: #ffcb05 !important; text-decoration: none; text-transform: uppercase; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif; } .cta-button .fa { position: absolute; right: 20px; top: 12px; border: 2px solid #ffcb05; border-radius: 12px; padding: 2px 5px 2px 7px; font-weight: bold; } .cta-button:hover { background: #246ab8; } /* new buttons 12/2/19 per Khalid */ a.button { padding: 10px 20px; margin: 10px 20px 10px 0; text-align: center; text-decoration:none !important; font-size: 16px; font-weight: bold; text-transform: uppercase; background-color: #fff; color: #00274C; border-radius: 5px !important; cursor: hand; } a.button:link, a.button:visited { border: 2px solid #00274C; } a.button:hover, a.button:focus, a.button:active { border: 2px solid #ffcb05; } /*table of contents*/ ul.toc { margin-bottom:4em; margin-left: 0; } ul.toc li { float:left; list-style:none; margin: 12px 10px !important; } ul.toc a { padding:8px !important; text-align: center; text-decoration:none !important; font-size: 16px; font-weight: bold; text-transform: uppercase; background-color: #fff; color: #00274C; border-radius: 5px !important; cursor: hand; } ul.toc a:link, ul.toc a:visited { border: 2px solid #00274C; } ul.toc a:hover, ul.toc a:active, ul.toc a:focus { border: 2px solid #ffcb05; } /* contact styles */ #main-content .contact { padding: 0; } #main-content .contact li { position: relative; padding: 15px 0 15px 82px; border-bottom: 1px solid #ccc; list-style-image:none; list-style:none; } #main-content .contact li:before { display: none !important; } #main-content .contact li:after { content: ' '; display: table; clear: both; } #main-content .contact li img { float: left; margin-right: 10px; margin-left: -82px; width: 72px; } /** INFO BOXES **/ .infoboxes { padding: 0; margin: 0 -10px 20px -10px; clear: both; font-size: 13px; list-style:none; } .infoboxes > li { margin: 0 !important; float: left; width: 50%; padding: 10px; list-style-image: none; } .infoboxes > li:before { display: none !important; } .infoboxes > li > div { padding: 25px; } .infoboxes > li h4 { text-align: center; margin: 0 !important; padding-bottom: 20px; font-size: 24px !important; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif !important; min-height: 3.2em; border-bottom: 1px dotted; line-height: 1.2 !important; } .infoboxes > li h5 { text-transform: uppercase; margin-top: 15px; } .infoboxes > li ul li { list-style:disc; } .infoboxes > li ul li:before { color: #00274c !important; } .infoboxes > li.grey > div { background-color: #acacac; } .infoboxes > li.lightblue > div { background-color: #9bb6cf; } .infoboxes > li.blue > div { background-color: #3e93d6; } .infoboxes > li.yellow > div { background-color: #ffcb0b; } /* Table of contents */ ul.toc { margin-bottom:4em; margin-left: 0; } ul.toc li { float:left; list-style:none; padding-right:3px; font-size:1.2em; } .nowrap {white-space: nowrap;} /* styles for SHARETHIS */ .sharethis { float:right; font-size:.8em; } .sharethis a {text-decoration:none;} .required {color:#E60000;} ul.form, ul.form li ul, ul.form li ul {list-style:none;} ul.form li {padding:5px 0;list-style-image:none !important; } ul.form-float {list-style:none !important;} ul.form-float li {float:left;padding-right:1em;padding-left:1em;width:100px;line-height:1.5em;white-space: nowrap !important;} /** RECRUITING EVENT CALENDAR **/ #eventlist * { box-sizing: border-box; } #eventlist > h2 { text-transform: uppercase; } #eventlist > ul + h2 { padding-top: 10px; } #eventlist ul li h4 { margin-top: 15px 0; } #eventlist > ul { padding-left: 0; list-style:none; list-style-image:none; } #eventlist > ul > li { border-bottom: 1px solid #ccc; clear: both; line-height: 1.2; min-height: 110px; padding: 15px 10px 10px 100px; position: relative; } #eventlist > ul > li:before { display: none; } #eventlist > ul > li > span { display: block; margin-bottom: 5px; } #eventlist > ul > li .date { background: transparent none repeat scroll 0 0; border-radius: 30px; color: #2F65A7; display: block; font-size: 20px; font-weight: 400; height: 100px; left: -20px; line-height: 1; padding: 0 10px; position: absolute; text-align: center; text-transform: uppercase; width: 100px; } #eventlist a { margin-top: 20px; } #eventlist > ul > li .date .day { display: block; font-size: 66px; letter-spacing: -7px; margin-left: -7px; } #eventlist > ul > li .link a { text-transform: uppercase; color: #00274c; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-decoration: none; } #eventlist > ul > li .link a .fa { font-size: 1.3em; } #eventlist > ul > li .link a:hover { text-decoration: underline; } #eventlist ul li img {max-height:70px;float:right;} ul.months { margin-bottom:4em; margin-left: 0; } ul.months li { float:left; list-style:none; padding-right:3px; font-size:1.2em; } ul.months a { text-decoration:none !important; display:block; margin:0 3px 5px 3px; padding:3px 5px; color:#00274C !important; background: #fff; border: 1px solid grey; } ul.months a:link, ul.months a:visited { text-decoration:none; white-space:nowrap; line-height:1.7em; background-color:#fff; } ul.months a:hover, ul.months a:active, ul.months a:focus { white-space:nowrap; text-decoration:none; line-height:1.7em; background-color:#ddd; } .flyer img {max-width:856px;} /* style for ICS informatics home page */ .informatics-contact { background: url(/computing/elearning/images/Staff-Collage.png) no-repeat !important; color:#336 !important; width:600px !important; height:338px !important; text-align:center !important; padding-top:215px !important; } /* styles for ICS user forms page */ ul#forms { list-style:none; } ul#forms li { float:left; display:block; width:200px; line-height:1.2em; border:1px solid #336; padding:1em 2em; margin:2em; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#f0f0f0)); background: -webkit-linear-gradient(top, #ddd, #f0f0f0); background: -moz-linear-gradient(top, #ddd, #f0f0f0); background: -ms-linear-gradient(top, #ddd, #f0f0f0); background: -o-linear-gradient(top, #ddd, #f0f0f0); -webkit-border-radius: 12px; border-radius: 12px; -moz-border-radius: 12px; -webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px; -moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px; box-shadow: rgba(0,0,0, .5) 3px 3px 6px; } ul#forms li a { font-size:1.2em; color:#336; font-weight:bold; } ul#forms li a:link, ul#forms li a:visited, ul#forms li a:active { text-decoration:none;} ul#forms li a:hover, ul#forms li a:focus { text-decoration:underline;} /* style for ICS example text */ .example { font-family:"Courier New", Courier, mono; border: dotted 1px #000; width:80%; } /* added 8/12/15 to get rid of underlined links on photo captions */ p.flex-caption a {text-decoration:none !important;} /* styles for 2014 Findings - The Price of Public Health 10/2015 */ #main-content table.cost { width: auto; } #main-content table.cost tr:first-child th { background: #fff; color: #000; } #main-content table.cost tr:nth-child(odd) td { background: #fff; } table.cost {border-bottom:2px solid #000;} table.cost caption { text-align:left; font-weight:bold; font-family:Helvetica, Arial, sans-serif; color:#000; font-size:1.3em; } table.cost th { vertical-align:top; text-align:right; background-color:#fff !important; width:180px; padding-right:15px; } table.cost td { vertical-align:top; background-color:#fff !important; } table.cost tr.shaded td, table.cost tr.shaded th { background-color:#f6f1be !important; } table.cost th.blue, table.cost td.blue, table.cost td.blue a:link {text-decoration:none; color:#366fcf !important;} table.cost td.blue a:focus, table.cost td.blue a:hover {text-decoration:underline; color:#366fcf !important;} table.cost th.red, table.cost td.red, table.cost td.red a:link {text-decoration:none; color:#e74207 !important;} table.cost td.red a:focus, table.cost td.red a:hover {text-decoration:underline; color:#e74207 !important;} table.cost td.blue a:visited, table.cost td.red a:visited {color:#000 !important;} table.cost th.blue, table.cost td.blue {border-top:dashed 2px #000;} table.cost td.blue, table.cost th.blue {background-color:#00274C;color:#fff;} /* alternating background colors for list items from Intranet */ .right-side .inner-box { width:100%;} h3.quick { background-color:#003366; color:#FFCE00; text-transform: uppercase; padding:5px 0; margin:0; text-align: center; } ul.quick {margin:0;} ul.quick li:nth-child(odd) { display: block; border-bottom:1px solid #ddd; background-color: #FFCE00; padding: 5px 0 5px 10px; font-weight: 700; } ul.quick li:nth-child(even) { display: block; border-bottom:1px solid #ddd; padding: 5px 0 5px 10px; font-weight: 700; } ul.quick li a:link, ul.quick li a:visited {text-decoration: none !important;} ul.quick li a:hover, ul.quick li a:focus {text-decoration: underline !important;} ul.public-health-list {list-style:none !important;} ul.public-health-list li { display:block; float:left; width:200px; height:200px; margin:0 50px 100px 50px; } ul.public-health-list li:nth-child(1) {background: url(/the-heights/images/headline1.png) no-repeat center center;} ul.public-health-list li:nth-child(2) {background: url(/the-heights/images/headline2.png) no-repeat center center;} ul.public-health-list li:nth-child(3) {background: url(/the-heights/images/headline3.png) no-repeat center center;} ul.public-health-list li {line-height: 1em !important;} ul.public-health-list li a { position: relative !important; top: 210px !important; } ul.public-health-list li a:link, ul.public-health-list li a:visited {text-decoration:none !important;} ul.public-health-list li a:hover, ul.public-health-list li a:focus {text-decoration:none !important;} .ou-testimonial { background-color: #e7dfca; padding-top: 70px; padding-bottom: 50px; margin-bottom: 50px; text-align: center; } .ou-testimonial .quote { color: #00274c; font-size: 43px !important; font-family: "Playfair Display", serif !important; line-height: 55px !important; } .ou-testimonial .author { color: #555555; font-size: 16px; text-transform: uppercase; } .ou-testimonial .title { color: #555555; display: block; font-size: 14px; margin: 0 auto; text-align: center; width: 35%; } /* Need to Know inner block for component 1/8/20 */ .need-to-know { width:100%; background-color:#E4E5E6; padding: 20px 40px 20px 40px; margin-top:20px; margin-bottom:20px; color:#000; } .need-to-know a:link, .need-to-know li { color:#23008C; } /* updates */ .grid-item.with-image .grid-rollover .vcenter { width: 99%; } .vjack:before { width: 0; }