Team:Glendale CC AZ/jquery

From 2013.igem.org

(Difference between revisions)
(Blanked the page)
 
Line 1: Line 1:
-
<html>
 
-
<head>
 
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-
<meta charset="UTF-8">
 
-
<title>Home</title>
 
-
<style type="text/css">
 
-
 
-
/*--Formatting to remove and alter wiki css defaults--*/
 
-
#contentSub, .firstHeading, #footer-box, #catlinks, #search-controls { display:none;}
 
-
#top-section {padding-top: 0px; border: none;}
 
-
#globalWrapper, #content { width: 100%; background-color: #fff; border: none; margin: 0; padding: 0; position: relative;}
 
-
html, body { height: 100%; background: #fff;}
 
-
body {font: 10px normal Verdana, Arial, Helvetica, sans-serif;  color: #333; background: #f0f0f0;}
 
-
#newcontainer { /*-- Footer specific edits http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ --*/
 
-
width:975px;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
position:relative;
 
-
min-height: 100%;
 
-
height: auto !important;
 
-
height: 100%;
 
-
border: 0px solid #000;
 
-
margin: 0 auto -250px;
 
-
color: #333;
 
-
 
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 
-
    display:none;}
 
-
#top-section {
 
-
    border: none;
 
-
    height: 0px;}
 
-
#content {
 
-
    border: none;}
 
-
}
 
-
 
-
 
-
 
-
 
-
 
-
/* Removes "teams" from the menubar */
 
-
#menubar > ul > li:last-child {
 
-
    display: none;}
 
-
/* Resizes the menubar to fik the links (default is 400px) */
 
-
#menubar {
 
-
    width: auto;}
 
-
 
-
 
-
 
-
 
-
.c {
 
-
  padding: 1em;
 
-
}
 
-
@media screen and (min-width: 48em) {
 
-
  .main {
 
-
    width: 66.666666%;
 
-
    padding-right: 1em;
 
-
    float: left;
 
-
  }
 
-
  .sb {
 
-
    float: right;
 
-
    width: 33.333333%;
 
-
  }
 
-
}
 
-
 
-
 
-
body {
 
-
    margin: 10px 0 0 0;
 
-
    padding: 0;}
 
-
#top-section {
 
-
    width: 965px;
 
-
    height: 0;
 
-
    margin: 0 auto;
 
-
    padding: 0;
 
-
    border: none;}
 
-
#menubar {
 
-
    font-size: 65%;
 
-
    top: -14px;}
 
-
.left-menu:hover {
 
-
    background-color: transparent;}
 
-
#menubar li a {
 
-
    background-color: transparent;}
 
-
#menubar:hover {
 
-
    color: white;}
 
-
#menubar li a {
 
-
    color: transparent;}
 
-
#menubar:hover li a {
 
-
    color: white;}
 
-
 
-
 
-
/*
 
-
colors
 
-
red: #e51837; rgb(229,24,55)
 
-
gray: #808080;
 
-
*/
 
-
 
-
/************Reset**************/
 
-
* {
 
-
-moz-box-sizing: border-box;
 
-
-webkit-box-sizing: border-box;
 
-
box-sizing: border-box;
 
-
}
 
-
html, body, div, object, iframe, fieldset {
 
-
margin: 0;
 
-
padding: 0;
 
-
border: 0;
 
-
}
 
-
ol, ul {
 
-
list-style: none;
 
-
margin: 0;
 
-
padding: 0;
 
-
}
 
-
table {
 
-
border-collapse: collapse;
 
-
border-spacing: 0;
 
-
}
 
-
header, footer, nav, section, article, hgroup, figure {
 
-
display: block;
 
-
}
 
-
legend {
 
-
display: none;
 
-
}
 
-
/************End Reset**************/
 
-
 
-
/************Global**************/
 
-
body {
 
-
background: #fff;
 
-
color: #000;
 
-
font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
 
-
padding: 0;
 
-
-webkit-text-size-adjust: none;
 
-
}
 
-
a {
 
-
color: #808080;
 
-
text-decoration: none;
 
-
}
 
-
a:hover, a:focus {
 
-
color: #e51837;
 
-
}
 
-
p {
 
-
margin: 0 0 1em;
 
-
}
 
-
img, object, video {
 
-
max-width: 100%;
 
-
border: 0;
 
-
}
 
-
a img {
 
-
border: 0;
 
-
outline: 0;
 
-
}
 
