Template:Team:TPHS/Main
From 2014hs.igem.org
<style> #content{ width: 100%; margin: 0; padding: 0; background-color:transparent; border: none; }
#bodyContent{ width: 100%; margin: 0; padding: 0; background-color:transparent; border: none; } </style>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Antic+Slab' rel='stylesheet' type='text/css'>
<style>
- top-section{
height: 25px; margin-bottom: 0; border: none; background: #737373; width: 100%; position: fixed; top: 0; z-index: 10; }
- header {
width: 1050px; text-align: left; margin-left: auto; margin-right: auto; margin-bottom: 0; }
- p-logo {
display: none; }
- search-controls {
overflow:hidden; display:none; background: none; position: absolute; top: 170px; right: 40px; }
- searchform {
display: none;
}
.left-menu, .right-menu{ position: absolute; background: none; color: black; margin-top: 4px; }
.left-menu a, .left-menu li {
color: #000000;
}
.left-menu ul:hover a { color: #000000; }
.left-menu ul li, .right-menu ul li a { background: none; color: #000000; }
.left-menu li a:hover, .right-menu li a:hover, .left-menu li:hover, .right-menu li:hover {
color: #000000;
}
- top-section div#menubar.left-menu ul li:nth-child(7) {
display: none; }
.left-menu ul:hover, .right-menu ul:hover { background: #737373; color: #000000; }
- content{
margin-top: -13px; padding: 0; border: 0; }
.firstHeading { visibility:hidden; display:none; }
- catlinks{
display:none; }
- menubar ul:hover {
color: transparent; } /*important for background colours*/ .mediawiki{ background: #ffffff; }
- footer-box {
display: none; } /*End minimal header*/
/* reset browser styles */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 16px; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1.2; }
table { border-collapse: collapse; border-spacing: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style: square; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; }
- {
box-sizing: border-box; -moz-box-sizing: border-box; } /* end reset browser styles */
</style>
<style>
- TopBar {
background: #590E13; width: 100%; min-width: 762px; height: 89px; z-index: 10; position: fixed; text-align: center; top: 25px; }
- TopBar #TopLvlNavLink {
display: none; }
- TopBar ul {
background: #590E13; list-style: none; position: relative; display: inline-table; padding: 0; margin: 0; }
- TopBar ul:after {
content: ""; clear: both; display: block; }
- TopBar li {
float: left; width: 124px; text-align: center; }
- TopBar li:hover > a {
text-decoration: underline; }
- TopBar a {
display: block; width: 100%; height: 100%; padding: 15px 0; color: #FFFFFF; text-decoration: none; font: 24px Raleway, Arial, san-serif; }
- TopBar > #TopLvlNav > li > a {
padding: 29px 0; }
- TopBar ul ul {
display: none; background: #590E13; padding: 0 10px; position: absolute; top: 95%; z-index: 10; margin-left: -10px; }
- TopBar ul li:hover > ul {
display: block; }
- TopBar ul ul li {
float: none; position: relative; }
- TopBar ul ul a {
font-size: 18px; }
- TopBar ul ul ul {
position: absolute; left: 100%; top: 0; margin: 0; }
@keyframes rotate {
from { transform: rotate(0deg); -ms-transform: rotate(0deg); } to { transform: rotate(59deg); -ms-transform: rotate(59deg); }
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(59deg); }
}
@-moz-keyframes rotate {
from { transform: rotate(0deg); } to { transform: rotate(59deg); }
}
@-o-keyframes rotate {
from { transform: rotate(0deg); } to { transform: rotate(59deg); }
}
- TopBar #LogoItem:hover > img {
-webkit-animation-name: rotate; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;
}
- TopBar #LogoItem {
padding: 8px 0; }
- TopBarCollapse {
position: fixed; width: 120px; height: 60px; top: 25px; background: orange; z-index: 10; }
- TopBarCollapse #TopLvlNavLink {
display: block; width: 100%; height: 100%; }
- TopBarCollapse:after {
content: ""; clear: both; display: block; }
- TopBarCollapse ul {
display: none; list-style: none; padding: 0; }
- TopBarCollapse ul:after {
content: ""; clear: both; display: block; }
- TopBarCollapse li {
float: left; display: block; clear: both; width: 120px; padding: 0; background: green; }
- TopBarCollapse li:hover {
background: pink; }
- TopBarCollapse a {
color: #FFFFFF; display: block; text-decoration: none; padding: 10px 15px; }
- TopBarCollapse #LogoItem {
display: none !important; }</style>
<style>
html{
background-image:url('http://fc04.deviantart.net/fs71/f/2011/293/0/1/dark_textured_background_6_by_dianascreations-d4dgfhb.jpg');
}
body { min-width: 766px; }
- globalWrapper {
padding-bottom: 0; }
- bodyContent {
background-image:url('http://fc04.deviantart.net/fs71/f/2011/293/0/1/dark_textured_background_6_by_dianascreations-d4dgfhb.jpg'); text-align: center; }
- contentSub{
display: none;
}
- Banner h1 {
font: 72px/180px Raleway, Arial, sans-serif; font-weight: 900; color: #231F20; }
- Banner i {
font-size: 72px; }
- Content {
position: relative; top: 108px; height: 100%; width: 100%; max-width: 1200px; background: #E7E7E7; display: inline-block; padding: 30px 50px; box-shadow: 0px 8px 10px #888, -10px 8px 15px #888, 10px 8px 15px #888; margin-bottom: 20px; }
- Content img {
margin: 4px 20px 12px 20px; }
- Content h1, #Content h2, #Content h3, #Content h4, #Content h5, #Content h6 {
font-family: 'Raleway', Helvetica, Arial, sans-serif; line-height: 1.6; text-align: left; }
- Content h1 {
font-size: 35px; font-weight: 700; border-bottom: 3px solid #5A5A5A; color: #111111; margin: 0 -20px 30px -20px; padding-left: 20px; }
- Content h1 > i, #Content h1 > em {
font-size: 35px; }
- Content h2 {
font-size: 28px; font-weight: 600; color: #333333; margin-top: 30px; }
- Content h2 > i, #Content h2 > em {
font-size: 28px; }
- Content h3 {
font-size: 26px; font-weight: 500; color: #333333; padding-left: 20px; }
- Content h4 {
font-size: 20px; font-weight: 500; color: #333333; padding-left: 20px; }
- Content h3 > i, #Content h3 > em {
font-size: 26px; }
- Content p {
font: 18px/1.6 'Segoe UI', Calibri, Helvetica, sans-serif; margin: 4px 0 12px 0; padding-left: 20px; text-indent:55px; color: #000000; text-align:justify; text-justify:inter-word; }
- Content a {
font: 18px/1.6 'Segoe UI', Calibri, Helvetica, sans-serif; }
- Content i, #Content em, #Content b, #Content strong {
font-size: 18px; }
- Content li a {
line-height: 1; }
- Content sub {
vertical-align: sub; font-size: 69%; }
- Content sup {
vertical-align: super; font-size: 69%; }
- Content span {
font-size: inherit; }
- Content .noIndent {
text-indent: 0; }
- Content .Blue, #Content .blue {
color: #299D7F; }
- Content .Green, #Content .green {
color: #87CA7A; }
- Content .Orange, #Content .orange {
color: #FF5900; }
- Content .Yellow, #Content .yellow {
color: #EDB74B; }
- Content ul, #Content ol {
padding-left: 40px; }
- Content li {
font: 18px/1 'Segoe UI', Calibri, Helvetica, sans-serif; margin: 4px 0 12px 0; color: #000000; text-align:justify; text-justify:inter-word; }
- Content table {
background: none; margin: 4px 20px 12px 20px; }
- Content td {
border: 1px solid #000000; padding: 5px; }
- Content figure {
margin-bottom: 20px; }
- Content figcaption {
padding: 0 50px; }
- Content figcaption p, #Content figcaption b, #Content figcaption i, #Content figcaption u, #Content figcaption em, #Content figcaption strong {
font-family: Arial, sans-serif; font-size: 14px; text-indent: 0; text-align: center; }
- Content h3 + p, h3 + p + p, h3 + p + p + p, h3 + p + p + p + p {
padding-left: 40px; }
- ButtonsSection {
overflow: hidden; width: 100%; margin: 0 auto; padding: 10px; text-align: center; }
- ButtonsSection a:hover {
text-decoration: none; }
- ButtonsSection .Button {
float: left; margin: 5px; width: 280px; }
- ButtonsSection .Button img{
margin: 20px; }
- ButtonsSection .Clear {
clear: both; }
- ButtonsSection .Wrap {
padding: 5px; margin: auto; width: 580px; display: block; margin: auto; border: 0; padding: 0; }
- ButtonsSection .Button {
background: #4F494A; padding: 20px; position: relative; }
- ButtonsSection .Button p {
padding-left: 0; text-indent: 0; position: absolute; bottom: 10px; padding-right: 20px; }
- ButtonsSection .Button h2 {
margin: 0 0 20px 0; }
- ButtonsSection #Button1 {
background: #299D77; }
- ButtonsSection #Button1:hover {
background: #53B092; }
- ButtonsSection #Button2 {
background: #87CA7A; }
- ButtonsSection #Button2:hover {
background: #9FD494; }
- ButtonsSection #Button3 {
background: #E68930; }
- ButtonsSection #Button3:hover {
background: #EBA059; }
- ButtonsSection #Button4 {
background: #EDB74B; }
- ButtonsSection #Button4:hover {
background: #F0C56E; }
- ButtonsSection #Button5 {
background: #CB1F10; margin-left: 150px; }
- ButtonsSection #Button5:hover {
background: #D54B3F; } </style>
<script>
$(document).ready(function() {
$('a[href^="http://"]').not('[href*="Team:TP_CC-SanDiego"]').attr('target', '_blank');
$('a[href^="https://"]').not('[href*="Team:TP_CC-SanDiego"]').attr('target', '_blank');
if ($('body').width() > 868) { $('#LogoItem').css('display', 'block'); } else if ($('body').width() <= 868) { $('#LogoItem').css('display', 'none'); }
$(window).resize(function() { if ($('body').width() > 868) { $('#LogoItem').css('display', 'block'); } else if ($('body').width() <= 868) { $('#LogoItem').css('display', 'none'); } });
$('a[href^="#"]').click(function() { var target = $(this.hash); if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]'); if (target.length == 0) target = $('html'); $('html, body').animate({ scrollTop: target.offset().top-100 }, 1000); return false; }); }); </script>
</head>
<body>
<section id="Page"> <header id="TopBar">