/* Style reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
center,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-family: 'Segoe UI', HelveticaNeue, Helvetica, Arial, sans-serif;
	color: #333333;
	/* vertical-align: baseline; */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { font-size: 12px; line-height: 1.2; background-color: #ffffff; -webkit-text-size-adjust: none; }

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

b, strong { font-weight: bold; }
i, em { font-style: italic; }
u { text-decoration: underline; }

input, select, option, textarea { font-family: 'Segoe UI', HelveticaNeue, Helvetica, Arial, sans-serif; vertical-align: baseline; font-size: 13px; color: #333333; }
input, select { margin-bottom: 2px; }

a, a:active, a:visited, a:hover { font-weight: normal; text-decoration: none; color: #2160b9; }
a:hover { text-decoration: underline; color: #2c7ced; }

h1 { display: none; font-size: 1px; color: #000000; }

/* Site Header */
#Header
{
	/* For some reason there is some unwanted spacing between the header and the content. Eliminate it! */
	margin-bottom: -10px;
}

#HeaderBar { height: 128px; background-image: url('/Images/HeaderBackground.png'); background-repeat: repeat-x; }

#HeaderBlock
{
	max-width: 640px;
	margin: 0 auto;
	padding-left: 60px;
	padding-right: 60px;
	position: relative;
}

#Logo { width: 560px; height: 128px; background-image: url('/Images/HeaderLogo.png'); background-repeat: no-repeat; position: absolute; top: 0px; left: 70px; }

#MenuBar
{
	position: relative;
	background: #080808; /* Non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#080808'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#080808)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #303030,  #303030); /* for firefox 3.6+ */
	background: -ms-linear-gradient(top,  #303030,  #080808); /* for IE10 */

	margin-bottom: 10px;
}

#MenuBlock { max-width: 1200px; border: 0; margin-left: auto; margin-right: auto;  }

#Menu
{
	max-width: 640px;
	margin: 0 auto;
	padding-left: 44px;
	padding-right: 76px;
}

#Menu ul li { margin: 0; padding: 0; list-style: none; display: inline-block; padding: 8px 0px 10px 0px; color: #ffffff; font-size: 19px; }
#Menu ul li:hover
{
	background: #484848; /* Non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b5b5b', endColorstr='#343434'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#5b5b5b), to(#343434)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #5b5b5b,  #343434); /* for firefox 3.6+ */
	background: -ms-linear-gradient(top,  #5b5b5b,  #343434); /* for IE10 */
	cursor: pointer;
}
#Menu ul li a:link, #Menu ul li a:active, #Menu ul li a:visited, #Menu ul li a:hover { text-decoration: none; color: #f0f0f0; padding: 8px 16px 10px 16px; }


/* Site Footer */
#Footer { padding: 15px 0px 5px 0px; background-color: #f5f5f5; border-top: solid 1px #e8e8e8; }
#Footer div { text-align: center; font-size: 13px; color: #333333; padding-bottom: 10px; }

#Footer a, #Footer a:active, #Footer a:visited, #Footer a:hover { font-size: 13px; font-weight: normal; text-decoration: none; color: #2c7ced; }
#Footer a:hover { text-decoration: underline; color: #2c7ced; }


/* Posts */
#Content
{
	max-width: 1200px;
	margin: 0 auto;
	min-width: 300px;
	min-height: 400px;
	padding-top: 5px;
}

#Content article > *
{
	max-width: 640px;
	margin: 0 auto;
	padding-left: 60px;
	padding-right: 60px;
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 1.5;
}

#Content article > header h2, #Content article > header h2 a:link, #Content article > header h2 a:active, #Content article > header h2 a:visited, #Content article > header h2 a:hover { font-size: 28px; text-decoration: none; color: #2160b9; }
#Content article > header h2 a:hover { text-decoration: underline; color: #2c7ced; }

#Content article > header h3, #Content article > header h3 a:link, #Content article > header h3 a:active, #Content article > header h3 a:visited, #Content article > header h3 a:hover { font-size: 20px; text-decoration: none; color: #2160b9; }
#Content article > header h3 a:hover { text-decoration: underline; color: #2c7ced; }

#Content article > header div { font-size: 15px; line-height: 0.5; color: #808080; padding-top: 5px; }

#Content article > header small { display: block; font-size: 15px; line-height: 1.2; color: #808080; padding-top: 0; margin-top: 0px; margin-bottom: -4px; }
#Content article > header small a { font-size: 13px; color: #a0a0a0; vertical-align: central; margin-right: 10px; }
#Content article > header small span { font-size: 13px; color: #7eacef; margin: 0px 5px 0px 12px; }

#Content article > h3 { font-size: 26px; line-height: 1.5; text-decoration: none; color: #333333; margin-bottom: 16px; }
#Content article > h4 { font-size: 24px; line-height: 1.5; text-decoration: none; color: #333333; margin-bottom: 16px; }
#Content article > h5 { font-size: 22px; line-height: 1.5; text-decoration: none; color: #333333; margin-bottom: 16px; }
#Content article > h6 { font-size: 20px; line-height: 1.5; text-decoration: none; color: #333333; margin-bottom: 16px; }

#Content article > ul li { margin-left: 40px; list-style-type: disc; font-size: 18px; line-height: 1.5; }
#Content article > ol li { margin-left: 40px; list-style-type: decimal; font-size: 18px; line-height: 1.5; }

#Content article > pre { font-family: 'Lucida Console', 'Courier New', Courier, monospace; font-size: 14px; white-space: pre-wrap; overflow-wrap: break-word; }

#Content article > p { overflow-wrap: break-word; }

#Content article > p > img, #Content article > p > a > img
{
	display: block;
	max-width: 100%;
	padding: 0;
	margin: 20px auto 20px auto;
}

#Content article > img
{
	display: block;
	max-width: 100%;
	padding: 0;
	margin: 20px auto 20px auto;
}

img.right
{
	padding: 0 !important;
	margin: 8px 0px 2px 10px !important;
	float: right !important;
}

img.caption { margin-bottom: 4px !important; }
img.caption + small { display: block; text-align: center; color: #606060; font-size: 16px }

.ArchiveTags a, .ArchiveTags a:active, .ArchiveTags a:visited, .ArchiveTags a:hover { font-weight: normal; text-decoration: none; color: #2160b9; font-size: 16px; line-height: 1.6; margin-right: 10px; display: inline-block; white-space: nowrap; }
.ArchiveTags a:hover { text-decoration: underline; }

.SearchInput { font-size: 18px; width: 400px; padding: 4px 4px 4px 4px; }
.SearchButton { font-size: 18px; padding: 4px 8px 4px 8px; }
.SearchMessage { font-size: 20px !important; margin-top: -10px !important; font-style: italic; line-height: 1.5; text-decoration: none; color: #606060; }

.Separator { width: 70px; height: 50px; background-image: url('/Images/Separator.png'); background-repeat: no-repeat; background-position: center top; background-size: 70px 25px; -webkit-background-size: 70px 25px; margin-left: auto; margin-right: auto; }



/* Narrow screen (max 640px) */
@media screen and (max-width: 640px)
{
	#HeaderBlock, #MenuBlock, #Content article > *
	{ padding-left: 40px; padding-right: 40px; }

	#HeaderBar { height: 64px; background-image: url('/Images/HeaderBackgroundSmall.png'); background-size: 800px 64px; -webkit-background-size: 800px 64px; }
	#Logo { width: 280px; height: 64px; background-image: url('/Images/HeaderLogoSmall.png'); background-size: 280px 64px; -webkit-background-size: 280px 64px; left: 40px; }

	#Menu { margin: 0; padding: 0; margin-left: -7px }
	#Menu ul li { padding: 4px 0px 6px 0px; font-size: 16px; }
	#Menu ul li a:link, #Menu ul li a:active, #Menu ul li a:visited, #Menu ul li a:hover { padding: 4px 8px 6px 8px; }

	#Content article > header small { font-size: 13px; padding-top: 2px; }
	#Content article > header small a { margin-right: 5px; }

	#Content article > p, #Content article > blockquote { font-size: 16px; line-height: 1.35; }
	#Content article > ul li, #Content article > ol li { font-size: 16px; line-height: 1.35; }
	#Content article > header h2, #Content article > header h2 a:link, #Content article > header h2 a:active, #Content article > header h2 a:visited, #Content article > header h2 a:hover { font-size: 26px; }
	#Content article > header h3, #Content article > header h3 a:link, #Content article > header h3 a:active, #Content article > header h3 a:visited, #Content article > header h3 a:hover { font-size: 16px; }
	#Content article > header h3 { font-size: 24px; line-height: 1.35; }
	#Content article > header h4 { font-size: 22px; line-height: 1.35; }
	#Content article > header h5 { font-size: 20px; line-height: 1.35; }
	#Content article > header h6 { font-size: 18px; line-height: 1.35; }
	#Content article > pre { font-size: 12px; }

	img.right { max-width: 50% !important }
	img.caption + small { font-size: 13px }

	#Content article > h3 { font-size: 20px; line-height: 1.35; }

	.ArchiveTags a, .ArchiveTags a:active, .ArchiveTags a:visited, .ArchiveTags a:hover { font-size: 14px; margin-right: 8px; }

	.SearchInput { font-size: 14px; width: 280px; padding: 2px 2px 2px 2px; }
	.SearchButton { font-size: 14px; padding: 2px 2px 2px 2px; }
	.SearchMessage { font-size: 16px !important; margin-top: -15px !important; }
}

/* Small screen (max 400px) */
@media screen and (max-width: 480px)
{
	#HeaderBlock, #MenuBlock, #Content article > *
	{ padding-left: 15px; padding-right: 15px; }

	#HeaderBar { height: 64px; background-image: url('/Images/HeaderBackgroundSmall.png'); background-size: 800px 64px; -webkit-background-size: 800px 64px; }
	#Logo { width: 280px; height: 64px; background-image: url('/Images/HeaderLogoSmall.png'); background-size: 280px 64px; -webkit-background-size: 280px 64px; left: 15px; }

	#Menu ul li a:link, #Menu ul li a:active, #Menu ul li a:visited, #Menu ul li a:hover { font-size: 15px; }

	#Content article > blockquote { margin-left: 15px; padding-left: 10px; }

	#Content article > header { margin: 0px 0px 6px 0px; }
	#Content article > header small a { margin-right: 5px; }

	.SearchInput { width: 200px; }
	.SearchMessage { font-size: 14px; }
}

/* HiRes assets (120 DPI works only on DPR > 1, 96 DPI works on DPR=1 too) */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 120dpi)
{
	#HeaderBar { background-image: url('/Images/HeaderBackground@2x.png'); background-size: 800px 128px; -webkit-background-size: 800px 128px; }
	#Logo { background-image: url('/Images/HeaderLogo@2x.png'); background-size: 560px 128px; -webkit-background-size: 560px 128px; }

	.Separator { background-image: url('/Images/Separator@2x.png'); background-size: 70px 25px; -webkit-background-size: 70px 25px; }
}

@media screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 640px) and (min-resolution: 120dpi)
{
	#HeaderBar { height: 64px; background-image: url('/Images/HeaderBackground.png'); background-size: 800px 64px; -webkit-background-size: 800px 64px; }
	#Logo { width: 280px; height: 64px; background-image: url('/Images/HeaderLogo.png'); background-size: 280px 64px; -webkit-background-size: 280px 64px; left: 40px; }
}

@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 400px) and (min-resolution: 120dpi)
{
	#HeaderBar { height: 64px; background-image: url('/Images/HeaderBackground.png'); background-size: 800px 64px; -webkit-background-size: 800px 64px; }
	#Logo { width: 280px; height: 64px; background-image: url('/Images/HeaderLogo.png'); background-size: 280px 64px; -webkit-background-size: 280px 64px; left: 15px; }
}