Team:TU-Delft/Templates/Style

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<style>
<style>
 +
body {
 +
    background: #ADD8E6 url("https://static.igem.org/mediawiki/2013/d/d7/Im04.gif") left no-repeat fixed;
 +
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
 +
    text-align: center;
 +
}
/* Removing wiki-like stuff */
/* Removing wiki-like stuff */
Line 41: Line 46:
/* Layout */
/* Layout */
/**********/
/**********/
-
/* This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */
+
#heading, #innercontent {
-
 
+
    /*background: url("https://static.igem.org/mediawiki/2011/b/ba/DTU-Denmark2011-bg2.jpg") repeat #D7D7D7;}*/
-
 
+
    background: gray;
-
 
+
-
/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */
+
-
 
+
-
 
+
-
 
+
-
/* CSS Document */
+
-
 
+
-
 
+
-
/* General */
+
-
 
+
-
* {
+
-
margin: 0;
+
-
padding: 0;
+
}
}
-
 
+
/*#content, #globalWrapper {
-
html {
+
    border: none;
-
height: 100%;
+
    width: 75%;
-
font-size: 62.5%;
+
    margin: 0;
 +
    padding: 0;
 +
}*/
 +
#globalWrapper {
 +
    margin: 0 auto;
 +
    width: 975px;
}
}
-
 
+
#content {
-
body {
+
    background-color: white;
-
height: 100%;
+
    border: 1px solid black;
-
text-align: center;
+
    margin-bottom: 10px;
-
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
+
    padding: 0 0 20px;
-
background-color: #ACCEF3;
+
    width: 975px;
-
min-width: 850px;
+
-
padding-bottom: 80px; /* Simulates margin-bottom for wrapper in IE */
+
}
}
-
a:link, a:visited {
+
#contentSub {
-
color: #00598D;
+
    margin: 0;
-
text-decoration: underline;
+
-
font-weight: bold;
+
}
}
-
 
+
#search-controls {
-
a:hover {
+
    background: none repeat scroll 0 0 transparent;
-
text-decoration: none;
+
    border: 0 none;
 +
    display: block;
 +
    height: auto;
 +
    margin: 0;
 +
    overflow: visible;
 +
    position: fixed;
 +
    right: auto;
 +
    text-align: right;
 +
    top: 24px;
 +
    width: 975px;
}
}
-
 
+
#searchInput {
-
.cleaner {
+
    border: 0 none;
-
clear: both;
+
    color: #555555;
-
height: 0;
+
    font-size: 85%;
-
font-size: 0;
+
    padding-left: 2px;
-
visibility: hidden;
+
    padding-right: 2px;
 +
    width: 100px;
}
}
-
 
+
#searchform {
-
.noscreen {
+
    margin: 1px;
-
display: none;
+
}
}
-
 
+
#footer-box {
-
/* Paragraphs, headings, ... */
+
    background-color: #D8D5D0;
-
 
+
-
p {
+
-
line-height: 1.9;
+
-
margin-bottom: 7px;
+
}
}
-
p.text-content:first-letter {
+
input.searchButton {
-
font-size: 1.4em;
+
    color: #FFFFFF;
-
font-weight: bold;
+
    cursor: pointer;
-
line-height: 0.9;
+
    font-size: 80%;
-
color: #202020;
+
    font-weight: normal;
-
font-family: Georgia, "Times New Roman", Times, serif;
+
    margin: 0;
 +
    padding-left: 2px;
 +
    padding-right: 2px;
}
}
-
h1 {
+
#banner{background:transparent;
-
font: 2.6em  Georgia, "Times New Roman", Times, serif;
+
              height: 50px;}
-
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/2/2d/HeaderDelft.png") right no-repeat ;
-
text-decoration: none;
+
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-
color: #FFFFFF;
+
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* for the Safari browser */
-
}
+
    height: 150px;
 +
    width: 100%;
 +
    border-top: 1px solid #660000;
 +
    border-bottom: 1px solid #660000;}
-
h2 {
+
#menu, #menu ul {
-
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
+
margin: 0;
-
letter-spacing: 1px;
+
padding: 0;
-
color: #FFFFFF;
+
list-style: none;
-
border-left: 3px solid #FFAE20;
+
-
padding-left: 14px;
+
-
margin: 12px 0 0 40px;
+
}
}
-
h3 {
+
#menu {
-
color: #00598D;
+
width: 960px;
-
font: 1.7em Georgia, "Times New Roman", Times, serif;
+
margin: 60px auto;
-
letter-spacing: 1px;
+
border: 1px solid #222;
-
background: url('../img/h3-bg.gif') no-repeat 0 50%;
+
background-color: #111;
-
padding-left: 35px;
+
background-image: linear-gradient(#444, #111);
-
margin: 18px 0 10px 0;
+
border-radius: 6px;
 +
box-shadow: 0 1px 1px #777;
}
}
-
 
+
#menu:before,
-
h4 {
+
#menu:after {
-
font-size: 1em;
+
content: "";
-
background-color: #005E85;
+
display: table;
-
color: #FFFFFF;
+
-
letter-spacing: 1px;
+
-
border: 2px solid #FFFFFF;
+
-
margin-top: 7px;
+
-
padding: 6px 10px;
+
}
}
-
ul {
+
#menu:after {
-
list-style-type: none;  
+
clear: both;
}
}
-
 
-
 
-
/* Site wrapper */
 
-
 
-
#wrapper {
 
-
width: 850px;
 
-
margin: 0 auto 80px auto;
 
-
position: relative;
 
-
background-color: #FFFFFF;
 
