* {
	margin:0;
	padding:0;
}
body {
	background:url('../images/body-bg.jpg') repeat-x 0 0 #fff;
}
p {
  margin-top: 2.5%;
  text-align:justify;
}
p.left {
  text-align:left;	
}
.right{text-align:right;}
.bold {
  font-weight:bold;
}
.margintop {
  margin-top: 1%;
}
ul {
  margin: 0.8% 0 0 0;
  padding-bottom: 0.8%;
}
li {
  color: #001944;
  padding: 0.4% 0;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
#ie8 img {
	width: 100%;
}

#top {
	margin:30px auto 4px auto;
	padding-right: 10px;
	max-width:1010px;
	text-align: right;
	color:#001944;
}
#container {
	margin:0 auto 50px auto;
	max-width:960px;
	padding: 0 30px;
	background: #ffffff;
	-moz-box-shadow: 3px 3px 5px 2px #d7d7d7;
    -webkit-box-shadow: 3px 3px 5px 2px #d7d7d7;
    box-shadow: 3px 3px 5px 2px #d7d7d7;
}
#header {
	width:100%; 
	padding: 3% 0 3% 3%;
}
#image {
	padding: 0 2% 2% 2%;
}
#image img {
	-moz-box-shadow: 3px 3px 5px 2px #d7d7d7;
    -webkit-box-shadow: 3px 3px 5px 2px #d7d7d7;
    box-shadow: 3px 3px 5px 2px #d7d7d7;
}
#nav {
	width:100%; 
	padding: 1% 0 1% 3%;
}
#nav a {
	color:#001944;
	font-weight: bold;
}
.nav {
	width:100%; 
	padding: 1% 0 1% 3%;
}
.nav a {
	color:#001944;
	font-weight: normal;
}
#content {
	float:left;
	width:62%;
	padding: 3% 5% 6% 3%;
	border-right: 0.05em solid #d7d7d7;
}
#content a {
	color: #444;
}
#sidebar {
	float:right;
	width:24%;
	padding: 3% 1% 6% 3%;
}
#sidebar p {
	text-align:left;
}
#sidebar p a{
	color: #444;
}
#phone {
	margin-bottom: 3%;
}
#phone img{
	float:left; 
	margin:-2% 10% 0 0;
	width: 15%;
}
#kontakt {
	margin: 18% 0 35% 0;
}
#kontakt img{
	float:left; 
	margin:-5% 9% 0 0;
	width: 17%;
}
#kontakt a {
	text-decoration: none;
}
#mitglied {
	margin-top: 24%;
	font-weight: bold;
}
#mitglied img {
	width: 88%;
	margin: 5% 0 12% 0;
}


@media all
{
 /*Globale Einstellungen für Zeichensatz und Schriftgrößen*/
html * { font-size:100.01%; }
body {
  font-family:Verdana;
  font-size:100.00%;
  color:#444;
} 
h1, h2, h3,h4 { color:#001944;}
h1 { font-size: 140%;} /*16pt*/
h2 { font-size: 120%;} /*14pt*/
h3 { font-size: 100%;} /*12pt*/
h4 { font-size: 95%;} /*11pt*/
p { font-size: 80%; line-height: 130%;} /*10pt; 15pt*/
li { font-size: 87.5%;margin-left: 5%;} /*10.5pt*/
#nav a { font-size: 90%;} /*11pt*/
.nav a { font-size: 80%;} 
#top { font-size: 70%;} /*8pt*/
.phone{ color:#001944;font-size: 100%;line-height: 130%;} /*12pt; 15pt*/
.kontakt{ color:#001944;font-size: 95%;line-height: 125%;} /*11pt; 14.5pt*/
}

/* tablet portrait */
@media (max-width: 768px) {	
h1 { font-size: 105%;} /*13pt*/
h2 { font-size: 95%;} /*11pt*/
h3 { font-size: 70%;} /*8pt*/
h4 { font-size: 62.5%;} /*7.5pt*/
p { font-size: 55%; line-height: 130%;} /*7pt; 15pt*/
li { font-size: 60%;  margin-left: 10%;} /*7.5pt*/ 
#nav a { font-size: 62.5%;} /*7.5pt*/
.nav a { font-size: 60%;} 
#top { font-size: 50%;}     
}

/* medium smartphones */
@media (max-width: 480px) {
h1 { font-size: 70%;} 
h2 { font-size: 60%;} 
h3 { font-size: 55%;} 
h4 { font-size: 50%;} 
p { font-size: 50%; line-height: 130%;text-align:left;} 
li { font-size: 50%;  margin-left: 14%;} 
#nav a { font-size: 55%;}
.nav a { font-size: 50%;} 
#top { font-size: 50%;}
#content {width:55%;}
#sidebar {width:31%;}

@media (max-width: 320px) {
h1 { font-size: 55%;} 
h2 { font-size: 50%;} 
h3 { font-size: 50%;} 
h4, #nav a { font-size: 50%;} 
.nav a { font-size: 45%;}
p { font-size: 50%; line-height: 130%;text-align:left;} 
li { font-size: 50%;  margin-left: 14%;} 
#top { font-size: 50%;} 
#content {width:55%;}
#sidebar {width:31%;}
}