html {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	font-size: 12px;
	font-family: Verdana, Arial,sans-serif;
	-webkit-text-size-adjust: none; /** iphone ignores font sizes if it "thinks" it is too small **/
	min-width: 700px;
}

body {
	padding: 0;
	margin: 0;
}





/*************main  */

#bodyinfoarea {
	display:none;
}
#bodyinfoarea img {
	margin-top: 0px;
	margin-bottom: 0px;
}

#mainarea {
	display:table;
	height: 100%;
	width: 100%;
	min-height: 600px;
	max-width: 1200px;
}
#mainarea > div {
	display: table-row;
}


/************* alternative to right side bar below the menu */

.menuinfoarea .pageNav {
	text-align: center;
}
.menuinfoarea img {
	margin-top: 20px;
	margin-bottom: 12px;
	width: 160px;
}

/************* right message area */

#messagearea {
	position: fixed; 
	top:50px; 
	right:0; 
	z-index:999;
}



/************* page corner design */

#bodycontentarea {
	display: table-cell;
	position: relative;
	padding: 25px;
	margin: 0;
}


#page_tr, #page_br, #page_tl, #page_bl {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 60%;
	height: 60%;
	border: 25px solid white;
}


#page_tr {
	border-width: 25px 25px 0 0; 
	background: url(corner_tr.gif) no-repeat top right; 
	top: 0; 
	right: 0; 
}

#page_br { 
	border-width: 0 25px 25px 0; 
	background: url(square_br.gif) no-repeat bottom right; 
	bottom: 0;
	right: 0;
}

#page_tl { 
	border-width: 25px 0 0 25px; 
	background: url(square_tl.gif) no-repeat top left; 
	top: 0; 
	left: 0;
}

#page_bl { 
	border-width: 0 0 25px 25px; 
	bottom: 0; 
	left: 0;
}

#page_tr, #page_br, #page_tl, #page_bl {  
	background-color: #dee7e7; 
}





/************* page layout */

#bodycontent {
	position: relative;
	height: 100%;
	width: 100%;
	padding: 0;
}

.main {
	position: relative;
	display: table;
	width: 100%;
	table-layout: fixed;
}
.main > div {
	display: table-row;
}

.left_column {
	display: table-cell;
}
.right_column {
	display: table-cell;
}

.first_row .left_column {
	vertical-align: bottom;
	width: 280px;
	max-width: 280px;
	min-width: 280px;
}
.first_row .right_column {
	vertical-align: bottom;
}

.second_row .left_column {
	vertical-align: top;
	width: 280px;
}
.second_row .right_column {
	vertical-align: top;
	border-left: 1px solid #ffffff;
}
#menubutton {
	display:none;
}


/************* Head-Fields */


.logocontainer {
	position: relative;
}

.sghlogo {
	position: relative;
	background-color: #dee7e7;
	width: 530px;
	padding: 14px;
	margin: auto;
	z-index: 2; 
	text-align: center;
}

.whiteline {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 50%;
	width: 100%;
	border-left: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	z-index: 1; 
}

.toplogos {
	position:absolute;
	top:123px;
	left:0px;
	width:280px;
	height:50px;
}



