Team:Buenos Aires/css/style.css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!DOCTYPE html>
+
@import url('https://2013.igem.org/Team:Buenos_Aires/css/reset.css?action=raw&ctype=text/css');
-
<html lang="en">
+
-
    <head>
+
-
        <title>Animated Content Menu with jQuery</title>
+
-
<meta charset=utf-8>
+
-
        <meta name="description" content="Animated Content Menu with jQuery" />
+
-
        <meta name="keywords" content="jquery, animation, menu, navigation, template, slide out, effect, background image"/>
+
-
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+
-
        <link rel="stylesheet" type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:Buenos_Aires/css/style.css?action=raw&ctype=text/css" />
+
-
<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" />
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.css?action=raw&ctype=text/css" />
+
 +
body{
 +
background:#000;
 +
color:#fff;
 +
font-family: 'PT Sans Narrow', Arial, sans-serif;
 +
text-transform:uppercase;
 +
}
 +
a{
 +
color:#fff;
 +
text-decoration:none;
 +
}
-
<style type ='text/css'>
+
a.ps{
-
/* Wiki Hacks - START */
+
background:#FFF;
-
/* Author: Pieter van Boheemen */
+
c
-
/* Team: TU Delft */
+
}
-
#globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
+
-
#content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: scroll; height:100%;}
+
-
#bodyContent { border: none; padding:0; margin:0; width:100%; height:100%;}
+
-
#top-section { height: 15px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important;
+
-
padding:0; border: none; font-size: 10px;}
+
-
#p-logo { height:1px; overflow:scroll; display: none;}
+
-
#search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}
+
-
#footer-box { width: 100%; margin: -10px auto 0 auto; padding: 20px 0;}
+
-
.visualClear { display: none; }
+
-
#footer { border: none; width: 965px; margin: 0 auto; padding: 0;}
+
-
.firstHeading { display: none;}
+
-
#f-list a { color: #333; font-size: 10px;}
+
-
#f-list a:hover { color: #666;}
+
-
.printfooter { display: none; }
+
-
#footer ul { margin: 0; padding: 0;}
+
-
#footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}
+
-
#search-controls { display:none; }
+
-
h3#siteSub { display: none;}
+
-
#contentSub {display: none;}
+
-
p:first-child { display: none;}
+
-
/* Wiki Hacks - END */
+
-
 
