Template:Team:Berkeley/css

From 2013.igem.org

(Difference between revisions)
 
(749 intermediate revisions not shown)
Line 1: Line 1:
-
#header-image {
+
/****************************************************************************************
-
    float: top;
+
* Thank you Wageningen iGEM 2013 and Berkeley iGEM 2012 for snippets of their CSS code! *
-
    width: 100%;
+
****************************************************************************************/
-
}
+
-
/*
+
 
-
ul.sidenav {
+
div #inner-content img#odd {
-
list-style:none;
+
display: inline-block;
-
padding: 0;
+
width: 16%;
-
margin:0px, 0px, 0px, 20px;
+
padding: 2%;
-
width: 160px;
+
/* padding-bottom: 10%; */
-
float: right;
+
vertical-align: top;
}
}
-
ul.sidenav li {
+
div #inner-content p#odd {
-
position: relative;
+
display: inline-block;
 +
/* float: right; */
 +
width: 76%;
 +
padding: 1%;
 +
padding-top: 2%;
 +
margin: 0;
 +
margin-bottom: 0%;
}
}
-
ul.sidenav li a{
+
div #inner-content img#even {
-
display: block;
+
display: inline-block;
-
overflow: auto; /*force hasLayout in IE7 */
+
width: 16%;
-
color: white;
+
padding: 2%;
-
text-decoration: none;
+
/* padding-bottom: 10%; */
-
margin: .75%;
+
vertical-align: top;
-
font: 1.9em 'Myriad Pro';
+
-
width: 150px;
+
}
}
-
ul.sidenav li a:link, ul.sidenav li a:visited{
+
div #inner-content p#even {
-
<!--background: url(https://static.igem.org/mediawiki/2012/6/62/2012_berkeley_home.jpg) no-repeat 100% 50%;-->
+
display: inline-block;
-
background-size: 20px;
+
/* float: right; */
-
/*background-color: #006291;*/ /*background of tabs (default state)*/
+
width: 76%;
 +
padding: 1%;
 +
padding-top: 2%;
 +
margin: 0;
 +
margin-bottom: 0%;
}
}
-
ul.sidenav li a:visited{
+
 
-
color: white;
+
.heading-large a:hover {
 +
color: white;
 +
font-family: 'Garamond', sans-serif;
 +
font-weight: bold;
 +
font-size: 42px;
 +
text-decoration: none;
}
}
-
ul.sidenav li a:hover{
+
#inner-content{
-
background-color: #333333;
+
width: 100%;
 +
padding-left: 0px;
}
}
-
ul.topnav {
+
body{
-
list-style: none;
+
font-family: serif;
-
padding: 0px 0px;
+
-
margin: 0;
+
font-size: medium;
-
        width:1000px;
+
-
float: left;
+
}
}
-
ul.topnav li {
+
#jeans_top img.jeans-image-first {
-
font-family: 'Georgia', Times, serif;
+
margin-left:0%
-
font-weight: 150;
+
-
font-size: 1.65em;
+
-
float: left;
+
-
margin:0px 0px 0px 0px;
+
-
opacity:.8;
+
-
padding: 2px 6px 10px 12px;
+
-
position: 0px 0px; /*--Declare X and Y axis base for sub navigation--*/
+
}
}
-
ul.topnav li a{
+
#jeans_top img.jeans-image-last {
-
padding: 18px 8px 10px 10px;
+
margin-right:0%
-
color: white;
+
-
display: block;
+
-
text-decoration: none;
+
-
float: left;
+
}
}
-
ul.topnav li a:hover{
+
 
-
background-color:black;
+
#jeans_top img {
-
padding: 18px 8px 10px 10px;
+
width: 11%;
-
font-color: white;
+
margin-left: -1%;
 +
/* margin-right: -1%; */
 +
height:50px;
 +
 +
border: none;
 +
display: inline-block;
 +
padding: 0;
}
}
-
ul.topnav li span { /*--Drop down trigger styles--*/
+
div #jeans_top {
-
width: 17px;
+
-
height: 25px;
+
margin: 0;
-
float: left;
+
-
background-color: gray;
+
 +
/* margin-top: 0%; */
 +
/* margin-bottom: 2%; */
 +
width: 100%;
 +
float: none;
 +
/* padding: 1%; */
 +
overflow: hidden;
 +
white-space: nowrap;
}
}
-
ul.topnav li span.subhover {
+
 
-
background-position: center bottom;  
+
div.inner-content p {
-
cursor: pointer; /*--Hover effect for trigger--*/
+
margin-left: 2%;
 +
margin-right: 2%;
}
}
-
ul.topnav li ul.subnav {
+
 
-
list-style: none;
+
#TitleID  a{
-
position: absolute;
+
font-size: 160%;
-
left: 3px; top: 55px;/*--Important - Keeps subnav from affecting main navigation flow--*/
+
-
background: #333;
+
-
margin: 0; padding: 3px;
+
-
display: none;
+
-
float: left;
+
-
width: 160px;
+
-
opacity: .6;
+
-
border: 1px solid #111;
+
}
}
-
ul.topnav li ul.subnav li{
+
 
-
margin: 0; padding: 0;
+
#globalWrapper {
-
border-top: 1px solid #252525; /*--Create bevel effect--*/
+
background: black;
-
border-bottom: 1px solid #444; /*--Create bevel effect--*/
+
padding-top: 100px;
-
clear: both;
+
margin-top: -100px;
-
height:45px;
+
-
width: 155px;
+
-
font-size: .5em;
+
-
font-family: 'Georgia', Times, serif;
+
-
font-weight: 150;
+
}
}
-
html ul.topnav li ul.subnav li a {
+
 
-
float: left;
+
ul.bxslider {
-
        height:50px;
+
margin:0;
-
width: 145px;
+
-
background-color: white;
+
-
padding-left: 3px;
+
}
}
-
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
+
.bx-wrapper .bx-viewport {
-
background-color: none;
+
border: none;
 +
left: 0;
}
}
-
#slideshow {  
+
 
-
    margin: 50px auto;  
+
#globalWrapper>#content {
-
    position: relative;  
+
width: 75%;
-
    width: 240px;  
+
background: rgba(223,177,38,1);
-
    height: 240px;  
+
background: rgba(187,218,255,1);
-
    padding: 10px;  
