Template:UT-Tokyo/CSS

/*********************************************************************** / WIKI INITIALIZATION /**********************************************************************/

h1.firstHeading {

   display: none !important;

}

1. top_menu_14 .has_submenu{

   height:16px;

}

1. content{

   width:100%;
   margin:0;
   padding:0;

}

1. content a{

 font-size:20px;
 line-height:1.2em;

}

.panel p, .panel a{

 font-size:16px;
 line-height:1.3em;

}

/*********************************************************************** / GENERAL /**********************************************************************/ @font-face{

   font-family:'Homenaje';
   src: url("https://static.igem.org/mediawiki/2015/f/f1/UT_TOKYO_Homenaje-Regular.ttf");

} @font-face{

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/8/83/UT_TOKYO_OpenSans-Regular.ttf");

} @font-face{

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/a/a5/UT_TOKYO_OpenSans-Bold.ttf");
   font-weight:bold;

} @font-face{

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/9/95/UT_TOKYO_OpenSans-Italic.ttf");
   font-style:italic;

} @font-face{

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/6/6b/UT_TOKYO_OpenSans-BoldItalic.ttf");
   font-weight: bold;
   font-style: italic;

}

• {

 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

}

canvas{

   display: block;
   margin: auto;

}

body{

   width:100%;

background: #CCC; -webkit-font-smoothing: antialiased; }

body.is-loading *{

 -moz-transition: none !important;
 -webkit-transition: none !important;
 -o-transition: none !important;
 -ms-transition: none !important;
 transition: none !important;
 -moz-animation: none !important;
 -webkit-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;

}

p, h1, h2, h3, h4, h5, h6{

 font-size:20pt;
 color:black;
 line-height:1.5em;

}

h1, h2{

 font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
 background-image:url('https://static.igem.org/mediawiki/2015/4/45/UT_TOKYO_Head.png');
 background-size:contain;
 background-repeat: no-repeat;
 padding-left:2em;
 text-align: center;
 font-size:2em;
 font-weight: Normal;
 margin:0.5em;

} h2{

 text-align: left;

}

h3, h4, h5{

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 text-align: left;
 font-size:1.5em;
 font-weight: bold;
 margin:0.5em;

} h4{

 text-align:center;
 font-size:1em;

} h5{

 font-size:1.2em;

}

h4 span{

 font-weight:normal;

}

p{

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:1em;
 margin:1em;

}

p i{

   font-style:italic;

}

p span{

 text-decoration: underline;
 color: #222;

}

p span q{

 display: none;

}

p span:hover q, p span.hover q{

 position:absolute;
 display: inline;
 margin-top:2em;
 margin-left:-100px;
 width:200px;
 height:auto;
 padding:5px;
 color:white;
 background:rgba(0,0,0,0.6);

}

.panel ul li{

   border-left:solid 2px rgb(255,109,60);

}

.panel ul li p{

 line-height:1.2em;
 margin:5px;

} .panel ol li p{

 line-height:1.2em;
 margin:5px;

}

img.figure{

 display: block;
 margin:0 auto;
 max-width:90%;
 max-height:500px;

}

.table{

 display:block;
 margin:0 auto;
 max-width:90%;
 text-align:center;

}

.table img.figure{

 display: inline;
 max-height:200px;
 

table{

 margin:1em auto;

}

table tr.top{

 border-top:solid 1px black;

}

table tr{

 border-bottom:solid 1px black;

}

table td{

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:16px;
 line-height:2em;
 text-align:left;
 padding-left:10px;
 padding-right:10px;

}

hr{

 border: 0;
 height: 1px;
 background: #333;
 background-image: linear-gradient(to right, #ccc, #333, #ccc);

}

u{ }

1. preload{

 display:none;

}

1. loader{

 width:100%;
 position: fixed;
 top:40%;
 text-align: center;

}

.main{

 position:absolute;
 transition: all 0.6s;
 width:100%;
 top:60px;
 margin:auto;
 overflow-x:hidden;
 overflow-y:auto;

}

.panel{

 position:relative;
 width:90%;
 padding:20px;
 margin:50px auto;
 height:auto;
 background:rgba(255,255,255,0.6);

}

.panel img{

 visibility: visible;

}

.panel-black{

 background-color:rgba(0,0,0,0.6);
 width:100%;
 padding-top:10px;
 padding-bottom:10px;
 -webkit-box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);
 box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);

}

1. footer h1{

 font-family:'Homenaje';
 background:none;
 padding:0px;
 font-size:1.8em;
 color:white;
 margin-bottom:0;

}

1. footer img{

 display:inline-block;
 margin:10px;
 width:200px;
 max-height:60px;
 filter: gray;
 -webkit-filter: grayscale(100%);
 opacity:0.5;

}

1. footer img:hover{

 filter: none;
 -webkit-filter: grayscale(0%);
 opacity:1;

}

1. footer img.sns{

 width:32px;
 height:32px;
 margin:5px;

}

1. footer .copyright{

 text-align:center;
 font-size:1em;
 line-height:2em;
 color:white;

}

1. footer .sns{

} /*********************************************************************** / SWITCHS and BUTTONS /**********************************************************************/ .toggle-sw{

 display:inline-block;
 height:40px;
 width:100px;
 position:relative;
 font-family: 'Homenaje';
 font-size:18px;
 background:#888;
 -webkit-transition: all .2s ease;
 transition: all .2s ease;

} .toggle-sw:after{

 content:;
 display:inline-block;
 height:30px;
 width:40px;
 background:#fff;
 position:absolute;
 top:5px;
 left:5px;
 -webkit-transition: all .2s ease;
 transition: all .2s ease;
 }

.toggle-sw:before{

 content:'OFF';
 position:absolute;
 right:11px;
 top:12px;
 color:#fff;

} .toggle-sw:hover:after{

 left:10px;

} .toggle-sw.on:before{

 content:'ON';
 right:60px;

} .toggle-sw.on{

 background:rgb(255, 109, 64);

} .toggle-sw.on:after{

 left:55px;

} .toggle-sw.on:hover:after{

 left:50px;

} .toggle-sw.mine:after{

 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/e/ee/UT_TOKYO_Mine.png')

}

.check{ position:relative; padding-left:30px; font-weight: bold; } .check::after{

 content:"";
 background-image:url('https://static.igem.org/mediawiki/2015/1/17/UT_TOKYO_Check.png');
 background-size:contain;
 position:absolute;
 top:0;
 left:0;
 width:1.5em;
 height:1.5em;

}

/*********************************************************************** / PATTERN /**********************************************************************/ .canvas-control{

 display:block;
 position:absolute;
 top:1px;
 left:1px;
 width:298px;
 height:298px;
 background-color:rgba(255,255,255,0.3);

}

.canvas-control p{

 line-height:300px !important;
 margin:0 auto;
 font-family: 'Homenaje';
 font-size:24px;
 color: white;
 text-align:center;
 vertical-align: middle;

}

.canvas-control:hover{

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.canvas-stats{

 display:none;
 position:absolute;
 width:300px;
 padding:2px;
 z-index:500;

}

.canvas-stats:hover{

 display:block !important;

}

.canvas-stats .onoff{

 display:inline-block;

}

.canvas-stats .reset{

 display:inline-block;
 width:40px;
 height:40px;
 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/9/9c/UT_TOKYO_Reset.png');

}

.canvas-stats .reset:hover{

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.canvas-stats .msonoff{

 display:inline-block;

}

1. debug{

   position:absolute;
   width:300px;
   right:0px;
   top:0px;
   font-family: "Century Gothic", sans-serif;
   background-color: black;
   opacity: 0.5;
   color: white;

}

/********************************************************************** / MENU /**********************************************************************/ .logo{

 position: fixed;
 top:16px;
 margin:0;
 width:auto;
 height:60px;

}

.menu-panel{

 font-family:'Homenaje', "Century Gothic", sans-serif;
 position:fixed;
 z-index: 500;
 left:0px;
 top:16px;
 width:100%;
 height:60px;
 margin:0px;
 background-color:rgba(255,255,255,0.6);

}

.menu-panel ul{

 position:fixed;
 text-align:center;
 padding:0px;
 margin:0px;
 width:100%;
 height:60px;

}

.menu-panel li{

 position:relative;
 display: inline-block;
 text-align:center;
 vertical-align:top;
 background-size:cover;
 width:120px;
 height:60px;
 font-size:20px;
 padding-top:10px;
 transition:border 0.3s;

} .menu-panel li:hover, .menu-panel li.hover{

 border-bottom:solid 5px gray;
 color:gray;

} .menu-panel li.active{

 border-bottom:solid 5px rgb(255,109,64);
 color:rgb(255,109,64);

}

.menu-panel li.home{

 height:50px;
 width:50px;
 margin:5px;
 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/8/8b/UT_TOKYO_home.png');
 border:0;
 filter: gray;
 -webkit-filter: grayscale(100%);
 opacity:0.5;
 transition:all 0.3s;

} .menu-panel li.home:hover{

 border:0;
 /*
 -webkit-animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite;
 animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite;
 */
 filter: none;
 -webkit-filter: grayscale(0%);
 opacity:1;

} .menu-panel li.home.active{

 border:0;

} .menu-panel li.home a{

 display:block;
 margin-top:-10px;
 height:50px;
 width:50px;

} .menu-panel li.home a p{

 display:none;

} .menu-panel li.home:hover a p{

 display:block;
 position:absolute;
 width:50px;
 background-color:rgba(0,0,0,0.5);
 color:white;
 font-size:14px;
 text-decoration: none;
 margin:0;
 top:50px;
 left:0px;

}

.menu-panel li ol{

 z-index:1000;
 position:fixed;
 display:block;
 text-align:center;
 padding:10px;
 background:rgba(255,255,255,0.8);
 top:-200px;
 left:0px;
 width:100%;
 height:auto;
 opacity:0;
 transition:opacity 0.3s;
 margin:0;

}

.menu-panel li:hover ol, .menu-panel li.hover ol{

 top:76px;
 opacity:1;

}

.menu-panel li ol a{

 font-family: 'Homenaje', 'Open Sans',"Century Gothic", sans-serif;
 display: inline-block;
 vertical-align:bottom;
 text-align:right;

 width:120px;
 height:80px;
 margin:10px auto;

 color:black;
 font-size:22px;
 opacity:0.7;
 padding:5px;
 background-size: contain;

 text-decoration: none;

}

.menu-panel li ol a.big{

 height:120px;
 margin-left:30px;
 opacity:1;

}

.menu-panel li.project ol a{

 background:rgba(89,160,185,1);
 background-size:cover;
 color:white;

} .menu-panel li.modeling ol a{

 background:rgba(22,79,207,1);
 background-size:cover;
 color:white;

} .menu-panel li.experiment ol a{

 background:rgba(119,114,233,1);
 background-size:cover;
 color:white;

} .menu-panel li.achivement ol a{

 background:rgba(183,183,183,1);
 background-size:cover;

} .menu-panel li.pp ol a{

 background:rgba(1,0,216,1);
 background-size:cover;
 color:white;

} .menu-panel li.team ol a{

 background:rgba(89,160,185,1);
 background-size:cover;
 color:white;

}

.menu-panel li ol a:hover{

 color:rgb(255,109,64);
 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.menu-panel li ol a.active{

 opacity:1;

}

/********************************************************************** / NAVIGATION /**********************************************************************/ .posnav{

 font-family:'Homenaje', "Century Gothic", sans-serif;
 position: fixed;
 top:76px;
 left:100%;
 display: block;
 -webkit-transform-origin:left top;
 transform-origin:left top;
 -webkit-transform:rotate(90deg);
 transform:rotate(90deg);

}

1. breadcrumbs-one{

 overflow-y: hidden;
 overflow-x: auto;
 white-space: nowrap;
 width:1000px;
 opacity:0.6;

}

1. breadcrumbs-one a{

 padding: .6em 1em .6em 2em;

font-size:14px;

 display:inline-block;
 text-decoration: none;
 color: black;
 position: relative;
 background:white;

}

1. breadcrumbs-one .posnav:first-child a{

 padding-left: 1em;
 border-radius: 5px 0 0 5px;

}

1. breadcrumbs-one a:hover,
2. breadcrumbs-one a.hover{

 background: yellow !important;
 color:black !important;

}

1. breadcrumbs-one a.read{

 background: red;
 color:white;

}

1. breadcrumbs-one a::after,
2. breadcrumbs-one a::before{

 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;

}

1. breadcrumbs-one a::after{

 z-index: 2;
 border-left-color: white;

}

1. breadcrumbs-one a::before{

 border-left-color: white;
 right: -1.1em;
 z-index: 1;

}

1. breadcrumbs-one a:hover::after,
2. breadcrumbs-one a.hover::after{

 border-left-color: yellow !important;

}

1. breadcrumbs-one a.read::after{

 border-left-color: red;

}

/********************************************************************** / ANIMATION /**********************************************************************/ @-webkit-keyframes blink{

 0% {opacity:1;}
 100% {opacity:0.7;}

} @keyframes blink{

 0% {opacity:1;}
 100% {opacity:0.7;}

}

@-webkit-keyframes iblink{

 0% {opacity:0.1;}
 100% {opacity:1;}

} @keyframes iblink{

 0% {opacity:0.1;}
 100% {opacity:1;}

}

@-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);}

 25% {-webkit-transform: rotate(90deg);}
 50% {-webkit-transform: rotate(180deg);}
 75% {-webkit-transform: rotate(270deg);}

100% {-webkit-transform: rotate(360deg);} }

@keyframes spin { 0% {transform: rotate(0deg);}

 25% {transform: rotate(90deg);}

50% {transform: rotate(180deg);}

 75% {transform: rotate(270deg);}

100% {transform: rotate(360deg);} }

/********************************************************************** / GRID /**********************************************************************/ /* ---- grid ---- */ .grid.team{

 display:block;
 margin:auto;
 max-width: 1500px;

} .grid.home{

 display:block;
 margin:auto;
 max-width: 1300px;

}

/* clear fix */ .grid:after{

 content: ;
 display: block;
 clear: both;

}

/* ---- .grid-item ---- */

.grid-item{

 font-family:'Homenaje', "Century Gothic", sans-serif;
 float: left;
 width: 200px;
 height: 200px;
 overflow:hidden;
 background-repeat:no-repeat;
 background-size:cover;
 padding:2px;

}

.grid-item img{

 visibility:hidden;

}

.grid-item span{

 display: block;
 width:100%;
 height:100%;
 background-repeat:no-repeat;
 background-size:cover;

}

.grid-item--size2{

 width: 300px;
 height: 300px;

} .grid-item--size3{

 width: 400px;
 height: 400px;

} .grid-item--size4{

  width: 300px;
  height: 300px;

} .grid-item--title{

  width: 100%;
  height: 50px;

} .grid-item--slide{

  width: 600px;
  height: 300px;

} .grid-item--slide ul{

 margin:0;

} .grid-item--small{

 width: 100px;
 height: 100px;

}

/* HOME PAGE */ .grid-item.pattern{

 overflow: visible;

}

.grid-item.link span:hover::after{

 content: url('https://static.igem.org/mediawiki/2015/5/5c/UT_TOKYO_External.png');
 position: absolute;
 right: 0;
 top: 0;
 opacity:0.6;
 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.grid-item.home span:hover{

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;
 cursor: pointer;

}

.grid-item.home ul{

   margin-top:5px;

} .grid-item.opened.home{

 width:396px;
 height:396px;
 margin:2px;
 background-color:rgba(255,255,255,0.2);

} .grid-item.opened.home span{

 position:absolute;
 top:0;
 left:0;
 margin:10px;
 background-size: 180px auto;
 height:180px;
 width:180px;

}

.grid-item.opened.home ul{

 position:absolute;
 display:inline-block;
 top:200px;
 left:0;
 margin:10px;
 padding:0;
 width:180px;
 height:180px;

}

.grid-item.opened.home ul li{

 width:180px;
 background-color:rgba(0,0,0,0.5);
 margin-bottom:2px;
 padding:5px;

}

.grid-item.opened.home ul li:hover{

 background-color:black;

}

.grid-item.opened.home ul li a{

 display: block;
 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:1.3em;
 color:white;
 text-decoration: none;
 width:180px;

}

.grid-item.opened.home ul li:hover a{

 color:rgb(255,109,64);

}

.grid-item.opened.home ul li a p{

 position:absolute;
 top:-200px;
 left:200px;
 width:180px;
 margin:0;
 visibility:hidden;
 font-size:0.7em;
 color:white;
 padding:5px;

}

.grid-item.opened.home ul li a:hover p{

 visibility:visible;

}

/* TEAM PAGE */ .grid-item.team h1{

 position:absolute;
 background:none;
 padding:0;
 top:0;
 font-size: 24px;
 font-weight:normal;
 visibility: hidden;

}

.grid-item.team span{

 display: block;
 width:100%;
 height:100%;
 background:url('../images/team_r.png');
 background-repeat:no-repeat;
 background-size:cover;

}

.grid-item.team span:hover{

 animation:blink 0.4s ease-in-out infinite alternate;
 -webkit-animation:blink 0.4s ease-in-out infinite alternate;

}

.grid-item.opened.team{

 width: 396px;
 height: 396px;
 margin: 2px;
 background: rgba(255, 255, 255, 0.6);

}

.grid-item.opened.team span{

 display: none;

}

.grid-item.opened.team h1{

 max-width:25%;
 font-size:1.2em;
 border-bottom:solid 1px white;
 visibility: visible;

}

.grid-item.opened.team img{

 visibility:visible;
 position:absolute;

}

.grid-item.opened.team img.topright{

 width:67%;
 height:67%;
 top:0px;
 left:33%;

}

.grid-item.opened.team img.bottomleft{

 width:33%;
 height:33%;
 top:67%;
 left:0;

}

.grid-item.opened.team p.jobs{

 position:absolute;
 bottom:33%;
 left:0;
 margin-left:10px;
 text-align:left;
 font-size: 16px;
 font-weight:normal;

}

.grid-item.opened.team p.description{

 /*clear:right;*/
 position:absolute;
 top:67%;
 left:33%;
 width:62%;
 margin-left:10px;
 text-align:left;
 font-size: 16px;
 font-weight:normal;

} /********************************************************************** / Slide Show /**********************************************************************/

1. slide {

 width:100%;
 height:100%;
 margin:0 auto;
 position:relative;

}

1. slide ul,
2. slide li{

 width:100%;
 height:100%;

}

1. slide img {

 position:absolute;
 left:0;
 top:0;
 height:100%;
 width:100%;
 visibility: visible;

}

/********************************************************************** / For mobile /**********************************************************************/ @media only screen and (max-width: 1024px){

 h1, h2, h3{
   font-size:1.2em;
 }

 p, h4{
   font-size:0.8em;
 }

 img.figure{
   max-width:90%;
 }

 .panel{
   width:90%;
 }

 .logo{
   display:none;
 }

 .menu-panel ul{
   width:auto;
   text-align:left;
   left:60px;
 }

 .menu-panel li{
   width:80px;
 }

 .menu-panel ul li.home{
   position:fixed;
   top:16px;
   left:0px;
 }

 .menu-panel ul li ol a{
   font-size:0.8em;
   height:60px;
   width:80px;
 }
 .menu-panel ul li ol a.big{
   height:100px;
   width:100px;
 }

 .grid-item.opened.team{
   width:300px;
   height:300px;
 }

 .grid-item.opened.team p{
   font-size:0.8em;
 }

 .posnav{
   font-size:14px;
 }

 .grid-item--size3{
   width: 300px;
   height: 300px;
 }

}

@media only screen and (max-width: 640px){

 h1, h2{
   text-align:right;
 }

 .panel{
   padding:10px;
 }

 .menu-panel ul li{
   padding:5px;
   font-size:15px;
   width:70px;
   height:30px;
 }

 .menu-panel ul li ol a{
   font-size:14px;
   height:40px;
   width:80px;
   margin:1px;
 }

 .menu-panel ul li ol a.big{
   margin-left:0;
   margin-right:80px;
   width:80px;
   height:80px;
 }
.menu-panel li ol{
   display:none;
 }
 .menu-panel li:hover ol{
   display:block;
   background:none;
   position:relative;
   margin-top:-75px;
   margin-left:-20px;
   width:100px;
 }

 .grid-item.opened.home{
   width:296px;
   height:296px;
 }

 .grid-item.opened.home span{
   background-size: 130px auto;
   width:130px;
 }

 .grid-item.opened.home ul{
   top:140px;
 }

 .grid-item.opened.home ul li{
   width:130px;
 }

 .grid-item.opened.home ul li a{
   font-size:0.8em;
 }

 .grid-item.opened.home ul li a p{
   font-size:1em;
   width:130px;
   top:-140px;
   left:140px;
 }

 .grid-item--size2{
   width: 100px;
   height: 100px;
 }
 .grid-item--size3{
   width: 200px;
   height: 200px;
 }
 .grid-item--size4{
   width: 300px;
   height: 300px;
 }
 .grid-item--size5{
   height: 40px;
 }
 .grid-item--slide{
    width: 300px;
    height: 150px;
   padding:0;
 }

 .grid-item.team{
   width:96px;
   height:96px;
   margin:2px;
 }

 .grid-item.opened.team{
   width:296px;
   height:296px;
   margin:2px;
 }

 .grid-item.team h1,
 .grid-item.opened.team h1{
   font-size:1em;
 }

 .grid-item.opened.team p.jobs,
 .grid-item.opened.team p.description{
   font-size:0.8em;
 }

 #footer h1{
   font-size:1.5em;
   text-align:center;
 }

 #footer img{
   width:100px;
   max-height:50px;
 }

}