/**
 * @author      Tanja Fritz
 * @package     Joomla!
 * @subpackage  HTML5 Template
 * @link        http://www.tanja-fritz.com
 * @email       info@www.tanja-fritz.com
 * @copyright   Tanja Fritz
 *
 * Joomla Template
 * Copyright (C) 2015 Tanja Fritz
 *
**/

/* ************** ALLGEMEINE FORMATIERUNGEN *********************
*****************************************************************/


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

html, body{
       background: #dad1b1;
}

/* ************************** TYPO ****************************
*****************************************************************/

body{
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #0052a0;
}

p{
        margin-top: 20px;
}

#one {
     margin-top: -20px !important;
     line-height: 18px;
}



#artikeltext p:first-child{
        margin-top: 0px;
}

h1 {
         font-family: 'Nothing You Could Do', cursive;
         font-size: 26px;
         color: #0052a0;
         padding-bottom: 0.5em;
         }


h2 {
         font-family: 'Nothing You Could Do', cursive;
         font-size: 26px;
         line-height: 22px;
         color: #0052a0;
         }


h3 {
         font-family: 'Nothing You Could Do', cursive;
         font-size: 16px;
         line-height: 21px;
         color: #0052a0;
         }

h4{
         font-family: Arial, sans-serif;
         font-size: 10px;
         font-weight: normal;
         padding-top:2px;
}

#artikeltext ul {
         list-style-type: square !important;
         }

a:visited {
         color: #0052a0;
         font-weight: bold;
      }



#artikeltext {
        padding-top: 10px;
        line-height: 18px;
}

#artikeltext a {
        text-decoration: none;
        color: white;
}


#content p {
        font-size: 14px;
        margin-top: -1px;
}

#content a {
        text-decoration: none;
        color: white;
}



footer{
        text-align: center;
        font-size: 10px;
}



/* ************************** LAYOUT ****************************
*****************************************************************/

#wrapper{
          width: 100%;
          margin: 0 auto;
          height:auto !important;
          overflow: hidden !important; /* FF Scroll-leiste */
}

#main-header{
         width: 100%;
         height:100px;
         float:left;
}

#main-navigation{
        width: 60%;
        height: 100px;
        padding-top: 45px;
        float: right;
        margin-right: 20px;
}

#logo{
        width: 30%;
        height: 100px;
        float:left;
        margin-top: -7px;
        margin-left: 50px;
}


#section-wrapper{
        width: 100%;
        background:url(../images/kap_guten_hoffnung1.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        float:left;
}

body.familie #section-wrapper{
        width: 100%;
        background:url(../images/pinguin2.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        float:left;
}


body.Schwanger #section-wrapper{
        width: 100%;
        background:url(../images/lotus.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        float:left;
}

body.heilkraefte #section-wrapper{
        width: 100%;
        background:url(../images/olive.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        float:left;
}


#content{
        width: 450px;
        min-height: 623px;
        padding: 20px;
        margin: 25px;
        padding-left: 50px;
        padding-right: 50px;
        float:left;
        background: rgba(255, 255, 255, 0.7);
}


body.home #content{
        width: 320px;
        padding: 20px;
        margin: 25px;
        padding-left: 180px;
        float:left;
        background: rgba(255, 255, 255, 0.7);
}


body.home .page-header{
        display: none;
}


#sidebar{
        width: 230px;
        float:left;
        margin-top: 25px;
}


.moduletablebutton1{
        width: 205px;
        height: 205px;
        float:left;
        background:url(../images/schwangere.png) rgba(255, 255, 255, 0.7);
        background-repeat:no-repeat;
        padding-left: 10px;
        padding-right: 10px;
}

.moduletablebutton1 p{
         float:left;
        padding-top: 140px;
}

.moduletablebutton1:hover{
        background:url(../images/schwangere_weiss.png) rgba(218, 209, 177, 0.7);
        background-repeat:no-repeat;
        color: white;
}
 .moduletablebutton1 a{
         color: rgba(8, 82, 157, 1.0);
}

.moduletablebutton1 a:hover{
         color: rgba(255, 255, 255, 1.0);
}

.moduletablebutton2{
        width: 205px;
        height: 205px;
        float:left;
        background:url(../images/pinguin.png) rgba(255, 255, 255, 0.7);
        background-repeat:no-repeat;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 27px;
}

.moduletablebutton2 p{
         float:left;
        padding-top: 140px;
}

.moduletablebutton2:hover{
        background:url(../images/pinguin_weiss.png) rgba(218, 209, 177, 0.7);
        background-repeat:no-repeat;
        color: white;
}

