/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 12.01.2016, 08:47:33
    Author     : admin
*/
html,body{
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #292133;
    padding: 0;
    margin: 0;
}
header{
    height: 50px;
    padding: 5px;
    text-align: left;
    color: #333D3F;
    font-size: 3.5em;   
    font-family: Algerian; 
    background-color: #FEFEFE;
    background-image: url(../bilder/hopelogo_blau.jpg);
    background-size: auto 60px;
    background-repeat: no-repeat;
    background-position: right;
}
section#container{ 
    width: 90%;
    min-height: 100px;
    margin-left: auto;
    margin-right: auto;
}
nav {
    height: auto;
    width: 15%;
    float: left; 
}
footer {
    height:20px;
    text-align: center;    
    background-color: #DDDDDD;
    clear: both;
    margin-top: 5px;
    color: #292133;
    padding: 5px;
}

#email{
    display: none;
}
/*Es folgen die pseudoklassen des a-tags--> definition der ----------links-------------
    LoVe-HAte
*/
a:link{
    color: #008AAE;
    font-weight: bold;
    text-decoration: none;
}
a:visited{
    
}
a:hover{
    color: red;
    
}
a:active{
    color: brown;
    
}
/*---------Bilder--------------Bilder-----------Bilder-------------*/
img#logoindex{
    width: 100%;
    height: auto;
}
img#startseite{
    width: 80%;
    height: 30%;
}
iframe{
    width: 80%;
    
    
   
}
img.tierrettung{
    width: 50%;
    height: auto;
    float: left;
    margin: 8px;
   /* margin-right: 10px;
    margin-bottom: 10px;*/
}
img.team{
    width: 90%;
    height: auto;
}
.teamfoto{
    padding: 10px;
    width: 50%
}
/*Gilt auch für Tierrettung*/
#bongo2{
    width: 90%;
    height: auto;
}
#validation{
    float: right;
}

.dank{
    width: 40%;
    height: auto;
}
#abszess{
    width: 25%;
}


/*---------table-------------table----------------table----------*/
table, th, td{
    padding: 5px;
    
    width: 90%;
    border: none;
    border-collapse: collapse;
    border-bottom: 3px solid #bebebe;
    border-left: none;
    border-right: none;
    margin-left: auto;
    margin-right: auto;
}
tbody tr.odd td{
    background-color: #ededed;
}
ul{
    list-style-type: circle;
}

/*ab hier: css für -----------------Aufklappmenü----------------------- */
  ul#navigation {
    margin: 0; 
    padding: 0;
    text-align: center;
  }
  ul#navigation li {
    list-style: none;
     /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; 
    padding: 0;
  }
  ul#navigation li ul {
    margin: 0; 
    padding: 0;
    position: absolute;
    top: 3em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  ul#navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }
  ul#navigation a:hover, ul#navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: green;
  }
  
/*----------------------Text----------Text-------------Text--------------*/
p{
    line-height: 1.5;
}
h1{
    font-size: 1.5em;
    font-weight: bold;
    color: brown;
    font-family: Albertus MT;
}
.teamtext{
    width: 50%
}
#kontofett{
    font-weight: bold;
}
#italic{
    font-style: italic;
}
#italicbold{
    font-style: italic;
    font-size: 1.5em;
    font-weight: bold;
}

.video{
    width: 60%;
    height: auto;
    
}


