Team:Colorado State

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{| style="color:#000000;background-color:#00FFFF;" cellpadding="3" cellspacing="1" border="2" bordercolor="#800000" width="62%" align="center"
+
body {
-
!align="center"|[[Team:Colorado_State|Home]]
+
  margin: 0;
-
!align="center"|[[Team:Colorado_State/Team|Team]]
+
  text-align: center;
-
!align="center"|[https://igem.org/Team.cgi?year=2012&team_name=Colorado_State Official Team Profile]
+
  font: 0.62em verdana, arial, sans-serif; 
-
!align="center"|[[Team:Colorado_State/Project|Project]]
+
  line-height: 170%;
-
!align="center"|[[Team:Colorado_State/Parts|Parts Submitted to the Registry]]
+
  color: #EEE;
-
!align="center"|[[Team:Colorado_State/Modeling|Modeling]]
+
  background: #585858 url(../images/bg_body.jpg) repeat-y top center;
-
!align="center"|[[Team:Colorado_State/Notebook|Notebook]]
+
}
-
!align="center"|[[Team:Colorado_State/Safety|Safety]]
+
-
!align="center"|[[Team:Colorado_State/Sponsors|Sponsors]]
+
-
!align="center"|[[Team:Colorado_State/Attributions|Attributions]]
+
-
|}
+
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
p {
-
<head>
+
  padding-top: 10px !important;
-
<style type="text/css">
+
  padding-top: 3px;
 +
  padding-bottom: 10px !important;
 +
  padding-bottom: 3px;
 +
}
-
#top-section {
+
 
-
visibility: hidden;
+
a {
-
height: 0;
+
  color: #86E160;
-
border: none;
+
}
}
-
#slideshow {
+
a:visited {
-
position: relative;
+
  color: #AAA;
-
border: solid black 1px;
+
-
top: 0;
+
-
left: 0;
+
-
width: 200px;
+
-
height: 200px;
+
}
}
-
.slide {
+
a:hover {
-
position: absolute;
+
  color: #FFF;
-
width: 100%;
+
-
height: 100%;
+
}
}
-
</style>
+
acronym {
-
<script type="text/javascript">
+
  cursor: help;
 +
  border-bottom: 1px solid #777;
 +
}
-
//Performs fade animation; main function
+
input {
-
function fade(curElemID,isFading) {
+
  width: 70%;
-
+
}
-
//Length that each slide shows before fade (in milliseconds)
+
-
var slideTime = 2000;
+
-
+
-
//Length of fade (milliseconds)
+
-
var fadeTime = 1000;
+
-
+
-
//Fade Increments: > means smoother, more CPU-intensive transition
+
-
var fadeInc = 10;
+
-
+
-
//In order for fade to work correctly, opacity must be rounded to
+
-
//the appropriate number of decimal places.  roundTo defines this.
+
-
//For fadeInc < 20, roundTo = 1 will suffice.  roundNum is the
+
-
//functional form.
+
-
var roundTo = 1;
+
-
var roundNum = Math.pow(10, roundTo);
+
-
+
-
//Fetches the current slide element
+
-
var curElem = document.getElementById('slide' + curElemID);
+
-
+
-
//Checks if the function is running in the loop (it is fading).
+
-
//Function must be called with isFading = false
+
-
if (isFading == false) {
+
-
+
-
//Fetches the next slide element.  If there is no next slide,
+
-
//return to slide1.
+
-
var nextElem = document.getElementById('slide' + (curElemID + 1));
+
-
if (!nextElem) {
+
-
var nextElem = document.getElementById('slide1');
+
-
} //end if
+
-
+
-
//Brings current slide to front/fading z-index (3) and puts the
+
-
//next slide in the corresponding z-index (2).  Slides that are
+
-
//neither the current or next slide should have z-index = 1.
+
-
curElem.style.zIndex = 30;
+
-
nextElem.style.zIndex = 20;
+
-
+
-
//Sets a preliminary opacities. Optional
+
-
curElem.style.opacity = 1;
+
-
nextElem.style.opacity = 1;
+
-
+
-
} //end if
+
-
+
-
//Fades out the current slide if it is not already completely faded yet
+
-
if (curElem.style.opacity > 0) {
+
-
+
-
//Sets new opacity and reruns the function
+
-
var newOpac = (Math.round(roundNum * (curElem.style.opacity - (1/fadeInc)))) / roundNum;
+
-
curElem.style.opacity = newOpac;
+
-
setTimeout('fade(' + curElemID + ')', (fadeTime/fadeInc));
+
-
+
-
//Current slide has faded completely
+
-
} else {
+
-
+
-
//Sets the current slide to a hidden state with full opacity
+
-
curElem.style.zIndex = 10;
+
-
curElem.style.opacity = 1;
+
-
+
-
//Sets next slide element.  If there is no next slide,
+
-
//return to slide1.
+
-
var nextElem = document.getElementById('slide' + (curElemID + 1));
+
-
if (nextElem) {
+
-
var nextElemID = curElemID + 1;
+
-
} else {
+
-
var nextElemID = 1;
+
-
} //end if
+
-
+
-
//Starts next fade.  isFading = false is a required parameter
+
-
setTimeout('fade(' + nextElemID + ',false)',slideTime);
+
-
+
-
} //end if
+
-
+
-
} //end function fade
+
-
</script>
+
textarea {
-
</head>
+
  width: 98%;
-
<body onload="fade(1,false)">
+
  /*
-
<div id="slideshow">
+
    IE specific to eliminate scroll bar when not needed.
-
<div id="slide1" class="slide" style="background: red; z-index: 30;"></div>
+
    Uncomment if wanted, but it is not valid CSS
-
    <div id="slide2" class="slide" style="background: blue;"></div>
+
   
-
    <div id="slide3" class="slide" style="background: yellow;"></div>
+
  scrollbar-3dlight-color : #777;
-
</div>
+
  scrollbar-arrow-color : #EEE;
-
<a href="/wiki/index.php?title=Team:Colorado_State&amp;action=edit">Edit Page</a>
+
  scrollbar-darkshadow-color : #777;
-
</body>
+
  scrollbar-face-color : #777;
-
</html>
+
  scrollbar-highlight-color : #777;
 +
  scrollbar-shadow-color : #777;
 +
  scrollbar-track-color : #777;   
 +
  */
 +
}
 +
 
 +
