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)
*
**/
  1. 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 */
  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 Verdana,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 Verdana,sans-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 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;

}

  1. logos{
   text-align:center;
   padding:0px;
   clear:both;

}