/* body */

html, body {
	margin: 0;
	font-size: 14.5px;
}

body {
	font-family: Verdana, Arial;
	background-color: #F3F3F3;
}

/* h2 */

h2 {
	font-family: Times New Roman, Georgia, serif;
	font-weight: normal;
	font-size: 1.7em;
	border-bottom: 1px solid #e5e5e5;
	padding-top: 16px;
	padding-bottom: 4px;
	margin-bottom: -1px;
}

.links {
	margin-top: 24px;
}

.separator {
	color: #d7d7d7;
	margin-left: 8px;
	margin-right: 8px;
}

/* pre */

pre {
	font-family: Consolas, Courier New;
}

/* a */

a {
	color: #0061ff;
}

/* img */

img {
	border: 0;
}

a:active, a:hover {
	color: #0000ff;
}

/* blockquote */

blockquote {
	border-left: double 3px #cccccc;
	padding: 20px;
	padding-right: 60px;
}

/* .error-block */

.error-block {
	overflow: scroll;
	width: 100%;
	height: 300px;
	border: inset 1px #cccccc;
	font-size: 12px;
	background-color: white;
}

/* .version */

.version {
	font-size: 11px;
	font-style: italic;
}

/* .spaced */

.spaced {
	margin: 0 10px;
}

/* .header */

.header {
	height: 50px;
	background-color: #FFFFFF;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
}

	.header img {
		margin: 12px 0 10px 20px;
	}

/* .content */

.content {
	width: 720px;
	margin: 0 auto;
}

/* .row */

.row {
	text-align: center;
}

	.row:after {
		content: "";
		display: table;
		clear: both;
	}


.add-pad {
	padding-top: 20px;
	padding-bottom: 12px;
}

/* .col */

.col {
	float: left;
	margin: 0;
}

.col-full {
	width: 100%;
}

.col-half {
	width: 49%;
}

.col-third {
	width: 32%;
}

.row .col {
	margin: 1%;
}

	.row .col:first-child, .row .col:nth-child(3n+1) {
		margin-left: 0;
	}

	.row .col:last-child {
		margin-right: 0;
	}

/* .block */

.block {
	background-color: #FFFFFF;
	padding: 30px 30px;
	border-radius: 5px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.20);
	height: 270px;
}

	.block:hover, .block:active {
		cursor: pointer;
		background-color: #F9F9F9;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.30);
	}

	.block img {
		display: block;
		margin: 0 auto;
		padding-top: 8px;
		padding-bottom: 20px;
	}

	.block .label {
		display: block;
		margin: 0 auto 20px auto;
		font-size: 1.5em;
	}

	.block .note {
		display: block;
		margin: 0 auto;
		font-size: 0.9em;
		line-height: 135%;
	}

/* .footer */

.footer {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	color: #929292;
	font-size: .6em;
}

/* media query: smartphones */

@media only screen and (max-width: 768px) {
	.content {
		width: 100% !important;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.row .col {
		margin: 5px 0 !important;
	}

	.col-half, .col-third {
		width: 100% !important;
	}

	.col-third {
		width: 32.6666%;
	}

	.spaced {
		display: block;
	}
}