Template:Team:UNAM Genomics Mexico/Templates/menulike

From 2012.igem.org

(Difference between revisions)
 
(63 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<!--
-
<head>
+
-
<style type="text/css">
+
-
/*
+
NAME    menu_template.css
NAME    menu_template.css
-
VERSION  3.0.0
+
VERSION  1.0.0
AUTHOR  Treviño Garza Abiel
AUTHOR  Treviño Garza Abiel
-
DESC    The file contains the layout instructions for the menu used in the UNAM-Genomics_Mexico Team wiki.
+
DESC    The file contains the layout instructions for the menu and  the website in general used in the UNAM-Genomics_Mexico Team wiki.
-
*/
+
-
/* Menu Style Definitions */
+
IF YOU TAKE SOME CODE SAY TANKS PLEASE
-
/* MENU STYLE DEFINITIONS */
+
-->
-
/*PINK PART*/
+
-
ul#h2igemmenupink ul{
+
-
display:none
+
-
}
+
-
ul#h2igemmenupink li:hover>*{
+
-
display:block;
+
-
        background-image:https://static.igem.org/mediawiki/2012/9/9d/Igem_logo_lento_pequeno.gif;
+
-
}
+
-
ul#h2igemmenupink li:hover{
+
-
position:relative;
+
-
}
+
-
ul#h2igemmenupink ul{
+
-
position: absolute;
+
-
left:-1px;
+
-
top:100%;
+
-
}
+
-
ul#h2igemmenupink ul ul{
+
-
position:absolute;
+
-
left:98%;
+
-
top:-2px;
+
-
}
+
-
ul#h2igemmenupink,ul#h2igemmenupink ul{
+
-
margin:0px;
+
-
list-style:none;
+
-
padding:0px;
+
-
background-image:#CCC;
+
-
border-width:0px;
+
-
border-style:none;
+
-
border-color:transparent;
+
-
}
+
-
ul#h2igemmenupink table {
+
-
border-collapse:collapse
+
-
}
+
-
ul#h2igemmenupink {
+
-
display:block;
+
-
font-size:0;
+
-
zoom:1;
+
-
width:100%;
+
-
float: left;
+
-
}
+
-
ul#h2igemmenupink ul{
+
-
//width:204px;
+
-
padding:0;
+
-
}
+
-
ul#h2igemmenupink li{
+
-
display:block;
+
-
zoom:1;
+
-
margin:0;
+
-
font-size:0;
+
-
float:left;
+
-
}
+
-
ul#h2igemmenupink a:active, ul#h2igemmenupink a:focus {
+
-
outline-style:none
+
-
}
+
-
ul#h2igemmenupink a,ul#h2igemmenupink li.dis a:hover{
+
-
display:block;
+
-
vertical-align:middle;
+
-
_display:inline-block;
+
-
_vertical-align:top;
+
-
background-color:#FF3366;
+
-
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#h2igemmenupink ul li {
+
-
float:none;
+
-
}
+
-
ul#h2igemmenupink ul a,ul#h2igemmenupink ul li.dis a:hover{
+
-
display:block;
+
-
text-align:left;
+
-
white-space:nowrap;
+
-
}
+
-
ul#h2igemmenupink li:hover>a{
+
-
background-color:#993366;
+
-
border-color:transparent;
+
-
border-style:none;
+
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
-
}
+
-
ul#h2igemmenupink li a:hover{
+
-
_position:relative;
+
-
background-color:#993366;
+
-
border-color:transparent;
+
-
border-style:none;
+
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
-
}
+
-
ul#h2igemmenupink li.dis a{
+
-
color: #AAAAAA !important;
+
-
}
+
-
ul#h2igemmenupink img{
+
-
border:none;
+
-
vertical-align:middle;
+
-
margin-right:22px;
+
-
}
+
-
ul#h2igemmenupink img.over{
+
-
display:none
+
-
}
+
-
ul#h2igemmenupink li.dis a:hover img.over{
+
-
display:none !important
+
-
}
+
-
ul#h2igemmenupink li.dis a:hover img.def {
+
-
display:inline !important
+
-
}
+
-
ul#h2igemmenupink li:hover > a img.def  {
+
-
display:none
+
-
}
+
-
ul#h2igemmenupink li:hover > a img.over {display:inline}
+
-
ul#h2igemmenupink a:hover img.over,ul#h2igemmenupink a:hover ul img.def,ul#h2igemmenupink a:hover a:hover ul img.def,ul#h2igemmenupink a:hover a:hover img.over,ul#h2igemmenupink a:hover a:hover a:hover img.over{display:inline}
 
-
ul#h2igemmenupink a:hover img.def,ul#h2igemmenupink a:hover ul img.over,ul#h2igemmenupink a:hover a:hover ul img.over,ul#h2igemmenupink a:hover a:hover img.def,ul#h2igemmenupink a:hover a:hover a:hover img.def{display:none}
+
<html>
 +
<head>
-
ul#h2igemmenupink a:hover ul,ul#h2igemmenupink a:hover a:hover ul{display:block}
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 +
<link href="https://2011.igem.org/Team:UNAM-Genomics_Mexico/Templates/Home" rel="stylesheet" type="text/css" />
 +
<title>UNAM-Genomics_Mexico</title>
 +
<script type="text/javascript">
-
ul#h2igemmenupink a:hover ul ul{display:none}
+
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-19624614-2']);
 +
  _gaq.push(['_trackPageview']);
-
ul#h2igemmenupink span{
+
  (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);
 +
  })();
-
display:block;overflow:visible;background-position:right center;background-repeat: no-repeat;padding-right:0px;}
+
</script>
-
ul#h2igemmenupink ul span{background-image:url(imgs/arr_white.gif);padding-right:29px;}
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
-
ul#h2igemmenupink li a.istylei0pink,ul#h2igemmenupink li.dis.istylei0pink:hover a.istylei0pink{
 
-
height:25px;
 
-
background-color:#FF3366;
 
-
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#h2igemmenupink li.istylei0pink:hover>a{
 
-
background-color:#FF3366;
 
-
border-style:none;
 
-
font:bold 14px Trebuchet MS;
 
-
color:#FFFFFF;
 
-
text-decoration:none;
 
-
}
 
