Team:Calgary/Sandbox2

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
<style>
<style>
-
body {margin:25px; font:12px Verdana, Arial, Helvetica}
 
-
* {padding:0; margin:0}
 
-
.dropdown {float:left; padding-right:5px}
 
-
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
 
-
.dropdown dt:hover {background:url(images/header_over.gif)}
 
-
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
 
-
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
 
-
.dropdown li {display:inline}
 
-
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
 
-
.dropdown a:hover {background:#d9e1e4; color:#000}
 
-
.dropdown .underline {border-bottom:1px solid #b9d6dc}
 
-
</style>
 
-
<script type="text/javascript">
 
-
var DDSPEED = 10;
 
-
var DDTIMER = 15;
+
/* Menu */
 +
ul.sdt_menu{
 +
    margin:0;
 +
    padding:0;
 +
    list-style: none;
 +
    font-family:"Ubuntu", "Trebuchet MS", sans-serif;
 +
    font-size:12px;
 +
    width:850px;
 +
}
 +
ul.sdt_menu a{
 +
    text-decoration:none;
 +
    outline:none;
 +
}
 +
ul.sdt_menu li{
 +
    float:left;
 +
    width:170px;
 +
    height:85px;
 +
    position:relative;
 +
    cursor:pointer;
 +
}
 +
ul.sdt_menu li > a{
 +
    position:absolute;
 +
    top:0px;
 +
    left:0px;
 +
    width:170px;
 +
    height:85px;
 +
    z-index:12;
 +
    background:#222;
 +
    -moz-box-shadow:0px 0px 2px #000 inset;
 +
    -webkit-box-shadow:0px 0px 2px #000 inset;
 +
    box-shadow:0px 0px 2px #000 inset;
 +
}
 +
ul.sdt_menu li a img{
 +
    border:none;
 +
    position:absolute;
 +
    width:0px;
 +
    height:0px;
 +
    bottom:0px;
 +
    left:85px;
 +
    z-index:170;
 +
    -moz-box-shadow:0px 0px 4px #000;
 +
    -webkit-box-shadow:0px 0px 4px #000;
 +
    box-shadow:0px 0px 4px #000;
 +
    z-index:16;
 +
}
 +
ul.sdt_menu li span.sdt_wrap{
 +
    position:absolute;
 +
    top:25px;
 +
    left:0px;
 +
    width:170px;
 +
    height:60px;
 +
    z-index:15;
 +
}
 +
ul.sdt_menu li span.sdt_active{
 +
    position:absolute;
 +
    background:#111;
 +
    top:85px;
 +
    width:170px;
 +
    height:0px;
 +
    left:0px;
 +
    z-index:14;
 +
    -moz-box-shadow:0px 0px 4px #000 inset;
 +
    -webkit-box-shadow:0px 0px 4px #000 inset;
 +
    box-shadow:0px 0px 4px #000 inset;
 +
}
 +
ul.sdt_menu li span span.sdt_link,
 +
ul.sdt_menu li span span.sdt_descr,
 +
ul.sdt_menu li div.sdt_box a{
 +
    margin-left:15px;
 +
    //text-transform:uppercase;
 +
    text-shadow:1px 1px 1px #333;
 +
}
 +
ul.sdt_menu li span span.sdt_link{
 +
    color:#fff;
 +
    font-size:18px;
 +
    float:left;
 +
    clear:both;
 +
}
 +
ul.sdt_menu li span span.sdt_descr{
 +
    color:#1C5F1C;
 +
    float:left;
 +
    clear:both;
 +
    width:155px; /*For dumbass IE7*/
 +
    font-size:10px;
 +
    letter-spacing:1px;
 +
}
 +
ul.sdt_menu li div.sdt_box{
 +
    display:block;
 +
    position:absolute;
 +
    width:170px;
 +
    overflow: auto;
 +
    top:85px;
 +
    left:0px;
 +
    display:none;
 +
    background:#333;
 +
    z-index: 8;
 +
    padding-top: 15px;
 +
}
 +
ul.sdt_menu li div.sdt_box a{
 +
    float:left;
 +
    clear:both;
 +
    line-height:15px;
 +
    color:#0B75AF;
 +
}
-
// main function to handle the mouse events //
+
ul.sdt_menu li div.sdt_box a:hover{
 +
    color:#fff;
 +
}
-
function ddMenu(id,d){
+
/* End of menu stuff */
-
  var h = document.getElementById(id + '-ddheader');
 
-
  var c = document.getElementById(id + '-ddcontent');
+
.secheader{
 +
    height:50px;
 +
    color:white;
 +
    padding-left:10px;
 +
    padding-top:15px;
 +
    font-size:2.0em;
 +
    text-align:left;
 +
    overflow:auto;
 +
}
-
  clearInterval(c.timer);
+
.contwrap{
 +
    text-align:justify;
 +
    background:#f8f8f8;
 +
    color:#333333;
 +
    width:720px;
 +
    padding-left:10px;
 +
    padding-top:5px;
 +
    padding-right:10px;
 +
    padding-bottom:20px;
 +
    margin-top:5px;
 +
    margin-bottom:none;
 +
}
-
  if(d == 1){
+
h2 {
 +
    margin:0 0 1em;
 +
}
-
     clearTimeout(h.timer);
+
#camfooter {
 +
     clear:both;
 +
    height:0px;
 +
    background:white;
 +
}
 +
#camfooter p {
 +
    margin:0;
 +
}
 +
* html #camfooter {
 +
    height:1px;
 +
}
 +
h1.firstHeading {
 +
    display: none;
 +
}
-
     if(c.maxh && c.maxh <= c.offsetHeight){return}
+
#globalWrapper {
 +
     padding:0px 0px 0px 0px;
 +
    margin:0px 0px 0px 0px;
 +
    text-align: center;
 +
    align: center;
 +
    height: 100%;
 +
    width: 100%;
 +
    border: none;
 +
    color: white;
 +
    background: none;
 +
}
 +
