/* CSS Document */
/* ------------------------------------------ */
/* ----------------- FONTS ------------------ */
/* ------------------------------------------ */
@font-face
{
	font-family: TitreH1;
	src: url("../fonts/NHaasGroteskTXPro.ttf");/* mettre ttf, oet, svg et woff en dispo */
	font-style: normal;
	font-weight: 200;
}
@font-face
{
	font-family: normalP;
	src: url("../fonts/NHaasGroteskTXPro.ttf");/* mettre ttf, oet, svg et woff en dispo */
	font-style: normal;
	font-weight: 200;
}
/* BODY */
body
{
	padding: 0;
	width: 1904px;
	margin: 0 auto;
	background: #141414;
	font-family: "normalP";
	color: #AAA;
}
@media screen and (max-width: 380px)
{
	body { width: 320px; }
}
/* Config IE8 */
header, nav, article, section, footer
{
	display: block;
}
a { text-decoration: none; color: #FFF; font-weight: normal; }
a:hover { text-decoration: underline; font-weight: bold; }

/* ------------------------------------------ */
/* ----------------- MENU ------------------- */
/* ------------------------------------------ */
nav { position: absolute; width: 1904px; height: 115px; margin: 0; padding: 0; background-color: rgba(48,48,48,0.45); z-index: 2; }
nav #construction { position: absolute; margin-top: 40px; margin-left: 350px; font-size: 20px; color: #AAA; font-weight: bold; }
nav #construction img {	max-height: 40px; }
nav #tableNav { width: 100%; border-collapse: collapse; margin: 0; text-align: center; font-size: 17px; }
nav #tableNav .tdLogoCv { width:85px; padding: 2px 0 0 0; }
nav #tableNav .tdLogoIn { padding: 4px 0 0 0; }
nav #tableNav .tdLogoSite { width:200px; }
nav #tableNav .tdLogoSite img { max-height:110px; }
nav #tableNav .tdContact  { width:100px; }
nav #tableNav .tdMenuTel  { width:90px; display:none; padding: 5px; }
nav ul { text-align: center; }
nav .ulMenuListe { font-size: 12px; margin: 0; padding: 0 10px; }
nav li { display: inline-block; padding: 0 10px; font-size: 22px; vertical-align: middle; text-align: center; }
nav .liMenu { border-left: 2px solid #FFF; }
nav a { padding: 0 5px; }
@media screen and (max-width: 380px)
{
	nav { width: 320px; height: 70px; }
	nav #tableNav { width: 310px; }
	nav #tableNav .tdLogoSite img { max-width: 210px; max-height: 62px; }
	nav #tableNav .tdMenu { display: none; }
	nav #tableNav .tdLogoCv { display: none; }
	nav #tableNav .tdLogoIn { display: none; }
	nav #tableNav .tdContact { display: none; }
	nav #tableNav .tdMenuTel { display: none; }
	
	nav #tableNav .tdMenuTel  { display:block; }
	nav #tableNav .tdMenuTel img  { width: 70%; }
	
	nav #tableNav .tdMenuTel ul { list-style:none; position:relative; float:left; margin:0; padding:0; width:100%; }
	nav #tableNav .tdMenuTel ul a { text-decoration:none; padding: 10px 0; margin:0; }
	nav #tableNav .tdMenuTel ul li { display:block; position:relative; float:left; margin:0; padding:10px; font-weight:bold; }
	nav #tableNav .tdMenuTel ul li:hover { background:#555; }
	nav #tableNav .tdMenuTel ul ul { display:none; position:absolute; top:100%; left:0; background:rgba(34,34,34,0.9);
									border-radius: 0 10px 10px 10px; padding:0; z-index: 100; width:auto; }
	nav #tableNav .tdMenuTel ul ul li { float:none; width:300px; border-left: none; border-bottom: #111 solid 4px; }
	nav #tableNav .tdMenuTel ul ul li:hover { border-radius: 10px; }
	nav #tableNav .tdMenuTel ul ul li:hover:first-child { border-radius: 0 10px 10px 10px; }
	nav #tableNav .tdMenuTel ul ul a { padding:10px 0; }
	nav #tableNav .tdMenuTel ul ul ul { top:0; left:100%; }
	nav #tableNav .tdMenuTel ul li:hover > ul { display:block; }
	nav #tableNav .tdMenuTel .spanFleche { position: absolute; top: 50%; transform: translateY(-50%); right: 3px; }
}
/* ------------------------------------------ */
/* ----------------- CORPS ------------------ */
/* ------------------------------------------ */
article { width: 1904px; margin: 0; padding: 10px 0 0 0; min-height: 945px; }
article * { margin: 0; padding: 0; }
article h1 { font-family: "TitreH1"; text-align: center; font-size: 30px; margin: 10px 0; }
article h1 img { max-height: 25px; }
article h3 { margin-left: 40px; }
article h4 { margin-left: 10px; }
article p { margin-left: 10px; }
article .Centrer { text-align: center; }
article #Corps { max-width: 1200px; width: 100%; margin: 120px auto 5px auto; background-color: rgba(48,48,48,0.45); }
article #CorpsList { margin: 120px auto 5px auto; }
.spanMessagesPages { color: #F00; font-weight: bold; }

#divIframe iframe, #divIframe { width: 890px; height: 500px; margin: -8px auto 0 auto; padding: 0; }
@media screen and (max-width: 380px)
{
	article { width: 320px; min-height:390px; }
	#divIframe iframe, #divIframe { width: 320px; height: 200px; }
}
/* ---- Home ---- */
#divPreview { position: relative; z-index: 1; }
#divPreview .imgAccess { position: absolute; top: 0; left: 0; width: 600px; height: 600px; }
#divPreview .imgPreview { width: 1900px; height: 945px; }
#divPreview iframe { width: 1900px; height: 945px; margin: -8px auto 0 auto; padding: 0; }
#divNext { position: fixed; top: 380px; right: 0; }
#divPrevious { position: fixed; top: 380px; left: 0; }
@media screen and (max-width: 380px)
{
	#divPreview { margin-top:130px; }
	#divPreview .imgPreview { width: 316px; height: 187px; }
	#divPreview iframe { width: 316px; height: 187px; }
	
	#divNext { top: 190px; right: 0; }
	#divPrevious { top: 190px; left: 0; }
	#divPrevious img, #divNext img {  width: 35px; height:97px; }
}

/* ---- Jeux - Liste ---- */
#ulListeJeux { text-align: center; }
#ulListeJeux * { padding: 0; margin: 0; width: 870px; height: 480px; }
#ulListeJeux li { position: relative; display: inline-block; text-align: center; vertical-align: text-top; background-size: 870px 480px; }
#ulListeJeux a { display: none; height: 480px; background:url(../images/header_background.png) repeat; text-align: center; vertical-align: text-top; text-decoration: none; }
#ulListeJeux a table { width: 100%; text-align: center; }
#ulListeJeux a table th { width: 80%; }
#ulListeJeux a table .imgLogo { max-height: 100px; max-width: 100px; margin-right: 15px; }
#ulListeJeux a .imgAccess { position: absolute; top: 0; left: 0; width: 400px; height: 400px; }
@media screen and (max-width: 380px)
{
	#ulListeJeux * { width: 310px; height: 204px; }
	#ulListeJeux li { background-size: 310px 204px; }
}


/* ---- Jeux - Détails ---- */
#divScreens { position: relative; width: 100%; height: 525px; text-align: center; }
#divScreens .imgAccess { position: absolute; top: 0; left: 0; width: 400px; height: 400px; }
#divScreens * { padding: 0; margin: 0; }
#divAffichage { padding: 0; width: 100%; height: 484px; }
#divAffichage img { max-height: 484px; }
#divAffichage iframe { height: 484px; width: 860px; }
#divVignettes { width: 100%; height: 45px; padding: 0; }
#divVignettes img { max-height: 45px; }

#tableInfos { margin: 30px auto; border-collapse: collapse; width: 90%; }
#tableInfos td { vertical-align: top; padding: 5px; }
#tableInfos .tdInfos { text-align: left; width: 360px; }
#tableInfos p { margin-top: 20px; font-size: 16px; }
#tableInfos h2 { margin-top: 20px; }
#tableInfos p span { font-weight: bold; }
#tableInfos .pLeft { text-align: right; }

#divGame { width: 80%; margin: 30px auto; }
#divGame .pLeft { text-align: right; }
#divGame h2 { margin-bottom: 18px; }
#divGame p { margin-bottom: 18px; }
#divGame span { font-weight: bold; }
#divGame .divInfosGame { float: right; width: 270px; }

@media screen and (max-width: 380px)
{
	#divScreens { min-height: 253px; height: auto; }
	#divAffichage { padding: 0; width: 100%; height: 208px; }
	#divAffichage img { max-width: 310px; max-height: 208px; }
	#divAffichage iframe { width: 310px; height: 208px; }
	#divVignettes { height: auto; }
	#divVignettes img { max-width: 79px; }
	#divGame p { margin-bottom: 5px; }
}



/* ---- About Me ---- */
.tableAboutMe .tdPhoto { max-width: 300px; width: 40%; }
.tableAboutMe .tdPhoto img { max-width: 280px; }
.tableAboutMe .tdCv { text-align: center; }
.tableAboutMe .tdCv img { max-width: 1197px; }
.tableAboutMe td { vertical-align: top; }
.tableAboutMe p { margin: 10px 5px; }
.tableAboutMe #divModif { display: none; }
@media screen and (max-width: 380px)
{
	.tableAboutMe .tdCv img { max-width: 310px; }
}

/* ---- Contact ---- */
.divInfos, .divMessage { display: inline-block; font-size: 150%; height: 470px; vertical-align: top; }
.divInfos { width: 35%; }
.divInfos p { padding: 35px 20px; }
.divMessage { width: 60%; }
.divInfos input, .divMessage textarea { font-size: 120%; width: 85%; }
.divBouton input { font-size: 120%; width: 20%; }
@media screen and (max-width: 380px)
{
	.divInfos, .divMessage { width: 90%; height: auto; }
	.divInfos p { padding: 5px 10px; }
	.divInfos input, .divMessage textarea { width: 100%; }
	.divBouton input { width: 50%; }
}



/* ---- Gestions ---- */
.formGestion
{
	border: 1px solid #111;
	background-color:#333;
	width:95%;
	margin:auto;
	text-align: center;
}
.formGestion table
{
	width: 100%;
}
.formGestion table .thPreview
{
	width: 33%;
}
.formGestion table img
{
	max-width: 255px;
	max-height: 255px;
}

/* -------------- GESTION DES COMPTES/PAGES/STATS ------------- */
article .tableListe { width: 100%; border-collapse: collapse; margin: 0 0 0 10px; }
article .tableListe tr { border: 1px #000 solid; }
article .tableListe td { font-size: 13px; text-align: center; }
article .tableListe .trListePair { background-color: #EEE; }

article .formListeGestion { background: none; border: none; width: 98%; }
article .formListeGestion .pCreerGestion { text-align: center; }
article .formListeGestion input[id^="boutonSupprGestion"] { border: none; background: none; background-image: url(../images/corbeille.png); width: 13px; height: 13px; }
article .formListeGestion input[id^="boutonEditGestion"] { border: none; background: none; background-image: url(../images/modifier.png); width: 15px; height: 13px; }

article .formInscription, article .formModifInfo, article .formConnexion, article .formCreerMenu, article .formSupprMenu, article .formCreerPage, article .formSupprPage, article .formCreerCompte, article .formSupprCompte, article .formPreferPages, article .formPreferComptes, article .formPreferStat
{
	background: url(../images/zone.png); border-radius: 10px; box-shadow: 8px 8px 12px #aaa; width: 600px; margin: 5px auto; padding: 10px;
}
input[type="submit"], input[type="button"] { padding: 3px 10px; margin: 10px; background: #FFF; color: #000084; border: none; border-radius: 7px; box-shadow: 6px 6px 10px #aaa; font-size: 16px; font-weight: bold; }

/* -------------- AFFICHAGE DES STATS ------------- */
article .divStatJours { float: left; width: 390px; background-color: #FFF; border-radius: 10px; padding: 10px; min-height: 250px; }
article .divStatMois { margin-left: 475px; width: 395px; background-color: #FFF; border-radius: 10px; padding: 10px; min-height: 250px; }
article .ulStat { list-style: none; padding: 0 10px; }
article .ulStat li { font-size: 18px; }
article .ulStat .liTitre { text-align:center; font-weight: bold; margin: 5px 0; font-size: 22px; }
/* -------------- MESSAGES CONTACTS ------------- */
article .tableMessagesContact { width: 90%; margin: 10px auto; border-collapse: collapse; }
article .tableMessagesContact td { border: #000 1px solid; width: 50%; }

article #tableListeScreens, article #tableAjoutScreen { width: 90%; margin: 10px auto 30px auto; border-collapse: collapse; }
article #tableListeScreens th { width: 33%; }
article #tableListeScreens td, article #tableAjoutScreen td { height: 120px; text-align: center; }
article #tableListeScreens td img { max-height: 100px; }
article #tableAjoutScreen .tdInfos { height: 25px; }
.h2Jeux { text-align: center; }


/* ------------------------------------------ */
/* -------------- PIED DE PAGE -------------- */
/* ------------------------------------------ */
footer
{
	height: 75px; width: 100%; padding:0;
	z-index: 50; margin: 0; background-color: #222222;
}
footer * { margin: 0; padding: 0; text-align: center; }
footer p { padding-top: 30px; font-size: 18px; color: #FFF; }
@media screen and (max-width: 380px)
{
	footer
	{
		height: 55px;
	}
	footer p
	{
		font-size: 14px;
		padding-top: 15px;
	}
}