Team:UT-Tokyo/Template/Style0
From 2012.igem.org
(Difference between revisions)
m |
|||
(139 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | </ | + | </p> |
<!-- in bodycontent --> | <!-- in bodycontent --> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | /* @import "http://igem-ut.net/2012/scr/forzero.css"; */ | ||
+ | body{ | ||
+ | font-family: font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;} | ||
- | #globalWrapper{ | + | body #globalWrapper{ |
- | position: | + | position:relative; |
top:0; | top:0; | ||
left:0; | left:0; | ||
width:1260px; | width:1260px; | ||
- | } | + | padding:0;} |
+ | body #top-section{ | ||
+ | position:absolute; | ||
+ | width:1260px;} | ||
+ | body #footer-box{ | ||
+ | width:1260px;} | ||
#p-logo{ | #p-logo{ | ||
+ | display:none;} | ||
+ | #catlinks{ | ||
display:none;} | display:none;} | ||
#globalWrapper #menubar{ | #globalWrapper #menubar{ | ||
- | display:block;} | + | display:block; |
- | # | + | font-size:100%;} |
+ | #top-section > .left-menu > ul li:last-child{ | ||
display:none;} | display:none;} | ||
*{margin:0; padding:0;} | *{margin:0; padding:0;} | ||
- | h1, h2{ | + | #globalWrapper h1, #globalWrapper h2{ |
font-size:24px; | font-size:24px; | ||
font-weight:normal; | font-weight:normal; | ||
border-style:none; | border-style:none; | ||
color:#006d2f;} | color:#006d2f;} | ||
+ | #globalWrapper #top h2{ | ||
+ | font-size:24px;} | ||
ul, dl, dt, dd, p, div, li, form{margin:0; padding:0;} | ul, dl, dt, dd, p, div, li, form{margin:0; padding:0;} | ||
+ | |||
#content .firstHeading{ | #content .firstHeading{ | ||
Line 33: | Line 47: | ||
background:#fff;} | background:#fff;} | ||
#content{ | #content{ | ||
- | position: | + | position:relative; |
top:0; | top:0; | ||
left:0; | left:0; | ||
- | font | + | font-size:14px;} |
body, #content{ | body, #content{ | ||
- | |||
color:#353535; | color:#353535; | ||
line-height:1.6em;} | line-height:1.6em;} | ||
Line 46: | Line 59: | ||
margin-left:78px; | margin-left:78px; | ||
position:relative;} | position:relative;} | ||
- | #header a:link, #side a:link,#header a:visited, #side a:visited{ | + | |
+ | /* links */ | ||
+ | #header a:link, #side a:link, #header a:visited, #side a:visited, #f_navi a:link, #f_navi a:visited{ | ||
color:#000;} | color:#000;} | ||
- | #menu1 a:hover, # | + | #menu1 a:hover, #s_menu dt a:link, #s_menu dt a:visited, #f_navi a:hover{ |
color:#006d2f; | color:#006d2f; | ||
text-decoration:none;} | text-decoration:none;} | ||
+ | #s_menu dt a:hover, #top a:hover{ | ||
+ | color:#0B50B8;} | ||
+ | |||
#side{ | #side{ | ||
position:absolute; | position:absolute; | ||
- | + | /* top:447px;*/ | |
+ | top:0px; | ||
left:866px; | left:866px; | ||
width:336px;} | width:336px;} | ||
+ | /* header */ | ||
#header{ | #header{ | ||
padding-top:116px;} | padding-top:116px;} | ||
#header .title{ | #header .title{ | ||
height:80px; | height:80px; | ||
- | margin-bottom:8px;} | + | margin-bottom:8px; |
+ | padding-left:29px;} | ||
#header .topsearch{ | #header .topsearch{ | ||
height:20px; | height:20px; | ||
Line 76: | Line 97: | ||
background:rgb(204,204,204); | background:rgb(204,204,204); | ||
width:69px;} | width:69px;} | ||
- | #menu1{ | + | |
+ | #menu1, x:-moz-any-link{ | ||
+ | font-size:13px; | ||
+ | font-size:13.3px;} | ||
+ | |||
+ | .menu #menu1{ | ||
font-size:16px; | font-size:16px; | ||
border-style:solid; | border-style:solid; | ||
Line 84: | Line 110: | ||
position:relative; | position:relative; | ||
height:43px;} | height:43px;} | ||
+ | .menu #menu1 li{ | ||
+ | font-size:16px;} | ||
#header .dummy{ | #header .dummy{ | ||
margin-top:8px; | margin-top:8px; | ||
Line 93: | Line 121: | ||
display:inline;} | display:inline;} | ||
#menu1 li{ | #menu1 li{ | ||
- | padding-right: | + | padding-right:11px;} |
#menu1 > li{ | #menu1 > li{ | ||
- | line-height: | + | line-height:44px; |
height:43px;} | height:43px;} | ||
+ | #menu1 > li, x:-moz-any-link{ | ||
+ | line-height:39px;} | ||
#menu1 > li:hover{ | #menu1 > li:hover{ | ||
- | background: url("https://static.igem.org/mediawiki/2012/7/72/Menu_fukidashi01.png") no-repeat scroll 40% | + | background: url("https://static.igem.org/mediawiki/2012/7/72/Menu_fukidashi01.png") no-repeat scroll 40% 15px transparent;} |
- | #menu1 li > ul{ | + | |
+ | #menu1 li > ul, #menu1 li > .menu2{ | ||
display:none;} | display:none;} | ||
#menu1 li:hover{ | #menu1 li:hover{ | ||
color:#006d2f; | color:#006d2f; | ||
- | padding-bottom:30px;} | + | padding-bottom:30px; |
- | #menu1 li:hover ul{ | + | z-index:3;} |
+ | #menu1 li:hover > .menu2{ | ||
+ | display:block; | ||
+ | position:absolute; | ||
+ | left:0; | ||
+ | top:40px;//53px | ||
+ | border-style:solid; | ||
+ | border-width:0 0 1px 0; | ||
+ | border-color:rgb(153,153,153); | ||
+ | padding-top:13px; | ||
+ | width:720px; | ||
+ | color:#353535; | ||
+ | background:url("https://static.igem.org/mediawiki/2012/d/d3/UT-Tokyo_blank01.png") repeat scroll 0 0 transparent; | ||
+ | line-height:40px; | ||
+ | z-index:3;} | ||
+ | #menu1 li:hover > .menu2 ul{ | ||
+ | height:43px; | ||
+ | background:#fff; | ||
+ | z-index:4; | ||
+ | line-height:40px;} | ||
+ | #menu1 li:hover > ul{ | ||
display:inline; | display:inline; | ||
position:absolute; | position:absolute; | ||
left:0; | left:0; | ||
- | top:53px; | + | top:53px;//53px |
border-style:solid; | border-style:solid; | ||
border-width:0 0 1px 0; | border-width:0 0 1px 0; | ||
Line 115: | Line 166: | ||
width:720px; | width:720px; | ||
color:#353535; | color:#353535; | ||
- | line-height:40px;} | + | background:#fff; |
- | # | + | line-height:40px; |
+ | z-index:2;} | ||
+ | #menu1 > li ul > li{ | ||
line-height:43px;} | line-height:43px;} | ||
- | #menu1 li | + | #menu1 li ul> li:first-child { |
margin-left:30px;} | margin-left:30px;} | ||
+ | #menu1 li#m_note > .menu2, #menu1 li#m_hupr > .menu2{ | ||
+ | text-align:right; | ||
+ | margin-left:-30px;} | ||
+ | #menu1 li#m_part > .menu2{ | ||
+ | text-align:center; | ||
+ | margin-left:30px;} | ||
+ | |||
+ | |||
+ | /* top */ | ||
#top{ | #top{ | ||
- | margin-top:45px;} | + | margin-top:45px; |
+ | font-size:16px;} | ||
+ | #top a{ | ||
+ | color:#008438;} | ||
+ | #top dd + dt{ | ||
+ | margin-top:1em;} | ||
+ | #top li{ | ||
+ | margin-left:1em;} | ||
+ | |||
+ | #top img{ | ||
+ | border-width:0px; | ||
+ | /* border-style:solid; | ||
+ | border-width:1px; | ||
+ | border-color:#008438; | ||
+ | margin-right:30px;*/} | ||
+ | |||
+ | #top p img{ | ||
+ | margin-right:30px;} | ||
+ | |||
+ | #top h2+p img:first-child{ | ||
+ | border-style:solid; | ||
+ | border-width:1px; | ||
+ | border-color:#008438; | ||
+ | margin-right:30px;} | ||
+ | |||
+ | #top h2{ | ||
+ | margin-bottom:24px; | ||
+ | margin-top:34px; | ||
+ | line-height:1.2em;} | ||
+ | #top + h2{ | ||
+ | margin-top:0px;} | ||
+ | |||
+ | #top h3{ | ||
+ | font-size:20px; | ||
+ | font-weight:normal; | ||
+ | margin-bottom:1em; | ||
+ | color:#248; | ||
+ | line-height:1.2em; | ||
+ | border-left:5px solid #46c; | ||
+ | padding-left:5px; | ||
+ | margin-left:1px; | ||
+ | } | ||
+ | #top p{ | ||
+ | margin-bottom:12px;} | ||
.pageabst{ | .pageabst{ | ||
+ | position:relative; | ||
height:340px; | height:340px; | ||
width:714px; | width:714px; | ||
Line 130: | Line 236: | ||
border-color:#008438; | border-color:#008438; | ||
margin-bottom:34px;} | margin-bottom:34px;} | ||
+ | .pageabst h1, .pageabst p{ | ||
+ | position:relative; | ||
+ | z-index:2;} | ||
.pageabst h1{ | .pageabst h1{ | ||
margin:116px 0px 34px 30px;} | margin:116px 0px 34px 30px;} | ||
Line 135: | Line 244: | ||
margin-left:30px; | margin-left:30px; | ||
margin-right:342px;} | margin-right:342px;} | ||
+ | .pageabst #abstimg{ | ||
+ | position:absolute; | ||
+ | z-index:1; | ||
+ | border-style:none; | ||
+ | top:0; | ||
+ | right:0;} | ||
- | # | + | /* footer #f_navi */ |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
#f_navi{ | #f_navi{ | ||
clear:both; | clear:both; | ||
position:relative; | position:relative; | ||
- | padding-top:116px; | + | margin-left:78px; |
- | + | padding-top:116px; | |
+ | width:720px; //720px} | ||
#f_navi p{ | #f_navi p{ | ||
- | + | display:inline; | |
- | position:absolute;} | + | position:absolute; |
- | #f_navi . | + | font-size:16px;} |
+ | #f_navi .f_prev{ | ||
left:0; bottom:0;} | left:0; bottom:0;} | ||
#f_navi .f_next{ | #f_navi .f_next{ | ||
right:0; bottom:0;} | right:0; bottom:0;} | ||
+ | /* side */ | ||
+ | #side a{ | ||
+ | color:#0B50B8;} | ||
#side .s_logo { | #side .s_logo { | ||
- | + | /* background: url("https://static.igem.org/mediawiki/2012/1/15/UT-Tokyo_logo02.png") no-repeat scroll 0 0 transparent; */ | |
- | margin-bottom: | + | /* height: 451px; |
- | margin- | + | margin-bottom: -39px; |
+ | margin-left: -66px;*/ | ||
+ | height: 451px; | ||
+ | margin-bottom: -166px; | ||
+ | margin-left: -100px; | ||
+ | margin-top: 30px; | ||
+ | |||
} | } | ||
- | #side .s_twit{ | + | |
- | background: url("https://static.igem.org/mediawiki/2012/e/e5/Twit_fukidashi01.png") no-repeat scroll | + | #side .s_twit { |
- | + | background: url("https://static.igem.org/mediawiki/2012/e/e5/Twit_fukidashi01.png") no-repeat scroll 0px 0px transparent; | |
margin-left: -10px; | margin-left: -10px; | ||
- | padding-left: | + | padding-left: 18px; |
- | padding-top: | + | padding-top: 64px; |
+ | padding-bottom: 100px; | ||
+ | margin-bottom:-30px; | ||
+ | } | ||
#side .twtr-hd, #side .twtr-ft{ | #side .twtr-hd, #side .twtr-ft{ | ||
display:none;} | display:none;} | ||
- | + | #side .twtr-btn{ | |
+ | margin-left:20px;} | ||
+ | #s_menu{ | ||
+ | margin-top: 55px;} | ||
#s_menu ul{ | #s_menu ul{ | ||
list-stype-type;none; | list-stype-type;none; | ||
Line 184: | Line 303: | ||
#s_menu dl{ | #s_menu dl{ | ||
border-top:1px solid #008438; | border-top:1px solid #008438; | ||
+ | line-height:1.1em; | ||
} | } | ||
#s_menu dt{ | #s_menu dt{ | ||
color:#006d2f; | color:#006d2f; | ||
padding:14px 0px 10px 16px; | padding:14px 0px 10px 16px; | ||
- | + | // font-size:24px; | |
- | font-weight:normal;} | + | font-size:22px; |
+ | font-weight:normal; | ||
+ | line-height:1.2em;} | ||
#s_menu dd{ | #s_menu dd{ | ||
padding:0px 14px 10px 16px; | padding:0px 14px 10px 16px; | ||
border-bottom:1px solid #008438;} | border-bottom:1px solid #008438;} | ||
+ | #s_menu dt a:hover{ | ||
+ | color:#0B50B8;} | ||
+ | |||
+ | |||
+ | /* e */ | ||
+ | |||
+ | |||
+ | dl.TeamMembersList{ | ||
+ | margin-left:24px; | ||
+ | } | ||
+ | .TeamMembersList > dt{ | ||
+ | height:60px; | ||
+ | position:relative; | ||
+ | width:60px; | ||
+ | } | ||
+ | .TeamMembersList > dd{ | ||
+ | position:relative; | ||
+ | left:70px; | ||
+ | top:-60px; | ||
+ | margin-bottom:-50px; | ||
+ | } | ||
+ | |||
+ | .person{ | ||
+ | position: relative; | ||
+ | margin-bottom:10px;} | ||
+ | .person .imgbox{ | ||
+ | width: 90px; | ||
+ | height: 90px; | ||
+ | } | ||
+ | .person .m-content{ | ||
+ | position: absolute; | ||
+ | left: 100px; | ||
+ | top: 0; | ||
+ | } | ||
+ | .person .charge{ | ||
+ | margin-left:2em; | ||
+ | color:#999; | ||
+ | font-size:80%;} | ||
+ | .Achievement ul{ | ||
+ | list-style-type: circle;} | ||
+ | |||
+ | |||
+ | /* UA */ | ||
+ | @media screen and (max-width: 1100px) { | ||
+ | body #main{ | ||
+ | margin-left:38px} | ||
+ | #side{ | ||
+ | left:806px} | ||
+ | } | ||
+ | @media screen and (max-width: 760px) { | ||
+ | body #globalWrapper{ | ||
+ | width:120%;} | ||
+ | body #top-section, body #content{ | ||
+ | width:83%; | ||
+ | margin-left:0px;} | ||
+ | #container, #bodyContent, #main{ | ||
+ | width:100%;} | ||
+ | #top { width: 70%; } | ||
+ | #f_navi{width:80%;} | ||
+ | #side {left:100%; background:#fff;} | ||
+ | } | ||
+ | @media screen and (max-height: 560px) { | ||
+ | #header{ | ||
+ | padding-top:36px;} | ||
+ | #side .s-logo{ | ||
+ | margin-top: -20px;} | ||
+ | } | ||
</style> | </style> | ||
<p> | <p> | ||
</html> | </html> |
Latest revision as of 03:14, 27 September 2012