Team:Tokyo-NoKoGen/wiki.css

From 2012.igem.org

(Difference between revisions)
 
(81 intermediate revisions not shown)
Line 16: Line 16:
html{
html{
/*width:1280px;*/
/*width:1280px;*/
 +
margin: 0 auto 0 auto;
}
}
Line 22: Line 23:
}
}
-
nokogen{
+
body{
height: 100%;
height: 100%;
min-width:864px;
min-width:864px;
Line 29: Line 30:
background-color:#000000;
background-color:#000000;
-
background-image: url(../img/bg_04.png);
+
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: -10px;  
+
background-position: 10px;  
Line 70: Line 71:
a{
a{
-
color: #d5fff6;
+
color: #809990;
}
}
a:hover{
a:hover{
-
color: #d5fff6;
+
color: #809990;
Line 101: Line 102:
float: right;
float: right;
margin-right:16px;
margin-right:16px;
-
z-index:99999;
+
z-index:99900;
background-color:#000f0c;
background-color:#000f0c;
-
background-image: url(../img/bg_01.png);
 
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: -180px;
+
left: -170px;
display: block;
display: block;
padding: 0px;
padding: 0px;
Line 128: Line 128:
#t1{
#t1{
-
-webkit-transition:all 0.5s ease;
 
-
-moz-transition:all 0.5s ease;
 
height:57px;
height:57px;
Line 135: Line 133:
z-index:20005;
z-index:20005;
-
top:-40px;
+
top:-10px;
left:40px;
left:40px;
Line 145: Line 143:
color:#deffff;
color:#deffff;
-
background-image: url(../img/bg_08.png);
+
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;
}
}
-
 
-
#t1:hover{
 
-
background-position: -0px 0px;
 
-
color: #000000;
 
-
}
 
-
 
#t2{
#t2{
z-index:20002;
z-index:20002;
-
bottom:-60px;
+
bottom:-30px;
left:5px;
left:5px;
Line 179: Line 171:
#t2{
#t2{
-
bottom:-60px\9;
+
bottom:-10px\9;
font-size:77px\9;
font-size:77px\9;
}
}
Line 269: Line 261:
}
}
-
.mlink {
+
a.mlink {
 +
color: #809990;
 +
 
z-index:10004;
z-index:10004;
-
-webkit-transition:all 0.3s ease;
 
-
-moz-transition:all 0.3s ease;
 
display: block;
display: block;
Line 285: Line 277:
text-align:right;  
text-align:right;  
-
color: #809990;
+
 
 +
-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: 8%;
+
width: 10%;
min-height: 0px;
min-height: 0px;
Line 408: Line 403:
z-index: 99998;
z-index: 99998;
-
font-size:11px;
+
font-size:10.5px;
}
}
#index:hover{
#index:hover{
width: 16%;
width: 16%;
-
min-height: 128px;
 
Line 426: Line 420:
z-index:99999;
z-index:99999;
display: block;
display: block;
-
width: 125%;
+
width: 115%;
padding-right: 5px;
padding-right: 5px;
padding-left: 5px;
padding-left: 5px;
Line 469: Line 463:
#container{
#container{
-
width:89%;
+
width:93%;
height:100%;
height:100%;
float: left;
float: left;
Line 475: Line 469:
padding-right:0%;
padding-right:0%;
-
padding-left:6%;
+
margin-left:7%;
-
margin-left:5%;
+
margin-right:-306px;
margin-right:-306px;
Line 487: Line 480:
#bg1 {
#bg1 {
-
width:100%;
+
width:94%;
min-height: 100%;
min-height: 100%;
-
margin-left: -16%;
+
padding-left:6%;
-
padding-left: 16%;
+
-
background-image: url(../img/bg_07.png);
+
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: 80px 1000px;
+
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: 60px 10px;
+
background-position: -25px 10px;
}
}
#bg1{
#bg1{
-
background-position: 60px 10px\9;
+
background-position: 20px 10px\9;
}
}
Line 538: Line 530:
left:0px;
left:0px;
-
background-image: url(../img/bg_06.png);
+
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 h3{
+
#contents h2{
display: block;
display: block;
width:105%;;
width:105%;;
-
margin-left:-49px;
+
margin-left:-8%;
-
padding-left:43px;
+
padding-left:6%;
margin-bottom:1.5em;
margin-bottom:1.5em;
Line 578: Line 574:
}
}
-
#contents h4{
+
#contents h3{
display: block;
display: block;
width:100%;;
width:100%;;
Line 624: Line 620:
-
.imbox p{
+
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:155px;
+
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(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: #809990; }

a:hover{ color: #809990;


}

a:visited{

}

span{

}

p{ display: inline; }

/*------------------------------------------ -navigation area

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

  1. title{

width:400px; height:80px;

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

}

  1. title h1{

font-family: serif; }

  1. 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(bg_02.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. t2{

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

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


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

  1. t2{

bottom:-10px\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; }

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

  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: 10%; min-height: 0px;

position: absolute; bottom: 35px; left: 0px; z-index: 99998;

font-size:10.5px; }

  1. index:hover{

width: 16%;


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

font-size:17px; }

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

  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:93%; height:100%; float: left; z-index:10000;

padding-right:0%; margin-left:7%;

margin-right:-306px;

padding-bottom:0px;

overflow-y:scroll;

}

  1. bg1 {

width:94%; min-height: 100%;

padding-left:6%;

background-image: url(bg_07.png); background-repeat: repeat-y; background-position: 10px 1000px;

-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; }

  1. bg1:hover{

background-position: -25px 10px; }

  1. bg1{

background-position: 20px 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(bg_06.png); 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; }

  1. contents:hover{

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

  1. contents{

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

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

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

  1. NoKoGen-sponsor{

background-color: #ffffff; margin-top: 40px; }

  1. groupparts{

width:100%; }

  1. groupparts:hover{

z-index: 99999; width:100%; }

  1. period{

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

Retrieved from "http://2012.igem.org/Team:Tokyo-NoKoGen/wiki.css"