#content {
 +
    background: none;
 +
    border:none;
 +
    padding:0px 0px 0px 0px;
 +
    margin:0px 0px 0px 0px;
 +
    text-align: center;
 +
    align: center;
 +
    height: 100%;
 +
    width: 100%;
 +
}
-
    else if(!c.maxh){
+
#bodyContent {
 +
    padding:0px 0px 0px 0px;
 +
    margin:0px 0px 0px 0px;
 +
    height: 100%;
 +
    width: 100%;
 +
    border: none;
 +
    background: none;
 +
}
-
      c.style.display = 'block';
+
#search-controls {
 +
    overflow:hidden;
 +
    display:none;
 +
    background: none;
 +
    position: absolute;
 +
    top: 170px;
 +
    right: 40px;
 +
}         
 +
#footer-box {
 +
    background: none;
 +
    border: none;
 +
    width: 965px;
 +
    margin: 0 auto;
 +
    margin-bottom:none;
 +
    padding-left:5px;
 +
    padding-right:5px;
 +
    color: white;
 +
}
 +
#footer {
 +
    border: none;
 +
    width: 965px;
 +
    margin: 0;
 +
    padding: 0;
 +
    background: none ;
 +
    color: white;
 +
}
-
      c.style.height = 'auto';
+
#f-list a {
 +
    color: #CCC;
 +
    font-size: 10px;
 +
}
 +
#f-list a:hover {
 +
    color: #999;
 +
}
 +
#footer ul {
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
#footer ul li {
 +
    margin-top: 0;
 +
    margin-bottom: 0;
 +
    margin-left: 10px;
 +
    margin-right: 10px;
 +
    padding: 0;
 +
}
-
      c.maxh = c.offsetHeight;
 
-
      c.style.height = '0px';
+
.headerimg {
 +
    background-position: center top;
 +
    background-repeat: no-repeat;
 +
    width:100%;
 +
    height:100%;
 +
    position:fixed;
 +
    text-align: left;
 +
    padding: 0px 0px 0px 0px;
 +
    margin: -14px 0px 0px 0px;
 +
}
-
     }
+
#preload{
 +
     display:none;
 +
}
-
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
+
#globalWrapper {
 +
    padding:0px 0px 0px 0px;
 +
    margin:0px 0px 0px 0px;
 +
    text-align: center;
 +
    align: center;
 +
    height: 100%;
 +
    width: 100%;
 +
    border: none;
 +
    color: white;
 +
    background: none;
 +
}
 +
#content {
 +
    background: none;
 +
    border:none;
 +
    padding:0px 0px 0px 0px;
 +
    margin:0px 0px 0px 0px;
 +
    text-align: center;
 +
    align: center;
 +
    height: 100%;
 +
    width: 100%;
 +
}
-
  }
+
#bodyContent {
-
  else{
+
    padding:0px 0px 0px 0px;
 +
    margin:0px 0px 0px 0px;
 +
    height: 100%;
 +
    width: 100%;
 +
    border: none;
 +
    background: none;
 +
}
-
     h.timer = setTimeout(function(){ddCollapse(c)},50);
+
#search-controls {
-
 
+
     overflow:hidden;
-
  }
+
    display:none;
 +
    background: none;
 +
    position: absolute;
 +
    top: 170px;
 +
    right: 40px;
 +
}         
 +
#footer-box {
 +
    background: none;
 +
    border: none;
 +
    width: 965px;
 +
    margin: 0 auto;
 +
    margin-bottom:none;
 +
    padding-left:5px;
 +
    padding-right:5px;
 +
    color: white;
 +
}
 +
