/* ==================================================================================================== */ /* Start-Up */ /* ==================================================================================================== */ /* Per comodità dell'utente di lingua italiano ho utilizzato nomi, nei limiti del possibile, italiani. */ /* Per esempio CORPO invece di BODY, MENU invece di NAVIGATION, PIEDE invece di FOOTER, tanto per */ /* citarne alcuni. Altre definizioni le ho scritte in inglese, come HEAD, che WRAPPER, perché di uso */ /* comune tra coloro che conoscono i rudimenti dell HTML. */ /* ==================================================================================================== */ /* L'uso di questo CSS è libero, ma è gradito un riferimento all'autore, che ha dedicato molto tempo è */ /* energie per renderlo semplice, dicretamente documentato e di facile riutilizzo. */ /* AUTORE : Giancarlo Mostachetti (http://www.mostachetti.net) */ /* ==================================================================================================== */ html { background: url("../img/bg_lagoa.jpg"); } html, body { margin:0; padding:0; } /* Nessun bordo */ body { font: 76% arial, sans-serif; } p, h1, h2 { margin:0 10px 10px; } /* Definizione generale dei paragrafi, che singolarmente*/ /* vengono formattati con una classe specifica per cada */ /* paragrafo. Questo per dare la possibilità di avere */ /* formattazioni particolari in casi specifici. */ table { margin-left: 10px } /* Nel Cordel di Ibiapina è stata aggiunta una modifica */ /* alle tabelle, definendo margin:0px per eliminare lo */ /* spazio ai bordi e definendo BORDER-TOP-WIDTH, */ /* BORDER-LEFT-WIDTH,BORDER-BOTTOM-WIDTH e infine */ /* BORDER-RIGHT-WIDTH ad 1px. */ /* ==================================================================================================== */ /* Sfondo della pagina */ /* ==================================================================================================== */ .corpo_bk { /*background: #5D7822;*/ background: url("../img/bg-contenuto.jpg"); background: #5F7C2C url(../img/bg_lagoa.jpg) top center repeat-x; } /* ==================================================================================================== */ /* Posizionamento delle immagini, con sintassi: Testo alternativo */ /* ==================================================================================================== */ .img-sx { float:left; margin-left: 10px; margin-right: 5px; } .img-dx { float:right; margin-left: 5px; margin-right: 10px; } /* ==================================================================================================== */ /* Testata delle pagine di Fortaleza */ /* ==================================================================================================== */ #fortal h1 { height:134px; line-height:80px; margin:0; background-image: url("../img/testata-fortaleza.jpg"); color: #79B30B } /* ==================================================================================================== */ /* Testata delle pagine del Ceará */ /* ==================================================================================================== */ #ceara h1 { height:100px; line-height:80px; margin:0; background-image: url("../img/ceara810x100.jpg"); color: #79B30B } /* ==================================================================================================== */ /* Testata delle pagine del Nordeste */ /* ==================================================================================================== */ #nordeste h1 { height:100px; line-height:80px; margin:0; background-image: url(../img/nordeste760x120.jpg); color: #79B30B; } /* ==================================================================================================== */ /* Testata standard */ /* ==================================================================================================== */ #head h1 { height:100px; line-height:80px; margin:0; background-image: url("../img/testata.jpg"); color: #79B30B } /* ==================================================================================================== */ /* Riquadro della pagina */ /* ==================================================================================================== */ #corpo { text-align:left; background:#FDECBA; border:1px solid #b0b0b0; background: url(../img/bg-contenuto.jpg); } #corpo { width:850px; margin:0 auto } /* ==================================================================================================== */ /* Formattazione del contenuto della pagina */ /* ==================================================================================================== */ #cont li { list-style: url(../img/li.png); margin-left: 10px; margin-right: 10px; margin-top: 5px; text-align: justify; /* Sarebbe più corretto allineare il testo a sinistra */ } /* (left), ma personalmente lo preferisco giustificato */ #cont { margin-right: 347px; /* Spazio al lato destro della colonna dei contenuti, */ /* necessario per lasciare lo stesso spazio alle due */ /* colonne (menu e sponsor) laterali. */ margin-top: 10px; margin-bottom: 10px } /* ==================================================================================================== */ /* Formattazione dei singoli paragrafi in sostituzione della formattazione generale definita nelle */ /* prime righe di questo file CSS. */ /* ==================================================================================================== */ .fp { line-height:1.4; color: #000000; text-align: justify; } /* ==================================================================================================== */ /* Per formattare il testo di Poesie o Canzoni */ /* ==================================================================================================== */ .poesia { font-size: 1em ; /* Questa parte serve per evidenziare in Times New Roman*/ font-family: "Times New Roman", serif; color: #000 ; /* corsivo i testi di canzoni o poesie che sono inseriti*/ text-align: left; /* nel testo. In questo caso il testo viene allineato a */ font-style: italic; /* sinistra, come più corretto, e non giustificato */ } /* ==================================================================================================== */ /* Per formattare i titoli */ /* ==================================================================================================== */ .titolo { font-family: Arial ; /* Fissa il font Arial */ font-size: 2em; /* Con altezza a 15 pixel */ font-weight: bold ; /* Grassetto */ color: #000 ; /* Colore del testo nero */ text-align: center; /* Posizionandolo al centro del testo */ } /* ==================================================================================================== */ /* Disposizione della pagina */ /* ==================================================================================================== */ #wrapper { float:left; /* Forza l'allineamento a sinistra. Senza questa classe */ width:100%; /* le tre colonne si posiziono una sotto dell'altra. */ } /* ==================================================================================================== */ /* Colonna dei menù con relativa formattazione */ /* ==================================================================================================== */ #menu { float:left; /* Qui si defisce la larghezza della colonna dei menu */ width:220px; /* (navigation) in 220 pixel. Notasi che la posizione */ margin-left:-347px; /* a sinistra è definita dal numero negativo -347 che */ /* corrisponde ai 220 pixel della colonna più i 127 */ /* pixel della colonna degli sponsor. */ margin-top: 10px; margin-bottom: 10px; line-height: 1,5; /* Altezza della riga di menù. In caso di poche voci da */ } /* visualizzare è ottimale un'altezza di due righe, ma */ /* aumentanto il numero delle voci si può scendere a */ /* una (1) riga o una riga e mezzo (1,5). */ #menu ul { margin: 0; /* Nessun bordo alla colonna dei menu quando si attiva */ padding: 0; /* la lista */ border-top: 1px solid #A98; /* aggiunto bordo superiore per uguagliarlo al bordo */ /* superiore delle singole voci del menu. */ } #menu li { border-bottom: 1px solid #A98; /* Bordo INFERIORE delle singole voci di menù */ border-top: 1px solid #DDC; /* Bordo SUPERIORE delle singole voci di menù */ list-style: none; /* Elimina la visualizzazione del segno indicativo */ } #menu li a { background: #FDECBA; /* Definizione dello sfondo del menù */ color: #554; /* Definizione del colore del testo dei menù */ display: block; padding: 2px 4px 2px 6px; /* Margini delle voci di menu all'interno della lista */ text-decoration: none; background: transparent; } #menu li a:hover { background: #FFF444; /* Attiva l'evidenziazione della voce di menù al */ color: purple; /* del puntatore del mouse. */ font-weight: bold ; } /* ==================================================================================================== */ /* Colonna degli eventuali sponsor e utilità varie */ /* ==================================================================================================== */ #sponsor { float:left; /* Larghezza della colonna degli sponsor e definizione */ width:127px; /* del bordo con il numero negativo -127 */ margin-left:-127px; margin-top: 10px; margin-bottom: 10px; } /* ==================================================================================================== */ /* Banner fondo pagina degli per eventuali sponsor */ /* ==================================================================================================== */ #banner { float:left; /* Definizione dello spazio a fondo pagina per inserire */ width:850px; /* un eventuale banner pubblicitario */ height:106px; } /* ==================================================================================================== */ /* Piede della pagina, con varie informazioni */ /* ==================================================================================================== */ #piede { background:#FFF444; color: #CCC; background: url(../img/bgfooter.gif) repeat-x; font-size: 0.7em; } #piede p { margin-top:0; padding:10px 0px /* Spazio superiore ed inferiore del paragrafo */ } #piede { clear:left; width:100%; } #piede a { color: #000; } /* ==================================================================================================== */ /* Per pulire gli SPAN */ /* ==================================================================================================== */ .clearer { clear: both; } /* ==================================================================================================== */ /* Per dare misure e colore ai ToolPit (testo descrittivo in linea), collegato al file Java Script */ /* 'miotip.js'. Sorgente originale prelevato dal sito http://www.ibge.gov.br e adattato a questo sito */ /* da Giancarlo Mostachetti (http://www.mostachetti.net) */ /* ==================================================================================================== */ div#qTip { padding: 3px; /* Spazio tra il bordo del ToolTip e il testo */ border: 1px solid #666; display: none; background: lightyellow; color: #132f79; font: normal normal 70% verdana, sans-serif; text-align: left; position: absolute; z-index: 1000; /* per forzarlo a posizionarsi sopra qualsiasi testo */ width:30%; } /* ==================================================================================================== */ /* End */ /* ==================================================================================================== */