/* MICSU.CSS - autore Fabio Brivio - e-mail fabio_brivio@hotmail.com */
/* Il layout di questo CSS è liberamente ispirato al sito del MICSU
- master FSE in Metodologie di Informatica e Comunicazione per le Scienze
Umanistiche, promosso dalla facoltà di Lettere e Filosofia dell’Università
degli Studi di Milano in collaborazione con il Dipartimento di Filosofia e
il Dipartimento di Informatica e Comunicazione - visualizzabile all'URL
http://micsu.dipafilo.unimi.it/ e realizzato dallo staff della PRECISO.NET
http://www.preciso.net: Mauro Giudici, Manuela Di Roberto e Manuela Ottaviani,
miei docenti durante il master nell'edizione 2003-04. Anche le GIF della testata
e dello sfondo sono state realizzate a partire da quelle studiate da Manuela
Di Roberto per il sito ufficiale del MICSU */

/* inizio formattazioni comuni a tutta la pagina */

body {
background-color: white;
text-align: center;
background-image: url('preciso_sfondo.gif');
background-repeat: repeat-y;
cursor: crosshair;
}

#corpo {
cursor: crosshair;
text-align: left;
width: 760px;
position: relative;
margin: auto;
font-family: Arial, Verdana, Geneva, Trebuchet, sans-serif;
font-size: 80%;
}

a {
cursor: crosshair;
color: black;
}

a:visited {
color: gray;
}

a:hover {
cursor: crosshair;
color: rgb(147, 2, 47);
font-weight: bold;
text-decoration: none;
background-color: rgb(255, 239, 207);
}

/* fine sezione formattazioni comuni */

/* inizio sezione formattazione TESTA. Ho qui sostituito il testo dei
titoli H1-H2 con un'immagine. Su questa tecnica - ormai ampiamente
diffusa - ho trovato un buon tutorial segnalato tra i commenti dei
CSS di CSSZenGarden, si tratta di:
http://www.stopdesign.com/articles/css/replace-text/ */

#testa {
height: 140px;
width: 760px;
background-image: url('testa13.gif');
border-bottom: 1px solid rgb(144, 0, 47);
border-right: 1px solid rgb(144, 0, 47);
}

h1, h2 {
display: none;
}

/* fine sezione formattazioni TESTA */

/* inizio sezione della formattazione della colonna PRINCIPALE */

#principale {
width: 65%;
float: right;
padding: 2em 2em 2em 0em;
margin-top: 34px;
background-color: transparent;
background-image: url('getfirefox4.gif'); /* questa GIF è stata realizzata dall'autore di questo CSS sulla base delle immagini disponibili sul sito ufficiale del 'Mozilla project' - http://www.mozilla.org/products/firefox/buttons.html - ; non si tratta quindi di un logo ufficiale ma semplicemente di un personale contributo alla diffusione di un browser fondamentale per chi vuole avvicinarsi allo studio dei CSS */ 
background-repeat: no-repeat;
background-position: bottom left;
}

acronym {
color: rgb(218, 146, 114);
}

.scarica {
font-size: 120%;
background-color: rgb(218, 146, 114);
border-width: 1px;
border-style: solid;
border-left-color: rgb(189, 134, 146);
border-top-color: rgb(189, 134, 146);
border-bottom-color: rgb(144, 0, 47);
border-right-color: rgb(144, 0, 47);
padding: 5px;
margin-bottom: 2em;
}

.scarica h4 {
font-weight: normal;
display: inline;
background-color: rgb(218, 146, 114);
}

.scarica p {
display: inline;
}

.iniziativa, .riferimenti, .partecipazione {
padding-bottom: 1em;
margin-bottom: 2em;
border-bottom: 1px solid rgb(160, 144, 96);
}

.iniziativa h4, .riferimenti h4, .partecipazione h4 {
font-size: 120%;
font-weight: normal;
color: rgb(46, 46, 46);
background-color: rgb(255, 239, 207);
border-width: 1px;
border-style: solid;
border-left-color: rgb(207, 176, 128);
border-top-color: rgb(207, 176, 128);
border-bottom-color: rgb(160, 144, 96);
border-right-color: rgb(160, 144, 96);
padding: 5px;
}

/* fine sezione formattazione PRINCIPALE */

/* inizio sezione di formattazione della COLONNA-DX.
Per ottenere una omogenea visualizzazione - tra i più comuni browser -
del posizionamento assoluto del blocco ho liberamente consultato il sito
del grande Peter Paul Koch http://www.quirksmode.org/ , in particolare
la sezione inerente ai bug di Windows IE5 */

#colonna-dx {
position: absolute;
top: 170px;
left: 0px;
text-align: center;
width: 200px;
background-color: rgb(240, 207, 143);
padding-top: 1em;
padding-bottom: 2em;
border-width: 1px;
border-style: solid;
border-left-color: rgb(189, 134, 146);
border-top-color: rgb(189, 134, 146);
border-bottom-color: rgb(144, 0, 47);
border-right-color: rgb(144, 0, 47);
margin-top: 30px;
}

.stili, .risorse {
margin-bottom: 2em;
}

h3 {
font-size: 120%;
font-weight: normal;
color: rgb(62, 62, 62);
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: -10px;
padding: 5px;
background-color: rgb(255, 239, 207);
border-width: 2px;
border-style: solid;
border-left-color: rgb(207, 176, 128);
border-top-color: rgb(207, 176, 128);
border-bottom-color: rgb(162, 146, 98);
border-right-color: rgb(162, 146, 98);
}

ul {
list-style-type: none;
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 2px;
}

