Template:Team:UNAM-Genomics Mexico/Templates/Main2
From 2010.igem.org
(Difference between revisions)
(32 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | .dropcontent{ | ||
+ | width: 600px; | ||
+ | |||
+ | border: 1px solid black; | ||
+ | background-color: #cccccc; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Credits: Dynamic Drive CSS Library */ | ||
+ | /*URL: http://www.dynamicdrive.com/style/ */ | ||
+ | |||
+ | /* smart image enlarger starts here */ | ||
+ | /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */ | ||
+ | |||
+ | .ienlarger { | ||
+ | float: left; | ||
+ | clear: none; /* set to left or right if needed */ | ||
+ | padding-bottom: 5px; /* space between thumbs. Don't change this to margin */ | ||
+ | padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */ | ||
+ | } | ||
+ | |||
+ | .ienlarger a { | ||
+ | display:block; | ||
+ | text-decoration: none; | ||
+ | /* add cursor:default; to this rule to disable the hand cursor */ | ||
+ | } | ||
+ | |||
+ | .ienlarger a:hover{ /* don't move this positioning to normal state */ | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .ienlarger span img { | ||
+ | border: 1px solid #FFFFFF; /* adds a border around the image */ | ||
+ | margin-bottom: 8px; /* pushes the text down from the image */ | ||
+ | } | ||
+ | |||
+ | .ienlarger a span { /* this is for the large image and the caption */ | ||
+ | position: absolute; | ||
+ | display:none; | ||
+ | color: #FFCC00; /* caption text colour */ | ||
+ | text-decoration: none; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 13px; /* caption text size */ | ||
+ | background-color: #000000; | ||
+ | font-weight: bold; | ||
+ | padding-top: 10px; | ||
+ | padding-right: 10px; | ||
+ | padding-bottom: 13px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | |||
+ | .ienlarger img { /* leave or IE puts a border around links */ | ||
+ | border-width: 0; | ||
+ | } | ||
+ | |||
+ | .ienlarger a:hover span { | ||
+ | display:block; | ||
+ | top: 50px; /* means the pop-up's top is 50px away from thumb's top */ | ||
+ | left: 50px; /* means the pop-up's left is 90px far from the thumb's left */ | ||
+ | z-index: 100; | ||
+ | |||
+ | /* If you want the pop-up open to the left of thumb, remove the left: 90px; and add | ||
+ | right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */ | ||
+ | |||
+ | /* If you want the pop-up open above the thumb, remove the top: 50px; and add | ||
+ | bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ | ||
+ | |||
+ | /* add cursor:default; to this rule to disable the hand cursor only for the large image */ | ||
+ | } | ||
+ | |||
+ | .resize_thumb { | ||
+ | width: 150px; /* enter desired thumb width here */ | ||
+ | height : auto; | ||
+ | } | ||
+ | |||
+ | /* smart image enlarger ends here */ | ||
/* Getting rid of IGEM elements */ | /* Getting rid of IGEM elements */ | ||
Line 14: | Line 92: | ||
} | } | ||
+ | /* | ||
#search-controls { | #search-controls { | ||
+ | color: white; | ||
display:none; | display:none; | ||
} | } | ||
+ | */ | ||
.firstHeading { | .firstHeading { | ||
Line 28: | Line 109: | ||
#footer-box { | #footer-box { | ||
display:none; | display:none; | ||
+ | } | ||
+ | |||
+ | /* This is the bubblewrap code */ | ||
+ | /*Credits: Dynamic Drive CSS Library */ | ||
+ | /*URL: http://www.dynamicdrive.com/style/ */ | ||
+ | |||
+ | .bubblewrap{ | ||
+ | list-style-type:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | .bubblewrap li{ | ||
+ | display:inline; | ||
+ | width: 65px; | ||
+ | height:60px; | ||
+ | } | ||
+ | |||
+ | .bubblewrap li img{ | ||
+ | width: 120px; /* width of each image.*/ | ||
+ | height: 60px; /* height of each image.*/ | ||
+ | border: 0; | ||
+ | margin-right: 0px; /*spacing between each image*/ | ||
+ | -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ | ||
+ | -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ | ||
+ | } | ||
+ | |||
+ | .bubblewrap li img:hover{ | ||
+ | -moz-transform:scale(1.8); /*scale up image 1.8x*/ | ||
+ | -webkit-transform:scale(1.8); | ||
+ | -o-transform:scale(1.8); | ||
} | } | ||
/* This is the REAL background to the whole page */ | /* This is the REAL background to the whole page */ | ||
body{ | body{ | ||
- | background: -moz-linear-gradient(center top, # | + | background: -moz-linear-gradient(center top, #000000, #bb4444 25%, #44bb44 50%, #4444bb 75%, #000000); |
background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(25%, #bb4444), color-stop(50%, #44bb44), color-stop(75%, #4444bb), to(#000000)); | background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(25%, #bb4444), color-stop(50%, #44bb44), color-stop(75%, #4444bb), to(#000000)); | ||
color: white; | color: white; | ||
Line 66: | Line 178: | ||
background: -moz-linear-gradient(bottom, #000000, transparent); | background: -moz-linear-gradient(bottom, #000000, transparent); | ||
background: -webkit-gradient(linear, center bottom, center top, from(#000000), to(transparent)); | background: -webkit-gradient(linear, center bottom, center top, from(#000000), to(transparent)); | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 125: | Line 233: | ||
-webkit-border-top-right-radius: 25px; | -webkit-border-top-right-radius: 25px; | ||
-webkit-border-bottom-left-radius: 25px; | -webkit-border-bottom-left-radius: 25px; | ||
+ | } | ||
+ | |||
+ | #maincontainer2{ | ||
+ | clear: left; | ||
} | } | ||
Line 130: | Line 242: | ||
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ | margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ | ||
margin-top: 0; | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | .right | ||
+ | { | ||
+ | float:right; | ||
+ | } | ||
+ | .left | ||
+ | { | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .jqueryslidemenu{ | ||
+ | font: bold 12px Verdana; | ||
+ | background: #414141; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .jqueryslidemenu ul{ | ||
+ | list-style-image:url("https://static.igem.org/mediawiki/2010/6/6e/UNAM-Genomics_Mexico_Spacer.gif"); | ||
+ | list-style-type: square; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | /*Top level list items*/ | ||
+ | .jqueryslidemenu ul li{ | ||
+ | position: relative; | ||
+ | display: inline; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /*Top level menu link items style*/ | ||
+ | .jqueryslidemenu ul li a{ | ||
+ | display: block; | ||
+ | background: #414141; /*background of tabs (default state)*/ | ||
+ | color: white; | ||
+ | padding: 8px 10px; | ||
+ | border-right: 1px solid #778; | ||
+ | color: #2d2b2b; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .jqueryslidemenu ul li a:hover{ | ||
+ | background: black; /*tab link background during hover state*/ | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | /*1st sub level menu*/ | ||
+ | .jqueryslidemenu ul li ul{ | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | display: block; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | /*Sub level menu list items (undo style from Top level List Items)*/ | ||
+ | .jqueryslidemenu ul li ul li{ | ||
+ | display: list-item; | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | /*All subsequent sub menu levels vertical offset after 1st level sub menu */ | ||
+ | .jqueryslidemenu ul li ul li ul{ | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | /* Sub level menu links style */ | ||
+ | .jqueryslidemenu ul li ul li a{ | ||
+ | font: normal 13px Verdana; | ||
+ | width: 160px; /*width of sub menus*/ | ||
+ | padding: 5px; | ||
+ | margin: 0; | ||
+ | border-top-width: 0; | ||
+ | border-bottom: 1px solid gray; | ||
+ | } | ||
+ | |||
+ | .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ | ||
+ | background: #eff9ff; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | /* ######### CSS classes applied to down and right arrow images ######### */ | ||
+ | |||
+ | .downarrowclass{ | ||
+ | position: absolute; | ||
+ | top: 12px; | ||
+ | right: 7px; | ||
+ | } | ||
+ | |||
+ | .rightarrowclass{ | ||
+ | position: absolute; | ||
+ | top: 6px; | ||
+ | right: 5px; | ||
} | } | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | <!--[if lte IE 7]> | ||
+ | <style type="text/css"> | ||
+ | html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ | ||
+ | </style> | ||
+ | <![endif]--> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | |||
+ | /* | ||
+ | Combo-Box Viewer script- Created by and © Dynamicdrive.com | ||
+ | Visit http://www.dynamicdrive.com/ for this script and more | ||
+ | This notice MUST stay intact for legal use | ||
+ | */ | ||
+ | |||
+ | if (document.getElementById){ | ||
+ | document.write('<style type="text/css">\n') | ||
+ | document.write('.dropcontent{display:none;}\n') | ||
+ | document.write('</style>\n') | ||
+ | } | ||
+ | |||
+ | function contractall(){ | ||
+ | if (document.getElementById){ | ||
+ | var inc=0 | ||
+ | while (document.getElementById("dropmsg"+inc)){ | ||
+ | document.getElementById("dropmsg"+inc).style.display="none" | ||
+ | inc++ | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function expandone(){ | ||
+ | if (document.getElementById){ | ||
+ | var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex | ||
+ | contractall() | ||
+ | document.getElementById("dropmsg"+selectedItem).style.display="block" | ||
+ | } | ||
+ | } | ||
+ | |||
+ | if (window.addEventListener) | ||
+ | window.addEventListener("load", expandone, false) | ||
+ | else if (window.attachEvent) | ||
+ | window.attachEvent("onload", expandone) | ||
</script> | </script> | ||
+ | |||
+ | |||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | /********************* | ||
+ | //* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/ | ||
+ | //* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering | ||
+ | //* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/ | ||
+ | *********************/ | ||
+ | |||
+ | //Update: April 12th, 10: Fixed compat issue with jquery 1.4x | ||
+ | |||
+ | //Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs): | ||
+ | var arrowimages={down:['downarrowclass', 'https://static.igem.org/mediawiki/2010/c/cb/UNAM-Genomics_Mexico_team_down.gif', 23], right:['rightarrowclass', 'https://static.igem.org/mediawiki/2010/2/25/UNAM-Genomics_Mexico_team_right.gif']} | ||
+ | |||
+ | var jqueryslidemenu={ | ||
+ | |||
+ | animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds | ||
+ | |||
+ | buildmenu:function(menuid, arrowsvar){ | ||
+ | jQuery(document).ready(function($){ | ||
+ | var $mainmenu=$("#"+menuid+">ul") | ||
+ | var $headers=$mainmenu.find("ul").parent() | ||
+ | $headers.each(function(i){ | ||
+ | var $curobj=$(this) | ||
+ | var $subul=$(this).find('ul:eq(0)') | ||
+ | this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()} | ||
+ | this.istopheader=$curobj.parents("ul").length==1? true : false | ||
+ | $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0}) | ||
+ | $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append( | ||
+ | '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1]) | ||
+ | +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0]) | ||
+ | + '" style="border:0;" />' | ||
+ | ) | ||
+ | $curobj.hover( | ||
+ | function(e){ | ||
+ | var $targetul=$(this).children("ul:eq(0)") | ||
+ | this._offsets={left:$(this).offset().left, top:$(this).offset().top} | ||
+ | var menuleft=this.istopheader? 0 : this._dimensions.w | ||
+ | menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft | ||
+ | if ($targetul.queue().length<=1) //if 1 or less queued animations | ||
+ | $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over) | ||
+ | }, | ||
+ | function(e){ | ||
+ | var $targetul=$(this).children("ul:eq(0)") | ||
+ | $targetul.slideUp(jqueryslidemenu.animateduration.out) | ||
+ | } | ||
+ | ) //end hover | ||
+ | $curobj.click(function(){ | ||
+ | $(this).children("ul:eq(0)").hide() | ||
+ | }) | ||
+ | }) //end $headers.each() | ||
+ | $mainmenu.find("ul").css({display:'none', visibility:'visible'}) | ||
+ | }) //end document.ready | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //build menu with ID="myslidemenu" on page: | ||
+ | jqueryslidemenu.buildmenu("myslidemenu", arrowimages) | ||
+ | </script> | ||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | |||
+ | var _gaq = _gaq || []; | ||
+ | _gaq.push(['_setAccount', 'UA-11233600-2']); | ||
+ | _gaq.push(['_trackPageview']); | ||
+ | |||
+ | (function() { | ||
+ | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
+ | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
+ | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
+ | })(); | ||
+ | |||
+ | </script | ||
</head> | </head> | ||
Line 143: | Line 474: | ||
<div id="maincontainer"> | <div id="maincontainer"> | ||
- | <div id="topsection"></ | + | <div id="topsection"> |
+ | <div id="myslidemenu" class="jqueryslidemenu"> | ||
+ | <ul> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico">Home</a></li> | ||
+ | <li><a href="#">Team</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Us</a> | ||
+ | <ul> | ||
+ | <li><a href="https://igem.org/Team.cgi?id=360">Official Team Profile</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Team">Unofficial Team Profile</a></li> | ||
+ | </ul> | ||
+ | <li><a href="https://igem.org/Team_Wikis?year=2010">Them</a> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Project</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Project">Overview</a> | ||
+ | <li><a href="#">Individual Modules</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Modules/In vivo">In vivo</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Modules/In silico">In silico</a></li> | ||
+ | </ul> | ||
+ | <li><a href="#">Whole-System View</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Parts">Parts created</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Modeling">Model created</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Notebook">Official Notebook</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Safety">Safety & Human Practices</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/Collaboration">Collaboration</a></li> | ||
+ | <li><a href="#">About</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/About/iGEM">iGEM</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/About/Synthetic Biology">Synthetic Biology</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/About/CCG">UNAM</a></li> | ||
+ | <li><a href="https://2010.igem.org/Team:UNAM-Genomics_Mexico/About/Gallery">Gallery</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <div id="google_translate_element" class="right" style="padding: 5px 10px"></div><script> | ||
+ | function googleTranslateElementInit() { | ||
+ | new google.translate.TranslateElement({ | ||
+ | pageLanguage: 'en', | ||
+ | gaTrack: true, | ||
+ | layout: google.translate.TranslateElement.InlineLayout.SIMPLE | ||
+ | }, 'google_translate_element'); | ||
+ | } | ||
+ | </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> | ||
+ | </ul> | ||
+ | |||
+ | <br style="clear: left" /> | ||
+ | </div> | ||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2010/4/41/UNAM-Genomics_Mexico_Logo_light_minimal_banner.png" /> | ||
+ | </div> | ||
<br /> | <br /> | ||
Line 159: | Line 547: | ||
<div id="leftcolumn"> | <div id="leftcolumn"> | ||
<div class="innertube"> | <div class="innertube"> | ||
- | </html><div | + | |
+ | </html><div>{{{Markup_Content}}}</div><html> | ||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
<div id="maincontainer2"> | <div id="maincontainer2"> | ||
- | |||
<div id="contentwrapper2"> | <div id="contentwrapper2"> | ||
<div id="contentcolumn2"> | <div id="contentcolumn2"> | ||
Line 195: | Line 584: | ||
</div> | </div> | ||
<br/> | <br/> | ||
- | <div | + | <div class="right"> |
<a href="http://www2.clustrmaps.com/counter/maps.php?url=https://2010.igem.org/Team:UNAM-Genomics_Mexico" id="clustrMapsLink"><img src="http://www2.clustrmaps.com/counter/index2.php?url=https://2010.igem.org/Team:UNAM-Genomics_Mexico" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com';" /></a> | <a href="http://www2.clustrmaps.com/counter/maps.php?url=https://2010.igem.org/Team:UNAM-Genomics_Mexico" id="clustrMapsLink"><img src="http://www2.clustrmaps.com/counter/index2.php?url=https://2010.igem.org/Team:UNAM-Genomics_Mexico" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://clustrmaps.com';" /></a> | ||
+ | </div> | ||
+ | <p class="left"> | ||
+ | This site is best viewed with a Webkit based Browser (eg: Google's Chrome, Apple's Safari),</p> | ||
+ | <div class="left"> | ||
+ | or a Gecko one (eg: Mozilla's Firefox, Netscape). Some of the code requires an up-to-date browser.</p> | ||
+ | <br /> | ||
+ | Trident based (Microsoft's Internet Explorer) or Presto based (Opera) are not currently supported. Sorry. | ||
+ | </div> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 22:57, 26 October 2010
{{{Main_Content}}}
{{{Markup_Content}}}
{{{Green_Content}}}
{{{Red_Content}}}
{{{Blue_Content}}}
This site is best viewed with a Webkit based Browser (eg: Google's Chrome, Apple's Safari),
or a Gecko one (eg: Mozilla's Firefox, Netscape). Some of the code requires an up-to-date browser.
Trident based (Microsoft's Internet Explorer) or Presto based (Opera) are not currently supported. Sorry.
Trident based (Microsoft's Internet Explorer) or Presto based (Opera) are not currently supported. Sorry.