-
ul#h2igemmenupink li.istylei0pink,ul#h2igemmenupink li.dis.istylei0pink:hover{
+
<style type="text/css">
-
margin:0 10px 0 0;
+
-
background-color:#FF3366;
+
-
background-position:0 0;
+
-
}
+
-
ul#h2igemmenupink li.istylei0pink:hover{
+
/* smart image enlarger starts here */
-
background-color:#FF3366;
+
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */
-
}
+
-
ul#h2igemmenupink li a.istylei0pink:hover{
+
.ienlarger {
-
background-color:#993366;
+
float: left;
-
border-style:none;
+
clear: none; /* set to left or right if needed */
-
font:bold 14px Trebuchet MS;
+
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
-
color:#FFFFFF;
+
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
-
text-decoration:none;
+
-
font-weight: bold;
+
}
}
-
ul#h2igemmenupink.istylem0pink,ul#h2igemmenupink ul.istylem0pink{
+
.ienlarger a {  
-
background-color:transparent;
+
display:block;
-
border-width:0px;
+
text-decoration: none;
-
border-style:none;
+
/* add cursor:default; to this rule to disable the hand cursor */
-
padding:0;
+
}
}
-
ul#h2igemmenupink ul.istylem0pink li{
+
.ienlarger a:hover{ /* don't move this positioning to normal state */
-
margin:0;
+
position:relative;
}
}
-
ul#h2igemmenupink.istylem0pink li a,ul#h2igemmenupink ul.istylem0pink li a,ul#h2igemmenupink.istylem0pink li.dis a:hover,ul#h2igemmenupink ul.istylem0pink li.dis a:hover{
+
.ienlarger span img {
-
padding:5px 5px 5px 5px;
+
border: 1px solid #FFFFFF; /* adds a border around the image */
 +
margin-bottom: 8px; /* pushes the text down from the image */
}
}
-
/*YELLOW PART*/
+
.ienlarger a span {  /* this is for the large image and the caption */
-
ul#h2igemmenyellow ul{
+
-
display:none
+
-
}
+
-
ul#h2igemmenyellow li:hover>*{
+
-
display:block
+
-
}
+
-
ul#h2igemmenyellow li:hover{
+
-
position:relative;
+
-
}
+
-
ul#h2igemmenyellow ul{
+
position: absolute;
position: absolute;
-
left:-1px;
+
display:none;
-
top:100%;
+
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;
}
}
-
ul#h2igemmenyellow ul ul{
+
 
-
position:absolute;
+
.ienlarger img { /* leave or IE puts a border around links */
-
left:98%;
+
border-width: 0;
-
top:-2px;
+
}
}
-
ul#h2igemmenyellow,ul#h2igemmenyellow ul{
+
 
-
margin:0px;
+
.ienlarger a:hover span {  
-
list-style:none;
+
-
padding:0px;
+
-
background-image:#CCC;
+
-
border-width:0px;
+
-
border-style:none;
+
-
border-color:transparent;
+
-
}
+
-
ul#h2igemmenyellow table {
+
-
border-collapse:collapse
+
-
}
+
-
ul#h2igemmenyellow {
+
display:block;
display:block;
-
font-size:0;
+
top: 50px; /* means the pop-up's top is 50px away from thumb's top */
-
zoom:1;
+
left: 50px; /* means the pop-up's left is 90px far from the thumb's left */
-
width:100%;
+
z-index: 100;
-
float: left;
+
-
}
+
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add 
-
ul#h2igemmenyellow ul{
+
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */
-
//width:204px;
+
-
padding:0;
+
-
}
+
-
ul#h2igemmenyellow li{
+
-
display:block;
+
-
zoom:1;
+
-
margin:0;
+
-
font-size:0;
+
-
float:left;
+
-
}
+
-
ul#h2igemmenyellow a:active, ul#h2igemmenyellow a:focus {
+
-
outline-style:none
+
-
}
+
-
ul#h2igemmenyellow a,ul#h2igemmenyellow li.dis a:hover{
+
-
display:block;
+
-
vertical-align:middle;
+
-
_display:inline-block;
+
-
_vertical-align:top;
+
-
background-color:#FFCC33;
+
-
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#h2igemmenyellow ul li {
+
-
float:none;
+
-
}
+
-
ul#h2igemmenyellow ul a,ul#h2igemmenyellow ul li.dis a:hover{
+
-
display:block;
+
-
text-align:left;
+
-
white-space:nowrap;
+
-
}
+
-
ul#h2igemmenyellow li:hover>a{
+
-
background-color:#999900;
+
-
border-color:transparent;
+
-
border-style:none;
+
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
-
}
+
-
ul#h2igemmenyellow li a:hover{
+
-
_position:relative;
+
-
background-color:#999900;
+
-
border-color:transparent;
+
-
border-style:none;
+
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
-
}
+
-
ul#h2igemmenyellow li.dis a{
+
-
color: #AAAAAA !important;
+
-
}
+
-
ul#h2igemmenyellow img{
+
-
border:none;
+
-
vertical-align:middle;
+
-
margin-right:22px;
+
-
}
+
-
ul#h2igemmenyellow img.over{
+
-
display:none
+
-
}
+
-
ul#h2igemmenyellow li.dis a:hover img.over{
+
-
display:none !important
+
-
}
+
-
ul#h2igemmenyellow li.dis a:hover img.def {
+
-
display:inline !important
+
-
}
+
-
ul#h2igemmenyellow li:hover > a img.def  {
+
-
display:none
+
-
}
+
-
ul#h2igemmenyellow li:hover > a img.over {display:inline}
+
-
ul#h2igemmenyellow a:hover img.over,ul#h2igemmenyellow a:hover ul img.def,ul#h2igemmenyellow a:hover a:hover ul img.def,ul#h2igemmenyellow a:hover a:hover img.over,ul#h2igemmenyellow a:hover a:hover a:hover img.over{display:inline}
+
/* 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 */
-
ul#h2igemmenyellow a:hover img.def,ul#h2igemmenyellow a:hover ul img.over,ul#h2igemmenyellow a:hover a:hover ul img.over,ul#h2igemmenyellow a:hover a:hover img.def,ul#h2igemmenyellow a:hover a:hover a:hover img.def{display:none}
+
/* add cursor:default; to this rule to disable the hand cursor only for the large image */
 +
}
-
ul#h2igemmenyellow a:hover ul,ul#h2igemmenyellow a:hover a:hover ul{display:block}
+
.resize_thumb {
 +
width: 150px; /* enter desired thumb width here */
 +
height : auto;
 +
}
-
ul#h2igemmenyellow a:hover ul ul{display:none}
+
/* smart image enlarger ends here */
-
ul#h2igemmenyellow span{
+
/* Menu Style Definitions */
 +
/* MENU STYLE DEFINITIONS */
 +
/* CHANGING THE WIKI CSS */
 +
h1,h2,h3,h4,h5,h6{
 +
border-bottom: none;
-
display:block;overflow:visible;background-position:right center;background-repeat: no-repeat;padding-right:0px;}
+
}
-
ul#h2igemmenyellow ul span{background-image:url(imgs/arr_white.gif);padding-right:29px;}
+
#content {
 +
position: relative;
 +
width: 976px;
 +
margin: 0 auto;
 +
padding: 5px 5px 5px 5px;
 +
background: transparent;
 +
color: transparent;
 +
border-left: none;
 +
border-right: none;
 +
line-height: 0px;
 +
z-index: 2;
 +
}
-
ul#h2igemmenyellow li a.istylei0yellow,ul#h2igemmenyellow li.dis.istylei0yellow:hover a.istylei0yellow{
+
#contentSub {
-
height:25px;
+
display:none;
-
background-color:#FFCC33;
+
-
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#h2igemmenyellow li.istylei0yellow:hover>a{
+
#bodyContent {
-
background-color:#FFCC33;
+
-
border-style:none;
+
-
font:bold 14px Trebuchet MS;
+
-
color:#FFFFFF;
+
-
text-decoration:none;
+
}
}
-
ul#h2igemmenyellow li.istylei0yellow,ul#h2igemmenyellow li.dis.istylei0yellow:hover{
+
#siteSub {
-
margin:0 10px 0 0;
+
display:none;
-
background-color:#FFCC33;
+
-
background-position:0 0;
+
}
}
-
ul#h2igemmenyellow li.istylei0yellow:hover{
+
#search-controls {
-
background-color:#FFCC33;
+
display:none;
}
}
-
ul#h2igemmenyellow li a.istylei0yellow:hover{
+
.firstHeading {
-
background-color:#999900;
+
display:none;
-
border-style:none;
+
-
font:bold 14px Trebuchet MS;
+
-
color:#FFFFFF;
+
-
text-decoration:none;
+
-
font-weight: bold;
+
}
}
-
ul#h2igemmenyellow.istylem0yellow,ul#h2igemmenyellow ul.istylem0yellow{
+
#search-controls {
-
background-color:transparent;
+
margin-top:30px;
-
border-width:0px;
+
-
border-style:none;
+
-
padding:0;
+
}
}
-
ul#h2igemmenyellow ul.istylem0yellow li{
+
 
