/*****************************/
/*****Barbara CSS******/
/*****************************/
@import url("../font-awesome/css/font-awesome.css");/*Icon-Fonts*/

html { height: 100%}
*{
	padding: 0;
	margin: 0;
}
img{border: none;}
body{
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #333333;
	/**/background-color: #ffffff;
	height: 101%;
}
p {
	margin-bottom: 7px;
	line-height: 17px;
}
.clear {clear: both;}
/*****************************/
/*********Mobile***********/
/*****************************/
#container {
	width: 330px;
	padding-bottom: 20px;
	margin: 0;
	background-image:url(../Bilder/hg_mob.gif);
	background-repeat:no-repeat;
}
#banner {
	width: 330px;
	height: 210px;
}

#home_intro {float: left; width: 77px; height: 51px; padding: 18px 0 0 402px;}
#home {float: left; width: 77px; height: 51px; margin: 22px 0 0 128px; background-image: url(../Bilder/Navi/masche.gif); background-repeat:no-repeat;}
#home:hover {background-image: url(../Bilder/Navi/masche2.gif);}

#musik {float: left; width: 91px; height: 32px; margin: 97px 0 0 35px; background-image: url(../Bilder/Navi/musik.gif);}
#musik:hover {background-image: url(../Bilder/Navi/musik_rot.gif);}
#musik_on {float: left; width: 91px; height: 32px; margin: 97px 0 0 35px; background-image: url(../Bilder/Navi/musik_rot.gif);}
#internet {float: left; width: 110px; height: 30px; margin: 99px 0 0 30px; background-image: url(../Bilder/Navi/internet.gif);}
#internet:hover {background-image: url(../Bilder/Navi/internet_rot.gif);}
#internet_on {float: left; width: 110px; height: 30px; margin: 99px 0 0 30px; background-image: url(../Bilder/Navi/internet_rot.gif);}

#kontakt {width: 74px; height: 57px; margin: 60px 0 0 230px; background-image: url(../Bilder/Navi/kontakt.gif);}
#kontakt:hover {background-image: url(../Bilder/Navi/kontakt2.gif);}
#kontakt_on {/*float: left; */width: 74px; height: 57px; margin: 60px 0 0 230px; background-image: url(../Bilder/Navi/musik_rot.gif);}

#content {padding: 0px; width: 330px; height: 180px;}
#content_internet {margin: 0 0 30px 35px; width: 250px; height: 180px; /*background-color:#FFFFFF;*/}
#content_kontakt {margin: 0 0 30px 35px; width: 250px; height: 180px; /*background-color:#FFFFFF;*/}
#content_person {margin: 0 197px 0 0;  padding: 15px; width: 249px; height: 150px;}
#content_musik {margin: 0 0 30px 35px; width: 250px; height: 180px; /*background-color:#FFFFFF;*/}

#hund {float: left; margin-left: 70px;}
#person {float: left; margin-left: 56px;}
#bilder {float: left; width: 230px; margin-left: 20px; overflow: auto;}

/*Sprenkel-Links*/
.person {left: 270px; top: 365px; position: absolute; width: 28px;	height: 26px;}
.person:hover { background-image: url(../Bilder/ich_thump.gif);}
.person_on {left: 270px; top: 365px; position: absolute; width: 28px; height: 26px; background-image: none; background-color: #FFFFFF;}
.bilder {left: 45px; top: 450px; position: absolute; width: 40px;	height: 48px;}
.bilder:hover {background-image: url(../Bilder/bilder2.gif);}
.bilder_on {left: 45px; top: 450px; position: absolute; width: 40px; height: 48px; background-image: url(../Bilder/bilder.gif);}
.hund {left: 30px; top: 63px; position: absolute; width: 53px; height: 59px;}
.hund:hover {background-image: url(../Bilder/wedel.gif);}
.hund_on {left: 30px; top: 63px; position: absolute; width: 53px; height: 59px; /*background-color: #FFFFFF;*/}
.hauser {display:none;}
.richiger {display:none;}
.ganzfried {display:none;}
.naef {display:none;}
.christen {display:none;}
.greenabout {display:none;}
.rene {display:none;}

#footer{
	width: 280px;
	height: 100px;
	padding: 0 0 0 50px;
	margin: 0;
}

#kleiner_prinz{display: none;}
#frosch{display: none;}
#mail {display: none;}
#stop{display: none;}

#webdesign{left: 15px; top: 510px; position: absolute; width: 300px; height: 14px; font-size: 12px;}
#webdesign a, a:link, a:visited {font-size: 12px; color: #dddddd; text-decoration:none;}
#webdesign a:hover {color:#d97474;}

