Team:UC Chile

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
@charset "UTF-8";
-
<head>
+
/* =CALL LIBRARY */
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
@import url("reset-min.css"); /* ------- Reset all CSS Styles */
-
<style type="text/css">
+
-
/* These styles just pretty up the page a bit. */
+
-
html
+
-
{
+
-
overflow: -moz-scrollbars-vertical !important;
+
-
resize: none;
+
-
background-color: #f5f6f7;
+
-
}
+
-
#top-section {
+
/* =GENERAL - the general styles */
-
height: 0px;
+
body{
-
border-top: 1
+
font: 62.5%/2.2em Arial, Tahoma, Verdana,Helvetica, sans-serif;
-
border-left: none;
+
color: #4b4942;
-
border-right: none;
+
background: #404639 url(../images/bg_patterns.gif);
-
}
+
}
 +
a{text-decoration: none;color: #5599a7;}
 +
a:hover{color: #bb800f;}
 +
.hide,hr{display: none;}
 +
strong{font-weight: bold;}
 +
-
#siteSub {
+
/* =LAYOUT - the main layout styles */
-
display:none;
+
/* for the rounded top */
-
}
+
#containertop{
 +
position: absolute;
 +
width: 902px;
 +
margin: -10px auto 0 auto;
 +
height: 10px;
 +
font-size:0.1em;
 +
background:url(../images/container_top.png) left bottom no-repeat;
 +
}
 +
* html #containertop{behavior: url(stylesheets/iepngfix.htc);} /* to correct transparent png in IE */
 +
/* container */
 +
#container{
 +
width: 902px;
 +
margin: 44px auto 0 auto;
 +
background: #171A0F url(../images/bg_container.png);
 +
padding-bottom:10px;
 +
}
-
#search-controls {
+
/* =HEADER */
-
display:none;
+
/* Logo and Site Title */
-
}
+
h1{
 +
font-size: 2.4em;
 +
text-transform: uppercase;
 +
}
 +
h1 a,h1 a:hover{
 +
display: block;
 +
width: 300px;
 +
height: 30px;
 +
padding-top:10px;
 +
margin-left:18px;
 +
background: url(../images/logo.gif) 0 0 no-repeat;
 +
padding-left:52px;
 +
color: #7b8266;
 +
}
-
.firstHeading {
+
/* =TOP NAVIGATION and SEARCH */
-
display:none;
+
/* top navigation */
-
}
+
#navigation_wrapper{
 +
background: #363B28 url(../images/nav_bg.gif) 0 0 repeat-x;
 +
height: 37px;
 +
width: 861px;
 +
margin: 10px auto 20px auto;
 +
}
 +
#navigation{
 +
float: left;
 +
padding-left:7px;
 +
height: 37px;
 +
background: url(../images/navigation_left.gif) left top no-repeat;
 +
}
 +
#navigation li{
 +
float: left;
 +
}
 +
#navigation li a{
 +
padding: 7px 10px 0 10px;
 +
height: 30px;
 +
float: left;
 +
font-family: "Trebuchet MS";
 +
font-size: 1.45em;
 +
font-weight: bold;
 +
letter-spacing:-0.03em;
 +
color: #b1b3ab;
 +
}
 +
#navigation li a:hover{
 +
color: #82865b;
 +
background: #394030 url(../images/nav_hover_bg.gif) 0 0 repeat-x;
 +
}
 +
/* search */
 +
#search_wrapper{
 +
float: right;
 +
height: 30px;
 +
padding:7px 10px 0 0;
 +
background: url(../images/navigation_right.gif) right top no-repeat;
 +
}
 +
.search{
 +
background: #696D5F;
 +
border: 1px solid #212417;
 +
width: 160px;
 +
height: 18px;
 +
padding: 3px 2px 0 3px;
 +
color: #474A40;
 +
}
 +
/* =MAIN IMAGE */
 +
#main_image{
 +
width:860px;
 +
position: relative;
 +
margin: 0 auto;
 +
}
 +
/* frame: the small rounded image in the corner picture (top,right,bottom,left) */
 +
#frame_image_top,#frame_image_bottom{
 +
position: absolute;
 +
width: 860px;
 +
height: 7px;
 +
font-size:0.1em;
 +
top:0;left:0;
 +
background: url(../images/frame_image_top.png) top no-repeat;
 +
}
 +
#frame_image_bottom{
 +
bottom:0;top:auto;
 +
background: url(../images/frame_image_bottom.png) bottom no-repeat;
 +
}
 +
