Team:TU-Delft/Templates/Style

From 2013.igem.org

(Difference between revisions)
 
(806 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<style>
+
<style type="text/css">
 +
@charset "UTF-8";
-
/* Removing wiki-like stuff */
+
#searchInput {
-
/****************************/
+
display:none;
-
/*#contentSub, #search-controls,*/ .firstHeading, /* #footer-box, #catlinks,*/ #p-logo {
+
}
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
     display:none;}
     display:none;}
-
 
-
/* Redesigning the topmenu */
 
-
/***************************/
 
-
 
#top-section {
#top-section {
-
     border: 0 none;
+
     border: none;
-
     height: 30px;
+
     height: 0px;}
 +
#content {
 +
    border: none;}
 +
#top-section{
 +
  height: 20px !important;
 +
  border: none !important;
 +
  border-top: none;
}
}
#menubar {
#menubar {
-
    border: medium none;
+
display: table-cell;
-
    float: left;
+
background: transparent;
-
    font-size: 85%;
+
-
    height: 18px;
+
-
    position: top;
+
-
    top: 0;
+
}
}
-
#menubar li a {
+
 
-
    color: #868686;
+
#menubar.left-menu {
 +
width: 100%;
}
}
 +
#menubar.right-menu {
#menubar.right-menu {
-
    background-color: #494D51;
+
text-align: right;
-
    border-bottom: 1px solid black;
+
-
    right: auto;
+
-
    text-align: right;
+
-
    width: 977px;
+
-
    z-index: 7;
+
}
}
-
#menubar.left-menu {
+
 
-
    left: auto;
+
#menubar * {
-
    text-align: left;
+
color: transparent !important;
-
    width: auto;
+
background: transparent !important;
-
    z-index: 9;
+
}
}
-
/* Layout */
 
-
/**********/
 
-
/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */
 
 +
#top-section:hover #menubar * {
 +
color: grey !important;
 +
}
 +
#top-section:hover #menubar.left-menu {
 +
background: rgba(255, 255, 255, 0.75) !important;
 +
}
-
/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */
 
 +
html {
 +
     
 +
width:100%;
 +
height:100%;
 +
background:transparent;
 +
border:none;
 +
margin:0;
-
/* CSS Document */
 
-
 
-
 
-
/* General */
 
-
 
-
* {
 
-
margin: 0;
 
-
padding: 0;
 
}
}
-
html {
 
-
height: 100%;
 
-
font-size: 62.5%;
 
-
}
 
body {
body {
-
height: 100%;
+
width:100%;
-
text-align: center;
+
height:100%;
-
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
+
background:url("https://static.igem.org/mediawiki/2013/3/32/BackroundDelft.jpg");
-
background-color: #ACCEF3;
+
        background-repeat:no-repeat;
-
min-width: 850px;
+
        background-size: 100% 100%;
-
padding-bottom: 80px; /* Simulates margin-bottom for wrapper in IE */
+
        background-size: auto, cover;
 +
        background-position:absolute;
 +
border:none;
 +
padding-top:20px;
 +
        padding-right:0px;
 +
        padding-bottom:20px;
 +
        padding-left:0px;
 +
        font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
 +
        font-size: small;
 +
z-index:800;
}
}
-
 
+
#contentbox {
-
a:link, a:visited {
+
width: 85%;
-
color: #00598D;
+
position: relative;
-
text-decoration: underline;
+
background:white;
-
font-weight: bold;
+
width:850px;
 +
margin: -10px auto 0 auto;
 +
padding:20px 50px 50px 25px;
 +
 +
text-decoration:none;
 +
border:none;
 +
z-index:800;
}
}
-
a:hover {
+
#contentboxnew {
-
text-decoration: none;
+
 
 +
background:white;
 +
width:800px;
 +
margin: -10px auto 0 auto;
 +
padding:20px 50px 50px 50px;
 +
float: left;
 +
text-decoration:none;
 +
border:none;
 +
z-index:800;
}
}
-
.cleaner {
+
#contentboxnew1 {
-
clear: both;
+
-
height: 0;
+
-
font-size: 0;
+
-
visibility: hidden;
+
-
}
+
-
.noscreen {
+
background:white;
-
display: none;
+
width:800px;
 +
margin: -10px auto 0 auto;
 +
padding:20px 50px 50px 50px;
 +
float: left;
 +
text-decoration:none;
 +
border:none;
 +
z-index:800;
}
}
 +
