#actu
{position: absolute;
margin-left: -580px;
left: 50%;
top: 250px;
}
#actu1
{position: absolute;
margin-left: -570px;
left: 50%;
top: 320px;
width: 250px;
}
#photojc
{position: absolute;
margin-left: -270px;
left: 50%;
top: 250px;
}
#textedroit
{position: absolute;
margin-left: -40px;
left: 50%;
top: 250px;
width:470px;
font-family:arial;
font-size:14px;
color:#000000;
text-align: justify;
}
#textebas
{position: absolute;
margin-left: -270px;
left: 50%;
top: 550px;
width:700px;
font-family:arial;
font-size:14px;
color:#000000;
text-align: justify;
}



/******************* BODY *****************/

body {margin-left : 10%; margin-right : 25%; margin-bottom : 1 em; text-align: justify;

behavior: url(csshover.htc);  

}




/***** body { background-repeat: no-repeat; color = "#003300"; text-align : justify; margin: 0;} */



div#menu {
position: absolute;
margin-left: 260px;  /* Tu définies ici l'emplacement horizontal du menu  */ 
left: 50%;
top: 25px;} /*Tu définies ici l'emplacement vertical du menu par rapport au haut de la page */ 

/* Ecriture du texte du menu en noir */ 
div#menu a {color:#000000 ;}

/* Couleur principale de fond des cases définie dans le background */ 
div#menu ul {padding: 0; width: 150px; border:1px solid; margin:0px; background: #F5ECAB;}
div#menu ul.niveau2 {padding: 0; width: 150px; border:1px solid; margin:0px; background: #E5DB93;}
div#menu ul.niveau3 {padding: 0; width: 150px; border:1px solid; margin:0px; background: #f0f5ce;}


/* fond different au survol de la souris pour les sous menu et les "basiques"*/ 
div#menu li:hover {background: #A5863C;}
div#menu li.sousmenu:hover {background: #A5863C;}

div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: -172px; display:none}

/* on rajoute une bordure a gauche de couleur noire #000000 */ 
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #5D5833; width:170px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

/* on peut changer la couleur de la petite bordure sur la gauche lors du survol survol*/ 
div#menu li a:hover {border-left-color: #F5ECAB;}              /* bordure gauche 1er niveau*/
div#menu ul ul li a:hover {border-left-color: #E5DB93;}        /* bordure gauche 2e niveau*/
div#menu ul ul ul li a:hover {border-left-color: #505c28;}     /* bordure gauche 3e niveau*/

/******************* PLACEMENT DE L'IMAGE JC Welche *****************/

#titre1
{position: absolute;
margin-left: -600px; /* Tu définies ici l'emplacement horizontal de l'image  */ 
left: 50%;
top: 20px; /*Tu définies ici l'emplacement vertical de l'image par rapport au haut de la page */ 
}

a.activites_img_left:hover { background-color: white; }