.moduletablebutton2 a{
         color: rgba(8, 82, 157, 1.0);
}

.moduletablebutton2 a:hover{
         color: rgba(255, 255, 255, 1.0);
}

.moduletablebutton3{
        width: 205px;
        height: 205px;
        background:url(../images/baum.png) rgba(255, 255, 255, 0.7);
        background-repeat:no-repeat;
        float:left;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 27px;
}

.moduletablebutton3 p{
         float:left;
        padding-top: 140px;
}

.moduletablebutton3:hover{
        color: white;
        background: url(../images/baum_weiss.png) rgba(218, 209, 177, 0.7);
        background-repeat:no-repeat;
}

.moduletablebutton3 a{
         color: rgba(8, 82, 157, 1.0);
}

.moduletablebutton3 a:hover{
         color: rgba(255, 255, 255, 1.0);
}


#rightbar{
        width: 230px;
        float:right;
        margin-right: 45px;
        color: white;
}

.page-header h1 {
       display: none;
}

footer{
        width: 100%;
        height: 55px;
        background: #dad1b1;
        float:left;
}



/* ************************** NAVIGATION ************************
*****************************************************************/

#main-navigation .menu{
        list-style-type: none;
}

#main-navigation .menu li a{
        width: 130px;
        height: 42px;
        display: block;
        float:right;

        font-family: Arial, sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 42px;
        text-align:center;
        color: #FFF;
        text-decoration: none;
}



#main-navigation .menu li a:hover{
         color: #0052a0;
      }


#main-navigation .menu li a:active{
         color: #0052a0;
         font-weight: bold;
      }



.moduletablefooter{
        width: 600px;
        float: right;
        margin-right: 25px;
        margin-top: 15px;
}

.moduletablefooter ul{
        list-style-type: none;
}

.moduletablefooter li a{
        width: 70px;
        height: 42px;
        display: block;
        float:right;
        list-style-type: none;
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        text-align:center;
        color: #545454;
        text-decoration: none;
}



.moduletablefooter li a:hover{
         color: #0052a0;
      }

.moduletablefooter a:active {
         color: #0052a0;
         font-weight: bold;
      }


/*Scrollbar*/

.content{
        overflow: auto;
        position: relative;
        width: 840px;
        padding-right: 5px;
        padding-top: 10px;
        max-width: 100%;
        height: 630px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.content.hidden{ display: none; }

.content.light{
        background-color: #ddd;
        color: #333;
}

.content p{ margin: 30px 0; }





.content img{
        margin: 0;
       /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;     */
        padding: 3px;
        background: rgba(0,0,0,0.2);
}

.content.light img{ background: rgba(255,255,255,0.4); }

.content input[type='text'], .content textarea{
        border: none;
        background: transparent;
        background-color: #bbb;
        background-color: rgba(255,255,255,0.6);
        min-height: 20px;
        padding: 5px;
        /*-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
        -webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
        box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
        -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
        width: 50%;*/
        font-size: inherit;
        font-family: inherit;
        color: #222;
}

@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {

#rightbar{
        width: 100px;
        float:right;
        margin-right: 25px;
        color: white;
}
#section-wrapper{
        width: 100%;
        background:url(../images/kap_guten_hoffnung1.jpg);
        background-repeat: no-repeat;
        background-size: 120% auto;
        background-position: -130px 0px;
        float:left;
}

body.familie #section-wrapper{
        width: 100%;
        background:url(../images/pinguin2.jpg);
        background-repeat: no-repeat;
        background-size: 120% auto;
        float:left;
}


body.Schwanger #section-wrapper{
        width: 100%;
        background:url(../images/lotus.jpg);
        background-repeat: no-repeat;
        background-size: 110% auto;
        background-position: -50px 0px;
        float:left;
}


}

@media screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {

#main-header{
         width: 100%;
         height:170px;
         float:left;
}
#main-navigation{
        width: 90%;
        height: 100px;
        padding-top: 15px;
        float: left;
        margin-left: 50px;
}
#logo{
        width: 90%;
        height: 100px;
        float: left;
        margin-top: -7px;
        margin-left: 50px;
}
#rightbar{
        width: 300px;
        float: left;
        margin-left: 25px;
        color: white;
}
#section-wrapper{
        width: 100%;
        background:url(../images/kap_guten_hoffnung1.jpg);
        background-repeat: no-repeat;
        background-size: 147% auto;
        background-position: -150px 0px;
        float:left;
}

body.familie #section-wrapper{
        width: 100%;
        background:url(../images/pinguin2.jpg);
        background-repeat: no-repeat;
        background-size: 140% auto;
        background-position: -50px 0px;
        float:left;
}


