“Widget:文本框”与“Widget:新样式”:页面之间的差异
imported>Irukaza 无编辑摘要 |
imported>=海豚= |
||
第1行: | 第1行: | ||
< | <html> | ||
/* . | <head> | ||
. | <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Galdeano&family=Limelight&display=swap" rel="stylesheet"> | ||
</head> | |||
} | <script> | ||
/* This code is built from two sources: developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event and https://css-tricks.com/updating-a-css-variable-with-javascript/. Please see the CSS note below for the :root bit | |||
*/ | |||
let root = document.documentElement; | |||
var body = document.body, | |||
html = document.documentElement; | |||
var scrollLimit = 1800; | |||
var adjustedScrollLimit = scrollLimit - 0; | |||
window.addEventListener('scroll', e => { | |||
// console.log(scrollY); | |||
/* This following block was for the 'sticky' background | |||
if(window.scrollY>scrollLimit){ | |||
document.getElementById("bodybackground").style.backgroundAttachment = "fixed"; | |||
document.getElementById("bodybackground").style.backgroundPosition = "0px " + scrollLimit + "px"; | |||
} else if(window.scrollY<scrollLimit){ | |||
if(document.getElementById("bodybackground").style.backgroundAttachment == "fixed"){ | |||
document.getElementById("bodybackground").style.backgroundAttachment = "local"; | |||
document.getElementById("bodybackground").style.backgroundPosition = "0px 0px"; | |||
} | |||
} | |||
*/ | |||
}); | |||
/* When the user clicks on the button, | |||
toggle between hiding and showing the dropdown content */ | |||
function showMenu(elementName) { | |||
var dropdowns = document.getElementsByClassName("dropdown-content"); | |||
var i; | |||
for (i = 0; i < dropdowns.length; i++) { | |||
var openDropdown = dropdowns[i]; | |||
if (openDropdown.classList.contains('show')) { | |||
openDropdown.classList.remove('show'); | |||
} | |||
} | |||
document.getElementById(elementName).classList.toggle("show"); | |||
. | |||
} | } | ||
. | // Close the dropdown menu if the user clicks outside of it | ||
window.onclick = function(event) { | |||
if (!event.target.matches('.dropbtn')) { | |||
var dropdowns = document.getElementsByClassName("dropdown-content"); | |||
var i; | |||
for (i = 0; i < dropdowns.length; i++) { | |||
var openDropdown = dropdowns[i]; | |||
if (openDropdown.classList.contains('show')) { | |||
openDropdown.classList.remove('show'); | |||
} | |||
} | |||
} | |||
} | } | ||
. | </script> | ||
<style> | |||
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; } | |||
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;} | |||
body, html {background-color:white; width: 100%; height: 100%;} | |||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | |||
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;} | |||
/*2020 Colours: | |||
Pink: #E5A1A9, rgb(229,161,169) | |||
teal: #6ADFCD, rgb(106,223,205) | |||
aqua: #5D8CDD, rgb(93,140,221) | |||
purple: #6D4C93, rgb(109,76,147) | |||
dark green: #1C4F3F, rgb(28,79,63) | |||
logo text: #484494, rgb(72,68,148) | |||
margin: top right bottom left; | |||
margin: top right/left bottom; | |||
margin: top/bottom right/left; | |||
*/ | |||
:root{ | |||
--navBarPos: -75px; | |||
} | } | ||
/* This block of code is taken from 2018.igem.org/Team:CUNY_Kingsborough and then modified as necessary */ | |||
.dropbtn { | |||
border: none; | |||
background-color: #6c4c94; | |||
padding: 10px; | |||
font-family: 'Assistant', sans-serif !important; | |||
font-size:calc(12px + 0.8vw); | |||
color: white; | |||
text-decoration: none; | |||
width:100%; | |||
border-radius: 10px; | |||
margin-left: 175px; | |||
/* I added this rotation, just because :) */ | |||
} | |||
.dd1 { | |||
. | transform:rotate(-10deg); | ||
} | |||
} | |||
.dd2 { | |||
transform:rotate(-10deg); | |||
} | |||
.dd3 { | |||
transform:rotate(-5deg); | |||
} | |||
.navbarFix { | |||
min-width:900px; | |||
} | |||
. | .dropbtn:hover { | ||
border: none; | |||
} | background-color: #6D4C93; | ||
color: #6ADFCD; | |||
padding: 10px; | |||
font-size:calc(12px + 0.8vw); | |||
transition: all 0.5s; | |||
text-decoration: bold; | |||
cursor: pointer; | |||
} | |||
. | .dropdown { | ||
margin-left: 2%; | |||
} | position: relative; | ||
display: inline-block; | |||
width: 12%; | |||
min-width:80px; | |||
margin-left: 75px; | |||
/* background-color: #6c4c94; */ | |||
} | |||
. | .dropdown-content { | ||
display: none; | |||
} | position: absolute; | ||
min-width: 180px; | |||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |||
z-index: 2; | |||
margin-left: 175px; | |||
transform:rotate(-10deg); | |||
} | |||
. | .show { | ||
display: block; | |||
} | } | ||
. | .dropdown-content a { | ||
border-bottom-style: solid; | |||
} | border-color: rgba(255, 255, 255, .7); | ||
border-width: 1px; | |||
color: black; | |||
background-color: #6ADFCD !important; | |||
font-family: 'Assistant', sans-serif !important; | |||
font-size: 16px; | |||
padding: 12px 16px; | |||
text-decoration: none; | |||
display: block; | |||
} | |||
. | .dropdown-content a:hover { | ||
background-color: #5d8cdd !important; | |||
} | color: white !important; | ||
} | |||
. | /* Code leftover from hover functionality | ||
.dropdown:hover .dropdown-content { | |||
} | display: block; | ||
} | |||
. | .dropdown:hover .dropbtn { | ||
background-color: #6c4c94; | |||
} | } | ||
*/ | |||
. | .dropbtn:hover, .dropbtn:focus { | ||
background-color: #6c4c94; | |||
} | } | ||
. | .dropdown-menu-center { | ||
left: 50% !important; | |||
right: auto !important; | |||
text-align: center !important; | |||
transform: translate(-50%, 0) !important; | |||
} | |||
.logo { | |||
/* The image used */ | |||
background-image: url("https://2020.igem.org/wiki/images/d/d6/T--Alma--navbar_no_boxes.png"); | |||
min-height: 650px; | |||
width: 100vw; | |||
/* Center and scale the image nicely */ | |||
background-position: left top; | |||
background-repeat: no-repeat; | |||
background-size: cover; | |||
/* | /* Needed to position the navbar */ | ||
position: relative; | |||
border-bottom: 10px solid #484494; | |||
} | } | ||
. | /* Leftover, might not be necessary | ||
.container { | |||
} | overflow: hidden; | ||
position: absolute; | |||
top: 290px; | |||
width: 100%; | |||
min-width: 1100px; | |||
} */ | |||
. | /* The navbar */ | ||
.topnav { | |||
overflow: hidden; | |||
background-color: rgba(255, 0, 0, 0); | |||
} | } | ||
. | /* Navbar links */ | ||
.topnav a { | |||
float: left; | |||
color: #484494; | |||
text-align: center; | |||
text-decoration: none; | |||
font-size:calc(18px + .5vw); | |||
width: 14.28%; | |||
} | } | ||
. | */ | ||
.topnav a:hover { | |||
color: black; | |||
} | } | ||
. | .bodybackground { | ||
background-attachment: local; | |||
background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url("https://2020.igem.org/wiki/images/d/d0/T--Alma--Pine_River_Background_fullcolor.png") !important; | |||
width: 100%; | |||
height: 100%; | |||
background-size: cover; | |||
/*background-blend-mode: lighten;*/ | |||
border-top: 10px solid #484494; | |||
} | } | ||
. | .bodymargin { | ||
margin: 0px; | |||
padding: 100px; | |||
} | } | ||
. | .textcontainer { | ||
background-color: rgba(0,0,0,0.5) !important; | |||
border-radius: 15px; | |||
padding: 50px; | |||
padding-top: 75px; | |||
margin-top: 30px; | |||
max-width: auto; | |||
} | } | ||
. | /* Clear floats after the columns */ | ||
.rowcontainer:after { | |||
content: ""; | |||
display: table; | |||
clear: both; | |||
} | } | ||
. | .columnthirdleft { | ||
float: left; | |||
width: 33.33%; | |||
} | } | ||
. | .columntwothirdsright { | ||
float: right; | |||
width: 66.67%; | |||
} | } | ||
. | .columnthirdright { | ||
float: right; | |||
width: 33.33%; | |||
} | } | ||
. | .columntwothirdsleft { | ||
float: left; | |||
width: 66.67%; | |||
} | } | ||
. | |||
.extraspace { | |||
margin: 50px; | |||
} | } | ||
. | .pstyle { | ||
line-height: 25px; | |||
font-family: 'Assistant', sans-serif !important; | |||
font-size: 20px; | |||
margin: 25px 0px; | |||
color: white; | |||
} | |||
.pleft { | |||
padding-right: 35px; | |||
} | } | ||
. | .pright { | ||
padding-left: 35px; | |||
} | |||
.headline { | |||
font-family: 'Limelight', arial, sans-serif !important; | |||
font-size: 75px; | |||
color: #6ADFCD; | |||
text-align: center; | |||
text-transform: uppercase; | |||
} | } | ||
/* Subheadline */ | |||
. | .subheadline { | ||
font-family: 'Galdeano', arial, sans-serif !important; | |||
line-height: 47px; | |||
font-size: 35px; | |||
color: #6ADFCD; | |||
font-family: | |||
font-size: | |||
} | } | ||
. | .centertext { | ||
text-align: center; | |||
} | } | ||
.centerimg { | |||
display: block; | |||
margin-right: auto; | |||
margin-left: auto; | |||
} | } | ||
.leftimg { | |||
display: block; | |||
max-width: 100%; | |||
float: left; | |||
padding: 22px 0px 20px; | |||
} | } | ||
.rightimg { | |||
display: block; | |||
max-width: 100%; | |||
float: right; | |||
padding: 22px 0px 20px; | |||
} | } | ||
#desc { | |||
display: block; | |||
margin-right: auto; | |||
margin-left: auto; | |||
max-width: 75%; | |||
text-align: center; | |||
margin-top: 40px; | |||
} | } | ||
figcaption { | |||
color: white; | |||
text-align: left; | |||
} | } | ||
. | .hyperlink { | ||
color: #6ADFCD !important; | |||
} | } | ||
. | .hyperlink:hover { | ||
text-shadow: #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, | |||
#C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px; | |||
text-decoration: none; | |||
} | } | ||
. | .hyperlink:visited { | ||
color: #E5A1A9 !important; | |||
} | } | ||
span { | |||
color: red !important; | |||
font-weight: 700 !important; | |||
} | } | ||
</style> | |||
<body> | |||
<div class="logo"> | |||
<!-- <div class="container"> | |||
</div> --> | |||
</div> | |||
<div class="navbarFix"> | |||
<div class="dropdown" style="top:calc(var(--navBarPos) - 0px);"> | |||
<button class="dropbtn dd1" onClick="showMenu('myDropdown1')">Project</button> | |||
<div id="myDropdown1" class="dropdown-content dropdown-menu-center"> | |||
<a href="http://2020.igem.org/Team:Alma/Description">Description</a> | |||
<a href="http://2020.igem.org/Team:Alma/Engineering">Engineering</a> | |||
<!--<a href="http://2020.igem.org/Team:Alma/Model">Math Modeling</a>--> | |||
<a href="http://2020.igem.org/Team:Alma/Contribution">Contribution</a> | |||
<a href="https://2020.igem.org/Team:Alma/Implementation">Proposed Implementation</a> | |||
<!-- <a href="http://2020.igem.org/Team:Alma/Safety">Safety</a> --> | |||
<a href="http://2020.igem.org/Team:Alma/Parts">Parts</a> | |||
</div> | |||
</div> | |||
<div class="dropdown" style="top:calc(var(--navBarPos) - 50px);"> | |||
<button class="dropbtn dd2" onClick="showMenu('myDropdown2')">Human Practices</button> | |||
<div id="myDropdown2" class="dropdown-content dropdown-menu-center"> | |||
<a href="http://2020.igem.org/Team:Alma/Human_Practices">Human Practices</a> | |||
<a href="http://2020.igem.org/Team:Alma/Education">Science Communication</a> | |||
<a href="http://2020.igem.org/Team:Alma/Collaborations">Collaboration</a> | |||
</div> | |||
</div> | |||
<div class="dropdown" style="top:calc(var(--navBarPos) - 75px);"> | |||
<button class="dropbtn dd3" onClick="showMenu('myDropdown3')">Team</button> | |||
<div id="myDropdown3" class="dropdown-content dropdown-menu-center"> | |||
<a href="http://2020.igem.org/Team:Alma/Team">Team</a> | |||
<a href="http://2020.igem.org/Team:Alma/Attributions">Attributions</a> | |||
</div> | |||
</div> | |||
<div class="dropdown" style="top:calc(var(--navBarPos) - 85px);"> | |||
<button class="dropbtn" onClick="showMenu('myDropdown4')">Other</button> | |||
<div id="myDropdown4" class="dropdown-content dropdown-menu-center"> | |||
<a href="http://2020.igem.org/Team:Alma/References">References</a> | |||
<a href="http://2020.igem.org/Team:Alma/Poster" target="_blank">Poster</a> | |||
<a href="https://igem.org/2020_Judging_Form?id=3445" target="_blank">Judging Form</a> | |||
</div> | |||
</div> | |||
</div> | |||
<!--promo video --> | |||
<div class="subheadline centertext" style="color:#6D4C93 !important"> | |||
Watch our project promotion video! | |||
</div> | |||
<div class="pstyle centertext" style="color:black !important">Or watch our project presentation video <a class="hyperlink" href="https://video.igem.org/videos/watch/e8dd4d59-79f2-4853-b1a0-fb847fec8554" target="_blank">here.</a></div> | |||
<div class="extraspace" style="margin:5px"></div> | |||
<iframe class="centerimg" width="800" height="450" sandbox="allow-same-origin allow-scripts allow-popups" src="https://video.igem.org/videos/embed/5a8e20cd-a763-4fa2-ae07-3e1a1b4aab65" frameborder="0" allowfullscreen></iframe> | |||
<!--top--> | |||
<div id="desc" class="pstyle" style="color:black !important"> | |||
The Pine River runs through mid-Michigan in southwest Isabella, Montcalm, | |||
and Gratiot counties. <br>Its history is long and unfortunate: the once-beautiful river is now a polluted danger zone. | |||
</div> | |||
<div class="extraspace"></div> | |||
/ | <div class="bodybackground"> | ||
<div class="bodymargin"> | |||
<div class="textcontainer"> | |||
<div class="rowcontainer"> | |||
<!--row 1 starts--> | |||
<div class="columntwothirdsleft"> | |||
<div class="subheadline">Foundations & Formulations</div> | |||
<div class="pstyle pleft"> | |||
In 1853, Joseph Clapp founded St. Louis, MI, later building a sawmill and a dam along the Pine River. | |||
In May of 1856, Clapp sold his sawmill and surrounding forest to Richard G. Hillyer, | |||
Lewis M. Clark, and George W. Davis of Saginaw. They began to lumber their new property. | |||
</div> | |||
</div> | |||
<div class="columnthirdright"> | |||
<img class="rightimg" src="https://2020.igem.org/wiki/images/1/12/T--Alma--St_Louis_water_tower.png" alt="St. Louis, MI"> | |||
</div> | |||
</div> | |||
<!--row 2--> | |||
<div class="rowcontainer"> | |||
<div class="columnthirdleft"> | |||
<img class="leftimg"src="https://2020.igem.org/wiki/images/5/5a/T--Alma--pine_river_scenery.png" alt="The Pine River in autumn"> | |||
</div> | |||
<div class="columntwothirdsright"> | |||
<div class="pstyle pright"> | |||
In the 1930s, the newly organized Michigan Chemical Corporation had acquired a 14-acre site of the sawmill, | |||
salt block, and bromine plant. On September 15, 1935, ground was broken for the construction of a chemical plant | |||
on the banks of the Pine River. Throughout this decade, the company manufactured products such as Crystal Flow salt, | |||
and eventually dedicated themselves to full chemical research. During World War II, the corporation began | |||
researching an effective new insecticide called DDT (Dichloro-diphenyl-trichloroethane). More research led to | |||
constructing a DDT plant in April 1944. The corporation then sent tons of the product to the Army and Navy | |||
to help them serve in insect-ridden areas. In the 1950s and 1960s, the Michigan Chemical Corporation grew | |||
into a complex array of buildings and storage tanks across the west side of St. Louis, pumping millions of dollars into the area's economy. | |||
</div> | |||
</div> | |||
</div> | |||
<!--row 1 ends--> | |||
<!--row 2 starts--> | |||
<div class="rowcontainer"> | |||
<div class="columntwothirdsleft"> | |||
<div class="subheadline">Chemicals, Cattle, & Contamination</div> | |||
<div class="pstyle pleft"> | |||
In the 1960s, DDT questions arose about its effectiveness due to more-resistant insects and its negative | |||
impact on other living organisms. A few years later, the Michigan Chemical Corporation was bought by the | |||
Velsicol Chemical Company and the production of DDT ceased in 1964, and DDT was eventually outlawed in 1973. | |||
During the 1970s Velsicol’s main products included Firemaster, a fire retardant with a chemical called PBB | |||
(Polybrominated Biphenyl), and Nutrimaster, a supplemental cattle feed. In 1973, there was a tragic mix up | |||
and Nutrimaster bags filled with PBB-laden Firemaster were sent to the Farm Bureau services, leading to the | |||
slaughter of hundreds of poisoned cattle. However, contaminated meat had already been sold throughout the | |||
state and nearly every person in the Lower Peninsula ingested PBB. The effects were unknown and there were | |||
an estimated $200 million in lawsuits. | |||
</div> | |||
</div> | |||
<div class="columnthirdright"> | |||
<img class="rightimg" src="https://2020.igem.org/wiki/images/4/4b/T--Alma--superfund_site_2.png" alt="The location of the former Velsicol Chemical Plant"> | |||
</div> | |||
/ | </div> | ||
. | <div class=“extraspace”></div> | ||
<!--row 2 ends--> | |||
<!-- row 3 starts--> | |||
<div class="rowcontainer"> | |||
<div class="columnthirdleft"> | |||
<img class="leftimg" src="https://2020.igem.org/wiki/images/9/92/T--Alma--superfund_main_sign.png" alt="Velsicol Chemical Plant Superfund Site Sign"> | |||
</div> | |||
<div class="columntwothirdsright"> | |||
<div class="subheadline pright">Severance & Shutdown</div> | |||
<div class="pstyle pright"> | |||
Around this time the Michigan Department of Natural Resources (DNR) stepped in to investigate the effects | |||
of the Velsicol Chemical Company’s operations surrounding the Pine River. They found the waterway and the | |||
company’s buildings, and property were highly contaminated by years of chemical production. In 1982, the | |||
U.S Environmental Protection Agency (EPA) offered Velsicol a deal to pay $38 million in damages in exchange for | |||
legal freedom of responsibility for the contamination. The buildings on the property were dismantled and | |||
the area was covered by clay to seal in the contamination. The area was fenced off and became an expensive plot of dirt. | |||
</div> | |||
</div> | |||
/ | </div> | ||
. | <div class=“extraspace”></div> | ||
<!--row 3 ends--> | |||
<!--row 4 starts--> | |||
<div class="rowcontainer"> | |||
<div class="columntwothirdsleft"> | |||
</ | <div class="subheadline">Pollution, Problems, & Persistence | ||
</div> | |||
<div class="pstyle pleft"> | |||
Throughout the years, the DNR continued to monitor the river and found that sixteen years after the plant | |||
ceased operations the fish of the river were also poisoned with DDT. Further into the investigation it was | |||
discovered that river sediment next to the plant site was 4% DDT/DDT derivatives. The pollution problem was | |||
far from solved and, in fact, getting worse. In 1997, the Pine River Superfund Citizens Task force was | |||
formed as a local advisory group to the EPA. They pushed the EPA for money to clean up the site. The EPA | |||
eventually fulfilled the request and a filtration process began that still occurs today. | |||
</div> | |||
</div> | |||
<div class="columnthirdright"> | |||
<img class="rightimg"src="https://2020.igem.org/wiki/images/5/59/T--Alma--superfund_memorial_bench.png" alt="Bench at the site proclaiming mutual goals to restore the Pine River ecosystem to its former glory"> | |||
</div> | |||
</div> | |||
<div class=“extraspace”></div> | |||
<!--row 4 ends--> | |||
<!--row 5 starts--> | |||
<div class="rowcontainer"> | |||
<div class="columnthirdleft"> | |||
<img class="leftimg" src="https://2020.igem.org/wiki/images/a/a1/T--Alma--Lab_for_homepage.jpeg" alt="iGEMers in lab"> | |||
</div> | |||
<div class="columntwothirdsright"> | |||
<div class="subheadline pright">Research & Revival</div> | |||
<div class="pstyle pright"> | |||
Our team's two-year project, Poisoned River, will focus on creating a DDT-detecting biosensor to aid researchers and cut down on costs. | |||
Several species of animals have estrogen receptors known to bind DDT, a known xenoestrogen. Linking this binding | |||
process to a reporting gene, such as RFP, within a microbe will allow for the detection of organochlorides, | |||
which can enhance broad spectrum screening of these contaminated areas both locally and globally. | |||
Ultimately, this biosensor has the potential to save thousands of dollars in the pollution cleanup effort | |||
as well as provide a basis for the development of future synthetic biology tools for the bioremediation of DDT. | |||
</div> | |||
</div> | |||
<div class=“extraspace”></div> | |||
</div> | |||
<!-- end row 5--> | |||
</div> | |||
</div> <!-- ends "bodymargin" --> | |||
</div> <!-- ends "bodybackground" --> | |||
</body> | |||
</html> |
2021年4月19日 (一) 21:08的版本
<html>
<head> <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Galdeano&family=Limelight&display=swap" rel="stylesheet"> </head> <script>
/* This code is built from two sources: developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event and https://css-tricks.com/updating-a-css-variable-with-javascript/. Please see the CSS note below for the :root bit
- /
let root = document.documentElement;
var body = document.body, html = document.documentElement;
var scrollLimit = 1800; var adjustedScrollLimit = scrollLimit - 0;
window.addEventListener('scroll', e => { // console.log(scrollY);
/* This following block was for the 'sticky' background if(window.scrollY>scrollLimit){ document.getElementById("bodybackground").style.backgroundAttachment = "fixed"; document.getElementById("bodybackground").style.backgroundPosition = "0px " + scrollLimit + "px"; } else if(window.scrollY<scrollLimit){ if(document.getElementById("bodybackground").style.backgroundAttachment == "fixed"){ document.getElementById("bodybackground").style.backgroundAttachment = "local"; document.getElementById("bodybackground").style.backgroundPosition = "0px 0px"; } } */ });
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function showMenu(elementName) {
var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } }
document.getElementById(elementName).classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } }
}
</script>
<style>
- sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
- content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
body, html {background-color:white; width: 100%; height: 100%;}
- bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
- bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
/*2020 Colours:
Pink: #E5A1A9, rgb(229,161,169) teal: #6ADFCD, rgb(106,223,205) aqua: #5D8CDD, rgb(93,140,221) purple: #6D4C93, rgb(109,76,147) dark green: #1C4F3F, rgb(28,79,63) logo text: #484494, rgb(72,68,148)
margin: top right bottom left; margin: top right/left bottom; margin: top/bottom right/left; */
- root{
--navBarPos: -75px; }
/* This block of code is taken from 2018.igem.org/Team:CUNY_Kingsborough and then modified as necessary */ .dropbtn { border: none; background-color: #6c4c94; padding: 10px; font-family: 'Assistant', sans-serif !important; font-size:calc(12px + 0.8vw); color: white; text-decoration: none; width:100%; border-radius: 10px;
margin-left: 175px; /* I added this rotation, just because :) */
}
.dd1 { transform:rotate(-10deg); } .dd2 { transform:rotate(-10deg); } .dd3 { transform:rotate(-5deg); } .navbarFix { min-width:900px; }
.dropbtn:hover { border: none; background-color: #6D4C93; color: #6ADFCD; padding: 10px; font-size:calc(12px + 0.8vw); transition: all 0.5s; text-decoration: bold; cursor: pointer; }
.dropdown { margin-left: 2%; position: relative; display: inline-block; width: 12%; min-width:80px; margin-left: 75px; /* background-color: #6c4c94; */ }
.dropdown-content { display: none; position: absolute; min-width: 180px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 2; margin-left: 175px; transform:rotate(-10deg); }
.show { display: block; }
.dropdown-content a { border-bottom-style: solid; border-color: rgba(255, 255, 255, .7); border-width: 1px; color: black; background-color: #6ADFCD !important; font-family: 'Assistant', sans-serif !important; font-size: 16px; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #5d8cdd !important; color: white !important; }
/* Code leftover from hover functionality
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropbtn { background-color: #6c4c94; }
- /
.dropbtn:hover, .dropbtn:focus {
background-color: #6c4c94;
}
.dropdown-menu-center { left: 50% !important; right: auto !important; text-align: center !important; transform: translate(-50%, 0) !important; } .logo { /* The image used */ background-image: url("https://2020.igem.org/wiki/images/d/d6/T--Alma--navbar_no_boxes.png"); min-height: 650px; width: 100vw; /* Center and scale the image nicely */ background-position: left top; background-repeat: no-repeat; background-size: cover;
/* Needed to position the navbar */ position: relative; border-bottom: 10px solid #484494;
}
/* Leftover, might not be necessary .container {
overflow: hidden; position: absolute; top: 290px; width: 100%; min-width: 1100px;
} */
/* The navbar */ .topnav {
overflow: hidden; background-color: rgba(255, 0, 0, 0);
}
/* Navbar links */ .topnav a {
float: left; color: #484494; text-align: center; text-decoration: none; font-size:calc(18px + .5vw); width: 14.28%;
}
*/
.topnav a:hover {
color: black;
}
.bodybackground {
background-attachment: local; background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url("https://2020.igem.org/wiki/images/d/d0/T--Alma--Pine_River_Background_fullcolor.png") !important; width: 100%; height: 100%; background-size: cover; /*background-blend-mode: lighten;*/ border-top: 10px solid #484494;
}
.bodymargin {
margin: 0px; padding: 100px;
}
.textcontainer { background-color: rgba(0,0,0,0.5) !important; border-radius: 15px; padding: 50px; padding-top: 75px; margin-top: 30px; max-width: auto;
}
/* Clear floats after the columns */ .rowcontainer:after {
content: ""; display: table; clear: both;
}
.columnthirdleft {
float: left; width: 33.33%;
}
.columntwothirdsright {
float: right; width: 66.67%;
}
.columnthirdright {
float: right; width: 33.33%;
}
.columntwothirdsleft {
float: left; width: 66.67%;
}
.extraspace {
margin: 50px;
}
.pstyle {
line-height: 25px;
font-family: 'Assistant', sans-serif !important;
font-size: 20px; margin: 25px 0px; color: white; }
.pleft {
padding-right: 35px;
}
.pright {
padding-left: 35px;
}
.headline {
font-family: 'Limelight', arial, sans-serif !important; font-size: 75px; color: #6ADFCD; text-align: center; text-transform: uppercase;
} /* Subheadline */ .subheadline {
font-family: 'Galdeano', arial, sans-serif !important; line-height: 47px; font-size: 35px; color: #6ADFCD;
}
.centertext {
text-align: center;
}
.centerimg {
display: block; margin-right: auto; margin-left: auto;
}
.leftimg {
display: block; max-width: 100%; float: left; padding: 22px 0px 20px;
}
.rightimg {
display: block; max-width: 100%; float: right; padding: 22px 0px 20px;
}
- desc {
display: block; margin-right: auto; margin-left: auto; max-width: 75%; text-align: center; margin-top: 40px;
}
figcaption {
color: white; text-align: left;
}
.hyperlink {
color: #6ADFCD !important;
}
.hyperlink:hover {
text-shadow: #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px; text-decoration: none;
}
.hyperlink:visited {
color: #E5A1A9 !important;
}
span { color: red !important; font-weight: 700 !important;
}
</style>
<body>
Watch our project promotion video!
<iframe class="centerimg" width="800" height="450" sandbox="allow-same-origin allow-scripts allow-popups" src="https://video.igem.org/videos/embed/5a8e20cd-a763-4fa2-ae07-3e1a1b4aab65" frameborder="0" allowfullscreen></iframe>
The Pine River runs through mid-Michigan in southwest Isabella, Montcalm, and Gratiot counties.
Its history is long and unfortunate: the once-beautiful river is now a polluted danger zone.
In 1853, Joseph Clapp founded St. Louis, MI, later building a sawmill and a dam along the Pine River. In May of 1856, Clapp sold his sawmill and surrounding forest to Richard G. Hillyer, Lewis M. Clark, and George W. Davis of Saginaw. They began to lumber their new property.
<img class="rightimg" src="https://2020.igem.org/wiki/images/1/12/T--Alma--St_Louis_water_tower.png" alt="St. Louis, MI">
<img class="leftimg"src="https://2020.igem.org/wiki/images/5/5a/T--Alma--pine_river_scenery.png" alt="The Pine River in autumn">
In the 1930s, the newly organized Michigan Chemical Corporation had acquired a 14-acre site of the sawmill, salt block, and bromine plant. On September 15, 1935, ground was broken for the construction of a chemical plant on the banks of the Pine River. Throughout this decade, the company manufactured products such as Crystal Flow salt, and eventually dedicated themselves to full chemical research. During World War II, the corporation began researching an effective new insecticide called DDT (Dichloro-diphenyl-trichloroethane). More research led to constructing a DDT plant in April 1944. The corporation then sent tons of the product to the Army and Navy to help them serve in insect-ridden areas. In the 1950s and 1960s, the Michigan Chemical Corporation grew into a complex array of buildings and storage tanks across the west side of St. Louis, pumping millions of dollars into the area's economy.
In the 1960s, DDT questions arose about its effectiveness due to more-resistant insects and its negative impact on other living organisms. A few years later, the Michigan Chemical Corporation was bought by the Velsicol Chemical Company and the production of DDT ceased in 1964, and DDT was eventually outlawed in 1973. During the 1970s Velsicol’s main products included Firemaster, a fire retardant with a chemical called PBB (Polybrominated Biphenyl), and Nutrimaster, a supplemental cattle feed. In 1973, there was a tragic mix up and Nutrimaster bags filled with PBB-laden Firemaster were sent to the Farm Bureau services, leading to the slaughter of hundreds of poisoned cattle. However, contaminated meat had already been sold throughout the state and nearly every person in the Lower Peninsula ingested PBB. The effects were unknown and there were an estimated $200 million in lawsuits.
<img class="rightimg" src="https://2020.igem.org/wiki/images/4/4b/T--Alma--superfund_site_2.png" alt="The location of the former Velsicol Chemical Plant">
<img class="leftimg" src="https://2020.igem.org/wiki/images/9/92/T--Alma--superfund_main_sign.png" alt="Velsicol Chemical Plant Superfund Site Sign">
Around this time the Michigan Department of Natural Resources (DNR) stepped in to investigate the effects of the Velsicol Chemical Company’s operations surrounding the Pine River. They found the waterway and the company’s buildings, and property were highly contaminated by years of chemical production. In 1982, the U.S Environmental Protection Agency (EPA) offered Velsicol a deal to pay $38 million in damages in exchange for legal freedom of responsibility for the contamination. The buildings on the property were dismantled and the area was covered by clay to seal in the contamination. The area was fenced off and became an expensive plot of dirt.
Throughout the years, the DNR continued to monitor the river and found that sixteen years after the plant ceased operations the fish of the river were also poisoned with DDT. Further into the investigation it was discovered that river sediment next to the plant site was 4% DDT/DDT derivatives. The pollution problem was far from solved and, in fact, getting worse. In 1997, the Pine River Superfund Citizens Task force was formed as a local advisory group to the EPA. They pushed the EPA for money to clean up the site. The EPA eventually fulfilled the request and a filtration process began that still occurs today.
<img class="rightimg"src="https://2020.igem.org/wiki/images/5/59/T--Alma--superfund_memorial_bench.png" alt="Bench at the site proclaiming mutual goals to restore the Pine River ecosystem to its former glory">
<img class="leftimg" src="https://2020.igem.org/wiki/images/a/a1/T--Alma--Lab_for_homepage.jpeg" alt="iGEMers in lab">
Our team's two-year project, Poisoned River, will focus on creating a DDT-detecting biosensor to aid researchers and cut down on costs. Several species of animals have estrogen receptors known to bind DDT, a known xenoestrogen. Linking this binding process to a reporting gene, such as RFP, within a microbe will allow for the detection of organochlorides, which can enhance broad spectrum screening of these contaminated areas both locally and globally. Ultimately, this biosensor has the potential to save thousands of dollars in the pollution cleanup effort as well as provide a basis for the development of future synthetic biology tools for the bioremediation of DDT.
</body>
</html>