/************* whitebar (globales Menu oben und Unterbrechungen links) */
.whitebar {
	background-color: #ffffff;
	font-size: 10px;
	padding: 6px 2ex 5px 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.machmit {
	position: absolute;
	top: 90px;
	right: 15px;
	z-index: 1000;
}

.right_column .whitebar {
	margin: 0;
	font-weight: bold;
	border-right: 3px solid #76c0e3;
}

.left_column .whitebar {
	margin: 2em 0 0 0;
}

.whitebar p, .whitebar a {
	color: #18516b; /** Beschreibt die Textfarbe Menüeinträge */
	padding: 0 4px;
	margin: 0;
	text-decoration: none;
}

.whitebar a:hover {
	color: #2192c6;
}






/************* Seiten-Navigation (links) */

.pageNav {
	width: 100%;
	padding: 1em 0 25px 0;
	margin: 1em 0 0 0;
}

.pageNav p {
	padding: 0;
	margin: 0;
}

.pageNav .rootmenu, .pageNav .submenu, .pageNav .sidemenu {
	display: block;	
	margin: 0;
	color: #333333;
	padding: 0;
	text-decoration: none;
	border-left: 3px solid #dee7e7; 
}

.pageNav .rootmenu, .pageNav .sidemenu {
	/** text-transform: uppercase;  */
	font-weight: bold;
	letter-spacing: 1px;
	padding: 3px 25px;
}

.pageNav .submenu {
	font-size: 90%; /** 11px */
	font-weight: normal;
	padding: 3px 25px 3px 4em;
	color: #18516b;
}

.pageNav div.submenu {
	margin-bottom: 2ex;
}

.pageNav a.rootmenu:hover, .pageNav a.submenu:hover {
	background-color: #ffffff; 
	border-left: 3px solid #76c0e3; 
	color: #2192c6;
}

.pageNav a.sidemenu:hover {
	color: #2192c6;
}


.sidemenudesc a {
	color: #18516b;
	text-decoration: none;
	font-weight: bold;
}

.sidemenudesc a hover {
	color: #2192c6;
}

a.ActiveSub {
	color: #2192c6 !important; 
	font-weight: bold !important;
	border-left: 3px solid #2192c6 !important;
}


/************* Footer */

.footer {
	background-color: #ffffff;
	position: absolute;
	bottom:0;
	color: #2192c6;
	height: 22px;
	padding: 3px 3px 0px 3px;
	margin: 0;
	text-align: left;
}

.footer a {
	color: #2192c6;
	text-decoration: none;
	margin-left: 1ex;
	margin-right: 1ex;
}

.footer a:hover {
	color: #333333;
}





/************* Content (story is around content and modules)*/

.story {
	padding: 0.5em 28px 0em 28px;
	color: #18516b;
	line-height: 1.5;
	word-wrap: break-word;
}

.story li {
	padding: 3px;
}

/** assumed that inside a li only one p and padding is done by li, otherwise we have to work with first-child again **/
.story li p {
	padding: 0;
	margin: 0;
}

.story h1, .story h2, .story h3, .story h4, .story h5, .story h6 {
	font-family: Verdana, Arial, sans-serif;
	margin-bottom: 1ex;
	margin-top: 3ex; 
	font-weight: normal;
	color: #333333;
}
.story h1 { font-size: 18px; }
.story h2 { font-size: 17px; }
.story h3 { font-size: 16px; }
.story h4 { font-size: 15px; }
.story h5 { font-size: 14px; }
.story h6 { font-size: 13px; }

.story h1.xml { font-size: 24px; }


.story img {
	border-color: white;
}

/**	we do not want picitures with hardcoded with to take too much space on small
	resolutions, so we set a max-width of 60%. However an image directly inside a table
	usually is some sort of design which we should not limit to 50% **/
.story img {
	max-width:60%;
	height: auto;
}
.story table img, div.imgbox img {
	max-width:100%;
}




/** Default Link Style for content and modules */
.story a {
	color: #18516b;
	text-decoration: none;
	font-weight: bold;
}

.story a:hover {
	color: #2192c6;
}

/** Table Styles **/
.story table td {
	padding: 1ex;
	margin: 0;
}
.story table p {
	padding: 0;
	margin: 1ex 0 0 0;
}
.story table p:first-child {
	margin: 0;
}




/** Module dependent styles **/

.module {
	clear:both;
}


.module .subnavigation .head {
	padding: 2.5em 0 0 0;
	margin:0;
}
.module .subnavigation p {
	margin: 0 0 1ex 0;
	background-color: #a3cbdc; /** #9ecadc; #b0ceda; #cbd4d8; **/
	border-bottom: 1px dotted gray;
	padding: 1ex;
	clear: both;
}
.module .subnavigation .smalltext {
	font-size:90%; 
	font-style:italic;
	color: Gray;
}
.module li a {
	color: #18516b;
	text-decoration: none;
	font-weight: normal;
}

.module .guestbook .entry {
	margin-bottom: 3em;
}
.module .guestbook .numbers { 
	color: #c9dde5;
	font-size: 24px;
	padding: 1ex;
}
.module .guestbook .header { 
	margin-bottom:1ex;
	margin-top:1em;
	background-color: #a3cbdc; 
	border-bottom:1px dotted gray;
	padding:1ex;
}
.module .guestbook .comm {
	padding:1em 0;
	font-style:italic;
}

.module .glossar a {
	text-decoration: none;
	font-weight: normal;
}

.module .changelog a {
	text-decoration: none;
	font-weight: normal;
	}

.module .picturegallery {
	padding: 1.5em 0 0 0;
}
.module .picturegallery img {
	vertical-align: middle;
	padding: 10px;
	margin: 10px;
	background-color: #eeeeee;
	border: 1px solid #cccccc;
}

.module table.picturegallery_with_description {
	padding: 1.5em 0 0 0;
	width: 100%;
}
.module .picturegallery_with_description table.inline {
	margin: 0;
	padding: 0;
	border: 0;
}
.module .picturegallery_with_description table.inline td {
	margin: 0;
	padding: 0;
}
.module .picturegallery_with_description table.inline p {
	font-size: 90%; 
	padding: 1ex 0 3em 0;
	margin: 0;
	font-style: italic;
	text-align: center;
	width: 250px;
}
.module .picturegallery_with_description img {
	padding: 10px;
	margin: 0;
	background-color: #eeeeee;
	border: 1px solid #cccccc;
}

.module .twocolumnview * {
	margin: 0;
	padding: 0;
}
.module .twocolumnview {
	margin: 2em 0 2em -3em;
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
}
.module .twocolumnview .teaserbox {
	flex: 1 0 300px; 
	-webkit-flex: 1 0 300px;
	margin: 0 0 2.5em 3em;
}

.module .twocolumnview .flexnest {
	display: flex; /** flexbox inside flexbox to replace img float left with text underflow **/
	display: -webkit-flex;
	flex-flow: row nowrap;
	-webkit-flex-flow: row nowrap;
}
.module .twocolumnview .teaserbox .imgbox {
	flex: 0 0 125px;
	-webkit-flex: 0 0 125px;
	padding-right:10px;
	text-align: right;
}
.module .twocolumnview .teaserbox .txtbox {
	flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
}
.module .twocolumnview .teaserbox p:first-of-type {
	margin-bottom: 4px;
}


.module .twocolumnview .teaserbox .longteaser {
	min-height: 70px;
	max-height: 120px;
	overflow: hidden;
	position:relative;
	display: none; /** disable by default **/
}

.module .twocolumnview .teaserbox .longteaser p {
	margin-top: 4px;
	font-style: italic;
}

.module .twocolumnview .teaserbox .longteaser .gradient {
	position:absolute;
	z-index:2;
	right:0; 
	bottom:0; 
	left:0;
	height: 70px; 

	background: -moz-linear-gradient(top,  rgba(222,231,231,0) 0%, rgba(222,231,231,1) 90%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,231,231,0)), color-stop(90%,rgba(222,231,231,1)));
	background: -webkit-linear-gradient(top,  rgba(222,231,231,0) 0%,rgba(222,231,231,1) 90%);
	background: -o-linear-gradient(top,  rgba(222,231,231,0) 0%,rgba(222,231,231,1) 90%);
	background: -ms-linear-gradient(top,  rgba(222,231,231,0) 0%,rgba(222,231,231,1) 90%);
	background: linear-gradient(to bottom,  rgba(222,231,231,0) 0%,rgba(222,231,231,1) 90%);
}

