@charset "UTF-8";
/* Feuille de style Sylvie */
/* Nouvelles possibilités html5 */

html, body, .page {height:100%;}
.page {
	display: table;
	width: 100%}
	
.site-header,
.site-content,
.site-footer {width:1200px; display: table-row}

.site-content {float:none; margin:auto;}
.site-footer {vertical-align:bottom; width:1000px; height:15px; font-size:13px; padding-bottom:10px; margin:auto}


.content {width:1200px;}


body.fond {background-repeat:repeat;
 font-family: 'Book Antiqua', 'Bell MT', sans-serif, 'Bookman Old Style';
 color:#330000;
}

body.barre {background-repeat:repeat;
 font-family: 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
 color:#330000;}
 
/* POUR LES PAGES SITES, NOUVEAU LE 23.01.21, pour fixer le menu en haut et le texte passe dessous, voir aussi format <480     */ 
.site-header{width:100%}                 
body.sites {padding-top:90px} 
header.sites {position:fixed; left:0; right:0; top:0; height:110px; background-image:url(Sites/Images/carre.jpg)}                                                 
.content {width:90%}


    
.bandeau {background-image:url(Images/bandeau_def.png);background-repeat: repeat-x; padding:10px; padding-bottom:0px;}
 
/* Les nouveaux styles */

/* blocks */
.centre {float:none; margin-left:auto; margin-right:auto; display:block; text-align:center;}
.centreg {float:none; margin-left:auto; margin-right:auto; display:block;}
.droite {float:right; display:block} 
.gauche {float:left; display:block} 

/* td */
.tdcentre {float:none; margin-left:auto; margin-right:auto; text-align:center;}

/* texte */
.texte_centre {text-align:center;} 
.texte_just {text-align:justify;} 
.texte_droite {text-align:right;} 
.texte_gauche {text-align:left;} 

/* br */
.retour_g {clear:left;} 
.retour_d {clear:right;} 
.retour_all {clear:both;}  

/* COULEURS FONDS ET BORDS */                        /* couleurs pour des fonds */
.fond_blanc  {background-color: white}
.fond_bleu  {background-color: blue}
.fond_jaune  {background-color: yellow} 
.fond_noir  {background-color: black} 
.fond_rouge  {background-color: red}                  
.fond_vert   {background-color: green}
                                                       /* couleurs pour des bordures */
.bord_blanc  {border: 1px solid white}  
.bord_bleu   {border: 1px solid blue}
.bord_jaune  {border: 1px solid yellow} 
.bord_noir   {border: 1px solid black} 
.bord_rouge  {border: 1px solid red}                  
.bord_vert   {border: 1px solid green} 



.saut {
page-break-after : always; /* saut de ligne apres le bloc*/
page-break-before : always; /* saut de ligne avant le bloc*/
} 

.border2 {border : 2px solid black}

/* images */
.nobord {border:none;} 

/* Le reste */

all.fond, .fond {background-repeat:repeat;
 font-family: 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
 color:#000000;}
 
.sur_demande {
   list-style-type:none; /* pas de puces */
   list-style-position:inside; /* pas de retrait */
   display: none; /* les sous-menus ne sont pas affiches */
   margin: 0 20px 0 0; /* marges exterieures a 0 */
   padding : 0; /* marges interieures a 0 */
   position : relative; 
   float: left; /* Debut (par rapport a la gauche de la page) des sous-menus left : 0px;*/
   top:0;
   right: 0; /* Distance a la droite de la page du 1er sous-menu */
   }

.fond_musique {background-repeat:repeat;
 font-family: 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
 color:#000000;}

.parchemin_15 {background: url(Musique/Images/parchemin_15.gif) no-repeat center center;
width: 400px;
font-family: 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
color:#000000;
line-height:20px;
font-family:sans-serif;
font-size: 17px;
font-weight: 400;
}

.parchemin_10 {background: url(Musique/Images/parchemin_10.gif) no-repeat center center;
width: 400px;
font-family: 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
color:#000000;
line-height:20px;
font-family:sans-serif;
font-size: 17px;
font-weight: 400;
}

.parchemin_mobile {background: url(Musique/Images/parchemin_mobile.gif) no-repeat center center;
width: 400px;
font-family: 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
color:#000000;
line-height:20px;
font-family:sans-serif;
font-size: 17px;
font-weight: 400;
}

.coin_gauche_haut
{
background: url(Musique/Images/coin_gauche_haut2.jpg) no-repeat top left;
padding: 50px 0 0 200px;  
margin: 20px -10px; 
position: absolute;
z-index: -1;
}

.coin_gauche_haut_iPad
{
background: url(Musique/Images/harpe_pp.jpg) no-repeat top left;
padding: 50px 0 0 200px;  
margin: 20px -10px; 
position: absolute;
z-index: -1;
}

.coin_droite_haut
{
background: url(Musique/Images/coin_droite_haut.jpg) no-repeat top right;
padding: 100px 300px 0 0 ;  
margin-right:0px; 
margin-top:120px; 
position: absolute;
z-index: -1;
}

.coin_droite_haut_iPad
{
background: url(Musique/Images/piano_pp.jpg) no-repeat top right;
padding: 100px 300px 0 0 ;  
margin-right:0px; 
margin-top:120px; 
position: absolute;
z-index: -1;
}

.banniere {
background-repeat: no-repeat;
background-position:top center;
 margin-top: 10px;}

#baie_Treb {background: url(http://www.familleperreau.com/Sylvie/Images/baie_Treb3_ext.jpg) no-repeat;
background-repeat: no-repeat;
background-position:top center;
 margin-left:12px;
 margin-top: 10px;
 padding-top: 280px;}

#logo_cousins {background: url(Images/logo_cousins.jpg) no-repeat;
background-repeat: no-repeat;
background-position:top center;
 margin-left:12px;
 margin-top: -15px;
 padding-top: 300px;}

#chez_Sylvie {background: url(Images/chez_Sylvie.jpg) no-repeat;
background-repeat: no-repeat;
background-position:top center;
margin-top: 10px;
padding-top: 250px;}

