/* feuille de style site fudoshin
comentaire
commentaire
*/
.textenormalpetit {  font-family: 'Open Sans', sans-serif; font-size:0.6em;color: #000;text-align: justify; margin-bottom: 5px; margin-top: 0; font-weight: normal;}
.textenormaltrespetit {  font-family: 'Open Sans', sans-serif; font-size:0.5em;color: #000;text-align: justify; margin-bottom: 5px; margin-top: 0; font-weight: normal;}
.prouge {font-family: 'Open Sans', sans-serif; font-size:0.9em;color: #FF0000;text-align: justify; margin-bottom: 5px; margin-top: 0; font-weight: normal;}
.textenormalrouge {  font-family: 'Open Sans', sans-serif; font-size:0.9em;color: #ff0000;text-align: justify; margin-bottom: 5px; margin-top: 0; font-weight: normal;}
.textenormal  {  font-family: 'Open Sans', sans-serif; font-size:0.9em;color: #000000;text-align: justify; margin-bottom: 5px; margin-top: 0; font-weight: normal;}
		
h1{
		font-family: 'Tempus Sans ITC','haettenschweiler'; 
		font-size : 1.6em;
		letter-spacing:1px;
		color:red;
		text-align:center;
			font-weight: bold;
		clear:left;}
h2{
		font-family: 'Tempus Sans ITC', 'haettenschweiler';
		font-size : 1.2em;
		letter-spacing:1px;
		color:red;
		clear:both;
		font-weight: bold;
		}		
h3{
		font-family: 'Tempus Sans ITC', 'haettenschweiler';
		font-size :1.1em;
		letter-spacing:1px;
		color:#F79696;
		clear:both;
		font-weight: bold;
		}		
h4{
		font-family: 'Tempus Sans ITC', 'haettenschweiler';
		font-size : 0.9em;
		letter-spacing:1px;
		color:black;
		clear:both;
		font-weight: bold;
		}	

#header{
			background-position: center;
			height: 6.5em;
			background-image:url(../images/banniere_fond.gif);
			background-repeat:no-repeat;
			margin: o auto;
}

body {	
	  min-width: 25em;
}
	


p{
	font-family: 'Open Sans', verdana, sans-serif;
	font-size:0.9em;
	color: #000;
	text-align: justify; 
	margin-bottom: 0.5em; 
	margin-top: 0; 
	font-weight: normal;

}
p:first-letter{
	font-size:1.4em;
	font-family: 'Tempus Sans ITC','haettenschweiler';
	color:red;
		}

		
.ptsilver{
		font-family: 'Open Sans', sans-serif; 
		font-size : 0.7em;
		color:grey;
		width:9em;
		}
.ptnoir{
		font-family: 'Open Sans', sans-serif; 
		font-size : 0.7em;
		color:black;
		}

#paragraphe{
			margin-left : 42em;
			margin-right: 0.5em;
			text-align:left;
			}
			
#side{
			
			background-image: url("../images/fond_japonais.gif");
}

/*
#side img{
			width:90%;
			margin : 0.6em 0.6em 0em 0.6em;
			}*/
			
#side table{
			width:60%;
			margin:0 auto;
			border:solid 0.1em white;
			
			
			border-collapse: separate;
			border-spacing: 0px 5px;
			font-family: 'Open Sans', verdana, sans-serif; 
			font-size : 0.8em;
			
			bgcolor:"#ff0000";
			}		
			
#side td {
			text-align:center;
			border-bottom:solid 0.1em  silver;
			border-right:solid 0.1em  silver;
			}
	/*		
#side tr:nth-child(even) {
			background:silver;
						}	
#side tr:nth-child(odd) {
			background:white;
						}
*/
						
/*#aside{
			background-color:silver;
			width:18%;
			float:left; /*on le met à gauche d'un autre élément
			overflow:auto;
}*/

/*
#bside{
			background-color:tan;
			width:10%;
			height:750px;
			float:left; 
}
*/	

li2 {
 font-family: 'Open Sans', verdana, sans-serif;
	font-size:0.9em;
	color: #000;
	text-align: justify; 
	margin-bottom: 0.5em; 
	margin-top: 0; 
	font-weight: normal;

 display : list-item;
 list-style-image : url(puce.gif);
} 

		
#footer{
			background-position: center;
			height:4em;
			background-image:url(../images/banniere_fond.gif);
			background-repeat:no-repeat;
			margin-left : auto;
			margin-right: auto;
				
			margin-bottom: 0;
			margin-top: 0em;
			 
			clear:both;
}

