@charset "utf-8";
/* -------------------------------------------------------------------
	Officine Minelli - Foglio di stile per le pagine di contenuto
	
	Versione:			1.0 del 19.09.07
	Ultima revisione:	1.1 del 22.10.07
	Ultima validazione:	22.10.07
	Autore:				Alessandro Placidi
	Contatto:			a.placidi@mindgear.it
	© 2007 Officine Minelli srl
------------------------------------------------------------------- */


/* -- INDEX ----------------------------------------------------------

Sezioni generiche
[1.0] - Layout
[2.0] - Markup predefinito
[3.0] - Immagini

Sezioni specifiche
[4.0] - Testata
[5.0] - Menu
[6.0] - Galleria laterale
[7.0] - Galleria principale
[8.0] - Prodotti
[9.0] - Tuttocittà
[10.0] - Footer

-------------------------------------------------------------------- */


/* [1.0] - LAYOUT
------------------------------------------------------------------------------------------ */
body {
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#testata {
	height: 95px;
	color: #FFF;
	background: #00447A url(../img/pagsecFotoTestata.jpg) repeat-x center bottom;
}

#testata #logo {
	position: relative; /* Specifico il posizionamento qui per usare questo elemento come ancora per l'h1 poszionato in assoluto */
	width: 752px;
	margin: auto;
}

body.immagineZoom #logo {
	position: relative;
}

#menu {
	height: 30px;
	color: #FFF;
	background: #00447A url(../img/pagsecSfondoBarra.jpg) repeat-x 0 0;
}

#contenuto {
	width: 772px;
	margin: auto;
	padding-top: 20px;
	background:url(../img/pagsecSfondoPagina.jpg) repeat-y center 0;
}

#chiusuraPagina {
	width: 772px;
	margin: 0 auto 20px auto;
	background: url(../img/pagsecSfondoFooter.jpg) no-repeat center 0;
}




/* [2.0] - MARKUP PREDEFINITO
------------------------------------------------------------------------------------------ */
/* Assegno un margine di default a tutti gli elementi di primo livello, con bassa specificità */
#contenuto * {
	margin: 15px 75px 0 235px;	
}

/* Assegno un margine nullo di default a tutti gli elementi dal secondo livello in poi, con bassa specificità */
#contenuto * * {
	margin: 15px 0 0 0;
}

#contenuto h2 {
	width: 477px; /* La larghezza originale di 692px è stata ridotta di 215px, che corrisponde alla somma del padding sinistro e destro (10px e 205px) */
	height: 42px;
	line-height: 42px;
	margin-left: 30px;
	padding: 0 10px 0 205px;
	color: #FFF;
	background: #00447A url(../img/pagsecSfondoHeading.jpg) no-repeat 0 0;
	font-size: 11px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
}

#contenuto h3 {
	margin-top: 35px;
	padding-bottom: 5px;
	border-bottom: 1px solid #D8D8D8;
	font-size: 12px;
}

#contenuto p {
	line-height: 160%;
	text-align: justify;
}

#contenuto .allineatoSinistra {
	text-align: left;
}

#contenuto .allineatoDestra {
	text-align: right;
}

#contenuto .allineatoCentro {
	text-align: center;
}

#contenuto blockquote {
	margin-left: 250px;
	margin-right: 90px;
	padding: 15px;
	color: #666;
	background-color: #EEE;
	text-align: justify;
}

#contenuto ul, #contenuto ol {
	padding: 0 0 0 10px; /* NOTA: imposto a 0 il padding superiore, inferiore e destro per evitare che venga impostato automaticamente da Firefox */
	list-style: inside;
	text-align: justify;
}

/* Prevedo che, nel caso di liste annidate, ci sia un margine superiore di 10px. Includo tutte le possibilità di liste annidate */
#contenuto ul ul, #contenuto ul ol, #contenuto ol ul, #contenuto ol ol {
	margin-top: 10px;
}

#contenuto li {
	line-height: 100%;
}

#contenuto dl {
	text-align: justify;
}

#contenuto dl dd {
	margin-left: 20px;
}

#contenuto address {
	line-height: 160%;
	text-align: justify;
}

#contenuto a {
	text-decoration: none;
	border-bottom: 1px dotted #999;
	color: #00447A;
	background: inherit;
}

#contenuto a:hover {
	color: #333;
	background: inherit;
	border-bottom: 1px solid #999;
}

/* Questi sono gli stili per il markup predefinito delle pagine di ingrandimento delle foto */
body.immagineZoom p {
	margin: 0;
	padding: 10px 10px 0 10px;
	text-align: justify;
}

body.immagineZoom a {
	text-decoration: none;
	border-bottom: 1px dotted #999;
	color: #00447A;
	background: inherit;
}

body.immagineZoom a:hover {
	color: #333;
	background: inherit;
	border-bottom: 1px solid #999;
}




/* [3.0] - IMMAGINI
------------------------------------------------------------------------------------------ */
/* Le immagini possono essere inserite nel contenuto oppure flottanti nel testo */
/* In questo caso basta applicare la classe sottostante */
#contenuto img.floatLeft {
	float:left;
	margin-right: 15px;
	margin-bottom: 10px;
}




