Team:Tokyo-NoKoGen/wiki.css
From 2012.igem.org
(76 intermediate revisions not shown) | |||
Line 16: | Line 16: | ||
html{ | html{ | ||
/*width:1280px;*/ | /*width:1280px;*/ | ||
+ | margin: 0 auto 0 auto; | ||
} | } | ||
Line 29: | Line 30: | ||
background-color:#000000; | background-color:#000000; | ||
- | background-image: url(../ | + | background-image: url(https://lh5.googleusercontent.com/-rnJNMW7TinU/UGCQQY6ClCI/AAAAAAAADJQ/h3ziYp3UQqw/s179/bg_04.png); |
background-repeat: repeat-y; | background-repeat: repeat-y; | ||
- | background-position: | + | background-position: 10px; |
Line 70: | Line 71: | ||
a{ | a{ | ||
- | color: # | + | color: #809990; |
} | } | ||
a:hover{ | a:hover{ | ||
- | color: # | + | color: #809990; |
Line 101: | Line 102: | ||
float: right; | float: right; | ||
margin-right:16px; | margin-right:16px; | ||
- | z-index: | + | z-index:99900; |
background-color:#000f0c; | background-color:#000f0c; | ||
- | |||
background-repeat: repeat-y; | background-repeat: repeat-y; | ||
background-position: left; | background-position: left; | ||
Line 116: | Line 116: | ||
position: absolute; | position: absolute; | ||
bottom:10px; | bottom:10px; | ||
- | left: - | + | left: -170px; |
display: block; | display: block; | ||
padding: 0px; | padding: 0px; | ||
Line 128: | Line 128: | ||
#t1{ | #t1{ | ||
- | |||
- | |||
height:57px; | height:57px; | ||
Line 145: | Line 143: | ||
color:#deffff; | color:#deffff; | ||
- | background-image: url(../ | + | background-image: url(https://lh5.googleusercontent.com/-8mulO9kNCEA/UGCQPSUfcFI/AAAAAAAADJE/d1TImVFLf5k/w180-h180-n-k/bg_02.png); |
background-repeat: repeat; | background-repeat: repeat; | ||
background-position: -1200px 0px; | background-position: -1200px 0px; | ||
Line 157: | Line 155: | ||
background-position: -1200px 0px\9; | background-position: -1200px 0px\9; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#t2{ | #t2{ | ||
z-index:20002; | z-index:20002; | ||
- | bottom:- | + | bottom:-30px; |
left:5px; | left:5px; | ||
Line 269: | Line 261: | ||
} | } | ||
- | .mlink { | + | a.mlink { |
+ | color: #809990; | ||
+ | |||
z-index:10004; | z-index:10004; | ||
- | |||
- | |||
display: block; | display: block; | ||
Line 285: | Line 277: | ||
text-align:right; | text-align:right; | ||
- | + | ||
+ | -webkit-transition:all 0.3s ease; | ||
+ | -moz-transition:all 0.3s ease; | ||
} | } | ||
- | .mlink:hover { | + | a.mlink:hover { |
z-index:99999; | z-index:99999; | ||
background-position: 0px 0px; | background-position: 0px 0px; | ||
Line 336: | Line 330: | ||
text-align: left; | text-align: left; | ||
font-size: 12px; | font-size: 12px; | ||
+ | color: #809990; | ||
} | } | ||
Line 341: | Line 336: | ||
background-color: #000000; | background-color: #000000; | ||
border-left: 2px solid #5e7f7f; | border-left: 2px solid #5e7f7f; | ||
- | |||
margin-left: 0px; | margin-left: 0px; | ||
padding-left: 7px; | padding-left: 7px; | ||
+ | color: #d5fff6; | ||
} | } | ||
Line 400: | Line 395: | ||
-moz-transition:all 0.3s ease; | -moz-transition:all 0.3s ease; | ||
- | width: | + | width: 10%; |
min-height: 0px; | min-height: 0px; | ||
Line 408: | Line 403: | ||
z-index: 99998; | z-index: 99998; | ||
- | font-size: | + | font-size:10.5px; |
} | } | ||
#index:hover{ | #index:hover{ | ||
width: 16%; | width: 16%; | ||
- | |||
Line 426: | Line 420: | ||
z-index:99999; | z-index:99999; | ||
display: block; | display: block; | ||
- | width: | + | width: 115%; |
padding-right: 5px; | padding-right: 5px; | ||
padding-left: 5px; | padding-left: 5px; | ||
Line 469: | Line 463: | ||
#container{ | #container{ | ||
- | width: | + | width:93%; |
height:100%; | height:100%; | ||
float: left; | float: left; | ||
Line 475: | Line 469: | ||
padding-right:0%; | padding-right:0%; | ||
- | + | margin-left:7%; | |
- | margin-left: | + | |
margin-right:-306px; | margin-right:-306px; | ||
Line 487: | Line 480: | ||
#bg1 { | #bg1 { | ||
- | width: | + | width:94%; |
min-height: 100%; | min-height: 100%; | ||
- | + | padding-left:6%; | |
- | padding-left: | + | |
- | background-image: url(../ | + | background-image: url(https://lh6.googleusercontent.com/-AHoSSKFlKg8/UGCQRLlUszI/AAAAAAAADJs/ErPn5zjRkKU/s120/bg_07.png); |
background-repeat: repeat-y; | background-repeat: repeat-y; | ||
- | background-position: | + | background-position: 10px 1000px; |
-webkit-transition:all 0.5s ease; | -webkit-transition:all 0.5s ease; | ||
Line 502: | Line 494: | ||
#bg1:hover{ | #bg1:hover{ | ||
- | background-position: | + | background-position: -25px 10px; |
} | } | ||
#bg1{ | #bg1{ | ||
- | background-position: | + | background-position: 20px 10px\9; |
} | } | ||
Line 538: | Line 530: | ||
left:0px; | left:0px; | ||
- | background-image: url(../ | + | background-image: url(https://lh3.googleusercontent.com/-0WvdLO0_kxk/UGCQQrqqUAI/AAAAAAAADJY/QWFqglU9M4g/s20/bg_06.png); |
background-position: -1px 0px; | background-position: -1px 0px; | ||
background-repeat: repeat-y; | background-repeat: repeat-y; | ||
border-right: 1px solid #f0f0f0; | border-right: 1px solid #f0f0f0; | ||
+ | word-spacing: 0.3em; | ||
+ | line-height: 180%; | ||
+ | font-size: 13.5px; | ||
color:#333333; | color:#333333; | ||
+ | font-family: sans-serif; | ||
-webkit-transition:all 0.6s ease; | -webkit-transition:all 0.6s ease; | ||
Line 558: | Line 554: | ||
} | } | ||
- | #contents | + | #contents h2{ |
display: block; | display: block; | ||
width:105%;; | width:105%;; | ||
- | margin-left:- | + | margin-left:-8%; |
- | padding-left: | + | padding-left:6%; |
margin-bottom:1.5em; | margin-bottom:1.5em; | ||
Line 578: | Line 574: | ||
} | } | ||
- | #contents | + | #contents h3{ |
display: block; | display: block; | ||
width:100%;; | width:100%;; | ||
Line 624: | Line 620: | ||
- | + | p.caption{ | |
+ | display:inline; | ||
margin: 0 auto; | margin: 0 auto; | ||
Line 635: | Line 632: | ||
padding-left:2px; | padding-left:2px; | ||
color: #accdcc; | color: #accdcc; | ||
+ | } | ||
+ | |||
+ | #NoKoGen-sponsor{ | ||
+ | background-color: #ffffff; | ||
+ | margin-top: 40px; | ||
+ | } | ||
+ | |||
+ | #groupparts{ | ||
+ | width:100%; | ||
+ | } | ||
+ | #groupparts:hover{ | ||
+ | z-index: 99999; | ||
+ | width:100%; | ||
} | } | ||
Line 640: | Line 650: | ||
display: block; | display: block; | ||
width:100%;; | width:100%;; | ||
- | height: | + | height:115px; |
margin: 0 auto; | margin: 0 auto; | ||
} | } |
Latest revision as of 11:08, 26 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;*/ margin: 0 auto 0 auto; }
body,html{ height: 100%; }
body{ height: 100%; min-width:864px; max-width: 1280px;
background-color:#000000;
background-image: url();
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: #809990; }
a:hover{ color: #809990;
}
a:visited{
}
span{
}
p{ display: inline; }
/*------------------------------------------ -navigation area
*/
- navi{
max-width: 240px; width:25%; height:100%; float: right; margin-right:16px; z-index:99900;
background-color:#000f0c; background-repeat: repeat-y; background-position: left; border-left: 1px solid #003300; }
- title{
width:400px; height:80px;
position: absolute; bottom:10px; left: -170px; display: block; padding: 0px; margin: 0px;
}
- title h1{
font-family: serif; }
- t1{
height:57px; padding:0px;
z-index:20005; top:-10px; left:40px;
position: absolute; display: block;
font-size:43px; font-weight:400; color:#deffff;
background-image: url(); background-repeat: repeat; background-position: -1200px 0px;
}
- t1{
height: 55px\9; top: -0px\9; font-size: 45px\9; background-position: -1200px 0px\9; }
- t2{
z-index:20002; bottom:-30px;
left:5px; position: absolute; display: block; padding-bottom: -10px;
font-size:77px;
color: #121212;
}
- t2{
bottom:-10px\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; }
a.mlink { color: #809990;
z-index:10004;
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;
-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; }
a.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; color: #809990; }
.submenu a:hover{ background-color: #000000; border-left: 2px solid #5e7f7f; margin-left: 0px; padding-left: 7px; color: #d5fff6; }
- 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: 10%; min-height: 0px;
position: absolute; bottom: 35px; left: 0px; z-index: 99998;
font-size:10.5px; }
- index:hover{
width: 16%;
border-top: 1px solid #e5fffa;
border-right: 1px solid #e5fffa;
background-color: #000f0c;
font-size:17px; }
- ind{
z-index:99999; display: block; width: 115%; 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:93%; height:100%; float: left; z-index:10000;
padding-right:0%; margin-left:7%;
margin-right:-306px;
padding-bottom:0px;
overflow-y:scroll;
}
- bg1 {
width:94%; min-height: 100%;
padding-left:6%;
background-image: url(); background-repeat: repeat-y; background-position: 10px 1000px;
-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; }
- bg1:hover{
background-position: -25px 10px; }
- bg1{
background-position: 20px 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(); background-position: -1px 0px; background-repeat: repeat-y; border-right: 1px solid #f0f0f0;
word-spacing: 0.3em; line-height: 180%; font-size: 13.5px; color:#333333; font-family: sans-serif;
-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 h2{
display: block; width:105%;; margin-left:-8%; padding-left:6%; 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 h3{
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;
}
p.caption{
display:inline;
margin: 0 auto;
font-size: 13px;
background-color: #000f0c; border: 1px solid #dddddd;
padding-right:2px; padding-left:2px; color: #accdcc; }
- NoKoGen-sponsor{
background-color: #ffffff; margin-top: 40px; }
- groupparts{
width:100%; }
- groupparts:hover{
z-index: 99999; width:100%; }
- period{
display: block; width:100%;; height:115px; margin: 0 auto; }