/* -----------------------------------------------------------------------
	Webfonts
----------------------------------------------------------------------- */

@font-face {
	font-family: 'Webfont';
    src: url('webfont/BreeSerif-Regular-webfont.eot');
    src: url('webfont/BreeSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont/BreeSerif-Regular-webfont.woff') format('woff'),
         url('webfont/BreeSerif-Regular-webfont.ttf') format('truetype'),
         url('webfont/BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'Webfont';
		src: url('webfont/BreeSerif-Regular-webfont.svg#BreeSerifRegular') format('svg');
	}
}


/* -----------------------------------------------------------------------
	Blog
----------------------------------------------------------------------- */
.bloghead, .blog {
	float: left;
}
.bloghead {
	width: 22%;
	padding: 10em 2em 0 0;
	background: url(/cosmea/public/info/resources/img/emx/blog/emxblog.png) no-repeat 1.2em 0;
	text-align: right;
}
.bloghead a {
	text-transform: uppercase;
	font-size: 230%;
	line-height: 150%;
	word-spacing: 70px;
	text-decoration: none;
	font-family: 'Webfont';
}
.bloghead a span {
	display: block;
	height: 1.5em;
}
.blog h1 a, .blog h2 a { color: #444; }
.blog {
	width: 77%;
	padding: 0 3em;
	border-left: 1px solid #ccc;
	border-left: 1px solid rgba(200, 200, 200, 0.5);
	margin-bottom: 3em;
}
.blog article { margin-bottom: 2em;/*4em;*/ }
.blog time {
	color: #90b12a;
	font-family: 'Webfont';
	margin-bottom: 0.7em;
	display: block;
}
.blog h2 { font-size: 140%; }
.blog a { color: #90b12a; }
.blog .tags, .blog .tags a { color: #aaa; }
.blog .tags a {
	text-decoration: none;
	font-size: 88%;
	cursor: pointer;
	padding-left: 1.4em;
	background: url(/cosmea/public/info/resources/img/emx/blog/tag.png) no-repeat 0.2em center;
}
.blog .tags a:hover { text-decoration: underline; }
.blog nav { text-align: center; vertical-align: top; }
.blog nav a {
	text-decoration: none;
	color: #444;
	font-family: 'Webfont';
	font-size: 140%;
	margin: 0 1em;
}
.blog nav a.back {
	background: url(/cosmea/public/info/resources/img/emx/blog/back.png) no-repeat 0 center;
	padding: 0.2em 0 0.2em 1.7em;
}
.blog nav a.prev {
	background: url(/cosmea/public/info/resources/img/emx/blog/prev.png) no-repeat 0 center;
	padding: 0.2em 0 0.2em 1.7em;
}
.blog nav a.next {
	background: url(/cosmea/public/info/resources/img/emx/blog/next.png) no-repeat right center;
	padding: 0.2em 1.7em 0.2em 0;
}
.blog nav a:hover { color: #90b12a; }
.blog figure {
	width: 100%;
	height: 15em;
	overflow: hidden;
	margin: 1em auto;
}
.blog p + figure { margin-top: 2em; }
.blog .caption {
	margin: -0.5em auto 2em auto;
	font-size: 88%;
}



/* -----------------------------------------------------------------------
	Zooooom View
----------------------------------------------------------------------- */
.zoom .bloghead {	background-image: url(/cosmea/public/info/resources/img/emx/blog/emxblog@xl.png); }
.zoom .blog .tags a { background-image: url(/cosmea/public/info/resources/img/emx/blog/tag@xl.png); }
.zoom .blog nav a.back { background-image: url(/cosmea/public/info/resources/img/emx/blog/back@xl.png); }
.zoom .blog nav a.prev { background-image: url(/cosmea/public/info/resources/img/emx/blog/prev@xl.png); }
.zoom .blog nav a.next { background-image: url(/cosmea/public/info/resources/img/emx/blog/next@xl.png); }



/* -----------------------------------------------------------------------
	MEDIA QUERIES
----------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.blog nav a.back { background-image: url(/cosmea/public/info/resources/img/emx/blog/back@xl.png); }
	.blog nav a.prev { background-image: url(/cosmea/public/info/resources/img/emx/blog/prev@xl.png); }
	.blog nav a.next { background-image: url(/cosmea/public/info/resources/img/emx/blog/next@xl.png); }
	.blog .tags a { background-image: url(/cosmea/public/info/resources/img/emx/blog/tag@xl.png); }
	.bloghead { background-image: url(/cosmea/public/info/resources/img/emx/blog/emxblog@xl.png); }
}

@media screen and (max-width: 980px) {
	.bloghead { background-position-x: 0; padding-top: 10.5em; }
	.bloghead a { font-size: 205%; }
}
@media screen and (max-width: 800px) {
	.bloghead, .blog {
		float: none;
		display: block;
		width: 100%;
	}
	.blog {
		padding: 0;
		border-left: none;
	}
	.bloghead {
		text-align: left;
		padding-top: 0.5em;
		padding-bottom: 4em;
		margin-bottom: 3em;
		background: url(/cosmea/public/info/resources/img/emx/blog/emxblog.png) no-repeat 6.7em -13em;
		border-bottom: 1px solid #ccc;
		border-bottom: 1px solid rgba(200, 200, 200, 0.5);
	}
	.bloghead a {
		text-transform: uppercase;
		font-size: 230%;
		xline-height: 150%;
		vertical-align: top;
		word-spacing: normal;
		text-decoration: none;
		font-family: 'Webfont';
		word-spacing: 0.2em;
	}
	.bloghead a span {
		display: -moz-inline-stack;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		zoom: 1;
		*display: inline;
		width: 3.1em;
	}
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 400px) {
	.bloghead a {
		text-transform: uppercase;
		font-size: 220%;
	}
	.bloghead {
		background: url(/cosmea/public/info/resources/img/emx/blog/emxblog.png) no-repeat 6em -12.5em;
	}
	.blog nav a {
		font-size: 120%;
		display: -moz-inline-stack;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		zoom: 1;
		*display: inline;
	}
}