/* Apply a background in the body tag */
body {
	background-image: url(img/Yu-Gi-Oh_TCG_new_logo.jpg);
	background-repeat: repeat;
	background-position: center;
	background-attachment: fixed;
	font: 12pt Tahoma, Geneva, sans-serif;
}
/* @font-face 
@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('fonts/Chunkfive-webfont.eot');
	src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/Chunkfive-webfont.woff') format('woff'),
		 url('fonts/Chunkfive-webfont.ttf') format('truetype'),
		 url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'TitilliumText22LRegular';
	src: url('fonts/TitilliumText22L003-webfont.eot');
	src: url('fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/TitilliumText22L003-webfont.woff') format('woff'),
		 url('fonts/TitilliumText22L003-webfont.ttf') format('truetype'),
		 url('fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}*/
/*Conatiner*/
#container{
	width: 1000px;
	border: thick solid #000;
	margin: auto;
}
#image{
	background-image: url(images/3.png);
	width: 960px;
	height: 250px;
}
/* Header */
header {
	/*background: url('images/nav-bg.png') repeat-x;*/
	background-color: #000;
	padding: 0;
	height: 70px;
	border-bottom: 2px solid #000;
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5);
	width: 100%;
}
header > div {
	width: 960px;
	margin: 0 auto;
}
header .home {
	margin: 0;
	font: 36pt/60pt 'ChunkFiveRegular', Arial, sans-serif;
	text-shadow: 0px 2px 0px #000;
	float: left;
}
header a {
	text-decoration: none;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
	transition: all 300ms ease-out;
}
header nav {
	float: right;
}
header nav ul {
	padding: 0;
	margin-right: 6px;
	margin-top: 28px;
}
header nav li {
	display: inline;
	font-family: "Planet Kosmos";
	font-size: 20px;
	color: #FFF;
	margin-left: 25px;
	text-transform: uppercase;
}
/* Content */
#content {
	width: 960px;
	height: auto;
	margin: 25px auto 0;
	border: 1px solid #bbb;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3);
}
/* Image Slider Section */
#image-slider {
	height: 425px;
	width: 960px;
}
#image-slider ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#image-slider img {
	display: block; /** For removing white space between <img> and <figcaption>  **/
}
#image-slider figcaption {
	background-color: rgba(0,0,0,.7);
	color: #fff;
	padding: 10px 20px;
	position: relative;
	text-shadow: 1px 1px 0px #000;
	width: 920px;
	bottom: 0;
}
#image-slider .slide {
	position: absolute;
}
#image-slider .slide img {
	position: relative;
	opacity: 0;
}
#image-slider .slide:first-child img {
	opacity: 1;
}
#image-slider .hidden {
	height: 380px;
	overflow: hidden;
	position: relative;
	width: 960px;
	border-bottom: 1px solid #aaa;
}
#image-slider .shine {
	height: 300px;
	margin: 0 auto;
	position: absolute;
	right: -66px;
	top: -58px;
	transform: rotate(-20deg);
	background: linear-gradient(45deg, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
	width: 1500px;
	z-index: 5;
}
/* Slide Navigation Section */
.nav-slider {
	text-align: center;
	padding-top: 15px;
	border-top: 1px solid #fff;
}
.nav-slider li {
	display: inline;
	margin: 0 5px;
}
.nav-slider li a {
	background: #ddd;
	border: 1px solid #ccc;
	display: inline-block;
	height: 19px;
	text-indent: -9999px;
	width: 19px;
}
/* Image Caption Section */
#image-caption {
	padding: 32px 32px 40px;
}
#image-caption ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#image-caption ul li {
	display: inline-block;
	width: 270px;
	vertical-align: top;
	height: 190px;
	background: #fff;
	border: 5px solid #ddd;
	cursor: pointer;
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2);
	position: relative;
	overflow: hidden;
}
#image-caption img {
	display: block; /** Remove white space between <img> and <figcaption>  **/
}
.pattern-overlay {
	background: url('images/thumbnail-pattern.png') repeat;
	height: 190px;
	width: 270px;
	position: absolute;
	z-index: 1;
}
.thumbnail:nth-child(3n+2) /** Select only the the middle images (2,5,...etc)**/ {
	margin: 0 23px;
}
.thumbnail:nth-child(-n+3) /** Select only the first 3 images **/ {
	margin-bottom: 33px;
}
.thumbnail figcaption {
	background: rgba(136,184,88,0.9);
	margin: 10px;
	border-radius: 3px;
	padding: 10px;
	width: 230px;
	color: #fff;
	font-size: 10pt;
}
.thumbnail figcaption h3 {
	font-size: 14pt;
	font-weight: normal;
}
.thumbnail figcaption p, .thumbnail figcaption h3 {
	margin: 3px;
	padding: 0;
}
.thumbnail-1 figcaption {
	margin: 0 10px 0 10px;
}
.thumbnail-2 figcaption {
	height: 150px;
	position: absolute;
	top: -190px;
}
.thumbnail-3 figcaption {
	transform: scale(0);
	height: 150px;
	opacity: 0;
	position: absolute;
	top: 0;
}
.thumbnail-4 figcaption {
	transform: rotate(-180deg);
	overflow: hidden;
	max-height: 150px;
	position: relative;
}
.thumbnail-4 figcaption p {
	transform: scale(3);
	opacity: 0;
}
.thumbnail-5 img {
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 1, .5);
	position: relative;
	z-index: 1;
}
.thumbnail-5 figcaption {
	margin: 0;
	border-radius: 0;
	width: 250px;
}
.thumbnail-6 figcaption {
	top:0;
	position: absolute;
	height: 150px;
	transform: scale(0);
	transform-origin: 0 0;
	opacity: 0;
}
.thumbnail-6, .thumbnail-6 img {
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 1, .5);
}
/* Footer */
footer {
	width: 960px;
	text-align: center;
	margin: 0 auto;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: 1px 1px 0px #fff;
	font-size: 10pt;
}
h1{
	font-family:"Old Stamper";
	font-size: 36px;
	color: #C00;
	text-align: center;
}
p{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 10px;
}
.image{
	margin-left: 150px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #FFF;
}
#fieldset
{
	border: #F00;
	border-style: double;
	float: left;
	width: 460px;
}
.box1
{
	margin: 10px;
	float: left;
	width: 200px;
	height: 200px;
}
.box1 p{
	font-family:"Times New Roman", Times, serif;
	font-size: 14px;
	color: #FFF;
	background-color: #000;
}
.box2 p{
	font-family:"Times New Roman", Times, serif;
	font-size: 14px;
	color: #FFF;
	background-color: #000;
}
.box2
{
	margin: 10px;
	float: right;
	width: 200px;
	height: 200px;
}
.box3 p{
	font-family:"Times New Roman", Times, serif;
	font-size: 14px;
	color: #FFF;
	background-color: #000;
}
.box3
{
	margin: 10px;
	float: left;
	width: 200px;
	height: 200px;
}
#navigation ul li
{
	display: block;
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 36px;
}
#navigation ul li a
{
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}
#navigation ul li a:hover
{
	background-color: #F00;
	border: 1px solid #000;
}
p
{
	margin: 10px;
	height: auto;
}
#products {
	margin: 10px;
	float: left;
	height: 800px;
	width: 700px;
	border: 1px solid #000;
}
.productbox {
	margin: 10px;
	height: 150px;
	width: 680px;
}
.productphoto {
	background-color: #000;
	margin: 10px;
	float: left;
	height: 130px;
	width: 130px;
}
.productbox h3 .productbox h4
{
	margin-bottom: 5px;
	margin-top: 10px;
	font-size: 18px;
	font-family: "Comic Sans MS", cursive;
	color: #CCC;
}
.productbox p
{
	margin-bottom: 5px;
	margin-top: 0px;
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color: #0C0;
}
a:link 
{
	color: #009;
}/* unvisited link */
a:visited 
{
	color: #009;
} /* visited link */
a:hover 
{
	color: #000;
}   /* mouse over link */
a:active 
{
	color: #909;
}  /* selected link */

