Team:The Tech Museum/CSS/main design

From 2013.igem.org

(Difference between revisions)
(create stylesheet)
 
(One intermediate revision not shown)
Line 1: Line 1:
/**
/**
-
*
+
*
-
* COLOURS
+
* COLOURS
-
*
+
*
-
* RED:  #E51837
+
* RED:  #E51837
-
* BLUE: #00467F
+
* BLUE: #00467F
-
*
+
*
-
*/
+
*/
 +
 
/**
/**
-
*
+
*
-
* Overwriting WIKI-standard style
+
* Overwriting WIKI-standard style
-
*
+
*
-
*/
+
*/
 +
 
/**
/**
-
*
+
*
-
* Custom stuff
+
* Custom stuff
-
*
+
*
-
*/
+
*/
 +
 
body{
body{
-
  margin:0px 0px 8px;
+
    margin:0px 0px 8px;
-
  background:url("BareCillus_Background_wiki_light.png") fixed;
+
    background:url("https://static.igem.org/mediawiki/2013/5/54/BareCillus_Background_wiki_light.png") fixed;
-
font-family:"Helvetica"; }
+
font-family:"Helvetica";
-
p{ /*text-indent:15px;*/
+
}
-
  font-size:15px;
+
 
-
  padding:5px;
+
p{
-
  text-align:left;
+
/*text-indent:15px;*/
-
  margin:1px 5px 0px;
+
    font-size:15px;
-
line-height:1.2em; }
+
    padding:5px;
 +
    text-align:left;
 +
    margin:1px 5px 0px;
 +
line-height:1.2em;
 +
}
 +
 
a{
a{
-
  text-decoration:none;
+
    text-decoration:none;
-
  color:#00467F;
+
    color:#00467F;
}
}
-
ul { margin:.3em 0 0 3em; }
+
 
-
page_content {
+
ul {
-
      width:729px;
+
margin:.3em 0 0 3em;
}
}
 +
 +
#page_content {
 +
        width:729px;
 +
}
 +
a:visited{
a:visited{
-
  color:#00467F;
+
    color:#00467F;
}
}
 +
h1, h2, h3, h4, h5{
h1, h2, h3, h4, h5{
-
  color:black;
+
    color:black;
-
  background:none;
+
    background:none;
-
  font-weight:bold;
+
    font-weight:bold;
-
  margin:10px;
+
    margin:10px;
-
  padding:5px;
+
    padding:5px;
-
  border:0px;
+
    border:0px;
-
  font-family:"Helvetica";
+
    font-family:"Helvetica";
-
  line-height:1.1em;
+
    line-height:1.1em;
}
}
 +
h1{
h1{
-
  text-align:center;
+
    text-align:center;
-
  font-size:50px;
+
    font-size:50px;
-
  color:black;
+
    color:black;
}
}
-
bodyContent h1{
+
 
-
margin-bottom:5px; }
+
#bodyContent h1{
 +
margin-bottom:5px;
 +
}
 +
 
h2{
h2{
-
  font-size:40px;
+
    font-size:40px;
}
}
 +
h3{
h3{
-
  font-size:32px;
+
    font-size:32px;
}
}
-
h1 .editsection, h2 .editsection, h3 .editsection, h4 .editsection{ display:none; }
+
 
 +
h1 .editsection,
 +
h2 .editsection,
 +
h3 .editsection,
 +
h4 .editsection{
 +
display:none;
 +
}
 +
 
h4{
h4{
-
  font-size:20px;
+
    font-size:20px;
}
}
-
hr{ width:50%; border-top: 2px solid #E51837; /*border-right: 5px solid white; border-left: 5px solid white; border-bottom:white;*/ margin:0px auto 10px; height:0px; }
+
 
-
hr.blue_bg{ border-right: 5px solid #00467F; border-left: 5px solid #00467F; border-bottom:#00467F; }
+
hr{
-
hr.blue{ width:50%; border-top: 3px solid #00467F; border-right: 4px solid #E51837; border-left: 4px solid #E51837; border-bottom:#E51837; }
+
width:50%;
-
ol ol{ list-style-type:lower-roman; }
+
border-top: 2px solid #E51837;
-
div.syntaxhighlighter{ width:735px !important; }
+
/*border-right: 5px solid white;
-
code, .gutter{ font-size:15px; }
+
border-left: 5px solid white;
-
top-section{
+
border-bottom:white;*/
-
  /*display:none;*/
+
margin:0px auto 10px;
 +
height:0px;
}
}
 +
 +
hr.blue_bg{
 +
border-right: 5px solid #00467F;
 +
border-left: 5px solid #00467F;
 +
border-bottom:#00467F;
 +
}
 +
 +
hr.blue{
 +
width:50%;
 +
border-top: 3px solid #00467F;
 +
border-right: 4px solid #E51837;
 +
border-left: 4px solid #E51837;
 +
border-bottom:#E51837;
 +
}
 +
 +
ol ol{
 +
list-style-type:lower-roman;
 +
}
 +
 +
div.syntaxhighlighter{
 +
width:735px !important;
 +
}
 +
 +
code,
 +
.gutter{
 +
font-size:15px;
 +
}
 +
 +
#top-section{
 +
    /*display:none;*/
 +
}
 +
h1.firstHeading{
h1.firstHeading{
-
  display:none;
+
    display:none;
}
}
-
title_bar{
+
 
-
width:940px; z-index:9999; margin-bottom:10px; }
+
#title_bar{
-
title_bar img{
+
width:940px;
-
max-width:940px; }
+
z-index:9999;
 +
margin-bottom:10px;
 +
}
 +
 
 +
#title_bar img{
 +
max-width:940px;
 +
}
 +
 
.menu{
.menu{
-
  clear:both;
+
    clear:both;
-
  width:980px;
+
    width:980px;
-
  position:relative;
+
    position:relative;
-
  left:-10px;
+
    left:-10px;
-
  background-color:#00467F;
+
    background-color:#00467F;
-
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);
+
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);
-
  z-index:501;
+
-moz-box-shadow:   0px 10px 20px -10px rgba(0, 0, 0, 1);
 +
box-shadow:         0px 10px 20px -10px rgba(0, 0, 0, 1);
 +
    z-index:501;
}
}
-
.menu:before, .menu:after{
+
 
-
  content:" ";
+
.menu:before,
-
  border-top:10px solid #0563af;
+
.menu:after{
-
  position:absolute;
+
    content:" ";
-
  top:35px;
+
    border-top:10px solid #0563af;
 +
    position:absolute;
 +
    top:35px;
}
}
 +
