ldview/resources/css/layout.css

body
{
	font-family: Verdana;
	background-color: #eee;
}

#list
{
	overflow: scroll;

	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: blue;
	color: white;

	/*transition-property: width;
	transition-duration: .3s;
	transition-timing-function: linear;*/
}

#detail
{
	position: fixed;
	right: 0;
	top: 0;
	width: 0%;
	height: 100%;
	background-color: green;
	color: white;

	/*transition-property: width;
	transition-duration: .3s;
	transition-timing-function: linear;*/
}

body.opened #list
{
	width: 50%;

	/*transition-property: width;
	transition-duration: .3s;
	transition-timing-function: linear;*/
}

body.opened #detail
{
	width: 50%;

	/*transition-property: width;
	transition-duration: .3s;
	transition-timing-function: linear;*/
}

#entries
{
	width: 100%;
}

	#entries tr td
	{
		background-color: white;
	}

	#entries tr td img
	{
		width: 100%;
	}

#close
{
	padding: 10px;
	background-color: red;
	color: white;
}

div.entry
{
	width: 20%;
	float: left;
}

	div.entry:hover
	{
		cursor: pointer;
	}

	div.entry img
	{
		width: 100%;
	}

div#games
{

}

	div#games div.entry
	{
		display: block;
		border: 2px solid red;
		width: 200px;
		height: 200px;
		margin: 0 20px 20px 0;
	}

		div#games div.entry img
		{
			display: block;
			width: 200px;
			height: 200px;
		}

div#overlay
{
	position: fixed;
	border: 2px solid red;
	left: 100px;
	top: 50px;
	width: 800px;
	height: 600px;
	background-color: white;
	z-index: 500;
	box-shadow: 0 0 40px #333;
}

	div#overlay div.content img
	{
		position: absolute;
		left: 0;
		top: 0;
		width: 800px;
		height: 600px;
	}

	div#overlay div.content
	{
		position: absolute;
		
		bottom: 10px;
		left: 10px;
		right: 10px;

		background-color: white;
		opacity: .75;
		padding: 20px;
	}

		div#overlay div.content h1
		{
			margin: 0;
		}

		div#overlay div.content h2
		{
			margin: 0;
			font-weight: normal;
		}

	div#overlay button
	{
		position: absolute;

		right: 10px;
		top: 10px;

		padding: 20px;
	}