/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a:focus { outline: 0; }
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* Hide from both screenreaders and browsers */
.hidden { display: none !important; visibility: hidden; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }


/* ==|== font styles and sizes =====================================================
   Author: www.labseven.de
   ========================================================================== */
   
html, button, input, select, textarea, h1, h2 { font-family: Arial, serif; }
pre, code, kbd, samp { font-family: 'courier new', monospace, serif; }

/* ==|== primary styles =====================================================
   Author: www.labseven.de
   Farb-Ci:

  BLAU: #02376B
  Grau:    119/120/132 #777884    
  Mittleres Grau:  #C6C4CB
  Hellgrau: #f0f0f0
   ========================================================================== */
   
a, a:visited, a:hover {color:#02376B; text-decoration: none;}
a:hover {text-decoration: underline; }

body { background: #dfdfdf; }
#container { width: 960px; margin: 0 auto; background: #fff; }
#head {}           

       
#head ul { list-style: none; padding: 0; margin: 0; border: 0; background: #02376B;}   
#head ul li { display: block; float: left; width: 25%; list-style: none; padding: 0; margin: 0; text-align: center; white-space: nowrap; }    
#head ul li a { display: block; color: #fff; background: #02376B;  font-size: 0.9em; line-height: 1.5em; text-transform: uppercase; padding: 9px 0; border-bottom: 4px solid #fff;}         
#head ul li a:hover { color: #000; text-decoration: none; background: #FBC54B;}   
#head ul li a.rex-current, #head ul li a.rex-active { color: #fff; text-decoration: none; background: #000; border-bottom: 4px solid #FBC54B; }            

#logo { float: left; padding: 0.5em 1em; width: 180px; height: 75px;}   
#sprachen { float: right; padding: 0.5em 1em; width: auto; height: 50px;}
#headimage { height: auto; max-height: 200px; overflow: hidden; clear: both; padding: 0 1em;}   
#headimage a, #headimage div { display: block; float: left; width: 33.3%; height: auto; border-left: 1px solid #fff; margin-right: -1px;}     
#headimage a:last-child, #headimage div:last-child { margin-left: 0;}   
#headimage a img, #headimage div img { width: 100%; height: auto; float: left; }                                                              
#headimage a span, #headimage div span { display: block; width: 94%; padding: 6px 3%; margin: 0; text-align: left; color: #fff; font-size: 13px; line-height: 13px; background: url('40prozentw.png') top right transparent; margin-top: -40px; float: left;  text-transform: uppercase; }  
      
.bilder img { border: 1px solid #ddd; padding: 3px; margin-right: 3px;}    
.zertifikate a img { border: 1px solid #ddd; padding: 0; margin-right: 3px;}   
.zertifikate a span { display: block; font-size: 0.8em; color: #999; padding: 8px 0;}  
.zertifikate a:hover, .zertifikate a:hover span { text-decoration: none; color: #02376B;}     
                                                                                                                  
#subhead { clear: both; padding: 2em 50px; min-height: 300px;}                       
#navigation { float: left; width: 20%; overflow: hidden; padding-top: 0; font-size: 0.9em;}
#content { float: right; width: 66.6%;  font-size: 0.9em; color: #777884;}  
#content.full { float: none; width: 100%; }                                                              
h1, h2 { color: #999; font-size: 1em; border-bottom: 1px solid #999; color: #999; text-transform: uppercase; margin: 1em 0; padding: 0 0 5px 0; }  
#content h2 { padding-top: 2em; text-transform: none; } 
#footer { clear: both; background: #02376B; padding: 1em 50px; font-size: 0.7em; color: #ddd; height: auto; min-height: 5em;}   
#footer div { float: left; width: 30%; padding: 0 3% 0 0;}  
#footer div a { color: #ddd; }   
h1 img { margin: 0 0.5em 0 0;}

#top { width: 30px; height: 10px; display: block; float: right; clear: both; margin: 1em 0 0 0; padding: 0; border: 0; background: url('btnTop.gif') top left no-repeat transparent;}
                          
#footer div div { float: none; width: auto; padding: 0 0 0 25px;}  
#footer #imprint { background: url('icon_imprint.png') 0px 3px no-repeat transparent;  }    
#footer #place { background: url('icon_place.png') 0px 3px no-repeat transparent;  }
#footer #contact { background: url('icon_contact.png') 0px 3px no-repeat transparent;  }  
#footer #contact div { padding-left: 30px;}  

       
#navigation ul { list-style: none; padding: 0 0 2em 0; margin: 0; border: 0; line-height: 1.5em; font-size: 0.9em; }   
#navigation ul li { list-style: none; padding: 0; margin: 0; }    
#navigation ul li a { display: block; color: #999; background: url('list_a.png') 0 1px no-repeat transparent; padding-left: 20px; }         
#navigation ul li a:hover { color: #000; text-decoration: none; background-color: #ddd; }   
#navigation ul li a.rex-current { color: #02376B; text-decoration: none; font-weight: bold; background-image: url('list.png'); }

a.linkbox { display: block; clear: both; margin: 1em 0; padding: 20px 20px 12px 12px; color: #fff; background: url('plus.png') top right no-repeat #999; font-size: 0.8em; }     
a.linkbox:hover { background-color: #02376B; text-decoration: none; }

div.bildbox { padding: 0.5em 1em; background: #f0f0f0; color: #02376B; clear: both; font-size: 0.9em; margin: 2em 0 1em 0;}    
div.bildbox ul li a { color: #02376B; font-weight: bold; }    
 
div.bildbox.bild { padding: 0; background: #f0f0f0; border-bottom: 1px solid #ddd; }     
div.bildbox.bild div.bild { float: left; width: 160px; margin: 5px 15px 15px 5px; border: 3px solid #fff; }       
div.bildbox.bild div.text { margin: 5px 5px 5px 186px; }               
div.bildbox.bild div.text p { padding-top: 0; margin-top: 0; }         
#content div.bildbox.bild div.text ul li { padding-top: 0; margin-top: 0; line-height: 1.1em; min-height: 12px; }   
                                                                                                                                                              
#content ul { list-style: none; padding-left: 0;}
#content ul li { list-style: none; background: url('list.png') top left no-repeat transparent; padding-left: 20px; min-height: 16px; padding-bottom: 4px;}
                                                  
#content img{max-width:100%; height:auto;}
#content td img{max-width:100%; height:auto;}
#content table{border-collapse:collapse;  border-top: 0; width:99%; margin-bottom: 1em; }          
#content table tr th{border-bottom:1px solid #ddd; background: #ddd; padding:4px; text-align: left; font-size: 0.9em; vertical-align: top; }   
#content table tr td{border-bottom:1px solid #ddd;  padding:4px 2em 4px 0;  }   
#content table tr:last-child td {border-bottom:0;  }    
#content table tr th p, #content table tr td p{ padding: 0; margin: 0;  }   

#content.full table tr td:first-child { white-space: nowrap;  }

 
.bilderliste div { float: left; width: 33.3%; padding: 0; border-left: 1px solid #fff; margin-left: -1px;}   
.bilderliste.ohne div { float: left; width: auto; padding: 0 1% 0 0;}  
.bilderliste div img { width: auto; max-width: 100%; height: auto;}    
.bilderliste div span { font-size: 0.8em; display: block; padding: 6px 2em 0 0; }  
.bilderliste div span.grau { background: #f0f0f0; }  
 

/* ==|== media styles =======================================================
   Print and different media styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media only screen and (min-width: 1280px) {
}
@media only screen and (max-width: 970px) {    
    #container { width: 93%; }
}   
@media only screen and (max-width: 800px) {       
    div.bildbox.bild div.bild { float: none; width: 210px; padding: 0 0 1em 0; }       
    div.bildbox.bild div.text { margin-left: 0; padding: 1em 0; }   
    #navigation { width: 27%; }
    #footer div { float: left; width: 48%; padding: 0 2% 0 0;}                    
}   
@media only screen and (max-width: 640px) {     
    #container { width: 100%; }               
    #logo { padding: 1em 15px; }
    #headimage { border-width: 15px;}  
    div.copyinfo {margin: 0 15px; }   
    #subhead { clear: both; padding: 1em 15px;}             
    #footer { padding: 1em 15px; }   

    #navigation { float: none; width: 100%; padding-top: 0;}
    #content { float: none; width: 100%; }
                                          
    #navigation h3.aktiv { display: block; cursor: pointer; background: #f0f0f0; padding: 4px; border-top: 1px solid #777884;}       
    #navigation h3.aktiv:hover { color: #fff; background: #777884;}    
    #navigation ul.inaktiv { display: none;}                        
    .nophone { display: none;}     
}     
@media only screen and (max-width: 540px) {       
    #breadcrumb { display: none; }            
    #footer div { float: none; width: 100%; padding: 0 0 0 0;}  
} 


@media print {
    body { background: #fff; }  
    #container { width: 93%; margin: 0 auto; background: #fff; }         
    #breadcrumb { display: none; }           
    #navigation { display: none;}
    #content { float: none; width: 100%; }   
    div.bildbox { background: #fff; }      
    #footer { background: #fff; padding: 1em 1em; border-top: 1px solid #777884; }   
    #footer div { float: left; width: 30%; padding: 0 3% 0 0;}    
}