body
{
    color: #333;
    background: #FFF url('../_pix/sfondo.jpg') no-repeat top left;
    /* 
    lo sfondo è posizionato in alto a sinistra  della schermata; 
    la sua posizione rispetto al resto dei sito è pertanto dipendente dalla dimensione della finestra 
    */
}
sup
{
	vertical-align:super;
}

small
{
    font-size: 66%;
}




.clear
{
    /*
    impedisce eventuali allineamenti scorretti dei div in caso di float. diciamo che "chiude" le colonne.
    deve esserci ma dev'essere invisibile, quindi ho usato visibility hidden anzichè display none;
    */
    display: block;
    width: 100%;
    clear: both;
    height: 1px;
    visibility: hidden;
}

.flexcroll
 {
    /* valori comuni a tutti gli elementi con le barre di scorrimento personalizzate */
    /* la classe flexscroll funziona solo se abbinata ad un id in cui sono impostate le dimensioni del riquadro */
    overflow: auto;
    position: relative;
}

.slideshow, .slideshow-images 
{
    /* dimensione dello slideshow, che è poi anche la dimensione dell'immagine di default inserita nell'html */
	height: 350px !important;
	width: 440px !important;
}

#highlight .slideshow
{
    padding: 4px !important;
    
    padding: 0 !important;
    border: 0 !important;
}

#highlight .slideshow a img
{
    border: 0 !important;
}

blockquote
{	
    background: url(../_pix/quote2.png) right bottom no-repeat; /* virgolette di chiusura */
    font: 13pt Times New Roman, Times, serif;
    line-height: 1.3em;
    font-style: italic;
    width: 340px !important;
    padding-left: 30px !important;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-right: 20px;    
    margin-bottom: 30px;    
}

blockquote .capital 
{ 
    /* virgolette di apertura della citazione, da usare in abbinamento a blockquote */
    

	color:#666; 
	font-size:36px; 
	line-height:30px; 
    text-align: right;
    margin-top: -16px;
    margin-left: -20px;
    margin-right: 0;
    padding-left: 20px;
    padding-right: 0;
    border: 1px solid white;
	font-family: "Times New Roman", times, sans-serif;
	background-image: url(../_pix/quote1.png);
    background-repeat: no-repeat;
}


#container
{
    /*
    è l'elemento contenitore che racchiude tutto il sito (eccetto lo sfondo con le nuvole)
    lo script di posizionamento (centratura automatica nella finestra) agisce su questo elemento div
    */
}

/* ***************************************************************************************************************** 

    il sito è diviso in tre grosse fasce orizzontali inpilate: top, mid, e bot.
    queste fasce sono di altezza definita e hanno un posizionamento normale (relativo)
    altezza e larghezza di queste fasce non sono definite, ma variano in base alla dimensione della finestra
    questo consente al layout di essere declinabile in due modalità di lettura
    le fasce infatti contengono elementi allineati verso sinistra che scalano a capo quando non c'è spazio

+++***************************************************************************************************************** */


#top
{
    /*
    contiene header, slogan, menu
    */
    padding-left: 135px;
    background-color: transparent; /* necessario per impedire barra di scorrimento orizzontale su IE6 */
}

#mid
{
    /*
    contiene i due riquadri principali
    la distanza dall'header è determinata dal padding-top
    */
    background-image: url('../_pix/bg_contents.gif');
    background-repeat: repeat-x;
    background-position:  center 0; /* se si modifica la distanza dall'header, adeguare di conseguenza il posizionamento verticale dello sfondo */
    padding-top: 30px;
    padding-left: 35px;    
}

#bot
{
    /*
    contiene il footer
    */
    clear: both;
    height: 30px;
    background-image: url('../_pix/bg_footer.png');
    background-repeat: repeat-x;
    background-position: center 0px; 
    padding-top: 30px;
    padding-left: 50px;  
	padding-bottom:20px;
    background-color: white;  
}


