/* Table of Contents ================================================== # Header # Alternate # Media Queries */ /* # Header ================================================== */ .header-fixed { left: 0; position: fixed; right: 0; top: 0; z-index: 1030; } .header { background: rgba(91,146,250,1); border-bottom: 4px solid rgba(0,0,0,0.1); box-sizing: border-box; height: 65px; padding: 15px 0; width: 100%; } .header-brand { float: left; } .header-brand > a { color: rgba(255,255,255,1); font-size: 30px; line-height: 40px; text-decoration: none; } .header-brand > a > img { border-radius: 0; height: 30px; } .header-search { float: left; margin: -3px 0 0 20px; width: 280px; } .header-search > input { margin: 0; } .header-nav { float: left; list-style-type: none; margin: 5px 0 0 20px; padding: 0; } .header-nav > li { float: left; margin-right: 25px; } .header-nav > li:last-child { margin: 0; } .header-nav > li.btn-group { line-height: 12px; margin-top: 7px; } .header-nav > li.btn-group + li.btn-group { margin-left: 0; } .header-nav > li > a { color: rgba(42,44,48,1); font-size: 12px; font-weight: 500; letter-spacing: 1px; line-height: 12px; text-decoration: none; text-transform: uppercase; } .header-nav > li > a.active, .header-nav > li > a:active, .header-nav > li > a:hover, .header-nav > li > a:focus { color: rgba(255,255,255,1); } .header-nav-alt { float: right; list-style-type: none; margin: 4px 0 0 0; padding: 0; } .header-nav-alt > li { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 1px; line-height: 12px; margin-left: 15px; text-transform: uppercase; } .header-nav-alt > li:first-child, .header-nav-alt > li.btn-group + li.btn-group { margin-left: 0; } .header-nav-alt > li.btn-group { margin-top: 2px; } .header-nav-alt > li > a { color: rgba(255,255,255,1); letter-spacing: 1px; padding: 15px 0 13px 0; text-transform: uppercase; } .header-nav-alt > li > a.active, .header-nav-alt > li > a:active, .header-nav-alt > li > a:hover, .header-nav-alt > li > a:focus { color: rgba(42,44,48,1); } .header-nav-alt > li.inverse > a { background: rgba(255,255,255,1); border-radius: 500px; color: rgba(42,44,48,1); padding-left: 20px; padding-right: 20px; } .header-nav-alt > li.inverse > a:hover { color: rgba(255,255,255,1); background: rgba(0,0,0,0.1); } .header-toolchain { float: right; list-style-type: none; margin: 2px 25px 0 0; padding: 0; } .header-toolchain > li { float: left; margin-left: 15px; } .header-toolchain > li:first-child { margin: 0; } .header-toolchain > li.btn-group + li.btn-group { margin-left: 0; } .header-toolchain > li > a { color: rgba(42,44,48,1); font-size: 30px; line-height: 30px; text-decoration: none; } .header-toolchain > li > a.active, .header-toolchain > li > a:active, .header-toolchain > li > a:hover, .header-toolchain > li > a:focus { color: rgba(255,255,255,1); } .header-user { float: right; font-size: 13px; margin: -1px 0 0 20px; } .header-user > a { color: rgba(255,255,255,1); text-decoration: none; } .header-user img, .header-user-placeholder { background: rgba(255,255,255,1); border-radius: 500px; color: rgba(42,44,48,1); display: inline-block; height: 36px; margin: 0; padding: 0; text-align: center; width: 36px; vertical-align: middle; } .header-user-placeholder > i { font-size: 20px; line-height: 36px; } .header-user > ul.dropdown-menu { margin: -5px 10px 0 0; } .header-toggle > a { color: rgba(255,255,255,1); float: right; font-size: 40px; padding: 4px 0px 3px 14px; text-decoration: none; } /* # Alternate ================================================== */ .header.header-alt { background: rgba(255,255,255,1); border-color: rgba(255,255,255,1); } .header.header-alt .header-brand > a { color: rgba(91,146,250,1) } .header.header-alt .header-nav > li > a { color: rgba(85,94,113,1); } .header.header-alt .header-nav > li > a.active, .header.header-alt .header-nav > li > a:active, .header.header-alt .header-nav > li > a:hover, .header.header-alt .header-nav > li > a:focus { color: rgba(91,146,250,1); } .header.header-alt .header-nav-alt > li > a { color: rgba(85,94,113,1); } .header.header-alt .header-nav-alt > li > a.active, .header.header-alt .header-nav-alt > li > a:active, .header.header-alt .header-nav-alt > li > a:hover, .header.header-alt .header-nav-alt > li > a:focus { color: rgba(91,146,250,1); } .header.header-alt .header-nav-alt > li.inverse > a { background: rgba(91,146,250,1); color: rgba(255,255,255,1); } .header.header-alt .header-nav-alt > li.inverse > a:hover { background: rgba(245,248,250,1); color: rgba(42,44,48,1); } .header.header-alt .header-toolchain > li > a { color: rgba(85,94,113,1); } .header.header-alt .header-toolchain > li > a.active, .header.header-alt .header-toolchain > li > a:active, .header.header-alt .header-toolchain > li > a:hover, .header.header-alt .header-toolchain > li > a:focus { color: rgba(91,146,250,1); } .header.header-alt .header-user > a { color: rgba(85,94,113,1); } .header.header-alt .header-user img, .header.header-alt .header-user-placeholder { background: rgba(85,94,113,1); color: rgba(255,255,255,1); } .header.header-alt .header-toggle > a { color: rgba(91,146,250,1); } /* # Media Queries ================================================== */ @media only screen and (max-width: 767px) { .header { height: 50px; padding: 0; } .header-brand > a { font-size: 36px; line-height: 57px; } .header-brand > a > img { height: 50px; } }