|
|
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <head>
| |
| - | <link
| |
| - | href="http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic"
| |
| - | rel="stylesheet" type="text/css">
| |
| - | <link
| |
| - | href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,300italic"
| |
| - | rel="stylesheet" type="text/css">
| |
| - | <meta charset="UTF-8">
| |
| - | <style type="text/css">
| |
| - | body {
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | background: rgb(230,230,230);
| |
| - |
| |
| - | color: rgb(50,50,50);
| |
| - | font-family: 'Open Sans', sans-serif;
| |
| - | font-size: 112.5%;
| |
| - | line-height: 1.6em;
| |
| - | }
| |
| | | | |
| - | /* ================ The Timeline ================ */
| |
| - |
| |
| - | .timeline {
| |
| - | position: relative;
| |
| - | width: 660px;
| |
| - | margin: 0 auto;
| |
| - | margin-top: 20px;
| |
| - | padding: 1em 0;
| |
| - | list-style-type: none;
| |
| - | }
| |
| - | p list {
| |
| - | text-align: left;
| |
| - | }
| |
| - |
| |
| - | .timeline:before {
| |
| - | position: absolute;
| |
| - | left: 50%;
| |
| - | top: 0;
| |
| - | content: ' ';
| |
| - | display: block;
| |
| - | width: 6px;
| |
| - | height: 100%;
| |
| - | margin-left: -3px;
| |
| - | background: rgb(80,80,80);
| |
| - | background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
| |
| - | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
| |
| - | background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
| |
| - | background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
| |
| - | background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
| |
| - | background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
| |
| - |
| |
| - | z-index: 5;
| |
| - | }
| |
| - |
| |
| - | .timeline li {
| |
| - | padding: 1em 0;
| |
| - | }
| |
| - |
| |
| - | .timeline li:after {
| |
| - | content: "";
| |
| - | display: block;
| |
| - | height: 0;
| |
| - | clear: both;
| |
| - | visibility: hidden;
| |
| - | }
| |
| - |
| |
| - | .direction-l {
| |
| - | position: relative;
| |
| - | width: 300px;
| |
| - | float: left;
| |
| - | text-align: right;
| |
| - | }
| |
| - |
| |
| - | .direction-r {
| |
| - | position: relative;
| |
| - | width: 300px;
| |
| - | float: right;
| |
| - | }
| |
| - |
| |
| - | .flag-wrapper {
| |
| - | position: relative;
| |
| - | display: inline-block;
| |
| - |
| |
| - | text-align: center;
| |
| - | }
| |
| - |
| |
| - | .flag {
| |
| - | position: relative;
| |
| - | display: inline;
| |
| - | background: rgb(248,248,248);
| |
| - | padding: 6px 10px;
| |
| - | border-radius: 5px;
| |
| - |
| |
| - | font-weight: 600;
| |
| - | text-align: left;
| |
| - | }
| |
| - |
| |
| - | .direction-l .flag {
| |
| - | -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
| |
| - | -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
| |
| - | box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
| |
| - | }
| |
| - |
| |
| - | .direction-r .flag {
| |
| - | -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
| |
| - | -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
| |
| - | box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
| |
| - | }
| |
| - |
| |
| - | .direction-l .flag:before,
| |
| - | .direction-r .flag:before {
| |
| - | position: absolute;
| |
| - | top: 50%;
| |
| - | right: -40px;
| |
| - | content: ' ';
| |
| - | display: block;
| |
| - | width: 12px;
| |
| - | height: 12px;
| |
| - | margin-top: -10px;
| |
| - | background: #fff;
| |
| - | border-radius: 10px;
| |
| - | border: 4px solid rgb(255,80,80);
| |
| - | z-index: 10;
| |
| - | }
| |
| - |
| |
| - | .direction-r .flag:before {
| |
| - | left: -40px;
| |
| - | }
| |
| - |
| |
| - | .direction-l .flag:after {
| |
| - | content: "";
| |
| - | position: absolute;
| |
| - | left: 100%;
| |
| - | top: 50%;
| |
| - | height: 0;
| |
| - | width: 0;
| |
| - | margin-top: -8px;
| |
| - | border: solid transparent;
| |
| - | border-left-color: rgb(248,248,248);
| |
| - | border-width: 8px;
| |
| - | pointer-events: none;
| |
| - | }
| |
| - |
| |
| - | .direction-r .flag:after {
| |
| - | content: "";
| |
| - | position: absolute;
| |
| - | right: 100%;
| |
| - | top: 50%;
| |
| - | height: 0;
| |
| - | width: 0;
| |
| - | margin-top: -8px;
| |
| - | border: solid transparent;
| |
| - | border-right-color: rgb(248,248,248);
| |
| - | border-width: 8px;
| |
| - | pointer-events: none;
| |
| - | }
| |
| - |
| |
| - | .time-wrapper {
| |
| - | display: inline;
| |
| - |
| |
| - | line-height: 1em;
| |
| - | font-size: 0.66666em;
| |
| - | color: rgb(250,80,80);
| |
| - | vertical-align: middle;
| |
| - | }
| |
| - |
| |
| - | .direction-l .time-wrapper {
| |
| - | float: left;
| |
| - | }
| |
| - |
| |
| - | .direction-r .time-wrapper {
| |
| - | float: right;
| |
| - | }
| |
| - |
| |
| - | .time {
| |
| - | display: inline-block;
| |
| - | padding: 4px 6px;
| |
| - | background: rgb(248,248,248);
| |
| - | }
| |
| - |
| |
| - | .desc {
| |
| - | margin: 1em 0.75em 0 0;
| |
| - |
| |
| - | font-size: 0.77777em;
| |
| - | font-style: italic;
| |
| - | line-height: 1.5em;
| |
| - | }
| |
| - |
| |
| - | .direction-r .desc {
| |
| - | margin: 1em 0 0 0.75em;
| |
| - | }
| |
| - |
| |
| - | /* ================ Timeline Media Queries ================ */
| |
| - |
| |
| - | @media screen and (max-width: 660px) {
| |
| - |
| |
| - | .timeline {
| |
| - | width: 100%;
| |
| - | padding: 4em 0 1em 0;
| |
| - | }
| |
| - |
| |
| - | .timeline li {
| |
| - | padding: 2em 0;
| |
| - | }
| |
| - |
| |
| - | .direction-l,
| |
| - | .direction-r {
| |
| - | float: none;
| |
| - | width: 100%;
| |
| - |
| |
| - | text-align: center;
| |
| - | }
| |
| - |
| |
| - | .flag-wrapper {
| |
| - | text-align: center;
| |
| - | }
| |
| - |
| |
| - | .flag {
| |
| - | background: rgb(255,255,255);
| |
| - | z-index: 15;
| |
| - | }
| |
| - |
| |
| - | .direction-l .flag:before,
| |
| - | .direction-r .flag:before {
| |
| - | position: absolute;
| |
| - |
| |
| - | top: -30px;
| |
| - | left: 50%;
| |
| - | content: ' ';
| |
| - | display: block;
| |
| - | width: 12px;
| |
| - | height: 12px;
| |
| - | margin-left: -9px;
| |
| - | background: #fff;
| |
| - | border-radius: 10px;
| |
| - | border: 4px solid rgb(255,80,80);
| |
| - | z-index: 10;
| |
| - | }
| |
| - |
| |
| - | .direction-l .flag:after,
| |
| - | .direction-r .flag:after {
| |
| - | content: "";
| |
| - | position: absolute;
| |
| - | left: 50%;
| |
| - | top: -8px;
| |
| - | height: 0;
| |
| - | width: 0;
| |
| - | margin-left: -8px;
| |
| - | border: solid transparent;
| |
| - | border-bottom-color: rgb(255,255,255);
| |
| - | border-width: 8px;
| |
| - | pointer-events: none;
| |
| - | }
| |
| - |
| |
| - | .time-wrapper {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | margin: 4px 0 0 0;
| |
| - | z-index: 14;
| |
| - | }
| |
| - |
| |
| - | .direction-l .time-wrapper {
| |
| - | float: none;
| |
| - | }
| |
| - |
| |
| - | .direction-r .time-wrapper {
| |
| - | float: none;
| |
| - | }
| |
| - |
| |
| - | .desc {
| |
| - | position: relative;
| |
| - | margin: 1em 0 0 0;
| |
| - | padding: 1em;
| |
| - | background: rgb(245,245,245);
| |
| - | -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
| |
| - | -moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
| |
| - | box-shadow: 0 0 1px rgba(0,0,0,0.20);
| |
| - |
| |
| - | z-index: 15;
| |
| - | }
| |
| - |
| |
| - | .direction-l .desc,
| |
| - | .direction-r .desc {
| |
| - | position: relative;
| |
| - | margin: 1em 1em 0 1em;
| |
| - | padding: 1em;
| |
| - |
| |
| - | z-index: 15;
| |
| - | }
| |
| - |
| |
| - | }
| |
| - |
| |
| - | @media screen and (min-width: 400px ?? max-width: 660px) {
| |
| - |
| |
| - | .direction-l .desc,
| |
| - | .direction-r .desc {
| |
| - | margin: 1em 4em 0 4em;
| |
| - | }
| |
| - |
| |
| - | }
| |
| - | * {
| |
| - | -webkit-box-sizing: border-box;
| |
| - | -moz-box-sizing: border-box;
| |
| - | box-sizing: border-box;
| |
| - | }
| |
| - |
| |
| - | html {
| |
| - | font-size:50%;
| |
| - | -webkit-font-smoothing: antialiased;
| |
| - | }
| |
| - |
| |
| - | body {
| |
| - | font-family: "Source Sans Pro";
| |
| - | font-size:1.4rem;
| |
| - | line-height: 2.3rem;
| |
| - | color:#444;
| |
| - | background: #fff;
| |
| - | margin:0;
| |
| - | }
| |
| - |
| |
| - | a {
| |
| - | color: #06c;
| |
| - | transition: color .3s;
| |
| - | }
| |
| - |
| |
| - | a:hover {
| |
| - | color: #012c57;
| |
| - | }
| |
| - |
| |
| - | h1, h2, h3, h4, h5, h6, h7 {
| |
| - | font-family: "Futura";
| |
| - | line-height:2.6rem;
| |
| - | font-weight:normal;
| |
| - | color: #111;
| |
| - | }
| |
| - |
| |
| - | .content-area {
| |
| - | width:850px;
| |
| - | padding:2rem;
| |
| - | margin:auto;
| |
| - | background: #f9f9f9;
| |
| - | }
| |
| - |
| |
| - | .content-area h1 {
| |
| - | font-size: 2.7rem;
| |
| - | }
| |
| - |
| |
| - | .content-area h2 {
| |
| - | font-size: 2.2rem;
| |
| - | }
| |
| - |
| |
| - | .content-area h3 {
| |
| - | font-size: 2.7rem;
| |
| - | }
| |
| - |
| |
| - | .content-area h4 {
| |
| - | font-size: 4.0rem;
| |
| - | }
| |
| - |
| |
| - | .content-area h5 {
| |
| - | font-size: 1.4rem;
| |
| - | }
| |
| - |
| |
| - | .content-area h6 {
| |
| - | font-size: 1.2rem;
| |
| - | }
| |
| - |
| |
| - | .content-area aside {
| |
| - | float:right;
| |
| - | width:50%;
| |
| - | padding:2rem;
| |
| - |
| |
| - | .blockquote {
| |
| - | font-family: Georgia, serif;
| |
| - | font-size: 18px;
| |
| - | font-style: italic;
| |
| - | width: 500px;
| |
| - | margin: 0.25em 0;
| |
| - | padding: 0.35em 40px;
| |
| - | line-height: 1.45;
| |
| - | position: relative;
| |
| - | color: #383838;
| |
| - | }
| |
| - |
| |
| - | .blockquote:before {
| |
| - | display: block;
| |
| - | padding-left: 10px;
| |
| - | content: "\201C";
| |
| - | font-size: 80px;
| |
| - | position: absolute;
| |
| - | left: -20px;
| |
| - | top: -20px;
| |
| - | color: #7a7a7a;
| |
| - | }
| |
| - |
| |
| - | .blockquote cite {
| |
| - | color: #999999;
| |
| - | font-size: 14px;
| |
| - | display: block;
| |
| - | margin-top: 5px;
| |
| - | }
| |
| - |
| |
| - | .blockquote cite:before {
| |
| - | content: "\2014 \2009";
| |
| - | }
| |
| - |
| |
| - |
| |
| - | </style>
| |
| - | <title></title>
| |
| - | </head>
| |
| - | <body>
| |
| - | <div class="content-area"> <article>
| |
| - | </article>
| |
| - | <img style="border: 0px solid ; width: 50px; height: 40px;" alt="iGEM" src="http://s21.postimg.org/ff5nkjy9v/IGEM_basic_Logo_stylized.png" align="left">
| |
| - | <h4>Glendale Community College Arizona<img
| |
| - | style="width: 200px; height: 58px;" alt="GCC"
| |
| - | src="https://static.igem.org/mediawiki/2013/f/f1/Gcclogo.gif" align="right">
| |
| - | </h4>
| |
| - |
| |
| - | <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
| |
| - |
| |
| - | <h2><p>Protocols</p></h2><img style="border: 0px solid ; width: 520px; height: 250px;" alt="iGEM" src="https://static.igem.org/mediawiki/2013/f/f1/PprA%26RecA.png" align="right">
| |
| - |
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/GrowthCurve">Growth Curve Assay</a></p>
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/NaCl">NaCl Growth Curve Assay</a></p>
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/SurivalGrowth">Survival Growth Assay</a></p>
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/AlkalineLysis">Alkaline Lysis Plasmid Miniprep </a></p>
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/RestrictionDigest">Restriction Digest</a></p>
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/DNAIsolation">DNA Isolation</a></p>
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/Bioinformatics">Bioinformatics</a></p>
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/Ligation">Ligation</a></p>
| |
| - | <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/Transformation">Transformation</a></p>
| |
| - |
| |
| - | <!--/.content-area-->
| |
| - | </body>
| |
| - | </html>
| |
"
