#wsu-header { background-color: #026937; font-family: Roboto, Arial, helvetica, sans-serif; font-size: .95em; letter-spacing: .03em; color: #fff; border-bottom: 1px #307050 solid; } #wsu-header > .page-width { position: relative; } #wsu-header a:link { color: #e4dec7; /* @todo WCAG AAA */ text-decoration: none; } #wsu-header a:visited { color: #e4dec7; /* @todo WCAG AAA */ text-decoration: none; } /* == LOGO ================================================================== */ #wsu-header-home { position: relative; width: 400px; min-height: 59px; padding-top: 10px; } #wsu-header-logo { display: block; box-sizing: content-box; height: 25px; border-top: 11px solid transparent; border-bottom: 8px solid transparent; background-image: url("images/wordmark.png"); background-image: none, url("images/wordmark.svg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom; background-position: center bottom, center bottom; } .wsu-footer__logo > a { float: left; } #wsu-header-logo:hover { -webkit-filter: drop-shadow(0 0 2px #e4dec7); filter: drop-shadow(0 0 2px #e4dec7); } #wsu-header-logo:focus { -webkit-filter: drop-shadow(0 0 2px #e4dec7); filter: drop-shadow(0 0 2px #e4dec7); } /* IE9/10 thinks it supports SVG in Compat View but doesn't */ .no-svg #wsu-header-logo { background-image: url("images/wordmark.png"); } /* Firefox < 4 doesn't support SVG background image but doesn't disregard it */ #wsu-header-logo, x:-moz-any-link { background-image: url("images/wordmark.png"); } #wsu-header-cobrand { margin-bottom: 10px; padding-top: 5px; padding-left: 4px; min-height: 27px; border-top: 1px solid rgb(228, 222, 199); text-transform: uppercase; font-size: 1.15em; white-space: pre; } a#wsu-header-cobrand { display: block; color: #fff; } a#wsu-header-cobrand:hover { text-shadow: 0 0 3px #e4dec7; } a#wsu-header-cobrand:focus { text-shadow: 0 0 3px #e4dec7; } /* == MOBILE-ESQUE THEME FOR MENUS ========================================== */ .wsu-button { display: inline-block; padding: 0 0.75em; border: 1px #ccc groove; border-radius: 5px; background-color: #ccc; background: linear-gradient(to bottom, #eee, #ccc, #ddd); color: #222; vertical-align: middle; line-height: 2em; font-family: Roboto, Arial, helvetica, sans-serif; font-size: 1em; font-weight: normal!important; } a.wsu-button:hover { color: #222; } .button--toggle[aria-pressed=true] { background: #888; background: rgba(128, 128, 128, 0.6); border-style: solid; } .wsu-button i { font-size: 1.5em; vertical-align: middle; } /** * The .element-focusable class extends the .element-invisible class to allow * the element to be focusable when navigated to via the keyboard. */ button:hover .element-invisible.element-focusable, button:focus .element-invisible.element-focusable { position: static !important; clip: auto; overflow: visible; height: auto; } .button--toggle[aria-pressed=true] .collapsed-only, .button--toggle[aria-pressed=false] .expanded-only, .js .menu[data-menustate="closed"] { display: none; } .menu--theme-mobile { line-height: 1.5; text-transform: uppercase; background: #2a2e2f; } .menu.menu--theme-mobile, .menu.menu--theme-mobile li { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .menu--theme-mobile li { box-sizing: border-box; border-top: 1px #383c3d solid; border-right: 1px #1e2a28 solid; border-bottom: 2px #1e2a28 solid; border-left: 1px #383c3d solid; } .menu--theme-mobile a:link, .menu--theme-mobile a:visited { display: block; padding: 0.5em; color: #fff; font-weight: 700; text-decoration: none; } .menu--vertical.menu--theme-mobile a:link, .menu--vertical.menu--theme-mobile a:visited { padding: 0.5em 5% 0.5em 25%; text-indent: 2em; } .menu--theme-mobile.menu--no-icons a:link, .menu--theme-mobile.menu--no-icons a:visited { padding-left: 5%; } .menu--theme-mobile a:hover, .menu--theme-mobile a:focus { background: #4a4e4f; } .menu--theme-mobile i { text-align: center; color: #f2bc60; } .menu--vertical.menu--theme-mobile i { text-indent: -2em; font-size: 1.4em; } .menu.menu--theme-strip ul, .menu.menu--theme-strip li { display: inline; display: inline-block; *display: inline; /* IE7 */ margin: 0; list-style-type: none; list-style-image: none; } .menu--theme-strip a { padding: 0.5em 0.75em; border-radius: 6px; vertical-align: middle; } .menu.menu--theme-strip li.l_apply > a:link { background: #063d1c; } .menu--theme-strip a:hover { color: #063d1c; background: #b7c7bd; } .menu--theme-strip a:focus { color: #063d1c; background: #b7c7bd; } .menu.menu--theme-strip li.l_apply > a:hover, .menu.menu--theme-strip li.l_apply > a:focus { background: #b7c7bd; } .menu--theme-strip i { font-size: 1.2em; } .menu--grid { overflow: hidden; text-align: center; } .menu.menu--grid li { float: left!important; width: 25%!important; } .menu.menu--grid i { display: block; font-size: 2.5em; } /* == QUICK LINKS =========================================================== */ #wsu-header-links-mobile-toggle { background: none; color: #fff; border: none; line-height: 40px; text-transform: uppercase; font-weight: bold!important; } #wsu-header-links { display: none; position: absolute; top: 20px; right: 160px; width: auto; padding: 0; line-height: 30px; color: #f6fbf9; font-weight: bold; text-transform: uppercase; } #wsu-header-links-mobile { position: absolute; top: 40px; right: 0; width: 180px; z-index: 100; } #wsu-header-links a:hover { color: #063d1c; } #wsu-header-links a:focus { color: #063d1c; } /* == SEARCH FORM BLOCK ===================================================== */ .wsu-header-search-form { position: absolute; z-index: 10; top: 20px; right: 60px; width: 150px; } .wsu-header-search-form > h2 { display: none; } .wsu-header-search-form .form-item { margin: 0; } .wsu-header-search-form .fa-search { color: #ccc; font-size: 18px; right: 8px; position: absolute; top: 0; z-index: 10; line-height: 31px; pointer-events: none; } .wsu-header-search-form .form-item-search-block-form input { width: 100%; max-width: none; height: 30px; /* Redundant in Drupal themes but keep for static sites */ box-sizing: border-box; border-radius: 15px; border: none; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 17px; padding: 3px 35px 3px 15px; background-image: none; } /* Because of CSS rules on invalid selectors, yes, these must be duplicated */ .wsu-header-search-form input:-moz-placeholder { font-style: italic; color: #aaa; opacity: 1; } .wsu-header-search-form input::-moz-placeholder { font-style: italic; color: #aaa; opacity: 1; } .wsu-header-search-form input::-webkit-input-placeholder { font-style: italic; color: #aaa; opacity: 1; } .wsu-header-search-form input::-ms-input-placeholder { font-style: italic; color: #aaa; opacity: 1; } .wsu-header-search-form .form-submit { position: absolute; top: 0; right: 0; width: 35px; margin: 0; padding: 0; line-height: 30px; text-indent: 40px; background: #063d1c; border: none; border-radius: 0 15px 15px 0; overflow: hidden; } #wsu-header-search-form .form-submit:hover { background: #026937; } #wsu-header-search-form .form-submit:focus { background: #026937; } #wsu-header-search-form .form-submit:focus { outline: 2px #cea052 solid; } .mobile-only { display: none!important; } #wsu-header-links-mobile-toggle { line-height: 1; position: absolute; top: 20px; right: 0; padding: 0 0.25em; } #wsu-header-links-mobile-toggle i { display: block; } #wsu-header-links-mobile { top: 55px; } /* @todo Use better polyfill for this */ /* == FOOTER ================================================================ */ #wsu-footer-outer { text-align: center; overflow: hidden; /* Prevent margin collapse for mega footer and button links */ } #wsu-footer-outer * { box-sizing: border-box; } #wsu-footer-outer li { list-style: none; line-height: 1.4; } #wsu-footer-mega-menu { text-align: left; margin-top: 20px; } #wsu-footer-mega-menu-map { width: 250px; margin: 0 auto; } .footer-map { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; } .footer-map__buttons { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; text-transform: uppercase; font-weight: bold; font-size: 0.9em; line-height: 1.2; margin-top: 5px; min-height: 50px; } .footer-map__button { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex: 1 1 0; -ms-flex: 1 1 0px; flex: 1 1 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 3px; } .footer-map__button + .footer-map__button { margin-left: 5px; } #wsu-footer-mega-menu > div { display: table; /* Pad the mega footer to line it up with the 5 buttons */ padding: 0 2%; } #wsu-footer-mega-menu > div > div { display: table-cell; vertical-align: top; } .wsu-footer__links { padding: 20px 0; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; } .wsu-footer__links a { display: block; max-width: 250px; margin: 10px auto; padding: 10px; border-radius: 5px; } #wsu-footer-legal ul { padding: 0; } .wsu-footer__legal a { display: inline-block; padding: 10px 18px; font-size: .85em; } .wsu-footer__legal a:link, .wsu-footer__legal a:visited { color: inherit; } .wsu-footer__legal a:hover { background-color: #026937; outline: none; } .wsu-footer__legal a:focus { background-color: #026937; outline: none; } #wsu-footer-outer { background: #f2f1eb; font-family: Roboto, Arial, helvetica, sans-serif; } a.footer-map__button:link { background-color: #026937; color: #fff; border: 1px transparent solid; } a.footer-map__button:visited { background-color: #026937; color: #fff; border: 1px transparent solid; } .wsu-footer__links a:link { background-color: #026937; color: #fff; border: 1px transparent solid; } .wsu-footer__links a:visited { background-color: #026937; color: #fff; border: 1px transparent solid; } a.footer-map__button:focus { background: #f2f1eb; color: #026937; border-color: #026937; } a.footer-map__button:hover { background: #f2f1eb; color: #026937; border-color: #026937; } .wsu-footer__links a:focus { background: #f2f1eb; color: #026937; border-color: #026937; } .wsu-footer__links a:hover { background: #f2f1eb; color: #026937; border-color: #026937; } #wsu-footer { color: #fff; background-color: #026937; padding: 25px 0; } #wsu-footer a:link, #wsu-footer a:visited { color: #fff; } #wsu-footer a:hover, #wsu-footer a:focus { -webkit-text-decoration-line: underline; text-decoration-line: underline; } #wsu-footer .menu--theme-strip a:hover { color: #063d1c; -webkit-text-decoration-line: none; text-decoration-line: none; } #wsu-footer .menu--theme-strip a:focus { color: #063d1c; -webkit-text-decoration-line: none; text-decoration-line: none; } ul.wsu-footer__social { font-size: 1.8em; } #wsu-footer-legal { background: #063d1c; color: #e4dec7; } .wsu-footer__logo img { width: 150px; } #wsu-footer { padding: 10px 0; } .wsu-footer__links { display: table; table-layout: fixed; } .wsu-footer__links li { display: table-cell; } .wsu-footer__links a { margin: 10px 10%; } #wsu-footer > .page-width { display: table; text-align: left; } #wsu-footer > .page-width > * { display: table-cell; vertical-align: middle; } .wsu-footer__logo { width: 170px; padding-right: 20px; } ul.wsu-footer__social { text-align: right; } .wsu-footer__legal li { display: inline; } .wsu-footer__legal a { padding: 5px 18px; }