/* coding=UTF-8 */ /* Colori usati per i font ed altri elementi delle pagine. */ .color-logo-p1 { color: #0066FF; } /* Colori / Ge. / j */ .color-logo-p2 { color: #FF1493; } /* usati / M. / */ .color-logo-p3 { color: #32CD32; } /* per / M. / m */ .color-logo-p4 { color: #FF9900; } /* il / A. / job */ .color-logo-p5 { color: #FFD700; } /* logo. / / e */ .color-orange { color: #FFA500; } /* Colori usabili assegnando una classe con il nome HTML del colore (nomi e colori fissi). */ .color-dark-orange { color: #FF8C00; } .color-coral { color: #FF7F50; } .color-tomato { color: #FF6347; } .color-sienna { color: #A0522D; } .color-saddle-brown { color: #8B4513; } .color-fire-brick { color: #B22222; } .color-brown { color: #A52A2A; } .color-maroon { color: #800000; } .color-green { color: #008000; } .color-dark-green { color: #006400; } .color-sea-green { color: #2E8B57; } .color-medium-sea-green { color: #3CB371; } .color-light-sea-green { color: #20B2AA; } .color-lime-green { color: #32CD32; } .color-alice-blue { color: #F0F8FF; } .color-fuchsia { color: #FF00FF; } .color-purple { color: #800080; } .color-blue-violet { color: #8A2BE2; } .color-black { color: #000000; } .bg-gray-lev1 { background-color: #F5F5F5; } /* Sfondi a diverse gradazioni di grigio. A livello maggiore corrisponde un grigio più scuro. */ .bg-gray-lev3 { background-color: #E9E9E9; } .bg-gray-lev5 { background-color: #DCDCDC; } .bg-gray-lev6 { background-color: #D3D3D3; } .bg-gray-lev7 { background-color: #D1D1D1; } .bg-gray-lev8 { background-color: #C0C0C0; } .bg-gray-lev10 { background-color: #A9A9A9; } .bg-gray-lev11 { background-color: #808080; } /* Da questo livello è meglio scrivere in bianco (foreground), nei precedenti si legge la scritta in nero. */ .bg-gray-lev13 { background-color: #778899; } .bg-gray-lev15 { background-color: #708090; } .bg-gray-lev17 { background-color: #696969; } .bg-gray-lev19 { background-color: #2F4F4F; } .bg-gray-lev1, .bg-gray-lev3, .bg-gray-lev5, .bg-gray-lev6, .bg-gray-lev7, .bg-gray-lev8, .bg-gray-lev10, .bg-gray-lev11, .bg-gray-lev13, .bg-gray-lev15, .bg-gray-lev17, .bg-gray-lev19 { padding: 0.2em 0.5em 0.4em 0.5em; } /* Riquadri colorati (sfondo) con angoli arrotondati per paragrafi da evidenziare. */ .bg-box-verdechiaro { background-color: #CCFFCC !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-alice-blue { background-color: #F0F8FF !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-papaya-whip { background-color: #FFEFD5 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-yellow { background-color: #FFFF00 !important; padding: 0.6em 1.6em; border-radius: 12px; } /* --- Pantone Color Institute: fashion color trend report per il settore della moda. --- */ /* --- New York Fashion Week, Primavera/Estate 2022 (https://www.pantone.com/eu/it/articoli/fashion-color-trend-report/new-york-fashion-week-primavera-estate-2022). */ .color-spun-sugar { color: #B4DCEA; } /* Azzurro pastello dolce con una natura ariosa. */ .color-gossamer-pink { color: #FAC8C3; } /* Tinta rosa con tocco leggero e tenue. */ .color-innuendo { color: #C43362; } /* Tono rosso-fucsia altamente visibile e suggestivo. */ .color-skydiver { color: #00589B; } /* Tono blu scuro che ispira a raggiungere nuove altezze. */ .color-daffodil { color: #FDC04E; } /* Giallo con la spontaneità di un giardino primaverile. */ .color-glacier-lake { color: #81A0BA; } /* Tinta di azzurro calma e rassicurante. */ .color-harbor-blue { color: #00656E; } /* Tinta blu-verde per la ricerca di uno spazio sicuro. */ .color-coca-mocha { color: #856A57; } /* Tinta marrone che rinfranca lo spirito. */ .color-dahlia { color: #853F84; } /* Tonalità tendente al viola, molto riconoscibile e dal tono dinamico. */ .color-poinciana { color: #CA3422; } /* Rosso caldo e potente che spinge su toni drammatici. */ .color-snow-white { color: #F2F0EB; } /* Colore classico, pulito e bianco puro. */ .color-perfectly-pale { color: #D3C9BE; } /* Colore classico, tono beige sabbia sottile. */ .color-basil { color: #879F84; } /* Colore classico, verde agrodolce. */ .bg-box-spun-sugar { background-color: #B4DCEA !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-gossamer-pink { background-color: #FAC8C3 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-innuendo { background-color: #C43362 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-skydiver { background-color: #00589B !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-daffodil { background-color: #FDC04E !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-glacier-lake { background-color: #81A0BA !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-harbor-blue { background-color: #00656E !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-coca-mocha { background-color: #856A57 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-dahlia { background-color: #853F84 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-poinciana { background-color: #CA3422 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-snow-white { background-color: #F2F0EB !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-perfectly-pale { background-color: #D3C9BE !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-basil { background-color: #879F84 !important; padding: 0.6em 1.6em; border-radius: 12px; } /* --- London Fashion Week, Primavera/Estate 2022 (https://www.pantone.com/eu/it/articoli/fashion-color-trend-report/london-fashion-week-primavera-estate-2022). */ .color-cascade { color: #76C1B2; } /* Acque purificatrici, azzurro-verde. */ .color-coral-rose { color: #F3774D; } /* Tonalità arancio floreale vivida. */ .color-super-sonic { color: #3073B7; } /* Tonalità blu sgargiance e dall'intensità elettrica. */ .color-popcorn { color: #F8DE8D; } /* Tonalità di giallo allegra e luminosa. */ .color-potpourri { color: #E7C9CA; } /* Rosa pastello fresco. */ .color-potpourri-light { color: #F1E0E0; } /* Rosa pastello fresco, schiarito +42%. */ .color-bubblegum { color: #E9738D; } /* Rosa accattivamente che manda segnali di giocosità e positività. */ .color-sudan-brown { color: #AC6C29; } /* Un marrone scuro e terroso, dai toni naturalmente ricchi. */ .color-fragile-sprout { color: #B9BD2B; } /* Tonalità giallo-verde netta e acida. */ .color-orchid-bloom { color: #C5AECF; } /* Viola chiaro di scenari floreali presenti in natura. */ .color-coffee-quartz { color: #695650; } /* Marrone intrigante che incarna semplicità ed eleganza. */ .color-white-alyssum { color: #EFEBE7; } /* Colore classico, bianco, tinta chiara e nitida. */ .color-humus { color: #B7A793; } /* Colore classico, nocciola pragmatico che infondo sensazioni di benessere. */ .color-fair-green { color: #92AF88; } /* Colore classico, verde riposante e di ristoro. */ .color-northern-droplet { color: #BABEBF; } /* Colore classico, tinta di grigio chiaro e tranquillo. */ .color-poppy-seed { color: #626367; } /* Colore classico, grigio scuro senza tempo. */ .bg-box-cascade { background-color: #76C1B2 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-coral-rose { background-color: #F3774D !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-super-sonic { background-color: #3073B7 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-popcorn { background-color: #F8DE8D !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-potpourri { background-color: #E7C9CA !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-potpourri-light { background-color: #F1E0E0 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-bubblegum { background-color: #E9738D !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-sudan-brown { background-color: #AC6C29 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-fragile-sprout { background-color: #B9BD2B !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-orchid-bloom { background-color: #C5AECF !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-coffee-quartz { background-color: #695650 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-white-alyssum { background-color: #EFEBE7 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-humus { background-color: #B7A793 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-fair-green { background-color: #92AF88 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-northern-droplet { background-color: #BABEBF !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-poppy-seed { background-color: #626367 !important; padding: 0.6em 1.6em; border-radius: 12px; } /* --- New York Fashion Week, Autunno/Inverno 2022/2023 (https://www.pantone.com/eu/it/articoli/fashion-color-trend-report/new-york-fashion-week-autunno-inverno-2022-2023). */ .color-lava-falls { color: #9A2B2E; } /* Appassionato rosso aranciato. */ .color-samoan-sun { color: #FBC85F; } /* Giallo allegro e luminoso. */ .color-orange-tiger { color: #F96815; } /* Arancia ad alta visibilità. */ .color-rose-violet { color: #C0428A; } /* Violetto vivace e vibrante. */ .color-amazon { color: #207349; } /* Verde lussureggiante e fertile. */ .color-nosegay { color: #F0BDD5; } /* Rosa floreale. */ .color-waterspout { color: #96D8DE; } /* Azzurro rinfrescante. */ .color-caramel-cafe { color: #864C24; } /* Tonalità marrone che tenta con gusto. */ .color-midnight { color: #325B74; } /* Ipnotico blu profondo che evoca il cielo serale. */ .color-martini-olive { color: #726A4E; } /* Tono di verde ispirato alla frutta con un tocco di salamoia. */ .color-artic-wolf { color: #E6DECF; } /* Colore classico, bianco tattile leggermente sfumato. */ .color-autumn-blonde { color: #EECFAD; } /* Colore classico, rosa cremoso delicato. */ .color-polar-night { color: #343540; } /* Colore classico, tonalità blu scuro di ispirazione cosmica. */ .color-loden-frost { color: #788F74; } /* Colore classico, tono verde infuso di terra che calma e ripristina. */ .color-chiseled-stone { color: #8D8E92; } /* Colore classico, grigio forte e silenzioso. */ .bg-box-lava-falls { background-color: #9A2B2E !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-samoan-sun { background-color: #FBC85F !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-orange-tiger { background-color: #F96815 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-rose-violet { background-color: #C0428A !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-amazon { background-color: #207349 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-nosegay { background-color: #F0BDD5 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-waterspout { background-color: #96D8DE !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-caramel-cafe { background-color: #864C24 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-midnight { background-color: #325B74 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-martini-olive { background-color: #726A4E !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-artic-wolf { background-color: #E6DECF !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-autumn-blonde { background-color: #EECFAD !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-polar-night { background-color: #343540 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-loden-frost { background-color: #788F74 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-chiseled-stone { background-color: #8D8E92 !important; padding: 0.6em 1.6em; border-radius: 12px; } /* --- London Fashion Week, Autunno/Inverno 2022/2023 (https://www.pantone.com/eu/it/articoli/fashion-color-trend-report/london-fashion-week-autunno-inverno-2022-2023). */ /* --- Pantone Color Institute: color of the year. --- */ .color-very-peri { color: #6868AC; } /* 2022 - Tinta di blu-viola che stimola inventiva e creatività personale. Armonie di colori: https://www.pantone.com/eu/it/color-of-the-year-2022-palette-di-colori */ .color-ultimate-gray { color: #F7E10E; } /* 2021 - Grigio, un connubio di colori stabile nel tempo che */ .color-illuminating { color: #939599; } /* 2021 - Giallo, trasmette un messaggio di forza e speranza. Armonie di colori: https://www.pantone.com/eu/it/articoli/past-colors-of-the-year/color-of-the-year-2021-pantone-17-5104-ultimate-gray-pantone-13-0647-illuminating */ .color-classic-blue { color: #004581; } /* 2020 - Stabile tonalità di blu sulla quale fare affidamento. Armonie di colori: https://www.pantone.com/eu/it/articoli/past-colors-of-the-year/color-of-the-year-2020 */ .color-living-coral { color: #FF6F61; } /* 2019 - Tonalità corallo piena di vitalità con un accenno dorato che infonde energia e ravviva con delicatezza. Armonie di colori: https://www.pantone.com/eu/it/articoli/past-colors-of-the-year/color-of-the-year-2019 */ .color-ultra-violet { color: #5F4B8B; } /* 2018 - Viola inventivo e immaginativo, illumina il percorso. Armonie di colori: https://www.pantone.com/eu/it/articoli/past-colors-of-the-year/color-of-the-year-2018 */ .color-greenery { color: #88B04B; } /* 2017 - Tonalità verde rivitalizzante e autentica ventata di freschezza. Armonie di colori: https://www.pantone.com/eu/it/articoli/past-colors-of-the-year/color-of-the-year-2017 */ .color-rose-quartz { color: #F7CAC9; } /* 2016 - Uniti insieme dimostrano un equilibrio tra l'accogliente */ .color-serenity { color: #92A8D1; } /* 2016 - Tono rosa più caldo e il tranquillo blu più freddo. Armonie di colori: https://www.pantone.com/eu/it/articoli/past-colors-of-the-year/color-of-the-year-2016 */ .color-marsala { color: #955251; } /* 2015 - Rosso vino naturalmente robusto e vicino alla terra. Armonie di colori: https://www.pantone.com/eu/it/articoli/past-colors-of-the-year/color-of-the-year-2015 */ .color-radiant-orchid { color: #AD64A8; } /* 2014 - Sfumature rosee espressive e esotiche. */ .color-emerald { color: #009275; } /* 2013 - Verde vivo, radioso e rigoglioso. */ .color-tangerine-tango { color: #E24224; } /* 2012 - Tonalità di rosso-arancio. */ .bg-box-very-peri { background-color: #6868AC !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-ultimate-gray { background-color: #F7E10E !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-illuminating { background-color: #939599 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-classic-blue { background-color: #004581 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-living-coral { background-color: #FF6F61 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-ultra-violet { background-color: #5F4B8B !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-greenery { background-color: #88B04B !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-rose-quartz { background-color: #F7CAC9 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-serenity { background-color: #92A8D1 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-marsala { background-color: #955251 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-radiant-orchid { background-color: #AD64A8 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-emerald { background-color: #009275 !important; padding: 0.6em 1.6em; border-radius: 12px; } .bg-box-tangerine-tango { background-color: #E24224 !important; padding: 0.6em 1.6em; border-radius: 12px; } /* --- */ /* Riduzioni del font in uso. Valori ricavati dall'analisi del font nei diversi Browser. */ .text-small3 { font-size: 72%; } /* Necessita d'essere corretto a 73% per Safari. */ .text-small2 { font-size: 86%; } /* Valori ammessi: 85-86-87 */ .text-small1 { font-size: 94%; } /* Valori ammessi: 93-94-95 */ /* Incrementi del font in uso. Valori ricavati dall'analisi del font nei diversi Browser. */ .text-big1 { font-size: 109%; } /* Valori ammessi: 108-109-110 */ .text-big2 { font-size: 117%; } /* Valori ammessi: 116-117-118 */ .text-big3 { font-size: 132%; } /* Valori ammessi: 131-132-133 */ .text-big4 { font-size: 155%; } /* Valori ammessi: 154-155-156 */ .text-big5 { font-size: 177%; } /* Valori ammessi: 177-178 */ .text-big6 { font-size: 200%; } /* Valori ammessi: 200-201 */ .text-big7 { font-size: 231%; } /* Valori ammessi: 231-232 */ .text-big8 { font-size: 262%; } .text-big9 { font-size: 300%; } .text-big10 { font-size: 331%; } .text-big11 { font-size: 369%; } /* Necessita d'essere corretto a 370% per Opera. */ .text-big12 { font-size: 407%; } /* Necessita d'essere corretto a 408% per Opera. */ @media only screen and (max-width: 1199px) { /* Visualizzazione modello "mobile". */ .text-big2 { font-size: 109%; } .text-big3 { font-size: 117%; } .text-big4 { font-size: 117%; } .text-big5 { font-size: 132%; } .text-big6 { font-size: 132%; } .text-big7 { font-size: 155%; } .text-big8 { font-size: 155%; } .text-big9 { font-size: 177%; } .text-big10 { font-size: 177%; } .text-big11 { font-size: 200%; } .text-big12 { font-size: 200%; } } /* Font alternativi. Combinazioni di caratteri comunemente usate, organizzate per famiglia generica. */ /* ---------------- Sans-Serif fonts ---------------- */ .font-default-verdana { font-family: Verdana, Geneva, sans-serif; } .font-arial { font-family: Arial, Helvetica, sans-serif; } .font-arialBlack { font-family: "Arial Black", Gadget, sans-serif; } .font-impact { font-family: Impact, Charcoal, sans-serif; } .font-lucida { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } .font-tahoma { font-family: Tahoma, Geneva, sans-serif; } .font-trebuchet { font-family: "Trebuchet MS", Helvetica, sans-serif; } /* --- Meno compatibili */ .font-CenturyGot { font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; } .font-AvantGarde { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; } /* Tipicamente entra in azione "Century Gothic". */ /* --- Emulazione scrittura a mano */ .font-comic { font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif; } .font-bradley { font-family: "Bradley Hand", cursive, sans-serif; } /* Tipicamente entra in azione "cursive". */ /* ----------- Serif fonts ----------- */ .font-georgia { font-family: Georgia, serif; } .font-palatino { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; } .font-roman { font-family: "Times New Roman", Times, serif; } /* --- Meno compatibili */ .font-garamond { font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; } .font-bookman { font-family: "Bookman Old Style", Bookman, "URW Bookman L", serif; } /* --------------- Monospace fonts --------------- */ .font-courier { font-family: "Courier New", Courier, monospace; } .font-lucidaMono { font-family: "Lucida Console", Monaco, monospace; } /* --- Meno compatibili */ .font-andale { font-family: "Andale Mono", AndaleMono, monospace; } /* Tipicamente entra in azione "monospace". */ /* Esempio d'uso di un font alternativo, i file di definizione del font sono caricati nel server e vengono letti dal CSS. Documentazione e file scaricabili dei font: https://google-webfonts-helper.herokuapp.com/fonts/playfair-display?subsets=latin @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; src: url("/common-files/fonts/playfair-display-v21-latin-regular.eot"); /+ IE9 Compat Modes +/ src: local(""), url("/common-files/fonts/playfair-display-v21-latin-regular.eot?#iefix") format("embedded-opentype"), /+ IE6-IE8 +/ url("/common-files/fonts/playfair-display-v21-latin-regular.woff2") format("woff2"), /+ Super Modern Browsers +/ url("/common-files/fonts/playfair-display-v21-latin-regular.woff") format("woff"), /+ Modern Browsers +/ url("/common-files/fonts/playfair-display-v21-latin-regular.ttf") format("truetype"), /+ Safari, Android, iOS +/ url("/common-files/fonts/playfair-display-v21-latin-regular.svg#PlayfairDisplay") format("svg"); /+ Legacy iOS +/ } */ /* Grassetto. */ .text-bold { font-weight: bold; font-style: normal; } /* Corsivo. */ .text-italic { font-weight: normal; font-style: italic; } /* Grassetto e corsivo. */ .text-bold-italic { font-weight: bold; font-style: italic; } /* Normalizzazione forzata del font. */ .text-normal { font-weight: normal; font-style: normal; font-variant: normal; } /* Testo in apice e pedice. */ sup { font-size: 72%; line-height: 0.2em; position: relative; top: 0.4em; } /* Riduce lo spostamento in alto e la dimensione del carattere. */ sub { font-size: 72%; line-height: 0.2em; position: relative; top: -0.4em; } /* Riduce lo spostamento in basso e la dimensione del carattere. */ /* Imposta tutti i paragrafi per essere continui, senza spaziatura verticale. */ p { margin-top: 0px; margin-bottom: 0px; } /* Paragrafi con spaziatura verticale, ottenuti con dichiarazione di classe. */ p.mar-top { margin-top: 0.96em; margin-bottom: 0px; } p.mar-bot { margin-top: 0px; margin-bottom: 0.96em; } /* Indice di specificità = 1+10=11. */ p.mar-top-s { margin-top: 0.48em; margin-bottom: 0px; } p.mar-bot-s { margin-top: 0px; margin-bottom: 0.48em; } div.mar-top>p { margin-top: 0.96em; margin-bottom: 0px; } /* Indice di specificità = 1+10+1=12. Quindi questa formattazione vince su quella eventualmente, ed inutilmente, assegnata ai singoli paragrafi dentro la divisione con class="mar-top". */ div.mar-bot>p { margin-top: 0px; margin-bottom: 0.96em; } /* Indice di specificità = 1+10+1=12. Quindi questa formattazione vince su quella eventualmente, ed inutilmente, assegnata ai singoli paragrafi dentro la divisione con class="mar-bot". */ div.mar-bot1>p, div.mar-bot1>h4, div.mar-bot1>h3, div.mar-bot1>h2, div.mar-bot1>h1 { margin-top: 0px; margin-bottom: 1.44em; } div.mar-bot2>p, div.mar-bot2>h4, div.mar-bot2>h3, div.mar-bot2>h2, div.mar-bot2>h1 { margin-top: 0px; margin-bottom: 1.92em; } p.pad-top, h1.pad-top, h2.pad-top, h3.pad-top, h4.pad-top { padding-top: 0.96em; padding-bottom: 0px; } p.pad-bot, h1.pad-bot, h2.pad-bot, h3.pad-bot, h4.pad-bot { padding-top: 0px; padding-bottom: 0.96em; } p.pad-top-s, h1.pad-top-s, h2.pad-top-s, h3.pad-top-s, h4.pad-top-s { padding-top: 0.48em; padding-bottom: 0px; } p.pad-bot-s, h1.pad-bot-s, h2.pad-bot-s, h3.pad-bot-s, h4.pad-bot-s { padding-top: 0px; padding-bottom: 0.48em; } p.pad-top2, h1.pad-top2, h2.pad-top2, h3.pad-top2, h4.pad-top2 { padding-top: 1.92em; padding-bottom: 0px; } p.pad-bot2, h1.pad-bot2, h2.pad-bot2, h3.pad-bot2, h4.pad-bot2 { padding-top: 0px; padding-bottom: 1.92em; } /* Spaziatura delle righe, il valore di default è circa 1.2. */ .vspace-3 { line-height: 0.86; } .vspace-2 { line-height: 0.94; } .vspace-1 { line-height: 1.09; } .vspace1 { line-height: 1.32; } .vspace2 { line-height: 1.55; } .vspace3 { line-height: 1.77; } .vspace4 { line-height: 2; } .vspace5 { line-height: 2.31; } .vspace6 { line-height: 2.62; } .vspace7 { line-height: 3.00; } .vspace8 { line-height: 3.31; } .vspace9 { line-height: 3.69; } .vspace10 { line-height: 4.07; } /* Testo esteso. */ .testo-left { text-align: left; text-indent: 1em; } .testo-right { text-align: right; text-indent: 0em; } .testo-center { text-align: center; text-indent: 0em; } .testo-just { text-align: justify; text-indent: 1em; } @media only screen and (max-width: 600px) { /* Visualizzazione modello "mobile" piccolo. */ .testo-just { text-align: left; text-indent: 1em; } } /* Righe orizzontali divisorie. */ hr.h1 { border-top: 1px solid maroon; border-right: none; border-bottom: none; border-left: none; } hr.h2 { border-top: 2px solid maroon; border-right: none; border-bottom: none; border-left: none; } hr.h3 { border-top: 3px solid maroon; border-right: none; border-bottom: none; border-left: none; } hr.h4 { border-top: 4px solid maroon; border-right: none; border-bottom: none; border-left: none; } hr.h5 { border-top: 5px solid maroon; border-right: none; border-bottom: none; border-left: none; } hr.h6 { border-top: 6px solid maroon; border-right: none; border-bottom: none; border-left: none; } /* Mantiene gli elementi racchiusi uniti sulla stessa riga. */ .inlineblock { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; } /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ .nobr { white-space: nowrap; } /* Classe per rendere i contenuti non selezionabili/copiabili. */ .UserSelectNone { user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; -khtml-user-select: none; } /* Titoli generici. */ h1 { font-size: 231%; font-weight: bold; text-align: center; margin: 0px 0px 0.7em 0px; padding: 0px; } h2 { font-size: 177%; font-weight: bold; text-align: center; margin: 0px 0px 0.7em 0px; padding: 0px; } h3 { font-size: 132%; font-weight: bold; text-align: center; margin: 0px 0px 0.6em 0px; padding: 0px; } h3.left { text-align: left; margin: 1.2em 0px 0.3em 0px; } h4 { /*

per default nei Browser è un titolo con i caratteri grandi come i paragrafi

. */ font-size: 100%; font-weight: bold; text-align: center; margin: 0px 0px 0.6em 0px; padding: 0px; } h4.left { text-align: left; margin: 1.2em 0px 0.3em 0px; } h4.left-box { text-align: left; margin: 0px 0px 0.3em 0px; padding: 0.1em 0.5em 0.4em 0.5em; border-width: 1px; border-style: solid; } @media only screen and (max-width: 1199px) { /* Visualizzazione modello "mobile". */ h1 { font-size: 177%; } h2 { font-size: 132%; } h3 { font-size: 117%; } } /* Indirizzi Web ed e-mail. */ .email { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; font-variant: normal; letter-spacing: 1px; } /* Classi da assegnare ai link che hanno un'immagine, con effetto "roll over CSS", seguita da una scritta. La scritta deve iniziare con uno spazio, per distanziarsi dall'immagine mostrando al contempo la sottolineatura del link che parte dall'immagine. */ a.circle-down-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ height: 15px; padding-left: 15px; margin-right: 3px; /* "left" serve per far sì che la scritta che segue non si sovrapponga all'immagine (serve "padding") e "right" per distanziare quanto segue il link (funziona sia "margin" che "padding"). */ background: transparent url("/common-files/img/circle_down_double.gif") no-repeat scroll 0px 0px; } a.circle-up-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ height: 15px; padding-left: 15px; margin-right: 3px; /* "left" serve per far sì che la scritta che segue non si sovrapponga all'immagine (serve "padding") e "right" per distanziare quanto segue il link (funziona sia "margin" che "padding"). */ background: transparent url("/common-files/img/circle_up_double.gif") no-repeat scroll 0px 0px; } a.circle-right-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ height: 15px; padding-left: 15px; margin-right: 3px; /* "left" serve per far sì che la scritta che segue non si sovrapponga all'immagine (serve "padding") e "right" per distanziare quanto segue il link (funziona sia "margin" che "padding"). */ background: transparent url("/common-files/img/circle_right_double.gif") no-repeat scroll 0px 0px; } a.circle-left-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ height: 15px; padding-left: 15px; margin-right: 3px; /* "left" serve per far sì che la scritta che segue non si sovrapponga all'immagine (serve "padding") e "right" per distanziare quanto segue il link (funziona sia "margin" che "padding"). */ background: transparent url("/common-files/img/circle_left_double.gif") no-repeat scroll 0px 0px; } a.circle-plus-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ height: 15px; padding-left: 15px; margin-right: 3px; /* "left" serve per far sì che la scritta che segue non si sovrapponga all'immagine (serve "padding") e "right" per distanziare quanto segue il link (funziona sia "margin" che "padding"). */ background: transparent url("/common-files/img/icons_menu/menu_plus_double.svg") no-repeat scroll 0px 0px; background-size: 15px; } a.circle-minus-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ height: 15px; padding-left: 15px; margin-right: 3px; /* "left" serve per far sì che la scritta che segue non si sovrapponga all'immagine (serve "padding") e "right" per distanziare quanto segue il link (funziona sia "margin" che "padding"). */ background: transparent url("/common-files/img/icons_menu/menu_minus_double.svg") no-repeat scroll 0px 0px; background-size: 15px; } html>body a.circle-down-link:hover, html>body a.circle-up-link:hover, html>body a.circle-right-link:hover, html>body a.circle-left-link:hover, html>body a.circle-plus-link:hover, html>body a.circle-minus-link:hover { background-position: 0px -15px; color: red; } a.circle20-plus-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ height: 20px; padding-left: 20px; margin-right: 3px; /* "left" serve per far sì che la scritta che segue non si sovrapponga all'immagine (serve "padding") e "right" per distanziare quanto segue il link (funziona sia "margin" che "padding"). */ background: transparent url("/common-files/img/icons_menu/menu_plus_double.svg") no-repeat scroll 0px 0px; background-size: 20px; } a.circle20-minus-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ height: 20px; padding-left: 20px; margin-right: 3px; /* "left" serve per far sì che la scritta che segue non si sovrapponga all'immagine (serve "padding") e "right" per distanziare quanto segue il link (funziona sia "margin" che "padding"). */ background: transparent url("/common-files/img/icons_menu/menu_minus_double.svg") no-repeat scroll 0px 0px; background-size: 20px; } html>body a.circle20-plus-link:hover, html>body a.circle20-minus-link:hover { background-position: 0px -20px; color: red; } a.circle-down-link:hover, a.circle-up-link:hover, a.circle-right-link:hover, a.circle-left-link:hover, a.circle-plus-link:hover, a.circle-minus-link:hover, a.circle20-plus-link:hover, a.circle20-minus-link:hover { color: red; } /* Per IE fino alla versione 6, per evitare il rollover grafico ed il relativo flickring. Cambia solo il colore del testo. */ /* Classi da assegnare ai link costituiti solo da un immagine, con effetto "roll over CSS". */ a.triangle-down-red-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ width: 13px; height: 11px; background: transparent url("/common-files/img/down2_red_double.gif") no-repeat scroll 0px 0px; } a.triangle-up-red-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ width: 13px; height: 11px; background: transparent url("/common-files/img/up2_red_double.gif") no-repeat scroll 0px 0px; } a.triangle-down-blu-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ width: 13px; height: 11px; background: transparent url("/common-files/img/down2_blu_double.gif") no-repeat scroll 0px 0px; } a.triangle-up-blu-link { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ width: 13px; height: 11px; background: transparent url("/common-files/img/up2_blu_double.gif") no-repeat scroll 0px 0px; } html>body a.triangle-down-red-link:hover, html>body a.triangle-up-red-link:hover, html>body a.triangle-down-blu-link:hover, html>body a.triangle-up-blu-link:hover { background-position: 0px -11px; color: green; } a.triangle-down-red-link:hover, a.triangle-up-red-link:hover, a.triangle-down-blu-link:hover, a.triangle-up-blu-link:hover { color: green; } /* Per IE fino alla versione 6, per evitare il rollover grafico ed il relativo flickring. Cambia solo il colore del testo. */ /* Cerchi di dimensione variabile (formato SVG) con una freccia all'interno. Nei file CSS in cui vengono usati sono definite le loro proprietà dimensionali (es.: "..._pager.css"). */ a.move_circle_left { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ background: transparent url("/common-files/img/circle_left_double.svg") no-repeat scroll 0px 0px; } a.move_circle_right { white-space: nowrap; display: -moz-inline-stack; display: inline-block; *display: inline; /* display: inline-block; cross-browser. "display: -moz-inline-stack;" è per Firefox 2 e meno, IE 7 e meno necessiterebbero "*display: inline; zoom: 1;" ma siccome "zoom: 1;" è segnalato come "non standard" nei moderni Browser e sarebbe da sostituire con "transform: scale(1); transform-origin: 0 0;", che però non viene riconosciuto in IE7, è stata eliminata la compatibilità con IE7. */ background: transparent url("/common-files/img/circle_right_double.svg") no-repeat scroll 0px 0px; } /* Classe per forzare l'aspetto standard di un link in un ambito in cui vale un aspetto personalizzato. */ a.std:link, a:visited { text-decoration: underline; color: blue; } a.std:hover { text-decoration: none; color: red; } /* FORMATI PER ELEMENTI BLOCCO */ /* Serve per non avere mai problemi con le immagini che possono generare una barra di scorrimento orizzontale, quando sono più larghe dello spazio a disposizione (prevalentemente nella visualizzazione su dispositivi mobili). Agisce affinchè tutte le immagini si restringano per adattarsi allo spazio/larghezza che hanno a disposizione, quando tale spazio (dimensione della finestra) è inferiore alla larghezza dell'immagine. Tuttavia, poiché viene impostata la larghezza massima, anziché la larghezza, l'immagine non si allargherà più della sua dimensione naturale, nelle videate dove lo spazio a disposizione dovesse essere maggiore della dimensione dell'immagine. NOTE: aggiungere sempre le dimensioni dell'immagine al tag-HTML (attributi width e height), perché utilizzando "max-width: 100%" si sovrascrivono le dimensioni naturali dell'immagine ed il Browser usa gli attributi width e height nel tag per riservare spazio per l'immagine prima che venga caricata, questo evita cambiamenti di layout durante il caricamento del contenuto. Questa dichiarazione non è stata generalizzata per tutte le immagini (selettore=img), perché a volte la dimensione dell'immagine serve per dimensionare/estendere l'elemento che la contiene. */ img.def { max-width: 100%; height: auto; } .sinistra { margin: 10px 0px 0px 15px; padding: 0px; text-align: left; } .destra { margin: 10px 15px 0px 0px; padding: 0px; text-align: right; } /* Centratura che quando lo spazio è minore della larghezza del blocco, ne taglia la parte destra (ad esempio nelle immagini). */ .centro { display: block; margin-left: auto; margin-right: auto; } /* Centratura che quando lo spazio è minore della larghezza del blocco, taglia a sinistra e destra, mantenendo la visualizzazione sulla porzione centrale dell'immagine. Esempio:

 
Bisogna inserire una divisione, assegnandogli la classe seguente, l'altezza fissa pari a quella dell'immagine da visualizzare ed il percorso con cui reperire l'immagine. */ .imgcenter { background-position: center top; background-repeat: no-repeat; } /* Centratura di un'immagine che quando lo spazio è minore della larghezza la riduce (responsive). Esempio: Descrizione Esempio di 2 immagini "responsive" affiancate in una tabella che restano affiancate rimpicciolendosi, non si dispongono in verticale. --- Si può limitare l'allontanamento delle 2 immagini impostando anche "max-width: px; margin: 0px auto;" (larghezza massima e centratura), o se il max-width è in una divisione di contenimento della tabella ci possono essere anche altri elementi (testuali o grafici) prima e dopo la tabella che rispettano il max-width. --- La stessa struttura tabellare si può usare anche con 3 o più immagini/celle affiancate.
Descrizione Descrizione
*/ img.imgcenter-responsive { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } /* Immagini allineate a sinistra o destra che si riducono quando la percentuale di spazio/larghezza a loro assegnata non è sufficiente per mostrarle con la loro grandezza effettiva. L'uso tipico è per immagini ornamentali laterali a fianco delle quali c'è del testo. Nel tag bisogna inserire "max-width" con la larghezza effettiva dell'immagine, per non avere ingrandimento. Esempio: */ .imgleft50perc { float: left; width: 50%; height: auto; margin: 1em 2em 0.8em 0px; } .imgleft40perc { float: left; width: 40%; height: auto; margin: 1em 2em 0.8em 0px; } .imgleft30perc { float: left; width: 30%; height: auto; margin: 1em 2em 0.8em 0px; } .imgleft20perc { float: left; width: 20%; height: auto; margin: 1em 2em 0.8em 0px; } .imgleft15perc { float: left; width: 15%; height: auto; margin: 1em 2em 0.8em 0px; } .imgleft10perc { float: left; width: 10%; height: auto; margin: 1em 2em 0.8em 0px; } .imgright50perc { float: right; width: 50%; height: auto; margin: 1em 0px 0.8em 2em; } .imgright40perc { float: right; width: 40%; height: auto; margin: 1em 0px 0.8em 2em; } .imgright30perc { float: right; width: 30%; height: auto; margin: 1em 0px 0.8em 2em; } .imgright20perc { float: right; width: 20%; height: auto; margin: 1em 0px 0.8em 2em; } .imgright15perc { float: right; width: 15%; height: auto; margin: 1em 0px 0.8em 2em; } .imgright10perc { float: right; width: 10%; height: auto; margin: 1em 0px 0.8em 2em; } /* Centratura-Responsive di due blocchi, che si dispongono verticalmente quando lo spazio si riduce. Non si può applicare nè arrotondamento degli spigoli nè ombra. Esempio:

CONTENUTO DEL RIQUADRO PIU' CORTO.

CONTENUTO DEL RIQUADRO PIU' LUNGO.

*/ div.cr2b-contenitore { overflow: hidden; } div.cr2b-corto { display: inline-block; width: 49%; vertical-align: top; } div.cr2b-lungo { display: inline-block; width: 49%; vertical-align: top; } div.cr2b-corto-interno { padding: 2.5em 1.6em 2000px 1.6em; margin: 0px 1.2em -2000px 1.2em; } div.cr2b-lungo-interno { padding: 2.5em 1.6em; margin: 0px 1.2em; } @media only screen and (max-width: 1199px) { /* Visualizzazione modello "mobile". */ div.cr2b-corto { display: block; width: 98%; margin: 1.6em auto; } div.cr2b-lungo { display: block; width: 98%; margin: 1.6em auto; } div.cr2b-corto-interno { padding: 2.5em 0.8em; margin: 0px; border-radius: 8px; } div.cr2b-lungo-interno { padding: 2.5em 0.8em; margin: 0px; border-radius: 8px; } } .sfondo-grigio-sx { /* Formato usato per un paragrafo estraneo al contesto, tipo un link per leggere un'altra pagina. */ display: inline-block; /* Serve per limitare la larghezza dell'elemento al contenuto. */ margin: 3em 1em; padding: 10px 30px 12px 30px; border: none; background-color: gainsboro; } .bordato-grigio-sx { /* Formato usato per un paragrafo estraneo al contesto, simile ad un bottone, tipo un link per leggere un'altra pagina. */ display: inline-block; /* Serve per limitare la larghezza dell'elemento al contenuto. */ margin: 3em 1em; padding: 10px; border: 1px solid black; border-radius: 10px; background-color: whitesmoke; } /* Allineamento laterale del blocco, tipicamente usato per le immagini, che lascia lo spazio dal lato opposto utilizzabile dai contenuti della pagina (testo). Nell'immagine bisogna specificare solo style="width: px;" perché l'altezza viene calcolata automaticamente, perché il blocco-immagine è responsive anche quando è laterale al testo. Viene considerato che più l'immagine è grande e maggiore è lo spazio che la separa dal testo laterale, quindi, questo criterio determina anche quando fare attivare la visualizzazione modello "mobile" che centra l'immagine e sposta il testo sotto. */ .imgleft1 { float: left; max-width: 65%; height: auto; margin: 1em 1em 0.8em 0px; } .imgleft2 { float: left; max-width: 65%; height: auto; margin: 1em 2em 1em 0px; } .imgleft3 { float: left; max-width: 65%; height: auto; margin: 1em 3em 1.5em 0px; } .imgleft4 { float: left; max-width: 65%; height: auto; margin: 1em 4em 2em 0px; } .imgright1 { float: right; max-width: 65%; height: auto; margin: 1em 0px 0.8em 1em; } .imgright2 { float: right; max-width: 65%; height: auto; margin: 1em 0px 1em 2em; } .imgright3 { float: right; max-width: 65%; height: auto; margin: 1em 0px 1.5em 3em; } .imgright4 { float: right; max-width: 65%; height: auto; margin: 1em 0px 2em 4em; } @media only screen and (max-width: 1199px) { /* Applicata per area di visualizzazione inferiore o uguale a 1199 pixel. */ .imgleft4 { float: none; display: block; max-width: 100%; height: auto; margin: 1em auto; } .imgright4 { float: none; display: block; max-width: 100%; height: auto; margin: 1em auto; } } @media only screen and (max-width: 900px) { /* Applicata per area di visualizzazione inferiore o uguale a 900 pixel. */ .imgleft3 { float: none; display: block; max-width: 100%; height: auto; margin: 1em auto; } .imgright3 { float: none; display: block; max-width: 100%; height: auto; margin: 1em auto; } } @media only screen and (max-width: 600px) { /* Applicata per area di visualizzazione inferiore o uguale a 600 pixel. */ .imgleft2 { float: none; display: block; max-width: 100%; height: auto; margin: 1em auto; } .imgright2 { float: none; display: block; max-width: 100%; height: auto; margin: 1em auto; } .imgleft1 { float: none; display: block; max-width: 100%; height: auto; margin: 1em auto; } .imgright1 { float: none; display: block; max-width: 100%; height: auto; margin: 1em auto; } } /* Due immagini affiancate allineate in alto, che si dispongono in verticale nella visualizzazione modello "mobile". Esempio:
left]]>
*/ div.imginline { position: relative; overflow: hidden; } /* Il posizionamento serve per tenere dentro la divisione l'immagine di destra, posizionata con "absolute", ed anche per fare agire overflow (se si usa solo overflow-x e solo se le immagini sono responsive, quando si rimpicciolisce quella di sinistra può comparire la barra di scorrimento verticale, perché quella di destra non si ridimensiona per effetto del suo posizionamento assoluto). */ div.imginline::after { content: ""; clear: both; display: table; } /* Serve per evitare che il contenuto seguente della pagina si sovrapponga a questo, però agisce in base all'altezza dell'immagine di sinistra posizionata con float, se l'immagine di destra dovesse essere più lunga bisogna aggiungere l'altezza alla divisione di contenimento delle immagini. */ div.imginline img.left { float: left; margin: 0px 12px 0px 0px; position: relative; z-index: 20; max-width: 100%; height: auto; } /* Il posizionamento serve per usare z-index, altrimenti l'immagine seguente (di destra) coprirebbe questa. Con "max-width: 100%; height: auto;" l'immagine viene resa responsive quando lo spazio dovesse essere poco anche solo per essa. */ div.imginline img.rightcutleft { position: absolute; right: 0px; z-index: 10; } /* L'immagine di destra è allineata al bordo destro della divisione di contenimento e se le immagini eccedono la larghezza disponibile si sovrappongono nella parte centrale e quella di sinistra copre quella di destra, senza spazio bianco verticale di separazione. */ div.imginline img.rightcutright { position: absolute; z-index: 10; } /* L'immagine di destra si dispone a destra della prima immagine con uno spazio verticale di separazione pari al margine destro della prima immagine e se le immagini eccedono la larghezza disponibile l'immagine di destra viene tagliata (nascosta) a destra. */ @media only screen and (max-width: 1199px) { /* Visualizzazione modello "mobile". */ div.imginline { overflow: visible; } div.imginline img.left, div.imginline img.rightcutleft, div.imginline img.rightcutright { float: none; display: block; max-width: 100%; height: auto; margin: 12px auto; position: relative; z-index: auto; } } /* Margini laterali variabili relazionati alla larghezza dell'area di visualizzazione del Browser. */ @media only screen and (max-width: 600px) { /* Applicata per area di visualizzazione inferiore o uguale a 600 pixel. */ .box-padding2-var { padding: 2em 0.4em; } .marginside-var60 { margin-left: 6px; margin-right: 6px; } } @media only screen and (min-width: 601px) { /* Applicata per area di visualizzazione da 601 a 1199 pixel. */ .box-padding2-var { padding: 2em 1.1em; } .marginside-var60 { margin-left: 20px; margin-right: 20px; } } @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". */ .box-padding2-var { padding: 2em; } .marginside-var60 { margin-left: 60px; margin-right: 60px; } } .ombra3d-stretta { box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.2), 0px 5px 15px 0px rgba(0,0,0,0.19); } .ombra3d { box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2), 0px 6px 20px 0px rgba(0,0,0,0.19); } .spigoli-poco { border-radius: 8px; } .spigoli { border-radius: 14px; } /* FORMATI DEDICATI AD ELEMENTI SPECIFICI USATI IN PIU' PUNTI */ /* Usato per l'inclusione di video. Esempio per l'inclusione di video da YouTube.
La divisione esterna serve per definire un limite massimo all'espansione del riquadro. Non è possibile mettere max-width in div.video-container-16-9 perché andrebbe ricalcolato il valore di padding-bottom senza sapere quando verrebbe realmente applicato max-width (gen-2021: si potrebbe assegnare il padding con la funzione min(val1,val2) ma è compatibile solo con i Browser molto recenti). Esempio per l'inclusione di video da Facebook.
Sono state aggiunte le due divisioni esterne a