input,
 +
textarea {
 +
  padding: 1px 3px;
 +
  margin: 5px 0;
 +
  font: 1em verdana, arial, sans-serif;
 +
  color: #EEE;
 +
  background-color: #777;
 +
  border: 1px solid #999;
 +
}
 +
 
 +
input:hover,
 +
input:focus,
 +
textarea:hover,
 +
textarea:focus {
 +
  color: #FFF;
 +
  background-color: #999;
 +
  border: 1px solid #EEE;
 +
}
 +
 
 +
 
 +
h1 {
 +
  clear: both;
 +
  margin: 10px 0;
 +
  font: 700 1em verdana, sans-serif;
 +
  text-transform: uppercase;
 +
  color: #7BD32C;
 +
  background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
 +
}
 +
 
 +
h1 span {
 +
  display: block;
 +
  padding: 2px;
 +
  background: url(../images/rounded_br.gif) no-repeat bottom right;
 +
}
 +
 
 +
#sideBar h1 {
 +
  text-align: right;
 +
  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
 +
}
 +
 
 +
#sideBar h1 span {
 +
  display: block;
 +
  padding: 2px;
 +
  background: url(../images/rounded_bl.gif) no-repeat bottom left;
 +
}
 +
 
 +
 
 +
#content ol li {
 +
  color: #9BE4FF;
 +
}
 +
 
 +
#content ol li span {
 +
  color: #EEE;
 +
}
 +
 
 +
#content ul {
 +
  padding-bottom: 10px;
 +
}
 +
 
 +
#content ul li {
 +
  list-style-image: url(../images/li_bullet.gif);
 +
}
 +
 
 +
blockquote { 
 +
  margin: 0;
 +
  background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
 +
}
 +
 
 +
blockquote span {
 +
  display: block;
 +
  padding: 5px;
 +
  background: url(../images/rounded_br.gif) no-repeat bottom right;
 +
}
 +
 
 +
/***************************************************
 +
  Layout Element Styles
 +
***************************************************/
 +
 
 +
 
 +
