@charset "utf-8";

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #F7F7F7;
	margin: 0;
	padding: 0;
	color: #1a171b;
}
.wrapper {
    width: 80%;
    max-width: 888px; 
    min-width: 888px;
    background: #fff;
    margin: 0 auto; /* Positionierung mittig- */
}    

/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 0px; 
}

h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase; 	
	font-weight: normal; 
}

h1 {
	margin-top: 30px; 
	font-size: 1.1em; 	
	margin-bottom: 15px;
	color: #666666;
}

h2, h3 {
	color: #cb081c; 
	font-weight: bold; 
	margin-bottom: 0px;  
}

table, tr, tbody, td{
	margin: 0; 
	padding: 0; 
}

td {
	margin-left: 0px; 
	margin-right: 5px;
	padding-left: 0px; 
}

table {
    margin-bottom: 10px;
}

a img {
	border: none;
}
  
p, td , h2, #content li {
    font-size: 0.7em; 	
}    

a:link {
	color:#666666;
	text-decoration: none; 
}
a:visited {
	color: #666666;
	text-decoration: none;
}
a:hover, a:active, a:focus { 
	color: #cb081c;
}

#logo{
    float: left;
    margin-left: 17px;	
    margin-top: 30px;	
    position: relative; 
    overflow: hidden; 
}

#farbbalken{
    height: 122px; 
    width: 640px; 
    background-image:url(images/farbverlauf.png); 
    background-repeat:repeat-y;
    float:right;
}

#content {
    width: 673px; 
    margin-top: 33px; 
    padding: 0 0 20px 0;
    float: right; 
}

#navigation ul li {
    background: url(images/punkt.gif); 
    background-repeat: repeat-x; 
    background-position: bottom;
    padding: 7px 0 7px; 
}

#navigation{
    float: left; 
    margin-left: 40px; 
    margin-top: 27px; 
}

#navigation ul{
    list-style: none;
    text-transform:uppercase; 
    font-size: 0.75em; 
}

#navigation ul li a.active{
	color: #cb081c;
}

#content ul, #content ol { 
	padding: 0 15px 15px 40px; 
}

#footer {
	width: 100%; 
	background-color: #666666; 	
	color: #FFFFFF; 
	font-weight: bold; 
	padding: 3px 0 ; 
	text-align: center; 
    font-size: 10px; 
}

span.dot {
    padding: 0 4px;
}

.clear { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}


@media all and (min-width: 1064px){
/* normal view width shades */
    body {
	    background: #FFFFFF;
    }

    .vision  img{
        width: 673px;
        height: 181px;
        text-align: center;
    }
    
    
    .outerwrapper {
        width: 100%;
        max-width: 1064px; 
        min-width: 380px;
        background: #FFF;
        margin: 0 auto; /* Positionierung mittig- */
        background-image: url(images/verlauf_hintergrund_schatten_unten.png),url(images/verlauf_hintergrund_schatten.png);
        background-repeat:no-repeat,repeat-y;
        background-position: center bottom,center;
        padding-bottom: 54px;
    }

}

@media all and (min-width: 890px) and (max-width: 1064px){
    /* normal view without shades */

    .vision  img{
        width: 673px;
        height: 181px;
        text-align: center;
    }
    
    .outerwrapper{
        max-width: 1064px
        min-width: 380px;
        width: 99%;
    }
    
}




@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {
    /* PAD */
    
    #farbbalken{
            display: none;
    }

    #content{
        margin-top: -130px;
        width: 580px;
        font-size: 1.25em;
    }
    
    #content  img {
        max-width: 100%;
    }
   
    a:hover, a:active, a:focus { 
        color: #cb081c; 
    }
    
    #navigation ul li a.active{
        color: #cb081c;
    }

    #navigation ul{
        list-style: none;
        text-transform:uppercase; 
        font-size: 1.2em; 
    }
    
    #navigation li {
        width: 100%; 
    }
    
    #navigation li a {
        width: 100%; 
        padding: 2px 10px; 
    }
    
   
    #navigation ul li {
        padding: 7px 0 7px; 
        background: url(images/punkt.gif); 
        background-repeat: repeat-x; 
        background-position: bottom;
        
    }
    
    #footer {
        background-color: #CCCCCC;
        font-weight: normal; 
        color: black;
    }    
        
    
}

@media all and (max-width: 890px){
    /* Mobile Varianten */
    #farbbalken{
            display: none;
    }

    .wrapper {
        width: 100%;
        max-width: 100%; 
        min-width: 100%;
        background: #fff;
        padding: 0px;
        margin: 0 auto; /* Positionierung mittig- */
    }    

    a:hover, a:active, a:focus { 
        color: #cb081c; 
    }
    
    #navigation ul li a.active{
        color: #cb081c; 
    }
    
    #content {
        width: 100%;
        max-width: 100%; 
        min-width: 100%;
    }

    #logo{
        width: 100%;
        text-align: center; 
        margin-left: 0px;	
        margin-top: 30px;	
    }
    
    #content  img {
        max-width: 100%;
    }

    #content  div.vision {
        width: 100%;
        text-align: center;
    }

    p, td, h2, #footer {
        font-size: 1em;
    }    
    
    p, h2, h1 {
            margin-left: 10px;
    }
    
    #navigation{
        width: 100%;
        margin: 15px 0 10px;
    }

    #navigation ul{
        font-size: 1.2em; 
    }
    
    #navigation li {
        width: 100%; 
    }
    
    #navigation li a {
        width: 100%; 
        padding: 2px 10px; 
    }
   
    #navigation ul li {
        padding: 7px 0 7px; 
        background: url(images/punkt.gif); 
        background-repeat: repeat-x; 
        background-position: bottom;
        
    }
    
    #footer {
        background-color: #CCCCCC;
        font-weight: normal; 
        color: black;
    }
    
    span {
        clear:both;
        display: block;
    }
    
    span.dot{
        display: none;
    }

}