Team:Glendale CC AZ/main.css

From 2013.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 1: Line 1:
-
[[File:Igemlogo.jpg|link=http://www.igem.org|90px|left|]]
 
-
[[File:GCCmini.png|link=https://2013.igem.org/Team:Glendale_CC_AZ/Protocols|120px|left|Protocols]]
 
-
[[File:Gel.png|link=https://2013.igem.org/Team:Glendale_CC_AZ/Protocols/PCR|120px|left|PCR]]
 
-
 
-
 
-
{|align="center"
 
-
|[[File:Gcclogo.gif|center|]]
 
-
|align="center"|
 
-
|}
 
-
 
-
 
-
<!-- ie9.js (fixes all Internet Explorer browsers older than ie9) -->
 
-
<!--[if lt IE 9]>
 
-
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
 
-
<![endif]-->
 
-
 
<html>
<html>
<head>
<head>
-
<style>
+
<meta charset="UTF-8">
 +
<style type="text/css">
 +
p:not(.active):hover
 +
{
 +
  color: rgb(190,39,0);
 +
}
-
body { background:url(https://static.igem.org/mediawiki/2013/6/68/BackgroundGCC.png) repeat; }
+
/*--Formatting to remove and alter wiki css defaults--*/
-
figure { margin:20px auto; }
+
#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;
 +
}
 +
body
 +
{
 +
background:#FFF
 +
margin-right:200px;
 +
}
-
</style>
 
-
</head>
 
-
 
+
#contentSub, #search-controls, #footer-box, .firstHeading, #catlinks, #p-logo {
-
<html>
+
-
<head>
+
-
<style>
+
-
 
+
-
 
+
-
 
+
-
#contentSub, #search-controls, .firstHeading, #catlinks, #p-logo {
+
     display:none;}
     display:none;}
#top-section {
#top-section {
Line 41: Line 42:
#content {
#content {
     border: none;}
     border: none;}
-
 
/* Removes "teams" from the menubar */
/* Removes "teams" from the menubar */
#menubar > ul > li:last-child {
#menubar > ul > li:last-child {
     display: none;}
     display: none;}
-
/* Resizes the menubar to fit the links (default is 400px) */
+
/* Resizes the menubar to fik the links (default is 400px) */
#menubar {
#menubar {
     width: auto;}
     width: auto;}
Line 61: Line 61:
     border: none;}
     border: none;}
#menubar {
#menubar {
-
     font-size: 65%;
+
     font-size: 100%;
-
     top: -14px;}
+
     top: -16px;}
.left-menu:hover {
.left-menu:hover {
     background-color: transparent;}
     background-color: transparent;}
Line 73: Line 73:
#menubar:hover li a {
#menubar:hover li a {
     color: white;}
     color: white;}
-
 
-
 
-
 
-
 
-
 
-
 
-
 
body {
body {
Line 104: Line 97:
     color: #000000 ;}
     color: #000000 ;}
 +
code {
 +
  background-color: #ddd;
 +
}
 +
.contentWrap {
 +
  padding: 2em;
 +
}
 +
.content {
 +
  width: 650px;
 +
  margin: 0 auto;
 +
  min-height: 1250px;
 +
  line-height: 1.5em;
 +
}
 +
h1 {
 +
  font-size: 2em;
 +
  line-height: 2em;
 +
}
 +
/*** Styles for the main header ***/
 +
#main {
 +
  background-color: #B00000;
 +
  position: relative;
 +
  z-index: 1001;
 +
}
 +
  ul.nav {
 +
    padding-left: 0;
 +
  }
 +
ul.nav {
 +
  width: 650px;
 +
  margin: 0 auto;
 +
  overflow: hidden;
 +
}
 +
ul.nav li {
 +
float: left;
 +
list-style: none;
 +
margin: .5em .5em .5em 0;
 +
padding: .5em .5em .5em 0;
 +
font-size: 1.2em;
 +
}
 +
ul.nav li a {
 +
  text-decoration: none;
 +
  color: #000;
 +
}
 +
ul.nav li a:hover {
 +
  color: #FF2B44;
 +
  transition: color 400ms ease-out;
 +
}
 +
 +
/*** Styles for the sticky header ***/
 +
  #stickyContent {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    right: 0;
 +
    z-index: 1000;
 +
    background-color: #B3B3B3 ;
 +
  }
 +
  #stickyContent ul.nav li {
 +
    font-size: 1em;
 +
  }
 +
  #stickyContent ul.nav a {
 +
    color: #B00000;
 +
  }
 +
  #stickyContent ul.nav .text{
 +
    display: none;
 +
  }
 +