.menu:before{
.menu:before{
-
  border-left:10px solid transparent;
+
    border-left:10px solid transparent;
-
  left:0px;
+
    left:0px;
}
}
 +
.menu:after{
.menu:after{
-
  border-right:10px solid transparent;
+
    border-right:10px solid transparent;
-
  right:0px;
+
    right:0px;
}
}
 +
.top_menu {
.top_menu {
-
  list-style-type:none;
+
    list-style-type:none;
-
  display:inline-block;
+
    display:inline-block;
-
  margin:0px 15px;
+
    margin:0px 15px;
-
  padding:0px;
+
    padding:0px;
}
}
 +
.top_menu li{
.top_menu li{
-
  display:inline;
+
    display:inline;
-
  margin:0px;
+
    margin:0px;
-
  float:left;
+
    float:left;
-
  position:relative;
+
    position:relative;
}
}
 +
.top_menu li a{
.top_menu li a{
-
  color:white;
+
    color:white;
-
  text-decoration:none;
+
    text-decoration:none;
-
  display:block;
+
    display:block;
-
  padding:5px 10px;
+
    padding:5px 10px;
-
  margin:0px;
+
    margin:0px;
-
  font:20px bold Cambria,sans-serif;
+
    font:20px bold Cambria,sans-serif;
-
  background-color:#00467F;
+
    background-color:#00467F;
-
  height:25px;
+
    height:25px;
}
}
 +
.top_menu li a:hover{
.top_menu li a:hover{
-
  background-color: #ffffff;
+
    background-color: #ffffff;
-
  color:#00467F;
+
    color:#00467F;
}
}
 +
.top_menu ul {
.top_menu ul {
-
  float:left;
+
    float:left;
-
  list-style-type:none;
+
    list-style-type:none;
-
  margin:-5px 5px 0px;
+
    margin:-5px 5px 0px;
-
  padding:0px;
+
    padding:0px;
-
  position:absolute;
+
    position:absolute;
-
  display:none;
+
    display:none;
-
z-index:999; }
+
z-index:999;
 +
}
 +
 
.top_menu ul li{
.top_menu ul li{
-
  margin:0px;
+
    margin:0px;
-
  display:inline-block;
+
    display:inline-block;
-
  float:left;
+
    float:left;
-
  clear:left;
+
    clear:left;
-
  width:150px;
+
    width:150px;
-
z-index:9999; }
+
z-index:9999;
 +
}
 +
 
.top_menu ul li a{
.top_menu ul li a{
-
  color:white;
+
    color:white;
-
  text-decoration:none;
+
    text-decoration:none;
-
  display:block;
+
    display:block;
-
  padding:5px 15px;
+
    padding:5px 15px;
-
  margin:0px;
+
    margin:0px;
-
  font:12px bold Cambria,sans-serif;
+
    font:12px bold Cambria,sans-serif;
-
  background-color: #00467F;
+
    background-color: #00467F;
-
  height:auto;
+
    height:auto;
}
}
 +
.top_menu ul li a:hover{
.top_menu ul li a:hover{
-
  background-color:#ffffff;
+
    background-color:#ffffff;
-
  color:#00467F;
+
    color:#00467F;
}
}
 +
.page_title h1{/*
.page_title h1{/*
-
  margin:-20px;
+
    margin:-20px;
-
  position:relative;
+
    position:relative;
-
  top:-30px;
+
    top:-30px;
-
  text-align:center;
+
    text-align:center;
-
  font:40px "Finger paint","Lucida Sans Unicode", "Lucida Grande", sans-serif;
+
    font:40px "Finger paint","Lucida Sans Unicode", "Lucida Grande", sans-serif;
-
  color:black;*/
+
    color:black;*/
}
}
 +
.col_1{
.col_1{
-
  width:235px;
+
    width:235px;
-
  display:inline;
+
    display:inline;
-
  float:left;
+
    float:left;
}
}
 +
/**
/**
-
*
+
*
-
* RSS Feed stuff
+
* RSS Feed stuff
-
*
+
*
-
*/
+
*/
-
rss_feed h4{
+
 
-
  color:white;
+
#rss_feed h4{
-
  text-align:center;
+
    color:white;
 +
    text-align:center;
}
}
-
rss_feed_tooltip{
+
 
-
  display:none;
+
#rss_feed_tooltip{
 +
    display:none;
}
}
-
rss_feed,
+
 
-
rss_feed_cover{
+
#rss_feed,
-
  width:150px;
+
#rss_feed_cover{
-
  height:100%;
+
    width:150px;
-
  position:fixed;
+
    height:100%;
-
  top:0px;
+
    position:fixed;
 +
    top:0px;
}
}
-
rss_feed{
+
 
-
  background-color: #E51837;
+
#rss_feed{
-
  box-shadow:0px 0px 20px 5px #D0D0D0;
+
    background-color: #E51837;
-
  z-index:-2;
+
    box-shadow:0px 0px 20px 5px #D0D0D0;
-
  cursor:pointer;
+
    z-index:-2;
-
  color:white;   
+
    cursor:pointer;
 +
    color:white;   
}
}
-
rss_feed_cover{
+
 
-
  background-color: white;
+
#rss_feed_cover{
-
  z-index: -1;
+
    background-color: white;
 +
    z-index: -1;
}
}
-
rss_feed #title{
+
 
-
  position:absolute;
+
#rss_feed #title{
-
  height:100%;
+
    position:absolute;
-
  left:-63px;
+
    height:100%;
-
  padding-top:330px;
+
    left:-63px;
 +
    padding-top:330px;
}
}
-
rss_feed #title h2{
+
 
-
  transform: rotate(-90deg);
+
#rss_feed #title h2{
-
  -ms-transform: rotate(-90deg);
+
    transform: rotate(-90deg);
-
  -webkit-transform: rotate(-90deg);
+
    -ms-transform: rotate(-90deg);
-
  -moz-transform: rotate(-90deg);
+
    -webkit-transform: rotate(-90deg);
-
  font-size:20px;
+
    -moz-transform: rotate(-90deg);
-
color:white;
+
    font-size:20px;
-
  padding:0px;
+
color:white;
-
  margin:0px;
+
    padding:0px;
-
  position:relative;
+
    margin:0px;
-
  left:30px;
+
    position:relative;
 +
    left:30px;
}
}
-
rss_feed #rss_content{
+
 
-
  padding:0px 5px 0px 30px;