+
margin-left: 232px;
-
    box-shadow: 0 0 20px rgba(0,0,0,0.4);  
+
border:none;
 +
 
 +
padding-right: 0;
 +
padding-left: 0;
 +
padding-top: 0;
}
}
-
#slideshow > div {  
+
 
-
    position: absolute;
+
body {
-
    top: 10px;
+
  background-color: #f1f1f1;
-
    left: 10px;
+
-
    right: 10px;
+
-
    bottom: 10px;  
+
}
}
-
#content1{
 
-
font-family:Georgia ,Helvetica,sans-serif;
 
-
height: 300px;
 
-
  }
 
-
#content2{
+
ol, ul, li {
-
font-family:Georgia ,Helvetica,sans-serif;
+
        list-style: none;
-
height: 50px;
+
        -webkit-margin-before: 0;
-
  }
+
        -webkit-margin-after: 0;
 +
        -webkit-padding-start: 0;
 +
        margin: 0;
 +
        text-shadow: aquamarine;
 +
}
 +
 
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {content: "";}
 +
 
 +
blockquote, q {quotes: "" "";}
 +
 
 +
a {color: #333; text-decoration: none;}
 +
a:visited {color: rgba(223,177,38,1);text-decoration: none;}
 +
a:hover {text-decoration: none; color: #0d9c64;}
 +
 
 +
img, embed, object, video {max-width: 100%;}
 +
 
 +
.clearfix {
 +
    display: block;
 +
    width: 100%;
 +
    clear: both;
 +
}
 +
/* Fonts
 +
-------------------------------------------------*/
 +
 
 +
@import url('http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext');
 +
 
 +
/* Overwrite the css for the top part of the page
 +
-------------------------------------------------*/
 +
 
 +
#p-logo,
 +
#catlinks {display: none;}
 +
 
 +
#top-section {
 +
position: fixed;
 +
        top: 0;
 +
        width: 100%;
 +
        height: 0;
 +
        border: none;
 +
        z-index: 100;}
 +
 
 +
#search-controls {display: none;}
 +
 
 +
#menubar {
 +
display: table-cell;
 +
background: transparent;
 +
        font-size: 11px;}
 +
#top-section #menubar ul {
 +
        -webkit-margin-before: 2px;
 +
        -webkit-margin-after: 2px;
 +
        -webkit-padding-start: 40px;
 +
        margin: .3em 0 0 1.5em;}
 +
#menubar.left-menu {width: 100%; padding-top: 6px;}
 +
 
 +
#menubar.right-menu {text-align: right; padding-top: 6px;}
 +
 
 +
#menubar * {
 +
color: transparent !important;
 +
background: transparent !important;}
 +
 
 +
#top-section:hover #menubar * {color: #333 !important;}
 +
 
 +
#top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}
 +
 
 +
#top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}
 +
 
 +
/* Footer
 +
-------------------------------------------------*/
 +
 
 +
#footer-box {
 +
        position: relative;
 +
        margin:0;
 +
        width: 89.06244%;
 +
        height: 48px;
 +
        padding: 0 5.46878%;
 +
        background: #f1f1f1 url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') repeat-x center top;
 +
        border: none;
 +
        z-index: 2;}
 +
 
 +
    #footer-box #footer {
 +
            color: #333;
 +
            font-size: 10px;
 +
            width: 100%;
 +
    }
 +
 
 +
        #footer #f-list li {
 +
                margin: 0 10px;
 +
        }
 +
 
 +
        #footer #f-list li a {
 +
                line-height: 48px;
 +
        }
 +
#f-poweredbyico {position:relative;top: 9px;}
 +
#f-copyrightico {position:relative;top: 9px;}
 +
 
 +
/*************************
body{  
body{  
-
background: url(https://static.igem.org/mediawiki/2011/6/68/Noise_pattern_8.jpg);
+
  background: url(http://www.colourbox.com/preview/2312219-868113-texture-of-blue-jeans-as-a-background.jpg);
 +
  //background-color: white;
}
}
#globalWrapper {width: 100%;}
#globalWrapper {width: 100%;}
Line 140: Line 232:
padding: 0px;
padding: 0px;
width: 1000px;
width: 1000px;
-
background: #BABABA;
+
//background: #BABABA;
-
font-family:Georgia ,Helvetica,sans-serif;
+
        background: white;
 +
font-family: 'Gill Sans MT', 'Garamond', Georgia ,Helvetica,sans-serif;
 +
        font-size: 1.2em;
border: none;
border: none;
text-decoration: none;
text-decoration: none;
Line 153: Line 247:
border:none;
border:none;
}
}
-
.main_item h1{
 
-
text-decoration:none;
 
-
}
 
-
 
#p-logo{display:none;}
#p-logo{display:none;}
-
#top-section2{
 
-
width: 100%;
 
-
background: url(http://www.eecs.berkeley.edu/~jvmiller/images/imagetestberkeley.gif);
 
-
height: 65px;
 
-
}
 
-
#top-section3{
 
-
width: 100%;
 
-
height:0px;
 
-
}
 
-
#team{
 
-
border: 1px solid black;
 
-
padding: 2px;
 
-
height:380px;}
 
#search-controls{
#search-controls{
display:none;
display:none;
}
}
-
#spacer {height: 15px;}
 
-
#spacer2 {height: 9em;}
 
-
#spacer3 {height: .4em;}
 
-
#spacer4 {height: .8em;}
 
#top-section{
#top-section{
width: 100%;
width: 100%;
-
background: url(https://static.igem.org/mediawiki/2011/6/68/Noise_pattern_8.jpg);
+
 
 +
//background: url(https://static.igem.org/mediawiki/2011/6/68/Noise_pattern_8.jpg);
height: 5px;
height: 5px;
border:none;
border:none;
}
}
-
.firstHeading {display:none;}
+
.firstHeading {
 +
    display:none;
 +
}
 +
****************/
 +
 
 +
 
 +
.content section {
 +
  background-color: pink;
 +
  margin-bottom:20px;
 +
    height:750px;
 +
}
 +
 
 +
 
 +
.box{
 +
    margin: 20px; padding: 15px;
 +
    background: #eee;
 +
    height: 700px;
 +
}
 +
#navbar{
 +
    position: fixed;
 +
    top: 5%;
 +
    bottom: auto;
 +
    left: 30px;
 +
    width: 90px;
 +
    background: tranparent;
 +
    font-size: large;
 +
}
 +
