Difference between revisions of "Template:UT-Tokyo/CSS"

Line 1: Line 1:
−
<html>
+
/***********************************************************************
 +
/  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;
 
   -webkit-box-sizing: border-box;
Line 15: Line 46:
 
background: white;
 
background: white;
 
-webkit-font-smoothing: antialiased;
 
-webkit-font-smoothing: antialiased;
−
    /*background-image:url('../images/windows7.jpg');
 
−
    background-size:cover;
 
−
    background-attachment:fixed;*/
 
 
     background-color:#DDDDDD;
 
     background-color:#DDDDDD;
 
}
 
}
Line 42: Line 70:
 
h1 {
 
h1 {
 
   font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
 
   font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
−
   background-image:url('../images/head.png');
+
   background-image:url('https://2015.igem.org/File:UT_TOKYO_Head.png');
 
   background-size:contain;
 
   background-size:contain;
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
Line 54: Line 82:
 
h2 {
 
h2 {
 
   font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
 
   font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
−
   background-image:url('../images/head.png');
+
   background-image:url('https://2015.igem.org/File:UT_TOKYO_Head.png');
 
   background-size:contain;
 
   background-size:contain;
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
Line 65: Line 93:
  
 
h3 {
 
h3 {
−
   font-family: 'Open Sans', "Century Gothic", sans-serif;
+
   font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 
   text-align: left;
 
   text-align: left;
 
   font-size:1.5em;
 
   font-size:1.5em;
Line 77: Line 105:
 
   font-weight:bold;
 
   font-weight:bold;
 
   font-size:1em;
 
   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;
 
   margin:0.5em;
 
}
 
}
Line 122: Line 158:
 
.panel ul li p{
 
.panel ul li p{
 
   line-height:1em;
 
   line-height:1em;
−
   margin:5px;;
+
   margin:5px;
 
}
 
}
  
Line 172: Line 208:
 
}
 
}
  
 +
/***********************************************************************
 +
/  SWITCHS and BUTTONS
 +
/**********************************************************************/
 
.toggle-sw{
 
.toggle-sw{
 
   display:inline-block;
 
   display:inline-block;
Line 235: Line 274:
 
}
 
}
  
 +
/***********************************************************************
 +
/  PATTERN
 +
/**********************************************************************/
 
.canvas-control {
 
.canvas-control {
 
   display:block;
 
   display:block;
Line 291: Line 333:
 
}
 
}
  
 +
/**********************************************************************
 +
/  MENU
 +
/**********************************************************************/
 
.menu-panel {
 
.menu-panel {
 
   font-family:'Homenaje', "Century Gothic", sans-serif;
 
   font-family:'Homenaje', "Century Gothic", sans-serif;
Line 296: Line 341:
 
   z-index: 500;
 
   z-index: 500;
 
   left:0px;
 
   left:0px;
−
   top:20px;
+
   top:0px;
 
   width:100%;
 
   width:100%;
 
   min-height:0px;
 
   min-height:0px;
Line 331: Line 376:
 
   width:60px;
 
   width:60px;
 
   background-size:cover;
 
   background-size:cover;
−
   background-image:url('../images/home.png');
+
   background-image:url('https://2015.igem.org/File:UT_TOKYO_Home.png');
 
   border:0;
 
   border:0;
 
}
 
}
Line 337: Line 382:
 
.menu-panel li.home a{
 
.menu-panel li.home a{
 
   display:block;
 
   display:block;
 +
  margin-top:-10px;
 
   height:60px;
 
   height:60px;
 
   width:60px;
 
   width:60px;
Line 386: Line 432:
  
 
   width:120px;
 
   width:120px;
−
   height:120px;
+
   height:80px;
 
   margin:10px auto;
 
   margin:10px auto;
  
−
  background-color:red;
+
   color:black;
−
  background-size:cover;
+
   font-size:22px;
−
   color:white;
+
−
   font-size:20px;
+
  
 
   text-decoration: none;
 
   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 {
 
.menu-panel li ol a:hover {
−
   color:yellow;
+
   color:red;
 
   animation:blink 0.3s ease-in-out infinite alternate;
 
   animation:blink 0.3s ease-in-out infinite alternate;
 
   -webkit-animation:blink 0.3s ease-in-out infinite alternate;
 
   -webkit-animation:blink 0.3s ease-in-out infinite alternate;
 
}
 
}
  
−
.menu-panel .posnav{
+
/**********************************************************************
−
   font-family: 'Open Sans',"Century Gothic", sans-serif;
+
/  NAVIGATION
 +
/**********************************************************************/
 +
.posnav{
 +
   font-family:'Homenaje', "Century Gothic", sans-serif;
 
   font-size:20px;
 
   font-size:20px;
 
   position:fixed;
 
   position:fixed;
 
   bottom:0px;
 
   bottom:0px;
−
  height:30px;
 
−
  width:100%;
 
−
  padding-left:10px;
 
−
  background:rgba(255,255,255,0.6);
 
−
  color:dimgray;
 
−
  display:none;
 
 
}
 
}
−
.menu-panel .posnav.current{
+
 
−
   display:block;
+
#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 {
 
.main {
 
   position:absolute;
 
   position:absolute;
Line 442: Line 576:
 
}
 
}
  
 +
/**********************************************************************
 +
/  ANIMATION
 +
/**********************************************************************/
 
@-webkit-keyframes blink{
 
@-webkit-keyframes blink{
 
   0% {opacity:1;}
 
   0% {opacity:1;}
Line 462: Line 599:
 
}
 
}
  
 +
 +
/**********************************************************************
 +
/  GRID
 +
/**********************************************************************/
 
/* ---- grid ---- */
 
/* ---- grid ---- */
 
.grid.team{
 
.grid.team{
Line 471: Line 612:
 
   display:block;
 
   display:block;
 
   margin:auto;
 
   margin:auto;
−
   max-width: 1000px;
+
   max-width: 1300px;
 
}
 
}
  
Line 486: Line 627:
 
   font-family:'Homenaje', "Century Gothic", sans-serif;
 
   font-family:'Homenaje', "Century Gothic", sans-serif;
 
   float: left;
 
   float: left;
−
   width: 100px;
+
   width: 200px;
−
   height: 100px;
+
   height: 200px;
 
   overflow:hidden;
 
   overflow:hidden;
 
   background-repeat:no-repeat;
 
   background-repeat:no-repeat;
Line 495: Line 636:
 
}
 
}
  
−
.grid-item h1, img{
+
.grid-item img{
 
   visibility:hidden;
 
   visibility:hidden;
 
}
 
}
Line 507: Line 648:
 
}
 
}
  