+
#rss_feed #rss_content{
 +
    padding:0px 5px 0px 30px;
}
}
 +
/**
/**
-
*
+
*
-
* Social Media Display
+
* Social Media Display
-
*
+
*
-
*/
+
*/
-
social_media{
+
 
-
vertical-align:left; margin:15px 10px -17px; }
+
#social_media{
-
social_media .social_logo{
+
vertical-align:left;
-
  float:left;
+
margin:15px 10px -17px;
}
}
-
social_media img{
+
 
-
height:50px;
+
#social_media .social_logo{
-
  float:right;
+
    float:left;
-
  margin:2px;
+
}
}
-
social_media .box{
+
 
-
text-align:center; float:left; width:305px;
+
#social_media img{
-
  margin:0px 1px;
+
height:50px;
-
  padding:3px;
+
    float:right;
-
vertical-align:middle; }
+
    margin:2px;
-
social_media .box p,
+
-
social_media .box a{
+
-
  text-indent:0px;
+
-
  font-size:12px;
+
-
  color:white;
+
-
text-align:center;
+
-
  /*display: none !important;*/
+
}
}
-
social_media .fb{
+
 
-
  background-color:#6E0610;
+
#social_media .box{
 +
text-align:center;
 +
float:left;
 +
width:305px;
 +
    margin:0px 1px;
 +
    padding:3px;
 +
vertical-align:middle;
}
}
-
social_media .twitter{
+
 
-
  background-color:#6E0610;
+
#social_media .box p,
-
  width:306px;
+
#social_media .box a{
 +
    text-indent:0px;
 +
    font-size:12px;
 +
    color:white;
 +
text-align:center;
 +
    /*display: none !important;*/
}
}
-
social_media .youtube{
+
 
-
  background-color:#6E0610;
+
#social_media .fb{
 +
    background-color:#6E0610;
}
}
 +
 +
#social_media .twitter{
 +
    background-color:#6E0610;
 +
    width:306px;
 +
}
 +
 +
#social_media .youtube{
 +
    background-color:#6E0610;
 +
}
 +
 +
/**
/**
-
*  
+
*  
-
* Image display
+
* Image display
-
*  
+
*  
-
*/
+
*/
-
image_display{
+
 
-
margin-top:-40px; }
+
#image_display{
-
image_display h2,
+
margin-top:-40px;
-
image_display h3,
+
}
-
image_display h4{
+
 
-
/*color:white;*/ margin:10px 2px 0px; text-align:center; }
+
#image_display h2,
-
image_display h3{
+
#image_display h3,
-
text-align:center; }
+
#image_display h4{
-
.image_box{ overflow:hidden; }
+
/*color:white;*/
 +
margin:10px 2px 0px;
 +
text-align:center;
 +
}
 +
 
 +
#image_display h3{
 +
text-align:center;
 +
}
 +
 
 +
.image_box{
 +
overflow:hidden;
 +
}
 +
 
.image_box:hover{
.image_box:hover{
-
  cursor:pointer;
+
    cursor:pointer;
}
}
 +
.display_image{
.display_image{
-
  height:100%;
+
    height:100%;
-
  width:100%;
+
    width:100%;
-
  overflow:hidden;
+
    overflow:hidden;
}
}
 +
.under_text{
.under_text{
-
  padding:5px;
+
    padding:5px;
-
  display:none;
+
    display:none;
-
  color:black;
+
    color:black;
-
overflow:hidden;
+
overflow:hidden;
-
  text-align:center;
+
    text-align:center;
}
}
 +
.under_text img{
.under_text img{
-
  max-width:400px;
+
  max-width:400px;
}
}
 +
.under_text img.small{
.under_text img.small{
-
  max-width:275px;
+
  max-width:275px;
}
}
-
.under_text .spacer_l{ float:left; clear:left; }
+
 
-
.under_text .spacer_r{ float:right; clear:right; }
+
.under_text .spacer_l{
-
.slice img{ width:400px; }
+
float:left;
 +
clear:left;
 +
}
 +
 
 +
.under_text .spacer_r{
 +
float:right;
 +
clear:right;
 +
}
 +
 
 +
.slice img{
 +
width:400px;
 +
}
 +
 
.under_text h3{
.under_text h3{
-
  margin:10px 2px 0px;
+
    margin:10px 2px 0px;
-
  padding:0px 5px;
+
    padding:0px 5px;
}
}
 +
.display_image h2{
.display_image h2{
-
  font-weight:normal;
+
    font-weight:normal;
}
}
-
image_display .cliches .cliche_1,
+
 
-
image_display .cliches .cliche_2,
+
#image_display .cliches .cliche_1,
-
image_display .cliches .cliche_3{
+
#image_display .cliches .cliche_2,
-
  width:140px;
+
#image_display .cliches .cliche_3{
-
  height:140px;
+
    width:140px;
-
  float:left;
+
    height:140px;
-
  background-color:#DADBD5;
+
    float:left;
-
  margin:1px;
+
    background-color:#DADBD5;
-
  padding:2px;
+
    margin:1px;
 +
    padding:2px;
}
}
 +
.cliches .under_text{
.cliches .under_text{
-
  height:100%;
+
    height:100%;
-
  width:100%;
+
    width:100%;
-
  vertical-align:middle;
+
    vertical-align:middle;
-
  text-align:center;
+
    text-align:center;
-
  padding:0px;
+
    padding:0px;
}
}
 +
.cliches p{
.cliches p{
-
  text-indent:0px;
+
    text-indent:0px;
-
  padding:0px;
+
    padding:0px;
-
  margin:0px;
+
    margin:0px;
-
  height:100%;
+
    height:100%;
-
  width:100%;
+
    width:100%;
-
  text-align:center;
+
    text-align:center;
}
}
 +
.cliches img{
.cliches img{
-
  width:140px;
+
    width:140px;
}
}
-
.slice_text{ position:absolute; z-index:3; width:100%; }
+
 
 +
.slice_text{
 +
position:absolute;
 +
z-index:3;
 +
width:100%;
 +
}
 +
 
.left{
.left{
-
  float:left;
+
    float:left;
}
}
 +
.proj_box{
.proj_box{
-
  width:249px;
+
    width:249px;
-
  height:249px;
+
    height:249px;
-
  float:left;
+
    float:left;
-
  margin:1px;
+
    margin:1px;
-
  cursor:pointer;
+
    cursor:pointer;
}
}
 +
.title{
.title{
-
  margin-top:10px;
+
    margin-top:10px;
-
  height:46px;
+
    height:46px;
-
  padding:20px;
+
    padding:20px;
}
}
 +