.nav li a{
 +
    float: left;
 +
    width: 80px;
 +
    padding: 15px 0;
 +
    color: rgba(187,218,255,1);
 +
    font-size: larger;
 +
}
 +
.nav li a:hover{
 +
    color: white;;
 +
    background: none;
 +
    /* background-color: #eeeeee; */;
 +
}
 +
.nav li.active a{
 +
    color: white;
 +
    text-decoration: none;
 +
}
 +
 
 +
 
 +
 
 +
.content {
 +
  width: auto;
 +
  margin: 0px 20px;
 +
  background: #f1f1f1;
 +
  border: 0.1em solid black;
 +
}
 +
.container {
 +
  display: block;
 +
  padding: 20px;
 +
  background: #f1f1f1;
 +
}
 +
#bodyContent {
 +
width: 100%;
 +
margin: auto;
 +
}
 +
.firstHeading {
 +
    display: none;
 +
    margin-bottom: .1em;
 +
}
 +
/********************************************************
 +
* Tabs                                                  *
 +
********************************************************/
 +
/*
 +
#tab {
 +
  margin-left: 20px;
 +
  margin-bottom: 64px;
 +
  display: block;
 +
}
 +
#tab ul {
 +
  list-style: none;
 +
  float: left;
 +
  width: auto;
 +
}
 +
#tab li {
 +
  float: left;
 +
  margin: 0 1em 0 0;
 +
}
 +
#tab a {
 +
  text-decoration: none;
 +
  display: block;
 +
  padding: 1em;
 +
  font-weight: bold;
 +
  background: #c1c1c1;
 +
  border: 0.1em solid #000050;
 +
  border-bottom: 0.5em solid #000050;
 +
  border-top-left-radius: 1em;
 +
  border-top-right-radius: 1em;
 +
  color: #000050;
 +
}
 +
#tab a:hover {
 +
  background-color: #f1f1f1;
 +
  color: #0000AA;
 +
  border-color: #0000AA;
 +
}
 +
#tab #selected a {
 +
  background-color: #f1f1f1;
 +
  color: #000050;
 +
  border-color: #000050;
 +
}
 +
 
 +
/********************************************************
 +
* Sub-Tabs
 +
*********************************************************/
 +
/*
 +
#stages{
 +
  width: 80%;
 +
  height: 100px;
 +
  margin: auto;
 +
}
 +
#stages ul{
 +
  list-style: none;
 +
  padding: 0px;
 +
  margin: 0px;
 +
}
 +
#stages li{
 +
  float: left;
 +
  text-align: center;
 +
  color: #000050;
 +
  margin: 5px;
 +
}
 +
#stages ul > li:before {
 +
  content: "♦";
 +
  font-size: 25px;
 +
  line-height: 1px;
 +
  display: block;
 +
  color: #000050;
 +
  background-color: #262626;
 +
  border-top: 5px solid #ededed;
 +
  margin: 0 0 15px 0;
 +
}
 +
#stages ul > li.active:before {
 +
  color: #4ee54e;
 +
  text-shadow: 0px 0px 10px #56ff5f;
 +
}
 +
 
 +
/********************************************************
 +
* The Rest
 +
*********************************************************/
 +
.data {
 +
  width: 80%;
 +
  display: block;
 +
  margin: 0 auto;
 +
}
 +
.box {
 +
  float: right;
 +
  width: 775px;
 +
  background-color: rgba(17, 77, 146, 0);
 +
}
 +
.buttons {
 +
  float: left;
 +
  width: 150px;
 +
  background-color: rgba(17, 77, 146, 0);
 +
  margin: 3px;
 +
}
 +
.buttons a {
 +
  text-decoration: none;
 +
}
 +
.buttons a span {
 +
  display: block;
 +
  margin-bottom: 5px;
 +
}
 +
#title {
 +
  margin: 0 auto;
 +
  text-shadow: 2px 2px #C0C0C0;
 +
  font-size: 16px;
 +
}
 +
.names {
 +
  font-size: 20px;
 +
  text-shadow: 2px 2px #C0C0C0;
 +
  margin: 2px;
 +
}
 +
.top-left {
 +
  width: 495px;
 +
  background-color: rgba(17, 77, 146, 0);
 +
  float: left;
 +
  margin: 0px 5px 5px 0px;
 +
}
 +
.top-right {
 +
  width: 460px;
 +
  height: 389px;
 +
  background-color: rgba(17, 77, 146, 0.5);
 +
  display: block;
 +
  float: left;
 +
  margin: 0px 0px 5px 0px;
 +
}
 +
.middle {
 +
  width: 100%;
 +
  height: 300px;
 +
  clear: both;
 +
  background-color: rgba(17, 77, 146, 0);
 +
  margin: 0px 0px 5px 0px;
 +
}
 +
.bottom-left {
 +
  width: 315px;
 +
  height: 200px;
 +
  float: left;
 +
  margin: 0px 5px 0px 0px;
 +
}
 +
.bottom-middle {
 +
  width: 315px;
 +
  height: 200px;
 +
  float: left;
 +
}
 +
.bottom-right {
 +
  width: 315px;
 +
  height: 200px;
 +
  float: left;
 +
  margin: 0px 0px 0px 5px;
 +
}
 +
 
 +
.heading {
 +
  background-color: rgba(0,44,96,1);
 +
  padding: 15px 0px 15px 0px;
 +
  width: 100%;
 +
}
 +
.heading a {
 +
  color: white;
 +
  font-family: 'Garamond', sans-serif;
 +
  font-weight: bold;
 +
  font-size: 28px;
 +
  text-decoration: none;
 +
  margin-left: 10px;
 +
}
 +
.heading a:hover{
 +
  color: white;
 +
  font-family: 'Garamond', sans-serif;
 +
  font-weight: bold;
 +
  font-size: 28px;
 +
  text-decoration: none;
 +
}
 +
.heading-large {
 +
  background-color: rgba(0,44,96,1);
 +
  padding: 35px 10px 15px 15px;
 +
  width: auto;
 +
  margin-bottom: 10px;
 +
}
 +
.heading-large a {
 +
  color: white;
 +
  font-family: 'Garamond', sans-serif;
 +
  font-weight: bold;
 +
  font-size: 42px;
 +
  text-decoration: none;
 +
}
 +
