Team:TU-Delft/CSS
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | @charset "UTF-8"; | |
- | + | /*CSS Document */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | *{ | |
- | + | border:0; | |
+ | margin:0; | ||
+ | padding:0; | ||
} | } | ||
- | + | ||
- | + | html { | |
- | + | width:100%; | |
- | + | height:100%; | |
- | + | background:none; | |
- | + | border:none; | |
- | + | margin:0; | |
- | + | padding:0; | |
} | } | ||
- | + | body { | |
- | + | width:100%; | |
- | + | height:100%; | |
+ | background:FFF45A; | ||
+ | border:none; | ||
+ | padding:0; | ||
+ | z-index:800; | ||
} | } | ||
- | + | h2{ | |
- | + | font-family: 'Comic Sans', Comic Sans MS, cursive; | |
- | + | font-size:15px; | |
- | + | text-transform:uppercase; | |
- | + | letter-spacing:1px; | |
+ | border-bottom:2px solid #000; | ||
} | } | ||
+ | h3{ | ||
+ | font-family: 'Comic Sans', Comic Sans MS, cursive; | ||
+ | color:C71D09; | ||
+ | font-size:16px; | ||
+ | font-weight:bold; | ||
+ | text-transform:uppercase; | ||
+ | line-height:16px; | ||
+ | letter-spacing:1px; | ||
+ | } | ||
- | + | a:link, a:active, a:visited{ | |
- | color: | + | color:green; |
+ | text-decoration:none; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | a:hover{ | ||
+ | color:C71D09; | ||
+ | } | ||
+ | #content { | ||
+ | background: FFF45A; | ||
+ | padding:0; | ||
+ | width:100%; | ||
+ | border:0; | ||
+ | } | ||
+ | #bodyContent{ | ||
+ | margin:0 auto; | ||
+ | padding:0; | ||
+ | width:685px; | ||
+ | border:0; | ||
+ | background:FFF45A; | ||
+ | z-index:800; | ||
} | } | ||
- | . | + | img.bg_team { |
- | + | /* Set rules to fill background */ | |
- | + | min-height: 100%; | |
+ | min-width: 1024px; | ||
+ | |||
+ | /* Set up proportionate scaling */ | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | |||
+ | /* Set up positioning */ | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index:-1; | ||
} | } | ||
+ | @media screen and (max-width: 1024px){ | ||
+ | img.bg_team { | ||
+ | left: 50%; | ||
+ | margin-left: -512px; } | ||
+ | } | ||
+ | #logo_ed{ | ||
+ | position:fixed; | ||
+ | width:150px; | ||
+ | height:100px; | ||
+ | margin:10px 0 0 10px; | ||
+ | border:0; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | padding:0; | ||
+ | float:left; | ||
+ | z-index:999; | ||
+ | } | ||
+ | #logo_igem{ | ||
+ | position:fixed; | ||
+ | width:70px; | ||
+ | height:57px; | ||
+ | margin:120px 0 0 20px; | ||
+ | border:0; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | padding:0; | ||
+ | float:left; | ||
+ | z-index:999; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | #twitter_widget{ | ||
+ | position:fixed; | ||
+ | width:155px; | ||
+ | height:240px; | ||
+ | background:white; | ||
+ | padding:10px 0 0 0; | ||
+ | bottom:90px; | ||
+ | left:0px; | ||
+ | z-index:1001; | ||
+ | } | ||
+ | |||
+ | #social_linkall{ | ||
+ | position:fixed; | ||
+ | bottom:48px; | ||
+ | left:10px; | ||
+ | width:120px; | ||
+ | height:35px; | ||
+ | z-index:1001; | ||
+ | border:0; | ||
+ | } | ||
+ | |||
+ | #social_icons{ | ||
+ | position:fixed; | ||
+ | bottom:15px; | ||
+ | left:20px; | ||
+ | width:110px; | ||
+ | height:24px; | ||
+ | z-index:1001; | ||
+ | } | ||
+ | |||
+ | #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; | ||
+ | } | ||
+ | |||
+ | #video-container{ | ||
+ | position:relative; | ||
+ | z-index:800; | ||
+ | } | ||
+ | |||
+ | #centeredmenu_bg{ | ||
+ | position:fixed; | ||
+ | bottom:0px; | ||
+ | background:#FF8017; | ||
+ | left:0px; | ||
+ | width:100%; | ||
+ | height:40px; | ||
+ | z-index:999; | ||
+ | } | ||
+ | |||
+ | #centeredmenu { | ||
+ | position:fixed; | ||
+ | width:690px; | ||
+ | bottom:15px; | ||
+ | left:50%; | ||
+ | margin:0 0 0 -345px; | ||
+ | padding:0; | ||
+ | |||
+ | font-family: 'Francois One', sans-serif, verdana, geneva; | ||
+ | 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:left; | ||
+ | background:white; | ||
+ | } | ||
+ | #centeredmenu ul li { | ||
+ | display:inline; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | text-decoration:none; | ||
+ | padding:10px; | ||
+ | position:relative; | ||
+ | font-family: 'Comic Sans', Comic Sans MS, cursive; | ||
+ | color:#666; | ||
+ | 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: 'Comic Sans', Comic Sans MS, cursive; | ||
+ | color:#C71D09; | ||
+ | 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 #C71D09; | ||
+ | } | ||
+ | |||
+ | |||
+ | #nav { | ||
+ | position:fixed; | ||
+ | width:690px; | ||
+ | bottom:10px; | ||
+ | left:50%; | ||
+ | margin: 0 0 0 -330px; | ||
+ | padding: 0; | ||
+ | z-index:1001; | ||
+ | |||
+ | font-family: 'Comic Sans', Comic Sans MS, cursive; | ||
+ | font-size:14px; | ||
+ | letter-spacing:1px; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
+ | #nav ul{ | ||
+ | width:690px; | ||
+ | background:#FFF45A; | ||
+ | text-align:center; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | #nav li.on ul, #nav li.off ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #nav a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #nav li { /*float the main list items*/ | ||
+ | margin: 0; | ||
+ | float: left; | ||
+ | display: inline; | ||
+ | padding:0 3px; | ||
+ | background:#FFF45A; | ||
+ | text-align:center; | ||
+ | } | ||
+ | #nav li ul { | ||
+ | display: none; | ||
+ | |||
+ | } | ||
+ | #nav li.off ul, #nav li.on ul { /*put the subnav above*/ | ||
+ | position:fixed; | ||
+ | width:690px; | ||
+ | bottom:37px; | ||
+ | left:50%; | ||
+ | margin: 0 0 0 -343px; | ||
+ | padding: 0 0 5px 0; | ||
+ | background:#FFF45A; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | #nav li a { | ||
+ | color: #666; | ||
+ | font-weight: bold; | ||
+ | display: block; | ||
+ | height: 15px; | ||
+ | width: auto; | ||
+ | border-bottom:0; | ||
+ | margin: 5px; | ||
+ | padding: 0 0 5px 0; | ||
+ | } | ||
+ | |||
+ | #nav li a span { | ||
+ | color: #FFD109; | ||
+ | } | ||
+ | |||
+ | #nav li a span span{ | ||
+ | color: #FFD109; | ||
+ | } | ||
+ | |||
+ | #nav li a span span span{ | ||
+ | color: #FFD109; | ||
+ | } | ||
+ | |||
+ | #nav li.on a { | ||
+ | border-bottom: 2px solid black; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | #nav li.on2 a { | ||
+ | border-bottom: 2px solid black; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | #nav li.on a:hover { | ||
+ | color:black; | ||
+ | } | ||
+ | |||
+ | #nav li.on a:hover span{ | ||
+ | color:black; | ||
+ | } | ||
+ | |||
+ | #nav li.on ul a, #nav li.off ul a { | ||
+ | float: left; /*ie doesn't inherit the float*/ | ||
+ | border: 0; | ||
+ | font-size:12px; | ||
+ | color: #FFD109; | ||
+ | width: auto; | ||
+ | margin-right: 0px; | ||
+ | } | ||
+ | #nav li.on ul { | ||
+ | display: block; | ||
+ | } | ||
+ | #nav li.off:hover ul { | ||
+ | display: block; | ||
+ | z-index: 6000; | ||
+ | } | ||
+ | #nav li.off a:hover, #nav li:hover a { | ||
+ | background: white; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | #nav li.off a:hover span, #nav li:hover a { | ||
+ | background: white; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .third{ | ||
+ | font-size:11px; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #footer { | ||
+ | text-decoration:none; | ||
+ | border:none; | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | text-decoration: none; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | text-decoration: none; | ||
+ | font: Comic Sans, Comic Sans MS, cursive | ||
+ | } | ||
+ | |||
+ | .sum_dot{ | ||
+ | list-style: disc; | ||
+ | } | ||
+ | |||
+ | .sum_number{ | ||
+ | list-style: decimal; | ||
+ | } | ||
+ | |||
+ | #contentSub{ | ||
+ | width:0px; | ||
+ | height:0px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #footer-box{ | ||
+ | width:0px; | ||
+ | height:0px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | catlinks{ | ||
+ | width:0px; | ||
+ | height:0px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .twtr-widget { | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | .twtr-hd, .twtr-ft { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #siteSub { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #search-controls { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .firstHeading { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #search-controls { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #p-logo { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #top-section { | ||
+ | border:none; | ||
+ | margin: 0 auto; | ||
+ | height:0px ! important; | ||
+ | width:100%; | ||
+ | } | ||
+ | #centeredimage { | ||
+ | display: block; | ||
+ | text-align:center; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | #globalWrapper{ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | border:0; | ||
+ | } | ||
+ | .visualClear{ | ||
+ | height:0; | ||
+ | width:0; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #menubar { | ||
+ | position: absolute; | ||
+ | white-space: nowrap; | ||
+ | top:0; | ||
+ | width: 350px; | ||
+ | z-index: 5; | ||
+ | font-family: Comic-Sans; | ||
+ | font-size: 95%; | ||
+ | line-height: 1em; | ||
+ | z-index:1001; | ||
+ | } | ||
+ | |||
+ | .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: black; | ||
+ | background-color: white; | ||
+ | } | ||
+ | .right-menu, .right-menu a { | ||
+ | right: 0px; | ||
+ | text-align: right; | ||
+ | color: FFD170; | ||
+ | |||
+ | } | ||
+ | #menubar ul { | ||
+ | color: black; | ||
+ | list-style: none; | ||
+ | } | ||
+ | #menubar li { | ||
+ | display: inline; | ||
+ | position: relative; | ||
+ | cursor: pointer; | ||
+ | padding-left: 0px; | ||
+ | padding-right: 0px; | ||
+ | } | ||
+ | .left-menu li a { | ||
+ | padding: 0px 10px 0px 0px; | ||
+ | } | ||
+ | .left-menu .selected { | ||
+ | # color: black; | ||
+ | } | ||
+ | #.left-menu .selected:hover { | ||
+ | # color: black; | ||
+ | #} | ||
+ | |||
+ | .left-menu:hover a { | ||
+ | color: black; | ||
+ | } | ||
+ | .right-menu li { | ||
+ | # background-color: #E84705; | ||
+ | } | ||
+ | |||
+ | .right-menu li a { | ||
+ | padding: 0px 15px 0px 0px; | ||
+ | color: black; | ||
+ | background-color: white; | ||
+ | } | ||
+ | .right-menu li a:hover { | ||
+ | color: black; | ||
+ | text-decoration: underline; | ||
+ | } | ||
</style> | </style> | ||
<html> | <html> |
Revision as of 13:11, 14 June 2012