a, button { outline: none !important; text-decoration: none; color:inherit; -webkit-appearance: none !important; }
input[type='submit'] { outline: none !important; text-decoration: none; color:inherit; -webkit-appearance: none !important; }
img { border:none; outline: none; }
html { font-size: 100%; } 
body { background: #000 url("img/waldo.jpg") no-repeat fixed center/cover; padding: 0; margin: 0; font-family: 'Open sans', sans-serif; font-size: 1.1rem; text-rendering: optimizeLegibility; }
#container { overflow: hidden; }
#iewarning { width: 100%; text-align: center; background-color: red; padding: 8px; }
#authform { width: 215px; margin: 0 auto; }
#authform input { width: inherit; box-sizing: border-box; }
#loginfailed { margin-bottom: 15px; color: red; }
.fas, .far, .fab { font-size: 1.5rem; letter-spacing: 0.6rem; vertical-align: middle; }

/*curtain style */
.curtain {
	position: relative; 
	width: 26%; 
	min-height: 100vh;
	display: inline-block;
	vertical-align: top; text-align: center;
    padding: 0 10px;
    margin-left: -1px;
    margin-bottom: -9999px; /*css trick pour avoir des colonnes de longueurs égales ... 2 nuits blanches pour trouver ça ^^ */
    padding-bottom: 9999px;
    margin-left: -7px;
    border-top-right-radius: 25px;
    box-shadow: 10px;
    box-shadow: 0 0 13px #222;
    background: #f9f9f9;
    color: #111;
    padding-top: 22px;
}

.white  { z-index: 10; margin-top: 48px; transition: width 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 500ms cubic-bezier(.53,1.11,.53,1.11); }
.grey   { z-index: 9; margin-top: 67px; transition: width 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 560ms cubic-bezier(.53,1.11,.53,1.11); }
.purple { z-index: 8; margin-top: 86px; transition: width 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 600ms cubic-bezier(.53,1.11,.53,1.11); }

.white.folded { transform: rotate(-3deg) }
.grey.folded { transform: rotate(-5deg)  }
.purple.folded { transform: rotate(-6deg) }

.curtain:hover { background: #fff; }


.curtain:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -65px;
	width: 65px;
	height: 100%;
	z-index: 9;
	background: inherit;
	border-top-left-radius: 25px;
}

.reduced { width: 3%; }
.expanded.white, .expanded.grey, .expanded.purple { width: 72%; background: #fff; }

.border { width: 7px; height: 100%; position: absolute; top: 0; right: -7px; z-index: 1; }

.logo { 
	position: fixed;
	top:30px; right:30px;
	width: 135px; 
	transform: rotate(10deg);
}
.logo1 { z-index: 10; }
.logo2 { z-index: 11; }

.card-decoration {
	position: absolute;
	right: 22px;
	top: 25px;
	width: 35px;
}

/* curtain header style */
.header { height: 210px; font: 0/0 a; margin: 30px auto; transition: all 400ms linear; }
.header:before { content: ' '; display: inline-block; vertical-align: bottom; height: 100%; }
.expanded .header { height: 80px; margin: 15px auto; }
.header img { width: 18%; max-width: 74px; min-width: 35px; }

.title { 
	font-size: 2.5rem; 
	transform:none; 
	margin: 30px 0; 
	transition: transform 200ms linear;
	font-family: 'Indie Flower', sans-serif;
}
.reduced .title { transform:rotate(90deg); white-space: nowrap; margin-top: 130px; }


/* main content style */
.main-content { text-align: left; padding: 0 20px; overflow: hidden; }
.reduced .main-content { display: none; }

.col-gauche { float: left; position: relative; overflow: hidden; margin-right: 10px; width: 100%; }
.expanded .col-gauche { width: 240px; }
.col-gauche ol { margin: 0; white-space: nowrap; }
.col-gauche li { padding: 4px 0; cursor: pointer; transition: color .25s linear; }
.col-gauche li:hover { font-weight: bold; }
.expanded .col-gauche li.selected { color: #e85938; font-weight: bold;  transition: color .25s linear; }
.col-gauche li.deactivated { 
    color: #ccc;
    cursor: default; 
    filter: blur(2px);
}
.col-gauche li.deactivated:hover { font-weight: normal; }
/*#enigmes-list li:nth-of-type(21) { list-style-type: none; margin-top: 20px; }*/

/* specifique pour énigmes de Patrick Mulard */
#enigmes-list li:nth-of-type(21) { list-style-type: none; margin-bottom: 20px; }
#quest-list li:nth-of-type(8) { margin-bottom: 20px; }

.col-droite {
	position: relative; margin: 0 0 0 250px; display: none;
	background-color: #f8f8f8; border-radius: 6px 6px 0 0;
}
.expanded .col-droite { display: block; overflow: hidden; }

.enigme-header, .quest-header { background-color: #eee; padding: 10px 15px 10px 0; border-radius: 6px 6px 0 0; border-bottom: 1px solid #999; }
.headerbutton { margin-left: 15px; margin-top: 3px; }
.enigme-header form { display: inline; overflow: auto; }
.enigme-header input { margin-left: 15px; }
.enigme-header input[type='text'] { width: 35%; max-width: 220px; position: absolute; z-index: 2; right: 117px; }
.enigme-header input[type='submit'] { position: absolute; right: 10px; top: 9px; }

.enigme-response { display: none; background-color: #e85938; padding: 8px 15px; }

.enigme-content, .john-content, .quest-content { position: relative; min-height: 360px; }
.enigme-content img { width: 100%; }
.quest-content embed { width: 100%; height: 500px; height: calc(100vh - 180px - 2.5rem); }
.enigme-content audio { position: absolute; top: 18%; left: 16%; width: 62%; }
.enigme-content iframe { position: absolute; top: 21%; left: 12%; width: 87%; height: 35%; }
.panel-enigme { border-right: 1px solid #eee; }
.emptytext { padding: 20px; opacity: 0.5; text-align: center; }

/* discussion panel style */
.enigme-discussion { 
	position: absolute; left: -400px; top: 0; width: 400px; height: 100%;
	background-color: #eee; background: rgba(238, 238, 238, 0.8);
	overflow-y: scroll; z-index: 10; transition: 1s;
}
.slided { transition: 1s; left: 0; }
.post {
	position: relative;	padding: 10px; margin: 6px 20px; border-radius: 3px; 
	box-shadow: 0 2px 0 #dedbe7; background-color: white; color: #444551;
}
.post-header input[type='text'] { display: block; width: 193px; margin-bottom: 8px; margin-right: 8px; }
.post-header input[type='submit'] { display: block; position: absolute; top: 9px; right: 27px; }
.post-header textarea { display: block; width: 301px; resize: none; }

.post .postdelete { 
	position: absolute; top:5px; right: 5px; background-image: url('img/delete.png'); 
	width: 12px; height: 12px; display: none; cursor: pointer;
}
.post:hover .postdelete { display: block; }
.post .posttitle { font-weight: bold; line-height: 30px; color: #444551; }
.post .postdate { float: right; font-size: 10px; font-weight: normal; color: #ccc; line-height: 30px; }
.examplepost { background-color:#fafafa;color:#999; }
.examplepost span { color:#999 !important; }

.loading { width: 100%; text-align: center; }
.loading img { width: auto; }

.enigme-button { display: inline-block; margin-left: 15px; position: relative; cursor: pointer; }
.enigme-button:hover span { display: inline; }
.enigme-button span {
	display: none;
	position: absolute; top: 35px; left: 20px; width: 200px; padding: 18px; z-index: 11;
    background: #eee; text-align: center; font-size: 1rem; color: #333;
    box-shadow: 0 0 15px rgba(0,0,0,0.3); border-radius: 0 10px 10px 10px; border: 1px solid #ccc;
}

.discussButton #comCount { 
	display: inline; top: -4px; left: 17px; font: 13px "open sans"; background-color: #df5537; color: #fff; border-radius: 30px;
    width: 17px; height: 17px; text-align: center; line-height: 17px; position: absolute;
}

/* generic form style */
.textbox { background-color: #fff; border: 1px solid #bdc3c7; border-radius: 4px; padding: 5px 10px; color: #444551; }
.btn { cursor: pointer; color: #000; width: 100px; background-color: #fff000; border: 1px solid #aaa; padding: 5px; border-radius: 4px; transition: background-color .25s linear; }
.btn:hover { background-color: #fff888; box-shadow: 0 0 6px #ccc; font-weight: bold; }
.font2 { font: 13px "open sans", sans-serif; }
.info-btn { width: 100%; text-align: center; margin-bottom: 10px; }
.info-btn .btn { display: inline-block; width: 250px; margin-top: 15px; }
.info-btn .fas { font-size: 130%; }

/* generic CSS tooltip style */
.tooltip span {
	z-index:20; display: none; padding:14px 20px; margin-top:37px; margin-left:-43px; 
	border-radius:4px; box-shadow: 5px 5px 8px #333; font-size: 1.3rem; font-weight: normal; text-align: left; }
.tooltip:hover span { display:inline; position:absolute; color:#111; border:1px solid #dca; background:#fffaf0; }
.callout { z-index:20;position:absolute;top:-12px;border:0;left:17px; }
.purple .tooltip span { margin-top: 22px; margin-left: -160px; }
.purple .callout { left: 128px; }

/* team content style */
.bienvenue { text-align: center; margin-bottom: 20px; }
.stats { text-align: center; margin-top: 20px; }
.stats-img { margin-top: 10px; }
.stats-img img { margin: 0 4px; vertical-align: top; }
.stats .nbQE { font-size: 30px; font-weight: bold; letter-spacing: 0.4rem; }
.communication { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 15px; display: block; font-style: italic; }
.display_logs { background-color: rgba(255, 255, 255, 0.1); border-radius: 3px; padding: 15px; font: 14px "open sans", sans-serif; display: none; }
.display_logs h1 { display: none; }
.communication li { margin-bottom: 10px; }
.communication a { text-decoration: none; }
.communication a:hover { color: #df5537; }
.commentaires, .docsutiles { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 15px; margin-top: 30px; }
.commentaires textarea { resize: none; width: calc(100% - 24px); }
.commentaires .btn { padding: 6px 15px; width: auto; }
.docsutiles span { display: block; font-weight: bold; margin-bottom: 15px; }
.file { padding: 6px; }
.file img { vertical-align: middle; margin: 0 10px; float: left; }
#countdown { font-size: 1.2em; font-weight: bold; }

/* john style */
.john .onglet { font-size: 28px; margin-bottom: 10px; cursor: pointer; }
.john .onglet:hover { font-weight: bold; }
.john.purple .col-gauche { width: 180px; }
.john.purple .col-droite { background-color: rgba(255, 255, 255, 0.1); margin: 0 0 0 190px; padding: 20px; font: 14px "open sans", sans-serif; }
.goodguess { color: lightgreen; }
.john-content .ok { background-color: #fff; width: 6px; height: 6px; margin-left: 1px; display: inline-block; }
.john-content .ko { background-color: #fff; width: 6px; height: 6px; margin-left: 1px; display: inline-block; opacity: 0.1; }
.john.purple .tooltip span { margin-top: 18px; margin-left: -40px; }
.john.purple .callout { left: 31px; }
.john td.dat { width: 150px; }
.john td.nom { width: 135px; }
.john td.eni { width: 52px; }
.john .loadmore { cursor: pointer; margin-top: 20px; color: #ccc; }
.john .infoItem { margin-top:5px; background-color: rgba(255, 255, 255, 0.1); border-radius: 3px; padding: 9px 20px; position: relative; }
.john h1 { color: #e85938; font-size: 20px;  }
.john .repondreMsg { width: 15px; height: 15px; position: absolute; top: 0px; right: 0px; }

/* help style */
.help_bg { background-color: rgba(0, 0, 0, 0.6); position: fixed; z-index:100; top: 0; left: 0; width: 100%; height: 100%; }
.helpimg1 { position: absolute; top: 74px; left: 88px; }
.helpimg2 { position: absolute; top: 227px; left: calc(58% - 183px); }
.helpimg3 { position: absolute; top: 439px; left: calc(72% - 321px); }
.helpquit { position: absolute; top: 8px; left: 8px; cursor: pointer; }
.tuxedo { position: absolute; top: 500px; left: 300px; }

/* popin */
#popin { display: none; background: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
#popin section { text-align: left; width: 50%; margin: 20vh auto; background-color: #ddd; color: #111; padding:50px; border-radius: 10px; box-shadow: 0 0 100px #000; }
#popin section h2 { font-size: 1.5rem; }
#popin section .fas { vertical-align: baseline; }

/* staging environment style */
.staging-info { text-align: center; background: #fff000; font-weight: bold; padding: 5px; box-shadow: 0 2px 3px #000; letter-spacing: 3px; position: relative; }

/* the end style */
.theend { background-color: rgba(0,0,0,.6); position: fixed; height: 100%; width: 100%; text-align: center; line-height: 100%; z-index: 100; display: none; white-space: nowrap; font-size: 0; }
.helper { display: inline-block; height: 100%; vertical-align: middle; }
.theend img { vertical-align: middle; width: 100%; max-width: 499px; }


/* gestion du css mobile */
@media (orientation: portrait), (max-width: 900px) {
	body { background-image: none; background: #fff000; }
	.logoheader { background: #fff000; padding: 7px 5px; text-align: center; border-bottom: 1px solid #ccc; }
	#logo { position: relative; width: 50px; top: 0; left: 0; right: 0; transform: rotate(-5deg); vertical-align: top; }
	.logo1 { display: none; }
	.card-decoration { display: none; }
	.curtain {
	    width: 100%;
	    min-height: 0;
	    margin: 0;
	    padding: 0;
	    padding-bottom: 20px;
	    box-shadow: 0 1px 2px #999;
	    background: #f9f9f9;
	    color: #111;
	    border-radius: unset;
	}
	.white.fixed { display: none; }
	.grey { background-color: #eee; }
	.title { margin: 13px; }
	.expanded.white, .expanded.grey, .expanded.purple { width: 100%; }
	.expanded .col-gauche { width: 38px; }
	.expanded .col-droite { margin: 0; border-radius: 0; }
	.expanded .main-content { padding: 0; }
	.reduced .title { transform: none; margin: 13px; }

	/*.col-gauche li.deactivated { display: none; }*/

	.enigme-button:hover span { display: none; }
	.enigme-header input { margin-bottom: 12px; }
	.enigme-header input[type='text'] 	{ width: 50%; max-width: unset; position: relative; right: unset; top: unset; }
	.enigme-header input[type='submit'] { width: 30%; max-width: unset; position: relative; right: unset; top: unset; }
	.enigme-header input[type='submit']:after { content:"\a"; white-space: pre; }
	

	.enigme-discussion.slided { width: 100%; }
	.post-header { text-align: center; }
	.post-header input[type='text'] { width: 90%; margin-bottom: 8px; display: inline-block; }
	.post-header input[type='submit'] { width: 60%; margin-bottom: 8px; position: relative; display: inline-block; top: unset; right: unset; }
	.post-header textarea { width: 90%; margin-bottom: 8px; display: inline-block; }
}