Team:TU-Delft/CSS
From 2012.igem.org
(Difference between revisions)
(250 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
/*CSS Document */ | /*CSS Document */ | ||
+ | /* colors #2ab117; is the intense green that our background has | ||
+ | #357c24; is more dark green | ||
+ | #000000; is black | ||
+ | #ffffff; is white | ||
+ | #10143a; is the dark blue we had at first */ | ||
+ | |||
/* colors lab notebook */ | /* colors lab notebook */ | ||
.day-empty { | .day-empty { | ||
Line 22: | Line 28: | ||
height:100%; | height:100%; | ||
background:none; | background:none; | ||
- | border:none; | + | /*background-image:url('https://static.igem.org/mediawiki/igem.org/7/73/Backgroundextra.jpg');*/ |
+ | border:none; | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
Line 30: | Line 37: | ||
width:100%; | width:100%; | ||
height:100%; | height:100%; | ||
- | background:#10143a; | + | /*background:#10143a;*/ |
border:none; | border:none; | ||
padding:0; | padding:0; | ||
+ | z-index:800; | ||
+ | } | ||
+ | #contentbox { | ||
+ | width: 80%; | ||
+ | position: relative; | ||
+ | background:white; | ||
+ | width:800px; | ||
+ | margin: -10px auto 0 auto; | ||
+ | padding:20px 50px 50px 25px; | ||
+ | |||
+ | text-decoration:none; | ||
+ | border:none; | ||
z-index:800; | z-index:800; | ||
} | } | ||
+ | |||
+ | #contentboxnew { | ||
+ | |||
+ | background:white; | ||
+ | width:800px; | ||
+ | margin: -10px auto 0 auto; | ||
+ | padding:20px 50px 50px 50px; | ||
+ | float: left; | ||
+ | text-decoration:none; | ||
+ | border:none; | ||
+ | z-index:800; | ||
+ | } | ||
+ | |||
+ | #contentboxnew1 { | ||
+ | |||
+ | background:white; | ||
+ | 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; | ||
+ | } | ||
+ | td#tdunderline{border-bottom: green solid thin;} | ||
+ | |||
+ | h1 { | ||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-size:18px; | ||
+ | text-transform:uppercase; | ||
+ | letter-spacing:1px; | ||
+ | /*border-bottom:2px solid #2ab117; */ | ||
+ | text-decoration: none; | ||
+ | color: #2ab117; | ||
+ | } | ||
+ | |||
h2{ | h2{ | ||
- | font-family: | + | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; |
- | font-size: | + | font-size:16px; |
text-transform:uppercase; | text-transform:uppercase; | ||
letter-spacing:1px; | letter-spacing:1px; | ||
- | border-bottom:2px solid # | + | border-bottom:2px solid #000000; |
+ | text-decoration: none; | ||
+ | color: #000000; | ||
} | } | ||
h3{ | h3{ | ||
- | font-family: | + | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; |
font-variant: small-caps; | font-variant: small-caps; | ||
- | + | font-stretch: ultra-expanded; | |
- | color:# | + | color: #2ab117; |
- | font-size: | + | font-size:12px; |
font-weight:bold; | font-weight:bold; | ||
- | + | line-height:18px; | |
- | + | ||
letter-spacing:1px; | letter-spacing:1px; | ||
+ | } | ||
+ | |||
+ | h3home{ | ||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-variant: small-caps; | ||
+ | font-stretch: ultra-expanded; | ||
+ | color: #2ab117; | ||
+ | font-size:20px; | ||
+ | font-weight:bold; | ||
+ | line-height:18px; | ||
+ | letter-spacing:1px; | ||
+ | } | ||
+ | h6{ | ||
+ | color: #357c24; | ||
+ | font-size:11px; | ||
} | } | ||
a:link, a:active, a:visited{ | a:link, a:active, a:visited{ | ||
- | color: | + | color: #357c24; |
text-decoration:none; | text-decoration:none; | ||
- | font-weight: | + | font-weight:#2ab117; |
+ | target-name:new; | ||
+ | target-new:tab; | ||
+ | |||
} | } | ||
a:hover{ | a:hover{ | ||
- | color: | + | color:#2ab117; |
} | } | ||
#content { | #content { | ||
- | background:# | + | background: #2ab117; |
padding:0; | padding:0; | ||
width:100%; | width:100%; | ||
Line 78: | Line 163: | ||
z-index:800; | z-index:800; | ||
} | } | ||
+ | |||
+ | #contentbox { | ||
+ | background:white; | ||
+ | width:590px; | ||
+ | margin: -10px auto 0 auto; | ||
+ | padding:20px 50px 50px 50px; | ||
+ | float: left; | ||
+ | text-decoration:none; | ||
+ | border:none; | ||
+ | z-index:800; | ||
+ | } | ||
+ | |||
img.bg_team { | img.bg_team { | ||
+ | |||
+ | |||
/* Set rules to fill background */ | /* Set rules to fill background */ | ||
min-height: 100%; | min-height: 100%; | ||
Line 113: | Line 212: | ||
z-index:999; | z-index:999; | ||
} | } | ||
- | # | + | #logo_igem2{ |
position:fixed; | position:fixed; | ||
width:70px; | width:70px; | ||
Line 121: | Line 220: | ||
top:0px; | top:0px; | ||
left:0px; | left:0px; | ||
- | |||
float:left; | float:left; | ||
- | z-index: | + | z-index:9990; |
- | + | background-image:url('https://static.igem.org/mediawiki/igem.org/6/6b/Logo_igem_black.png'); | |
+ | } | ||
+ | #logo_igem2:hover{ | ||
+ | background-image:url('https://static.igem.org/mediawiki/2012/6/64/TUDelftLogo_igem_color.png'); | ||
} | } | ||
#twitter_widget{ | #twitter_widget{ | ||
position:fixed; | position:fixed; | ||
- | width: | + | width:160px; |
- | height: | + | height:250px; |
background:white; | background:white; | ||
padding:10px 0 0 0; | padding:10px 0 0 0; | ||
Line 156: | Line 257: | ||
z-index:1001; | z-index:1001; | ||
} | } | ||
- | + | /* | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
#video-container{ | #video-container{ | ||
position:relative; | position:relative; | ||
z-index:800; | z-index:800; | ||
} | } | ||
+ | */ | ||
- | # | + | #nav { /*main menu css*/ |
position:fixed; | position:fixed; | ||
- | + | width:850px; | |
- | + | top:15px; | |
- | + | left:40%; | |
- | width: | + | right:60%; |
- | + | margin: 0 0 0 -230px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | left: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | margin: 0 0 0 - | + | |
padding: 0; | padding: 0; | ||
z-index:1001; | z-index:1001; | ||
- | font-family: | + | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; |
font-size:14px; | font-size:14px; | ||
- | letter-spacing:1px; | + | /*letter-spacing:1px;*/ |
text-transform:uppercase; | text-transform:uppercase; | ||
} | } | ||
#nav ul{ | #nav ul{ | ||
- | width: | + | width: 620px; |
background: white; | background: white; | ||
text-align:center; | text-align:center; | ||
Line 273: | Line 293: | ||
} | } | ||
#nav li { /*float the main list items*/ | #nav li { /*float the main list items*/ | ||
+ | position:static; | ||
margin: 0; | margin: 0; | ||
- | float: left; | + | float: left; |
display: inline; | display: inline; | ||
padding:0 3px; | padding:0 3px; | ||
- | background: | + | background:white ; |
text-align:center; | text-align:center; | ||
+ | width:90px; | ||
+ | |||
} | } | ||
#nav li ul { | #nav li ul { | ||
display: none; | display: none; | ||
- | + | width:200px; | |
} | } | ||
- | #nav li.off ul, #nav li.on ul { /* | + | #nav li.off ul, #nav li.on ul { /*Position of the submenu!!*/ |
- | position: | + | position:static; |
- | width: | + | direction:ltr; |
- | + | ||
- | left:50%; | + | width:150px; |
- | margin: 0 0 0 - | + | height:100px; |
- | padding: 0 0 | + | |
+ | /*left:30px; | ||
+ | right:50%;*/ | ||
+ | margin: 0 0 0 -150px; | ||
+ | padding: 0 0 0 0; | ||
background:white; | background:white; | ||
text-align:center; | text-align:center; | ||
+ | |||
} | } | ||
#nav li a { | #nav li a { | ||
- | color: | + | color: #000000; /*the main menu letters color but home*/ |
font-weight: bold; | font-weight: bold; | ||
display: block; | display: block; | ||
- | height: | + | height: 30px; |
width: auto; | width: auto; | ||
border-bottom:0; | border-bottom:0; | ||
- | margin: | + | margin: 2px; |
- | padding: 0 0 | + | padding: 0 0 2px 0; |
} | } | ||
- | + | ||
- | #nav li a span { | + | #nav li a span { /*i dont know what this is about*/ |
color: #FFD109; | color: #FFD109; | ||
} | } | ||
- | #nav li a span span{ | + | #nav li a span span{ /*i dont know what this is about*/ |
color: #FFD109; | color: #FFD109; | ||
} | } | ||
- | #nav li a span span span{ | + | #nav li a span span span{ /*i dont know what this is about*/ |
color: #FFD109; | color: #FFD109; | ||
- | } | + | } |
#nav li.on a { | #nav li.on a { | ||
- | border-bottom: 2px solid | + | border-bottom: 2px solid black; |
- | color: | + | color: #000000; /*the color of HOME by default*/ |
} | } | ||
- | #nav li.on2 a { | + | #nav li.on2 a { /*i dont know what this is about*/ |
border-bottom: 2px solid blue; | border-bottom: 2px solid blue; | ||
color: aqua; | color: aqua; | ||
Line 329: | Line 357: | ||
#nav li.on a:hover { | #nav li.on a:hover { | ||
- | color: # | + | color: #2ab117; |
} | } | ||
#nav li.on a:hover span{ | #nav li.on a:hover span{ | ||
- | color: | + | color:#2ab117; |
} | } | ||
#nav li.on ul a, #nav li.off ul a { | #nav li.on ul a, #nav li.off ul a { | ||
- | float: center; | + | /*float: center; ie doesn't inherit the float*/ |
border: 0; | border: 0; | ||
font-size:12px; | font-size:12px; | ||
- | color: | + | color: #2ab117; |
width: auto; | width: auto; | ||
margin-right: 0px; | margin-right: 0px; | ||
+ | /*text-align: center;*/ | ||
} | } | ||
#nav li.on ul { | #nav li.on ul { | ||
- | display: | + | display: block; |
} | } | ||
#nav li.off:hover ul { | #nav li.off:hover ul { | ||
- | display: | + | display: inline; |
z-index: 6000; | z-index: 6000; | ||
} | } | ||
- | #nav li.off a:hover, #nav li:hover a { | + | #nav li.off a:hover, #nav li:hover a { /* this is for the background that opens behind the submenu */ |
- | background: | + | background:white; |
- | color: | + | color: black; |
+ | height: 54px; | ||
+ | width: 150px; | ||
} | } | ||
#nav li.off a:hover span, #nav li:hover a { | #nav li.off a:hover span, #nav li:hover a { | ||
- | background: | + | background: white; |
- | color: | + | color: #2ab117; |
+ | width: 150px; | ||
} | } | ||
Line 371: | Line 403: | ||
width:100%; | width:100%; | ||
} | } | ||
- | + | #footer-box{ | |
- | + | width:0px; | |
- | + | height:0px; | |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Line 396: | Line 423: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | catlinks{ | + | |
+ | #catlinks{ | ||
width:0px; | width:0px; | ||
height:0px; | height:0px; | ||
Line 465: | Line 488: | ||
width: 350px; | width: 350px; | ||
z-index: 5; | z-index: 5; | ||
- | font-family: | + | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; |
font-size: 95%; | font-size: 95%; | ||
line-height: 1em; | line-height: 1em; | ||
Line 471: | Line 494: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#menubar ul { | #menubar ul { | ||
color: #E81B05; | color: #E81B05; | ||
Line 502: | Line 506: | ||
padding-right: 0px; | padding-right: 0px; | ||
} | } | ||
+ | |||
+ | |||
+ | #centeredmenu_bg{ | ||
+ | position:fixed; | ||
+ | top:0px; | ||
+ | background:#ffffff; /* the white line behind the main menu*/ | ||
+ | left:0px; | ||
+ | width:100%; | ||
+ | height:70px; | ||
+ | z-index:999; | ||
+ | } | ||
+ | |||
+ | #centeredmenu { | ||
+ | position:fixed; | ||
+ | width:690px; | ||
+ | bottom:15px; | ||
+ | left:50%; | ||
+ | margin:0 0 0 -345px; | ||
+ | padding:0; | ||
+ | |||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-size:14px; | ||
+ | letter-spacing:1px; | ||
+ | text-transform:uppercase; | ||
+ | z-index:999; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | #centeredmenu ul { | ||
+ | display:inline; | ||
+ | clear:left; | ||
+ | list-style:none; | ||
+ | line-height:20px; | ||
+ | height:20px; | ||
+ | margin:0; | ||
+ | position:relative; | ||
+ | right:0px; | ||
+ | text-align:center; | ||
+ | background:red; | ||
+ | } | ||
+ | #centeredmenu ul li { | ||
+ | display:inline; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | text-decoration:none; | ||
+ | padding:10px; | ||
+ | position:relative; | ||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | color:aqua; | ||
+ | font-size:14px; | ||
+ | font-weight:bold; | ||
+ | text-transform:uppercase; | ||
+ | line-height:16px; | ||
+ | letter-spacing:1px; | ||
+ | } | ||
+ | |||
+ | #centeredmenu ul li a { | ||
+ | display:inline; | ||
+ | margin:0 0 0 1px; | ||
+ | text-decoration:none; | ||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | color:aqua; | ||
+ | font-size:14px; | ||
+ | font-weight:bold; | ||
+ | text-transform:uppercase; | ||
+ | line-height:16px; | ||
+ | letter-spacing:1px; | ||
+ | } | ||
+ | #centeredmenu ul li a:hover { | ||
+ | text-decoration:none; | ||
+ | border-bottom: 2px solid black; | ||
+ | } | ||
+ | |||
+ | |||
.left-menu li a { | .left-menu li a { | ||
padding: 0px 10px 0px 0px; | padding: 0px 10px 0px 0px; | ||
Line 510: | Line 588: | ||
} | } | ||
#.left-menu .selected:hover { | #.left-menu .selected:hover { | ||
- | # color: # | + | # color: #000000; |
#} | #} | ||
.left-menu:hover a { | .left-menu:hover a { | ||
- | color: # | + | color: #000000; |
} | } | ||
+ | |||
+ | .left-menu, .left-menu a { | ||
+ | left: 0px; | ||
+ | text-align: left; | ||
+ | color:transparent; | ||
+ | text-transform: lowercase; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .left-menu a:hover { | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | .left-menu:hover { | ||
+ | color: #000000; | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
.right-menu li { | .right-menu li { | ||
# background-color: yellow ; | # background-color: yellow ; | ||
Line 523: | Line 619: | ||
padding: 0px 15px 0px 0px; | padding: 0px 15px 0px 0px; | ||
color: white; | color: white; | ||
- | background-color: # | + | background-color: #2ab117; |
} | } | ||
.right-menu li a:hover { | .right-menu li a:hover { | ||
- | color: # | + | color: #2ab117; |
text-decoration: underline; | text-decoration: underline; | ||
background-color: white; | background-color: white; | ||
} | } | ||
+ | .right-menu, .right-menu a { | ||
+ | right: 0px; | ||
+ | text-align: right; | ||
+ | color: white; | ||
+ | |||
+ | } | ||
+ | |||
+ | #logo_igem_div{ | ||
+ | position:relative; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | width:70px; | ||
+ | height:57px; | ||
+ | border:0; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #lightbox{ | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | z-index: 100; | ||
+ | text-align: center; | ||
+ | line-height: 0; | ||
+ | } | ||
+ | #lightbox img{ | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | } | ||
+ | #lightbox a img{ | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | #outerImageContainer{ | ||
+ | position: relative; | ||
+ | background-color: white; | ||
+ | width: 250px; | ||
+ | height: 250px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | #imageContainer{ | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #loading{ | ||
+ | position: absolute; | ||
+ | top: 40%; | ||
+ | left: 0%; | ||
+ | height: 25%; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | line-height: 0; | ||
+ | } | ||
+ | #hoverNav{ | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | #imageContainer>#hoverNav{ left: 0;} | ||
+ | #hoverNav a{ outline: none;} | ||
+ | |||
+ | #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } | ||
+ | #prevLink { left: 0; float: left;} | ||
+ | #nextLink { right: 0; float: right;} | ||
+ | #prevLink:hover, #prevLink:visited:hover { background: url(http://homes.esat.kuleuven.be/~igemwiki/images/lighbox/prevlabel.gif) left 15% no-repeat; } | ||
+ | #nextLink:hover, #nextLink:visited:hover { background: url(http://homes.esat.kuleuven.be/~igemwiki/images/lightbox/nextlabel.gif) right 15% no-repeat; } | ||
+ | |||
+ | #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } | ||
+ | |||
+ | #imageData{ padding:0 10px; color: #000; } | ||
+ | #imageData #imageDetails{ width: 70%; float: left; text-align: left; } | ||
+ | #imageData #caption{ font-weight: bold; } | ||
+ | #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } | ||
+ | #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} | ||
+ | |||
+ | #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } | ||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
- | <html> | + | </html> |
Latest revision as of 03:53, 27 October 2012