/* CSS Document */


@font-face {
	font-family: 'TheSans';
	src: url('../fonts/TheSansOffice5_.eot');
	src: local('☺'), url('../fonts/TheSansOffice5_.woff') format('woff'), url('../fonts/TheSansOffice5_.ttf') format('truetype'), url('../fonts/TheSansOffice5_.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
* {
    margin: 0;
    padding: 0;
}

a img {
border: none
}

html {height: 100.1%;}
                        


body {
	background-color: #f4fbfd;
	color:#4d4e53;
	padding:0px;
	font: 12px/130% Verdana, 'Geneva, sans-serif';
}


a, a:visited {color:#00a9e0; text-decoration:none}
a:hover {color:#00a9e0; text-decoration:underline}

.center {width:962px; margin:0 auto; height:auto; position:relative; 
/*-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 20px 0px rgba(0, 0, 0, 1);*/
	 background-image: url(../img/header_BG.png); background-position: top right; background-repeat: no-repeat;background-color: #fff; 

}
		@media only screen and (max-width: 962px) { 
		.center {width: 100%;}
}


/********************** HEADER ********************************/
.header { width:100%;  height:100px; position:relative;}
.header img {width:208px; margin:24px 10px 24px 25px}

@media only screen and (max-width: 420px) {
	.header { height:71px;}
	.header img {width:150px; margin:20px 0 20px 20px}
}



.logo {position:relative; width:912px; height:80px; padding:30px 25px 0 25px; z-index:10!important}

a img {border:none}

.topnav {font: normal 19px/120% 'TheSans', Tahoma, Arial; padding:0 0 0 10px; z-index:0!important }
.topnav a, .topnav a:visited {display:block; float:left; color: #009a49; margin:0 25px 7px 0px; padding: 0 3px 0 16px; z-index:0!important;  background:url(../img/transparent_header.png)}
.topnav a:hover {color: #00a9e0; text-decoration:none}
.ON  {
	color:#009a49!important;
	background-image: url(../img/TOPNAV_arrow_green.gif) !important;
	background-position: left 4px !important;
	background-repeat: no-repeat !important;
	
}


@media only screen and (max-width: 760px) {
	
	.topnav a {displpay:block; width:90%; border-bottom:1px dotted #d7d7d7;}
	


}


/********************** HEADER IMAGE********************************/

.headerImage {width:100%;  background-color: #fff; overflow:hidden; border-top:1px solid #ccc; border-bottom:1px solid #ccc}
.headerImage img {float:right; width:55%; }
.headerImageTxt {width:39%; float: left; padding:30px 0px 0px 25px }
.headerImageTxt  h3 {color: #009a49; font: normal 37px/120% 'TheSans', Verdana, 'Geneva, sans-serif' ; margin: 0;}
.headerImageTxt h4 {color: #00a9e0; }
.headerImageTxt h1 {color: #009a49; font: normal 32px/130%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 1.5em 0 0 0em;}

@media only screen and (max-width: 850px) { 
	h1 {font-size: 26px; margin: 1em 0em 1em 0em;} 
	.headerImageTxt h3 {font-size: 28px; margin: 1em 0em 0em 0em;} 
	.headerImageTxt h4 {font-size: 22px; margin:0em;} 
	.headerImageTxt {width:30%; padding:5px 0px 0px 20px} 
	.headerImage img {float:right; width:65%; }}

@media only screen and (max-width: 760px) { 
	h1 {font-size: 22px; margin: 1em 0em 1em 0em;} 
	.headerImageTxt h3 {font-size: 22px; margin: 0.5em 0em 0em 0em;} 
	.headerImageTxt h4 {font-size: 18px; margin:0em;} }

@media only screen and (max-width: 560px) {
	.headerImage img {float:left; width:100%;}
	.headerImageTxt {width:100%; float: left}
	h1 {font-size: 24px; margin-bottom: 10px 0px 10px 0px; padding:0px}
	.headerImageTxt h3 {font-size: 28px; margin: 10px 0 10px 0;} 
	.headerImageTxt h4 {font-size: 22px; margin: 5px 0 10px 0;}}





/********************** CONTENTAROUND ********************************/

.contentaround {width:97%;  position: relative; height: auto; overflow:hidden; padding:25px 0px 20px 25px; }

@media only screen and (max-width: 760px) {.contentaround { padding:10px 0px 20px 25px;} }


sub {font-size: 0.8em; vertical-align: -1px}


/********************** CONTENT ********************************/

.contentLeft {width:547px; float:left; margin:15px;  overflow: hidden}
@media only screen and (max-width: 960px) { .contentLeft {width:auto; float:none; margin:20px; } }

.buttons {float: left; width:100%; padding:10px 0 7px 0; text-align: center; border-bottom:2px solid #016e35; background-color: #009a49; margin-bottom: 15px; border-radius:4px; }

@media only screen and (max-width: 960px) { .buttons {width:100%; } }

.buttons a, .buttons a:hover, .buttons a:visited, .buttons a:active {color: #fff; font: normal 16px/120%  'TheSans', Verdana, 'Geneva, sans-serif'; text-decoration: none}
.content {width:650px; float:left; padding:10px; background:url(img/transparent_light.png); margin-bottom: 20px; font: 12px/160% Verdana, 'Geneva, sans-serif';}


@media only screen and (max-width: 1000px) { 
	.content {width:600px; float:left; margin:0 0 20px 0; padding:0px;} }

@media only screen and (max-width: 780px) { 
	.content {width:93%; float:left; margin:20px 0 20px 0; padding:0px;} }



/********************** LEFT ********************************/
.leftarea {width:215px; margin-right:20px; float:left; height:auto}
.leftarea a {
	display:block;}
	
a.leftBox  {
	display:block;
	padding:0 0 12px 0;
	border-bottom:1px dotted #d7d7d7;
	color:#4d4e53;
	text-decoration: none;
	margin-bottom:19px;
	width:100%
}
.leftBox .arrow {margin-top:5px}

@media only screen and (max-width:780px) { .leftarea  {width:95%} a.leftBox {float:left;margin-bottom:5px; padding:0 0 8px 0;} }

.leftBoxOlink  {
	display:block;
	padding:0 0 10px 0;
	border-bottom:1px dotted #d7d7d7;
	color:#4d4e53;
	text-decoration: none;
	margin-bottom:5px;
	width:100%
}

a.subnav ,  a.subnav:visited {display:block; padding:5px 0; border-bottom:1px dotted #d7d7d7; color:#00a9e0!important; width:100%}
a.subnav:hover { text-decoration:underline }

.subnavHeadl {display:block; font: normal 17px/120% 'TheSans', Tahoma, Arial;  color:#00a9e0; padding-bottom:10px}


/********************** CONTENT ********************************/
/*.content {width:450px; float:left; margin-top:-10px }*/
.content02 {width:668px; float:left; margin-top:-10px; height:auto }
.content02 ul, .content02 ol {margin:0 0 5px 35px; }
.content02 ul li, .content02 ol li {font: 11px/140% Verdana, 'Geneva, sans-serif'; margin-bottom: 8px}


.homeTAB td {border-top:1px dotted #d7d7d7; padding:15px 0 10px 0}


/******************************************************/
.BGgreen {background-color:#009a49}
.BGgrey {background-color:#4d4f53}
.BGblue {background-color:#00a9e0}
.BGyellow {background-color:#ffda00}



/******************************************************/

.logo-icon {float:left; width:200px; height:120px; padding:15px 0px 0px 0px; text-align: center; border-bottom:1px solid #cccccc; 
}

@media only screen and (max-width:1000px) { .logo-icon {width:50%; } }

@media only screen and (max-width:780px) { .logo-icon {width:95%; } }



h1 {
	color: #009a49;
	font: normal 30px/120% 'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 14px 0
}


h2 {
	color: #009a49;
	font: normal 18px/120% 'TheSans', Verdana, 'Geneva, sans-serif'; margin: 14px 0 6px 0 
}
h3 {
	color: #00a9e0;
	font: bold 12px/140% Verdana, 'Geneva, sans-serif';  margin: 17px 0 8px 0

}

h4 {
	color: #009a49;
	font: normal 18px/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0px 0 15px 0}



p {margin-bottom: 8px}

.imgR {float:right; margin: 0 0 10px 20px}
.imgL {float:left; margin: 0  20px 10px 0 }




.blue {color: #00a9e0}
.green {color: #009a49}
.yellow {color:#ffda00}
.orange {color:#ff9e0d}
.greyDK {color:#4d4e53}

.line {height:10px; border-bottom: 1px dotted #ccc; margin-bottom: 14px; clear:both}
.pict {float:right; margin: 0 0 0 20px}
.pictLI {float:left; margin-right: 20px}
.box {float:left; margin-right: 20px; width:225px; border: 1px solid #ccc}
.box p, .box h3, .box h2 {padding-left:8px}
.small {font-size:10px}

blockquote {margin:0 0 5px 35px; }
.tellmeFooter {display:none; padding: 11px 21px; border-top:1px solid #d7d7d7;  font: normal 19px/100% 'TheSans', Verdana, 'Geneva, sans-serif'; height:15px}
.footer {padding: 12px 21px; border-top:1px solid #d7d7d7; font-size: 10px; clear:both}

.tabelle {width:100%; clear:both}
.tabelle td { border-bottom: 1px dotted #ccc; padding:3px }
.tabHeadl { border-bottom: 1px solid #00a9e0!important; font-weight:bold}




table {
	width:100%;
}

table, td, tr, th {

	border-collapse: collapse;
	text-align: left;
}

td, tr, th {
border-bottom: 1px dotted #ccc; padding:3px 
}

th {
border-bottom: 1px solid #00a9e0 !important; font-weight:bold
}


@media screen and (max-width:700px) {
	
	table, tr {
		padding:0;
	border-bottom: 0px dotted #ccc;
	}
	
	td {
		padding:0;
	border-bottom: 1px dotted #ccc;
	}

	table {
		border:none;
	}

	thead {
		display:none;
	}

	tr {
		float: left;
		width: 100%;
		margin-bottom: 2em;
	}

	td {
		float: left;
		width: 100%;
		padding:1em;
	}

	td::before {
		content:attr(data-label);

		border-right:1px solid #00a9e0 !important;
		width: 20%;
		float:left;
		padding:1em;
		font-weight: bold;
		margin:-1em 1em -1em -1em;
	}
	
	.imgR, .imgL {width:100%}
}


hr {height:10px ;width:100%; background:#FFFFFF;  border-top: 1px solid #d7d7d7!important; border-bottom: none;border-left: none;border-right: none;}

sub {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    vertical-align: -10%;
}
sup {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 0.75em;
    vertical-align: 30%;
}

ul li {
	list-style-image:  url(../img/dot_LIST.gif);
	padding-bottom:5px;
	margin-left: 5px;
}
ul {
	margin-bottom: -5px;
}