-
display: table; /* margin-bottom for FF  (?) */
 
-
text-align: left;
 
-
}
 
-
 
-
 
-
/* Header */
 
-
 
-
#header {
 
-
margin: 0 auto;
 
-
height: 157px;
 
-
position: relative;
 
-
background: #004E6C url('../img/header-bg.gif') repeat-x 0 0;
 
-
border-top: 4px solid #003042;
 
-
border-bottom: 1px solid #46A0CA;
 
-
}
 
-
 
-
#header-arrow {
 
-
position: absolute;
 
-
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;
+
float: left;
-
display: inline;
+
padding: 12px 17px;
 +
color: #999;
 +
text-transform: uppercase;
 +
font: bold 10px Arial, Helvetica;
 +
text-decoration: none;
 +
text-shadow: 0 1px 0 #000;
}
}
-
#menu li a {
+
#menu li:hover > a {
-
float: left;
+
color: #fafafa;
-
color: #FFFFFF;
+
-
font-weight: normal;
+
-
text-decoration: none;
+
-
font-size: 1.1em;
+
-
line-height: 33px;
+
-
margin: 0 0.5em;
+
-
padding: 0 1em;
+
}
}
-
#menu li a:hover {
+
*html #menu li a:hover { /* IE6 only */
-
text-decoration: underline;
+
color: #fafafa;
}
}
-
 
+
</style>
-
#menu li a.active {
+
<style>
-
font-weight: bold;
+
#menu ul {
-
color: #B1EEFF;
+
margin: 20px 0 0 0;
 +
_margin: 0; /*IE6 only*/
 +
opacity: 0;
 +
visibility: hidden;
 +
position: absolute;
 +
top: 38px;
 +
left: 0;
 +
z-index: 1;  
 +
background: #444;
 +
background: linear-gradient(#444, #111);
 +
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 +
border-radius: 3px;
 +
transition: all .2s ease-in-out;
}
}
-
.cleaning-box {
+
#menu li:hover > ul {
-
min-height: 1px;
+
opacity: 1;
-
}
+
visibility: visible;
-
 
+
margin: 0;
-
.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 */
+
-
 
+
-
#content-box {
+
-
width: 100%;
+
-
margin: 0 auto;
+
-
color: #151515;
+
-
position: relative;
+
-
}
+
-
 
+
-
#content-box-in {
+
-
width: 100%;
+
-
}
+
-
 
+
-
.content-box-left {
+
-
float: left;
+
-
width: 625px;
+
-
margin-bottom: 4em;
+
-
}
+
-
 
+
-
.content-box-right {
+
-
float: right;
+
-
width: 220px;
+
-
margin-bottom: 4em;
+
-
background-color: #DBF3FF;
+
-
}
+
-
 
+
-
#column-right-bottom {
+
-
background: #DBF3FF url('../img/column-right-bottom.gif') no-repeat 0 0;
+
-
width: 220px;
+
-
height: 20px;
+
-
}
+
-
 
+
-
.content-box-left-in {
+
-
margin: 0.4em 1.7em 0 2em;
+
-
}
+
-
 
+
-
.gallery {
+
-
margin-top: 18px;
+
-
}
+
-
 
+
-
.gallery a img, .gallery a:visited img {
+
-
margin: 0 11px 16px 0;
+
-
border: 4px solid #EEEEEE;
+
-
}
+
-
 
+
-
.gallery a:hover img {
+
-
border: 4px solid #74BDDC;
+
-
}
+
-
 
+
-
.content-box-right-in {
+
-
margin: 0.4em 1.6em 0 0.8em;
+
-
}
+
-
 
+
-
dt {
+
-
font-size: 0.9em;
+
-
font-weight: bold;
+
-
}
+
-
 
+
-
dd {
+
-
line-height: 1.4;
+
-
margin-bottom: 12px;
+
-
}
+
-
 
+
-
dd.heading, dd.heading a, dd.heading a:visited {
+
-
margin-bottom: 1px;
+
-
color: #D15900;
+
-
font-weight: bold;
+
-
}
+
-
 
+
-
address {
+
-
line-height: 1.5;
+
-
margin-bottom: 7px;
+
-
}
+
-
 
+
-
 
+
-
/* 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 {
+
#menu ul ul {
-
font-weight: normal;
+
top: 0;
-
color: white;
+
left: 150px;
 +
margin: 0 0 0 20px;
 +
_margin: 0; /*IE6 only*/
 +
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
}
-
#footer p.left, #footer p.right {
+
#menu ul li {
-
width: 400px;
+
float: none;
-
display: inline;
+
display: block;
-
margin-bottom: 0;
+
border: 0;
-
line-height: 30px;
+
_line-height: 0; /*IE6 only*/
 +
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
}
-
#footer a.b, #footer a.b a:visited {
+
#menu ul li:last-child {  
-
font-weight: bold !important;
+
box-shadow: none;  
}
}
-
#footer p.left {
+
#menu ul a {  
-
float: left;
+
padding: 10px;
-
text-align: left;
+
width: 130px;
-
margin-left: 15px;
+
_height: 10px; /*IE6 only*/
 +
display: block;
 +
white-space: nowrap;
 +
float: none;
 +
text-transform: none;
}
}
-
#footer p.right {
+
#menu ul a:hover {
-
float: right;
+
background-color: #0186ba;
-
text-align: right;
+
background-image: linear-gradient(#04acec, #0186ba);
-
margin-right: 15px;
+
}
}
</style>
</style>
</html>
</html>

Revision as of 09:43, 19 April 2013

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