Team:UNAM-Genomics Mexico/Templates/Team

From 2011.igem.org

(Difference between revisions)
(adjusting cells...)
(Wrote fake content. Changed footer and header font-size. Used blue colors)
 
(10 intermediate revisions not shown)
Line 2: Line 2:
<!--
<!--
-
@VERSION 1.0.6
+
@VERSION 1.2.0
@NAME    /Templates/Team
@NAME    /Templates/Team
@DESC    This is a wiki template designed for the welcoming page.
@DESC    This is a wiki template designed for the welcoming page.
Line 20: Line 20:
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
   })();
 +
 +
</script>
 +
<script type="text/javascript">
 +
 +
var onTopId = "psi";
 +
function HeapScreen(currId){
 +
var screenOnTop = document.getElementById( onTopId + "Screen" );
 +
screenOnTop.style.zIndex = "1";
 +
screenOnTop = document.getElementById( currId + "Screen" );
 +
screenOnTop.style.zIndex = "2";
 +
onTopId = currId;
 +
}
</script>
</script>
Line 30: Line 42:
body{
body{
background-color: black;
background-color: black;
-
background-image: url("https://static.igem.org/mediawiki/2011/9/98/Black_cardboard_tiled_UGM.png");
+
/*background-image: url("https://static.igem.org/mediawiki/2011/9/98/Black_cardboard_tiled_UGM.png");*/
margin: 0;
margin: 0;
padding: 0;
padding: 0;
Line 63: Line 75:
height: 650px;
height: 650px;
margin: 0 auto;
margin: 0 auto;
-
padding: 0px 20px 0px 20px;
+
padding: 0px;
border: none;
border: none;
z-index: 0;
z-index: 0;
Line 109: Line 121:
background-color: transparent;
background-color: transparent;
color: #FF0000;
color: #FF0000;
-
font-size:85%;
 
-
font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC",
 
-
"Segoe Print", "Comic Sans MS", Verdana, sans-serif;
 
}
}
div#p-logo{
div#p-logo{
Line 123: Line 132:
height: 21px;
height: 21px;
z-index: 5;
z-index: 5;
-
top:22px;
+
top: 0px;
-
margin-top: -20px;
+
margin-top: 0px;
 +
font-size: 85%;
 +
font-family: sans-serif;
}
}
#menubar ul{
#menubar ul{
Line 139: Line 150:
text-align: right;
text-align: right;
right: 0px;
right: 0px;
 +
}
 +
div.right-menu li a {
 +
background-color:transparent;
}
}
div#search-controls{
div#search-controls{
Line 145: Line 159:
#menubar a{
#menubar a{
text-decoration:none;
text-decoration:none;
-
color:#C0C0C0;
+
color: black;
}
}
#menubar a:visited {
#menubar a:visited {
-
color:#9A8A5E;
+
color: grey;
 +
}
 +
#menubar a:hover {
 +
color: silver;
}
}
-
 
/*******************************
/*******************************
Line 162: Line 178:
background-image: none;
background-image: none;
border: none;
border: none;
 +
font-size: 85%;
 +
font-family: sans-serif;
 +
}
 +
ul#f-list{
 +
margin: 0 auto;
}
}
div#footer-box div#footer ul#f-list li a {
div#footer-box div#footer ul#f-list li a {
-
color: white;
+
color: black;
 +
text-decoration: none;
 +
}
 +
div#footer-box div#footer ul#f-list li a:visited {
 +
color: grey;
}
}
div#footer-box div#footer ul#f-list li a:hover {
div#footer-box div#footer ul#f-list li a:hover {
-
color: black;  
+
color: silver;  
}
}
#f-poweredbyico{
#f-poweredbyico{
Line 178: Line 203:
/*******************************
/*******************************
-
   Window Control Properties
+
   Screen Control Properties
*******************************/
*******************************/
/*Bar Properties*/
/*Bar Properties*/
-
div.window_bar{
+
div.bar{
margin: 0px;
margin: 0px;
padding: 5px;
padding: 5px;
width: 990px;
width: 990px;
height: 50px;
height: 50px;
-
background-color: #0033AA;
 
}
}
-
div#topBar{
+
/*Sepparating space: 20px;*/
 +
/*Box Properties*/
 +
div.box{
 +
margin: 0px;
 +
padding: 5px;
 +
width: 140px;
 +
height: 140px;
 +
}
 +
/*Screen Properties*/
 +
div.screen{
 +
margin: 0px;
 +
padding: 5px;
 +
width: 650px;
 +
height: 480px;
 +
position: absolute;
 +
top: 80px;
 +
left: 170px;
 +
z-index: 1;
 +
}
 +
 
 +
