* { 
  border: 0; 
  margin: 0; 
  padding: 0; 
} 

html { width: 100%; }
 
body { 
  width:93%; 
  margin:auto; 
  font-size: 100.01%; 
  /* margin-left: 25px; */ 
  /* margin-right: 25px; */ 
  font-family:arial, sans serif; 
  background-color: white; 
} 

/* -----------------------------------------------------------------------------*/ 

#ministerien_head { 
  width:100%; 
  padding-top:0.2em; 
  height: 62px; 
  text-align: right; 
  background-color: white; 
  background-image:url(../img/chrome/euro.gif); 
  background-repeat: no-repeat; 
} 
  
#ministerien_head img { 
  float:right; margin-top: 6px; 
} 


img { border:0px; } 

/* -----------------------------------------------------------------------------*/ 

#topnavi{ 
  border-bottom:1px solid #FFF; 
  width:100%; 
  height:153px; 
  background-color:#000; 
  background-image:url(../img/chrome/eu-migranten4.jpg); 
  background-position:right top; background-repeat:no-repeat; 
} 

#topnavi li{ 
  list-style-type:none; 
  display:block; 
  float:left; 
  width:19.9%; 
  height:153px; 
  border-left:1px solid #FFF; 
  background-position:center bottom; 
} 

#topnavi li a { 
  text-indent:-3000px; 
  width:100%; 
  display:block; 
  height:100%; 
  text-decoration:none; 
  background-position:right top; 
} 

#topnavi li a:hover { 
  background-position:right bottom; 
} 

li#tn_ministerium{ 
  border:none; 
  width:19.8%; 
  background-image:url(../img/chrome/logo-aamee.gif); 
} 

li#tn_generationen{ 
  background-image:url(../img/chrome/eu-migranten1.jpg); 
} 

li#tn_familie{ 
  background-image:url(../img/chrome/eu-migranten2.jpg); 
} 

li#tn_frauen{ 
  width:19.8%; 
  background-image:url(../img/chrome/eu-migranten3.jpg); 
} 

li#tn_integration { 
width:20.0%; 
} 

li#tn_ministerium a{ 
border:none; 
} 

#topnavi li a.navi0_aktiv, #topnavi li a.navi1_aktiv, #topnavi li a.navi2_aktiv,#topnavi li a.navi3_aktiv,#topnavi li a.navi4_aktiv { 
background-position:right bottom; 
} 

/* -----------------------------------------------------------------------------*/ 
#subnavi1{ 
clear:both; 
background-color: #002471; 
width:100%; height:30px; 
} 

#empty_cell1 { 
width:19.8%; 
height:100%; 
float:left; 
border-right: 1px solid white; 
background-image:url(../img/chrome/linie_links.gif); 
/* background-color:#CC071E; */ 
/* height: 30px; */ 
/* border-top: 1px solid white; */ 
/* border-bottom: 1px solid white; */ 
/* position: absolute; */ 
/* left: 25px; */ 
} 

#sprachblock ul { 
margin-left: 25px; 
/* padding-left: 40px; */ 
} 

#sprachblock ul li { 
list-style-type:none; 
display:block; 
float:left; 
padding-top:7px; 
/* padding-left: 5px; */ 
/* line-height:30px; */ 
/* padding-top: 10px; */ 
padding-left: 10px; 
/* display: inline; */ 
} 

/* Einzelne Benennung der Hoehe - wird fuer den IE 6.0 extra geladen */ 
#kopfhoehe { min-height: 124px; } 
.kopfhoehe { min-height: 75px; } 
/* unsichtbar */ 
.u { 
position:absolute; 
top:-1000px; 
left:-1000px; 
width:0px; 
height:0px; 
overflow:hidden; 
display:inline; 
} 

/* -----------------------------------------------------------------------------*/ 

