@font-face 
{
    font-family: "arcade";
    /*src: url("fonts/Minecraftia.ttf");*/
    /*src: url("fonts/EnterCommand.ttf");*/
    /*src: url("fonts/babyblue.ttf");*/
    /*src: url("fonts/Animal-Crossing-Wild-World.ttf");*/
    /*src: url("fonts/Pixel Sans Serif Condensed.ttf");*/
    /*src: url("fonts/Mojang-Regular.ttf");*/
    /*src: url("fonts/PIXEARG_.TTF");*/
    /*src: url("fonts/nokiafc22.ttf");*/
    /*src: url("fonts/Gamer.ttf");*/
    /*src: url("fonts/PressStart2P.ttf");*/
    /*src: url("fonts/I-pixel-u.ttf");*/
    /*src: url("fonts/RootSquare.ttf");*/
    /*src: url("fonts/Retro Gaming.ttf");*/
    src: url("fonts/W95FA.otf");
}

/* Layout */

html 
{
	font-family: "Roboto Condensed";
	color: #251d29;
	background-color: #251d29;
}

body
{
	margin: auto; 
	background: #9caebb;
}

/* Titles */

h2 
{
	font-family: "arcade";
	color: #251d29;
	word-spacing: 2px; 
}

h2 a:hover 
{
	text-decoration: underline;
}

h2 a.img 
{
	display: inline-block;
	width: 28px;
	height: 28px;
	vertical-align: top;
}

h2 a.img img
{
	display: block; 
	width: 24px;
	height: 24px;
	margin: 1px auto;
}

h2 a.img:hover 
{
	text-decoration: none;
}

/* Hyperlink */

a
{
	text-decoration: none;
	color: #251d29;
}

a img 
{
	border:0; /* Fix Internet Exporer */
}

/* Paragraph */

p
{
	font-family: arcade;
	font-size: 18px;
}

/* Header */

header 
{
	position: fixed;
	width: 100%;
	top: 0; 
	left: 0; 
	z-index: 666; 
	background-color: #433d4c;
	box-shadow: 0px 2px 6px #251d29;
}

#header
{
	margin:auto;
	text-transform:uppercase;
}

#header a
{
	font-family: "arcade";
	font-weight: bold;
	color: #ffffff;
	text-shadow: 2px 2px 4px #251d29;
}

#header > a img
{
	filter: drop-shadow(2px 2px 4px #251d29);
	image-rendering: pixelated;
}

/* Footer */

footer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: right;
}

footer li
{
	font-family: "arcade";
	font-size: 12px;
	display: inline-block;
	padding: 0 12px 12px;
}

footer li a
{
	text-decoration: underline;
}

footer li a:hover
{
	text-decoration: none;
}

/* Tag */

.tag 
{
	display: inline-block;
	font-size: 16px;
	line-height: 12px;
	font-family: "arcade"; 
	box-shadow: 0px 0px 4px #778299;
	background: #433d4c; 
	color: #fff; 
	margin: 0 6px 6px 0;
	padding: 8px 6px; 
	border-radius: 2px;
	text-decoration: none;
}

/* Search bar */

#search 
{
	text-align:center;
}

#search > input[name="label"] 
{ 
	padding-left: 32px; 
	background: #fff url("img/loupe.png") 5px center no-repeat; 
}

#search > .tag-editor
{
	vertical-align: top;
}

/* Game detail */

#fiche #wrap 
{
	text-align: center; 
	padding-top: 12px;
}

#fiche #left img 
{
	border-radius: 4px;
	box-shadow: 2px 2px 8px 0px #333;
}

#fiche #right 
{
	font-family: "arcade";
	text-align: left; 
}

#fiche #right b
{
	font-size: 24px;
}

#fiche #right p
{
	margin: 8px 0 18px;
}

/* Game list */

#games > a /* Image toggle link */
{
	text-decoration: underline;
}

#games .alone /* No game text */
{
	margin: 40px 0 20px; 
	width: 100%; 
	text-align: center; 
	font-size: 20px; 
}

#games ul .del 
{
	width: 90%; 
	display: block; 
	border-bottom: 1px solid #000;
	margin-top: 20px; 
	margin-bottom: 10px;
	text-align: left;
}

#games ul#img .del
{
	margin: 20px auto 10px auto;
}

/* Graphical listing */

#games #img 
{
	padding: 0;
	margin-top: 0px;
	list-style-type: none; 
	text-align: center;
}

#games #img li 
{
	display: inline-block; 
	position: relative;
	vertical-align: top; 
	transition: all 0.3s; 
	margin: 6px;
	border-radius: 4px;
	overflow: hidden;
	z-index: 0;
	box-shadow: 1.5px 1.5px 3px 0px #251d29;
}

#games #img li a img 
{
	vertical-align: bottom;
}

#games #img li .tobuy 
{
	position: absolute; 
	right: 0; 
	width: 85px;
}

/* Textual listing */ 

#games #list 
{
	list-style-type: none; 
	margin: 0;
	padding: 0;
}

