---TEXTO---
Line 837: | Line 837: | ||
/* --Header */ | /* --Header */ | ||
− | + | body { | |
− | + | padding-top: 3em; | |
− | + | } | |
− | # | + | #header { |
display: -moz-flex; | display: -moz-flex; | ||
display: -webkit-flex; | display: -webkit-flex; | ||
display: -ms-flex; | display: -ms-flex; | ||
display: flex; | display: flex; | ||
− | -moz- | + | -moz-justify-content: space-between; |
− | -webkit- | + | -webkit-justify-content: space-between; |
− | -ms- | + | -ms-justify-content: space-between; |
− | + | justify-content: space-between; | |
− | - | + | background-color: #444; |
− | - | + | border-bottom: solid 1px rgba(160, 160, 160, 0.3); |
− | + | height: 3.5em; | |
− | + | left: 0; | |
− | + | line-height: 3.5em; | |
− | + | position: fixed; | |
− | + | top: 1em; | |
− | + | width: 100%; | |
− | + | z-index: 10000; | |
} | } | ||
− | + | #header a { | |
− | + | color: #fff; | |
+ | text-decoration: none; | ||
} | } | ||
− | + | #header ul { | |
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding-left: 0; | ||
+ | } | ||
− | # | + | #header ul li { |
− | padding: | + | display: inline-block; |
+ | padding-left: 0; | ||
} | } | ||
+ | #header h1 { | ||
+ | height: inherit; | ||
+ | line-height: inherit; | ||
+ | padding: 0 0 0 1.5em; | ||
+ | white-space: nowrap; | ||
} | } | ||
− | + | #header h1 a { | |
+ | font-size: 0.7em; | ||
+ | } | ||
+ | |||
+ | #header .links { | ||
+ | -moz-flex: 1; | ||
+ | -webkit-flex: 1; | ||
+ | -ms-flex: 1; | ||
+ | flex: 1; | ||
+ | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
+ | height: inherit; | ||
+ | line-height: inherit; | ||
+ | margin-left: 1.5em; | ||
+ | overflow: hidden; | ||
+ | padding-left: 1.5em; | ||
+ | } | ||
− | # | + | #header .links ul li { |
− | + | border-left: solid 1px rgba(160, 160, 160, 0.3); | |
+ | line-height: 1; | ||
+ | margin-left: 1em; | ||
+ | padding-left: 1em; | ||
} | } | ||
+ | #header .links ul li:first-child { | ||
+ | border-left: 0; | ||
+ | margin-left: 0; | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | |||
+ | #header .links ul li a { | ||
+ | border-bottom: 0; | ||
+ | font-family: "Raleway", Helvetica, sans-serif; | ||
+ | font-size: 0.7em; | ||
+ | font-weight: 400; | ||
+ | letter-spacing: 0.25em; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | #header .main { | ||
+ | height: inherit; | ||
+ | line-height: inherit; | ||
+ | text-align: right; | ||
} | } | ||
− | + | #header .main ul { | |
+ | height: inherit; | ||
+ | line-height: inherit; | ||
+ | } | ||
+ | |||
+ | #header .main ul li { | ||
+ | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
+ | height: inherit; | ||
+ | line-height: inherit; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | #header .main ul li > * { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | #header .main ul li > a { | ||
+ | text-decoration: none; | ||
+ | border-bottom: 0; | ||
+ | color: #aaaaaa; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | text-indent: 4em; | ||
+ | width: 4em; | ||
+ | } | ||
+ | |||
+ | #header .main ul li > a:before { | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-family: FontAwesome; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | text-transform: none !important; | ||
+ | } | ||
+ | |||
+ | #header .main ul li > a:before { | ||
+ | display: block; | ||
+ | height: inherit; | ||
+ | left: 0; | ||
+ | line-height: inherit; | ||
+ | position: absolute; | ||
+ | text-align: center; | ||
+ | text-indent: 0; | ||
+ | top: 0; | ||
+ | width: inherit; | ||
+ | } | ||
+ | |||
+ | #header form { | ||
+ | margin: 0; | ||
+ | } | ||
− | # | + | #header form input { |
− | + | display: inline-block; | |
+ | height: 2.5em; | ||
+ | position: relative; | ||
+ | top: -2px; | ||
+ | vertical-align: middle; | ||
} | } | ||
+ | #header #search { | ||
+ | -moz-transition: all 0.5s ease; | ||
+ | -webkit-transition: all 0.5s ease; | ||
+ | -ms-transition: all 0.5s ease; | ||
+ | transition: all 0.5s ease; | ||
+ | max-width: 0; | ||
+ | opacity: 0; | ||
+ | overflow: hidden; | ||
+ | padding: 0; | ||
+ | white-space: nowrap; | ||
} | } | ||
− | + | #header #search input { | |
− | display: | + | width: 12em; |
+ | } | ||
+ | |||
+ | #header #search.visible { | ||
+ | max-width: 12.5em; | ||
+ | opacity: 1; | ||
+ | padding: 0 0.5em 0 0; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 980px) { | ||
+ | |||
+ | #header .links { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
} | } | ||
+ | |||
+ | @media screen and (max-width: 736px) { | ||
+ | |||
+ | #header { | ||
+ | height: 2.75em; | ||
+ | line-height: 2.75em; | ||
+ | } | ||
+ | |||
+ | #header h1 { | ||
+ | padding: 0 0 0 1em; | ||
+ | } | ||
+ | |||
+ | #header .main .search { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Wrapper */ | ||
+ | |||
+ | |||
/* Main */ | /* Main */ |
Revision as of 09:21, 19 October 2016