.sub-heading {
 +
  background-color: rgba(0, 0, 80, 1);
 +
  //background-color: rgba(65, 105, 225, 1);
 +
  padding: 12px 0px 12px 12px;
 +
  width: auto;
 +
}
 +
.sub-heading a {
 +
  color: white;
 +
  font-family: 'Garamond', sans-serif;
 +
  font-weight: bold;
 +
  font-size: 20px;
 +
  text-decoration: none;
 +
}
 +
.table, tr, td {
 +
  margin: 25px;
 +
  border: 0px solid rgba(17,77,146, 0);
 +
  background-color: rgba(17, 77, 146, 0);
 +
  text-align: left;
 +
}
 +
table tr, table td {
 +
  border: 0px solid rgba(17,77,146, 0);
 +
}
 +
.button:hover {
 +
  opacity: 0.5;
 +
}
 +
 
 +
@import url(http://fonts.googleapis.com/css?family=Capriola);
 +
/* Let's import the lovely google font, please keep this line at the top of your stylesheet */
 +
/* Menu CSS */
 +
/*
 +
 
 +
 
 +
#cssmenu,
 +
#main-nav ul,
 +
#main-nav ul li,
 +
#main-nav ul li a {
 +
  padding: 0;
 +
  margin: 0;
 +
  line-height: 1;
 +
  font-family: 'Capriola', sans-serif;
 +
}
 +
 
 +
#main-nav:before,
 +
#main-nav:after,
 +
#main-nav > ul:before,
 +
#main-nav > ul:after {
 +
  content: '';
 +
  display: table;
 +
}
 +
#main-nav:after,
 +
#main-nav > ul:after {
 +
  clear: both;
 +
}
*/
*/
 +
 +
 +
 +
#main-nav {
 +
  zoom: 1;
 +
  height: 63px;
 +
  background: url(https://static.igem.org/mediawiki/2013/9/9c/Nav_whxite.png) repeat-x center bottom;
 +
  /* border-radius: 0px; */
 +
  /* border-style: solid; */
 +
  border-left-style: none;
 +
  border-right-style: none;
 +
  border-bottom-style: solid;
 +
  /* border-bottom: antiquewhite; */
 +
  border-color: rgba(0,44,96,1);
 +
  width: 100%;
 +
  margin-top: -.46%;
 +
  margin-left: 0%;
 +
  z-index: 99999;
 +
  position:relative;
 +
}
 +
 +
#main-nav {
 +
    text-align: justify;
 +
}
 +
#main-nav :after  {
 +
    content: '';
 +
    display: inline-block;
 +
    width: 100%;
 +
}
 +
 +
#main-nav li {
 +
    display: inline-block;
 +
}
 +
 +
#main-nav ul {
 +
  background: rgba(187,218,255,1);
 +
  height: 100%;
 +
  /* border: yellow 10px; */
 +
  /* border-bottom-width: 10px; */
 +
  /* border-bottom-style: solid; */
 +
  margin: 0;
 +
}
 +
 +
#main-nav ul li#projectBlue {
 +
/* width: 23%; */
 +
}
 +
#main-nav ul li#humanPractices {
 +
    /* width: 22%; */
 +
}
 +
#main-nav ul li a {
 +
  display: block;
 +
  height: 37px;
 +
  padding: 21px 14px 0;
 +
  margin: 4px 2px 0;
 +
  border-radius: 2px 2px 0 0;
 +
  text-decoration: none;
 +
  font-size: larger;
 +
  color: rgba(0, 44, 96, 1);
 +
  text-shadow: 0;
 +
  font-weight: 400;
 +
  opacity: .8;
 +
}
 +
 +
#main-nav ul li:first-child a {
 +
  /* margin: 4px 2px 0 0; */
 +
}
 +
#main-nav ul li a:hover img.home-image{
 +
background:white;
 +
}
 +
 +
#main-nav ul li a:hover,
 +
#main-nav ul li.active a {
 +
  display: block;
 +
  color: white;
 +
  text-shadow: white;
 +
  opacity: 1;
 +
}
 +
#main-nav ul ul {
 +
  display: none;
 +
  left: 0px;
 +
 
 +
}
 +
#main-nav ul li:hover ul{
 +
  display: block;
 +
  width: 100%;
 +
  height: 184px;
 +
  position: absolute;
 +
  margin-left: 0;
 +
  z-index:10;
 +
 
 +
  border: rgba(0,44,96,1);
 +
  border-width: 3px;
 +
  border-top-style: solid;
 +
  border-bottom-style: solid;
 +
  /* border-left-style: solid; */
 +
  /* border-right-style: solid; */
 +
}
 +
#main-nav ul ul li {
 +
  width: 25%;
 +
  height: 100%;
 +
  left:auto; 
 +
  clear:none;
 +
  float: left;
 +
  /* margin-left: 1%; */
 +
 
 +
  /* margin-right: 1%; */
 +
  /* border-color: rgba(187,218,255,1); */
 +
  /* border-width: thick; */
 +
  background: rgba(0,44,96,1); 
 +
  /* color: rgba(187,218,255,1); */
 +
}
 +
 +
#main-nav ul ul li.odd{
 +
 
 +
  /* border-style: solid; */
 +
  border-color: rgba(0,44,96,1);
 +
  border-width: thick;
 +
  background: rgba(187,218,255,1);
 +
 
 +
  /* height: 100%; */
 +
  /* border: double rgba(187,218,255,1) 37px; */
 +
  /* margin-top: 1%; */
 +
  /* margin-left: 2%; */
 +
  /* margin-right: 2%; */
 +
  width: 25%;
 +
}
 +
 +
#main-nav ul li ul li a {
 +
  display: block;
 +
  height: 37px;
 +
  padding: 22px 14px 0;
 +
  margin: 4px 2px 0;
 +
  border-radius: 2px 2px 0 0;
 +
  text-decoration: none;
 +
  font-size: larger;
 +
  color: rgba(187,218,255,1);
 +
  text-shadow: 0;
 +
  font-weight: 400;
 +
  padding-top: inherit;
 +
  margin-top: 1%;
 +
  opacity: 0.9;
 +
  padding-top: 7%;
 +
  text-align: center;
 +
}
 +
#main-nav ul li ul li a :after{
 +
display:block;
 +
text-align: start;
 +
}
 +
