body, #form-vie-du-choeur textarea {
	font-family: "Century Gothic",Verdana, Arial;
}

#mainbody {
	background: grey url(../images/fond.jpg) no-repeat fixed;
	background-size:cover;
	margin:0px;
	border:0px;
}

#page {
	max-width: 960px;
	margin: 10px auto;
	padding: 0;
	overflow:hidden;
	text-align:justify;

	-moz-box-shadow: 3px 3px 15px 1px #000000;
	-webkit-box-shadow: 3px 3px 15px 1px #000000;
	-o-box-shadow: 3px 3px 15px 1px #000000;
	box-shadow: 3px 3px 15px 1px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=135, Strength=15);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
		
		-webkit-animation: fadein 2s; /* Safari and Chrome */
		   -moz-animation: fadein 10s; /* Firefox */
			-ms-animation: fadein 2s; /* Internet Explorer */
			 -o-animation: fadein 2s; /* Opera */
				animation: fadein 2s;
		-webkit-animation: fadeout 2s; /* Safari and Chrome */
		   -moz-animation: fadeout 10s; /* Firefox */
			-ms-animation: fadein 2s; /* Internet Explorer */
			 -o-animation: fadein 2s; /* Opera */
				animation: fadein 2s;
}

#page {
	background-color:#fff;
	color:#333;
}

h1 {
text-align:center;
font-size:150%;
font-weight:bold;
margin-bottom:30px;
margin-top:20px;
}
	
h4 {
	margin-left:3%;
	font-size:102%;
}

p, table, li , #form-vie-du-choeur textarea {
	font-size:100%;
	color:#088;
}

p, table {
	text-align:justify;
	padding: 0 6%;
}

a {
	color : #399;
	font-weight:bold;
	text-decoration:none;
}

li a {
	font-weight:normal;
}

a:hover {
text-decoration:underline;
}



/* pour la page vie-du-choeur.php */

#form-vie-du-choeur { /* nécessaire car on a besoin d'un positionnement de block : le textarea est inline et ne peut être forcé */

  position:absolute;
  left:0px;
  right:0px;
  top: 70px;
  bottom: 80px;
}

#form-vie-du-choeur textarea {
  border: 0px;
  width:100%;height:100%;
  padding : 10px 6%;
  text-align:justify;
  background-color:#fff;
  
}


/* pour les pages de dates de concert : saison xxx.html */
.date {
			margin-left : 8%;
			margin-right:2%;
			text-align:left;
			list-style-type:initial;
			margin-bottom:10px;
}



@media only screen and ( max-width: 970px ) /* 960 */ {
	#mainbody {
	background: black;
	}
	
	#page {
		margin: 0px auto;
		background-color:#000;
		color:#ddd;
	}
}

@media only screen and ( max-width: 959px ) /* 960 car on ne peut pas dépasser cette taille*/ {

	#vie-du-choeur, #form-vie-du-choeur textarea {
		margin: 0px auto;
		background-color:#000;
		color:#ddd;
	}
}