/* [4.0] - TESTATA
------------------------------------------------------------------------------------------ */
#testata #logo h1 {
	position: absolute;
	width: 202px;
	height: 125px;
	margin: 0;
	padding: 0;
	color: #000;
	background: #FFF url(../img/pagsecLogoMinelli.gif) no-repeat center center;
	text-indent: -3000px;
}

/* Questo è lo stile per la testata delle pagine con gli zoom delle fotografie */
body.immagineZoom #logo h1 {
	display: none;
}




/* [5.0] - MENU
------------------------------------------------------------------------------------------ */
#menu ul {
	width: 752px;
	margin: 0 auto 0 auto;
	padding: 0;
	list-style: none;
}

#menu li {
	float: right;
	width: 110px;
	height: 30px;
	background:  url(../img/pagsecSeparatoreVerticaleBarra.jpg) no-repeat right 0;
	line-height: 30px; /* la riga di testo è alta come l'elemento stesso */
	text-align: center;
	white-space: nowrap; /* Impedisco al testo di andare a capo, se più lungo della larghezza dell'elemento */
	overflow: hidden; /* Se il contenuto supera la larghezza dell'elemento, oltre a non andare a capo (vedi sopra), non lo ridimensiona */
}

#menu a {
	display: block;
	color: #FFFFFF;
	background: inherit;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}




/* [6.0] - GALLERIA LATERALE
------------------------------------------------------------------------------------------ */
#contenuto .galleriaLaterale {
	float: left;
	display: inline; /* Inserito per risolvere il Doubled float margin bug di IE6 */
	width: 140px;
	margin: 15px 10px 0 50px;
}

#contenuto .galleriaLaterale * {
	margin: 0 0 20px 0;
}

#contenuto .galleriaLaterale img {
	margin: 0;
	border: 1px solid #DDD;
}

#contenuto .galleriaLaterale a {
	border: none;
}

#contenuto .galleriaLaterale a:hover {
	border: none; /* Inserito per IE6 */
}

/* Questo è lo stile per dare l'effetto simile alla barra blu del titolo anche alle didascalie nella galleria laterale */
#contenuto p span.didaTraslucida {
	display: block;
	height: 20px;
	border: 1px solid #00447A;
	color: #FFF;
	background: #F7F7F7 url(../img/pagsecSfondoBarra.jpg) repeat-x 0 center;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
}




/* [7.0] - GALLERIA PRINCIPALE
------------------------------------------------------------------------------------------ */
/* L'heading della galleria è leggermente diverso rispetto alle altre pagine per una distanza inferiore tra il bordo sinistro ed il testo */
#contenuto h2.titoloGalleria {
	width: 652px; /* La larghezza originale di 692px è stata ridotta di 40px, che corrisponde alla somma del padding sinistro e destro (10px e 30px) */
	padding-left: 30px;
}

#contenuto .galleriaPrincipale {
	margin-left: 50px;
}

#contenuto .galleriaPrincipale * {
	margin: 0;
}

/* Ogni immagine deve essere contenuta in un <p> con la classe "foto", insieme all'eventuale didascalia */
/* Imposto una larghezza ed un'altezza in base alle presunte dimensioni massine delle thumbnails (140 x 140) */
#contenuto .galleriaPrincipale p.foto {
	float: left;
	width: 155px;
	height: 125px;
	margin: 0 5px 10px 0;
	overflow: hidden;
}

/* Rendo la visualizzazione del tag <img> di tipo block, in modo da poterne gestire i margini e per far si che l'eventuale didascalia vada a capo automaticamente */ 
#contenuto .galleriaPrincipale p.foto img {
	display: block;
	margin: auto;
	border: 1px solid #DDD;
}

#contenuto .galleriaPrincipale p.singoloProdotto {
	float: left;
	width: 140px;
	margin-left: 50px;
	margin-bottom: 30px;
	border: 1px solid #a9abad;
	color: #00447A;
	background: #000 url(../img/homeSfondoBarra.jpg) repeat-x 0 -8px;
}

#contenuto .galleriaPrincipale p.singoloProdotto a {
	display: block;
	height: 134px;
	line-height: 30px;
	padding: 0 10px;
	border: none;
	color: #FFF;
	background-color: #000;
	font-weight: bold;
}

#contenuto .galleriaPrincipale p.singoloProdotto a:hover {
	color: #CCC;
	background-color: inherit;
}

#contenuto .galleriaPrincipale p.singoloProdotto a.CM160 {
	background-color: transparent;
	background: url(../img/fotoGalleryMinelli-CM160S0-s.jpg) repeat-x 0 30px;
}

#contenuto .galleriaPrincipale p.singoloProdotto a.CM210 {
	background-color: transparent;
	background: url(../img/fotoGalleryMinelli-CM210S0-s.jpg) repeat-x 0 30px;
}

#contenuto .galleriaPrincipale p.singoloProdotto a.CM280 {
	background-color: transparent;
	background: url(../img/fotoGalleryMinelli-CM280S0-s.jpg) repeat-x 0 30px;
}

