Team:The Tech Museum/Templates/Main

From 2014.igem.org

Revision as of 18:18, 9 October 2014 by Romie (Talk | contribs)

/**

*
* 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;

} /*

 960 Grid System ~ Core CSS.
 Learn more ~ http://960.gs/
 Licensed under GPL and MIT.
  • /

/*

 Forces backgrounds to span full width,
 even if there is horizontal scrolling.
 Increase this if your layout is wider.
 Note: IE6 works fine without this fix.
  • /

body {

 min-width: 960px;
 background-color: #000000;

}

/* `Container


*/

.container_12 {

 margin-left: auto;
 margin-right: auto;
 width: 960px;

}

/* `Grid >> Global


*/

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {

   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;

}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)


*/

.alpha {

 margin-left: 0;

}

.omega {

 margin-right: 0;

}

/* `Grid >> 12 Columns


*/

.container_12 .grid_1 {

 width: 60px;

}

.container_12 .grid_2 {

 width: 140px;

}

.container_12 .grid_3 {

 width: 220px;

}

.container_12 .grid_4 {

 width: 300px;

}

.container_12 .grid_5 {

 width: 380px;

}

.container_12 .grid_6 {

 width: 460px;

}

.container_12 .grid_7 {

 width: 540px;

}

.container_12 .grid_8 {

 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;

}

.container_12 .suffix_11 {

 padding-right: 880px;

}

/* `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;

}

Home Team Official Team Profile Project Parts Modeling Notebook Safety Attributions