-
margin:0;
+
 
 +
#top-section {
 +
height: 20px;
 +
width: 976px;
 +
border-left: none;
 +
border-right: none;
 +
border-bottom: none;
}
}
-
ul#h2igemmenyellow.istylem0yellow li a,ul#h2igemmenyellow ul.istylem0yellow li a,ul#h2igemmenyellow.istylem0yellow li.dis a:hover,ul#h2igemmenyellow ul.istylem0yellow li.dis a:hover{
+
.left-menu {
-
padding:5px 5px 5px 5px;
+
margin-top:-15px;
}
}
-
/*Blue Part*/
+
.left-menu ul {
-
ul#h2igemmenublue ul{
+
border: none;
-
display:none
+
}
}
-
ul#h2igemmenublue li:hover>*{
+
 
-
display:block
+
 
 +
 
 +
#menubar a {color:#FF0000;}
 +
#menubar a:hover{text-decoration:none; color:#52749C;}
 +
.left-menu {background-color:#FFFFFF; margin:0px 0px 0px 0px; padding:0;}
 +
.left-menu ul {background-color:#FFFFFF; margin:0; padding:0;}
 +
.right-menu ul li a {background-color:#FFFFFF;}
 +
.printfooter {display:none;}
 +
 
 +
#menubar.right-menu {
 +
margin-top:-15px;
}
}
-
ul#h2igemmenublue li:hover{
+
.right-menu li a {
-
position:relative;
+
background-color: #FFFFFF;
}
}
-
ul#h2igemmenublue ul{
+
.right-menu ul {
-
position: absolute;
+
border: none;
-
left:-1px;
+
-
top:100%;
+
}
}
-
ul#h2igemmenublue ul ul{
+
 
-
position:absolute;
+
#menubar{
-
left:98%;
+
top:22px;
-
top:-2px;
+
z-index:25;
}
}
-
ul#h2igemmenublue,ul#h2igemmenublue ul{
+
 
-
margin:0px;
+
img[src*="/wiki/skins/common/images/wiki.png"]{
-
list-style:none;
+
    width:0;
-
padding:0px;
+
    height:0px;
-
background-image:#CCC;
+
    padding-right:975px;
-
border-width:0px;
+
    background:transparent url(https://2012.igem.org/wiki/skins/common/images/wiki.png) top left no-repeat;
-
border-style:none;
+
-
border-color:transparent;
+
}
}
-
ul#h2igemmenublue table {
+
element.style {
-
border-collapse:collapse
+
color: transparent;
 +
cursor: default;
}
}
-
ul#h2igemmenublue {
+
menubar ul {
-
display:block;
+
color: transparent;
-
font-size:0;
+
list-style: none;
-
zoom:1;
+
list-style-type: none;
-
width:100%;
+
list-style-position: initial;
-
float: left;
+
list-style-image: initial;
}
}
-
ul#h2igemmenublue ul{
+
 
-
//width:204px;
+
element.style {
-
padding:0;
+
}
}
-
ul#h2igemmenublue li{
 
-
display:block;
 
-
zoom:1;
 
-
margin:0;
 
-
font-size:0;
 
-
float:left;
 
-
}
 
-
ul#h2igemmenublue a:active, ul#h2igemmenublue a:focus {
 
-
outline-style:none
 
-
}
 
-
ul#h2igemmenublue a,ul#h2igemmenublue li.dis a:hover{
 
-
display:block;
 
-
vertical-align:middle;
 
-
_display:inline-block;
 
-
_vertical-align:top;
 
-
background-color:#3399CC;
 
-
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#h2igemmenublue ul li {
 
-
float:none;
 
-
}
 
-
ul#h2igemmenublue ul a,ul#h2igemmenublue ul li.dis a:hover{
 
-
display:block;
 
-
text-align:left;
 
-
white-space:nowrap;
 
-
}
 
-
ul#h2igemmenublue li:hover>a{
 
-
background-color:#006699;
 
-
border-color:transparent;
 
-
border-style:none;
 
-
font:bold 8pt Verdana;
 
-
color: #FFFFFF;
 
-
text-decoration:none;
 
-
}
 
-
ul#h2igemmenublue li a:hover{
 
-
_position:relative;
 
-
background-color:#006699;
 
-
border-color:transparent;
 
-
border-style:none;
 
-
font:bold 8pt Verdana;
 
-
color: #FFFFFF;
 
-
text-decoration:none;
 
-
}
 
-
ul#h2igemmenublue li.dis a{
 
-
color: #AAAAAA !important;
 
-
}
 
-
ul#h2igemmenublue img{
 
-
border:none;
 
-
vertical-align:middle;
 
-
margin-right:22px;
 
-
}
 
-
ul#h2igemmenublue img.over{
 
-
display:none
 
-
}
 
-
ul#h2igemmenublue li.dis a:hover img.over{
 
-
display:none !important
 
-
}
 
-
ul#h2igemmenublue li.dis a:hover img.def {
 
-
display:inline !important
 
-
}
 
-
ul#h2igemmenublue li:hover > a img.def  {
 
-
display:none
 
-
}
 
-
ul#h2igemmenublue li:hover > a img.over {display:inline}
 
-
ul#h2igemmenublue a:hover img.over,ul#h2igemmenublue a:hover ul img.def,ul#h2igemmenublue a:hover a:hover ul img.def,ul#h2igemmenublue a:hover a:hover img.over,ul#h2igemmenublue a:hover a:hover a:hover img.over{display:inline}
 
-
ul#h2igemmenublue a:hover img.def,ul#h2igemmenublue a:hover ul img.over,ul#h2igemmenublue a:hover a:hover ul img.over,ul#h2igemmenublue a:hover a:hover img.def,ul#h2igemmenublue a:hover a:hover a:hover img.def{display:none}
+
#catlinks {
 +
display:none;
 +
}
-
ul#h2igemmenublue a:hover ul,ul#h2igemmenublue a:hover a:hover ul{display:block}
 
-
ul#h2igemmenublue a:hover ul ul{display:none}
+
#p-logo {
 +
display:none;
 +
position: absolute;
 +
z-index: 1;
 +
height: 0px;
 +
width: 0px;
 +
}
-
ul#h2igemmenublue span{
+
#pt-userpage{
-
 
+
background-color: #FFFFFF;
-
display:block;overflow:visible;background-position:right center;background-repeat: no-repeat;padding-right:0px;}
+
}
 +
#pt-preferences{
 +
background-color: #FFFFFF;
 +
}
 +
#pt-logout{
 +
background-color: #FFFFFF;
 +
}
-
ul#h2igemmenublue ul span{background-image:url(imgs/arr_white.gif);padding-right:29px;}
 