body#accueil {background-image: url("bck_accueil.jpg");  background-position: 20% 0%; background-repeat: no-repeat; margin-left : 10%; margin-right : 25%; margin-bottom : 1 em; }
.mytime { behavior: url(#default#time2);}

body.instruments {}
body#instruments {}
body#cor {background-image : url("images/instruments/cor_historique_04_suisse_2004.jpg"); background-repeat : no-repeat; background-position: center;}


body.all {background-color:  #FBECCD;}
body#all {background-color:  #FBECCD;}

body.cours {background-image :  url("bois_lisse.jpg"); background-repeat : repeat; }
body#cours {background-image :  url("images/cours-fond.jpg"); background-repeat : repeat; }

body#stages {background-image: url("images/stages-fond.jpg"); background-repeat: repeat;}

body.animations {background-image :  url("images/animations-scolaires.gif"); background-repeat : repeat; }
body#animations {background-image :  url("images/animations-scolaires.gif"); background-repeat : repeat; }

body.concerts {background-repeat: repeat; background-image: url("images/concerts-fond.jpg");}
body#concerts {background-repeat: repeat; background-image: url("images/concerts-fond.jpg");}

body#interview {background-repeat : repeat; background-image: url("images/interview-fond.jpg"); }

.logo {position : absolute; top: 77%;  left :87%;}
#logo {position : absolute; top: 77%;  left :83%;}


/******************* ACCUEIL SITE **************/



/***************** MENUS *****************/


#menu-cours ul {text-align : right; padding-top: 3%;}
#menu-cours li { margin: 0; padding: 0; list-style-type: none; background-image:  url("bois_lisse.jpg"); background-repeat: repeat; text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black; } 

#menu-stages ul {text-align : right; padding-top: 3%;}
#menu-stages li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-animations-scolaires ul {text-align : right; padding-top: 3%;}
#menu-animations-scolaires li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-evenements ul {text-align : right; padding-top: 3%;}
#menu-evenements li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-activites ul {text-align : right; padding-top: 3%;}
#menu-activites li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-concerts ul {text-align : right; padding-top: 3%;}
#menu-concerts li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-coordonnees ul {text-align : right; padding-top: 3%;}
#menu-coordonnees li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-interview ul {text-align : right; padding-top: 3%;}
#menu-interview li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-all ul {text-align : right; padding-top: 3%;}
#menu-all li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-instruments ul {text-align : right; padding-top: 3%;}
#menu-instruments li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding-top: 4 px; padding-bottom: 4px; width : 24%; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

#menu-six ul {text-align : right; padding-top: 3%;}
#menu-six li { margin: 0; padding: 0; list-style-type: none;  text-align: center; display: inline; padding: 4 px; padding-bottom: 4px; border-top:solid 3px white ; border-left:solid 3px white ; border-right:solid 1px black ; border-bottom:solid 1px black } 

/********************** LIENS************************/



a:link { color : #386C2E; text-decoration: underline; }
a:visited { color : #72C54D; text-decoration: underline;}
a:hover { color :#1E5314;  text-decoration: underline;  }

 
 


.img_left a:hover { color : #F9F5D9;  text-decoration: none; background-color: white; }
a.image_hover:hover {background-color: white;}



.haut { font-size: 95%; text-align: right;}

.lien {font-size: 105%;}

.menu_right_top { font-size: 90%; text-align: right; margin-right: 0%;}
.menu_right_bottom { font-size: 90%; text-align: right; padding-top : 1.5%; padding-bottom: 2%; margin-right: 6%;}


.menu_right_0 { font-size: 90%; text-align: right; margin-right: 0%;}
.menu_right { font-size: 90%; text-align: right; padding-top : 1.5%; margin-right: 6%;}
.menu_right_middle {font-size: 90%; text-align: right; padding-top : 2%; padding-bottom : 2%; margin-right : 6%; }
.menu_right_high {font-size: 90%; text-align: right; padding-top : 5%;}
.menu_right_very_high {font-size: 90%; text-align: right; padding-top : 8%;}

.menu_left_high {font-size: 90%; text-align: left; padding-top : 5%;}

.menu_center_middle {font-size: 90%; text-align: center; padding-top : 2%; padding-bottom: 3%;}
.menu_center {font-size: 90%; text-align: center; padding-bottom: 3%;}

.menu_test {font-size: 0.75 em;}

.menu_clear {font-size: 90%; text-align: left; clear : both;}

.menu2 {font-size: 90%; text-align: center; }
.menu3 {font-size: 90%; text-align: right; }

#higher {line-height : 1.3;}



/***************** TITRES *****************/

h1 {font-style: italic; text-align: center; padding-bottom : 3%; padding-top : 3%; font-size : 200%;}      
h2 {font-size: 120%;} 


/*****************ASPECT GENERAL*****************/

#small {margin-left: 4%; margin-right: 4%; margin-top: 2%; margin-bottom : 2%;  }
#middle {margin-left: 6%; margin-right: 6%; }
#large {margin-left: 8%; margin-right: 8%;}
#very_large {margin-left : 10%; margin-right: 10%;}

#large_font_large {margin-left: 8%; margin-right: 8%; font-size : 120%;}

.bold {font-weight: bold; }
.bold_italic {font-weight: bold; font-style: italic;}

.font_middle {font-size : 105%;}
.font_large {font-size : 110%;}
.font_larger {font-size: 120%;}

.chapeau {font-weight: bold; font-style: italic; font-size: 110%;}
.chapeau2 {padding: 1%;  padding-left : 4%; padding-right: 4%; background-color: FBF9CB;}

img {border: none;}

#click {text-align : center; font-style: italic; font-weight: normal; font-size: 90%;}

/***************** ASPECT PARTICULIER *****************/

#h1-instruments {margin-top: 4%;}

#instruments h1 {margin-top: 2%;}
#instruments h2 {padding-top: 3 %; padding-bottom: 1%;}

#fleches {float : right;  margin-right: 3%;}

.test_concerts {background-image : url(images/beige_10.jpg); background-repeat: repeat; margin: 0; }

.en_tete_concerts {text-align: center; font-size: 120%; font-weight : bold;}
.texte_concerts {margin-left : 10%; margin-right: 10%; text-align: justify;}

.image-verticale {float: left; margin-right : 10%; margin-top : 8%;}
.image-verticale-bis {float: left; margin-right : 10%; }
.image-verticale-right {float: right; margin-left : 10%; }
.image-horizontale {float: left; margin-right : 8%; margin-top : 10%; margin-bottom: 2%;}

.image-horizontale2 {float: left; margin-right : 10%; margin-top : 0%; margin-bottom: 2%;}

/***************** TEXTE *****************/

#activites-accueil {font-size : 110%; font-weight : bold; text-align: center; line-height: 1; width : 100%; padding-top: 2%; background-color: none;}
.activites-photo {width: 250 px; height: 250; float: left; background-color : none;}

.activites-texte {padding-top : 5%;}
.activites_img_left {float : left; margin-right : 3%; padding-bottom : 3%; }
a.activites_img_left:hover { background-color: white; }

/***************** IMAGES *****************/

.img_left_very_large {float : left; margin-right : 10%;}
.img_left_large {float : left; margin-right : 5%;}
.img_left {float : left; margin-right : 3%; }

img.accueil_harpe {float: left; margin: 10%, 5%, 10%, 0;}

.image_right { margin-left: 3%; margin-bottom: 3%; float: right;}
.image_left { margin-right: 3%; margin-bottom: 3%; float: left;}

#image_right { margin-left: 3%; margin-bottom: 3%; float: right;}
#image_left { margin-right: 3%; margin-bottom: 3%; float: left;}


.test {color : red;}

.clear {clear: both;}

/******************** VIOLON ***************************/
#violon-home {font-size: 100%; padding-top: 0%;}

.violon-frame {font-size : 100%; margin-left: 6%; text-align: center; line-height: 1; width : 100%; padding-top: 4%; background-color: none; }
.violon-photo {width: 300 px; margin-right: 8%; height: 280; float: left; background-color : none;}
.violon_ingrid_frame {text-align : center; background-color: none;}
.violon_ingrid {margin-top : 3%; margin-right: 2%; margin-left: 2%;}
#violon-baroque h2 {padding-top: 1 em;} 
.texte_accueil {font-size : 120%; margin-right: 3%;}

.propose {
  text-align: left;
  color : #CD2222;
  font-weight: bold;
  font-style: italic;
  }
  
/******************** MANDOLINE ***************************/
#mandoline-home {font-size: 100%; padding-top: 3%;}

.estudiantina_left { margin-right: 5%; margin-bottom: 3%; margin-top : 3%; float: left;}
.estudiantina_left2 { margin-right: 5%; margin-top : 3%; float: left;}
.estudiantina_right { margin-left: 5%; margin-bottom: 3%; margin-top : 3%; float: right;}
.estudiantina {margin-top : 8%;}
.estudiantina2 {margin-top : 4%;}
/***************** SCIE - HUMOUR *****************/
#scie-musicale-humour {margin-left : 10%; margin-right: 10%; text-align: justify; font-size: 100%; color: navy;}
.scie-musicale-humour-1 {text-align: center; margin-bottom: 5%;}
.scie-musicale-humour-2 {float: left;}
.scie-musicale-humour-3 {float: left; margin-left: -5%;}
.scie-musicale-humour-4 {float: left;margin-left: 15%;}
.scie-musicale-humour-6 {float: left;margin-left: 10%; margin-bottom: 5%;}

/*****************SCIE - HISTOIRE*****************/
img.scie_1 {float: left; margin-right : 7%; margin-top : 1%; margin-bottom : 2%;}
img.scie_11 {float: left; margin-right : 7%; margin-top : 1%; margin-bottom : 0%;}
img.scie_2 {float: right; margin-left: 7%; margin-top : 1%; margin-bottom : 2%; }
img.scie_22 {float: right; margin-left: 7%; margin-top : 0%; margin-bottom : 2%; }
img.scie_23 {float: right; margin-left: 7%; margin-top : 1%; margin-bottom : 0%; }

img.scie_3 {float: left;  margin-left: 10%; margin-right : 5%;}
img.scie_4 {float: left; margin-right: 10%; margin-left: 5%;}  

.scie1 { padding-top : 4%; margin-right: 15%; margin-left: 4%; }
.scie11 { padding-top : 1%; margin-right: 15%; margin-left: 4%; }
.scie2 { margin-right: 15%; margin-left: 4%; }
.scie3 { padding-top : 8%; margin-right: 15%; margin-left: 4%; }
.scie4 { padding-top : 2%; margin-right: 15%; margin-left: 4%; }

h2.scie {padding-top: 2%;}

/*************************************************/

.cours-dessins {margin-left: 12%;}