Team:Tokyo-NoKoGen/wiki.css

From 2012.igem.org

(Difference between revisions)

Revision as of 13:35, 12 September 2012

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


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

  1. title{

width:400px; height:80px;

position: absolute; bottom:10px; left: -180px; display: block; padding: 0px; margin: 0px;

}

  1. title h1{

font-family: serif; }

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

}

  1. t1{

height: 55px\9; top: -0px\9; font-size: 45px\9; background-position: -1200px 0px\9; }

  1. t1:hover{

background-position: -0px 0px; color: #000000; }


  1. t2{

z-index:20002; bottom:-60px;

left:5px; position: absolute; display: block; padding-bottom: -10px;


font-size:77px; color: #121212; }

  1. t2{

bottom:-60px\9; font-size:77px\9; }

  1. menu{

width:92%; z-index:10005;

position: absolute; top:35px; right:5%; }

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

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

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

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


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

  1. index:hover{

width: 16%; min-height: 128px;


border-top: 1px solid #e5fffa; border-right: 1px solid #e5fffa; background-color: #000f0c;

font-size:17px; }

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

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

  1. index a:hover{

padding-left: 13px; border-left: 3px solod #122333; background-color: #000000; color: #c0f9f0; }


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

}

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

  1. bg1:hover{

background-position: 60px 10px; }

  1. bg1{

background-position: 60px 10px\9; }

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

  1. bg2:hover{

background-color:#ffffff; }

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

  1. contents:hover{

background-position: -6px 0px; color:#000000; }

  1. contents{

background-position: -1px 0px\9; }

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

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

  1. period{

display: block; width:100%;; height:155px; margin: 0 auto; }