Team:St Andrews/demo

From 2010.igem.org

(Difference between revisions)
 
(102 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<link rel="stylesheet" type="text/css" href="http://www.lycifer.co.cc/css/lymaindemo.css" />
+
<style type="text/css">
 +
 
 +
/* The Nivo Slider styles */
 +
.nivoSlider {
 +
position:relative;
 +
}
 +
.nivoSlider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
}
 +
/* If an image is wrapped in a link */
 +
.nivoSlider a.nivo-imageLink {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:100%;
 +
height:100%;
 +
border:0;
 +
padding:0;
 +
margin:0;
 +
z-index:60;
 +
display:none;
 +
}
 +
/* The slices in the Slider */
 +
.nivo-slice {
 +
display:block;
 +
position:absolute;
 +
z-index:50;
 +
height:100%;
 +
}
 +
/* Caption styles */
 +
.nivo-caption {
 +
position:absolute;
 +
left:0px;
 +
bottom:0px;
 +
background:#000;
 +
color:#fff;
 +
opacity:0.8; /* Overridden by captionOpacity setting */
 +
width:100%;
 +
z-index:89;
 +
}
 +
.nivo-caption p {
 +
padding:5px;
 +
margin:0;
 +
}
 +
/* Direction nav styles (e.g. Next & Prev) */
 +
.nivo-directionNav a {
 +
position:absolute;
 +
top:45%;
 +
z-index:99;
 +
cursor:pointer;
 +
}
 +
.nivo-prevNav {
 +
left:0px;
 +
}
 +
.nivo-nextNav {
 +
right:0px;
 +
}
 +
/* Control nav styles (e.g. 1,2,3...) */
 +
.nivo-controlNav a {
 +
position:relative;
 +
z-index:99;
 +
cursor:pointer;
 +
}
 +
.nivo-controlNav a.active {
 +
font-weight:bold;
 +
}
 +
#slider {
 +
position:relative;
 +
margin:30px 30px 60px 30px;
 +
background:#202834 url(loading.gif) no-repeat 50% 50%;
 +
-moz-box-shadow:0px 0px 10px #333;
 +
-webkit-box-shadow:0px 0px 10px #333;
 +
box-shadow:0px 0px 10px #333;
 +
}
 +
#slider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
display:none;
 +
}
 +
#slider a {
 +
border:0;
 +
}
 +
 
 +
ul, li {
 +
list-style: none;
 +
padding:0;
 +
margin:0;
 +
}
 +
#crumbs {
 +
height:2.3em;
 +
border:1px solid #dedede;
 +
}
 +
#crumbs li {
 +
float:left;
 +
line-height:2.3em;
 +
color:#000066;
 +
padding-left:.75em;
 +
padding-right:.75em;
 +
}
 +
#crumbs li a {
 +
background:url(http://farm5.static.flickr.com/4083/4840231538_b92665afd3_m_d.jpg) no-repeat right center;
 +
display:block;
 +
padding:0 15px 0 0;
 +
}
 +
#crumbs li a:link,
 +
#crumbs li a:visited {
 +
color:#000066;
 +
text-decoration:none;
 +
}
 +
a:link, a:visited,
 +
#crumbs li a:hover,
 +
#crumbs li a:focus {
 +
color:#dd2c0d;
 +
}
 +
 
 +
 
 +
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; }
 +
 +
ul#navmenu-h ul {
 +
width: 173px; /* Sub Menu Width */
 +
margin: 0;
 +
list-style: none;
 +
display: none;
 +
position: absolute;
 +
top: 100%;
 +
left: 0;
 +
}
 +
 +
ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }
 +
 +
ul#navmenu-h li { float: left; display: inline; position: relative; }
 +
ul#navmenu-h ul li { width: 100%; display: block; }
 +
 +
/* Root Menu */
 +
ul#navmenu-h a {
 +
border-top: 1px solid #FFF;
 +
border-right: 1px solid #FFF;
 +
width:160px;
 +
padding: 6px;
 +
float: center;
 +
display: block;
 +
background: #000066;
 +
