"
Team:Tokyo-NoKoGen/wiki.css
From 2012.igem.org
/* for tags -----------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, ul, li , a, table, tr, img{
margin: 0; padding: 0; border: 0; outline: 0; font-family: san-serif; letter-spacing: 0.1em;
background-repeat: no-repeat; background-position: 0px 0px;
text-decoration: none; }
html{ /*width:1280px;*/ }
body,html{ height: 100%; }
nokogen{ height: 100%; min-width:864px; max-width: 1280px;
background-color:#000000;
background-image: url(../img/bg_04.png);
background-repeat: repeat-y;
background-position: -10px;
color: #000000;
line-height:1.4; text-align: left;
margin: 0 auto; padding: 0;
overflow-y:hidden; }
div{
position: relative;
margin: 0px; padding: 0px; }
object, embed{
vertical-align: top;
}
li{ margin: 0; padding: 0;
letter-spacing: 0.1em; list-style-type: none; display: inline; text-align: left;
}
a{ color: #d5fff6; }
a:hover{ color: #d5fff6;
}
a:visited{
}
span{
}
p{ display: inline; }
/*------------------------------------------ -navigation area
*/
- navi{
max-width: 240px; width:25%; height:100%; float: right; margin-right:16px; z-index:99999;
background-color:#000f0c; background-image: url(../img/bg_01.png); background-repeat: repeat-y; background-position: left; border-left: 1px solid #003300; }
- title{
width:400px; height:80px;
position: absolute; bottom:10px; left: -180px; display: block; padding: 0px; margin: 0px;
}
- title h1{
font-family: serif; }
- t1{
-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease;
height:57px; padding:0px;
z-index:20005; top:-40px; left:40px;
position: absolute; display: block;
font-size:43px; font-weight:400; color:#deffff;
background-image: url(../img/bg_08.png); background-repeat: repeat; background-position: -1200px 0px;
}
- t1{
height: 55px\9; top: -0px\9; font-size: 45px\9; background-position: -1200px 0px\9; }
- t1:hover{
background-position: -0px 0px; color: #000000; }
- t2{
z-index:20002; bottom:-60px;
left:5px; position: absolute; display: block; padding-bottom: -10px;
font-size:77px;
color: #121212;
}
- t2{
bottom:-60px\9; font-size:77px\9; }
- menu{
width:92%; z-index:10005;
position: absolute; top:35px; right:5%; }
- menu li{
display: block; height:25px; width: 100%; margin: 0 auto; padding: 0px;
position: relative; top: 0px;
}
.mitemL{ -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease;
display: block; width: 100%; max-height:25px;
position:absolute; top: 0px; left: 0px;
text-align:right; color: #809990; font-size:17px;
overflow:hidden; }
.mitemL:hover{
color: #d5fff6; }
.mitem{ -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;
display: block; width: 100%; max-height:25px;
position:absolute; top: 0px; left: 0px;
text-align:right; color: #809990; font-size:17px;
overflow:hidden; }
.mitem:active{ width:173%; max-height: 600px; margin-left: -73%;
border-left: 3px solid #8eafaf; border-top: 1px solid #8eafaf;
color: #d5fff6; }
.mitem:hover{ width:173%; max-height: 600px; margin-left: -73%;
border-left: 3px solid #8eafaf; border-top: 1px solid #8eafaf;
color: #d5fff6; }
.mlink { z-index:10004; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;
display: block; width:100%; height: 19px; padding-top: 0px; padding-bottom: 6px;
background-image: url(../img/bg_05.png); background-repeat: repeat-y; background-position: -850px 0px;
text-align:right; color: #809990; }
.mlink:hover { z-index:99999; background-position: 0px 0px; padding-bottom: 5px; border-bottom: 1px solid #8eafaf; color: #d5fff6; }
.mitem:active .mlink{ z-index:99999; padding-bottom: 5px; background-position: 0px 0px; border-bottom: 1px solid #8eafaf; color: #d5fff6; }
.mitem:hover .mlink{ z-index:99999; padding-bottom: 5px; background-position: 0px 0px; border-bottom: 1px solid #8eafaf; color: #d5fff6; }
.submenu{
display: block;
width:40%;
background-color: #000000;
text-align: left; font-weight: 400; font-size: 12px; }
.submenu:hover{ }
.submenu a{ display: block; width:100%; background-color: #222222; padding-top: 2px; padding-bottom: 2px; padding-left: 7px; text-align: left; font-size: 12px; }
.submenu a:hover{ background-color: #000000; border-left: 2px solid #5e7f7f;
margin-left: 0px; padding-left: 7px; }
- social{
z-index:10006; width:36px; height:36px;
position: absolute; top:259px; right:5%;
background-color:#d5fff6;
padding:0px; text-align:center; font-family: serif; font-weight:900; font-size:23px; }
- social:hover{
-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;
top:257px;
border-top: 2px solid #e5fffa; border-left: 2px solid #e5fffa; }
- mnimage{
z-index:10003; width:94%; height:240px;
position: absolute; top:278px; left:3%;
background-image: url(../img/im_01.png); background-position: bottom; background-repeat: none; }
/*------------------------------------------ -contents area
*/
- index{
-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;
width: 8%; min-height: 0px;
position: absolute; bottom: 35px; left: 0px; z-index: 99998;
font-size:11px; }
- index:hover{
width: 16%; min-height: 128px;
border-top: 1px solid #e5fffa;
border-right: 1px solid #e5fffa;
background-color: #000f0c;
font-size:17px; }
- ind{
z-index:99999; display: block; width: 125%; padding-right: 5px; padding-left: 5px;
margin-right: -10%;
background-color: #d0d0f0; border: 1px solid #122333; border-right: 4px solid #122333; padding-top: 0px;
margin: 0px; text-align:right; font-size:17px; font-weight:600; color: #122333; }
- index a{
z-index:10002; display: block; width: 100%;
left:0px;
background-image: url(../img/bg_05.png); background-position: -830px 0px; background-repeat: repeat-y;
padding-left: 10px; text-align:left; color: #809990; }
- index a:hover{
padding-left: 13px; border-left: 3px solod #122333; background-color: #000000; color: #c0f9f0; }
- container{
width:89%; height:100%; float: left; z-index:10000;
padding-right:0%; padding-left:6%; margin-left:5%;
margin-right:-306px;
padding-bottom:0px;
overflow-y:scroll;
}
- bg1 {
width:100%; min-height: 100%;
margin-left: -16%; padding-left: 16%;
background-image: url(../img/bg_07.png); background-repeat: repeat-y; background-position: 80px 1000px;
-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; }
- bg1:hover{
background-position: 60px 10px; }
- bg1{
background-position: 60px 10px\9; }
- bg2 {
width:71%; min-height: 100%;
padding-right:28%; margin: 0 auto;
background-color:#f0f0f0; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; }
- bg2:hover{
background-color:#ffffff; }
- contents{
width:96%; min-height: 100%;
padding-left:3%;
padding-right:1%;
padding-top: 35px;
top:0px;
left:0px;
background-image: url(../img/bg_06.png); background-position: -1px 0px; background-repeat: repeat-y; border-right: 1px solid #f0f0f0;
color:#333333;
-webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; }
- contents:hover{
background-position: -6px 0px; color:#000000; }
- contents{
background-position: -1px 0px\9; }
- contents h3{
display: block; width:105%;; margin-left:-49px; padding-left:43px; margin-bottom:1.5em;
background-color:#00222b; border-left: 7px solid #ffffff; border-top: 2px solid #00222b; border-bottomt: 2px solid #00222b;
color:#ffffff;
font-family: serif;
font-size:17px;
}
- contents h4{
display: block; width:100%;; background-color:#f0f0f0;
padding: 0px; margin: 0px; margin-bottom:1em; }
.imbox{ -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease;
height:120px;
margin-top: 1.5em; margin-bottom: 1.5em;
padding-left: 2px; padding-right: 2px; text-align: center; }
.imbox img{ -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease;
display: block; max-height: 100px; margin: 0 auto;
background-color: #000f0c; border: 5px solid #dddddd;
}
.imbox img:hover{ z-index: 99999; max-height: 200px;
border: 5px solid #122333;
}
.imbox p{
margin: 0 auto;
font-size: 13px;
background-color: #000f0c; border: 1px solid #dddddd;
padding-right:2px; padding-left:2px; color: #accdcc; }
- period{
display: block; width:100%;; height:155px; margin: 0 auto; }