#footer {
 +
    border: none;
 +
    width: 965px;
 +
    margin: 0;
 +
    padding: 0;
 +
    background: none ;
 +
    color: white;
 +
}
 +
#f-list a {
 +
    color: #CCC;
 +
    font-size: 10px;
 +
}
 +
#f-list a:hover {
 +
    color: #999;
 +
}
 +
#footer ul {
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
#footer ul li {
 +
    margin-top: 0;
 +
    margin-bottom: 0;
 +
    margin-left: 10px;
 +
    margin-right: 10px;
 +
    padding: 0;
}
}
 +
.left-menu, .right-menu{
 +
    position: absolute;
 +
    background: none;
 +
    color: white;
 +
}
-
// collapse the menu //
+
.left-menu ul li, .right-menu ul li a{
 +
    background: none;
 +
    color: white;
 +
}
-
function ddCollapse(c){
+
#contentSub {
 +
    background: none;
 +
}
 +
div#header {
 +
    width: 850px;
 +
    text-align: left;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    margin-bottom: 0px !important;
 +
} 
-
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
+
#p-logo {
 +
    height:0px;
 +
    overflow:hidden;
 +
    border:none;
 +
}
 +
#top-section {
 +
    height: 20px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    margin-bottom: 0px !important;
 +
    margin-top: -14px;
 +
    padding:0px 0px 0px 0px;;
 +
    border: none;
 +
    width: 100%;
 +
    background: none;
 +
    color: black;
 +
    position:absolute;
}
}
-
 
+
.left-menu li, .right-menu li a {
-
 
+
     color: transparent !important;
-
// cancel the collapse if a user rolls over the dropdown //
+
-
 
+
-
function cancelHide(id){
+
-
 
+
-
  var h = document.getElementById(id + '-ddheader');
+
-
 
+
-
  var c = document.getElementById(id + '-ddcontent');
+
-
 
+
-
  clearTimeout(h.timer);
+
-
 
+
-
  clearInterval(c.timer);
+
-
 
+
-
  if(c.offsetHeight < c.maxh){
+
-
 
+
-
     c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
+
-
 
+
-
  }
+
-
 
+
}
}
-
 
+
.right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
-
 
+
     color: white !important;
-
// incrementally expand/contract the dropdown and change the opacity //
+
-
 
+
-
function ddSlide(c,d){
+
-
 
+
-
  var currh = c.offsetHeight;
+
-
 
+
-
  var dist;
+
-
 
+
-
  if (d == 1){
+
-
 
+
-
    dist = (Math.round((c.maxh - currh) / DDSPEED));
+
-
 
+
-
  }  else{
+
-
 
+
-
     dist = (Math.round(currh / DDSPEED));
+
-
 
+
-
  }
+
-
 
+
-
  if(dist <= 1 && d == 1){
+
-
 
+
-
    dist = 1;
+
-
 
+
-
  }
+
-
 
+
-
  c.style.height = currh + (dist * d) + 'px';
+
-
 
+
-
  c.style.opacity = currh / c.maxh;
+
-
 
+
-
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
+
-
 
+
-
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
+
-
 
+
-
    clearInterval(c.timer);
+
-
  }
+
-
 
+
}
}
-
</script>
 
-
</head>
 
 +
</style>
 +
</head>
<body>
<body>
-
<dl class="dropdown">
 
-
  <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
 
-
  <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
 
-
    <ul>
 
-
      <li><a href="#" class="underline">Navigation Item 1</a></li>
 
-
      <li><a href="#" class="underline">Navigation Item 2</a></li>
 
-
      <li><a href="#" class="underline">Navigation Item 3</a></li>
 
-
      <li><a href="#" class="underline">Navigation Item 4</a></li>
 
-
      <li><a href="#">Navigation Item 5</a></li>
 
-
    </ul>
 
-
  </dd>
 
-
</dl>
 
-
 
-
<dl class="dropdown">
 
-
  <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
 
-
  <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
 
-
    <ul>
 
-
      <li><a href="#" class="underline">Navigation Item 1</a></li>
 
-
      <li><a href="#" class="underline">Navigation Item 2</a></li>
 
-
      <li><a href="#" class="underline">Navigation Item 3</a></li>
 
-
      <li><a href="#" class="underline">Navigation Item 4</a></li>
 
-
      <li><a href="#">Navigation Item 5</a></li>
 
-
    </ul>
 
-
  </dd>
 
-
</dl>
 
-
 
-
<div style="clear:both" />
 
-
 
</body>
</body>
 +
</html>
</html>

Revision as of 19:52, 28 June 2011

Retrieved from "http://2011.igem.org/Team:Calgary/Sandbox2"