Template:Kyoto/css
From 2014.igem.org
(Difference between revisions)
(451 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | {{Kyoto/css/disable_official}} | ||
<html> | <html> | ||
<style type="text/css" media="all"> | <style type="text/css" media="all"> | ||
- | + | /**** useful style ****/ | |
+ | .kyoto-centering-wrapper{ | ||
+ | width: 0px; | ||
+ | height: 0px; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
} | } | ||
- | + | .kyoto-spacer{ | |
- | + | clear: both; | |
- | + | height: 0px; | |
} | } | ||
- | + | /*** | |
- | + | .kyoto-jump{ | |
- | + | display: block; | |
+ | position: relative; | ||
+ | top: -150px; | ||
} | } | ||
- | + | ***/ | |
- | width: | + | |
- | + | /**** base page style *****/ | |
- | text-align: | + | .kyoto-nav { |
- | + | width: 1010px; | |
- | + | height: 70px; /*メニュー全体高さ*/ | |
- | + | background-color: transparent; /*メニュー全体背景色*/ | |
- | + | color: #fff; /*メニュー全体文字色*/ | |
- | border-collapse: collapse; | + | text-align: center; |
+ | margin-left: -505px; | ||
+ | padding: 0px; | ||
+ | padding-top: 35px; | ||
+ | padding-bottom: 35px; | ||
+ | border-collapse:collapse; | ||
+ | position: fixed; | ||
+ | top: 0px; | ||
} | } | ||
- | + | .kyoto-menu { | |
- | + | text-align: center; | |
- | + | margin: 0 auto; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .kyoto-menu a { | |
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
width: 100%; | width: 100%; | ||
+ | height: 100%; | ||
padding: 0px; | padding: 0px; | ||
- | border: | + | border-collapse: collapse; |
- | margin-top: - | + | margin-top: 0px; |
- | margin-bottom: - | + | margin-bottom: 10px; |
+ | position: relative; | ||
+ | z-index: 15; | ||
+ | } | ||
+ | |||
+ | .kyoto-menu a:hover{ | ||
+ | background-color: #D19490; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .kyoto-menu li { | ||
+ | float:left; | ||
+ | width:140px; | ||
+ | height:70px; | ||
+ | margin:0px; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | |||
+ | .kyoto-menu-bottom a{ | ||
+ | border-radius: 0px 0px 15px 15px; | ||
+ | } | ||
+ | |||
+ | #kyoto-menu-note{ | ||
+ | width:200px; | ||
+ | } | ||
+ | #kyoto-menu_logo{ | ||
+ | width:0px; | ||
+ | } | ||
+ | #kyoto-menu-policy_and_practice{ | ||
+ | width:200px; | ||
+ | } | ||
+ | |||
+ | #kyoto-menu-policy_and_practice > ul{ | ||
+ | left: 60px; | ||
+ | } | ||
+ | |||
+ | #kyoto-menu-project > a{ | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/8/8e/Kyoto-base-proj.gif'); | ||
background-color: transparent; | background-color: transparent; | ||
} | } | ||
- | + | #kyoto-menu-material_and_method > a{ | |
- | # | + | background-image:url('https://static.igem.org/mediawiki/2014/e/ec/Kyoto-base-mate.gif'); |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #kyoto-menu-note > a{ |
- | + | background-image:url('https://static.igem.org/mediawiki/2014/a/a2/Kyoto-base-note.gif'); | |
} | } | ||
- | # | + | #kyoto-menu-policy_and_practice > a{ |
- | + | background-image:url('https://static.igem.org/mediawiki/2014/6/6c/Kyoto-base-poli.gif'); | |
} | } | ||
- | + | #kyoto-menu-consideration > a{ | |
- | + | background-image:url('https://static.igem.org/mediawiki/2014/f/ff/Kyoto-base-cons.gif'); | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #kyoto-menu-team > a{ | |
- | # | + | background-image:url('https://static.igem.org/mediawiki/2014/8/8e/Kyoto-base-team.gif'); |
- | + | background-color: transparent; | |
} | } | ||
- | + | #kyoto-menu-project { | |
- | # | + | width: 160px; |
- | + | } | |
+ | #kyoto-menu-team { | ||
+ | width: 160px; | ||
+ | } | ||
+ | |||
+ | .kyoto-menu > li > ul { | ||
+ | position: relative; | ||
+ | margin: 0px; | ||
+ | top: -80px; | ||
height: 0px; | height: 0px; | ||
+ | transition: top 0.25s ease-out 0s; | ||
+ | -webkit-transition: top 0.25s ease-out 0s; | ||
+ | -moz-transition: top 0.25s ease-out 0s; | ||
+ | -o-transition: top 0.25s ease-out 0s; | ||
+ | -ms-transition: top 0.25s ease-out 0s; | ||
} | } | ||
- | + | .kyoto-menu > li:hover > ul{ | |
- | + | top:-10px; | |
+ | } | ||
+ | .kyoto-menu > li > ul > li{ | ||
+ | width:140px; | ||
+ | height:0px; | ||
+ | transition: height 0.25s ease-out 0s; | ||
+ | -webkit-transition: height 0.25s ease-out 0s; | ||
+ | -moz-transition: height 0.25s ease-out 0s; | ||
+ | -o-transition: height 0.25s ease-out 0s; | ||
+ | -ms-transition: height 0.25s ease-out 0s; | ||
} | } | ||
- | |||
- | + | #kyoto-menu-project ul { | |
- | .kyoto- | + | left: 20px; |
- | width: | + | } |
+ | |||
+ | .kyoto-menu > li:hover > ul > li { | ||
+ | height: 35px; | ||
+ | } | ||
+ | .kyoto-menu > li > ul > li > a{ | ||
+ | background-color: #96514d; | ||
+ | color: #ffffff; | ||
+ | border-collapse: collapse; | ||
+ | width: 100%; | ||
height: 0px; | height: 0px; | ||
- | position: | + | padding-top: 5px; |
- | + | margin: 0px; | |
- | + | position: relative; | |
+ | z-index: 5; | ||
+ | transition: height 0.25s ease-out 0s; | ||
+ | -webkit-transition: height 0.25s ease-out 0s; | ||
+ | -moz-transition: height 0.25s ease-out 0s; | ||
+ | -o-transition: height 0.25s ease-out 0s; | ||
+ | -ms-transition: height 0.25s ease-out 0s; | ||
} | } | ||
- | .kyoto- | + | .kyoto-menu > li:hover > ul > li > a { |
+ | height: 30px; | ||
+ | } | ||
+ | |||
+ | #kyoto-menu_logo a{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/f/f6/Kyoto_logo_small.png'); | ||
+ | background-color: transparent; | ||
+ | width: 130px; | ||
+ | height: 130px; | ||
+ | margin-top: -30px; | ||
+ | margin-bottom: 0px; | ||
+ | border-collapse: collapse; | ||
+ | left: -60px; | ||
+ | z-index: 20; | ||
+ | } | ||
+ | |||
+ | #kyoto-background { | ||
+ | position: fixed; | ||
+ | z-index: -10; | ||
+ | top: 0px; | ||
+ | width: 1400px; | ||
+ | background-position-x: 100px; | ||
+ | } | ||
+ | |||
+ | #kyoto-container{ | ||
+ | width: 1010px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | padding-top: 140px; | ||
+ | } | ||
+ | #kyoto-side_menu{ | ||
+ | width: 200px; | ||
+ | min-height: 350px; | ||
+ | float: left; | ||
+ | margin: 0px; | ||
+ | border-collapse: collapse; | ||
+ | overflow-y: auto; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | #kyoto-side_menu ul{ | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | #kyoto-side_menu > ul ul{ | ||
+ | margin-left: 10px; | ||
+ | padding-left: 15px; | ||
+ | border-left: 5px solid #cccc00; | ||
+ | } | ||
+ | |||
+ | #kyoto-side_menu > ul a{ | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | padding: 5px; | ||
+ | color: #ffffff; | ||
+ | border: solid 1px #000000; | ||
+ | background-color: #bbbbbb; | ||
+ | } | ||
+ | |||
+ | #kyoto-side_menu > ul ul a{ | ||
+ | background-color: #888888; | ||
+ | } | ||
+ | |||
+ | #kyoto-side_menu a:hover { | ||
+ | background-color: #DADA2D; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #kyoto-side-title{ | ||
+ | font-size: larger; | ||
+ | background-color: #DADA2D !important; | ||
+ | color: #5E5E5E !important; | ||
+ | border: 1px solid #000000 !important; | ||
+ | } | ||
+ | |||
+ | #kyoto-side-title:hover { | ||
+ | background-color: #55E099 !important; | ||
+ | } | ||
+ | |||
+ | #kyoto-content_page{ | ||
+ | width: 780px; | ||
+ | min-height: 330px; | ||
+ | overflow-y: auto; | ||
+ | float: right; | ||
background-color: #ffffff; | background-color: #ffffff; | ||
+ | margin: 0px; | ||
+ | border-collapse: collapse; | ||
+ | padding: 10px; | ||
+ | padding-right: 20px; | ||
+ | } | ||
+ | |||
+ | #kyoto-content_page p { | ||
+ | margin: 0.7em 0.5em 0.3em 0.5em; | ||
+ | width: initial; | ||
+ | } | ||
+ | |||
+ | #kyoto-content_page h1 { | ||
+ | margin-bottom: 0.1em; | ||
+ | } | ||
+ | |||
+ | #kyoto-content_page h2 { | ||
+ | margin-bottom: 0.1em; | ||
+ | } | ||
+ | |||
+ | #kyoto-content_page h3 { | ||
+ | margin-bottom: 0.1em; | ||
+ | } | ||
+ | |||
+ | #kyoto-content_page figcaption { | ||
+ | font-size: smaller; | ||
+ | } | ||
+ | |||
+ | #kyoto-content_page figcaption span { | ||
+ | font-size: medium; | ||
+ | } | ||
+ | |||
+ | h1#kyoto-title{ | ||
+ | margin-top: -0.3em; | ||
+ | } | ||
+ | |||
+ | #kyoto-project-content p { | ||
+ | text-indent: 1.5em; | ||
+ | } | ||
+ | |||
+ | .kyoto-ref { | ||
+ | vertical-align: super; | ||
+ | font-size: small; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /********* for Kyoto/Project **************/ | ||
+ | #kyoto-project-door { | ||
+ | margin: 0 auto; | ||
+ | width: 664px; | ||
+ | } | ||
+ | |||
+ | #kyoto-project-door li { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /********* for Kyoto/Material & Method ************/ | ||
+ | .kyoto-primers { | ||
+ | border-collapse: collapse; | ||
+ | font-size: 0.9em; | ||
+ | } | ||
+ | |||
+ | .kyoto-primers td { | ||
+ | border: 1px solid #000000; | ||
+ | } | ||
+ | |||
+ | .kyoto-primers th { | ||
+ | border: 1px solid #000000; | ||
+ | background-color: #f1f1f1; | ||
+ | } | ||
+ | |||
+ | #kyoto-protocol table { | ||
+ | margin: 25px; | ||
+ | } | ||
+ | |||
+ | /********* for Kyoto/Notebook ************/ | ||
+ | .kyoto-calendar table { | ||
+ | border-collapse: collapse; | ||
+ | margin: 10px; | ||
+ | margin-right: 4px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .kyoto-calendar th{ | ||
+ | width: 24px; | ||
+ | border: 1px solid; | ||
+ | padding: 3px; | ||
+ | background-color: #D6D6D6; | ||
+ | } | ||
+ | |||
+ | .kyoto-calendar td { | ||
+ | width: 24px; | ||
+ | height: 24px; | ||
+ | border: 1px solid; | ||
+ | padding: 0px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .kyoto-calendar a { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
- | + | display: block; | |
- | + | padding-bottom: 2px; | |
- | + | text-align: center; | |
- | - | + | background-color: #f8f8ff; |
- | - | + | |
} | } | ||
- | + | .kyoto-calendar a:hover{ | |
- | + | background-color: #ffff00; | |
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | .kyoto-notebook{ | |
- | + | padding: 10px; | |
- | + | padding-top: 0px; | |
} | } | ||
- | .kyoto- | + | .kyoto-notebook > div { |
- | + | margin-bottom: 15px; | |
} | } | ||
- | + | .kyoto-notebook h3{ | |
- | + | margin-left: -10px; | |
- | + | ||
} | } | ||
- | .kyoto- | + | .kyoto-notebook table { |
- | width: | + | width: 150px; |
- | + | border-collapse: collapse; | |
+ | margin: 5px; | ||
} | } | ||
- | + | .kyoto-notebook th{ | |
- | background-color: # | + | width: 30px; |
- | + | padding: 1px; | |
+ | text-align: left; | ||
+ | vertical-align: top; | ||
+ | color: #333; | ||
+ | background-color: #eee; | ||
+ | border: 1px solid #b9b9b9; | ||
+ | border-collapse: collapse; | ||
+ | } | ||
+ | .kyoto-notebook td{ | ||
+ | padding: 1px; | ||
+ | background-color: #fff; | ||
+ | border: 1px solid #b9b9b9; | ||
+ | border-collapse: collapse; | ||
} | } | ||
- | + | .kyoto-notebook img{ | |
- | + | width: 400px; | |
- | + | ||
} | } | ||
- | + | /********* for Kyoto/Policy_and_Practice ************/ | |
- | + | #kyoto-pp-table { | |
+ | border-collapse: collapse; | ||
+ | } | ||
+ | |||
+ | #kyoto-pp-table td { | ||
+ | border: 1px solid #000000; | ||
+ | padding-left: 10px; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | |||
+ | /********* for Kyoto/Consideration ***********/ | ||
+ | .kyoto-form{ | ||
+ | margin: 10px; | ||
+ | padding: 10px; | ||
border: solid 1px; | border: solid 1px; | ||
- | |||
- | |||
- | |||
} | } | ||
- | + | .kyoto-form > div { | |
- | + | margin-left: 1.5em; | |
- | + | ||
- | margin- | + | |
} | } | ||
- | + | .kyoto-form fieldset { | |
- | + | border: 1px solid #337f53; | |
- | + | ||
- | + | ||
} | } | ||
- | .kyoto- | + | .kyoto-form fieldset > div { |
- | + | margin-left: 1.5em; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .kyoto-form textarea { | |
- | + | overflow: auto; | |
} | } | ||
- | + | .kyoto-qbody { | |
- | + | font-weight: bold; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | .kyoto- | + | .kyoto-qbody > span{ |
- | + | font-size: larger; | |
- | + | color: #337f53; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .kyoto-form legend { | |
- | + | font-weight: bold; | |
+ | font-size: larger; | ||
+ | color: #337f53; | ||
} | } | ||
- | #kyoto- | + | #kyoto-helper p { |
- | margin- | + | margin-bottom: 1em; |
} | } | ||
- | + | #kyoto-helper span { | |
- | + | font-size: larger; | |
- | + | font-weight: bold; | |
- | + | font-variant: small-caps; | |
+ | color: #333333; | ||
} | } | ||
- | + | #kyoto-sponsor th { | |
- | width: | + | width: 160px; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | #kyoto- | + | #kyoto-sponsor td, #kyoto-sponsor th { |
- | + | border: 5px solid transparent; | |
+ | border-collapse: collapse; | ||
} | } | ||
- | #kyoto- | + | #kyoto-sponsor img { |
- | + | margin: 5px; | |
} | } | ||
- | #kyoto- | + | #kyoto-sponsor span { |
- | + | font-size: larger; | |
- | + | } | |
- | + | /******** for Kyoto/Team *********/ | |
- | + | .kyoto-members { | |
- | + | margin-left: 15px; | |
+ | margin-right: 15px; | ||
+ | } | ||
- | + | .kyoto-members > div { | |
- | + | padding: 5px; | |
+ | border: 1px solid; | ||
+ | border-collapse: collapse; | ||
} | } | ||
- | + | .kyoto-members p { | |
- | + | padding-left: 15px; | |
+ | padding-right: 10px; | ||
} | } | ||
- | + | .kyoto-members img { | |
- | . | + | height: 250px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | height: | + | |
} | } | ||
- | . | + | |
- | + | .kyoto-member-name { | |
- | + | font-size: 2em; | |
- | + | font-family: 'Changa One', cursive; | |
- | + | border-bottom: 5px groove; | |
- | + | text-align: center; | |
- | + | margin-top: 0.2em !important; | |
- | + | ||
- | + | ||
} | } | ||
- | . | + | .kyoto-member-left img { |
- | + | float: left; | |
- | + | ||
} | } | ||
- | . | + | .kyoto-member-left p { |
- | + | margin-left: 260px !important; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | .kyoto-member-right p { | |
- | + | margin-right: 260px !important; | |
} | } | ||
- | + | ||
- | + | .kyoto-member-right img { | |
- | + | float: right; | |
} | } | ||
- | + | ||
- | + | div.kyoto-member-hover{ | |
- | + | width: 250px; | |
- | + | height: 250px; | |
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | img.kyoto-member-hover{ | |
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | div.kyoto-member-hover:hover > img { | |
+ | display: none; | ||
} | } | ||
- | + | ||
- | + | div.kyoto-member-hover:hover > img.kyoto-member-hover { | |
- | + | display: block; | |
} | } | ||
- | # | + | |
- | + | #kyoto-contact li{ | |
- | width: | + | float: left; |
- | + | width: 180px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | |
- | width: | + | #kyoto-contact a{ |
- | + | display: block; | |
- | + | width: 100px; | |
+ | height: 100px; | ||
+ | background-repeat: no-repeat; | ||
} | } | ||
- | # | + | |
- | background- | + | #kyoto-contact-fb { background-image: url('https://static.igem.org/mediawiki/2014/8/84/Kyoto-100px-Fblogo.png'); } |
- | + | #kyoto-contact-twitter { background-image: url('https://static.igem.org/mediawiki/2014/3/31/Kyoto-100px-Twitter-bird.png'); } | |
- | + | #kyoto-contact-web { | |
- | + | background-image: url('https://static.igem.org/mediawiki/2014/0/0d/Kyoto-100px-KyotoLogo.png'); | |
- | + | width: 133px !important; | |
- | + | ||
} | } | ||
- | # | + | #kyoto-contact-mail { |
- | + | background: none; | |
- | + | background-image: url('https://static.igem.org/mediawiki/2014/c/cc/Kyoto-100px-Email_icon.png'); | |
- | + | ||
- | background- | + | |
- | + | ||
- | + | ||
} | } | ||
+ | @media only screen | ||
+ | and (min-width: 768px) | ||
+ | and (max-width: 1024px) { | ||
+ | |||
+ | } | ||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 08:56, 18 November 2014