Template:Team:NCTU Formosa/header-human

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
<style type="text/css">
 +
/*
 +
---Calvin Hue
 +
*/
 +
 +
.human-s-wrapper {
 +
width:900px;
 +
background:url(https://static.igem.org/mediawiki/2012/8/84/Px.png) transparent repeat;
 +
-moz-box-shadow:4px 4px 8px 2px rgba(20%,20%,40%,0.5);
 +
-webkit-box-shadow:4px 4px 8px 2px rgba(20%,20%,40%,0.5);
 +
box-shadow:4px 4px 8px 2px rgba(20%,20%,40%,0.5);
 +
margin-bottom: 15px;
 +
border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
padding-top:5px;
 +
padding-bottom:10px;
 +
}
 +
#human-s1-title {
 +
width: 800px;
 +
height: 30px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/7/7a/Subtitle-human1.png) transparent no-repeat;
 +
margin-left: 5px;
 +
}
 +
#human-s2-title {
 +
width: 800px;
 +
height: 30px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/e/e1/Subtitle-human2.png) transparent no-repeat;
 +
margin-left: 5px;
 +
}
 +
#human-s3-title {
 +
width: 960px;
 +
height: 30px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/e/ea/Subtitle-human3.png) transparent no-repeat;
 +
margin-left: 5px;
 +
}
 +
#human-s2-1-title {
 +
width: 960px;
 +
height: 30px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/4/4b/Subtitle-human2s1.png) transparent no-repeat;
 +
margin-left: 15px;
 +
}
 +
#human-s2-2-title {
 +
width: 960px;
 +
height: 30px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/5/52/Subtitle-human2s2.png) transparent no-repeat;
 +
margin-left: 15px;
 +
}
 +
#human-s2-3-title {
 +
width: 960px;
 +
height: 30px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/7/7e/Subtitle-human2s3.png) transparent no-repeat;
 +
margin-left: 15px;
 +
}
 +
#human-s2-4-title {
 +
width: 960px;
 +
height: 30px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/0/07/Subtitle-human2s4.png) transparent no-repeat;
 +
margin-left: 15px;
 +
}
 +
.human-s-title span {
 +
display: none;
 +
}
 +
.human-s p {
 +
margin:10px;
 +
text-indent:30px;
 +
margin-left:30px;
 +
}
 +
#human-s2 h2 {
 +
margin-top:30px;
 +
}
 +
.pimg {
 +
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 +
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 +
box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 +
//-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
 +
//-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
 +
//box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
 +
-webkit-border-radius: 10px;
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
margin:0 auto;
 +
}
 +
#human-s2-2-p1 {
 +
width: 760px;
 +
height: 556px!important;
 +
background:url(https://static.igem.org/mediawiki/2012/8/84/Project-s2-p1.png) transparent no-repeat;
 +
}
 +
#toc {
 +
display:none;
 +
}
 +
#submenu {
 +
position:fixed;
 +
top: 30px;
 +
margin-left:915px;
 +
width: 81px;
 +
}
 +
#submenu div {
 +
width: 81px;
 +
display: block;
 +
color: #fff;
 +
}
 +
#submenu h1 {
 +
background: #555;
 +
opacity:0.7;
 +
filter:alpha(opacity=70);
 +
-webkit-border-radius: 15px;
 +
-moz-border-radius: 15px;
 +
border-radius: 15px;
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
}
 +
#submenu1 h1 {
 +
background: #555 url(https://static.igem.org/mediawiki/2012/4/42/Num1.png) no-repeat center center;
 +
}
 +
#submenu2-1 h1 {
 +
background: #555 url(https://static.igem.org/mediawiki/2012/e/e7/Num2-1.png) no-repeat center center;
 +
}
 +
#submenu2-2 h1 {
 +
background: #555 url(https://static.igem.org/mediawiki/2012/3/3d/Num2-2.png) no-repeat center center;
 +
}
 +
#submenu2-3 h1 {
 +
background: #555 url(https://static.igem.org/mediawiki/2012/5/54/Num2-3.png) no-repeat center center;
 +
}
 +
#submenu2-4 h1 {
 +
background: #555 url(https://static.igem.org/mediawiki/2012/d/d1/Num2-4.png) no-repeat center center;
 +
}
 +