.module .twocolumnview .teaserbox .longteaser img, .module .twocolumnview .teaserbox .longteaser iframe {
	display: none;
}



.module .twocolumnview a {
	color: #333333; 
}
.module .twocolumnview a:hover {
	color: #2192c6; 
} 


.module .footer_old_articles {
	margin-top:1em;
	font-size:90%;
}



/************* table styles */

table.layout {
	border-width: 0; 
}

table.layout tr, table.layout td {
	margin: 0;
	padding: 0;
	background-color: transparent;
}

table.layout p {  
	margin: 1ex 0 1ex 0; 
}


table.plain {
	border-width: 0; 
}

table.plain td {
	margin: 0;
	padding: 0;
	border-width: 0; 
}
	

table.plain p {
	margin: 0;
	padding: 0;
	border-width: 0; 
}
	
table.plain input {
	margin: 0 2px;
	padding: 0px;
	border-width: 0; 
}

table.coloured {
	border-collapse: collapse;
	margin-top: 2em;
	margin-bottom: 1em;
}
table.coloured p {
	padding: 0;
	margin: 0;
}
table.coloured td {
	padding: 1ex;
	margin: 0;
	border: 1px dotted;
	background-color: #c9dde5; 
}
table.coloured tr:first-child td {
	background-color: #a3cbdc;
}





