@CHARSET "ISO-8859-1";

#main
{
	width: 100%;
	margin: 0;
}

#main h1
{
	margin-top: 2ex;
	clear: both;
	float: none;
}

#blog-list
{
	margin-top: 4ex;
}

.blog-entry
{
	position: relative;
	clear: none;
	float: left;
	margin: 0 10px 20px 0;
	width: calc(50% - 10px);
}

.blog-entry:nth-child(odd)
{
	clear: both;
}

.blog-entry > a,
.blog-entry > span
{
	display: block;
	float: left;
	clear: none;
	width: 200px;
}

.blog-entry > a > img,
.blog-entry > span > img
{
	width: 100%;
	height: auto;
	margin: 4px 0 0;
}

.blog-entry .blog-text
{
	clear: none;
	float: left;
	width: calc(100% - 220px);
	padding: 0 0 0 16px;
}

.blog-entry .blog-text h2
{
	padding-bottom: 1.25ex;
}

.blog-entry .blog-text h2,
.blog-entry .blog-text h2 a
{
	font-size: 12.5pt;
	color: #edbd56 !important;
}

.blog-entry .blog-text
{
	color: #ccc;
	font-size: 10pt;
}

.blog-entry .blog-text p
{
	line-height: 133%;
}

@media only screen and (max-width: 1280px)
{
	.blog-entry
	{
		margin-right: 5px;
		width: calc(50% - 5px);
	}

	.blog-entry > a,
	.blog-entry > span
	{
		width: 15vw;
	}

	.blog-entry .blog-text
	{
		width: calc(100% - 214px);
		padding-left: 10px;
	}
}

@media only screen and (max-width: 1104px)
{
	.blog-entry
	{
		clear: both;
		float: left;
		margin: 0 0 20px 0;
		width: 100%;
	}

	.blog-entry > a,
	.blog-entry > span
	{
		width: 25vw;
	}

	.blog-entry .blog-text
	{
		width: calc(100% - 25vw - 40px);
		padding-left: 25px;
	}
}

@media only screen and (max-width: 752px)
{
	.blog-entry .blog-text
	{
		width: calc(100% - 25vw - 30px);
		padding-left: 15px;
	}
}

@media only screen and (max-width: 480px)
{
	.blog-entry .blog-text
	{
		width: 100%;
		padding: 0;
	}

	.blog-entry .blog-text p
	{
		width: 100%;
		margin: 0;
		padding-top: 208px;
	}

	.blog-entry > a,
	.blog-entry > span
	{
		position: absolute;
		top: 24px;
		left: 0;
		width: 100%;
		text-align: center;
	}

	.blog-entry.blog-entry-long-title > a
	{
		/*top: 36px;*/
	}

	.blog-entry > a img,
	.blog-entry > span img
	{
		height: 192px;
		width: auto;
	}

	.blog-entry.mode1 > a
	{
		top: 38px;
	}
}

@media only screen and (max-width: 452px)
{
	.blog-entry.mode2 > a
	{
		top: 38px;
	}	
}

@media only screen and (max-width: 360px)
{
	.blog-entry > a img,
	.blog-entry > span img
	{
		height: 128px;
	}
	
	.blog-entry .blog-text p
	{
		padding-top: 144px;
	}
}

@media only screen and (max-width: 344px)
{
	.blog-entry.mode3 > a
	{
		top: 38px;
	}	

	.blog-entry.mode1 > a
	{
		top: 56px;
	}	
}