Team:The Tech Museum/CSS/main design
From 2014.igem.org
/**
* * Overwriting WIKI-standard style * */
/**
* * Custom stuff * */
body{
margin:0px 0px 8px; background-color: black; font-family:"Verdana";
}
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;
}
a:visited{
color:#00467F;
}
h1{
text-align:center; font-size:50px; color:black;
}
h2{
font-size:40px;
}
h3{
font-size:32px;
}
h4{
font-size:20px;
}
ol{
list-style-type:lower-roman;
}
div.syntaxhighlighter{
width:735px !important;
}
code, .gutter{
font-size:15px;
}
.top-section{
/*display:none;*/
}
h1.firstHeading{
display:none;
}
.title_bar{
width:940px; z-index:9999; margin-bottom:10px;
}
.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 Verdana,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 Verdana,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 Verdana, sans-serif; color:black;*/
}
.col_1{
width:235px; display:inline; float:left;
}
.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 * */
.pop_up{
display:none; z-index:502; position:relative;
}
.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;
}
.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;
}
.pop_up_content{
height:100%; width:96%; overflow-y:auto;
}
.pop_up_close{
position:relative; z-index:99; color:grey; font-family:Verdana; float:right; margin:-3px 5px 6px; cursor:pointer; font-size:25px;
}
/**
* * Preformatted Stuff * **/
.side_menu{
float:right; width:250px; font-family:Verdana; border-left:5px solid #E51837; margin-right:5px; margin-bottom:auto;
}
/**
* * Wiki Specific Stuff * (Overwriting the styles that already exist) * **/
- content{
position: relative; width: 960px; margin: 0px auto; padding: 5px 0px; background: black; color: black; border:none; line-height: 1.5em; background-color:black; 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 #content{
margin: 0px; padding: 0px; background: transparent; padding-bottom:0px; box-shadow:none;
}
- top-section {
position: relative; width: 960px; margin: 0 auto 0 auto; border:0px; height:0px;
}
- p-logo{
display:none;
}
- search-controls{
display:none;
}
- mw-content-text{
}
- 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;
}
- toc tbody{
vertical-align:top;
}
- toc h2,
.toc h2{ display:block;
font:20px bold Verdana,sans-serif; color:white;
}
.toctoggle{
display:none;
}
- toc h2,
.toc ul{
list-style-type:none; padding-left:0px;
}
- tod ul li,
.tod ul li{
display:block; margin:0px;
}
- toc li a,
.toc li a{
padding:5px 5px; text-decoration:none; background-color:#00467F; display:block; color:white; font:15px bold Verdana,sans-serif; width:200px;
}
- toc li a:hover,
.toc li a:hover,
- toc li a.active,
.toc li a.active{
background-color:white; color:#00467F;
}
- 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 Verdana,sans-serif;
}
h3 .editsection{
font:14px Verdana,sans-serif;
}
h4 .editsection{
font:12px Verdana,sans-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;
}
- logos{
text-align:center; padding:0px; clear:both;
}