/* 
    ciascuna delle fasce sopra descritte contiene elementi allineati a sinistra che, quando non c'è spazio, scalano a capo. 
    in questo modo quando c'è spazio gli elementi si dispongono orizzontalmente, altrimenti verticalmente.
    
    Gli elementi hanno una apparentemente contraddittoria definizione di margini, padding, spaziature ecc. perchè devono risultare
    ben bilanciati sia in modalità orizzontale che in modalità verticale, e quindi serve una combinazione di vari fattori per avere 
    le posizioni ottimali in entrambe le modalità
    
*/




/* TOP */

#header
{   
    /*
    contiene il logo e lo slogan
    */
    float: left;
    width: 440px; /* la larghezza del div header determina il posizionamento dello slogan, che è allineato verso destra */
    height: 160px;
}

#logo
{
    /*
    specificare le dimensioni dell'immagine sia nel css che nel codice
    */
    width: 320px;
    height: 160px;
    position: absolute;
    float: left;
 
}

#slogan
{
    /*
    è allineato verso destra e la sua posizione dipende dalla larghezza del div header e dal margin-right
    */
    float: right;
    margin-top: 130px;
    margin-right: -5px; /* consente un ulteriore posizionamento verso destra*/
    width: 290px;
    height: 18px;
}

#spacer_menu
{
    /*
    consente l'allineamento corretto nelle due modalità 
    */
    height: 10px;
    width: 100px;
}

#menu
{
    /*
    menu di navigazione
    è allineato verso sinistra, se necessario scala sotto l'header
    */
    width: 420px;    
    height: 90px;
    float: left;    
    margin-left: 0px;
    margin-top: 40px;
    padding-left: 30px;
    padding-bottom: 10px;
    white-space: nowrap;
}

#menu .attivo
{
    /* la classe attivo del menu imposta lo stile della voce corrispondente alla pagina visualizzata
    ha proprietà grafiche analoghe a quelle dei collegamenti ma è in realtà un <p> */
    display: block; 
    float: left; /* allinea il bloccho a sinistra */
    font: 15pt Arial, Helvetica, sans-serif;
    line-height: 90px;
    color: rgb(160,0,45);
    text-decoration: none;
    background-position: center -60px; 
    background-image: url('../_pix/sottolineatura_colorata.png'); /* la sottolineatura colorata è l'unico elemento distintivo */
    background-repeat: no-repeat;
    background-position: center 60px; /* posizione verticale della sottolineatura */
}

#menu a:link, #menu a:visited
{
    /*     come sopra, ma per i collegamenti alle altre pagine  */
    display: block; 
    float: left;
    font: 15pt Arial, Helvetica, sans-serif;
    line-height: 90px;
    color: #707070;
    text-decoration: none;
    background-position: center -60px;    
}
#menu a:hover
{
    color: rgb(160,0,45);
}


#menu .sep
{
/*     separatore delle voci dimenu (stanghetta verticale) */
    float: left;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
}

/* fine TOP */

/* MID */

#contents
{
    /*     è un wrapper dei due riquadri */
    float: left;
    border-left: 1px solid #C0C0C0; /*  primo bordo a sinistra */
}

.titolo_box  
{
    /*     stile dei titoli dei riquadri */
    height: 22px;
    background-color: rgb(160,0,45);
    background-image: url('../_pix/titolo_box_bg_lungo.png');    /* sfumatura, non copre tutta la larghezza  */
    background-position: 0px 0px;
    background-repeat: repeat-y;
    color: white;
    font: 15px Verdana, sans-serif !important;
    padding-top: 4px;
    padding-left: 10px;
    padding-right: 6px;
}




/* HIGHLIGHT - riquadro di sinistra */

#highlight
{  
    /* 
    riquadro principale, di sinistra 
    contiene un titolo_box, content (i contenuti veri e propri) e un footer (la fascia rossa in basso)
    */
    float: left;
    height: 400px; 
    width: 447px;
    border-right: 1px solid #C0C0C0; /* secondo bordino verticale */
    border-top: 1px solid white;  /* c'è anche per il riquadro di destra, "other" */   
    overflow: hidden;  /* nasconde tutto ciò che sfora (tanto c'è lo scroll per i contenuti interni) */
    
}

#highlight .content
{
    /* l'elemento che ospita i contenuti */
    width: 420px;
    height: 339px;
    margin: 4px; 
    position: relative;    
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}
#highlight .contentmappa
{
    /* l'elemento che ospita i contenuti */
    width: 428px;
    height: 357px;
    margin: 0; 
    position: relative;    
    padding: 0;
}