#misc_navi { 
/* border-top: 1px solid white; */ 
/* border-bottom: 1px solid white; */ 
/* background-color:#CC071E; */ 
width:79.7%; 
/* width:59.6%; */ 
height:100%; 
border-right: 1px solid white; 
/* height: 30px; */ 
/* top: 192px; */ 
/* text-align: right; */ 
/* padding-left: 13em; */ 
/* padding-right: 13em; */ 
} 

* html div#misc_navi { 
width:59.5%; 
} 

*+html div#misc_navi { 
width:59.8%; 
} 

#misc_navi li{ 
list-style-type:none; 
display:block; 
float:left; 
/* padding-top: 7px; */ 
} 

#misc_navi a { 
line-height:30px; 
color:#FFF; 
font-size:0.75em; 
font-weight:bolder; 
text-decoration:none; 
display:block; 
float:left; 
padding-left: 
40px; 
} 

#misc_navi a.pbutton { 
/* padding-top: 7px; */ 
/* padding-right: 10px; */ 
float:right; 
margin-right:18px; 
} 

* html div#misc_navi a.pbutton { 
margin-right:10px; 
} 

#misc_navi a:hover, #help_navi a:hover{ 
text-decoration:underline; 
} 

#misc_navi a.subnavi1_aktiv, #help_navi a.help_navi_aktiv{ 
color:#FFF; 
} 

/* -----------------------------------------------------------------------------*/ 

#help_navi { 
width:20%; 
/* height:1.4em; */ 
padding-top: 4px; 
float:right; 
padding-left:0px; 
position: absolute; 
right: 31px; 
top: 215px; 
/* padding-top: 7px; */ 
/* line-height:30px; */ 
/* position: absolute;*/ 
/* right: 25px; */ 
/* height: 30px; */ 
/* float:left; */ 
/* border-left: 1px solid white; */ 
/* background-color:#CC071E; */ 
/* border-top: 1px solid white; */ 
/* border-bottom: 1px solid white; */ 
} 

* html div#help_navi { 
right: 48px; 
} 

.dritte-ebene a { 
color:#000000 !important; 
} 

.dritte-ebene a.drebene_inaktiv { 
font-weight:normal !important; 
} 

.dritte-ebene a.drebene_aktiv { 
font-weight:bolder !important; 
} 

#help_navi li{ 
list-style-type:none; 
display:block; 
float:left; 
/* padding-top: 7px; */ 
} 

#help_navi a{ 
line-height:30px; 
color:#FFF; 
font-size:0.75em; 
font-weight:bolder; 
text-decoration:none; 
display:block; 
float:left; 
} 

a.subnavi_inaktiv, a.help_navi_inaktiv{ /* Leer - nur fuer DW */ } 

#help_navi a{ padding-left:16px; } 

/* -----------------------------------------------------------------------------*/ 

#subnavi2{ 
width:100%; 
background-color:#dddfe1; 
height:19px; 
} 

#suchbox{ 
width:19.8%; 
height:17px; 
float:left; 
background-color:#FFF; 
border-top:1px solid #FFF; 
border-right:1px solid #FFF; 
border-bottom:1px solid #FFF; 
/* position:absolute; */ 
/* width:13em; */ 
/* -height:17px; */ 
/* min-height:17px; */ 
/* background-color: white; */ 
/* border-right:1px solid white; */ 
/* border-bottom:1px solid white; */ 
} 

#suchbox input#sq{ 
display:block; 
border:none; 
height:17px; 
/* min-height:17px; */ 
/* font-size:0.6em; */ 
float:left; 
background-color:#ececed; 
width:59.5%; 
} 

#suchbox input#sb{ 
display:block; 
cursor:pointer; 
font-size:0.6em; 
border:none; 
height:17px; 
/* min-height:17px; */ 
width:40%; 
float:right; 
background-color:#F8AA45; 
background-image:url(../img/chrome/suchwort1.gif); 
background-repeat:no-repeat; 
background-position:left center; 
} 

/* -----------------------------------------------------------------------------*/ 

