/* --------------------------------------------------------------------------------------
 * html and body
 * -------------------------------------------------------------------------------------- */

	html {
		height: 100%;
		padding-bottom: 1px; /* always show vertical scrollbars */
	}
	body {
		background: #fff url(../images/bgr_body.png) 0 0 repeat-y; color: #444;
		/* font-family: 'Calibri', 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif; */
		font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-size: 14px;
		margin: 0; padding: 0;
		width: 100%;
		height: 100%;
		/* -moz-opacity: 0.999; */ /* fix mac firefox opacity bug */
	}
	@media screen, projection {
		body.w1 {
			background-image: none;
		}
		body.w2 {
			background-image: none;
		}
		body.w3 {
		}
		body#showcase {
			background: #222;
			overflow: auto;
		}
	}
	@media print {
		body {
			background: #fff;
			font-size: 100%;
		}
	}

/* --------------------------------------------------------------------------------------
 * generic classes
 * -------------------------------------------------------------------------------------- */

	.mb-2 {
		margin-bottom: -30px !important;
	}
	.mb-1 {
		margin-bottom: -10px !important;
	}
	.mb0 {
		margin-bottom: 0 !important;
	}
	.mb1 {
		margin-bottom: 20px !important;
	}
	.mb2 {
		margin-bottom: 40px !important;
	}
	.mb3 {
		margin-bottom: 60px !important;
	}
	.mb4 {
		margin-bottom: 80px !important;
	}
	.clear {
		overflow: hidden;
		clear: both;
		display: table;
		height: 0;
		zoom: 1;
	}


/* --------------------------------------
 * media classes
 * -------------------------------------- */

	/*
	reader  = screen reader only  (eg skip links)
	print   = print only          (eg contact infos, references)
	noprint = don't print         (eg navigation)
	*/

	@media screen, projection {
		.reader {
			position: absolute; left: -990em; height: 1em; width: 1em;
			overflow: hidden;
		}
		.print {
			display: none;
			visibility: hidden;
		}
		.nonprint {
			/* nothing */
		}
	}
	@media print {
		.reader {
			display: none;
			visibility: hidden;
		}
		.print {
			display: block;
			visibility: visible;
		}
		.nonprint {
			display: none;
			visibility: hidden;
		}
	}


/* --------------------------------------------------------------------------------------
 * links
 * -------------------------------------------------------------------------------------- */

	a {
		color: #6e8388;
		text-decoration: underline;
		padding: 0.2em;
		margin: 0 -0.2em;
	}
	a:hover,
	a:focus {
		background: #e6edf0;
		text-decoration: underline;
	}
	a:active {
		outline: 0; /* remove dotted borders */
	}
	@media print {
		a {
			color: #46565A !important;
			text-decoration: underline !important;
			padding: 0.2em;
			margin: 0 -0.2em;
		}
	}

	/* external */

	a.external {
		background-image: url(../images/icon_external.png) !important;
		background-position: right 20% !important;
		background-repeat: no-repeat !important;
		padding-right: 11px !important;
	}


/* --------------------------------------------------------------------------------------
 * typo
 * -------------------------------------------------------------------------------------- */

	p {
		font-size: 1em; line-height: 1.8em; font-weight: normal;
		margin: 0 0 1em 0; padding: 0;
	}
	
	h4, h5, h6 {
		font-size: 1em; line-height: 1.8em; font-weight: bold;
		margin: 0 0 0.5em 0; padding: 0;
		color: #46565A;
	}
	h3 {
		font-size: 1.3em; line-height: 1.3em; font-weight: bold;
		margin: 0 0 0.5em 0; padding: 0;
		color: #46565A;
	}
	h2 {
		font-size: 1.5em; line-height: 1.3em; font-weight: bold;
		margin: 0 0 1em 0; padding: 0;
		color: #46565A;
	}
	h1 {
		font-size: 40px; line-height: 1.2em; font-weight: bold;
		margin: 0 0 30px 0; padding: 0;
		color: #46565A;
		position: relative; left: -1px;
	}
	@media screen, projection {
		body.w1 h1 {
			margin-bottom: 0.5em;
		}
		body.w2 h1 {
			margin-bottom: 15px;
		}
	}

	/* -5 gentle px */
	#content p {
		width: 610px; /* 600 + 10 gentle px */
	}
	@media screen, projection {
		body.w1 #content p {
			width: auto;
		}
	}

	/* lists */

	ul,
	ol {
		margin: 0 0 1em 0;
		padding: 0 0 0 2em;
	}
	li {
		line-height: 1.8em;
		margin: 0;
		padding: 0;
	}


/* --------------------------------------------------------------------------------------
 * images
 * -------------------------------------------------------------------------------------- */

	img {
		border: 0;
		padding: 0;
		margin: 0;
		display: block;
	}
	img.inline {
		display: inline;
	}


/* --------------------------------------------------------------------------------------
 * layout
 * -------------------------------------------------------------------------------------- */