#main-nav ul li ul li.odd a {
 +
  text-decoration: none;
 +
  color: rgba(0, 44, 96, 1);
 +
  text-shadow: 0;
 +
  font-weight: 400;
 +
  opacity: .9;
 +
}
 +
#main-nav ul li ul li.odd a:hover,
 +
#main-nav ul li ul li.active a {
 +
  display: block;
 +
  color: white;
 +
  text-shadow: white;
 +
  opacity: 1;
 +
}
 +
 +
#main-nav ul li ul li:hover a,
 +
#main-nav ul li ul li.active a {
 +
  display: block;
 +
  /* height: 100%; */
 +
  /* margin-top: 0px; */
 +
  /* padding-top: 14%; */
 +
  color: white;
 +
  text-shadow: white;
 +
  opacity: 1;
 +
}
 +
#main-nav img.nav-image#outreach {
 +
width: 100px;
 +
height:auto;
 +
margin-top: 11px;
 +
}
 +
#main-nav img.nav-image#plant {
 +
width: 180px;
 +
height:auto;
 +
margin-top: 14px;
 +
}
 +
#main-nav img.nav-image#solubilizing {
 +
width:100px;
 +
height:auto;
 +
}
 +
#main-nav img.nav-image#lumi {
 +
width: 190px;
 +
height:auto;
 +
}
 +
#main-nav img.nav-image#safety {
 +
width:100px;
 +
height:auto;
 +
}
 +
 +
#main-nav img.nav-image {
 +
  width:200px;
 +
  height:85px;
 +
  margin: 10%;
 +
  margin-left: auto;
 +
  margin-right:auto;
 +
  display: block;
 +
  float: middle;
 +
 
 +
}
 +
 +
#main-nav img.home-image {
 +
  width: 25px;
 +
  height: auto;
 +
  margin: 0;
 +
  margin-left: auto;
 +
  margin-right: 10px;
 +
  margin-bottom: 0px;
 +
  padding-top: -5px;
 +
  display: left;
 +
  float: middle;
 +
 
 +
  opacity: .9;
 +
  background: rgba(0, 44, 96, 1);
 +
}
 +
 +
#header-image {
 +
    height: auto;
 +
 
 +
 
 +
    width: 100%;
 +
    border: rgba(0,44,96,1);
 +
    border-bottom-width: 0px;
 +
    border-left-style: none;
 +
    border-right-style: none;
 +
    border-top-style: solid;
 +
    border-width: 3px;
 +
    margin-left: 0%;
 +
    margin-top: -2%;
 +
    background: white;
 +
    display: block;
 +
}
 +
 +
#header-image-inner {
 +
    height: 183px;
 +
 
 +
 
 +
    width: auto;
 +
    margin-top: 0%;
 +
    margin: 0%;
 +
    padding: 0%;
 +
    /* border: double rgba(0,44,96,1); */
 +
    /* border-width: 5px; */
 +
    /* border-style: solid; */
 +
    /* outline: solid rgba(187,218,255,1); */
 +
    background: rgba(187,218,255,1);
 +
    /* box-shadow: 0 0 0 2px #000,    0 0 0 3px #999,    0 0 0 9px #fa0,    0 0 0 10px #666,    0 0 0 16px #fd0,    0 0 0 18px #000; */
 +
}
 +
#header-image-inner-inner {
 +
/* margin-top: 3%; */
 +
padding-top: 1%;
 +
float: none;
 +
}
 +
 +
 +
#header-image img.firstHeaderImg {
 +
  height: auto;
 +
  width: 19%;
 +
  margin-left: 1%;
 +
}
 +
#header-image img.secondHeaderImg {
 +
  height: auto;
 +
  width: 50%;
 +
  margin-left: 4%;
 +
  margin-right: 4%;
 +
}
 +
#header-image img.thirdHeaderImg {
 +
  height: auto;
 +
  width: 19%;
 +
}
 +
 +
/*
 +
@import url(http://fonts.googleapis.com/css?family=Capriola);
 +
/* Let's import the lovely google font, please keep this line at the top of your stylesheet */
 +
/* Menu CSS */
 +
/*
 +
#cssmenu1,
 +
#cssmenu1 ul,
 +
#cssmenu1 ul li,
 +
#cssmenu1 ul li a {
 +
  padding: 0;
 +
  margin: 0;
 +
  line-height: 1;
 +
  font-family: 'Capriola', sans-serif;
 +
}
 +
#cssmenu1:before,
 +
#cssmenu1:after,
 +
#cssmenu1 > ul:before,
 +
#cssmenu1 > ul:after {
 +
  content: '';
 +
  display: table;
 +
}
 +
#cssmenu1:after,
 +
#cssmenu1 > ul:after {
 +
  clear: both;
 +
}
 +
#cssmenu1 {
 +
  zoom: 1;
 +
  height: 69px;
 +
  background: url(bottom-bg.png) repeat-x center bottom;
 +
  border-radius: 2px;
 +
  width: auto;
 +
}
 +
#cssmenu1 ul {
 +
  background: url(nav-bg.png) repeat-x 0px 4px;
 +
  height: 69px;
 +
}
 +
#cssmenu1 ul li {
 +
  float: left;
 +
  list-style: none;
 +
}
 +
#cssmenu1 ul li a {
 +
  display: block;
 +
  height: 37px;
 +
  padding: 22px 30px 0;
 +
  margin: 4px 2px 0;
 +
  border-radius: 2px 2px 0 0;
 +
  text-decoration: none;
 +
  font-size: 15px;
 +
  color: white;
 +
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
 +
  font-weight: 400;
 +
  opacity: .9;
 +
}
 +
#cssmenu1 ul li:first-child a {
 +
  margin: 4px 2px 0 0;
 +
}
 +
#cssmenu1 ul li a:hover,
 +
#cssmenu1 ul li.active a {
 +
  background: url(color.png) center bottom;
 +
  display: block;
 +
  height: 37px;
 +
  margin-top: 0px;
 +
  padding-top: 26px;
 +
  color: #616161;
 +
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
 +
  opacity: 1;
 +
}

Latest revision as of 02:06, 29 October 2013

/****************************************************************************************

  • Thank you Wageningen iGEM 2013 and Berkeley iGEM 2012 for snippets of their CSS code! *
                                                                                                                                                                                • /


div #inner-content img#odd { display: inline-block; width: 16%; padding: 2%; /* padding-bottom: 10%; */ vertical-align: top; } div #inner-content p#odd { display: inline-block; /* float: right; */ width: 76%; padding: 1%; padding-top: 2%; margin: 0; margin-bottom: 0%; } div #inner-content img#even { display: inline-block; width: 16%; padding: 2%; /* padding-bottom: 10%; */ vertical-align: top; } div #inner-content p#even { display: inline-block; /* float: right; */ width: 76%; padding: 1%; padding-top: 2%; margin: 0; margin-bottom: 0%; }

