﻿/* set the size of the definition list <dl> and add the background image */
#mainPaneBottom {
 /* display:block;
  width:400px;
  height:240px;
  background:url(/images/bertieoooohing_sm.jpg) no-repeat;
  position:relative;*/
  }

/* set up the definition list <dt><a> to hold the background image for the hover state */
/*#mainPaneBottom 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 #mainPaneBottom a#title {
  height:240px;
  he\ight:0;
  }*/

/* the <dt><a> hover style to move the background image to position 0 0 */
/*#mainPaneBottom a#title:hover {
  background-position: 0 0;
  z-index:10;
  }
*/
/* place the <dd>s in the correct absolute position */
#mainPaneBottom dd {
  position:absolute;
  padding:0;
  margin:0;
  }
#mainPaneBottom #pic1 {
  left:36px;
  top:46px;
  z-index:20;
  }
#mainPaneBottom #pic2 {
  left:600px;
  top:20px;
  z-index:20;
  }

/* style the <dd><a> links physical size and the background image for the hover */
#mainPaneBottom a#link1
 {
  display:block;
  width:250px;
  height:200px;
  background:transparent url(../images/hover.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }
  
   #mainPaneBottom a#link2
   {
  display:block;
  width:250px;
  height:150px;
  background:transparent url(../images/hover.gif) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;    
    }

/* style the span text so that it is not initially displayed */
#mainPaneBottom a span, #mainPaneBottom a:visited span {
  display:none;
  }

/* move the link background image to position 0 0 when hovered */
/*#mainPaneBottom a#link1:hover, #mainPaneBottom a#link2:hover {
  background-position:0 0;
  }
*/
/* define the common styling for the span text */
/*#mainPaneBottom a:hover span {
  position:absolute;  
  width:388px; 
  display:block; 
  font-family:arial; 
  font-size:12px; 
  background:#fff; 
  color:#000; 
  border:1px solid #000; 
  padding:5px;
  }*/
/* the hack for IE pre IE6 */
/* html #mainPaneBottom a:hover span {
  width:400px; w\idth:388px;
  }*/

/* move the span text to a common position at the bottom of the image map */
/*#mainPaneBottom a#link1:hover span {
  left:-36px; 
  top:200px;
  }
#mainPaneBottom a#link2:hover span {
  left:-113px; top:170px;
  }*/

/* add the style for the link span text - first line */
/*#mainPaneBottom a span:first-line {
  font-weight:bold; 
  font-style:italic;
  }

*/