Template:MIT-style2

From 2011.igem.org

(Difference between revisions)
(Created page with "<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:...")
Line 1: Line 1:
-
<html lang="en">
+
/*
-
<head>
+
 
-
<style type="text/css">
+
* Title: Business Elegance v.1.0
 +
 
 +
* Site: http://www.chamadigital.com
 +
 
 +
* Author: Anselmo Ribeiro
 +
 
 +
* Last Modified: 28_02_2008
 +
 
 +
*/
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/*global reset */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
html *{
 +
 
 +
padding: 0;
 +
 
 +
margin: 0;
 +
 
 +
}
 +
 
 +
a img, :link img, :visited img {
 +
 
 +
  border: 0;
 +
 
 +
}
 +
 
 +
table {
 +
 
 +
  border-collapse: collapse;
 +
 
 +
  border-spacing: 0;
 +
 
 +
}
 +
 
 +
ol, ul {
 +
 
 +
  list-style: none;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
p{
 +
 
 +
line-height: 18px;
 +
 
 +
}
 +
 
 +
/*  global reset */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* base html */
 +
 
 +
 
 +
 
 +
body {
 +
 
 +
  background: #343a3d url(images/bgd.gif);
 +
 
 +
  color: #000;
 +
 
 +
  margin: 0;
 +
 
 +
  padding: 0;
 +
 
 +
  font-family: Arial, Helvetica, sans-serif;
 +
 
 +
  font-size: 12px;
 +
 
 +
  text-align: center;/*this is in place to center in older browsers*/
 +
 
 +
}
 +
 
 +
a {
 +
 
 +
text-decoration: none;
 +
 
 +
color:#B3002C;
 +
 
 +
}
 +
 
 +
a:link {/* unvisited link */
 +
 
 +
color:#B3002C;
 +
 
 +
}   
 +
 
 +
 +
 
 +
a:hover { /* mouse over link */
 +
 
 +
color:#B3002C;
 +
 
 +
text-decoration: underline;
 +
 
 +
} 
 +
 
 +
a:active {/* selected link */
 +
 
 +
color:#B3002C;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* end base html */
 +
 
 +
/*  layout */
 +
 
 +
#wrapper{
 +
 
 +
width: 900px;
 +
 
 +
-
#globalwrapper {
 
-
width:975px;
 
-
padding-top:20px;
 
-
/*border-left:1px solid #8C8C8C;
 
-
border-right: 1px solid #8C8C8C;*/
 
margin: 0 auto;
margin: 0 auto;
-
background-color:#ffffff;
+
 
-
height:100%;
+
text-align: left;
 +
 
 +
background: #2d3235;
 +
 
}
}
 +
#header{
 +
 +
width: 856px;
 +
 +
padding: 20px 22px 25px 22px;
 +
 +
height: 390px;
 +
 +
background: #262b2e;
 +
background: #fff;
 +
 +
position: relative;
-
#navigation {
 
-
margin-bottom:20px;
 
}
}
-
#content-wrapper {
+
#header h1{
-
overflow: hidden;
+
 
-
padding:10px;
+
position: absolute;
-
border-top: 1px dotted black;
+
 
 +
top:40px;
 +
 
 +
left: 42px;
 +
 
 +
width: 350px;
 +
 
 +
height: 23px;
 +
 
 +
font-family:'Century Gothic', Arial, Helvetica, sans-serif;
 +
 
 +
font-size:30px;
 +
 
 +
color:#fff;
 +
 
 +
font-weight: normal;
 +
 
}
}
 +
#header h1 a{
 +
 +
text-decoration: none;
 +
 +
color:#000;
-
.twocol.primary {
 
-
width:72%;
 
-
height:100%;
 
-
float:left;
 
-
display:inline;
 
-
padding:5px;
 
}
}
-
.twocol.secondary {
+
 
-
margin-right:-10px;
+
 
-
width: 26%;
+
#content{
-
height:100%;
+
 
-
float:right;
+
float: left;
-
display:inline;
+
 
-
border-left: 1px dotted black;
+
width: 900px;
 +
 
 +
/*background: #2d3235 url(images/main_bgd.gif) repeat-y top left;*/
 +
background: #fff;
 +
 
}
}
-
.threecol.primary {
+
#col_left{
-
width:72%;
+
 
-
border:1px solid red;
+
float: left;
 +
 
 +
width: 586px;
 +
 
 +
padding: 30px 22px;
 +
 
}
}
-
threecol.primary.primary {
+
#col_right{
-
width:72%;
+
 
-
border:1px solid black;
+
float: right;
 +
 
 +
width: 212px;
 +
 
 +
padding: 30px 28px 30px 15px;
 +
 
 +
}
 +
 
 +
#footer{
 +
 
 +