/* --------------------------------------
 * site wrapper
 * -------------------------------------- */

	#site_wrapper {
		padding: 50px 0 0 0;
	}
	@media screen, projection {
		body.w1 #site_wrapper {
			padding: 5px 0 0 0;
			min-width: 0;
			margin: 0 2%;
		}
		body.w2 #site_wrapper {
			padding: 0 0 0 0;
			width: 600px;
			min-width: 0;
			margin: 0 auto;
		}
		body.w3 #site_wrapper {
			padding: 60px 0 0 0;
			min-width: 940px;
		}
		body#showcase #site_wrapper {
			padding: 0;
			margin: 0;
			min-width: 0;
		}
	}
	@media print {
		#site_wrapper {
			padding: 0;
		}
	}


/* --------------------------------------
 * sidebar
 * -------------------------------------- */

	#sidebar_wrapper {
		width: 27%;
		float: right;
	}
	@media screen, projection {
		body.w1 #sidebar_wrapper {
			width: auto;
			float: none;
		}
		body.w2 #sidebar_wrapper {
			width: auto;
			float: none;
		}
		body.w3 #sidebar_wrapper {
		}
	}
	@media print {
		#sidebar_wrapper {
			width: auto !important;
			float: none !important;
		}
	}
	#sidebar {
		position: relative;
	}
	@media screen, projection {
		body.w1 #sidebar {
		}
		body.w2 #sidebar {
			width: 600px;
			padding: 0 20px 0 10px;
		}
		body.w3 #sidebar {
		}
	}
	@media print {
		#sidebar {
			width: 600px;
			padding: 0 20px 0 10px;
		}
	}


/* --------------------------------------
 * content
 * -------------------------------------- */

	#content_wrapper {
		margin: 0 27% 0 5%;
		padding: 4px 0 0 0;
	}
	@media screen, projection {
		body.w1 #content_wrapper {
			clear: both;
			margin: 0;
		}
		body.w2 #content_wrapper {
			clear: both;
			margin: 0;
		}
		body.w3 #content_wrapper {
			min-width: 610px;
		}
	}
	@media print {
		#content_wrapper {
			clear: both;
			margin: 0;
		}
	}

	#content {
		width: 610px;
		margin: 0 auto;
		padding: 10px 20px 20px 10px;
		overflow: hidden;
	}
	@media screen, projection {
		body.w1 #content {
			width: 100%;
			margin: 0;
			padding: 0;
		}
		body.w2 #content {
			width: 610px;
			margin: 0 auto;
		}
		body.w3 #content {
			width: 610px;
			margin: 0 auto;
		}
	}
	@media print {
		#content {
			width: 610px;
			margin: 0 auto;
		}
	}


/* --------------------------------------
 * footer
 * -------------------------------------- */

	#footer {
		width: 610px;
		margin: 0 auto;
		padding: 50px 20px 10px 10px;
	}
	@media screen, projection {
		body.w1 #footer {
			width: 100%;
			margin: 0;
			padding: 10px 0 10px 0;
		}
		body.w2 #footer {
			width: 610px;
			margin: 0 auto;
			padding: 30px 0 10px 10px;
		}
		body.w3 #footer {
			width: 610px;
			margin: 0 auto;
		}
	}
	@media print {
		#footer {
			display: none;
		}
	}


/* --------------------------------------------------------------------------------------
 * title
 * -------------------------------------------------------------------------------------- */

	#title {
		display: block;
		width: 250px;
		height: 95px;
		font-size: 1em;
		line-height: 1em;
		margin: 0 0 30px 0;
		padding: 0;
		overflow: hidden;
	}
	@media print {
		#title {
			position: static !important;
			float: none !important;
			margin: 0 0 30px 20px !important;
			overflow: auto !important;
		}
	}
	#title img {
		display: block;
	}
	#title a {
		display: block;
		text-decoration: none;
		margin: 0;
		padding: 0;
		border: 0 !important;
	}
	#title a:hover,
	#title a:focus {
		opacity: .8;
		background: none;
	}
	* html #title a:hover,
	* html #title a:focus {
		filter: alpha(opacity=80);
		zoom: 1;
	}
	*+html #title a:hover,
	*+html #title a:focus {
		filter: alpha(opacity=80);
		zoom: 1;
	}


/* --------------------------------------
 * small screens (body.w1)
 * -------------------------------------- */

	@media screen, projection {
		body.w1 #title {
			width: auto;
			height: auto;
			line-height: 1.2em;
			margin: 0 0 0.5em 0;
		}
		body.w1 #title img {
			display: none;
		}
		body.w1 #title span {
			display: block;
		}
		body.w1 #title a {
			display: block;
			width: auto;
			height: auto;
			text-decoration: underline;
		}
	}


/* --------------------------------------
 * medium screens (body.w2)
 * -------------------------------------- */

	@media screen, projection {
		body.w2 #title {
			position: relative; left: -10px;
			margin: 0 0 15px 0;
			height: 60px;
			overflow: hidden;
		}
	}


