@charset "utf-8";
/* CSS Document */

body {
background-color:#CCC;
margin:0;
}

img {
border: none;
}

img.cent {
margin:auto;
}

img.right {
float: right;
margin: 12px 0px 12px 15px;
}


/*Desktop-Version*/
@media screen and (min-width: 661px) {

body {
background-image:url(../img/hintergrund-pfoten.jpg);
background-repeat:repeat;
background-position:center top;
}

#gesamt {
position:relative;
width:950px;
margin:auto;
padding:auto;
}


#top {
background-color:#ccc;
width:950px;
height:230px;
top:0px;
float:left;
background-image:url(../img/desktop-top.png);
background-position: left top;
background-repeat: no-repeat;
}


#navi {
width:225px;
top:230px;
height:auto;
float:left;
background-image:url(../img/layout-top-left-middle.jpg);
background-position: left top;
background-repeat:repeat-y;
text-align:left;
}
#navi ul.menu {
margin:0px;
padding:0px 10px 0px 30px;
}
#navi a#nav-m,
#navi a.close {
display: none;
}
#navi ul li {
margin: 0 30px 0 0;
list-style-type:none;
margin:0px 0px 10px 0px;
}
#navi ul li a {
background-image:url(../img/button-pfote-schwarz.png);
background-position: left center;
background-repeat:no-repeat;
padding:0px 0px 0px 30px;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-style:italic;
font-weight:normal;
color:#000000;
}
#navi ul li a:hover {
background-image:url(../img/button-pfote-orange.png);
color:#005f6a;
}
#navi ul li a.active {
background-image:url(../img/button-pfote-orange.png);
color:#000000;
}


#footernavi {
background-image:url(../img/layout-top-left-bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
width:225px;
height:45px;
float:left;
}


#inhalt {
background-image:url(../img/layout-top-right-middle.jpg);
background-position: left top;
background-repeat: repeat-y;
text-align:center;
width:605px;
top:160px;
height:auto;
left:225px;
float:right;
padding:0px 60px 0px 60px;
margin:0px;
position:absolute;
}
#inhalt p {
text-align:justify;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.6em;
color:#000000;
padding:0px 0px 20px 0px;
margin:0px;
}
#inhalt h1 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
font-style:italic;
font-weight:normal;
color:#000000;
padding:18px 0px 2px 0px;
margin:0px;
text-decoration:none;
}
#inhalt h2 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
color:#000000;
padding:10px 0px 10px 0px;
margin:0px;
text-decoration:underline;
}
#inhalt h3 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
line-height:1.4em;
margin:0px;
padding:8px 0px 8px 0px;
color:#000000;
text-decoration:none;
}
#inhalt h4 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
color:#000000;
padding:10px 0px 20px 0px;
margin:0px;
text-decoration:underline;
}
#inhalt h5 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:bold;
line-height:1.6em;
margin:0px;
padding:8px 0px 8px 0px;
color:#005f6a;
text-decoration:none;
}
#inhalt h6 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
line-height:1.6em;
margin:0px;
padding:0px 0px 20px 0px;
color:#000000;
text-decoration:none;
}
#inhalt a {
text-decoration:underline;
color:#005f6a;
}
#inhalt a:hover {
text-decoration:underline;
color:#000000;
}


/*Bild links - Text rechts*/
#tabelle1 table {
background-image:none;
text-align:left;
text-align:center;
padding:0px;
margin:10px auto 10px auto;
border:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
width:600px;
}
#tabelle1 table tr {
padding:0px;
margin:0px;
}
#tabelle1 table td {
padding:0px 0px 30px 0px;
margin:0px;
}
#tabelle1 table tr td a {
text-decoration:underline;
color:#005f6a;
}
#tabelle1 table tr td a:hover {
text-decoration:underline;
color:#000000;
}
#tabelle1 table tr td h1 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1.2em;
text-decoration:none;
padding:0px 0px 0px 0px;
margin:0px;
}
#tabelle1 table tr td h2 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1.4em;
text-decoration:none;
padding:5px 0px 0px 0px;
margin:0px;
}
#tabelle1 img {
width:280px;
height:210px;
}


/*Eltern - Bild und Text nebeneinander*/
#tabelle2 table {
background:url(../img/bg-table.jpg) repeat;
text-align:center;
padding:0px;
margin:10px auto 10px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
border-top:0px solid #464646;
border-left:0px solid #464646;
border-right:1px solid #464646;
border-bottom:1px solid #464646;
width:600px;
}
#tabelle2 table tr {
padding:0px;
margin:0px;
}
#tabelle2 table td {
padding:5px 5px 5px 5px;
margin:0px;
border-top:1px solid #464646;
border-left:1px solid #464646;
border-right:0px solid #464646;
border-bottom:0px solid #464646;
width:140px;
}
#tabelle2 table tr td h1 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1.6em;
text-decoration:none;
padding:5px 0px 5px 0px;
margin:0px;
}
#tabelle2 img {
width:280px;
height:210px;
}


