Team:Glendale CC AZ/css
From 2013.igem.org
(Difference between revisions)
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> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Revision as of 02:39, 28 September 2013
Glendale Community College Arizona
Protocols
Growth Curve Assay NaCl Growth Curve Assay Survival Growth Assay Alkaline Lysis Plasmid Miniprep Restriction Digest DNA Isolation Bioinformatics Ligation Transformation