Difference between revisions of "Team:DTU-Denmark/wikicss"
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
html, body, #globalWrapper, #content, #bodyContent, #mw-content-text { | html, body, #globalWrapper, #content, #bodyContent, #mw-content-text { | ||
| − | + | height: 100%; | |
| + | } | ||
| − | + | .firstHeading, .printfooter { | |
| − | display: none; } | + | display: none; |
| + | } | ||
| + | .hero { | ||
| + | height: 100%; | ||
| + | width: 100%; | ||
| + | position: relative; | ||
| + | text-align: center; | ||
| + | color: #f8f8f8; | ||
| + | -webkit-background-size: cover; | ||
| + | -moz-background-size: cover; | ||
| + | -o-background-size: cover; | ||
| + | background-size: cover; | ||
| + | } | ||
| + | |||
| + | @media screen and (min-width: 1025px) { | ||
.hero { | .hero { | ||
| − | + | background-position: center; | |
| − | + | background-attachment: fixed; | |
| − | + | background-repeat: no-repeat; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
.hero-text { | .hero-text { | ||
| − | + | position: relative; | |
| − | + | margin-top: 10px; | |
| − | + | font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| − | + | font-weight: 700; | |
| − | + | } | |
| + | |||
| + | @media screen and (min-width: 768px) { | ||
.hero-text { | .hero-text { | ||
| − | + | margin-top: 150px; | |
| + | } | ||
} | } | ||
| + | |||
| + | .hero-text h1 { | ||
| + | margin: 0; | ||
| + | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); | ||
| + | font-size: 3em; | ||
| + | } | ||
| + | |||
| + | @media screen and (min-width: 768px) { | ||
.hero-text h1 { | .hero-text h1 { | ||
| − | + | font-size: 5em; | |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | .hero-text h3 { | |
| − | + | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); | |
| + | } | ||
| + | |||
| + | .hero-text hr { | ||
| + | max-width: 400px; | ||
| + | width: 70%; | ||
| + | border-top: 1px solid #f8f8f8; | ||
| + | border-bottom: 1px solid #000; | ||
| + | border-bottom: 1px solid rgba(0, 0, 0, 0.2); | ||
| + | } | ||
| + | |||
| + | .hero-text li { | ||
| + | list-style-type: none; | ||
| + | } | ||
| + | |||
| + | .hero-text li a { | ||
| + | color: #f8f8f8; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.igem-logo { | .igem-logo { | ||
| − | + | position: absolute; | |
| − | + | width: 100px; | |
| − | + | top: 100px; | |
| − | + | left: 40px; | |
| − | + | float: left; | |
| − | + | opacity: 0.7; | |
| − | + | } | |
| + | |||
| + | .igem-logo img { | ||
width: 70px; | width: 70px; | ||
-webkit-filter: grayscale(1); | -webkit-filter: grayscale(1); | ||
| Line 68: | Line 90: | ||
-webkit-transition: -webkit-filter 0.5s ease-in-out; | -webkit-transition: -webkit-filter 0.5s ease-in-out; | ||
-moz-transition: -moz-filter 0.5s ease-in-out; | -moz-transition: -moz-filter 0.5s ease-in-out; | ||
| − | -o-transition: -o-filter 0.5s ease-in-out; } | + | -o-transition: -o-filter 0.5s ease-in-out; |
| − | + | } | |
| − | + | ||
| − | + | .igem-logo img:hover { | |
| − | + | -webkit-filter: grayscale(0); | |
| − | + | -moz-filter: grayscale(0); | |
| + | -o-filter: grayscale(0); | ||
| + | filter: grayscale(0); | ||
| + | } | ||
.btn-transparent { | .btn-transparent { | ||
| − | + | background-color: transparent; | |
| − | + | color: #f8f8f8; | |
| − | + | margin: 5px 0; | |
| − | + | } | |
| − | background-color: transparent; } | + | |
| + | .btn-transparent:hover, .btn-transparent:focus, .btn-transparent:active { | ||
| + | background-color: transparent; | ||
| + | } | ||
@-webkit-keyframes baloonBounceAnim { | @-webkit-keyframes baloonBounceAnim { | ||
| − | + | 0% { | |
| − | + | -webkit-transform: translateY(0); | |
| + | } | ||
50% { | 50% { | ||
| − | + | -webkit-transform: translateY(20px); | |
| − | + | } | |
| − | -webkit-transform: translateY(0); | + | 100% { |
| + | -webkit-transform: translateY(0); | ||
| + | } | ||
} | } | ||
@-moz-keyframes baloonBounceAnim { | @-moz-keyframes baloonBounceAnim { | ||
| − | + | 0% { | |
| − | + | -moz-transform: translateY(0); | |
| + | } | ||
50% { | 50% { | ||
| − | + | -moz-transform: translateY(20px); | |
| − | + | } | |
| − | -moz-transform: translateY(0); | + | 100% { |
| + | -moz-transform: translateY(0); | ||
| + | } | ||
} | } | ||
@keyframes baloonBounceAnim { | @keyframes baloonBounceAnim { | ||
| − | + | 0% { | |
| − | + | transform: translateY(0); | |
| + | } | ||
50% { | 50% { | ||
| − | + | transform: translateY(20px); | |
| − | + | } | |
| − | transform: translateY(0); | + | 100% { |
| + | transform: translateY(0); | ||
| + | } | ||
} | } | ||
.btn-circle { | .btn-circle { | ||
| − | + | width: 50px; | |
| − | + | height: 50px; | |
| − | + | margin-top: 5px; | |
| − | + | border: 2px solid #f8f8f8; | |
| − | + | border-radius: 35px; | |
| − | + | font-size: 30px; | |
| − | + | font-weight: 400; | |
| − | + | text-shadow: none; | |
| − | + | background: 0 0; | |
| − | + | -webkit-transition: background 0.3s ease-in-out; | |
| − | + | -moz-transition: background 0.3s ease-in-out; | |
| − | + | -o-transition: background 0.3s ease-in-out; | |
| − | + | transition: background 0.3s ease-in-out; | |
| − | + | -webkit-animation: baloonBounceAnim 1500ms infinite ease-in-out; | |
| − | + | -moz-animation: baloonBounceAnim 1500ms infinite ease-in-out; | |
| − | + | -o-animation: baloonBounceAnim 1500ms infinite ease-in-out; | |
| − | + | animation: baloonBounceAnim 1500ms infinite ease-in-out; | |
| − | + | } | |
| + | |||
| + | @media screen and (min-width: 768px) { | ||
.btn-circle { | .btn-circle { | ||
| − | + | margin-top: 15px; | |
| − | + | width: 70px; | |
| − | + | height: 70px; | |
| − | + | font-size: 40px; | |
| + | } | ||
| + | } | ||
| + | |||
| + | .btn-circle:hover, .btn-circle:focus { | ||
| + | outline: 0; | ||
| + | color: #f8f8f8; | ||
| + | background: rgba(255, 255, 255, 0.2); | ||
| + | } | ||
| + | |||
| + | .btn-circle i.animated { | ||
| + | -webkit-transition: -webkit-transform 1s; | ||
| + | -moz-transition: -moz-transform 1s; | ||
| + | -o-transition: -o-transform 1s; | ||
| + | transition: transform 1s; | ||
| + | } | ||
| + | |||
| + | .btn-circle:hover i.animated { | ||
| + | -webkit-animation: pulse 1.5s infinite; | ||
| + | -moz-animation: pulse 1.5s infinite; | ||
| + | -o-animation: pulse 1.5s infinite; | ||
| + | animation: pulse 1.5s infinite; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.navimg { | .navimg { | ||
| − | + | padding: 10px 15px; | |
| − | + | } | |
| − | max-height: 20px; } | + | |
| + | .navimg img { | ||
| + | max-height: 20px; | ||
| + | } | ||
.navbar-right { | .navbar-right { | ||
| − | + | text-align: center; | |
| + | } | ||
| − | + | @media screen and (min-width: 768px) { | |
.navbar-nav { | .navbar-nav { | ||
| − | + | margin: 0 auto; | |
| − | + | display: table; | |
| − | + | table-layout: fixed; | |
| − | + | float:none; | |
| − | .navbar-default { | + | font-size: 1vw; |
| + | } | ||
| + | |||
| + | .navbar-nav ul { | ||
| + | white-space:nowrap; | ||
| + | } | ||
| + | |||
| + | .navbar-default { | ||
min-height: 20px; | min-height: 20px; | ||
padding: 40px 0; | padding: 40px 0; | ||
| Line 174: | Line 231: | ||
-moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | ||
-o-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | -o-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | ||
| − | transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; | + | transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; |
| − | + | } | |
| − | + | ||
| − | .nav- | + | .navbar-default .navbar-right > li > a, .navbar-default .navbar-right > li > a:hover, .navbar-default .navbar-right > li > a:focus, .navbar-default .navbar-right > li > a:active { |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | ||
| − | + | .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:active { | |
| − | + | white-space: nowrap; | |
| − | + | color: #fff; | |
| − | + | -webkit-transition: color 0.5s ease-in-out; | |
| − | + | -moz-transition: color 0.5s ease-in-out; | |
| − | + | -o-transition: color 0.5s ease-in-out; | |
| − | + | transition: color 0.5s ease-in-out; | |
| − | + | } | |
| − | .navbar-default .navbar-nav > | + | |
| − | + | .navbar-default .navbar-nav > li a:hover, .navbar-default .navbar-nav > li a:focus, .navbar-default .navbar-nav > li a:active { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
background-color: transparent; | background-color: transparent; | ||
| − | + | } | |
| − | + | ||
| − | + | .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:active { | |
| − | + | font-weight: bolder; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
background-color: transparent; | background-color: transparent; | ||
color: #fff; | color: #fff; | ||
| − | + | } | |
| − | .navbar-default .navbar-nav > . | + | |
| − | + | .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:active { | |
| + | font-weight: bolder; | ||
| + | background-color: transparent; | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
.dropdown-menu { | .dropdown-menu { | ||
| − | + | background-color: rgba(0, 0, 0, .5); | |
| − | + | } | |
| + | |||
| + | .dropdown-menu > li > a, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:active { | ||
color: #fff; | color: #fff; | ||
| − | background-color: transparent; | + | background-color: transparent; |
| − | + | } | |
| − | + | ||
| − | + | .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:active { | |
| − | + | font-weight: bolder; | |
| − | + | } | |
| + | |||
| + | .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:active { | ||
| + | font-weight: bolder; | ||
color: #fff; | color: #fff; | ||
background-color: transparent; | background-color: transparent; | ||
| − | + | } | |
| − | + | ||
| − | + | .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:active { | |
| − | + | font-weight: bolder; | |
| − | + | } | |
| + | |||
.top-nav-collapse { | .top-nav-collapse { | ||
| − | + | padding-top: 20px; | |
| − | + | padding-bottom: 0; | |
| − | + | background-color: #fff; | |
| − | + | color: #f00; | |
| − | + | } | |
| − | background-color: #fff; | + | |
| − | + | .top-nav-collapse .navbar-brand { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
padding-bottom: 0; | padding-bottom: 0; | ||
height: 20px; | height: 20px; | ||
| − | padding-top: 10px; | + | padding-top: 10px; |
| − | + | } | |
| − | + | ||
| − | + | .top-nav-collapse .navbar-right > li > a { | |
| − | + | ||
| − | + | ||
color: #f00; | color: #f00; | ||
padding-top: 10px; | padding-top: 10px; | ||
| − | padding-bottom: 5px; | + | padding-bottom: 5px; |
| − | + | } | |
| − | + | ||
| − | + | .top-nav-collapse .navbar-nav > li > a, .top-nav-collapse .navbar-nav > li > a:hover, .top-nav-collapse .navbar-nav > li > a:focus, .top-nav-collapse .navbar-nav > li > a:active { | |
| − | + | color: #f00; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | color: #f00 | + | |
padding-top: 10px; | padding-top: 10px; | ||
| − | padding-bottom: 5px; | + | padding-bottom: 5px; |
| − | .top-nav-collapse .navbar-nav > | + | background-color: transparent; |
| − | .top-nav-collapse .navbar-nav > li > a:focus, | + | } |
| − | .top-nav-collapse . | + | |
| − | + | .top-nav-collapse .navbar-nav > .active > a, .top-nav-collapse .navbar-nav > .active > a:hover, .top-nav-collapse .navbar-nav > .active > a:focus, .top-nav-collapse .navbar-nav > .active > a:active { | |
| + | color: #f00; | ||
| + | padding-top: 10px; | ||
| + | padding-bottom: 5px; | ||
| + | background-color: transparent; | ||
| + | } | ||
| + | |||
| + | .top-nav-collapse .navbar-nav > .open > a, .top-nav-collapse .navbar-nav > .open > a:hover, .top-nav-collapse .navbar-nav > .open > a:focus, .top-nav-collapse .navbar-nav > .open > a:active { | ||
| + | color: #f00; | ||
| + | padding-top: 10px; | ||
| + | padding-bottom: 5px; | ||
| + | background-color: transparent; | ||
| + | } | ||
| + | |||
| + | .top-nav-collapse .dropdown-menu { | ||
| + | background-color: rgba(0, 0, 0, .5); | ||
| + | } | ||
| + | |||
| + | .top-nav-collapse .dropdown-menu > li > a, .top-nav-collapse .dropdown-menu > li > a:hover, .top-nav-collapse .dropdown-menu > li > a:focus, .top-nav-collapse .dropdown-menu > li > a:active { | ||
| + | color: #fff; | ||
| + | background-color: transparent; | ||
| + | } | ||
| + | |||
| + | .top-nav-collapse .dropdown-menu > li > a:hover, .top-nav-collapse .dropdown-menu > li > a:focus, .top-nav-collapse .dropdown-menu > li > a:active { | ||
| + | font-weight: bolder; | ||
| + | } | ||
| + | |||
| + | .top-nav-collapse .dropdown-menu > .active > a, .top-nav-collapse .dropdown-menu > .active > a:hover, .top-nav-collapse .dropdown-menu > .active > a:focus, .top-nav-collapse .dropdown-menu > .active > a:active { | ||
| + | color: #fff; | ||
| + | background-color: transparent; | ||
| + | } | ||
| + | |||
| + | .top-nav-collapse .dropdown-menu > .active > a:hover, .top-nav-collapse .dropdown-menu > .active > a:focus, .top-nav-collapse .dropdown-menu > .active > a:active { | ||
| + | font-weight: bolder; | ||
| + | } | ||
| + | |||
.extrabar { | .extrabar { | ||
| − | + | width: 100%; | |
| − | + | padding-bottom: 5px; | |
| − | + | padding-top: 0; | |
| − | + | min-height: 20px; | |
| − | + | z-index: 1; | |
| − | + | border: 0; | |
| − | + | background-color: #fff; | |
| − | + | border-radius: 0; | |
| − | + | } | |
| − | + | ||
| + | .extrabar .navbar-nav { | ||
margin: 0 auto; | margin: 0 auto; | ||
display: table; | display: table; | ||
table-layout: fixed; | table-layout: fixed; | ||
| − | float: none; | + | float:none; |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | .extrabar .navbar-nav > li > a, .extrabar .navbar-nav > li > a:hover, .extrabar .navbar-nav > li > a:focus, .extrabar .navbar-nav > li > a:active { | |
| − | + | padding: 5px; | |
| − | + | color: #f00; | |
| + | } | ||
| + | .extrabar .navbar-nav > .active > a, .extrabar .navbar-nav > .active > a:hover, .extrabar .navbar-nav > .active > a:focus, .extrabar .navbar-nav > .active > a:active { | ||
| + | padding: 5px; | ||
| + | color: #f00; | ||
| + | } | ||
} | } | ||
.affix { | .affix { | ||
| − | + | top: 54px; | |
| + | } | ||
| − | + | .img { | |
width: 100%; | width: 100%; | ||
height: 400px; | height: 400px; | ||
| Line 326: | Line 389: | ||
-o-background-size: cover; | -o-background-size: cover; | ||
background-size: cover; | background-size: cover; | ||
| − | background-position: center; } | + | background-position: center; |
| − | + | } | |
| − | + | ||
| + | @media screen and (min-width: 1025px) { | ||
| + | .img { | ||
background-attachment: fixed; | background-attachment: fixed; | ||
| − | background-repeat: no-repeat; | + | background-repeat: no-repeat; |
| + | } | ||
} | } | ||
.img-title { | .img-title { | ||
| − | + | font-size: 36px; | |
| − | + | background-color: rgba(33, 33, 33, 0.2); | |
| − | + | color: #FFF; | |
| − | + | padding: 5px 50px; | |
| − | + | top: 10%; | |
| − | + | position: relative; | |
| − | + | font-family: 'Bree Serif', serif; | |
| − | + | text-shadow: rgba(33, 33, 33, 0.5) 0 2px 3px; | |
| − | + | } | |
| − | text-align: right; } | + | |
| + | .img-title .right { | ||
| + | text-align: right; | ||
| + | } | ||
.member-image { | .member-image { | ||
| − | + | width: 100%; | |
| + | } | ||
| − | + | img { | |
| − | max-width: 100%; } | + | max-width: 100%; |
| + | } | ||
| − | + | .carousel-inner > .item > img { | |
| − | + | height: 500px; | |
| − | + | margin: 0 auto; | |
| + | } | ||
.carousel-caption { | .carousel-caption { | ||
| − | + | color: #f00; | |
| − | + | } | |
| − | + | ||
| − | + | .sponsors { | |
| − | text-align: center; } | + | text-align: center; |
| + | } | ||
| − | + | .sponsor-image { | |
| − | + | max-height: 150px; | |
| + | } | ||
| − | + | .sponsor-row { | |
| − | + | margin: 15px 0; | |
| + | } | ||
| − | + | .sponsorlogo { | |
| − | + | padding: 5px; | |
| − | + | vertical-align: middle; | |
| − | + | display: inline-block; | |
| − | + | } | |
| − | + | ||
| + | .sponsorlogo img { | ||
| + | max-height: 100px; | ||
| + | } | ||
.criterialist { | .criterialist { | ||
| − | + | list-style-type: none; | |
| − | + | } | |
| + | |||
| + | .criterialist li:before { | ||
font-family: 'FontAwesome'; | font-family: 'FontAwesome'; | ||
| − | margin: 0 5px 0 -15px; | + | margin: 0 5px 0 -15px; |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | .overview- | + | .criterialist li.checked:before { |
| + | content: ''; | ||
| + | } | ||
| + | |||
| + | .criterialist li.unchecked:before { | ||
| + | content: ""; | ||
| + | } | ||
| + | |||
| + | .overview-section a { | ||
position: absolute; | position: absolute; | ||
bottom: 20px; | bottom: 20px; | ||
| Line 394: | Line 478: | ||
vertical-align: middle; | vertical-align: middle; | ||
left: 25%; | left: 25%; | ||
| − | height: 20px; | + | height: 20px; |
| − | + | color: #fff; | |
| − | + | } | |
| − | . | + | .mads-tag { |
| − | + | position: absolute; | |
| + | width: 7%; | ||
| + | height: 18%; | ||
| + | border: 1px solid; | ||
| + | top: 15%; | ||
| + | left: 75%; | ||
| + | } | ||
| − | + | .viktor-tag { | |
| − | + | position: absolute; | |
| + | width: 7%; | ||
| + | height: 18%; | ||
| + | border: 1px solid; | ||
| + | top: 22%; | ||
| + | left: 18%; | ||
| + | } | ||
| − | + | .karolina-tag { | |
| − | + | position: absolute; | |
| + | width: 7%; | ||
| + | height: 18%; | ||
| + | border: 1px solid; | ||
| + | top: 29%; | ||
| + | left: 33%; | ||
| + | } | ||
| − | + | .linas-tag { | |
| − | + | position: absolute; | |
| + | width: 7%; | ||
| + | height: 18%; | ||
| + | border: 1px solid; | ||
| + | top: 10%; | ||
| + | left: 41%; | ||
| + | } | ||
| − | + | .tobias-tag { | |
| − | + | position: absolute; | |
| + | width: 7%; | ||
| + | height: 18%; | ||
| + | border: 1px solid; | ||
| + | top: 15%; | ||
| + | left: 10%; | ||
| + | } | ||
| − | + | .pernille-tag { | |
| − | + | position: absolute; | |
| + | width: 7%; | ||
| + | height: 18%; | ||
| + | border: 1px solid; | ||
| + | top: 22%; | ||
| + | left: 49%; | ||
| + | } | ||
| − | + | .scott-tag { | |
| − | + | position: absolute; | |
| + | width: 7%; | ||
| + | height: 18%; | ||
| + | border: 1px solid; | ||
| + | top: 9%; | ||
| + | left: 54%; | ||
| + | } | ||
| − | + | .vilhelm-tag { | |
| − | + | position: absolute; | |
| + | width: 7%; | ||
| + | height: 18%; | ||
| + | border: 1px solid; | ||
| + | top: 6%; | ||
| + | left: 33%; | ||
| + | } | ||
| − | + | .michael-tag { | |
| − | + | position: absolute; | |
| − | + | width: 7%; | |
| − | + | height: 18%; | |
| − | + | border: 1px solid; | |
| − | + | top: 15%; | |
| − | + | left: 85%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .verena-tag { | |
| − | + | position: absolute; | |
| − | + | width: 7%; | |
| − | + | height: 18%; | |
| − | + | border: 1px solid; | |
| − | + | top: 22%; | |
| − | + | left: 68%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
Latest revision as of 15:10, 9 November 2015
html, body, #globalWrapper, #content, #bodyContent, #mw-content-text {
height: 100%;
}
.firstHeading, .printfooter {
display: none;
}
.hero {
height: 100%; width: 100%; position: relative; text-align: center; color: #f8f8f8; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
@media screen and (min-width: 1025px) {
.hero {
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
.hero-text {
position: relative; margin-top: 10px; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;
}
@media screen and (min-width: 768px) {
.hero-text {
margin-top: 150px;
}
}
.hero-text h1 {
margin: 0; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); font-size: 3em;
}
@media screen and (min-width: 768px) {
.hero-text h1 {
font-size: 5em;
}
}
.hero-text h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.hero-text hr {
max-width: 400px; width: 70%; border-top: 1px solid #f8f8f8; border-bottom: 1px solid #000; border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.hero-text li {
list-style-type: none;
}
.hero-text li a {
color: #f8f8f8;
}
.igem-logo {
position: absolute; width: 100px; top: 100px; left: 40px; float: left; opacity: 0.7;
}
.igem-logo img {
width: 70px; -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1); transition: filter 0.5s ease-in-out; -webkit-transition: -webkit-filter 0.5s ease-in-out; -moz-transition: -moz-filter 0.5s ease-in-out; -o-transition: -o-filter 0.5s ease-in-out;
}
.igem-logo img:hover {
-webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0);
}
.btn-transparent {
background-color: transparent; color: #f8f8f8; margin: 5px 0;
}
.btn-transparent:hover, .btn-transparent:focus, .btn-transparent:active {
background-color: transparent;
}
@-webkit-keyframes baloonBounceAnim {
0% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes baloonBounceAnim {
0% {
-moz-transform: translateY(0);
}
50% {
-moz-transform: translateY(20px);
}
100% {
-moz-transform: translateY(0);
}
}
@keyframes baloonBounceAnim {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
.btn-circle {
width: 50px; height: 50px; margin-top: 5px; border: 2px solid #f8f8f8; border-radius: 35px; font-size: 30px; font-weight: 400; text-shadow: none; background: 0 0; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; -webkit-animation: baloonBounceAnim 1500ms infinite ease-in-out; -moz-animation: baloonBounceAnim 1500ms infinite ease-in-out; -o-animation: baloonBounceAnim 1500ms infinite ease-in-out; animation: baloonBounceAnim 1500ms infinite ease-in-out;
}
@media screen and (min-width: 768px) {
.btn-circle {
margin-top: 15px;
width: 70px;
height: 70px;
font-size: 40px;
}
}
.btn-circle:hover, .btn-circle:focus {
outline: 0; color: #f8f8f8; background: rgba(255, 255, 255, 0.2);
}
.btn-circle i.animated {
-webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s;
}
.btn-circle:hover i.animated {
-webkit-animation: pulse 1.5s infinite; -moz-animation: pulse 1.5s infinite; -o-animation: pulse 1.5s infinite; animation: pulse 1.5s infinite;
}
.navimg {
padding: 10px 15px;
}
.navimg img {
max-height: 20px;
}
.navbar-right {
text-align: center;
}
@media screen and (min-width: 768px) {
.navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
font-size: 1vw;
}
.navbar-nav ul {
white-space:nowrap;
}
.navbar-default {
min-height: 20px;
padding: 40px 0;
margin-bottom: 0;
text-align: center;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0;
background-color: transparent;
-webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.navbar-default .navbar-right > li > a, .navbar-default .navbar-right > li > a:hover, .navbar-default .navbar-right > li > a:focus, .navbar-default .navbar-right > li > a:active {
color: #fff;
}
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:active {
white-space: nowrap;
color: #fff;
-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
transition: color 0.5s ease-in-out;
}
.navbar-default .navbar-nav > li a:hover, .navbar-default .navbar-nav > li a:focus, .navbar-default .navbar-nav > li a:active {
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:active {
font-weight: bolder;
background-color: transparent;
color: #fff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:active {
font-weight: bolder;
background-color: transparent;
color: #fff;
}
.dropdown-menu {
background-color: rgba(0, 0, 0, .5);
}
.dropdown-menu > li > a, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:active {
color: #fff;
background-color: transparent;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > a:active {
font-weight: bolder;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:active {
font-weight: bolder;
color: #fff;
background-color: transparent;
}
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:active {
font-weight: bolder;
}
.top-nav-collapse {
padding-top: 20px;
padding-bottom: 0;
background-color: #fff;
color: #f00;
}
.top-nav-collapse .navbar-brand {
padding-bottom: 0;
height: 20px;
padding-top: 10px;
}
.top-nav-collapse .navbar-right > li > a {
color: #f00;
padding-top: 10px;
padding-bottom: 5px;
}
.top-nav-collapse .navbar-nav > li > a, .top-nav-collapse .navbar-nav > li > a:hover, .top-nav-collapse .navbar-nav > li > a:focus, .top-nav-collapse .navbar-nav > li > a:active {
color: #f00;
padding-top: 10px;
padding-bottom: 5px;
background-color: transparent;
}
.top-nav-collapse .navbar-nav > .active > a, .top-nav-collapse .navbar-nav > .active > a:hover, .top-nav-collapse .navbar-nav > .active > a:focus, .top-nav-collapse .navbar-nav > .active > a:active {
color: #f00;
padding-top: 10px;
padding-bottom: 5px;
background-color: transparent;
}
.top-nav-collapse .navbar-nav > .open > a, .top-nav-collapse .navbar-nav > .open > a:hover, .top-nav-collapse .navbar-nav > .open > a:focus, .top-nav-collapse .navbar-nav > .open > a:active {
color: #f00;
padding-top: 10px;
padding-bottom: 5px;
background-color: transparent;
}
.top-nav-collapse .dropdown-menu {
background-color: rgba(0, 0, 0, .5);
}
.top-nav-collapse .dropdown-menu > li > a, .top-nav-collapse .dropdown-menu > li > a:hover, .top-nav-collapse .dropdown-menu > li > a:focus, .top-nav-collapse .dropdown-menu > li > a:active {
color: #fff;
background-color: transparent;
}
.top-nav-collapse .dropdown-menu > li > a:hover, .top-nav-collapse .dropdown-menu > li > a:focus, .top-nav-collapse .dropdown-menu > li > a:active {
font-weight: bolder;
}
.top-nav-collapse .dropdown-menu > .active > a, .top-nav-collapse .dropdown-menu > .active > a:hover, .top-nav-collapse .dropdown-menu > .active > a:focus, .top-nav-collapse .dropdown-menu > .active > a:active {
color: #fff;
background-color: transparent;
}
.top-nav-collapse .dropdown-menu > .active > a:hover, .top-nav-collapse .dropdown-menu > .active > a:focus, .top-nav-collapse .dropdown-menu > .active > a:active {
font-weight: bolder;
}
.extrabar {
width: 100%;
padding-bottom: 5px;
padding-top: 0;
min-height: 20px;
z-index: 1;
border: 0;
background-color: #fff;
border-radius: 0;
}
.extrabar .navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}
.extrabar .navbar-nav > li > a, .extrabar .navbar-nav > li > a:hover, .extrabar .navbar-nav > li > a:focus, .extrabar .navbar-nav > li > a:active {
padding: 5px;
color: #f00;
}
.extrabar .navbar-nav > .active > a, .extrabar .navbar-nav > .active > a:hover, .extrabar .navbar-nav > .active > a:focus, .extrabar .navbar-nav > .active > a:active {
padding: 5px;
color: #f00;
}
}
.affix {
top: 54px;
}
.img {
width: 100%; height: 400px; background-clip: border-box; background-origin: padding-box; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center;
}
@media screen and (min-width: 1025px) {
.img {
background-attachment: fixed;
background-repeat: no-repeat;
}
}
.img-title {
font-size: 36px; background-color: rgba(33, 33, 33, 0.2); color: #FFF; padding: 5px 50px; top: 10%; position: relative; font-family: 'Bree Serif', serif; text-shadow: rgba(33, 33, 33, 0.5) 0 2px 3px;
}
.img-title .right {
text-align: right;
}
.member-image {
width: 100%;
}
img {
max-width: 100%;
}
.carousel-inner > .item > img {
height: 500px; margin: 0 auto;
}
.carousel-caption {
color: #f00;
}
.sponsors {
text-align: center;
}
.sponsor-image {
max-height: 150px;
}
.sponsor-row {
margin: 15px 0;
}
.sponsorlogo {
padding: 5px; vertical-align: middle; display: inline-block;
}
.sponsorlogo img {
max-height: 100px;
}
.criterialist {
list-style-type: none;
}
.criterialist li:before {
font-family: 'FontAwesome'; margin: 0 5px 0 -15px;
}
.criterialist li.checked:before {
content: '';
}
.criterialist li.unchecked:before {
content: "";
}
.overview-section a {
position: absolute; bottom: 20px; background-color: #555; width: 50%; text-align: center; vertical-align: middle; left: 25%; height: 20px; color: #fff;
}
.mads-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 15%; left: 75%;
}
.viktor-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 22%; left: 18%;
}
.karolina-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 29%; left: 33%;
}
.linas-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 10%; left: 41%;
}
.tobias-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 15%; left: 10%;
}
.pernille-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 22%; left: 49%;
}
.scott-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 9%; left: 54%;
}
.vilhelm-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 6%; left: 33%;
}
.michael-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 15%; left: 85%;
}
.verena-tag {
position: absolute; width: 7%; height: 18%; border: 1px solid; top: 22%; left: 68%;
}