width: 900px;
 +
 
 +
margin: 10px auto 20px auto;
 +
 
 +
 +
 
 +
}
 +
 
 +
#footer p{
 +
 
 +
text-align: center;
 +
 
 +
}
 +
 
 +
#welcome{
 +
 
 +
padding-bottom: 35px;
 +
 
 +
border-bottom: 1px solid #343a3d;
 +
 
 +
}
 +
 
 +
/*navigation*/
 +
 
 +
#navigation{
 +
 
 +
 +
 
 +
position: absolute;
 +
 
 +
top:25px;
 +
 
 +
 +
 
 +
right: 22px;
 +
 
 +
}
 +
 
 +
#navigation li{
 +
 
 +
 +
 
 +
float: left;
 +
 
 +
 +
 
 +
}
 +
 
 +
#navigation a {
 +
 
 +
display: inline-block;
 +
 
 +
font-size: 11px;
 +
 
 +
text-decoration:none;
 +
 
 +
background-color:#000;
 +
 
 +
border-bottom: 3px solid #fff;
 +
 
 +
color:#fff;
 +
 
 +
margin-right: 1px;
 +
 
 +
font-weight: normal;
 +
 
 +
}
 +
 
 +
#navigation a:hover{
 +
 
 +
border-bottom: 3px solid #B3002C;
 +
 
 +
color:#B3002C;
 +
 
 +
}
 +
 
 +
#navigation li.selected a{
 +
 
 +
border-bottom: 3px solid #B3002C;
 +
 
 +
color:#B3002C;
 +
 
 +
}
 +
 
 +
#imagem{
 +
 
 +
position: absolute;
 +
 
 +
top:142px;
 +
 
 +
}
 +
 
 +
#search{
 +
 
 +
position: absolute;
 +
 
 +
top: 105px;
 +
 
 +
left: 22px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
h2#slogan{
 +
 
 +
position: absolute;
 +
 
 +
top: 100px;
 +
 
 +
right: 22px;
 +
 
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
 
 +
font-size:20px;
 +
 
 +
font-weight: normal;
 +
 
 +
}
 +
 
 +
h2#slogan span{
 +
 
 +
font-style: italic;
 +
 
 +
color: #B00000;
 +
 
 +
}
 +
 
 +
h2{
 +
 
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
 
 +
font-size: 24px;
 +
 
 +
font-weight: normal;
 +
 
 +
margin-bottom: 20px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#gold_sponsors{
 +
 
 +
float: left;
 +
 
 +
width: 194px;
 +
 
 +
margin-right: 17px;/*27px*/
 +
 
 +
display: inline;
 +
 
 +
}
 +
#gold_sponsors h3{
 +
color: #FFBE30;
 +
text-align:center;
 +
}
 +
 
 +
#partners{
 +
 
 +
float: left;
 +
 
 +
width: 175px;
 +
 
 +
margin-right: 17px;/*42px*/
 +
 
 +
display: inline;
 +
 
 +
}
 +
#partners h3{
 +
text-align:center;
 +
}
 +
 
 +
#contributing_departments{
 +
 
 +
float: left;
 +
 
 +
width: 170px;
 +
 
 +
display: inline;
 +
 
 +
}
 +
#contributing_departments h3{
 +
text-align:center;
 +
}
 +
 
 +
#partners ul li{
 +
 
 +
 
 +
 
 +
}
 +
 
 +
#contributing_departments ul li{
 +
 
 +
 
 +
 
 +
}
 +
 
 +
 +
 
 +
h3{
 +
 
 +
padding: 30px 0 20px 0;
 +
 
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
 
 +
font-size: 18px;
 +
 
 +
font-weight: normal;
 +
 
 +
}
 +
 
 +
#center{
 +
 
float:left;
float:left;
 +
 +
padding-bottom: 35px;
 +
 +
border-bottom: 1px solid #343a3d;
 +
}
}
-
threecol.primary.secondary {
+
#quote{
-
width:26%;
+
 
-
border:1px solid black;
+
float:left;
-
float:right;
+
 
 +
padding: 35px 0;
 +
 
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
 
 +
font-size: 17px;
 +
 
 +
font-style: italic;
 +
 
 +
letter-spacing: 2px;
 +
 
 +
color: #8b8b8c;
 +
 
 +
 +
 
}
}
-
threecol.secondary /*secondary nav*/{
+
#quote p{
-
width:26%;
+
 
-
border:1px solid black;
+
line-height: 22px;
-
float:right;
+
}
}
-
#sponsors {
+
#quote p.testimonial{
-
margin-left: auto;
+
 
-
margin-right: auto;
+
font-size: 12px;
-
width: 100%;
+
 
 +
font-family: Arial, Helvetica, sans-serif;
 +
 
 +
font-style: normal;
 +
 
 +