body.Schwanger #section-wrapper{
        width: 100%;
        background:url(../images/lotus.jpg);
        background-repeat: no-repeat;
        background-size: 140% auto;
        background-position: -80px 0px;
        float:left;
}

#sidebar{
        width: 800px;
        float:left;
        margin-top: 25px;
        margin-left: 25px;
}

.moduletablebutton1{
        width: 205px;
        height: 205px;
        float:left;
        background:url(../images/schwangere.png) rgba(255, 255, 255, 0.7);
        background-repeat:no-repeat;
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 20px;
        margin-bottom: 27px;
}

.moduletablebutton2{
        width: 205px;
        height: 205px;
        float:left;
        background:url(../images/pinguin.png) rgba(255, 255, 255, 0.7);
        background-repeat:no-repeat;
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 20px;
        margin-bottom: 27px;
}



}

@media screen and (min-device-width:320px) and (max-device-width:480px) {

#main-header{
         width: 100%;
         height:200px;
         float:left;
         margin-left: 10px;
}
#main-navigation{
        width: 100%;
        height: 100px;
        padding-top: 15px;
        float: left;
        margin-left: -30px;
}
#logo{
        width: 95%;
        height: 100px;
        float: left;
        margin-top: -7px;
        margin-left: 10px;
}

#logo img{
        width: 90%;
}
#content{
        width: 84%;
        min-height: 660px;
        padding: 5px;
        margin-top: 220px;
        margin-bottom: 0px;
        padding-left: 3px;
        padding-right: 3px;
        float:left;
        background: none;
}

body.home #content{
        width: 84%;
        padding: 5px;
        margin-top: 220px;
        padding-left: 40px;
        float:left;
        background: none;
}


.page-header {
         -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
}


.moduletablebutton1{
        width: 255px;
        height: 255px;
        float:left;
        background:url(../images/schwangere_gross.png) rgba(255, 255, 255, 0.7);
        background-repeat:no-repeat;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 25px;
        margin-bottom: 27px;
}

.moduletablebutton1 p{
         float:left;
        padding-top: 185px;
        padding-left: 10px;
        font-size: 16px;
}
.moduletablebutton1:hover{
        background:url(../images/schwangere_gross_weiss.png) rgba(218, 209, 177, 0.7);
        background-repeat:no-repeat;
        color: white;
}
.moduletablebutton2{
        width: 255px;
        height: 255px;
        float:left;
        background:url(../images/pinguin1_gross.png) rgba(255, 255, 255, 0.7);
        background-repeat:no-repeat;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 25px;
        margin-bottom: 27px;
}
.moduletablebutton2 p{
         float:left;
        padding-top: 185px;
        padding-left: 10px;
        font-size: 16px;
}
.moduletablebutton2:hover{
        background:url(../images/pinguin1_gross_weiss.png) rgba(218, 209, 177, 0.7);
        background-repeat:no-repeat;
        color: white;
}
.moduletablebutton3{
        width: 255px;
        height: 255px;
        background:url(../images/baum_gross.png) rgba(255, 255, 255, 0.7);
        background-repeat:no-repeat;
        float:left;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 25px;
        margin-bottom: 27px;
}
.moduletablebutton3 p{
         float:left;
        padding-top: 185px;
        padding-left: 10px;
        font-size: 16px;
}
.moduletablebutton3:hover{
        color: white;
        background: url(../images/baum_gross_weiss.png) rgba(218, 209, 177, 0.7);
        background-repeat:no-repeat;
}

.moduletablefooter{
        width: 80%;
        float: left;
        margin-top: 15px;
        margin-left: 15px;
}
}

@media screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) {

#main-navigation{
        width: 80%;
        height: 100px;
        padding-top: 15px;
        float: left;
        margin-left: -60px;
}


body.home #content{
        width: 84%;
        padding: 5px;
        margin-top: 320px;
        padding-left: 60px;
        float:left;
        background: none;
}

#content{
        width: 84%;
        min-height: 660px;
        padding: 5px;
        margin-top: 320px;
        margin-bottom: 0px;
        padding-left: 3px;
        padding-right: 3px;
        float:left;
        background: none;
}

.page-header {
         -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
}

#sidebar{
        width: 300px;
        float:left;
        margin-top: 25px;
        margin-left: 50px;
}
#rightbar{
        width: 300px;
        float: left;
        margin-left: 100px;
        color: white;
}
.moduletablefooter{
        width: 80%;
        float: left;
        margin-top: 15px;
        margin-left: -60px;
}
}