|
|
(13 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| {{Team:Penn/CSS}} | | {{Team:Penn/CSS}} |
| <html> | | <html> |
| + | <head> |
| + | <!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />--> |
| + | <title>University of Pennsylvania iGEM</title> |
| + | <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> |
| + | </div> |
| + | </head> |
| <style type="text/css"> | | <style type="text/css"> |
| @import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700); | | @import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700); |
Line 20: |
Line 26: |
| #parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; padding:50px; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;} | | #parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; padding:50px; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;} |
| #parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;} | | #parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;} |
− | #parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:16px; line-height:24px;} | + | #parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:18px; line-height:24px;} |
− | .first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;} | + | .first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;};} |
| | | |
| .sc {color: #3b8595;} | | .sc {color: #3b8595;} |
Line 34: |
Line 40: |
| /* Section - Block */ | | /* Section - Block */ |
| /**************************/ | | /**************************/ |
− | #parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;} | + | #parallax-world-of-ugg .block {background: white; padding: 60px; width:1020px; margin:0 auto; text-align:justify;} |
| #parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;} | | #parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;} |
| #parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;} | | #parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;} |
Line 63: |
Line 69: |
| } | | } |
| | | |
− | @import "compass/css3";
| |
− | body {
| |
− | font-family: 'Open Sans', sans-serif;
| |
− | margin: 80px auto;
| |
− | min-height: 400px;
| |
− | }
| |
− | .plyr_holder {
| |
− | width: 400px;
| |
− | position: relative;
| |
− | margin: 0px auto;
| |
− | }
| |
− | .plyr_img {
| |
− | position: absolute;
| |
− | width: 100px;
| |
− | height: 100px;
| |
− | overflow: hidden;
| |
− | -webkit-border-radius: 2px;
| |
− | -moz-border-radius: 2px;
| |
− | border-radius: 2px;
| |
− | box-shadow: 0 0 0 6px rgba(255,255,255,1), 0 0 0 7px rgba(0,0,0,0.1), 0 2px 0 6px rgba(255,255,255,1), 0 3px 0 6px rgba(0,0,0,0.1), 0 0 8px 7px rgba(0,0,0,0.2);
| |
− | z-index: 999;
| |
− | overflow: hidden;
| |
− | top: -34px;
| |
− | left: 22px;
| |
− | }
| |
− | .plyr_details {
| |
− | position: absolute;
| |
− | background: rgb(255,255,255);
| |
− | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
| |
− | background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
| |
− | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
| |
− | background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
| |
− | background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
| |
− | background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
| |
− | background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
| |
− | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
| |
− | width: 400px;
| |
− | height: 100px;
| |
− | z-index: 998;
| |
− | border: 1px solid rgba(0,0,0,0.23);
| |
− | box-shadow: inset 0 1px 1px 0px rgba(255,255,255,1), inset 0 0 8px 5px rgba(0,0,0,0.05), 0 0 8px 0 rgba(0,0,0,0.2);
| |
− | -webkit-border-radius: 3px;
| |
− | -moz-border-radius: 3px;
| |
− | border-radius: 3px;
| |
− | }
| |
− | .plyr_details ul {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | position: absolute;
| |
− | list-style-type: none;
| |
− | left: 140px;
| |
− | }
| |
− | .plyr_details li {
| |
− | }
| |
− | .plyr_details li h1.title {
| |
− | font-size: 22px;
| |
− | font-weight: 700;
| |
− | color: #46565d;
| |
− | text-shadow: 1px 1px 0px rgba(255,255,255,0.8);
| |
− | line-height: 13px;
| |
− | }
| |
− | .plyr_details li.song {
| |
− | color: #526269;
| |
− | font-size: 13px;
| |
− | text-shadow: 1px 1px 0px rgba(255,255,255,0.8)
| |
− | }
| |
− | .plyr_details li.album {
| |
− | color: #1268b1;
| |
− | font-size: 11px;
| |
− | text-shadow: 1px 1px 0px rgba(255,255,255,0.8)
| |
− | }
| |
− | .plyr_control {
| |
− | position: absolute;
| |
− | background: rgb(81,81,81);
| |
− | background: url(data: image/svg+xml;
| |
− | base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUxNTE1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
| |
− | background: -moz-linear-gradient(top, rgba(81,81,81,1) 0%, rgba(0,0,0,1) 100%);
| |
− | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,81,81,1)), color-stop(100%,rgba(0,0,0,1)));
| |
− | background: -webkit-linear-gradient(top, rgba(81,81,81,1) 0%, rgba(0,0,0,1) 100%);
| |
− | background: -o-linear-gradient(top, rgba(81,81,81,1) 0%, rgba(0,0,0,1) 100%);
| |
− | background: -ms-linear-gradient(top, rgba(81,81,81,1) 0%, rgba(0,0,0,1) 100%);
| |
− | background: linear-gradient(top, rgba(81,81,81,1) 0%, rgba(0,0,0,1) 100%);
| |
− | filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#000000',GradientType=0 );
| |
− | -webkit-border-radius: 3px;
| |
− | -moz-border-radius: 3px;
| |
− | border-radius: 3px;
| |
− | width: 400px;
| |
− | height: 50px;
| |
− | top: 90px;
| |
− | z-index: 999;
| |
− | border: 1px solid rgba(0,0,0,0.1);
| |
− | box-shadow: inset 0 1px 0px 0px rgba(255,255,255,0.5), inset 0 0 8px 3px rgba(0,0,0,0.3), 0 0 8px 0 rgba(0,0,0,0.2);
| |
− | -webkit-border-radius: 3px;
| |
− | -moz-border-radius: 3px;
| |
− | border-radius: 3px;
| |
− | }
| |
− | .plyr_control ul {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | list-style-type: none;
| |
− | }
| |
− | .plyr_control li {
| |
− | float: left;
| |
− | cursor: pointer;
| |
− | }
| |
− | .plyr_control ul li a.pleft {
| |
− | background: url(http://picbox.im/image/cb9bb873c7-control.png) no-repeat 3px 17px;
| |
− | height: 50px;
| |
− | width: 22px;
| |
− | display: inline-block;
| |
− | margin-left: 5px;
| |
− | }
| |
− | .plyr_control ul li a.pplay {
| |
− | background: url(http://picbox.im/image/cb9bb873c7-control.png) no-repeat -17px 17px;
| |
− | height: 50px;
| |
− | width: 18px;
| |
− | display: inline-block;
| |
− | margin-left: 5px;
| |
− | -webkit-transition: all 0.3s ease-in-out;
| |
− | -moz-transition: all 0.3s ease-in-out;
| |
− | -o-transition: all 0.3s ease-in-out;
| |
− | -ms-transition: all 0.3s ease-in-out;
| |
− | transition: all 0.3s ease-in-out;
| |
− | }
| |
− | .plyr_control ul li a.pplay:hover {
| |
− | background: url(http://picbox.im/image/cb9bb873c7-control.png) no-repeat -30px 17px;
| |
− | height: 50px;
| |
− | width: 18px;
| |
− | display: inline-block;
| |
− | margin-left: 5px;
| |
− | }
| |
− | .plyr_control ul li a.pright {
| |
− | background: url(http://picbox.im/image/cb9bb873c7-control.png) no-repeat -45px 17px;
| |
− | height: 50px;
| |
− | width: 22px;
| |
− | display: inline-block;
| |
− | margin-left: 5px;
| |
− | }
| |
− | .plyr_control ul li a.pvolume {
| |
− | background: url(http://picbox.im/image/cb9bb873c7-control.png) no-repeat -71px 17px;
| |
− | height: 50px;
| |
− | width: 22px;
| |
− | display: inline-block;
| |
− | margin-left: 15px;
| |
− | }
| |
− | .plyr_control ul li a.pfull {
| |
− | background: url(http://picbox.im/image/cb9bb873c7-control.png) no-repeat -96px 17px;
| |
− | height: 50px;
| |
− | width: 22px;
| |
− | display: inline-block;
| |
− | margin-left: 115px;
| |
− | }
| |
− | .plyr_control ul li a.pinfo {
| |
− | background: url(http://picbox.im/image/cb9bb873c7-control.png) no-repeat -120px 17px;
| |
− | height: 50px;
| |
− | width: 22px;
| |
− | display: inline-block;
| |
− | margin-left: 95px;
| |
− | }
| |
− | .ptime {
| |
− | display: inline-block;
| |
− | height: 50px;
| |
− | width: 130px;
| |
− | position: relative;
| |
− | }
| |
− | .pslider {
| |
− | background: rgb(18,108,184);
| |
− | background: url(data: image/svg+xml;
| |
− | base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEyNmNiOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2NmExZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
| |
− | background: -moz-linear-gradient(left, rgba(18,108,184,1) 0%, rgba(102,161,231,1) 100%);
| |
− | background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(18,108,184,1)), color-stop(100%,rgba(102,161,231,1)));
| |
− | background: -webkit-linear-gradient(left, rgba(18,108,184,1) 0%, rgba(102,161,231,1) 100%);
| |
− | background: -o-linear-gradient(left, rgba(18,108,184,1) 0%, rgba(102,161,231,1) 100%);
| |
− | background: -ms-linear-gradient(left, rgba(18,108,184,1) 0%, rgba(102,161,231,1) 100%);
| |
− | background: linear-gradient(left, rgba(18,108,184,1) 0%, rgba(102,161,231,1) 100%);
| |
− | filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#126cb8', endColorstr='#66a1e7',GradientType=1 );
| |
− | border-radius: 25px;
| |
− | box-shadow: inset 0 1px 0px 0px rgba(255,255,255,0.5), inset 0 0 8px 3px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,1), 0 1px 0px 1px rgba(255,255,255,0.3);
| |
− | cursor: pointer;
| |
− | height: 6px;
| |
− | position: absolute;
| |
− | width: 120px;
| |
− | -webkit-appearance: none;
| |
− | -webkit-transition: .15s;
| |
− | display: block;
| |
− | top: 22px;
| |
− | left: 10px;
| |
− | }
| |
− | .pslider_dot {
| |
− | position: absolute;
| |
− | width: 6px;
| |
− | height: 6px;
| |
− | background: rgb(102,161,231);
| |
− | background: url(data: image/svg+xml;
| |
− | base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NmExZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTI2Y2I4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
| |
− | background: -moz-radial-gradient(center, ellipse cover, rgba(102,161,231,1) 0%, rgba(18,108,184,1) 100%);
| |
− | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(102,161,231,1)), color-stop(100%,rgba(18,108,184,1)));
| |
− | background: -webkit-radial-gradient(center, ellipse cover, rgba(102,161,231,1) 0%, rgba(18,108,184,1) 100%);
| |
− | background: -o-radial-gradient(center, ellipse cover, rgba(102,161,231,1) 0%, rgba(18,108,184,1) 100%);
| |
− | background: -ms-radial-gradient(center, ellipse cover, rgba(102,161,231,1) 0%, rgba(18,108,184,1) 100%);
| |
− | background: radial-gradient(center, ellipse cover, rgba(102,161,231,1) 0%, rgba(18,108,184,1) 100%);
| |
− | filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#66a1e7', endColorstr='#126cb8',GradientType=1 );
| |
− | box-shadow: 0 0 0 3px rgba(255,255,255,1), 0 -1px 1px 3px rgba(0,0,0,0.3), 0 0 0 6px rgba(255,255,255,1), 0 0px 5px 7px rgba(0,0,0,0.3);
| |
− | top: 22px;
| |
− | left: 50px;
| |
− | -webkit-border-radius: 50%;
| |
− | -moz-border-radius: 50%;
| |
− | border-radius: 50%;
| |
− | }
| |
− | /*
| |
− | Animate.css - http://daneden.me/animate
| |
− | LICENSED UNDER THE MIT LICENSE (MIT)
| |
− |
| |
− | Copyright (c) 2012 Dan Eden
| |
− |
| |
− | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
| |
− |
| |
− | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
| |
− |
| |
− | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
| |
− | */
| |
− |
| |
− | .animated {
| |
− | -webkit-animation-fill-mode: both;
| |
− | -moz-animation-fill-mode: both;
| |
− | -ms-animation-fill-mode: both;
| |
− | -o-animation-fill-mode: both;
| |
− | animation-fill-mode: both;
| |
− | -webkit-animation-duration: 1s;
| |
− | -moz-animation-duration: 1s;
| |
− | -ms-animation-duration: 1s;
| |
− | -o-animation-duration: 1s;
| |
− | animation-duration: 1s;
| |
− | }
| |
− |
| |
− | .animated.hinge {
| |
− | -webkit-animation-duration: 2s;
| |
− | -moz-animation-duration: 2s;
| |
− | -ms-animation-duration: 2s;
| |
− | -o-animation-duration: 2s;
| |
− | animation-duration: 2s;
| |
− | }
| |
− |
| |
− | @-webkit-keyframes bounceInDown {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -webkit-transform: translateY(-2000px);
| |
− | }
| |
− |
| |
− | 60% {
| |
− | opacity: 1;
| |
− | -webkit-transform: translateY(30px);
| |
− | }
| |
− |
| |
− | 80% {
| |
− | -webkit-transform: translateY(-10px);
| |
− | }
| |
− |
| |
− | 100% {
| |
− | -webkit-transform: translateY(0);
| |
− | }
| |
− | }
| |
− |
| |
− | @-moz-keyframes bounceInDown {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -moz-transform: translateY(-2000px);
| |
− | }
| |
− |
| |
− | 60% {
| |
− | opacity: 1;
| |
− | -moz-transform: translateY(30px);
| |
− | }
| |
− |
| |
− | 80% {
| |
− | -moz-transform: translateY(-10px);
| |
− | }
| |
− |
| |
− | 100% {
| |
− | -moz-transform: translateY(0);
| |
− | }
| |
− | }
| |
− |
| |
− | @-ms-keyframes bounceInDown {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -ms-transform: translateY(-2000px);
| |
− | }
| |
− |
| |
− | 60% {
| |
− | opacity: 1;
| |
− | -ms-transform: translateY(30px);
| |
− | }
| |
− |
| |
− | 80% {
| |
− | -ms-transform: translateY(-10px);
| |
− | }
| |
− |
| |
− | 100% {
| |
− | -ms-transform: translateY(0);
| |
− | }
| |
− | }
| |
− |
| |
− | @-o-keyframes bounceInDown {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -o-transform: translateY(-2000px);
| |
− | }
| |
− |
| |
− | 60% {
| |
− | opacity: 1;
| |
− | -o-transform: translateY(30px);
| |
− | }
| |
− |
| |
− | 80% {
| |
− | -o-transform: translateY(-10px);
| |
− | }
| |
− |
| |
− | 100% {
| |
− | -o-transform: translateY(0);
| |
− | }
| |
− | }
| |
− |
| |
− | @keyframes bounceInDown {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | transform: translateY(-2000px);
| |
− | }
| |
− |
| |
− | 60% {
| |
− | opacity: 1;
| |
− | transform: translateY(30px);
| |
− | }
| |
− |
| |
− | 80% {
| |
− | transform: translateY(-10px);
| |
− | }
| |
− |
| |
− | 100% {
| |
− | transform: translateY(0);
| |
− | }
| |
− | }
| |
− |
| |
− | .bounceInDown {
| |
− | -webkit-animation-name: bounceInDown;
| |
− | -moz-animation-name: bounceInDown;
| |
− | -ms-animation-name: bounceInDown;
| |
− | -o-animation-name: bounceInDown;
| |
− | animation-name: bounceInDown;
| |
− | }
| |
| </style> | | </style> |
| | | |
Line 422: |
Line 78: |
| </div> | | </div> |
| <div class="block"> | | <div class="block"> |
− | <p>When the New York fashion community notices your brand, the world soon follows. The widespread love for UGG extended to Europe in the mid-2000's along with the stylish casual movement and demand for premium casual fashion. UGG boots and shoes were now seen walking the streets of London, Paris and Amsterdam with regularity. To meet the rising demand from new fans, UGG opened flagship stores in the UK and an additional location in Moscow. As the love spread farther East, concept stores were opened in Beijing, Shanghai and Tokyo. UGG Australia is now an international brand that is loved by all. This love is a result of a magical combination of the amazing functional benefits of sheepskin and the heightened emotional feeling you get when you slip them on your feet. In short, you just feel better all over when you wear UGG boots, slippers, and shoes.</p>
| + | <p><br>We believe that our final project would not harbor any major safety issues to the research, public or the environment. The light-producing and light-sensing components of our project are simply applications of existing natural processes in a new setting.</p> |
− | <p class="margin-top-10">In 2011, UGG will go back to its roots and focus on bringing the active men that brought the brand to life back with new styles allowing them to love the brand again as well. Partnering with Super Bowl champion and NFL MVP Tom Brady, UGG will invite even more men to feel the love the rest of the world knows so well. UGG will also step into the world of high fashion with UGG Collection. The UGG Collection fuses the timeless craft of Italian shoemaking with the reliable magic of sheepskin, bringing the luxurious feel of UGG to high end fashion. As the love for UGG continues to spread across the world, we have continued to offer new and unexpected ways to experience the brand. The UGG journey continues on and the love for UGG continues to spread.</p>
| + | <p><br><strong>What is your chassis organism?</strong></p> |
− | </div>
| + | <p><br>We work with strains of <em>E.Coli</em>: NEB10, BL21, SY104 and HNS BW25113 Dhns::kan. We do not intend to plan experiments with any other organisms aside from our chassis.</p> |
− | <link href='http://fonts.googleapis.com/css?family=Open+Sans:700italic,400,300,700' rel='stylesheet' type='text/css'> | + | <p><br><strong>What risks does your project pose at the laboratory stage? What actions are you taking to reduce those risks?</strong></p> |
− | <div class="plyr_holder"> | + | <p><br>The strains of E.Coli that comprise our light-based communication system are highly conserved and pose minor risks when handled carefully. ATCC has assigned all strains a biosafety level of 1. In order to prevent contamination of any samples in the lab, including mammalian cell cultures, we dispose of all E. coli by bleaching cultures and then disposing of equipment in designated biohazard bins. All team members strictly adhere to the following safety procedures when performing experiments: </p> |
− | <div class="plyr_img animated bounceInDown">
| + | <p> </p> |
− | <img src="http://www.avatarsdb.com/avatars/eminem_hand.jpg">
| + | <p> 1. All personnel wash their hands after they handle viable materials, after removing gloves, and before leaving the lab.</p> |
− | </div>
| + | <p> 2. Eating and drinking in the lab is not permitted. Food is stored outside the work area in cabinets or refrigerators..</p> |
− | <div class="plyr_details">
| + | <p> 3. Policies for the safe handling of sharps are instituted.</p> |
− | <ul>
| + | <p> 4. Work surfaces are decontaminated at least once a day and after any spill.</p> |
− | <li>
| + | <p> 5. All cultures, stocks and other wastes are decontaminated before disposal by an approved method such as autoclaving.</p> |
− | <h1 class="title">Love the way you lie</h1>
| + | <p> 6. Rubber gloves and protective eye-wear are worn at all times.</p> |
− | </li>
| + | <p> </p> |
− | <li class="song">Encore
| + | <p><br><strong>How would your project be used in the real world?</strong></p> |
− | </li>
| + | <p>We are building a system of light-based communication between cell populations. This will allow for future research teams to take advantage of the orthogonality and spatiotemporal control of light as a medium for cell-to-cell communication. Additionally, we have shown that communication is possible across boundaries, so it is possible to promote talk between cells that grow in different environments or have different antibiotic resistances.</p> |
− | <li class="album">Eminem
| + | <p><br><strong>What risks might your project pose, if it were fully developed into a real product that real people could use? What future work might you do to reduce those risks?</strong></p> |
− | </li>
| + | <p><br>We believe that the light-producing and light-sensing BioBricks do not raise any known safety issues to research, the public, or the environment. The system would most likely be utilized in a lab environment in order to promote communication across strains and environments. Therefore, general lab safety procedures must be followed in utilizing our communication system. Additionally, to guarantee public and environmental safety, researchers must properly dispose of bio-hazardous experimental waste to prevent undesirable spread of genes or toxicity into the environment.</p> |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="plyr_control">
| + | |
− | <ul>
| + | |
− | <li>
| + | |
− | <a class="pleft"></a>
| + | |
− | </li>
| + | |
− | <li>
| + | |
− | <a class="pplay"></a>
| + | |
− | </li>
| + | |
− | <li>
| + | |
− | <a class="pright"></a>
| + | |
− | </li>
| + | |
− | <li>
| + | |
− | <div class="ptime">
| + | |
− | <span class="pslider">
| + | |
− | </span>
| + | |
− | <span class="pslider_dot">
| + | |
− | </span>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li>
| + | |
− | <a class="pvolume"></a>
| + | |
− | </li>
| + | |
− | <li>
| + | |
− | <a class="pfull"></a>
| + | |
− | </li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
| </div> | | </div> |
| + | |
| + | |
| </html> | | </html> |