@import url(fontawesome-all.min.css);
/*@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");*/
/*
	Created by Arts 4 Sale for the website of our game Tricks or Treats | Farces ou Friandises.
*/

	header#header { display: /*table*/block; text-align: center; border-bottom: none; padding: 2em 0 1em 0; }
	header#header a.logo { font-size: calc(2vw + -1vw); }
	header#header a.logo strong { font-size: /*1.50em*/3.5em; display: grid; width: 100%; }
	header#header div.SomeFunCopyrights { text-align: center; border-bottom: 8px ridge red; }
	header#header div.SomeFunCopyrights span.EditedByWho { font-size: 1.25em; letter-spacing: 1.50px; margin-left: 0.50em; }
	header#header div.SomeFunCopyrights img.A4SLogo { width: 14%; position: relative; bottom: /*-2em*/-4em; left: 0.4em; }
	header#header div.SomeFunCopyrights span.CreatedByWho { font-size: 1.25em; letter-spacing: 1.50px; margin-left: 0.50em; margin-right: 1.5em; }
	header#header div.SomeFunCopyrights span.CreatedByWho i.LoveHeart { color: red; }
	header#header div.SomeFunCopyrights img.TemperanceZepetoQRCode { transition: 1s all ease-in; width: 20%; position: absolute; margin-top: -1em; margin-left: -1.5em; }
	header#header div.SomeFunCopyrights img.TemperanceZepetoQRCode_ifSidebarHidden { transition: 1s all ease-in; width: 18%; position: absolute; margin-top: -1em; margin-left: -1.5em; }
	/*
	~~~~ si le ZepetoQRCode de Tempérance est situé dans le listing des icones sociaux... */
	header#header ul.icons img.TemperanceZepetoQRCode { transition: 1s all ease-in; /*float: right;*/ position: /*absolute*/relative; width: /*22%*/30%; top: /*0em; 4em */-12em; right: /*0em -8em25.36em*/4.36em !important; }
	header#header ul.icons img.TemperanceZepetoQRCode_ifSidebarHidden { transition: 1s all ease-out; /*float: right;*/ position: /*absolute*/relative; width: /*22%*/30%; top: /*0em; 4em */-12em; right: 14.36em !important; }
	*/
	header#header div#SocialIconsHider { display: none; !important; }
	
	section#banner { margin-top: 1em; }
	section#banner div.content header h1 { font-size: 3em; }
	
	#main > .inner > section { border-top: 3px solid #f56a6a; }
	#main > .inner > section header.major > :last-child { border-bottom: 8px ridge red; }
	
	section#search { display: none !important; }
		/*
	~~~~ on veut bloquer en position et afficher visuellement le bouton pour voir le panneau latéral, quel que soit la hauteur du scrolling */
	div#sidebar:not(.inactive) .toggle { position: fixed; -moz-transition: left 0.5s ease; -webkit-transition: left 0.5s ease; -ms-transition: left 0.5s ease; transition: left 0.5s ease; }
	div#sidebar.inactive .toggle { position: absolute; -moz-transition: left 0.5s ease; -webkit-transition: left 0.5s ease; -ms-transition: left 0.5s ease; transition: left 0.5s ease; }
	
	div#sidebar > div.inner > * { border-bottom: 3px solid #f56a6a; }
	div#sidebar div.inner nav#menu { border-bottom: none; padding: 0; }
	div#sidebar div.inner nav#menu div.GameLogoContainer { text-align: center; }
	div#sidebar div.inner nav#menu div.GameLogoContainer header.major img.GameLogo { width: 50%; }
	div#sidebar div.inner nav#menu div.GameLogoContainer header.major > :last-child { border-bottom: 8px ridge red; }
	
	div#sidebar div.inner nav#menu li { text-transform: none; }
	div#sidebar div.inner nav#menu :not(nav.OpenerInOpener) li.CurrentInView { padding: 1em; border-left: 4px dashed #ab0000; font-weight: bold; color: darkgoldenrod; text-transform: none; }
	div#sidebar div.inner nav#menu li a { font-size: 1em; }
	
	div#sidebar div.inner nav#menu nav.OpenerInOpener { display: none; }
	div#sidebar div.inner nav#menu nav.OpenerInOpener li.CurrentInView { padding: 1em; border-right: 2px dashed darkgoldenrod; font-weight: bold; color: #ab0000; text-transform: none; border-top: 2px dashed #ab0000; border-bottom: 2px dashed goldenrod; border-left: 2px dashed #ab0000; background: #f9f9f9; }
	div#sidebar div.inner nav#menu nav.OpenerInOpener li a { font-size: 1em; color: #ab0000 !important; }
	div#sidebar div.inner nav#menu nav.OpenerInOpener.active { display: block; }
	
	div#sidebar div.inner nav#menu div.TranslationFlagsIcons { display: flex; justify-content: space-around; align-items: center; margin-top: -1.5em; margin-bottom: 2em; }
	div#sidebar div.inner nav#menu div.TranslationFlagsIcons img.FRIcon { border-bottom: none; padding: 0; }
	div#sidebar div.inner nav#menu div.TranslationFlagsIcons img.UKIcon { border-bottom: none; padding: 0; }
	
	div#sidebar div.inner header.major h2.KeepContactH2Title { display: grid; text-align: center; }
	
	div#sidebar div.inner ul.contact img.TemperanceZepetoQRCode { width: 100%; }
	
	a#sideBarIcon { color: red; }
	
	/* generic pages sections */			
	
	section#generic { margin-top: 1em; }
	section#generic header.main h1 { font-size: 2em; }
	section#generic span.image.main img.A4SLogoAsSeperator { height: 0.3em; width: 80%; margin-top: -1em; }
	section#generic div.FakeMargin { margin-bottom: 2em; }
	section#generic div.PreFormatted { white-space: pre-wrap; margin-top: -3em; display: flex; margin-bottom: -5em; color: darkblue; line-height: 2em;}
	section#generic.PreFormatted hr.major { display: none; }
	section#generic.PreFormatted img.TemperanceZepetoQRCode { width: 25%; }
	
	footer#footer { margin-top: -3em !important; }