+
.textos{
-
li{
+
background:#AAA;
-
color:#FFF;
+
display:block;
 +
width:30%;
 +
height:50%;
 +
position:relative;
 +
z-index:99999;
 +
overflow:scroll;
}
}
-
h1{
+
img.ac_bgimage{
-
color:#FFF;
+
position:fixed;
-
border:none;
+
left:0px;
 +
top:0px;
 +
width:100%;
 +
opacity:0.8;
 +
display:none;
 +
}
 +
.ac_overlay{
 +
width:100%;
 +
height:100%;
 +
position:fixed;
 +
top:0px;
 +
left:0px;
 +
background:transparent url("https://static.igem.org/mediawiki/2013/9/91/Pattern.png") repeat top left;
 +
}
 +
.ac_loading{
 +
position:fixed;
 +
top:10px;
 +
right:10px;
 +
background:#000 url("https://static.igem.org/mediawiki/2013/2/29/Loader.gif") no-repeat center center;
 +
width:50px;
 +
height:50px;
 +
-moz-border-radius:10px;
 +
-webkit-border-radius:10px;
 +
border-radius:10px 10px 10px 10px;
 +
z-index:999;
 +
opacity:0.7;
 +
display:none;
 +
}
 +
.ac_content{
 +
position:fixed;
 +
height:90px;
 +
width:100%;
 +
top:50%;
 +
left:0px;
 +
margin-top:-65px;
 +
}
 +
.ac_content h1{
 +
background:transparent url("https://static.igem.org/mediawiki/2013/6/66/Bg_menu.png") repeat top left;
 +
display:block;
 +
float:left;
 +
width:90px;
 +
height:50px;
 +
padding:20px;
 +
font-size:36px;
 +
font-weight:bold;
 +
line-height:20px;
 +
margin-right:1px;
 +
}
 +
.ac_content h1 span{
 +
display:block;
 +
font-weight:normal;
 +
font-size:14px;
 +
}
 +
.ac_menu{
 +
background:transparent url("https://static.igem.org/mediawiki/2013/6/66/Bg_menu.png") repeat top left;
 +
float:left;
 +
position:relative;
 +
height:90px;
 +
width:0px;
 +
}
 +
.ac_menu > ul{
 +
float:right;
 +
}
 +
.ac_menu > ul > li{
 +
float:left;
 +
position:relative;
 +
height:90px;
 +
overflow:hidden;
 +
}
 +
.ac_menu > ul > li a{
 +
margin-top:60px;
 +
opacity:0;
 +
display:block;
 +
height:90px;
 +
padding:0px 10px;
 +
text-align:center;
 +
line-height:90px;
 +
outline:none;
 +
font-size:18px;
 +
font-weight:bold;
 +
text-shadow:1px 1px 1px #000;
 +
}
 +
.ac_subitem{
 +
width:400px;
 +
height:0px; /* animate to 400px */
 +
top:50%;
 +
right:0px;
 +
margin-top:0px; /* animate to -200px */
 +
position:fixed;
 +
z-index:99;
 +
overflow:hidden;
 +
background:transparent url("https://static.igem.org/mediawiki/2013/6/66/Bg_menu.png") repeat top left;
 +
}
 +
.ac_subitem h2{
 +
font-size:22px;
 +
font-weight:bold;
 +
color:#fff;
 +
padding: 40px 0px 0px 40px;
 +
text-shadow:0px 0px 1px #000;
 +
}
 +
.ac_subitem ul{
 +
padding:0px 40px;
 +
}
 +
.ac_subitem ul li{
 +
margin:10px 0px;
}
}
-
</style>
+
.ac_subitem ul li a{
-
 
+
margin-top:60px;
-
 
+
background:#EDA;
-
 
+
opacity:1;
-
 
+
display:block;
-
    </head>
+
height:20px;
-
    <body>
+
padding:0px 0px 5px;
-
 
+
text-align:left;
-
<contenedor>
+
line-height:20px;
-
 
+
outline:none;
-
<div id="ac_background" class="ac_background">
+
font-size:18px;
-
<img class="ac_bgimage" src="https://static.igem.org/mediawiki/2013/1/1c/Chicos.jpg" alt="Background"/>
+
font-weight:bold;
-
<div class="ac_overlay"></div>
+
text-shadow:1px 1px 1px #000; }
-
<div class="ac_loading"></div>
+
.ac_subitem ul li:first-child{
-
</div>
+
font-size:14px;
-
<div id="ac_content" class="ac_content">
+
text-transform:none;
-
<h1><span>Buenos Aires</span>iGem</h1>
+
border-bottom:1px dotted #333;
-
<div class="ac_menu">
+
padding-bottom:15px;
-
<ul>
+
margin-bottom:15px;
-
<li>
+
}
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Project</a>
+
span.ac_close{
-
<div class="ac_subitem">
+
float:right;
-
<span class="ac_close"></span>
+
margin:10px;
-
<h2>Project</h2>
+
width:11px;
-
<ul>
+
height:12px;
-
<li>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</li>
+
cursor:pointer;
-
<li><a class="ps" href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })">Open the page programatically.</a>Pepe</li>
+
background:transparent url("https://static.igem.org/mediawiki/2013/b/bd/Close.png") no-repeat top left;
-
<li>Smoked Salmon Terrine</li>
+
opacity:0.4;
-
<li>Tuna Ceviche</li>
+
}
-
<li>Wild Mushroom Flan</li>
+
span.ac_close:hover{
-
<li>Almond Bruschetta</li>
+
opacity:1.0;
-
<li>Green Chilli Canapee</li>
+
}
-
<li>Artichoke Rucula Salad</li>
+
.ac_footer{
-
</ul>
+
position:fixed;
-
</div>
+
bottom:0px;
-
</li>
+
left:0px;
-
<li>
+
width:100%;
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Results</a>
+
font-size:13px;
-
<div class="ac_subitem">
+
background:#000;
-
<span class="ac_close"></span>
+
opacity:0.9;
-
<h2>Results</h2>
+
height:20px;
-
<ul>
+
padding-bottom:5px;
-
<li>Drops of rain could be heard hitting the pane, which made him feel quite sad.</li>
+
}
-
<li>>Wild Sea Bass Filet</li>
+
.ac_footer a{
-
<li>Linguini and Clams</li>
+
padding:5px 10px;
-
<li>Shrimp and Crabmeat Alfredo</li>
+
letter-spacing:1px;
-
<li>Broiled Stuffed Flounder </li>
+
text-shadow:1px 1px 1px #000;
-
<li>Mussels Marinara</li>
+
color:#ddd;
-
<li>Grilled Mooloolaba Giant king prawns</li>
+
float:right;
-
<li>Lobster Mornay</li>
+
}
-
<li>Fresh Shrimp Tart</li>
+
.footer a:hover{
-
</ul>
+
color:#fff;
-
</div>
+
}
-
</li>
+
.ac_footer a span{
-
<li>
+
font-weight:bold;
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Team</a>
+
}
-
<div class="ac_subitem">
+
.ac_footer a.ac_left{
-
<span class="ac_close"></span>
+
float:left;
-
<h2>Team</h2>
+
}
-
<ul>
+
-
<li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
+
-
<li>Ratatouille</li>
+
-
<li>Le Tourin</li>
+
-
<li>Wild Salmon Bruschetta</li>
+
-
<li>Sweet Mustard Gratin</li>
+
-
<li>Homemade Pizza Mediteranica</li>
+
-
<li>Spanakopita Speciale</li>
+
-
<li>Ricotta Spinach Cannelloni</li>
+
-
</ul>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Desserts</a>
+
-
<div class="ac_subitem">
+
-
<span class="ac_close"></span>
+
-
<h2>Desserts</h2>
+
-
<ul>
+
-
<li>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</li>
+
-
<li>New England Apple Crisp</li>
+
-
<li>Southern Pecan Pie</li>
+
-
<li>Brownie Fudge Sundae</li>
+
-
<li>Strawberry Mousse Cake</li>
+
-
<li>Vanilla Crème brûlée</li>
+
-
<li>Lemon Sorbet</li>
+
-
<li>Crunchy Almond Cake</li>
+
-
</ul>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
<a href="http://s17.postimg.org/bp7obatz3/background.png">Wines</a>
+
-
<div class="ac_subitem">
+
-
<span class="ac_close"></span>
+
-
<h2>Wines</h2>
+
-
<ul>
+
-
<li>A small river named Duden flows by their place and supplies it with the necessary regelialia.</li>
+
-
<li>CARM Douro Reserva</li>
+
-
<li>Fontodi Colli della Toscana Centrale Flaccianello</li>
+
-
<li>Alban Syrah Edna Valley Alban Estate Reva</li>
+
-
<li>Zaca Mesa Syrah Santa Ynez Valley</li>
+
-
<li>Quinta do Vallado Douro Reserva</li>
+
-
<li>Viticcio Chianti Classico Riserva</li>
+
-
<li>Avignonesi Vino Nobile di Montepulciano</li>
+
-
</ul>
+
-
</div>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
+
-
<div class="ac_footer">
+
-
iGem Bs As
+
-
+
-
</div>
+
-
</div>
+
-
<!-- The JavaScript -->
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
+
-
<script type="text/javascript" src="http://jquery-swip.googlecode.com/svn-history/r4/trunk/jquery.easing.1.3.js"></script>
+
-
 
