Team:Glendale CC AZ/css

From 2013.igem.org

(Difference between revisions)
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>
<style>
<style>
 +
body
 +
{
 +
background:#FFF url('img_tree.png') no-repeat right top;
 +
margin-right:200px;
 +
}
 +
</style>
-
/* Some stylesheet reset */
+
</head>
-
ul#cssmenu > ul,
+
 
-
#cssmenu > ul ul {
+
 
-
  list-style: none;
+
<html>
 +
<head>
 +
<style>
 +
 
 +
 
 +
 
 +
#contentSub, #search-controls, #footer-box, .firstHeading, #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;}
 +
 
 +
 
 +
body {
 +
    margin: 10px 0 0 0;
 +
    padding: 0;}
 +
#top-section {
 +
    width: 965px;
 +
    height: 0;
 +
    margin: 0 auto;
 +
    padding: 0;
 +
    border: none;}
 +
#menubar {
 +
    font-size: 100%;
 +
    top: -16px;}
 +
.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;}
 +
 
 +
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: #000000 ;}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#cssmenu ul,
 +
#cssmenu li,
 +
#cssmenu span,
 +
#cssmenu a {
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
-
  vertical-align: baseline;
 
-
  line-height: 1;
 
-
}
 
-
/* The container */
 
-
#cssmenu > ul,
 
-
#cssmenu > ul ul {
 
-
  display: block;
 
   position: relative;
   position: relative;
-
  width: 150px;
 
}
}
-
#cssmenu > ul ul {
+
#cssmenu {
-
   display: block;
+
   height: 49px;
-
   position: relative;
+
   border-radius: 5px 5px 0 0;
-
   width: 150px;
+
   -moz-border-radius: 5px 5px 0 0;
 +
  -webkit-border-radius: 5px 5px 0 0;
 +
  background: #141414;
 +
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
 +
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
 +
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
 +
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
 +
  border-bottom: 2px solid #e00f16;
}
}
-
/* The list elements which contain the links */
+
#cssmenu:after,
-
#cssmenu > ul li {
+
#cssmenu ul:after {
 +
  content: '';
   display: block;
   display: block;
-
   position: relative;
+
   clear: both;
-
  margin: 0;
+
-
  padding: 0;
+
}
}
-
/* General link styling */
+
#cssmenu a {
-
#cssmenu > ul li a {
+
   background: #141414;
-
   /* Layout */
+
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
-
 
+
   background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
-
   display: block;
+
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
-
   position: relative;
+
   background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
-
   margin: 0;
+
   background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
-
   border-top: 1px dotted #3a3a3a;
+
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
-
   border-bottom: 1px dotted #1b1b1b;
+
   background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
-
   padding: 11px 20px;
+
   color: #ffffff;
-
   line-height: 1.5;
+
   display: inline-block;
-
  /* Typography */
+
   font-family: Helvetica, Arial, Verdana, sans-serif;
-
 
+
   font-size: 18px;
-
   font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif;
+
  line-height: 49px;
-
   color: #d8d8d8;
+
  padding: 0 20px;
   text-decoration: none;
   text-decoration: none;
-
  text-transform: uppercase;
 
-
  text-shadow: 0 1px 1px #000;
 
-
  font-size: 13px;
 
-
  font-weight: 300;
 
-
  /* Background & effects */
 
-
 
-
  background: #282828;
 
}
}
-
/* Rounded corners for the first link of the menu/submenus */
+
#cssmenu ul {
-
#cssmenu > ul li:first-child > a {
+
   list-style: none;
-
   border-top-left-radius: 4px;
+
-
  border-top-right-radius: 4px;
+
-
  border-top: 0;
+
}
}
-
/* Rounded corners for the last link of the menu/submenus */
+
#cssmenu > ul {
-
#cssmenu > ul li:last-child > a {
+
   float: center;
-
   border-bottom-left-radius: 4px;
+
-
  border-bottom-right-radius: 4px;
+
-
  border-bottom: 0;
+
}
}
-
/* The hover state of the menu/submenu links */
+
#cssmenu > ul > li {
-
#cssmenu > ul li > a:hover,
+
   float: left;
-
#cssmenu > ul li:hover > a {
+
-
   color: #fff;
+
-
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
+
-
  background: #d4b800;