-
h4 {
 
-
font-size: 3em;
 
-
line-height: 1;
 
-
letter-spacing: -0.02em;
 
-
margin-bottom: 0.2em;
 
-
}
 
-
h2 {
 
-
font-size: 2em;
 
-
line-height: 1.1;
 
-
margin-bottom: 0.2em;
 
-
}
 
-
h3 {
 
-
font-weight: normal;
 
-
line-height: 1.1;
 
-
padding-bottom: 0.4em;
 
-
border-bottom: 1px solid #ccc;
 
-
}
 
-
h1 a, h2 a, h3 a, h4a  {
 
-
display: block;
 
-
color: #000;
 
-
}
 
-
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
 
-
color: #e51837;
 
-
}
 
-
blockquote {
 
-
border-left: 0.5em solid #ddd;
 
-
padding-left: 1em;
 
-
margin-left: 1em;
 
-
}
 
-
small {
 
-
color: #e51837;
 
-
}
 
-
input[type=search] {
 
-
-webkit-appearance: none;
 
-
border-radius: 0;
 
-
}
 
-
::-webkit-input-placeholder {
 
-
color: #808080;
 
-
}
 
-
:-moz-placeholder { 
 
-
    color: #808080;
 
-
}
 
-
/************End Global**************/
 
-
 
-
/************Classes**************/
 
-
.inactive {
 
-
color: #ddd;
 
-
}
 
-
/************End Classes**************/
 
-
 
-
/************Structure**************/
 
-
.container {
 
-
max-width: 70em;
 
-
margin: 0 auto;
 
-
padding: 0 1em;
 
-
overflow: hidden;
 
-
}
 
-
div[role=main] {
 
-
padding-bottom: 1em;
 
-
}
 
-
 
-
/*Footer*/
 
-
footer[role=contentinfo] {
 
-
color: #fff;
 
-
background: #000;
 
-
margin: 0 -1em;
 
-
position: relative;
 
-
z-index: 2;
 
-
}
 
-
footer[role=contentinfo] > div {
 
-
max-width: 70em;
 
-
padding: 0 1em;
 
-
margin: 0 auto;
 
-
overflow: hidden;
 
-
}
 
-
footer[role=contentinfo] p {
 
-
margin: 0;
 
-
}
 
-
footer[role=contentinfo] .nav li a {
 
-
display: block;
 
-
border-bottom: 1px solid #808080;
 
-
padding: 1em;
 
-
margin: 0 -1em;
 
-
}
 
-
footer[role=contentinfo] a {
 
-
display: inline-block;
 
-
padding: 0.5em 0;
 
-
}
 
-
footer[role=contentinfo] a.nav-home {
 
-
color: #fff;
 
-
}
 
-
footer[role=contentinfo] .f-rga {
 
-
padding: 0.6em 0;
 
-
}
 
-
footer[role=contentinfo] img {
 
-
max-width: 4.4em;
 
-
display: inline-block;
 
-
margin-bottom: -0.22em;
 
-
}
 
-
/*End Footer*/
 
-
 
-
/*Grid*/
 
-
.grid {
 
-
margin: 0 -1em;
 
-
overflow: hidden;
 
-
}
 
-
.grid:target {
 
-
-webkit-animation: fadeout 5s 1 ease-out;
 
-
    -moz-animation: fadeout 5s 1 ease-out;
 
-
    -o-animation: fadeout 5s 1 ease-out;
 
-
    animation: fadeout 5s 1 ease-out;
 
-
}
 
-
.grid > h2 {
 
-
margin-left: 0.45em;
 
-
}
 
-
.grid > section {
 
-
padding: 1em 1em 0.5em;
 
-
}
 
-
.grid > section:target {
 
-
-webkit-animation: fadeout 5s 1 ease-out;
 
-
    -moz-animation: fadeout 5s 1 ease-out;
 
-
    -o-animation: fadeout 5s 1 ease-out;
 
-
    animation: fadeout 5s 1 ease-out;
 
-
}
 
-
.grid ul {
 
-
overflow: hidden;
 
-
}
 
-
.grid ul li {
 
-
margin-bottom: 0.3em;
 
-
}
 
-
.featured:after {
 
-
content: "*";
 
-
color: #e51837;
 
-
}
 
-
 
-
/*Fluid*/
 
-
.fluid {
 
-
display: block;
 
-
margin: 0 auto;
 
-
max-width: 40em;
 
-
}
 
-
 
-
/*Homepage*/
 
-
.home h4 {
 
-
margin-bottom: 0.2em;
 
-
}
 