#chez_Sylvie_menu {background: url(Images/chez_Sylvie_interm.jpg) no-repeat;
background-repeat: no-repeat;
background-position:top center;
margin-top: -5px;
padding-top: 230px;}


#voyages_all {background: url(Images/voyages_all.jpg) no-repeat;
background-repeat: no-repeat;
background-position:top center;
 margin-left:12px;
 margin-top: -5px;
 padding-top: 300px;}

#voyages_fr {background: url(Images/voyages_fr.jpg) no-repeat;
background-repeat: no-repeat;
background-position:top center;
 margin-left:12px;
 margin-top: -5px;
 padding-top: 300px;}

#les_balades {background: url(Images/balades.jpg) no-repeat;
background-repeat: no-repeat;
background-position:top center;
 margin-left:12px;
 margin-top: 10px;
 padding-top: 300px;
 padding-bottom: 30px}

#les_balades_d {background: url(Balades/balades_d.jpg) no-repeat;
background-repeat: no-repeat;
background-position:top center;
 margin-left:12px;
 margin-top: 10px;
 padding-top: 300px;}


#album_jardin {background: url(Images/album_jardin.png) no-repeat;
background-repeat: no-repeat;
background-position: center 0%;
padding-top: 250px;}

#album_jardin_d {background: url(Images/album_jardin_d.png) no-repeat;
background-repeat: no-repeat;
background-position:center 0%;
 margin-left:12px;
 margin-top: -5px;
 padding-top: 250px;}

#top {
 margin-top: 1px;}

