Team:Penn/NewWebsite

From 2012.igem.org

(Difference between revisions)
Line 33: Line 33:
   margin-top: 0px;
   margin-top: 0px;
}
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
/* Some stylesheet reset */
 +
.nav, .nav ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
line-height: 1;
 +
z-index: 9999999;
 +
}
 +
 +
/* The top navigation menu */
 +
.nav {
 +
/* Layout & positioning */
 +
display: block;
 +
position: relative;
 +
width: 1200px;
 +
height: 43px;
 +
border-bottom: 3px solid #fff; /* 45c3f2 */
 +
border-top-left-radius: 3px;
 +
border-top-right-radius: 3px;
 +
 +
/* Background & effects */
 +
background: #494949; /* Background for Internet Explorer 9 and older browsers */
 +
background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */
 +
background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */
 +
background: -o-linear-gradient(bottom, #444, #555); /* Background for Opera */
 +
background: -ms-linear-gradient(bottom, #444, #555); /* Background for Internet Explore 10+ */
 +
}
 +
 +
/* The link containers */
 +
.nav>li {
 +
display: block;
 +
float:left;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
 +
}
 +
 +
/* The main navigation links */
 +
.nav>li>a {
 +
/* Layout & positioning */
 +
display: block;
 +
width: 198px;
 +
padding: 11px 0px;
 +
border-right: 1px dotted #393939;
 +
border-left: 1px dotted #595959;
 +
 +
/* Typography */
 +
font-family: Helvetica, Arial, sans-serif;
 +
font-size: 15px;
 +
font-weight: normal;
 +
text-decoration: none;
 +
color: #fff;
 +
text-shadow: 0 1px 0 #2a2a2a;
 +
text-align: center;
 +
 +
/* Chaning the background on hover with a smooth transition */
 +
-webkit-transition: background .35s linear;
 +
-moz-transition: background .35s linear;
 +
-ms-transition: background .35s linear;
 +
-o-transition: background .35s linear;
 +
transition: background .35s linear;
 +
}
 +
 +
/* Chaning the background on hover */
 +
.nav>li>a:hover, .nav>li:hover>a {
 +
background: rgba(0, 0, 0, .15);
 +
background: #414141;
 +
}
 +
 +
.nav>li:first-child a {
 +
border-top-left-radius: 3px;
 +
}
 +
 +
/* The pointer arrow */
 +
.arrow {
 +
cursor: pointer;
 +
    height: 0px;
 +
    border: 3px solid transparent;
 +
    border-bottom-color: #fff;
 +
    left: 100px;
 +
    position: absolute;
 +
    bottom: 0px;
 +
    width: 0;
 +
    z-index: 5;
 +
 +
    -moz-transition: all .3s ease;
 +
    -ms-transition: all .3s ease;
 +
    -o-transition: all .3s ease;
 +
    -webkit-transition: all .3s ease;
 +
    transition: all .3s ease;
 +
}
 +
 +
.arrow:hover {
 +
    -moz-transition-duration: 3000s;
 +
    -ms-transition-duration: 3000s;
 +
    -o-transition-duration: 3000s;
 +
    -webkit-transition-duration: 3000s;
 +
    transition-duration: 3000s;
 +
}
 +
 +
.nav li:nth-child(1):hover ~ .arrow, .nav .active:nth-child(1) ~ .arrow {
 +
    left: 100px;
 +
}
 +
.nav li:nth-child(2):hover ~ .arrow, .nav .active:nth-child(2) ~ .arrow {
 +
    left: 300px;
 +
}
 +
.nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(3) ~ .arrow {
 +
    left: 500px;
 +
}
 +
.nav li:nth-child(4):hover ~ .arrow, .nav .active:nth-child(4) ~ .arrow {
 +
    left: 700px;
 +
}
 +
.nav li:nth-child(5):hover ~ .arrow, .nav .active:nth-child(5) ~ .arrow {
 +
    left: 900px;
 +
}
 +
 +
/* General styling for the submenus */
 +
.nav ul {
 +
display: block;
 +
position: absolute;
 +
left: -9999px;
 +
text-align: center;
 +
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
 +
 +
}
 +
 +
/* Level 1 submenus */
 +
.nav>li>ul {
 +
cursor: pointer;
 +
padding-top: 0px;
 +
z-index: 200;
 +
top: 43px;
 +
 +
}
 +
 +
/* Making the level 1 submenu to appear on hover */
 +
.nav>li:hover>ul {
 +
left: -1px;
 +
}
 +
 +
 +
/* The submenu link containers */
 +
.nav ul li {
 +
position: relative;
 +
display: block;
 +
 +
/* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
 +
height: 0px;
 +
-webkit-transition: height .2s;
 +
-moz-transition: height .2s;
 +
-o-transition: height .2s;
 +
-ms-transition: height .2s;
 +
}
 +
 +
/* Expanding the list elements which contain the links */
 +
.nav li:hover>ul>li {
 +
height: 24px;
 +
}
 +
 +
.nav>li:hover>ul>li:first-child {
 +
height: 27px;
 +
}
 +
 +
.nav>li>ul>li:first-child>a {
 +
border-top: 3px solid #fff;
 +
}
 +
 +
.nav>li>ul>li.dropdown:first-child>ul {
 +
top: 3px;
 +
}
 +
 +
/* The links of the submenus */
 +
.nav ul li a {
 +
/* Layout */
 +
display: block;
 +
width: 169px;
 +
padding: 6px 12px 6px 20px;
 +
 +
/* Typography */
 +
font-size: 13px;
 +
color: #01256e;
 +
font-family: Helvetica, Arial, sans-serif;
 +
text-decoration: none;
 +
background: #f0f0f0;
 +
 +
/* Every change to the links (background, color etc) will be made with a smooth transition */
 +
-webkit-transition: all .2s;
 +
-moz-transition: all .2s;
 +
-ms-transition: all .2s;
 +
-o-transition: all .2s;
 +
transition: all .2s;
 +
}
 +
 +
.nav>li>ul>li:first-child>a::before {
 +
content: "";
 +
display: block;
 +
position: absolute;
 +
text-align: center;
 +
width: 100%;
 +
height: 6px;
 +
background: transparent;
 +
top: -6px;
 +
left: 0;
 +
z-index: 9999;
 +
}
 +
 +
 +
/* The hover state of the links */
 +
.nav ul li:hover>a, .nav ul li>a:hover {
 +
background: #e7e7e7;
 +
color: #01256e;
 +
}
 +
 +
/* Changing the color of the arrow on hover */
 +
.nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
 +
border-left-color: #fff;
 +
}
 +
 +
.nav>li>ul>li
 +
{
 +
  margin-bottom: 0
 +
}
 +
 +
 +
.nav>li:first-child:hover>ul
 +
{
 +
 +
  left:0px;
 +
 +
}
 +
 +
.nav>li:last-child:hover>ul
 +
{
 +
left:-2px;
 +
}
 +
 +
.tableCSS
 +
{
 +
background-color:#95001a;
 +
width:1200px;
 +
 +
}
 +
 +
 +
 +
 +
 +
 +

Revision as of 03:25, 20 October 2012

Penn 2012 iGEM Wiki

Retrieved from "http://2012.igem.org/Team:Penn/NewWebsite"