.heading-large a:hover { color: white; font-family: 'Garamond', sans-serif; font-weight: bold; font-size: 42px; text-decoration: none; }

  1. inner-content{

width: 100%; padding-left: 0px; }

body{ font-family: serif;

font-size: medium; }

  1. jeans_top img.jeans-image-first {

margin-left:0% }

  1. jeans_top img.jeans-image-last {

margin-right:0% }

  1. jeans_top img {

width: 11%; margin-left: -1%; /* margin-right: -1%; */ height:50px;

border: none; display: inline-block; padding: 0; } div #jeans_top {

margin: 0;


/* margin-top: 0%; */ /* margin-bottom: 2%; */ width: 100%; float: none; /* padding: 1%; */ overflow: hidden; white-space: nowrap; }

div.inner-content p { margin-left: 2%; margin-right: 2%; }

  1. TitleID a{

font-size: 160%; }

  1. globalWrapper {

background: black; padding-top: 100px; margin-top: -100px; }

ul.bxslider { margin:0; } .bx-wrapper .bx-viewport { border: none; left: 0; }

  1. globalWrapper>#content {

width: 75%; background: rgba(223,177,38,1); background: rgba(187,218,255,1); margin-left: 232px; border:none;

padding-right: 0; padding-left: 0; padding-top: 0; }

body { 

 background-color: #f1f1f1;

}

ol, ul, li { 

       list-style: none;
       -webkit-margin-before: 0;
       -webkit-margin-after: 0;
       -webkit-padding-start: 0;
       margin: 0;
       text-shadow: aquamarine;

}

blockquote:before, blockquote:after, q:before, q:after {content: "";}

blockquote, q {quotes: "" "";}

a {color: #333; text-decoration: none;} a:visited {color: rgba(223,177,38,1);text-decoration: none;} a:hover {text-decoration: none; color: #0d9c64;}

img, embed, object, video {max-width: 100%;}

.clearfix { 

   display: block;
   width: 100%;
   clear: both;

} /* Fonts

*/

@import url('http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext');

/* Overwrite the css for the top part of the page

*/
  1. p-logo,
  2. catlinks {display: none;}
  1. top-section {

position: fixed; 

       top: 0;
       width: 100%;
       height: 0;
       border: none;
       z-index: 100;}
  1. search-controls {display: none;}
  1. menubar {

display: table-cell; background: transparent; 

       font-size: 11px;}
  1. top-section #menubar ul { 
       -webkit-margin-before: 2px;
       -webkit-margin-after: 2px;
       -webkit-padding-start: 40px;
       margin: .3em 0 0 1.5em;}
  1. menubar.left-menu {width: 100%; padding-top: 6px;}
  1. menubar.right-menu {text-align: right; padding-top: 6px;}
  1. menubar * {

color: transparent !important; background: transparent !important;}

  1. top-section:hover #menubar * {color: #333 !important;}
  1. top-section #menubar ul li a:hover {color: #0d9c64 !important; text-decoration: none;}
  1. top-section:hover #menubar.left-menu {background: rgba(255, 255, 255, 0.75) !important; border-bottom: 1px solid #0d9c64;}

/* Footer

*/
  1. footer-box { 
       position: relative;
       margin:0;
       width: 89.06244%;
       height: 48px;
       padding: 0 5.46878%;
       background: #f1f1f1 url('https://static.igem.org/mediawiki/2013/9/92/Footerline.png') repeat-x center top;
       border: none;
       z-index: 2;}

   #footer-box #footer {
           color: #333;
           font-size: 10px;
           width: 100%;
   }

       #footer #f-list li {
               margin: 0 10px;
       }

       #footer #f-list li a {
               line-height: 48px;
       }
  1. f-poweredbyico {position:relative;top: 9px;}
  2. f-copyrightico {position:relative;top: 9px;}

/************************* body{ 

  background: url(http://www.colourbox.com/preview/2312219-868113-texture-of-blue-jeans-as-a-background.jpg);
  //background-color: white;

}

  1. globalWrapper {width: 100%;}
  2. content{

padding: 0px; width: 1000px; //background: #BABABA; 

       background: white;

font-family: 'Gill Sans MT', 'Garamond', Georgia ,Helvetica,sans-serif; 

       font-size: 1.2em;

border: none; text-decoration: none; }

  1. footer, f-poweredbyico, f-copyrightico, f-list {

background: #BABABA; margin:0px; padding:0px;}

  1. footer-box {

background: #BABABA; border:none; }

  1. p-logo{display:none;}
  2. search-controls{

display:none; }

  1. top-section{

width: 100%;

//background: url(Noise_pattern_8.jpg); height: 5px; border:none; } .firstHeading { 

   display:none;

}

                                • /


.content section { 

 background-color: pink;
 margin-bottom:20px;
   height:750px;

}


.box{ 

   margin: 20px; padding: 15px;
   background: #eee;
   height: 700px;

}

  1. navbar{ 
   position: fixed;
   top: 5%; 
   bottom: auto;
   left: 30px;
   width: 90px;
   background: tranparent;
   font-size: large;

} .nav li a{ 

   float: left;
   width: 80px;
   padding: 15px 0;
   color: rgba(187,218,255,1);
   font-size: larger;

} .nav li a:hover{ 

   color: white;;
   background: none;
   /* background-color: #eeeeee; */;

} .nav li.active a{ 

   color: white;
   text-decoration: none;

}


