Template:Kyoto/css

From 2014.igem.org

(Difference between revisions)
 
(448 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
<style type="text/css" media="all">
<style type="text/css" media="all">
-
body{
+
 
-
     font-family:arial;
+
/**** useful style ****/
 +
.kyoto-centering-wrapper{
 +
     width: 0px;
 +
    height: 0px;
 +
    position: absolute;
 +
    left: 50%;
 +
    top: 50%;
}
}
-
#page{
+
.kyoto-spacer{
-
     width: auto;
+
     clear: both;
-
     margin: auto;
+
     height: 0px;
}
}
-
table.note{
+
/***
-
     width: 150px;
+
.kyoto-jump{
-
     border-collapse: collapse;
+
     display: block;
 +
     position: relative;
 +
    top: -150px;
}
}
-
table.note th{
+
***/
-
     width:30px;
+
 
-
     padding: 1px;
+
/**** base page style *****/
-
     text-align: left;
+
.kyoto-nav {
-
     vertical-align: top;
+
     width: 1010px;
-
     color: #333;
+
     height: 70px; /*メニュー全体高さ*/
-
     background-color: #eee;
+
    background-color: transparent; /*メニュー全体背景色*/
-
     border: 1px solid #b9b9b9;
+
    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;
}
}
-
table.note td{
+
.kyoto-menu {
-
     padding: 1px;
+
     text-align: center;
-
     background-color: #fff;
+
     margin: 0 auto;
-
     border: 1px solid #b9b9b9;
+
}
 +
 
 +
.kyoto-menu a {
 +
    float: left;
 +
     width: 100%;
 +
    height: 100%;
 +
    padding: 0px;
     border-collapse: collapse;
     border-collapse: collapse;
 +
    margin-top: 0px;
 +
    margin-bottom: 10px;
 +
    position: relative;
 +
    z-index: 15;
}
}
-
/********* for top page ***********/
+
.kyoto-menu a:hover{
-
.kyoto-centering-wrapper{
+
     background-color: #D19490;
-
     width: 0px;
+
     text-decoration: none;
-
     height: 0px;
+
-
    position: absolute;
+
-
    left: 50%;
+
-
    top: 50%
+
}
}
-
.kyoto-fade{
+
.kyoto-menu li {
-
     background-color: #ffffff;
+
     float:left;
-
     width: 100%;
+
     width:140px;
-
     height: 100%;
+
     height:70px;
-
     opacity: 0;
+
     margin:0px;
-
     transition: opacity 0.5s;
+
     color:#ffffff;
-
    -webkit-transition: opacity 0.5s;
+
-
    -moz-transition: opacity 0.5s;
+
-
    -o-transition: opacity 0.5s;
+
}
}
-
@media (max-width) {
+
.kyoto-menu-bottom a{
-
     .kyoto-fade{
+
     border-radius: 0px 0px 15px 15px;
-
        opacity: 0.4;
+
-
    }
+
}
}
-
@media (orientation: portrait) {
+
 
-
     .kyoto-fade{
+
#kyoto-menu-note{
-
        opacity: 0.4;
+
     width:200px;
-
    }
+
}
 +
#kyoto-menu_logo{
 +
    width:0px;
 +
}
 +
#kyoto-menu-policy_and_practice{
 +
    width:200px;
}
}
-
.kyoto-fade:hover{
+
#kyoto-menu-policy_and_practice > ul{
-
     opacity: 0.7;
+
     left: 60px;
}
}
-
#kyoto-top{
+
#kyoto-menu-project > a{
 +
    background-image:url('https://static.igem.org/mediawiki/2014/8/8e/Kyoto-base-proj.gif');
 +
    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;
 +
    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 {
 +
    left: 20px;
 +
}
 +
 
 +
.kyoto-menu > li:hover > ul > li {
 +
    height: 35px;
 +
}
 +
.kyoto-menu > li > ul > li > a{
 +
    background-color: #96514d;
 +
    color: #ffffff;
 +
    border-collapse: collapse;
     width: 100%;
     width: 100%;
-
     height: 680px;
+
     height: 0px;
 +
    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-top-theme{
+
.kyoto-menu > li:hover > ul > li > a {
-
    width: 50%;
+
     height: 30px;
-
     height: inherit;
+
}
}
-
#kyoto-top-dms{
+
#kyoto-menu_logo a{
-
     background-color: #00ff00;
+
    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;
     float: left;
 +
    margin: 0px;
 +
    border-collapse: collapse;
 +
    overflow-y: auto;
 +
    font-size: 15px;
}
}
-
#kyoto-top-magnet{
+
#kyoto-side_menu ul{
-
     background-color: #0000ff;