#ariadnepfad{ 
width:59.8%; 
height:17px; 
float:left; 
background-color:#878889; 
border:1px solid #FFF; 
border-right:none; 
border-left:none; 
margin-right:-30px; 
padding-left:30px; 
_overflow:hidden; 
/* margin-right: 13em; */ 
/* margin-left: 13em; */ 
/* -height:17px; */ 
/* min-height:17px; */ 
/* background-color:#7a8699; */ 
/* border-bottom:1px solid white; */ 
/* padding-left:30px; */ 
/* border-right: 1px solid white; */ 
} 

/* #ariadnepfad ol { */ 
/* font-size:0.6em; */ 
/* } */ 

#ariadnepfad li{ 
display:block; 
float:left; 
/* display:inline; */ 
list-style-type:none; 
} 

#ariadnepfad a{ 
display:block; 
float:left; 
font-size:0.6em; 
line-height:17px; 
/* display: inline; */ 
color:#FFF; 
text-decoration:none; 
padding:0px 10px 0px 10px; 
background-image:url(../img/chrome/ariaspc_g.gif); 
background-position:right center; 
background-repeat:no-repeat; 
} 

#ariadnepfad a:hover { color: black; } 

#empty_cell2{ 
width:20%; 
height:18px; 
float:left; 
background-color:#DDDFE1; 
border-top:1px solid #FFF; 
border-left:1px solid #FFF; 
} 

.hiddenclear{ clear:both; } 

#pagebody{ 
background-color:#DDDFE1; 
width:100%; 
float: left; 
height: 1; 
} 

/* -----------------------------------------------------------------------------*/ 

/* #layoutTable { */ 
/* background-color:#dddfe1; */ 
/* border-collapse: collapse; */ 
/* clear: both; */ 
/* border-bottom:1px solid #dddfe1; */ 
/* } */ 

/* td#snavi3 { */ 
/* border-right: 1px solid white; */ 
/* vertical-align: top; */ 
/* } */ 

#subnavi3 { 
/* width: 13em; */ 
/* padding-top:17px; */ 
width:19.8%; 
float:left; 
padding-top:17px; 
} 

/* td#pcontent { */ 
/* background-color:#f4f5f6; */ 
/* vertical-align: top; */ 
/* width: 100%; */ 
/* } */ 

/* td#rcontent { */ 
/* border-left: 1px solid white; */ 
/* background-color: #dddfe1; */ 
/* vertical-align: top; */ 
/* } */ 

#relatedcontent { 
width: 13em; 
padding-top: 
17px; 
} 

#rcontent { 
border-left: 1px solid white; 
background-color: #dddfe1; 
vertical-align: top; 
} 

/* ------------------------------------ Ab hier angepasst ---------------------------------*/ 

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

#subnavi3{ 
padding-top:17px; 
} 

#subnavi3 a:hover{ 
text-decoration:underline; 
} 

#subnavi3 li{ 
padding-left:10px; 
list-style-type:none; 
background-image:url(../img/chrome/sn_closed_g.gif); 
background-repeat:no-repeat; background-position:0px 6px; 
} 

#subnavi3 li.special{ 
background-image:none; 
} 

#subnavi3 li.sub_closed{ 
/* Leer - wird nur von DW verwendet */ 
margin-left:10px; 
} 

#subnavi3 li.sub_open{ 
background-image:url(../img/chrome/sn_open_g.gif); 
margin-left:10px; 
} 

#subnavi3 li div{ 
/* das hier ist das div, das unter der 2. menu-ebene den balken erzeugt */ 
height:3px; 
font-size:0px; 
width:100%; 
background-image:url(../img/chrome/linie_links_kl.gif); 
border-top:1px solid #FFF; 
border-bottom:1px solid #FFF; 
margin:5px 0px 5px -20px; 
padding-right:20px; 
/* margin links und padding rechts m?ssen sich aufheben: 100% Breite!*/ 
} 

#subnavi3 li.special a{ 
color:#F8AA45; 
} 