#highlight .content ul, 
#highlight .content ol
{
    list-style-type: circle;
    list-style-position: outside;   
    padding-top: 5px;
    padding-bottom: 5px;
}
#highlight .content li
{
    margin-left: 20px;
    padding-left: 2px;
    margin-top: 8px;
    margin-bottom: 8px;
}



#highlight .content p,
#highlight .content ul,
#highlight .content blockquote
{
    /*  il contenuto dello scroller è stato ristretto per creare un po' di margine a dx e sx   */

    padding-left: 8px;
    margin-right: 14px;
}


#introshort
{
    /*     
    paragrafo introduttivo sempre presente per i vari contenuti selezionabili dal menu di destra (vedi pagina "Noi");
    */
    margin: 4px;
    background-color: rgb(255,255,225); 
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
    height: 110px;
    border-bottom: 1px solid #C0C060;
}
#introshort strong
{
    font-size: 11pt;
    font-style: italic;
    
}

#highlight .contentshort
{
    /*     
    cos'è? 
    */    
    margin: 4px;
    height: 182px;    
    padding: 15px;
}


#highlight .footer
{
    /*     
    è la fascia rossa sotto content, utile qualora si desideri inserire un link in evidenza
    */
    text-align: right;
    font: 8pt arial, helvetica, sans-serif;
    color: white;
    font-weight: bold;
    padding-right: 8px;    
    padding-top: 2px; 
    height: 17px; /* height + padding-top = 19px */
    background-image: url('../_pix/bg_contents.gif');
    background-repeat: repeat-x;
    background-position: 0px -50px;
}

/* FINE HIGHLIGHT */


/* RIQUADRO DI DESTRA */

#other
{
    /* è il secondo riquadro, si allinea a sinistra di highlight se c'è posto, altrimenti va a capo e si sistema sotto */
    float: left;
    height: 400px;
    width: 450px;     
}

#other .content
{
    /* wrapper delle sotto-colonne del riquadro  */
    height: 400px;
}

.content p, .contentshort p, #introshort p,
.content li, .contentshort li, #introshort li
{
    font: 9pt Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    margin-bottom: 0.8em;
}

.content h1, .contentshort h1
{
    font: 16pt 'Times New Roman', Georgia, Times;
    line-height: 16pt;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #D0D0D0;
    width: 95%;
}

.content h2, .contentshort h2, .accadue
{
    font: 12pt 'Times New Roman', Georgia, Times;
    line-height: 12pt;
    margin-bottom: 16px;
    font-style: italic;
    color: #707070;
    width: 95%;
    display: block;
}


.content h1 img, .contentshort h1 img
{
    vertical-align: middle;
    margin-right: 8px;
}




.content a:link, .content a:visited,
.contentmappa a:link, .contentmappa a:visited,
#introshort a:link, #introshort a:visited
{
    /* proprietà link di base per tutti i contenuti  */
        color: #4F4444;
	border-bottom: 1px dashed #909090;
	text-decoration:none;
}
.content a:hover,
.contentshort a:hover,
.contentmappa a:hover,
#introshort a:hover
{
	color: rgb(190,40,0);
	text-decoration:none;
	border-bottom: 1px solid rgb(190,40,0);
}
.content a img
{
    border: 1px solid white;    
}
.content a:hover img
{
    border: 1px solid rgb(190,40,0);
}

.content strong
{
    font: 14pt 'Times New Roman', Georgia, Times;
    color: rgb(152, 0, 36);
    font-weight: normal;
}
.content strong a:link,
.content strong a:visited
{
    color: rgb(152, 0, 36);
}

.content h1
{
    font: 13pt 'Times New Roman', Georgia, Times;
    margin-top:16px;
    margin-left: 2px;
    margin-bottom: 4px;
    padding-bottom: 8px;
    color: black;
}


.content h3, #modale h3
{
    font: 18pt 'Times New Roman', Georgia, Times;
    margin-top:8px;
    margin-bottom: 4px;
    padding-bottom: 8px;
    width: 95%;
    border-bottom: 1px solid #E0E0E0;
    color: rgb(152,0,36);
}