+
-
  background: -webkit-linear-gradient(bottom, #d4b800, #f6d600);
+
-
  background: -ms-linear-gradient(bottom, #d4b800, #f6d600);
+
-
  background: -moz-linear-gradient(bottom, #d4b800, #f6d600);
+
-
  background: -o-linear-gradient(bottom, #d4b800, #f6d600);
+
-
  border-color: transparent;
+
}
}
-
/* The arrow indicating a submenu */
+
#cssmenu > ul > li:hover:after {
-
#cssmenu > ul .has-sub > a::after {
+
   content: '';
   content: '';
 +
  display: block;
 +
  width: 0;
 +
  height: 0;
   position: absolute;
   position: absolute;
-
   top: 16px;
+
   left: 50%;
-
   right: 10px;
+
   bottom: 0;
-
   width: 0px;
+
   border-left: 10px solid transparent;
-
   height: 0px;
+
   border-right: 10px solid transparent;
-
  /* Creating the arrow using borders */
+
   border-bottom: 10px solid #e00f16;
-
 
+
   margin-left: -10px;
-
   border: 4px solid transparent;
+
-
   border-left: 4px solid #d8d8d8;
+
}
}
-
/* The same arrow, but with a darker color, to create the shadow effect */
+
#cssmenu > ul > li:first-child > a {
-
#cssmenu > ul .has-sub > a::before {
+
  border-radius: 5px 0 0 0;
-
   content: '';
+
  -moz-border-radius: 5px 0 0 0;
 +
  -webkit-border-radius: 5px 0 0 0;
 +
}
 +
#cssmenu > ul > li:last-child > a {
 +
  border-radius: 0 5px 0 0;
 +
  -moz-border-radius: 0 5px 0 0;
 +
  -webkit-border-radius: 0 5px 0 0;
 +
}
 +
#cssmenu > ul > li.active > a {
 +
  box-shadow: inset 0 0 3px #000000;
 +
  -moz-box-shadow: inset 0 0 3px #000000;
 +
  -webkit-box-shadow: inset 0 0 3px #000000;
 +
  background: #070707;
 +
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
 +
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
 +
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
 +
}
 +
#cssmenu > ul > li:hover > a {
 +
  background: #070707;
 +
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
 +
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
 +
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
 +
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
 +
  box-shadow: inset 0 0 3px #000000;
 +
  -moz-box-shadow: inset 0 0 3px #000000;
 +
  -webkit-box-shadow: inset 0 0 3px #000000;
 +
}
 +
#cssmenu .has-sub {
 +
  z-index: 1;
 +
}
 +
#cssmenu .has-sub:hover > ul {
 +
  display: block;
 +
}
 +
#cssmenu .has-sub ul {
 +
   display: none;
   position: absolute;
   position: absolute;
-
  top: 17px;
+
   width: 200px;
-
  right: 10px;
+
   top: 100%;
-
   width: 0px;
+
   left: 0;
-
   height: 0px;
+
-
  /* Creating the arrow using borders */
+
-
 
+
-
  border: 4px solid transparent;
+
-
   border-left: 4px solid #000;
+
}
}
-
/* Changing the color of the arrow on hover */
+
#cssmenu .has-sub ul li {
-
#cssmenu > ul li > a:hover::after,
+
   *margin-bottom: -1px;
-
#cssmenu > ul li:hover > a::after {
+
-
   border-left: 4px solid #fff;
+
}
}
-
#cssmenu > ul li > a:hover::before,
+
#cssmenu .has-sub ul li a {
-
#cssmenu > ul li:hover > a::before {
+
  background: #e00f16;
-
   border-left: 4px solid rgba(0, 0, 0, 0.3);
+
  border-bottom: 1px dotted #ec6f73;
 +
  filter: none;
 +
  font-size: 11px;
 +
  display: block;
 +
   line-height: 120%;
 +
  padding: 10px;
}
}
-
/* THE SUBMENUS */
+
#cssmenu .has-sub ul li:hover a {
-
#cssmenu > ul ul {
+
  background: #b00c11;
 +
}
 +
#cssmenu .has-sub .has-sub:hover > ul {
 +
  display: block;
 +
}
 +
#cssmenu .has-sub .has-sub ul {
 +
  display: none;
   position: absolute;
   position: absolute;
-
   left: 150px;
+
   left: 100%;
-
   top: -9999px;