/* --------------------------------------------------------------------------------------
 * navigation
 * -------------------------------------------------------------------------------------- */

	#navigation {
		margin: 0 0 1em 0;
		padding: 0;
	}
	@media print {
		#navigation {
			display: none !important;
		}
	}
	#navigation ol {
		margin: 0;
		padding: 0;
	}
	#navigation ol li {
		display: block;
		width: 100%;
		height: 31px;
		margin: 0 0 1px 0;
		padding: 0;
		list-style-type: none;
		overflow: hidden;
	}
	#navigation ol li .act {
		background-color: #daddde;
	}
	#navigation ol li span {
		position: absolute; left: -990px; height: 1px; width: 1px;
		overflow: hidden;
	}
	#navigation ol li a {
		display: block;
		width: 100%;
		height: 31px;
		text-decoration: none;
		margin: 0;
		padding: 0;
		cursor: pointer;
	}
	* html #navigation ol li a {
		display: inline-block;
	}
	*+html #navigation ol li a {
		display: inline-block;
	}
	#navigation ol li em {
		display: block;
		width: 100%;
		height: 31px;
		background: transparent url(../images/bgr_navigation.png) 0 0 no-repeat;
		overflow: hidden;
	}
	* html #navigation ol li em {
		display: inline-block;
	}
	*+html #navigation ol li em {
		display: inline-block;
	}
	#navigation ol li.nav1 em {
		background-position: 0 0;
	}
	#navigation ol li.nav2 em {
		background-position: 0 -32px;
	}
	#navigation ol li.nav3 em {
		background-position: 0 -64px;
	}
	#navigation ol li.nav4 em {
		background-position: 0 -96px;
	}
	#navigation ol li.nav5 em {
		background-position: 0 -128px;
	}
	#navigation ol li.nav6 em {
		background-position: 0 -160px;
	}
	#navigation ol li.nav1 a:hover em,
	#navigation ol li.nav1 a:focus em {
		background-position: 0 -192px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav2 a:hover em,
	#navigation ol li.nav2 a:focus em {
		background-position: 0 -224px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav3 a:hover em,
	#navigation ol li.nav3 a:focus em {
		background-position: 0 -256px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav4 a:hover em,
	#navigation ol li.nav4 a:focus em {
		background-position: 0 -288px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav5 a:hover em,
	#navigation ol li.nav5 a:focus em {
		background-position: 0 -320px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav6 a:hover em,
	#navigation ol li.nav6 a:focus em {
		background-position: 0 -352px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav1 em.act,
	#navigation ol li.nav1 a.act em {
		background-position: 0 -192px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav2 em.act,
	#navigation ol li.nav2 a.act em {
		background-position: 0 -224px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav3 em.act,
	#navigation ol li.nav3 a.act em {
		background-position: 0 -256px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav4 em.act,
	#navigation ol li.nav4 a.act em {
		background-position: 0 -288px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav5 em.act,
	#navigation ol li.nav5 a.act em {
		background-position: 0 -320px;
		background-color: #e6edf0;
	}
	#navigation ol li.nav6 em.act,
	#navigation ol li.nav6 a.act em {
		background-position: 0 -352px;
		background-color: #e6edf0;
	}


/* --------------------------------------
 * small screens (body.w1)
 * -------------------------------------- */

	@media screen, projection {
		body.w1 #navigation {
			border-top: 1px solid #aaa;
			border-bottom: 1px solid #aaa;
			margin: 0 0 5px 0;
			padding: 0;
		}
		body.w1 #navigation ol {
		}
		body.w1 #navigation ol li {
			display: inline;
			width: auto;
			height: auto;
			margin: 0 0.5em 0 0;
			padding: 0;
			list-style-type: none;
			overflow: hidden;
		}
		body.w1 #navigation ol li.act {
			background-color: #daddde;
		}
		body.w1 #navigation ol li span {
			position: static;
			height: auto;
			width: auto;
			overflow: hidden;
		}
		body.w1 #navigation ol li a {
			display: inline;
			width: auto;
			height: auto;
			text-decoration: underline;
		}
		body.w1 #navigation ol li em {
			display: inline;
			width: auto;
			height: auto;
			background: none;
			overflow: hidden;
			font-style: normal;
		}
	}


/* --------------------------------------
 * medium screens (body.w2)
 * -------------------------------------- */

	@media screen, projection {
		body.w2 #navigation {
			margin: 0;
			border-top: 1px solid #aaa;
			border-bottom: 1px solid #aaa;
		}
		body.w2 #navigation ol {
		}
		body.w2 #navigation ol li {
			display: block;
			float: left;
			width: 100px;
			height: 31px;
			margin: 0;
			padding: 0;
			list-style-type: none;
			overflow: hidden;
		}
	}


