Team:TU-Delft/CSSLaksh
From 2012.igem.org
(Difference between revisions)
(29 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 */ | ||
+ | .day-empty { | ||
+ | color: red; | ||
+ | } | ||
+ | .day-active { | ||
+ | color: green; | ||
+ | } | ||
+ | |||
+ | *{ | ||
+ | border:0; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | html { | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background:none; | ||
+ | /*background-image:url('https://static.igem.org/mediawiki/igem.org/7/73/Backgroundextra.jpg');*/ | ||
+ | border:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .dropdown | ||
+ | { | ||
+ | color: #555; | ||
+ | margin: 3px -22px 0 0; | ||
+ | width: 143px; | ||
+ | position: relative; | ||
+ | height: 17px; | ||
+ | text-align:left; | ||
+ | } | ||
+ | .submenu | ||
+ | { | ||
+ | background: #fff; | ||
+ | position: absolute; | ||
+ | top: -12px; | ||
+ | left: -20px; | ||
+ | z-index: 100; | ||
+ | width: 135px; | ||
+ | display: none; | ||
+ | margin-left: 10px; | ||
+ | padding: 40px 0 5px; | ||
+ | border-radius: 6px; | ||
+ | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); | ||
+ | } | ||
+ | .dropdown li a | ||
+ | { | ||
+ | color: #555555; | ||
+ | display: block; | ||
+ | font-family: arial; | ||
+ | font-weight: bold; | ||
+ | padding: 6px 15px; | ||
+ | cursor: pointer; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | .dropdown li a:hover | ||
+ | { | ||
+ | background:#155FB0; | ||
+ | color: #FFFFFF; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a.account | ||
+ | { | ||
+ | font-size: 11px; | ||
+ | line-height: 16px; | ||
+ | color: #555; | ||
+ | position: absolute; | ||
+ | z-index: 110; | ||
+ | display: block; | ||
+ | padding: 11px 0 0 20px; | ||
+ | height: 28px; | ||
+ | width: 121px; | ||
+ | margin: -11px 0 0 -10px; | ||
+ | text-decoration: none; | ||
+ | background: url(icons/arrow.png) 116px 17px no-repeat; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .root | ||
+ | { | ||
+ | list-style:none; | ||
+ | margin:0px; | ||
+ | padding:0px; | ||
+ | font-size: 11px; | ||
+ | padding: 11px 0 0 0px; | ||
+ | border-top:1px solid #dedede; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
body { | body { | ||
- | + | width:100%; | |
- | + | height:100%; | |
- | + | /*background:#10143a;*/ | |
- | + | border:none; | |
- | # | + | padding:0; |
- | + | 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:1000px; | ||
+ | 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{ | ||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-size:16px; | ||
+ | text-transform:uppercase; | ||
+ | letter-spacing:1px; | ||
+ | border-bottom:2px solid #000000; | ||
+ | text-decoration: none; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | h3{ | ||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-variant: small-caps; | ||
+ | font-stretch: ultra-expanded; | ||
+ | color: #2ab117; | ||
+ | font-size:12px; | ||
+ | font-weight:bold; | ||
+ | line-height:18px; | ||
+ | letter-spacing:1px; | ||
+ | } | ||
+ | h6{ | ||
+ | color: #357c24; | ||
+ | font-size:11px; | ||
+ | } | ||
+ | |||
+ | a:link, a:active, a:visited{ | ||
+ | color: #357c24; | ||
+ | text-decoration:none; | ||
+ | font-weight:#2ab117; | ||
+ | target-name:new; | ||
+ | target-new:tab; | ||
+ | |||
+ | } | ||
+ | a:hover{ | ||
+ | color:#2ab117; | ||
+ | } | ||
+ | #content { | ||
+ | background: #2ab117; | ||
+ | padding:0; | ||
+ | width:100%; | ||
+ | border:0; | ||
+ | } | ||
+ | #bodyContent{ | ||
+ | margin:0 auto; | ||
+ | padding:0; | ||
+ | width:625px; | ||
+ | border:0; | ||
+ | background:white; | ||
+ | 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 { | ||
+ | |||
+ | |||
+ | /* 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_igem2{ | ||
+ | position:fixed; | ||
+ | width:70px; | ||
+ | height:57px; | ||
+ | margin:120px 0 0 20px; | ||
+ | border:0; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | float:left; | ||
+ | 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{ | ||
+ | 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; | ||
+ | } | ||
+ | /* | ||
+ | #video-container{ | ||
+ | position:relative; | ||
+ | z-index:800; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | #nav { /*main menu css*/ | ||
+ | position:fixed; | ||
+ | width:1300px; | ||
+ | top:30px; | ||
+ | left:40%; | ||
+ | right:60%; | ||
+ | margin: 0 0 0 -330px; | ||
+ | padding: 0; | ||
+ | z-index:1001; | ||
+ | |||
+ | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-size:14px; | ||
+ | letter-spacing:1px; | ||
+ | text-transform:uppercase; | ||
+ | |||
+ | height: 17px; | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* common styling */ | ||
+ | #nav ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:14px; font-size:11px; overflow:hidden;} | ||
+ | #nav ul {padding:0; margin:0; list-style: none;} | ||
+ | #nav ul li {float:left; position:relative;} | ||
+ | #nav ul li ul {display: none;} | ||
+ | |||
+ | /* specific to non IE browsers */ | ||
+ | #nav ul li:hover a {color:#fff; background:#36f;} | ||
+ | #nav ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} | ||
+ | #nav ul li:hover ul li a.hide {background:#6a3; color:#fff;} | ||
+ | #nav ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} | ||
+ | #nav ul li:hover ul li ul {display: none;} | ||
+ | #nav ul li:hover ul li a {display:block; background:#ddd; color:#000;} | ||
+ | #nav ul li:hover ul li a:hover {background:#6fc; color:#000;} | ||
+ | #nav ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} | ||
+ | #nav ul li:hover ul li:hover ul.left {left:-105px;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .third{ | ||
+ | font-size:11px; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #footer { | ||
+ | text-decoration:none; | ||
+ | border:none; | ||
+ | width:100%; | ||
+ | } | ||
+ | #footer-box{ | ||
+ | width:0px; | ||
+ | height:0px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .sum_dot{ | ||
+ | list-style: disc; | ||
+ | } | ||
+ | |||
+ | .sum_number{ | ||
+ | list-style: decimal; | ||
+ | } | ||
+ | |||
+ | #contentSub{ | ||
+ | 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: "Lucida Sans Unicode", "Lucida Grande", sans-serif; | ||
+ | font-size: 95%; | ||
+ | line-height: 1em; | ||
+ | z-index:1001; | ||
+ | } | ||
+ | |||
+ | #menubar ul { | ||
+ | color: #E81B05; | ||
+ | list-style: none; | ||
+ | } | ||
+ | #menubar li { | ||
+ | display: inline; | ||
+ | position: relative; | ||
+ | cursor: pointer; | ||
+ | padding-left: 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 { | ||
+ | padding: 0px 10px 0px 0px; | ||
+ | color: | ||
+ | } | ||
+ | .left-menu .selected { | ||
+ | # color: white; | ||
+ | } | ||
+ | #.left-menu .selected:hover { | ||
+ | # color: #000000; | ||
+ | #} | ||
+ | |||
+ | .left-menu:hover a { | ||
+ | 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 { | ||
+ | # background-color: yellow ; | ||
+ | } | ||
+ | |||
+ | .right-menu li a { | ||
+ | padding: 0px 15px 0px 0px; | ||
+ | color: white; | ||
+ | background-color: #2ab117; | ||
+ | } | ||
+ | .right-menu li a:hover { | ||
+ | color: #2ab117; | ||
+ | text-decoration: underline; | ||
+ | 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 22:18, 26 October 2012