Template:Kyoto/css
From 2013.igem.org
(Difference between revisions)
(416 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | <style type="text/css"> | + | <style type="text/css" media="all"> |
- | # | + | |
- | + | /*** breaking official design start ***/ | |
- | + | /*** global background #545454 ***/ | |
- | + | ||
+ | body { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/c/c7/Repeatingtile.jpg); | ||
+ | background-attachment: fixed; | ||
+ | overflow-y: scroll; | ||
+ | font-family: arial; | ||
} | } | ||
+ | |||
+ | p { | ||
+ | font-size: 18px; | ||
+ | font-family: arial; | ||
+ | line-height:1.7; | ||
+ | text-indent: 1em; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 25px; | ||
+ | |||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size: 30px; | ||
+ | line-height: 1.3; | ||
+ | } | ||
+ | |||
+ | /*** material and method***/ | ||
+ | #material ul { | ||
+ | font-size:18px; | ||
+ | } | ||
+ | |||
+ | /*** notebooks ***/ | ||
+ | #notebooks ul{ | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | /*** humanpractice ***/ | ||
+ | #ankeito h3 { | ||
+ | border-bottom: solid 1px #aaa; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | /*** official content ***/ | ||
+ | #content { | ||
+ | width: 1065px; | ||
+ | border-left: 0; | ||
+ | border-right: 0; | ||
+ | padding: 0; | ||
+ | margin-top: -17px; | ||
+ | margin-bottom:-16px; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | /*** igem official logo***/ | ||
+ | #p-logo { | ||
+ | display: none; | ||
+ | } | ||
+ | #top-section{ | ||
+ | height: 0px; | ||
+ | top: 0px; | ||
+ | margin-top: 0px; | ||
+ | padding: 0px; | ||
+ | border: 0px; | ||
+ | } | ||
+ | #toc { | ||
+ | display: none; | ||
+ | } | ||
+ | /*** wiki page's address ***/ | ||
+ | .firstHeading { | ||
+ | display: none; | ||
+ | height:0px; | ||
+ | visibility:hidden; | ||
+ | } | ||
+ | /*** wiki search box ***/ | ||
+ | #search-controls{ | ||
+ | display:none; | ||
+ | } | ||
+ | /*** igem global menu bar ***/ | ||
+ | #catlinks { | ||
+ | display: none; | ||
+ | height: 0px; | ||
+ | } | ||
+ | /*** breaking official design end ***/ | ||
+ | /******* kyoto menu bar *******/ | ||
+ | #kyoto-menu { | ||
+ | background-color: transparent; | ||
+ | width: 230px; | ||
+ | margin: 0; | ||
+ | float: left; | ||
+ | position:fixed; | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | #kyoto-menu ul { | ||
+ | margin: 0px; | ||
+ | } | ||
+ | #kyoto-menu li { | ||
+ | float: left; | ||
+ | list-style:none; | ||
+ | } | ||
+ | #kyoto-menu li a { | ||
+ | width: 115px; | ||
+ | height: 115px; | ||
+ | display: block; | ||
+ | background-repeat: no-repeat; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2013/a/a4/KyotoMenu.png') | ||
+ | } | ||
+ | |||
+ | #menu-project { background-position: 5px 5px; } | ||
+ | #menu-project:hover { background-position: -215px 5px; } | ||
+ | |||
+ | #menu-mm { background-position: -106px 5px; } | ||
+ | #menu-mm:hover { background-position: -326px 5px; } | ||
+ | |||
+ | #menu-note { background-position: 5px -105px; } | ||
+ | #menu-note:hover { background-position: -215px -105px; } | ||
+ | |||
+ | #menu-safety { background-position: -106px -105px; } | ||
+ | #menu-safety:hover { background-position: -326px -105px; } | ||
+ | |||
+ | #menu-hp { background-position: 5px -215px; } | ||
+ | #menu-hp:hover { background-position: -215px -215px; } | ||
+ | |||
+ | #menu-team { background-position: -106px -215px; } | ||
+ | #menu-team:hover { background-position: -326px -215px; } | ||
+ | |||
+ | #menu-achvmnt { background-position: 5px -325px; } | ||
+ | #menu-achvmnt:hover { background-position: -215px -325px; } | ||
+ | |||
+ | #menu-coop { background-position: -106px -325px; } | ||
+ | #menu-coop:hover { background-position: -326px -325px; } | ||
+ | |||
+ | #menu-logo { | ||
+ | width: 150px; | ||
+ | height: 150px; | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2013/e/ee/Lllllogp.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0px 0px; | ||
+ | } | ||
+ | #menu-logo:hover { | ||
+ | background-position: -150px 0px; | ||
+ | } | ||
+ | /*** top: link on-cursor explain box a6e670 ***/ | ||
+ | #projectexplain{ | ||
+ | background-color: #6ec2e6; | ||
+ | border: 0px solid #ffffff; | ||
+ | width: 740px; | ||
+ | height: 416px; | ||
+ | border-radius: 2px; | ||
+ | margin: -10px 40px 0px 0px; | ||
+ | padding: 0; | ||
+ | margin-bottom: 6px; | ||
+ | } | ||
+ | #humanexplain{ | ||
+ | background-color: #e670a6; | ||
+ | border: 0px solid #ffffff; | ||
+ | width: 740px; | ||
+ | height: 416px; | ||
+ | border-radius: 2px; | ||
+ | margin: -10px 40px 0px 0px; | ||
+ | padding: 0px; | ||
+ | margin-bottom: 6px; | ||
+ | } | ||
+ | #achievexplain{ | ||
+ | background-color: #e6c43e; | ||
+ | border: 0px solid #ffffff; | ||
+ | width: 740px; | ||
+ | height: 416px; | ||
+ | border-radius: 2px; | ||
+ | margin: -10px 40px 0px 0px; | ||
+ | padding: 0px; | ||
+ | margin-bottom: 6px; | ||
+ | } | ||
+ | /*** main contents design except top page ***/ | ||
+ | #kyoto-main { | ||
+ | padding: 20px; | ||
+ | padding-top: 15px; | ||
+ | width: 865px; | ||
+ | margin-left: 230px; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | #prezi { | ||
+ | margin-top: -10px; | ||
+ | } | ||
+ | /*** home link wrapper ***/ | ||
+ | .kyoto-homelink { | ||
+ | margin: 5px 0px 5px 0px; | ||
+ | width: 740px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | /*** home link design ***/ | ||
+ | .kyoto-homelink-pro { | ||
+ | margin: 15px 0px 0px 45px; | ||
+ | border: 0; | ||
+ | padding: 0; | ||
+ | width: 200px; | ||
+ | height: 150px; | ||
+ | float: left; | ||
+ | } | ||
+ | .kyoto-homelink-hum { | ||
+ | margin: 15px 25px 0px 25px; | ||
+ | border: 0; | ||
+ | padding: 0; | ||
+ | width: 200px; | ||
+ | height: 149px; | ||
+ | float: left; | ||
+ | } | ||
+ | .kyoto-homelink-ach { | ||
+ | margin: 15px 0px 0px 0px; | ||
+ | border: 0; | ||
+ | padding: 0; | ||
+ | width: 200px; | ||
+ | height: 149px; | ||
+ | float: left; | ||
+ | } | ||
+ | /*** spacer block ***/ | ||
+ | .spacer{ | ||
+ | clear: left; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | /*** team member fig design ***/ | ||
+ | .shashin{ | ||
+ | margin: 5px; | ||
+ | border: solid 4px transparent; | ||
+ | filter:alpha(opacity=80); | ||
+ | -moz-opacity:0.80; | ||
+ | -khtml-opacity: 0.80; | ||
+ | opacity:0.80; | ||
+ | border-radius: 10px; | ||
+ | padding: 5px; | ||
+ | width: 218px; | ||
+ | height: 135px; | ||
+ | float: left; | ||
+ | background-color: transparent; | ||
+ | filter:alpha(style=opacity=80); | ||
+ | -moz-opacity:0.80; | ||
+ | -khtml-opacity: 0.80; | ||
+ | opacity:0.80; | ||
+ | box-shadow: 5px 5px 5px #222222; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2013/d/d1/Team_KI.png); | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | .shashin > img{ | ||
+ | width: 120px; | ||
+ | vertical-align: top; | ||
+ | float: left; | ||
+ | margin: 5px; | ||
+ | border-radius: 10px | ||
+ | } | ||
+ | .shashin > b { | ||
+ | width: 80px; | ||
+ | float: right; | ||
+ | border-bottom: dotted 2px #00aaaa; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | /*** text contents ***/ | ||
+ | .texts{ | ||
+ | background-color: #ffffff; | ||
+ | filter:alpha(opacity=80); | ||
+ | -moz-opacity:0.80; | ||
+ | -khtml-opacity: 0.80; | ||
+ | opacity:0.80; | ||
+ | width: 700px; | ||
+ | padding: 20px; | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | h1 { | ||
+ | font-family:Figer+Paint; | ||
+ | } | ||
+ | /*** project link ***/ | ||
+ | .RNALink{ | ||
+ | margin: 0; | ||
+ | border: 4px solid #c2e1f5; | ||
+ | border-radius: 5px; | ||
+ | background-color: #88b7d5; | ||
+ | color: #ddf8c6; | ||
+ | width: 600px; | ||
+ | height: 300px; | ||
+ | } | ||
+ | .TuringLink{ | ||
+ | margin: 0; | ||
+ | border: 4px solid #f5c691; | ||
+ | border-radius: 5px; | ||
+ | background-color: #d56f4b; | ||
+ | color: #ddf8c6; | ||
+ | width: 600px; | ||
+ | height: 150px; | ||
+ | } | ||
+ | .turinglogo{ | ||
+ | margin-top: 25px; | ||
+ | } | ||
+ | /*** Project Tab ***/ | ||
+ | .kyoto-tabs{ | ||
+ | margin-top: 0; | ||
+ | margin-left: 740px; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | position: fixed; | ||
+ | } | ||
+ | .kyoto-tabs > li{ | ||
+ | width: 110px; | ||
+ | height: 60px; | ||
+ | float: left; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .Kyoto-toptab{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | width: 700px; | ||
+ | height: 100px; | ||
+ | } | ||
+ | .Kyoto-toptab > li{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 300px; | ||
+ | height: 100px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /*** sponsor ***/ | ||
+ | .sponsorback{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 740px; | ||
+ | background-color: #ffffff; | ||
+ | } | ||
+ | .sponsorleft{ | ||
+ | float: left; | ||
+ | width: 553px; | ||
+ | height: 195px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .sponsorkyoto{ | ||
+ | float: left; | ||
+ | height: 195px; | ||
+ | width: 195px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .sponsoridt{ | ||
+ | float: left; | ||
+ | height: 68px; | ||
+ | width: 358px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .sponsormbl{ | ||
+ | float: left; | ||
+ | height: 127px; | ||
+ | width: 358px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .sponsornaist{ | ||
+ | float: left; | ||
+ | height: 195px; | ||
+ | width: 187px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | /*** notebook calender ***/ | ||
+ | #calender > table { | ||
+ | float: left; | ||
+ | } | ||
+ | #notebooks > h2 { | ||
+ | clear: both; | ||
+ | } | ||
+ | #notebooks img { | ||
+ | width: 450px; | ||
+ | height: auto; | ||
+ | } | ||
+ | /*** Kyoto footer ***/ | ||
+ | #footer { | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | bottom: 0px; | ||
+ | left: 0px; | ||
+ | text-align: right; | ||
+ | border-top:1px solid #bbbbbb; | ||
+ | background:#e1e1e1; | ||
+ | } | ||
+ | /*** igem official footer ***/ | ||
+ | #footer-box { | ||
+ | display: none; | ||
+ | } | ||
+ | /******* safety page *******/ | ||
+ | #safety > p{ | ||
+ | background-color: #eeeeee; | ||
+ | border-style: solid; | ||
+ | border-width: 1px; | ||
+ | border-color: #aaaaaa; | ||
+ | margin-left: 5px; | ||
+ | text-indent: 5px; | ||
+ | } | ||
+ | #safety > h5{ | ||
+ | margin-left: 5px; | ||
+ | } | ||
+ | /*** sponsor ***/ | ||
+ | .sponsor-logo img{ | ||
+ | margin: 0; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <!-- mobile style --> | ||
+ | <style type="text/css" media="only screen and (max-device-width: 480px)"> | ||
+ | #kyoto-menu { | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 01:00, 28 September 2013