/* --------------------------------------------------------------------------------------
 * showcase
 * -------------------------------------------------------------------------------------- */

	body#showcase h1 {
		display: none;
	}

	/* toolbar */

	body#showcase .toolbar {
		border-bottom: 1px solid #444;
		margin: 0;
		padding: 3px 5px;
	}
	body#showcase .toolbar p {
		color: #fff;
		font-size: 0.9em;
		line-height: 1.2em;
		margin: 0;
	}
	body#showcase .toolbar a, 
	body#showcase .toolbar .tb_pic {
		display: block;
		float: left;
		background: #444;
		color: #bbb;
		margin: 0 2px 0 0;
		padding: 2px 15px;
		text-decoration: none;
	}
	body#showcase .toolbar span.tb_pic,
	body#showcase .toolbar a:hover,
	body#showcase .toolbar a:focus {
		background: #40ABC6;
		color: #fff;
	}
	body#showcase .toolbar .tb_ref {
		display: block;
		float: left;
	}
	body#showcase .toolbar .tb_paging {
		display: block;
		float: left;
		margin: 0 5px;
	}
	@media only screen and (max-device-width: 480px) {
		body#showcase .toolbar p {
			font-size: 2.5em;
		}
		body#showcase .toolbar a, 
		body#showcase .toolbar .tb_pic {
			padding: 0.2em 1em;
		}
	}

	/* showcase */

	body#showcase .showcase {
		margin: 0;
		padding: 0;
	}
	body#showcase .showcase p {
		color: #fff;
		line-height: 1.2em;
		margin: 0;
		padding: 0;
	}
	body#showcase .showcase .item {
		float: left;
		margin: 5px 0 0 5px;
		width: 320px;
		height: 240px;
	}
	body#showcase .showcase .item a {
		display: block;
		width: 320px;
		height: 240px;
		margin: 0;
		padding: 0;
		text-decoration: none;
		border: 0 !important;
	}
	body#showcase .showcase .item a:hover img,
	body#showcase .showcase .item a:focus img {
		opacity: .8;
	}
	* html body#showcase .showcase .item a:hover img,
	* html body#showcase .showcase .item a:focus img {
		filter: alpha(opacity=80);
		zoom: 1;
	}
	*+html body#showcase .showcase .item a:hover img,
	*+html body#showcase .showcase .item a:focus img {
		filter: alpha(opacity=80);
		zoom: 1;
	}
	body#showcase .showcase .item p {
		margin: 0 0 10px 0;
		/* reader: */
		position: absolute; left: -990px; height: 1px; width: 1px;
		overflow: hidden;
	}
	body#showcase .showcase .item p a {
		display: inline;
	}

	/* single image */

	body#showcase .singleimage {
		margin: 10px auto 5px auto;
		padding: 0 5px;
	}
	body#showcase .singleimage a {
		background: none;
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		border: 1px solid #444;
	}
	body#showcase .singleimage p {
		clear: both;
		color: #fff;
	}


/* --------------------------------------
 * content blocks
 * -------------------------------------- */


	.block {
		margin: 0 0 2em 0;
	}
	@media screen, projection {
		body.w1 .block {
			margin: 0 0 1em 0;
		}
	}


/* --------------------------------------
 * roundups/info boxes
 * -------------------------------------- */

	.roundup {
		margin: 0 10px 1em 0;
		padding: 0 0 12px 0;
		background: url(../images/bgr_box.png) 400px bottom no-repeat;
	}
	.roundup .inner {
		margin: 0;
		padding: 1em 0.5em 0.8em 1em;
		background: #e6edf0;
	}
	* html .roundup .inner {
		display: inline-block;
	}
	*+html .roundup .inner {
		display: inline-block;
	}
	.roundup .inner .block {
		margin: 0;
	}

	.roundup .image {
		margin-bottom: 0.4em;
	}
	.roundup p {
		display: block;
		width: auto !important;
		/* line-height: 1.8em; */
		margin-bottom: 0.5em;
	}
	.roundup a {
		font-weight: bold;
		text-decoration: underline;
		padding: 0.2em;
		margin: 0 -0.1em;
	}
	.roundup a:hover,
	.roundup a:focus {
		background: #b6bdc1;
		color: #fff;
		text-decoration: underline;
	}
	@media screen, projection {
		body.w1 .roundup {
			background: none;
			margin: 0 0 0.5em 0;
			padding: 0;
		}
	}
	@media print {
		.roundup {
			background: none;
			padding: 0;
			margin: 0 0 2em 0;
		}
		.roundup .inner {
			padding: 0;
			background: none;
		}
	}


	.pic4 {
		margin-left: 155px !important;
	}
	.pic4 p {
		width: 420px !important; /* 575-155 */
	}
	@media screen, projection {
		body.w1 .pic4 p {
			width: auto !important;
		}
	}
	.pic5 {
		margin-left: 128px !important;
	}
	.pic5 p {
		width: 447px !important; /* 575-128 */
	}
	@media screen, projection {
		body.w1 .pic5 p {
			width: auto !important;
		}
	}