#other  .content .titolo_box
{
    /* forza la sfumatura corta anzichè quella lunga per i titoli del riquadro di destra */
    background-image: url('../_pix/titolo_box_bg_corto.png');
}

#other .content_pane
{
    /* contenitore da usarsi in luogo di content quando non ci sono sotto-colonne */   
    float: left;    
    border-right: 1px solid #C0C0C0;  /* ultimo bordino verticale */
    border-top: 1px solid white;   /* c'è anche per l'highlight  */
}


#other .content_pane ul
{
    /* margini per le liste di link */   
    margin-left: 4px;  /* margine di sinistra, li altri sono negli a */
}

#other .content_pane li 
{
    /*float: left; -- consente di creare elenchi di link anche su più colonne, se si imposta una larghezza dei singoli li minore della metà dello spazio */    
}

#other .content_pane li a:link, 
#other .content_pane li a:visited
{
    /* impostazioni comuni a tutti gli elenchi di link */
    display: block;
    text-decoration: none;
    margin-right: 4px; /* margine di destra */
}
#other .content_pane li a:hover
{

}
#other .content_pane li a img
{
    border: 0 !important;
}


/* PARTICOLARITA' DELLE SINGOLE COLONNE */

/* NEWS */

#newsfeed
{
    /* sotto-colonna news */
    width: 190px;
    height: 400px;
    overflow: hidden;
}

#newsfeed ul
{
    /* spaziatura tra le news */
    padding-left: 10px;
    padding-right: 20px;
}

#newsfeed .data
{
    /* titolo di ciascuna news, formatta la data */
    font: 10pt Arial, Helvetica, sans-serif;
    color: rgb(160,0,45);
    margin-top: 15px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgb(160,0,45);
    margin-bottom: 5px;
    font-weight: bold;
    
}

#newsfeed .testo
{
    /* testo di ciascuna news */
    font: 9pt Arial, Helvetica, sans-serif;
    color: #909090; 
    line-height: 1.1em;
}
#newsfeed .testo a:link,
#newsfeed .testo a:visited
{
    color: #909090; /* essendo in realtà tutto link, non ci deve essere differenza tra link e non link nel testo della news */
    text-decoration: none;
    border: 0 !important;
}
#newsfeed .testo a:hover
{
    color: black;
}

/* fine NEWS */

.link_visualizzato
{
/*     per le pagine a contenuto multiplo per il riquadro di sinistra (cioè viene visualizzato via JS solo uno di tanti possibili div)
    è necessario impostare uno stile per il collegamento attivo, con proprietà marcate !important, perchè devono sovrascrivere quelle di un a:link a riposo */
    background-image: url('../_pix/bg_li_a.png') !important;
    background-position: right top !important;
    line-height: 1.3em !important;
	color: rgb(152,0,36) !important;    
    font-weight: bold !important;
}


/* QUICKLINK (homepage, chi siamo) */

#quicklink
{
    /* il riquadro multi-uso nella homepage */
    width: 256px;
    height: 400px;   
    overflow: hidden;

}

#quicklink strong
{
    font-size: 12pt;

}

#quicklink ul
{
    padding-top: 5px;
}

#quicklink li 
{
    margin: 0;
    padding: 0;
    margin-top: 4px;
}

#quicklink li a:link, 
#quicklink li a:visited
{
    margin: 0;
    width: 249px;
    height: 84px; 
    background-position: bottom right; /* l'immagine è la stessa per a e a:hover, cambia il posizionamento: bottom è a riposo, top è selezionato */
    background-repeat: no-repeat;
    padding: 0;
}

#quicklink li a:hover
{
    background-position: top right; 
}




#quicklink .titolo_box
{
    margin-bottom: 0;
}

/* TEAM ALPHABETI */

#team_alphabeti
{
    /* sotto-colonna con le info personali di ciascun membro */
    width: 190px;
    height: 400px;
    /*padding-bottom: 30px;*/
}

#team_alphabeti li
{
   margin: 0;
   padding: 0; 
   margin-top: 4px; 
}