−
.grid-item--width2 { width: 200px; }
+
.grid-item--width2 { width: 300px; }
−
.grid-item--height2 { height: 200px; }
+
.grid-item--height2 { height: 300px; }
−
.grid-item--width3 { width: 300px; }
+
.grid-item--width3 { width: 400px; }
−
.grid-item--height3 { height: 300px; }
+
.grid-item--height3 { height: 400px; }
 
.grid-item--width4 { width: 300px; }
 
.grid-item--width4 { width: 300px; }
 
.grid-item--height4 { height: 400px; }
 
.grid-item--height4 { height: 400px; }
−
 
−
.grid-item--column1 {
 
−
  width:100%;
 
−
}
 
−
.grid-item--column2 {
 
−
  width:50%;
 
−
}
 
  
 
/* HOME PAGE */
 
/* HOME PAGE */
Line 576: Line 710:
 
}
 
}
  
−
/* TEAM PAGE*/
+
/* 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{
 
.grid-item.team span{
 
   display: block;
 
   display: block;
 
   width:100%;
 
   width:100%;
 
   height:100%;
 
   height:100%;
−
   background:url('../images/team.png');
+
   background:url('https://2015.igem.org/File:UT_TOKYO_Team_r.png');
 
   background-repeat:no-repeat;
 
   background-repeat:no-repeat;
 
   background-size:cover;
 
   background-size:cover;
Line 589: Line 732:
 
   animation:blink 0.4s ease-in-out infinite alternate;
 
   animation:blink 0.4s ease-in-out infinite alternate;
 
   -webkit-animation:blink 0.4s ease-in-out infinite alternate;
 
   -webkit-animation:blink 0.4s ease-in-out infinite alternate;
−
  cursor: pointer;
 
 
}
 
}
  
 
.grid-item.opened.team {
 
.grid-item.opened.team {
−
   width: 300px;
+
   width: 396px;
−
   height: 300px;
+
   height: 396px;
 +
  margin: 2px;
 
   background: rgba(255, 255, 255, 0.6);
 
   background: rgba(255, 255, 255, 0.6);
 
}
 
}
Line 603: Line 746:
  
 
.grid-item.opened.team h1{
 
.grid-item.opened.team h1{
−
  visibility: visible;
+
   font-size:1.2em;
−
  background:none;
+
−
  padding:5px;
+
−
   font-size: 1em;
+
−
  font-weight:normal;
+
 
   border-bottom:solid 1px white;
 
   border-bottom:solid 1px white;
 
}
 
}
 +
 
.grid-item.opened.team img{
 
.grid-item.opened.team img{
−
  display:inline-block;
+
   visibility:visible;
−
  float:right;
+
   position:absolute;
−
   visibility: visible;
+
−
   width:120px;
+
−
  height:240px;
+
 
}
 
}
−
.grid-item.opened.team p{
+
 
 +
.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;*/
 
   /*clear:right;*/