* html #frame_image_top,* html #frame_image_bottom{behavior: url(stylesheets/iepngfix.htc);} /* to correct transparent png in IE */
-
#search-controls {
+
/* =BANNER */
-
margin-top:0px;
+
#banner_wrapper{
-
}
+
width: 874px;
-
 
+
overflow: hidden;
-
#footer-box {
+
padding:30px 0 0 28px;
-
display:none;
+
}
-
}
+
.banner{
-
 
+
float: left;
-
body
+
width: 245px;
-
{
+
float: left;
-
background-color: #f5f6f7;
+
background: #353C2C url(../images/banner_bg.gif) left repeat-y;
-
}
+
margin-right:54px;
-
 
+
padding-bottom:6px;
-
body {
+
position: relative;
-
  font: 65%/1.2 Arial, Helvetica, sans-serif;
+
}
-
  background-color: #eee; }
+
.image_wrapper{text-align: center;}
-
#wrap {
+
.banner img{border: 3px solid #181B0F;}
-
  font-size: 0.7em;
+
.banner_last{margin-right:0;}
-
  width: 960px;
+
.banner h2{
-
  padding: 0px;
+
height: 38px;
-
  margin: 0 auto;
+
background: url(../images/banner_top.gif) left no-repeat;
-
  background-color: #fff;
+
font:1.9em "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
-
  position: relative; }
+
text-transform: uppercase;
-
 
+
color: #7c7c58;
-
/* These styles create the dropdown menus. */
+
padding: 15px 0 0 17px;
-
#navbar {
+
}
-
  margin: 1600;
+
/* for the rounded bottom */
-
  padding: 0;
+
.image_wrapper span{
-
  height: 1em; }
+
position: absolute;
-
#navbar li {
+
width: 245px;
-
  list-style: none;
+
height: 6px;
-
  float: left; }
+
font-size:.1em;
-
#navbar li a {
+
left:0;bottom:-1px;
-
  padding-left: 19px;
+
background: #353C2C url(../images/banner_bottom.gif) bottom no-repeat;
-
  padding-bottom: 3px;
+
}
-
  padding-right: 8px;
+
-
  padding-top: 3px;
+
/* =SERVICES */
-
  display: block;
+
#services{
-
  background-color: #5d9548;
+
width: 858px;
-
  color: #fff;
+
margin:26px auto 0 auto;
-
  text-decoration: none; }
+
position: relative;
-
#navbar li ul {
+
border: 2px solid #3B3F2D;
-
  display: none;
+
}
-
  width: 10em; /* Width to help Opera out */
+
#servicescontent{
-
  background-color: #80ff00;}
+
width: 858px;
-
#navbar li:hover ul, #navbar li.hover ul {
+
margin: 0 auto;
-
  display: block;
+
overflow: hidden;
-
  position: absolute;
+
background: #39442B url(../images/services_bg.jpg) bottom repeat-x;
-
  background-color: #5d9549;
+
padding: 30px 0 20px 0;
-
  margin: 0;
+
}
-
  padding: 0; }
+
/* sevices header */
-
#navbar li:hover li, #navbar li.hover li {
+
#services h2{
-
  float: none; }
+
background: #2d3622 url(../images/services_top_bg.jpg);
-
#navbar li:hover li a, #navbar li.hover li a {
+
height: 39px;
-
  background-color: #66b83d;
+
font-size:2.5em;
-
  border-bottom: 1px solid #fff;
+
color: #7C7C58;
-
  color: white; }
+
padding: 12px 0 0 40px;
-
#navbar li li a:hover {
+
border-bottom: 1px solid #2b2e1f;
-
  background-color: #8db3ff; }
+
}
-
</style>
+
/* top rounded image */
-
 
+
#services h2 span{
-
<script>
+
position: absolute;
-
// Javascript originally by Patrick Griffiths and Dan Webb.
+
display: block;
-
// http://htmldog.com/articles/suckerfish/dropdowns/
+
height: 8px;
-
sfHover = function() {
+
width: 862px;
-
  var sfEls = document.getElementById("navbar").getElementsByTagName("li");
+
left:0;top:0;
-
  for (var i=0; i<sfEls.length; i++) {
+
font-size:0.1em;
-
      sfEls[i].onmouseover=function() {
+
background: url(../images/services_top.jpg) left top no-repeat;
-
        this.className+=" hover";
+
margin: -2px;
-
      }
+
}
-
      sfEls[i].onmouseout=function() {
+
/* bottom rounded image */
-
        this.className=this.className.replace(new RegExp(" hover\\b"), "");
+
.bottom_rounded{
-
      }
+
position: absolute;
-
  }
+
display: block;
-
}
+
width: 862px;
-
if (window.attachEvent) window.attachEvent("onload", sfHover);
+
height: 7px;
-
</script>
+
font-size:0.1em;
-
 
