Team:UNAM-Genomics Mexico/Templates/Modeling
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<!-- | <!-- | ||
- | @VERSION | + | @VERSION 3.0 |
- | @NAME | + | @NAME General Template header 2 |
--> | --> | ||
<html> | <html> | ||
Line 21: | Line 21: | ||
</script> | </script> | ||
+ | |||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> | ||
+ | |||
+ | |||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | /*Horizontal Slider*/ | ||
+ | .top-slider-main{width:860px; height:600px; overflow:hidden; position:relative; border:0px solid #000; background: #ff8888; | ||
+ | -webkit-box-shadow: 5px 5px 8px #818181; | ||
+ | -moz-box-shadow: 5px 5px 8px #818181; | ||
+ | -moz-border-radius-topleft: 25px; | ||
+ | -moz-border-radius-bottomright: 25px; | ||
+ | -webkit-border-top-left-radius: 25px; | ||
+ | -webkit-border-bottom-right-radius: 25px; | ||
+ | } | ||
+ | .top-slider-main div{width:610px; height:600px; position:absolute; background-color:#FFF; } | ||
+ | .top-slider-main .slider-box1{z-index:95;} | ||
+ | .top-slider-main .slider-box2{margin-left:610px; z-index:96;} | ||
+ | .top-slider-main .slider-box3{margin-left:660px; z-index:97;} | ||
+ | .top-slider-main .slider-box4{margin-left:710px; z-index:98;} | ||
+ | .top-slider-main .slider-box5{margin-left:760px; z-index:99;} | ||
+ | .top-slider-main .slider-box6{margin-left:810px; z-index:100;} | ||
+ | |||
+ | .top-slider-main div .left{position:relative; width:50px; height:100%; float:left; cursor:pointer; color:#FFF;} | ||
+ | .top-slider-main div .content{ | ||
+ | position:relative; | ||
+ | width:350px; | ||
+ | color:#000; | ||
+ | float:left; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size:1em; | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | .top-slider-main .slider-box1 .left{ | ||
+ | background-color:#FF3366; | ||
+ | } | ||
+ | .top-slider-main .slider-box2 .left{ | ||
+ | background-color:#FFCC33; | ||
+ | } | ||
+ | .top-slider-main .slider-box3 .left{ | ||
+ | background-color:#39C; | ||
+ | } | ||
+ | .top-slider-main .slider-box4 .left{ | ||
+ | background-color:#939; | ||
+ | } | ||
+ | .top-slider-main .slider-box5 .left{ | ||
+ | background-color:#FF9933; | ||
+ | } | ||
+ | .top-slider-main .slider-box6 .left{ | ||
+ | background-color:#00CC66; | ||
+ | } | ||
/* CHANGING THE WIKI CSS */ | /* CHANGING THE WIKI CSS */ | ||
Line 37: | Line 88: | ||
z-index: 2; | z-index: 2; | ||
} | } | ||
- | |||
- | |||
#contentSub { | #contentSub { | ||
Line 66: | Line 115: | ||
#top-section { | #top-section { | ||
- | height: | + | height: 20px; |
width: 976px; | width: 976px; | ||
border-left: none; | border-left: none; | ||
Line 88: | Line 137: | ||
margin-top:-15px; | margin-top:-15px; | ||
} | } | ||
- | |||
.right-menu li a { | .right-menu li a { | ||
background-color: #000000; | background-color: #000000; | ||
} | } | ||
- | |||
.right-menu ul { | .right-menu ul { | ||
border: none; | border: none; | ||
- | |||
} | } | ||
Line 139: | Line 185: | ||
#pt-userpage{ | #pt-userpage{ | ||
- | + | background-color: #000000; | |
} | } | ||
#pt-preferences{ | #pt-preferences{ | ||
- | + | background-color: #000000; | |
} | } | ||
#pt-logout{ | #pt-logout{ | ||
- | + | background-color: #000000; | |
} | } | ||
Line 1,086: | Line 1,132: | ||
} | } | ||
+ | /* GREEN */ | ||
+ | |||
+ | ul#h2igemmenuGreen ul{ | ||
+ | display:none | ||
+ | } | ||
+ | ul#h2igemmenuGreen li:hover>*{ | ||
+ | display:block | ||
+ | } | ||
+ | ul#h2igemmenuGreen li:hover{ | ||
+ | position:relative; | ||
+ | } | ||
+ | ul#h2igemmenuGreen ul{ | ||
+ | position: absolute; | ||
+ | left:-1px; | ||
+ | top:100%; | ||
+ | } | ||
+ | ul#h2igemmenuGreen ul ul{ | ||
+ | position:absolute; | ||
+ | left:98%; | ||
+ | top:-2px; | ||
+ | } | ||
+ | ul#h2igemmenuGreen,ul#h2igemmenuGreen ul{ | ||
+ | margin:0px; | ||
+ | list-style:none; | ||
+ | padding:0px; | ||
+ | background-image:#CCC; | ||
+ | border-width:0px; | ||
+ | border-style:none; | ||
+ | border-color:transparent; | ||
+ | } | ||
+ | ul#h2igemmenuGreen table { | ||
+ | border-collapse:collapse | ||
+ | } | ||
+ | ul#h2igemmenuGreen { | ||
+ | display:block; | ||
+ | font-size:0; | ||
+ | zoom:1; | ||
+ | width:100%; | ||
+ | float: left; | ||
+ | } | ||
+ | ul#h2igemmenuGreen ul{ | ||
+ | //width:204px; | ||
+ | padding:0; | ||
+ | } | ||
+ | ul#h2igemmenuGreen li{ | ||
+ | display:block; | ||
+ | zoom:1; | ||
+ | margin:0; | ||
+ | font-size:0; | ||
+ | float:left; | ||
+ | } | ||
+ | ul#h2igemmenuGreen a:active, ul#h2igemmenuGreen a:focus { | ||
+ | outline-style:none | ||
+ | } | ||
+ | ul#h2igemmenuGreen a,ul#h2igemmenuGreen li.dis a:hover{ | ||
+ | display:block; | ||
+ | vertical-align:middle; | ||
+ | _display:inline-block; | ||
+ | _vertical-align:top; | ||
+ | background-color:#00CC66; | ||
+ | border-width:0px; | ||
+ | border-style:none; | ||
+ | border-color:transparent; | ||
+ | text-align:center; | ||
+ | text-decoration:none; | ||
+ | padding:11px 15px 5px 5px; | ||
+ | _padding-left:0; | ||
+ | font:bold 8pt Verdana; | ||
+ | color: #FFFFFF; | ||
+ | text-decoration:none; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | ul#h2igemmenuGreen ul li { | ||
+ | float:none; | ||
+ | } | ||
+ | ul#h2igemmenuGreen ul a,ul#h2igemmenuGreen ul li.dis a:hover{ | ||
+ | display:block; | ||
+ | text-align:left; | ||
+ | white-space:nowrap; | ||
+ | } | ||
+ | ul#h2igemmenuGreen li:hover>a{ | ||
+ | background-color:#669999; | ||
+ | border-color:transparent; | ||
+ | border-style:none; | ||
+ | font:bold 8pt Verdana; | ||
+ | color: #FFFFFF; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | ul#h2igemmenuGreen li a:hover{ | ||
+ | _position:relative; | ||
+ | background-color:#669999; | ||
+ | border-color:transparent; | ||
+ | border-style:none; | ||
+ | font:bold 8pt Verdana; | ||
+ | color: #FFFFFF; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | ul#h2igemmenuGreen li.dis a{ | ||
+ | color: #AAAAAA !important; | ||
+ | } | ||
+ | ul#h2igemmenuGreen img{ | ||
+ | border:none; | ||
+ | vertical-align:middle; | ||
+ | margin-right:22px; | ||
+ | } | ||
+ | ul#h2igemmenuGreen img.over{ | ||
+ | display:none | ||
+ | } | ||
+ | ul#h2igemmenuGreen li.dis a:hover img.over{ | ||
+ | display:none !important | ||
+ | } | ||
+ | ul#h2igemmenuGreen li.dis a:hover img.def { | ||
+ | display:inline !important | ||
+ | } | ||
+ | ul#h2igemmenuGreen li:hover > a img.def { | ||
+ | display:none | ||
+ | |||
+ | } | ||
+ | ul#h2igemmenuGreen li:hover > a img.over {display:inline} | ||
+ | |||
+ | ul#h2igemmenuGreen a:hover img.over,ul#h2igemmenuGreen a:hover ul img.def,ul#h2igemmenuGreen a:hover a:hover ul img.def,ul#h2igemmenuGreen a:hover a:hover img.over,ul#h2igemmenuGreen a:hover a:hover a:hover img.over{display:inline} | ||
+ | |||
+ | ul#h2igemmenuGreen a:hover img.def,ul#h2igemmenuGreen a:hover ul img.over,ul#h2igemmenuGreen a:hover a:hover ul img.over,ul#h2igemmenuGreen a:hover a:hover img.def,ul#h2igemmenuGreen a:hover a:hover a:hover img.def{display:none} | ||
+ | |||
+ | ul#h2igemmenuGreen a:hover ul,ul#h2igemmenuGreen a:hover a:hover ul{display:block} | ||
+ | |||
+ | ul#h2igemmenuGreen a:hover ul ul{display:none} | ||
+ | |||
+ | ul#h2igemmenuGreen span{ | ||
+ | |||
+ | display:block;overflow:visible;background-position:right center;background-repeat: no-repeat;padding-right:0px;} | ||
+ | |||
+ | ul#h2igemmenuGreen ul span{background-image:url(imgs/arr_white.gif);padding-right:29px;} | ||
+ | |||
+ | ul#h2igemmenuGreen li a.istylei0green,ul#h2igemmenuGreen li.dis.istylei0green:hover a.istylei0green{ | ||
+ | height:25px; | ||
+ | background-color:#00CC66; | ||
+ | border-width:0px; | ||
+ | border-style:none; | ||
+ | font:bold 14px Trebuchet MS; | ||
+ | color:#FFFFFF; | ||
+ | text-decoration:none; | ||
+ | margin:0 -10px 0 10px; | ||
+ | _margin:0 0 0 0; | ||
+ | background-position:100% 0; | ||
+ | } | ||
+ | |||
+ | ul#h2igemmenuGreen li.istylei0green:hover>a{ | ||
+ | background-color:#00CC66; | ||
+ | border-style:none; | ||
+ | font:bold 14px Trebuchet MS; | ||
+ | color:#FFFFFF; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | ul#h2igemmenuGreen li.istylei0green,ul#h2igemmenuGreen li.dis.istylei0green:hover{ | ||
+ | margin:0 10px 0 0; | ||
+ | background-color:#00CC66; | ||
+ | background-position:0 0; | ||
+ | } | ||
+ | |||
+ | ul#h2igemmenuGreen li.istylei0green:hover{ | ||
+ | background-color:#00CC66; | ||
+ | } | ||
+ | |||
+ | ul#h2igemmenuGreen li a.istylei0green:hover{ | ||
+ | background-color:#669999; | ||
+ | border-style:none; | ||
+ | font:bold 14px Trebuchet MS; | ||
+ | color:#FFFFFF; | ||
+ | text-decoration:none; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | ul#h2igemmenuGreen.istylem0green,ul#h2igemmenuGreen ul.istylem0green{ | ||
+ | background-color:transparent; | ||
+ | border-width:0px; | ||
+ | border-style:none; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | ul#h2igemmenuGreen ul.istylem0green li{ | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | ul#h2igemmenuGreen.istylem0green li a,ul#h2igemmenuGreen ul.istylem0green li a,ul#h2igemmenuGreen.istylem0green li.dis a:hover,ul#h2igemmenuGreen ul.istylem0green li.dis a:hover{ | ||
+ | padding:5px 5px 5px 5px; | ||
+ | } | ||
Line 1,096: | Line 1,330: | ||
padding: 0px; | padding: 0px; | ||
color:#FFFFFF; | color:#FFFFFF; | ||
- | background-color: # | + | background-color: #000000; |
} | } | ||
+ | div.igemimage { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | z-index: 4; | ||
+ | right: -200px; | ||
+ | } | ||
#header{ | #header{ | ||
height:220px; | height:220px; | ||
Line 1,104: | Line 1,344: | ||
font-family:"Arial Black", Gadget, sans-serif; | font-family:"Arial Black", Gadget, sans-serif; | ||
} | } | ||
- | + | #spponsors{ | |
- | + | position:absolute; | |
- | + | bottom:0; | |
- | + | margin-left:auto; | |
- | + | margin-right:auto; | |
- | + | text-align:center; | |
- | + | ||
} | } | ||
Line 1,135: | Line 1,374: | ||
margin: 0px 0px 0px 0px; | margin: 0px 0px 0px 0px; | ||
padding: 15px 45px 15px 45px; | padding: 15px 45px 15px 45px; | ||
+ | |||
} | } | ||
div#textContent p{ | div#textContent p{ | ||
Line 1,206: | Line 1,446: | ||
margin: 0; | margin: 0; | ||
width: 230px; | width: 230px; | ||
- | + | height:100px; | |
border-top: 1px solid #999; | border-top: 1px solid #999; | ||
} | } | ||
Line 1,215: | Line 1,455: | ||
} | } | ||
</style> | </style> | ||
+ | <script> | ||
+ | var $slider_started = false; | ||
+ | $(document).ready(function(){ | ||
+ | var $total_slider = $('.top-slider-main > div').length; | ||
+ | var $label_width = $('.top-slider-main div .left').width(); | ||
+ | var $max_slider_width = ($total_slider -1)*$label_width; | ||
+ | var $extra_margin = $('.top-slider-main div').width() - $label_width; | ||
+ | |||
+ | $('.top-slider-main div:not(.slider-box1) .left').mouseover(function(){ | ||
+ | var $slider_index = $('.top-slider-main > div').index($(this).parent()) + 1; | ||
+ | if($(this).parent().hasClass('on')) | ||
+ | { | ||
+ | if($slider_started != 1) | ||
+ | { | ||
+ | $slider_started = 2; | ||
+ | for(i=$total_slider; i>=$slider_index; i--) | ||
+ | { | ||
+ | var $elm = $('.top-slider-main .slider-box'+i); | ||
+ | if($elm.hasClass('on')) | ||
+ | { | ||
+ | $elm.removeClass('on'); | ||
+ | var $left_margin = ($label_width*(i-1)) + $extra_margin; | ||
+ | $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;}); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | if($slider_started != 2) | ||
+ | { | ||
+ | $slider_started = 1; | ||
+ | for(i=2; i<=$slider_index; i++) | ||
+ | { | ||
+ | var $elm = $('.top-slider-main .slider-box'+i); | ||
+ | if(!$elm.hasClass('on')) | ||
+ | { | ||
+ | $elm.addClass('on'); | ||
+ | var $left_margin = ($label_width*(i-1)); | ||
+ | $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;}); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
- | + | <div id="globalWrapper"> | |
- | + | <div class="igemimage"><a href="/"><img src="https://static.igem.org/mediawiki/2011/0/03/UNAMGenomicsIGEMlogo.png" height="150"></a></div> | |
- | <img src="https://static.igem.org/mediawiki/2011/ | + | </div> |
+ | |||
+ | <div id="container"> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="header"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/a/a7/Unamgenomicshidrobiumetliheader1.jpg" width=" 976px" height="203px" id="Insert_logo" style="background: #8090AB; display:block; "></a> | ||
<!-- Menu Code --> | <!-- Menu Code --> | ||
Line 1,293: | Line 1,588: | ||
</td> | </td> | ||
<td> | <td> | ||
- | <ul id=" | + | <ul id="h2igemmenuGreen"> |
- | <li class=" | + | <li class="istylei0green" style="width:162px;"><a class="istylei0green" href="#"><span> Wiki Requirements</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> |
- | <ul class=" | + | <ul class="istylem0green" style="width:195px;"> |
<li><a href="https://2011.igem.org/Team:UNAM-Genomics_Mexico/Team/Atributions"><span>Attributions</span><![if gt IE 6]></a> | <li><a href="https://2011.igem.org/Team:UNAM-Genomics_Mexico/Team/Atributions"><span>Attributions</span><![if gt IE 6]></a> | ||
<li><a href="https://2011.igem.org/Team:UNAM-Genomics_Mexico/Notebook"><span>Notebook</span><![if gt IE 6]></a> | <li><a href="https://2011.igem.org/Team:UNAM-Genomics_Mexico/Notebook"><span>Notebook</span><![if gt IE 6]></a> | ||
Line 1,308: | Line 1,603: | ||
</table> | </table> | ||
<!-- End: Menu code --> | <!-- End: Menu code --> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</div><!--class="header"--> | </div><!--class="header"--> | ||
+ | |||
+ | |||
</body> | </body> | ||
</html> | </html> | ||
+ | |||
<div id="textContent"> | <div id="textContent"> | ||
{{{content}}} | {{{content}}} | ||
</div> | </div> |
Revision as of 23:33, 20 September 2011