#header { 
 +
  width: 100%;
 +
  height: 3em;
 +
  background: #585858 url(../images/bg_header.jpg) repeat-y top center;
 +
}
 +
 
 +
/***************************************************
 +
  Header Menu
 +
***************************************************/
 +
 
 +
#menu {
 +
  width: 767px;
 +
  margin: 0 auto;
 +
  text-align: left; 
 +
}
 +
 
 +
#menu ul {
 +
  margin: 0;
 +
  padding: 0;
 +
  line-height: normal; 
 +
}
 +
 
 +
#menu ul li {
 +
  width: 8em;
 +
  display: inline;
 +
  float: left;
 +
  padding-top: 0.8em; 
 +
  list-style: none;
 +
  text-align: center;
 +
}
 +
 
 +
#menu ul li a {
 +
  display: block;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
  padding-bottom: 1.0em;
 +
  color: #222;
 +
}
 +
 
 +
#menu ul li a:hover,
 +
#menu ul li a.active {
 +
  font-weight: bold;
 +
  color: #111;
 +
  background: url(../images/menu_tab.gif) no-repeat bottom center;
 +
}
 +
 
 +
 
 +
/***************************************************
 +
  Site Title
 +
***************************************************/
 +
 
 +
#title {
 +
  padding: 0.6em 55px 0.6em 0;
 +
  margin-right: 0.5em;
 +
  float: right;
 +
  background: url(../images/logo_greenery.gif) no-repeat top right;
 +
}
 +
 
 +
#title h1 {
 +
  display: inline;
 +
  color:  #222;
 +
  background-color: #86E160;
 +
  background-image: none;
 +
}
 +
 
 +
 
 +
/***************************************************
 +
Page Content
 +
---------------------------------------------------
 +
1. Left side text
 +
2. Dropdown image
 +
3. Right side bar
 +
***************************************************/
 +
 
 +
 
 +
#content { 
 +
  clear: both;
 +
  width: 767px;
 +
  margin: 0 auto;
 +
  text-align: left;
 +
}
 +
 
 +
#text {
 +
  float: left;
 +
  width: 410px !important;
 +
  width: 437px;
 +
  padding: 10px 5px 20px 20px !important;
 +
  padding: 20px 5px 20px 20px;
 +
}
 +
 
 +
#image {
 +
  float: left;
 +
  width: 170px; 
 +
  vertical-align: top;
 +
}
 +
 
 +
#sideBar {
 +
  float: right;
 +
  width: 145px !important;
 +
  width: 160px;
 +
  padding: 10px 15px 20px 0 !important;
 +
  padding: 20px 15px 20px 0;
 +
}
 +
 
 +
 
 +
/***************************************************
 +
Sidemenu Styles
 +
***************************************************/
 +
 
 +
.sideMenu {
 +
  padding: 10px 0;
 +
}
 +
 
 +
.sideMenu a {
 +
  display: block;
 +
  text-align: right;
 +
  text-decoration: none;
 +
  margin-bottom: 1px; 
 +
}
 +
 
 +
.sideMenu a span {
 +
  display: block;
 +
  padding: 1px;
 +
}
 +
 
 +
.sideMenu a:hover {
 +
  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
 +
}
 +
 
 +
.sideMenu a:hover span {
 +
  background: url(../images/rounded_bl.gif) no-repeat bottom left;
 +
}
 +
 
 +
/***************************************************
 +
Comment Styles
 +
***************************************************/
 +
 
 +
#comments p {
 +
  padding: 0 5px;
 +
  margin-bottom: 0;
 +
  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
 +
}
 +
 
 +
#comments p span.author {
 +
  display: block;
 +
  margin-top: 5px;
 +
  text-align: right;
 +
  font-weight: 700;
 +
}
 +
 
 +
#comments img {
 +
  margin-top: -1px;
 +
}
 +
 
 +
#comments a {
 +
  color: #7BD32C;
 +
}
 +
 
 +
#comments a:visited {
 +
  color: #AAA;
 +
}
 +
 
 +
#comments a:hover {
 +
  color: #FFF;
 +
}
 +
 
 +
/***************************************************
 +
Footer
 +
***************************************************/
 +
 
 +
