Template:Nevada Header CSS

From 2011.igem.org

(Difference between revisions)
m
m
 
(158 intermediate revisions not shown)
Line 6: Line 6:
body {
body {
background-image: url(https://static.igem.org/mediawiki/2011/1/12/UNR_Background1.JPG);
background-image: url(https://static.igem.org/mediawiki/2011/1/12/UNR_Background1.JPG);
-
background-repeat: no-repeat;
+
background-repeat: repeat;
-
background-position: 100% 85%;
+
background-position: 90% 75%;
}
}
-
#banner-box{
+
#absHeader{
-
   position: relative;
+
   position: absolute;
 +
  top: 0px;
   left: 0px;
   left: 0px;
-
   height: 200px;
+
   height: 210px;
   width: 955px;
   width: 955px;
   display: block;
   display: block;
-
   border-top: #FFF solid 4px;
+
    /* Box Categories */
-
   border-left: #FFF solid 4px;
+
   -moz-border-radius-topright: 35px;
-
   border-right: #FFF solid 4px;
+
  -moz-border-radius-topleft: 35px;
-
   background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#25324e));
+
  -webkit-border-top-right-radius: 35px;
-
   background: -webkit-linear-gradient(left, #506cab, #25324e);
+
  -webkit-border-top-left-radius: 35px;
-
   background: -moz-linear-gradient(left, rgba(0,0,0,0.4), #25324e);
+
  border-top-right-radius: 35px;
-
   background: -ms-linear-gradient(left, #506cab, #25324e);
+
  border-top-left-radius: 35px;
-
   background: -o-linear-gradient(left, #506cab, #25324e);
+
  /* Box Shadows */
 +
  border-top: rgba(0,0,0,1) groove 4px;
 +
   border-left: rgba(0,0,0,1) groove 4px;
 +
   border-right: rgba(0,0,0,1) ridge 4px;
 +
}
 +
 
 +
#banner-box{
 +
   position: absolute;
 +
  top: 0px;
 +
  left: -2px;
 +
  height: 210px;
 +
  width: 957px;
 +
  display: block;
 +
  /* Box Categories */
 +
  -moz-border-radius-topright: 35px;
 +
  -moz-border-radius-topleft: 35px;
 +
  -webkit-border-top-right-radius: 35px;
 +
  -webkit-border-top-left-radius: 35px;
 +
  border-top-right-radius: 35px;
 +
  border-top-left-radius: 35px;
 +
  -moz-border-radius-bottomright: 45px;
 +
  -moz-border-radius-bottomleft: 45px;
 +
  -webkit-border-bottom-right-radius: 45px;
 +
  -webkit-border-bottom-left-radius: 45px;
 +
  border-bottom-right-radius: 45px;
 +
  border-bottom-left-radius: 45px;
 +
  /* Box Shadows */
 +
  /* None */
 +
  /* Color Background */
 +
  background-color: rgba(194,194,194,0.7);
 +
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#858585', endColorstr='#25324e');*/
 +
   /*background: -webkit-linear-gradient(top, rgba(133,133,133,1) 70%, rgba(0,0,26,1), #25324e);*/
 +
   /*background: -moz-linear-gradient(top, #858585 70%,rgba(0,0,26,1), #25324e);*/
 +
   /*background: -webkit-gradient(linear, 0 75%,0 100%, from(rgba(133,133,133,1)), to(#25324e));*/
 +
   /*background: -o-linear-gradient(top, rgba(133,133,133,1) 70%, rgba(0,0,26,1), #25324e);*/
 +
  z-index: 100;
}
}
Line 42: Line 78:
     line-height: 22px;
     line-height: 22px;
     text-align: center;
     text-align: center;
 +
    color: #003300;
}
}
Line 50: Line 87:
     line-height: 22px;
     line-height: 22px;
     text-align: center;
     text-align: center;
 +
    color: #003300;
}
}
Line 60: Line 98:
     height: 150px;
     height: 150px;
     z-index: 10;
     z-index: 10;
 +
}
 +
 +