−
   width:180px;
+
   position:absolute;
 +
  top:2.5em;
 +
  left:0;
 
   margin-left:10px;
 
   margin-left:10px;
 
   text-align:left;
 
   text-align:left;
Line 626: Line 780:
 
}
 
}
  
−
/* COLUMN */
+
.grid-item.opened.team p.description{
−
.grid-item.opened.grid-item--column1{
+
   /*clear:right;*/
−
   width: 100%;
+
   position:absolute;
−
   height: 300px;
+
   top:67%;
−
   background: rgba(255, 79, 0, 1);
+
  left:33%;
−
}
+
   width:62%;
−
.grid-item.opened.grid-item--column2{
+
   margin-left:10px;
−
   width: 50%;
+
   text-align:left;
−
   height: 300px;
+
  font-size: 1em;
−
   background: rgba(255, 79, 0, 1);
+
  font-weight:normal;
 
}
 
}
  
 +
/**********************************************************************
 +
/  For mobile
 +
/**********************************************************************/
 
@media only screen and (max-width: 1024px) {
 
@media only screen and (max-width: 1024px) {
 
   h1, h2, h3{
 
   h1, h2, h3{
Line 688: Line 845:
 
   }
 
   }
  
 +
  .grid-item.opened.team{
 +
    width:300px;
 +
    height:300px;
 +
  }
 +
 +
  .grid-item.opened.team p{
 +
    font-size:0.8em;
 +
  }
 +
 +
  .posnav{
 +
    font-size:14px;
 +
  }
 
}
 
}
  
Line 703: Line 872:
  
 
   .menu-panel ul li ol a{
 
   .menu-panel ul li ol a{
−
     font-size:10px;
+
     font-size:14px;
−
     height:80px;
+
     height:40px;
 
     width:80px;
 
     width:80px;
−
     margin-top:5px;
+
     margin:1px;
−
     margin-bottom:5px;
+
  }
 +
 
 +
  .menu-panel ul li ol a:first-child{
 +
     margin-right:80px;
 +
    height:80px;
 
   }
 
   }
  
 
   .menu-panel li ol{
 
   .menu-panel li ol{
 
     z-index:1000;
 
     z-index:1000;
 +
    background:none;
 
     position:relative;
 
     position:relative;
 
     margin-top:-80px;
 
     margin-top:-80px;
−
     margin-left:-100px;
+
     margin-left:-25px;
−
     width:200px;
+
     width:100px;
 
   }
 
   }
  
Line 742: Line 916:
 
   .grid-item--width4 { width: 300px; }
 
   .grid-item--width4 { width: 300px; }
 
   .grid-item--height4 { height: 400px; }
 
   .grid-item--height4 { height: 400px; }
−
  /*
 
−
  .menu-panel{
 
−
      background:none;
 
−
  }
 
  
−
  .menu-panel ul{
 
−
    position:fixed;
 
−
    left:10px;
 
−
    width:60px;
 
−
    height:60px;
 
−
    background:url('../images/home.png');
 
−
    background-size: cover;
 
−
  }
 
−
 
−
  .menu-panel ul li{
 
−
    display:none;
 
−
  }
 
−
 
−
  .menu-panel ul li.home{
 
−
    display:none;
 
−
  }
 
−
  */
 
 
}
 
}
−
</html>
 

Revision as of 06:41, 26 August 2015

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

}

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

}

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

}

  1. 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;

}

  1. breadcrumbs-one{
 overflow-y: hidden;
 overflow-x: auto;
 white-space: nowrap;
 opacity:0.6;
 width: 100%;

}

  1. breadcrumbs-one a{
 padding: .7em 1em .7em 2em;
 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;

}

  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;

}

  1. 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; }

}