/* --------------------------------------
 * gallery
 * -------------------------------------- */

	/*
		sizes by num of images:
		2: 280x210
		3: 184x138
		4: 135x101
		5: 108x81
		6: -> 3
		7: -> 4
		8: -> 4
		9: -> 5
	*/

	.gallery {
		width: 640px;
		margin: 0;
		padding: 0 0 1em 0;
	}
	@media screen, projection {
		body.w1 .gallery {
			width: auto;
		}
	}
	.gallery .item {
		display: block;
		float: left;
		margin: 0;
	}
	.gallery img {
		display: block;
		float: left;
		margin: 0;
		overflow: hidden;
	}
	.gallery p {
		clear: both;
		display: block;
		margin: 0 0 -8px 0; /* negative margin to remove padding from container */
		padding: 5px 0 0 0;
		line-height: 1.2em;
	}
	* html .gallery p {
		margin-bottom: 0;
	}
	.gallery a {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: none !important;
		border: 0 !important;
		text-decoration: none !important;
	}
	.gallery a:hover img,
	.gallery a:focus img {
		opacity: .8;
	}
	* html .gallery a:hover img,
	* html .gallery a:focus img {
		filter: alpha(opacity=80);
		zoom: 1;
	}
	*+html .gallery a:hover img,
	*+html .gallery a:focus img {
		filter: alpha(opacity=80);
		zoom: 1;
	}

	.pics2 .item p,
	.pics3 .item p {
		font-size: 12px;
		color: #666;
		width: auto !important;
	}
	.pics3 .item img,
	.pics4 .item img,
	.pics5 .item img {
		padding: 1px;
		border: 1px solid #ddd;
	}

	/* size 2 */

	.pics2 {
		margin: -5px 0 -12px -5px;
	}
	.pics2 .item {
		background: url(../images/bgr_showcaseitem.png) no-repeat;
		padding: 5px 10px 8px 5px;
		margin: 0 25px 20px 0;
	}
	.pics2 .item a,
	.pics2 .item img {
		width: 280px;
		height: 210px;
	}

	/* size 3 */

	.pics3 {
	}
	.pics3 .item {
		margin: 0 18px 18px 0;
	}
	.pics3 .item a {
		width: 188px;
		height: 142px;
	}
	.pics3 .item img {
		width: 184px;
		height: 138px;
	}

	/* size 4 */

	.pics4 {
	}
	.pics4 .item {
		margin: 0 15px 15px 0;
	}
	.pics4 .item a {
		width: 139px;
		height: 105px;
	}
	.pics4 .item img {
		width: 135px;
		height: 101px;
	}

	/* size 5 */

	.pics5 {
	}
	.pics5 .item {
		margin: 0 10px 10px 0;
	}
	.pics5 .item a {
		width: 112px;
		height: 85px;
	}
	.pics5 .item img {
		width: 108px;
		height: 81px;
	}


/* --------------------------------------
 * article images
 * -------------------------------------- */

	a.image,
	img.image {
		display: block;
		float: left;
		margin: -5px 20px 5px 0;
		padding: 0;
	}
	a.image.right,
	img.image.right {
		float: right;
		margin: -5px 5px 5px 15px;
	}
	a.image {
		text-decoration: none;
		border: 0;
	}
	a.image img.image {
		float: none;
		margin: 0;
		padding: 0;
	}
	a.image:hover img.image,
	a.image:focus img.image {
		/* opacity: .8; */
	}
	* html a.image:hover img.image,
	* html a.image:focus img.image {
		/* filter: alpha(opacity=80);
		zoom: 1; */
	}
	*+html a.image:hover img.image,
	*+html a.image:focus img.image {
		/* filter: alpha(opacity=80);
		zoom: 1; */
	}


/* --------------------------------------
 * screenshots
 * -------------------------------------- */

	div.image {
		position: relative; left: -10px; top: -10px;
		width: 600px;
		display: block;
		padding: 10px 20px 20px 10px;
		margin: 0 0 1em 0;
		overflow: hidden;
	}
	div.image .bgr-t {
		position: absolute; top: 0; left: 0;
		z-index: 10;
		width: 630px;
		height: 200px;
		background: url(../images/bgr_shadow-top.png) no-repeat;
		display: block;
		overflow: hidden;
	}
	div.image .bgr-b {
		position: absolute; bottom: 0; left: 0;
		z-index: 11;
		width: 630px;
		height: 200px;
		background: url(../images/bgr_shadow-bottom.png) no-repeat;
		display: block;
		overflow: hidden;
	}
	div.minheight .bgr-t {
		height: 100px;
		background: url(../images/bgr_shadow-top_min.png) no-repeat;
	}
	div.minheight .bgr-b {
		height: 100px;
		background: url(../images/bgr_shadow-bottom_min.png) no-repeat;
	}
	div.image a.image {
		margin: 0;
	}
	div.image img.image {
		position: relative; z-index: 100;
		margin: 0;
	}
	div.image a:hover .bgr-t,
	div.image a:focus .bgr-t,
	div.image a:hover .bgr-b,
	div.image a:focus .bgr-b {
		opacity: .6;
	}
	* html div.image a:hover .bgr-t,
	* html div.image a:focus .bgr-t,
	* html div.image a:hover .bgr-b,
	* html div.image a:focus .bgr-b {
		filter: alpha(opacity=60);
		zoom: 1;
	}
	*+html div.image a:hover .bgr-t,
	*+html div.image a:focus .bgr-t,
	*+html div.image a:hover .bgr-b,
	*+html div.image a:focus .bgr-b {
		filter: alpha(opacity=60);
		zoom: 1;
	}

	/* image without shadow */

	div.noshadow {
		top: 0; left: 0;
		padding: 0;
	}
	div.noshadow .bgr-t,
	div.noshadow .bgr-b {
		display: none !important;
		visibility: hidden !important;
	}


	@media screen, projection {
		body.w1 div.image {
			width: 100%;
			background: #ddd;
			position: static;
			padding: 0;
		}
		body.w1 div.image .bgr-t,
		body.w1 div.image .bgr-b {
			display: none !important;
			visibility: hidden !important;
		}
		body.w1 div.image img.image {
			width: 100% !important;
			margin: 0 !important;
			float: none !important;
		}
	}