+
     margin: 0px;
-
    float: right;
+
}
}
-
.kyoto-top-abst{
+
#kyoto-side_menu > ul ul{
-
     width: 50%;
+
     margin-left: 10px;
-
     border: solid 1px;
+
    padding-left: 15px;
 +
     border-left: 5px solid #cccc00;
 +
}
 +
 
 +
#kyoto-side_menu > ul a{
 +
    display: block;
 +
    text-align: center;
     padding: 5px;
     padding: 5px;
-
     position: relative;
+
     color: #ffffff;
-
     margin: auto;
+
     border: solid 1px #000000;
 +
    background-color: #bbbbbb;
}
}
-
#kyoto-top-abst-dms{
+
#kyoto-side_menu > ul ul a{
-
     background-color: #ffff00;
+
     background-color: #888888;
-
    top: 25%;
+
-
    margin-right: 180px;
+
}
}
-
#kyoto-top-abst-magnet{
+
#kyoto-side_menu a:hover {
-
     background-color: #00ffff;
+
     background-color: #DADA2D;
-
    top: 10%;
+
     text-decoration: none;
-
     margin-left: 180px;
+
}
}
-
.kyoto-top-title{
+
#kyoto-side-title{
-
     width: 50%;
+
     font-size: larger;
-
     position: absolute;
+
     background-color: #DADA2D !important;
-
     text-align: center;
+
     color: #5E5E5E !important;
 +
    border: 1px solid #000000 !important;
}
}
-
#kyoto-top-title-magnet{
+
#kyoto-side-title:hover {
-
     bottom: 3%;
+
     background-color: #55E099 !important;
}
}
-
#kyoto-top-logo{
+
#kyoto-content_page{
 +
    width: 780px;
 +
    min-height: 330px;
 +
    overflow-y: auto;
 +
    float: right;
     background-color: #ffffff;
     background-color: #ffffff;
-
    width: 280px;
+
     margin: 0px;
-
    height: 280px;
+
     border-collapse: collapse;
-
     margin-top: -140px;
+
     padding: 10px;
-
     margin-left: -140px;
+
     padding-right: 20px;
-
     position: absolute;
+
-
    z-index: 20;
+
-
     background-color: transparent;
+
}
}
-
.kyoto-top-menu{
+
#kyoto-content_page p {
-
    width: 220px;
+
     margin: 0.7em 0.5em 0.3em 0.5em;
-
     margin-top: -107px;
+
     width: initial;
-
    position: absolute;
+
-
    z-index: 10;
+
-
    transition: margin-left 0.5s;
+
-
    -webkit-transition: margin-left 0.5s;
+
-
    -moz-transition: margin-left 0.5s;
+
-
     -o-transition: margin-left 0.5s;
+
}
}
-
#kyoto-top-menu-left{
+
#kyoto-content_page h1 {
-
     margin-left: -135px;
+
     margin-bottom: 0.1em;
}
}
-
#kyoto-top-menu-right{
+
#kyoto-content_page h2 {
-
     margin-left: -85px;
+
     margin-bottom: 0.1em;
}
}
-
.kyoto-top-menu ul{
+
#kyoto-content_page h3 {
-
     list-style-image: none;
+
     margin-bottom: 0.1em;
-
    list-style-type: none;
+
-
    margin: 0px;
+
}
}
-
.kyoto-top-menu li a{
+
#kyoto-content_page figcaption {
-
     width: 220px;
+
    font-size: smaller;
-
     height: 71px;
+
}
 +
 
 +
#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%;
 +
     height: 100%;
     display: block;
     display: block;
-
     background-repeat: no-repeat;