/***************** Message Box */

#AddToNewsletterFileAjax div {
	background-color: #eeeeee; 
	border:2px solid lightgrey;
	padding:0 1em; 
	margin:1ex; 
	font-size:90%;
}

.infoAboutAddToNewsletterMode {
	text-align: right;
	background-color: #eeeeee; 
	border:2px solid #7BE34A;
	padding:0 1em; 
	margin:1ex; 
	font-size:90%;
}

.integritycheck div {
	background-color: #eeeeee; 
	border:2px solid lightgrey;
	padding:0 1em; 
	margin:1ex; 
	font-size:90%;
	max-width: 400px;
}

.integritycheck li {
	padding:3px;
}






/** show bodyinfoarea if wider than 1200px **/
@media only screen and (min-width: 1200px) {

	#bodyinfoarea {
		display:table-cell;
		vertical-align:top;
	}
	#bodyinfoarea img {
		margin-top: 40px;
		margin-right: 10px;
	}

	#mainarea {
		max-width: 1360px;
	}
	
	.menuinfoarea {
		display: none;
	}
}

/** hide menu if smaller than 928x, this makes the content area not smaller than 600px, which is also the limit induced by min-width on html in no-menu-mode **/
@media only screen and (max-width: 928px) {
	#menubutton {
		display:inline;
		border:1px solid white;
		border-radius: 5px;
		padding:2px 4px;
		margin-right:1em;
	}
	#menubutton:hover {
		border:1px solid #dee7e7;
		background-color:#a3cbdc;
		color:white;
		cursor: pointer; 
		cursor: hand; 
	}

	.left_column * {
		display:none;
	}
	.first_row .left_column, .second_row .left_column {
		width: 0px;
		max-width: 0px;
		min-width: 0px;
	}
	#navmenu {
		z-index: 200;
		background:rgba(255,255,255,1);
		display: none;
		position: relative;
		width: 280px;
		max-width: 280px;
		min-width: 280px;    
		top: -9px;
		left: 1px;
		padding:0px 0px;
		border-right: 1px solid #aaa;
		border-bottom: 1px solid #aaa;
	}
	.pageNav .rootmenu {
		 padding: 6px 0px 6px 15px;
	}
	.pageNav .submenu {
		 padding: 5px 0px 5px 35px;
	}

	.toplogos {
		display: none;
	}
	#page_tl {
		background: #dee7e7;
	}
}


/** mobile view if smaller than 480px **/
@media only screen and (max-width: 480px) {

	#extrafooter {
		display: none;
	}

	#globalNavElement3, #globalNavElement4, #globalNavElement5, #globalNavElement7 {
		display: none;
	}

	html {
		min-width: 100px;
	}

	#bodycontentarea {
		padding: 0;
	}
	
	.sghlogo {
		width: auto;
		margin: 0;
	}
	
	.sghlogo img {
		width: 75%;
	}
	
	#page_tr, #page_br, #page_tl, #page_bl {
		border-width: 0 0 25px 0;
	}
	#page_tr, #page_tl, #page_bl {
		background: #dee7e7;
	}

	.main .second_row .right_column {
		border-width: 0px;
	}
	
	.main .first_row .right_column .logocontainer .whiteline {
		display: none;
	}

	.story {
		padding: 0.5em 14px 0em 14px;
	}

	.story img {
		max-width:40%;
		height: auto;
	}

	.story h1, .story h2, .story h3, .story h4, .story h5, .story h6 {
		font-size: 14px;
	}

	.story h1.xml {
		font-size: 18px;
	}

}