#subnavi3 li a{ 
font-size:0.8em; 
color:#222C41; 
text-decoration:none; 
font-weight:bolder; 
} 

#subnavi3 ol { /* nothing */ } 

#subnavi3 ol li{ 
background-image:none; 
} 

#subnavi3 ol li a.subsub_inaktiv{ 
font-weight:normal; 
} 

#subnavi3 ol li a.subsub_aktiv{ 
/* color:#F8AA45;*/ 
color:#6E798A; 
} 

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

#pagecontent{ 
width:59.8%; 
float:left; 
min-height:400px; 
background-color:#ececed; 
border-left:1px solid #FFF; 
border-right:1px solid #FFF; 
padding-bottom:30px; 
font-size:0.75em; 
position: relative; 
/* margin:1px 18px 1px 18px; */ 
} 

#pagecontent p.klein{ 
font-size: 0.85em; 
margin: 0 0 .2em 0; 
} 

#pagecontent div{ 
/* margin:1px 18px 1px 18px; */ 
/* font-size:0.75em; */ 
} 

#pagecontent p, #pagecontent dl{ 
line-height:1.5em; 
margin-bottom:1em; 
padding-left:21px; 
margin-right: 18px; 
} 

#pagecontent p.rechts{ 
text-align:right; 
} 

#pagecontent p.mitte{ 
text-align:center; 
} 

#pagecontent a{ 
color:#CC071E; 
} 

#pagecontent a:hover { 
color:#CC071E; 
text-decoration:none; 
} 

#pagecontent ul, #pagecontent ol{ 
padding-left:20px; 
} 

#pagecontent li{ 
margin-left:25px; 
line-height:1.5em; 
} 

#pagecontent a.buttlink{ 
background-image:url(../img/chrome/cntlink_g.gif); 
background-repeat:no-repeat; 
background-position:left 4px; 
padding-left:14px; 
} 

#pagecontent a.backlink{ 
background-image:url(../img/chrome/backlink_g.gif); 
background-repeat:no-repeat; 
background-position:left 4px; 
padding-left:14px; 
} 

#pagecontent a.toplink{ 
background-image:url(../img/chrome/toplink_g.gif); 
background-repeat:no-repeat; 
background-position:left 4px; 
padding-left:14px; 
} 

#pagecontent a.readspeaker { 
font-size:0.75em; 
float:right; 
background-image:url(../img/chrome/speaker-orange_g.gif); 
background-repeat:no-repeat; 
background-position:left center; 
padding-left:18px; 
margin-right:18px; 
margin-bottom:2px; 
} 

#pagecontent h1 { 
background-color:#FFFFFF; 
clear:both; 
/* font-size:0.8em; */ 
font-size:1.0em; 
color:#17243F; 
background-image:url(../img/chrome/hlbg_g.gif); 
background-repeat:no-repeat; 
background-position:left center; 
padding:3px; 
padding-left:32px; 
margin:17px 18px 16px 18px; 
} 

#pagecontent #international h2 { 
background-color:#F8AA45; 
clear:both; 
font-size: 0.9em; 
color:#FFF; 
background-image:url(../img/chrome/hlbg_g.gif); 
background-repeat:no-repeat; 
background-position:0px 0px; 
padding:3px; 
padding-left:32px; 
margin:17px 18px 1px 18px; 
} 

.links { 
float:left; 
margin-right:10px; 
margin-top:4px; 
margin-bottom: 1em; 
} 

.bildrechts { 
float:right; 
margin-left:10px; 
margin-top:4px; 
margin-bottom: 1em;
 } 
 
.bildlinks { 
 float:left;
 margin-right:10px;
 margin-top:4px;
 margin-bottom: 1em;
} 

.ueberschriftgross { 
 font-size:x-large;
} 

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

#relatedcontent{ 
/* padding-top:17px; */ 
 float: left;
 position: relative;
 z-index: 600;
 left: -1px;
 padding: 0px 0px 0px 0.7em;
 width:18.5%;
 border-left: 1px solid #FFF;
} 
body &gt; #relatedcontent { 
 width:16.8%;
} 
 