+
     padding-bottom: 2px;
 +
    text-align: center;
 +
    background-color: #f8f8ff;
}
}
-
#kyoto-top-menu-left li a{
+
.kyoto-calendar a:hover{
-
     background-image: url('https://static.igem.org/mediawiki/2014/9/98/Kyoto_top_menu_left.png');
+
     background-color: #ffff00;
}
}
-
#kyoto-top-menu-right li a{
+
.kyoto-notebook{
-
     background-image: url('https://static.igem.org/mediawiki/2014/5/51/Kyoto_top_menu_right.png');
+
     padding: 10px;
 +
    padding-top: 0px;
}
}
-
#kyoto-top-menu-project{ background-position: -4px -4px; }
+
.kyoto-notebook > div {
-
#kyoto-top-menu-MM{ background-position: -4px -77px; }
+
    margin-bottom: 15px;  
-
#kyoto-top-menu-note{ background-position: -4px -150px; }
+
}
-
#kyoto-top-menu-PP{ background-position: -8px -4px; }
+
.kyoto-notebook h3{
-
#kyoto-top-menu-consideration{ background-position: -7px -77px; }
+
    margin-left: -10px;
-
#kyoto-top-menu-team{ background-position: -7px -150px; }
+
}
-
#kyoto-top-icon:hover #kyoto-top-menu-left{
+
.kyoto-notebook table {
-
     margin-left: -310px;
+
    width: 150px;
 +
    border-collapse: collapse;
 +
     margin: 5px;
}
}
-
#kyoto-top-icon:hover #kyoto-top-menu-right{
+
.kyoto-notebook th{
-
     margin-left: 90px;
+
    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;
}
}
-
/**** sandbox2用 *****/
+
.kyoto-notebook img{
-
.nav {
+
     width: 400px;
-
     width:970px;
+
-
    height:110px; /*メニュー全体高さ*/
+
-
    background:#666666; /*メニュー全体背景色*/
+
-
    color:#fff; /*メニュー全体文字色*/
+
-
    text-align:center;
+
-
    margin-top:30px;
+
-
    margin-bottom:10px;
+
-
    margin-left:auto;
+
-
    margin-right:auto;
+
-
    position:relative;
+
-
    z-index:10;
+
-
    padding:0px;
+
-
    border:collapse;
+
}
}
-
.menu a {
+
 
-
    float:left;
+
/********* for Kyoto/Policy_and_Practice ************/
-
    background-color:#444444;
+
#kyoto-pp-table {
-
    color:#ee0000; /*リンクの文字色*/
+
     border-collapse: collapse;
-
    text-decoration:none;
+
-
    width:140px;
+
-
    padding:0px;
+
-
     border:collapse;
+
-
    height:110px;
+
-
    margin-top:0px;
+
-
    margin-bottom:10px;
+
-
    position:relative;
+
-
    z-index:15;
+
}
}
-
.menu a:hover {
+
 
-
     color:#aaaaaa; /*マウスをのせた時の文字色*/
+
#kyoto-pp-table td {
-
     background-color:#00ff00;
+
     border: 1px solid #000000;
 +
     padding-left: 10px;
 +
    padding-right: 10px;
}
}
-
#menu1:hover #menu11{
+
 
-
     top:-10px;
+
/********* for Kyoto/Consideration ***********/
 +
.kyoto-form{
 +
     margin: 10px;
 +
    padding: 10px;
 +
    border: solid 1px;
}
}
-
#menu2:hover #menu21{
+
 
-
     top:-10px;
+
.kyoto-form > div {
 +
     margin-left: 1.5em;
}
}
-
#menu2:hover #menu2121{
+
 
-
     top:-35px;
+
.kyoto-form fieldset {
 +
     border: 1px solid #337f53;
}
}
-
#menu3:hover #menu31{
+
 
-
     top:-10px;
+
.kyoto-form fieldset > div {
 +
     margin-left: 1.5em;
}
}
-
#menu5:hover #menu51{
+
 
-
     top:-10px;
+
.kyoto-form textarea {
 +
     overflow: auto;
}
}
-
#menu6:hover #menu61{
+
 
-
     top:-10px;