+
-
    <script src="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.js?action=raw&ctype=text/js"></script>
+
-
    <script>
+
-
        /* Default pageslide, moves to the right */
+
-
        $(".first").pageslide();
+
-
       
+
-
        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
+
-
        $(".second").pageslide({ direction: "left", modal: true });
+
-
    </script>
+
-
 
+
-
<script>
+
-
$(document).ready(function(){
+
-
  $("li").click(function(){
+
-
var liId = $(this).attr('id');
+
-
var namePrev = liId + "Text";
+
-
var element = document.getElementById(namePrev);
+
-
element.style.display="block";
+
-
 
+
-
  });
+
-
});
+
-
</script> 
+
-
+
-
<script type="text/javascript">
+
-
$(function() {
+
-
var $ac_background = $('#ac_background'),
+
-
$ac_bgimage = $ac_background.find('.ac_bgimage'),
+
-
$ac_loading = $ac_background.find('.ac_loading'),
+
-
+
-
$ac_content = $('#ac_content'),
+
-
$title = $ac_content.find('h1'),
+
-
$menu = $ac_content.find('.ac_menu'),
+
-
$mainNav = $menu.find('ul:first'),
+
-
$menuItems = $mainNav.children('li'),
+
-
totalItems = $menuItems.length,
+
-
$ItemImages = new Array();
+
-
+
-
/*
+
-
for this menu, we will preload all the images.
+
-
let's add all the image sources to an array,
+
-
including the bg image
+
-
*/
+
-
$menuItems.each(function(i) {
+
-
$ItemImages.push($(this).children('a:first').attr('href'));
+
-
});
+
-
$ItemImages.push($ac_bgimage.attr('src'));
+
-
 
+
-
+
-
var Menu = (function(){
+
-
var init = function() {
+
-
loadPage();
+
-
initWindowEvent();
+
-
},
+
-
loadPage = function() {
+
-
/*
+
-
1- loads the bg image and all the item images;
+
-
2- shows the bg image;
+
-
3- shows / slides out the menu;
+
-
4- shows the menu items;
+
-
5- initializes the menu items events
+
-
*/
+
-
$ac_loading.show();//show loading status image
+
-
$.when(loadImages()).done(function(){
+
-
$.when(showBGImage()).done(function(){
+
-
//hide the loading status image
+
-
$ac_loading.hide();
+
-
$.when(slideOutMenu()).done(function(){
+
-
$.when(toggleMenuItems('up')).done(function(){
+
-
initEventsSubMenu();
+
-
});
+
-
});
+
-
});
+
-
});
+
-
},
+
-
showBGImage = function() {
+
-
return $.Deferred(
+
-
function(dfd) {
+
-
//adjusts the dimensions of the image to fit the screen
+
-
adjustImageSize($ac_bgimage);
+
-
$ac_bgimage.fadeIn(1000, dfd.resolve);
+
-
}
+
-
).promise();
+
-
},
+
-
slideOutMenu = function() {
+
-
/* calculate new width for the menu */
+
-
var new_w = $(window).width() - $title.outerWidth(true);
+
-
return $.Deferred(
+
-
function(dfd) {
+
-
//slides out the menu
+
-
$menu.stop()
+
-
.animate({
+
-
width : new_w + 'px'
+
-
}, 700, dfd.resolve);
+
-
}
+
-
).promise();
+
-
},
+
-
/* shows / hides the menu items */
+
-
toggleMenuItems = function(dir) {
+
-
return $.Deferred(
+
-
function(dfd) {
+
-
/*
+
-
slides in / out the items.
+
-
different animation time for each one.
+
-
*/
+
-
$menuItems.each(function(i) {
+
-
var $el_title = $(this).children('a:first'),
+
-
marginTop, opacity, easing;
+
-
if(dir === 'up'){
+
-
marginTop = '0px';
+
-
opacity = 1;
+
-
easing = 'easeOutBack';
+
-
}
+
-
else if(dir === 'down'){
+
-
marginTop = '60px';
+
-
opacity = 0;
+
-
easing = 'easeInBack';
+
-
}
+
-
$el_title.stop()
+
-
.animate({
+
-
marginTop : marginTop,
+
-
opacity : opacity
+
-
}, 200 + i * 200 , easing, function(){
+
-
if(i === totalItems - 1)
+
-
dfd.resolve();
+
-
});
+
-
});
+
-
}
+
-
).promise();
+
-
},
+
-
initEventsSubMenu = function() {
+
-
$menuItems.each(function(i) {
+
-
var $item = $(this), // the <li>
+
-
$el_title = $item.children('a:first'),
+
-
el_image = $el_title.attr('href'),
+
-
$sub_menu = $item.find('.ac_subitem'),
+
-
$ac_close = $sub_menu.find('.ac_close');
+
-
+
-
/* user clicks one item : appetizers | main course | desserts | wines | specials */
+
-
$el_title.bind('click.Menu', function(e) {
+
-
$.when(toggleMenuItems('down')).done(function(){
+
-
openSubMenu($item, $sub_menu, el_image);
+
-
});
+
-
return false;
+
-
});
+
-
/* closes the submenu */
+
-
$ac_close.bind('click.Menu', function(e) {
+
-
closeSubMenu($sub_menu);
+
-
return false;
+
-
});
+
-
});
+
-
},
+
-
openSubMenu = function($item, $sub_menu, el_image) {
+
-
$sub_menu.stop()
+
-
.animate({
+
-
height : '400px',
+
-
marginTop : '-200px'
+
-
}, 400, function() {
+
-
//the bg image changes
+
-
showItemImage(el_image);
+
-
});
+
-
},
+
-
/* changes the background image */
+
-
showItemImage = function(source) {
+
-
//if its the current one return
+
-
if($ac_bgimage.attr('src') === source)
+
-
return false;
+
-
+
-
var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
+
-
$itemImage.insertBefore($ac_bgimage);
+
-
adjustImageSize($itemImage);
+
-
$ac_bgimage.fadeOut(1500, function() {
+
-
$(this).remove();
+
-
$ac_bgimage = $itemImage;
+
-
});
+
-
$itemImage.fadeIn(1500);
+
-
},
+
-
closeSubMenu = function($sub_menu) {
+
-
$sub_menu.stop()
+
-
.animate({
+
-
height : '0px',
+
-
marginTop : '0px'
+
-
}, 400, function() {
+
-
//show items
+
-
toggleMenuItems('up');
+
-
});
+
-
},
+
-
/*
+
-
on window resize, ajust the bg image dimentions,
+
-
and recalculate the menus width
+
-
*/
+
-
initWindowEvent = function() {
+
-
/* on window resize set the width for the menu */
+
-
$(window).bind('resize.Menu' , function(e) {
+
-
adjustImageSize($ac_bgimage);
+
-
/* calculate new width for the menu */
+
-
var new_w = $(window).width() - $title.outerWidth(true);
+
-
$menu.css('width', new_w + 'px');
+
-
});
+
-
},
+
-
/* makes an image "fullscreen" and centered */
+
-
adjustImageSize = function($img) {
+
-
var w_w = $(window).width(),
+
-
w_h = $(window).height(),
+
-
r_w = w_h / w_w,
+
-
i_w = $img.width(),
+
-
i_h = $img.height(),
+
-
r_i = i_h / i_w,
+
-
new_w,new_h,
+
-
new_left,new_top;
+
-
+
-
if(r_w > r_i){
+
-
new_h = w_h;
+
-
new_w = w_h / r_i;
+
-
}
+
-
else{
+
-
new_h = w_w * r_i;
+
-
new_w = w_w;
+
-
}
+
-
+
-
$img.css({
+
-
width : new_w + 'px',
+
-
height : 400 + 'px',
+
-
left : (w_w - new_w) / 2 + 'px',
+
-
top : (w_h - new_h) / 2 + 'px'
+
-
});
+
-
},
+
-
/* preloads a set of images */
+
-
loadImages = function() {
+
-
return $.Deferred(
+
-
function(dfd) {
+
-
var total_images = $ItemImages.length,
+
-
loaded = 0;
+
-
for(var i = 0; i < total_images; ++i){
+
-
$('<img/>').load(function() {
+
-
++loaded;
+
-
if(loaded === total_images)
+
-
dfd.resolve();
+
-
}).attr('src' , $ItemImages[i]);
+
-
}
+
-
}
+
-
).promise();
+
-
};
+
-
+
-
return {
+
-
init : init
+
-
};
+
-
})();
+
-
+
-
/*
+
-
call the init method of Menu
+
-
*/
+
-
Menu.init();
+
-
});
+
-
</script>
+
-
    </body>