-
.intro {
 
-
font-size: 1.8em;
 
-
line-height: 1.2;
 
-
margin: 0 auto;
 
-
}
 
-
.intro a:hover ,.intro a:focus {
 
-
color: #000;
 
-
border-bottom-color: #000;
 
-
}
 
-
 
-
.ani {
 
-
position: relative;
 
-
height: 15em;
 
-
margin: 1em 0 0;
 
-
width: 100%;
 
-
z-index: 0;
 
-
}
 
-
.ani div {
 
-
width: 100%;
 
-
}
 
-
.ani div b {
 
-
display: block;
 
-
position: absolute;
 
-
top: 5%;
 
-
right: 5%;
 
-
bottom: 5%;
 
-
left: 5%;
 
-
background: rgba(229,24,55,0.22);
 
-
}
 
-
 
-
 
-
/*Patterns*/
 
-
.mod {
 
-
padding: 1em;
 
-
}
 
-
.pattern {
 
-
background: #f7f7f7;
 
-
border-bottom: 1px solid #808080;
 
-
margin-bottom: 1em;
 
-
overflow: hidden;
 
-
}
 
-
.pattern-description h1 {
 
-
font-size: 3.4em;
 
-
margin-bottom: 0.5em;
 
-
}
 
-
.pattern-description {
 
-
max-width: 40em;
 
-
margin: 0 auto;
 
-
}
 
-
.pattern-description ul, .pattern-description ol {
 
-
margin-bottom: 2em;
 
-
}
 
-
.pattern-description li {
 
-
margin-bottom: 1em;
 
-
}
 
-
 
-
 
-
/*Blog*/
 
-
/*Blog Header*/
 
-
.blog .container {
 
-
max-width: 62em;
 
-
}
 
-
.blog header[role=banner] {
 
-
overflow: hidden;
 
-
margin-bottom: 2em;
 
-
padding: 2em 0 1em;
 
-
border-bottom: 1px solid #000;
 
-
}
 
-
.blog-logo {
 
-
font-weight: normal;
 
-
font-size: 1.2em;
 
-
margin: 0 0 1em;
 
-
}
 
-
.blog-logo img {
 
-
width: 3.3em;
 
-
}
 
-
.blog-logo a {
 
-
color: #000;
 
-
}
 
-
.search-form {
 
-
width: 100%;
 
-
margin-bottom: 1em;
 
-
}
 
-
.search-field {
 
-
width: 100%;
 
-
padding: 0.5em 0;
 
-
border: 0;
 
-
border-bottom: 1px solid #808080;
 
-
outline: none;
 
-
}
 
-
.search-field:focus {
 
-
background: #e51837;
 
-
color: #fff;
 
-
}
 
-
.search-field:focus::-webkit-input-placeholder {
 
-
  color: #fff;
 
-
}
 
-
 
-
.search-field:focus :-moz-placeholder { 
 
-
  color: #fff;
 
-
}
 
-
 
-
.blog .nav {
 
-
clear: both;
 
-
}
 
-
.blog .nav a {
 
-
display: block;
 
-
font-weight: bold;
 
-
color: #000;
 
-
}
 
-
.blog .nav a:hover {
 
-
color: #e51837;
 
-
}
 
-
 
-
/*Posts*/
 
-
.posts ol > li {
 
-
padding-bottom: 1em;
 
-
border-bottom: 1px solid #ccc;
 
-
margin-bottom: 1em;
 
-
overflow: hidden;
 
-
}
 
-
.posts h2 {
 
-
font-size: 1.4em;
 
-
margin: 0.28em 0 0.1em;
 
-
font-weight: normal;
 
-
}
 
-
.posts h2 a {
 
-
color: #000;
 
-
}
 
-
.posts h2 a:hover, .posts h2 a:focus {
 
-
color: #e51837;
 
-
}
 
-
.permalink {
 
-
display: block;
 
-
font-size: 0.8em;
 
-
margin-bottom: 1.2em;
 
-
}
 
-
.post-body a {
 
-
border-bottom: 1px solid #ccc;
 
-
}
 
-
.posts blockquote {
 
-
margin: 0 0 1em;
 
-
color: #666;
 
-
border-left: 0.25em solid #ccc;
 
-
padding-left: 1em;
 
-
}
 
-
.tags {
 
-
float: left;
 
-
}
 
-
.tags li {
 
-
display: inline-block;
 
-
font-size: 0.8em;
 
-
margin-right: 0.5em;
 
-
}
 