color: #fff;
 +
 
 +
 +
 
}
}
-
#sponsors div {
+
#quote .quote{
-
width:32%;
+
 
-
height: 60px;
+
font-size: 26px;
-
float:left;
+
 
-
display:inline;
+
-
border:1px solid #DEDEDE;
+
-
margin: 3px;
+
}
}
-
#twitter {
+
#news{
-
background-position:center;
+
 
-
width:200px;
+
padding-bottom: 10px;
-
margin: 0 auto;
+
 
 +
border-bottom: 1px solid #343a3d;  
 +
 
}
}
-
#twitter .top {
+
 
-
background-image:url('https://static.igem.org/mediawiki/2011/6/65/MIT-twitter-top.jpg');
+
#news li{
-
background-repeat:no-repeat;
+
 
-
max-height:20px;
+
margin-bottom: 20px;
-
text-align:center;
+
 
-
padding-top:5px;
+
}
 +
 
 +
#news li p.date{
 +
 
 +
color: #fff;
 +
 
 +
font-weight: bold;
 +
 
}
}
-
#twitter .middle {
+
 
-
background-image:url('https://static.igem.org/mediawiki/2011/c/c8/MIT-twitter-middle.jpg');
+
#news li p.archive{
-
background-repeat:repeat-y;
+
 
-
padding-left:20px;
+
padding-left: 25px;
-
padding-top:10px;
+
 
-
height:100%;
+
background: url(images/folder.jpg) no-repeat 0 50%;;
-
background-color:black;
+
 
}
}
-
#twitter .bottom {
+
 
-
background-image:url('https://static.igem.org/mediawiki/2011/4/4b/MIT-twitter-bot.jpg');
+
#contacts h2{
-
background-repeat:no-repeat;
+
 
-
height:100px;
+
margin-top: 20px;
 +
 
}
}
 +
 +
.green{
 +
 +
color: #95ca05;
 +
 +
}
 +
 +
 +
 +
/*Twitter*/
 +
 +
 +
 +
#twitter_update_list {
#twitter_update_list {
 +
/* the main container */
/* the main container */
 +
list-style:none;
list-style:none;
-
margin:0;
+
 
-
margin-top:-15px;
+
background-color:#262b2e;
-
width: 160px;
+
background-color:#ccc;
-
padding-left:0px;
+
 
}
}
 +
   
   
 +
#twitter_update_list li {
#twitter_update_list li {
 +
/* wraps a single list */
/* wraps a single list */
 +
font-family: 'lucida sans unicode';
font-family: 'lucida sans unicode';
 +
font-size:11px;
font-size:11px;
-
padding: 5px 0px;
+
 
-
border-bottom: 1px dotted black;
+
padding: 10px;
 +
 
 +
border-bottom: 1px dotted #545454;
 +
 
 +
 
 +
 
}
}
 +
   
   
 +
#twitter_update_list li span {
#twitter_update_list li span {
 +
/* wraps the tweet */
/* wraps the tweet */
 +
display: block;
display: block;
 +
}
}
 +
   
   
 +
#twitter_update_list li a {
#twitter_update_list li a {
 +
/* wraps the link to the tweet */
/* wraps the link to the tweet */
 +
/* by default it have 85% font-size therefore you might want to change it like below */
/* by default it have 85% font-size therefore you might want to change it like below */
 +
font-size:100% !important;
font-size:100% !important;
 +
font-size:11px !important;
font-size:11px !important;
-
}
 
-
a {
 
-
color: #991133;
 
-
text-decoration: none;
 
-
}
 
-
 
-
a:hover {
 
-
text-decoration: underline;
 
-
}
 
-
 
-
#contentboxwrapper {
 
-
border: 1px solid green;
 
-
margin: 0 auto;
 
-
width:80%;
 
-
}
 
-
 
-
div .contentbox {
 
-
border: 1px dashed #999999;
 
-
float:left;
 
-
height:150px;
 
-
width:190px;
 
-
padding: 5px;
 
-
margin:10px;
 
-
text-align: justify;
 
-
}
 
-
 
-
 
-
.bio {
 
-
clear:both;
 
-
}
 
-
 
-
.bio img {
 
-
float:left;
 
-
}
 
-
#col1 img {
 
-
width:200px;
 
}
}
-
</style>
 
-
</head>
 
-
</html>
 

Revision as of 05:53, 14 August 2011

/* 

* Title: Business Elegance v.1.0

* Site: http://www.chamadigital.com

* Author: Anselmo Ribeiro

* Last Modified: 28_02_2008
  • /




/*global reset */



html *{

padding: 0;

margin: 0;

}

a img, :link img, :visited img { 

 border: 0;

}

table { 

 border-collapse: collapse;

 border-spacing: 0;

}