table#tbtext
 +
{
 +
width:400px;
 +
font-weight:400;
 +
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 +
font-size: 10px;
 +
text-align: left;
 +
padding-left: 3px;
 +
text-align: justify;
 +
}
-
/* Paragraphs, headings, ... */
 
-
p {
+
#frog {
-
line-height: 1.9;
+
position:absolute;
-
margin-bottom: 7px;
+
top:350px; left:-260px;
}
}
-
p.text-content:first-letter {
+
#logo {
-
font-size: 1.4em;
+
position:absolute;
-
font-weight: bold;
+
top:20px; left:-150px;
-
line-height: 0.9;
+
-
color: #202020;
+
-
font-family: Georgia, "Times New Roman", Times, serif;
+
}
}
-
h1 {
+
/* HERE CHANGE THE HEADER */
-
font: 2.6em  Georgia, "Times New Roman", Times, serif;
+
-
margin: 0 0 10px 40px;
+
-
border-bottom: 1px solid #4C8CA6;
+
-
width: 55%;
+
-
padding: 15px 0 5px 0;
+
-
}
+
-
h1 a:link, h1 a:visited {
+
#header{
-
font-weight: normal;
+
        background:url("https://static.igem.org/mediawiki/2013/9/97/Horizontal-banner-2.jpg");
-
text-decoration: none;
+
background-repeat:no-repeat;
-
color: #FFFFFF;
+
background-position: left bottom;
-
}
+
-
h2 {
+
background-size: 100% 100%;
-
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-
letter-spacing: 1px;
+
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* for the Safari browser */
-
color: #FFFFFF;
+
width: 100%;
-
border-left: 3px solid #FFAE20;
+
height: 150px; 
-
padding-left: 14px;
+
    /*border-top: 1px solid #660000;
-
margin: 12px 0 0 40px;
+
    border-bottom: 1px solid #660000;*/
}
}
-
h3 {
+
#fb-like-box {
-
color: #00598D;
+
position:absolute;
-
font: 1.7em Georgia, "Times New Roman", Times, serif;
+
top:160px; right:-265px;
-
letter-spacing: 1px;
+
-
background: url('../img/h3-bg.gif') no-repeat 0 50%;
+
-
padding-left: 35px;
+
-
margin: 18px 0 10px 0;
+
}
}
-
h4 {
+
#counter {                   /* Add it with zero botom and zero left in order to fix it later */
-
font-size: 1em;
+
  position:absolute;
-
background-color: #005E85;
+
  top:800px; right:-227px;
-
color: #FFFFFF;
+
-
letter-spacing: 1px;
+
-
border: 2px solid #FFFFFF;
+
-
margin-top: 7px;
+
-
padding: 6px 10px;
+
-
}
+
-
ul {
+
  }
-
list-style-type: none;  
+
#counter2{
 +
    position:absolute;
 +
    top:800px; right:-187px;
}
}
-
/* Site wrapper */
+
#menu, #menu ul {
-
 
+
margin: 0;
-
#wrapper {
+
padding: 0;
-
width: 850px;
+
list-style: none;
-
margin: 0 auto 80px auto;
+
       
-
position: relative;
+
-
background-color: #FFFFFF;
+
-
display: table; /* margin-bottom for FF  (?) */
+
-
text-align: left;
+
}
}
-
 
+
#menu {
-
/* Header */
+
width: 100%;
-
 
+
      padding-top:6px;
-
#header {
+
      padding-bottom:6px;
