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;
| |
| }
| |
|
| |
| .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>
| |