-
 
-
.posts ol > li .tags a, .permalink {
 
-
color: #ccc;
 
-
-webkit-transition: color 0.3s ease-out; 
 
-
    -moz-transition: color 0.3s ease-out; 
 
-
      -ms-transition: color 0.3s ease-out; 
 
-
      -o-transition: color 0.3s ease-out; 
 
-
          transition: color 0.3s ease-out;
 
-
}
 
-
.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
 
-
color: #808080;
 
-
}
 
-
.blog-nav {
 
-
text-align: center;
 
-
overflow: hidden;
 
-
padding: 1em 0;
 
-
}
 
-
.posts .blog-nav a {
 
-
border: 0;
 
-
}
 
-
.nav-next {
 
-
float: right;
 
-
}
 
-
.nav-prev {
 
-
float: left;
 
-
}
 
-
 
-
/* Sidebar */
 
-
.sidebar {
 
-
font-size: 0.8em;
 
-
padding-bottom: 1.4em;
 
-
}
 
-
.sidebar div {
 
-
margin-bottom: 2em;
 
-
}
 
-
.sidebar h3 {
 
-
font-weight: bold;
 
-
font-size: 0.9em;
 
-
line-height: 1;
 
-
border-bottom: 1px solid #000;
 
-
}
 
-
.sidebar a {
 
-
color: #808080;
 
-
}
 
-
.sidebar a:hover, .sidebar a:focus {
 
-
color: #e51837;
 
-
}
 
-
.social-links {
 
-
overflow: hidden;
 
-
}
 
-
.social-links li {
 
-
float: left;
 
-
margin-right: 1.2em;
 
-
}
 
-
.social-links li a {
 
-
display: block;
 
-
height: 17px;
 
-
width: 16px;
 
-
text-indent: -99999em;
 
-
background: url(images/sprite_social.png) no-repeat;
 
-
}
 
-
.social-links li a.s-fb {
 
-
background-position: -0px -76px;
 
-
}
 
-
.social-links li a.s-fb:hover {
 
-
background-position: -16px -76px;
 
-
}
 
-
.social-links li a.s-twitter {
 
-
background-position: -0px -37px;
 
-
}
 
-
.social-links li a.s-twitter:hover {
 
-
background-position: -16px -37px;
 
-
}
 
-
.social-links li a.s-linkedin {
 
-
background-position: -0px -113px;
 
-
}
 
-
.social-links li a.s-linkedin:hover {
 
-
background-position: -16px -113px;
 
-
}
 
-
.social-links li a.s-rss {
 
-
background-position: -0px -0px;
 
-
}
 
-
.social-links li a.s-rss:hover {
 
-
background-position: -16px -0px;
 
-
}
 
-
 
-
 
-
 
-
.top {
 
-
clear: both;
 
-
display: block;
 
-
padding: 1em 0;
 
-
}
 
-
.top:before {
 
-
content: 'â–²';
 
-
}
 
-
 
-
/******Media Queries*******/
 
-
 
-
/* Medium Screens*/
 
-
@media all and (min-width: 35em) {
 
-
.blog-logo {
 
-
float: left;
 
-
font-size: 2em;
 
-
margin: 0 0 1em;
 
-
}
 
-
.blog-logo img {
 
-
width: auto;
 
-
}
 
-
}
 
