Template:Team:HokkaidoU Japan/stylesheets/header.css

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html><style type="text/css">
<html><style type="text/css">
 +
  #hokkaidou-header-wrapper {
 +
    width: 100%;
 +
    height: 55px;
 +
    background-color: #ffffff;
 +
  }
-
#hokkaidou-header {
+
  #hokkaidou-header {
     position: relative;
     position: relative;
-
}
+
    width: 965px;
 +
    height: 55px;
 +
    margin: 0 auto;
 +
  }
-
#hokkaidou-header-logo {
+
  #hokkaidou-header div {
-
     width: 240px;
+
     float: left;
-
    height: 70px;
+
  }
 +
 
 +
  #hokkaidou-header-logo {
     position: absolute;
     position: absolute;
-
     top: 15px; left: 15px;
+
     top: 0; left: 10px;
-
    border: none;
+
  }
-
    background-color: #ffa500;
+
-
    margin: 0;
+
-
    padding 0;
+
-
}
+
-
#hokkaidou-header-logo pre {
+
  #hokkaidou-header-nav {
 +
    position: absolute;
 +
    top: 19px; left: 180px;
 +
    font-family: 'Arial';
 +
    font-size: 12px;
 +
  }
 +
 
 +
  #hokkaidou-header-nav a {
 +
    color: #6c6c6c;
 +
  }
 +
 
 +
  #hokkaidou-header-nav a:hover {
 +
    color: #6c6c6c;
 +
    text-decoration: none;
 +
  }
 +
 
 +
  #hokkaidou-header-nav a:visited {
 +
    color: #6c6c6c;
 +
  }
 +
 
 +
  #hokkaidou-header-nav ul {
 +
    list-style: none;
     margin: 0;
     margin: 0;
-
    padding: 0;
+
  }
-
    width: 240px;
+
-
    height: 70px;
+
-
    border: none;
+
-
    background-color: inherit;
+
-
}
+
-
#hokkaidou-header-logo h1 a {
+
  #hokkaidou-header-nav > ul > li {
 +
    position: relative;
     display: block;
     display: block;
-
     width: 240px;
+
     float: left;
-
     height: 70px;
+
     margin-right: 20px;
-
     border:none;
+
     height: 36px;
-
    background-color: inherit;
+
  }
-
     margin: 0;
+
 
-
     padding 0;
+
  #hokkaidou-header-nav ul li:hover > a {
 +
     color: #032fad;
 +
  }
 +
 
 +
  #hokkaidou-header-nav > ul > li > div {
 +
     display: none;
     position: absolute;
     position: absolute;
     top: 0; left: 0;
     top: 0; left: 0;
-
}
+
    background: transparent;
 +
    height: auto;
 +
  }
-
#hokkaidou-header-logo h1 a:hover {
+
  #hokkaidou-header-nav > ul > li:hover > div {
-
     background-color: #f4a460;
+
     display: block;
-
}
+
  }
 +
 
 +
  #hokkaidou-header-nav > ul > li > div:hover {
 +
  }
-
#hokkaidou-header-nav {
+
  #hokkaidou-header-nav li div ul {
     position: absolute;
     position: absolute;
-
     top: 25px;
+
     top: 36px; left: 0;
-
     right: 25px;
+
    margin-left: -10px;
-
}
+
    padding-bottom: 10px;
 +
    background-color: #ffffff;
 +
    z-index: 1000;
 +
    border-radius: 0 0 1em 1em / 0 0 1em 1em;
 +
     box-shadow: 4px 2px 3px 0 rgba(0, 0, 0, 0.4);
 +
  }
-
#hokkaidou-header-nav li {
+
  #hokkaidou-header-nav li div ul:before,
-
     float: left;
+
  #hokkaidou-header-nav li div ul:after {
-
     list-style: none;
+
     display: block;
-
     margin: 0;
+
    position: absolute;
-
     padding: 10px;
+
    top: 0;
-
    text-align: center;
+
    width: 1em;
-
     width: 50px;
+
    height: 1em;
-
     height: 50px;
+
    content: " ";
-
     overflow: hidden;
+
    z-index: 900;
-
}
+
  }
 +
 
 +
  #hokkaidou-header-nav li div ul:before {
 +
    left: -1em;
 +
     border-top-right-radius: 0.7em;
 +
     box-shadow: 5px -5px 0 0 #ffffff;
 +
  }
 +
 
 +
  #hokkaidou-header-nav li div ul:after {
 +
    right: -1em;
 +
    border-top-left-radius: 0.7em;
 +
    box-shadow: -5px -5px 0 0 #ffffff;
 +
  }
 +
 
 +
  #hokkaidou-header-nav li div ul li {
 +
     padding: 3px 10px;
 +
  }
 +
 
 +
  #hokkaidou-header-search {
 +
    position: absolute;
 +
    top: 19px; left: 740px;
 +
     width: 161px;
 +
  }
 +
 
 +
  #hokkaidou-header-search input {
 +
    width: 161px;
 +
     height: 21px;
 +
     background-image: url("/wiki/images/6/67/Hokkaidou-search.png");
 +
    background-repeat: no-repeat;
 +
    border: none;
 +
    color: #ffffff;
 +
  }
 +
 
 +
  #hokkaidou-header-search input:focus {
 +
    background-position: 0 -22px;
 +
  }
 +
 
 +
  #hokkaidou-header-igem-official-link {
 +
    position: absolute;
 +
    top: 14px; right: 10px;
 +
  }
</style></html>
</style></html>

Revision as of 14:07, 26 September 2012