-
margin: 0 auto;
+
border: 1px solid #222;
-
height: 157px;
+
background-color: #111;
-
position: relative;
+
background-image: linear-gradient(#444, #111);
-
background: #004E6C url('../img/header-bg.gif') repeat-x 0 0;
+
border-radius: 6px;
-
border-top: 4px solid #003042;
+
box-shadow: 0 1px 1px #777;
-
border-bottom: 1px solid #46A0CA;
+
margin-top: 0px;
 +
margin-right:0px;
 +
}
 +
#menu:before,
 +
#menu:after {
 +
content: "";
 +
display: table;
}
}
-
#header-arrow {
+
#menu:after {
-
position: absolute;
+
clear: both;
-
top: 0;
+
-
right: 50px;
+
-
background: url('../img/header-arrow.gif') no-repeat 0 0;
+
-
width: 148px;
+
-
height: 105px;
+
}
}
-
 
-
 
-
/* Menu */
 
#menu {
#menu {
-
width: 850px;
+
zoom:1;
-
margin: 0 auto;
+
-
background: #4A4A4A url('../img/menu-bg.gif') repeat-x 0 0;
+
}
}
-
 
#menu li {
#menu li {
-
display: inline;
+
float: left;
-
list-style-type: none;
+
border-right: 1px solid #222;
 +
box-shadow: 1px 0 0 #444;
 +
position: relative;
 +
 
}
}
-
#menu li.first a {
+
#menu a {
-
margin-left: 1.6em;
+
-
display: inline;
+
-
}
+
-
#menu li a {
+
padding-top:10px;
-
float: left;
+
padding-bottom:10px;
-
color: #FFFFFF;
+
padding-right:12px;
-
font-weight: normal;
+
padding-left:12px;
-
text-decoration: none;
+
width:100%;
-
font-size: 1.1em;
+
/*float: left;*/
-
line-height: 33px;
+
width: 100px;
-
margin: 0 0.5em;
+
-
padding: 0 1em;
+
-
}
+
-
#menu li a:hover {
+
color: #999;
-
text-decoration: underline;
+
text-transform: uppercase;
 +
font: bold 11px Arial, Helvetica;
 +
text-decoration: none;
 +
text-shadow: 0 1px 0 #000;
}
}
-
#menu li a.active {
+
#menu li:hover > a {
-
font-weight: bold;
+
background-color: #0186ba;
-
color: #B1EEFF;
+
background-image: linear-gradient(#04acec, #0186ba);
-
}
+
color: #fafafa;
-
.cleaning-box {
 
-
min-height: 1px;
 
}
}
-
.cleaning-box:after {
 
-
display: block;
 
-
clear: both;
 
-
visibility: hidden;
 
-
height: 0;
 
-
font-size: 0;
 
-
content: ' ';
 
-
}
 
-
.hidden { /* Skip menu */
 
-
position: absolute;
 
-
top: -10000px;
 
-
left: 0;
 
-
width: 1px;
 
-
height: 1px;
 
-
overflow: hidden;
 
-
}
 
-
/* Content boxes */
+
*html #menu li a:hover { /* IE6 only */
-
#content-box {
+
color: #fafafa;
-
width: 100%;
+
-
margin: 0 auto;
+
-
color: #151515;
+
-
position: relative;
+
}
}
 +
</style>
 +
<style>
 +
#menu ul {
 +
margin: 20px 0 0 0;
 +
_margin: 0; /*IE6 only*/
 +
opacity: 0;
 +
visibility: hidden;
 +
position: absolute;
 +
top: 28px;
 +
left: 0;
 +
z-index: 1;   
 +
background: #444;
 +
background: linear-gradient(#444, #111);
 +
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
border-radius: 4px;
 +
      transition: all .10s ease-in-out; 
-
#content-box-in {
 
-
width: 100%;
 
}
}
-
.content-box-left {
 
-
float: left;
 
-
width: 625px;
 
-
margin-bottom: 4em;
 
-
}
 