-
ul#h2igemmenublue li a.istylei0blue,ul#h2igemmenublue li.dis.istylei0blue:hover a.istylei0blue{
+
/* MAIN PAGE CSS */
-
height:25px;
+
body {
-
background-color:#3399CC;
+
font-family:Tahoma, Geneva, sans-serif;
-
border-width:0px;
+
margin: 0px;
-
border-style:none;
+
padding: 0px;
-
font:bold 14px Trebuchet MS;
+
color:#FFFFFF;
color:#FFFFFF;
-
text-decoration:none;
+
background-color: #FFFFFF;
-
margin:0 -10px 0 10px;
+
-
_margin:0 0 0 0;
+
-
background-position:100% 0;
+
}
}
-
ul#h2igemmenublue li.istylei0blue:hover>a{
+
div.igemimage {
-
background-color:#3399CC;
+
position: absolute;
-
border-style:none;
+
top: 0;
-
font:bold 14px Trebuchet MS;
+
        z-index: 4;
-
color:#FFFFFF;
+
        right: -200px;
-
text-decoration:none;
+
}
}
-
ul#h2igemmenublue li.istylei0blue,ul#h2igemmenublue li.dis.istylei0blue:hover{
+
.igemimageleft1-hover {
-
margin:0 10px 0 0;
+
display:block;
-
background-color:#3399CC;
+
background-image:url(https://static.igem.org/mediawiki/2012/3/3a/Unamgenomicsbiosintnegro.jpg);
-
background-position:0 0;
+
width:150px;
 +
height:150px;
 +
position: absolute;
 +
top: 0;
 +
        z-index: 4;
 +
        left: -170px;
 +
        top:350px;
}
}
-
 
+
.igemimageleft1-hover:hover {
-
ul#h2igemmenublue li.istylei0blue:hover{
+
background-image:url(https://static.igem.org/mediawiki/2012/9/9a/UnamgenomicsBiosintcolor.jpg);
-
background-color:#3399CC;
+
}
}
-
ul#h2igemmenublue li a.istylei0blue:hover{
 
-
background-color:#006699;
 
-
border-style:none;
 
-
font:bold 14px Trebuchet MS;
 
-
color:#FFFFFF;
 
-
text-decoration:none;
 
-
font-weight: bold;
 
-
}
 
-
ul#h2igemmenublue.istylem0blueblue,ul#h2igemmenublue ul.istylem0blueblue{
 
-
background-color:transparent;
 
-
border-width:0px;
 
-
border-style:none;
 
-
padding:0;
 
-
}
 
-
ul#h2igemmenublue ul.istylem0blueblue li{
+
.igemimageleft2-hover {
-
margin:0;
+
display:block;
 +
background-image:url(https://static.igem.org/mediawiki/2012/7/75/Unamgenomicspngnewsblack.jpg);
 +
width:150px;
 +
height:150px;
 +
position: absolute;
 +
top: 0;
 +
        z-index: 4;
 +
        left: -170px;
 +
        top:530px;
}
}
-
 
+
.igemimageleft2-hover:hover {
-
ul#h2igemmenublue.istylem0blueblue li a,ul#h2igemmenublue ul.istylem0blueblue li a,ul#h2igemmenublue.istylem0blueblue li.dis a:hover,ul#h2igemmenublue ul.istylem0blueblue li.dis a:hover{
+
background-image:url(https://static.igem.org/mediawiki/2012/1/1f/Unamgenomicspngnewscolor.jpg);
-
padding:5px 5px 5px 5px;
+
}
}
-
/*Purple part*/
+
 
-
ul#h2igemmenupurple ul{
+
 
-
display:none
+
#header{
-
}
+
height:220px;
-
ul#h2igemmenupurple li:hover>*{
+
-
display:block
+
-
}
+
-
ul#h2igemmenupurple li:hover{
+
-
position:relative;
+
-
}
+
-
ul#h2igemmenupurple ul{
+
-
position: absolute;
+
-
left:-1px;
+
-
top:100%;
+
-
}
+
-
ul#h2igemmenupurple ul ul{
+
-
position:absolute;
+
-
left:98%;
+
-
top:-2px;
+
-
}
+
-
ul#h2igemmenupurple,ul#h2igemmenupurple ul{
+
-
margin:0px;
+
-
list-style:none;
+
-
padding:0px;
+
-
background-image:#CCC;
+
-
border-width:0px;
+
-
border-style:none;
+
-
border-color:transparent;
+
-
}
+
-
ul#h2igemmenupurple table {
+
-
border-collapse:collapse
+
-
}
+
-
ul#h2igemmenupurple {
+
-
display:block;
+
-
font-size:0;
+
-
zoom:1;
+
width:100%;
width:100%;
-
float: left;
+
font-family:"Arial Black", Gadget, sans-serif;
}
}
-
ul#h2igemmenupurple ul{
+
 
-
//width:204px;
+
div.left_image{
-
padding:0;
+
-
}
+
-
ul#h2igemmenupurple li{
+
-
display:block;
+
-
zoom:1;
+
-
margin:0;
+
-
font-size:0;
+
float:left;
float:left;
 +
border:none;
 +
padding: 30px 30px 30px 30px;
}
}
-
ul#h2igemmenupurple a:active, ul#h2igemmenupurple a:focus {
+
div.right_image{
-
outline-style:none
+
float:right;
 +
border:none;
 +
padding: 30px 30px 30px 30px;
 +
}
 +
 
 +
div.row{
 +
vertical-align:top;
}
}
-
ul#h2igemmenupurple a,ul#h2igemmenupurple li.dis a:hover{
+
 
-
display:block;
+
div.summary_text{
-
vertical-align:middle;
+
padding: 30px 30px 30px 30px;
-
_display:inline-block;
+
border:none;
-
_vertical-align:top;
+
font-size:115%;
-
background-color:#993399;
+
-
border-width:0px;
+
-
border-style:none;
+
-
border-color:transparent;
+
text-align:center;
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#h2igemmenupurple ul li {
+
div.descriptive_text{
-
float:none;
+
/*We must observe div.left_image to deffine the appropiate top-margin value*/
-
}
+
margin: 40px 0px 0px 0px;
-
ul#h2igemmenupurple ul a,ul#h2igemmenupurple ul li.dis a:hover{
+
padding: 20px 20px 20px 20px;
-
display:block;
+
-
text-align:left;
+
-
white-space:nowrap;
+
-
}
+
-
ul#h2igemmenupurple li:hover>a{
+
-
background-color:#660066;
+
-
border-color:transparent;
+
-
border-style:none;
+
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
-
}
+
-
ul#h2igemmenupurple li a:hover{
+
-
_position:relative;
+
-
background-color:#660066;
+
-
border-color:transparent;
+
-
border-style:none;
+
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
-
}
+
-
ul#h2igemmenupurple li.dis a{
+
-
color: #AAAAAA !important;
+
-
}
+
-
ul#h2igemmenupurple img{
+
border:none;
border:none;
-
vertical-align:middle;
+
font-size:110%;
-
margin-right:22px;
+
}
}
-
ul#h2igemmenupurple img.over{
+
 
-
display:none
+
p.title{
 +
color:#CC4455;
 +
font-size:150%;
}
}
-
ul#h2igemmenupurple li.dis a:hover img.over{
+
 
