(282 intermediate revisions by 2 users not shown) | |||
Line 12: | Line 12: | ||
<!-- Theme CSS --> | <!-- Theme CSS --> | ||
<style> | <style> | ||
− | a:link { | + | |
− | color: | + | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ |
− | + | /* Clear the default wiki settings */ | |
+ | #home_logo, #sideMenu { display:none; } | ||
+ | #sideMenu, #top_title, .patrollink {display:none;} | ||
+ | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | ||
+ | body {background-color:white; } | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | |||
+ | /***************************************************** CUSTOM WIKI SETTINGS ****************************************************/ | ||
+ | |||
+ | #bodyContent a[href ^="https://"], .link-https { | ||
+ | padding-right: 16px; | ||
+ | color: white; !important! | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color: white; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: white; | ||
text-decoration: none; | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #bodyContent a[href ^="http://"], #bodyContent a[href ^="gopher://"] { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | #bodyContent a[href ^="https://"], .link-https { | ||
+ | padding-right: 16px; | ||
+ | color: white; | ||
} | } | ||
a:visited { | a:visited { | ||
− | color: | + | color: white; |
− | + | text-decoration: underline; | |
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | b, strong { | |
− | + | font-weight: 900; | |
− | + | font-size: 16px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | # | + | #HQ_page h1, h2, h3, h4, h5 { |
− | + | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; | |
− | + | } | |
− | + | ||
− | } | + | #HQ_page li { |
+ | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; | ||
+ | text-align: justify; | ||
+ | font-weight: 300; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | #HQ_page p { | ||
+ | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; | ||
+ | text-align: justify; | ||
+ | font-weight: 300; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | body, | ||
+ | html { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | body, | ||
+ | h1, | ||
+ | h2, | ||
+ | h3, | ||
+ | h4, | ||
+ | h5, | ||
+ | h6{ | ||
+ | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; | ||
+ | font-weight: 800; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | |||
+ | #HQ_page p { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | element.style ul{ | ||
+ | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; | ||
+ | font-weight: 700; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .topnav { | ||
+ | padding-top: 15px; | ||
+ | font-size: 14px; | ||
+ | min-height:60px; | ||
+ | background-color: #141414; | ||
+ | } | ||
+ | |||
+ | .lead { | ||
+ | font-size: 20px; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | .intro-header { | ||
+ | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ | ||
+ | padding-bottom: 50px; | ||
+ | text-align: center; | ||
+ | color: #141414; | ||
+ | background: url(../img/intro-bg.jpg) no-repeat center center; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | .intro-header2 { | ||
+ | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ | ||
+ | padding-bottom: 50px; | ||
+ | text-align: center; | ||
+ | color: #141414; | ||
+ | background: url(../img/intro2-bg.jpg) no-repeat center center; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | .intro-header3 { | ||
+ | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ | ||
+ | padding-bottom: 50px; | ||
+ | text-align: center; | ||
+ | color: #083F54; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png"); | ||
+ | background-repeat; | ||
+ | } | ||
+ | |||
+ | .intro-header4 { | ||
+ | padding-top: 50px; | ||
+ | padding-bottom: 50px; | ||
+ | /* text-align: center; */ | ||
+ | color: white; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png); | ||
+ | font-family: Helvetica; | ||
+ | font-weight: 200; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | .intro-message { | ||
+ | position: relative; | ||
+ | padding-top: 20%; | ||
+ | padding-bottom: 20%; | ||
+ | } | ||
+ | |||
+ | .intro-message2 { | ||
+ | position: relative; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .intro-message > h1 { | ||
+ | margin: 0; | ||
+ | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); | ||
+ | font-size: 5em; | ||
+ | } | ||
+ | |||
+ | .intro-divider { | ||
+ | width: 400px; | ||
+ | border-top: 1px solid #fff1cd; | ||
+ | border-bottom: 1px solid rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | .intro-message > h3 { | ||
+ | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); | ||
+ | } | ||
− | + | @media(max-width:767px) { | |
− | + | .intro-message { | |
− | + | padding-bottom: 15%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | .intro-message > h1 { | |
− | + | font-size: 3em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | font-size: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ul.intro-social-buttons > li { | |
− | + | display: block; | |
− | + | margin-bottom: 20px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
padding: 0; | padding: 0; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | ||
− | + | ul.intro-social-buttons > li:last-child { | |
− | + | margin-bottom: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | - | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .intro-divider { | |
− | + | width: 100%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | } | ||
+ | |||
+ | .network-name { | ||
+ | text-transform: uppercase; | ||
+ | font-size: 14px; | ||
+ | font-weight: 400; | ||
+ | letter-spacing: 2px; | ||
+ | } | ||
+ | |||
+ | .content-section-a { | ||
+ | border: url("https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png"); | ||
+ | padding: 30px 0; | ||
+ | background-color: #083F54; | ||
+ | margin: 30px; | ||
+ | } | ||
+ | |||
+ | .content-section-b { | ||
+ | border: url("https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png"); | ||
+ | padding: 30px 0; | ||
+ | background-color: #055A3A; | ||
+ | margin: 30px; | ||
+ | } | ||
+ | |||
+ | .section-heading { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | .section-heading-spacer { | ||
+ | float: left; | ||
+ | width: 200px; | ||
+ | border-top: 3px solid #fff1cd; | ||
+ | } | ||
+ | |||
+ | .section-heading-spacer2 { | ||
+ | float: center; | ||
+ | width: 200px; | ||
+ | border-top: 3px solid #fff1cd; | ||
+ | } | ||
+ | |||
+ | .banner { | ||
+ | padding: 100px 0; | ||
+ | color: #f8f8f8; | ||
+ | background: url(../img/intro2-bg.jpg) no-repeat center center; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | .banner h2 { | ||
+ | margin: 0; | ||
+ | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); | ||
+ | font-size: 3em; | ||
+ | } | ||
+ | |||
+ | .banner ul { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .banner-social-buttons { | ||
+ | float: right; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | @media(max-width:1199px) { | ||
ul.banner-social-buttons { | ul.banner-social-buttons { | ||
− | + | float: left; | |
+ | margin-top: 35px; | ||
} | } | ||
− | + | } | |
− | + | ||
− | margin- | + | @media(max-width:767px) { |
− | + | .banner h2 { | |
+ | margin: 0; | ||
+ | text-shadow: 2px 2px 3px rgba(0,0,0,0.6); | ||
+ | font-size: 3em; | ||
} | } | ||
− | + | ||
− | + | ul.banner-social-buttons > li { | |
display: block; | display: block; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
padding: 0; | padding: 0; | ||
− | + | } | |
− | + | ||
+ | ul.banner-social-buttons > li:last-child { | ||
margin-bottom: 0; | margin-bottom: 0; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | } | ||
+ | footer { | ||
+ | padding: 50px 0; | ||
+ | background-color: #f8f8f8; | ||
+ | } | ||
+ | p.copyright { | ||
+ | margin: 15px 0 0; | ||
+ | } | ||
+ | /* Dropdown Button */ | ||
+ | .dropbtn { | ||
+ | background-color: #141414; | ||
+ | color: white; | ||
+ | padding: 16px; | ||
+ | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; | ||
+ | font-size: 14px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | /* The container <div> - needed to position the dropdown content */ | ||
+ | .dropdown { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | /* Dropdown Content (Hidden by Default) */ | ||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #779DAB; | ||
+ | min-width: 160px; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | /* Links inside the dropdown */ | ||
+ | .dropdown-content a { | ||
+ | color: white; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | } | ||
+ | /* Change color of dropdown links on hover */ | ||
+ | .dropdown-content a:hover {background-color: #B7CBD3} | ||
+ | /* Show the dropdown menu on hover */ | ||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: block; | ||
+ | } | ||
+ | /* Change the background color of the dropdown button when the dropdown content is shown */ | ||
+ | .dropdown:hover .dropbtn { | ||
+ | background-color: #083F54; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .home { | ||
+ | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ | ||
+ | padding-bottom: 50px; | ||
+ | text-align: center; | ||
+ | color: #141414; | ||
+ | } | ||
+ | |||
+ | #df-header { | ||
+ | background: transparent!important; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #df-bg { | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | #bg-video { | ||
+ | background: url('https://static.igem.org/mediawiki/2017/d/dc/UCopenhagen_bg.mp4') no-repeat; | ||
+ | background-size: initial; | ||
+ | position: fixed; | ||
+ | z-index: -1; | ||
+ | left: 50%; | ||
+ | max-width: 100%; | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | z-index: -100; | ||
+ | transform: translateX(-50%) | ||
+ | } | ||
+ | |||
+ | .thumbnails img { | ||
+ | height: 80px; | ||
+ | border: 4px solid #555; | ||
+ | padding: 1px; | ||
+ | margin: 0 10px 10px 0; | ||
+ | } | ||
+ | |||
+ | .thumbnails img:hover { | ||
+ | border: 4px solid #00ccff; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .map-responsive{ | ||
+ | margin-top: 50px; | ||
+ | overflow:hidden; | ||
+ | padding-bottom:56.25%; | ||
+ | position:relative; | ||
+ | height:450px; | ||
+ | } | ||
+ | |||
+ | .map-responsive iframe{ | ||
+ | left:0; | ||
+ | top:0; | ||
+ | height:100%; | ||
+ | width:100%; | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
+ | .logo-navigation{ | ||
+ | float: right; | ||
+ | margin: -10px 5px; | ||
+ | } | ||
+ | |||
+ | .img-responsive{ | ||
+ | align-content: center; | ||
+ | width:600px; | ||
+ | height:300px; | ||
+ | } | ||
+ | |||
+ | .img-responsive1{ | ||
+ | align-content: center; | ||
+ | width:300px; | ||
+ | height:495px; | ||
+ | } | ||
+ | |||
+ | .img-responsive2{ | ||
+ | align-content: center; | ||
+ | width:400px; | ||
+ | height:400px; | ||
+ | transform: rotate(90deg); | ||
+ | } | ||
+ | |||
+ | .img-responsive3{ | ||
+ | width:500px; | ||
+ | height:350px; | ||
+ | } | ||
+ | |||
+ | .img-responsive4{ | ||
+ | width:325px; | ||
+ | height:490px; | ||
+ | } | ||
+ | |||
+ | .img-responsive5{ | ||
+ | width:350px; | ||
+ | height:400px; | ||
+ | } | ||
+ | |||
+ | .img-responsive6{ | ||
+ | width:400px; | ||
+ | height:325px; | ||
+ | } | ||
+ | |||
+ | .img-responsive7{ | ||
+ | width:100% !important; | ||
+ | } | ||
+ | |||
+ | .arrow-wrap { | ||
+ | position:absolute; | ||
+ | z-index:1; | ||
+ | left:50%; | ||
+ | top:-5em; | ||
+ | margin-left:-5em; | ||
+ | background:#111; | ||
+ | width:10em; | ||
+ | height:10em; | ||
+ | padding:4em 2em; | ||
+ | border-radius:50%; | ||
+ | font-size:0.5em; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .arrow { | ||
+ | float:left; | ||
+ | position:relative; | ||
+ | width: 0px; | ||
+ | height: 0px; | ||
+ | border-style: solid; | ||
+ | border-width: 3em 3em 0 3em; | ||
+ | border-color: white transparent transparent transparent; | ||
+ | -webkit-transform:rotate(360deg) | ||
+ | } | ||
+ | |||
+ | .arrow:after { | ||
+ | content:''; | ||
+ | position:absolute; | ||
+ | top:-3.2em; | ||
+ | left:-3em; | ||
+ | width: 0px; | ||
+ | height: 0px; | ||
+ | border-style: solid; | ||
+ | border-width: 3em 3em 0 3em; | ||
+ | border-color: #111 transparent transparent transparent; | ||
+ | -webkit-transform:rotate(360deg) | ||
+ | } | ||
− | + | .scrollnav-custom { | |
margin-bottom: 0; | margin-bottom: 0; | ||
border-bottom: 0px solid rgba(255, 255, 255, 0.3); | border-bottom: 0px solid rgba(255, 255, 255, 0.3); | ||
− | font-family: | + | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; |
background-color: black; | background-color: black; | ||
} | } | ||
Line 379: | Line 508: | ||
} | } | ||
.scrollnav-custom .scrollnav-brand { | .scrollnav-custom .scrollnav-brand { | ||
− | font-weight: | + | font-weight: 800; |
} | } | ||
.scrollnav-custom .scrollnav-brand img { | .scrollnav-custom .scrollnav-brand img { | ||
− | height: | + | height: 30px; |
} | } | ||
.scrollnav-custom .scrollnav-brand:focus { | .scrollnav-custom .scrollnav-brand:focus { | ||
Line 414: | Line 543: | ||
color: white; | color: white; | ||
} | } | ||
+ | |||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
.scrollnav-custom { | .scrollnav-custom { | ||
padding: 0; | padding: 0; | ||
− | + | background: #141414; | |
− | background: | + | border-bottom: 0px solid rgba(255, 255, 255, 0.3); |
− | border-bottom: | + | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; |
+ | min-height:30px; | ||
+ | |||
} | } | ||
} | } | ||
− | + | ||
− | + | /* Three columns side by side */ | |
− | } | + | .column { |
− | . | + | float: left; |
− | + | width: 33.3%; | |
− | + | margin-bottom: 16px; | |
+ | padding: 0 8px; | ||
+ | } | ||
+ | |||
+ | /* Display the columns below each other instead of side by side on small screens */ | ||
+ | @media (max-width: 650px) { | ||
+ | .column { | ||
+ | width: 100%; | ||
+ | display: block; | ||
+ | background-color: white; | ||
} | } | ||
+ | } | ||
+ | /* Add some shadows to create a card effect */ | ||
+ | .card { | ||
+ | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); | ||
+ | background-color: white; | ||
+ | } | ||
+ | /* Some left and right padding inside the container */ | ||
+ | .container{ | ||
+ | padding: 0 16px; | ||
+ | } | ||
+ | /* Clear floats */ | ||
+ | .container::after, .row::after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: table; | ||
+ | } | ||
+ | .title { | ||
+ | color: #838383; | ||
+ | } | ||
− | + | .button { | |
− | + | border: none; | |
− | + | outline: 0; | |
− | + | display: inline-block; | |
− | + | padding: 8px; | |
− | color: # | + | color: black; |
− | } | + | background-color: #141414; |
+ | text-align: center; | ||
+ | cursor: pointer; | ||
+ | width: 33.3%; | ||
+ | } | ||
− | + | .button:hover { | |
− | + | background-color: #555; | |
− | + | } | |
− | + | #HQ_page .button { | |
− | + | min-width: 25%; | |
− | + | max-width: 28%; | |
− | + | border: 3px solid #f58631; | |
− | + | color: #f58631; | |
− | } | + | background-color: #FFF; |
+ | height: 30px; | ||
+ | font-size: 15px; | ||
+ | text-align: center; | ||
+ | border-radius: 5p; | ||
+ | padding: 0px 5px 0px 5px; | ||
+ | margin: auto; | ||
+ | -webkit-transition: background 0.2s linear; | ||
+ | -moz-transition: background 0.2s linear; | ||
+ | -ms-transition: background 0.2s linear; | ||
+ | -o-transition: background 0.2s linear; | ||
+ | transition: background 0.2s linear; | ||
+ | } | ||
− | + | .team-img { | |
− | + | width:400px; | |
− | + | height:400px; | |
− | + | } | |
− | . | + | #globalWrapper { |
− | + | position: relative; | |
− | } | + | font-size: 100%; |
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .navbar-default { | ||
+ | background-color: #141414; | ||
+ | border-color: #141414; | ||
+ | } | ||
+ | |||
+ | #bodyContent a[href ^="https://"], .link-https { | ||
+ | padding-right: 16px; | ||
+ | background: white; | ||
+ | color: #333; | ||
+ | } | ||
+ | |||
+ | .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img { | ||
+ | display: block; | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | #HQ_page td { | ||
+ | padding: 10px; | ||
+ | border: 1px solid #ccc; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | background-color: white; | ||
+ | font-family: Helvetica; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #HQ_page th { | ||
+ | background-color: #f2f2f2; | ||
+ | padding: 10px; | ||
+ | color: black; | ||
+ | border: 1px solid #ccc; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | font-family: Helvetica; | ||
+ | font-weight: 501; | ||
+ | } | ||
+ | |||
+ | button, input, select, textarea { | ||
+ | font-family: Helvetica; | ||
+ | font-size: inherit; | ||
+ | background-color: black; | ||
+ | line-height: inherit; | ||
+ | } | ||
+ | |||
+ | caption { | ||
+ | padding-top: 8px; | ||
+ | padding-bottom: 8px; | ||
+ | color: white; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | /** LIGHTBOX MARKUP **/ | ||
+ | |||
+ | .lightbox { | ||
+ | /** Default lightbox to hidden */ | ||
+ | display: none; | ||
+ | |||
+ | /** Position and style */ | ||
+ | position: fixed; | ||
+ | z-index: 999; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | text-align: center; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | background: rgba(0,0,0,0.8); | ||
+ | } | ||
+ | |||
+ | .lightbox img { | ||
+ | /** Pad the lightbox image */ | ||
+ | max-width: 90%; | ||
+ | max-height: 80%; | ||
+ | margin-top: 5%; | ||
+ | } | ||
+ | |||
+ | .lightbox:target { | ||
+ | /** Remove default browser outline */ | ||
+ | outline: none; | ||
+ | |||
+ | /** Unhide lightbox **/ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .fblogo { | ||
+ | display: inline-block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | height: 200px; | ||
+ | } | ||
+ | |||
+ | #images{ | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { | ||
+ | color: #fff; | ||
+ | background-color: #083F54; | ||
+ | } | ||
+ | |||
+ | #sidebar { | ||
+ | width: 190px; | ||
+ | position: fixed; | ||
+ | margin-right: 410px; | ||
+ | } | ||
+ | |||
+ | .ui-widget { | ||
+ | border: 1px solid black; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ui-tooltip, .arrow:after { | ||
+ | background: white; | ||
+ | border: 1px solid white; | ||
+ | } | ||
+ | .ui-tooltip { | ||
+ | padding: 10px 20px; | ||
+ | color: black; | ||
+ | border-radius: 2px; | ||
+ | font: bold 14px "Helvetica Neue", Sans-Serif; | ||
+ | text-transform: uppercase; | ||
+ | box-shadow: 0 0 1px black; | ||
+ | border: 1px solid white !important; | ||
+ | } | ||
+ | .arrow { | ||
+ | width: 70px; | ||
+ | height: 16px; | ||
+ | overflow: hidden; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | margin-left: -35px; | ||
+ | bottom: -17px; | ||
+ | } | ||
+ | .arrow.top { | ||
+ | top: -17px; | ||
+ | bottom: auto; | ||
+ | } | ||
+ | .arrow.left { | ||
+ | left: 20%; | ||
+ | } | ||
+ | .arrow:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | left: 20px; | ||
+ | top: -20px; | ||
+ | width: 25px; | ||
+ | height: 25px; | ||
+ | box-shadow: 0 0 1px black; | ||
+ | -webkit-transform: rotate(45deg); | ||
+ | -moz-transform: rotate(45deg); | ||
+ | -ms-transform: rotate(45deg); | ||
+ | -o-transform: rotate(45deg); | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | .arrow.top:after { | ||
+ | bottom: -20px; | ||
+ | top: auto; | ||
+ | } | ||
+ | .hidden { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .fireTip { | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | |||
+ | .cart { | ||
+ | overflow:hidden; | ||
+ | padding:10px 3px; | ||
+ | background: yellow; | ||
+ | } | ||
− | |||
− | |||
− | |||
</style> | </style> | ||
+ | <!-- Theme JavaScript --> | ||
+ | |||
+ | <script> | ||
+ | // jQuery to collapse the navbar on scroll | ||
+ | function collapseNavbar() { | ||
+ | if ($(".navbar").offset().top > 50) { | ||
+ | $(".navbar-fixed-top").addClass("top-nav-collapse"); | ||
+ | $(".navbar-custom a").css("color", "white"); | ||
+ | $(".navbar-fixed-bottom").show(); | ||
+ | } else { | ||
+ | $(".navbar-fixed-top").removeClass("top-nav-collapse"); | ||
+ | $(".navbar-custom a").css("color", "black"); | ||
+ | $(".navbar-fixed-bottom").hide(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | $(window).scroll(collapseNavbar); | ||
+ | $(document).ready(collapseNavbar); | ||
+ | |||
+ | // jQuery for page scrolling feature - requires jQuery Easing plugin | ||
+ | $(function() { | ||
+ | $('a.page-scroll').bind('click', function(event) { | ||
+ | var $anchor = $(this); | ||
+ | $('html, body').stop().animate({ | ||
+ | scrollTop: $($anchor.attr('href')).offset().top | ||
+ | }, 1500, 'easeInOutExpo'); | ||
+ | event.preventDefault(); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | // Closes the Responsive Menu on Menu Item Click | ||
+ | $('.navbar-collapse ul li a').click(function() { | ||
+ | $(".navbar-collapse").collapse('hide'); | ||
+ | }); | ||
+ | |||
+ | function showhide(id) { | ||
+ | var e = document.getElementById(id); | ||
+ | e.style.display = (e.style.display == 'block') ? 'none' : 'block'; | ||
+ | } | ||
+ | |||
+ | $(function() { | ||
+ | |||
+ | var $sidebar = $("#sidebar"), | ||
+ | $window = $(window), | ||
+ | offset = $sidebar.offset(), | ||
+ | topPadding = 15; | ||
+ | |||
+ | $window.scroll(function() { | ||
+ | if ($window.scrollTop() > offset.top) { | ||
+ | $sidebar.stop().animate({ | ||
+ | marginTop: $window.scrollTop() - offset.top + topPadding | ||
+ | }); | ||
+ | } else { | ||
+ | $sidebar.stop().animate({ | ||
+ | marginTop: 0 | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | $(window).load(function() { | ||
+ | $('li.notebook').addClass('active'); | ||
+ | $('li.n_over').addClass('active'); | ||
+ | |||
+ | $(".affix").css("width", $("#parent").width()); | ||
+ | }); | ||
+ | |||
+ | $(window).scroll(function() { | ||
+ | $(".affix").css("width", $("#parent").width()); | ||
+ | }); | ||
+ | |||
+ | $(window).resize(function() { | ||
+ | $(".affix").css("width", $("#parent").width()); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $(function() { | ||
+ | $( document ).tooltip({ | ||
+ | items: "input", | ||
+ | content: function() { | ||
+ | return $('.myPopover').html(); | ||
+ | }, | ||
+ | position: { | ||
+ | my: "center bottom-20", | ||
+ | at: "center top", | ||
+ | using: function( position, feedback ) { | ||
+ | $( this ).css( position ); | ||
+ | $( "<div>" ) | ||
+ | .addClass( "arrow" ) | ||
+ | .addClass( feedback.vertical ) | ||
+ | .addClass( feedback.horizontal ) | ||
+ | .appendTo( this ); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | $('.fireTip').click(function () { | ||
+ | if(!$(this).hasClass('open')) { | ||
+ | $('#age').trigger('mouseover'); | ||
+ | $(this).addClass('open'); | ||
+ | } else { | ||
+ | $('#age').trigger('mouseout'); | ||
+ | $(this).removeClass('open'); | ||
+ | } | ||
+ | |||
+ | }) | ||
+ | |||
+ | }); | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | $("#masterclass-popover").popover({ | ||
+ | html : true, | ||
+ | placement: 'bottom', | ||
+ | title: $("#masterclass-popover-head").html(), | ||
+ | content: $("#masterclass-popover-content").html() | ||
+ | }); | ||
+ | |||
+ | $("small.download-notice a").click(function(e) { | ||
+ | e.preventDefault(); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | $(document).on("click", ".tooltip", function() { | ||
+ | $(this).tooltip( | ||
+ | { | ||
+ | items: ".tooltip", | ||
+ | content: function(){ | ||
+ | return $(this).data('description'); | ||
+ | }, | ||
+ | close: function( event, ui ) { | ||
+ | var me = this; | ||
+ | ui.tooltip.hover( | ||
+ | function () { | ||
+ | $(this).stop(true).fadeTo(400, 1); | ||
+ | }, | ||
+ | function () { | ||
+ | $(this).fadeOut("400", function(){ | ||
+ | $(this).remove(); | ||
+ | }); | ||
+ | } | ||
+ | ); | ||
+ | ui.tooltip.on("remove", function(){ | ||
+ | $(me).tooltip("destroy"); | ||
+ | }); | ||
+ | }, | ||
+ | } | ||
+ | ); | ||
+ | $(this).tooltip("open"); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
<!-- Navigation --> | <!-- Navigation --> | ||
− | <nav class="navbar navbar- | + | <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> |
− | + | <div class="container topnav"> | |
− | + | <!-- Brand and toggle get grouped for better mobile display --> | |
− | + | <div class="navbar-header"> | |
− | + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
− | + | <span class="sr-only">Toggle navigation</span> | |
− | + | <span class="icon-bar"></span> | |
− | inCell | + | <span class="icon-bar"></span> |
− | </a> | + | <span class="icon-bar"></span> |
+ | </button> | ||
+ | |||
+ | <a class="navbar-brand topnav" href="https://2017.igem.org/Team:UCopenhagen"> | ||
+ | <img class="logo-navigation" border="0" alt="inCell-logo" src="https://static.igem.org/mediawiki/2017/f/f2/UCopenhagen_logo.png" width="120" height="120" alt=""> | ||
+ | </a> | ||
+ | </div> | ||
+ | <!-- Collect the nav links, forms, and other content for toggling --> | ||
+ | <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | ||
+ | <ul class="nav navbar-nav navbar-right"> | ||
+ | <li> | ||
+ | <div class="dropdown"> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Project"><button class="dropbtn">Project</button></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Project">Project description</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Interdependency">Interdependency</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Number-Control">Number control</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Protein-Import">Protein import</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Results">Results</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Parts">Parts</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Model">Modelling</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/InterLab">Interlab</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="dropdown"> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Safety"><button class="dropbtn">Safety & Labnotes</button></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Safety">Safety</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Notebook">Notebook</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Protocols">Protocols</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Improve">Improve</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="dropdown"> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Team"><button class="dropbtn">People</button></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Team">Team</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Attributions">Attributions</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/Collaborations">Collaborations</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="dropdown"> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/HP"><button class="dropbtn">Human Practices</button></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/HP/Silver">Overview</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/HP/Ethics">Ethics</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/HP/Gold_Integrated">Integrated</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/HP/Events">Events</a> | ||
+ | <a href="https://2017.igem.org/Team:UCopenhagen/HP/Media">Media</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!-- /.navbar-collapse --> | ||
</div> | </div> | ||
+ | <!-- /.container --> | ||
+ | </nav> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Latest revision as of 03:57, 2 November 2017