html
	{background:#fff url("../images/chrysler.png") no-repeat 100px 100%;
	height:100%;}

body
	{position:relative;
	max-width:1170px;
	height:100%;
	color:#656254;
	font-family:"lucida console", tahoma, arial, helvetica, sans-serif;
	font-size:90%;
	margin:0;}

section
	{float:left;
	width:400px;
	padding:20px;}

h1
	{font:1.8em bold Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, Georgia, serif;
	text-transform:uppercase;
	text-shadow:2px 2px 5px rgba(0,0,0,0.35);
	margin:0;}

ul
	{overflow:auto;
	list-style:none;
	padding:0;
	margin:40px 0;}

ul#categories
	{padding-bottom:5px;}

ul#categories li
	{float:left;
	clear:left;
	color:#f90;
	padding:0.1em 0.3em;
	margin-top:0.2em;
	-moz-transition:all ease 1s;
	-webkit-transition:all ease 1s;
	transition:all ease 1s;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;}

ul#categories li.seen /* 'seen' class to be set by JS */
	{color:#bf7300;}

ul#categories li.seen:hover,
ul#categories li:hover
	{background:#ffcf88;
	color:#656254;
	-moz-box-shadow:2px 2px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.3);
	box-shadow:3px 3px 3px rgba(0,0,0,0.3);}

ul#categories li a
	{color:inherit;
	text-decoration:none;
	text-transform:lowercase;}

figure
	{position:relative;
	float:left;
	width:722px;
	height:547px;
	padding:0;
	margin:30px 0 0;}

figure > img
	{position:absolute;
	display:block;
	opacity:0;
	padding:10px;
	border:1px solid #aaa;
	margin:0 auto;
	-moz-transition:all ease 2s;
	-webkit-transition:all ease 2s;
	transition: all ease 2s;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.4);
	-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.4);
	box-shadow:3px 3px 3px rgba(0,0,0,0.4);}

figure > img:target
	{opacity:1;}

ul#thumbnails
	{overflow:visible;
	width:722px;
	text-align:center;
	margin:562px auto 10px;}

ul#thumbnails li
	{display:inline-block;
	background:#fff;
	line-height:0;
	padding:2px;
	border:1px solid #999;
	margin-left:10px;
	-moz-transition:all ease 0.5s;
	-webkit-transition:all ease 0.5s;
	transition:all ease 0.5s;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;}

ul#thumbnails li:hover
	{border:1px solid #555;
	-moz-box-shadow:2px 2px 3px rgba(0,0,0,0.4);
	-webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.4);
	box-shadow:2px 2px 3px rgba(0,0,0,0.4);}

ul#thumbnails img
	{width:70px;
	height:53px;
	border:0;}

figcaption
	{display:block;
	clear:both;
	text-align:center;
	font-size:0.8em;
	color:#bf7300;
	margin:0 auto;}

footer
	{position:absolute;
	right:0;
	bottom:30px;
	display:block;
	font-size:0.75em;
	line-height:150%;
	text-align:right;
	margin:2.5em 0 0;}

footer p
	{margin:0.35em 0;}

@media screen and (max-width:1024px)
	{
	html
		{-moz-background-size:300px 444px;
		-webkit-background-size:300px 444px;
		background-size:300px 444px;}

	body
		{max-width:962px;}

	figure
		{width:522px;}

	figure > img
		{width:500px;
		height:375px;
		-moz-box-shadow:2px 2px 2px rgba(0,0,0,0.4);
		-webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.4);
		box-shadow:2px 2px 2px rgba(0,0,0,0.4);}

	ul#thumbnails
		{width:522px;
		margin-top:410px;}

	ul#thumbnails li:hover
		{-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4);
		-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4);
		box-shadow:1px 1px 2px rgba(0,0,0,0.4);}

	ul#thumbnails img
		{width:50px;
		height:38px;}
	}