-
display:none !important
+
#container {
-
}
+
margin: 0px auto;
-
ul#h2igemmenupurple li.dis a:hover img.def {
+
text-align:justify;
-
display:inline !important
+
width: 100%;
-
}
+
background-color: #F0F0F0;
-
ul#h2igemmenupurple li:hover > a img.def  {
+
        background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
-
display:none
+
background-repeat: repeat;
 +
color:#000000;
 +
font-size: 110%;
}
}
-
ul#h2igemmenupurple li:hover > a img.over {display:inline}
 
-
ul#h2igemmenupurple a:hover img.over,ul#h2igemmenupurple a:hover ul img.def,ul#h2igemmenupurple a:hover a:hover ul img.def,ul#h2igemmenupurple a:hover a:hover img.over,ul#h2igemmenupurple a:hover a:hover a:hover img.over{display:inline}
+
/*TEXT CONTENT*/
-
ul#h2igemmenupurple a:hover img.def,ul#h2igemmenupurple a:hover ul img.over,ul#h2igemmenupurple a:hover a:hover ul img.over,ul#h2igemmenupurple a:hover a:hover img.def,ul#h2igemmenupurple a:hover a:hover a:hover img.def{display:none}
+
div#textContent{
 +
background-color: #F0F0F0;
 +
        background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
 +
background-repeat: repeat;
 +
margin: 0px 0px 0px 0px;
 +
padding: 35px 35px 35px 35px;
-
ul#h2igemmenupurple a:hover ul,ul#h2igemmenupurple a:hover a:hover ul{display:block}
+
}
-
ul#h2igemmenupurple a:hover ul ul{display:none}
+
div#textContent p{
 +
margin: .4em 0 .5em 0;
 +
line-height: 1.5em;
 +
}
-
ul#h2igemmenupurple span{
 
-
display:block;overflow:visible;background-position:right center;background-repeat: no-repeat;padding-right:0px;}
+
#textContent a{
 +
text-decoration: underline;
 +
color: #008800; /*green*/
-
ul#h2igemmenupurple ul span{background-image:url(imgs/arr_white.gif);padding-right:29px;}
+
}
 +
#textContent a:visited{
 +
color: #540054; /*lighter green*/
 +
        text-decoration: underline;
 +
}
-
ul#h2igemmenupurple li a.istylei0purple,ul#h2igemmenupurple li.dis.istylei0purple:hover a.istylei0purple{
+
#textContent a.anchor{
-
height:25px;
+
color: #000000;
-
background-color:#993399;
+
}
-
border-width:0px;
+
#tableabi{
-
border-style:none;
+
background:white;
-
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#h2igemmenupurple li.istylei0purple:hover>a{
+
/*menu css*/
-
background-color:#993399;
+
span.reference{
-
border-style:none;
+
position:fixed;
-
font:bold 14px Trebuchet MS;
+
left:0px;
-
color:#FFFFFF;
+
bottom:0px;
 +
font-size:12px;
 +
}
 +
 +
span.reference a{
 +
color:#FFF;
 +
text-transform:uppercase;
text-decoration:none;
text-decoration:none;
 +
text-shadow:1px 1px 1px #000;
 +
margin-right:200px;
}
}
-
ul#h2igemmenupurple li.istylei0purple,ul#h2igemmenupurple li.dis.istylei0purple:hover{
+
span.reference a:hover{
-
margin:0 10px 0 0;
+
color:#ddd;
-
background-color:#993399;
+
-
background-position:0 0;
+
}
}
-
ul#h2igemmenupurple li.istylei0purple:hover{
+
ul.menu_unamgenomics{
-
background-color:#993399;
+
margin-top:0px;
-
}
+
width:1000px;
 +
align:center;
-
ul#h2igemmenupurple li a.istylei0purple:hover{
 
-
background-color:#660066;
 
-
border-style:none;
 
-
font:bold 14px Trebuchet MS;
 
-
color:#FFFFFF;
 
-
text-decoration:none;
 
-
font-weight: bold;
 
}
}
-
ul#h2igemmenupurple.istylem0purple,ul#h2igemmenupurple ul.istylem0purple{
+
 
-
background-color:transparent;
+
-
border-width:0px;
+
ul.menu_unamgenomics{
-
border-style:none;
+
color:#000;
 +
margin:0;
padding:0;
padding:0;
 +
list-style: none;
 +
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 +
font-size:14px;
 +
width:976;
 +
        font-weight: bold;
}
}
-
ul#h2igemmenupurple ul.istylem0purple li{
+
ul.menu_unamgenomics a{
-
margin:0;
+
text-decoration:none;
 +
outline:none;
}
}
-
ul#h2igemmenupurple.istylem0purple li a,ul#h2igemmenupurple ul.istylem0purple li a,ul#h2igemmenupurple.istylem0purple li.dis a:hover,ul#h2igemmenupurple ul.istylem0purple li.dis a:hover{
+
ul.menu_unamgenomics li{
-
padding:5px 5px 5px 5px;
+
float:left;
 +
width:162px;
 +
height:95px;
 +
position:relative;
 +
cursor:pointer;
}
}
-
/*Orange part*/
+
ul.menu_unamgenomics li > a{
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:162px;
 +
height:95px;
 +
z-index:12;
 +
background:transparent url(../images/overlay.png) no-repeat bottom right;
 +
color: #FFF;
 +
background-color: #FFFFFF;
 +
}
 +
 
 +
ul.menu_unamgenomics li a img{
 +
border:none;
 +
position:absolute;
 +
width:0px;
 +
height:0px;
 +
bottom:0px;
 +
left:85px;
 +
z-index:300;
-
ul#h2igemmenuOrange ul{
 
-
display:none
 
}
}
-
ul#h2igemmenuOrange li:hover>*{
+
 
-
display:block
+
ul.menu_unamgenomics li span.sdt_wrap{
 +
position:absolute;
 +
top:25px;
 +
left:0px;
 +
width:162px;
 +
height:60px;
 +
z-index:150;
}
}
-
ul#h2igemmenuOrange li:hover{
+
 
-
position:relative;
+
ul.menu_unamgenomics li span.menu_unamgenomics_activo{
-
}
+
-
ul#h2igemmenuOrange ul{
+
-
position: absolute;
+
-
left:-1px;
+
-
top:100%;
+
-
}
+
-
ul#h2igemmenuOrange ul ul{
+
position:absolute;
position:absolute;
-
left:98%;
+
background:#FFF;
-
top:-2px;
+
top:85px;
 +
width:162px;
 +
height:0px;
 +
left:0px;
 +
z-index:140;
 +
}
}
-
ul#h2igemmenuOrange,ul#h2igemmenuOrange ul{
+
 
-
margin:0px;
+
ul.menu_unamgenomics li span span.menu_links,
-
list-style:none;
+
ul.menu_unamgenomics li span span.menu_descripcion,
-
padding:0px;
+
ul.menu_unamgenomics li div.menu_caja a{
-
background-image:#CCC;
+
margin-left:15px;
-
border-width:0px;
+
text-transform:uppercase;
-
border-style:none;
+
        font-weight: bold;
-
border-color:transparent;
+
}
}
-
ul#h2igemmenuOrange table {
+
 
