/*-------------------------------------------------
  responsive.css - mobile support and semantic header/footer
  (loaded after default_right.css)
-------------------------------------------------*/
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: #505050; color: #222; }
img { max-width: 100%; height: auto; }
.contentbody { overflow-wrap: anywhere; }
.contentbody img, .contentbody video, .contentbody iframe { max-width: 100%; }
.contentbody img { height: auto; }
.contentbody pre { overflow-x: auto; max-width: 100%; }

/* skip link (visible on focus only) */
.skiplink { position: absolute; left: -9999px; top: 0; background: #fff; padding: 6px 10px; z-index: 10; }
.skiplink:focus { left: 0; }

/* page header: same look as the former yellow bar */
#sitehead
{
	width: 784px;
	box-sizing: border-box;
	background: #FCD21B;
	text-align: center;
	padding: 10px 0;
	border: 2px solid #E0E0E0;
	border-bottom: 0;
	margin: 0 auto;
}
#sitehead .sitelogo { display: block; line-height: 0; }
#sitehead .sitelogo img { max-width: 100%; height: auto; }
#sitehead .sitetitle { font-size: 18px; font-weight: bold; margin: 6px 0 2px; font-family: inherit; }
#sitehead h1.sitetitle { font-size: 18px; }
#sitehead .sitenav a { display: inline-block; padding: 2px 6px; }
#sitehead a:link, #sitehead a:visited { color: #3A3523; }
#sitehead a:hover, #sitehead a:active { color: #000; text-decoration: underline; }

/* page footer */
#sitefoot
{
	width: 784px;
	box-sizing: border-box;
	background: #FCD21B;
	text-align: center;
	padding: 10px 0;
	border: 2px solid #E0E0E0;
	border-top: 0;
	margin: 0 auto;
}
#sitefoot p { margin: 4px 10px; }
#sitefoot a:link, #sitefoot a:visited { color: #3A3523; text-decoration: underline; }

/* item title is now an h1 on item pages */
.contenttitle h1
{
	clear: both;
	background: url(images/dot.gif) bottom repeat-x;
	font-size: 17px;
	line-height: 1.4;
	padding: 0 0 6px 0;
	margin: 0;
}
.entry-meta { margin: 4px 0 0; font-size: 12px; }
.contenttitle h2 { line-height: 1.4; }

/*-------------------------------------------------
  Tablet / phone
-------------------------------------------------*/
@media (max-width: 840px)
{
	body { padding: 0; font-size: 15px; }
	#sitehead, #mainwrapper, #wrapper, #container, #sitefoot, .clearing
	{
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	#sitehead { padding: 8px 6px; }
	#sitehead .sitenav a { padding: 8px 8px; }
	#wrapper { background-image: none; overflow: hidden; }
	#container { float: none; margin-right: 0; height: auto; }
	.content { margin: 8px 14px 22px; }
	#sidebarcontainer { float: none; width: auto; clear: both; padding: 0; }
	.sidebar { margin: 0 10px 10px; }
	.contentbody { font-size: 16px; line-height: 1.8; text-align: left; }
	.contenttitle h1 { font-size: 20px; }
	.contenttitle h2 { font-size: 17px; }
	.contentbody table { display: block; max-width: 100%; overflow-x: auto; }
	.contentbody img { max-width: 100% !important; height: auto !important; }
	.sidebardl dd a:link, .sidebardl dd a:visited { display: block; padding: 8px 0 8px 12px; }
	.sidebar-headlines ul li a:link, .sidebar-headlines ul li a:visited { padding: 8px 0 8px 12px; }
	.searchform .formfield { width: 62%; min-height: 36px; }
	.searchform .formbutton { min-height: 36px; width: 30%; }
	.formfield, .formbutton { font-size: 16px; }
	#sitefoot p { margin: 8px 10px; line-height: 1.8; }
}
@media (max-width: 480px)
{
	.content { margin: 8px 10px 18px; }
	.contentitem1, .contentitem2 { display: block; background: none; padding: 2px 0; }
}