+
right:0;bottom:0;
-
</head>
+
background: url(../images/services_bottom.jpg) no-repeat;
-
    <img src="http://bce-user-002.uniandes.edu.co/HeaderPre4.jpg" border="0" alt="iGem @ Colombia" width="960"></a>
+
margin: -2px;
-
<body>
+
}
-
  <div id="wrap">
+
/* big image on the right bottom */
-
 
+
.bottom_pic{
-
      <ul id="navbar">
+
z-index:2;
-
        <li><a href="https://2012.igem.org/Team:Colombia">Home</a>
+
position: absolute;
-
        </li>
+
padding-right: 28px;
-
        <li><a href="https://2012.igem.org/Team:Colombia/Team">The Team</a>
+
bottom:2px;right:0;
-
            <ul>
+
width: 287px;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Team#The_Team">The Team</a></li>
+
height: 224px;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Team#Undergrads">Undergrads</a></li>
+
margin-bottom:-2px;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Team#Grad_students_.28Also_known_as_the_Aging_ones.21.29">Grad Students</a></li>
+
background: url(../images/services_bg_pic.jpg) left top no-repeat;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Team#Advisors:">Advisors</a></li>
+
}
-
            </ul>
+
/* list of services */
-
        </li>
+
.serviceslist{
-
        <li><a href="https://2012.igem.org/Team:Colombia/Project">Project</a>
+
padding-left: 30px;
-
            <ul>
+
float: left;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Project/Basics">The Basics Project</a></li>
+
font-size:1.3em;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Project/Problem">The Problem</a></li>
+
line-height:1em;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Project/Experiments/Pseudomonas">Experiments: Pseudomonas</a></li>
+
}
-
              <li><a href="https://2012.igem.org/Team:Colombia/Project/Experiments/Ralstonia">Experiments: Ralstonia</a></li>
+
.serviceslist li a{
-
              <li><a href="https://2012.igem.org/Team:Colombia/Project/Experiments/Vibrio">Experiments: Vibrio</a></li>
+
display: block;
-
            </ul>       
+
padding: 10px;
-
        </li>
+
width: 197px;
-
        <li><a href="https://2012.igem.org/Team:Colombia/Parts">Parts</a>
+
font-family: "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
-
            <!--ul>
+
text-transform: uppercase;
-
              <li><a href="#">Via Email</a></li>
+
letter-spacing:-.03em;
-
              <li><a href="#">Stalk Us Elsewhere</a></li>
+
color: #7B8266;
-
            </ul-->       
+
background: #323C26 url(../images/list_dotted_border.gif) bottom repeat-x;
-
        </li>
+
}
-
        <li><a href="https://2012.igem.org/Team:Colombia/Modeling">Modeling</a>
+
.serviceslist li a:hover{
-
            <ul>
+
color: #7B8266;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Modeling/Diff">Diferential Equations</a></li>
+
background: #2C3421 url(../images/list_dotted_border.gif) bottom repeat-x;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Modeling/Paramterers">Parameters</a></li>
+
}
-
              <li><a href="https://2012.igem.org/Team:Colombia/Modeling/Stochastic">Stochastic Model</a></li>
+
-
            </ul>       
+
/* =FOOTER */
-
        </li>
+
#footer_wrapper{
-
        <li><a href="https://2012.igem.org/Team:Colombia/Notebook">Results</a>
+
width: 871px;
-
        </li>
+
padding-left:31px;
-
        <li><a href="https://2012.igem.org/Team:Colombia/Human">Human Practices</a>
+
padding-bottom:25px;
-
          <ul>
+
margin: 0 auto;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Human/Schools">Schools</a></li>
+
text-transform:uppercase;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Human/Social">Social</a></li>
+
font-size: 1.2em;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Human/Talks">Talks</a></li>
+
background: url(../images/footer_left.png) 0 0 no-repeat;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Human/IGEMLA">iGEM Latinamerica</a></li>
+
}
-
            </ul>       
+
#footer{
-
        </li>
+
position: relative;
-
            <li><a href="https://2012.igem.org/Team:Colombia/Notebook">Notebook</a>
+
width: 840px;
-
            <ul>
+
height: 67px;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Notebook/Journal">Journal</a></li>
+
background: #313B24 url(../images/footer_bg.png) 0 bottom repeat-x;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Notebook/Meetings">Meetings</a></li>
+
}
-
              <li><a href="https://2012.igem.org/Team:Colombia/Notebook/Classes">Classes</a></li>