div#psi {
position: absolute;
position: absolute;
top: 0px;
top: 0px;
left: 0px;
left: 0px;
 +
background-color: #1d7cbc;
}
}
-
div#bottomBar{
+
div#omega {
position: absolute;
position: absolute;
bottom: 0px;  
bottom: 0px;  
left: 0px;
left: 0px;
 +
background-color: #1e4878;
}
}
-
/*Sepparating space: 20px;*/
+
div#alpha{
-
/*Box Properties*/
+
-
div.window_box{
+
-
margin: 0px;
+
-
padding: 5px;
+
-
width: 140px;
+
-
height: 140px;
+
-
background-color: #3300AA;
+
-
}
+
-
div#leftTopBox{
+
position: absolute;
position: absolute;
top: 80px;
top: 80px;
left: 0px;
left: 0px;
 +
background-color: #94dafb;
}
}
-
div#leftMiddleBox{
+
div#beta{
position: absolute;
position: absolute;
top: 250px;
top: 250px;
left: 0px;
left: 0px;
 +
background-color: #389ad9;
}
}
-
div#leftBottomBox{
+
div#gamma{
position: absolute;
position: absolute;
top: 420px;
top: 420px;
left: 0px;
left: 0px;
 +
background-color: #0172c0;
}
}
-
div#rightTopBox{
+
div#delta{
position: absolute;
position: absolute;
top: 80px;
top: 80px;
right: 0px;
right: 0px;
 +
background-color: #003c77;
}
}
-
div#rightMiddleBox{
+
div#epsilon{
position: absolute;
position: absolute;
top: 250px;
top: 250px;
right: 0px;
right: 0px;
 +
background-color: #0c2857;
}
}
-
div#rightBottomBox{
+
div#zeta{
position: absolute;
position: absolute;
top: 420px;
top: 420px;
right: 0px;
right: 0px;
 +
background-color: #2e5894;
}
}
-
div#window{
+
div#psiScreen {
-
margin: 0px;
+
background-color: #1d7cbc;
-
padding: 5px;
+
z-index: 2;
-
width: 650px;
+
}
-
height: 480px;
+
div#alphaScreen {
-
background-color: #3300AA;
+
background-color: #94dafb;
-
position: absolute;
+
}
-
top: 80px;
+
div#betaScreen {
-
left: 170px;
+
background-color: #389ad9;
 +
}
 +
div#gammaScreen {
 +
background-color: #0172c0;
 +
}
 +
div#deltaScreen {
 +
background-color: #003c77;
 +
}
 +
div#epsilonScreen {
 +
background-color: #0c2857;
 +
}
 +
div#zetaScreen {
 +
background-color: #2e5894;
 +
}
 +
div#omegaScreen {
 +
background-color: #1e4878;
 +
}
 +
 
 +
/****************************
 +
  Text markup instructions
 +
****************************/
 +
span.sp_name{
 +
/*use this span class to format species names*/
 +
text-decoration: none;
 +
font-style: italic;
 +
}
 +
span.gene_name{
 +
/*use this span class to format gene names*/
 +
text-decoration: none;
 +
font-style: italic;
 +
}
 +
span.lat_phrase{
 +
/*use this span class to format latin phrases*/
 +
text-decoration: none;
 +
font-style: italic;
}
}
</style>
</style>
</head>
</head>
-
</html>
+
<body>
-
<div id="topBar" class="window_bar">{{{upInfo}}}</div>
+
<div id="psi" class="bar" onMouseOver="HeapScreen(this.id); return(true);">
-
<div id="leftTopBox" class="window_box">{{{opt1}}}</div>
+
iGEM links and other stuff
-
<div id="leftMiddleBox" class="window_box">{{{opt2}}}</div>
+
</div>
-
<div id="leftBottomBox" class="window_box">{{{opt3}}}</div>
+
<div id="psiScreen" class="screen">
-
<div id="window">{{{window_content}}}</div>
+
<h2>UNAM-Genomics_Mexico presents:</h2>
-
<div id="rightTopBox" class="window_box">{{{opt4}}}</div>
+
<h1>Hydrobium etli<h1>
-
<div id="rightMiddleBox" class="window_box">{{{opt5}}}</div>
+
<h4>for iGEM competition 2011</h4>
-
<div id="rightBottomBox" class="window_box">{{{opt6}}}</div>
+
</div>
-
<div id="bottomBar" class="window_bar">{{{downInfo}}}</div>
+
 
 +
