Team:UT-Tokyo/CSS

/*********************************************************************** / GENERAL /**********************************************************************/

• {

 -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-image:url('../images/windows7.jpg');
   background-size:cover;
   background-attachment:fixed;*/
   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('../images/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('../images/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', "Century Gothic", 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;

}

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('../images/home.png');
 border:0;

}

.menu-panel li.home a{

 display:block;
 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:120px;
 margin:10px auto;

 background-color:red;
 background-size:cover;
 color:white;
 font-size:20px;

 text-decoration: none;

}

.menu-panel li ol a:hover {

 color:yellow;
 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;
 font-size:20px;
 position:fixed;
 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;

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

}

/* clear fix */ .grid:after {

 content: ;
 display: block;
 clear: both;

}

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

.grid-item {

 font-family:'Homenaje', "Century Gothic", sans-serif;
 float: left;
 width: 100px;
 height: 100px;
 overflow:hidden;
 background-repeat:no-repeat;
 background-size:cover;
 /*border:solid 2px white;*/
 padding:2px;

}

.grid-item h1, img{

 visibility:hidden;

}

.grid-item span{

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

}

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

.grid-item--column1 {

 width:100%;

} .grid-item--column2 {

 width:50%;

}

/* 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 span{

 display: block;
 width:100%;
 height:100%;
 background:url('../images/team.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;
 cursor: pointer;

}

.grid-item.opened.team {

 width: 300px;
 height: 300px;
 background: rgba(255, 255, 255, 0.6);

}

.grid-item.opened.team span{

 display: none;

}

.grid-item.opened.team h1{

 visibility: visible;
 background:none;
 padding:5px;
 font-size: 1em;
 font-weight:normal;
 border-bottom:solid 1px white;

} .grid-item.opened.team img{

 display:inline-block;
 float:right;
 visibility: visible;
 width:120px;
 height:240px;

} .grid-item.opened.team p{

 /*clear:right;*/
 width:180px;
 margin-left:10px;
 text-align:left;
 font-size: 1em;
 font-weight:normal;

}

/* COLUMN */ .grid-item.opened.grid-item--column1{

 width: 100%;
 height: 300px;
 background: rgba(255, 79, 0, 1);

} .grid-item.opened.grid-item--column2{

 width: 50%;
 height: 300px;
 background: rgba(255, 79, 0, 1);

}

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

}

@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:10px;
   height:80px;
   width:80px;
   margin-top:5px;
   margin-bottom:5px;
 }

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

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

}