/*--------------pdf-------------zurück-------------pdf--------*/
.zurueck{
    clear: both;
}
#pdf{
    height: 25px;
    width: auto;
}
/*====================== min 1000px ========================= min 1000px ======================== min 1000px ======================*/
@media screen and (min-device-width: 1000px){
    
    body{
    background-image: url(../bilder/background_kompkomp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
    #spendeheader{
    margin-left: 5%;
    font-size: 0.3em;
    font-family: verdana;
}
    #titel{
        float: left;
        font-size: 2.5vw;
    }
    menu{
        display: none;
    }
    #container{
        margin-top: 60px;
    }
      ul#navigation a, ul#navigation span {
    display: block;
    width: 100%;
    height: 1.5em;/* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 0.2em;
    text-decoration: none; font-weight: bold;
    font-family: Algerian; 
    font-size: 1.5vw;
    color: #ffffff; background-image: url(../bilder/nav802_komp.jpg);
    background-size: cover;
   border: 1px solid #fefefe;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.4);
  }
    div.fb-page{
    padding: 2px;
    float: right;
    width: 15%;
    background-color: #fefefe;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.4);
    
}
section#content {
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
   /* border: 2px solid blue;*/
    width: 60%;
    float: none;
    
    background: #eee;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.4);
    background: -moz-linear-gradient(top, #EEE, #FFF);    
    background: -webkit-linear-gradient(top, #eee, #fff);
    background: -ms-linear-gradient(top, #eee, #fff);
    background: -o-linear-gradient(top, #eee, #fff);
    min-height: 500px;
}
}
/*================= max 1000px portrait ================= max 1000 px portrait =============== max 1000px portrait======================*/
@media screen and (orientation: portrait) and (max-device-width: 1000px){
    body{
    background-image: url(../bilder/background_kompkomp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    }
    #spendeheader{
   display: none;
    }
    #container{
    margin-top: 20px;
    }

    ul#navigation a, ul#navigation span {
    display: block;
    width: 100%;
    height: 20px;/* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 0.2em;
    text-decoration: none; font-weight: bold;
    font-family: Algerian; 
    font-size: 14px;
    color: #fefefe; background-image: url(../bilder/nav802_komp.jpg);
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.4);
  }

   
    section#content {
    padding: 5px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    float: none;
    background: #eee;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.4);
    background: -moz-linear-gradient(top, #EEE, #FFF);    
    background: -webkit-linear-gradient(top, #eee, #fff);
    background: -ms-linear-gradient(top, #eee, #fff);
    background: -o-linear-gradient(top, #eee, #fff);
    min-height: 300px;
    }
    #titel{
        display: none;
    }
    menu img#button{
        height: 55px;
        width: auto;
    }
    menu{
    position: absolute;
    left: -40px;
    top: -10px;
    }
   
   menu:hover ~#container nav, nav:hover{
        left: 0px;
    }
    
     nav{
        width: 125px;
        height: 100%;
        position: absolute;
        left: -150px;
        background-color: #FEFEFE;
        transition: left 1s;
        }
    div.fb-page{
       display: none;
    }
        
}
/*===================== max 1000 px landscape ======================= max 1000 px landscape================== max 1000 px landscape ====*/
@media screen and (orientation: landscape) and (max-device-width: 1000px){
 
    body{
    background-image: url(../bilder/background_kompkomp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    }
    #spendeheader{
    display: none;
    }
    #container{
    margin-top: 30px;
    }
    
       ul#navigation a, ul#navigation span {
    display: block;
    width: 100%;
    height: 20px;/* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 0.2em;
    text-decoration: none; font-weight: bold;
    font-family: Algerian; 
    font-size: 14px;
    color: #fefefe; background-image: url(../bilder/nav802_komp.jpg);
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.4);
  }
 
    /* Hier die Definition, die nur angewendet werden soll, wenn das Gerät horizontal gehalten wird */
    section#content {
    padding: 5px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    float: none;
    background: #eee;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 2px 4px rgba(0,0,0,.4);
    background: -moz-linear-gradient(top, #EEE, #FFF);    
    background: -webkit-linear-gradient(top, #eee, #fff);
    background: -ms-linear-gradient(top, #eee, #fff);
    background: -o-linear-gradient(top, #eee, #fff);
    }
      #titel{
        display: none;
    }
     /* Anpassung der Navigation */
    nav{
        width: 125px;
        position: absolute;
        height: 100%;
        left: -150px;
        padding-right: 5px;
        background-color: #FEFEFE;
        transition: left 1s;
    }
     menu img#button{
        height: 55px;
        width: auto;
    }
    menu{
    position: absolute;
    left: -40px;
    top: -10px;
        
    
    }
    menu:hover ~#container nav, nav:hover{
        left: 0px;

    }
    
    div.fb-page{
      display: none;
    } 
    }