/* --------------------------------------
 * tagcloud
 * -------------------------------------- */

	div.tagcloud {
		margin: -20px 0 0 0;
		padding: 0 0 0 10px;
	}
	div.tagcloud .bgr-t,
	div.tagcloud .bgr-b {
		display: none !important;
		visibility: hidden !important;
	}

	div.tagcloud-en {
		margin: 0 0 20px 0;
		padding: 0 0 0 10px;
	}
	div.tagcloud-en .bgr-t,
	div.tagcloud-en .bgr-b {
		display: none !important;
		visibility: hidden !important;
	}

	@media screen, projection {
		body.w1 div.tagcloud {
			margin-top: 0;
		}
		body.w2 div.tagcloud {
			margin-top: 0;
		}
	}


/* --------------------------------------
 * small headline (above h1)
 * -------------------------------------- */

	p.headline {
		display: block;
		height: 32px;
		margin: 0;
	}
	@media only screen and (max-device-width: 480px) {
		p.headline {
			font-size: 1.3em;
		}
	}


/* --------------------------------------
 * contact information (print-only)
 * -------------------------------------- */

	#contactinfo {
		font-size: 87%;
		padding: 50px 0 0 0;
	}


/* --------------------------------------
 * quotes
 * -------------------------------------- */

	blockquote {
		margin: 0 0 2em 10px;
		padding: 5px 0 0 40px;
		background: transparent url(../images/bgr_quotes.gif) left 5px no-repeat;
	}
	@media screen, projection {
		body.w1 blockquote {
			margin-left: 0;
		}
	}
	blockquote p {
		width: 555px !important; /* 550 + 5 gentle px */
		font-size: 1.5em;
		line-height: 1.4em;
		font-weight: normal;
		color: #46565A;
		margin: 0 0 0.5em 0;
	}
	blockquote.longtext p {
		font-size: 1em; line-height: 1.8em;
	}
	@media screen, projection {
		body.w1 blockquote p {
			width: auto !important;
		}
	}
	blockquote cite {
		font-style: normal;
		font-weight: normal;
		color: #777;
		margin: 0;
	}


/* --------------------------------------------------------------------------------------
 * footer
 * -------------------------------------------------------------------------------------- */

	#footer p {
		font-size: 0.9em; line-height: 1.5em;
		color: #777;
	}
	#footer a {
		color: #777;
	}


/* --------------------------------------------------------------------------------------
 * dm_form
 * -------------------------------------------------------------------------------------- */

	form.dm_form {
		width: 600px;
		font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-size: 1em;
		margin: 0;
		padding: 0;
		border: 0;
	}
	form.dm_form div.form_wrapper {
		margin: 0 -1%;
		padding: 0;
	}
	* html form.dm_form div.form_wrapper {
		display: inline-block;
	}
	*+html form.dm_form div.form_wrapper {
		display: inline-block;
	}
	form.dm_form fieldset {
		clear: both;
		margin: 0 0 20px 0;
		padding: 0;
		border: 0;
	}
	form.preview fieldset {
		display: none;
		visibility: hidden;
	}


/* --------------------------------------
 * labels and wrappers
 * -------------------------------------- */

	form.dm_form label {
		margin: 0 1%;
		padding: 0;
		border: 0;
		float: left;
		display: table;
		width: 1%;
	}
	* html form.dm_form label {
		display: inline-block !important;
		width: 1%;
		height: 1%;
		margin-right: 0.9% !important; /* avoid position bugs */
	}
	*+html form.dm_form label {
		display: inline-block !important;
		width: 1%;
		height: 1%;
		margin-right: 0.9% !important; /* avoid position bugs */
	}
	form.dm_form span.wrapper {
		margin: 0;
		padding: 0;
		display: table-cell;
		width: 1%; /* firefox */
	}
	* html form.dm_form span.wrapper {
		display: block !important;
		width: 100%;
		overflow: hidden;
	}
	*+html form.dm_form span.wrapper {
		display: block !important;
		width: 100%;
		overflow: hidden;
	}
	* html form.dm_form label.radiocheck span.wrapper {
		width: auto;
	}
	*+html form.dm_form label.radiocheck span.wrapper {
		width: auto;
	}


/* --------------------------------------
 * width
 * -------------------------------------- */

	form.dm_form label.w100 {
		width: 98%;
		display: block;
	}
	form.dm_form label.w75 {
		width: 73%;
		display: block;
	}
	form.dm_form label.w50 {
		width: 48%;
		display: block;
	}
	form.dm_form label.w25 {
		width: 23%;
		display: block;
	}


/* --------------------------------------
 * position
 * -------------------------------------- */

	form.dm_form label.p25 {
		margin-left: 26%;
	}
	form.dm_form label.p50 {
		margin-left: 51%;
	}
	form.dm_form label.p75 {
		margin-left: 76%;
	}