#games #list li 
{
	margin: 5px 0;
}

#games #list li a:hover
{
	text-decoration: underline;
}

#games #list li span.console
{
	font-size: 12px;
	margin-right: 6px;
}

#games #list li span.tag
{
	font-family: "Roboto Condensed";
	font-size: 14px;
	padding: 2px 4px;
	margin: 0;
}

/* Console listing */

#consoles ul 
{
	margin: 0;
	padding: 0; 
	list-style-type: none; 
	text-align: center;
}

#consoles ul li 
{
	position: relative; 
	display: inline-block; 
	overflow: hidden;
}

#consoles ul li a 
{ 
	display: inline-block; 
	width: 100%; 
	height: 100%; 
	text-decoration: none; 
	color: #251d29; 
	font-family: monospace; 
	background-color: rgba(102,102,102,0.85);
}

#consoles ul li .decal 
{
	width: 0px; 
	overflow: hidden; 
	position: absolute; 
	transition: width 0.4s; 
	background: rgba(102,102,102,0.85);
}

#consoles ul li .inner_decal 
{ 
	display: inline-block; 
	vertical-align: middle; 
	line-height: normal; 
	font-family: arcade; 
	word-spacing: 2px;
}

#consoles ul li .inner_decal .name 
{
	font-weight: bold; 
}

/* Form */

form label 
{
	display: inline-block; 
	width: 130px;
}

form input,
form select,
form textarea,
form button,
form .tag-editor
{
	border: 0; 
	height: 30px; 
	line-height: 30px;
	font-size: 14px;
	margin: 4px;
	padding: 0px 8px;
}

form .tag-editor
{
	width: 230px;
}

form input[type="checkbox"] 
{
	height: auto; 
	padding: 0;
}

form input[type="file"] 
{
	padding: 0; 
}

form select 
{
	padding-right: 26px; 
	padding-left: 8px; 
	background: #fff url("img/arrow_b.png") 96% 50% no-repeat; 
	appearance: none;
	-webkit-appearance: none; 
	-moz-appearance: none; 
}

form select.sort
{
	background: #fff url("img/sort.png") 96% 50% no-repeat; 
	background-size: 16px 16px;
}

form button 
{
	background: #fff;
	cursor: pointer;
}

/* Connexion form */

#connexion form
{
	width: 350px;
	margin: auto;
}

#connexion form label 
{
	width: 110px;
}

#connexion form input[type="submit"] 
{
	width: 150px; 
	display: block; 
	margin-left: 114px;
}

/* Add form */

#add form br
{
	line-height: 44px;
}

#add form img 
{
	width: 60px; 
	vertical-align: bottom; 
}

#add form textarea 
{
	vertical-align: top;
}

#add form input[type="submit"] 
{
	width: 150px;
	margin-top: 12px;
}

#helpers form input[type="submit"]
{
	margin-left: 134px;
}

/* Mobile specific */

@media screen and (max-width: 767px) 
{
	h2 
	{
		font-size: 24px;
		margin: 12px 0 14px 20px;
	}

	h2 a.img img
	{
		margin-top: -2px;
	}

	#header > a 
	{
		display: block; 
		width: 210px;
		margin: auto;
		font-size: 20px;
		text-align: center;
		padding-bottom: 10px;
	}

	#header > a img 
	{ 
		display: block; 
		width: 42px; 
		margin: 6px auto;
		image-rendering: crisp-edges;
	}

	#header .mobile 
	{
		z-index: 666; 
		position: absolute; 
		display: block; 
		width: 84px; 
		height: 84px; 
		margin-top: -90px; 
		right: 0px; 
		text-align: center; 
	}
	
	#header .mobile a 
	{
		display: inline-block; 
		margin-top: 34px; 
		width: 25px; 
		height: 35px; 
		padding: 0 5px; 
		font-family: "Roboto Condensed";
		line-height: 8px; 
		border: 2px solid #ffffff; 
		border-radius: 5px;
	}
	
	#header .mobile a span 
	{
		display: inline-block; 
		width: 100%; 
		height: 4px; 
		border-radius: 4px; 
		background: #ffffff;
	}

	#header ul 
	{
		margin: 0; 
		padding: 0; 
		list-style-type: none; 
	}
	
	#header ul li 
	{
		display: none;
		height: 45px; 
		line-height: 45px; 
		text-align: left; 
		border-top: 2px solid #ffffff; 
		background: url("img/fleche.png") 90% center no-repeat;
	}

	#header ul li a 
	{
		font-size: 18px; 
		display: block; 
		text-align: center;
	}

	article 
	{
		padding: 90px 0px 0px;
	}

	#games #list
	{
		margin: 0 16px; 
	}

	#games > a /* Image toggle link */
	{
		float: right;
		margin-left: 170px;
		margin-right: 20px;
		margin-bottom: 16px;
	}

	#games .alone
	{
		margin-top: 80px; 
	}

	#games #img li a img 
	{
		max-width: 120px; 
	}

	#fiche #left img 
	{
		max-width: 340px;
	}

	#fiche #right 
	{
		vertical-align: top;
		margin: 30px 40px 0; 
	}

	#consoles ul li 
	{
		width: 120px; 
		height: 120px; 
		line-height: 120px;
		border: 4px solid transparent;
		margin-left: -4px; 
		margin-top: -4px;
	}

	#consoles ul li a 
	{ 
		font-size: 80px; 
	}

	#consoles ul li img 
	{
		width: 120px; 
		height: 120px;
	}

	#consoles ul li .decal 
	{
		display:none;
	}

	#add form 
	{
		margin: 0 16px;
	}

	#add form label
	{
		width: 100%;
	}

	#add form input[type="text"],
	#add form select,
	#add form textarea,
	#add form .tag-editor
	{
		width: 98%;
		box-sizing: border-box;
	}

	#add form img 
	{
		margin-left: 5px;
		margin-bottom: 12px;
	}

	#add form textarea 
	{
		height: 100px; 
	}

	#add form input[type="submit"] 
	{
		display: block;
		margin: 20px auto;
	}
}