color: #ffffff;
 +
font: bold 11px Verdana, sans-serif;
 +
text-decoration: none;
 +
height: 1%;
 +
}
 +
 +
/* Root Menu Hover Persistence */
 +
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
 +
background: #FFFFFF;
 +
color: #000066;
 +
height:120%;
 +
font: bold 13px Verdana, sans-serif;
 +
}
 +
 +
/* 2nd Menu */
 +
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
 +
font: bold 11px Verdana, sans-serif;
 +
border: 1px solid #dedede;
 +
width: 160px;
 +
float: none;
 +
height:100%;
 +
color: #000066;
 +
background: #FFFFFF;
 +
}
 +
 +
/* 2nd Menu Hover Persistence */
 +
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
 +
font: bold 13px Verdana, sans-serif;
 +
border: 1px solid #dedede;
 +
background: #000066;
 +
color:#ffffff;
 +
height:120%;
 +
}
 +
 +
/* 3rd Menu */
 +
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
 +
font: bold 11px Verdana, sans-serif;
 +
color: #000066;
 +
background: #FFFFFF;
 +
height:100%;
 +
}
 +
 +
/* 3rd Menu Hover Persistence */
 +
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
 +
font: bold 13px Verdana, sans-serif;
 +
background: #000066;
 +
color: #ffffff;
 +
height:120%;
 +
}
 +
 +
/* 4th Menu */
 +
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
 +
background: #808080;
 +
}
 +
 +
/* 4th Menu Hover */
 +
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
 +
background: #000066;
 +
}
 +
 +
/* Hover Function - Do Not Move */
 +
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
 +
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }
 +
 
 +
ul.navigation2
 +
{
 +
position:absolute;
 +
z-index:6;
 +
top:200px;
 +
left:105px;
 +
}
 +
ul.navigation1
 +
{
 +
position:absolute;
 +
z-index:6;
 +
top:248px;
 +
left:110px;
 +
}
 +
#globalWrapper {
 +
    position: relative;
 +
    font-size: 127%;
 +
    width: 100%;
 +
    margin: 0;
 +
    padding: 0;
 +
    padding-bottom: 10px;
 +
}
 +
.visualClear {
 +
    clear: both;
 +
}
 +
 
 +
#top-section {
 +
    position: relative;
 +
    height: 0px;
 +
    width: 975px;
 +
#    margin-left: 10px;
 +
margin: 0 auto 0 auto;
 +
    border-left: 1px solid #000000;
 +
    border-right: 1px solid #000000;
 +
}
 +
 
 +
#p-logo {
 +
    position: absolute;
 +
top=-107
 +
    z-index: 1;
 +
    height: 107px;
 +
    width: 975px;
 +
}
 +
#p-logo h5 {
 +
    display: none;
 +
}
 +
#p-logo a,
 +
#p-logo a:hover {
 +
    text-decoration: none;
 +
}
 +
 
 +
#search-controls {
 +
position: absolute;
 +
top:  25px;
 +
right: 15px;
 +
width: 150px;
 +
height: 40px;
 +
background-color: transparent;
 +
    text-align: center;
 +
    z-index: 3;
 +
}
 +
input.searchButton {
 +
margin: 1px 10px 0 10px;
 +
font-size: 100%;
 +
background: none;
 +
border: none;
 +
color: #FFFFFF;
 +
font-weight: bold;
 +
}
 +
input.searchButton:hover {
 +
color: white;
 +
}
 +
#searchInput {
 +
    width: 10.9em;
 +
    margin: 0;
 +
    font-size: 95%;
 +
}
 +
 
 +
 
 +
 
 +
#menubar {
 +
filter: alpha(opacity=100);
 +
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
 +
-moz-opacity: 1; opacity:1;
 +
 
 +
background: #d1d1d1; /* for non-css3 browsers */
 +
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#808080'); /* for IE */
 +
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#808080)); /* for webkit browsers */
 +