/* --------------------------------------
 * errors
 * -------------------------------------- */

	form.dm_form label.error input.field,
	form.dm_form label.error select.field,
	form.dm_form label.error textarea.field {
		border-color: #dd1100;
	}

	form.dm_form label.error span.title {
		color: #dd1100;
	}


/* --------------------------------------
 * input/select fields 
 * -------------------------------------- */

	form.dm_form label input.field,
	form.dm_form label select.field,
	form.dm_form label textarea.field {
		width: 100%;
		display: block;
		border: 0;
		border-bottom: 1px solid #40ABC6;
		border-left: 8px solid #40ABC6;
		background: #e6edf0;
		padding: 4px;
		font-family: 'Consolas', 'Andale Mono', Courier, monospace;
		/* font-size-adjust: 0.51; */
		font-size: 1em;
		box-sizing: border-box;
		-moz-box-sizing: border-box; /* gecko */
		-webkit-box-sizing: border-box; /* khtml/webkit */
	}
	* html form.dm_form label input.field,
	* html form.dm_form label select.field,
	* html form.dm_form label textarea.field {
		position: relative; /* put on top */
		width: expression(parentNode.offsetWidth - 18); /* - border - padding */
		padding-top: 5px;
		padding-bottom: 5px;
	}
	*+html form.dm_form label input.field,
	*+html form.dm_form label select.field,
	*+html form.dm_form label textarea.field {
		position: relative; /* put on top */
		width: expression(parentNode.offsetWidth - 18); /* - border - padding */
		padding-top: 5px;
		padding-bottom: 5px;
	}
	form.dm_form label select.field {
		padding: 4px 1px 1px 1px; /* have to try out */
	}
	* html form.dm_form label select.field {
		width: 100%;
	}
	*+html form.dm_form label select.field {
		width: 100%;
	}

	/* Pflichtfelder
		mandatory fields */
	form.dm_form label.mandatory input.field,
	form.dm_form label.mandatory select.field,
	form.dm_form label.mandatory textarea.field {
	}
	* html form.dm_form label.mandatory input.field,
	* html form.dm_form label.mandatory select.field,
	* html form.dm_form label.mandatory textarea.field {
		width: expression(parentNode.offsetWidth - 18); /* - border - padding */
	}
	*+html form.dm_form label.mandatory input.field,
	*+html form.dm_form label.mandatory select.field,
	*+html form.dm_form label.mandatory textarea.field {
		width: expression(parentNode.offsetWidth - 18); /* - border - padding */
	}
	form.dm_form label input.field:focus,
	form.dm_form label select.field:focus,
	form.dm_form label textarea.field:focus {
		border-color: #46565A;
	}


/* --------------------------------------
 * checkboxes and radios
 * -------------------------------------- */

	form.dm_form input.select {
		display: block;
		float: left;
		margin: 0;
	}
	* html form.dm_form input.select {
		position: relative;
		left: -2px;
		top: -2px;
	}
	*+html form.dm_form input.select {
		position: relative;
		left: -2px;
		top: -2px;
	}


/* --------------------------------------
 * submit button
 * -------------------------------------- */

	form.dm_form input.submit {
		font-size: 1em;
		padding: 3px 20px;
		font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
		/* font-size-adjust: 0.52; */
		font-weight: bold;
		border: 1px solid #40ABC6;
		background: #40ABC6;
		color: #fff;
	}

	form.dm_form input.submit:hover,
	form.dm_form input.submit:focus {
		border: 1px solid #009fc7;
		background: #009fc7;
		cursor: pointer;  /* sorry, can't use that one in front of Opera */
	}


/* --------------------------------------
 * additional styles for
 * input/select fields
 * -------------------------------------- */

	form.dm_form label.inputselect span.title {
		margin: 0 0 2px 0;
		display: table; /* act as inline-block */
	}
	* html form.dm_form label.inputselect span.title {
		display: inline-block !important;
	}
	*+html form.dm_form label.inputselect span.title {
		display: inline-block !important;
	}
	form.dm_form label.mandatory span.title {
		font-weight: bold;
	}

	form.dm_form label span.title:hover,
	form.dm_form label span.title:focus {
		color: #40ABC6;
		cursor: pointer;
	}

	form.dm_form label br {
		margin: 0 0 2px 0;
	}


/* --------------------------------------
 * additional styles for
 * checkboxes and radios
 * -------------------------------------- */

	form.dm_form label.wauto {
		width: auto;
		margin-right: 15px;
	}
	form.dm_form label.radiocheck {
		margin-bottom: 10px;
	}
	* html form.dm_form label.radiocheck {
		width: auto;
	}
	*+html form.dm_form label.radiocheck {
		width: auto;
	}
	* html form.dm_form label.radiocheck.w100 {
		width: 98%; /* avoid label being too short */
	}
	*+html form.dm_form label.radiocheck.w100 {
		width: 98%; /* avoid label being too short */
	}
	form.dm_form label.radiocheck span.wrapper {
		padding-right: 0;
	}
	form.dm_form label.wauto span.wrapper {
		display: inline;
	}
	form.dm_form label.radiocheck span.title {
		display: block;
		margin: 0 0 0 20px;
		padding: 0;
	}
	* html form.dm_form label.radiocheck span.title {
		display: inline-block !important;
		margin-left: 0;
	}
	*+html form.dm_form label.radiocheck span.title {
		display: inline-block !important;
		margin-left: 0;
	}