+
-
</html>
+

Revision as of 18:24, 21 May 2013

@import url('https://2013.igem.org/Team:Buenos_Aires/css/reset.css?action=raw&ctype=text/css');

body{ background:#000; color:#fff; font-family: 'PT Sans Narrow', Arial, sans-serif; text-transform:uppercase; } a{ color:#fff; text-decoration:none; }

a.ps{ background:#FFF; c }

.textos{ background:#AAA; display:block; width:30%; height:50%; position:relative; z-index:99999; overflow:scroll; }

img.ac_bgimage{ position:fixed; left:0px; top:0px; width:100%; opacity:0.8; display:none; } .ac_overlay{ width:100%; height:100%; position:fixed; top:0px; left:0px; background:transparent url("Pattern.png") repeat top left; } .ac_loading{ position:fixed; top:10px; right:10px; background:#000 url("Loader.gif") no-repeat center center; width:50px; height:50px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px 10px 10px 10px; z-index:999; opacity:0.7; display:none; } .ac_content{ position:fixed; height:90px; width:100%; top:50%; left:0px; margin-top:-65px; } .ac_content h1{ background:transparent url("Bg_menu.png") repeat top left; display:block; float:left; width:90px; height:50px; padding:20px; font-size:36px; font-weight:bold; line-height:20px; margin-right:1px; } .ac_content h1 span{ display:block; font-weight:normal; font-size:14px; } .ac_menu{ background:transparent url("Bg_menu.png") repeat top left; float:left; position:relative; height:90px; width:0px; } .ac_menu > ul{ float:right; } .ac_menu > ul > li{ float:left; position:relative; height:90px; overflow:hidden; } .ac_menu > ul > li a{ margin-top:60px; opacity:0; display:block; height:90px; padding:0px 10px; text-align:center; line-height:90px; outline:none; font-size:18px; font-weight:bold; text-shadow:1px 1px 1px #000; } .ac_subitem{ width:400px; height:0px; /* animate to 400px */ top:50%; right:0px; margin-top:0px; /* animate to -200px */ position:fixed; z-index:99; overflow:hidden; background:transparent url("Bg_menu.png") repeat top left; } .ac_subitem h2{ font-size:22px; font-weight:bold; color:#fff; padding: 40px 0px 0px 40px; text-shadow:0px 0px 1px #000; } .ac_subitem ul{ padding:0px 40px; } .ac_subitem ul li{ margin:10px 0px; }

.ac_subitem ul li a{ margin-top:60px; background:#EDA; opacity:1; display:block; height:20px; padding:0px 0px 5px; text-align:left; line-height:20px; outline:none; font-size:18px; font-weight:bold; text-shadow:1px 1px 1px #000; } .ac_subitem ul li:first-child{ font-size:14px; text-transform:none; border-bottom:1px dotted #333; padding-bottom:15px; margin-bottom:15px; } span.ac_close{ float:right; margin:10px; width:11px; height:12px; cursor:pointer; background:transparent url("Close.png") no-repeat top left; opacity:0.4; } span.ac_close:hover{ opacity:1.0; } .ac_footer{ position:fixed; bottom:0px; left:0px; width:100%; font-size:13px; background:#000; opacity:0.9; height:20px; padding-bottom:5px; } .ac_footer a{ padding:5px 10px; letter-spacing:1px; text-shadow:1px 1px 1px #000; color:#ddd; float:right; } .footer a:hover{ color:#fff; } .ac_footer a span{ font-weight:bold; } .ac_footer a.ac_left{ float:left; }

Retrieved from "http://2013.igem.org/Team:Buenos_Aires/css/style.css"