.content { 

 width: auto;
 margin: 0px 20px;
 background: #f1f1f1;
 border: 0.1em solid black;

} .container { 

 display: block;
 padding: 20px;
 background: #f1f1f1;

}

  1. bodyContent {

width: 100%; margin: auto; } .firstHeading { 

   display: none;
   margin-bottom: .1em;

} /********************************************************

  • Tabs *
                                                                                                                • /

/*

  1. tab { 
 margin-left: 20px; 
 margin-bottom: 64px;
 display: block;

}

  1. tab ul { 
 list-style: none;
 float: left;
 width: auto;

}

  1. tab li { 
 float: left;
 margin: 0 1em 0 0;

}

  1. tab a { 
 text-decoration: none;
 display: block;
 padding: 1em;
 font-weight: bold;
 background: #c1c1c1;
 border: 0.1em solid #000050;
 border-bottom: 0.5em solid #000050;
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
 color: #000050;

}

  1. tab a:hover { 
 background-color: #f1f1f1;
 color: #0000AA;
 border-color: #0000AA;

}

  1. tab #selected a { 
 background-color: #f1f1f1;
 color: #000050;
 border-color: #000050;

}

/********************************************************

  • Sub-Tabs
                                                                                                                  • /

/*

  1. stages{ 
 width: 80%;
 height: 100px; 
 margin: auto;

}

  1. stages ul{ 
 list-style: none;
 padding: 0px;
 margin: 0px;

}

  1. stages li{ 
 float: left;
 text-align: center;
 color: #000050;
 margin: 5px;

}

  1. stages ul > li:before { 
 content: "♦";
 font-size: 25px;
 line-height: 1px;
 display: block;
 color: #000050;
 background-color: #262626;
 border-top: 5px solid #ededed;
 margin: 0 0 15px 0;

}

  1. stages ul > li.active:before { 
 color: #4ee54e;
 text-shadow: 0px 0px 10px #56ff5f;

}

/********************************************************

  • The Rest
                                                                                                                  • /

.data { 

 width: 80%;
 display: block;
 margin: 0 auto;

} .box { 

 float: right;
 width: 775px;
 background-color: rgba(17, 77, 146, 0);

} .buttons { 

 float: left;
 width: 150px;
 background-color: rgba(17, 77, 146, 0);
 margin: 3px;

} .buttons a { 

 text-decoration: none;

} .buttons a span { 

 display: block;
 margin-bottom: 5px;

}

  1. title { 
 margin: 0 auto;
 text-shadow: 2px 2px #C0C0C0;
 font-size: 16px;

} .names { 

 font-size: 20px;
 text-shadow: 2px 2px #C0C0C0;
 margin: 2px;

} .top-left { 

 width: 495px;
 background-color: rgba(17, 77, 146, 0);
 float: left;
 margin: 0px 5px 5px 0px;

} .top-right { 

 width: 460px;
 height: 389px;
 background-color: rgba(17, 77, 146, 0.5);
 display: block;
 float: left;
 margin: 0px 0px 5px 0px;

} .middle { 

 width: 100%;
 height: 300px;
 clear: both;
 background-color: rgba(17, 77, 146, 0);
 margin: 0px 0px 5px 0px;

} .bottom-left { 

 width: 315px;
 height: 200px;
 float: left;
 margin: 0px 5px 0px 0px;

} .bottom-middle { 

 width: 315px;
 height: 200px;
 float: left;

} .bottom-right { 

 width: 315px;
 height: 200px;
 float: left;
 margin: 0px 0px 0px 5px;

}

.heading { 

 background-color: rgba(0,44,96,1);
 padding: 15px 0px 15px 0px;
 width: 100%;

} .heading a { 

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 28px;
 text-decoration: none;
 margin-left: 10px;

} .heading a:hover{ 

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 28px;
 text-decoration: none;

} .heading-large { 

 background-color: rgba(0,44,96,1);
 padding: 35px 10px 15px 15px;
 width: auto;
 margin-bottom: 10px;

} .heading-large a { 

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 42px;
 text-decoration: none;

} .sub-heading { 

 background-color: rgba(0, 0, 80, 1);
 //background-color: rgba(65, 105, 225, 1);
 padding: 12px 0px 12px 12px;
 width: auto;

} .sub-heading a { 

 color: white;
 font-family: 'Garamond', sans-serif;
 font-weight: bold;
 font-size: 20px;
 text-decoration: none;

} .table, tr, td { 

 margin: 25px;
 border: 0px solid rgba(17,77,146, 0);
 background-color: rgba(17, 77, 146, 0);
 text-align: left;

} table tr, table td { 

 border: 0px solid rgba(17,77,146, 0);

} .button:hover { 

 opacity: 0.5;

}

@import url(http://fonts.googleapis.com/css?family=Capriola); /* Let's import the lovely google font, please keep this line at the top of your stylesheet */ /* Menu CSS */ /*


  1. cssmenu,
  2. main-nav ul,
  3. main-nav ul li,
  4. main-nav ul li a { 
 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

  1. main-nav:before,
  2. main-nav:after,
  3. main-nav > ul:before,
  4. main-nav > ul:after { 
 content: ;
 display: table;

}

  1. main-nav:after,
  2. main-nav > ul:after { 
 clear: both;

}

  • /


  1. main-nav { 
 zoom: 1;
 height: 63px;
 background: url(Nav_whxite.png) repeat-x center bottom;
 /* border-radius: 0px; */
 /* border-style: solid; */
 border-left-style: none;
 border-right-style: none;
 border-bottom-style: solid;
 /* border-bottom: antiquewhite; */
 border-color: rgba(0,44,96,1);
 width: 100%;
 margin-top: -.46%;
 margin-left: 0%;
 z-index: 99999;
 position:relative;

}

  1. main-nav { 
   text-align: justify;

}

  1. main-nav :after { 
   content: ;
   display: inline-block;
   width: 100%;

}

  1. main-nav li { 
   display: inline-block;

}

  1. main-nav ul { 
 background: rgba(187,218,255,1);
 height: 100%;
 /* border: yellow 10px; */ 
 /* border-bottom-width: 10px; */
 /* border-bottom-style: solid; */
 margin: 0;

}

  1. main-nav ul li#projectBlue {