/* Desktop specific */

@media screen and (min-width: 768px) 
{
	.mobile
	{
		display:none;
	}

	h2 
	{
		font-size: 36px;
		margin: 12px 0 14px 6px;
	}

	h2 a.img img
	{
		margin-top: 6px;
	}

	html 
	{
		background: #251d29 url("img/wallpaper.jpg") no-repeat fixed; 
		background-size: 100% auto;
		image-rendering: pixelated;
	}

	body
	{
		background: #9caebbee;
		border-radius: 0 0 4px 4px;
		box-shadow: 0 0 40px black;
		image-rendering: auto;
	}

	#header
	{
		height: 60px;
		line-height: 60px; 
		overflow: hidden;
	}

	#header img
	{
		width: 50px; 
		vertical-align: top; 
		margin-top: 12px; 
		image-rendering: crisp-edges;
	}

	#header > a 
	{
		font-size: 24px; 
		display: inline-block; 
		padding-right: 15px; 
		margin-left: 5px;
	}

	#header ul
	{
		float: right;
		margin: 0; 
		padding: 0;
		height: 60px;
		line-height: 60px; 
	}

	#header ul li 
	{
		display: inline-block; 
	}
	
	#header ul li a 
	{
		font-size: 16px; 
		display: block; 
		height: 100%;
		padding: 0 20px;
	}

	article 
	{
		padding: 80px 40px 20px;
	}

	#games #list
	{
		margin-left: 100px; 
	}

	#games h2
	{
		width: 70%;
		display: inline-block;
	}

	#games > a /* Image toggle link */
	{
		/*float: right;*/
		/*margin-top: 30px;*/
		display: inline-block;
		text-align: right;
		width: 100%;
		text-decoration: underline;
	}

	#games #img li:hover 
	{
		z-index: 100;
		box-shadow: 1.5px 1.5px 30px 0px #251d29;
		margin-top:0px;
		margin-bottom:12px;
	}

	#games #img li a img 
	{
		max-width: 200px; 
		max-height: 200px;
	}

	#fiche #left 
	{
		width: 48%; 
		display: inline-block; 
	}

	#fiche #right 
	{
		width: 40%; 
		display: inline-block; 
		vertical-align: top;
		margin: 30px 0 0 50px;
	}

	#consoles ul li 
	{
		width: 200px; 
		height: 200px; 
		line-height: 200px;
		border: 8px solid transparent;
		margin-left: -8px; 
		margin-top: -8px;
	}

	#consoles ul li a 
	{ 
		font-size: 120px; 
	}

	#consoles ul li img 
	{
		width: 200px; 
		height: 200px;
	}

	#consoles ul li .decal 
	{
		height: 200px; 
		line-height: 200px; 
	}

	#consoles ul li:hover .decal 
	{
		width: 200px; 
	}

	#consoles ul li .inner_decal 
	{ 
		width: 200px; 
		font-size: 12px; 
	}

	#consoles ul li .inner_decal .name 
	{
		font-size: 18px; 
	}

	#add form 
	{
		width: 470px; 
		margin: auto;
	}

	#add form input[type="text"],
	#add form select,
	#add form textarea,
	#add form .tag-editor
	{
		width: 300px;
		box-sizing: border-box;
	}

	#add form img 
	{
		margin-left: 140px; 
	}

	#add form textarea 
	{
		height: 100px; 
	}

	#add form input[type="submit"] 
	{
		margin-left: 138px;
	}
}

/* Normal desktop specific */

@media screen and (min-width: 1100px)
{
	body
	{
		width: 1100px; 
	}

	#header
	{
		width: 1100px;
	}

	#fiche #left img 
	{
		max-width: 480px;
		max-height: 600px;
	}
}

/* Small desktop specific */

@media screen and (min-width: 768px) and (max-width: 1099px)
{
	body
	{
		width: 768px;
	}

	#header
	{
		width: 768px;
	}

	#fiche #left img 
	{
		max-width: 340px;
	}
}