/*Liste - Wochen - Jahre*/
#tabelle3 table {
background:url(../img/bg-table.jpg) repeat;
text-align:center;
padding:0px;
margin:10px auto 10px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
border-top:0px solid #464646;
border-left:0px solid #464646;
border-right:1px solid #464646;
border-bottom:1px solid #464646;
width:600px;
}
#tabelle3 table tr {
padding:0px;
margin:0px;
}
#tabelle3 table td {
padding:10px 2px 10px 2px;
margin:0px;
border-top:1px solid #464646;
border-left:1px solid #464646;
border-right:0px solid #464646;
border-bottom:0px solid #464646;
}
#tabelle3 table tr td h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
text-align:left;
font-weight:bold;
font-style:normal;
line-height:1.4em;
color:#000000;
padding:0 5px 0 5px;
}
#tabelle3 table tr td h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
text-align:left;
font-weight:normal;
font-style:normal;
line-height:1.4em;
color:#000000;
padding:0 5px 0 5px;
}
#tabelle3 table tr td a {
text-decoration:none;
color:#000000;
}
#tabelle3 table tr td a:hover {
text-decoration:none;
color:#005f6a;
}


/*Wurfstatistik*/
#tabelle4 table {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
padding:0px;
margin:10px auto 10px auto;
}
#tabelle4 table tr {
padding:0px;
margin:0px;
}
#tabelle4 table td {
padding:0px 10px 0px 10px;
margin:0px;
}
#tabelle4 table tr td a {
text-decoration:none;
color:#005f6a;
}
#tabelle4 table tr td a:hover {
text-decoration:none;
color:#000000;
}
#tabelle4 table tr td h1 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
color:#000000;
line-height:1.6em;
text-decoration:none;
padding:10px 0px 10px 0px;
}
#tabelle4 table tr td h2 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1.4em;
text-decoration:none;
padding:5px 0px 5px 0px;
}


/*Bild links und rechts - Texte darunter*/
#tabelle5 table {
text-align:center;
padding:0px;
margin:10px auto 10px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
width:600px;
}
#tabelle5 table tr {
padding:0px 0px 0px 0px;
margin:0px;
}
#tabelle5 table td {
padding:0px 0px 25px 0px;
margin:0px;
border:none;
}
#tabelle5 table tr td a {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
line-height:1.6em;
padding:5px 0px 0px 0px;
margin:0px;
text-decoration:none;
color:#000000;
}
#tabelle5 table tr td a:hover {
text-decoration:none;
color:#005f6a;
}
#tabelle5 img {
width:280px;
height:210px;
}


#footer {
background-image:url(../img/layout-top-right-bottom.jpg);
background-position: left top;
background-repeat: no-repeat;
width:725px;
height:60px;
left:0;
position:absolute;
}

}



/*Mobile-Version*/
@media screen and (max-width: 660px) {

#gesamt {
position:relative;
width:100%;
margin:auto;
padding:auto;
}


#top {
background-image:url(../img/smiling-spots_neu.png);
background-size:contain;
background-repeat:no-repeat;
background-color:#d8d8d8;
width:85%;
height:130px;
top:0px;
float:left;
}


#navi {
background-color:#d8d8d8;
width:15%;
top:0px;
height:130px;
float:right;
text-align:right;
}
#navi a#nav-m img,
#navi a.close img {
width: 50px;
height: auto;
}
#navi > .close,
#navi a#nav-m:target {
display: none;
}
#navi a:target ~ ul,
#navi a:target ~ .close {
display: inline-block;
}
#navi a:target ~ .close {
position: absolute;
margin-left: -50px;
}
#navi a:target ~ ul {
left: 0;
}
#navi ul.menu {
top:8em;
position:absolute;
background:#d8d8d8;
width: 100%;
left: -100%;
list-style-type:none;
margin: 0;
padding: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
border-top: 2px solid #fff;
}
#navi ul.menu li{
display: block;
text-align: left;
padding: 10px 0 0 10px;
border-bottom: 1px solid #fff;
height: 30px;
}
#navi ul.menu li a {
color:#005F6A;
font-size: 1em;
text-decoration: none;
font-family: Verdana, Arial, sans-serif;
}
#navi ul.menu li a:hover {
border-bottom: 0;
}


#footernavi {
}


#inhalt {
background-color:#FFF;
width:94%;
top:130px;
height:100%;
left:0px;
float:left;
padding:3%;
}
#inhalt p {
text-align:justify;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.6em;
color:#000000;
padding:0px 0px 20px 0px;
margin:0px;
}
#inhalt h1 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-style:italic;
font-weight:normal;
color:#000000;
padding:10px 0px 2px 0px;
margin:0px;
text-decoration:none;
}
#inhalt h2 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
color:#000000;
padding:10px 0px 10px 0px;
margin:0px;
text-decoration:underline;
}
#inhalt h3 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
line-height:1.4em;
margin:0px;
padding:5px 0px 5px 0px;
color:#000000;
text-decoration:none;
}
#inhalt h4 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:bold;
color:#000000;
padding:10px 0px 20px 0px;
margin:0px;
text-decoration:underline;
}
#inhalt h5 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:bold;
line-height:1.6em;
margin:0px;
padding:8px 0px 8px 0px;
color:#005F6A;
text-decoration:none;
}
#inhalt h6 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:normal;
line-height:1.6em;
margin:0px;
padding:0px 0px 20px 0px;
color:#000000;
text-decoration:none;
}
#inhalt a {
text-decoration:underline;
color:#005f6a;
}
#inhalt a:hover {
text-decoration:underline;
color:#000000;
}


