body
    {
	background-color:#000;
	margin:0px;
	padding:0px;
	text-align:center;
	font-family:Verdana;
    }
.the-page
    {
	width:720px;
	margin-left:auto;
	margin-right:auto;
	/*background-color:blue;*/
	text-align:left;
    }

.content
    {
	background-color:#E79600;
	background-color:#E49600;/*recuperata dal vecchio*/
	width:564px;
	float:left;
	margin-top:4px;
	color:#222222;
	font-size:13px;

	/*implementare min-height per IE<=6* mi permette di non usare un div per inglobare tutti i menu destri*/
	height: auto !important;  /* per i browser moderni */
	height: 420px;      /* per IE5.x e IE6 */
	min-height: 420px;  /* per i browser moderni */
        /* implementare min-height per IE<=6 */
	text-align:center;/*aggiunto per centrare icon-container*/
    }
.content p
    {
	margin:20px;
	text-align:justify;
	line-height:150%;
    }
.content h4
    {
	text-align:center;
	margin-top:1em;
	font-size:13px;
    }
.content h1
    {
	text-align:center;
	margin-top:1em;

    }

.menu-container/*questa classe conterrebbe tutti i blocchi CATALOGO-SERVIZI-VIDEO/FOTO*/
    {   /*attualmente disabilitata in quanto non esiste nessun div a cui sia associata questa classe*/
	/*background-color:green;*/
	width:142px;
	float:left;
	margin-left:14px;

    }
.right-menu-container/*contiene ogni singolo blocco CATALOGO-SERVIZI-VIDEO/FOTO*/
    {
	width:142px;
	margin-left:14px;/*questa riga la devo togliere se utilizzo un div che contiene tutti i blocchi di menu destro*/
	font-family:Verdana;
	font-size:10px;
	float:left;
    }
  .right-menu-container img
    {
	margin-bottom:-2px;
    }
  .right-menu-container p
    {
	text-align:center;
	margin:0;
	background-image:url('../images/center1.jpg');
	padding-bottom:1em;
    }
  .right-menu-container ul
    {
	background-image:url('../images/center1.jpg');
	background-repeat:repeat-y;
	margin:0;
	padding-left:30px;
	text-align:left;

    }

  .right-menu-container li
    {
	list-style-position:inside;
	padding-bottom:1em;
    }

  .right-menu-container a
    {
	text-decoration:none;
	/*display:block;*/
	margin:0px;
	padding:0px;
	text-align:left;
	color:#000000;
    }

  .right-menu-container a:link
    {
	color:#000000;
    }

  .right-menu-container a:hover
    {
	text-decoration:underline;
    }
.top
    {
	text-align:center;
	margin-right:auto;
	margin-left:auto;
	width:564px;
	width:720px;
	height:132px;
	margin:0px;
	padding:0;
    }
.navbar
    {
	width:720px;
	margin-top:2px;
	/*margin-bottom:4px;*/
	/* background-color:pink; */
	/*height:24px;*/
	text-align:left;
	margin-left:0px;
    }
.nav-item
   {
       float:left;
       width:100px;
       background-image: url("../images/navbar.jpg");
       font-size:10px;
       font-weight:bold;
       background-repeat:no-repeat;
   }
/*Nei CSS l'ordine e` importante: infatti una dichiarazione successiva sovrascrive una precedente.
  In particolare le pseudoclassi vanno scritte nell'ordine: :link :visited :hover :active*/
.nav-item a:link
    {

	color:black;
	text-decoration:none;
    }
.nav-item a:visited /*la pseudoclasse a:visited va messa prima di a:hover altrimenti poi non ho piu' l'effetto hover !!!! */
    {

	color:black;
	text-decoration:none;
    }

.nav-item a:hover
    {
	text-decoration:underline;
    }
.nav-item-2
   {
       float:left;
       width:100px;
       margin-left:4px;
       background-image: url("../images/navbar.jpg");
       font-size:10px;
       font-weight:bold;
       background-repeat:no-repeat;
   }

.nav-item-2 a:link
    {

	color:black;
	text-decoration:none;
    }
.nav-item-2 a:visited /*la pseudoclasse a:visited va messa prima di a:hover altrimenti poi non ho piu' l'effetto hover !!!! */
    {

	color:black;
	text-decoration:none;
    }

.nav-item-2 a:hover
    {
	text-decoration:underline;
    }
.footer
    {
	width:564px;
	float:left;
	background-color:#444444;
	text-align:right;
	font-size:9px;
    }
.footer a:link
    {
	color:black;
	text-decoration:none;
    }
.footer a:visited /*la pseudoclasse a:visited va messa prima di a:hover altrimenti poi non ho piu' l'effetto hover !!!! */
    {
	color:black;
	text-decoration:none;
    }



.footer a:hover
    {
	color:white;
    }

/*ICON*/
.icon-container
    {
	width:500px;
	margin-left:auto;
	margin-right:auto;
	/*border:1px solid black;*/
	text-align:center;/*centra icon-div*/
    }
.icon-div
    {
	width:150px;
	float:left;
	margin-top:1em;
	border:1px solid #B61600;
	/*margin-left:0.5em;*/
	margin-left:8px;
	background-color:#C14200;
	color:white;
	font-weight:bold;
    }
.icon-div p
    {
	margin:0;
	height:40px;
	padding:0.5em;
    }
.icon-div a:link
    {
	color:black;
	text-decoration:none;
    }
.icon-div a:visited /*la pseudoclasse a:visited va messa prima di a:hover altrimenti poi non ho piu' l'effetto hover !!!! */
    {
	color:black;
	text-decoration:none;
    }



.icon-div a:hover
    {
	color:white;
    }
.sottocategorie-moto
    {
	width:475px;
	margin-left:auto;
	margin-right:auto;
	padding:0;
    }
#divDescrizioneCompleta img
    {
	margin-top:0;
    }