+
#footer .logo{
-
              <li><a href="https://2012.igem.org/Team:Colombia/Notebook/Protocols">Protocols</a></li>
+
padding: 34px 0 0 30px;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Notebook/Howto">How To: Parts</a></li>
+
width: 300px;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Notebook/Human">Human Practices</a></li>
+
float: left;
-
            </ul>       
+
background: url(../images/logo_small.gif) left bottom no-repeat;
-
        </li>
+
}
-
            <li><a href="https://2012.igem.org/Team:Colombia/Safety">Safety</a>
+
#footer .logo span{
-
            <ul>
+
position: absolute;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Safety#Safety_Considerations_.22Hazardous_reagents_and_Biohazards.22">Hazard</a></li>
+
display: block;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Safety#Safety_Considerations_.22Biological_Parts_.26_Devices.22">Biological Parts and Devices</a></li>
+
right:-31px;top:0;
-
              <li><a href="https://2012.igem.org/Team:Colombia/Safety#Biosafety_Provisions">Biosafety Provisions</a></li>
+
width: 31px;
-
            </ul>       
+
height: 67px;
-
        </li>
+
background: url(../images/footer_right.png) right bottom no-repeat;
-
            <li><a href="https://2012.igem.org/Team:Colombia/Attributions">Attributes</a>
+
}
-
            <!--ul>
+
* html #footer .logo span, * html #footer_wrapper{behavior: url(stylesheets/iepngfix.htc);}
-
              <li><a href="#">Bench Press</a></li>
+
#footer ul{
-
              <li><a href="#">Military Press</a></li>
+
padding-top: 34px;
-
              <li><a href="#">Press n Seal</a></li>
+
padding-right: 5px;
-
            </ul-->       
+
float: right;
-
        </li>
+
}
-
            <li><a>The University and the Jamboree</a>
+
#footer ul li{
-
            <ul>
+
float: left;
-
              <li><a href="http://www.uniandes.edu.co">UniAndes</a></li>
+
padding-left:10px;
-
              <li><a href="https://2012.igem.org/Regions/Latin_America/Jamboree">Latin American Jamboree 2012</a></li>
+
}
-
            </ul>       
+
#footer a{
-
        </li>
+
color: #7B8266;
-
  <li><a href="https://2012.igem.org/">iGem Homepage</a>
+
}
-
        </li>
+
#footer li a:hover{
-
      </ul>
+
color: #AFBB4F;
-
  </div>
+
}
-
 
+
-
</body>
+
-
</html>
+

Revision as of 05:47, 16 July 2012

@charset "UTF-8"; /* =CALL LIBRARY */ @import url("reset-min.css"); /* ------- Reset all CSS Styles */

