@font-face {
  font-family: headerfont;
  src: url(fonts/FuturaLT-Bold.ttf);
  /*src: url(fonts/alagard.ttf);*/
}

@font-face {
  font-family: 2ndHeaderFont;
  src: url(fonts/FuturaLT.ttf);
}

body {font-family: Verdana, sans-serif; font-size:0.8em; background-color:#000000; color:#FF8800; text-align:left;}

canvas { padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block; border:1px solid #FF8800;}

footer, header, nav, section
{border:0px solid #000000; padding:8px; background-color:#000000; left:-8px; width: 100%; color:#FF8800; position:relative;}

nav {top:-8px;}

.content, header {background-image: url("../img/dark_paper.png");}
.nav {background-color:#444444;}
.item {background-image: url("../img/dark_paper2.png"); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.5);}
.minItem {margin:0; padding:0;height: 128px; display:inline-block; background-image: url("../img/dark_paper.png"); /*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.5);*/}
	
	/*margin:3; width:225px;  height: 2000px; display:inline-block;background-image: url("../img/dark_paper2.png"); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.5);}*/

article {border:0px solid #444444; margin:8px 5px; padding:8px; background-color:#666666; color:#FF8800; text-align:left; vertical-align:top; font-family: Verdana, sans-serif; border-radius: 4px;}

#artBlock {margin:3; width:256px; height: 300px; display:inline-block;}
#gameBlock {margin:3; width:256px; height: 330px; display:inline-block;}
#productBlock {margin:3; width:256px; height: 350px; display:inline-block; }
#portfolioBlock {margin:3; width:256px;  height: 320px; display:inline-block;}
#infoBlock {margin:3; width:445px;  height: 200px; display:inline-block;}

#shortBlock {margin:3; width:256px;  height: 100px; display:inline-block;}
#socialBlock {margin:3; width:256px;  height: 100px; display:inline; align: left; width: 100%}
article#salesBlock {margin:3;   width:256px; height: 250px; display:inline-block; }
article#tallSalesBlock {margin:3;   width:256px; height: 360px; display:inline-block; }

nav ul {margin:0; padding:0; text-align:left;}
nav ul li {display:inline; margin:5px;}
a {color:#FF5500; }
#gameImage {width:250px; height:180px;margin:3px; border:1px solid #000000; border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.5);}
#gameImageSmall {width:164px; height:130px;margin:3px; border:1px solid #000000; border-radius: 4px; }
#largeImage {width:250px; height:250px;margin:3px; border:1px solid #000000;}
#titleImage {float:left; width:110px;}
#coverImage {margin:3px; border:1px solid #000000; float:center; text-align:center; border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.5); width:140px;}
#coverImageSmall {margin:3px; border:1px solid #000000; float:center; text-align:center; border-radius: 4px; width:100px;}
#flagIcon {float:right; margin:2px;}

.imgMedal { position:absolute; bottom: -8px; left: 140px; transform: rotate(25deg) scale(0.5, 0.5); z-index: 99; }
.imgMedal2 { position:absolute; bottom: -8px; left: 88px; transform: rotate(25deg) scale(0.5, 0.5); z-index: 99; }

h1, h2 {text-align:left;}
h1 {font-weight: 900; text-shadow: 2px 2px 5px #000000; font-family: 'headerfont', Verdana, sans-serif; font-size:20px;}
h2 {font-weight: 400; margin-top: 8px;font-family: '2ndHeaderFont', Verdana, sans-serif;font-size:16px;}

select, input {background-color:#555555;
	color: #DD6600;
	border-color: #444444;
	border: none;
	border-radius: 4px;}

.container { position:relative; text-align:center;}

.button {font-family: '2ndHeaderFont', Verdana, sans-serif;
	background-color: #666666; color: #FF8800;
    border: none;
	border-radius: 4px;
    padding: 4px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	background-image: url("../img/light_paper.png");
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.5);
}
.button:hover {color: #FFFFFF;}
#moreButton {float: right; font-size: 16px;  font-family: 2ndHeaderFont, Verdana, sans-serif; width: 80px;}
#buyButton {float: right; font-size: 11px; font-family: 2ndHeaderFont, Verdana, sans-serif; width: 80px;}

section h1 {margin-left:10px }

.Social_Media {
	width: 23px;
	height: 23px;
	padding: 12px; 
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 480px) {
    .Social_Media {
		padding: 12px; 
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.5);
	}
	/*#titleImage {width:120px;}*/
}