background: -moz-linear-gradient(top,  #ebebeb,  #808080); /* for firefox 3.6+ */
 +
 +
color: #444;
 +
border-top: solid 1px #f8f8f8;
 +
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 +
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 +
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 +
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
 +
 
 +
    position: absolute;
 +
    white-space: nowrap;
 +
    top: 0px;
 +
width: 682px;   
 +
    z-index: 5;
 +
    font-family: sans-serif;
 +
    font-size: 95%;
 +
    line-height: 1em;
 +
text-transform: uppercase;
 +
}
 +
.left-menu {
 +
color:#000000;
 +
    left: -199px;
 +
    text-align: left;
 +
}
 +
.right-menu {
 +
    text-align: right;
 +
    right: -190px;
 +
}
 +
#menubar ul {
 +
    color: #555555;
 +
    list-style: none;
 +
}
 +
#menubar li {
 +
    display: inline;
 +
    position: relative;
 +
    cursor: pointer;
 +
    padding-left: 4px;
 +
    padding-right: 10px;
 +
}
 +
#menubar li a {
 +
    color: #555555;
 +
}
 +
#menubar li a:hover {
 +
    color: black;
 +
    text-decoration: none;
 +
}
 +
#menubar .selected a {
 +
color: black;
 +
}
 +
 
 +
 
 +
.f-poweredbyico
 +
{
 +
position:absolute;
 +
}
 +
#footer {
 +
background:white;
 +
color:white;
 +
    border-top:0px solid black;
 +
}
 +
#toc
 +
{
 +
z-index: -1;
 +
visibility: hidden;
 +
border:0px;
 +
background-color:#FFFFFF;
 +
padding:0px;
 +
}
 +
img.topbanner
 +
{
 +
z-index: -1;
 +
visibility: hidden;
 +
position:absolute;
 +
top:-1000px;
 +
left:-1px;
 +
}
 +
img.lybanner
 +
{
 +
visibility:hidden;
 +
z-index:4;
 +
position:absolute;
 +
top:22px;
 +
left:-1px;
 +
width:977px;
 +
}
 +
img.ph
 +
{
 +
z-index:7;
 +
top:-50px;
 +
width:160px;
 +
border-top-left-radius:5em;
 +
border-top-right-radius:2em;
 +
border-bottom-left-radius:2em;
 +
border-bottom-right-radius:2em;
 +
-webkit-border-top-left-radius: 5em;
 +
-webkit-border-top-right-radius: 2em;
 +
-webkit-border-bottom-left-radius/* The Nivo Slider styles */
 +
position:relative;
 +
}
 +
}
 +
img.ph1
 +
{
 +
width:512px;
 +
 
 +
border-top-left-radius:5em;
 +
border-top-right-radius:2em;
 +
border-bottom-left-radius:2em;
 +
border-bottom-right-radius:2em;
 +
 +
-webkit-border-top-left-radius: 5em;
 +
-webkit-border-top-right-radius: 2em;
 +
-webkit-border-bottom-left-radius: 2em;
 +
-webkit-border-bottom-right-radius: 2em;
 +
-moz-border-radius-topleft: 5em;
 +
-moz-border-radius-topright: 2em;
 +
-moz-border-radius-bottomleft: 2em;
 +
-moz-border-radius-bottomright: 2em;
 +
}
 +
 
 +
a.link
 +
{
 +
color:#000066;
 +
}
 +
 
 +
img.photo
 +
{
 +
position:absolute;
 +
top:3px;
 +
left:1000px;
 +
}
 +
img.background
 +
{
 +
visibility:hidden;
 +
z-index:3;
 +
position:absolute;
 +
height:2978px;
 +
width:1350px;
 +
top:0px;
 +
left:-180px;
 +
}
 +
img.gradient
 +
{
 +
visibility:hidden;
 +
z-index:5;
 +
position:absolute;
 +
height:3000px;
 +
width:200px;
 +
top:0px;
 +
left:-190px;
 +
}
 +
img.gradientb
 +
{
 +
visibility:hidden;
 +
z-index:5;
 +
position:absolute;
 +
height:3000px;
 +
width:200px;
 +
top:0px;
 +
right:-200px;
 +
}
 +
