Template:Team:Uppsala/styles
From 2013.igem.org
(Difference between revisions)
(250 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | h1{ border:none; | ||
+ | padding-top: 10px; | ||
+ | |||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
*{ | *{ | ||
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
+ | border: none; | ||
} | } | ||
+ | |||
body{ | body{ | ||
+ | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
- | + | ||
- | + | background-image: url(../image/bakgrund3.png); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #header { |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
- | width: 100%; | + | width: 100%; |
} | } | ||
Line 70: | Line 31: | ||
position: relative; | position: relative; | ||
padding: 10px; | padding: 10px; | ||
- | |||
- | |||
- | |||
} | } | ||
Line 83: | Line 41: | ||
position: relative; | position: relative; | ||
padding: 10px; | padding: 10px; | ||
- | |||
- | |||
} | } | ||
Line 93: | Line 49: | ||
#navbar { | #navbar { | ||
- | background-image: url( | + | background-image: url(https://static.igem.org/mediawiki/2013/e/e5/Menubar.png); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center right; | background-position: center right; | ||
- | background-size: 93% | + | background-size: 93% 55px; |
+ | height: 55px; | ||
} | } | ||
- | + | ||
- | + | #main_content{ | |
- | + | padding: 20px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | } | + | h1 { |
- | + | color:#0089d1; | |
- | + | } | |
- | + | ||
- | + | h3 { | |
- | + | color:#0089d1; | |
- | } | + | } |
- | + | ||
- | + | #bottom-pic { | |
- | + | width: 100%; | |
- | + | height: 200px; | |
- | + | margin-top: 50px; | |
+ | } | ||
+ | |||
+ | #team-div{ | ||
+ | width: 100%; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | border-top: 1px solid #22409a; | ||
+ | clear: both; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | #team-pic{ | ||
+ | position: center; | ||
+ | /*padding-top: 10px;*/ | ||
+ | margin-left: 100px; | ||
+ | height:400px; | ||
+ | width:700px; | ||
- | + | margin-top:10px; | |
- | + | margin-bottom:20px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | . | + | } |
- | + | ||
- | } | + | |
+ | .team-text { | ||
+ | float: right; | ||
+ | padding-left: 1px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #profile-div{ | ||
+ | width: 100%; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | border-bottom: 1px solid #22409a; | ||
+ | margin-bottom: 0px; | ||
+ | margin-top: 0px; | ||
+ | clear: both; | ||
+ | |||
+ | } | ||
+ | |||
+ | #profile_pic{ | ||
+ | position: left; | ||
+ | float:left; | ||
+ | height:227px; | ||
+ | width:210px; | ||
+ | /*border:solid 3px;*/ | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #profile_pic_right{ | ||
+ | position: right; | ||
+ | /* padding-top: px;*/ | ||
+ | float:right; | ||
+ | height:227px; | ||
+ | width:210px; | ||
+ | /*border:solid 3px;*/ | ||
+ | margin-top:20px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #container_right{ | ||
+ | height:240px; | ||
+ | padding-top:0px; | ||
+ | width:650px; | ||
+ | /*border:solid 3px;*/ | ||
+ | float:right; | ||
+ | margin-top:15px; | ||
+ | } | ||
+ | /*section * {border: solid 1px;}*/ | ||
+ | |||
+ | |||
+ | #container_left{ | ||
+ | height:240px; | ||
+ | padding-top:0px; | ||
+ | width:650px; | ||
+ | /*border:solid 3px;*/ | ||
+ | float:left; | ||
+ | margin-top:15px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .profile-text { | ||
+ | float: right; | ||
+ | padding-left: 1px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #project-description { | ||
+ | width: 100%; | ||
+ | border-bottom: 1px solid #22409a; | ||
+ | padding-bottom: 10px; | ||
+ | clear:both | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #grid-matrix { | ||
+ | width: 64%; | ||
+ | float: left; | ||
+ | padding-top: 20px; | ||
+ | padding-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #sidebar { | ||
+ | width: 34%; | ||
+ | float: right; | ||
+ | padding-top: 20px; | ||
+ | } | ||
+ | |||
+ | #twitter-feed { | ||
+ | padding-top:20px; | ||
+ | } | ||
+ | |||
+ | #grid-a { | ||
+ | width: 276.5px; float: left; | ||
+ | height: 276.5px; border: 3px solid; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/1/1f/Background-new.png); | ||
+ | } | ||
+ | |||
+ | #grid-b { | ||
+ | width: 276.5px; float: right; | ||
+ | height: 276.5px; border: 3px solid; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/f/f1/Vision_%281%29.png); | ||
+ | } | ||
+ | |||
+ | #grid-c { | ||
+ | width: 276.5px; float: left; | ||
+ | height: 276.5px; border: 3px solid; | ||
+ | margin-top: 20px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/a/a7/Metabolic_engineering.png); | ||
+ | |||
+ | } | ||
+ | |||
+ | #grid-d { | ||
+ | width: 276.5px; float: right; | ||
+ | height: 276.5px; border: 3px solid; | ||
+ | margin-top: 20px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/6/68/Chassi2_%281%29.png); | ||
+ | } | ||
+ | |||
+ | #grid-e { | ||
+ | width: 276.5px; float: left; | ||
+ | height: 276.5px; border: 3px solid; | ||
+ | margin-top: 20px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/5/50/Society_and_safety.png); | ||
+ | } | ||
+ | |||
+ | #grid-f { | ||
+ | width: 276.5px; float: right; | ||
+ | height: 276.5px; border: 3px solid; | ||
+ | margin-top: 20px; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/archive/6/64/20130816124745%21Achievements.png); | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Hover effect on grid pictures begin */ | ||
+ | |||
+ | #grid-a img { | ||
+ | -webkit-transition: opacity 0.2s ease-in-out; | ||
+ | -moz-transition: opacity 0.2s ease-in-out; | ||
+ | -o-transition: opacity 0.2s ease-in-out; | ||
+ | transition: opacity 0.2s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #grid-a img.top:hover { | ||
+ | opacity:0; | ||
+ | } | ||
+ | |||
+ | #grid-b img { | ||
+ | -webkit-transition: opacity 0.2s ease-in-out; | ||
+ | -moz-transition: opacity 0.2s ease-in-out; | ||
+ | -o-transition: opacity 0.2s ease-in-out; | ||
+ | transition: opacity 0.2s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #grid-b img.top:hover { | ||
+ | opacity:0; | ||
+ | } | ||
+ | |||
+ | #grid-c img { | ||
+ | -webkit-transition: opacity 0.2s ease-in-out; | ||
+ | -moz-transition: opacity 0.2s ease-in-out; | ||
+ | -o-transition: opacity 0.2s ease-in-out; | ||
+ | transition: opacity 0.2s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #grid-c img.top:hover { | ||
+ | opacity:0; | ||
+ | } | ||
+ | |||
+ | #grid-d img { | ||
+ | -webkit-transition: opacity 0.2s ease-in-out; | ||
+ | -moz-transition: opacity 0.2s ease-in-out; | ||
+ | -o-transition: opacity 0.2s ease-in-out; | ||
+ | transition: opacity 0.2s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #grid-d img.top:hover { | ||
+ | opacity:0; | ||
+ | } | ||
+ | |||
+ | #grid-e img { | ||
+ | -webkit-transition: opacity 0.2s ease-in-out; | ||
+ | -moz-transition: opacity 0.2s ease-in-out; | ||
+ | -o-transition: opacity 0.2s ease-in-out; | ||
+ | transition: opacity 0.2s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #grid-e img.top:hover { | ||
+ | opacity:0; | ||
+ | } | ||
+ | |||
+ | #grid-f img { | ||
+ | -webkit-transition: opacity 0.2s ease-in-out; | ||
+ | -moz-transition: opacity 0.2s ease-in-out; | ||
+ | -o-transition: opacity 0.2s ease-in-out; | ||
+ | transition: opacity 0.2s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #grid-f img.top:hover { | ||
+ | opacity:0; | ||
+ | } | ||
+ | |||
+ | /* Hover effect in grid pictures end | ||
+ | Grid pictures styling begin */ | ||
+ | |||
+ | .top { | ||
+ | width: 277px; | ||
+ | } | ||
+ | |||
+ | .grid-pic { | ||
+ | width: 276.5px; | ||
+ | } | ||
+ | |||
+ | .grid-test { | ||
+ | width: 200px; | ||
+ | } | ||
+ | |||
+ | /* CSS parts starts here */ | ||
+ | |||
+ | #sub_content_parts{ | ||
+ | width:100%; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | border-bottom: 1px solid #22409a; | ||
+ | margin-bottom: 10px; | ||
+ | margin-top:10px; | ||
+ | clear:both; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | #parts_title{ | ||
+ | height:30px; | ||
+ | width:200px; | ||
+ | border:solid 3px; | ||
+ | overflow:auto; | ||
+ | } | ||
+ | |||
+ | #parts_text{ | ||
+ | height:270px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #chassi{ | ||
+ | height:270px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #carotenoid{ | ||
+ | height:270px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #resveratrol{ | ||
+ | height:270px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #saffron{ | ||
+ | height:270px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #sweetner{ | ||
+ | height:270px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #chromoprotein_collection{ | ||
+ | height:270px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #parts_table{ | ||
+ | height:270px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | /* CSS for parts ends here */ | ||
+ | |||
+ | |||
+ | /* CSS for the button instructors & supervisors in team starts here */ | ||
+ | |||
+ | #sub_content_advisor{ | ||
+ | width:100%; | ||
+ | height:4000px; | ||
+ | border:solid 3px; | ||
+ | } | ||
+ | |||
+ | #advisor_title{ | ||
+ | height:50px; | ||
+ | width:800px; | ||
+ | /*border:solid 3px;*/ | ||
+ | overflow:auto; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | #advisor1{ | ||
+ | height:270; | ||
+ | width:250; | ||
+ | float:left; | ||
+ | border:solid 3px; | ||
+ | clear:both; | ||
+ | margin-left:100px; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #advisor2{ | ||
+ | height:270; | ||
+ | width:250; | ||
+ | float:right; | ||
+ | margin-top:10px; | ||
+ | border:solid 3px; | ||
+ | margin-right:100px; | ||
+ | } | ||
- | + | #advisor_text1{ | |
- | + | height:270; | |
+ | width:350; | ||
+ | float:left; | ||
+ | border:solid 3px; | ||
+ | clear:both; | ||
+ | margin-left:50px; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #advisor_text2{ | ||
+ | height:270; | ||
+ | width:350; | ||
+ | float:right; | ||
+ | border:solid 3px; | ||
+ | margin-right:50px; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #sub_content_instructor{ | ||
+ | width:100%; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | border-bottom: 1px solid #22409a; | ||
+ | margin-bottom: 10px; | ||
+ | margin-top:10px; | ||
+ | clear:both; | ||
+ | position:relative; | ||
+ | /*border: yellow solid 3px;*/ | ||
+ | } | ||
+ | |||
+ | #instructor_title{ | ||
+ | height:50px; | ||
+ | width:800px; | ||
+ | border: solid 3px; | ||
+ | overflow:auto; | ||
+ | float:left; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #instructor_left{ | ||
+ | height:270; | ||
+ | width:250; | ||
+ | float:left; | ||
+ | border:solid 3px; | ||
+ | clear:both; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #instructor_text_right{ | ||
+ | height:270px; | ||
+ | width:645px; | ||
+ | float:right; | ||
+ | margin-top:10px; | ||
+ | border:solid 3px; | ||
+ | } | ||
+ | |||
+ | #instructor_right{ | ||
+ | height:270; | ||
+ | width:250; | ||
+ | float:right; | ||
+ | border:solid 3px; | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | |||
+ | #instructor_text_left{ | ||
+ | height:270; | ||
+ | width:640; | ||
+ | float:left; | ||
+ | border:solid 3px; | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | |||
+ | /* CSS for the button instructors & supervisors in team ends here */ | ||
+ | |||
+ | /* CSS for attribution starts here*/ | ||
+ | |||
+ | #attribution_title{ | ||
+ | height:30px; | ||
+ | width:800px; | ||
+ | border:solid 3px; | ||
+ | float:left; | ||
+ | overflow:auto; | ||
+ | } | ||
+ | |||
+ | #sub_cont{ | ||
+ | width:100%; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | border-bottom: 1px solid #22409a; | ||
+ | margin-bottom: 10px; | ||
+ | margin-top:10px; | ||
+ | clear:both; | ||
+ | position:relative; | ||
+ | /*border: yellow solid 3px;*/ | ||
+ | } | ||
+ | |||
+ | #attribution1{ | ||
+ | height:270px; | ||
+ | width:250px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:110px; | ||
+ | } | ||
+ | |||
+ | #attribution1_text{ | ||
+ | height:270px; | ||
+ | width:640px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #attribution2{ | ||
+ | height:270px; | ||
+ | width:250px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | #attribution2_text{ | ||
+ | height:270px; | ||
+ | width:640px; | ||
+ | border:solid 3px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | /* CSS for attribution ends here*/ |
Latest revision as of 16:43, 10 September 2013