#relatedcontent h3{ color:#FFF;
 background-color: #002471;
 padding:5px;
 font-size:0.7em;
 font-weight:bolder;
 margin:0px;
 /* margin-left:8px; */ 
 /* margin-right:8px; */ 
} 
#relatedcontent p{ 
 /* border:1px solid #CC071E;*/ 
 /* margin-left:8px; */ 
 /* margin-right:8px; */ 
 padding:5px;
 font-size:0.7em;
 /* margin-bottom:15px; */ 
 margin-left: 0px;
 margin-bottom: 0px;
 border-left: 1px solid #002471;
 border-right: 1px solid #002471;
} 
 
#relatedcontent a{ 
 background-image:url(../img/chrome/cntlink_g.gif);
 background-repeat:no-repeat;
 background-position:left center;
 padding-left:14px;
 color:#000000;
 text-decoration:none;
 } 
 
 .rcimglink { 
 background-image:none !important;
 padding-left:0px !important;
 } 
 
 #relatedcontent p.abschluss { 
 line-height: 1px;
 margin-bottom: 10px;
 border-bottom: 1px solid #002471;
 } 
 
 #relatedcontent &gt; p.abschluss { 
 height: 1px;
 } 
 
 /* ----------------------- footer ------------------------- */ 
 
 #footer{ 
 background-color:#DDDFE1;
 height:1px;
 overflow:hidden;
 } 
 
 .keinlink { 
 background-color:red;
 color:white;
 font-weight:900;
 } 
 
 .galerie { 
 clear:both;
 display:block;
 padding-left:150px;
 font-size:1em !important;
 padding-bottom:50px;
 } 
 
 .galerie img { 
 margin-left:-150px;
 float:left;
 margin-right:10px;
 } 
 
 .htdsf{ 
 padding-left:21px;
 padding-bottom:30px;
 } 
 
 .htdsf label{ 
 display:block;
 float:left;
 width:150px;
 margin-top:3px;
 } 
 
 .htdsf select{ 
 width:250px;
 margin-top:3px;
 } 
 
 .htdsf input{ 
 width:246px;
 margin-top:3px;
 } 
 
 #pmtable th { 
 text-align:left;
 } 
 
 #pmtable { 
 margin-left:20px;
 } 
 
 .contentImage { 
 float: left;
 margin-right: 5px;
 margin-bottom: 5px 
 } 
 
 /* --------------- Reden ---------------*/ 
 #redenUl li { 
 margin-bottom: 0;
 line-height: 1.2em;
 } 
 
 #redenSpan { 
 display:block;
 margin-left: 25px;
 } 
 @charset &quot;UTF-8&quot;; #formular { 
 padding: 0px 18px;
 margin: 0px;
 } 
 
 #formular #apDiv1 
 { z-index:1;
 left: 6px;
 top: 58px;
 position: absolute;
 padding-left: 18px;
 visibility: visible;
 } 
 
 #formular #apDiv1 ul { 
 list-style-type: none;
 } 
 
 #formular input { 
 border: 1px solid #878889;
 margin: 0px;
 padding: 0px;
 } 
 
 #formular p { 
 padding: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 1em;
 margin-left: 0px;
 } 
 
 #formular li.TabbedPanelsTab { 
 margin: 0px;
 padding: 4px;
 } 
 
 #formular label { 
 margin: 0px;
 padding: 0px;
 } 
 
 /* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */ 
 /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ 
 /* Horizontal Tabbed Panels * 
 * The default style for a TabbedPanels widget places all tab buttons 
 * (left aligned) above the content panel. */ 
 
  /* This is the selector for the main TabbedPanels container. For our 
  * default style, this container does not contribute anything visually, 
  * but it is floated left to make sure that any floating or clearing done 
  * with any of its child elements are contained completely within the 
  * TabbedPanels container, to minimize any impact or undesireable 
  * interaction with other floated elements on the page that may be used 
  * for layout. * 
  * If you want to constrain the width of the TabbedPanels widget, set a 
  * width on the TabbedPanels container. By default, the TabbedPanels widget 
  * expands horizontally to fill up available space. * 
  * The name of the class (&quot;TabbedPanels&quot;) used in this selector is not 
  * necessary to make the widget function. You can use any class name you 
  * want to style the TabbedPanels container. */ 

