/* Elements standards */
body, html { height: 100%; width: 100%; }
body { margin: 0px; padding: 0px; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 300; background: #111; color: #fff; }
form { padding: 0px; margin: 0px; }
div { position: relative; padding: 0px; margin: 0px; }
p, td,  form { }
input, textarea, select { font-family: "Open Sans", Arial, Helvetica, sans-serif; }
input[type=submit] { padding: 0px; margin: 0px; }
input[type=checkbox] { padding: 0px; margin: 0px; vertical-align: middle; margin-top: -2px; }
a { text-decoration: none; color: #999999; }
a:hover { color: #08d; }
a:active { color: #08d; }
a.actif { color: #08d; font-weight: bold; }
img { border: none; vertical-align: top; }
img.icone { height: 16px; width: 16px; }

h1 { font-size: 24px; font-weight: 800; margin: 0px; padding: 0px; text-transform: uppercase; text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000; }
h2 { font-size: 20px; font-weight: 800; margin: 0px; padding: 0px; text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000; }
h3 { font-size: 18px; font-weight: 800; margin: 0px; padding: 0px; text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000; }

/* Classes de style visuel */
div.hr { height: 1px; overflow: hidden; background-color: #999999; margin-top: 4px; margin-bottom: 3px; }
div.sp { height: 1px; overflow: hidden; margin-top: 4px; margin-bottom: 3px; }
.erreur { background: url(../img/error.png) no-repeat left; padding-left: 20px; color: #c33; font-size: 11px; font-style: italic; margin: 4px 0px; }
.petit { font-style: italic; font-size: 9px; }
.user { font-weight: bold; color: #058; cursor: pointer; }
.info { background: url(../img/information.png) no-repeat left; padding-left: 20px; color: #69c; font-size: 11px; font-style: italic; margin: 4px 0px; }
.code { padding: 5px; margin: 3px; border: 1px solid #ccc; border-radius: 5px; font-family: "Courier New", Courier, monospace; }
.quote { padding: 5px; margin: 3px; border: 1px solid #ccc; border-radius: 5px; }
.clear { clear: both; }
.alignc { text-align: center; } .aligng { text-align: left; } .alignd { text-align: right; } .alignj { text-align: justify; }
.bloctxt { display: inline-block; max-width: 800px; padding: 20px; margin: 12px; border-radius: 25px; box-shadow: 0 0 4px rgba(0,0,0,0.3);
	background: #000; background: linear-gradient(to bottom right, rgba(32,32,32,0.7), rgba(32,32,32,0.4)); }
.padt50 { padding-top: 50px; } 

/* Bandeau titre */
#titre { position: fixed; top: 0; left: 0; width: 100%; height: auto; background: #000; background-color: rgba(0,0,0,0.7); color: #fff; z-index: 4; }
#titre a { font-size: 14px; color: #fff; display: inline-block; padding: 8px 12px; font-weight: bold; }
#titre a.actif { color: #000; background: #fff; }
#titre a:hover { color: #000; background: #ddd; }
#titre .padding { margin-left: 48px; padding: 7px 4px; }
#logo { width: 32px; height: 32px; position: absolute; top: 3px; left: 6px; z-index: 5; }

/* Eléments de mise en page */
#content { z-index: 1; height: 100%; width: 100%; }
#photos { position: fixed; height: 100%; width: 100%; text-align: center; line-height: 100%; vertical-align: middle; overflow: hidden; }
#photos > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; }
#photos > div.sliding { animation: effect 30s linear 0s infinite alternate;  }
#photos > #photo { z-index: 2; transition: margin 0.2s ease-in-out; }
#photos > #trans { z-index: 1; opacity: 0; }
#navig { position: fixed; top: 0; left: 10px; width: 100px; height: 100%; background: #000; opacity: 0.7; transition: all 0.2s ease-in-out; overflow: hidden; z-index: 3;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
#navig:hover { opacity: 1; }
#navig #cntMini { padding: 10px; }

/* Miniatures */
.lnkMini { display: inline-block; height: 80px; width: 80px; background: #000; color: #333; margin: 5px 0; 
	text-align: center; overflow: hidden; transition: all 0.2s ease-in-out;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.lnkMini:first-child { margin-top: 36px; }
.lnkMini.active { box-shadow: 0 0 6px #fff; }
.lnkMini > img { height: 100%; top: 0; transition: transform 0.2s ease-in-out; } 
.lnkMini:hover > img { transform: scale(1.2, 1.2); } 
.lnkMini > img.ibuf { height: 32px; width: 32px; margin-top: 24px; transition: none; } 

/* Outils */
#btnDlzip { position: fixed; z-index: 5; bottom: 3px; left: 100%; margin-left: -35px; }
#cntTools { position: fixed; top: 0; left: 100%; margin-top: 2px; margin-left: -242px; z-index: 4; }
#cntTools img { cursor: pointer; height: 32px; width: 32px; opacity: 0.7; }
#cntTools img:hover {  opacity: 1; }
#cntTools > * { margin-left: 12px; }
#cntTools > *:first-child { margin-left: 0; }
#cntTools img.active { animation: blink 1s linear 0s infinite alternate; }

/* Légende */
#cntLegende { position: fixed; bottom: 0px; left: 0px; width: 100%; height: auto; z-index: 4; text-align: center; padding: 3px 0; 
	background: #000; background-color: rgba(0,0,0,0.7); color: #fff; }
	
/* Discussion */
#cntDiscuss { position: fixed; right: 0px; top: 37px; bottom: 29px; width: 0px; z-index: 99; padding: 0 6px; opacity: 0; max-width: 100%; box-sizing: border-box;
	background: #000; background-color: rgba(0,0,0,0.7); color: #fff; transition: all 0.2s ease-in-out; overflow-y: auto; }
	
/* Admin */
.grpGal { /* margin-left: 20px; */ }

/* ------------------------------------------------ */
/* Format Smartphones/tablettes < 640px						*/
@media handheld, only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
	body { font-size: 14px; }

	.bloctxt { max-width: 440px; padding: 12px; margin: 8px; border-radius: 20px; }
	
	#logo { display: none; }
	#titre .padding { margin-left: 5px; padding: 6px 2px; }

	#navig { left: 6px; width: 52px; }
	#navig #cntMini { padding: 6px; }
	.lnkMini { height: 40px; width: 40px; margin: 3px 0; }
	.lnkMini:first-child { margin-top: 36px; }
	.lnkMini > img.ibuf { height: 32px; width: 32px; margin-top: 4px; transition: none; } 
	
	#cntTools { margin-left: -196px; }
	#cntTools img { height: 26px; width: 26px; }
	#cntTools > * { margin-left: 10px; }

	#cntDiscuss { top: 32px; bottom: 26px; }
}

/* ------------------------------------------------ */
/* Format Smartphones < 460px						*/
@media handheld, only screen and (max-width: 460px), only screen and (max-device-width: 460px) {
	body { font-size: 13px; }
	h1 { font-size: 20px; }
	h2 { font-size: 18px; }
	h3 { font-size: 16px; }

	.bloctxt { max-width: 300px; padding: 6px; margin: 4px; border-radius: 15px; }

	#cntTools { margin-left: -172px; margin-top: 3px; }
	#cntTools img { height: 24px; width: 24px; }
	#cntTools > * { margin-left: 6px; }

	#cntDiscuss { top: 30px; bottom: 24px; }
}

/* ------------------------------------------------ */
/* Format Smartphones < 320px						*/
@media handheld, only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
	#navig { left: 0; width: 48px; }
	#navig #cntMini { padding: 4px; }
}

/* ------------------------------------------------ */
/* Format portrait repositionnement navig			
@media handheld, only screen and (orientation: portrait) { 
	#navig { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(-90deg);
		transform-origin: 0% 0%; transform-style: flat; top: 100%; }
	.lnkMini:first-child { margin-top: 0px; }
} */

/* Clés d'animation */
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; } }
/* @keyframes effect { 
	0% { transform: scale(1) rotateZ(0deg); } 
	17% { transform: scale(1.1) rotateZ(1deg); } 
	33% { transform: scale(1) rotateZ(2deg); } 
	50% { transform: scale(1.1) rotateZ(1deg); } 
	66% { transform: scale(1) rotateZ(0deg); } 
	83% { transform: scale(1.1) rotateZ(-1deg); } 
	100% { transform: scale(1) rotateZ(-2deg); } 
} */
@keyframes effect { 0% { transform: scale(1) rotateZ(0deg); } 100% { transform: scale(1.1) rotateZ(0deg); } }