.title img{
.title img{
-
  width:462px;
+
    width:462px;
}
}
 +
.proj_box img{
.proj_box img{
-
  width:249px;
+
    width:249px;
}
}
 +
.top_left{
.top_left{
-
  background-color:#FDDC99;
+
    background-color:#FDDC99;
}
}
 +
.top_right{
.top_right{
-
  background-color:#8EDADA;
+
    background-color:#8EDADA;
}
}
 +
.bottom_left{
.bottom_left{
-
  background-color:#BFE2AC;
+
    background-color:#BFE2AC;
}
}
 +
.bottom_right{
.bottom_right{
-
  background-color:#FABA9E;
+
    background-color:#FABA9E;
}
}
 +
.project_description{
.project_description{
-
  background-color:#b8dbef;
+
    background-color:#b8dbef;
-
  width:436px;
+
    width:436px;
-
  margin-left:1px;
+
    margin-left:1px;
}
}
 +
/**
/**
-
*
+
*
-
* Pop up box style
+
* Pop up box style
-
*
+
*
-
*/
+
*/
-
pop_up{
+
 
-
  display:none;
+
#pop_up{
-
  z-index:502;
+
    display:none;
-
  position:relative;
+
    z-index:502;
 +
    position:relative;
}
}
-
pop_up_underlay{
+
 
-
height:100%; width:100%; background-color:black; position:fixed;
+
#pop_up_underlay{
-
  left:0px;
+
height:100%;
-
margin:0px;
+
width:100%;
-
  top:0px;
+
background-color:black;
-
opacity:0.8;
+
position:fixed;
-
  text-align:center;
+
    left:0px;
-
  cursor:pointer;  
+
margin:0px;
 +
    top:0px;
 +
opacity:0.8;
 +
    text-align:center;
 +
    cursor:pointer;  
}
}
-
pop_up_display{
+
 
-
height:75%; width:85%; max-width:860px; background-color:white; border-top:10px solid #0563af; border-left:10px solid #0563af; border-right:10px solid #00467F; border-bottom:10px solid #00467F;
+
#pop_up_display{
-
  margin: 5% 35px 0px;
+
height:75%;
-
  position:fixed;
+
width:85%;
-
  padding:5px;
+
max-width:860px;
-
  top:0px;
+
background-color:white;
 +
border-top:10px solid #0563af;
 +
border-left:10px solid #0563af;
 +
border-right:10px solid #00467F;
 +
border-bottom:10px solid #00467F;
 +
    margin: 5% 35px 0px;
 +
    position:fixed;
 +
    padding:5px;
 +
    top:0px;
}
}
-
pop_up_content{
+
 
-
  height:100%;
+
#pop_up_content{
-
  width:96%;
+
    height:100%;
-
  overflow-y:auto;
+
    width:96%;
 +
    overflow-y:auto;
}
}
-
pop_up_close{
+
 
-
  position:relative;
+
#pop_up_close{
-
  z-index:99;
+
    position:relative;
-
  color:grey;
+
    z-index:99;
-
  font-family:Calibri;
+
    color:grey;
-
  float:right;
+
    font-family:Calibri;
-
  margin:-3px 5px 6px;
+
    float:right;
-
  cursor:pointer;
+
    margin:-3px 5px 6px;
-
  font-size:25px;
+
    cursor:pointer;
 +
    font-size:25px;
}
}
 +
/**
/**
-
*
+
*
-
* Preformatted Stuff
+
* Preformatted Stuff
-
*
+
*
-
**/
+
**/
 +
 
.side_menu{
.side_menu{
-
  float:right;
+
    float:right;
-
  width:250px;
+
    width:250px;
-
  font-family:Cambria;
+
    font-family:Cambria;
-
  border-left:5px solid #E51837;
+
    border-left:5px solid #E51837;
-
  margin-right:5px;
+
    margin-right:5px;
-
  margin-bottom:auto;
+
    margin-bottom:auto;
}
}
 +
/**
/**
-
*
+
*
-
* Wiki Specific Stuff
+
* Wiki Specific Stuff
-
* (Overwriting the styles that already exist)
+
* (Overwriting the styles that already exist)
-
*
+
*
-
**/
+
**/
-
content{
+
 
-
  position: relative;
+
#content{
-
  width: 960px;
+
    position: relative;
-
  margin: 0px auto;
+
    width: 960px;
-
  padding: 5px 0px;
+
    margin: 0px auto;
-
  background: white;
+
    padding: 5px 0px;
-
  color: black;
+
    background: white;
-
  border:none;
+
    color: black;
-
  line-height: 1.5em;
+
    border:none;
-
  background-color:white;
+
    line-height: 1.5em;
-
  box-shadow:0px 0px 20px 5px #D0D0D0;
+
    background-color:white;
-
  padding-bottom:10px;
+
    box-shadow:0px 0px 20px 5px #D0D0D0;
 +
    padding-bottom:10px;
}
}
-
/* #content will nest if multiple templates are used, bad practise but something you have to cope with,
+
 
-
  the following overrides certain stylistic features so nested #content divs aren't obvious */
+
/* #content will nest if multiple templates are used, bad practise but something you have to cope with,  
-
content #content{
+
    the following overrides certain stylistic features so nested #content divs aren't obvious */
-
  margin: 0px;
+
#content #content{
-
  padding: 0px;
+
    margin: 0px;
-
  background: transparent;
+
    padding: 0px;
-
  padding-bottom:0px;
+
    background: transparent;
-
  box-shadow:none;
+
    padding-bottom:0px;
 +
    box-shadow:none;
}
}
-
top-section {
+
 
-
  position: relative;
+
#top-section {
-
  width: 960px;
+
    position: relative;
-
  margin: 0 auto 0 auto;
+
    width: 960px;
-
  border:0px;
+
    margin: 0 auto 0 auto;
-
  height:0px;
+
    border:0px;
 +
    height:0px;
}
}
-
p-logo{
+
 
-
  display:none;
+
#p-logo{
 +
    display:none;
}
}
-
search-controls{
+
 
-
  display:none;
+
#search-controls{
 +
    display:none;
}
}
-
mw-content-text{
+
 
 +
#mw-content-text{
}
}
-
toc,
+
 
 +
