Difference between revisions of "Template:BIOSINT Mexico"
| Line 347: | Line 347: | ||
/* --Header */ | /* --Header */ | ||
| + | /* --Header */ | ||
| + | |||
body { | body { | ||
| − | padding-top: | + | padding-top: 3.5em; |
} | } | ||
| − | + | ||
#header { | #header { | ||
display: -moz-flex; | display: -moz-flex; | ||
| Line 362: | Line 364: | ||
background-color: #444; | background-color: #444; | ||
border-bottom: solid 1px rgba(160, 160, 160, 0.3); | border-bottom: solid 1px rgba(160, 160, 160, 0.3); | ||
| − | height: | + | height: 3.5em; |
left: 0; | left: 0; | ||
line-height: 3.5em; | line-height: 3.5em; | ||
position: fixed; | position: fixed; | ||
| − | top: | + | top: 0; |
width: 100%; | width: 100%; | ||
z-index: 10000; | z-index: 10000; | ||
} | } | ||
| − | + | ||
#header a { | #header a { | ||
color: #fff; | color: #fff; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | + | ||
#header ul { | #header ul { | ||
list-style: none; | list-style: none; | ||
margin: 0; | margin: 0; | ||
padding-left: 0; | padding-left: 0; | ||
| − | + | } | |
| − | } | + | |
| − | + | ||
#header ul li { | #header ul li { | ||
display: inline-block; | display: inline-block; | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | ||
#header h1 { | #header h1 { | ||
height: inherit; | height: inherit; | ||
| Line 394: | Line 395: | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
| − | + | ||
#header h1 a { | #header h1 a { | ||
font-size: 0.7em; | font-size: 0.7em; | ||
} | } | ||
| − | + | ||
#header .links { | #header .links { | ||
-moz-flex: 1; | -moz-flex: 1; | ||
| Line 411: | Line 412: | ||
padding-left: 1.5em; | padding-left: 1.5em; | ||
} | } | ||
| − | + | ||
#header .links ul li { | #header .links ul li { | ||
border-left: solid 1px rgba(160, 160, 160, 0.3); | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
| Line 418: | Line 419: | ||
padding-left: 1em; | padding-left: 1em; | ||
} | } | ||
| − | + | ||
#header .links ul li:first-child { | #header .links ul li:first-child { | ||
border-left: 0; | border-left: 0; | ||
| Line 424: | Line 425: | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | ||
#header .links ul li a { | #header .links ul li a { | ||
border-bottom: 0; | border-bottom: 0; | ||
| Line 433: | Line 434: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| − | + | ||
#header .main { | #header .main { | ||
height: inherit; | height: inherit; | ||
| Line 439: | Line 440: | ||
text-align: right; | text-align: right; | ||
} | } | ||
| − | + | ||
#header .main ul { | #header .main ul { | ||
height: inherit; | height: inherit; | ||
line-height: inherit; | line-height: inherit; | ||
} | } | ||
| − | + | ||
#header .main ul li { | #header .main ul li { | ||
border-left: solid 1px rgba(160, 160, 160, 0.3); | border-left: solid 1px rgba(160, 160, 160, 0.3); | ||
| Line 451: | Line 452: | ||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
| − | + | ||
#header .main ul li > * { | #header .main ul li > * { | ||
display: block; | display: block; | ||
float: left; | float: left; | ||
} | } | ||
| − | + | ||
#header .main ul li > a { | #header .main ul li > a { | ||
text-decoration: none; | text-decoration: none; | ||
| Line 466: | Line 467: | ||
width: 4em; | width: 4em; | ||
} | } | ||
| − | + | ||
#header .main ul li > a:before { | #header .main ul li > a:before { | ||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||
| Line 475: | Line 476: | ||
text-transform: none !important; | text-transform: none !important; | ||
} | } | ||
| − | + | ||
#header .main ul li > a:before { | #header .main ul li > a:before { | ||
display: block; | display: block; | ||
| Line 487: | Line 488: | ||
width: inherit; | width: inherit; | ||
} | } | ||
| − | + | ||
#header form { | #header form { | ||
margin: 0; | margin: 0; | ||
} | } | ||
| − | + | ||
#header form input { | #header form input { | ||
display: inline-block; | display: inline-block; | ||
| Line 499: | Line 500: | ||
vertical-align: middle; | 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 { | ||
| + | width: 12em; | ||
| + | } | ||
| + | |||
| + | #header #search.visible { | ||
| + | max-width: 12.5em; | ||
| + | opacity: 1; | ||
| + | padding: 0 0.5em 0 0; | ||
| + | } | ||
| + | |||
@media screen and (max-width: 980px) { | @media screen and (max-width: 980px) { | ||
| − | + | ||
#header .links { | #header .links { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
} | } | ||
| − | + | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
| − | + | ||
#header { | #header { | ||
height: 2.75em; | height: 2.75em; | ||
line-height: 2.75em; | line-height: 2.75em; | ||
} | } | ||
| − | + | ||
#header h1 { | #header h1 { | ||
padding: 0 0 0 1em; | padding: 0 0 0 1em; | ||
} | } | ||
| − | + | ||
#header .main .search { | #header .main .search { | ||
display: none; | display: none; | ||
} | } | ||
| − | + | ||
} | } | ||
Revision as of 11:38, 19 October 2016