img.gradient2b
 +
{
 +
z-index:5;
 +
position:absolute;
 +
height:3000px;
 +
width:300px;
 +
top:280px;
 +
right:175px;
 +
}
 +
#footer-box
 +
{
 +
position:absolute;
 +
top:-100px;
 +
left:187px;
 +
}
 +
ul.navigation
 +
{
 +
position:absolute;
 +
z-index:5;
 +
top:218px;
 +
left:105px;
 +
}
 +
 
 +
body
 +
{
 +
padding: 0;
 +
margin: 0;
 +
background-color: #001e25;
 +
background-image: url(http://www.lysogeny.com/images/bacter1.JPG);
 +
background-attachment: fixed;
 +
background-position: 100px 200px;
 +
background-repeat: no-repeat;
 +
background-position: bottom center;
 +
h1.firstHeading
 +
{
 +
position:absolute;
 +
top:-100px;
 +
left:187px;
 +
text-decoration:none;
 +
color:#FFFFFF;
 +
font-size:0px;
 +
}
 +
h2
 +
{
 +
color:#808080;
 +
text-align:left;
 +
}
 +
p.right
 +
{
 +
background-color:#808080;
 +
float:left
 +
}
 +
p.photo
 +
{
 +
text-align:center;
 +
font-family:"Verdana";
 +
font-size:12px;
 +
}
 +
p.back
 +
{
 +
text-indent: 1em;
 +
font-family:"Verdana";
 +
font-size:15px;
 +
}
 +
p.padding
 +
{
 +
text-indent: 1em;
 +
font-family:"Verdana";
 +
font-size:15px;
 +
}
 +
div.exphoto
 +
{
 +
position:relative;
 +
z-index:6;
 +
width:160px;
 +
}
 +
 
 +
div.text
 +
{
 +
z-index:6;
 +
position:relative;
 +
left:200px;
 +
top:-200px;
 +
background:#ffffff;
 +
color:#000000;
 +
margin-left:0px;
 +
width:390px;
 +
padding:5px;
 +
margin:auto;
 +
}
 +
 
 +
 
 +
div.des
 +
{
 +
z-index:5;
 +
opacity:0.8;
 +
filter:alpha(opacity=80);
 +
position:absolute;
 +
top:268px;
 +
background:#000066;
 +
color:#FFFFFF;
 +
float:center;
 +
margin-left:-0px;
 +
width:492px;
 +
padding:5px;
 +
padding-top:0px;
 +
padding-bottom:0px;
 +
border:0px solid gray;
 +
}
 +
div.tag
 +
{
 +
z-index:8;
 +
position:relative;
 +
background:#FFFFFF;
 +
font: 16px Verdana;
 +
font-weight:bold;
 +
color: #808080;
 +
top:0px;
 +
left:73px;
 +
float:center;
 +
width:600px;
 +
margin-left:-30px;
 +
margin-top:33px;
 +
margin-bottom:0px;
 +
margin-right:10px;
 +
padding:25px;
 +
}
 +
 
 +
div.exmain
 +
{
 +
z-index:7;
 +
position:relative;
 +
background:#ffffff;
 +
top:0px;
 +
left:50px;
 +
float:center;
 +
margin-left:20px;
 +
margin-top:0px;
 +
margin-bottom:0px;
 +
margin-right:10px;
 +
width:580px;
 +
padding:20px;
 +
padding-top:0px;
 +
}
 +
div.main
 +
{
 +
z-index:5;
 +
position:relative;
 +
background:#c8c8c8; /* for non-css3 browsers */
 +
background-image: url('http://farm5.static.flickr.com/4136/4861952617_c1ba4255b9_d.jpg');
 +
background-repeat:repeat-y;
 +
background-position:120px 0px;
 +
position:absolute;
 +
top:280px;
 +
left:60px;
 +
float:center;
 +
margin-left:50px;
 +
margin-top:0px;
 +
margin-bottom:50px;
 +
width:580px;
 +
padding:20px;
 +
padding-top:10px;
 +
}
 +
div.ly
 +
{
 +
z-index:5;
 +
float:left;
 +
margin-left:0px;
 +
width:150px;
 +
padding:0px;
 +
border:0px solid gray;
 +
border-right:0px solid gray;
 +
border-bottom:0px solid gray;
 +
}
 +
div.ry
 +
{
 +
z-index:5;
 +
position:absolute;
 +
right:-20px;
 +
top:280px;
 +
float:right;
 +
margin-left:0px;
 +
width:175px;
 +
padding:0px;
 +
border:0px solid gray;
 +
border-right:0px solid gray;
 +
border-bottom:0px solid gray;
 +
}
 +
 
 +
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="http://www.lycifer.co.cc/java/s3Slider.js" type="text/javascript"></script>
<script src="http://www.lycifer.co.cc/java/s3Slider.js" type="text/javascript"></script>
<script src="http://www.lycifer.co.cc/java/jquery.corner.js" type="text/javascript"></script>
<script src="http://www.lycifer.co.cc/java/jquery.corner.js" type="text/javascript"></script>
 +
<script src="http://www.lycifer.co.cc/java/liquid-canvas.js" type="text/javascript"></script>
 +
<script src="http://www.lycifer.co.cc/java/liquid-canvas-plugins.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$(document).ready(function(){
 +
$(".exphoto").corner("32px")
 +
$(".navmenu-h").corner("32px")
 +
$(".exphoto").corner("80px tr")
$(".exmain").corner("32px bl")
$(".exmain").corner("32px bl")
$(".main").corner("80px tl")
$(".main").corner("80px tl")
$(".main").corner("32px bl")
$(".main").corner("32px bl")
$(".tag").corner("32px tl bl")
$(".tag").corner("32px tl bl")
-
 
$("#navmenu-h li,#navmenu-v li").hover(
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).addClass("iehover"); },
Line 120: Line 770:
<div class="exmain">
<div class="exmain">
<a name="Lukas Ly"></a>
<a name="Lukas Ly"></a>
 +
<div class="exphoto">
<img class="ph" border="0" src="http://farm5.static.flickr.com/4153/4831378947_decb878791_m_d.jpg"/>
<img class="ph" border="0" src="http://farm5.static.flickr.com/4153/4831378947_decb878791_m_d.jpg"/>
-
<p class="padding">
+
</div>
-
Lukas Ly
+
-
</p>
+
</div>
</div>
<div class="tag">
<div class="tag">
Line 130: Line 779:
<div class="exmain">
<div class="exmain">
<a name="Alasdair Morton"></a>
<a name="Alasdair Morton"></a>
 +
<div class="exphoto">
<img class="ph" border="0" src="http://farm5.static.flickr.com/4125/4831410945_e62524cdc6_d.jpg"/>
<img class="ph" border="0" src="http://farm5.static.flickr.com/4125/4831410945_e62524cdc6_d.jpg"/>
-
<p class="padding">
+
</div>
-
Alasdair Morton
+
<div class="text">
-
</p>
+
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
 +
</div>
</div>
</div>
<div class="tag">
<div class="tag">
Line 140: Line 791:
<div class="exmain">
<div class="exmain">
<a name="Patrick Olden"></a>
<a name="Patrick Olden"></a>
 +
<div class="exphoto">
<img class="ph" border="0" src="http://farm5.static.flickr.com/4144/4831283341_ac0caa4208_m_d.jpg"/>
<img class="ph" border="0" src="http://farm5.static.flickr.com/4144/4831283341_ac0caa4208_m_d.jpg"/>
-
<p class="padding">
+
</div>
-
Patrick Olden
+
</div>
-
</p>
+
<div class="tag">
 +
David Owen
</div>
</div>
<div class="exmain">
<div class="exmain">

Latest revision as of 14:31, 25 August 2010

Lukas Ly
Alasdair Morton
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
Patrick Olden
David Owen

David Owen

Fatemeh Salimi

Sarah Shapiro

James Taylor

Jonathan Ward

Retrieved from "http://2010.igem.org/Team:St_Andrews/demo"