Template:Kyoto/css
From 2013.igem.org
(Difference between revisions)
(153 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css" media="all"> | <style type="text/css" media="all"> | ||
+ | |||
/*** breaking official design start ***/ | /*** breaking official design start ***/ | ||
- | /*** global background ***/ | + | /*** global background #545454 ***/ |
+ | |||
body { | body { | ||
background-image: url(https://static.igem.org/mediawiki/2013/c/c7/Repeatingtile.jpg); | background-image: url(https://static.igem.org/mediawiki/2013/c/c7/Repeatingtile.jpg); | ||
background-attachment: fixed; | 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 ***/ | /*** official content ***/ | ||
Line 56: | Line 93: | ||
margin-top: 5px; | margin-top: 5px; | ||
} | } | ||
- | #kyoto-menu | + | #kyoto-menu ul { |
margin: 0px; | margin: 0px; | ||
} | } | ||
- | #kyoto-menu | + | #kyoto-menu li { |
- | + | ||
float: left; | float: left; | ||
list-style:none; | list-style:none; | ||
} | } | ||
- | #kyoto- | + | #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{ | + | #menu-logo:hover { |
- | + | background-position: -150px 0px; | |
} | } | ||
/*** top: link on-cursor explain box a6e670 ***/ | /*** top: link on-cursor explain box a6e670 ***/ | ||
#projectexplain{ | #projectexplain{ | ||
background-color: #6ec2e6; | background-color: #6ec2e6; | ||
- | border: | + | border: 0px solid #ffffff; |
- | width: | + | width: 740px; |
- | height: | + | height: 416px; |
border-radius: 2px; | border-radius: 2px; | ||
- | margin: | + | margin: -10px 40px 0px 0px; |
- | padding: | + | padding: 0; |
+ | margin-bottom: 6px; | ||
} | } | ||
#humanexplain{ | #humanexplain{ | ||
background-color: #e670a6; | background-color: #e670a6; | ||
- | border: | + | border: 0px solid #ffffff; |
- | width: | + | width: 740px; |
- | height: | + | height: 416px; |
border-radius: 2px; | border-radius: 2px; | ||
- | margin: | + | margin: -10px 40px 0px 0px; |
- | padding: | + | padding: 0px; |
+ | margin-bottom: 6px; | ||
} | } | ||
#achievexplain{ | #achievexplain{ | ||
background-color: #e6c43e; | background-color: #e6c43e; | ||
- | border: | + | border: 0px solid #ffffff; |
- | width: | + | width: 740px; |
- | height: | + | height: 416px; |
border-radius: 2px; | border-radius: 2px; | ||
- | margin: | + | margin: -10px 40px 0px 0px; |
- | padding: | + | padding: 0px; |
+ | margin-bottom: 6px; | ||
} | } | ||
/*** main contents design except top page ***/ | /*** main contents design except top page ***/ | ||
#kyoto-main { | #kyoto-main { | ||
padding: 20px; | padding: 20px; | ||
+ | padding-top: 15px; | ||
width: 865px; | width: 865px; | ||
margin-left: 230px; | margin-left: 230px; | ||
background-color: transparent; | background-color: transparent; | ||
} | } | ||
- | + | #prezi { | |
- | # | + | margin-top: -10px; |
- | + | ||
- | + | ||
- | margin- | + | |
- | + | ||
} | } | ||
/*** home link wrapper ***/ | /*** home link wrapper ***/ | ||
.kyoto-homelink { | .kyoto-homelink { | ||
- | margin: 5px | + | margin: 5px 0px 5px 0px; |
width: 740px; | width: 740px; | ||
padding: 0; | padding: 0; | ||
Line 120: | Line 194: | ||
/*** home link design ***/ | /*** home link design ***/ | ||
.kyoto-homelink-pro { | .kyoto-homelink-pro { | ||
- | margin: 15px 0px | + | margin: 15px 0px 0px 45px; |
- | border: | + | border: 0; |
- | + | ||
padding: 0; | padding: 0; | ||
- | width: | + | width: 200px; |
- | height: | + | height: 150px; |
float: left; | float: left; | ||
} | } | ||
.kyoto-homelink-hum { | .kyoto-homelink-hum { | ||
- | margin: 15px 25px | + | margin: 15px 25px 0px 25px; |
- | border: | + | border: 0; |
- | + | ||
padding: 0; | padding: 0; | ||
- | width: | + | width: 200px; |
- | height: | + | height: 149px; |
float: left; | float: left; | ||
} | } | ||
.kyoto-homelink-ach { | .kyoto-homelink-ach { | ||
- | margin: 15px 0px | + | margin: 15px 0px 0px 0px; |
- | border: | + | border: 0; |
- | + | ||
padding: 0; | padding: 0; | ||
- | width: | + | width: 200px; |
- | height: | + | height: 149px; |
float: left; | float: left; | ||
} | } | ||
Line 155: | Line 226: | ||
.shashin{ | .shashin{ | ||
margin: 5px; | margin: 5px; | ||
- | border: solid 4px | + | border: solid 4px transparent; |
- | filter:alpha( | + | filter:alpha(opacity=80); |
-moz-opacity:0.80; | -moz-opacity:0.80; | ||
-khtml-opacity: 0.80; | -khtml-opacity: 0.80; | ||
Line 162: | Line 233: | ||
border-radius: 10px; | border-radius: 10px; | ||
padding: 5px; | padding: 5px; | ||
- | width: | + | width: 218px; |
+ | height: 135px; | ||
float: left; | float: left; | ||
- | background-color: | + | background-color: transparent; |
filter:alpha(style=opacity=80); | filter:alpha(style=opacity=80); | ||
-moz-opacity:0.80; | -moz-opacity:0.80; | ||
-khtml-opacity: 0.80; | -khtml-opacity: 0.80; | ||
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{ | .shashin > img{ | ||
- | width: | + | width: 120px; |
vertical-align: top; | vertical-align: top; | ||
float: left; | float: left; | ||
margin: 5px; | margin: 5px; | ||
+ | border-radius: 10px | ||
} | } | ||
+ | .shashin > b { | ||
+ | width: 80px; | ||
+ | float: right; | ||
+ | border-bottom: dotted 2px #00aaaa; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
/*** text contents ***/ | /*** text contents ***/ | ||
.texts{ | .texts{ | ||
- | |||
background-color: #ffffff; | background-color: #ffffff; | ||
filter:alpha(opacity=80); | filter:alpha(opacity=80); | ||
Line 186: | Line 268: | ||
width: 700px; | width: 700px; | ||
padding: 20px; | padding: 20px; | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | h1 { | ||
+ | font-family:Figer+Paint; | ||
} | } | ||
/*** project link ***/ | /*** project link ***/ | ||
Line 205: | Line 291: | ||
width: 600px; | width: 600px; | ||
height: 150px; | 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 ***/ | /*** notebook calender ***/ | ||
Line 214: | Line 375: | ||
} | } | ||
#notebooks img { | #notebooks img { | ||
- | width: | + | width: 450px; |
height: auto; | height: auto; | ||
} | } | ||
Line 242: | Line 403: | ||
#safety > h5{ | #safety > h5{ | ||
margin-left: 5px; | margin-left: 5px; | ||
+ | } | ||
+ | /*** sponsor ***/ | ||
+ | .sponsor-logo img{ | ||
+ | margin: 0; | ||
} | } | ||
</style> | </style> | ||
Line 250: | Line 415: | ||
position: absolute; | position: absolute; | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 01:00, 28 September 2013