@charset "utf-8";

* {
padding: 0;
margin: 0;
outline: none;
}

body {
background: #babfbf url('bg.jpg') repeat-x;
}

#page {
margin:0 auto;
width: 1024px;
padding: 0 10px;
}


#content {
height: 730px;
background: transparent url('haufi.png') no-repeat 0 100px ;
padding-top:250px;
width: 480px;
padding-left: 580px;
}

#text {
margin-left:5px;
padding-top: 50px;
color: #495154;
line-height:200%;
font-family: Geneva, Arial, Helvetica, sans-serif; 
font-size: 13px;


}
.facebook {
float:right;
padding-left: 20px;

background: transparent url('facebook.png') no-repeat 0 center;
}

#text p {
	padding-top:10px;
}
a, a:visited {
	color: #495154;
}
a:hover {
	background-color: #fff;
}


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

#page {
margin:0 auto;
width: 100%;
height: 100%;

}

#content {
background: transparent url('haufi.png') no-repeat -170px 50px ;
width: 97%;
height: 900px;
padding-left: 1em;
padding-right: 1em;
padding-top:30px;
}
#content img {
width: 70%;
padding-left:30%;
padding-top:70px;

}

#text {
margin-left:55%;
padding-top: 80px;
color: #495154;
line-height:150%;
font-family: Geneva, Arial, Helvetica, sans-serif; 
font-size: 16px;

}

.facebook {
float:right;
padding-left: 20px;
margin-bottom: 20px;
background: transparent url('facebook.png') no-repeat 0 center;
}


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

#page {
margin:0 auto;
width: 100%;
height: 100%;

}

#content {
background: transparent url('haufi.png') no-repeat -20px 50px ;
width: 97%;
padding-left: 1em;
padding-right: 1em;
padding-top:30px;
}
#content img {
width: 55%;
padding-left:42%;
padding-top:70px;

}

#text {
margin-left:56%;
padding-top: 30px;
color: #495154;
line-height:150%;
font-family: Geneva, Arial, Helvetica, sans-serif; 
font-size: 16px;

}

.facebook {
float:right;
padding-left: 20px;
margin-bottom: 20px;
background: transparent url('facebook.png') no-repeat 0 center;
}


}




@media only screen and (max-width: 480px) {
#page {
margin:0 auto;
width: 100%;

}


#content {
background: transparent url('haufi_kl.png') no-repeat 1em 0 ;
width: 95%;
padding-left: 1em;
padding-right: 1em;
padding-top:20px;
}
#content img {
width: 50%;
padding-left:50%;
padding-top:50px;

}

#text {
margin-left:5px;
padding-top: 200px;
color: #495154;
line-height:140%;
font-family: Geneva, Arial, Helvetica, sans-serif; 
font-size: 16px;

}

.facebook {
float:right;
padding-left: 20px;
margin-bottom: 20px;
background: transparent url('facebook.png') no-repeat 0 center;
}

}