Template:CSS/UT-Tokyo/CTCD
From 2014.igem.org
Pineappler (Talk | contribs) |
Pineappler (Talk | contribs) |
||
Line 1: | Line 1: | ||
- | |||
<head> | <head> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2014.igem.org/Team:UT-Tokyo/jMenu.jquery.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | // simple jMenu plugin called | ||
+ | $("#jMenu").jMenu(); | ||
+ | // more complex jMenu plugin called | ||
+ | $("#jMenu").jMenu({ | ||
+ | ulWidth : 'auto', | ||
+ | effects : { | ||
+ | effectSpeedOpen : 300, | ||
+ | effectTypeClose : 'slide' | ||
+ | }, | ||
+ | animatedText : false | ||
+ | }); | ||
+ | }); | ||
+ | $(document).ready(function(){ | ||
+ | // simple jMenu plugin called | ||
+ | $("#jMenu2").jMenu(); | ||
+ | // more complex jMenu plugin called | ||
+ | $("#jMenu2").jMenu({ | ||
+ | ulWidth : 'auto', | ||
+ | effects : { | ||
+ | effectSpeedOpen : 300, | ||
+ | effectTypeClose : 'slide' | ||
+ | }, | ||
+ | animatedText : false | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | function setMouseOver(){ | ||
+ | var node = document.getElementById("jMenu"); | ||
+ | for(var i = 0;i<node.childNodes.length;i++){ | ||
+ | if(node.childNodes[i].nodeType == 1){ | ||
+ | node.childNodes[i].onmouseover = function(){ | ||
+ | img = this.getElementsByTagName('img'); | ||
+ | if(img[0]){ | ||
+ | var tmp = img[0].src; | ||
+ | img[0].src = img[0].alt; | ||
+ | img[0].alt = tmp; | ||
+ | } | ||
+ | } | ||
+ | node.childNodes[i].onmouseout = function(){ | ||
+ | img = this.getElementsByTagName('img'); | ||
+ | if(img[0]){ | ||
+ | var tmp = img[0].src; | ||
+ | img[0].src = img[0].alt; | ||
+ | img[0].alt = tmp; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | var node = document.getElementById("jMenu2"); | ||
+ | for(var i = 0;i<node.childNodes.length;i++){ | ||
+ | if(node.childNodes[i].nodeType == 1){ | ||
+ | node.childNodes[i].onmouseover = function(){ | ||
+ | img = this.getElementsByTagName('img'); | ||
+ | if(img[0]){ | ||
+ | var tmp = img[0].src; | ||
+ | img[0].src = img[0].alt; | ||
+ | img[0].alt = tmp; | ||
+ | } | ||
+ | } | ||
+ | node.childNodes[i].onmouseout = function(){ | ||
+ | img = this.getElementsByTagName('img'); | ||
+ | if(img[0]){ | ||
+ | var tmp = img[0].src; | ||
+ | img[0].src = img[0].alt; | ||
+ | img[0].alt = tmp; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | /* jMenu */ | ||
+ | .jMenu{ | ||
+ | display:table; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | list-style:none; | ||
+ | } | ||
+ | .jMenu li ul{ | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | list-style:none; | ||
+ | z-index:0; | ||
+ | } | ||
+ | .jMenu li ul li{ | ||
+ | z-index:9999; | ||
+ | background-color:#000; | ||
+ | display:block; | ||
+ | padding:0; | ||
+ | border:0; | ||
+ | list-style:none; | ||
+ | position:relative; | ||
+ | width:150px; | ||
+ | height:30px; | ||
+ | font-size:x-large; | ||
+ | } | ||
+ | .jMenu li ul li a{ | ||
+ | font-size:x-large; | ||
+ | font-family:'Times New Roman','Merriweather', serif;; | ||
+ | color:#FFF; | ||
+ | text-transform:none; | ||
+ | display:block; | ||
+ | height:29px; | ||
+ | border-top:1px solid transparent; | ||
+ | border-bottom:1px solid transparent; | ||
+ | padding-left:30px; | ||
+ | } | ||
+ | .jMenu li ul li a.isParent{ | ||
+ | background-color:#3a3a3a | ||
+ | } | ||
+ | .jMenu li ul li a:hover{ | ||
+ | background-color:#ff92ff; | ||
+ | } | ||
+ | |||
+ | |||
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{ | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{ | ||
Line 287: | Line 409: | ||
#bodyContent{ | #bodyContent{ | ||
width:100%; | width:100%; | ||
+ | height:1000px; | ||
} | } | ||
#contentSub{ | #contentSub{ | ||
Line 407: | Line 530: | ||
list-style-image:none; | list-style-image:none; | ||
position:absolute; | position:absolute; | ||
- | top: | + | top:700px; |
left:50%; | left:50%; | ||
- | margin-left:- | + | margin-left:-375px; |
} | } | ||
ul.topList li, ul.topList2 li{ | ul.topList li, ul.topList2 li{ | ||
Line 416: | Line 539: | ||
} | } | ||
img.topListImg{ | img.topListImg{ | ||
- | width: | + | width:150px; |
- | + | ||
} | } | ||
</style> | </style> |
Revision as of 15:54, 5 October 2014
<head> <link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js?action=raw&ctype=text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script> <script type="text/javascript" src="https://2014.igem.org/Team:UT-Tokyo/jMenu.jquery.min.js?action=raw&ctype=text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ // simple jMenu plugin called $("#jMenu").jMenu(); // more complex jMenu plugin called $("#jMenu").jMenu({ ulWidth : 'auto', effects : { effectSpeedOpen : 300, effectTypeClose : 'slide' }, animatedText : false }); }); $(document).ready(function(){ // simple jMenu plugin called $("#jMenu2").jMenu(); // more complex jMenu plugin called $("#jMenu2").jMenu({ ulWidth : 'auto', effects : { effectSpeedOpen : 300, effectTypeClose : 'slide' }, animatedText : false }); });
function setMouseOver(){ var node = document.getElementById("jMenu"); for(var i = 0;i<node.childNodes.length;i++){ if(node.childNodes[i].nodeType == 1){ node.childNodes[i].onmouseover = function(){ img = this.getElementsByTagName('img'); if(img[0]){ var tmp = img[0].src; img[0].src = img[0].alt; img[0].alt = tmp; } } node.childNodes[i].onmouseout = function(){ img = this.getElementsByTagName('img'); if(img[0]){ var tmp = img[0].src; img[0].src = img[0].alt; img[0].alt = tmp; } } } } var node = document.getElementById("jMenu2"); for(var i = 0;i<node.childNodes.length;i++){ if(node.childNodes[i].nodeType == 1){ node.childNodes[i].onmouseover = function(){ img = this.getElementsByTagName('img'); if(img[0]){ var tmp = img[0].src; img[0].src = img[0].alt; img[0].alt = tmp; } } node.childNodes[i].onmouseout = function(){ img = this.getElementsByTagName('img'); if(img[0]){ var tmp = img[0].src; img[0].src = img[0].alt; img[0].alt = tmp; } } } } } </script> <style type="text/css"> /* jMenu */ .jMenu{ display:table; margin:0; padding:0; list-style:none; } .jMenu li ul{ display:none; position:absolute; padding:0; margin:0; list-style:none; z-index:0; } .jMenu li ul li{ z-index:9999; background-color:#000; display:block; padding:0; border:0; list-style:none; position:relative; width:150px; height:30px; font-size:x-large; } .jMenu li ul li a{ font-size:x-large; font-family:'Times New Roman','Merriweather', serif;; color:#FFF; text-transform:none; display:block; height:29px; border-top:1px solid transparent; border-bottom:1px solid transparent; padding-left:30px; } .jMenu li ul li a.isParent{ background-color:#3a3a3a } .jMenu li ul li a:hover{ background-color:#ff92ff; }
- contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{
display: none; }
/*-- hides default wiki settings --*/
.firstHeading { width: 975px; margin: 0px auto; padding-top: 100px; margin-bottom: 20px; font-family: Georgia, Times, "Times New Roman", serif; color:#FFF; }
h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif; color:#FFF; }
table{ background-color:#D20505;}
- top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
background-color: #383838; border: 0 none; height: 14px; z-index: 100; position: fixed; width: 975px; left: 50%; margin-left: -487px; top:0; }
- top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
background-color: #383838; height: 14px; display: block; z-index: 10; position: fixed; width: 100%; top: 0; }
- menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
color: #727272; text-decoration: none; background-color: transparent; }
- globalWrapper, #content { /*-- changes default wiki settings --*/
width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px auto; padding: 0px; position:relative;
}
html, .wrapper { /*-- changes default wiki settings --*/ width: 100%; height: 100%; /* background-color: #FFF; */ } body { background-image: url(); width: 100%; margin: 0 auto; color:white; }
- contentcontainer { /*-- creates container for all content on page --*/
font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #414141; width: 960px; margin-left: auto; margin-right: auto; background-color: #transparent; margin-top: 0px; }
.sidemenu, .sidemenu li { list-style-type: none; list-style-image: none; font-family: verdana; text-decoration: none; color:#000; font-size: 14px; }
.sidemenu li {display: block;}
.sidemenu a { text-decoration:none; color: #000; display: block; width: 180px; height: 100%; padding: 3px 5px; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; }
.sidemenu a.greyout { color: #909090; }
.sidemenu a:hover { color:#666; background-color: #d9f5aa; }
.sub-sidemenu {font-size: 10px; margin-bottom: 20px; color: #666; display: none;} .sub-sidemenu a {color: #666;}
div.underconst { padding:10px; border-radius:5px; background-color:pink; text-align:center; }
a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}
.contentpara {margin-bottom: 30px;}
span.email{font-family: monospace; font-weight: normal;}
fieldset {border: 1px solid #337f53;}
.greyout {color: #A0A0A0;} .highlightme {background-color: #FFFF00;}
- alertContainer {border: 2px solid red; margin-bottom: 10px; width: 936px;}
- annContainer {margin-left: 8px;}
- newsContainer {border: 1px solid #ccc;}
.newsTitle { display: block; color: #414141; font-size: 25px;
font-family: Georgia, Times, "Times New Roman", serif;
padding: 10px 15px 5px 10px; border-bottom: 1px solid #ccc; margin-bottom: 0px; }
.newsItem { border-bottom: 1px solid #ccc; display: block; padding: 5px 15px 0px 10px; margin-bottom: 0px; }
.newsItem h3 { width: auto; display: inline; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px; }
.newsItem img { float: right; clear: right; width: 80px; padding-left: 15px; display: inline-block; }
.newsItem .newsDate { font-style: italic; font-size: 14px; display: inline-block; color: #999; float: right; padding: 0px 0px 10px 15px; }
.newsItem p, .newsItem ul, .newsItem li { padding: 0px; margin-left: 20px; font-size: 12px; line-height: 1.2; }
.newsItem p {margin-top: 10px;}
.annItem { border: 2px solid #49b677; display: block; padding: 0px 15px 10px 10px; margin-bottom: 18px; position: relative; height: 160px; vertical-align: middle; }
.annItem .annCentered { display: table-cell; vertical-align: middle; height: 160px; }
.annCentered h3 { padding: 0px; display: block; margin-left: auto; margin-right: auto; text-align: center; }
.annItem ul, .annItem li {padding: 0px; margin: 0px;} .annItem li {list-style: none; margin: 5px}
- index_header{
position: relative; width:500px; margin: 0 auto; }
- index_header img{
width: 500px; }
- team{
width: 400px; margin: 0 auto; }
- team img{
width: 400px; }
- index_navi{
position: relative; width:600px; margin: 0 auto; }
- index_navi ul.index_menu{
list-style-type:none; list-style:none; width:600px; height:140px; }
- index_navi ul.index_menu li{
float: left; width: 120px; margin: 0; }
- index_navi ul.index_menu li img{
width: 110px; margin: 0; } .contents{ align:left; position: relative; top:10px; width:600px; margin: 0 auto; }
.contents p{ text-align:left; width: 600px; color:#FFF; } .contents h2{ text-align:left; padding-left:0px; color:#FFF; } /* ここからindex用 */ .left-side{ width:50%; height:750px; background-color:#FFF; float:left; position:absolute; top:0; }
- bodyContent{
width:100%; height:1000px; }
- contentSub{
width:100%; } .top{ width:100%; height:750px; background-color:#000; }
- top-img{
display:block; position:absolute; top:50px; left:50%; margin-left:-258px; }
- title-img{
display:block; position:absolute; top:280px; left:50%; margin-left:-260px; width:520px; }
- left-img{
width:300px; position:absolute; top:350px; right:50%; padding-right:100px; }
- right-img{
width:300px; position:absolute; top:350px; left:50%; padding-left:100px; }
- left-bottom{
width:50%; height:100px; position:absolute; top:650px; float:left; background-image:url(""); background-repeat:repeat no-repeat; }
- right-bottom{
width:50%; height:100px; position:absolute; top:650px; margin-left:50%; background-image:url(""); background-repeat:repeat no-repeat; }
- index-body{
width:100%; background-color:#9FA0A0; } .content-box{ width:1000px; background-color:#FFF; margin-left:auto; margin-right:auto; position:relative; top:50px; border-radius:10px; margin-bottom:30px; min-height:150px; } .content-box h2, p{ color:#000; margin-left:30px; width:950px; } .content-box h2{ font-size:x-large; } .content-box p{ font-size: medium; font-family: Georgia; color: #3F3F3F; } img.circle{ visibility:hidden; width:150px; position:absolute; } .content-box #box-left{ width:600px; float:left; } .content-box #box-right{ width:400px; float:right; }
- box-right h2, #box-left h2{
width:300px; } img.sns{ width:150px; padding-left:2px; padding-bottom:10px; } img{ border:0; } ul.topList{ list-style-type:none; list-style-image:none; position:absolute; top:450px; left:50%; margin-left:-375px; } ul.topList2{ list-style-type:none; list-style-image:none; position:absolute; top:700px; left:50%; margin-left:-375px; } ul.topList li, ul.topList2 li{ float:left; width:150px; } img.topListImg{ width:150px; } </style>
</head>
</html>