Team:The Tech Museum/Templates/Main

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
{{:Team:The_Tech_Museum/CSS/main_design}}
 +
{{:Team:The_Tech_Museum/CSS/col_layout}}
<html>
<html>
-
        <link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:The_Tech_Museum/CSS/main_design?action=raw&ctype=text/css">
 
-
        <link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:The_Tech_Museum/CSS/col_layout?action=raw&ctype=text/css">
 
</head>
</head>
<body bgcolor="black">
<body bgcolor="black">

Revision as of 18:18, 9 October 2014

/** 

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

}

Retrieved from "http://2014.igem.org/Team:The_Tech_Museum/Templates/Main"
Home Team Official Team Profile Project Parts Modeling Notebook Safety Attributions