#menu{	
	text-align: center;
	list-style-type: none;


	font-family: 'Open Sans', sans-serif; 
	font-size : 0.98em;
	letter-spacing:0px;
	margin-bottom: 0.4em;
	margin-top: 0.4em;
	}

#menu ul{
	margin-left:0px;
	padding:0;
	}
	/* enlever les puceset d'office on reset les marge spour permettre l'affichage correct sans décalgae des su-menus*/
	
#menu li{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:9em;
	height:2em;
	background-image:radial-gradient(circle, silver,grey  );
	text-align:center;
	text-decoration:none;
	text-transform: uppercase;
	font-weight:bold;
	color: white;
	line-height: 2em;
	box-shadow: 4px 4px 12px #aaa; 
	}

	
#menu a{
	font-family: 'Open Sans', sans-serif; 
	font-size : 0.98em;
	background-position: center;
	display:inline-block;
	width:9em;
	height:2em;
	background-image:radial-gradient(circle, silver, grey );
	text-align:center;
	text-decoration:none;
	text-transform: uppercase;
	font-weight:bold;
	color: white;
	 
	line-height: 2em;
		
	}
	
#menu a:hover {
	color:black;
	background-image:radial-gradient(circle, white, silver);
	}
	
	
#menu li ul{
	height:0;
	overflow:hidden;
	position:absolute;
	transition-property:height;
	transition-duration:0.2s;
	transition-timing-function:linear;
	transition-delay:0.1s;
	margin-left:-0px;

	}
	/*je cible le ul du li; à l'état nominal  n'apparaît pas*/

	#menu li:hover ul{
	 	height:20em;
	}
	/*au survol des ul dans les li, je fais apparaître*/

	#menu li:hover ul li{
	 	clear:left;
	}
	/*au survol des li des ul dans les li, je supprime */
 
	
.intro a {
		color: #3A5898;
	 font-family: "CALIBRI"; 
	 font-size: 0.5 em; 
	 font-style: bold;
	 text-decoration:none;

  }

  
.intro a:hover, a:focus, a:active a:visited {
	
	color: #FF6666;
	 font-family: "CALIBRI"; 
	 font-size: 0.5 em; 
		 font-style: bold;
	 text-decoration:none;
  }
  
div.zoomparaph{
	box-shadow: 0px 1px 15px #F79696;
    padding: 2px;
    height: auto;
    width: 85%;
    text-align: center;
	float:left;
	margin-left: 0.5em;
	margin-right: 1em;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	}
div.imgleft {
	box-shadow: 0px 1px 15px  #57619F;
    padding: 0.5em;
    height: auto;
    text-align: center;
	float:left;
	margin-right: 20px;
	margin-bottom: 5px;
	margin-top: 5px;
	border-radius: 10px;
 	}
	
div.imgright {
	box-shadow: 0px 1px 15px  #57619F;
    padding: 5px;
    height: auto;
    text-align: center;
	float:right;
	margin-right: 20px;
	margin-bottom: 5px;
	margin-top: 5px;
	border-radius: 10px;
	
	}
	
div.petiteimgleft {
	box-shadow: 0px 1px 1em  #57619F;
    padding: 0.5em;
    height: auto;
    width: 40%;
    text-align: center;
	float:left;
	margin-left: 0.5em;
	margin-right: 8em;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	min-width: 10em;
		}
		
div.petiteimgright {
	box-shadow: 0px 1px 1em  #57619F;
    padding: 0.5em;
    height: auto;
    width: 40%;
    text-align: center;
	float:right;
	margin-left: 0.5em;
	margin-right: 10em;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
    min-width: 10em;
		}

#monul {
    list-style-type: square;
    list-style-position: inside;
	font-family: 'Open Sans', sans-serif; 
	text-indent: -1em;
	font-size:0.9em;
	color: black;
	text-align: justify; 
	margin-bottom: 0.5em; 
	margin-top: 0; 
	font-weight: normal;
   }
   
   
   
#tableau_liste   a {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	color: #000000; 
	display: block;
} 
  
#tableau_liste  table {
	width:80%;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9em ; 
	font-style: normal;
	color:#000000;
	border: 1px solid #ff0000	;
}