a:link {color:#006633;}

a:visited {color:#CC0066;}

.lien_menu {text-decoration:none; color: #000000}

a.lien_titre {
  text-decoration:none;
  color:black;
}

a:hover.lien_titre {
  font-weight:bold;
}

a.photo {background: url(carre_jaune.jpg) repeat;
 margin-left:auto;
 margin-top: 35px;}

lien_photo {background: url(http://www.familleperreau.com/Sylvie/Images/carre_jaune.jpg) repeat;
 font-family: 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
 color:#000000;
 margin-left:auto;
 margin-right:auto;}

.cellule {
background-repeat: no-repeat;
background-position:center center;
}

.centre {
text-align:center;
}

.marges {
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;}

.padding_10 { padding: 10px }

.haut_cellule {
background-repeat: no-repeat;
background-position:center 30px;
padding-top: 30px;
padding-left: 10px;
padding-right: 10px;}

.cellule1 {
background-repeat: no-repeat;
background-position:center center;
height:500px;
width:720px;
}

.cellule2 {
background-repeat: no-repeat;
background-position:center center;
height:300px;
width:auto;
}
.cellule3 {
background-repeat: no-repeat;
background-position:center center;
height:300px;
width:auto;
}

p {margin:0px;}

p.normal {margin:0px;
  line-height:20px;
  font-family:sans-serif;
  font-size: 17px;
  font-weight: 400;}

.texte {margin:12px;
 line-height: 20px;}

.exposant {font-size:small;
 vertical-align: 50%;}

.normal {
  line-height:20px;
  font-family:sans-serif;
  font-size: 17px;
  font-weight: 400;}

.normal_table {
  line-height:18px;
  font-family:sans-serif;
  font-size: 15px;
  font-weight: 400;}

.plusgros {
  line-height:22px;
  font-family:sans-serif;
  font-size: 19px;
  font-weight: 400;}

.photo{
  font-family:sans-serif;
  font-size: 15px;
  font-weight: 400;}

.petit{
  font-family:'Arial';
  font-size: 13px;
  font-weight: 400;}

.menu_sylvie{
  line-height:20px;
  font-family:sans-serif;
  font-size: 14px;
  font-weight: 600;}
  
.ss_menu{
  line-height:20px;
  font-family:sans-serif;
  font-size: 13px;
  font-weight: 600;
  color:#646164;}
  
.ss_menu_actif{
  line-height:20px;
  font-family:sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4d8d71;}

.ppetit{
  line-height:4px;
  font-family:'Arial';
  font-size: 13px;
  font-weight: 400;}

.table_cal_ph, td.table_cal_ph {
	border:1px solid grey;
}

table.bord {
	border:1px solid black;
}

table.bord td{
	border:1px solid black;
	padding-top:2px; padding-left:5px;
	padding-bottom:2px; padding-right:5px
}

.gras {
  line-height:20px;
  font-family:sans-serif;
  font-weight:bold;
  font-size: 17px;}

.fantaisie{
  font-family:'Papyrus','Copperplate',fantasy;
  font-size: 1.5em;
  font-weight: 700;
  line-height:1.7em;
  vertical-align:middle;
  margin-left:-10px}

.fantaisie_top_mobile{
  font-family:fantasy;
  font-size: 1em;
  font-weight: 500;
  line-height:2em;}
  
.titre_fantaisie{
  font-family:fantasy,'Quantum of Mechanic','Bernadette','Arcanum','Devinne Swash','French Grotesque','Blambot Custom','Copplerplate Gothic Bold' ;
  font-size: 24px;
  font-weight: 700;}

.titremenu{
  font-family:'AndrewScript','Alpha Dance','Bradley Hand ITC TT-Bold', 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
  font-size: 40px;}
  
.titre_musique
{ font-family: "Brush Script MT",'French Grotesque', 'AndrewScript', Verdana, Arial, Helvetica, sans-serif;
  font-size:60px;
  font-style:oblique;
  font-weight:500;
  color: #F5E75C;
  text-shadow: 4px 4px 4px #660033 ; }

.titre_musique_iPad
{ font-family: "Brush Script MT",'French Grotesque', 'AndrewScript', Verdana, Arial, Helvetica, sans-serif;
  font-size:25px;
  font-style:oblique;
  font-weight:500;
  color: #F5E75C;
  text-shadow: 4px 4px 4px #660033 ; }

.sous_titre_musique
{ font-family: "Brush Script MT",'French Grotesque', 'AndrewScript', Verdana, Arial, Helvetica, sans-serif;
  font-size:40px;
  font-style:oblique;
  font-weight:500;
  color: #000000;}
  
.sous_titre_musique_iPad
{ font-family: "Brush Script MT",'French Grotesque', 'AndrewScript', Verdana, Arial, Helvetica, sans-serif;
  font-size:20px;
  font-style:oblique;
  font-weight:400;
  color: #000000;}

.titre1{
  font-family:sans-serif;
  font-size: 26px;
  font-weight: 600;}

.titre2{
  font-family:sans-serif;
  font-size: 24px;
  font-weight: 500;}

.titre3{
  font-family:sans-serif;
  font-size: 22px;
  font-weight: 400;}

.titre4{
  font-family:sans-serif;
  font-size: 20px;
  font-weight: 300;}

.titre5{
  font-family:sans-serif;
  font-size: 18px;
  font-weight: 200;}


h1 {font-family: 'Bradley Hand ITC TT-Bold', 'Book Antiqua', 'Bell MT', 'Bookman Old Style'; }

h2{
  font-family:fantasy,'Bradley Hand ITC TT-Bold', 'Book Antiqua', 'Bell MT', 'Bookman Old Style';
  font-size:30px;
  font-weight:600;}

h4 {margin:3mm;}

h3 {margin:3mm;}

#nav1{
 margin-top: 1em;
 margin-bottom: 0.5em;
 }
#nav1 ul {
 text-align: center;
 margin-left: 0;
 padding-left: 0;
 }
#nav1 li {
 list-style-type: none;
 padding: 0.25em 1em;
 display: inline
 }


.diapo {
    text-decoration: none;
    display: inline-block;
    color: white ;    
    font-size:30px;
    font-weight:400;
    vertical-align:middle;
}

/* utilisé dans sites.php sur la loupe */
[type="image"] { border:none; height:50px; width:50px;}     

/* tailles d'écran */

/* Règles pour les ecrans fixes */
				
	.fixe, .police_mobile
    {
    }
	
	.mobile
    {display: none;}

	.mobile_inline
    {display: none;}

@media (min-width: 800px) and (max-width: 5000px) {
	
 .fantaisie{
  font-family:fantasy;
  font-size: 24px;
  font-weight: 700;
  vertical-align:middle;
  line-height:26px;
  margin-left:0px}

   .bloc_titre {
		 width:70%;
		 border:none;
		 padding:20px;
		 margin-top:20px;
		 margin-bottom:40px;
		 font-family: "Brush Script MT",'French Grotesque', 'AndrewScript', Verdana, Arial, Helvetica, sans-serif;
		 font-size: 35px}
	.table_vins {
		 width:80%;
		 margin-left:auto;
		 margin-right:auto;
		 display:block;
		 border-spacing:20px 3px;
		 border-collapse:separate;
		 line-height:30px;}
	.table_vins td {
		 padding:0px 10px;}
}

/* Pour les galeries photos */

@media (min-width: 1251px) and (max-width: 5000px) {
	.galerie_photo {width:1200px; margin:40px auto}
	.hauteur_photo {height:240px; margin:8px; padding:0px}

    .inline-fixe
    {   display: inline-block}
}

@media (min-width: 1200px) and (max-width: 1250px) {
	.galerie_photo {width:1000px; margin:40px auto}
	.hauteur_photo {height:200px; margin:5px; padding:0px}

    .inline-fixe
    {   display: inline-block}
}

@media (min-width: 400px) and (max-width: 1200px) {
.site-header,
.site-content,
.site-footer {width:700px; display: table-row}

.site-header {width:100%}

.site-content {float:none; margin:auto; padding:0px 5px}
.site-footer {vertical-align:bottom; height:15px; font-size:13px; padding-bottom:10px; margin:auto; width:700px}
	.galerie_photo {width:700px; margin:40px auto}
	.hauteur_photo {height:200px; margin:5px; padding:0px}

    .inline-fixe
    {   display: inline-block}
}

@media (max-width: 400px) {
     .bloc_titre {
		 width:100%;
		 border:none;
		 padding:5px;
		 font-family:sans-serif;
		 font-size: 17px;
		 font-weight:800;}
	.table_vins {
		 width:100%;
		 border-spacing:3px;
		 border-collapse:separate;}

    .inline-fixe
    {   display: none}

/* utilisé dans sites.php sur la loupe */
[type="image"] { border:none; height:55px; width:55px}  
		 
}

@media all and (max-device-width: 480px)
{
	
.texte_gauche {text-align:left; padding-left:15px;} 

    .fixe
    {   display: none}
	
	.page
	{	width:340px;
		background-position:top !important;
		background-repeat:no-repeat;
		background-size:auto;
		margin:auto;
		margin-top:5px;
		padding:0px;
       }        
		
	.site-header,
	.site-content,
	.site-footer {width:340px; margin:auto; display: table-row; padding:0px;}

	.site-footer {padding-bottom:15px}
    
    .input_140 { width:140px}
  
/* POUR LES PAGES SITES, NOUVEAU LE 23.01.21, pour fixer le menu en haut et le texte passe dessous   */  
    .site-header {width:100%}            
    body.sites {padding-top:110px} 
    header.sites {height:110px} 
       
    .content {width:100%}
    
    .sous_titre_musique { font-size:25px;}     
    
.titre1{
  font-family:sans-serif;
  font-size: 20px;
  font-weight: 600;}

.titre2{
  font-family:sans-serif;
  font-size: 18px;
  font-weight: 500;}

.titre3{
  font-family:sans-serif;
  font-size: 16px;
  font-weight: 400;}

.titre4{
  font-family:sans-serif;
  font-size: 14px;
  font-weight: 300;}

.titre5{
  font-family:sans-serif;
  font-size: 12px;
  font-weight: 200;}



	.mobile
    {	width: inherit; 
		display: block;
		margin:auto;}
		
	.mobile_inline
    {	width: 340px; display:inline;}

.banniere_mobile 	{	width:320px;
						padding-top:20px;
						margin:auto;
					}
	.box {
		background-color: #d1f0c6;
		border: 1px solid white;
		margin:auto;
		vertical-align:middle;
		font-size:8px}
		
	p {width:330px; margin:auto;}

	p.normal {width:330px; margin:auto;}


}