<style type="text/css">
 +
* {
 +
  -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.3rem;
 +
  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;
 +
}
-
#cssmenu ul {
+
.content-area {
-
   margin: 0;
+
   width:850px;
-
   padding: 0;
+
   padding:2rem;
 +
  margin:auto;
 +
  background: #f9f9f9;
}
}
-
#cssmenu li {
+
 
-
   margin: 0;
+
.content-area h1 {
-
  padding: 0;
+
   font-size: 2.7rem;
 +
}
 +
 
 +
.content-area h2 {
 +
  font-size: 2.2rem;
 +
}
 +
 
 +
.content-area h3 {
 +
  font-size: 2.7rem;
 +
}
 +
 
 +
.content-area h4 {
 +
  font-size: 1.6rem;
 +
}
 +
 
 +
.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";
}
}
-
#cssmenu a {
+
   
 +
  * {
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
-
}
+
  border: 0;
-
#cssmenu ul {
+
  outline: none;
 +
  text-decoration: none;
   list-style: none;
   list-style: none;
 +
  font-weight: 200;
 +
  -webkit-font-smoothing: antialiased;
 +
  line-height: 1em;
 +
  font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif;
 +
  box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
}
}
-
#cssmenu a {
+
 
-
   text-decoration: none;
+
/* Defaults */
 +
body {
 +
   font-size: 16px;
 +
  background: #e5e5e5;
}
}
-
#cssmenu {
+
 
-
   height: 70px;
+
h1 {
-
   background-color: #232323;
+
   font-size: 180%;
-
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
+
   color: #fff;
-
  width: auto;
+
}
}
-
#cssmenu > ul > li {
+
 
 +
h2 {
 +
  font-size: 160%;
 +
  color: #666;
 +
  padding-bottom: 15px;
 +
}
 +
 
 +
h3 {
 +
  font-size: 120%;
 +
  color: #ccc;
 +
  padding-bottom: 15px;
 +
}
 +
 
 +
img {
 +
  display: block;
 +
  width: 100%;
 +
}
 +
 
 +
p, a, span, li {
 +
  font-size: 90%;
 +
  line-height: 25px;
 +
  color: #666;
 +
}
 +
 
 +
p a, li a, h1 a, p span {
 +
  color: inherit;
 +
  font-size: inherit;
 +
}
 +
 
 +
p a {
 +
  color: #48C7C1;
 +
}
 +
 
 +
p a:hover {
 +
  text-decoration: underline;
 +
}
 +
 
 +
p.tags {
 +
  padding-top: 10px;
 +
}
 +
 
 +
p.tags a {
 +
  padding: 0px 5px 0px 5px;
 +
  background: #222;
 +
  margin-right: 5px;
 +
  border-radius: 2px;
 +
  color: #999;
 +
  display: inline-block;
 +
  cursor: pointer;
 +
  margin-top: 5px;
 +
}
 +
 
 +
.wrapper {
 +
  width: 960px;
 +
  margin: 0px auto;
 +
  overflow: hidden;
 +
  word-wrap: break-word;
 +
}
 +
 
 +
/* Buttons */
 +
.button {
 +
  background: #48C7C1;
 +
  border-radius: 2px;
 +
  padding: 15px 0px 15px 0px;
 +
  width: 100%;
 +
  color: #fff;
 +
  font-size: 90%;
 +
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 +
  cursor: pointer;
 +
  font-weight: 400;
 +
}
 +
 
 +
 
 +
/* Wrapper Sections */
 +
.wrapper.container {
 +
  background: #fff;
 +
  padding: 30px;
 +
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
 +
  margin-bottom: 30px;
 +
  border-radius: 2px;
 +
}
 +
 
 +
.wrapper.footer {
 +
  background: #222;
 +
  padding: 30px;
 +
  border-radius: 2px 2px 0px 0px;
 +
}
 +
 
 +
.wrapper.footer ul li a {
 +
  color: #999;
 +
}
 +
 
 +
/* Columns */
 +
.col {
   float: left;
   float: left;
-
  margin-left: 15px;
 
-
  position: relative;
 
}
}
-
#cssmenu > ul > li > a {
+
 
-
  color: #a0a0a0;
+
.col.quarter {
-
  font-family: Verdana, 'Lucida Grande';
+
   width: 25%;
-
  font-size: 15px;
+
-
  line-height: 70px;
+
-
  padding: 15px 20px;
+
-
  -webkit-transition: color .15s;
+
-
  -moz-transition: color .15s;
+
-
   -o-transition: color .15s;
+
-
  transition: color .15s;
+
}
}
-
#cssmenu > ul > li > a:hover {
+
 