/* =GENERAL - the general styles */ body{ font: 62.5%/2.2em Arial, Tahoma, Verdana,Helvetica, sans-serif; color: #4b4942; background: #404639 url(../images/bg_patterns.gif); } a{text-decoration: none;color: #5599a7;} a:hover{color: #bb800f;} .hide,hr{display: none;} strong{font-weight: bold;}


/* =LAYOUT - the main layout styles */ /* for the rounded top */ #containertop{ position: absolute; width: 902px; margin: -10px auto 0 auto; height: 10px; font-size:0.1em; background:url(../images/container_top.png) left bottom no-repeat; } * html #containertop{behavior: url(stylesheets/iepngfix.htc);} /* to correct transparent png in IE */ /* container */ #container{ width: 902px; margin: 44px auto 0 auto; background: #171A0F url(../images/bg_container.png); padding-bottom:10px; }

/* =HEADER */ /* Logo and Site Title */ h1{ font-size: 2.4em; text-transform: uppercase; } h1 a,h1 a:hover{ display: block; width: 300px; height: 30px; padding-top:10px; margin-left:18px; background: url(../images/logo.gif) 0 0 no-repeat; padding-left:52px; color: #7b8266; }

/* =TOP NAVIGATION and SEARCH */ /* top navigation */ #navigation_wrapper{ background: #363B28 url(../images/nav_bg.gif) 0 0 repeat-x; height: 37px; width: 861px; margin: 10px auto 20px auto; } #navigation{ float: left; padding-left:7px; height: 37px; background: url(../images/navigation_left.gif) left top no-repeat; } #navigation li{ float: left; } #navigation li a{ padding: 7px 10px 0 10px; height: 30px; float: left; font-family: "Trebuchet MS"; font-size: 1.45em; font-weight: bold; letter-spacing:-0.03em; color: #b1b3ab; } #navigation li a:hover{ color: #82865b; background: #394030 url(../images/nav_hover_bg.gif) 0 0 repeat-x; } /* search */ #search_wrapper{ float: right; height: 30px; padding:7px 10px 0 0; background: url(../images/navigation_right.gif) right top no-repeat; } .search{ background: #696D5F; border: 1px solid #212417; width: 160px; height: 18px; padding: 3px 2px 0 3px; color: #474A40; } /* =MAIN IMAGE */ #main_image{ width:860px; position: relative; margin: 0 auto; } /* frame: the small rounded image in the corner picture (top,right,bottom,left) */ #frame_image_top,#frame_image_bottom{ position: absolute; width: 860px; height: 7px; font-size:0.1em; top:0;left:0; background: url(../images/frame_image_top.png) top no-repeat; } #frame_image_bottom{ bottom:0;top:auto; background: url(../images/frame_image_bottom.png) bottom no-repeat; } * html #frame_image_top,* html #frame_image_bottom{behavior: url(stylesheets/iepngfix.htc);} /* to correct transparent png in IE */

/* =BANNER */ #banner_wrapper{ width: 874px; overflow: hidden; padding:30px 0 0 28px; } .banner{ float: left; width: 245px; float: left; background: #353C2C url(../images/banner_bg.gif) left repeat-y; margin-right:54px; padding-bottom:6px; position: relative; } .image_wrapper{text-align: center;} .banner img{border: 3px solid #181B0F;} .banner_last{margin-right:0;} .banner h2{ height: 38px; background: url(../images/banner_top.gif) left no-repeat; font:1.9em "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #7c7c58; padding: 15px 0 0 17px; } /* for the rounded bottom */ .image_wrapper span{ position: absolute; width: 245px; height: 6px; font-size:.1em; left:0;bottom:-1px; background: #353C2C url(../images/banner_bottom.gif) bottom no-repeat; }

/* =SERVICES */ #services{ width: 858px; margin:26px auto 0 auto; position: relative; border: 2px solid #3B3F2D; } #servicescontent{ width: 858px; margin: 0 auto; overflow: hidden; background: #39442B url(../images/services_bg.jpg) bottom repeat-x; padding: 30px 0 20px 0; } /* sevices header */ #services h2{ background: #2d3622 url(../images/services_top_bg.jpg); height: 39px; font-size:2.5em; color: #7C7C58; padding: 12px 0 0 40px; border-bottom: 1px solid #2b2e1f; } /* top rounded image */ #services h2 span{ position: absolute; display: block; height: 8px; width: 862px; left:0;top:0; font-size:0.1em; background: url(../images/services_top.jpg) left top no-repeat; margin: -2px; } /* bottom rounded image */ .bottom_rounded{ position: absolute; display: block; width: 862px; height: 7px; font-size:0.1em; right:0;bottom:0; background: url(../images/services_bottom.jpg) no-repeat; margin: -2px; } /* big image on the right bottom */ .bottom_pic{ z-index:2; position: absolute; padding-right: 28px; bottom:2px;right:0; width: 287px; height: 224px; margin-bottom:-2px; background: url(../images/services_bg_pic.jpg) left top no-repeat; } /* list of services */ .serviceslist{ padding-left: 30px; float: left; font-size:1.3em; line-height:1em; } .serviceslist li a{ display: block; padding: 10px; width: 197px; font-family: "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing:-.03em; color: #7B8266; background: #323C26 url(../images/list_dotted_border.gif) bottom repeat-x; } .serviceslist li a:hover{ color: #7B8266; background: #2C3421 url(../images/list_dotted_border.gif) bottom repeat-x; }

/* =FOOTER */ #footer_wrapper{ width: 871px; padding-left:31px; padding-bottom:25px; margin: 0 auto; text-transform:uppercase; font-size: 1.2em; background: url(../images/footer_left.png) 0 0 no-repeat; } #footer{ position: relative; width: 840px; height: 67px; background: #313B24 url(../images/footer_bg.png) 0 bottom repeat-x; } #footer .logo{ padding: 34px 0 0 30px; width: 300px; float: left; background: url(../images/logo_small.gif) left bottom no-repeat; } #footer .logo span{ position: absolute; display: block; right:-31px;top:0; width: 31px; height: 67px; background: url(../images/footer_right.png) right bottom no-repeat; } * html #footer .logo span, * html #footer_wrapper{behavior: url(stylesheets/iepngfix.htc);} #footer ul{ padding-top: 34px; padding-right: 5px; float: right; } #footer ul li{ float: left; padding-left:10px; } #footer a{ color: #7B8266; } #footer li a:hover{ color: #AFBB4F; }

Retrieved from "http://2012.igem.org/Team:UC_Chile"