a, a:link, a:visited {color:#333333; text-decoration:underline; font-weight:normal; font-size: 14px;}
a:hover  {color:#d97474;}










@media screen and (min-width: 880px){
#container {
	width: 950px;
	padding-bottom: 20px;
	margin: 0 0 0 50px;
	background-image:url(../Bilder/hg.gif);
	background-repeat:no-repeat;
}
#banner {
	width: 950px;
	height: 210px;
}

#home_intro {padding: 18px 0 0 402px;}
#home {margin: 18px 0 0 402px;}

#musik {margin: 100px 0 0 115px;}
#musik_on {margin: 100px 0 0 115px;}
#internet {margin: 106px 0 0 30px;}
#internet_on {margin: 106px 0 0 30px;}
/*#logo {float: right;}*/
#kontakt {margin: 0 0 0 218px;}
#kontakt_on {margin: 169px 0 0 115px;}

#content {padding: 0px; width: 950px; height: 180px;}
#content_internet {margin: 0 427px 30px 243px; width: 280px; height: 150px; background-color:#FFFFFF;}
#content_kontakt {margin: 75px 0 45px 280px; width: 480px; height: 60px; background-color:#FFFFFF;}
#content_person {margin: 0 197px 0 0;  padding: 15px; width: 249px; height: 150px;}
#content_musik {margin: 0 0 30px 125px; width: 400px; height: 150px; background-color:#FFFFFF;}
#content_frosch {padding: 0 120px 0 70px; width: 760px; height:180px;}
#content_ja_nein {margin: 45px 0 35px 300px; width: 330px; height: 100px; background-color:#FFFFFF;}

#koenig {float: left; margin-left: 170px;}
#hund {float: left; margin-left: 670px;}
#person {float: left; margin-left: 56px;}
#bilder {float: left; width: 260px; margin-left: 380px; overflow: auto;}
#prinz {float: right; margin-right: 200px;}
#froschkoenig {float: left; width: 600px; height: 178px;}
#froschkoenig_koenig {float: right; width: 400px;}


/*Sprenkel-Links*/
.person {left: 367px; top: 365px; position: absolute; width: 28px;	height: 26px;}
.person:hover { background-image: url(../Bilder/ich_thump.gif);}
.person_on {left: 367px; top: 365px; position: absolute; width: 28px; height: 26px; background-image: none; background-color: #FFFFFF;}
.bilder {left: 517px; top: 485px; position: absolute; width: 40px;	height: 48px;}
.bilder:hover {background-image: url(../Bilder/bilder2.gif);}
.bilder_on {left: 517px; top: 485px; position: absolute; width: 40px; height: 48px; background-image: url(../Bilder/bilder.gif);}
.hund {left: 816px; top: 184px; position: absolute; width: 53px; height: 59px;}
.hund:hover {background-image: url(../Bilder/wedel.gif);}
.hund_on {left: 816px; top: 174px; position: absolute; width: 53px; height: 59px; background-color: #FFFFFF;}
.hauser {display:inline; left: 750px; top: 377px; position: absolute; width: 14px; height: 14px;}
.hauser span {display: none;}
.hauser:hover span {display: block; color: #333333; white-space: nowrap; background-color: #FFFFFF;}
.richiger {display:inline; left: 573px; top: 443px; position: absolute; width: 14px; height: 14px;}
.richiger span {display: none;}
.richiger:hover span {display: block; color: #333333; white-space: nowrap; background-color: #FFFFFF;}
.ganzfried {display:inline; left: 773px; top: 435px; position: absolute; width: 14px; height: 14px;}
.ganzfried span {display: none;}
.ganzfried:hover span {display: block; color: #333333; white-space: nowrap; background-color: #FFFFFF; width:300px;}
.naef {display:inline; left: 497px; top: 458px; position: absolute; width: 14px; height: 14px;}
.naef span {display: none;}
.naef:hover span {display: block; color: #333333; white-space: nowrap; background-color: #FFFFFF;}
.christen {display:inline; left: 640px; top: 253px; position: absolute; width: 14px; height: 14px;}
.christen span {display: none;}
.christen:hover span {display: block; color: #333333; white-space: nowrap; background-color: #FFFFFF;}
.greenabout {display:inline; left: 688px; top: 245px; position: absolute; width: 14px; height: 14px;}
.greenabout span {display: none;}
.greenabout:hover span {display: block; color: #333333; white-space: nowrap; background-color: #FFFFFF;}
.rene {display:inline; left: 120px; top: 83px; position: absolute; width: 40px; height: 40px;}
.rene span {display: none;}
.rene:hover span {display: block; color: #333333; white-space: nowrap; background-color: #FFFFFF;}

#footer{
	width: 786px;
	padding: 0 114px 0 50px;
}

#kleiner_prinz{
	display: inline;
	float: left;
	width:530px;
	height: 47px;
	margin-top: 53px;
}
#frosch{
	display: inline;
	float: right;
	width: 50px;
	height: 50px;
	margin-top: 50px;
	background-image: url(../Bilder/Navi/frosch.gif);
	background-repeat:no-repeat;
}
#footer #frosch:hover{
	background-image: url(../Bilder/Navi/frosch2.gif);
	background-repeat:no-repeat;
}
#mail {
	display: inline;
	float: right;
	width: 35px;
	height: 36px;
	margin-top: 43px;
	margin-right: 148px;
	background-image: url(../Bilder/Navi/mail.gif);
	background-repeat:no-repeat;
}
#footer #mail:hover{
	background-image: url(../Bilder/Navi/mail2.gif);
	background-repeat:no-repeat;
}
#stop{
	display: inline;
	float: right;
	width: 50px;
	height: 50px;
	margin-top: 50px;
	background-image: url(../Bilder/Navi/stop.gif);
	background-repeat:no-repeat;
}
#footer #stop:hover{
	background-image: url(../Bilder/Navi/frosch.gif);
	background-repeat:no-repeat;
}
#webdesign{left: 95px;}
}