.TabbedPanels { 
 margin: 0px;
 padding: 0px;
 float: left;
 clear: none;
 } 
 
 /* This is the selector for the TabGroup. The TabGroup container houses 
 * all of the tab buttons for each tabbed panel in the widget. This container 
 * does not contribute anything visually to the look of the widget for our 
 * default style. * 
 * The name of the class (&quot;TabbedPanelsTabGroup&quot;) used in this selector is not 
 * necessary to make the widget function. You can use any class name you 
 * want to style the TabGroup container. */ 
 
 .TabbedPanelsTabGroup { 
 margin: 0px;
 padding: 0px;
 } 
 
 /* This is the selector for the TabbedPanelsTab. This container houses 
 * the title for the panel. This is also the tab &quot;button&quot; that the user clicks 
 * on to activate the corresponding content panel so that it appears on top 
 * of the other tabbed panels contained in the widget. * 
 * For our default style, each tab is positioned relatively 1 pixel down from 
 * where it wold normally render. This allows each tab to overlap the content 
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom 
 * border that has a color that matches the top border of the current content 
 * panel. This gives the appearance that the tab is being drawn behind the 
 * content panel. * * The name of the class (&quot;TabbedPanelsTab&quot;) used in this selector is not 
 * necessary to make the widget function. You can use any class name you want 
 * to style this tab container. */ 
 
 .TabbedPanelsTab { 
 position: relative;
 top: 1px;
 float: left;
 padding: 4px 10px;
 margin: 0px 1px 0px 0px;
 background-color: #DDD;
 list-style: none;
 border-left: solid 1px #CCC;
 border-bottom: solid 1px #999;
 border-top: solid 1px #999;
 border-right: solid 1px #999;
 -moz-user-select: none;
 -khtml-user-select: none;
 cursor: pointer;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 } 
 
 /* This selector is an example of how to change the appearnce of a tab button 
 * container as the mouse enters it. The class &quot;
TabbedPanelsTabHover&quot;
 is * programatically added and removed from the tab element as the mouse enters 
 * and exits the container. */
 .TabbedPanelsTabHover { background-color: #CCC;
 } /* This selector is an example of how to change the appearance of a tab button 
 * container after the user has clicked on it to activate a content panel. 
 * The class &quot;TabbedPanelsTabSelected&quot; is programatically added and removed 
 * from the tab element as the user clicks on the tab button containers in 
  * the widget. * 
  * As mentioned above, for our default style, tab buttons are positioned 
  * 1 pixel down from where it would normally render. When the tab button is 
  * selected, we change its bottom border to match the background color of the 
  * content panel so that it looks like the tab is part of the content panel. */
  
 .TabbedPanelsTabSelected { 
 background-color: #EEE;
 border-bottom: 1px solid #EEE;
 } 
 
 /* This selector is an example of how to make a link inside of a tab button 
  * look like normal text. Users may want to use links inside of a tab button 
  * so that when it gets focus, the text *inside* the tab button gets a focus 
  * ring around it, instead of the focus ring around the entire tab. */
  
 .TabbedPanelsTab a { 
 color: black;
 text-decoration: none;
 } 
 
 /* This is the selector for the ContentGroup. The ContentGroup container houses 
 * all of the content panels for each tabbed panel in the widget. For our 
 * default style, this container provides the background color and borders that 
 * surround the content. * 
 * The name of the class (&quot;TabbedPanelsContentGroup&quot;) used in this selector is 
 * not necessary to make the widget function. You can use any class name you 
 * want to style the ContentGroup container. */
 
 .TabbedPanelsContentGroup { 
 clear: both;
 border-left: solid 1px #CCC;
 border-bottom: solid 1px #CCC;
 border-top: solid 1px #999;
 border-right: solid 1px #999;
 background-color: #EEE;
 } 
 /* This is the selector for the Content panel. The Content panel holds the 
 * content for a single tabbed panel. For our default style, this container 
 * provides some padding, so that the content is not pushed up against the 
 * widget borders. * 
  * The name of the class (&quot;TabbedPanelsContent&quot;) used in this selector is 
  * not necessary to make the widget function. You can use any class name you 
  * want to style the Content container. */
  
 .TabbedPanelsContent { 
 padding: 6px;
 margin: 0px;
 } 
 
 /* This selector is an example of how to change the appearnce of the currently 
 * active container panel. The class &quot;TabbedPanelsContentVisible&quot; is 
 * programatically added and removed from the content element as the panel 
 * is activated/deactivated. */
 
 .TabbedPanelsContentVisible { } 
 
 #TabbedPanels1 ul.TabbedPanelsTabGroup { 
 padding-left: 0px;
 } 
 
 /* Vertical Tabbed Panels * 
 * The following rules override some of the default rules above so that the 
 * TabbedPanels widget renders with its tab buttons along the left side of 
 * the currently active content panel. * 
 * With the rules defined below, the only change that will have to be made 
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels 
 * widget, is to use the &quot;VTabbedPanels&quot; class on the top-level widget 
 * container element, instead of &quot;TabbedPanels&quot;. */
 
 /* This selector floats the TabGroup so that the tab buttons it contains 
 * render to the left of the active content panel. A border is drawn around 
 * the group container to make it look like a list container. */
 
 .VTabbedPanels .TabbedPanelsTabGroup { 
 float: left;
 width: 10em;
 height: 20em;
 background-color: #EEE;
 position: relative;
 border-top: solid 1px #999;
 border-right: solid 1px #999;
 border-left: solid 1px #CCC;
 border-bottom: solid 1px #CCC;
 } 
 
 /* This selector disables the float property that is placed on each tab button 
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom 
 * border for the tab. The tab button will get its left and right border from 
 * the TabGroup, and its top border from the TabGroup or tab button above it. */

 .VTabbedPanels .TabbedPanelsTab { 
 float: none;
 margin: 0px;
 border-top: none;
 border-left: none;
 border-right: none;
 } 
 
 /* This selector disables the float property that is placed on each tab button 
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom 
 * border for the tab. The tab button will get its left and right border from 
 * the TabGroup, and its top border from the TabGroup or tab button above it. */
 
 .VTabbedPanels .TabbedPanelsTabSelected { 
 background-color: #EEE;
 border-bottom: solid 1px #999;
 } 
 
 /* This selector floats the content panels for the widget so that they 
 * render to the right of the tabbed buttons. */
 
 .VTabbedPanels .TabbedPanelsContentGroup { 
 clear: none;
 float: left;
 padding: 0px;
 width: 30em;
 height: 20em;
 } 
 
 div.TabbedPanelsContentGroup div.TabbedPanelsContent ul { 
 margin: 0px 0px 0px 1px;
 padding: 0px 0px 0px 1px;
 list-style-type: none;
 display: inline;
 } 
 
 /* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6 */
 /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 /* These are the classes applied on the error messages 
 * which prevent them from being displayed by default. */
 
 .textfieldRequiredMsg, .textfieldInvalidFormatMsg, .textfieldMinValueMsg, .textfieldMaxValueMsg, .textfieldMinCharsMsg, .textfieldMaxCharsMsg, .textfieldValidMsg { 
display: none;
 } 
 
 /* These selectors change the way messages look when the widget is in one of the error states. 
 * These classes set a default red border and color for the error text. 
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget, 
 * and this way only the specific error message can be shown by setting the display property to &quot;inline&quot;. */

 .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg { 
display: inline;
 color: #CC3333;
 border: 1px solid #CC3333;
 } 
 
 /* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: 
* focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
* There are two selectors for each state, to cover the two main usecases for the widget: 
* - the widget id is placed on the top level container for the INPUT 
* - the widget id is placed on the INPUT element itself (there are no error messages) */

 /* When the widget is in the valid state the INPUT has a green background applied on it. */
 
 .textfieldValidState input, input.textfieldValidState { 
 background-color: #B8F5B1;
 } 
 
 /* When the widget is in an invalid state the INPUT has a red background applied on it. */
 
 input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input { 
background-color: #FF9F9F;
 } 
 
 /* When the widget has received focus, the INPUT has a yellow background applied on it. */
 
 .textfieldFocusState input, input.textfieldFocusState { 
 background-color: #FFFFCC;
 } 
 
 /* This class applies only for a short period of time and changes the way the text in the textbox looks like. 
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character. */

 .textfieldFlashText input, input.textfieldFlashText { 
 color: red !important;
 } 
 
 /* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
 
 .textfieldHintState input, input.textfieldHintState { 
 /*color: red !important;
*/
 } 
 
 @charset &quot;UTF-8&quot;;
 
 /* SpryFormValidation.css - version 0.5 - Spry Pre-Release 1.6 */
 /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 /* These are the classes applied on the error messages * which prevent them from being displayed by default. */
 
 .textareaRequiredMsg, .textareaMinCharsMsg, .textareaMaxCharsMsg, .textareaValidMsg { 
 display:none;
 } 
 /* These selectors change the way messages look when the widget is in one of the error states. 
 * These classes set a default red border and color for the error text. 
 * The state class (e.g. .textareaRequiredState) is applied on the top-level container for the widget, 
 * and this way only the specific error message can be shown by setting the display property to &quot;inline&quot;. */
 .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg { 
 display: inline;
 color: #CC3333;
 border: 1px solid #CC3333;
 } 
 /* The next three group selectors control the way the core element (TEXTAREA) looks like when the widget is in one of the states: 
* focus, required / minChars / maxChars , valid 
* There are two selectors for each state, to cover the two main usecases for the widget: 
* - the widget id is placed on the top level container for the TEXTAREA 
* - the widget id is placed on the TEXTAREA element itself (there are no error messages) */

 /* When the widget is in the valid state the TEXTAREA has a green background applied on it. */
 
 .textareaValidState textarea, textarea.textareaValidState { 
 background-color:#B8F5B1;
 } 
 
 /* When the widget is in an invalid state the TEXTAREA has a red background applied on it. */
 
 textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea { background-color:#FF9F9F;
 } 
 
 /* When the widget has received focus, the TEXTAREA has a yellow background applied on it. */
 
 .textareaFocusState textarea, textarea.textareaFocusState { background-color:#FFFFCC;
 } /* This class applies only for a short period of time and changes the way the text in the textarea looks like. * It applies only when the widget has enforce max chars enabled and the user tries to type some more. */
 .textareaFlashState textarea, textarea.textareaFlashState{ color:red !important;
 } /* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
 textarea.textareaHintState, .textareaHintState textarea{ /* color: red !important;
*/
 }

/******************Newsletter-Anmeldung**********************/

#newsletterformular {
 margin: auto ;
 padding: 2.5em 1em;
 text-align: center;
 border:1.25px solid #7A7A7A;
 width:85%; 
}

label.form-links {
 clear:both;
 float:left;
 width:15em;
 text-align:right;
 margin:0.25em; 
 padding-right: 2em;
}

 input.text {
 float:left;
 margin:0.25em;
 border:1px solid #7A7A7A;
}

input.submit {
border:1px outset;
background-color: white;
margin-left:0.25em;
float: left;
cursor:pointer;
}

input.submit:hover, input.submit:focus{
border:1px inset;
}
