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

body {background: #000;margin:0px; padding:0px; font-size: 100%;}

/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:1000px; height:768px; background:url(../images/NB_homepage.jpg) no-repeat; position:relative;margin:0px;}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {display:block; width:400px; height:0; padding-top:240px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(../images/beatles_hover.jpg) no-repeat 400px 400px; cursor:default;}
/* the hack for IE pre IE6 */
* html #imap a#title {height:240px; he\ight:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}

/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;20;}
#imap #benandanti {left:500px; top:120px; z-index:20;}
#imap #valparuta {left:0px; top:300px; z-index:20;}
#imap #joan {left:250px; top:270px; z-index:20;}
#imap #cosimo {left:755px; top:290px; z-index:20;}
#imap #mafia {left:600px; top:490px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#benandanti {display:block; width:250px; height:250px; background:transparent -100px -100px no-repeat; text-decoration:none; z-index:20;}
#imap a#valparuta {display:block; width:250px; height:400px; background:transparent -100px -100px no-repeat; text-decoration:none; z-index:20;} 
#imap a#joan {display:block; width:275px; height:350px; background:transparent -100px -100px no-repeat; text-decoration:none; z-index:20;}
#imap a#cosimo {display:block; width:240px; height:195px; background:transparent -100px -100px no-repeat; text-decoration:none; z-index:20;}
#imap a#mafia {display:block; width:390px; height:240px; background:transparent -100px -100px no-repeat; text-decoration:none; z-index:20;}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}

/* move the link background image to position 0 0 when hovered */
#imap a#benandanti:hover, #imap a#valparuta:hover, #imap a#joan:hover, #imap a#cosimo:hover, #imap a#mafia:hover {background-position:0 0;}

/* the hack for IE pre IE6 */
* html #imap a:hover span {width:400px; w\idth:388px;}

/* move the span text to a common position at the bottom of the image map */
#imap a#benandanti:hover span {position:absolute; left:-427px; top:-58px; width:919px; height: 336px; display:block; background: url(../images/MapRollover_BGbenandanti.jpg) no-repeat;}
#imap a#valparuta:hover span {position:absolute; left:0px; top:-82px; width:580px; height: 517px; display:block; background: url(../images/MapRollover_BGvalparuta.jpg) no-repeat;}
#imap a#joan:hover span {position:absolute; left:-83px; top:-63px; width:800px; height: 525px; display:block; background: url(../images/MapRollover_BGjoan.jpg) no-repeat;}
#imap a#cosimo:hover span {position:absolute; left:-356px; top:-76px; width:601px; height: 313px; display:block; background: url(../images/MapRollover_BGcosimo.jpg) no-repeat;}
#imap a#mafia:hover span {position:absolute; left:-254px; top:-108px; width:654px; height: 352px; display:block; background: url(../images/MapRollover_BGmafia.jpg) no-repeat;}


#directions li {
	padding: 10px 0px 0px 0px;
	margin-right: 60px;
	list-style-type: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: .85em;
	}

h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	color:#97b0ca;
	}
	
	h1.benandanti {padding: 110px 0px 0px 20px;}
	h1.valparuta {padding: 190px 0px 0px 240px;}
	h1.joan {padding: 215px 0px 0px 320px;}
	h1.cosimo {padding: 60px 0px 0px 25px;}
	h1.mafia {padding: 60px 0px 0px 40px;}
	
	p {font-family: Arial, Helvetica, sans-serif;font-size: .8em;color:#CCCCCC;}
	p.benandanti {padding: 3px 533px 0px 20px;}
	p.valparuta {padding: 3px 25px 0px 240px;}
	p.joan {padding: 3px 40px 0px 320px;}
	p.cosimo {padding: 3px 190px 0px 25px;}
	p.mafia {padding: 3px 290px 0px 40px;}
	
	
#mainNavContainer {
	width: 1000px;
	height: 30px;
	}		
			
#mainNavContainer ul	{
	padding: 0;
	margin-top: 10px;
	list-style-type: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 1em;
	text-align: right;
	}
	#mainNavContainer li { display: inline; color: #97b0ca; padding: 0 .5em;}
	#mainNavContainer li a {text-decoration: none;color: #818181;}
	#mainNavContainer li a:hover {color: #97b0ca; text-decoration: none;}