/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
	color: #222;
}

body {
	font-size: 1em;
	line-height: 1.4;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

img {
	vertical-align: middle;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

.chromeframe {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
	font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

.wrapper {
	width: 90%;
	margin: 0 5%;
}

header nav ul {
	margin: 25px 0 0;
	padding: 0;
}

header nav a {
	display: block;
	margin-bottom: 10px;
	padding: 15px 0;

	text-align: center;
	text-decoration: none;
	font-weight: bold;

	color: white;
	background: #c43c3c;
	border-radius: 5px;
}

nav a:hover,
nav a:visited {
	color: white;
}

nav a:hover {
	text-decoration: underline;
}

.main {
	padding: 0 0 30px;
}

.main article h1 {
	font-size: 2em;
}

.footer-container footer {
	color: white;
	padding: 20px 0;
}

/* IE Fixes */

.ie7 .title {
	padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.title {
	background: url(../img/juzidian-icon.png) no-repeat 4em 0;
	margin: 25px 0 0;
	padding: 14px 0 0;
	line-height: 72px;
	font-size: 2.3em;
}

.sub-title {
	color: #444;
	display: block;
	font-size: 0.5em;
	line-height: 18px;
}

a.title-link {
	color: #222;
	text-decoration: none;
}

.footer-container {
	padding-bottom: 20px;
	background: none repeat scroll 0 0 #444;
}

.footer-container a {
	color: white;
	font-weight: bold;
	text-decoration: none;
}

.footer-container a:hover {
	text-decoration: underline;
}

.footer-container a:hover,
.footer-container a:visited {
	color: white;
}

.footer-container ul {
	margin: 0;
	padding: 0;
}

.footer-container nav li {
	display: inline;
	margin-right: 1em;
}

.footer-container nav a {
	display: inline-block;
	padding: 0.5em 0;
}

.footer-container nav {
	margin-bottom: 25px;
}

.footer-container .disclaimers {
	font-size: 0.8em;
	line-height: 1.3em;
}

article img {
	padding: 35px 10px;
	margin-left: 15px;
	background-color: black;
	border-radius: 5px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

	header nav a {
		float: left;
		width: 27%;
		margin: 0 1.7%;
		padding: 25px 2%;
		margin-bottom: 0;
	}

	nav li:first-child a {
		margin-left: 0;
	}

	nav li:last-child a {
		margin-right: 0;
	}

	.footer-container footer {
		overflow: auto;
	}

	.footer-container .disclaimers {
		width: 40%;
	}

	.footer-container nav {
		width: 60%;
		float: right;
	}

	.footer-container nav li {
		display: list-item;
		margin-left: 4em;
	}

	/* IE Fixes */

	nav ul li {
		display: inline;
	}

	.oldie nav a {
		margin: 0 0.7%;
	}
}

@media only screen and (min-width: 768px) {

	.title {
		float: left;
	}

	header nav {
		float: right;
		width: 42%;
		margin-right: 20%;
	}

	.main {
		padding-top: 15px;
	}

	.main article {
		float: left;
		width: 65%;
	}

	article img {
		float: right;
	}

}

@media only screen and (min-width: 1140px) {

	.wrapper {
		width: 1026px; /* 1140px - 10% for margins */
		margin: 0 auto;
	}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}