-
   color: #ffffff;
+
.col.threeQuarter {
 +
   width: 75%;
}
}
-
#cssmenu > ul > li > ul {
+
 
-
  opacity: 0;
+
.col.border {
-
  visibility: hidden;
+
   min-height: 200px;
-
  padding: 16px 0 20px 0;
+
   border-right: 1px solid #ddd;
-
  background-color: #fafafa;
+
   padding-right: 30px;
-
  text-align: left;
+
-
  position: absolute;
+
-
  top: 55px;
+
-
  left: 50%;
+
-
  margin-left: -90px;
+
-
  width: 180px;
+
-
  -webkit-transition: all .3s .1s;
+
-
  -moz-transition: all .3s .1s;
+
-
  -o-transition: all .3s .1s;
+
-
  transition: all .3s .1s;
+
-
  -webkit-border-radius: 5px;
+
-
   -moz-border-radius: 5px;
+
-
   border-radius: 5px;
+
-
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+
-
   -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+
-
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+
}
}
-
#cssmenu > ul > li:hover > ul {
+
 
-
   opacity: 1;
+
.col.padding {
-
  top: 65px;
+
   padding-left: 30px;
-
  visibility: visible;
+
}
}
-
#cssmenu > ul > li > ul:before {
+
 
-
  content: '';
+
/* Sections */
-
  display: block;
+
.section {<script type="text/javascript">
-
  border-color: transparent transparent #fafafa transparent;
+
document.getElementById('stickyContent').innerHTML = document.getElementById('main').innerHTML;
-
  border-style: solid;
+
<!-- ie9.js (fixes all Internet Explorer browsers older than ie9) -->
-
   border-width: 10px;
+
<!--[if lt IE 9]>
-
   position: absolute;
+
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
-
  top: -20px;
+
<![endif]-->
-
  left: 50%;
+
</script>
-
   margin-left: -10px;
+
   padding-bottom: 15px;
 +
   margin-bottom: 15px;
 +
   border-bottom: 1px solid #ddd;
}
}
-
#cssmenu > ul ul > li {
+
 
-
   position: relative;
+
.section.last {
 +
   border: 0;
 +
  margin: 0;
 +
  padding: 0;
}
}
-
#cssmenu ul ul a {
+
 
-
   color: #323232;
+
.section.price p {
-
  font-family: Verdana, 'Lucida Grande';
+
   text-align: center;
-
  font-size: 13px;
+
-
  background-color: #fafafa;
+
-
  padding: 5px 8px 7px 16px;
+
   display: block;
   display: block;
-
   -webkit-transition: background-color 0.1s;
+
   font-size: 120%;
-
  -moz-transition: background-color 0.1s;
+
-
  -o-transition: background-color 0.1s;
+
-
  transition: background-color 0.1s;
+
}
}
-
#cssmenu ul ul a:hover {
+
 
-
   background-color: #f0f0f0;
+
/* Gallery */
 +
.section.gallery {
 +
   overflow: hidden;
 +
  padding: 0px 0px 0px 15px;
}
}
-
#cssmenu ul ul ul {
+
 
-
   visibility: hidden;
+
.gallery img {
-
  opacity: 0;
+
   float: left;
-
  position: absolute;
+
   width: 33.33%;
-
  top: -16px;
+
   padding: 0px 15px 15px 0px;
-
  left: 206px;
+
   cursor: pointer;
-
  padding: 16px 0 20px 0;
+
-
  background-color: #fafafa;
+
-
  text-align: left;
+
-
   width: 180px;
+
-
  -webkit-transition: all .3s;
+
-
   -moz-transition: all .3s;
+
-
  -o-transition: all .3s;
+
-
  transition: all .3s;
+
-
  -webkit-border-radius: 5px;
+
-
  -moz-border-radius: 5px;
+
-
  border-radius: 5px;
+
-
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+
-
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+
-
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+
}
}
-
#cssmenu ul ul > li:hover > ul {
+
 
-
  opacity: 1;
+
/* Media */
-
  left: 190px;
+
@media all and (max-width: 960px) and (min-width: 800px) {
-
   visibility: visible;
+
   .wrapper {
-
}
+
    width: auto;
-
#cssmenu ul ul a:hover {
+
   }
-
  background-color: #cc2c24;
+
-
   color: #f0f0f0;
+
}
}
 +
@media all and (max-width: 650px) {
 +
  .wrapper {
 +
    width: 650px;
 +
  }
 +
}
 +
 
</style>
</style>
 +
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
</head>
 +
