body {
	background-color:black;
	background-image: url("images/bg.png");
	margin:0px;
	padding:0px;
	color:white;
	font-family:'Rammetto One', cursive;
}

header {
    display: block;
}

footer {
    display: block;
	background-color:#0E2747;
	min-height:100px;
}

section {
	display: block;
}

/* Responsize fonts size */
@media screen and (max-width:400px) {
	.header {font-size: 12px;}
	.nav    {font-size: 12px;}
	.item   {font-size: 12px;}
	.desc   {font-size: 12px;}
	.footer {font-size: 12px;}
}
@media screen and (min-width:400px) and (max-width:800px) {
	.header {font-size: 14px;}
	.nav    {font-size: 16px;}
	.item   {font-size: 14px;}
	.desc   {font-size: 14px;}
	.footer {font-size: 14px;}
}
@media screen and (min-width:800px) and (max-width:1200px) {
	.header {font-size: 18px;}
	.nav    {font-size: 20px;}
	.item   {font-size: 16px;}
	.desc   {font-size: 16px;}
	.footer {font-size: 16px;}
}
@media screen and (min-width:1200px) {
	.header {font-size: 24px;}
	.nav    {font-size: 20px;}
	.item   {font-size: 18px;}
	.desc   {font-size: 18px;}
	.footer {font-size: 18px;}
}
/* Fonts */


/* Header */
@media screen and (max-width:900px) {
	div#header      {display:block; width:100%; text-align:center;}
	div#header_logo {display:inline-block; text-align:center; width:50%;}
	div#header_text {display:inline-block; text-align:center; width:100%;}
}
@media screen and (min-width:900px) {
	div#header      {display:table; width:100%; text-align:center; height:80px;}
	div#header_logo {display:table-cell; vertical-align:middle; text-align:left;  width:40%;}
	div#header_text {display:table-cell; vertical-align:middle; text-align:right; width:60%;}
}

/* Navigation bar */
div.nav {color:#F7BF17;}
@media screen and (max-width:400px) {
	div#nav {width:100%; height:80px; background-color:#0E2747; position:relative;}
	div#navicon {position:absolute; left:5px; top:24px;}
	img#navicon {width:30px; height:auto;}
	div#navsrc  {position:absolute; right:10px; top:24px;}
	img#navsrc  {width:30px; height:auto;}
	/* 1 label */
	div#nav1a   {position:absolute; left:45px; top:30px;}
	/* 2 labels */
	img#tree2   {position:absolute; left:40px; top:22px; width:47px; height:auto;}
	div#nav2a   {position:absolute; left:72px; top:12px;}
	div#nav2b   {position:absolute; left:98px;	top:40px;}
	/* 3 labels */
	img#tree3   {position:absolute; left:40px; top:15px; width:70px; height:auto;}
	div#nav3a   {position:absolute; left:72px; top:6px;}
	div#nav3b   {position:absolute; left:97px;	top:28px;}
	div#nav3c   {position:absolute;	left:120px;	top:55px;}
}
@media screen and (min-width:400px) and (max-width:800px) {
	div#nav {width:100%; height:90px; background-color:#0E2747; position:relative;}
	div#navicon {position:absolute; left:5px; top:26px;}
	img#navicon {width:36px; height:auto;}
	div#navsrc  {position:absolute; right:10px; top:26px;}
	img#navsrc  {width:36px; height:auto;}
	/* 1 label */
	div#nav1a   {position:absolute; left:60px; top:30px;}
	/* 2 labels */
	img#tree2   {position:absolute; left:60px; top:25px; width:52px; height:auto;}
	div#nav2a   {position:absolute; left:100px; top:16px;}
	div#nav2b   {position:absolute; left:130px;	top:42px;}
	/* 3 labels */
	img#tree3   {position:absolute; left:60px; top:15px; width:78px; height:auto;}
	div#nav3a   {position:absolute; left:100px; top:6px;}
	div#nav3b   {position:absolute; left:130px;	top:33px;}
	div#nav3c   {position:absolute;	left:160px;	top:58px;}
}
@media screen and (min-width:800px) {
	div#nav {width:100%; height:100px; background-color:#0E2747; position:relative;}
	div#navicon {position:absolute; left:5px; top:30px;}
	img#navicon {width:40px; height:auto;}
	div#navsrc  {position:absolute; right:10px; top:30px;}
	img#navsrc  {width:40px; height:auto;}
	/* 1 label */
	div#nav1a   {position:absolute; left:60px; top:32px;}
	/* 2 labels */
	img#tree2   {position:absolute; left:60px; top:28px; width:58px; height:auto;}
	div#nav2a   {position:absolute; left:100px; top:16px;}
	div#nav2b   {position:absolute; left:130px;	top:44px;}
	/* 3 labels */
	img#tree3   {position:absolute; left:60px; top:15px; width:86px; height:auto;}
	div#nav3a   {position:absolute; left:100px; top:4px;}
	div#nav3b   {position:absolute; left:130px;	top:32px;}
	div#nav3c   {position:absolute;	left:160px;	top:60px;}
}

div#listing {
	text-align:center;
}

div#listingcontent {
	text-align: center;
	display: inline-block;
	width:100%;
}

@media screen and (max-width: 700px) {
div.listingitem {
	max-width: 100%;
	display:inline-block;
}
}
@media screen and (min-width: 700px) and (max-width: 1200px) {
div.listingitem {
	max-width: 48%;
	display:inline-block;
}
}
@media only screen and (min-width: 1200px) {
div.listingitem {
	max-width: 33%;
	display:inline-block;
}
}

img.game {
    max-width: 100%;
	height:auto;
}

div.tagitem {
	width:300px;
	height:60px;
	display:inline-block;
	text-align:center;
	position:relative;
}

a.header        {text-decoration:none;      color:#FFFFFF;}
a.header:hover  {text-decoration:underline; color:#FFFFFF;}

a.nav        {text-decoration:none;      color:#FFFFFF;}
a.nav:hover  {text-decoration:underline; color:#FFFFFF;}

a.item        {text-decoration:none;      color:#FFFFFF;}
a.item:hover  {text-decoration:underline; color:#FFFFFF;}

a.tag        {text-decoration:none;      color:#FFFFFF; font-size: 24px;}
a.tag:hover  {text-decoration:underline; color:#FFFFFF; font-size: 24px;}

a.footer        {text-decoration:none;      color:#FFFFFF;}
a.footer:hover  {text-decoration:underline; color:#FFFFFF;}