Team:TU-Delft/Templates/Style

From 2013.igem.org

(Difference between revisions)
 
(559 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<style>
+
<style type="text/css">
 +
@charset "UTF-8";
-
body {
 
-
/*#EBEBEB*/
 
-
/*background: #D6D4D9 url("https://static.igem.org/mediawiki/2013/d/d7/Im04.gif") left no-repeat fixed;*/
 
-
/*HERE CHANGE COLOUR OF BACKGROUND */
 
-
background: #F5F5F5 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;
 
-
 
-
}
 
#searchInput {
#searchInput {
  display:none;
  display:none;
Line 20: Line 13:
#content {
#content {
     border: none;}
     border: none;}
-
 
+
#top-section{
-
/* Redesigning the topmenu */
+
  height: 20px !important;
-
/***************************/
+
  border: none !important;
-
/* Removes "teams" from the menubar */
+
  border-top: none;
-
#menubar > ul > li:last-child {
+
}
-
    display: none;}
+
-
/* Resizes the menubar to fik the links (default is 400px) */
+
#menubar {
#menubar {
-
    width: auto;}
+
display: table-cell;
 +
background: transparent;
 +
}
 +
#menubar.left-menu {
 +
width: 100%;
 +
}
-
body {
+
#menubar.right-menu {
-
    margin: 10px 0 0 0;
+
text-align: right;
-
    padding: 0;}
+
}
 +
#menubar * {
 +
color: transparent !important;
 +
background: transparent !important;
 +
}
-
#top-section {
+
#top-section:hover #menubar * {
-
    width: 965px;
+
color: grey !important;
-
    height: 0;
+
}
-
    margin: 0 auto;
+
-
    padding: 0;
+
-
    border: none;}
+
-
#menubar {
+
-
    font-size: 65%;
+
-
    top: -14px;}
+
-
.left-menu:hover {
+
-
    background-color: transparent;}
+
-
#menubar li a {
+
-
    background-color: transparent;}
+
-
#menubar:hover {
+
-
    color: white;}
+
-
#menubar li a {
+
-
    color: transparent;}
+
-
#menubar:hover li a {
+
-
    color: white;}
+
-
/* Layout */
+
#top-section:hover #menubar.left-menu {
-
/**********/
+
background: rgba(255, 255, 255, 0.75) !important;
-
#heading, #innercontent {
+
-
    /*background: url("https://static.igem.org/mediawiki/2011/b/ba/DTU-Denmark2011-bg2.jpg") repeat #D7D7D7;}*/
+
-
    background: gray;
+
}
}
-
/*#content, #globalWrapper {
+
 
-
    border: none;
+
 
-
    width: 75%;
+
html {
-
    margin: 0;
+
     
-
    padding: 0;
+
 
-
}*/
+
width:100%;
-
#globalWrapper {
+
height:100%;
-
    margin: 0 auto;
+
background:transparent;
-
    width: 975px;
+
border:none;
-
}
+
margin:0;
-
#content {
+
 
-
    background-color: white;
+
-
    border: 1px solid black;
+
-
    margin-bottom: 10px;
+
-
    padding: 0 0 20px;
+
-
    width: 1050px;
+
-
 
+
}
}
-
#contentSub {
+
 
-
    margin: 0;
+
body {
 +
width:100%;
 +
height:100%;
 +
background:url("https://static.igem.org/mediawiki/2013/3/32/BackroundDelft.jpg");
 +
        background-repeat:no-repeat;
 +
        background-size: 100% 100%;
 +
        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;
}
}
-
#search-controls {
+
#contentbox {
-
    background: none repeat scroll 0 0 transparent;
+
width: 85%;
-
    border: 0 none;
+
position: relative;  
-
    display: block;
+
background:white;
-
    height: auto;
+
width:850px;
-
    margin: 0;
+
margin: -10px auto 0 auto;
-
    overflow: visible;
+
padding:20px 50px 50px 25px;
-
    position: fixed;
+
-
    right: auto;
+
text-decoration:none;
-
    text-align: right;
+
border:none;
-
    top: 24px;
+
z-index:800;
-
    width: 975px;
+
}
}
-
#searchInput {
+
 
-
    border: 0 none;
+
#contentboxnew {
-
    color: #555555;
+
 
-
    font-size: 85%;
+
background:white;
-
    padding-left: 2px;
+
width:800px;
-
    padding-right: 2px;
+
margin: -10px auto 0 auto;
-
    width: 100px;
+
padding:20px 50px 50px 50px;
-
}
+
float: left;
-
#searchform {
+
text-decoration:none;
-
    margin: 1px;
+
border:none;
 +
z-index:800;
}
}
-
#footer-box {
+
#contentboxnew1 {
-
    background-color: #D8D5D0;
+
 
 +
background:white;
 +
width:800px;
 +
margin: -10px auto 0 auto;
 +
padding:20px 50px 50px 50px;
 +
float: left;
 +
text-decoration:none;
 +
border:none;
 +
z-index:800;
}
}
-
input.searchButton {
+
table#tbtext
-
    color: #FFFFFF;
+
{  
-
    cursor: pointer;
+
width:400px;
-
    font-size: 80%;
+
font-weight:400;
-
    font-weight: normal;
+
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-
    margin: 0;
+
font-size: 10px;
-
    padding-left: 2px;
+
text-align: left;
-
    padding-right: 2px;
+
padding-left: 3px;
 +
text-align: justify;
 +
}
 +
 
 +
 
 +
#frog {
 +
position:absolute;
 +
top:350px; left:-260px;
}
}
 +
