Difference between revisions of "Team:Freiburg/PaP/ScienceFair"
Line 1: | Line 1: | ||
− | |||
− | |||
− | |||
− | |||
<html> | <html> | ||
<style> | <style> | ||
− | |||
+ | /* ============= Resetting css coming from wiki itself ============= */ | ||
+ | body { | ||
+ | font: sans-serif; | ||
+ | color: #000; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | background-color: #AAA; | ||
+ | line-height: 1.8; | ||
+ | } | ||
− | + | a { | |
+ | color: #002BB8; | ||
+ | text-decoration: none; | ||
+ | background: transparent none repeat scroll 0% 0%; | ||
+ | } | ||
− | + | p { | |
− | + | margin: 0.4em 0px 0.5em; | |
− | + | line-height: 1.5em; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #globalWrapper { | |
− | # | + | position: absolute; |
− | + | font-size: 150%; | |
− | + | width: 100%; | |
+ | margin: 0px; | ||
+ | padding: 0px 0px 0px; | ||
} | } | ||
− | + | #mainContainer { | |
− | # | + | margin: 0; |
− | + | width: 100%; | |
− | + | ||
− | + | ||
} | } | ||
− | + | #top_menu_under { | |
− | # | + | position: relative; |
− | + | width: 100%; | |
− | + | height: 16px; | |
− | + | border-bottom: 2px solid #000; | |
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | # | + | #top_menu_14 { |
− | + | position: fixed; | |
− | + | width: 100%; | |
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | height: 16px; | ||
+ | background-color: #383838; | ||
+ | border-bottom: 2px solid #000; | ||
+ | z-index: 9999; | ||
} | } | ||
− | |||
− | |||
− | # | + | #top_menu_inside { |
− | + | display: block; | |
− | + | position: relative; | |
+ | width: 900px; | ||
+ | height: 100%; | ||
+ | margin: 0px auto; | ||
+ | padding: 0px 10px; | ||
+ | border-left: 1px solid #C8C8C8; | ||
+ | border-right: 1px solid #C8C8C8; | ||
+ | font-family: "arial",sans-serif; | ||
+ | font-size: 12px; | ||
+ | font-weight: 400; | ||
+ | color: #FFF; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | # | + | #content { |
− | + | position: relative; | |
− | - | + | width: 100%; |
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: #FFF none repeat scroll 0% 0%; | ||
+ | color: #000; | ||
+ | border-left: 0; | ||
+ | border-right: 0; | ||
+ | /* line-height: 0; */ | ||
+ | z-index: 2; | ||
− | |||
− | + | } | |
− | + | .visualClear { | |
− | + | clear: both; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | /* ============= END: Resetting css coming from wiki itself ============= */ | |
− | + | ||
− | + | ||
− | + | /* ============= Declare Fonts for non-Windows machines ============= */ | |
− | + | ||
− | + | ||
− | + | @font-face { | |
− | + | font-family: Candara; | |
+ | src: url(https://static.igem.org/mediawiki/2015/6/6c/Freiburg_Candara.ttf) format('truetype'); | ||
+ | |||
} | } | ||
− | @- | + | @font-face { |
− | + | font-family: Candara; | |
− | + | src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Candarab.ttf) format('truetype'); | |
− | + | font-weight: bold; | |
− | + | font-style: normal; | |
− | + | } | |
− | + | @font-face { | |
− | + | font-family: Candara; | |
− | + | src: url(https://static.igem.org/mediawiki/2015/3/3e/Freiburg_Candarai.ttf) format('truetype'); | |
+ | font-weight: normal; | ||
+ | font-style: italic; | ||
} | } | ||
− | @- | + | @font-face { |
− | + | font-family: Roboto; | |
− | + | src: url(https://static.igem.org/mediawiki/2015/c/c3/Freiburg_Roboto-Regular.ttf) format('truetype'); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | @font-face { | ||
+ | font-family: Roboto; | ||
+ | src: url(https://static.igem.org/mediawiki/2015/6/64/Freiburg_Roboto-Light.ttf) format('truetype'); | ||
+ | font-style: normal; | ||
+ | font-weight: 300; | ||
+ | |||
+ | } | ||
+ | @font-face { | ||
+ | font-family: Roboto; | ||
+ | src: url(https://static.igem.org/mediawiki/2015/b/b9/Freiburg_Roboto-Bold.ttf) format('truetype'); | ||
+ | font-weight: bold; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: Roboto; | ||
+ | src: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_Roboto-Italic.ttf) format('truetype'); | ||
+ | font-weight: normal; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: Roboto; | ||
+ | src: url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf) format('truetype'); | ||
+ | font-weight: bold; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* ============= END: Declare Fonts for non-Windows machines ============= */ | ||
+ | |||
+ | |||
+ | |||
+ | /* ============= CSS for Menubar ============= */ | ||
+ | #menubar { | ||
+ | font-size: 16px; | ||
+ | background-color: #5781bd; | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | height: 70px; | ||
+ | border-collapse: collapse; | ||
+ | border: none; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | /*The sub (and subsubs) items of the menu*/ | |
− | + | #menubar ul li ul li{ | |
− | + | width: 200px; | |
− | + | height: 30px; | |
− | + | margin-top: 2px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | /*The first (horizontal) line of menu items*/ | ||
+ | #menubar > ul{ | ||
− | + | position: relative; | |
− | + | margin-top: 25; | |
− | + | left: 50%; | |
− | + | display: block; | |
− | + | transform: translate(-50%,0%); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #menubar ul ul { | |
− | + | background-color: #5781bd; | |
− | + | display: none; | |
− | + | position: absolute; | |
− | + | margin-left: 0px; | |
− | + | float: left; | |
− | + | margin-top:0px; | |
+ | } | ||
+ | #menubar ul ul li{ | ||
+ | display: block; | ||
+ | margin-left: 0px; | ||
} | } | ||
− | + | #menubar ul li { | |
+ | width: 100px; | ||
+ | display: table-cell; | ||
+ | font-family: "Roboto",sans-serif; | ||
+ | } | ||
− | + | #menubar ul a{ | |
− | + | text-decoration: none; | |
− | + | color: #FFFFFF; | |
− | + | font-style: bold; | |
− | + | text-align: left; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #menubar ul a:visited{ | |
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | color: #FFFFFF; | ||
+ | font-style: bold; | ||
+ | } | ||
+ | #menubar ul li:hover > ul{ | ||
+ | color: #EEEE00; | ||
+ | display: block; | ||
+ | padding-top: 0px; | ||
+ | padding-left: 20px; | ||
+ | } | ||
+ | #menubar ul li:hover{ | ||
+ | color: #EEEE00; | ||
+ | } | ||
− | + | /* ============= END: CSS for Menubar ============= */ | |
− | + | ||
− | + | ||
− | + | /* ============= Important Site setup ============= */ | |
− | + | ||
− | + | /* changed tiles background to scaling full-size image --jb */ | |
− | + | /*.content_background_wrapper{ | |
− | + | position: relative; | |
− | + | background-image: url("https://static.igem.org/mediawiki/2015/7/74/Freiburg_antibody_background.png"); | |
+ | background-attachment: fixed; | ||
+ | overflow:hidden; | ||
+ | }*/ | ||
+ | /* | ||
+ | .content_background_wrapper{ | ||
+ | background: url("https://static.igem.org/mediawiki/2015/b/b4/Freiburg_wiki_background_2.png") no-repeat center center fixed; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | overflow: hidden; | ||
+ | REMOVE WITH NEW NAVIGATION BAR!!! AVOIDS CONTENT SHIFTING AFTER MENU-WRAP | ||
+ | clear: both; | ||
+ | } | ||
+ | */ | ||
− | + | .content_background_wrapper{ | |
− | + | background: #F9F9F9; | |
+ | overflow: hidden; | ||
+ | box-sizing: border-box; | ||
} | } | ||
− | + | .central_position_wrap{ | |
− | + | position: relative; | |
− | + | } | |
− | + | .background_image_left, | |
− | + | .background_image_right{ | |
+ | width: 150px; | ||
+ | position: absolute; | ||
+ | } | ||
− | + | .background_image_left{ | |
− | + | top: 20% | |
+ | } | ||
− | + | .background_image_right{ | |
− | + | bottom: -20px; | |
+ | right: 0; | ||
+ | } | ||
− | + | .background_image_right img{ | |
− | + | float: right; | |
} | } | ||
− | + | @media only screen and (max-width: 1320px){ | |
− | + | .background_image_left, | |
− | + | .background_image_right{ | |
− | + | display: none; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | /* was removed in favour of fit-content --jb */ | |
− | + | /* old version: | |
− | + | float: left; | |
− | + | max-width: 1000px; | |
− | + | float: left; | |
− | + | position: relative; | |
+ | left: 50%; | ||
+ | */ | ||
+ | |||
+ | /* | ||
+ | .page_content{ | ||
+ | display:block; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | left: -50%; | ||
} | } | ||
+ | */ | ||
− | + | /* responsive desgin: adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/ | |
− | + | .page_content{ | |
− | + | margin: 20px 5px; | |
− | + | ||
− | + | ||
} | } | ||
− | /* | + | @media only screen and (min-width: 1021px){ |
+ | /* style for browsers wider than 1000px */ | ||
+ | .page_content{ | ||
+ | width: 1000px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 1020px){ | ||
+ | /* style for browsers smaller than 1000px */ | ||
+ | .page_content{ | ||
+ | width: intrinsic; | ||
+ | width: moz-fit-content; | ||
+ | width: -webkit-fit-content; | ||
+ | width: fit-content; | ||
+ | } | ||
+ | } | ||
− | |||
− | |||
− | + | /* ============= END: Important Site setup ============= */ | |
− | + | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* ============= Text Styling ============= */ | ||
+ | |||
+ | .page_content{ | ||
+ | color: #666666; | ||
+ | font-family: 'Roboto',sans-serif; | ||
+ | font-style: normal; | ||
+ | font-weight: 300; | ||
+ | font-size: 16px; | ||
+ | line-height: 1.8; | ||
+ | } | ||
+ | |||
+ | /* ============= END: Headline Styling ============= */ | ||
+ | h1, h2, h3{ | ||
+ | |||
+ | font-family: "Roboto", sans-serif; | ||
+ | color: #c1002a; | ||
+ | font-size: 25px; | ||
+ | clear: both; | ||
+ | font-weight: 400; | ||
+ | line-height: 1.2; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* ============= Full Width Banners ============= */ | ||
+ | #banner_home{ | ||
+ | margin:0; | ||
+ | padding: 0px; | ||
+ | background-image: url("../wiki/images/8/89/Freiburg_frontpage_banner.jpg"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | width: 100%; | ||
+ | height: 400px; | ||
+ | } | ||
+ | #banner_team{ | ||
+ | margin:0; | ||
+ | padding: 0px; | ||
+ | background-image: url("../wiki/images/e/e7/FreiburgTeam2015.jpg"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | width: 100%; | ||
+ | height: 400px; | ||
+ | } | ||
+ | #banner_labjournal{ | ||
+ | margin:0; | ||
+ | padding: 0px; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2015/d/dc/Labjournal.jpg"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | width: 100%; | ||
+ | height: 400px; | ||
+ | } | ||
+ | |||
+ | /* ============= END: Full Width Banners ============= */ | ||
+ | /* | ||
+ | ---------------- Our Team Flipcards css ---------------- | ||
+ | */ | ||
+ | .flippanel { | ||
+ | width: 227px; | ||
+ | height: 341px; | ||
+ | margin: auto; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .card { | ||
+ | width: 227px; | ||
+ | height: 341px; | ||
+ | -o-transition: all .5s; | ||
+ | -ms-transition: all .5s; | ||
+ | -moz-transition: all .5s; | ||
+ | -webkit-transition: all .5s; | ||
+ | transition: all .5s; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -ms-backface-visibility: hidden; | ||
+ | -moz-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | } | ||
+ | |||
+ | .front { | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | .back { | ||
+ | overflow: auto; | ||
+ | z-index: 1; | ||
+ | -webkit-transform: rotateY(180deg); | ||
+ | -ms-transform: rotateY(180deg); | ||
+ | -moz-transform: rotateY(180deg); | ||
+ | transform: rotateY(180deg); | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .flippanel:hover .front { | |
− | + | z-index: 1; | |
− | + | -webkit-transform: rotateY(-180deg); | |
− | + | -ms-transform: rotateY(-180deg); | |
− | + | -moz-transform: rotateY(-180deg); | |
+ | transform: rotateY(-180deg); | ||
+ | } | ||
− | + | .flippanel:hover .back { | |
− | + | z-index: 2; | |
− | + | -webkit-transform: rotateX(0deg); | |
− | + | -ms-transform: rotateX(0deg); | |
+ | -moz-transform: rotateX(0deg); | ||
+ | transform: rotateX(0deg); | ||
+ | } | ||
+ | .memberPicture{ | ||
+ | width: 227px; | ||
+ | height: 341px; | ||
+ | } | ||
− | + | .profile-name { | |
− | + | font-size: 120%; | |
− | + | color: #c1012a; | |
− | + | font-style: bold; | |
+ | } | ||
+ | .profile-question{ | ||
+ | color: #004c97; | ||
+ | } | ||
− | + | .flippanel_row{ | |
− | + | margin-top: 25px; | |
− | + | display: flex; | |
− | + | } | |
+ | /* | ||
+ | ---------------- END Our Team Flipcards css ---------------- | ||
+ | */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* ======================= content boxes =================== */ | |
− | + | .content_box{ | |
− | + | border-radius: 30px 60px; | |
− | + | overflow: hidden; | |
− | + | padding: 2em; | |
− | + | margin: 2em 0; | |
− | + | background-color: #FFFFFF; | |
− | + | text-align: justify; | |
− | + | margin-bottom: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* ====================== image boxes =================== */ | ||
+ | .image_box{ | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /* =================== END of image box =================== */ | ||
+ | |||
+ | .tags{ | ||
+ | /* remove tags from bottom */ | ||
+ | font-size: 0; | ||
+ | } | ||
+ | |||
+ | acronym{ | ||
+ | /* remove text-decoration from acronyms*/ | ||
+ | border-bottom: none; | ||
+ | text-decoration: none; | ||
+ | cursor: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* allow placing of several images including caption in one row */ | ||
+ | |||
+ | .flexbox .thumb2 .thumbinner .thumbcaption { /*circumvents the iGEM tag thumbcaption*/ | ||
+ | font-size: 70%; | ||
+ | padding: 0 10px; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .flexbox{ | ||
+ | display: flex; | ||
+ | margin: 5% 0; | ||
+ | } | ||
+ | |||
+ | /* =================== Footer =================== */ | ||
+ | |||
+ | .content_footer{ | ||
+ | background: rgb(54, 119, 188) none repeat scroll; | ||
+ | width: 100%; | ||
+ | height: 75px; | ||
+ | } | ||
+ | |||
+ | .contacts{ | ||
+ | width: 320px; | ||
+ | margin: 0 auto; | ||
+ | display: flex; | ||
+ | justify-content: space-around; | ||
+ | display: -webkit-flex; /*Safari*/ | ||
+ | -webkit-justify-content: space-around; /* Safari 6.1+ */ | ||
+ | } | ||
+ | |||
+ | #uni a img, | ||
+ | #bioss a img, | ||
+ | #facebook a img, | ||
+ | #email a img{ | ||
+ | max-height: 40px | ||
+ | } | ||
+ | |||
+ | #uni, | ||
+ | #bioss, | ||
+ | #facebook, | ||
+ | #email{ | ||
+ | padding-top: 15px; | ||
+ | padding-right:10px; | ||
+ | } | ||
+ | |||
+ | /* gap between social links and uni links */ | ||
+ | #facebook{ | ||
+ | padding-right: 40px; | ||
+ | } | ||
+ | </style> | ||
</html> | </html> | ||
− | |||
− |
Revision as of 12:17, 31 August 2015