-
.content-box-right {
+
#menu li:hover > ul {
-
float: right;
+
opacity: 1;
-
width: 220px;
+
visibility: visible;
-
margin-bottom: 4em;
+
margin: 0;
-
background-color: #DBF3FF;
+
}
}
-
#column-right-bottom {
+
#menu ul ul {
-
background: #DBF3FF url('../img/column-right-bottom.gif') no-repeat 0 0;
+
top: 0;
-
width: 220px;
+
left: 150px;
-
height: 20px;
+
margin: 0 0 0 20px;
 +
_margin: 0; /*IE6 only*/
 +
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
}
-
.content-box-left-in {
+
#menu ul li {
-
margin: 0.4em 1.7em 0 2em;
+
float: none;
 +
display: block;
 +
border: 0;
 +
_line-height: 0; /*IE6 only*/
 +
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
}
-
.gallery {
+
#menu ul li:last-child {  
-
margin-top: 18px;
+
box-shadow: none;  
}
}
-
.gallery a img, .gallery a:visited img {
+
#menu ul a {  
-
margin: 0 11px 16px 0;
+
-
border: 4px solid #EEEEEE;
+
padding: 10px;
 +
width: 180px;
 +
_height: 10px; /*IE6 only*/
 +
display: block;
 +
white-space: nowrap;
 +
float: none;
 +
text-transform: none;
}
}
-
.gallery a:hover img {
+
#menu ul a:hover {
-
border: 4px solid #74BDDC;
+
background-color: #0186ba;
-
}
+
background-image: linear-gradient(#04acec, #0186ba);
-
.content-box-right-in {
 
-
margin: 0.4em 1.6em 0 0.8em;
 
}
}
-
dt {
+
#content {
-
font-size: 0.9em;
+
    background-color: white;
-
font-weight: bold;
+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 +
  /*  border: 1px solid black;*/
 +
    margin-bottom: 10px;
 +
    padding: 0 0 20px;*/
 +
    width: 100%;
}
}
-
dd {
+
#content1 {
-
line-height: 1.4;
+
-
margin-bottom: 12px;
+
-
}
+
-
dd.heading, dd.heading a, dd.heading a:visited {
+
position: absolute;
-
margin-bottom: 1px;
+
    top: 0px;
-
color: #D15900;
+
    right: 0px;
-
font-weight: bold;
+
}
}
-
address {
+
#box {
-
line-height: 1.5;
+
border: 1px solid #888;
-
margin-bottom: 7px;
+
padding: 0px;
 +
margin-bottom: 10px;
 +
        margin-left:40px;
 +
        margin-right:40px;
 +
        margin: 0 auto; 
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
-moz-box-shadow: 0 0 8px #888;
 +
-webkit-box-shadow: 0 0 8px #888;
 +
box-shadow: 0 0 8px #888;
 +
        width:50%;
}
}
-
/* Footer */
 
-
#footer {
 
-
background-color: #00587D;
 
-
color: white;
 
-
width: 850px;
 
-
height: 34px;
 
-
font-size: 0.9em;
 
-
border-bottom: 2px solid #003042;
 
-
}
 
-
#footer a, #footer a:visited {
 
-
font-weight: normal;
 
-
color: white;
 
-
}
 
-
 
-
#footer p.left, #footer p.right {
 
-
width: 400px;
 
-
display: inline;
 
-
margin-bottom: 0;
 
-
line-height: 30px;
 
-
}
 
-
 
-
#footer a.b, #footer a.b a:visited {
 
-
font-weight: bold !important;
 
-
}
 
-
 
-
#footer p.left {
 
-
float: left;
 
-
text-align: left;
 
-
margin-left: 15px;
 
-
}
 
-
 
-
#footer p.right {
 
-
float: right;
 
-
text-align: right;
 
-
margin-right: 15px;
 
-
}
 
</style>
</style>
</html>
</html>

Latest revision as of 08:44, 2 October 2013

Retrieved from "http://2013.igem.org/Team:TU-Delft/Templates/Style"