/* anche in questa pagina ho riscontrato il problema che per centrare effettivamente
l'immagine che funge da bottone (gioca) ho dovuto usare gli attributi left e right,
ma in questo modo ho rinunciato alla dinamicita' della pagina al variare della dimensione
della finestra*/

body{
 text-align: center;
 background-color: black;
 color: white;
 width: 800px;
}

p{
 font-size: x-large;
}

/*e' necessario un blocco che contenga entrambi i pulsanti per stabilire
la loro posizione indipendentemente da tutto il resto e a piacere tramite
gli attributi di stile*/

#blocco{
 height : 150px;
 width: 800px;
 position: relative;
 cursor: default; /*non voglio che compaia il cursore per modificare il testo*/
}

/* volendo che il bottone variasse dinamicamente la sua dimenzione ho utilizzato
un div di dimenzioni gia' pari alla dimenzione del bottone ingrandito, in questo
modo al passaggio del mouse sopra di questo non sposto gli elementi sotto*/

#bloccog{
 height: 100px;
 width: 100px;
 position: absolute;
 left: 350px;
}

/* l'immagine del bersaglio piccolo deve essere centrata nel blocco div, poi
dinamicamente con javascript andro' a modificare anche gli attributi left e right
per far sembrare effettivamente che l'immagine si ingrandisca (vedi stile inline)*/

#bottoneg{
 position: absolute;
}

#manuale{
 width: 80px;
 position: absolute;
 left: 360px;
 top: 105px;
}