#tableau_liste caption {
	font-family: 'Open Sans', sans-serif; 
	font-style: normal;
	background-color: #666666;
	font-weight: normal;
	color:#ffffff;
	}

#tableau_liste th {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	color:#ffffff;
	}
#tableau_liste tr {
	font-weight: normal;
	color:#BFBFD4;
	font-family: 'Open Sans', sans-serif;
	font-style: normal;

	}
	
#tableau_liste tbody tr:hover {
	color:#ffffff;
	background-color: #F79696;
}

#tableau_liste a:hover{
	color:#ffffff;
	background-color: #F79696;
}


  
.tablo_simple table {
	border:0;
	width:70%;
	font-family: "verdana"; 
	font-size: 1 em ; 
	font-style: normal;
	color:#BFBFD4;
}
.tablo_simple caption {
	font-family: "verdana"; 
	font-size: 1em ; 
	font-weight: bold;
	background-image:radial-gradient(circle, white,grey  );
	color:#57619F;
	line-height:30px;
	vertical-align:middle;
	}


  
.ptransition {
margin-left:0px;
	padding:0;
	font-family: 'Open Sans', verdana, sans-serif; 
	font-size:0.9em;
	text-indent:0%;
	color:red;

  animation-duration: 3s;
  animation-name: slidein;
  
  animation-iteration-count: 2;
  animation-direction: alternate;

  
}

@keyframes slidein {
    from {
      margin-left: 00%;
    }
      to {
      margin-left: 70%;

    }
	55% {
  font-size: 130%;
  margin-left: 40%;
  width: 150%;
}
  }
  
  
  

iframe{
  max-width: 100% !important;
 
}

audio{
background: blue;
max-width:80%;

}

 video {
     max-width: 100%;
    height: auto;
 } 
 


  
  img,
	table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
       object,
    embed,
	   {
       max-width: 100%;
	   height: auto;
    }
  
.show_mobile {
display: none 
}

.center {
  margin: auto;
  width: 60%;
  border: 3px solid red;
  padding: 10px;
}


/****************************************************************************/
/* ADAPTATIONS POUR MOBILE **************************************************/
/****************************************************************************/

@media screen and (max-width: 26em)
 {
    body{
        background-color: white;
		font-size:0.9em;
		width: auto;
        padding: 0;
		background-image:url(../images/combat_accueil1.jpg); 
		background-repeat:no-repeat;

    }
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
	table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
       object,
    embed,
   {
       max-width: 100%;
    }
	
	iframe{
  max-width: 100% !important;
 }


.tablo th {
	display:none;
	}

video {
     max-width: 100%;
    height: auto;
 } 
	
img {
        height: auto;
    }

	/* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }

#header{
			background-position: right;
			background-image:url(../images/banniere3.jpg);
			height: 7em;
			margin: o auto;
	}
	

#side{
			
			margin-left : 1em;
			margin-right : 1em;
			margin-top : 15em;
			 
	}
#menu, #menu ul {
  padding:0;
  margin-left:0.15em;
  list-style:none;
  width: 8em; /*  ligne ajoutée */
  float:left;

}
#menu li {
  position: relative;
    width:8em;
	 margin-left:0.15em;

  }
  
#menu a {
   	font-family: 'Open Sans', sans-serif; 
	font-size : 0.98em;
	background-position: center;
	display:block;
	width:8em;
	background-image:radial-gradient(circle, silver, grey );
	text-align:center;
	text-decoration:none;
	text-transform: uppercase;
	font-weight:bold;
	color: white;

}
	
#menu li:hover ul {
  top: 0;
  left: 8em;

}



/* classe pour masquer les éléments superflus */
.hide_mobile {
display: none 
}
/* class permettant de cacher un item menu en mobile*/
#menu li.cachemenu {
display:none;
}

.show_mobile {
display: inline-block; 
}

div.petiteimg {
	font-size : 0.8em;
	width:8em;
		}
		
.imagemobile {
		height:100%;
		width:100%
		}

		
		    

   
/* Un message personnalisé */
body:before {
content: "Version mobile du site FUDOSHIN SHITO RYU";
display: block;
color: Red;
text-align: center;
font-style: italic;
width: 90%;   
 
}

#footer{
			background-position: center;
			height:4em;
			background-image:url(../images/banniere3.jpg);
			background-repeat:no-repeat;
			margin-left : auto;
			margin-right: auto;
				
			margin-bottom: 0;
			margin-top: 0em;
			 
			clear:both;
}

}