-
@media all and (min-width:40em) {
 
-
h1 {
 
-
font-size: 5.6em;
 
-
}
 
-
.container {
 
-
padding-bottom: 4em;
 
-
}
 
-
footer[role=contentinfo] {
 
-
position: fixed;
 
-
bottom: 0;
 
-
left: 0;
 
-
width: 100%;
 
-
margin: 0;
 
-
}
 
-
footer[role=contentinfo] .nav {
 
-
float: left;
 
-
}
 
-
footer[role=contentinfo] .nav li {
 
-
display: inline-block;
 
-
margin-right: 0.8em;
 
-
}
 
-
footer[role=contentinfo] .nav li a {
 
-
border: 0;
 
-
}
 
-
footer[role=contentinfo] .f-rga {
 
-
float: right;
 
-
}
 
-
.grid ul li {
 
-
width: 50%;
 
-
float: left;
 
-
}
 
-
.grid ul li:nth-child(odd) {
 
-
padding-right: 1em;
 
-
clear: left;
 
-
}
 
-
.ani {
 
-
position: absolute;
 
-
top: 0;
 
-
right: 0;
 
-
bottom: 4em;
 
-
left: 0;
 
-
width: 100%;
 
-
height: 90%;
 
-
margin: 0;
 
-
z-index: 0;
 
-
}
 
-
.home {
 
-
position: absolute;
 
-
top: 0;
 
-
right: 0;
 
-
bottom: 5em;
 
-
left: 0;
 
-
z-index: 1;
 
-
width: 100%;
 
-
height: 90%;
 
-
display: table;
 
-
text-align: center;
 
-
color: #fff;
 
-
color: rgba(255,255,255,0.7);
 
-
}
 
-
.home > div {
 
-
display: table-cell;
 
-
vertical-align: middle;
 
-
}
 
-
.home .intro a {
 
-
color: #fff;
 
-
color: rgba(255,255,255,0.8);
 
-
border-bottom: 1px solid rgba(255,255,255,0.8);
 
-
}
 
-
.home .intro a:hover, .home .intro a:focus {
 
-
color: #000;
 
-
border-bottom-color: #000;
 
-
}
 
-
 
-
 
-
/*Blog*/
 
-
 
-
.search-form {
 
-
float: right;
 
-
width: 30%;
 
-
max-width: 16em;
 
-
padding-left: 0.8em;
 
-
margin-top: 0.4em;
 
-
}
 
-
 
-
.posts {
 
-
float: left;
 
-
width: 64%;
 
-
}
 
-
.sidebar {
 
-
float: right;
 
-
width: 30%;
 
-
max-width: 21em;
 
-
margin: 0 0 1em;
 
-
padding-left: 0.8em;
 
-
}
 
-
}
 
-
 
-
 
-
/* Large Screens */
 
-
@media all and (min-width: 54em) {
 
-
h4 {
 
-
font-size: 4.0em;
 
-
}
 
-
.grid > section {
 
-
float: left;
 
-
width: 33.3333333%;
 
-
}
 
-
.grid > section:nth-of-type(3n+1) {
 
-
clear: left;
 
-
}
 
-
.grid ul li {
 
-
width: auto;
 
-
float: none;
 
-
}
 
-
.grid ul li:nth-child(odd) {
 
-
padding-right: 0;
 
-
}
 
-
}
 
-
 
-
 
-
/* CSS Animations */
 
-
@-webkit-keyframes fadeout {
 
-
  0%  { background: #fff; }
 
-
  10%  { background: #eee; }
 
-
  100% { background: #fff; }
 
-
}
 
-
@-moz-keyframes fadeout {
 
-
  0%  { background: #fff; }
 
-
  10%  { background: #eee; }
 
-
  100% { background: #fff; }
 
-
}
 
-
@-o-keyframes fadeout {
 
-
  0%  { background: #fff; }
 
-
  10%  { background: #eee; }
 
-
  100% { background: #fff; }
 
-
}
 
-
@keyframes fadeout {
 
-
  0%  { background: #fff; }
 
-
  10%  { background: #eee; }
 
-
  100% { background: #fff; }
 
-
}
 
-
</style>
 
-
<link href="http://bradfrost.github.com/this-is-responsive/styles.css" rel="stylesheet" type="text/css">
 
-
</head>
 
-
 
-
<body>
 
-
<!--End Pattern HTML-->
 
-
 
-
<div class="container">
 
-
<section class="pattern-description">
 
-
<h4>Glendale Community College Arizona</h4>
 
-
      <h4>iGEM 2013</h4>
 
-
</section>
 
-
<footer role="contentinfo"> 
 
-
<div>
 
-
 
-
</div>
 
-
</footer>
 
-
 
-
 
-
 
-
  <div id="pattern" class="pattern">
 
-
  <div class="c">
 
-
<div class="main">
 
-
<h2>Here's the Main Content (1st in source order)</h2>
 
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi. Nulla facilisi. Donec malesuada fringilla iaculis. Praesent nec quam sit amet orci volutpat volutpat in eget eros. Duis pellentesque bibendum erat. Integer pretium nunc vel augue rutrum eget feugiat mi molestie. Cras venenatis, turpis et rhoncus scelerisque, mi augue suscipit urna, quis sagittis tortor nisl ut purus. Aliquam at enim est. Donec sit amet suscipit quam. Aliquam sit amet commodo eros.</p>
 
-
</div>
 
-
<div class="sb">
 
-
<h3>Sidebar  (2nd in source order)</h3>
 
-
<p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
 
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.</p>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
 
-
</body>
 
-
</html>
 

Latest revision as of 03:12, 23 September 2013