ol, ul { 

 list-style: none;

}


p{

line-height: 18px;

}

/* global reset */




/* base html */


body { 

 background: #343a3d url(images/bgd.gif);

 color: #000;

 margin: 0;

 padding: 0;

 font-family: Arial, Helvetica, sans-serif;

 font-size: 12px;

 text-align: center;/*this is in place to center in older browsers*/

}

a { 

text-decoration: none;

color:#B3002C;

}

a:link {/* unvisited link */ 

color:#B3002C;

}


a:hover { /* mouse over link */ 

color:#B3002C;

text-decoration: underline;

}

a:active {/* selected link */ 

color:#B3002C;

}




/* end base html */

/* layout */

  1. wrapper{

width: 900px;


margin: 0 auto;

text-align: left;

background: #2d3235;

}

  1. header{

width: 856px;

padding: 20px 22px 25px 22px;

height: 390px;

background: #262b2e; background: #fff;

position: relative;

}

  1. header h1{

position: absolute;

top:40px;

left: 42px;

width: 350px;

height: 23px;

font-family:'Century Gothic', Arial, Helvetica, sans-serif;

font-size:30px;

color:#fff;

font-weight: normal;

}

  1. header h1 a{

text-decoration: none;

color:#000;

}


  1. content{

float: left;

width: 900px;

/*background: #2d3235 url(images/main_bgd.gif) repeat-y top left;*/ background: #fff;

}

  1. col_left{

float: left;

width: 586px;

padding: 30px 22px;

}

  1. col_right{

float: right;

width: 212px;

padding: 30px 28px 30px 15px;

}

  1. footer{

width: 900px;

margin: 10px auto 20px auto;


}

  1. footer p{

text-align: center;

}

  1. welcome{

padding-bottom: 35px;

border-bottom: 1px solid #343a3d;

}

/*navigation*/

  1. navigation{


position: absolute;

top:25px;


right: 22px;

}

  1. navigation li{


float: left;


}

  1. navigation a {

display: inline-block;

font-size: 11px;

text-decoration:none;

background-color:#000;

border-bottom: 3px solid #fff;

color:#fff;

margin-right: 1px;

font-weight: normal;

}

  1. navigation a:hover{

border-bottom: 3px solid #B3002C;

color:#B3002C;

}

  1. navigation li.selected a{

border-bottom: 3px solid #B3002C;

color:#B3002C;

}

  1. imagem{

position: absolute;

top:142px;

}

  1. search{

position: absolute;

top: 105px;

left: 22px;

}


h2#slogan{

position: absolute;

top: 100px;

right: 22px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size:20px;

font-weight: normal;

}

h2#slogan span{

font-style: italic;

color: #B00000;

}

h2{

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 24px;

font-weight: normal;

margin-bottom: 20px;

}


  1. gold_sponsors{

float: left;

width: 194px;

margin-right: 17px;/*27px*/

display: inline;

}

  1. gold_sponsors h3{

color: #FFBE30; text-align:center; }

  1. partners{

float: left;

width: 175px;

margin-right: 17px;/*42px*/

display: inline;

}

  1. partners h3{

text-align:center; }

  1. contributing_departments{

float: left;

width: 170px;

display: inline;

}

  1. contributing_departments h3{

text-align:center; }

  1. partners ul li{


}

  1. contributing_departments ul li{


}


h3{

padding: 30px 0 20px 0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: normal;

}

  1. center{

float:left;

padding-bottom: 35px;

border-bottom: 1px solid #343a3d;

}

  1. quote{

float:left;

padding: 35px 0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 17px;

font-style: italic;

letter-spacing: 2px;

color: #8b8b8c;


}

  1. quote p{

line-height: 22px;

}

  1. quote p.testimonial{

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

font-style: normal;

color: #fff;


}

  1. quote .quote{

font-size: 26px;

}

  1. news{

padding-bottom: 10px;

border-bottom: 1px solid #343a3d;

}

  1. news li{

margin-bottom: 20px;

}

  1. news li p.date{

color: #fff;

font-weight: bold;

}

  1. news li p.archive{

padding-left: 25px;

background: url(images/folder.jpg) no-repeat 0 50%;;

}

  1. contacts h2{

margin-top: 20px;

}

.green{

color: #95ca05;

}


/*Twitter*/



  1. twitter_update_list {

/* the main container */

list-style:none;

background-color:#262b2e; background-color:#ccc;

}


  1. twitter_update_list li {

/* wraps a single list */

font-family: 'lucida sans unicode';

font-size:11px;

padding: 10px;

border-bottom: 1px dotted #545454;


}


  1. twitter_update_list li span {

/* wraps the tweet */

display: block;

}


  1. 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;


}

Retrieved from "http://2011.igem.org/Template:MIT-style2"