+
   top: 0;
-
  padding-left: 5px;
+
-
  opacity: 0;
+
-
  /* The fade effect, created using an opacity transition */
+
-
 
+
-
  -webkit-transition: opacity 0.3s ease-in;
+
-
  -moz-transition: opacity 0.3s ease-in;
+
-
  -o-transition: opacity 0.3s ease-in;
+
-
  -ms-transition: opacity 0.3s ease-in;
+
}
}
-
#cssmenu > ul ul ul {
+
#cssmenu .has-sub .has-sub ul li a {
-
   left: 150px;
+
   background: #b00c11;
 +
  border-bottom: 1px dotted #d06d70;
}
}
-
/* Showing the submenu when the user is hovering the parent link */
+
#cssmenu .has-sub .has-sub ul li a:hover {
-
#cssmenu > ul li:hover > ul {
+
   background: #80090d;
-
   top: 0px;
+
-
  opacity: 1;
+
}
}
</style>
</style>
-
 
+
</head>
-
 
+
-
 
+
-
<html>
+
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
-
 
+
<link href="../Downloads/cssmenu-1/menu_assets/styles.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
<div id='cssmenu'>
<ul>
<ul>
-
   <li><a href='index.html'><span>Home</span></a></li>
+
   <li class='active'><a href='https://2013.igem.org/Team:Glendale_CC_AZ'><span>Home</span></a></li>
-
   <li class='has-sub'><a href='#'><span>Products</span></a>
+
   <li class='has-sub'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Team'><span>Team</span></a>
 +
      <ul>
 +
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Team/students'><span>Who We Are</span></a></li>
 +
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Gallery'><span>Gallery</span></a></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>
 +
  <li class='has-sub'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project'><span>Project</span></a>
       <ul>
       <ul>
-
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
+
         <li class='has-sub'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background'><span>Background</span></a>
             <ul>
             <ul>
-
               <li><a href='#'><span>Sub Item</span></a></li>
+
               <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background/Overview'><span>Overview</span></a></li>
-
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
+
              <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background/Overview/GrowingDeserts'><span>Growing Deserts</span></a></li>
 +
               <li class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/Background/Overview/ThreatenedDeserts'><span>Threatened Deserts</span></a></li>
             </ul>
             </ul>
         </li>
         </li>
-
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
+
         <li class='has-sub'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Project/Wetlab'><span>Wet Lab</span></a>
             <ul>
             <ul>
-
               <li><a href='#'><span>Sub Item</span></a></li>
+
               <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Wetlab/Overview'><span>Overview</span></a></li>
-
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
+
              <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Wetlab/Overview/Experiments'><span>Experiments</span></a></li>
 +
               <li class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Wetlab/Overview/Experiments/Results'><span>Results</span></a></li>
             </ul>
             </ul>
         </li>
         </li>
 +
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Human_Practices'><span>Human Practices</span></a></li>
 +
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Safety'><span>Safety</span></a></li>
 +
        <li class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Achievments'><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 class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Notebook/Calendar'><span>Daily Logs</span></a></li>
 +
      </ul>
 +
  </li>
 +
  <li class='active'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Protocols'><span>Protocols</span></a></li>
 +
  <li class='active'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Parts'><span>Submitted Parts</span></a></li>
 +
  <li class='active has-sub last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Attributions'><span>Attributions</span></a>
 +
      <ul>
 +
        <li class='active'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Attributions/Sponsors'><span>Sponsors</span></a></li>
 +
        <li><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Attributions/Acknowledgments'><span>Acknowledgments</span></a></li>
 +
        <li class='last'><a href='https://2013.igem.org/Team:Glendale_CC_AZ/Attributions/Outreach'><span>Outreach</span></a></li>
       </ul>
       </ul>
   </li>
   </li>
-
  <li><a href='#'><span>About</span></a></li>
 
-
  <li class='last'><a href='#'><span>Contact</span></a></li>
 
</ul>
</ul>
</div>
</div>
 +
</html>
-
 
-
 
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<html>
<head>
<head>
<style type="text/css">
<style type="text/css">
body {
body {
-
background: #222;
+
background: #white;
margin-top: 20px;
margin-top: 20px;
}
}

Revision as of 19:31, 7 August 2013

Igemlogo.jpg
Protocols
PCR


File:Gcclogo.gif



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