/* toglie i bordi alle immagini in ff e ie */

img {
	border: none;
}




body {
	background-color: #FFF;
	text-align: center;
	margin: 0px;
	padding: 0px;
}


/* cambia il colore sfondo nelle pagine */

body#contact {
	background-color: #9FD18C;
}

body#shop {
	background-color: #B5557A;
}

body#grownup {
	background-color: #FFC523;
}




#wrapper {
	text-align: left;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

/* allarga la pagina kids e contact */

body#kids #wrapper {
	width: 770px;
}

body#contact #wrapper {
	width: 637px;
}

#contenuto {
	text-align: center;
	height: 350px;
	margin: 0px;
	padding: 0px;
}

/* per centrare le immagini */

body#home #contenuto {
	margin-top: 150px;
	height: 200px;
}

body#grownup #contenuto {
	margin-top: 50px;
	height: 300px;
}

body#shop #contenuto, body#grownup #contenuto {
	margin-top: 0px;
	height: 440px;
}

body#shop #contenuto img {
	margin-top: 50px;
}



/* centra immagini e aggiunge scritta loading */

body#kids #contenuto {
	margin-top: 7px;
	height: 440px;
	text-align: center;
	background-image: url(loading.gif);
	background-repeat: no-repeat;
	background-position: center top;
}

body#kids img {
	margin-bottom: 3px;
}


body#contact #contenuto {
	text-align: left;
	padding-top: 305px;
	height: 105px;
	background-image: url(contactfondo.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

/* animazione email nei contact con metodo anti flickerin descritto nel menu */

a.email {
	padding:0;
	display: block;
	background-image: url(Emailstop.gif);
	background-repeat: no-repeat;
	background-position: left top;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	width: 343px;
}
a.email img {
	visibility: hidden;
}
a.email:hover img {
	overflow:hidden;
	text-decoration: none;
	visibility: visible;
}





body#kids #menu {
	position: absolute;
	top: 410px;
	right: 0px;
	width: 272px;
	height: 86px;
}

/* menu anti flickering ie: mette nello sfondo l'immagine del mouse over poi sovrappone le immagini normali quando passo sopra nasconde le normali e ricompare lo sfondo */

/* inserisce immagine sfondo mouse over */

#menu a {
	float: right;
	height: 86px;
	background-image: url(menu.gif);
	background-repeat: no-repeat;
}


/* nelle pagine con sfondo colorato ho cambiato l'immagine menu con lo sfondo opportuno */

body#contact #menu a {
	background-image: url(menucontact.gif);
}

body#shop #menu a {
	background-image: url(menushop.jpg);
}

body#grownup #menu a {
	background-image: url(menugrownup.jpg);
}

/* sistema l'immagine per ogni link */

#menu a.home {
	width: 58px;
	background-position: 0px -100px;
}

#menu a.kids {
	width: 62px;
	background-position: -58px -100px;
}

#menu a.contact {
	width: 66px;
	background-position: -120px -100px;
}

#menu a.shop {
	width: 61px;
	background-position: -186px -100px;
}

#menu a.grownup {
	width: 87px;
	background-position: -247px -100px;
}


/* sovrappone immagine non maouse hover */

#menu span {
	margin: 0;
	padding: 0;
	height: 86px;
	background-image: url(menu.gif);
	background-repeat: no-repeat;
	text-decoration: none;
	overflow:hidden;
}
/* solo NON ie5 mac \*/
#menu span {
	display: block;
}

/* nelle pagine con sfondo colorato ho cambiato l'immagine menu con lo sfondo opportuno */

body#contact #menu span {
	background-image: url(menucontact.gif);
}

body#shop #menu span {
	background-image: url(menushop.jpg);
}

body#grownup #menu span {
	background-image: url(menugrownup.jpg);
}

/* sistema l'immagine per ogni link */

#menu span.homeicon {
	background-position: 0px 0px;
	width: 58px;	
}

#menu span.kidsicon {
	background-position: -58px 0px;
	width: 62px;	
}

#menu span.contacticon {
	background-position: -120px 0px;
	width: 66px;	
}

#menu span.shopicon {
	background-position: -186px 0px;
	width: 61px;	
}

#menu span.grownupicon {
	background-position: -247px 0px;
	width: 87px;	
}

/* nasconde le immagini non mouse over sulle varie pagine */


#menu a:hover {
	background-color: #FFFFFF;
}


#menu a:hover span {
	background-image: none;
}

body#contact #menu a:hover span {
	background-image: none;
}

body#shop #menu a:hover span {
	background-image: none;
}

body#grownup #menu a:hover span {
	background-image: none;
}


/* navigazione del portfolio con stesso metodo menu */

#nav {
	height: 40px;
	width: 156px;
	background-image: url(mani.gif);
	background-repeat: no-repeat;
	background-position: 0px -40px;
	text-align: center;
	left: 307px;
	position: absolute;
	top: 410px;
}
#nav a {
	display: block;
	margin: 0;
	padding:0;
	float:left;
	height: 40px;
	width: 78px;
	background-image: url(mani.gif);
	background-repeat: no-repeat;
	text-decoration: none;
	overflow:hidden;
}

#nav a.indietro {
	background-position: 0px 0px;	
}
#nav a.avanti {
	background-position: -78px 0px;	
}
#nav a:hover {
	background-image: none;
}

/* bottone click here shop */


body#shop #bottone {
	height: 133px;
	width: 464px;
	background-image: url(Shopclick.jpg);
	background-repeat: no-repeat;
	background-position: 0px -142px;
	text-align: center;
	left: 83px;
	position: absolute;
	top: 210px;
}
body#shop #bottone a {
	display: block;
	margin: 0;
	padding:0;
	float:left;
	height: 133px;
	width: 464px;
	background-image: url(Shopclick.jpg);
	background-repeat: no-repeat;
	text-decoration: none;
	overflow:hidden;
}

body#shop #bottone a.click {
	background-position: 0px 0px;	
}

body#shop #bottone a:hover {
	background-image: none;