li {
text-align: right;
margin-top: 5px;
padding: 5px;
border-bottom: 1px solid rgb(218, 146, 114);
border-right: 1px solid rgb(218, 146, 114);
}

li a {
display: block;
}

li a:hover {
padding-left: 3px; 
padding-right: 3px; 
border-width: 1px; /* ponendo qui come valore: 0.009mm si riesce a visualizzare un sottile bordo senza apparentemente modificare l'altezza degli elementi LI. Tuttavia questo valore in mm è interpretato solo da FireFox */
border-style: solid;
border-left-color: rgb(207, 176, 128);
border-top-color: rgb(207, 176, 128);
border-bottom-color: rgb(255, 239, 207);
border-right-color: rgb(255, 239, 207);
}

/* inizio personalizzazione della sezione VALIDAZIONI W3C */

.validazioni {
height: 200px;
background-image: url('w3c_validator2.gif');
background-repeat: no-repeat;
font-size: 120%;
font-weight: normal;
color: rgb(62, 62, 62);
width: 85%;
margin-left: auto;
margin-right: auto;
background-color: rgb(255, 239, 207);
border-width: 2px;
border-style: solid;
border-left-color: rgb(207, 176, 128);
border-top-color: rgb(207, 176, 128);
border-bottom-color: rgb(162, 146, 98);
border-right-color: rgb(162, 146, 98);
}

.validazioni a {
display: block;
text-align: center;
color: white;
background-color: rgb(2, 90, 154);
width: 88px;
height: 31px;
border-width: 3px;
border-style: solid;
border-left-color: rgb(137, 195, 237);
border-top-color: rgb(137, 195, 237);
border-bottom-color: rgb(2, 39, 66);
border-right-color: rgb(2, 39, 66);
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}

/* la sintassi dei selettori dei tre effetti HOVER che seguono non viene
interpretata dai browser IE 5-6, viene invece correttamente riconosciuta
dai browser della famiglia FireFox dove vengono quindi visualizzati i 3 loghi W3C
di conformità agli standard. Si veda anche il commento nella sezione FOOTER */ 

.validazioni a[title="Verifica la validità del codice xhtml 1.0 strict!"]:hover {
background-image: url('valid_XHTML.gif');
}

.validazioni a[title="Verifica la validità del foglio di stile"]:hover {
background-image: url('valid_CSS.gif');
}

.validazioni a[title="CSS Zen Sentiero rispetta  i primi due livelli di priorità stabiliti dalle linee guida sull'accessibilità dei siti web."]:hover {
background-image: url('wcag1AA.gif');
}

/* in relazione a quanto scritto nel precedente commento, sui browser IE 5-6
e su tutti quelli che non riescono a leggere le tre precedenti istruzioni compare
quindi il singolo logo W3C. Le proprietà FONT-SIZE, TEXT-DECORATION
e BORDER-TOP-LEFT-RIGHT-BOTTOM sono invece costanti e indipendenti dal tipo di immagine
visualizzata. Esse di conseguenza vengono specificate, qui, una sola volta */ 

.validazioni a:hover {
font-size: 0px;
text-decoration: none;
background-color: white;
background-image: url('w3c_logo_47x31.gif');
background-repeat: no-repeat;
background-position: center;
border-left-color: rgb(2, 90, 154);
border-top-color: rgb(2, 90, 154);
border-bottom-color: rgb(255, 239, 207);
border-right-color: rgb(255, 239, 207);
}

/* fine personalizzazione VALIDAZIONI W3C */

/* fine personalizzazione COLONNA-DX */

/* inizio sezione di formattazione del FOOTER */

div[id="footer"] { /* questa sintassi dei selettori viene implementata correttamente
solo da browser come Mozilla FireFox (personalmente testato), Mozilla 1.6, Safari 1.2
e Opera 7.50 (su questi ultimi 3 si veda il sito di Peter Paul Koch http://www.quirksmode.org/
alla sezione 'CSS Contents and compatibility'). IE 5-6 la ignora del tutto (come del resto
la proprietà POSITION:FIXED), collocando di default il blocco privo di effetto HOVER
in alto a SX sotto la testata. Nell'impossibilità di ovviare a questo inconveniente
ho cercato di sfruttare questo 'BUG di IE' per ottimizzare il layout in due differenti modi */
position: fixed;
bottom: 0px;				
right: 0px;
width: 155px;
height: 83px;
background-image: url('csszensentiero155x83.gif');
background-repeat: no-repeat;
background-position: top right;
font-size: 0px;
}

div[id="footer"]:hover { /* in aggiunta al precedente commento si noti anche che IE riconosce
gli effetti HOVER solo quando associati ad elementi A, di conseguenza questa istruzione viene
doppiamente ignorata dai browser della Microsoft */
font-size: 100%;
background-image: url('preciso_sfondo.gif');
background-repeat: repeat-y;
width: 153px;
height: 81px;
border-width: 1px;
border-style: solid;
border-left-color: rgb(207, 176, 128);
border-top-color: rgb(207, 176, 128);
border-bottom-color: white;
border-right-color: white;
padding-left: 5px;
padding-right: 5px;
}

#footer { /* in relazione agli ultimi due commenti, questa è la sola istruzione riconosciuta
da IE per quanto riguarda la formattazione del FOOTER che su questo browser appare quindi come
una semplice scritta posizionata a SX sotto la testata. Su Mozilla il FOOTER è invece collocato
in maniera fissa nell'angolo inferiore DX della pagina - logo di CSS ZEN SENTIERO - con relativo
effetto HOVER */ 
font-family: Haettenschweiler, Garamond, Impact;
}

/* fine personalizzazione FOOTER */

#extraDiv1 {
display: none;
}