body  {
	width: 100%;
	margin: 0;
	padding: 0;
}

div#colgauche {
	float: left;
	width: 150px;
	margin: 0;
	padding: 280px 0 0 0;
}

div#colgauche h1 {
	margin: 0;
	padding: 0;
	text-align: center;
	position: absolute;
	top: 10px;
}

div#contenu  {
	margin-left: 160px;
}

div#contenu  div#haut {
	height : 128px;
	margin: 10px 0 5px 0;
	text-align: center;
}

div#contenu  div#haut p {
	margin: 0;
}

div#contenu ul#menu {
	padding: 0;
	margin: 0;
	height: 42px;
}

div#contenu ul#menu li {
	float: left;
	list-style-type: none;
	padding: 0;
}

div#contenu div#content {
	background: url('images/fond.jpg');
	margin: 0 0 10px 1px;
}

div#contenu div#content div#txt {
	padding: 10px;
	margin-left: 50px;
	border-left: 2px solid #EFA4A4;
}

div#contenu div#content h2 {
	margin: 22px 0 23px 0;
	padding: 0;
	height: 23px;
	font-family: "Comic sans MS",arial, verdana, helvetica;
	font-size: 22px;
}

div#contenu div#content h3 {
	margin: 22px 0 23px 0;
	text-align: center;
	padding: 0;
	height: 23px;
}

div#contenu div#content h4 {
	margin: 22px 0 23px 0;
	padding: 0;
	height: 23px;
}

div#contenu div#content img {
	border: 7px solid white;
}

div#contenu div#content table thead tr td {
	background: #fff;
}

div#contenu div#content table tr td {
	padding: 10px;
}

div#contenu div#content table tbody tr td {
	border-bottom: 1px solid #000;
}

div#contenu div#content table {
	border-collapse: collapse;
}

div#contenu div#content p, div#contenu div#content ul, div#contenu div#content ol, div#contenu div#content table {
	margin: 0 0 23px 0;
	font: normal 13px "Trebuchet MS", tahoma, Arial;
	color: #000;
	line-height: 23px;
}

ul.menugauche {
	list-style-type: none;
	padding: 0;
	margin: 10px 0 10px 10px;
}

ul.menugauche li {
	padding: 5px;
	margin: 2px 0 2px 0;
	background: #2D9662;
}

ul.menugauche li a {
	color: #000000;
	text-decoration: none;
}

ul.menugauche li:hover {
	background: #DBEFE6;
}

.floatright { display: block; float: right; font: normal 13px Verdana, Arial, Tahoma; margin-left: 10px; }
.floatleft { display: block; float: left; font: normal 13px Verdana, Arial, Tahoma; margin-right: 10px; }
.aligncenter { display: block; text-align: center; }


a img {
	border: 0;
}

