Team:The Tech Museum/CSS/main design

From 2013.igem.org

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

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/**

COLOURS
RED: #E51837
BLUE: #00467F
/

/**

Overwriting WIKI-standard style
/

/**

Custom stuff
/

body{

  margin:0px 0px 8px;

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

} 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; } 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 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
/

rss_feed h4{

  color:white;
  text-align:center;

} rss_feed_tooltip{

  display:none;

} rss_feed, rss_feed_cover{

  width:150px;
  height:100%;
  position:fixed;
  top:0px;

} rss_feed{

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

} rss_feed_cover{

  background-color: white;
  z-index: -1;

} rss_feed #title{

  position:absolute;
  height:100%;
  left:-63px;
  padding-top:330px;

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

}

rss_feed #rss_content{

  padding:0px 5px 0px 30px;

} /**

Social Media Display
/

social_media{ vertical-align:left; margin:15px 10px -17px; } social_media .social_logo{

  float:left;

} social_media img{ height:50px;

  float:right;
  margin:2px;

} social_media .box{ text-align:center; float:left; width:305px;

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

vertical-align:middle; } 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 .twitter{

  background-color:#6E0610;
  width:306px;

} social_media .youtube{

  background-color:#6E0610;

}

/**

Image display
/

image_display{ margin-top:-40px; } image_display h2, image_display h3, image_display h4{ /*color:white;*/ margin:10px 2px 0px; text-align:center; } 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;

} image_display .cliches .cliche_1, image_display .cliches .cliche_2, 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
/

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: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)
- /

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

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 Cambria,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 "Quando","Georgia",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 "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; } 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;

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

}