<header> 
 +
  <div id="main" class="duplicate">
 +
    <ul class="nav">
 +
   
 +
      <li>
 +
      <a href="https://2013.igem.org/Team:Glendale_CC_AZ" title="Click me!">
 +
          <span class="icon-stack">
 +
            <i class="icon-circle icon-stack-base"></i>
 +
            <i class="icon-home icon-light"></i>
 +
          </span>
 +
          <span class="text">Home</span>
 +
        </a>
 +
      </li>
 +
 +
      <li>
 +
      <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background/Overview" title="Check it out">
 +
          <span class="icon-stack">
 +
            <i class="icon-circle icon-stack-base"></i>
 +
            <i class="icon-warning-sign icon-light"></i>
 +
          </span>
 +
        <span class="text">Project</span>
 +
        </a>
 +
      </li>
 +
 
 +
      <li>
 +
        <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Team/students" title="We Rock!">
 +
          <span class="icon-stack">
 +
            <i class="icon-circle icon-stack-base"></i>
 +
            <i class="icon-cogs icon-light"></i></span>
 +
          <span class="text">Team</span>
 +
        </a>
 +
      </li>
 +
 +
   
 +
      <li>
 +
      <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Notebook" title="Data Here!">
 +
          <span class="icon-stack">
 +
            <i class="icon-circle icon-stack-base"></i>
 +
            <i class="icon-book icon-light"></i>
 +
          </span>
 +
          <span class="text">Notebook</span>
 +
        </a>
 +
      </li>
-
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
+
      <li>
-
<link href="../Downloads/cssmenu-1/menu_assets/styles.css" rel="stylesheet" type="text/css">
+
      <a href="https://2013.igem.org/Team:Glendale_CC_AZ/Attributions" title="Thank you!">
-
<div id='cssmenu'>
+
          <span class="icon-stack">
-
<ul>
+
            <i class="icon-circle icon-stack-base"></i>
-
  <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ'><span>Home</span></a></li>
+
            <i class="icon-pencil icon-light"></i>
-
  <li class='has-sub'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Team/students'><span>Team</span></a>
+
          </span>
-
      <ul>
+
          <span class="text">Attributions</span>  
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Team/students'><span>Bios</span></a></li>
+
        </a>
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Gallery'><span>Gallery</span></a></li>
+
       </li>
-
        <li class='last'><a href='https://igem.org/Team.cgi?year=2013&team_name=Glendale_CC_AZ'><span>Official Team Profile</span></a></li>
+
        
-
      </ul>
+
   
-
  </li>
+
    </ul>
-
  <li class='has-sub'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background/Overview'><span>Project</span></a>
+
  </div>
-
      <ul>
+
  <div id="stickyContent"></div>
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background/Overview'><span>Overview</span></a></li>
+
</header>
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background'><span>Background</span></a></li>
+
-
        <li><a href='eam:Glendale_CC_AZ/Project/PreviousResearch'><span>Previous Research</span></a></li>
+
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/ExperimentalOverview'><span>Experimental Overview</span></a></li>
+
-
        <li><a href='eam:Glendale_CC_AZ/Project/Approach'><span>Our Approach</span></a></li>
+
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Wetlab/Overview/Experiments/Results'><span>Results</span></a></li>
+
-
        <li class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Achievements'><span>Achievements</span></a></li>
+
-
      </ul>
+
-
  </li>
+
-
  <li class='has-sub'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Notebook'><span>Notebook</span></a>
+
-
      <ul>
+
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Protocols'><span>Protocols</span></a></li>
+
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Notebook/Calendar'><span>Daily Logs</span></a></li>
+
-
      </ul>
+
-
  </li>
+
-
  <li class='has-sub'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Attributions'><span>Attributions</span></a>
+
-
       <ul>
+
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Parts'><span>Submitted Parts</span></a></li>
+
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Attributions/Acknowledgments'><span>Acknowledgements</span></a></li>
+
-
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Attributions/Sponsors'><span>Sponsors</span></a></li>
+
-
        <li class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Attributions/Outreach'><span>Outreach</span></a></li>
+
-
       </ul>
+
-
  </li>
+
-
  <li class='has-sub last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Human_Practices'><span>Human Practices</span></a>
+
-
      <ul>
+
-
        <li class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Human_Practices'><span>Overview</span></a></li>
+
-
        <li class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Human_Practices'><span>Safety</span></a></li>
+
-
      </ul>
+
-
  </li>
+
-
</ul>
+
-
</div>
+
</html>
</html>

Latest revision as of 01:58, 28 September 2013

Retrieved from "http://2013.igem.org/Team:Glendale_CC_AZ/main.css"