Team:UNAM-Genomics Mexico/Templates/Team

From 2011.igem.org

(Difference between revisions)
(v 1.0.0)
(Wrote fake content. Changed footer and header font-size. Used blue colors)
 
(18 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
 +
 
 +
<!--
 +
@VERSION 1.2.0
 +
@NAME    /Templates/Team
 +
@DESC    This is a wiki template designed for the welcoming page.
 +
-->
<head>
<head>
-
<style type="text/css">
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
/*
+
<title>UNAM-Genomics_Mexico</title>
-
NAME    team_template.css
+
<script type="text/javascript">
-
VERSION  1.0.0
+
-
AUTHOR  Eduardo Vladimir Muñoz Hernández
+
-
DESC    The file contains the css data for the UNAM-Genomics_Mexico Team wiki pages
+
-
SEE      menu_template.css which contains the layout instructions for the menu.
+
-
*/
+
-
body {
+
  var _gaq = _gaq || [];
-
font-family:Geneva, Tahoma, sans-serif;
+
  _gaq.push(['_setAccount', 'UA-19624614-2']);
-
margin: 0px;
+
  _gaq.push(['_trackPageview']);
-
padding: 0px;
+
 
-
background-image:url(https://static.igem.org/mediawiki/2011/2/22/Light-bubbles1.jpg);
+
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    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;
}
}
-
#header{
+
</script>
-
height:220px;
+
<style>
-
width:100%;
+
 
-
font-family:"Arial Black", Gadget, sans-serif;
+
dummy.rule {
-
}
+
/*Nothing here*/
-
#header1{
+
-
height:220px;
+
-
width:100%;
+
-
bottom: auto;
+
-
font-family:"Arial Black", Gadget, sans-serif;
+
}
}
-
p.title{
+
body{
-
color:#CC4455;
+
background-color: black;
-
font-size:150%;
+
/*background-image: url("https://static.igem.org/mediawiki/2011/9/98/Black_cardboard_tiled_UGM.png");*/
 +
margin: 0;
 +
padding: 0;
 +
text-align: center;
 +
font-size:medium;
 +
font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC",
 +
"Segoe Print", "Comic Sans MS", Verdana, sans-serif;
 +
}
 +
div#globalWrapper{
 +
background-color: transparent;
 +
font-size: 100%;
 +
line-height: 1em;
 +
font-size:100%;
 +
font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC",
 +
"Segoe Print", "Comic Sans MS", Verdana, sans-serif;
 +
/*
 +
Fonts I recomend the most:
 +
"Maiandra GD", Garamond,
 +
Fonts that resemble handwriting but are uncomfortable to read.
 +
These letters are too decorated:
 +
"Viner Hand ITC","Bradley Hand ITC","Lucida Handwriting","Tempus Sans ITC",
 +
These letter is too small:
 +
Gabriola,
 +
These letter is too narrow:
 +
"Juice ITC",
 +
*/
}
}
-
#container {
+
div#content{
-
margin: 0px auto;
+
position: relative;
 +
width: 1000px;
 +
height: 650px;
 +
margin: 0 auto;
 +
padding: 0px;
 +
border: none;
 +
z-index: 0;
 +
background-color: transparent;
 +
color: #000000;
text-align:justify;
text-align:justify;
-
width: 100%;
 
-
background-image:url(https://static.igem.org/mediawiki/2011/7/7e/Paper_100_up.jpg);
 
-
color:#454545;
 
-
font-size: 110%;
 
}
}
-
 
+
div#bodyContent{
-
div.row{
+
position: relative;
-
vertical-align:top;
+
padding: 0px;
 +
width: 1000px;
 +
height: 650px;
 +
margin: 0px;
 +
border: none;
 +
z-index: 0;
 +
background-color: transparent;
 +
color: #000000;
 +
text-align:justify;
}
}
-
div.summary_text{
+
div#content h1.firstHeading{
-
padding: 30px 30px 30px 30px;
+
display: none;
-
border:none;
+
-
font-size:115%;
+
}
}
-
div.descriptive_text{
+
div#bodyContent p{
-
/*We must observe div.left_image to deffine the appropiate top-margin value*/
+
margin: 0px 0px 0px 0px;
-
margin: 70px 0px 0px 0px;
+
-
padding: 30px 30px 30px 30px;
+
-
border:none;
+
-
font-size:110%;
+
}
}
-
div.left_image{
+
div#contentSub{
-
float:left;
+
margin: 0;
-
border:none;
+
-
padding: 30px 30px 30px 30px;
+
}
}
-
div.right_image{
+
div#catlinks{
-
float:right;
+
display: none;
-
border:none;
+
-
padding: 30px 30px 30px 30px;
+
}
}
-
h1.team_section{
+
 
-
margin: 1px 1px 1px 1px;
+
/***********************************
-
border:none;
+
    iGEM header instructions
 +
***********************************/
 +
 
 +
div#top-section{
 +
position: relative;
 +
width: 1000px;
 +
height: 21px;
 +
margin: 0 auto;
 +
border: none;
 +
z-index: 0;
 +
background-color: transparent;
 +
color: #FF0000;
 +
}
 +
div#p-logo{
 +
display: none;
 +
width: 1000px;
 +
z-index: 1;
 +
}
 +
div#menubar{
 +
position: absolute;
 +
width: 400px;
 +
height: 21px;
 +
z-index: 5;
 +
top: 0px;
 +
margin-top: 0px;
 +
font-size: 85%;
 +