/* width: 23%; */ }

  1. main-nav ul li#humanPractices { 
   /* width: 22%; */

}

  1. main-nav ul li a { 
 display: block;
 height: 37px;
 padding: 21px 14px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: larger;
 color: rgba(0, 44, 96, 1);
 text-shadow: 0;
 font-weight: 400;
 opacity: .8;

}

  1. main-nav ul li:first-child a { 
 /* margin: 4px 2px 0 0; */

}

  1. main-nav ul li a:hover img.home-image{

background:white; }

  1. main-nav ul li a:hover,
  2. main-nav ul li.active a { 
 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

  1. main-nav ul ul { 
 display: none;
 left: 0px;

}

  1. main-nav ul li:hover ul{ 
 display: block; 
 width: 100%;
 height: 184px;
 position: absolute;
 margin-left: 0;
 z-index:10;
 
 border: rgba(0,44,96,1);
 border-width: 3px;
 border-top-style: solid;
 border-bottom-style: solid;
 /* border-left-style: solid; */
 /* border-right-style: solid; */

}

  1. main-nav ul ul li { 
 width: 25%; 
 height: 100%;
 left:auto;  
 clear:none;
 float: left;
 /* margin-left: 1%; */
 
 /* margin-right: 1%; */
 /* border-color: rgba(187,218,255,1); */
 /* border-width: thick; */
 background: rgba(0,44,96,1);   
 /* color: rgba(187,218,255,1); */

}

  1. main-nav ul ul li.odd{ 
 /* border-style: solid; */
 border-color: rgba(0,44,96,1);
 border-width: thick;
 background: rgba(187,218,255,1);
  
 /* height: 100%; */
 /* border: double rgba(187,218,255,1) 37px; */
 /* margin-top: 1%; */
 /* margin-left: 2%; */ 
 /* margin-right: 2%; */ 
 width: 25%;

}

  1. main-nav ul li ul li a { 
 display: block;
 height: 37px;
 padding: 22px 14px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: larger;
 color: rgba(187,218,255,1);
 text-shadow: 0;
 font-weight: 400;
 padding-top: inherit;
 margin-top: 1%;
 opacity: 0.9;
 padding-top: 7%;
 text-align: center;

}

  1. main-nav ul li ul li a :after{

display:block; text-align: start; }

  1. main-nav ul li ul li.odd a { 
 text-decoration: none;
 color: rgba(0, 44, 96, 1);
 text-shadow: 0;
 font-weight: 400;
 opacity: .9;

}

  1. main-nav ul li ul li.odd a:hover,
  2. main-nav ul li ul li.active a { 
 display: block;
 color: white;
 text-shadow: white;
 opacity: 1;

}

  1. main-nav ul li ul li:hover a,
  2. main-nav ul li ul li.active a { 
 display: block;
 /* height: 100%; */
 /* margin-top: 0px; */
 /* padding-top: 14%; */
 color: white;
 text-shadow: white;
 opacity: 1;

}

  1. main-nav img.nav-image#outreach {

width: 100px; height:auto; margin-top: 11px; }

  1. main-nav img.nav-image#plant {

width: 180px; height:auto; margin-top: 14px; }

  1. main-nav img.nav-image#solubilizing {

width:100px; height:auto; }

  1. main-nav img.nav-image#lumi {

width: 190px; height:auto; }

  1. main-nav img.nav-image#safety {

width:100px; height:auto; }

  1. main-nav img.nav-image { 
 width:200px;
 height:85px;
 margin: 10%;
 margin-left: auto;
 margin-right:auto;
 display: block;
 float: middle;

}

  1. main-nav img.home-image { 
 width: 25px;
 height: auto;
 margin: 0;
 margin-left: auto;
 margin-right: 10px;
 margin-bottom: 0px;
 padding-top: -5px;
 display: left;
 float: middle;
 
 opacity: .9;
 background: rgba(0, 44, 96, 1);

}

  1. header-image { 
   height: auto;
 
 
   width: 100%;
   border: rgba(0,44,96,1);
   border-bottom-width: 0px;
   border-left-style: none;
   border-right-style: none;
   border-top-style: solid;
   border-width: 3px;
   margin-left: 0%;
   margin-top: -2%;
   background: white;
   display: block;

}

  1. header-image-inner { 
   height: 183px;
 
 
   width: auto;
   margin-top: 0%;
   margin: 0%;
   padding: 0%;
   /* border: double rgba(0,44,96,1); */
   /* border-width: 5px; */
   /* border-style: solid; */
   /* outline: solid rgba(187,218,255,1); */
   background: rgba(187,218,255,1);
   /* box-shadow: 0 0 0 2px #000,     0 0 0 3px #999,     0 0 0 9px #fa0,     0 0 0 10px #666,     0 0 0 16px #fd0,     0 0 0 18px #000; */

}

  1. header-image-inner-inner {

/* margin-top: 3%; */ padding-top: 1%; float: none; }


  1. header-image img.firstHeaderImg { 
 height: auto;
 width: 19%;
 margin-left: 1%;

}

  1. header-image img.secondHeaderImg { 
 height: auto;
 width: 50%;
 margin-left: 4%;
 margin-right: 4%;

}

  1. header-image img.thirdHeaderImg { 
 height: auto;
 width: 19%;

}

/* @import url(http://fonts.googleapis.com/css?family=Capriola); /* Let's import the lovely google font, please keep this line at the top of your stylesheet */ /* Menu CSS */ /*

  1. cssmenu1,
  2. cssmenu1 ul,
  3. cssmenu1 ul li,
  4. cssmenu1 ul li a { 
 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

  1. cssmenu1:before,
  2. cssmenu1:after,
  3. cssmenu1 > ul:before,
  4. cssmenu1 > ul:after { 
 content: ;
 display: table;

}

  1. cssmenu1:after,
  2. cssmenu1 > ul:after { 
 clear: both;

}

  1. cssmenu1 { 
 zoom: 1;
 height: 69px;
 background: url(bottom-bg.png) repeat-x center bottom;
 border-radius: 2px;
 width: auto;

}

  1. cssmenu1 ul { 
 background: url(nav-bg.png) repeat-x 0px 4px;
 height: 69px;

}

  1. cssmenu1 ul li { 
 float: left;
 list-style: none;

}

  1. cssmenu1 ul li a { 
 display: block;
 height: 37px;
 padding: 22px 30px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: 15px;
 color: white;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
 font-weight: 400;
 opacity: .9;

}

  1. cssmenu1 ul li:first-child a { 
 margin: 4px 2px 0 0;

}

  1. cssmenu1 ul li a:hover,
  2. cssmenu1 ul li.active a { 
 background: url(color.png) center bottom;
 display: block;
 height: 37px;
 margin-top: 0px;
 padding-top: 26px;
 color: #616161;
 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
 opacity: 1;

}

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