Difference between revisions of "Team:Dundee/style"
(52 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
− | |||
− | |||
<style type="text/css"> | <style type="text/css"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | /* hiding the top section*/ | ||
+ | #top-section{ | ||
+ | height:0px; | ||
+ | border:none; | ||
+ | width:100%; | ||
+ | margin:0 auto; | ||
+ | padding:0; | ||
+ | background-color:transparent; | ||
+ | } | ||
+ | |||
+ | #p-logo { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #globalWrapper, #content { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | font-size: 100%; | ||
+ | } | ||
+ | |||
+ | #search-controls{ | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #top { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .firstHeading { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | h1, h2, h3, h4 { | ||
+ | border: none; | ||
+ | color: #d6d6d6; | ||
+ | } | ||
+ | |||
+ | #bodyContent h1, #bodyContent h2 { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | /* end of hiding the top section*/ | ||
+ | |||
+ | /* global setting*/ | ||
+ | |||
+ | #globalWrapper{ | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | right:0px; | ||
+ | width:100%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | height:100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | #content{ | ||
+ | background-color: transparent; | ||
+ | border:none; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | padding:0 | ||
+ | top:-40px; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | #bodyContent{ | ||
+ | background-color:transparent; | ||
+ | border:none; | ||
+ | |||
+ | } | ||
+ | .siteSub{ | ||
+ | display:none; | ||
+ | border:none; | ||
+ | } | ||
+ | .contentSub{ | ||
+ | display:none; | ||
+ | } | ||
+ | /* end of global setting*/ | ||
+ | |||
+ | |||
+ | /* Page Start */ | ||
+ | |||
+ | html, body, div, h1, h2, h3, h4, span, .btn { | ||
+ | font-family: 'roboto'; | ||
+ | line-height: 1.75; | ||
+ | } | ||
+ | |||
+ | |||
+ | html, body { | ||
+ | margin: auto; | ||
+ | padding: 0px; | ||
+ | color: #d6d6d6; | ||
+ | } | ||
+ | p { | ||
+ | color: #d6d6d6; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | padding-right: 15px; /*15px in bootstrap.css*/ | ||
+ | padding-left: 15px; /*idem*/ | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | } | ||
− | |||
body { | body { | ||
− | + | background:url(https://static.igem.org/mediawiki/2015/f/f2/Dundee15-background.png) repeat; | |
− | + | color: #e9e9e9; | |
− | + | /*background: -webkit-linear-gradient(#606060, #121212); | |
− | + | background: -moz-linear-gradient(#606060, #121212); | |
− | + | background: linear-gradient(#606060, #121212);*/ | |
− | + | padding-top: 70px; | |
− | } | + | font-family: 'cambria'; |
+ | font-size: 16px; | ||
+ | |||
+ | } | ||
+ | h1, h2, h3, h4, h5, h6, p { | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | header > h3 { | ||
+ | color:#FFF; | ||
+ | font-size: 25px; | ||
} | } | ||
+ | body h1 { | ||
+ | color: #339966; | ||
+ | padding-top: -15px; | ||
+ | } | ||
− | + | body h2 { | |
+ | color: #339966; | ||
+ | margin-top: -20px; | ||
+ | padding-top: -15px; | ||
+ | } | ||
− | + | body h4 { | |
+ | color: #339966; | ||
+ | } | ||
− | . | + | .container h3 { |
− | + | color: #339966; | |
− | + | ||
} | } | ||
− | . | + | .container li { |
− | + | color: #e9e9e9; | |
− | + | ||
} | } | ||
− | + | ||
− | + | /** FONTS **/ | |
+ | @font-face { | ||
+ | font-family: typewriter; | ||
+ | src: url(https://static.igem.org/mediawiki/2015/5/5a/DUNDEE15-Bohemian-typewriter.ttf) format('truetype'); | ||
} | } | ||
− | + | ||
− | + | ||
− | + | @font-face { | |
− | + | font-family: roboto; | |
− | + | src: url('https://static.igem.org/mediawiki/2015/4/41/RobotoSlab-Light.ttf') format('truetype'); | |
} | } | ||
− | + | ||
− | + | @font-face { | |
− | + | font-family: 'FontAwesome'; | |
+ | src: url('https://static.igem.org/mediawiki/2015/6/60/Dundee15-fafont.ttf') format('truetype'); | ||
+ | |||
} | } | ||
− | + | ||
− | . | + | |
+ | /* HEADER */ | ||
+ | header { | ||
+ | height: 700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top: 50px; | ||
+ | } | ||
+ | |||
+ | #header-home { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/d/d6/Header-home.jpg) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-chromate { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/5/5c/Header-chromate.JPG) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-modelling { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/8/81/Header-modelling.JPG) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-modelling-appendix { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/5/5b/Header-modelling-appendix.JPG) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-lab { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/3/3a/Header-lab.JPG) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-tubes { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/1/1a/Header-tubes.JPG) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-purify { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/6/60/Header-purify.JPG) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-fingerprint { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/8/8f/Ft-fingerprint.JPG) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-ethics { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/2/2b/Header-ethics.jpg) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | #header-bottles { | ||
+ | background:url(https://static.igem.org/mediawiki/2015/0/06/Header-bottles.JPG) no-repeat; | ||
+ | height:700px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, left 80%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | highlight { | ||
+ | background-color: black; | ||
color: white; | color: white; | ||
− | + | padding-left:10px; | |
+ | padding-right:10px; | ||
+ | line-height: | ||
+ | } | ||
+ | .highlight { | ||
+ | font-family: typewriter; | ||
} | } | ||
− | + | @media (max-width: 450px) { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | # | + | @media (min-width: 451px) { |
− | background-color: # | + | header h1 { |
− | + | font-size: 60px; | |
− | + | margin-top: 120px; | |
+ | } | ||
+ | header h3 { | ||
+ | margin-top:-55px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 450px) { | ||
+ | header h1 { | ||
+ | line-height: 1.8; | ||
+ | } | ||
+ | header h3 { | ||
+ | line-height: 1.8; | ||
+ | } | ||
+ | header h1 { | ||
+ | font-size: 40px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | /* END OF HEADER */ | ||
+ | |||
+ | /** NAVBAR **/ | ||
+ | .dropdown-header { | ||
+ | font-size: 18px; | ||
+ | font-weight: 900; | ||
+ | color: #c1c1c1; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .dropdown:active { | ||
+ | background-color: none; | ||
+ | } | ||
+ | |||
+ | .dropdown-menu>li>a { | ||
+ | font-weight: bold; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .dropdown-menu>li>a:hover { | ||
+ | background-color: #339966; | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | .igem-navbar { | ||
+ | padding-top: 5px; | ||
+ | } | ||
+ | |||
+ | .navbar-logo { | ||
float:left; | float:left; | ||
− | + | padding-top: 12px; | |
+ | } | ||
+ | |||
+ | @media (max-width: 800px) { | ||
+ | .navbar-logo { | ||
+ | display:none; | ||
+ | } | ||
+ | .igem-navbar { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | #nav.affix { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | z-index:10; | ||
+ | } | ||
+ | |||
+ | /** END OF NAVBAR **/ | ||
+ | |||
+ | |||
+ | #about { | ||
+ | padding-top: 30px; | ||
+ | padding-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #about .row { | ||
+ | |||
margin-bottom: 0px; | margin-bottom: 0px; | ||
− | + | text-align: center; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | #about .glyphicon { | ||
+ | font-size: 32px; | ||
+ | color: #FFFFFF; | ||
+ | margin-bottom: 10px; | ||
+ | border: 1px solid transparent; | ||
+ | width: 80px; | ||
+ | border-radius: 100%; | ||
+ | padding-top: 22px; | ||
+ | padding-bottom: 22px; | ||
+ | background: #333333; | ||
+ | } | ||
+ | .col-lg-4 { | ||
+ | padding-right:50px; | ||
+ | padding-left:50px; | ||
+ | } | ||
+ | #about ` { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .selection-title { | ||
+ | text-align: center; | ||
+ | margin-top: 20px; | ||
+ | |||
+ | } | ||
+ | #about .glyphicon { | ||
+ | -webkit-transition:0.3s; | ||
+ | -moz-transition:0.3s; | ||
+ | -o-transition:0.3s; | ||
+ | transition:0.3s; | ||
− | # | + | } |
− | background-color: # | + | |
+ | #about .col-md-3:hover .glyphicon { | ||
+ | border: 1px solid transparent; | ||
+ | background: #E8E8E8; | ||
+ | color: #585858; | ||
+ | } | ||
+ | |||
+ | #about .col-lg-4:hover .glyphicon { | ||
+ | border: 1px solid #E8E8E8; | ||
+ | background: #E8E8E8; | ||
+ | color: #585858; | ||
+ | } | ||
+ | |||
+ | #about .col-lg-3:hover .glyphicon { | ||
+ | border: 1px solid transparent; | ||
+ | background: #E8E8E8; | ||
+ | color: #585858; | ||
+ | } | ||
+ | #about2 { | ||
+ | padding-top: 180px; | ||
+ | padding-bottom: 50px; | ||
+ | background: #eaeaea; | ||
+ | text-align: right; | ||
+ | |||
+ | -moz-transition:0.3s; | ||
+ | -o-transition:0.3s; | ||
+ | transition:0.3s; | ||
+ | } | ||
+ | #about2 .glyphicon { | ||
+ | font-size: 32px; | ||
+ | color: #585858; | ||
+ | margin-bottom: 10px; | ||
+ | border: 1px solid #AAA; | ||
+ | width: 80px; | ||
+ | border-radius: 100%; | ||
+ | padding-top: 22px; | ||
+ | padding-bottom: 22px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .about-content { | ||
+ | color: #CCC; | ||
+ | } | ||
+ | |||
+ | #submenu-gradient { | ||
+ | background: yellow; | ||
+ | } | ||
+ | |||
+ | #about3 { | ||
+ | |||
+ | /*background-color: rgba(0,0,0,0);*/ | ||
+ | /*background-image: | ||
+ | radial-gradient( | ||
+ | #969696, | ||
+ | #626262 | ||
+ | ); | ||
+ | /*background: url(../img/bg-about.jpg) no-repeat;*/ | ||
+ | padding-top: 40px; | ||
+ | padding-bottom: 40px; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | #about3 .glyphicon { | ||
+ | font-size: 22px; | ||
+ | margin-bottom: 10px; | ||
+ | background-color: #333333; | ||
+ | width: 80px; | ||
+ | border-radius: 100%; | ||
+ | padding:28px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #about3 .row { | ||
+ | margin-bottom: 40px; | ||
+ | } | ||
+ | #about3 h4 { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | /** FOOTER AND SPONSORS **/ | ||
+ | footer { | ||
+ | background: #333333; | ||
+ | padding-top: 40px; | ||
+ | padding-bottom: 40px; | ||
+ | padding-left: 30px; | ||
+ | padding-right: 10px; | ||
+ | color: #ffffff; | ||
+ | font-weight: 100; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .footer-btn { | ||
+ | margin-top: 40px; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 767px) { | ||
+ | footer { | ||
+ | padding-top: 40px; | ||
+ | padding-bottom: 40px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | } | ||
+ | #sponsor { | ||
+ | text-align: center; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | } | ||
+ | #sponsor-logo { | ||
+ | padding-top: 50px; | ||
+ | height:auto; | ||
+ | width:60%; | ||
+ | } | ||
+ | @media (max-width: 900px) { | ||
+ | #sponsor-logo { | ||
+ | padding-top: 15px; | ||
+ | height:auto; | ||
+ | width:200px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /** END OF FOOTER AND SPONSORS **/ | ||
+ | |||
+ | |||
+ | @media only screen and (max-width: 480px) { | ||
+ | .btn-lg { | ||
+ | margin-bottom: 10px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | } | ||
+ | .pull-right { | ||
+ | display: none; | ||
+ | } | ||
+ | #about .row .col-md-3 { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | #about2, #about3 .btn { | ||
+ | width: 100%; | ||
+ | } | ||
+ | #about3 { | ||
+ | text-align: center; | ||
+ | } | ||
+ | #about-section1 { | ||
+ | text-align:center; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | #page-wrap { | ||
+ | max-width: 1280px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* PAGE; TOPIC 1 */ | ||
+ | |||
+ | #about-section1 { | ||
+ | background: url() no-repeat; | ||
+ | padding-top: 40px; | ||
+ | padding-bottom: 40px; | ||
+ | padding-top: 50px; | ||
+ | padding-bottom: 50px; | ||
+ | } | ||
+ | |||
+ | headert1 { | ||
+ | background:url(../img/bg-header.jpg) no-repeat; | ||
+ | height:700px; | ||
+ | width:100%; | ||
+ | padding-top:50px; | ||
color: #fff; | color: #fff; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | /** BUTTON NAVIGATION ANCHORS. PREVENTS OVERLAP OF NAVBAR ON TOP OF CONTENT **/ | ||
+ | a.anchor { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | top: -75px; | ||
+ | visibility: hidden; | ||
+ | } | ||
− | + | a.anchorselection { | |
− | + | display: block; | |
− | + | position: relative; | |
− | + | top: -45px; | |
− | + | visibility: hidden; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | /** PAGE NAVIGATION BUTTONS (EXCLUDING HOMEPAGE) **/ | ||
+ | |||
+ | .fa { | ||
+ | position: relative; | ||
+ | top: 1px; | ||
+ | display: inline-block; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | line-height: 1; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | /** LABJOURNAL STYLES **/ | |
− | + | ||
− | + | @media only screen and (max-width: 768px) { | |
+ | .box-btn { | ||
+ | margin-top: -15%; | ||
+ | margin-right: 15px; | ||
float: right; | float: right; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | } | ||
− | + | .border, .border-week, .border-day { | |
+ | border: 2px solid gray; | ||
+ | } | ||
+ | .border { | ||
+ | margin-top: 5px; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
− | + | .border-week { | |
+ | margin-top: 20px; | ||
+ | background-color: transparent; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | .border-day { | ||
+ | width: 97%; | ||
+ | float: right; | ||
+ | border: 2px solid black; | ||
+ | background-color: #2b2b2b; | ||
+ | margin-bottom: 0px; | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | .box-btn { | ||
+ | margin: 10px; | ||
+ | float: right; | ||
+ | clear: both; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .biospray-btn { | ||
+ | margin: 5px; | ||
+ | float: right; | ||
+ | clear: both; | ||
+ | } | ||
+ | .box-title { | ||
+ | font-size: 30px; | ||
+ | width: 85%; | ||
+ | margin-top: 10px; | ||
+ | margin-left: 10px; | ||
+ | display: inline-block; | ||
+ | color: #d6d6d6; | ||
+ | } | ||
+ | .biospray-content { | ||
+ | margin-left: 10px; | ||
+ | padding-left: 5px; | ||
+ | padding-right: 15px; | ||
+ | padding-bottom: 0px; | ||
+ | margin-right: 0px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | .week-content { | ||
+ | margin-left: 10px; | ||
+ | padding-left: 5px; | ||
+ | padding-right: 50px; | ||
+ | padding-bottom: 0px; | ||
+ | margin-right: 0px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | .box-content { | ||
+ | margin-left: 10px; | ||
+ | padding-left: 5px; | ||
+ | padding-right: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | margin-right: 20px; | ||
+ | margin-bottom: 0px; | ||
+ | text-align:left; | ||
+ | clear: right; | ||
+ | color: #d6d6d6; | ||
+ | } | ||
+ | #biospray-title { | ||
+ | margin-top: 20px; | ||
+ | margin-left: 10px; | ||
+ | font-size:35px; | ||
+ | padding-left:0px; | ||
+ | display: inline-block; | ||
+ | padding-bottom: 15px; | ||
+ | color: #d6d6d6; | ||
+ | } | ||
+ | .labtitle { | ||
+ | margin-top: 0px; | ||
+ | font-size:35px; | ||
+ | text-align:center; | ||
+ | padding-left:10px; | ||
+ | padding-bottom: 0px; | ||
+ | display: inline-block; | ||
+ | color: #d6d6d6; | ||
+ | } | ||
+ | .journal-summary-heading { | ||
+ | color: #669966; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | .journal-content { | ||
+ | color: #d6d6d6; | ||
+ | } | ||
+ | .journal-protocol, .journal-protocol:hover { | ||
+ | color: #669966; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .box-btn.glyphicon { | ||
+ | font-size: 2em; | ||
+ | color: #d6d6d6; | ||
+ | -webkit-transition:0.3s; | ||
+ | -moz-transition:0.3s; | ||
+ | -o-transition:0.3s; | ||
+ | transition:0.3s; | ||
− | + | } | |
− | + | .box-btn.glyphicon:hover { | |
− | + | color: #669966; | |
− | + | } | |
− | + | .biospray-btn.glyphicon:hover { | |
− | + | color: #669966; | |
+ | } | ||
+ | /** END OF LABJOURNAL **/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | /** GENERAL PAGE STRUCTURE **/ | ||
+ | |||
+ | .ribbon { | ||
+ | background-color: transparent; | ||
+ | padding-right: 0px; | ||
+ | padding-left: 0px; | ||
+ | } | ||
+ | .rows { | ||
+ | padding: 20px; | ||
+ | padding-bottom: 80px; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | .rows > .btn { | ||
+ | margin-bottom: 15px; | ||
+ | } | ||
+ | .row1, .row2, .row3, .row4, .row5, .row6 { | ||
+ | margin-top: 10px; | ||
+ | margin-bottom:10px; | ||
+ | margin-left:30px; | ||
+ | margin-right:20px; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | ul .dropdown-menu { | ||
+ | right:0; | ||
+ | } | ||
+ | .btn .btn-info .col-sm-1 .box-btn { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .btn-info { | ||
+ | background-color: #339966; | ||
+ | |||
+ | } | ||
+ | |||
+ | a:link, a:visited, a:active, a { | ||
+ | outline: 0; | ||
+ | color: white; | ||
+ | text-decoration: none !important; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | e { | ||
+ | font-size: 120%; | ||
+ | color: white; | ||
+ | font-weight: 450; | ||
+ | } | ||
+ | /** END OF GENERAL PAGE STRUCTURE **/ | ||
+ | |||
+ | /** MODAL THEMES **/ | ||
+ | |||
+ | .modal { | ||
+ | top: 70px; | ||
+ | } | ||
+ | |||
+ | .modal-body, .modal-title { | ||
+ | color: black !important; | ||
+ | } | ||
+ | |||
+ | .modal-body p { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .modal-title a { | ||
+ | color: blue !important; | ||
+ | } | ||
+ | |||
+ | body.modal-open { | ||
+ | overflow: visible; | ||
+ | } | ||
+ | /** END OF MODAL THEMES **/ | ||
+ | |||
+ | |||
+ | /** TABLE **/ | ||
+ | table, th, td { | ||
+ | border: 1px solid #339966 !important; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | .modal > table, th, td { | ||
+ | border: 1px solid black; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | /** END OF TABLE **/ | ||
+ | |||
+ | |||
+ | |||
+ | #sponsor-logo { | ||
+ | padding-top: 50px; | ||
+ | height:60%; | ||
+ | width:60%; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 992px) { | ||
+ | #sponsor-logo { | ||
+ | padding-top: 15px; | ||
+ | height:100%; | ||
+ | width:200px; | ||
+ | } | ||
+ | .igem-navbar { | ||
+ | display:none; | ||
+ | } | ||
+ | .navbar-logo { | ||
+ | display: none; | ||
+ | } | ||
+ | .navbar-brand { | ||
+ | display:none; | ||
+ | } | ||
+ | .button-center { | ||
+ | margin-bottom: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1200px) { | ||
+ | .navbar-logo { | ||
+ | display: none; | ||
+ | } | ||
+ | .igem-navbar { | ||
+ | display:none; | ||
+ | } | ||
+ | .navbar-brand { | ||
+ | padding: 15px 5px; | ||
+ | } | ||
+ | .intro-video { | ||
+ | width: 80%; | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | /** PAGE BREAKING IMAGES **/ | ||
+ | .splash { | ||
+ | background:url(../img/splash/modelling.JPG) no-repeat; | ||
+ | height:300px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | |||
+ | .ft-biospray { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/8/8f/Ft-biospray.JPG) no-repeat; | ||
+ | height:300px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | .ft-fingerprint { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/8/8f/Ft-fingerprint.JPG) no-repeat; | ||
+ | height:300px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | .ft-chromate { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/2/22/Ft-chromate.JPG) no-repeat; | ||
+ | height:300px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | |||
+ | .splash-duran { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/6/68/Splash-duran.JPG) no-repeat; | ||
+ | height:300px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | .splash-tank { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/8/8f/Splash-tank.JPG) no-repeat; | ||
+ | height:300px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | .splash-pour { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/f/f5/Splash-pour.JPG) no-repeat; | ||
+ | height:300px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | .splash-incubator { | ||
+ | background: url(https://static.igem.org/mediawiki/2015/2/2e/Splash-incubator.JPG) no-repeat; | ||
+ | height:300px; | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | padding-top:50px; | ||
+ | color: #fff; | ||
+ | background-position: center center; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-attachment: scroll; | ||
+ | } | ||
+ | |||
+ | |||
+ | .page-break { | ||
+ | border-style: solid; | ||
+ | border-bottom: thin solid #FFF; | ||
+ | margin-bottom: 50px; | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | |||
+ | .caption-center { | ||
+ | text-align: center; | ||
+ | } | ||
+ | /** END OF PAGE BREAKING IMAGES**/ | ||
+ | |||
+ | /** SEQUENCES PAGE **/ | ||
+ | |||
+ | .modal-body p { | ||
+ | word-wrap: break-word; | ||
+ | } | ||
+ | |||
+ | .sequences { | ||
+ | word-wrap: break-word; | ||
+ | } | ||
+ | |||
+ | /** END OF SEQUENCES **/ | ||
+ | |||
+ | /** FIGURE STYLES **/ | ||
+ | |||
+ | figure { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | figure figcaption p { | ||
+ | font-size: .9em !important; | ||
+ | } | ||
+ | @media (max-width: 992px) { | ||
+ | figure img { | ||
+ | width: 80%; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | figure figcaption { | ||
+ | width: 80%; | ||
+ | text-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | figure1 img { | ||
+ | width: 80%; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | figure1 figcaption { | ||
+ | width: 80%; | ||
+ | text-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 993px) { | ||
+ | figure img { | ||
+ | width: 650px; | ||
+ | text-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | figure figcaption { | ||
+ | width: 650px; | ||
+ | text-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .col-md-6 figure img { | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .col-md-6 figure figcaption { | ||
+ | width:100%; | ||
+ | text-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | figure1 img { | ||
+ | width: 30%; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | figure1 figcaption { | ||
+ | width: 30%; | ||
+ | text-align: center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background-color: #2b2b2b; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | .intro-video { | ||
+ | width: 60%; | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .btn-margin { | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | /** END OF FIGURE STYLES **/ | ||
+ | |||
+ | </style> | ||
</html> | </html> |
Latest revision as of 22:25, 18 September 2015