<div id="alpha" class="box" onMouseOver="HeapScreen(this.id); return(true);">
 +
Project
 +
</div>
 +
<div id="alphaScreen" class="screen">
 +
<p>Hydrogen. The doubtful begining, the unreachable end. Our paths, both the one drawn in the
 +
maps of our heads and the one awaiting our fall in reality, will be written here, with blood
 +
and sweat, for other adventurers wishing to reach the border of what our knowledge lights. </p>
 +
</div>
 +
 
 +
<div id="beta" class="box" onMouseOver="HeapScreen(this.id); return(true);">
 +
The <span class="sp_name">Rhizobium etli</span> Work Kit
 +
</div>
 +
<div id="betaScreen" class="screen">
 +
<p>Arrows, bow, rope, shield, sword. The warrior relies heavily on his tools. This is why
 +
trustworthy tools are not necessary but vital along the travel. The blacksmith is a hero
 +
too. Here is his story.</p>
 +
</div>
 +
 
 +
<div id="gamma" class="box" onMouseOver="HeapScreen(this.id); return(true);">Model</div>
 +
<div id="gammaScreen" class="screen">
 +
<p>Wizard wisdom lights all heroes paths. The seers ability to overcome trouble beffore it
 +
presents itself saves resources and lives. Being a step ahead can make the difference.</p>
 +
<p>There are many kinds of wizards. Most of them lack the beard, the hat and the magic wand.
 +
But you must not be deluded. They can be just as powerful. They are vital for any heroic
 +
campaign.</p>
 +
<p>Yes, wizards don't know it all. But who does?</p>
 +
</div>
 +
 
 +
<div id="delta" class="box" onMouseOver="HeapScreen(this.id); return(true);">Safety and Ethics</div>
 +
<div id="deltaScreen" class="screen">
 +
<p>If while saving the princess you destroy the kingdom, you're no hero.</p>
 +
</div>
 +
 
 +
<div id="epsilon" class="box" onMouseOver="HeapScreen(this.id); return(true);">Human Practices</div>
 +
<div id="epsilonScreen" class="screen">
 +
<p>Little heroes save their princess. Big heroes save towns, cities or nations. Great heroes
 +
save the people.</p>
 +
</div>
 +
 
 +
<div id="zeta" class="box" onMouseOver="HeapScreen(this.id); return(true);">Our</div>
 +
<div id="zetaScreen" class="screen">
 +
<p>This is how we changed along the path:</p>
 +
<ul>
 +
<li>Our logbook (or the team's tale)</li>
 +
<li>Our tools, and how they grew old with us</li>
 +
<li>Our memories, imprinted in minds and bytes</li>
 +
<li>Ourselves (as childs, teens, men and women)</li>
 +
</ul>
 +
</div>
 +
 
 +
<div id="omega" class="bar" onMouseOver="HeapScreen(this.id); return(true);">Sponsors</div>
 +
<div id="omegaScreen" class="screen">
 +
<p>Thank you Puss in Boots, thank you Tinker Bell, thank you Godmother</p>
 +
</div>
 +
 
 +
</body>
 +
</html>

Latest revision as of 05:30, 23 July 2011

UNAM-Genomics_Mexico

iGEM links and other stuff

UNAM-Genomics_Mexico presents:

Hydrobium etli

for iGEM competition 2011

Project

Hydrogen. The doubtful begining, the unreachable end. Our paths, both the one drawn in the maps of our heads and the one awaiting our fall in reality, will be written here, with blood and sweat, for other adventurers wishing to reach the border of what our knowledge lights.

The Rhizobium etli Work Kit

Arrows, bow, rope, shield, sword. The warrior relies heavily on his tools. This is why trustworthy tools are not necessary but vital along the travel. The blacksmith is a hero too. Here is his story.

Model

Wizard wisdom lights all heroes paths. The seers ability to overcome trouble beffore it presents itself saves resources and lives. Being a step ahead can make the difference.

There are many kinds of wizards. Most of them lack the beard, the hat and the magic wand. But you must not be deluded. They can be just as powerful. They are vital for any heroic campaign.

Yes, wizards don't know it all. But who does?

Safety and Ethics

If while saving the princess you destroy the kingdom, you're no hero.

Human Practices

Little heroes save their princess. Big heroes save towns, cities or nations. Great heroes save the people.

Our

This is how we changed along the path:

  • Our logbook (or the team's tale)
  • Our tools, and how they grew old with us
  • Our memories, imprinted in minds and bytes
  • Ourselves (as childs, teens, men and women)
Sponsors

Thank you Puss in Boots, thank you Tinker Bell, thank you Godmother