#toc,  
.toc{
.toc{
-
  float:right;
+
    float:right;
-
  position:relative;
+
    position:relative;
-
  width:200px;
+
    width:200px;
-
  border:none;
+
    border:none;
-
  border-left:5px solid #E51837;
+
    border-left:5px solid #E51837;
-
  margin:0px 0px 0px 10px;
+
    margin:0px 0px 0px 10px;
-
  background-color:#00467F;
+
    background-color:#00467F;
-
  padding:0px;
+
    padding:0px;
}
}
-
toc tbody{
+
 
-
  vertical-align:top;
+
#toc tbody{
 +
    vertical-align:top;
}
}
-
toc h2,
+
 
-
.toc h2{ display:block;
+
#toc h2,
-
  font:20px bold Cambria,sans-serif;
+
.toc h2{
-
  color:white;
+
display:block;
 +
    font:20px bold Cambria,sans-serif;
 +
    color:white;
}
}
 +
.toctoggle{
.toctoggle{
-
  display:none;
+
    display:none;
}
}
-
toc h2,
+
 
 +
#toc h2,
.toc ul{
.toc ul{
-
  list-style-type:none;
+
    list-style-type:none;
-
  padding-left:0px;
+
    padding-left:0px;
}
}
-
tod ul li,
+
 
 +
#tod ul li,
.tod ul li{
.tod ul li{
-
  display:block;
+
    display:block;
-
  margin:0px;
+
    margin:0px;
}
}
-
toc li a,
+
 
 +
#toc li a,
.toc li a{
.toc li a{
-
  padding:5px 5px;
+
    padding:5px 5px;
-
  text-decoration:none;
+
    text-decoration:none;
-
  background-color:#00467F;
+
    background-color:#00467F;
-
  display:block;
+
    display:block;
-
  color:white;
+
    color:white;
-
  font:15px bold "Quando","Georgia",serif;
+
    font:15px bold "Quando","Georgia",serif;
-
  width:200px;
+
    width:200px;
}
}
-
toc li a:hover,
+
 
 +
#toc li a:hover,
.toc li a:hover,
.toc li a:hover,
-
toc li a.active,
+
#toc li a.active,
.toc li a.active{
.toc li a.active{
-
  background-color:white;
+
    background-color:white;
-
  color:#00467F;
+
    color:#00467F;
}
}
-
toc ul li ul,
+
 
 +
#toc ul li ul,
.toc ul li ul{
.toc ul li ul{
-
  /*display:none;*/
+
    /*display:none;*/
-
  margin:0px;
+
    margin:0px;
}
}
 +
.tocnumber{ display:none; }
.tocnumber{ display:none; }
-
.toclevel-3, .toclevel-4{
+
 
-
  display:none;
+
.toclevel-3,
 +
.toclevel-4{
 +
    display:none;
}
}
 +
h2 .editsection{
h2 .editsection{
-
  font:17px "Quando","Georgia",serif;
+
    font:17px "Quando","Georgia",serif;
}
}
 +
h3 .editsection{
h3 .editsection{
-
  font:14px "Quando","Georgia",serif;
+
    font:14px "Quando","Georgia",serif;
}
}
 +
h4 .editsection{
h4 .editsection{
-
  font:12px "Quando","Georgia",serif;
+
    font:12px "Quando","Georgia",serif;
}
}
-
.page_section img{ max-width:700px; }
+
 
 +
.page_section img{
 +
max-width:700px;
 +
}
 +
 