-
border-collapse:collapse
+
ul.menu_unamgenomics li span span.menu_links{
-
}
+
color:#000;
-
ul#h2igemmenuOrange {
+
font-size:24px;
-
display:block;
+
-
font-size:0;
+
-
zoom:1;
+
-
width:100%;
+
-
float: left;
+
-
}
+
-
ul#h2igemmenuOrange ul{
+
-
//width:204px;
+
-
padding:0;
+
-
}
+
-
ul#h2igemmenuOrange li{
+
-
display:block;
+
-
zoom:1;
+
-
margin:0;
+
-
font-size:0;
+
float:left;
float:left;
 +
clear:both;
}
}
-
ul#h2igemmenuOrange a:active, ul#h2igemmenuOrange a:focus {
+
 
-
outline-style:none
+
ul.menu_unamgenomics li span span.menu_descripcion{
 +
color:#0B75AF;
 +
float:left;
 +
clear:both;
 +
width:162px; /*For dumbass IE7*/
 +
font-size:11px;
 +
letter-spacing:1px;
}
}
-
ul#h2igemmenuOrange a,ul#h2igemmenuOrange li.dis a:hover{
+
 
 +
ul.menu_unamgenomics li div.menu_caja{
display:block;
display:block;
-
vertical-align:middle;
+
position:absolute;
-
_display:inline-block;
+
width:162px;
-
_vertical-align:top;
+
overflow:hidden;
-
background-color:#FF9933;
+
height:auto;
-
border-width:0px;
+
top:85px;
-
border-style:none;
+
left:0px;
-
border-color:transparent;
+
display:none;
-
text-align:center;
+
background-color: #FFF;
-
text-decoration:none;
+
        z-index: 40;
-
padding:11px 15px 5px 5px;
+
-
_padding-left:0;
+
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
-
cursor:pointer;
+
}
}
-
ul#h2igemmenuOrange ul li {
+
 
-
float:none;
+
ul.menu_unamgenomics li div.menu_caja a{
 +
float:left;
 +
clear:both;
 +
line-height:30px;
 +
color:#0B75AF;
}
}
-
ul#h2igemmenuOrange ul a,ul#h2igemmenuOrange ul li.dis a:hover{
+
 
-
display:block;
+
ul.menu_unamgenomics li div.menu_caja a:first-child{
-
text-align:left;
+
margin-top:15px;
-
white-space:nowrap;
+
}
}
-
ul#h2igemmenuOrange li:hover>a{
+
 
-
background-color:#CC6600;
+
ul.menu_unamgenomics li div.menu_caja a:hover{
-
border-color:transparent;
+
color:#F60;
-
border-style:none;
+
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
}
}
-
ul#h2igemmenuOrange li a:hover{
+
 
-
_position:relative;
+
/* Extra code to get the bottom three to behave */
-
background-color:#CC6600;
+
 
-
border-color:transparent;
+
#tablecontentbg{
-
border-style:none;
+
background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
}
}
-
ul#h2igemmenuOrange li.dis a{
+
#contentcolumnwhite{
-
color: #AAAAAA !important;
+
width: 282px;
-
}
+
height=150px;
-
ul#h2igemmenuOrange img{
+
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
-
border:none;
+
background: #ffffff;
-
vertical-align:middle;
+
-webkit-box-shadow: 5px 5px 8px #818181;
-
margin-right:22px;
+
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
}
}
-
ul#h2igemmenuOrange img.over{
+
#contentcolumnblack{
-
display:none
+
width: 282px;
 +
height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #000000;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
}
}
-
ul#h2igemmenuOrange li.dis a:hover img.over{
+
#contentcolumn{
-
display:none !important
+
width: 282px;
 +
height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #c3ddf6;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
}
}
-
ul#h2igemmenuOrange li.dis a:hover img.def {
+
 
-
display:inline !important
+
#contentcolumn2{
 +
width: 282px;
 +
height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #c3ddf6;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
}
}
-
ul#h2igemmenuOrange li:hover > a img.def  {
 
-
display:none
 
 +
#contentcolumn3{
 +
width: 282px;
 +
height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #c3ddf6;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
}
 +
#contentcolumn2bg{
 +
background: #c3ddf6;
}
}
-
ul#h2igemmenuOrange li:hover > a img.over {display:inline}
 
-
ul#h2igemmenuOrange a:hover img.over,ul#h2igemmenuOrange a:hover ul img.def,ul#h2igemmenuOrange a:hover a:hover ul img.def,ul#h2igemmenuOrange a:hover a:hover img.over,ul#h2igemmenuOrange a:hover a:hover a:hover img.over{display:inline}
+
#leftcolumn{
 +
height=150px;
 +
width: 282px; /*Width of left column in percentage*/
 +
margin-left: 0px;
 +
background: #ff8243;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topright: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
-
ul#h2igemmenuOrange a:hover img.def,ul#h2igemmenuOrange a:hover ul img.over,ul#h2igemmenuOrange a:hover a:hover ul img.over,ul#h2igemmenuOrange a:hover a:hover img.def,ul#h2igemmenuOrange a:hover a:hover a:hover img.def{display:none}
+
}
-
ul#h2igemmenuOrange a:hover ul,ul#h2igemmenuOrange a:hover a:hover ul{display:block}
+
#leftcolumn2{
 +
height=150px;
 +
width: 282px; /*Width of left column in percentage*/
 +
margin-left: 0px;
 +
background: #ff8243;
 +
-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;
-
ul#h2igemmenuOrange a:hover ul ul{display:none}
+
}
-
ul#h2igemmenuOrange span{
+
#leftcolumn3{
 +
height=150px;
 +
width: 282px; /*Width of left column in percentage*/
 +
margin-left: 0px;
 +
background: #ff8243;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
-
display:block;overflow:visible;background-position:right center;background-repeat: no-repeat;padding-right:0px;}
 
-
ul#h2igemmenuOrange ul span{background-image:url(imgs/arr_white.gif);padding-right:29px;}
 
-
 
-
ul#h2igemmenuOrange li a.istylei0orange,ul#h2igemmenuOrange li.dis.istylei0orange:hover a.istylei0orange{
 
-
height:25px;
 
-
background-color:#FF9933;
 
-
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;
 
}
}
-
 
+
#leftcolumn2bg{
-
ul#h2igemmenuOrange li.istylei0orange:hover>a{
+
background: #ff8243;
-
background-color:#FF9933;
+
-
border-style:none;
+
-
font:bold 14px Trebuchet MS;
+
-
color:#FFFFFF;
+
-
text-decoration:none;
+
}
}
-
ul#h2igemmenuOrange li.istylei0orange,ul#h2igemmenuOrange li.dis.istylei0orange:hover{
+
#rightcolumn{
-
margin:0 10px 0 0;
+
height=150px;
-
background-color:#FF9933;
+
width: 282px; /*Width of right column*/
-
background-position:0 0;
+
margin-left: 624px; /*Set margin to -(RightColumnWidth)*/
 +
background: #bdda57;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-bottomleft: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
}
}
-
ul#h2igemmenuOrange li.istylei0orange:hover{
+
#rightcolumn2{
-
background-color:#FF9933;
+
height=150px;
-
}
+
width: 282px; /*Width of right column*/
 +
margin-left: 624px; /*Set margin to -(RightColumnWidth)*/
 +
background: #bdda57;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topright: 25px;
 +
-moz-border-radius-bottomleft: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
-
ul#h2igemmenuOrange li a.istylei0orange:hover{
 