#banner-logo2{
 +
  position: relative;
 +
  display: block;
 +
  top: 15px;
 +
  left: 0px;
 +
  width: 50px;
 +
  height: 50px;
 +
  z-index: 10;
}
}
#banner-buttons{
#banner-buttons{
   position: relative;
   position: relative;
-
   float: right;
+
   float: left;
-
   top: 50px;
+
  display: block;
-
   left: 100px;
+
   top: 20px;
 +
   left: 25px;
   height: 35px;
   height: 35px;
-
   width: 550px;
+
   width: 900px;
-
   background-color: transparent;
+
  cursor: pointer;
-
   z-index: 5;
+
  text-align: center;
 +
   background-color: rgba(0,51,0,0.8);
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 15px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 15px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 15px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 15px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 15px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 15px;
 +
  /* Border Thickness */
 +
  border: rgba(0,0,0,0.8) solid 3px;
 +
   z-index: 15;
 +
}
 +
 
 +
.buttons-text{
 +
    color: #C20074;
 +
    font-family: "Times New Roman";
 +
    font-size: 22px;
 +
    font-weight: bold;
 +
    line-height: 35px;
 +
    text-align: center;
}
}
#banner-buttons a{
#banner-buttons a{
-
   color: white;
+
   color: #C20074;
 +
  //color: #FF3DB1;
}
}
-
/* Bottoms for Banner */
+
/* Navigation */
 +
ul {
 +
  list-style: none;
 +
  padding-top: -1px;
 +
  margin-top: -1px;
 +
}
 +
ul.top-level li{
 +
    float: left;
 +
    text-decoration: none;
 +
}
 +
 
 +
ul.sub-level {
 +
    display: none;
 +
}
 +
li:hover{
 +
    position: relative;
 +
}
 +
 
 +
li:hover .sub-level {
 +
    //background: #C20074;
 +
    background: #FF3DB1;
 +
    border: #000 solid;
 +
    border-width: 3px;
 +
    display: block;
 +
    position: absolute;
 +
    left: -20px;
 +
    top: 33px;
 +
    padding-left: 5px;
 +
    text-align: left;
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 0px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 0px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 0px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 0px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 0px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 0px;
 +
}
 +
ul.sub-level li {
 +
    border: none;
 +
    float: left;
 +
    width: 175px;
 +
    cursor: pointer;
 +
}
 +
 
 +
 
 +
ul.sub-level a{
 +
    color: rgba(0,51,0,1) !important;
 +
}
 +
 
 +
ul.sub-level a:hover, ul.sub-level li:hover{
 +
    background: rgba(0,51,0,1) !important;
 +
    color: #C20074 !important;
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 0px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 0px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 0px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 0px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 0px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 0px;
 +
}
 +
 
 +
/* Navigation */
 +
 
 +
ul.sub-level2 {
 +
    display: none;
 +
}
 +
 
 +
li:hover .sub-level2 {
 +
    //background: #C20074;
 +
    background: #FF3DB1;
 +
    border: #000 solid;
 +
    border-width: 3px;
 +
    display: block;
 +
    position: absolute;
 +
    left: -20px;
 +
    top: 33px;
 +
    padding-left: 5px;
 +
    text-align: left;
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 0px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 0px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 0px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 0px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 0px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 0px;
 +
}
 +
ul.sub-level2 li {
 +
    border: none;
 +
    float: left;
 +
    width: 225px;
 +
    cursor: pointer;
 +
}
 +
 
 +
 
 +
ul.sub-level2 a{
 +
    color: rgba(0,51,0,1) !important;
 +
}
 +
 
 +
ul.sub-level2 a:hover, ul.sub-level2 li:hover{
 +
    background: rgba(0,51,0,1) !important;
 +
    color: #C20074 !important;
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 0px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 0px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 0px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 0px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 0px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 0px;
 +
}
 +
 
 +