#contenuto .galleriaPrincipale p.singoloProdotto a.CM330 {
	background-color: transparent;
	background: url(../img/fotoGalleryMinelli-CM330S0-s.jpg) repeat-x 0 30px;
}

#contenuto .galleriaPrincipale p.singoloProdotto a.CM380 {
	background-color: transparent;
	background: url(../img/fotoGalleryMinelli-CM3800-s.jpg) repeat-x 0 30px;
}

#contenuto .galleriaPrincipale p.singoloProdotto a.CM400 {
	background-color: transparent;
	background: url(../img/fotoGalleryMinelli-CM400-s.jpg) repeat-x 0 30px;
}

#contenuto .galleriaPrincipale p.singoloProdotto img {
	margin: 0;
}

#contenuto .galleriaPrincipale p.link {
	clear: both;
	margin: 0 0 20px 0
}

#contenuto .galleriaPrincipale p.link a {
	display: block;
	width: 140px;
	height: 30px;
	line-height: 30px;
	margin-left: 5px;
	padding: 0 10px;
	border: 1px solid #a9abad;
	color: #FFF;
	background: #000 url(../img/homeSfondoBarra.jpg) repeat-x 0 -8px;
}

#contenuto .galleriaPrincipale p.link a:hover {
	color: #CCC;
	background-color: inherit;
}

/* Aggiungo il clearing per il paragrafo del footer, solo per la gallery naturalmente */
#contenuto .galleriaPrincipale p#footer {
	clear: left;
}




/* [8.0] - PRODOTTI
------------------------------------------------------------------------------------------ */
#contenuto h2.titoloProdotti {
	width: 652px; /* La larghezza originale di 692px è stata ridotta di 40px, che corrisponde alla somma del padding sinistro e destro (10px e 30px) */
	padding-left: 30px;
}

#contenuto .prodotto {
	height: 160px;
	margin-left: 50px;
	margin-bottom: 30px;
	border: 1px solid #a9abad;
	color: #00447A;
	background: #FFF url(../img/sfondoProdotti.jpg) repeat-x 0 center;
}

#contenuto .prodotto * {
	margin: 0;
}

#contenuto .prodotto img {
	float: right;
	border: 0;
}

#contenuto .prodotto div {
	float: left;
	width: 180px;
}

#contenuto .prodotto div * {
	margin-bottom: 6px;
}

#contenuto .prodotto div h3 {
	height: 31px;
	line-height: 31px;
	margin-left: 10px;
	margin-right: 25px;
	border: none; /* Questo è impostato per evitare il bordo inferiore applicato agli <h3> nelle regole di markup generiche */
}

#contenuto .prodotto div p {
	height: 20px;
	line-height: 20px;
	margin-left: 28px;
	margin-right: 25px;
	border-bottom: 1px solid #5E809B;
	text-align: right;
}

#contenuto .prodotto div p span {
	float: left;
	display: block;
	width: 30px;
	height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 2000px;
}

#contenuto .prodotto div p span.peso {
	background: url(../img/iconaPeso.jpg) no-repeat 0 center;
}

#contenuto .prodotto div p span.sbraccio {
	background: url(../img/iconaSbraccio.jpg) no-repeat 0 center;
}

#contenuto .prodotto div p span.potenzaMotore {
	background: url(../img/iconaPotenzaMotore.jpg) no-repeat 0 center;
}

#contenuto .prodotto div a {
	display: block;
	height: 18px;
	line-height: 18px;
	margin-left: 28px;
	margin-right: 25px;
	border-top: 1px solid #8CABC4;
	border-left: 1px solid #8CABC4;
	border-right: 1px solid #385770;
	border-bottom: 1px solid #385770;
	color: #FFF;
	background: #003B69 url(../img/homeSfondoBarra.jpg) repeat-x 0 center;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
}

#contenuto .prodotto div a:hover {
	border-top: 1px solid #385770;
	border-left: 1px solid #385770;
	border-right: 1px solid #8CABC4;
	border-bottom: 1px solid #8CABC4;
	color: #CCC;
	background: #003B69 url(../img/homeSfondoBarra.jpg) repeat-x 0 center;
}

#contenuto p#footer.footerLargo {
	margin-left: 50px;
}




/* [9.0] - TUTTOCITTA'
------------------------------------------------------------------------------------------ */
#contenuto #tuttoCitta {
	width: 140px;
	height: 140px;
	border: 1px solid #CCC;
	color: #FFF;
	background: #F7F7F7 url(../img/sfondoTuttoCitta.jpg) no-repeat center center;
}

#contenuto #tuttoCitta p {
	padding-top: 45px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
}

#contenuto #tuttoCitta a {
	display: block;
	margin: 0 15px;
	border: 1px solid #00447A;
	color: #00447A;
	background: inherit;
}




/* [10.0] - FOOTER
------------------------------------------------------------------------------------------ */
#footer {
	padding: 15px 0;
	border-top: 1px solid #D8D8D8;
	font-size: 10px;
}