/*In your CSS file add a background color for the document body and set the 
margin and padding to 0. We’re going to be using absolute positioning, and this will help with our calculations.*/
body {
  font-size:medium;
  margin: 0;
  padding: 0;
  background: url(images/fondvert.jpg) #EDF3CF top left  repeat;
  }
  
#container{
width:776px;
margin-top:150px;
margin-left: auto;
margin-right: auto;
}
#header{

}
table{
border:1px solid #cccccc;
background-color:#FFFFFF;
}
table .lien{
text-align: center;
width:200px;

}
td{
border:1px solid #cccccc;
}
tr{
font-size:medium;
font-family:Arial,Verdana,  Helvetica, sans-serif;
font-weight:bold;

}

/*The background for our image map is applied to the outer div. 
You should set an appropriate height and width to make sure it is fully displayed.*/
#book { 
margin-top:125px;
 width:700px;
 margin-left: auto;
margin-right: auto;
  }
/*Any styles that apply to the majority of the links can be defined 
together. More specific CSS rules can then be used to alter the attributes 
of individual links as required. Use absolute positioning and include a default height, 
width, and top position for all of the links. This is a good time to make sure the underlines are removed as well.*/  
   #menu {
 
   margin:0;
   padding:0;
   width:700px;
   height:200px;
   text-align:center;

   
  }
 
  #menu a {
 

  
  text-decoration: none;
  }
  #left{
 
  margin-left:200px;
  
  
  }
 /*To hide the text within links while retaining “clickability,” 
 we use a CSS selector to identify the italicized text within the links 
 contained in our nested div, and its visibility is set to hidden. 
 It’s important to include meaningful link text, even if it will be invisible 
 to the majority of your users. This ensures that your site will be accessible 
 for browsers that don’t support CSS and users who are viewing it with an alternate stylesheet.*/
 i{ visibility: hidden; }
 #menu  a i { visibility: hidden; }
  
  /*Once the general CSS is in place, we can position each link individually. 
  To improve efficiency, links that share a common attribute such as left or top, can be defined together.*/
  #credits, a#indicia { top: 531px; }
a#home {background:url(images/sculptures_urbaines.gif) no-repeat; float:left; height:25px;  width:190px;   }
a#preface {background:url(images/urban_sculptures.gif) no-repeat;float:left; height:25px; width:175px;   }


/*When applied to the XHTML of our document, the menu links will now float independently 
above our background image. If we position them above areas of the image that look like 
links, we’ll be all set. Placing your links correctly will usually take either careful calculation or a bit of trial and error.

CSS image maps can use the :hover pseudo element to define a separate style for 
for each link’s rollover state. This allows us to float new images above the background 
whenever the user moves their mouse over one of the invisible link areas.*/
a#home:hover { background-image:url(images/sculptures_urbaines.gif); }
a#preface:hover { background-image: url(images/urban_sculptures.gif); }

   
/* A bug in Internet Explorer that causes the rollover images to 
refrain from disappearing as expected can be fixed by adding border: 
none to the :hover state of all the CSS image map links.*/  
a#home:hover,
a#preface:hover, 
 { border: none; }
 
/*-----------------------------------------------LINKS----------------------------------------------*/
#link a:link, a:active  { color: #74956D; font-weight: bold; text-decoration: none; }
#link a:visited { color: #74956D; font-weight: bold; text-decoration: none; }
#link a:hover { color:#FF9900 ; font-weight: bold ;   }