#logo {
 +
position:absolute;
 +
top:20px; left:-150px;
 +
}
/* HERE CHANGE THE HEADER */
/* HERE CHANGE THE HEADER */
#header{
#header{
-
/* background:#E8F5FB url("https://static.igem.org/mediawiki/2013/0/06/BannerDelft.png") top no-repeat ;*/
+
        background:url("https://static.igem.org/mediawiki/2013/9/97/Horizontal-banner-2.jpg");
-
/*background: url("https://static.igem.org/mediawiki/2013/9/97/Logo2Delft.png")top no-repeat;*/
+
background-repeat:no-repeat;
-
/*background: url("https://static.igem.org/mediawiki/2013/a/a8/Horizontal_tudelft.png");*/
+
background-position: left bottom;
-
background: url("https://static.igem.org/mediawiki/2013/f/f4/Horizontal.png");
+
 
-
  /*background-size: 353px 120px;*/
+
background-size: 100% 100%;
-
background-size: 100% 100%;
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* for the Safari browser */
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* for the Safari browser */
-
    height: 180px;
+
width: 100%;
-
    width: 100%;
+
height: 150px; 
     /*border-top: 1px solid #660000;
     /*border-top: 1px solid #660000;
     border-bottom: 1px solid #660000;*/
     border-bottom: 1px solid #660000;*/
Line 143: Line 151:
#fb-like-box {
#fb-like-box {
position:absolute;
position:absolute;
-
top:200px; right:-265px;
+
top:160px; right:-265px;
}
}
#counter {                    /* Add it with zero botom and zero left in order to fix it later */
#counter {                    /* Add it with zero botom and zero left in order to fix it later */
   position:absolute;
   position:absolute;
-
  top:410px; right:-167px;
+
  top:800px; right:-227px;
   }
   }
#counter2{
#counter2{
     position:absolute;
     position:absolute;
-
     top:510px; right:-120px;
+
     top:800px; right:-187px;
}
}
Line 166: Line 174:
#menu {
#menu {
width: 100%;
width: 100%;
-
margin: 60px auto;
+
      padding-top:6px;
 +
      padding-bottom:6px;
border: 1px solid #222;
border: 1px solid #222;
background-color: #111;
background-color: #111;
Line 173: Line 182:
box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
margin-top: 0px;
margin-top: 0px;
-
margin-right:20px
+
margin-right:0px;
}
}
#menu:before,
#menu:before,
Line 197: Line 206:
#menu a {
#menu a {
-
float: left;
+
 
-
padding: 12px 36px;
+
padding-top:10px;
 +
padding-bottom:10px;
 +
padding-right:12px;
 +
padding-left:12px;
 +
width:100%;
 +
/*float: left;*/
 +
width: 100px;
 +
 
color: #999;
color: #999;
text-transform: uppercase;
text-transform: uppercase;
-
font: bold 10px Arial, Helvetica;
+
font: bold 11px Arial, Helvetica;
text-decoration: none;
text-decoration: none;
text-shadow: 0 1px 0 #000;
text-shadow: 0 1px 0 #000;
Line 207: Line 223:
#menu li:hover > a {
#menu li:hover > a {
 +
background-color: #0186ba;
 +
background-image: linear-gradient(#04acec, #0186ba);
color: #fafafa;
color: #fafafa;
 +
}
}
 +
 +
 +
*html #menu li a:hover { /* IE6 only */
*html #menu li a:hover { /* IE6 only */
 +
color: #fafafa;
color: #fafafa;
}
}
Line 221: Line 244:
visibility: hidden;
visibility: hidden;
position: absolute;
position: absolute;
-
top: 38px;
+
top: 28px;
left: 0;
left: 0;
z-index: 1;     
z-index: 1;     
Line 227: Line 250:
background: linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-
border-radius: 3px;
+
border-radius: 4px;
-
transition: all .2s ease-in-out;   
+
      transition: all .10s ease-in-out;   
 +
 
}
}
 +
#menu li:hover > ul {
#menu li:hover > ul {
Line 257: Line 282:
}
}
-
#menu ul a {  
+
#menu ul a {  
 +
padding: 10px;
padding: 10px;
-
width: 130px;
+
width: 180px;
_height: 10px; /*IE6 only*/
_height: 10px; /*IE6 only*/
display: block;
display: block;
Line 270: Line 296:
background-color: #0186ba;
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
 +
}
}
#content {
#content {
     background-color: white;
     background-color: white;
 +
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   /*  border: 1px solid black;*/
   /*  border: 1px solid black;*/
     margin-bottom: 10px;
     margin-bottom: 10px;
     padding: 0 0 20px;*/
     padding: 0 0 20px;*/
-
     width: 975px;
+
     width: 100%;
}
}
Line 286: Line 314:
     right: 0px;
     right: 0px;
}
}
 +
 +
#box {
 +
border: 1px solid #888;
 +
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%;
 +
}
 +
 +
 +
</style>
</style>
</html>
</html>

Latest revision as of 08:44, 2 October 2013