/**
 * Classes générales
 */
/* Couleurs */
.gradient-green {
	background-color:#065a06;
  background-image: -webkit-linear-gradient(top, #72b172 0%, #065a06 100%);
  background-image:    -moz-linear-gradient(top, #72b172 0%, #065a06 100%);
  background-image:     -ms-linear-gradient(top, #72b172 0%, #065a06 100%);
  background-image:      -o-linear-gradient(top, #72b172 0%, #065a06 100%);
  background-image:         linear-gradient(top, #72b172 0%, #065a06 100%);
  color:white;
}
.gradient-blue {
	background-color:#2b5e82;
  background-image: -webkit-linear-gradient(top, #b1d1e7 0%, #2b5e82 100%);
  background-image:    -moz-linear-gradient(top, #b1d1e7 0%, #2b5e82 100%);
  background-image:     -ms-linear-gradient(top, #b1d1e7 0%, #2b5e82 100%);
  background-image:      -o-linear-gradient(top, #b1d1e7 0%, #2b5e82 100%);
  background-image:         linear-gradient(top, #b1d1e7 0%, #2b5e82 100%);
  color:white;
}
.gradient-red {
	background-color:#ff0000;
  background-image: -webkit-linear-gradient(top, #fbb6b6 0%, #ff0000 100%);
  background-image:    -moz-linear-gradient(top, #fbb6b6 0%, #ff0000 100%);
  background-image:     -ms-linear-gradient(top, #fbb6b6 0%, #ff0000 100%);
  background-image:      -o-linear-gradient(top, #fbb6b6 0%, #ff0000 100%);
  background-image:         linear-gradient(top, #fbb6b6 0%, #ff0000 100%);
  color:white;
}

/* Mise en forme */
.invisible {
	opacity:0;
}
.highlight {
	font-weight:bold;
}
.center {
	text-align:center;
}
.link {
	cursor:pointer;
	color:blue;
	font-weight:bold;
}
a {
	font-weight:bold;
}

/**
 * Classes sur éléments HTML
 */
html {
	background-image:url('background.jpg');
	background-size:100%;
	background-color:#6f8d1b;
	background-repeat:no-repeat;
	font-family:arial;
	font-size:14px;
	overflow-y:scroll;
}
body {
	margin:0.5%;
}
h1 {
	font-size:1em;
	border-top-width:0px;
  border-left-width:0px;
  border-right-width:0px;
  border-bottom-width:2px;
  border-style:solid;
}
h2 {
	font-size:1em;
	font-weight:normal;
	text-decoration:underline;
}
p {
	text-align:justify;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:1.5em;
	padding:0px;
}
button {
	border-radius:0.5em;
	font-weight:bold;
	cursor:pointer;
}

/**
 * Classes pour les contenus spécifiques
 */
div.menuItem img {
	width:100%;	
}
#content {
	background-color:white;
	padding:1.5%;
	border-radius:5px;
	box-shadow:5px 5px 5px #111111;
	-webkit-transition: opacity 0.75s ease-in-out;
  -moz-transition: opacity 0.75s ease-in-out;
  -o-transition: opacity 0.75s ease-in-out;
  -ms-transition: opacity 0.75s ease-in-out;
  transition: opacity 0.75s ease-in-out;
}
div.connect {
	cursor:pointer;
	font-weight:bold;
	font-size:2em;
	text-align:center;
	text-shadow:1px 1px 1px #111111;
	border-radius:15px;
	margin-top:0px;
	margin-bottom:10px;
	padding-left:0.3em;
}
div.highlight {
	margin:2.5%;
	padding:1%;
  font-weight:bold;
  border-radius:10px;
  box-shadow:2px 2px 2px #111111;
	text-shadow:1px 1px 1px #111111;
}
#advertisement img {
	width:80%;
	border-style:groove;
	border-width:6px;
	border-color:#98bf21;
}
#advertisement div {
	display:inline-block;
	width:80%
}
#footer {
	font-size:0.8em;
	text-align:center;
	margin-top:1em;
	width:100%;
	border-top:1px;
	border-left:0px;
	border-right:0px;
	border-bottom:0px;
	border-style:solid;
}

/**
 * Classes adpatées à la largeur de l'écran
 */
/* Petits écrans */ 
@media (max-width: 720px) {
	#menu {
	  margin-top:40%;
	  display:block;
	  text-align:center;
	}
	div.menuItem {
		cursor:pointer;
		display:inline-block;
		width:23%;
		margin-left:0.5%;
		margin-right:0.5%;
		border-radius:5px;
		margin-bottom:10px;
		box-shadow:5px 5px 5px #111111;
	}
	div.content {
		width:96%;
		vertical-align:top;
		margin-left:1.5%;
		margin-right:1.5%;
	}
	#advertisement {
	  text-align:center;
		padding:0.5%;
		width:96%;
		margin-top:10px;
		margin-right:1.5%;
		margin-left:1.5%;
	}
}
/* Grands écrans */
@media (min-width: 721px) {
	#menu {
		margin-top:18%;
		width:15%;
		display:inline-block;
		text-align:left;
		vertical-align:top;
	}
	div.menuItem {
		cursor:pointer;
		display:inline-block;
		width:90%;
		border-radius:5px;
		margin-bottom:10px;
		box-shadow:5px 5px 5px #111111;
	}
	div.content {
		margin-top:18%;
		width:53%;
		display:inline-block;
		vertical-align:top;
	}
	#advertisement {
	  text-align:center;
		display:inline-block;
		margin-top:40%;
		width:29%;
		margin-left:1%;
	}
}






/*

.gradient-green-light {
	background-color:#d8eac7;
  background-image: -webkit-linear-gradient(top, #d8eac7 0%, #ffffff 100%);
  background-image:    -moz-linear-gradient(top, #d8eac7 0%, #ffffff 100%);
  background-image:     -ms-linear-gradient(top, #d8eac7 0%, #ffffff 100%);
  background-image:      -o-linear-gradient(top, #d8eac7 0%, #ffffff 100%);
  background-image:         linear-gradient(top, #d8eac7 0%, #ffffff 100%);
  color:black;
}

img.highlight {
  border-top-width:1px;
  border-left-width:1px;
  border-right-width:1px;
  border-bottom-width:1px;
  border-style:solid;
  padding:0.5%;
}

*/