Template:Team:UNAM Genomics Mexico/Templates/menulike

From 2012.igem.org

(Difference between revisions)
Line 605: Line 605:
/*on hover stuff*/
/*on hover stuff*/
-
.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
+
.thumbnailWrapper { width:600px; margin:0px auto; } /* not important */
-
.thumbnailWrapper ul {  
+
.thumbnailWrapper ul {  
-
list-style-type: none; /* remove the default style for list items (the circles) */  
+
list-style-type: none; /* remove the default style for list items (the circles) */  
-
margin:0px; /* remove default margin */
+
margin:0px; /* remove default margin */
-
padding:0px; /* remove default padding */
+
padding:0px; /* remove default padding */
-
}
+
}
-
.thumbnailWrapper ul li {  
+
 
-
float:left; /* important: left float */
+
.thumbnailWrapper ul li {  
-
position:relative; /* so we can use top and left positioning */
+
float:left; /* important: left float */
-
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
+
position:relative; /* so we can use top and left positioning */
-
}
+
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
-
.thumbnailWrapper ul li a img {  
+
}
-
width:200px; /* not important, the pics we use here are too big */
+
 
-
position:relative; /* so we can use top and left positioning */
+
.thumbnailWrapper ul li a img {  
-
border:none; /* remove the default blue border */
+
width:200px; /* not important, the pics we use here are too big */
-
}
+
position:relative; /* so we can use top and left positioning */
-
.captiongray{
+
border:none; /* remove the default blue border */
-
position:absolute; /* needed for positioning */
+
}
-
bottom:0px; /* bottom of the list item (container) */
+
 
-
left:0px; /* start from left of the list item (container) */
+
.captiongray{
-
width:100%; /* stretch to the whole width of container */
+
position:absolute; /* needed for positioning */
-
height:100%;
+
bottom:0px; /* bottom of the list item (container) */
-
display:none; /* hide by default */
+
left:0px; /* start from left of the list item (container) */
-
/* styling bellow */
+
width:100%; /* stretch to the whole width of container */
-
    background:#444444;
+
height:100%;
-
color:white;
+
display:none; /* hide by default */
-
opacity:0.8;
+
/* styling bellow */
 +
background:#444444;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
 
 +
.captiongray .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
 
 +
.clear { clear:both; } /* to clear the float after the last item */
-
}
+
.captionmorado{
-
.captiongray .captionInside{
+
position:absolute; /* needed for positioning */
-
/* just styling */
+
bottom:0px; /* bottom of the list item (container) */
-
padding:10px;
+
left:0px; /* start from left of the list item (container) */
-
margin:0px;
+
width:100%; /* stretch to the whole width of container */
-
}
+
height:100%;
-
.clear { clear:both; } /* to clear the float after the last item */
+
display:none; /* hide by default */
-
+
/* styling bellow */
-
.captionmorado{
+
background:#600080;
-
position:absolute; /* needed for positioning */
+
color:white;
-
bottom:0px; /* bottom of the list item (container) */
+
opacity:0.8;
-
left:0px; /* start from left of the list item (container) */
+
}
-
width:100%; /* stretch to the whole width of container */
+
 
-
height:100%;
+
.captionmorado .captionInside{
-
display:none; /* hide by default */
+
/* just styling */
-
/* styling bellow */
+
padding:10px;
-
    background:#600080;
+
margin:0px;
-
color:white;
+
}
-
opacity:0.8;
+
.clear { clear:both; } /* to clear the float after the last item */
-
}
+
.captionmoradoclaro{
-
.captionmorado .captionInside{
+
position:absolute; /* needed for positioning */
-
/* just styling */
+
bottom:0px; /* bottom of the list item (container) */
-
padding:10px;
+
left:0px; /* start from left of the list item (container) */
-
margin:0px;
+
width:100%; /* stretch to the whole width of container */
-
}
+
height:100%;
-
.clear { clear:both; } /* to clear the float after the last item */
+
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#6600ff;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
 
 +
.captionmoradoclaro .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
-
.captionmoradoclaro{
+
.captionnaranja{
-
position:absolute; /* needed for positioning */
+
position:absolute; /* needed for positioning */
-
bottom:0px; /* bottom of the list item (container) */
+
bottom:0px; /* bottom of the list item (container) */
-
left:0px; /* start from left of the list item (container) */
+
left:0px; /* start from left of the list item (container) */
-
width:100%; /* stretch to the whole width of container */
+
width:100%; /* stretch to the whole width of container */
-
height:100%;
+
height:100%;
-
display:none; /* hide by default */
+
display:none; /* hide by default */
-
/* styling bellow */
+
/* styling bellow */
-
    background:#6600ff;
+
background:#ff751a;
-
color:white;
+
color:white;
-
opacity:0.8;
+
opacity:0.8;
 +
}
 +
 
 +
.captionnaranja .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
-
}
+
.captionrojo{
-
.captionmoradoclaro .captionInside{
+
position:absolute; /* needed for positioning */
-
/* just styling */
+
bottom:0px; /* bottom of the list item (container) */
-
padding:10px;
+
left:0px; /* start from left of the list item (container) */
-
margin:0px;
+
width:100%; /* stretch to the whole width of container */
-
}
+
height:100%;
-
.clear { clear:both; } /* to clear the float after the last item */
+
display:none; /* hide by default */
-
+
/* styling bellow */
-
.captionnaranja{
+
background:#cc0000;
-
position:absolute; /* needed for positioning */
+
color:white;
-
bottom:0px; /* bottom of the list item (container) */
+
opacity:0.8;
-
left:0px; /* start from left of the list item (container) */
+
}
-
width:100%; /* stretch to the whole width of container */
+
 
-
height:100%;
+
.captionrojo .captionInside{
-
display:none; /* hide by default */
+
/* just styling */
-
/* styling bellow */
+
padding:10px;
-
    background:#ff751a;
+
margin:0px;
-
color:white;
+
}
-
opacity:0.8;
+
.clear { clear:both; } /* to clear the float after the last item */
-
}
+
.captionrosa{
-
.captionnaranja .captionInside{
+
position:absolute; /* needed for positioning */
-
/* just styling */
+
bottom:0px; /* bottom of the list item (container) */
-
padding:10px;
+
left:0px; /* start from left of the list item (container) */
-
margin:0px;
+
width:100%; /* stretch to the whole width of container */
-
}
+
height:100%;
-
.clear { clear:both; } /* to clear the float after the last item */
+
display:none; /* hide by default */
-
+
/* styling bellow */
-
.captionrojo{
+
background:#cc0099;
-
position:absolute; /* needed for positioning */
+
color:white;
-
bottom:0px; /* bottom of the list item (container) */
+
opacity:0.8;
-
left:0px; /* start from left of the list item (container) */
+
}
-
width:100%; /* stretch to the whole width of container */
+
 
-
height:100%;
+
.captionrosa .captionInside{
-
display:none; /* hide by default */
+
/* just styling */
-
/* styling bellow */
+
padding:10px;
-
    background:#cc0000;
+
margin:0px;
-
color:white;
+
}
-
opacity:0.8;
+
.clear { clear:both; } /* to clear the float after the last item */
-
+
 
-
}
+
.captionverde{
-
.captionrojo .captionInside{
+
position:absolute; /* needed for positioning */
-
/* just styling */
+
bottom:0px; /* bottom of the list item (container) */
-
padding:10px;
+
left:0px; /* start from left of the list item (container) */
-
margin:0px;
+
width:100%; /* stretch to the whole width of container */
-
}
+
height:100%;
-
.clear { clear:both; } /* to clear the float after the last item */
+
display:none; /* hide by default */
-
+
/* styling bellow */
-
.captionrosa{
+
background:#009966;
-
position:absolute; /* needed for positioning */
+
color:white;
-
bottom:0px; /* bottom of the list item (container) */
+
opacity:0.8;
-
left:0px; /* start from left of the list item (container) */
+
}
-
width:100%; /* stretch to the whole width of container */
+
.captionverde .captionInside{
-
height:100%;
+
/* just styling */
-
display:none; /* hide by default */
+
padding:10px;
-
/* styling bellow */
+
margin:0px;
-
    background:#cc0099;
+
}
-
color:white;
+
.clear { clear:both; } /* to clear the float after the last item */
-
opacity:0.8;
+
 
-
+
.captionaqua{
-
}
+
position:absolute; /* needed for positioning */
-
.captionrosa .captionInside{
+
bottom:0px; /* bottom of the list item (container) */
-
/* just styling */
+
left:0px; /* start from left of the list item (container) */
-
padding:10px;
+
width:100%; /* stretch to the whole width of container */
-
margin:0px;
+
height:100%;
-
}
+
display:none; /* hide by default */
-
.clear { clear:both; } /* to clear the float after the last item */
+
/* styling bellow */
-
+
background:#009a9a;
-
.captionverde{
+
color:white;
-
position:absolute; /* needed for positioning */
+
opacity:0.8;
-
bottom:0px; /* bottom of the list item (container) */
+
}
-
left:0px; /* start from left of the list item (container) */
+
.captionaqua .captionInside{
-
width:100%; /* stretch to the whole width of container */
+
/* just styling */
-
height:100%;
+
padding:10px;
-
display:none; /* hide by default */
+
margin:0px;
-
/* styling bellow */
+
}
-
    background:#009966;
+
.clear { clear:both; } /* to clear the float after the last item */
-
color:white;
+
-
opacity:0.8;
+
-
+
-
}
+
-
.captionverde .captionInside{
+
-
/* just styling */
+
-
padding:10px;
+
-
margin:0px;
+
-
}
+
-
.clear { clear:both; } /* to clear the float after the last item */
+
-
+
-
.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:100%;
+
-
display:none; /* hide by default */
+
-
/* styling bellow */
+
-
    background:#009a9a;
+
-
color:white;
+
-
opacity:0.8;
+
-
+
-
}
+
-
.captionaqua .captionInside{
+
-
/* just styling */
+
-
padding:10px;
+
-
margin:0px;
+
-
}
+
-
.clear { clear:both; } /* to clear the float after the last item */
+
-
+
-
.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:100%;
+
-
display:none; /* hide by default */
+
-
/* styling bellow */
+
-
    background:#5d8aa8 ;
+
-
color:white;
+
-
opacity:0.8;
+
-
}
+
.captionazul{
-
.captionazul .captionInside{
+
position:absolute; /* needed for positioning */
-
/* just styling */
+
bottom:0px; /* bottom of the list item (container) */
-
padding:10px;
+
left:0px; /* start from left of the list item (container) */
-
margin:0px;
+
width:100%; /* stretch to the whole width of container */
-
}
+
height:100%;
-
.clear { clear:both; } /* to clear the float after the last item *
+
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#5d8aa8 ;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
.captionazul .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item *
</style>
</style>
</head>
</head>

Revision as of 01:32, 16 September 2012


UNAM-Genomics_Mexico

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