Template:UT-Tokyo/CSS

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

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

}

@font-face{

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

}

@font-face{

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

}

@font-face{

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

}

@font-face{

   font-family:'Open Sans';
   src: url("https://2015.igem.org/File: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: white; -webkit-font-smoothing: antialiased;

   background-color:#DDDDDD;

}

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 {

 font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
 background-image:url('https://2015.igem.org/File: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 {

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

}

h3 {

 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 {

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

}

h5 {

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

}

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 5px red;

}

.panel ul li p{

 line-height:1em;
 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-width:50%;

}

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:1em;
 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);

}

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

 display:inline-block;
 height:40px;
 width:100px;
 position:relative;
 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:18px;
 background:#ccc;
 -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, 79, 0);

} .toggle-sw.on:after{

 left:55px;

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

 left:50px;

}

.square-sw{

 display:inline-block;
 height:40px;
 width:40px;
 position:relative;
 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:18px;
 background:rgb(255,79,0);
 -webkit-transition: all .2s ease;
 transition: all .2s ease;

} .square-sw:hover{

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

}

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

 display:block;
 margin:auto;
 width:300px;
 height:45px;
 margin-top:5px;
 margin-bottom:5px;
 font-family: 'Homenaje';
 text-align:center;
 border-right:solid 2px rgb(255, 79, 0);
 border-bottom:solid 2px rgb(255, 79, 0);

}

debug {

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

}

panel{

 position: relative;
 float:left;
 width:98px;
 height:98px;
 left:50%;
 margin-top:1px;
 margin-bottom:1px;
 background-color: rgb(1, 215, 215);

}

panel:hover{

 background-color: white;

}

.button{

 font-family: 'Open Sans',"Century Gothic", sans-serif;
 position: relative;
 margin: auto;
 margin-top:1px;
 margin-bottom:1px;
 text-align: center;
 font-size: 50px;
 color: white;
 width: 598px;
 background-color: rgb(1, 215, 215);

} .button:hover{

 background-color: yellow;
 color: red

}

/********************************************************************** / MENU /**********************************************************************/ .menu-panel {

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

}

.menu-panel ul{

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

}

.menu-panel li{

 position:relative;
 display: inline-block;
 text-align:center;
 vertical-align:top;
 background-size:cover;
 width:120px;
 height:70px;
 font-size:20px;
 padding-top:10px;
 transition:top 0.4s;
 transition-timing-function:ease-in-out;

}

.menu-panel li.home{

 height:60px;
 width:60px;
 background-size:cover;
 background-image:url('https://2015.igem.org/File:UT_TOKYO_home.png');
 border:0;

}

.menu-panel li.home a{

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

}

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

 border-top:solid 5px white;
 color:white;

}

.menu-panel li.home:hover{

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

}

.menu-panel li.active {

 border-top:solid 5px red;

}

.menu-panel li.home.active{

 opacity:0.3;
 border:0;

}

.menu-panel li ol {

 position:fixed;
 display:none;
 text-align:center;
 padding:10px;
 background:rgba(255,255,255,0.6);
 top:80px;
 left:0px;
 width:100%;
 height:auto;

}

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

 display:block;

}

.menu-panel li ol a{

 font-family: 'Homenaje', 'Open Sans',"Century Gothic", sans-serif;
 position:relative;
 display: inline-block;
 vertical-align:top;

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

 color:black;
 font-size:22px;

 text-decoration: none;

}

.menu-panel li ol a:first-child{

 height:120px;

}

.menu-panel li.project ol a{

 background:rgba(29,78,184,1);
 background-size:cover;
 color:white;

} .menu-panel li.modeling ol a{

 background:rgba(242,66,2,1);
 background-size:cover;

} .menu-panel li.experiment ol a{

 background:rgba(207,234,241,1);
 background-size:cover;

} .menu-panel li.parts 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(255,109,64);
 background-size:cover;

}

.menu-panel li ol a:hover {

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

}

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

 font-family:'Homenaje', "Century Gothic", sans-serif;
 font-size:20px;
 position:fixed;
 bottom:0px;

}

breadcrumbs-one{

 overflow-y: hidden;
 overflow-x: auto;
 white-space: nowrap;
 opacity:0.6;
 width: 100%;

}

breadcrumbs-one a{

 padding: .7em 1em .7em 2em;
 display:inline-block;
 text-decoration: none;
 color: black;
 position: relative;
 background:white;

}

breadcrumbs-one .posnav:first-child a{

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

}

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

 background: yellow;

}

breadcrumbs-one a.read{

 background: red;
 color:white;

}

breadcrumbs-one a::after,
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;

}

breadcrumbs-one a::after{

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

}

breadcrumbs-one a::before{

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

}

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

 border-left-color: yellow;

}

breadcrumbs-one a.read::after{

 border-left-color: red;

}

/********************************************************************** / MAIN /**********************************************************************/ .main {

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

}

.panel {

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

}

.panel img{

 visibility: visible;

}

/********************************************************************** / 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;}

}

/********************************************************************** / 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;
 /*border:solid 2px white;*/
 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--width2 { width: 300px; } .grid-item--height2 { height: 300px; } .grid-item--width3 { width: 400px; } .grid-item--height3 { height: 400px; } .grid-item--width4 { width: 300px; } .grid-item--height4 { height: 400px; }

/* HOME PAGE */ .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 {

 padding:20px;
 background-color:rgba(0,0,0,0.3);
 width: 100%;
 height:300px;

} .grid-item.opened.home span{

 display:inline-block;
 background-size: 260px auto;
 width:260px;

}

.grid-item.opened.home ul{

 display:inline-block;
 vertical-align: top;
 height:auto;
 width:auto;
 margin-left:20px;

}

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

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:1.5em;
 color:white;
 line-height: 1.3em;
 text-decoration: none;

}

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

 color:yellow;

}

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

 position:absolute;
 visibility:hidden;
 font-size:0.7em;
 color:white;
 top:20px;
 left:50%;

}

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

 visibility:visible;

}

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

 position:absolute;
 background:none;
 padding:0px;
 top:0;
 font-size: 1.5em;
 font-weight:normal;

}

.grid-item.team span{

 display: block;
 width:100%;
 height:100%;
 background:url('https://2015.igem.org/File:UT_TOKYO_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{

 font-size:1.2em;
 border-bottom:solid 1px white;

}

.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{

 /*clear:right;*/
 position:absolute;
 top:2.5em;
 left:0;
 margin-left:10px;
 text-align:left;
 font-size: 1em;
 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: 1em;
 font-weight:normal;

}

/********************************************************************** / 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%;
 }

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

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

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

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

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

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

 .grid-item.opened.home ul li a p{
   left:350px;
 }

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

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

 .posnav{
   font-size:14px;
 }

}

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

 h1, h2 {
   text-align:right;
 }

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

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

 .menu-panel ul li ol a:first-child{
   margin-right:80px;
   height:80px;
 }

 .menu-panel li ol{
   z-index:1000;
   background:none;
   position:relative;
   margin-top:-80px;
   margin-left:-25px;
   width:100px;
 }

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

 .grid-item.opened.home ul{
   margin-top:0;
 }

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

 .grid-item.opened.home ul li a p{
   left:20px;
   top:120px;
 }

 .grid-item--width2 { width: 200px; }
 .grid-item--height2 { height: 200px; }
 .grid-item--width3 { width: 200px; }
 .grid-item--height3 { height: 200px; }
 .grid-item--width4 { width: 300px; }
 .grid-item--height4 { height: 400px; }

}