-
background-color:#CC6600;
 
-
border-style:none;
 
-
font:bold 14px Trebuchet MS;
 
-
color:#FFFFFF;
 
-
text-decoration:none;
 
-
font-weight: bold;
 
}
}
-
ul#h2igemmenuOrange.istylem0orange,ul#h2igemmenuOrange ul.istylem0orange{
+
#rightcolumn3{
-
background-color:transparent;
+
height=150px;
-
border-width:0px;
+
width: 282px; /*Width of right column*/
-
border-style:none;
+
margin-left: 624px; /*Set margin to -(RightColumnWidth)*/
-
padding:0;
+
background: #bdda57;
 +
-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;
}
}
-
ul#h2igemmenuOrange ul.istylem0orange li{
+
#rightcolumn2bg{
-
margin:0;
+
background: #bdda57;
}
}
-
ul#h2igemmenuOrange.istylem0orange li a,ul#h2igemmenuOrange ul.istylem0orange li a,ul#h2igemmenuOrange.istylem0orange li.dis a:hover,ul#h2igemmenuOrange ul.istylem0orange li.dis a:hover{
 
-
padding:5px 5px 5px 5px;
 
-
}
 
-
/* GREEN */
+
/*on hover stuff*/
-
ul#h2igemmenuGreen ul{
+
.thumbnailWrapper { width:600px; display:block; padding-right:30px; } /* not important */
-
display:none
+
 +
.thumbnailWrapper ul {  
 +
list-style-type: none; /* remove the default style for list items (the circles) */
 +
margin:0px; /* remove default margin */
 +
padding:0px; /* remove default padding */
}
}
-
ul#h2igemmenuGreen li:hover>*{
+
 
-
display:block
+
.thumbnailWrapper ul li {
 +
float:left; /* important: left float */
 +
position:relative; /* so we can use top and left positioning */
 +
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
}
}
-
ul#h2igemmenuGreen li:hover{
+
 
-
position:relative;
+
.thumbnailWrapper ul li a img {  
 +
height:300px; /* not important, the pics we use here are too big */
 +
position:relative; /* so we can use top and left positioning */
 +
border:none; /* remove the default blue border */
}
}
-
ul#h2igemmenuGreen ul{
+
 
-
position: absolute;
+
.captiongray{
-
left:-1px;
+
position:absolute; /* needed for positioning */
-
top:100%;
+
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#444444;
 +
color:white;
 +
opacity:0.8;
}
}
-
ul#h2igemmenuGreen ul ul{
+
 
-
position:absolute;
+
.captiongray .captionInside{
-
left:98%;
+
/* just styling */
-
top:-2px;
+
padding:10px;
 +
margin:0px;
}
}
-
ul#h2igemmenuGreen,ul#h2igemmenuGreen ul{
+
 
-
margin:0px;
+
.clear { clear:both; } /* to clear the float after the last item */
-
list-style:none;
+
-
padding:0px;
+
.captionmorado{
-
background-image:#CCC;
+
position:absolute; /* needed for positioning */
-
border-width:0px;
+
bottom:0px; /* bottom of the list item (container) */
-
border-style:none;
+
left:0px; /* start from left of the list item (container) */
-
border-color:transparent;
+
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#600080;
 +
color:white;
 +
opacity:0.8;
}
}
-
ul#h2igemmenuGreen table {
+
 
-
border-collapse:collapse
+
.captionmorado .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
}
}
-
ul#h2igemmenuGreen {
+
.clear { clear:both; } /* to clear the float after the last item */
-
display:block;
+
-
font-size:0;
+
.captionmoradoclaro{
-
zoom:1;
+
position:absolute; /* needed for positioning */
-
width:100%;
+
bottom:0px; /* bottom of the list item (container) */
-
float: left;
+
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#6600ff;
 +
color:white;
 +
opacity:0.8;
}
}
-
ul#h2igemmenuGreen ul{
+
 
-
//width:204px;
+
.captionmoradoclaro .captionInside{
-
padding:0;
+
/* just styling */
 +
padding:10px;
 +
margin:0px;
}
}
-
ul#h2igemmenuGreen li{
+
.clear { clear:both; } /* to clear the float after the last item */
-
display:block;
+
-
zoom:1;
+
.captionnaranja{
-
margin:0;
+
position:absolute; /* needed for positioning */
-
font-size:0;
+
bottom:0px; /* bottom of the list item (container) */
-
float:left;
+
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#ff751a;
 +
color:white;
 +
opacity:0.8;
}
}
-
ul#h2igemmenuGreen a:active, ul#h2igemmenuGreen a:focus {
+
 
-
outline-style:none
+
.captionnaranja .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
}
}
-
ul#h2igemmenuGreen a,ul#h2igemmenuGreen li.dis a:hover{
+
.clear { clear:both; } /* to clear the float after the last item */
-
display:block;
+
-
vertical-align:middle;
+
.captionrojo{
-
_display:inline-block;
+
position:absolute; /* needed for positioning */
-
_vertical-align:top;
+
bottom:0px; /* bottom of the list item (container) */
-
background-color:#00CC66;
+
left:0px; /* start from left of the list item (container) */
-
border-width:0px;
+
width:100%; /* stretch to the whole width of container */
-
border-style:none;
+
height:90%;
-
border-color:transparent;
+
display:none; /* hide by default */
-
text-align:center;
+
/* styling bellow */
-
text-decoration:none;
+
background:#cc0000;
-
padding:11px 15px 5px 5px;
+
color:white;
-
_padding-left:0;
+
opacity:0.8;
-
font:bold 8pt Verdana;
+
-
color: #FFFFFF;
+
-
text-decoration:none;
+
-
cursor:pointer;
+
}
}
-
ul#h2igemmenuGreen ul li {
+
 
-
float:none;
+
.captionrojo .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
}
}
-
ul#h2igemmenuGreen ul a,ul#h2igemmenuGreen ul li.dis a:hover{
+
.clear { clear:both; } /* to clear the float after the last item */
-
display:block;
+
-
text-align:left;
+
.captionrosa{
-
white-space:nowrap;
+
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#cc0099;
 +
color:white;
 +
opacity:0.8;
}
}
-
ul#h2igemmenuGreen li:hover>a{
+
 
-
background-color:#669999;
+
.captionrosa .captionInside{
-
border-color:transparent;
+
/* just styling */
-
border-style:none;
+
padding:10px;
-
font:bold 8pt Verdana;
+
margin:0px;
-
color: #FFFFFF;
+
-
text-decoration:none;
+
}
}
-
ul#h2igemmenuGreen li a:hover{
+
.clear { clear:both; } /* to clear the float after the last item */
-
_position:relative;
+
 
-
background-color:#669999;
+
.captionverde{
-
border-color:transparent;
+
position:absolute; /* needed for positioning */
-
border-style:none;
+
bottom:0px; /* bottom of the list item (container) */
-
font:bold 8pt Verdana;
+
left:0px; /* start from left of the list item (container) */
-
color: #FFFFFF;
+
width:100%; /* stretch to the whole width of container */
-
text-decoration:none;
+
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#009966;
 +
color:white;
 +
opacity:0.8;
}
}
-
ul#h2igemmenuGreen li.dis a{
+
.captionverde .captionInside{
-
color: #AAAAAA !important;
+
/* just styling */
-
}
+
padding:10px;
-
ul#h2igemmenuGreen img{
+
margin:0px;
-
border:none;
+
-
vertical-align:middle;
+
-
margin-right:22px;
+
}
}
-
ul#h2igemmenuGreen img.over{
+
.clear { clear:both; } /* to clear the float after the last item */
-
display:none
+
 
 +