#footer {
 +
  clear: both;
 +
  float: left;
 +
  width: 500px;
 +
  padding: 10px 20px;
 +
  color: #888;
 +
}
 +
 
 +
#footer p {
 +
  padding-top: 0 !important;
 +
  padding-top: 10px;
 +
}
 +
 
 +
#footer a {
 +
  color: #888;
 +
}
 +
 
 +
#footer a:hover {
 +
  color: #EEE;
 +
}
 +
 
 +
a.fullAhead {
 +
  float: left;
 +
  width: 30px;
 +
  height: 34px; 
 +
  margin-right: 10px;
 +
  background: url(../images/logo_fullahead.gif) no-repeat 0 0;
 +
}
 +
 
 +
a:hover.fullAhead  {
 +
  background-position: -30px 0;
 +
}
 +
 
 +
 
 +
/***************************************************
 +
Generic Display Classes
 +
***************************************************/
 +
 
 +
.center {
 +
  text-align: center;
 +
}
 +
 
 +
.noPad {
 +
  padding: 0;
 +
  margin: 0;
 +
}
 +
 
 +
.left {
 +
  float: left;
 +
}
 +
 
 +
.right {
 +
  float: right;
 +
}
 +
 
 +
img.left {
 +
  padding: 5px 5px 5px 0;
 +
}
 +
 
 +
img.right {
 +
  padding: 5px 0 5px 5px;
 +
}
 +
 
 +
.button {
 +
  width: auto;
 +
  cursor: pointer;
 +
}
 +
 
 +
.date {
 +
  display: block;
 +
  font-weight: 700;
 +
}

Revision as of 19:40, 16 July 2012

body { 

 margin: 0;  
 text-align: center;
 font: 0.62em verdana, arial, sans-serif;  
 line-height: 170%;
 color: #EEE;
 background: #585858 url(../images/bg_body.jpg) repeat-y top center;

}

p { 

 padding-top: 10px !important;
 padding-top: 3px;
 padding-bottom: 10px !important;
 padding-bottom: 3px;

}


a { 

 color: #86E160;

}

a:visited { 

 color: #AAA;

}

a:hover { 

 color: #FFF;

}

acronym { 

 cursor: help;
 border-bottom: 1px solid #777;

}

input { 

 width: 70%;

}

textarea { 

 width: 98%;
 /* 
   IE specific to eliminate scroll bar when not needed. 
   Uncomment if wanted, but it is not valid CSS
    
 scrollbar-3dlight-color : #777;
 scrollbar-arrow-color : #EEE;
 scrollbar-darkshadow-color : #777;
 scrollbar-face-color : #777;
 scrollbar-highlight-color : #777;
 scrollbar-shadow-color : #777;
 scrollbar-track-color : #777;    
 */

}

input, textarea { 

 padding: 1px 3px;
 margin: 5px 0;
 font: 1em verdana, arial, sans-serif;
 color: #EEE;
 background-color: #777;
 border: 1px solid #999;

}

input:hover, input:focus, textarea:hover, textarea:focus { 

 color: #FFF;
 background-color: #999;
 border: 1px solid #EEE;

}


h1 { 

 clear: both;
 margin: 10px 0;
 font: 700 1em verdana, sans-serif;
 text-transform: uppercase;
 color: #7BD32C;
 background: #686868 url(../images/rounded_tr.gif) no-repeat top right;

}

h1 span { 

 display: block;
 padding: 2px;
 background: url(../images/rounded_br.gif) no-repeat bottom right;

}

  1. sideBar h1 { 
 text-align: right;
 background: #686868 url(../images/rounded_tl.gif) no-repeat top left;

}

  1. sideBar h1 span { 
 display: block;
 padding: 2px;
 background: url(../images/rounded_bl.gif) no-repeat bottom left;

}


  1. content ol li { 
 color: #9BE4FF;

}

  1. content ol li span { 
 color: #EEE;

}

  1. content ul { 
 padding-bottom: 10px;

}

  1. content ul li { 
 list-style-image: url(../images/li_bullet.gif);

}

blockquote { 

 margin: 0;
 background: #686868 url(../images/rounded_tr.gif) no-repeat top right;

}

blockquote span { 

 display: block;
 padding: 5px;
 background: url(../images/rounded_br.gif) no-repeat bottom right;

}

