Team:MIT/styles

From 2011.igem.org

(Difference between revisions)
 
(26 intermediate revisions not shown)
Line 1: Line 1:
-
ul {list-style: none}
+
<html lang="en">
 +
<head>
 +
<style type="text/css">
 +
#globalwrapper {
 +
width:975px;
 +
padding-top:20px;
 +
/*border-left:1px solid #8C8C8C;
 +
border-right: 1px solid #8C8C8C;*/
 +
margin: 0 auto;
 +
background-color:#ffffff;
 +
height:100%;
 +
}
-
.bio img {max-width:300px; float:left; margin-right:10px;}
 
-
.bio {clear:both;}
 
-
<script type="text/javascript">
+
#navigation {
-
$('#rightMenu a')
+
margin-bottom:20px;
-
.css( {backgroundPosition: "0 0"} )
+
}
-
.mouseover(function(){
+
-
$(this).stop().animate(
+
-
{backgroundPosition:"(0 -250px)"},
+
-
{duration:500})
+
-
})
+
-
.mouseout(function(){
+
-
$(this).stop().animate(
+
-
{backgroundPosition:"(0 0)"},
+
-
{duration:500})
+
-
})
+
-
</script>
+
-
<script type="text/javascript">
+
-
$(function() {
+
-
$("#button").toggle(
+
-
function() {
+
-
$("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000);
+
-
},
+
-
function() {
+
-
$("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000);
+
-
}
+
-
);
+
-
});
+
-
$(document).ready(function(){
+
-
if($("#nav")) {
+
-
$("#nav dd").hide();
+
-
$("#nav dt b").click(function() {
+
-
if(this.className.indexOf("clicked") != -1) {
+
-
$(this).parent().next().slideUp(200);
+
-
$(this).removeClass("clicked");
+
-
}
+
-
else {
+
-
$("#nav dt b").removeClass();
+
-
$(this).addClass("clicked");
+
-
$("#nav dd:visible").slideUp(200);
+
-
$(this).parent().next().slideDown(500);
+
-
}
+
-
return false;
+
-
});
+
-
}
+
-
});
+
-
</script>
+
#content-wrapper {
-
<!--[if IE]>
+
overflow: hidden;
-
<style>
+
padding:10px;
-
#header {
+
border-top: 1px dotted black;
-
width: 900px;
+
}
}
-
</style>
 
-
<![endif]-->
 
-
<style type="text/css">
 
-
.toggler { width: 500px; height: 200px; position: relative;}
 
-
#button { padding: .5em 1em; text-decoration: none; }
 
-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
 
-
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 
-
#header {
+
.twocol.primary {
-
position: relative;
+
width:72%;
-
left: 2px;
+
height:100%;
-
text-align: left;
+
float:left;
-
margin: 0px;
+
display:inline;
-
width: 955px;
+
padding:5px;
}
}
-
#header a {
+
.twocol.secondary {
-
color: white;
+
margin-right:-10px;
-
}
+
width: 26%;
 +
height:100%;
 +
float:right;
 +
display:inline;
 +
border-left: 1px dotted black;
 +
}
-
#content {
+
.threecol.primary {
-
background-color: transparent;
+
width:72%;
-
  border: none;
+
border:1px solid red;
-
  }
+
}
 +
 
 +
threecol.primary.primary {
 +
width:72%;
 +
border:1px solid black;
 +
float:left;
 +
}
 +
 
 +
threecol.primary.secondary {
 +
width:26%;
 +
border:1px solid black;
 +
float:right;
 +
}
 +
 
 +
threecol.secondary /*secondary nav*/{
 +
width:26%;
 +
border:1px solid black;
 +
float:right;
 +
 
 +
}
 +
 
 +
#sponsors {
 +
margin-left: auto;
 +
margin-right: auto;
 +
width: 100%;
 +
}
 +
 
 +
#sponsors div {
 +
width:32%;
 +
height: 60px;
 +
float:left;
 +
display:inline;
 +
border:1px solid #DEDEDE;
 +
margin: 3px;
 +
}
 +
 
 +
#twitter {
 +
background-position:center;
 +
width:200px;
 +
margin: 0 auto;
 +
}
 +
#twitter div.top {
 +
background-image:url('https://static.igem.org/mediawiki/2011/6/65/MIT-twitter-top.jpg');
 +
background-repeat:no-repeat;
 +
max-height:20px;
 +
text-align:center;
 +
padding-top:5px;
 +
}
 +
#twitter div.middle {
 +
background-image:url('https://static.igem.org/mediawiki/2011/c/c8/MIT-twitter-middle.jpg');
 +
background-repeat:repeat-y;
 +
padding-left:20px;
 +
padding-top:10px;
 +
height:100%;
 +
background-color:black;
 +
}
 +
#twitter div.bottom {
 +
background-image:url('https://static.igem.org/mediawiki/2011/4/4b/MIT-twitter-bot.jpg');
 +
background-repeat:no-repeat;
 +
height:100px;
 +
}
 +
 
 +
#twitter_update_list {
 +
/* the main container */
 +
list-style:none;
 +
margin:0;
 +
margin-top:-15px;
 +
width: 160px;
 +
padding-left:0px;
 +
}
 +
   
 +
#twitter_update_list li {
 +
/* wraps a single list */
 +
font-family: 'lucida sans unicode';
 +
font-size:11px;
 +
padding: 5px 0px;
 +
border-bottom: 1px dotted black;
 +
}
 +
   
 +
#twitter_update_list li span {
 +
/* wraps the tweet */
 +
display: block;
 +
}
 +
 +
#twitter_update_list li a {
 +
/* wraps the link to the tweet */
 +
/* by default it have 85% font-size therefore you might want to change it like below */
 +
font-size:100% !important;
 +
font-size:11px !important;
 +
}
 +
 
 +
 
 +
a {
 +
color: #991133;
 +
text-decoration: none;
 +
}
 +
 
 +
a:hover {
 +
text-decoration: underline;
 +
}
 +
 
 +
</style>
 +
</head>
 +
</html>

Latest revision as of 17:12, 12 August 2011