Template:Zjucss main
From 2011.igem.org
(Difference between revisions)
(40 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | |||
<style> | <style> | ||
+ | @charset "UTF-8"; | ||
+ | /* CSS Document */ | ||
+ | |||
+ | body{ | ||
+ | background-color:#cccccc; | ||
+ | } | ||
+ | |||
div#top-section{ | div#top-section{ | ||
background-color:white; | background-color:white; | ||
- | background-image:url( | + | background-image:url(https://static.igem.org/mediawiki/2011/5/51/Topsectionbg.png); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
height: 10px; | height: 10px; | ||
Line 18: | Line 24: | ||
top: 0; | top: 0; | ||
height:20px; | height:20px; | ||
- | width: | + | width:300px; |
font-family: 'Molengo', sans-serif; | font-family: 'Molengo', sans-serif; | ||
- | font-size: | + | font-size:8pt; |
} | } | ||
div#menubar .selected a{ | div#menubar .selected a{ | ||
Line 74: | Line 80: | ||
padding:0px; | padding:0px; | ||
font-family:'Molengo', sans-serif; | font-family:'Molengo', sans-serif; | ||
+ | } | ||
+ | #content p{ | ||
+ | display:none; | ||
+ | } | ||
+ | #contentwrapper{ | ||
+ | vertical-align:middle; | ||
+ | width:970px;margin:0 auto;text-align:left;position:absolute; | ||
+ | font-family:'Molengo', sans-serif; | ||
+ | background-color:#e9e9e9; | ||
+ | z-index:-3; | ||
+ | } | ||
+ | #contentwrapper p{ | ||
+ | display:block; | ||
} | } | ||
Line 102: | Line 121: | ||
list-style: none; | list-style: none; | ||
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/ | position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/ | ||
- | + | height: 30px; | |
- | background: | + | background:transparent; |
/*background: url(topnav_stretch.gif) repeat-x;*/ | /*background: url(topnav_stretch.gif) repeat-x;*/ | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
/*set the alpha*/ | /*set the alpha*/ | ||
} | } | ||
+ | #contentwrapper .header .nav #topnav a { | ||
+ | font-family: 'Hammersmith One', sans-serif;; | ||
+ | } | ||
+ | |||
+ | |||
ul#topnav li { | ul#topnav li { | ||
float: left; | float: left; | ||
margin: 0; padding: 0; | margin: 0; padding: 0; | ||
+ | |||
border-right: 1px solid #555; /*--Divider for each parent level links--*/ | border-right: 1px solid #555; /*--Divider for each parent level links--*/ | ||
+ | filter:alpha(opacity=50); | ||
+ | -moz-opacity:0.5; | ||
+ | -khtml-opacity: 0.5; | ||
+ | opacity: 0.5; | ||
} | } | ||
ul#topnav li a { | ul#topnav li a { | ||
- | padding: | + | padding: 5px 15px; |
+ | font-size: 28px; | ||
display: block; | display: block; | ||
color: #f0f0f0; | color: #f0f0f0; | ||
Line 123: | Line 150: | ||
} | } | ||
ul#topnav li:hover { | ul#topnav li:hover { | ||
- | + | filter:alpha(opacity=100); | |
+ | -moz-opacity:1.0; | ||
+ | -khtml-opacity:1.0; | ||
+ | opacity:1.0; | ||
/*set the alpha*/} | /*set the alpha*/} | ||
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/ | /*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/ | ||
- | + | .nav #topnav #P_Project span { | |
+ | background-color: #f19226; | ||
+ | } | ||
+ | .nav #topnav #P_Team span { | ||
+ | background-color: #56b74c; | ||
+ | } | ||
+ | .nav #topnav #P_Notebook span { | ||
+ | background-color: #0068b1; | ||
+ | } | ||
+ | .nav #topnav #P_HumanPractice span { | ||
+ | background-color: #4700b1; | ||
+ | } | ||
ul#topnav li span { | ul#topnav li span { | ||
float: left; | float: left; | ||
- | padding: | + | padding: 3px; |
position: absolute; | position: absolute; | ||
- | left: 0; top: | + | left: 0; |
+ | top:29px; | ||
display: none; /*--Hide by default--*/ | display: none; /*--Hide by default--*/ | ||
width: 930px; | width: 930px; | ||
- | background: # | + | background: #transparent; |
color: #fff; | color: #fff; | ||
/*--Bottom right rounded corner--*/ | /*--Bottom right rounded corner--*/ | ||
Line 146: | Line 188: | ||
-khtml-border-radius-bottomleft: 5px; | -khtml-border-radius-bottomleft: 5px; | ||
-webkit-border-bottom-left-radius: 5px; | -webkit-border-bottom-left-radius: 5px; | ||
+ | |||
} | } | ||
+ | ul#topnav span a{ | ||
+ | font-size:26px;} | ||
ul#topnav li:hover span { | ul#topnav li:hover span { | ||
- | filter:alpha(opacity= | + | filter:alpha(opacity=90); |
- | -moz-opacity: | + | -moz-opacity:0.9; |
- | -khtml-opacity: | + | -khtml-opacity:0.9; |
- | opacity: | + | opacity:0.9; |
display: block; } /*--Show subnav on hover--*/ | display: block; } /*--Show subnav on hover--*/ | ||
- | ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ | + | ul#topnav li span a { |
+ | display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ | ||
+ | |||
ul#topnav li span a:hover {text-decoration: underline;} | ul#topnav li span a:hover {text-decoration: underline;} | ||
+ | .nav #P_Home { | ||
+ | background-color: #ed4334; | ||
+ | |||
+ | } | ||
+ | .nav #P_Project { | ||
+ | background-color: #f19226; | ||
+ | } | ||
+ | .nav #P_Team { | ||
+ | background-color: #56b74c; | ||
+ | } | ||
+ | .nav #P_Notebook { | ||
+ | background-color: #0068b1; | ||
+ | } | ||
+ | .nav #P_HumanPractice { | ||
+ | background-color: #4700b1; | ||
+ | } | ||
a:hover{ | a:hover{ | ||
Line 181: | Line 244: | ||
border-bottom: none; | border-bottom: none; | ||
padding-left:10px; | padding-left:10px; | ||
- | padding-bottom: | + | padding-bottom:0; |
- | padding-top: | + | padding-top:0; |
} | } | ||
.block a{ | .block a{ | ||
Line 188: | Line 251: | ||
} | } | ||
.block hr{ | .block hr{ | ||
- | + | height:2px; | |
margin-left:15px; | margin-left:15px; | ||
margin-right:15px; | margin-right:15px; | ||
Line 197: | Line 260: | ||
} | } | ||
.blocktop{ | .blocktop{ | ||
- | background-image:url( | + | background-image:url(http://ung.igem.org/wiki/images/1/17/Blocktop.png); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
} | } | ||
.blockbottom{ | .blockbottom{ | ||
- | background-image:url( | + | background-image:url(http://ung.igem.org/wiki/images/1/16/Blockbottom.png); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
} | } | ||
.blockcontent{ | .blockcontent{ | ||
- | padding: | + | padding:10px; |
background-color:white; | background-color:white; | ||
} | } | ||
Line 212: | Line 275: | ||
background-color:white; | background-color:white; | ||
text-align:right; | text-align:right; | ||
- | padding-right: | + | padding-right:24px; |
- | font-size: | + | font-size:16px; |
} | } | ||
.links a:hover{ | .links a:hover{ | ||
Line 224: | Line 287: | ||
.sidebartop{ | .sidebartop{ | ||
height:10px; | height:10px; | ||
- | background-image:url( | + | background-image:url(http://ung.igem.org/wiki/images/9/9f/Sidebartop.png); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
} | } | ||
.sidebarbottom{ | .sidebarbottom{ | ||
height:10px; | height:10px; | ||
- | background-image:url( | + | background-image:url(http://ung.igem.org/wiki/images/7/79/Sidebarbottom.png); |
background-repeat::no-repeat; | background-repeat::no-repeat; | ||
} | } | ||
.bgimg{ | .bgimg{ | ||
- | background-image:url( | + | background-image:url(http://ung.igem.org/wiki/images/5/5d/Homebg.png); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
position:absolute; | position:absolute; | ||
Line 254: | Line 317: | ||
} | } | ||
.bgpart2{ | .bgpart2{ | ||
- | background-image:url( | + | background-image:url(http://ung.igem.org/wiki/images/c/c2/Bg1.png); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
position:absolute; | position:absolute; | ||
Line 292: | Line 355: | ||
} | } | ||
.main{ | .main{ | ||
- | background-color:# | + | background-color:#transparent; |
position:static; | position:static; | ||
top:auto; | top:auto; | ||
Line 317: | Line 380: | ||
-khtml-opacity: 0.5; | -khtml-opacity: 0.5; | ||
opacity: 0.5; | opacity: 0.5; | ||
- | background-color: | + | background-color:transparent; |
color:white; | color:white; | ||
+ | } | ||
+ | div #part0 .blockcontent{ | ||
+ | background-color:black; | ||
+ | } | ||
+ | div #part0 .links{ | ||
+ | background-color:black; | ||
+ | } | ||
+ | div #part0 .sidebartop{ | ||
+ | background:url(blocktop3.png) transparent; | ||
+ | } | ||
+ | div #part0 .sidebarbottom{ | ||
+ | background:url(blockbottom3.png) transparent; | ||
} | } | ||
Line 342: | Line 417: | ||
width:250px; | width:250px; | ||
} | } | ||
- | #note h1 | + | #note h1{ |
color:#7fb3d8 | color:#7fb3d8 | ||
} | } | ||
Line 348: | Line 423: | ||
background-color:#7fb3d8; | background-color:#7fb3d8; | ||
} | } | ||
- | #note a: hover{ | + | #note a{ |
- | color:# | + | color:#7fb3d8; |
+ | } | ||
+ | #note a:hover{ | ||
+ | color:#006699; | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 356: | Line 434: | ||
width:660px; | width:660px; | ||
} | } | ||
- | #project h1 | + | #project h1{ |
color:#ffcc99; | color:#ffcc99; | ||
} | } | ||
Line 362: | Line 440: | ||
background-color:#ffcc99; | background-color:#ffcc99; | ||
} | } | ||
- | #project a: hover{ | + | #project a{ |
+ | color:#ffcc99; | ||
+ | } | ||
+ | #project a:hover{ | ||
color:#ff9933; | color:#ff9933; | ||
text-decoration:none; | text-decoration:none; | ||
Line 369: | Line 450: | ||
#twitter{ | #twitter{ | ||
} | } | ||
- | #twitter h1 | + | #twitter h1{ |
color:#3399ff; | color:#3399ff; | ||
} | } | ||
Line 375: | Line 456: | ||
background-color:#3399ff; | background-color:#3399ff; | ||
} | } | ||
- | #twitter a: hover{ | + | #twitter a{ |
+ | color:#3399ff; | ||
+ | } | ||
+ | #twitter a:hover{ | ||
color:#0066ff | color:#0066ff | ||
text-decoration:none; | text-decoration:none; | ||
Line 381: | Line 465: | ||
#visits{ | #visits{ | ||
} | } | ||
- | #visits h1 | + | #visits h1{ |
color:#666666; | color:#666666; | ||
} | } | ||
Line 387: | Line 471: | ||
background-color:#666666; | background-color:#666666; | ||
} | } | ||
- | #visits a: hover{ | + | #visits a{ |
+ | color:#666666; | ||
+ | } | ||
+ | #visits a:hover{ | ||
color:#333333; | color:#333333; | ||
text-decoration:none; | text-decoration:none; | ||
+ | } | ||
+ | #visits div #clustrmaps-widget{ | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | |||
} | } | ||
#team{ | #team{ | ||
Line 395: | Line 487: | ||
width:660px; | width:660px; | ||
} | } | ||
- | #team h1 | + | #team h1{ |
color:#aadba5; | color:#aadba5; | ||
} | } | ||
Line 401: | Line 493: | ||
background-color:#aadba5; | background-color:#aadba5; | ||
} | } | ||
- | #team a: hover{ | + | #team a{ |
+ | color:#aadba5; | ||
+ | } | ||
+ | #team a:hover{ | ||
color:#56b74c; | color:#56b74c; | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
#flickr{ | #flickr{ | ||
- | |||
- | |||
} | } | ||
- | #flickr h1 | + | #flickr .blockcontent #player{ |
+ | |||
+ | padding-left:80px; | ||
+ | } | ||
+ | #flickr h1{ | ||
color:#ff66cc; | color:#ff66cc; | ||
} | } | ||
Line 415: | Line 512: | ||
background-color:#ff66cc; | background-color:#ff66cc; | ||
} | } | ||
- | #flickr a: hover{ | + | #flickr a{ |
+ | color:#ff66cc; | ||
+ | } | ||
+ | #flickr a:hover{ | ||
color:#ff0099; | color:#ff0099; | ||
text-decoration:none; | text-decoration:none; | ||
Line 426: | Line 526: | ||
color:black; | color:black; | ||
} | } | ||
- | #sponsors a: hover{ | + | #sponsors a:hover{ |
color:#999; | color:#999; | ||
} | } | ||
#sponsors .blocktop{ | #sponsors .blocktop{ | ||
- | background-image:url( | + | background-image:url(http://ung.igem.org/wiki/images/b/b7/Blocktop2.png); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
} | } | ||
#sponsors .blockbottom{ | #sponsors .blockbottom{ | ||
- | background-image:url( | + | background-image:url(http://ung.igem.org/wiki/images/c/c5/Blockbottom2.png); |
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
+ | } | ||
+ | #hp h1{ | ||
+ | color:#9966cc; | ||
+ | } | ||
+ | #hp hr{ | ||
+ | background-color:#9966cc; | ||
+ | } | ||
+ | #hp a{ | ||
+ | color:#9966cc; | ||
+ | } | ||
+ | #hp a:hover{ | ||
+ | color:#4700b1; | ||
+ | text-decoration:none; | ||
} | } | ||
.footer{ | .footer{ | ||
Line 445: | Line 558: | ||
color:#cccccc; | color:#cccccc; | ||
margin:10px; | margin:10px; | ||
+ | text-decoration:none; | ||
} | } | ||
.footer a:hover { | .footer a:hover { | ||
color:#FFF; | color:#FFF; | ||
text-decoration:none; | text-decoration:none; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .pagetitle{ | ||
+ | text-align:center; | ||
+ | margin-bottom:10px; | ||
+ | filter:alpha(opacity=50); | ||
+ | -moz-opacity:0.5; | ||
+ | -khtml-opacity: 0.5; | ||
+ | opacity: 0.5; | ||
+ | padding:2px 0px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .pagetitle h1{ | ||
+ | font-size:30px; | ||
+ | margin:5px 0px; | ||
} | } | ||
</style> | </style> | ||
- | </ | + | </html> |
- | + |
Latest revision as of 10:55, 11 September 2011