font-family: sans-serif;
 +
}
 +
#menubar ul{
 +
margin: 0px 10px 0px 10px;
 +
padding: 0px 0px 0px 0px;
 +
}
 +
#menubar li{
 +
display: inline;
 +
}
 +
div.left-menu{
 +
text-align: left;
 +
}
 +
div.right-menu{
 +
text-align: right;
 +
right: 0px;
 +
}
 +
div.right-menu li a {
 +
background-color:transparent;
 +
}
 +
div#search-controls{
 +
display: none;
 +
}
 +
#menubar a{
text-decoration:none;
text-decoration:none;
-
color:#00C;
+
color: black;
-
font-size:110%;
+
}
 +
#menubar a:visited {
 +
color: grey;
 +
}
 +
#menubar a:hover {
 +
color: silver;
}
}
-
a.HP{
+
/*******************************
-
color:#B0E;
+
    iGEM Footer Instructions
-
text-decoration:none;
+
*******************************/
 +
div#footer-box {
 +
margin: 0 auto;
 +
width: 990px;
 +
padding: 5px;
 +
background-color: transparent;
 +
background-image: none;
 +
border: none;
 +
font-size: 85%;
 +
font-family: sans-serif;
}
}
-
a.project{
+
ul#f-list{
-
color:#06C;
+
margin: 0 auto;
-
text-decoration:none;
+
}
}
-
a.parts{
+
div#footer-box div#footer ul#f-list li a {
-
color:#00A449;
+
color: black;
-
text-decoration:none;
+
text-decoration: none;
}
}
-
a.model{
+
div#footer-box div#footer ul#f-list li a:visited {
-
color:#C00505;
+
color: grey;
-
text-decoration:none;
+
}
}
-
a.safety{
+
div#footer-box div#footer ul#f-list li a:hover {
-
color:#FC0;
+
color: silver;  
-
text-decoration:none;
+
}
}
-
a.team{
+
#f-poweredbyico{
-
color:#00C;
+
display: none;
-
text-decoration:none;
+
}
}
-
a.notebook{
+
#f-copyrightico{
-
color:#93F;
+
display: none;
-
text-decoration:none;
+
}
}
-
a.attributions{
+
 
-
color:#F90;
+
 
-
text-decoration:none;
+
/*******************************
 +
  Screen Control Properties
 +
*******************************/
 +
/*Bar Properties*/
 +
div.bar{
 +
margin: 0px;
 +
padding: 5px;
 +
width: 990px;
 +
height: 50px;
}
}
-
a.garden{
+
/*Sepparating space: 20px;*/
-
color:#40D840;
+
/*Box Properties*/
-
text-decoration:none;
+
div.box{
 +
margin: 0px;
 +
padding: 5px;
 +
width: 140px;
 +
height: 140px;
}
}
-
a.project:hover, a.model:hover, a.garden:hover, a.team:hover, a.HP:hover,
+
/*Screen Properties*/
-
a.safety:hover, a.parts:hover, a.attributions:hover, a.notebook:hover{
+
div.screen{
-
text-decoration:underline;
+
margin: 0px;
 +
padding: 5px;
 +
width: 650px;
 +
height: 480px;
 +
position: absolute;
 +
top: 80px;
 +
left: 170px;
 +
z-index: 1;
}
}
-
/*The following class needs a square image as an input*/
+
div#psi {
-
img.sub_project{
+
position: absolute;
-
height:270px;
+
top: 0px;
-
width:270px;
+
left: 0px;
-
border:none;
+
background-color: #1d7cbc;
}
}
-
img.sponsor_img{
+
div#omega {
-
height:100px;
+
position: absolute;
-
width:100px;
+
bottom: 0px;  
-
border:none;
+
left: 0px;
 +
background-color: #1e4878;
 +
}
 +
div#alpha{
 +
position: absolute;
 +
top: 80px;
 +
left: 0px;
 +
background-color: #94dafb;
 +
}
 +
div#beta{
 +
position: absolute;
 +
top: 250px;
 +
left: 0px;
 +
background-color: #389ad9;
 +
}
 +
div#gamma{
 +
position: absolute;
 +
top: 420px;
 +
left: 0px;
 +
background-color: #0172c0;
 +
}
 +
div#delta{
 +
position: absolute;
 +
top: 80px;
 +
right: 0px;
 +
background-color: #003c77;
 +
}
 +
div#epsilon{
 +
position: absolute;
 +
top: 250px;
 +
right: 0px;
 +
background-color: #0c2857;
 +
}
 +
div#zeta{
 +
position: absolute;
 +
top: 420px;
 +
right: 0px;
 +
background-color: #2e5894;
}
}
-
</style>
+
div#psiScreen {
 +
background-color: #1d7cbc;
 +
z-index: 2;
 +
}
 +
div#alphaScreen {
 +
background-color: #94dafb;
 +
}
 +
div#betaScreen {
 +
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>
</head>
</head>
 +
<body>
 +
 +
<div id="psi" class="bar" onMouseOver="HeapScreen(this.id); return(true);">
 +
iGEM links and other stuff
 +
</div>
 +
<div id="psiScreen" class="screen">
 +
<h2>UNAM-Genomics_Mexico presents:</h2>
 +
<h1>Hydrobium etli<h1>
 +
<h4>for iGEM competition 2011</h4>
 +
</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>
</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

Retrieved from "http://2011.igem.org/Team:UNAM-Genomics_Mexico/Templates/Team"