/* coding=UTF-8 */ @import url('/common-files/style/normalize.css'); html, body { height: 100%; } /* Imposta l'altezza pari alla finestra del Browser, serve dopo per impostare l'altezza di elementi contenuti correlandola a quella del Browser. */ body { font-family: Verdana, "Trebuchet MS", Geneva, Helvetica, sans-serif; font-size: 82%; } /* Assegnando la dimensione in em, l'aumento della "dimensione testo" fatta dal menu del browser è molto più accentuata. */ #body-color { /* Serve per impostare il colore della pagina e dell'intera finestra del Browser, perché cambiando il colore di sfondo del possono modificarsi anche le barre di scorrimento. */ min-height: 100%; /* Questo serve per estendere all'intera finestra del Browser le pagine che sono più corte, ottenendo in tal modo la colorazione globale. */ background-color: #FFFFFF; color: #000000; } @media only screen and (max-width: 600px) { /* Applicata per area di visualizzazione inferiore o uguale a 600 pixel. */ #body-jo { margin: 0px; padding: 0px 4px 12px 4px; } /* Il margine laterale è come lo spazio tra i bottoni dichiarato nella funzione "jo_display_menu_mobile()". */ } @media only screen and (min-width: 601px) { /* Applicata per area di visualizzazione da 601 a 1199 pixel. L'aggiunta " and (max-width: 1199px)" sarebbe superflua in quanto viene applicata l'ultima regola valida. Non viene attuata alcuna correzione per (min-aspect-ratio: 2/1) = area di visualizzazione larga almeno il doppio dell'altezza. */ #body-jo { margin: 0px; padding: 0px 6px 24px 6px; } } /* Classi da assegnare agli elementi che devono alternativamente apparire e scomparire al cambio di modello di layout (pc <--> mobile). */ .layout-pc { display: none; } .layout-mobile { display: block; } .flag_host { top: 0px; left: 0px; right: auto; } /* Classi assegnate agli elementi per evitare di usare le corrispondenti proprietà in sintassi "inline" (style="..."), in genere nelle variazioni allo stile degli elementi HTML attuate con JavaScript. Vengono usate nella funzione JavaScript "setClass()". */ .display-block {display: block;} .display-inline {display: inline;} .display-none {display: none !important;} /* Quando viene usata la classe per nascondere un elemento, deve sempre sovrascrivere un'eventuale proprietà "display" già presente nell'elemento HTML. */ .visibility-visible {visibility: visible;} .visibility-hidden {visibility: hidden;} .overflow-visible {overflow: visible;} .overflow-hidden {overflow: hidden;} .overflow-auto {overflow: auto;} /* Visualizzazione risultante dalla combinazione di due classi che agiscono sulla stessa proprietà CSS. E' trattata a questo livello in modo che possa essere condizionata dalle @media-query. */ .layout-pc.display-block {display: none;} .layout-pc.display-inline {display: none;} .layout-mobile.display-block {display: block;} .layout-mobile.display-inline {display: inline;} @media only screen and (min-width: 1200px) { /* Applicata per area di visualizzazione maggiore o uguale a 1200 pixel. Limite inferiore per la visualizzazione modello "pc", al di sotto viene applicato il modello "mobile". */ #body-jo { /* Questo diventa il contenitore principale di tutto (viene usato come pseudo-body). */ margin: 0px; /* Anche avendo separato in due divisioni il colore della pagina ed il margine, il margine deve essere fatto con "padding", perché in caso contrario non viene colorato solo il margine superiore. */ padding: 18px 12px 24px 12px; } /* In un layout fluido, margini per staccare gli elementi dal bordo interno della finestra del Browser. */ /* Classi da assegnare agli elementi che devono alternativamente apparire e scomparire al cambio di modello di layout (pc <--> mobile). */ .layout-pc { display: block; } .layout-mobile { display: none; } .flag_host { top: 0px; left: auto; right: 0px; } /* Visualizzazione risultante dalla combinazione di due classi che agiscono sulla stessa proprietà CSS. E' trattata a questo livello in modo che possa essere condizionata dalle @media-query. */ .layout-pc.display-block {display: block;} .layout-pc.display-inline {display: inline;} .layout-mobile.display-block {display: none;} .layout-mobile.display-inline {display: none;} } /* IMPORTANTE: per IE serve almeno un margine laterale di 12px (basta un margine di 6px dopo che nei form sono state applicate le correzioni di dimensione dei campi con width:100%), per non fargli visualizzare (inutilmente) la barra di scorrimeto orizzontale quando poi ci sono campi/elementi con width:100%. Comunque i contenitori direttamente sotto body è bene che non abbiano width:100% dichiarato (nessun width va bene). Anche per i contenitori non direttamente dipendenti se dichiarati con width:100%, IE ha problemi. Meno se hanno la clausola float. I test precedenti sono stati fatti con vecchie versioni di IE e sono riferiti alla versione di GeMMA in cui il tag era usato come contenitore e non c'era il contenitore principale "body-jo". - Definendo "line-height:100%" si ottiene un effetto peggiore sull'allineamento verticale degli oggetti scritte/form ed il testo nei bottoni risulta spostato un poco in alto e non centrato. - Non è possibile unire le funzioni di colore della pagina e margini in un unica divisione, perché per colorare tutta la pagina bisogna fare i margini con "padding" ed in tal caso "min-height: 100%" non funziona correttamente, perché all'altezza della finestra del Browser vengono aggiunti i valori di padding-verticale; e se non si usa "min-height: 100%" le pagine più corte dell'altezza della finestra del Browser vengono colorate parzialmente e a peggiorare l'effetto c'è anche il fatto che se il menu di destra è più lungo della pagina esso va oltre l'area colorata. */ /* Nel file "/util-doc/ANALISI DIMENSIONE DEL FONT.txt" sono documentate le prove fatte con le diverse dimensioni. */ input, textarea, select, button { font-family: Verdana, "Trebuchet MS", Geneva, Helvetica, sans-serif; font-size: 100%; } /* La scelta del tipo di carattere da usare (font-family) serve ad armonizzare il testo dei controlli con quello del resto della pagina, altrimenti userebbe Times New Roman per il testo della pagina ed Arial per il testo nei controlli. - L'assegnazione della dimensione del testo dei controlli nei form serve a renderli ridimensionabili con la scelta della "dimensione testo" fatta dal menu del browser. La loro dimensione è calcolata in relazione a quella definita nel "body", mentre non assegnandola i controlli non vengono correlati al "body", nonostante dipendano comunque da esso, e mantengono una dimensione fissa quando si agisce con i comandi del browser. - Impostando "line-height" cambia come il contenuto si dispone verticalmente all'interno del riquadro del controllo, non l'altezza del riquadro. Inoltre mettendolo al 100% le righe risultano troppo ravvicinate; nei controlli multiriga si pestano e negli altri il contenuto risulta allineato più in alto rispetto alla label del controllo e si perde, ad esempio, la parte bassa delle "g". */ /* CONTENITORI PRINCIPALI (PAGINA), i nomi sono stati suffissati per evitare conflitti con nomi esistenti se la pagina deve diventare un riquadro in una pagina di livello superiore. */ #ws-header-jo { width: 100%; } /* Divisione con la testata-grafica delle pagine per il modello "pc". */ #ws-header-mobile-jo { width: 100%; position: fixed; top: 0px; left: 0px; z-index: 105; background-color: #FFFFFF; } /* Divisione con la testata-grafica delle pagine per il modello "mobile". Deve stare sopra il "menu mobile" (div.menumobile) che ha "z-index: 100". Il colore di sfondo non può essere trasparente altrimenti si vede il contenuto della pagina che gli scorre sotto, quindi è stato usato il colore del corpo della pagina. */ @media only screen and (min-aspect-ratio: 14/10) { /* Applicata per area di visualizzazione più larga dell'altezza (orientamento "landscape"). */ #ws-header-mobile-jo { width: 100%; position: absolute; top: 0px; left: 0px; z-index: auto; background-color: #FFFFFF; } /* Divisione con la testata-grafica delle pagine per il modello "mobile". */ } /* Riquadro di login (con bordo) a larghezza piena della pagina se messo come primo riquadro. Per questo formato non può stare dentro il contenitore "pag-jo", in quanto la sua altezza renderebbe non definibile il posizionamento della colonna di destra per farla stare sotto. Può essere usato dentro "colonna-pri-jo" prima di "menu-jo_open" per diventare un riquadro solo sopra il menu, lasciando lo spazio a sinistra per il corpo della pagina. Può essere usato dentro "corpo-jo", all'inizio, per diventare un riquadro largo come il corpo principale informativo, il menu di destra arriva così fino in cima alla pagina. */ #loginbox-jo_open { position: relative; /* Indicato per potere attribuire ad elementi all'interno del riquadro il posizionamento assoluto riferendolo al riquadro stesso. Implicitamente assume 0,0. */ z-index: 20; margin: 0px 0px 2em 0px; border: 1px solid #ADD8E6; border-radius: 6px; /* Agisce da: IE 9.0; FireFox 4.0; Chrome 5.0; Safari 5.0; Opera 10.5. */ background-color: #F0F8FF; color: #666666; } /* font-size: "logbox-font-size%"; impostato ad 86 era troppo grande, a 72 andava differenziato per Safari, quindi è stata usata una classe aggiuntiva per la dimensione del font quando si usa il riquadro, visto che viene disegnato solo dalla funzione "jo_display_loginbox()" in "JoLib_FuncGen_com_L2.inc.php". */ div.loginbox-jo-contenuti_open { padding: 0px 7px 0.96em 7px; } #loginbox-jo_close { /* Riquadro di login ridotto, sotto quello aperto, per l'effetto riquadro chiuso (senza dati), per la funzione "Nascondi/Mostra" applicata ai dati di login. */ position: relative; z-index: 10; margin: 0px 0px 2em 0px; border: 1px solid #ADD8E6; border-radius: 6px; /* Agisce da: IE 9.0; FireFox 4.0; Chrome 5.0; Safari 5.0; Opera 10.5. */ background-color: #F0F8FF; color: #666666; } div.loginbox-jo-contenuti_close { padding: 0px 7px 0.48em 7px; } /* Pagina (contenitore) sotto la testata (se c'è), a larghezza piena. */ #pag-jo { /* Riquadro usato solo come contenitore, a margine neutro (assente), in quanto varia ciò che può stargli sopra o dentro come primo elemento. */ position: relative; margin: 0px; padding: 0px; background-color: transparent; } /* Corpo principale informativo (senza bordo), contenuto nella pagina (il margine destro è correlato alla larghezza di #colonna-pri-jo e #colonna-pri-jo_closedontop). */ #corpo-jo { /* Senza padding superiore la parte alta del corpo rimane allineata con la parte alta della colonna di destra, quando il riquadro di login non è dentro il corpo. */ margin: 0px; padding: 0px; background-color: transparent; } @media only screen and (min-width: 1200px) { /* Applicata per area di visualizzazione maggiore o uguale a 1200 pixel. Limite inferiore per la visualizzazione modello "pc", al di sotto viene applicato il modello "mobile". */ #corpo-jo { margin: 0px 250px 0px 0px; /* Il margine destro viene ridotto alla larghezza della colonna "colonna-pri-jo_closedonright", o azzerato, quando il menu viene chiuso. */ padding: 0px 12px 0px 0px; } /* Il padding destro serve solo insieme a margin-right<>0 quando c'è la colonna di destra, perché la spaziatura nella finestra del Browser è ottenuta con un altro contenitore. */ } /* Colonna (contenitore) di destra, a fianco al corpo. Serve per definire la larghezza comprensiva di border+padding. */ #colonna-pri-jo { position: absolute; /* Gli elementi che saranno disegnati al suo interno (menu aperto) non possono avere "position: absolute", perché verrebbero anch'essi portati fuori dal flusso del documento e non occuperebbero spazio all'interno di questo elemento, falsandone la dimensione. */ top: 0px; /* Posizionamento misurato dentro #pag-jo, primo box contenitore dell'elemento che ha un posizionamento diverso da static. */ right: 0px; z-index: 20; width: 250px; margin: 0px; padding: 0px 0px 24px 0px; } #colonna-pri-jo_closerightfull { /* Colonna colorata per tutta l'altezza del contenuto della pagina, per contenere il link fisso nella finestra del Browser che serve a chiudere il menu a destra. */ position: absolute; top: 0px; /* Posizionamento misurato dentro #pag-jo, primo box contenitore dell'elemento che ha un posizionamento diverso da static. */ right: 0px; width: 26px; height: 100%; background-color: #99FFFF; } #colonna-pri-jo_closedonright { position: fixed; top: 140px; /* Posizionamento misurato nella finestra del Browser, rimane fermo, non scorre con la pagina (supportato da IE>=7). */ right: 12px; /* Padding destro del pseudo-body quando l'area di visualizzazione è larga e quindi c'è il menu a destra. */ z-index: 10; width: 26px; background-color: #99FFFF; /* Gli viene comunque assegnato il colore di sfondo per le pagine che dovessero essere più corte del contenuto di questo riquadro/link. */ margin: 0px; padding: 24px 0px; } /* Il padding superiore corrisponde a quello del della pagina ("body-jo"). */ #colonna-pri-jo_closedontop { position: absolute; /* Gli elementi che saranno disegnati al suo interno (menu chiuso) non possono avere "position: absolute", perché verrebbero anch'essi portati fuori dal flusso del documento e non occuperebbero spazio all'interno di questo elemento, falsandone la dimensione. */ top: 0px; /* Posizionamento misurato dentro #pag-jo, primo box contenitore dell'elemento che ha un posizionamento diverso da static. */ right: 0px; z-index: 10; width: 250px; margin: 0px; padding: 0px 0px 0.48em 0px; } #menu-jo_close { margin: 0px; border: 1px solid #ADD8E6; border-radius: 6px; /* Agisce da: IE 9.0; FireFox 4.0; Chrome 5.0; Safari 5.0; Opera 10.5. */ padding: 0px 8px 4px 8px; background-color: #F0F8FF; position: relative; /* Serve per fare funzionare z-index. */ z-index: 10; } /* Colonna di destra (menu con bordo), dentro la colonna di destra. */ #menu-jo_open { margin: 0px; border: 1px solid #ADD8E6; border-radius: 6px; /* Agisce da: IE 9.0; FireFox 4.0; Chrome 5.0; Safari 5.0; Opera 10.5. */ padding: 0px 8px 8px 8px; background-color: #F0F8FF; position: relative; /* Serve per fare funzionare z-index. */ z-index: 20; } /* Fondo pagina a larghezza piena, usato dentro "corpo-jo", alla fine. Diventa un riquadro di fondo largo come il corpo principale informativo, così il menu di destra, se più lungo del corpo, non si sovrappone ad eventuali contenuti del fondo. Se viene messo dopo la chiusura del contenitore "pag-jo" assume la larghezza della pagina, ma in tal caso bisogna essere certi che che la colonna di destra (menu) sia più corta del corpo, altrimenti si sovrappone al fondo pagina. Essendo la colonna di destra portata fuori dal flusso dei riquadri, con "position: absolute;" si perde la possibilità d'avere un riquadro che risenta della sua lunghezza, anche includendo tutto in un riquadro di livello superiore. */ #fondo-jo { position: relative; /* Indicato per potere attribuire ad elementi all'interno del riquadro il posizionamento assoluto riferendolo al riquadro stesso. */ z-index: 20; margin: 1.3em 0px 0px 0px; padding: 0px 7px 0.96em 7px; background-color: #FFFFFF; } /* La divisione cromatica delle 2 colonne e l'aggiunta di un fondo pagina, a larghezza piena, non hanno problemi solo se il corpo è più lungo del menu. Per ovviare bisogna nell'HTML invertire l'ordine di dichiarazione di corpo e menu (prima menu) ed usare "float" non "position: absolute" per il menu. */ /* COLORI */ .color-titlepag { color: #009999; } /* Colore usato per i titoli delle pagine. */ .color-title { color: #FF6633; } /* Colore usato per titoli generici di paragrafi (h). */ .color-msg { color: #DC143C; } /* Colore usato nei messaggi d'errore, da usare per le segnalazioni importanti. */ .color-note { color: #C71585; } /* Colore usato per messaggi e note da evidenziare rispetto al corpo del testo. */ .color-unevid { color: #808080; } /* Colore usato per scritte meno evidenti del normale. */ .bg-msg { background-color: #FAFAD2; } /* Colore di sfondo usato nei messaggi d'errore, da usare per le segnalazioni importanti. */ .bg-goto { background-color: #CCFFCC; } /* Colore di sfondo usato per scritte che stanno accanto ai bottoni per spostarsi all'interno di una pagina. */ .bg-msg, .bg-goto { padding: 0.2em 0.5em 0.4em 0.5em; } /* CONTENITORI */ /* Gli spazi laterali tra contenitori bordati devono essere definiti come padding interno del contenitore più esterno. [La scelta è stata anche determinata dalla necessità di partire con un margine per body, per ovviare ad un difetto di IE.] - Gli spazi verticali (top) è meglio gestirli nel contenitore interno, che sà se ha un'etichetta sporgente in alto o altre necessità specifiche. Nel caso d'etichetta sporgente è bene dare il margine in "em" per proporzionarlo al variare della dimensione del carattere dell'etichetta. Questa condizione, per i contenuti di un box, crea la situazione per cui non debbono preoccuparsi dello spazio laterale per distaccarsi dal box, ma devono invece definire quello verticale. [La scelta ottimale di avere un margine o padding superiore nel box esterno ed uno, eventualmente, aggiuntivo in quello interno è vanificata dal comportamento diverso di IE, che in questi casi aumenta (somma) margini concordi e trascura (sottrae) il padding fino a 15px~1em.] [Se il box esterno non ha bordo si potrebbe dargli margin+padding, IE prende margin aumentato, gli altri sommano i 2 valori.] [Un altro vantaggio di uniformità definendo la distanza superiore nel box interno riguarda come gli altri browser trattano il box interno se esso viene spostato con valori relative/negativi nello spazio del contenitore esterno. Se quello esterno è senza bordo il suo spazio viene invaso, se ha il bordo tutto è tenuto sotto il bordo. IE tiene tutto sotto l'eventuale bordo.] */ /* Riquadri a piena larghezza nel loro contenitore. */ div.subbox-pri { position: relative; /* Indicato per potere attribuire ad elementi all'interno del riquadro il posizionamento assoluto riferendolo al riquadro stesso. */ z-index: 20; margin: 1.36em 0px; border: 5px double #6495ED; border-radius: 15px; /* Agisce da: IE 9.0; FireFox 4.0; Chrome 5.0; Safari 5.0; Opera 10.5. */ padding: 0.24em 12px 1.6em 12px; /* Il padding-top serve a distanziare i contenuti, che lo sono già in parte per via dello spostamento in alto del titolo del riquadro (.box-title). */ text-align: left; } /* Serve per garantire l'allineamento di default del contenuto del riquadro, che sarebbe alterato dall'ereditarietà HTML se il riquadro fosse all'interno di una divisione con allineamento specifico. */ div.subbox-pri2 { position: relative; /* Indicato per potere attribuire ad elementi all'interno del riquadro il posizionamento assoluto riferendolo al riquadro stesso. */ z-index: 20; margin: 1.36em 0px; border: 2px solid #6495ED; border-radius: 15px; /* Agisce da: IE 9.0; FireFox 4.0; Chrome 5.0; Safari 5.0; Opera 10.5. */ padding: 0.24em 12px 1.6em 12px; /* Il padding-top serve a distanziare i contenuti, ma va aggiunto (in negativo) allo spostamento in alto del titolo del riquadro (.box-title), che sarebbe 0.7 con padding-top=0px. */ text-align: left; } /* Serve per garantire l'allineamento di default del contenuto del riquadro, che sarebbe alterato dall'ereditarietà HTML se il riquadro fosse all'interno di una divisione con allineamento specifico. */ div.subbox { position: relative; /* Indicato per potere attribuire ad elementi all'interno del riquadro il posizionamento assoluto riferendolo al riquadro stesso. */ z-index: 20; margin: 1.36em 0px; border: 2px solid #E6E6FA; border-radius: 15px; /* Agisce da: IE 9.0; FireFox 4.0; Chrome 5.0; Safari 5.0; Opera 10.5. */ padding: 0.24em 9px 1.2em 9px; /* Il padding-top serve a distanziare i contenuti, ma va aggiunto (in negativo) allo spostamento in alto del titolo del riquadro (.box-title), che sarebbe 0.7 con padding-top=0px. */ background-color: #F0F8FF; text-align: left; } /* Serve per garantire l'allineamento di default del contenuto del riquadro, che sarebbe alterato dall'ereditarietà HTML se il riquadro fosse all'interno di una divisione con allineamento specifico. */ /* SCRITTE */ /* Etichetta di titolo, incorniciata, per i riquadri. Con elementi SPAN di seguito si possono anche mettere etichette multiple. Uso: definire 3 classi per l'elemento in linea (span), messo all'inizio del riquadro da titolare (generica=box-title size... color...). */ .box-title { font-weight: bold; font-style: normal; font-variant: small-caps; text-align: left; position: relative; top: -0.7em; z-index: 50; margin: 10px 6px; /* Sposta a destra l'etichetta. */ padding: 0px 0.5em 2px 0.7em; /* Altezza e larghezza del riquadro dell'etichetta. */ background-color: #FFFFFF; /* Va opacizzato con un colore di sfondo (della pagina se il box di cui è titolo è trasparente, o del box contenuto o contenitore a piacere). */ color: #4682B4; } .box-title.size-1 { font-size: 86%; } /* Valori ricavati dall'analisi del font nei diversi Browser. */ .box-title.size1 { font-size: 117%; } .box-title.size2 { font-size: 132%; } .box-title.size3 { font-size: 155%; } .box-title.color-loginbox { border: 1px solid #ADD8E6; border-radius: 5px; } .box-title.color-menu { border: 1px solid #ADD8E6; border-radius: 5px; } .box-title.color-subbox-pri { border: 1px solid #6495ED; border-radius: 5px; } .box-title.color-subbox { border: 1px solid #E6E6FA; border-radius: 5px; } .box-title.link-openclose { padding-left: 0px; padding-right: 2px; font-weight: normal; font-style: normal; font-variant: normal; border-radius: 6px 0px 4px 6px; background-color: #FFFFFF; } /* Testo particolare, usato per il riquadro di login. */ .text-loginbox { font-size: 100%; font-weight: normal; font-style: italic; font-variant: normal; margin: -0.31em 0px 0px 0px; padding: 0px; } div.note { position: relative; /* Indicato per potere attribuire ad elementi all'interno del riquadro il posizionamento assoluto riferendolo al riquadro stesso. */ z-index: 20; margin: 1.36em 0px; padding: 0.24em 9px 1.2em 9px; /* Il padding-top serve a distanziare i contenuti, ma va aggiunto (in negativo) allo spostamento in alto del titolo del riquadro (.box-title), che sarebbe 0.7 con padding-top=0px. */ background-color: #FFF3E1; font-size: 86%; text-align: left; } /* Serve per garantire l'allineamento di default del contenuto del riquadro, che sarebbe alterato dall'ereditarietà HTML se il riquadro fosse all'interno di una divisione con allineamento specifico. */ div.note span.puntatore { font-weight: bold; font-style: normal; font-variant: small-caps; text-align: left; position: relative; top: -0.7em; z-index: 50; margin: 10px 6px; /* Sposta a destra l'etichetta. */ padding: 0px 0.5em 2px 0.7em; /* Altezza e larghezza del riquadro dell'etichetta. */ background-color: #FFF3E1; color: #4682B4; } div.note p { margin-top: 0px; margin-bottom: 0.96em; line-height: 1.3em; } /* Stile dei link. */ a img { border: none; vertical-align: bottom; } /* "border: none;" elimina il bordo di un pixel messo attorno alle immagini incluse nei link. "vertical-align: bottom;" extra space under image links fix.*/ a:link, a:visited { text-decoration: underline; color: blue; } a:hover { text-decoration: none; color: red; } a.plain:link, a.plain:visited { text-decoration: none; color: #0066CC; } a.plain:hover { text-decoration: none; color: #FF0000; } a.noalter-block:link, a.noalter-block:visited { text-decoration: none; color: inherit; display: block; } a.noalter-block:hover { text-decoration: none; opacity: 0.66; filter: Alpha(opacity=66); } /* filter: Alpha(opacity=66) è usato per IE8 o meno. */ a.noalter-block:hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } /* -webkit-filter: grayscale(100%) è usato per Chrome, Safari ed Opera. */ /* Paragrafi evidenti, con spiegazioni, usati in genere prima delle tabelle. */ p.spiega-titolo { margin: 0px 2em; text-align: left; color: #A52A2A; } /* Messaggi evidenziati, per messaggi importanti e segnalazione errori. Classi da assegnare ad un tag tipo paragrafo o titolo. */ .msg_err { margin: 0px 0px 0.8em 0px; padding: 0.5em 1em; font-size: 117%; line-height: 117%; font-weight: bold; font-style: normal; font-variant: small-caps; color: #DC143C; background-color: #FAFAD2; } .msg_err span.unevid { font-size: 87%; font-weight: normal; font-style: normal; font-variant: normal; } /* Testo ausiliario del messaggio che si vuole evidenziare di meno. */ .msginfo { /* Messaggi meno evidenziati. */ margin: 0px 0px 0.8em 0px; padding: 0px; font-weight: bold; font-style: normal; font-variant: normal; color: #DC143C; } .msginfo span.unevid { font-size: 85%; font-weight: normal; font-style: normal; font-variant: normal; } /* Testo ausiliario del messaggio che si vuole evidenziare di meno. */ /* Titoli particolari. */ h1.homepage { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Garamond, Baskerville, "Baskerville Old Face", serif; font-size: 407%; color: #8B4513; margin: 0px 60px 1em 60px; padding: 15px; background-color: #FFCC66; border-radius: 12px; } h1.homepage span { /* Testo aggiuntivo dopo il titolo. */ font-size: 72%; font-weight: normal; font-style: normal; font-variant: normal; } h2.evidenziato { color: #000000; margin: 0px 12px; padding: 6px; background-color: #FFCC99; border-radius: 12px; } h3.evidenziato { color: #000000; margin: 0px 12px; padding: 5px; background-color: #FFCC99; border-radius: 9px; } h3.evidenziato span { /* Testo aggiuntivo dopo il titolo. */ font-size: 72%; font-weight: normal; font-style: normal; font-variant: normal; color: #696969; } h2.principale { font-family: "Trebuchet MS", Helvetica, sans-serif; color: #8B4513; margin: 0px 60px 1em 60px; padding: 15px; background-color: #FFCC66; border-radius: 12px; } h3.principale { font-family: "Trebuchet MS", Helvetica, sans-serif; color: #8B4513; margin: 0px 60px 1em 60px; padding: 10px; background-color: #FFCC66; border-radius: 9px; } h3.principale span { /* Testo aggiuntivo dopo il titolo. */ font-size: 72%; font-weight: normal; font-style: normal; font-variant: normal; color: #A0522D; } h3.paragrafo { color: #FFFFFF; margin: 2em 18px 0.6em 18px; padding: 3px; background-color: #CC6600; border-radius: 9px; } @media only screen and (max-width: 1199px) { /* Visualizzazione modello "mobile". */ h1.homepage { margin: 0px 12px 1em 12px; font-size: 254%; } h2.principale { margin: 0px 12px 1em 12px; } h3.principale { margin: 0px 12px 1.3em 12px; } h3.paragrafo { margin: 1.5em 8px 0.6em 8px; } } /* Super-titolo del corpo delle pagine. */ h2.corpo { color: #009999; } /* Titolo del corpo delle pagine. */ h3.corpo { color: #009999; } h3.leftvicine { text-align: left; margin: 0px 0px 0.3em 1em; } /* Sottotitolo (informativo) del corpo delle pagine. */ h4.corpo { text-align: left; }