@charset "utf-8";
/* CSS Document */

.clear{ clear:both;}

html, body{ text-align:center; margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; background:#fff; border:0; color:#666;}
a:link, a:visited, a:focus, a:active, ul, li{ border:0;}
a:focus, a:active{ outline:0;}
#green{background:#daf692; height:74px; position:absolute; width:100%; z-index:10; top:0; left:0;}
#white{background:#FFF; height:74px; width:1000px; z-index:20; float:right; position:absolute; top:0; right:0;}

#post-it{ width:300px; height:300px; position:absolute; top:490px; left:0px; background:url(img/post-it.jpg) center center no-repeat;}
  #post-it p.title{ text-transform:uppercase; margin:70px 55px 3px 45px; text-align:center; font-style:normal; font-weight:bold;}
	#post-it p{ margin:0 50px 45px 42px; font-style:italic;}
	#post-it p span{ text-transform:uppercase; text-align:left; font-style:normal; font-weight:bold; color:#FF0000;}

/* ENG*/

#main{ margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/home.jpg) top center no-repeat; position:relative; z-index:30;}
	#main a{display:block; position:absolute; text-indent:-2000px; text-decoration:none; border:0; margin:0; padding:0;}
		#main a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat;}
		#main a.home{top:56px; right:15px; text-indent:0; color:#000;}

		#main a.me{width:240px; height:210px; top:117px; left:39px;}
		#main a.contacts{ width:270px; height:160px; top:327px; left:229px;}
		#main a.gallery{ width:175px; height:150px; top:117px; left:349px;}
		#main a.mail{ width:86px; height:288px; top:460px;	right:0; background:url(img/email.jpg) center center no-repeat;}
			#main a.me:hover{background:url(img/about-me.jpg) center center no-repeat;}
			#main a.contacts:hover{background:url(img/contacts.jpg) center center no-repeat;}
			#main a.gallery:hover{background:url(img/gallery.jpg) center center no-repeat;}
			#main a.home:hover{ text-decoration:underline; color:#d831c9;}
	
#footer{ margin:0 auto; padding:0; width:900px; text-align:right;  margin:5px auto; border-top:1px solid #d733d2; text-indent:0;}
	#footer a{ text-decoration:none; color:#666;}
	#footer a:hover{ color:#d733d2; text-decoration:underline;}

#gallery{ margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/gallery-eng.jpg) top center no-repeat; position:relative; z-index:30;}
	#gallery a{display:block; position:absolute; text-indent:-2000px; text-decoration:none; border:0; margin:0; padding:0;}
	#gallery a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat;}
	
	#gallery a.toddler{ width:100px; height:429px; top:150px; left:50px;}
	#gallery a.fiction{ width:100px; height:429px; top:148px; left:181px;}
	#gallery a.educational{ width:100px; height:429px; top:148px; left:315px;}
	#gallery a.nonfiction{ width:100px; height:429px; top:148px; left:450px;}
	#gallery a.anatomy{ width:100px; height:429px; top:148px; left:583px;}
		#gallery a.toddler:hover{ background:url(img/toddler.jpg) center center no-repeat;}
		#gallery a.fiction:hover{ background:url(img/fiction.jpg) center center no-repeat;}
		#gallery a.educational:hover{background:url(img/education.jpg) center center no-repeat;}
		#gallery a.nonfiction:hover{background:url(img/non-fiction.jpg) center center no-repeat;}
		#gallery a.anatomy:hover{background:url(img/anatomy.jpg) center center no-repeat;}

#menu{ margin:0; padding:0; list-style-type:none;}
 #menu a{ display:block; position:absolute;}
  #menu a.home{ width:150px; height:50px; right:25px; top:120px; text-indent:-2000px;}
  #menu a.me{ width:150px; height:50px; right:25px; top:170px; text-indent:-2000px;}
  #menu a.gallery{ width:150px; height:50px; right:25px; top:220px; text-indent:-2000px;}
  #menu a.contacts{ width:150px; height:50px; right:25px; top:270px; text-indent:-2000px;}
  #menu a.home:hover, #menu a.me:hover, #menu a.gallery:hover, #menu a.contacts:hover{ background:url(img/macchia-menu.png) left center no-repeat;}

#box{position:absolute;}
	#box img{ float:right; margin:0; border:#808080 solid 2px;}
	#box p{padding:10px; line-height:1.5em; text-align:justify; margin-left:12px;}
	#box2{position:absolute;}
	#box2 p{ clear:both; padding:10px; line-height:1.5em; text-align:justify; margin-left:12px;}
	
#about-me{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/about-me-eng.jpg) top center no-repeat; position:relative; z-index:30; }
	#about-me #box{width:665px; height:100%; top:100px; left:35px;}
	#about-me #box p{ margin:-10px 0;}
	#about-me #box p img{margin:0 0 0 20px;}
	#about-me #box a{ display:inline; text-indent:0; position:static; color:#d733d2;}
	#about-me #box a:hover{ text-decoration:underline;}
	#about-me a{display:block; position:absolute; text-indent:-2000px; text-decoration:none; border:0; margin:0; padding:0;}
	#about-me a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat;}

#contacts{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/contacts-eng.jpg) top center no-repeat; position:relative; z-index:30;}
	#contacts a{display:block; position:absolute; text-indent:-2000px; text-decoration:none; border:0; margin:0; padding:0;}
	#contacts a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat;}
	#contacts a.mail{ width:362px; height:48px; top:373px; left:69px;}
		#contacts a.mail:hover{ background:url(img/info.jpg) center center no-repeat;}

.thumbnails{padding:0; list-style-type:none; text-indent:0; }
  .thumbnails ul{ position:relative;}
  .thumbnails li{display:block; float:left; width:60px; height:60px; margin:8px; text-indent:0;}
  .thumbnails a{display:block; border:0;  text-decoration:none; width:60px; height:60px; text-indent:2000px;}
  .thumbnails img{ margin:0; padding:0;}

#toddler{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/toddler-eng.jpg) top center no-repeat; position:relative; z-index:30;}
	#toddler #box{width:232px; height:350px; top:100px; left:50px;}
	#toddler #box p{ clear:both;}
	#toddler #box .thumbnails{margin:0;}
	#toddler #box2{width:300px; height:200px; top:150px; left:350px; color:#666;}
	#toddler a{	display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#toddler a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat; text-indent:-2000px;}
	
#fiction{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/fiction-eng.jpg) top center no-repeat; position:relative; z-index:30;}
	#fiction #box{ width:312px; height:400px; top:300px; left:30px;}
	#fiction #box p{ clear:both;}
	#fiction #box .thumbnails{margin:0;}
	#fiction #box2{width:300px; height:150px; top:150px; left:175px; color:#666;}
	#fiction a{	display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#fiction a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat; text-indent:-2000px;}

#education{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/education-eng.jpg) top center no-repeat; position:relative; z-index:30;}
	#education #box{ width:252px; height:325px; top:150px; left:30px;}
	#education #box p{ clear:both;}
	#education #box2{ width:650px; height:169px; top:475px; left:30px;}
	#education #box .thumbnails{margin:0;}
	#education a{ display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#education a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat; text-indent:-2000px;}

#non-fiction{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/non-fiction-eng.jpg) top center no-repeat; position:relative; z-index:30;}
	#non-fiction #box{ width:650px; height:170px; top:100px; left:30px;}
	#non-fiction #box p{ clear:both;}
	#non-fiction #box2{ width:385px; height:290px; top:310px; left:30px;}
	#non-fiction #box .thumbnails{margin:0;}
	#non-fiction a{ display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#non-fiction a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat; text-indent:-2000px;}

#anatomy{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/anatomy-eng.jpg) top center no-repeat; position:relative; z-index:30;}
	#anatomy #box{ width:312px; height:400px; top:300px; left:30px;}
	#anatomy #box p{ clear:both;}
	#anatomy #box .thumbnails{margin:0;}
	#anatomy #box2{width:370px; height:100px; top:160px; left:140px; color:#666;} 
	#anatomy a{	display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#anatomy a.ita{ width:45px; height:45px; top:14px; right:30px; background:url(img/ita.jpg) center center no-repeat; text-indent:-2000px;}

/*ITA*/

#main-it{ margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/home-ita.jpg) top center no-repeat; position:relative; z-index:30;}
	#main-it a{ display:block; position:absolute; text-indent:-2000px; text-decoration:none; border:0; margin:0; padding:0;}
		#main-it a.eng{ width:45px; height:45px; top:14px; right:30px; background: url(img/eng.jpg) no-repeat center center;}
		
		#main-it a.me{width:240px; height:210px; top:117px; left:39px;}
		#main-it a.contacts{ width:270px; height:160px; top:327px; left:229px;}
		#main-it a.gallery{ width:175px; height:150px; top:117px; left:349px;}
		#main-it a.mail{ width:86px; height:288px; top:460px; right:0; background:url(img/email.jpg) center center no-repeat;}
			#main-it a.me:hover{background: url(img/chi_sono.jpg) center center no-repeat;}
			#main-it a.contacts:hover{background:url(img/contatti.jpg) center center no-repeat;}
			#main-it a.gallery:hover{background:url(img/gallery.jpg) center center no-repeat;}
			#main-it a.home:hover{ text-decoration:underline; color:#d831c9;}

#chi-sono{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/chi-sono-ita.jpg) top center no-repeat; position:relative; z-index:30; }
	#chi-sono #box{width:665px; height:100%; top:100px; left:35px;}
	#chi-sono #box p{ margin:-10px 0;}
	#chi-sono #box p img{margin:0 0 10px 20px;}
	#chi-sono #box a{ display:inline; text-indent:0; position:static; color:#d733d2;}
	#chi-sono #box a:hover{ text-decoration:underline;}
	#chi-sono a{display:block; position:absolute; text-indent:-2000px; text-decoration:none; border:0; margin:0; padding:0;}
	#chi-sono a.eng{ width:45px; height:45px; top:14px; right:30px; background:url(img/eng.jpg) center center no-repeat;}

#contatti{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/contatti-ita.jpg) top center no-repeat; position:relative; z-index:30;}
	#contatti a{display:block; position:absolute; text-indent:-2000px; text-decoration:none; border:0; margin:0; padding:0;}
	#contatti a.eng{ width:45px; height:45px; top:14px; right:30px; background:url(img/eng.jpg) center center no-repeat;}
	#contatti a.mail{ width:362px; height:48px; top:373px; left:69px;}
		#contatti a.mail:hover{ background:url(img/info.jpg) center center no-repeat;}

#gallery-it{ margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/gallery-ita.jpg) top center no-repeat; position:relative; z-index:30;}
	#gallery-it a{display:block; position:absolute; text-indent:-2000px; text-decoration:none; border:0; margin:0; padding:0;}
	#gallery-it a.eng{ width:45px; height:45px; top:14px; right:30px; background:url(img/eng.jpg) center center no-repeat;}
	
	#gallery-it a.toddler{ width:100px; height:429px; top:150px; left:50px;}
	#gallery-it a.fiction{ width:100px; height:429px; top:148px; left:181px;}
	#gallery-it a.educational{ width:100px; height:429px; top:148px; left:315px;}
	#gallery-it a.nonfiction{ width:100px; height:429px; top:148px; left:450px;}
	#gallery-it a.anatomy{ width:100px; height:429px; top:148px; left:583px;}
		#gallery-it a.toddler:hover{ background:url(img/infanzia.jpg) center center no-repeat;}
		#gallery-it a.fiction:hover{ background:url(img/fiction.jpg) center center no-repeat;}
		#gallery-it a.educational:hover{background:url(img/didattico.jpg) center center no-repeat;}
		#gallery-it a.nonfiction:hover{background:url(img/non-fiction.jpg) center center no-repeat;}
		#gallery-it a.anatomy:hover{background:url(img/anatomia.jpg) center center no-repeat;}

#infanzia{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/infanzia-ita.jpg) top center no-repeat; position:relative; z-index:30;}
	#infanzia #box{width:232px; height:350px; top:100px; left:50px;}
	#infanzia #box p{ clear:both;}
	#infanzia #box .thumbnails{margin:0;}
	#infanzia #box2{width:350px; height:175px; top:150px; left:325px; color:#666;}
	#infanzia a{ display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#infanzia a.eng{ width:45px; height:45px; top:14px; right:30px; background:url(img/eng.jpg) center center no-repeat; text-indent:-2000px;}

#fiction-it{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/fiction-ita.jpg) top center no-repeat; position:relative; z-index:30;}
	#fiction-it #box{ width:312px; height:400px; top:300px; left:30px;}
	#fiction-it #box p{ clear:both;}
	#fiction-it #box .thumbnails{margin:0;}
	#fiction-it #box2{width:350px; height:150px; top:150px; left:125px; color:#666;}
	#fiction-it a{	display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#fiction-it a.eng{ width:45px; height:45px; top:14px; right:30px; background:url(img/eng.jpg) center center no-repeat; text-indent:-2000px;}

#didattico{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/didattico-ita.jpg) top center no-repeat; position:relative; z-index:30;}
	#didattico #box{ width:252px; height:325px; top:150px; left:30px;}
	#didattico #box p{ clear:both;}
	#didattico #box2{ width:650px; height:169px; top:475px; left:30px;}
	#didattico #box .thumbnails{margin:0;}
	#didattico a{ display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#didattico a.eng{ width:45px; height:45px; top:14px; right:30px; background:url(img/eng.jpg) center center no-repeat; text-indent:-2000px;}

#non-fiction-it{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/non-fiction-ita.jpg) top center no-repeat; position:relative; z-index:30;}
	#non-fiction-it #box{ width:650px; height:170px; top:100px; left:30px;}
	#non-fiction-it #box p{ clear:both;}
	#non-fiction-it #box2{ width:385px; height:290px; top:317px; left:32px;}
	#non-fiction-it #box .thumbnails{margin:0;}
	#non-fiction-it a{ display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#non-fiction-it a.eng{ width:45px; height:45px; top:14px; right:30px; background:url(img/eng.jpg) center center no-repeat; text-indent:-2000px;}

#anatomia{  margin:0 auto; padding:0; width:900px; height:800px; text-align:left; background: url(img/anatomia-ita.jpg) top center no-repeat; position:relative; z-index:30;}
	#anatomia #box{ width:312px; height:400px; top:300px; left:30px;}
	#anatomia #box p{ clear:both;}
	#anatomia #box .thumbnails{margin:0;}
	#anatomia #box2{width:370px; height:100px; top:160px; left:140px; color:#666;} 
	#anatomia a{ display:block;	position:absolute;	text-indent:0px; text-decoration:none; border:0; margin:0; padding:0;}
	#anatomia a.eng{ width:45px; height:45px; top:14px; right:30px; background:url(img/eng.jpg) center center no-repeat; text-indent:-2000px;}

/*LIGHTBOX*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 15%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color:#000; }