Template:Team:HKU-HKBU/style.css
From 2009.igem.org
(Difference between revisions)
YinanZhang (Talk | contribs) |
|||
(58 intermediate revisions not shown) | |||
Line 11: | Line 11: | ||
#topnav | #topnav | ||
{ | { | ||
- | margin: | + | margin:0px 7px 12px; |
width:951px; | width:951px; | ||
- | height: | + | height:300px; |
- | + | ||
cursor:default; | cursor:default; | ||
} | } | ||
- | # | + | #topnav div.topblock |
{ | { | ||
width:951px; | width:951px; | ||
Line 25: | Line 24: | ||
} | } | ||
- | #topnav div. | + | #topnav div.block |
{ | { | ||
float:left; | float:left; | ||
Line 44: | Line 43: | ||
#topnav div.tab a:link | #topnav div.tab a:link | ||
{ | { | ||
- | color: | + | color:white; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 50: | Line 49: | ||
#topnav div.tab a:visited | #topnav div.tab a:visited | ||
{ | { | ||
- | color: | + | color:white; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 56: | Line 55: | ||
#topnav div.tab a:hover | #topnav div.tab a:hover | ||
{ | { | ||
- | color: | + | color:orange; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 62: | Line 61: | ||
#topnav div.tab a:active | #topnav div.tab a:active | ||
{ | { | ||
- | color: | + | color:orange; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 78: | Line 77: | ||
#topnav div.tabsel a:link | #topnav div.tabsel a:link | ||
{ | { | ||
- | color: | + | color:chocolate; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 84: | Line 83: | ||
#topnav div.tabsel a:visited | #topnav div.tabsel a:visited | ||
{ | { | ||
- | color: | + | color:chocolate; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 90: | Line 89: | ||
#topnav div.tabsel a:hover | #topnav div.tabsel a:hover | ||
{ | { | ||
- | color: | + | color:orange; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 96: | Line 95: | ||
#topnav div.tabsel a:active | #topnav div.tabsel a:active | ||
{ | { | ||
- | color: | + | color:orange; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 105: | Line 104: | ||
margin:0px 12px 12px 7px; | margin:0px 12px 12px 7px; | ||
width:191px; | width:191px; | ||
- | + | background-color:white; | |
- | background-color: | + | |
cursor:default; | cursor:default; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.block |
{ | { | ||
width:191px; | width:191px; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabzero | ||
+ | { | ||
+ | padding:4px 12px; | ||
+ | width:167px; | ||
+ | height:16px; | ||
background-color:transparent; | background-color:transparent; | ||
+ | font:bold 1em verdana,sans-serif; | ||
+ | text-align:left; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabzero a:link |
{ | { | ||
- | + | color:saddlebrown; | |
- | padding: | + | text-decoration:none; |
- | width: | + | } |
- | height: | + | |
- | background-color: | + | #leftnav div.tabzero a:visited |
- | font:bold | + | { |
+ | color:saddlebrown; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabzero a:hover | ||
+ | { | ||
+ | color:saddlebrown; | ||
+ | font-style:italic; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabzero a:active | ||
+ | { | ||
+ | color:saddlebrown; | ||
+ | font-style:italic; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabone | ||
+ | { | ||
+ | padding:4px 12px; | ||
+ | width:167px; | ||
+ | height:16px; | ||
+ | background-color:transparent; | ||
+ | font:bold 1em verdana,sans-serif; | ||
text-align:left; | text-align:left; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabone a:link | ||
+ | { | ||
color:chocolate; | color:chocolate; | ||
+ | text-decoration:none; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabone a:visited |
{ | { | ||
- | + | color:chocolate; | |
- | padding: | + | text-decoration:none; |
- | width: | + | } |
- | height: | + | |
- | background-color: | + | #leftnav div.tabone a:hover |
- | font: | + | { |
+ | color:chocolate; | ||
+ | font-style:italic; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabone a:active | ||
+ | { | ||
+ | color:chocolate; | ||
+ | font-style:italic; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabtwo | ||
+ | { | ||
+ | padding:4px 12px; | ||
+ | width:167px; | ||
+ | height:16px; | ||
+ | background-color:transparent; | ||
+ | font:1em verdana,sans-serif; | ||
text-align:left; | text-align:left; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabtwo a:link |
{ | { | ||
- | color: | + | color:chocolate; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabtwo a:visited |
{ | { | ||
- | color: | + | color:chocolate; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabtwo a:hover |
{ | { | ||
- | color: | + | color:chocolate; |
+ | font-style:italic; | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabtwo a:active |
{ | { | ||
- | color: | + | color:chocolate; |
+ | font-style:italic; | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabzerosel |
{ | { | ||
- | + | padding:4px 12px; | |
- | + | width:167px; | |
- | padding:4px | + | height:16px; |
- | width: | + | background-color:chocolate; |
- | height: | + | font:bold 1em verdana,sans-serif; |
- | background-color: | + | |
- | font:bold | + | |
text-align:left; | text-align:left; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabzerosel a:link |
{ | { | ||
- | color: | + | color:white; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabzerosel a:visited |
{ | { | ||
- | color: | + | color:white; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabzerosel a:hover |
{ | { | ||
- | color: | + | color:white; |
+ | font-style:italic; | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | #leftnav div. | + | #leftnav div.tabzerosel a:active |
{ | { | ||
- | color: | + | color:white; |
+ | font-style:italic; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabonesel | ||
+ | { | ||
+ | padding:4px 12px; | ||
+ | width:167px; | ||
+ | height:16px; | ||
+ | background-color:chocolate; | ||
+ | font:bold 1em verdana,sans-serif; | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabonesel a:link | ||
+ | { | ||
+ | color:white; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabonesel a:visited | ||
+ | { | ||
+ | color:white; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabonesel a:hover | ||
+ | { | ||
+ | color:white; | ||
+ | font-style:italic; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabonesel a:active | ||
+ | { | ||
+ | color:white; | ||
+ | font-style:italic; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabtwosel | ||
+ | { | ||
+ | padding:4px 12px; | ||
+ | width:167px; | ||
+ | height:16px; | ||
+ | background-color:chocolate; | ||
+ | font:1em verdana,sans-serif; | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabtwosel a:link | ||
+ | { | ||
+ | color:white; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabtwosel a:visited | ||
+ | { | ||
+ | color:white; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabtwosel a:hover | ||
+ | { | ||
+ | color:white; | ||
+ | font-style:italic; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #leftnav div.tabtwosel a:active | ||
+ | { | ||
+ | color:white; | ||
+ | font-style:italic; | ||
text-decoration:none; | text-decoration:none; | ||
} | } | ||
Line 209: | Line 339: | ||
#wikicontent | #wikicontent | ||
{ | { | ||
- | margin: | + | margin:33px 0px 12px; |
- | border:2px solid | + | border:2px solid #6699FF; |
padding:12px; | padding:12px; | ||
width:720px; | width:720px; | ||
height:auto; | height:auto; | ||
font-family:calibri,sans-serif; | font-family:calibri,sans-serif; | ||
+ | font-size: 15px; | ||
text-align:justify; | text-align:justify; | ||
} | } | ||
Line 220: | Line 351: | ||
#sponsorlogosbox | #sponsorlogosbox | ||
{ | { | ||
- | width: | + | width:748px; |
height:294px; | height:294px; | ||
} | } | ||
Line 226: | Line 357: | ||
#sponsortag | #sponsortag | ||
{ | { | ||
- | padding: | + | padding:4px 14px; |
width:720px; | width:720px; | ||
height:12px; | height:12px; | ||
- | background-color: | + | background-color:#6699FF; |
font:bold 0.75em verdana,sans-serif; | font:bold 0.75em verdana,sans-serif; | ||
color:white; | color:white; | ||
Line 236: | Line 367: | ||
#sponsorlogos | #sponsorlogos | ||
{ | { | ||
- | border:2px solid | + | border:2px solid #6699FF; |
padding:12px; | padding:12px; | ||
width:720px; | width:720px; | ||
Line 254: | Line 385: | ||
width:240px; | width:240px; | ||
height:60px; | height:60px; | ||
+ | } | ||
+ | |||
+ | .glossymenu{ | ||
+ | margin: 0px 0px 15px 0px; | ||
+ | padding: 0; | ||
+ | width: 191px; /*width of menu*/ | ||
+ | border: 1px solid #9A9A9A; | ||
+ | border-bottom-width: 0; | ||
+ | } | ||
+ | |||
+ | .glossymenu a.menuitem{ | ||
+ | background: #6699FF url(https://static.igem.org/mediawiki/2009/e/ee/Glossyback_1.gif) repeat-x bottom left; | ||
+ | font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; | ||
+ | color: white; | ||
+ | display: block; | ||
+ | position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ | ||
+ | width: auto; | ||
+ | padding: 4px 0; | ||
+ | padding-left: 10px; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ | ||
+ | position: absolute; | ||
+ | top: 5px; | ||
+ | right: 5px; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | .glossymenu a.menuitem:hover{ | ||
+ | background-image: url(https://static.igem.org/mediawiki/2009/f/fa/Glossyback_2.gif); | ||
+ | } | ||
+ | |||
+ | .glossymenu div.submenu{ /*DIV that contains each sub menu*/ | ||
+ | background: white; | ||
+ | } | ||
+ | |||
+ | .glossymenu div.submenu ul{ /*UL of each sub menu*/ | ||
+ | list-style-type: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .glossymenu div.submenu ul li{ | ||
+ | border-bottom: 1px solid blue; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .glossymenu div.submenu ul li a{ | ||
+ | display: block; | ||
+ | font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | padding: 2px 0; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | |||
+ | .glossymenu div.submenu ul li a:hover{ | ||
+ | background: #DFDCCB; | ||
+ | colorz: white; | ||
+ | } | ||
+ | |||
+ | #tabs { | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2009/e/ee/Glossyback_1.gif); | ||
+ | font-size:93%; | ||
+ | line-height:normal; | ||
+ | } | ||
+ | |||
+ | #tabs ul { | ||
+ | margin:0; | ||
+ | padding:10px 0px 0 20px; | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | #tabs li { | ||
+ | display:inline; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #tabs a { | ||
+ | float:left; | ||
+ | background:url("https://static.igem.org/mediawiki/2009/8/8f/Tableft.gif") no-repeat left top; | ||
+ | margin:0; | ||
+ | padding:0 0 0 4px; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #tabs a span { | ||
+ | font: bold 11px/1.5em Verdana; | ||
+ | float:left; | ||
+ | display:block; | ||
+ | background:url("https://static.igem.org/mediawiki/2009/8/85/Tabright.gif") no-repeat right top; | ||
+ | padding:5px 15px 4px 6px; | ||
+ | color:#666; | ||
+ | } | ||
+ | |||
+ | /* Commented Backslash Hack hides rule from IE5-Mac \*/ | ||
+ | #tabs a span {float:none;} | ||
+ | |||
+ | /* End IE5-Mac hack */ | ||
+ | #tabs a:hover span { | ||
+ | color:#FF9834; | ||
+ | } | ||
+ | |||
+ | #tabs a:hover { | ||
+ | background-position:0% -42px; | ||
+ | } | ||
+ | |||
+ | #tabs a:hover span { | ||
+ | background-position:100% -42px; | ||
+ | } | ||
+ | span.highlight { | ||
+ | color:chocolate; | ||
} | } | ||
</style> | </style> | ||
<html> | <html> |
Latest revision as of 15:18, 21 October 2009