/*************************************************** 

 Layout Element Styles
***************************************************/


  1. header { 
 width: 100%;
 height: 3em;
 background: #585858 url(../images/bg_header.jpg) repeat-y top center;

}

/*************************************************** 

 Header Menu
***************************************************/
  1. menu { 
 width: 767px;
 margin: 0 auto;
 text-align: left;

}

  1. menu ul { 
 margin: 0;
 padding: 0;
 line-height: normal;

}

  1. menu ul li { 
 width: 8em;
 display: inline;
 float: left;
 padding-top: 0.8em;  
 list-style: none;
 text-align: center;

}

  1. menu ul li a { 
 display: block;
 text-decoration: none;
 text-transform: uppercase;
 padding-bottom: 1.0em;
 color: #222;

}

  1. menu ul li a:hover,
  2. menu ul li a.active { 
 font-weight: bold;
 color: #111;
 background: url(../images/menu_tab.gif) no-repeat bottom center;

}


/*************************************************** 

 Site Title
***************************************************/
  1. title { 
 padding: 0.6em 55px 0.6em 0;
 margin-right: 0.5em;
 float: right;
 background: url(../images/logo_greenery.gif) no-repeat top right;

}

  1. title h1 { 
 display: inline;
 color:  #222;
 background-color: #86E160;
 background-image: none;

}


/*************************************************** 

Page Content
---------------------------------------------------
1. Left side text
2. Dropdown image
3. Right side bar 
***************************************************/


  1. content { 
 clear: both;
 width: 767px;
 margin: 0 auto;
 text-align: left;

}

  1. text { 
 float: left;
 width: 410px !important;
 width: 437px;
 padding: 10px 5px 20px 20px !important;
 padding: 20px 5px 20px 20px;

}

  1. image { 
 float: left;
 width: 170px;  
 vertical-align: top;

}

  1. sideBar { 
 float: right;
 width: 145px !important;
 width: 160px;
 padding: 10px 15px 20px 0 !important;
 padding: 20px 15px 20px 0;

}


/*************************************************** 

Sidemenu Styles
***************************************************/

.sideMenu { 

 padding: 10px 0;

}

.sideMenu a { 

 display: block;
 text-align: right;
 text-decoration: none;
 margin-bottom: 1px;

}

.sideMenu a span { 

 display: block;
 padding: 1px;

}

.sideMenu a:hover { 

 background: #686868 url(../images/rounded_tl.gif) no-repeat top left;

}

.sideMenu a:hover span { 

 background: url(../images/rounded_bl.gif) no-repeat bottom left;

}

/*************************************************** 

Comment Styles
***************************************************/
  1. comments p { 
 padding: 0 5px;
 margin-bottom: 0;
 background: #686868 url(../images/rounded_tl.gif) no-repeat top left;

}

  1. comments p span.author { 
 display: block;
 margin-top: 5px;
 text-align: right;
 font-weight: 700;

}

  1. comments img { 
 margin-top: -1px;

}

  1. comments a { 
 color: #7BD32C;

}

  1. comments a:visited { 
 color: #AAA;

}

  1. comments a:hover { 
 color: #FFF;

}

/*************************************************** 

Footer
***************************************************/
  1. footer { 
 clear: both;
 float: left;
 width: 500px;
 padding: 10px 20px;
 color: #888;

}

  1. footer p { 
 padding-top: 0 !important;
 padding-top: 10px;

}

  1. footer a { 
 color: #888;

}

  1. footer a:hover { 
 color: #EEE;

}

a.fullAhead { 

 float: left;
 width: 30px;
 height: 34px;  
 margin-right: 10px;
 background: url(../images/logo_fullahead.gif) no-repeat 0 0;

}

a:hover.fullAhead { 

 background-position: -30px 0;

}


/*************************************************** 

Generic Display Classes
***************************************************/

.center { 

 text-align: center;

}

.noPad { 

 padding: 0;
 margin: 0;

}

.left { 

 float: left;

}

.right { 

 float: right;

}

img.left { 

 padding: 5px 5px 5px 0;

}

img.right { 

 padding: 5px 0 5px 5px;

}

.button { 

 width: auto;
 cursor: pointer;

}

.date { 

 display: block;
 font-weight: 700;

}

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