#team_scroll li a:link,
#team_scroll li a:visited
{
   margin-top: 4px; 
   width: 99%;
   padding-left: 2px;
   padding-top: 2px;
   padding-bottom: 6px; 
   color: rgb(152,0,36);     
   background-image: url('../_pix/bg_li.png');
   background-repeat: no-repeat;    
   background-position: bottom right;   cursor: default;
}

#team_alphabeti a:hover
{ 
    background-position: top right !important; 
}

#team_alphabeti li .nome,
#team_completo_alphabeti li .nome
{
    color: rgb(152,0,36);    text-decoration: none;
  
}
#team_alphabeti li .ruolo,
#team_completo_alphabeti li .ruolo
{
    color: #333333;
}

#team_alphabeti .nome,
#team_completo_alphabeti  .nome
{
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
}

#team_alphabeti .ruolo,
#team_completo_alphabeti .ruolo
{
    display: block;
    font: 10pt Times, Georgia, serif;
    font-style: italic;
    color: #909090;

    margin-bottom: 3px;
    line-height: 11pt;
}


#team_scroll
{
    height:360px;
}
/* fine TEAM ALPHABETI */


/* PARTNERS */

#partners_alphabeti
{
    width: 252px;
    padding-right: 4px;
    height: 400px;
}

#partners_alphabeti li 
{
}

#partners_alphabeti li a:link,
#partners_alphabeti li a:visited
{
    margin: 4px 0;
    height: 58px; /* l'altezza dei link è al massimo 68px (se no lo sfondo non è sufficiente) */
    background-image: url('../_pix/bg_li.png');  
    background-position: right bottom; /* l'immagine è la stessa per a e a:hover, cambia il posizionamento: bottom è a riposo, top è selezionato */
    background-repeat: no-repeat;
    font: 9pt Arial, Helvetica, sans-serif;
    color: #333333;    
}

#partners_alphabeti li a:hover
{
    margin: 4px 0;
    color: black; 
    font-weight: bold;
    background-position: right top;
}

#partners_alphabeti li a img
{
    margin-top: 15px;
    margin-left: 13px;
}

#partners_scroll
{
    height: 355px;


}

/* SERVIZI */

#servizi_alphabeti
{
    width: 447px;   
    height: 400px;
}

#servizi
{
    margin-top: 2px;
    height: 360px;
    width: 99%;     
}

#servizi_alphabeti li a:link,
#servizi_alphabeti li a:visited
{
    margin: 4px 0;
    height: 60px;  
    background-position: right bottom;
    background-repeat: no-repeat;
}
#servizi_alphabeti li a:hover
{
    background-position: top right;
}

/* SERVIZI ROLLOVER */

/* 
    è sufficiente specificare l'immagine di sfondo di ciascuna voce; l'effetto rollover è dato automaticamente dallo script originale,
   che assegna la classe .link_selezionato, la quale specifica l'allineamento bottom dello sfondo, qualunque esso sia.
*/

#link_IMVR 
{
    background-image: url('../_pix/link_imvr.jpg') !important;
}
#link_Alphamuse 
{
    background-image: url('../_pix/link_alphamuse.jpg') !important;
}
#link_Eracle 
{
    background-image: url('../_pix/link_eracle.jpg') !important;
}
#link_Convegni
{
    background-image: url('../_pix/link_convegni.jpg') !important;
}
#link_Design
{
    background-image: url('../_pix/link_comunicazione_e_design.jpg') !important;
}
#link_Formazione
{
    background-image: url('../_pix/link_formazione.jpg') !important;
}
#link_SW2B
{
    background-image: url('../_pix/link_SW2B.jpg') !important;
}

/* CLIENTI */

#clienti_alphabeti 
{
    width: 437px;   
    height: 400px;
    padding-right: 10px;
}

#clienti_alphabeti ul 
{
   padding: 10px 20px 10px 10px;
   
}

#clienti_alphabeti a:link,
#clienti_alphabeti a:visited
{
    display: block;
    font: 13pt Times New Roman, Times, Georgia, serif;
    line-height: 1.3em;
    background-image: none !important; /* impedisce l'assegnazione dell'immagine di sfondo quando diventa link_visualizzato */
    border-bottom: 1px solid #D0D0D0;
    color: #505050;
    padding-bottom: 5px;
    font-style: italic;
    height: auto !important;
    height: 30px;
}
#clienti_alphabeti a:hover
{
    text-decoration: underline;
    color: rgb(152,0,36);
    /*font-weight: bold;*/
}

