diff --git a/inc/css/header.css b/inc/css/header.css index 70dc3f8..eb65094 100644 --- a/inc/css/header.css +++ b/inc/css/header.css @@ -1,399 +1,398 @@ .hidden { display: none !important; } #primary-header { font-family: 'Noto Sans', sans-serif; font-size: 14px; color: #31363b; background-color: #FAFAFA; background-clip: padding-box; height: auto; box-sizing: content-box; border-bottom: solid 2px #1287de; min-height: 50px; } #primary-header > .container { position: relative; } #primary-header * { float: none !important; } #primary-header .container > * { height: 50px; line-height: 50px; vertical-align: top; margin: 0px; } #primary-header #header-nav, #primary-header #header-logo { float: none !important; display: inline-block; } #primary-header h1 a::before { font-family: 'glyph'; font-size: 32px; content: "K"; text-indent: 0px; position: absolute; top: 0px; left: 0px; width: 100%; text-align: center; line-height: 50px; } #primary-header h1 a { text-indent: -9999px; position: relative; display: inline-block; width: 60px; height: 50px; margin: 0px; line-height: 50px; outline: 0; } #primary-header h1 a:hover { background-color: #e7e5e5; } #primary-header h1 a:focus, #primary-header h1 a.active { background-color: #1287de; color: #FFF; } #primary-header .dropdown-menu { min-width: 320px; box-shadow: 0px 1px 8px rgba(0,0,0,.1); padding: 0px; border: solid 1px rgba(0,0,0,.2) !important; border-radius: 4px; line-height: 100%; background-color: #FAFAFA; margin-top: 5px; } #primary-header .dropdown-toggle { padding-right: 40px; position: relative; } #primary-header a:after { font-family: "glyph"; font-weight: 400; font-size: 16px; margin-left: 10px; position: relative; display: inline-block; top: .1ex; transition: all .2s; color: #7a747c; text-decoration: none !important; vertical-align: middle; } #primary-header .menu-item-type-custom > a:after { content: "W"; } #primary-header .dropdown-toggle:after { content: "v" !important; } #primary-header .menu { margin: 0px; padding: 0px; } #primary-header .menu li { vertical-align: top; } #primary-header .menu > li a { height: 50px; display: inline-block; padding: 0px 20px; color: #343031; } #primary-header .menu > li a:hover { background-color: #e7e5e5; } #primary-header li.open > a, #primary-header li.active > a { background-color: #1287de !important; color: #FFF; } #primary-header li.open > a:after, .current_page_item a:after, #primary-header li.active > a:after { color: #FFF; } #primary-header li.open > a:after { transform: rotate(-180deg); -moz-transform: rotate(-180deg); } #primary-header .dropdown li a { margin: 0px; width: 100%; height: auto; box-sizing: border-box; padding: 10px 20px; background-color: transparent; border: none !important; } #primary-header .dropdown li:last-child, #primary-header .dropdown li:last-child a { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } #primary-header .dropdown li:first-child, #primary-header .dropdown li:first-child a { border-top-left-radius: 3px; border-top-right-radius: 3px; } #primary-header .menu-feature-image { border-top-left-radius: 3px; border-top-right-radius: 3px; background-size: cover; min-height: 160px; vertical-align: top; margin: -10px -20px 10px -20px; background-position: center; } #primary-header .menu-feature-link { border-bottom: solid 1px #dddbdb; } #primary-header .menu > li { display: inline-block; } #primary-header .navbar-right { position: absolute; text-align: right; right: 15px; top: 0px; } #primary-header #header-search-input { height: 30px; width: 100%; line-height: 30px; padding: 0px 40px 0px 5px; box-sizing: border-box; border: solid 1px #cac6c9; z-index: 1; transition: width .2s, color .2s; } #primary-header #header-search-submit { position: absolute; top: 11px; right: 1px; z-index: 2; width: 50px; height: 28px; text-indent: -9999px; padding: 0px; border: none; border-left: solid 2px #e7e5e5; border-radius: 0px 2px 2px 0px; background-color: transparent; outline: 0; } #primary-header #header-search-submit:after { font-family: 'glyph'; content: 'Q'; font-size: 18px; position: absolute; top: 0px; left: 0px; width: 100%; height: 28px; line-height: 28px; text-indent: 0px; color: #7a747c; } #primary-header #header-search-submit:focus { box-shadow: none; } #primary-header #header-search-form { position: relative; display: none; width: 250px; vertical-align: top; } #primary-header #header-search-form.js { display: inline-block; } #primary-header #header-search-form.js.active #header-search-submit:focus { background-color: #1287de; border-left-color: #0566af; } #primary-header #header-search-form.js.active #header-search-submit:focus:after { color: #FFF; } #header-search-input { width: 100%; } #primary-header #header-search-form.js:not(.active) #header-search-input { width: 50px; color: transparent !important; } #primary-header #header-search-form.js.active #header-search-input::placeholder { color: #dddbdb; transition: color .2s; } #primary-header #header-search-form.js.active #header-search-input::-webkit-input-placeholder { color: #dddbdb; transition: color .2s; } #primary-header #header-search-form.js.active #header-search-input:-ms-input-placeholder { color: #dddbdb; transition: color .2s; } #primary-header #header-search-form.js.active #header-search-input::-moz-placeholder { color: #dddbdb; transition: color .2s; } #primary-header #header-search-form.js.active #header-search-input:-moz-placeholder { color: #dddbdb; transition: color .2s; } #primary-header #header-search-form.js:not(.active) #header-search-input::placeholder { color: transparent } #primary-header #header-search-form.js:not(.active) #header-search-input::-webkit-input-placeholder { color: transparent } #primary-header #header-search-form.js:not(.active) #header-search-input:-ms-input-placeholder { color: transparent } #primary-header #header-search-form.js:not(.active) #header-search-input::-moz-placeholder { color: transparent } #primary-header #header-search-form.js:not(.active) #header-search-input:-moz-placeholder { color: transparent } #primary-header #header-search-form.js:not(.active) #header-search-submit { border-color: transparent; cursor: text; } #primary-header #header-search-form.js.active #header-search-submit:after { content: ">"; } #primary-header #header-menu-button { display: none; font-family: 'glyph'; background-color: transparent; font-size: 22px; color: #7a747c; vertical-align: top; line-height: 50px; padding: 0px; margin: 0px; border: none; width: 60px; } #primary-header.toggle-nav .container { width: 100%; max-width: 100%; } #primary-header.toggle-nav #header-menu-button { display: inline-block; } #primary-header.toggle-nav #header-nav { display: none; height: auto; margin: 0px -15px 0px -15px; border-top: solid 1px #e7e5e5; } @media(max-width: 450px) { #primary-header.toggle-nav #header-search-form { width: 200px; } } @media(max-width: 400px) { #primary-header.toggle-nav #header-search-form { display: none; } } #primary-header.toggle-nav #header-nav.active { display: block; } #primary-header.toggle-nav #header-nav .menu-item { display: block; } #primary-header.toggle-nav #header-nav .menu-item a { display: block; } #primary-header.toggle-nav .dropdown-menu { position: relative; padding: 0px; margin: 0px; border: none !important; border-radius: 0px !important; box-shadow: none !important; width: 100%; border-bottom: solid 2px #dddbdb !important; } #primary-header.toggle-nav .menu-feature-image { border: none !important; border-radius: 0px !important; box-shadow: none !important; } #primary-header.toggle-nav .dropdown-toggle:after { position: absolute; right: 15px; } #primary-header.toggle-nav #header-right-content { left: 90px; width: auto; - border-left: solid 1px #FC0 !important; white-space: nowrap; } #primary-header #header_user_menu { height: 50px; vertical-align: top; display: inline-block; } #primary-header #header_user_menu #header_user_avatar { text-align: left; display: block; vertical-align: top; margin: 10px 0px 10px 20px; width: 30px; height: 30px; text-indent: -9999px !important; border-radius: 100%; border: solid 1px rgba(0,0,0,.1); background-clip: border-box; box-sizing: border-box; background-size: cover; }