h1
{
	font-family: "Comic Sans MS", cursive;
	font-size:24px;
	color: #F00;
}
.rightcontent
{
	width: 400px;
	height: auto;
	float: right;
	margin-right: 5px;
	margin-top: 10px;
	margin-left: 10px;
}
.rightcontent h3
{
	margin: 0px;
	font-size: 20px;
	color: #00F;
	font-weight: bold;
	font-style: italic;
	font-family: Tahoma, Geneva, sans-serif;
}
.rightcontent p
{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	text-align: justify;
}
.indexcontent
{
	width: 480px;
	height: auto;
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	margin-left: 5px;
	
}
.indexcontent h2
{
	margin: 0px;
	font-family: Tahoma, Geneva, sans-serif;
}
.indexcontent p
{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 20px;
	text-align: justify;
}
.indexcontent img
{
	float: left;
	margin-right: 5px;
}
.video
{
	width: 380px;
	height: 260px;		
	margin: 10px;
	float: right;
}
#fieldset
{
	border: #F00;
	border-style: double;
	float: right;
	width: 460px;
}
.imgthumb
{
	width: 138px;
	height: 100px;
	border: 1px solid #000;
	margin: 10px;
	float: left;
}
.imgthumb:hover
{
	box-shadow: 0px 0px 10px #CC0000;
}
.imgthumb img
{
	border: none;
}
#photocontainer
{
	width: 960px;
	height: 750px;
	overflow: scroll;
}
.portfolio
{
	width: 960px;
}