.captionaqua{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#009a9a;
 +
color:white;
 +
opacity:0.8;
}
}
-
ul#h2igemmenuGreen li.dis a:hover img.over{
+
.captionaqua .captionInside{
-
display:none !important
+
/* just styling */
 +
padding:10px;
 +
margin:0px;
}
}
-
ul#h2igemmenuGreen li.dis a:hover img.def {
+
.clear { clear:both; } /* to clear the float after the last item */
-
display:inline !important
+
 +
.captionazul{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#5d8aa8 ;
 +
color:white;
 +
opacity:0.8;
}
}
-
ul#h2igemmenuGreen li:hover > a img.def  {
+
.captionazul .captionInside{
-
display:none
+
/* just styling */
-
 
+
padding:10px;
 +
margin:0px;
}
}
-
ul#h2igemmenuGreen li:hover > a img.over {display:inline}
+
.clear { clear:both; } /* to clear the float after the last item *
 +
</style>
 +
</head>
-
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}
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
ul#h2igemmenuGreen a:hover ul ul{display:none}
 
-
ul#h2igemmenuGreen span{
+
<script type="text/javascript">
 +
/*
 +
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 +
*
 +
* Uses the built in easing capabilities added In jQuery 1.1
 +
* to offer multiple easing options
 +
*
 +
* TERMS OF USE - jQuery Easing
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright 2008 George McGinley Smith
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
-
display:block;overflow:visible;background-position:right center;background-repeat: no-repeat;padding-right:0px;}
+
// t: current time, b: begInnIng value, c: change In value, d: duration
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
-
ul#h2igemmenuGreen ul span{background-image:url(imgs/arr_white.gif);padding-right:29px;}
+
jQuery.extend( jQuery.easing,
 +
{
 +
def: 'easeOutQuad',
 +
swing: function (x, t, b, c, d) {
 +
//alert(jQuery.easing.default);
 +
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 +
},
 +
easeInQuad: function (x, t, b, c, d) {
 +
return c*(t/=d)*t + b;
 +
},
 +
easeOutQuad: function (x, t, b, c, d) {
 +
return -c *(t/=d)*(t-2) + b;
 +
},
 +
easeInOutQuad: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t + b;
 +
return -c/2 * ((--t)*(t-2) - 1) + b;
 +
},
 +
easeInCubic: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t + b;
 +
},
 +
easeOutCubic: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t + 1) + b;
 +
},
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
return c/2*((t-=2)*t*t + 2) + b;
 +
},
 +
easeInQuart: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t + b;
 +
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
-
ul#h2igemmenuGreen li a.istylei0green,ul#h2igemmenuGreen li.dis.istylei0green:hover a.istylei0green{
+
/*
-
height:25px;
+
*
-
background-color:#00CC66;
+
* TERMS OF USE - EASING EQUATIONS
-
border-width:0px;
+
*
-
border-style:none;
+
* Open source under the BSD License.  
-
font:bold 14px Trebuchet MS;
+
*
-
color:#FFFFFF;
+
* Copyright 2001 Robert Penner
-
text-decoration:none;
+
* All rights reserved.
-
margin:0 -10px 0 10px;
+
*
-
_margin:0 0 0 0;
+
* Redistribution and use in source and binary forms, with or without modification,
-
background-position:100% 0;
+
* are permitted provided that the following conditions are met:
-
}
+
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
 +
</script>
-
ul#h2igemmenuGreen li.istylei0green:hover>a{
+
        <script type="text/javascript">
-
background-color:#00CC66;
+
            $(function() {
-
border-style:none;
+
/**
-
font:bold 14px Trebuchet MS;
+
* for each menu element, on mouseenter,
-
color:#FFFFFF;
+
* we enlarge the image, and show both menu_unamgenomics_activo span and
-
text-decoration:none;
+
* sdt_wrap span. If the element has a sub menu (menu_caja),
-
}
+
* then we slide it - if the element is the last one in the menu
 +
* we slide it to the left, otherwise to the right
 +
*/
 +
                $('#menu_unamgenomics > li').bind('mouseenter',function(){
-
ul#h2igemmenuGreen li.istylei0green,ul#h2igemmenuGreen li.dis.istylei0green:hover{
+
var $elem = $(this);
-
margin:0 10px 0 0;
+
$elem.find('img')
-
background-color:#00CC66;
+
.stop(true)
-
background-position:0 0;
+
.animate({
-
}
+
'width':'155px',
 +
'height':'155px',
 +
'left':'0px'
 +
},400,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
    .stop(true)
 +
.animate({'top':'140px'},500,'easeOutBack')
 +
.andSelf()
 +
.find('.menu_unamgenomics_activo')
 +
    .stop(true)
 +
.animate({'height':'155px'},300,function(){
 +
var $sub_menu = $elem.find('.menu_caja');
 +
if($sub_menu.length){
 +
var left = '155px';
 +
if($elem.parent().children().length == $elem.index()+1)
 +
left = '-155px';
 +
$sub_menu.show().animate({'left':left},200);
 +
}
 +
});
 +
}).bind('mouseleave',function(){
 +
var $elem = $(this);
 +
var $sub_menu = $elem.find('.menu_caja');
 +
if($sub_menu.length)
 +
$sub_menu.hide().css('left','0px');
 +
 +
$elem.find('.menu_unamgenomics_activo')
 +
.stop(true)
 +
.animate({'height':'0px'},300)
 +
.andSelf().find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'0px',
 +
'height':'0px',
 +
'left':'85px'},400)
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'25px'},500);
 +
});
 +
            });
 +
        </script>
-
ul#h2igemmenuGreen li.istylei0green:hover{
+
<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
-
background-color:#00CC66;
+
<script type="text/javascript" charset="utf-8">
-
}
+
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captiongray:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captiongray').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionmorado:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionmorado').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
      <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionmoradoclaro:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionmoradoclaro').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionnaranja:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionnaranja').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionrojo:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionrojo').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionrosa:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionrosa').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionverde:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionverde').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionaqua:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionaqua').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionazul:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionazul').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
<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;
-
ul#h2igemmenuGreen li a.istylei0green:hover{
+
    $('.top-slider-main div:not(.slider-box1) .left').mouseover(function(){
-
background-color:#669999;
+
        var $slider_index = $('.top-slider-main > div').index($(this).parent()) + 1;
-
border-style:none;
+
        if($(this).parent().hasClass('on'))
-
font:bold 14px Trebuchet MS;
+
        {
-
color:#FFFFFF;
+
            if($slider_started != 1)
-
text-decoration:none;
+
            {
-
font-weight: bold;
+
                $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>
-
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;
 
-
}
 
-
 
-
 
-
 
-
 
-
</style>
 
-
</head>
 
</html>
</html>

Latest revision as of 20:28, 25 October 2012


UNAM-Genomics_Mexico

Retrieved from "http://2012.igem.org/Template:Team:UNAM_Genomics_Mexico/Templates/menulike"