ul.menugauche li.materiel { background : #399c39;padding: 5px;	margin: 2px 0 2px 0;}
ul.menugauche li.materiel:hover{ background : #c4ffc4;}
ul.menugauche li.vie { background : #ffff00;padding: 5px;	margin: 2px 0 2px 0;}
ul.menugauche li.vie:hover{ background : #ffffad;}
.clear{clear:both;}

table
{
position: center;
width:100%;
}

/* CSS Du tableau de activité.php */
.ligneV
{
	display: block;
	border-top: 3px dashed #2392be;
}
.cel1
{
	width: 10%;
	display: inline-block;
	margin: 0px;
	padding: 3px;
	padding-left: 5px;
	text-align: left;
}
.cel2
{
	width: 30%;
	display: inline-block;
	margin: 0px;
	padding: 3px;
	text-align: left;
	font-family: 'Airstream';
	font-size: 1.4em;
}
.cel3
{
	width: 40%;
	display: inline-block;
	margin: 0px;
	padding: 3px;
	text-align: left;
}
.cel4
{
	width: 15%;
	display: inline-block;
	margin: 0px;
	padding: 3px;
	text-align: right;
}

.descriptionAct
{
	max-height: 0px;
	/*opacity: 0;
	display: none;*/
	background-color: #89cae5;
	display: block;
	overflow: hidden;
	-moz-transition-property: max-height;
	-moz-transition-duration: 3s;
	-o-transition-property: max-height;
	-o-transition-duration: 3s;
	-webkit-transition-property: max-height;
	-webkit-transition-duration: 3s;
}
.celImage
{
	float: left;
	background-color: #89cae5;
	border-radius: 0px 5px 5px 0px;
	margin: 0px;
	padding: 10px;
	max-width: 20%;
	text-align: center;
	margin-right: 6px;
}
div#contenu div#content .celImage img
{
	border: none;
	max-width: 100%;
	max-height: 200px;
}
.celDesc
{
	height: 100%;
	padding-right: 5px;
	padding-bottom: 10px;
	vertical-align: top;
	max-width: 80%;
	word-wrap : break-word;
}
div#contenu div#content .celImage .compteurPhoto p
{
	position: relative;
	color: white;
	top: 5px;
	font-size: 1.01em;
	text-align: center;
	border-radius: 0px 0px 10px 10px;
	background-color: #06b3fc;
	min-width: 100%;
	display: inline-block;
	margin: 0;
}

#overlay {
  position: fixed;
  display: none;
  top: 0; left: 0;
  width: 100%; height: 100%;
  text-align: center;
  color: white;
  font-size: 1.5em;

  /* Ci-dessous, j'applique un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */
  background-color: rgba(0,0,0,0.6);
  z-index: 21;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
div#contenu div#content #overlay img 
{
	position: relative;
	border: none;
	max-height: 80%;
	max-width: 90%;
}
#flecheGauche
{
	position: fixed;
	display: none;
	left: 0;
	width: 10.3%;
	text-align: center;
	z-index: 22;
}
#flecheDroite
{
	position: fixed;
	display: none;
	right: 20px;
	width: 10%;
	text-align: center;
	z-index: 22;
}
div#contenu div#content #flecheGauche p
{
	margin: 0;
	border: none;
}
div#contenu div#content #flecheDroite p
{
	border: none;
	margin: 0;
}
div#contenu div#content #flecheDroite img
{
	border: none;
}
div#contenu div#content #flecheGauche img
{
	border: none;
}
#compteur
{
	position: fixed;
	display: none;
	font-size: 1.5em;
	color: white;
	z-index: 22;
	font-family:'ActionJackson';
	text-shadow: black 0 0 10px;
}


/* Style de la page ajoutActivite.php */
.buAjout
{
	text-decoration: none;
	display: inline-block;
	border: 1px solid #0075fc;
	border-radius: 6px;
	height: 20px;
	width: 20px;
	background-color: #dce2e8;
	color: #2d7bd3;
}
.buEnlev
{
	text-decoration: none;
	display: inline-block;
	border: 1px solid #fc0000;
	border-radius: 6px;
	height: 20px;
	width: 20px;
	background-color: #e8dcdc;
	color: #d32d2d;
}

/* Polices */
@font-face {
    font-family: 'ActionJackson';
    src: url('actionj-webfont.eot');
    src: local('?'), url('polices/actionj-webfont.woff') format('woff'), url('polices/actionj-webfont.ttf') format('truetype'), url('polices/actionj-webfont.svg#ActionJacksonRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Airstream';
    src: url('polices/airstrea.eot');
    src: url('polices/airstrea.eot?#iefix') format('embedded-opentype'),
         url('polices/airstrea.woff') format('woff'),
         url('polices/airstrea.ttf') format('truetype'),
         url('polices/airstrea.svg#airstrea') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Css de la page index.php */
#ligneIndex0
{
	display: block;
	padding-left: 10px;
	padding-bottom: 5px;
	border-bottom: 0;
	background-color: rgba(256, 0, 0, 0.2);
}
#ligneIndex1
{
	display: block;
	padding-right: 10px;
	padding-bottom: 5px;
	background-color: rgba(256, 0, 0, 0.2);
	border-bottom: 0;
	text-align: right;
}
div#contenu div#content #ligneIndex0 img, div#contenu div#content #ligneIndex1 img
{
	border: none;
}
#ligneIndex0 .image img
{
	margin-left: 5px;
	max-width: 50%;
}
#ligneIndex1 .image img
{
	margin-right: 5px;
	max-width: 50%;
}

.basIndex
{   position:relative;
	display: block;
	bottom: 0;
	width: 100%;
	border-radius: 0 0 10px 10px;
	background-color: #fb5757;
	font-size: 20px;
	height: 25px;
	color: white;
	margin: 0;
	z-index:3;
}
.ligneGauche
{
	text-align: left;
	padding-left: 5px;
	width: 100%;
}
.ligneDroite
{   position:absolute;
	text-align: right;
	width: 100%;
	right:2px;
	z-index:-1;
}

.titre
{
	font-size: 40px;
	font-family: 'Airstream';
	display: block;
}
.date
{
	display: inline-block;
	border-left: 2px solid white;
	padding-left: 5px;
	padding-right: 5px;
}
.classes
{
	display: inline-block;
	padding-right: 5px;
}
.description
{
	display: block;
}
.lienC a
{
	position: absolute;
	padding-left: 5px;
	text-decoration: none;
	color: white;
}
.lienC a:hover
{
	color: yellow;
}


/* Pour la page ajoutActivite.php */
#formulaire input, #formulaire textarea
{
	border-radius: 10px;
}
#formulaire #titre
{
	width: 300px;
}

/* Pour la page updateActivite.php */
img[id^='upImg']
{
	max-height: 200px;
	max-width: 200px;
}
#contentImg
{
	display: inline-block;
	position: relative;
	overflow: hidden;
	max-height: 200px;
	max-width: 200px;
}
#contentImg #enlever
{
	display: inline-block;
	position: absolute;
	right: 5px;
	padding: 2px;
	color: white;
	background-color: rgba(0,0,0,0.3);
	top: -100px;
	font-size: 1.3em;
	cursor: pointer;
	-moz-transition-property: top;
	-moz-transition-duration: 1s;
	-o-transition-property: top;
	-o-transition-duration: 1s;
	-webkit-transition-property: top;
	-webkit-transition-duration: 1s;
}
#contentImg:hover #enlever
{
	top: 0px;
}
.editeur
{
	text-align: right;
	display: inline-block;
	font-size: 0.9em;
	color: grey;
	width: 100%;
}