body {font-family:calibri; padding:0; margin:0; background:#CCC; background-image: linear-gradient(to bottom right, #FFF, #669);}

.entete {padding:0; text-align:left; width:98%; margin:1vh;}
.entete img {width:48px; height:48px; margin-right:2px; }

div.ident {position:fixed; top:1%; right:1%; color:#FFF; font-size:12pt; text-align:center; padding:0.5% 1%; width:21%; background:#b30000; border-radius:0 20px; }
div.ident input { width:40%; border:none; text-align:center;}
div.ident input:focus { box-shadow:0 0 2px 5px #FF0 inset; }


#Buser{position:relative;}
#service_perso {position:absolute; bottom:0; width:91%; text-align:center;}
#service_perso img {height:36px; margin:0 1px;}
	
.detail {height:18px;}
	
.bloc {color:#FFF; height:24vh; margin:1vh 1%; padding:1vh 1%; text-align:center; background:#369; border-radius:0 20px; float:left; box-shadow:0 0 5px 1px inset;}
.w25 {width:21%;}
.w50 {width:46%;}
.bloc a {color:#FFF; display:block; margin:0; text-decoration:none; cursor:pointer; transition:background 0.3s, color 0.3s; border-radius:4px; padding:0 3px;}
.bloc a:hover {background:#fff; color:#000; }
Bagenda a {display:inline;}

#service_perso a {display:inline;}

#actus div ul {text-align:left;}
#actus div ul {text-align:left;}	
	
.flip {
	transform-style: preserve-3d;
	transition: transform 0.3s;
	width:100%; height:100%;
}

div.flip div {
	margin: 0;
	display: block;
	position: absolute;
	backface-visibility: hidden;
}
	
div.flip div.front {
	background: #369; top:0;
	width: 100%; height:95%;
	overflow-y:auto;
}
div.flip div.back {
	background: #3973ac;top:0;
	width: 100%; height:95%; border-radius:0 20px;
	transform: rotateY( 180deg );
	overflow-y:auto;
}
	
.plus {
	position: relative;	top:-17px;
}
.moins {
	position: relative;	top:-17px; display:none;
}

	
/*div.flip:hover {transform: rotateY( 180deg );}*/

#Brech form {width:100%; text-align:center; }	
#Brech table { width:100%; border-collapse: collapse; }
#Brech td {padding:0; vertical-align:top; }
#Brech td:nth-child(1) {text-align:right; }
#Brech td:nth-child(2) {text-align:left; }
#Brech input {border:none; padding:0 5px; text-align:center;}
#Brech input:focus {box-shadow:0 0 2px 5px #FF0 inset; }
#Brech .B_submit {border:none; background:none; }
#Brech input, #Brech img {height:24px;}
#Brech {background:#33C;}

.Bfermer {border:none; width:96%; margin:1%; padding:1%; border-radius:5px; background:#116d91; color:#FFF;}

.back {text-align:left;}

#Bactus, #Bactus .front {background:#396;}
#Bactus .back {background:#40bf80;} /* 2 crants plus clair */

#Buser {background:#b30000;}

#Boutils, #Boutils .front {background:#963;}
#Boutils .back {background:#bf8040;} /* 2 crants plus clair */

#Bservice {background:#C06;}

#Bbase {background:#369;}

#Bpart {background:#F60; overflow:auto; text-align:justify;}
#Bpart a {margin:1px 5px; float:left;}
#Bpart a:first-letter {color:#043957;}

#Bagenda, #Bagenda .front {background:#90C;}
#Bagenda .back {background:#bf00ff;} /* 2 crants plus clair */
#Bagenda ul {text-align:left;}

#Bsond {background:#066;}
#Boff {background:#7bafdd;}

#Boff td {text-align:center;}

#nav {position:fixed; bottom:0; right:0; font-size:9pt; color:#555;}

.surlbloc {box-shadow:0 0 1px 5px #F13;}

#notif {position:fixed; bottom:30px; right:-300px; border:solid 1px #555; padding:5px 20px 20px 20px;}


#cache {
	position:fixed; top:0; left:0; width:100%; height:100%;
	background:rgba(40,40,40,0.7);
	z-index:100;
	display:none;
}

#clic_plus, #clic_com {
	position:fixed; top:-80%; left:30%; width:40%;
	border:solid 2px #888; background:#EEE; padding:1%;
	text-align:center; color:#555; 
	z-index:200;
}
#clic_plus a {
	font-size:14pt;color:#039; text-decoration:none; 
}
#clic_plus a:hover {
	text-decoration:underline;
}
#clic_com {text-align:left !important;}

.auj {color:green; font-weight:bold;}

#alerte {
	position:fixed; top:-800px; left:35%;
	background:#999; color:#FFF; font-size:14pt;
	width:30%; padding:5px 5px 5px 40px;
	box-shadow:0 0 3px 2px #FFF;
	z-index:1000;
}
#alerte img {height:25px; background:#FFF;}
#fermer_alerte {position:absolute; bottom:2px; right:2px;}

.new {
	animation-name: new;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes new {
	0%   {background:none; color:#000;}
	50%  {background:yellow; color:#000;}
	100% {background:none; color:#000;}
}


.pulse {
	animation: pulse 1s infinite;	
}
/*
.pulse:hover {
  animation: none;
}*/
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(50,50,50, 0.4);}
  70% { box-shadow: 0 0 0 12px rgba(50,50,50, 0.05);}
  100% { box-shadow: 0 0 0 7px rgba(50,50,50, 0);}
}



@media screen and (max-height:800px) {
	#Bbase {max-height:352px !important;}
	.plus, .moins { top:-22px; }
}


@media screen and (max-width:1200px) {
	.entete img {width:30px; height:30px;}
	.bloc { min-height:150px; width:96%; }
	#Bbase {max-height:200px !important;}

	#nav {display:none; /*position:absolute !important; bottom:0; left:0; font-size:20pt; height:50px;*/}
	div.ident {font-size:11pt; border-radius:0 5px;}

	
}