/*Bild mitte - Text darunter*/
#tabelle1 table {
text-align:center;
padding:0px;
margin:10px auto 10px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
}
#tabelle1 thead {
display:none;
}
#tabelle1 table tr {
padding:0px 0px 15px 0px;
margin:0px;
float:left;
width:100%;
}
#tabelle1 table td {
padding:0px 0px 10px 0px;
margin:0px;
border:none;
width:100%;
float:left;	
}
#tabelle1 table tr td a {
text-decoration:underline;
color:#005f6a;
}
#tabelle1 table tr td a:hover {
text-decoration:underline;
color:#000000;
}
#tabelle1 table tr td h1 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1.2em;
text-decoration:none;
padding:0px 0px 0px 0px;
margin:0px;
}
#tabelle1 table tr td h2 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1.4em;
text-decoration:none;
padding:5px 0px 0px 0px;
margin:0px;
}
#tabelle1 td::before {
content:attr(data-label);
float:left;
width:20%;	
}
#tabelle1 img {
width:280px;
height:210px;
}


/*Eltern - Bild und Text untereinander*/
#tabelle2 table {
background:url(../img/bg-table.jpg) repeat;
text-align:center;
padding:0px;
margin:10px auto 10px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
border-top:1px solid #464646;
border-left:1px solid #464646;
border-right:1px solid #464646;
border-bottom:1px solid #464646;
width:100%;
}
#tabelle2 table tr {
padding:0px;
margin:0px;
float:left;
}
#tabelle2 table td {
padding:10px 5px 10px 5px;
margin:0px;
border:none;
float:left;
width:100%;
}
#tabelle2 table tr td h1 {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1.6em;
text-decoration:none;
padding:5px 0px 5px 0px;
margin:0px;
}
#tabelle2 img {
width:280px;
height:210px;
}
#tabelle2 td::before {
content:attr(data-label);
float:left;
}


/*Liste - Wochen - Jahre*/
#tabelle3 table {
background:url(../img/bg-table.jpg) repeat;
text-align:center;
padding:0px;
margin:10px auto 10px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
border-top:0px solid #464646;
border-left:0px solid #464646;
border-right:1px solid #464646;
border-bottom:1px solid #464646;
}
#tabelle3 table tr {
padding:0px;
margin:0px;
}
#tabelle3 table td {
padding:10px 2px 10px 2px;
margin:0px;
border-top:1px solid #464646;
border-left:1px solid #464646;
border-right:0px solid #464646;
border-bottom:0px solid #464646;
}
#tabelle3 table tr td h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
text-align:left;
font-weight:bold;
font-style:normal;
line-height:1.4em;
color:#000000;
padding:0 5px 0 5px;
}
#tabelle3 table tr td h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
text-align:left;
font-weight:normal;
font-style:normal;
line-height:1.4em;
color:#000000;
padding:0 5px 0 5px;
}
#tabelle3 table tr td a {
text-decoration:none;
color:#000000;
}
#tabelle3 table tr td a:hover {
text-decoration:none;
color:#005f6a;
}


/*Wurfstatistik*/
#tabelle4 table {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
padding:0px;
margin:10px auto 10px auto;
}
#tabelle4 table tr {
padding:0px;
margin:0px;
}
#tabelle4 table td {
padding:0px 10px 0px 10px;
margin:0px;
}
#tabelle4 table tr td a {
text-decoration:none;
color:#005f6a;
}
#tabelle4 table tr td a:hover {
text-decoration:none;
color:#000000;
}
#tabelle4 table tr td h1 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
color:#000000;
line-height:1.6em;
text-decoration:none;
padding:10px 0px 10px 0px;
}
#tabelle4 table tr td h2 {
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000000;
line-height:1.4em;
text-decoration:none;
padding:5px 0px 5px 0px;
}


/*Bild mitte - Text darunter*/
#tabelle5 table {
text-align:center;
padding:0px;
margin:10px auto 10px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
}
#tabelle5 thead {
display:none;
}
#tabelle5 table tr {
padding:0px 0px 0px 0px;
margin:0px;
float:left;
width:100%;
}
#tabelle5 table td {
padding:0px 0px 30px 0px;
margin:0px;
border:none;
width:100%;
float:left;	
}
#tabelle5 table tr td a {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
line-height:0.4em;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
text-decoration:none;
color:#000000;
}
#tabelle5 table tr td a:hover {
text-decoration:none;
color:#005f6a;
}
#tabelle5 td::before {
content:attr(data-label);
float:left;
width:20%;	
}
#tabelle5 img {
width:280px;
height:210px;
}


img.cent {
max-width:100%;
height:auto;
display:block;
margin:auto;
}
img.line {
width:100%;
height:auto;
}
img.right {
float:right;
margin:12px 0px 12px 15px;
max-width:100%;
height:auto;
}

}