/* Links for Notebook */
 +
ul.sub-level3 {
 +
    display: none;
 +
}
 +
 
 +
li:hover .sub-level3 {
 +
    //background: #C20074;
 +
    background: #FF3DB1;
 +
    border: #000 solid;
 +
    border-width: 3px;
 +
    display: block;
 +
    position: absolute;
 +
    left: -20px;
 +
    top: 33px;
 +
    padding-left: 5px;
 +
    text-align: left;
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 0px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 0px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 0px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 0px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 0px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 0px;
 +
}
 +
ul.sub-level3 li {
 +
    border: none;
 +
    float: left;
 +
    width: 125px;
 +
    cursor: pointer;
 +
}
 +
 
 +
 
 +
ul.sub-level3 a{
 +
    color: rgba(0,51,0,1) !important;
 +
}
 +
 
 +
ul.sub-level3 a:hover, ul.sub-level3 li:hover{
 +
    background: rgba(0,51,0,1) !important;
 +
    color: #C20074 !important;
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 0px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 0px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 0px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 0px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 0px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 0px;
 +
}
-
.button {
 
-
  border-top: 1px solid #000000;
 
-
  background: #ffffff;
 
-
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#25324e));
 
-
  background: -webkit-linear-gradient(top, #506cab, #25324e);
 
-
  background: -moz-linear-gradient(top, #506cab, #25324e);
 
-
  background: -ms-linear-gradient(top, #506cab, #25324e);
 
-
  background: -o-linear-gradient(top, #506cab, #25324e);
 
-
  padding: 8.5px 10px;
 
-
  -webkit-border-radius: 12px;
 
-
  -moz-border-radius: 12px;
 
-
  border-radius: 12px;
 
-
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 
-
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 
-
  box-shadow: #888 0 2px 5px;
 
-
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
 
-
  color: #000;
 
-
  font-size: 13px;
 
-
  font-family: Georgia, Serif;
 
-
  text-decoration: none;
 
-
  vertical-align: middle;
 
-
  }
 
-
.button:hover {
 
-
  border-top-color: #2e3f61;
 
-
  background: #2e3f61;
 
-
  color: #000000;
 
-
  }
 
-
.button:active {
 
-
  border-top-color: #2c4454;
 
-
  background: #2c4454;
 
-
  color: #000;
 
-
  }
 
</style>
</style>
 +
 +
</head>
</head>
<body>
<body>
</body>
</body>
 +
<div id="absHeader">
<div id="banner-box">
<div id="banner-box">
-
<a href="/Main_Page"><img id="banner-logo" src="https://static.igem.org/mediawiki/2011/e/e2/UNR_IGEM_seal.png" width=150px; style="float:right; border:none;  clear: right; margin: 0px; padding: 0px;"></a>
+
 
 +
<a href="/Main_Page"><img id="banner-logo2" src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" width=50px; style="float:left; border:none;  clear: right; margin: 0px; padding: 0px;"></a>
 +
<a href="/Main_Page"><img id="banner-logo" src="https://static.igem.org/mediawiki/2011/9/9a/UNR-IGEM-YinYangDark.png" width=150px; style="float:right; border:none;  clear: right; margin: 0px; padding: 0px;"></a>
<div id="banner-title-box">
<div id="banner-title-box">
<div class="banner-text-title">
<div class="banner-text-title">
-
Friends with Benefits</div><br><br>
+
So Happy Together</div><br><br>
<div class="banner-subtext">
<div class="banner-subtext">
A Cooperative Relationship between Cyanobacteria and E. Coli<br>
A Cooperative Relationship between Cyanobacteria and E. Coli<br>
Line 126: Line 367:
</div>
</div>
</div>
</div>
-
<div id="banner-buttons">  
+
<div id="banner-buttons" class="buttons-text">
-
<a href="/Team:Nevada" class="button">Home</a>
+
<ul class="top-level">
-
<a href="/Team:Nevada/Team" class="button">Team</a>
+
<li>
-
<a href="#" class="button">Project</a>
+
&nbsp;&nbsp;<a href="/Team:Nevada">Home</a>&nbsp;&nbsp;
-
<a href="#" class="button">Parts</a>
+
</li>
-
<a href="/Team:Nevada/Notebook/Weeks14" class="button">Notebook</a>
+
<li>
-
<a href="#" class="button">Gallery</a>
+
|&nbsp;&nbsp;<a href="/Team:Nevada/Team">Team</a>&nbsp;&nbsp;
-
<a href="/Team:Nevada/Reference" class="button">References</a>
+
    <ul class="sub-level">
-
<a href="/Team:Nevada/Safety" class="button">Safety</a>
+
        <li><a href="/Team:Nevada/Team">Nevada's Team</a></li><br>
 +
        <li><a href="/Team:Nevada/gallery">Gallery</a></li>
 +
  </ul>
 +
</li>
 +
<li>
 +
|&nbsp;&nbsp;<a href="/Team:Nevada/Project">Project</a>&nbsp;&nbsp;
 +
    <ul class="sub-level2">
 +
        <li><a href="/Team:Nevada/Project/Background">Introduction</a></li><br>
 +
        <li><a href="/Team:Nevada/Project/Ecoli">E. coli Project</a></li><br>
 +
        <li><a href="/Team:Nevada/Project/Cyano">Cyanobacteria Project</a></li><br>
 +
        <li><a href="/Team:Nevada/Project/Assay">Assay Development</a></li><br>
 +
        <li><a href="/Team:Nevada/Project/Co-Cult">Co-Cultivation</a></li><br>
 +
        <li><a href="/Team:Nevada/Project/Results">Results Summary</a></li><br>
 +
        <li><a href="/Team:Nevada/Reference">References</a></li><br>
 +
  </ul>
 +
</li>
 +
<li>
 +
|&nbsp;&nbsp;<a href="/Team:Nevada/Parts">Parts</a>&nbsp;&nbsp;
 +
</li>
 +
<li>
 +
|&nbsp;&nbsp;<a href="/Team:Nevada/Notebook/Weeks14">Notebook</a>&nbsp;&nbsp;
 +
    <ul class="sub-level3">
 +
        <li><a href="/Team:Nevada/Notebook/Weeks14">Weeks 1-4</a></li><br>
 +
        <li><a href="/Team:Nevada/Notebook/Weeks58">Weeks 5-8</a></li><br>
 +
        <li><a href="/Team:Nevada/Notebook/Weeks912">Weeks 9-12</a></li><br>
 +
        <li><a href="/Team:Nevada/Notebook/Weeks1316">Weeks 13-16</a></li>
 +
  </ul>
 +
</li>
 +
<li>
 +
|&nbsp;&nbsp;<a href="">Human Practices</a>&nbsp;&nbsp;
 +
    <ul class="sub-level2">
 +
        <li><a href="/Team:Nevada/iGEMcollaborators">iGEM Collaborators</a></li>
 +
        <li><a href="/Team:Nevada/Outreach">Outreach</a></li><br>
 +
        <li><a href="/Team:Nevada/Contributions">Contributions</a></li><br>
 +
        <li><a href="/Team:Nevada/Fundraising">Fundraising</a></li>
 +
  </ul>
 +
</li>
 +
<li>
 +
|&nbsp;&nbsp;<a href="/Team:Nevada/Safety">Safety</a>&nbsp;&nbsp;
 +
</li></ul>
</div>
</div>
</div>
</div>
-
</body>
+
</div> <!-- Closing of all content in header -->
</html>
</html>

Latest revision as of 02:27, 29 September 2011


Retrieved from "http://2011.igem.org/Template:Nevada_Header_CSS"