@charset "utf-8";
/* CSS Document */

body {
      background-color: #fff;
      color: #333;
      font-family: Verdana, sans-serif;
      max-width: 800px;
      margin: auto;
	  padding: 1em;
	   
    }
	
	
    .alphabet{	
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000;
font-size:3em;
}
	
	h1 {
      color: #000;
      font-size: 1.8em;
      border-bottom: 1px solid #999;
      padding-bottom: 0.3em;
    }
	
	.h1_32px{
	font-size:32px; font-style:normal; font-weight:normal;
}
    h2 {
      color: #000;
      font-size: 1.4em;
      margin-top: 2em;
    }
	
	.h2_28px{
	font-size:28px; font-style:normal; font-weight:normal;
}
    p {
      font-size: 1.1em;
	  line-height: 1.6;
      margin: 0.5em 0;
    }
    hr {
      margin: 2em 0;
    }
    a {
      color: #F00;
      text-decoration: underline;
    }
   
    
	
	header, footer {
  text-align: center;
  margin-top: 2em;
  font-family: Verdana, sans-serif;
}

header nav p,
footer p {
  margin: 0.5em 0;
}

header a,
footer a {
  color: #cc6600;
  text-decoration: none;
  font-weight: normal;
}

header a:hover,
footer a:hover {
  text-decoration: underline;
}


.phrases {
  background-color: #fff8f0;
  border-left: 4px solid #cc3300;
  padding: 1rem;
  margin: 1.5rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}
	
.definition {
  display: block;
  margin-top: 4px;
  font-size: 0.9em;
  color: #555;
}	
	
	.navigation {
      margin-top: 1em;
    }
	
	
	/* Navigation alphabet horizontal responsive */

.navigation {
  margin: 2em auto;
  text-align: center;
}

.navigation p {
  font-size: 1.2em;
  word-spacing: 0.3em;
  line-height: 1.6em;
  margin: 1em 0;
  flex-wrap: wrap;
}

.navigation a {
  display: inline-block;
  padding: 0.3em 0.6em;
  margin: 0.2em;
  text-decoration: none;
  color: #cc6600;
  border-radius: 5px;
}

.navigation a:hover {
  background-color: #ffe6cc;
  text-decoration: underline;
}

.bord_image{
	background: #F0F0F0; margin-left:20px !important; margin-right:20px !important; margin-top:0px !important; margin-bottom:10px !important; 
	padding-bottom:5px; padding-top:10px;padding-left:5px;padding-right:5px; 
	
	border:solid 1px #999999;
	
	/* Webkit (Safari/Chrome) */ -webkit-box-shadow: 3px 5px 8px 0px #B3B3B3;
	/* Mozilla Firefox */ -moz-box-shadow: 3px 5px 8px 0px #B3B3B3;
	/* Proposed W3C Markup */ box-shadow: 3px 5px 8px 0px #B3B3B3;
	}
.bord_image_texte{
	background: #FFF; margin-left:20px !important; margin-right:20px !important; margin-top:0px !important; margin-bottom:10px !important; 
	padding-bottom:5px; padding-top:10px;padding-left:5px;padding-right:5px; 
	
	border:solid 1px #999999;
	
	/* Webkit (Safari/Chrome) */ -webkit-box-shadow: 3px 5px 8px 0px #B3B3B3;
	/* Mozilla Firefox */ -moz-box-shadow: 3px 5px 8px 0px #B3B3B3;
	/* Proposed W3C Markup */ box-shadow: 3px 5px 8px 0px #B3B3B3;
	}


@media screen and (max-width: 600px) {
  .alphabet {
    font-size: 3em;
  }

  .h1_32px {
    font-size: 1.8em;
  }

  .h2_28px {
    font-size: 1.6em;
  }

  .navigation p {
    font-size: 1.1em;
    line-height: 1.4em;
  }
}