/* --------------------------------------
 * clearing elements
 * -------------------------------------- */

	form.dm_form .clear {
		clear: both;
		display: block;
		padding: 0 0 10px 0;
	}
	form.dm_form .mb0 {
		margin-bottom: 0 !important;
	}

	form.dm_form .pb20 {
		padding-bottom: 20px !important;
	}


/* --------------------------------------
 * form content
 * -------------------------------------- */

	form.dm_form p,
	form.dm_form h3 {
		margin: 0 1% 10px 1%;
	}
	
	/* errors */

	form.dm_form div.errors {
		margin: 0 1% 30px 1%;
		padding: 0.5em;
		background: #dd1100;
	}
	form.dm_form div.errors p {
		margin: 0 0 0.5em 0;
		color: #fff;
	}
	form.dm_form div.errors ol {
		margin: 0;
		padding: 0;
	}
	form.dm_form div.errors ol li {
		width: auto;
		margin: 0 0 0 2.5em;
		padding: 0;
		color: #fff;
		list-style-type: decimal;
	}
	form.dm_form div.errors ol li p {
		width: auto !important;
		margin: 0 0 0.5em 0;
		color: #fff;
		font-size: 1em;
		line-height: 1.2em;
	}	

	/* preview */

	form.dm_form .mailpreview {
		background: #e6edf0;
		padding: 1em 0.3em 0.3em 0.3em;
		margin: 0 1% 10px 1%;
	}

	/* formsent (outside of form!)*/

	div.formsent {
		margin: 0 0 3em 0;
		padding: 1em 0.5em 0.5em 0.5em;
		background: #40ABC6;
	}
	div.formsent p {
		margin: 0 0 0.5em 0;
		color: #fff;
	}
	div.formsent h2 {
		margin: 0 0 0.5em 0;
		color: #fff;
	}




	.row {
		clear: both;
		margin-right: -7%;
	}
	.row:after {
		/* clearfix */
		content: "."; display: block; height: 0; clear: both; visibility: hidden;
	}
	* html .row {
		display: inline-block;
	}
	*+html .row {
		display: inline-block;
	}

	div.article {
		width: 43%;
		margin: 0 7% 2em 0;
		float: left;
	}
	@media screen, projection {
		body.w1 div.article {
			width: 100%;
			margin: 0 0 2em 0;
			float: none;
		}
	}
	div.article h3 {
		margin: 0 0 0.5em 0;
	}
	div.article p {
		width: auto !important;
	}


	a.supporter {
		display: block;
		float: left;
		margin: 0 10px 10px 0;
		padding: 0 !important;
	}
	a.redaxo {
		margin-left: -5px;
	}

	/* projektinfo */

	.projectinfo p {
		margin-bottom: 0;
	}
	.pi-project {
		/* wrapped info: name, type, link */
		margin: 0 0 1em 0 !important;
	}
	.pi-name {
		/* name */
		font-size: 1.3em; font-weight: bold;
	}
	.pi-type {
		/* type/subtitle */
	}
	.pi-link {
		/* link */
	}


	/* kontaktdaten */

	.contactdata {
	}
	.contactdata .inner .bl1 {
		width: 260px;
		float: left;
		margin: 0 40px 0 0;
	}
	.contactdata .inner .bl2 {
		width: 260px;
		float: left;
		margin: 0;
	}
	span.label {
		min-width: 4em;
		display: block;
		float: left;
	}
	.contactdata p.label {
		border-bottom: 1px solid #bbb;
		padding: 0 5px;
		margin: 0 0 1em -5px;
	}


	body#submit .nosubmit {
		display: none !important;
		visibility: hidden !important;
	}


	/* sitemap */

	.sitemap ul {
		margin: 0 0 1em 0;
		padding: 0;
	}
	.sitemap ul li {
		margin: -1px 0 0 0;
		padding: 0;
		list-style-type: none;
		font-weight: bold;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	.sitemap ul li ul {
		margin: 0 0 -1px 0;
	}
	.sitemap ul li em,
	.sitemap ul li a {
		font-style: normal;
		margin-left: 30px;
	}
	.sitemap ul li ul li em,
	.sitemap ul li ul li a {
		margin-left: 80px;
		font-weight: normal;
	}
	.sitemap ul li em a {
		margin-left: 0;
	}


	/* maintenance */

	#maintenance {
		background: #40ABC6;
	}
	#maintenance p {
		font-size: 0.9em;
		line-height: 1em;
		display: block;
		text-align: center;
		color: #fff;
		padding: 2px;
		margin: 0;
		border-bottom: 2px solid #fff;
	}


	#twitter {
		position: absolute; top: 82px; left: 170px;
	}
	body.w1 #twitter {
		display: none;
	}
	body.w2 #twitter {
		top: 35px; left: 220px;
	}
	#twitter a {
		padding: 0 !important;
		margin: 0 !important;
	}
	* html #twitter {
		display: none;
	}