/**
/**
-
*
+
*
-
* DATA TABLES
+
* DATA TABLES
-
*
+
*
-
*/
+
*/
-
table.data{ margin:5px auto 15px; border:2px solid #00467F; border-collapse:collapse; border-spacing:0px; -webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); }
+
-
table.data tr.odd{ background-color:#3399CC; }
+
-
table.data tr.even{ background-color:#0563af; }
+
-
table.data td, table.data th{ border-top:2px dashed #00467F; padding:2px 5px; }
+
-
table.data tr.odd:hover, table.data tr.even:hover{ background-color:#00467F; pointer:cursor; }
+
-
table.data td a{ color:white; }
+
-
table.data td a:hover{ text-decoration:none; color:#E51837; }
+
-
table.data td{ color:white; }
+
-
table.game th, table.game td{ border-right:1px solid #00467F; }
+
-
table.game td{ width:100px; text-align:center; }
+
-
table.Feedback td.text{ width:350px; }
+
-
table.Feedback td.data{ width:50px; }
+
-
div.floatleft{ margin:0px; padding:10px; }
+
-
logos{
+
-
text-align:center; padding:0px; clear:both; }
+
-
/*
+
table.data{
-
960 Grid System ~ Core CSS.
+
margin:5px auto 15px;
-
Learn more ~ http://960.gs/
+
border:2px solid #00467F;
-
Licensed under GPL and MIT.
+
border-collapse:collapse;
-
/
+
border-spacing:0px;
-
/*
+
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);
-
Forces backgrounds to span full width,
+
-moz-box-shadow:   0px 10px 20px -10px rgba(0, 0, 0, 1);
-
even if there is horizontal scrolling.
+
box-shadow:         0px 10px 20px -10px rgba(0, 0, 0, 1);
-
Increase this if your layout is wider.
+
-
Note: IE6 works fine without this fix.
+
-
/
+
-
body {
+
-
min-width: 960px;
+
}
}
-
/* `Container
+
 
-
*/
+
table.data tr.odd{
-
.container_12 {
+
background-color:#3399CC;
-
margin-left: auto;
+
-
margin-right: auto;
+
-
width: 960px;
+
}
}
-
/* `Grid >> Global
+
 
-
*/
+
table.data tr.even{
-
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
+
background-color:#0563af;
-
  display: inline;
+
-
  float: left;
+
-
  margin:0px 10px;
+
}
}
-
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 {
+
 
-
position: relative;
+
table.data td,
 +
table.data th{
 +
border-top:2px dashed #00467F;
 +
padding:2px 5px;
}
}
-
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
+
 
-
*/
+
table.data tr.odd:hover,
-
.alpha {
+
table.data tr.even:hover{
-
margin-left: 0;
+
background-color:#00467F;
 +
pointer:cursor;
}
}
-
.omega {
+
 
-
margin-right: 0;
+
table.data td a{
 +
color:white;
}
}
-
/* `Grid >> 12 Columns
+
 
-
*/
+
table.data td a:hover{
-
.container_12 .grid_1 {
+
text-decoration:none;
-
width: 60px;
+
color:#E51837;
}
}
-
.container_12 .grid_2 {
+
 
-
width: 140px;
+
table.data td{
 +
color:white;
}
}
-
.container_12 .grid_3 {
+
 
-
width: 220px;
+
table.game th,
 +
table.game td{
 +
border-right:1px solid #00467F;
}
}
-
.container_12 .grid_4 {
+
 
-
width: 300px;
+
table.game td{
 +
width:100px;
 +
text-align:center;
}
}
-
.container_12 .grid_5 {
+
 
-
width: 380px;
+
table.Feedback td.text{
 +
width:350px;
}
}
-
.container_12 .grid_6 {
+
 
-
width: 460px;
+
table.Feedback td.data{
 +
width:50px;
}
}
-
.container_12 .grid_7 {
+
 
-
width: 540px;
+
div.floatleft{
-
}
+
margin:0px;
-
.container_12 .grid_8 {
+
padding:10px;
-
width: 620px;
+
-
}
+
-
.container_12 .grid_9 {
+
-
width: 700px;
+
-
}
+
-
.container_12 .grid_10 {
+
-
width: 780px;
+
-
}
+
-
.container_12 .grid_11 {
+
-
width: 860px;
+
-
}
+
-
.container_12 .grid_12 {
+
-
width: 940px;
+
-
}
+
-
/* `Prefix Extra Space >> 12 Columns
+
-
*/
+
-
.container_12 .prefix_1 {
+
-
padding-left: 80px;
+
-
}
+
-
.container_12 .prefix_2 {
+
-
padding-left: 160px;
+
-
}
+
-
.container_12 .prefix_3 {
+
-
padding-left: 240px;
+
-
}
+
-
.container_12 .prefix_4 {
+
-
padding-left: 320px;
+
-
}
+
-
.container_12 .prefix_5 {
+
-
padding-left: 400px;
+
-
}
+
-
.container_12 .prefix_6 {
+
-
padding-left: 480px;
+
-
}
+
-
.container_12 .prefix_7 {
+
-
padding-left: 560px;
+
-
}
+
-
.container_12 .prefix_8 {
+
-
padding-left: 640px;
+
-
}
+
-
.container_12 .prefix_9 {
+
-
padding-left: 720px;
+
-
}
+
-
.container_12 .prefix_10 {
+
-
padding-left: 800px;
+
-
}
+
-
.container_12 .prefix_11 {
+
-
padding-left: 880px;
+
-
}
+
-
/* `Suffix Extra Space >> 12 Columns
+
-
*/
+
-
.container_12 .suffix_1 {
+
-
padding-right: 80px;
+
-
}
+
-
.container_12 .suffix_2 {
+
-
padding-right: 160px;
+
-
}
+
-
.container_12 .suffix_3 {
+
-
padding-right: 240px;
+
-
}
+
-
.container_12 .suffix_4 {
+
-
padding-right: 320px;
+
-
}
+
-
.container_12 .suffix_5 {
+
-
padding-right: 400px;
+
-
}
+
-
.container_12 .suffix_6 {
+
-
padding-right: 480px;
+
-
}
+
-
.container_12 .suffix_7 {
+
-
padding-right: 560px;
+
-
}
+
-
.container_12 .suffix_8 {
+
-
padding-right: 640px;
+
-
}
+
-
.container_12 .suffix_9 {
+
-
padding-right: 720px;
+
}
}
-
.container_12 .suffix_10 {
+
 
-
padding-right: 800px;
+
#logos{
-
}
+
text-align:center;
-
.container_12 .suffix_11 {
+
padding:0px;
-
padding-right: 880px;
+
clear:both;
-
}
+
-
/* `Push Space >> 12 Columns
+
-
*/
+
-
.container_12 .push_1 {
+
-
left: 80px;
+
-
}
+
-
.container_12 .push_2 {
+
-
left: 160px;
+
-
}
+
-
.container_12 .push_3 {
+
-
left: 240px;
+
-
}
+
-
.container_12 .push_4 {
+
-
left: 320px;
+
-
}
+
-
.container_12 .push_5 {
+
-
left: 400px;
+
-
}
+
-
.container_12 .push_6 {
+
-
left: 480px;
+
-
}
+
-
.container_12 .push_7 {
+
-
left: 560px;
+
-
}
+
-
.container_12 .push_8 {
+
-
left: 640px;
+
-
}
+
-
.container_12 .push_9 {
+
-
left: 720px;
+
-
}
+
-
.container_12 .push_10 {
+
-
left: 800px;
+
-
}
+
-
.container_12 .push_11 {
+
-
left: 880px;
+
-
}
+
-
/* `Pull Space >> 12 Columns
+
-
*/
+
-
.container_12 .pull_1 {
+
-
left: -80px;
+
-
}
+
-
.container_12 .pull_2 {
+
-
left: -160px;
+
-
}
+
-
.container_12 .pull_3 {
+
-
left: -240px;
+
-
}
+
-
.container_12 .pull_4 {
+
-
left: -320px;
+
-
}
+
-
.container_12 .pull_5 {
+
-
left: -400px;
+
-
}
+
-
.container_12 .pull_6 {
+
-
left: -480px;
+
-
}
+
-
.container_12 .pull_7 {
+
-
left: -560px;
+
-
}
+
-
.container_12 .pull_8 {
+
-
left: -640px;
+
-
}
+
-
.container_12 .pull_9 {
+
-
left: -720px;
+
-
}
+
-
.container_12 .pull_10 {
+
-
left: -800px;
+
-
}
+
-
.container_12 .pull_11 {
+
-
left: -880px;
+
-
}
+
-
/* `Clear Floated Elements
+
-
*/
+
-
/* http://sonspring.com/journal/clearing-floats */ /* .clear {
+
-
clear: both;
+
-
display: block;
+
-
overflow: hidden;
+
-
visibility: hidden;
+
-
width: 0;
+
-
height: 0;
+
-
}*/
+
-
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
+
-
.clearfix:before, .clearfix:after, .container_12:before, .container_12:after {
+
-
content: '.';
+
-
display: block;
+
-
overflow: hidden;
+
-
visibility: hidden;
+
-
font-size: 0;
+
-
line-height: 0;
+
-
width: 0;
+
-
height: 0;
+
-
}
+
-
.clearfix:after, .container_12:after {
+
-
clear: both;
+
-
}
+
-
/*
+
-
The following zoom:1 rule is specifically for IE6 + IE7.
+
-
Move to separate stylesheet if invalid CSS is a problem.
+
-
/
+
-
.clearfix, .container_12 {
+
-
zoom: 1;
+
}
}

Latest revision as of 03:57, 9 October 2014

/** 

*
* COLOURS
*
* RED:  #E51837
* BLUE: #00467F
*
*/

/** 

*
* Overwriting WIKI-standard style
*
*/

/** 

*
* Custom stuff
*
*/

body{ 

   margin:0px 0px 8px;
   background:url("BareCillus_Background_wiki_light.png") fixed;

font-family:"Helvetica"; }

p{ /*text-indent:15px;*/ 

   font-size:15px;
   padding:5px;
   text-align:left;
   margin:1px 5px 0px;

line-height:1.2em; }

a{ 

   text-decoration:none;
   color:#00467F;

}

ul { margin:.3em 0 0 3em; }

  1. page_content { 
       width:729px;

}

a:visited{ 

   color:#00467F;

}

h1, h2, h3, h4, h5{ 

   color:black;
   background:none;
   font-weight:bold;
   margin:10px;
   padding:5px;
   border:0px;
   font-family:"Helvetica";
   line-height:1.1em;

}

h1{ 

   text-align:center;
   font-size:50px;
   color:black;

}

  1. bodyContent h1{

margin-bottom:5px; }

h2{ 

   font-size:40px;

}

h3{ 

   font-size:32px;

}

h1 .editsection, h2 .editsection, h3 .editsection, h4 .editsection{ display:none; }

h4{ 

   font-size:20px;

}

hr{ width:50%; border-top: 2px solid #E51837; /*border-right: 5px solid white; border-left: 5px solid white; border-bottom:white;*/ margin:0px auto 10px; height:0px; }

hr.blue_bg{ border-right: 5px solid #00467F; border-left: 5px solid #00467F; border-bottom:#00467F; }

hr.blue{ width:50%; border-top: 3px solid #00467F; border-right: 4px solid #E51837; border-left: 4px solid #E51837; border-bottom:#E51837; }

ol ol{ list-style-type:lower-roman; }

div.syntaxhighlighter{ width:735px !important; }

code, .gutter{ font-size:15px; }

  1. top-section{ 
   /*display:none;*/

}

h1.firstHeading{ 

   display:none;

}

  1. title_bar{

width:940px; z-index:9999; margin-bottom:10px; }

  1. title_bar img{

max-width:940px; }

.menu{ 

   clear:both;
   width:980px;
   position:relative;
   left:-10px;
   background-color:#00467F;

-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); 

   z-index:501;

}

.menu:before, .menu:after{ 

   content:" ";
   border-top:10px solid #0563af;
   position:absolute;
   top:35px;

}

.menu:before{ 

   border-left:10px solid transparent;
   left:0px;

}

.menu:after{ 

   border-right:10px solid transparent;
   right:0px;

}

.top_menu { 

   list-style-type:none;
   display:inline-block;
   margin:0px 15px;
   padding:0px;

}

.top_menu li{ 

   display:inline;
   margin:0px;
   float:left;
   position:relative;

}

.top_menu li a{ 

   color:white;
   text-decoration:none;
   display:block;
   padding:5px 10px;
   margin:0px;
   font:20px bold Cambria,sans-serif;
   background-color:#00467F;
   height:25px;

}

.top_menu li a:hover{ 

   background-color: #ffffff;
   color:#00467F;

}

.top_menu ul { 

   float:left;
   list-style-type:none;
   margin:-5px 5px 0px;
   padding:0px;
   position:absolute;
   display:none;

z-index:999; }

.top_menu ul li{ 

   margin:0px;
   display:inline-block;
   float:left;
   clear:left;
   width:150px;

z-index:9999; }

.top_menu ul li a{ 

   color:white;
   text-decoration:none;
   display:block;
   padding:5px 15px;
   margin:0px;
   font:12px bold Cambria,sans-serif;
   background-color: #00467F;
   height:auto;

}

.top_menu ul li a:hover{ 

   background-color:#ffffff;
   color:#00467F;

}

.page_title h1{/* 

   margin:-20px;
   position:relative;
   top:-30px;
   text-align:center;
   font:40px "Finger paint","Lucida Sans Unicode", "Lucida Grande", sans-serif;
   color:black;*/

}

.col_1{ 

   width:235px;
   display:inline;
   float:left;

}

/** 

*
* RSS Feed stuff
*
*/
  1. rss_feed h4{ 
   color:white;
   text-align:center;

}

  1. rss_feed_tooltip{ 
   display:none;

}

  1. rss_feed,
  2. rss_feed_cover{ 
   width:150px;
   height:100%;
   position:fixed;
   top:0px;

}

  1. rss_feed{ 
   background-color: #E51837;
   box-shadow:0px 0px 20px 5px #D0D0D0;
   z-index:-2;
   cursor:pointer;
   color:white;

}

  1. rss_feed_cover{ 
   background-color: white;
   z-index: -1;

}

  1. rss_feed #title{ 
   position:absolute;
   height:100%;
   left:-63px;
   padding-top:330px;

}

  1. rss_feed #title h2{ 
   transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   font-size:20px;

color:white; 

   padding:0px;
   margin:0px;
   position:relative;
   left:30px;

}


  1. rss_feed #rss_content{ 
   padding:0px 5px 0px 30px;

}

/** 

*
* Social Media Display
*
*/
  1. social_media{

vertical-align:left; margin:15px 10px -17px; }

  1. social_media .social_logo{ 
   float:left;

}

  1. social_media img{

height:50px; 

   float:right;
   margin:2px;

}

  1. social_media .box{

text-align:center; float:left; width:305px; 

   margin:0px 1px;
   padding:3px;

vertical-align:middle; }

  1. social_media .box p,
  2. social_media .box a{ 
   text-indent:0px;
   font-size:12px;
   color:white;

text-align:center; 

   /*display: none !important;*/

}

  1. social_media .fb{ 
   background-color:#6E0610;

}

  1. social_media .twitter{ 
   background-color:#6E0610;
   width:306px;

}

  1. social_media .youtube{ 
   background-color:#6E0610;

}


/** 

* 
* Image display
* 
*/
  1. image_display{

margin-top:-40px; }

  1. image_display h2,
  2. image_display h3,
  3. image_display h4{

/*color:white;*/ margin:10px 2px 0px; text-align:center; }

  1. image_display h3{

text-align:center; }

.image_box{ overflow:hidden; }

.image_box:hover{ 

   cursor:pointer;

}

.display_image{ 

   height:100%;
   width:100%;
   overflow:hidden;

}

.under_text{ 

   padding:5px;
   display:none;
   color:black;

overflow:hidden; 

   text-align:center;

}

.under_text img{ 

  max-width:400px;

}

.under_text img.small{ 

  max-width:275px;

}

.under_text .spacer_l{ float:left; clear:left; }

.under_text .spacer_r{ float:right; clear:right; }

.slice img{ width:400px; }

.under_text h3{ 

   margin:10px 2px 0px;
   padding:0px 5px;

}

.display_image h2{ 

   font-weight:normal;

}

  1. image_display .cliches .cliche_1,
  2. image_display .cliches .cliche_2,
  3. image_display .cliches .cliche_3{ 
   width:140px;
   height:140px;
   float:left;
   background-color:#DADBD5;
   margin:1px;
   padding:2px;

}

.cliches .under_text{ 

   height:100%;
   width:100%;
   vertical-align:middle;
   text-align:center;
   padding:0px;

}

.cliches p{ 

   text-indent:0px;
   padding:0px;
   margin:0px;
   height:100%;
   width:100%;
   text-align:center;

}

.cliches img{ 

   width:140px;

}

.slice_text{ position:absolute; z-index:3; width:100%; }

.left{ 

   float:left;

}

.proj_box{ 

   width:249px;
   height:249px;
   float:left;
   margin:1px;
   cursor:pointer;

}

.title{ 

   margin-top:10px;
   height:46px;
   padding:20px;

}

.title img{ 

   width:462px;

}

.proj_box img{ 

   width:249px;

}

.top_left{ 

   background-color:#FDDC99;

}

.top_right{ 

   background-color:#8EDADA;

}

.bottom_left{ 

   background-color:#BFE2AC;

}

.bottom_right{ 

   background-color:#FABA9E;

}

.project_description{ 

   background-color:#b8dbef;
   width:436px;
   margin-left:1px;

}

/** 

*
* Pop up box style
*
*/
  1. pop_up{ 
   display:none;
   z-index:502;
   position:relative;

}

  1. pop_up_underlay{

height:100%; width:100%; background-color:black; position:fixed; 

   left:0px;

margin:0px; 

   top:0px;

opacity:0.8; 

   text-align:center;
   cursor:pointer;

}

  1. pop_up_display{

height:75%; width:85%; max-width:860px; background-color:white; border-top:10px solid #0563af; border-left:10px solid #0563af; border-right:10px solid #00467F; border-bottom:10px solid #00467F; 

   margin: 5% 35px 0px;
   position:fixed;
   padding:5px;
   top:0px;

}

  1. pop_up_content{ 
   height:100%;
   width:96%;
   overflow-y:auto;

}

  1. pop_up_close{ 
   position:relative;
   z-index:99;
   color:grey;
   font-family:Calibri;
   float:right;
   margin:-3px 5px 6px;
   cursor:pointer;
   font-size:25px;

}

/** 

*
* Preformatted Stuff
*
**/

.side_menu{ 

   float:right;
   width:250px;
   font-family:Cambria;
   border-left:5px solid #E51837;
   margin-right:5px;
   margin-bottom:auto;

}

/** 

*
* Wiki Specific Stuff
* (Overwriting the styles that already exist)
*
**/
  1. content{ 
   position: relative;
   width: 960px;
   margin: 0px auto;
   padding: 5px 0px;
   background: white;
   color: black;
   border:none;
   line-height: 1.5em;
   background-color:white;
   box-shadow:0px 0px 20px 5px #D0D0D0;
   padding-bottom:10px;

}

/* #content will nest if multiple templates are used, bad practise but something you have to cope with, 

   the following overrides certain stylistic features so nested #content divs aren't obvious */
  1. content #content{ 
   margin: 0px;
   padding: 0px;
   background: transparent;
   padding-bottom:0px;
   box-shadow:none;

}

  1. top-section { 
   position: relative;
   width: 960px;
   margin: 0 auto 0 auto;
   border:0px;
   height:0px;

}

  1. p-logo{ 
   display:none;

}

  1. search-controls{ 
   display:none;

}

  1. mw-content-text{

}

  1. toc,

.toc{ 

   float:right;
   position:relative;
   width:200px;
   border:none;
   border-left:5px solid #E51837;
   margin:0px 0px 0px 10px;
   background-color:#00467F;
   padding:0px;

}

  1. toc tbody{ 
   vertical-align:top;

}

  1. toc h2,

.toc h2{ display:block; 

   font:20px bold Cambria,sans-serif;
   color:white;

}

.toctoggle{ 

   display:none;

}

  1. toc h2,

.toc ul{ 

   list-style-type:none;
   padding-left:0px;

}

  1. tod ul li,

.tod ul li{ 

   display:block;
   margin:0px;

}

  1. toc li a,

.toc li a{ 

   padding:5px 5px;
   text-decoration:none;
   background-color:#00467F;
   display:block;
   color:white;
   font:15px bold "Quando","Georgia",serif;
   width:200px;

}

  1. toc li a:hover,

.toc li a:hover,

  1. toc li a.active,

.toc li a.active{ 

   background-color:white;
   color:#00467F;

}

  1. toc ul li ul,

.toc ul li ul{ 

   /*display:none;*/
   margin:0px;

}

.tocnumber{ display:none; }

.toclevel-3, .toclevel-4{ 

   display:none;

}

h2 .editsection{ 

   font:17px "Quando","Georgia",serif;

}

h3 .editsection{ 

   font:14px "Quando","Georgia",serif;

}

h4 .editsection{ 

   font:12px "Quando","Georgia",serif;

}

.page_section img{ max-width:700px; }

/** 

*
* DATA TABLES
*
*/

table.data{ margin:5px auto 15px; border:2px solid #00467F; border-collapse:collapse; border-spacing:0px; -webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); }

table.data tr.odd{ background-color:#3399CC; }

table.data tr.even{ background-color:#0563af; }

table.data td, table.data th{ border-top:2px dashed #00467F; padding:2px 5px; }

table.data tr.odd:hover, table.data tr.even:hover{ background-color:#00467F; pointer:cursor; }

table.data td a{ color:white; }

table.data td a:hover{ text-decoration:none; color:#E51837; }

table.data td{ color:white; }

table.game th, table.game td{ border-right:1px solid #00467F; }

table.game td{ width:100px; text-align:center; }

table.Feedback td.text{ width:350px; }

table.Feedback td.data{ width:50px; }

div.floatleft{ margin:0px; padding:10px; }

  1. logos{

text-align:center; padding:0px; clear:both; }

Retrieved from "http://2013.igem.org/Team:The_Tech_Museum/CSS/main_design"