Template:Team:KULeuven/Stylesheet
From 2009.igem.org
(Difference between revisions)
(240 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | <!-- | + | <!-- |
+ | |||
.left { | .left { | ||
text-align: left; | text-align: left; | ||
Line 13: | Line 14: | ||
text-align: center; | text-align: center; | ||
} | } | ||
+ | |||
+ | |||
+ | /* ----------------------------------------------------------- | ||
+ | * day navigator | ||
+ | * ----------------------------------------------------------- | ||
+ | */ /* {{{ */ | ||
table#NBNav { | table#NBNav { | ||
Line 22: | Line 29: | ||
table#NBNav th { | table#NBNav th { | ||
- | + | color: black; | |
- | + | ||
font-size: 70%; | font-size: 70%; | ||
- | |||
} | } | ||
table#NBNav td { | table#NBNav td { | ||
width: 60px; | width: 60px; | ||
- | |||
- | |||
border-right: none; | border-right: none; | ||
- | font-size: | + | font-size: 140%; |
} | } | ||
Line 42: | Line 45: | ||
table#NBNav td a { | table#NBNav td a { | ||
- | + | display: block; | |
- | display: block; | + | |
color: black; | color: black; | ||
+ | |||
} | } | ||
- | table#NBNav | + | table#NBNav th.mon { background: #ffd; } |
- | table#NBNav | + | table#NBNav th.tue { background: #ffc; } |
- | table#NBNav | + | table#NBNav th.wed { background: #ffb; } |
- | table#NBNav | + | table#NBNav th.thu { background: #ffa; } |
- | table#NBNav | + | table#NBNav th.fri { background: #ff9; } |
- | table#NBNav | + | table#NBNav th.sat { background: #ff8; } |
- | table#NBNav | + | table#NBNav th.sun { background: #ff7; border-right: solid 1px black;} |
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | table#NBNav td.selected a:link, table#NBNav td.selected a:visited, table#NBNav td.selected a:active { color: | + | table#NBNav td.mon:hover { background: #ffd; } |
+ | table#NBNav td.tue:hover { background: #ffc; } | ||
+ | table#NBNav td.wed:hover { background: #ffb; } | ||
+ | table#NBNav td.thu:hover { background: #ffa; } | ||
+ | table#NBNav td.fri:hover { background: #ff9; } | ||
+ | table#NBNav td.sat:hover { background: #ff8; } | ||
+ | table#NBNav td.sun:hover { background: #ff7; } | ||
+ | |||
+ | table#NBNav td.selected a:link, table#NBNav td.selected a:visited, table#NBNav td.selected a:active { color: blue; } | ||
table#NBNav a:link, table#NBNav a:visited, table#NBNav a:active { text-decoration: none; font-weight: bold;} | table#NBNav a:link, table#NBNav a:visited, table#NBNav a:active { text-decoration: none; font-weight: bold;} | ||
+ | |||
+ | /* }}} */ | ||
+ | |||
+ | /* ----------------------------------------------------------- | ||
+ | * calendar | ||
+ | * ----------------------------------------------------------- | ||
+ | */ | ||
+ | /* {{{ */ | ||
+ | |||
+ | table.calendar { margin: 0; padding: 10px; } | ||
+ | table.calendar td { margin: 0; padding: 2px; vertical-align: top; } | ||
+ | table.month .heading td { padding:2px; background-color:#d4d4d4; color:#aaa; text-align:center; font-size:120%; font-weight:bold; } | ||
+ | table.month .dow td { color:#aaa; text-align:center; font-size:110%; } | ||
+ | table.month td.today { background-color:#ddd; } | ||
+ | table.month td { | ||
+ | border: none; | ||
+ | margin: 0; | ||
+ | padding: 1pt 1.5pt; | ||
+ | font-weight: bold; | ||
+ | font-size: 8pt; | ||
+ | text-align: right; | ||
+ | background-color: #eee; | ||
+ | } | ||
+ | #bodyContent table.month a { background:none; padding:0 } | ||
+ | .day-active { color:#0000cc } | ||
+ | .day-empty { color:#cc0000 } | ||
+ | |||
+ | .day-not-selected { color: #aaa; } | ||
+ | .day-selected { color: blue; } | ||
+ | |||
+ | |||
+ | /* }}} */ | ||
+ | |||
+ | |||
+ | /* ----------------------------------------------------------- | ||
+ | * notebook wetlab experiments | ||
+ | * ----------------------------------------------------------- | ||
+ | */ | ||
+ | /* {{{ */ | ||
+ | |||
+ | div.experiment { | ||
+ | border-left: 20px solid #dddddd; | ||
+ | margin-bottom: 10px; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | /* }}} */ | ||
+ | |||
+ | |||
+ | /* ----------------------------------------------------------- | ||
+ | * header | ||
+ | * ----------------------------------------------------------- | ||
+ | */ | ||
+ | |||
+ | div#header { | ||
+ | height: 100px; | ||
+ | background-color: #ffffe8; | ||
+ | |||
+ | /* background: #ffffe8 url(https://static.igem.org/mediawiki/2009/2/21/Arenbergkasteel-header.png) no-repeat; */ | ||
+ | background: #ffffe8 url(https://static.igem.org/mediawiki/2009/0/05/KUL_Logo-67x100-transp.png) no-repeat; | ||
+ | |||
+ | background-position: bottom right; | ||
+ | position: relative; | ||
+ | border: 1px solid black; | ||
+ | margin: 40px; | ||
+ | margin-bottom: 70px; | ||
+ | } | ||
+ | |||
+ | div#title { | ||
+ | position: absolute; | ||
+ | top: -13px; | ||
+ | left: 30px; | ||
+ | font-size: 450%; | ||
+ | z-index: 1; | ||
+ | font-family: "Times New Roman"; /*,Georgia,Serif; */ | ||
+ | font-weight: bolder; | ||
+ | font-style: oblique; | ||
+ | color: #d4ad3f; | ||
+ | } | ||
+ | |||
+ | div#logo { | ||
+ | position: absolute; | ||
+ | top: -27px; | ||
+ | left: 60px; | ||
+ | float:left; | ||
+ | } | ||
+ | div#logo img { | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | /* featured links {{{ */ | ||
+ | |||
+ | div#featured { | ||
+ | position: absolute; | ||
+ | float: right; | ||
+ | top: -30px; | ||
+ | right: 140px; | ||
+ | } | ||
+ | |||
+ | div#featured ul { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | float: right; | ||
+ | } | ||
+ | div#featured ul li { | ||
+ | float: left; | ||
+ | margin: 0; | ||
+ | padding: 10; | ||
+ | text-align: center; | ||
+ | } | ||
+ | div#featured ul li a { | ||
+ | color: #777; | ||
+ | display: block; | ||
+ | /*padding: 50px 10px 5px;*/ | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | width: 90px; | ||
+ | } | ||
+ | |||
+ | div#featured ul li a img { | ||
+ | border: none; | ||
+ | text-align: center; | ||
+ | height: 48px; | ||
+ | } | ||
+ | div#featured ul li a:active {outline: none;} | ||
+ | div#featured ul li a:focus {-moz-outline-style: none;} | ||
+ | div#featured ul li a:hover { | ||
+ | background: transparent url(http://data.singularity.be/Trashcan/igem/images/pixelblack20.png); | ||
+ | color: #00407a; | ||
+ | } | ||
+ | div#featured ul li a strong { | ||
+ | color: #075a90; | ||
+ | display: block; | ||
+ | font-size: larger; | ||
+ | } | ||
/* }}} */ | /* }}} */ | ||
+ | /* menu {{{ */ | ||
+ | div#menu { | ||
+ | position: absolute; | ||
+ | top: 80px; | ||
+ | left: 250px; | ||
+ | } | ||
+ | |||
+ | div#menu ul { | ||
+ | list-style: none; | ||
+ | margin:0; | ||
+ | padding: 0; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | div#menu li { | ||
+ | float: left; | ||
+ | background-color:#ffffcc; | ||
+ | margin: 0px; | ||
+ | margin-left: 5px; | ||
+ | padding:0px; | ||
+ | } | ||
+ | |||
+ | div#menu li strong.selflink { | ||
+ | display: block; | ||
+ | padding: 10px; | ||
+ | text-decoration: none; | ||
+ | color: #777; | ||
+ | border: 2px solid black; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | div#menu li a { | ||
+ | display: block; | ||
+ | padding: 10px; | ||
+ | text-decoration: none; | ||
+ | color: #777; | ||
+ | border:2px solid #ffddaa; | ||
+ | } | ||
+ | |||
+ | div#menu li a:hover { | ||
+ | background-color:#ffddaa; | ||
+ | } | ||
+ | |||
+ | /* }}} */ | ||
+ | /* submenu {{{ */ | ||
+ | div#submenu { | ||
+ | position: absolute; | ||
+ | top: 130px; | ||
+ | left: 200px; | ||
+ | } | ||
+ | |||
+ | div#submenu ul { | ||
+ | list-style: none; | ||
+ | margin:0; | ||
+ | padding: 0; | ||
+ | float: left; | ||
+ | /* border: 2px solid #ffddaa; | ||
+ | background-color:#ffffcc; */ | ||
+ | border-top: 1px solid black; | ||
+ | } | ||
+ | |||
+ | div#submenu li { | ||
+ | float: left; | ||
+ | margin: 5px 10px; | ||
+ | } | ||
+ | |||
+ | div#submenu li a { | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | color: #777; | ||
+ | } | ||
+ | |||
+ | div#submenu li a:hover { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | /* }}} */ | ||
+ | |||
+ | div#content p.pretty:first-letter { | ||
+ | text-transform: capitalize; | ||
+ | font-weight: bold; | ||
+ | font-size: 140%; | ||
+ | } | ||
+ | |||
+ | div#content p.pretty { | ||
+ | text-indent: 1.5em; | ||
+ | margin-top: 0 | ||
+ | } | ||
+ | |||
+ | div#categoryCalendar td { | ||
+ | vertical-align: top; | ||
+ | margin: 30px; | ||
+ | } | ||
+ | |||
+ | div#sponsor { | ||
+ | position: absolute; | ||
+ | width: 136px; | ||
+ | text-align: center; | ||
+ | background: #ffffe8; | ||
+ | border: 2px solid #ffddaa; | ||
+ | font-size: 200%; | ||
+ | font-weight: bold; | ||
+ | color: #777; | ||
+ | |||
+ | } | ||
+ | div#sponsor.gold{ | ||
+ | position: relative; | ||
+ | width: 136px; | ||
+ | border: none; | ||
+ | border-bottom: 2px solid #ffddaa; | ||
+ | border-top: 2px solid #ffddaa; | ||
+ | text-align:center; | ||
+ | font-size: 85%; | ||
+ | color: #D4AF37; | ||
+ | margin-bottom: 5px; | ||
+ | padding: 2px 0px 2px 0px; | ||
+ | } | ||
+ | |||
+ | div#sponsor.silver { | ||
+ | position: relative; | ||
+ | width: 136px; | ||
+ | border: none; | ||
+ | border-bottom: 2px solid #ffddaa; | ||
+ | border-top: 2px solid #ffddaa; | ||
+ | text-align: center; | ||
+ | font-size: 85%; | ||
+ | color: #C0C0C0; | ||
+ | margin-bottom: 5px; | ||
+ | padding: 2px 0px 2px 0px; | ||
+ | } | ||
+ | |||
+ | div#sponsor.header { | ||
+ | position: relative; | ||
+ | width: 136px; | ||
+ | border: none; | ||
+ | border-top: 2px solid #ffddaa; | ||
+ | text-align: center; | ||
+ | font-size: 100%; | ||
+ | color: #777; | ||
+ | margin-bottom: 10px; | ||
+ | padding: 2px 0px 2px 0px; | ||
+ | } | ||
+ | |||
+ | div#sponsor span { | ||
+ | } | ||
+ | |||
+ | div#sponsor.topright { | ||
+ | left: auto; | ||
+ | right: -141px; | ||
+ | top: 0px; | ||
+ | bottom: auto; | ||
+ | } | ||
+ | |||
+ | div#sponsor.topleft { | ||
+ | left: -141px; | ||
+ | right: auto; | ||
+ | top: 0px; | ||
+ | bottom: auto; | ||
+ | } | ||
+ | |||
+ | div#sponsor.bottomright { | ||
+ | left: auto; | ||
+ | right: -141px; | ||
+ | top: auto; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | |||
+ | div#sponsor.bottomleft { | ||
+ | left: -141px; | ||
+ | right: auto; | ||
+ | top: auto; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | |||
+ | div#sponsor img { | ||
+ | width:130px; | ||
+ | } | ||
+ | |||
+ | div#sponsor a { | ||
+ | color: white; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | h2 span.mw-headline { | ||
+ | position: relative; | ||
+ | left: 1em; | ||
+ | } | ||
+ | |||
+ | h3 span.mw-headline { | ||
+ | position: relative; | ||
+ | left: 2em; | ||
+ | } | ||
+ | |||
+ | |||
+ | div#jumph2 { | ||
+ | position: relative; | ||
+ | left: 1em; | ||
+ | } | ||
+ | |||
+ | div#jumph3 { | ||
+ | position: relative; | ||
+ | left: 2em; | ||
+ | } | ||
+ | |||
+ | table.Generic { | ||
+ | margin: 5px; | ||
+ | padding: 10px; | ||
+ | border: 1px solid #ffddaa; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | table.Generic th { | ||
+ | padding: 10px; | ||
+ | background-color: #ffffe8; | ||
+ | } | ||
+ | |||
+ | table.Generic th.left { | ||
+ | text-align: left; | ||
+ | border-right: 1px dashed #ffddaa; | ||
+ | } | ||
+ | |||
+ | table.Generic th.top { | ||
+ | text-align: center; | ||
+ | border-bottom: 1px dashed #ffddaa; | ||
+ | } | ||
+ | |||
+ | table.Generic td { | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | div#HideRedLinks a[href$='redlink=1'] { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .colcontainer { | ||
+ | clear: both; | ||
+ | } | ||
+ | .twocol { | ||
+ | width: 47%; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | .twocol + .twocol { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | |||
+ | #imap {display:block; width:800px; height:500px; background:url(https://static.igem.org/mediawiki/2009/8/83/IGEM_Team_foto_800px.png); position:relative; border: 1px solid black;} | ||
+ | * html #imap a#title {height:500px; } | ||
+ | #imap a#title:hover {background-position: 0 0; z-index:10;} | ||
+ | |||
+ | #imap dd {position:absolute; padding:0; margin:0;} | ||
+ | #imap #pic1 {left:210px; top:173px; z-index:20;} | ||
+ | #imap #pic2 {left:265px; top:203px; z-index:20;} | ||
+ | #imap #pic3 {left:293px; top:166px; z-index:20;} | ||
+ | #imap #pic4 {left:333px; top:187px; z-index:20;} | ||
+ | #imap #pic5 {left:369px; top:178px; z-index:20;} | ||
+ | #imap #pic6 {left:403px; top:202px; z-index:20;} | ||
+ | #imap #pic7 {left:435px; top:185px; z-index:20;} | ||
+ | #imap #pic8 {left:472px; top:198px; z-index:20;} | ||
+ | #imap #pic9 {left:506px; top:179px; z-index:20;} | ||
+ | #imap #pic10 {left:549px; top:196px; z-index:20;} | ||
+ | #imap #pic11 {left:308px; top:309px; z-index:20;} | ||
+ | #imap #pic12 {left:378px; top:311px; z-index:20;} | ||
+ | |||
+ | #imap a#text1:hover span {left:265px; top:107px;} | ||
+ | #imap a#text2:hover span {left:210px; top:77px;} | ||
+ | #imap a#text3:hover span {left:182px; top:114px;} | ||
+ | #imap a#text4:hover span {left:142px; top:93px;} | ||
+ | #imap a#text5:hover span {left:106px; top:102px;} | ||
+ | #imap a#text6:hover span {left:72px; top:78px;} | ||
+ | #imap a#text7:hover span {left:40px; top:95px;} | ||
+ | #imap a#text8:hover span {left:3px; top:82px;} | ||
+ | #imap a#text9:hover span {left:-31px; top:101px;} | ||
+ | #imap a#text10:hover span {left:-74px; top:84px;} | ||
+ | #imap a#text11:hover span {left:167px; top:-29px;} | ||
+ | #imap a#text12:hover span {left:97px; top:-31px;} | ||
+ | |||
+ | |||
+ | #imap a#text1, #imap a#text2, #imap a#text3, #imap a#text4, #imap a#text5, #imap a#text6, #imap a#text7, #imap a#text8, #imap a#text9, #imap a#text10, #imap a#text11, #imap a#text12 {display:block; width: 61px; height:65px; text-decoration:none; z-index:20; border: 1px dotted white;} | ||
+ | #imap a span, #imap a:visited span {display:none;} | ||
+ | #imap a#text1:hover, #imap a#text2:hover, #imap a#text3:hover, #imap a#text4:hover, #imap a#text5:hover, #imap a#text6:hover, #imap a#text7:hover, #imap a#text8:hover, #imap a#text9:hover, #imap a#text10:hover, #imap a#text11:hover, #imap a#text12:hover {border: 1px solid white; background: transparent url(https://static.igem.org/mediawiki/2009/2/2c/Transppixel50.png);} | ||
+ | |||
+ | #imap a:hover span {position:absolute; width:300px; height: 200px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px; text-align: left; z-index: 40; background: transparent url(https://static.igem.org/mediawiki/2009/2/2c/Transppixel50.png);} | ||
+ | /* * html #imap a:hover span {width:300px;} */ | ||
+ | |||
+ | |||
+ | #imap a span:first-line {font-weight:bold; font-style:italic;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
--> | --> | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 14:58, 9 September 2009