+
.kyoto-qbody {
 +
     font-weight: bold;
}
}
-
.menu {
+
 
-
     list-style:none;
+
.kyoto-qbody > span{
-
    text-align:center;
+
     font-size: larger;
-
     margin:0 auto  ;
+
     color: #337f53;
}
}
-
.menu li {
+
 
-
     float:left;
+
.kyoto-form legend {
-
     width:140px;
+
     font-weight: bold;
-
     height:110px;
+
     font-size: larger;
 +
     color: #337f53;
}
}
-
.menu2 li{
+
 
-
     width:140px;
+
#kyoto-helper p {
-
    height:35px;
+
     margin-bottom: 1em;
}
}
-
.nodiv ul {
+
 
-
    list-style:none;
+
#kyoto-helper span {
-
     position:relative;
+
     font-size: larger;
-
    left:-19px;
+
     font-weight: bold;
-
    top:-115px;
+
     font-variant: small-caps;
-
     transition-property:top;
+
     color: #333333;
-
     transition-duration:0.5s;
+
-
    transition-timing-function:ease-out;
+
-
     transition-delay:0s;
+
}
}
-
.nodiv li{
+
#kyoto-sponsor th {
-
     margin:0px;
+
     width: 160px;
-
    color:#ffffff;
+
}
}
-
.nodiv li a{
+
 
-
    background-color:#96514d;
+
#kyoto-sponsor td, #kyoto-sponsor th {
-
     color:#ffffff;
+
     border: 5px solid transparent;
-
     border:collapse;
+
     border-collapse: collapse;
-
    width:140px;
+
-
    height:35px;
+
-
    padding:0px;
+
-
    margin:0px;
+
-
    position:relative;
+
-
    z-index:5;
+
}
}
-
li.nodiv2 a{
+
 
-
    background-color:#96514d;
+
#kyoto-sponsor img {
-
    color:#ffffff;
+
     margin: 5px;
-
    border:collapse;
+
-
    width:140px;
+
-
    height:35px;
+
-
    padding:0px;
+
-
     margin:0px;
+
}
}
-
li.nodiv2{
+
 
-
     position:relative;
+
#kyoto-sponsor span {
-
    left:140px;
+
     font-size: larger;
}
}
-
#menu212{
+
 
-
     position:relative;
+
/******** for Kyoto/Team *********/
-
     top:0px;
+
.kyoto-members {
 +
     margin-left: 15px;
 +
     margin-right: 15px;
}
}
-
#menu2111{
+
 
-
    position:relative;
+
.kyoto-members > div {
-
    top:-35px;
+
     padding: 5px;
-
     opacity:0;
+
     border: 1px solid;
-
     transition-property:opacity;
+
     border-collapse: collapse;
-
    transition-duration:0.5s;
+
-
    transition-timing-function:ease-out;
+
-
     transition-delay:0s;
+
}
}
-
#menu2121{
+
 
-
     position:relative;
+
.kyoto-members p {
-
    top:-70px;
+
     padding-left: 15px;
-
    left:120px;
+
     padding-right: 10px;
-
    opacity:0;
+
-
    transition-property:opacity,top;
+
-
    transition-duration:0.5s;
+
-
    transition-timing-function:ease-out;
+
-
     transition-delay:0s;
+
}
}
-
#menu211:hover #menu2111{
+
 
-
     opacity:1;
+
.kyoto-members img {
 +
     height: 250px;
}
}
-
#menu212:hover #menu2121{
+
 
-
     opacity:1;
+
.kyoto-member-name {
 +
     font-size: 2em;
 +
    font-family: 'Changa One', cursive;
 +
    border-bottom: 5px groove;
 +
    text-align: center;
 +
    margin-top: 0.2em !important;
}
}
-
#menu_logo{
+
 
-
    background-color: #dddddd;
+
.kyoto-member-left img {
-
    width:130px;
+
     float: left;
-
    height: 130px;
+
-
    margin-top:-10px;
+
-
    margin-bottom:0px;
+
-
     border:collapse;
+
}
}
-
#container{
+
.kyoto-member-left p {
-
    width:970px;
+
     margin-left: 260px !important;
-
     margin-left:auto;
+
-
    margin-right:auto;
+
}
}
-
#side_menu{
+
 
-
    background-color: #bbbbbb;
+
.kyoto-member-right p {
-
    width:200px;
+
     margin-right: 260px !important;
-
    height:auto;
+
-
    float:left;
+
-
     margin:0px;
+
-
    border:collapse;
+
}
}
-
#content_page{
+
 
-
    width:770px;
+
.kyoto-member-right img {
-
    height:auto;
+
     float: right;
-
     float:right;
+
-
    background-color:#ffffff;
+
-
    margin:0px;
+
-
    border:collapse;
+
}
}
 +
 +
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{
 +
    float: left;
 +
    width: 180px;
 +
}
 +
 +
#kyoto-contact a{
 +
    display: block;
 +
    width: 100px;
 +
    height: 100px;
 +
    background-repeat: no-repeat;
 +
}
 +
 +
#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');
 +
}
 +
@media only screen
 +
and (min-width: 768px)
 +
and (max-width: 1024px) {
 +
   
 +
}
 +
</style>
</style>
</html>
</html>

Latest revision as of 08:56, 18 November 2014

Retrieved from "http://2014.igem.org/Template:Kyoto/css"