#clienti_scroll
{
    padding-top: 15px;
	height:355px;
}

/* EVENTI */

#eventi_alphabeti
{
    width: 447px;
    height:400px;
}

#prossimi_eventi
{
    height: 145px;
    overflow: hidden;
}

#eventi_passati
{
    height: 175px;
    width: 99%;   
}

#eventi_alphabeti li a:link,
#eventi_alphabeti li a:visited
{
    margin: 4px 0;
    height: 60px;  
    background-image: url('../_pix/bg_li.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    color: #333333; 
    padding-left: 8px;
}

#eventi_alphabeti li a:hover
{
    background-position: top right;
}

/* NOTIZIE */

#notizie_alphabeti  
{
    width: 437px;   
    height: 400px;
    padding-right: 10px;
}

#notizie_alphabeti ul 
{
   padding: 10px 20px 10px 10px;

}

#notizie_alphabeti a:link,
#notizie_alphabeti a:visited
{
    display: block;
    font: 10pt Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background-image: none !important; /* impedisce l'assegnazione dell'immagine di sfondo quando diventa link_visualizzato */
    color: #505050;
    padding-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid #E0E0E0;
}
#notizie_alphabeti a:hover
{
    /*font-weight: bold;*/
    color: rgb(152,0,36);
    padding-right: 0px;    
}

#notizie_alphabeti .data
{
    font: 10pt Arial, Helvetica, sans-serif;
    color: #909090;
    float: left;
    padding-bottom: 20px;
    padding-right: 10px;
    border-right: 1px solid #E0E0E0;
    margin-right: 10px;
}

#notizie_scroll
{
    padding-top: 0px;
	height:345px;
}

/* CONTATTI */

#contatti_alphabeti
{
    width: 447px;   
    height: 400px;
}

#contatti
{
    margin-left: 20px;
}

#contatti td
{
    font: 10pt Arial, Helvetica, sans-serif;
    color: #404040;
    height: 70px;
    vertical-align: middle;
    padding-left: 20px;
    border-bottom: 1px dashed #D0D0D0;
    line-height: 1.3em;
}



/* fine elementi in MID  */


/* BOT */

#footer
{
   /* chiude la pagina e ospita i link del w3c, copyright etc. */
   width: 98%;
   margin: 0 auto;
   display: inline;
}

#footer p
{
    font: 9pt Arial, Helvetica, sans-serif;
    color: #A0A0A0;
    font-style: italic;
}

#footer a:link, 
#footer a:visited
{
    color: #A0A0A0;
    text-decoration: none;
}
#footer a:hover
{   
    color: #909090;
    text-decoration: underline;
}

#piva{
    float: left;
    width: 440px;
    /*text-align: right;*/
}

#copyright{
    float: right;
    text-align: right;
    padding-right: 20px;
}

#modale 
{
}

#modale #main
{
	background-color: white;
	border: 1px solid #C0C0C0;
	padding: 10px;
	margin: 20px;
}

#modale h3
{
	width: 96%;
	border-bottom: 1px solid black;
	margin-bottom: 16px;
}



#modale  ul
{
	margin-bottom: 4px;
	margin-left: 10px;
	width: 85%;
}

#modale  li
{
	padding-left: 30px;
	padding-bottom: 4px;
	border-bottom: 1px dashed #C0C0C0;
	margin-top: 4px;
}

#modale  li a:link, 
#modale  li a:visited
{
    /* impostazioni comuni a tutti gli elenchi di link */
    display: block;
    text-decoration: none;
    margin-right: 4px; /* margine di destra */
}

#modale  li a img
{
    border: 0 !important;
}

#sipario {
	display: block;
	position: absolute;
	top: 0; 
	left: 0;
	padding: 180px 0 0 210px;
	width: 100%;
	height: 100%;
	filter:alpha(opacity=20);
	-moz-opacity: 0.20;
	opacity: 0.20;
	background-color: #666;
}