body
{ 
  width:800px;
  height:auto;
  background:#fafae6;
  margin:0px;
  border-top:0px;
  border-left:0px;
  border-right:0px;
  border-bottom:solid 20px #fafae6;
  padding:0px;
  font-family:Arial,sans-serif;
}

a:link
{ 
  text-decoration:underline;
  color:#aa6e64;
}

a:visited
{ 
  text-decoration:underline;
  color:#aa6e64;/* à modifier! */
}

a:hover
{ 
  color:#96321e;
}

a:active
{ 
  color:#96321e;
}

#pagetop /*Tete de page pour navigation*/

{ 
  position:absolute;
  width:800px;
  height:50px;
  left:10px;
  top:0px;
  margin:0px;
  padding:0px;
  text-align:center; }

#pagetop a
{ 
  font-size:12px;
  position:absolute;
  left:25px;
  top:0px;
  color:black;
  text-decoration:none;
}



/**********************************************************************/
/* Travaux-expositions-cours-elle-contact                             */
/* Barre de navigation supérieure                                     */
/**********************************************************************/


#linkwork a,#linkexhibit a,#linklesson a,#linkcontact a,#linkshe a,#linklink a
{  
  background: url(../pictures/spirale_s.png) no-repeat 0px 2px;
  position:absolute;
  height:80px;
  top:0px;
  padding-top:10px;
  padding-left:32px;
  text-align:left;
  font-size:14px;
  text-decoration:none;
  color:#aa6e64;
}

#linkwork a
{  
  left:10px;
}

#linkexhibit a
{ 
  left:136px;
}
#linklesson a
{ 
  left:294px;
}
#linkshe a
{  
  left:421px;
}

#linkcontact a
{  
  left:524px;
}

#linklink a
{ 
  left:682px;
}

#linkwork a:hover,#linkexhibit a:hover,#linklesson a:hover,#linkcontact a:hover,#linkshe a:hover,#linklink a:hover
{ 
  background: url(../pictures/spirale_s_hover.png) no-repeat 0px 0px;
  color:rgb(150,100,200);
  top:-2px; 
}

/**********************************************************************/
/* Situation                                                          */
/* Barre du haut et liens arborescence                                */
/**********************************************************************/

#situation
{ 
  font-size:10px;
  position:absolute;
  width:800px;
  height:30px;
  left:0px;
  top:38px;
  padding: 0px 0px 0px 0px ;
  background:#dcdcdc;/*#fafafa;*/              /* rajouter l'image de fond ou le texte "Raymonde Oppliger Céramiste" */
  border-top:none;/*1px solid #e6e6e6;*/
  border-bottom:none;/*1px solid #c8c8c8;*/
 }

#situation #rpc
{ 
  padding-left:20px;
  margin-top:0px;
  font-size:24px;
  font-weight: normal;
  color:#fafafa;/*#dcdcdc;*/ 
}

#situation #links
{ 
  position:absolute;
  text-align:right;
  right:11px;
  top:4px; 
  font-size:11px; 
}

#situation #links a
{ 
  font-size:10px;
}


/**********************************************************************/
/* Espace d'affichage                                                 */
/* Où s'affichent les informations principales                        */
/**********************************************************************/

/*Titres*/
h1
{
  font-size:20px;
  font-weight:normal;
  text-decoration:none;
  position:absolute;
  top:70px;
  left:40px;
}

h2
{ 
  font-size:16px;
  font-weight:normal;
}


h3
{ 
  font-size:14px;
  font-weight:normal;
}

#workspace
{ 
  position:absolute;
  width:540px;
  height:auto;
  left:110px;
  top:110px;
  background:#f0f0dc;
  border:solid 20px #f0f0dc;
  font-size:12px;
}

#workspace .catalogue
{ 
  width:100%;
  border:0px;
}

#workspace .catalogue td
{
  width:110px;
  height:110px;
  text-align:center;
  vertical-align:middle;
}

#workspace .catalogue td a img
{
  width:90px; 
  border:none;
}

#workspace .catalogue td a:hover img
{
  width:100px; 
}

#workspace .actu
{ 
  width:100%;
  border:0px;
  margin:0px;
  padding:0px;
  border-collapse:collapse;
  border-spacing:0px;
}

#workspace .actu td
{
  height:25px;
  margin:0px;
  vertical-align:middle;
  padding:5px;
  border:solid #c8c8c8 1px;
}

#workspace .actu .dat
{
  width:80px;
  text-align:center;
}

#workspace .actu .comm
{
  width:auto;
  text-align:left;
}

#workspace .actu .lien
{
  width:100px;
  text-align:center;
}


/**********************************************************************/
/* Spécificités des pages de présentation des travux                  */
/**********************************************************************/

#image
{
  position:relative;
  left:120px;
  top:10px;
}

#image img
{
  border:none;
}
/**********************************************************************/
/* Images carrées                                                     */
/**********************************************************************/
#image img .square
{
  width:400px;
  height:400px;  
}
/**********************************************************************/
/* Images rectangulaires                                              */
/**********************************************************************/
#image img .portrait
{ 
  width:350px;
  height:450px;  
}

#legende
{  
  position:absolute;
  top:10px;
  left:10px;
  width:100px;
  font-family:Times,serif;
  font-style:italic;
  font-size:12px;
  line-height:12px;
  text-align:left;
}

/**********************************************************************/
/* Flèches de navigation                                              */
/**********************************************************************/

#nav
{ width:200px;
  height:20px;
  position:absolute;
  top:-12px;
  left:119px;
}

#nav a
{ 
  width:30px;
  height:20px;
  background: rgb(230,230,230); 
  padding:1px 4px 1px 4px;
  margin:1px;
  border:1px solid rgb(180,180,180);
  text-decoration:none;
  text-align:center;
  font-family:arial, verdana, sans-serif;
  font-style:normal;
  font-size:10px;
}

#nav .larr
{  
  position:relative;
  left:0px;
  top:0px;}

#nav .uarr
{ 
  position:relative;
  left:0px;
  top:0px;
 }

#nav .rarr
{  
  position:relative;
  left:0px;
  top:0px;
}

/**********************************************************************/
/* "Interrupteur" pour les lampes                                     */
/**********************************************************************/

#switch
{
  position:absolute;
  top:-10px;
  left:200px;
}

#switch a
{ 
  width:40px;
  height:20px;
  background: rgb(230,230,230); 
  margin:2px;
  padding:2px;
  border:2px solid rgb(50,50,50);
  text-decoration:none;
  text-align:center;
  font-family:arial, verdana, sans-serif;
  font-style:normal;
  font-size:10px;
}

#switch a:hover
{
  background: rgb(250,250,250);
 }

/**********************************************************************/
/* Pour page d'exposition                                             */
/**********************************************************************/

#expotitre
{ 
  font-size:20px;
  position::relative;
  left:20px;
  top:-20px;
}

#expodates

#workspace #expopict
{ 
  position:fixed;
  left:200px;
  top:0px;
}