Template:Team:KIT-Kyoto/Common
From 2014.igem.org
(Difference between revisions)
(540 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | + | *{ | |
- | + | font-family:'Lucida Grande', | |
- | + | 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', | |
- | + | Meiryo, メイリオ, sans-serif; | |
- | + | font-size:16px; | |
- | + | } | |
+ | .sentence a{ | ||
+ | color: rgb(0,20,300); | ||
} | } | ||
- | # | + | #contentSub, #footer-box, #catlinks,#search-controls, #p-logo, .printfooter, .firstHeading, .visualClear { |
- | + | display: none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | #top-section li,#top-section a{ | ||
+ | font-size:13px; | ||
+ | } | ||
+ | #menubar ul{ | ||
+ | line-height:1em; | ||
+ | } | ||
+ | #menubar ul li a:link,#menubar ul li a:visited,#menubar ul li a:active{ | ||
+ | color:gray; | ||
} | } | ||
- | # | + | #menubar ul li a:hover{ |
- | + | color:lime; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | |
- | + | #bgimg { | |
- | + | position: fixed; | |
- | + | left:0; | |
+ | top:0; | ||
+ | z-index: -1; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
} | } | ||
- | # | + | |
- | + | #bgimg img { | |
- | + | position: fixed; | |
- | + | min-height: 100%; | |
- | + | min-width: 800px; | |
- | + | width: 100%; | |
- | + | height: auto; | |
- | + | left:0; | |
- | + | top:0; | |
- | + | ||
- | width: | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | |
- | + | div#container{ | |
- | + | margin:0 30px 0 270px; | |
- | + | height:100%; | |
- | + | ||
- | + | ||
} | } | ||
- | h1, h2, h3, h4, h5 { font-family: | + | div#container div.main-contents{ |
+ | padding:30px; | ||
+ | position:relative; | ||
+ | width:70%; | ||
+ | min-width:730px; | ||
+ | max-width:930px; | ||
+ | margin:100px auto; | ||
+ | background-color:rgba(300,300,300,0.85); | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | .sentence{ | ||
+ | font-family:'Lucida Grande', | ||
+ | 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', | ||
+ | Meiryo, メイリオ, sans-serif; | ||
+ | text-align:justify; | ||
+ | line-height:2em; | ||
+ | text-indent:1em; | ||
+ | } | ||
+ | |||
+ | .sentence span{ | ||
+ | border-bottom:2px solid rgba(300,0,0,0.5); | ||
+ | } | ||
+ | |||
+ | .kitimg{ | ||
+ | float:right; | ||
+ | margin:20px; | ||
+ | } | ||
+ | |||
+ | .box1{ | ||
+ | margin:30px 30px 30px 200px; | ||
+ | text-align:justify; | ||
+ | border-bottom:dashed 1px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | .box2{ | ||
+ | margin:30px 200px 30px 30px; | ||
+ | text-align:justify; | ||
+ | border-bottom:dashed 1px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | ul.materials{ | ||
+ | padding-left:10px; | ||
+ | list-style:disc; | ||
+ | font-family:'Lucida Grande', | ||
+ | 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', | ||
+ | Meiryo, メイリオ, sans-serif; | ||
+ | } | ||
+ | |||
+ | .procedure{ | ||
+ | padding-left:10px; | ||
+ | list-style:decimal; | ||
+ | font-family:'Lucida Grande', | ||
+ | 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', | ||
+ | Meiryo, メイリオ, sans-serif; | ||
+ | line-height:2em; | ||
+ | } | ||
+ | |||
+ | .note{ | ||
+ | padding-left:10px; | ||
+ | list-style:none; | ||
+ | font-family:'Lucida Grande', | ||
+ | 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', | ||
+ | Meiryo, メイリオ, sans-serif; | ||
+ | } | ||
+ | |||
+ | .toplogo img{ | ||
+ | position:relative; | ||
+ | margin:14px -10px -10px -15px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | .hp_top{ | ||
+ | position:relative; | ||
+ | left:50%; | ||
+ | margin-left:-200px; | ||
+ | } | ||
+ | |||
+ | |||
+ | h1, h2, h3, h4, h5 { | ||
+ | font-family:'Lucida Grande', | ||
+ | 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', | ||
+ | Meiryo, メイリオ, sans-serif; | ||
+ | } | ||
+ | |||
+ | h1{ | ||
+ | font-size:40px; | ||
+ | } | ||
+ | |||
+ | h2{ | ||
+ | padding-left:10px; | ||
+ | border-left:5px solid rgba(0,200,100,0.8); | ||
+ | font-size:30px; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | h2 a{ | ||
+ | display:block; | ||
+ | font-size:30px; | ||
+ | font-weight:bold; | ||
+ | cursor:text; | ||
+ | } | ||
+ | |||
+ | h2 a:link,h2 a:hover,h2 a:visited,h2 a:active{ | ||
+ | color:#000000; | ||
+ | text-decoration:none; | ||
+ | } | ||
- | #top-section { | + | #top-section { |
background-color: #383838; | background-color: #383838; | ||
border: 0 none; | border: 0 none; | ||
Line 67: | Line 170: | ||
} | } | ||
- | #top-section-bar { | + | #top-section-bar { |
background-color: #383838; | background-color: #383838; | ||
height: 14px; | height: 14px; | ||
Line 77: | Line 180: | ||
} | } | ||
- | #menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { | + | #menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { |
color: #727272; | color: #727272; | ||
text-decoration: none; | text-decoration: none; | ||
background-color: transparent; | background-color: transparent; | ||
+ | } | ||
+ | #kitfooter-box { | ||
+ | border-top: 1px solid rgba(0,120,200,0.4); | ||
+ | margin:10px auto -25px auto; | ||
+ | padding:5px 5px; | ||
+ | z-index:1; | ||
+ | position:relative; | ||
+ | overflow:hidden; | ||
} | } | ||
+ | |||
+ | #kitfooter-box a { | ||
+ | background-color: transparent; | ||
+ | color: midnightblue; | ||
+ | font-size:90%; | ||
+ | } | ||
+ | |||
+ | #kitfooter{ | ||
+ | width:70%; | ||
+ | height:50px; | ||
+ | margin:auto; | ||
+ | } | ||
+ | |||
+ | ul#fkit{ | ||
+ | margin:5px 0px 0px 0px; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | ul#fkit li{ | ||
+ | display:inline; | ||
+ | list-style:none; | ||
+ | margin:2px 1%; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | |||
body { | body { | ||
- | + | background-color: #fff; | |
+ | padding:0; | ||
+ | margin:0; | ||
} | } | ||
- | #globalWrapper, #content { | + | #globalWrapper, #content { |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
Line 96: | Line 234: | ||
} | } | ||
- | html, body { | + | html, body { |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
background-color: transparent; | background-color: transparent; | ||
} | } | ||
- | + | .clear { | |
- | + | clear:both; | |
- | + | } | |
- | + | .clear hr { | |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .mimg1{ | |
- | . | + | width: 240px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .mimg2{ | |
- | . | + | width:400px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | figure.mimg1,.mimg2 { | |
- | . | + | position: relative; |
- | . | + | overflow: hidden; |
- | + | background: #37e996; | |
- | + | margin:10px; | |
- | { | + | |
- | + | ||
- | + | ||
- | background | + | |
- | + | ||
} | } | ||
- | + | figure.mimg1 img,figure.mimg2 img { | |
- | + | position: relative; | |
- | + | z-index: 1; | |
- | . | + | -webkit-transition: .3s; |
- | + | transition: .3s; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | figcaption.mcap1 ,figcaption.mcap2{ | |
- | . | + | position: absolute; |
- | + | bottom: -70px; | |
- | + | left: 0; | |
- | + | z-index: 2; | |
- | + | width:100%; | |
+ | height: 70px; | ||
+ | background: #37e996; | ||
+ | -webkit-transition: .3s; | ||
+ | transition: .3s; | ||
} | } | ||
- | + | .mimg1:hover img ,.mimg2:hover img{ | |
- | . | + | -webkit-transform: translateY(-40px); |
- | + | transform: translateY(-40px); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .mimg1:hover figcaption ,.mimg2:hover figcaption{ | |
- | . | + | bottom: 0; |
- | + | -webkit-transform: translateY(-30px); | |
- | + | transform: translateY(-30px); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 18:15, 17 October 2014