Team:Goettingen/stylesheet
From 2014.igem.org
(Difference between revisions)
Gwen Eleven (Talk | contribs) m |
Gwen Eleven (Talk | contribs) m |
||
(230 intermediate revisions not shown) | |||
Line 13: | Line 13: | ||
border-bottom:none; | border-bottom:none; | ||
} | } | ||
+ | a{ | ||
+ | color:#6699FF; | ||
+ | } | ||
+ | |||
a:link { | a:link { | ||
text-decoration:none; | text-decoration:none; | ||
+ | color: #e98f00; | ||
} | } | ||
a:visited { | a:visited { | ||
text-decoration: none; | text-decoration: none; | ||
- | color:# | + | color: #e98f00; |
} | } | ||
- | |||
- | |||
- | |||
a:hover { | a:hover { | ||
Line 36: | Line 38: | ||
} | } | ||
p{ | p{ | ||
- | + | line-height:150%; | |
+ | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
} | } | ||
body{ | body{ | ||
Line 45: | Line 48: | ||
text-align: center; | text-align: center; | ||
} | } | ||
+ | |||
#top-section{ | #top-section{ | ||
display:block; | display:block; | ||
Line 80: | Line 84: | ||
height:230px; | height:230px; | ||
width:1002px; | width:1002px; | ||
- | background-image:url("https://static.igem.org/mediawiki/2014/ | + | background-image:url("https://static.igem.org/mediawiki/2014/7/75/Goettingen_header_Pic.png"); |
background-size:contain; | background-size:contain; | ||
} | } | ||
Line 102: | Line 106: | ||
width:1002px; | width:1002px; | ||
background-color:#e98f00; | background-color:#e98f00; | ||
+ | border-radius:5px; | ||
+ | |||
} | } | ||
#menuBar{ | #menuBar{ | ||
Line 120: | Line 126: | ||
#menuBar ul li:hover{ | #menuBar ul li:hover{ | ||
background-color:#DFDFDF; | background-color:#DFDFDF; | ||
+ | border-radius:4px; | ||
} | } | ||
#menuBar ul li:hover .wrap{ | #menuBar ul li:hover .wrap{ | ||
Line 133: | Line 140: | ||
#menuBar ul li .wrap{ | #menuBar ul li .wrap{ | ||
position:absolute; | position:absolute; | ||
- | width: | + | width:210px; |
text-align:left; | text-align:left; | ||
display:none; | display:none; | ||
Line 153: | Line 160: | ||
width:176px; | width:176px; | ||
padding:0; | padding:0; | ||
- | |||
} | } | ||
#contact a{ | #contact a{ | ||
Line 165: | Line 171: | ||
z-index:199; | z-index:199; | ||
position:fixed; | position:fixed; | ||
- | bottom: | + | bottom:2%; |
- | right: | + | right:2%; |
overflow:visible; | overflow:visible; | ||
+ | /*background: url("https://static.igem.org/mediawiki/2014/5/5b/Goettingen_go2top.png");*/ | ||
+ | } | ||
+ | /* | ||
+ | #go2top img{ | ||
+ | display:none; | ||
+ | } | ||
+ | */ | ||
+ | #go2top a:hover img{ | ||
+ | display:inline; | ||
} | } | ||
/*main part*/ | /*main part*/ | ||
Line 226: | Line 241: | ||
width:1002px; | width:1002px; | ||
border:solid 1px #CCCCCC; | border:solid 1px #CCCCCC; | ||
+ | border-radius:4px; | ||
} | } | ||
.four{ | .four{ | ||
Line 240: | Line 256: | ||
border-bottom:solid thin #D3D3D3; | border-bottom:solid thin #D3D3D3; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.pictures{ | .pictures{ | ||
margin:15px 0 25px 5px; | margin:15px 0 25px 5px; | ||
Line 276: | Line 277: | ||
text-align:justify; | text-align:justify; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
.button{ | .button{ | ||
width:80px; | width:80px; | ||
Line 306: | Line 305: | ||
color:#FFFFFF; | color:#FFFFFF; | ||
} | } | ||
- | /*For | + | |
- | + | ||
- | + | /*For the pre & next buttons*/ | |
+ | .button_pre{ | ||
+ | display:block; | ||
+ | float:left; | ||
+ | margin:20px 0; | ||
+ | padding:5px; | ||
+ | border:solid 1px #e98f00; | ||
+ | border-radius:2px; | ||
} | } | ||
- | # | + | .button_pre:hover{ |
- | + | color:white; | |
+ | background-color:#FFB573; | ||
+ | } | ||
+ | .button_next{ | ||
+ | display:block; | ||
+ | float:right; | ||
+ | margin:20px 0; | ||
+ | padding:5px; | ||
+ | border:solid 1px #e98f00; | ||
+ | border-radius:2px; | ||
+ | } | ||
+ | .button_next:hover{ | ||
+ | color:white; | ||
+ | background-color:#FFB573; | ||
+ | } | ||
+ | .trans_zh{ | ||
+ | display:block; | ||
+ | float:right; | ||
+ | padding:5px; | ||
+ | border:solid 1px #e98f00; | ||
+ | border-radius:2px; | ||
} | } | ||
Line 363: | Line 389: | ||
/* For team part*/ | /* For team part*/ | ||
- | . | + | .teamM{ |
float:left; | float:left; | ||
width:690px; | width:690px; | ||
- | |||
margin-top:10px; | margin-top:10px; | ||
border-bottom-style:solid; | border-bottom-style:solid; | ||
Line 372: | Line 397: | ||
border-color:#CCC; | border-color:#CCC; | ||
} | } | ||
- | . | + | .teamM img{ |
- | + | width:200px; | |
- | width: | + | height:250px; |
- | height: | + | margin-top:36px; |
- | margin-top: | + | border-radius:8%; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | |||
+ | .titleLeft{ | ||
+ | float:left; | ||
+ | width:200px; | ||
+ | } | ||
+ | .titleRight{ | ||
+ | float:right; | ||
+ | width:200px; | ||
+ | } | ||
+ | .content{ | ||
+ | float:left; | ||
+ | width:410px; | ||
+ | margin-left:30px; | ||
+ | margin-bottom:25px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
.instructors{ | .instructors{ | ||
float:left; | float:left; | ||
width:690px; | width:690px; | ||
- | + | ||
margin-top:10px; | margin-top:10px; | ||
border-bottom-style:solid; | border-bottom-style:solid; | ||
border-width:2px; | border-width:2px; | ||
border-color:#CCC; | border-color:#CCC; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
.instructors img{ | .instructors img{ | ||
Line 443: | Line 435: | ||
width:200px; | width:200px; | ||
margin-top:36px; | margin-top:36px; | ||
+ | border-radius:8%; | ||
} | } | ||
.instructors h2{ | .instructors h2{ | ||
Line 449: | Line 442: | ||
width:410px; | width:410px; | ||
height:36px; | height:36px; | ||
- | margin-left: | + | margin-left:25px; |
} | } | ||
.instructors h3{ | .instructors h3{ | ||
Line 462: | Line 455: | ||
width:410px; | width:410px; | ||
margin-left:40px; | margin-left:40px; | ||
+ | margin-bottom:20px; | ||
} | } | ||
#instr2 img{ | #instr2 img{ | ||
Line 558: | Line 552: | ||
margin-bottom:30px; | margin-bottom:30px; | ||
padding:0 20px 0 20px; | padding:0 20px 0 20px; | ||
+ | border-radius:6%; | ||
} | } | ||
.ackn h3{ | .ackn h3{ | ||
Line 582: | Line 577: | ||
float:right; | float:right; | ||
} | } | ||
- | #ackn9 | + | #ackn9 img{ |
- | + | float:right; | |
+ | } | ||
+ | #ackn14 img{ | ||
+ | float:right; | ||
} | } | ||
#ackn10 p{ | #ackn10 p{ | ||
width:688px; | width:688px; | ||
} | } | ||
- | + | #ackn11 p{ | |
+ | width:688px; | ||
+ | } | ||
+ | #ackn15 p{ | ||
+ | width:688px; | ||
+ | } | ||
/*For protocol part*/ | /*For protocol part*/ | ||
/*For the overview page*/ | /*For the overview page*/ | ||
+ | #OverviewTitle{ | ||
+ | text-align:center; | ||
+ | font-size:36px; | ||
+ | padding:30px 0 0 0; | ||
+ | } | ||
+ | .linkButton{ | ||
+ | display:block; | ||
+ | float:right; | ||
+ | position:relative; | ||
+ | bottom:10px; | ||
+ | } | ||
+ | #empty{ | ||
+ | background-color:#F7F7F7; | ||
+ | } | ||
#protocolOverview{ | #protocolOverview{ | ||
float:left; | float:left; | ||
Line 598: | Line 615: | ||
float:left; | float:left; | ||
width:280px; | width:280px; | ||
- | height: | + | height:250px; |
margin:12px; | margin:12px; | ||
padding:15px; | padding:15px; | ||
+ | background-color:#e7e7e7; | ||
+ | border-radius:10px; | ||
+ | |||
} | } | ||
.pro_sub h4 a{ | .pro_sub h4 a{ | ||
Line 606: | Line 626: | ||
font-family:Verdana, Geneva, sans-serif; | font-family:Verdana, Geneva, sans-serif; | ||
font-size:22px; | font-size:22px; | ||
- | line- | + | line-height:26px; |
color:#F90; | color:#F90; | ||
text-align:center; | text-align:center; | ||
Line 620: | Line 640: | ||
} | } | ||
.pro_sub a:hover{ | .pro_sub a:hover{ | ||
- | color:# | + | color:#F90; |
- | + | } | |
- | + | .figure{ | |
+ | font-size:14px; | ||
+ | color:#5b686a; | ||
+ | line-height:110%; | ||
+ | padding:0 30px; | ||
+ | } | ||
#pic img{ | #pic img{ | ||
- | vertical-align: top; | + | vertical-align: top; |
} | } | ||
- | + | /*end of the Overview page*/ | |
- | + | ||
- | + | ||
.proLP{ | .proLP{ | ||
Line 639: | Line 662: | ||
border-width:2px; | border-width:2px; | ||
border-color:#CCC; | border-color:#CCC; | ||
+ | |||
} | } | ||
.proLP h3{ | .proLP h3{ | ||
- | font: | + | font:"Trebuchet MS", Arial, Helvetica, sans-serif; |
font-size:24px; | font-size:24px; | ||
color:#000; | color:#000; | ||
Line 652: | Line 676: | ||
font-size:18px; | font-size:18px; | ||
color:#000; | color:#000; | ||
+ | text-decoration:underline; | ||
} | } | ||
#protocol ul li a{ | #protocol ul li a{ | ||
Line 661: | Line 686: | ||
.proLP ul li{ | .proLP ul li{ | ||
display:block; | display:block; | ||
- | padding:5px | + | padding:5px 25px 5px 0px; |
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; | font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
font-size:16px; | font-size:16px; | ||
Line 669: | Line 694: | ||
.proLP ul li a{ | .proLP ul li a{ | ||
color:#F88005; | color:#F88005; | ||
- | |||
} | } | ||
.proLP ul li ul li{ | .proLP ul li ul li{ | ||
Line 675: | Line 699: | ||
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; | font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
font-size:14px; | font-size:14px; | ||
+ | padding-left:20px; | ||
line-height:24px; | line-height:24px; | ||
} | } | ||
.proLP ul li ul li a{ | .proLP ul li ul li a{ | ||
color:black; | color:black; | ||
- | |||
} | } | ||
Line 698: | Line 722: | ||
border-color:#CCC; | border-color:#CCC; | ||
border-width:1px; | border-width:1px; | ||
+ | border-radius:4px; | ||
} | } | ||
.proRP h1{ | .proRP h1{ | ||
- | + | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | |
font-size:30px; | font-size:30px; | ||
+ | font-weight:bold; | ||
color:#F88005; | color:#F88005; | ||
line-height:40px; | line-height:40px; | ||
+ | text-align:left; | ||
+ | padding:10px; | ||
} | } | ||
.proRP h2{ | .proRP h2{ | ||
font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
- | font-size: | + | font-size:20px; |
line-height:36px; | line-height:36px; | ||
padding:0; | padding:0; | ||
+ | color:#039648; | ||
+ | text-align:left; | ||
} | } | ||
.proRP h3{ | .proRP h3{ | ||
Line 716: | Line 746: | ||
padding:5px 0; | padding:5px 0; | ||
color:#BF2F15; | color:#BF2F15; | ||
+ | text-align:left; | ||
+ | } | ||
+ | .proRP h4{ | ||
+ | font-family:"Charter Black", sans-serif; | ||
+ | font-size:18px; | ||
+ | line-height:24px; | ||
+ | padding:10px 0; | ||
+ | color:black; | ||
+ | text-align:justify; | ||
+ | font-weight:bold; | ||
} | } | ||
.proRP p{ | .proRP p{ | ||
font-size:16px; | font-size:16px; | ||
- | |||
text-align:justify; | text-align:justify; | ||
+ | } | ||
+ | #humanPractice img{ | ||
+ | border-radius:8%; | ||
} | } | ||
#protocol ul li:hover{ | #protocol ul li:hover{ | ||
background-color:#DFDFDF; | background-color:#DFDFDF; | ||
+ | border-radius:4px; | ||
} | } | ||
Line 734: | Line 777: | ||
width:922px; | width:922px; | ||
border:solid 1px #CCCCCC; | border:solid 1px #CCCCCC; | ||
+ | border-radius:5px; | ||
} | } | ||
#achv h1{ | #achv h1{ | ||
Line 740: | Line 784: | ||
} | } | ||
#achv h2{ | #achv h2{ | ||
- | font: | + | font:30px; |
} | } | ||
#achv p{ | #achv p{ | ||
Line 753: | Line 797: | ||
#achv_p1{ | #achv_p1{ | ||
float: left; | float: left; | ||
- | |||
width:690px; | width:690px; | ||
border-bottom-style:solid; | border-bottom-style:solid; | ||
Line 785: | Line 828: | ||
border-bottom-width:1px; | border-bottom-width:1px; | ||
} | } | ||
- | + | #Achieve a{ | |
+ | color:black; | ||
+ | } | ||
/*For the gallery*/ | /*For the gallery*/ | ||
.gallery_single_part{ | .gallery_single_part{ | ||
Line 796: | Line 841: | ||
width:120px; | width:120px; | ||
margin:15px; | margin:15px; | ||
- | border:5px solid # | + | border:5px solid #eee; |
} | } | ||
Line 850: | Line 895: | ||
#notebookWrap p{ | #notebookWrap p{ | ||
background-color: #f4f4f8; | background-color: #f4f4f8; | ||
+ | } | ||
+ | #notebookWrap h2{ | ||
+ | color:#000; | ||
+ | } | ||
+ | #BBWrap p img{ | ||
+ | display:block; | ||
+ | margin:15px auto; | ||
} | } | ||
#lab_team1{ | #lab_team1{ | ||
- | background-color: #fcc; | + | background-color:#fcebeb; |
- | + | border-left:solid 10px #fcc; | |
+ | border-radius:5px; | ||
} | } | ||
#lab_team2{ | #lab_team2{ | ||
- | background-color:#fdd7a0; | + | background-color:#fcedd6; |
- | + | border-left:solid 10px #fdd7a0; | |
+ | border-radius:5px; | ||
} | } | ||
#lab_team3{ | #lab_team3{ | ||
- | background-color:#b0dfb3; | + | background-color:#daf1dc; |
- | + | border-left:solid 10px #b0dfb3; | |
+ | border-radius:5px; | ||
+ | } | ||
+ | #lab_team4{ | ||
+ | background-color:#dff4fa; | ||
+ | border-left:solid 10px #9be3f8; | ||
+ | border-radius:5px; | ||
} | } | ||
/*edit for the search box*/ | /*edit for the search box*/ | ||
Line 868: | Line 928: | ||
.note_sthree{ | .note_sthree{ | ||
float:left; | float:left; | ||
- | + | width:280px; | |
- | height: | + | height:290px; |
+ | margin:12px; | ||
+ | padding:15px; | ||
+ | background-color:#e7e7e7; | ||
+ | border-radius:10px; | ||
} | } | ||
.note_sthree h2{ | .note_sthree h2{ | ||
Line 896: | Line 960: | ||
/*This is for the presentation part*/ | /*This is for the presentation part*/ | ||
+ | #Presentation{ | ||
+ | float:left; | ||
+ | width:690px; | ||
+ | } | ||
.pres{ | .pres{ | ||
float:left; | float:left; | ||
- | width: | + | width:220px; |
- | + | ||
text-align:center; | text-align:center; | ||
+ | margin:20px 5px 0 5px; | ||
+ | padding:20px 0; | ||
+ | background-color:#faedda; | ||
+ | border-radius:4px; | ||
} | } | ||
.pres img{ | .pres img{ | ||
border-radius:8%; | border-radius:8%; | ||
+ | |||
+ | } | ||
+ | .pres h3{ | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | /*Modify the table*/ | ||
+ | .table1 { | ||
+ | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
+ | width:100%; | ||
+ | border-collapse:collapse; | ||
+ | } | ||
+ | .table1 th, .table1 td{ | ||
+ | font-size:1em; | ||
+ | border:1px solid #98bf21; | ||
+ | padding:3px 7px 2px 7px; | ||
+ | } | ||
+ | |||
+ | .table1 th{ | ||
+ | font-size:1.1em; | ||
+ | padding-top:5px; | ||
+ | padding-bottom:4px; | ||
+ | background-color:#A7C942; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | .table1 tr:nth-child(odd){ | ||
+ | background-color:#EAF2D3; | ||
+ | } | ||
+ | .table2{ | ||
+ | background-color:#F7F7F7; | ||
+ | font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; | ||
+ | |||
+ | } | ||
+ | .table2 td{ | ||
+ | padding:5px 15px; | ||
+ | text-align:left; | ||
} | } | ||
Line 910: | Line 1,017: | ||
width: 100px ; | width: 100px ; | ||
} | } | ||
- | + | /* YouTube player */ | |
+ | #player { | ||
+ | width: 348px; | ||
+ | height: 240px; | ||
+ | overflow: hidden; | ||
+ | background: gray; | ||
+ | position: absolute; | ||
+ | border: solid 2px gray; | ||
+ | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 01:17, 18 October 2014