#submenu3 h1 {
 +
background: #555 url(https://static.igem.org/mediawiki/2012/d/d5/Num3.png) no-repeat center center;
 +
}
 +
#submenu4 h1 {
 +
background: #555 url(https://static.igem.org/mediawiki/2012/5/52/Num4.png) no-repeat center center;
 +
}
 +
#submenu5 h1 {
 +
background: #555 url(https://static.igem.org/mediawiki/2012/1/17/Num5.png) no-repeat center center;
 +
}
 +
#submenu h1:hover {
 +
-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 +
-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 +
box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 +
opacity:1.0;
 +
filter:alpha(opacity=100);
 +
}
 +
.subst1 h1, .subst2 h1, .subst1 h1 a, .subst2 h1 a {
 +
  text-indent:-9999px;
 +
  display: block;
 +
  text-decoration: none;
 +
width:100%;
 +
}
 +
.subst1 h1, .subst1 h1 a {
 +
height:50px;
 +
}
 +
.subst2 h1, .subst2 h1 a {
 +
height:20px;
 +
}
 +
.subst1 p, .subst2 p {
 +
z-index:9;
 +
text-align:center;
 +
display:block;
 +
  font-size: 11px;
 +
  font-weight: normal;
 +
  height: 0px;
 +
  overflow: hidden;
 +
  padding: 0px;
 +
  -webkit-transition: height 1s ease;
 +
    -moz-transition: height 1s ease;
 +
      -o-transition: height 1s ease;
 +
      -ms-transition: height 1s ease;
 +
          transition: height 1s ease;
 +
}
 +
#submenu1:hover p, #submenu2-3:hover p, #submenu2-4:hover p, #submenu3:hover p, #submenu4:hover p, #submenu5:hover p {
 +
height: 20px;
 +
}
 +
#submenu2-1:hover p, #submenu2-2:hover p {
 +
height: 40px;
 +
}
 +
#back-top {
 +
position: fixed;
 +
bottom: 30px;
 +
margin-left:915px;
 +
}
 +
#back-top a {
 +
width: 81px;
 +
display: block;
 +
text-align: center;
 +
font: 11px/100% Arial, Helvetica, sans-serif;
 +
text-transform: uppercase;
 +
text-decoration: none;
 +
color: #333;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
opacity:0.7;
 +
filter:alpha(opacity=70);
 +
}
 +
#back-top a:hover {
 +
color: #fff;
 +
opacity:1.0;
 +
filter:alpha(opacity=100);
 +
}
 +
/* arrow icon (span tag) */
 +
#back-top span {
 +
width: 81px;
 +
height: 81px;
 +
display: block;
 +
margin-bottom: 7px;
 +
background: #555 url(https://static.igem.org/mediawiki/2012/b/b3/Up-arrow.png) no-repeat center center;
 +
/* rounded corners */
 +
-webkit-border-radius: 15px;
 +
-moz-border-radius: 15px;
 +
border-radius: 15px;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
}
 +
#back-top a span {
 +
background-color: #333;
 +
}
 +
#back-top a:hover span {
 +
-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 +
-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 +
box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 +
-webkit-border-radius: 60em;
 +
-moz-border-radius: 60em;
 +
border-radius: 60em;
 +
}
 +
</style>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 +
<script>
 +
$(document).ready(function(){
 +
// hide #back-top first
 +
$("#back-top").hide();
 +
$("#submenu").hide();
 +
// fade in #back-top
 +
$(function () {
 +
$(window).scroll(function () {
 +
if ($(this).scrollTop() > 130) {
 +
$('#back-top').fadeIn();
 +
$('#submenu').fadeIn();
 +
} else {
 +
$('#back-top').fadeOut();
 +
$('#submenu').fadeOut();
 +
}
 +
});
 +
// scroll body to 0px on click
 +
$('#back-top a').click(function () {
 +
$('body,html').animate({
 +
scrollTop: 0
 +
}, 800);
 +
return false;
 +
});
 +
});
 +
});
 +
</script>
</head>
</head>
<body>
<body>

Revision as of 13:16, 11 September 2012

Retrieved from "http://2012.igem.org/Template:Team:NCTU_Formosa/header-human"