/* CSS Document */
/************************************************************************************
Responsive Webdesign, alle Angaben prozentual
*************************************************************************************/

@charset "UTF-8";
@font-face 
    {
	 font-family: Helvetica, sans-serif; 
	} 
	
	/* Falls ich wieder eine andere, bzw. eigene Schrift verwenden möchte geht das so:
	   src: local:'vagrounded lt';            
	   "Erst nachsehen, ob die Schrift beim Besucher schon installiert ist"; /* Wenn nicht, vom Webserver laden: 
	   url(http://wwwfelix-wolfram.de/font/vagroln.ttf);>   */

body {
font-family:'Helvetica';
background-color: #F7F7F7;
/* background-image: url(../img/meersteine.png); */
}


/************************************************************************************
STRUKTUR - Seitenaufbau

pagewrap ist unsere "Aussenhülle". Für sie legen wir eine maximale Grösse von 
960 px fest.
Das mit den 32768px in content und sidebar ist die Problematik mit den gleich hoch floatenden DIVs.
Siehe hierzu http://webstylez.net/Floatende-Divs-gleich-hoch-machen.

*************************************************************************************/

#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}

#header {
background-color:#F7F7F7;
height: auto;
}

#content {
width: 600px;
background-color:#F7F7F7;
float: left;
padding: 5px;
padding-bottom: 32768px;
margin-bottom: -32768px;
}

#sidebar {
width: 340px;
background-color:#F7F7F7;
float: right;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#footer {
background-color:#F7F7F7;
opacity:0.5;
clear: both;
margin-top:5px;
}

#mainpart
{
overflow:hidden;
height: 100%; /* for IE6 */
}

/************************************************************************************
TABELLE
Fornmatierungen für tablewrap, table, tr, td
*************************************************************************************/

#tablewrap
{
max-height: 870px;
overflow-y: auto;
display: block;
padding: 5px;
}

table {
width:100%;
}

td {
border-bottom:1px solid;
border-color:#999;
overflow:auto;
padding: 0.75%;
text-align:left;
font-family:'Helvetica';;
font-size:0.7em;
color:#333;

}

#sidebar.td {

overflow:auto;
text-align:left;
font-family:'Helvetica';
font-size:0.75em;
color:#333;

}
table.sidebar {
width:93%;
margin-left:3%;
padding-right:0%,
}


td.top {
background-color:#69c;
color:#fff;
letter-spacing:0.1em;

}


/************************************************************************************
Menü
Hier wird erst einmal die Navigation - eigentlich eine Aufzählungsliste
in die horizontale Ebene gebracht (display:inline)
*************************************************************************************/

#navcontainer 
{
background-color: #069;
width: 100%;
height:auto;
margin: auto;
border: 0px;
}

#navcontainer ul
{
margin: 1%; /*Abstand zur unteren Content Box*/
padding: 1%; /*Abstnad zum Rand innerhalb*/
list-style-type: none;
color: white;
background-color:#069;
}

#navcontainer ul li
{
display: inline; /*besser als float - gefloatete Listen bekommt man mit CSS nicht an den äussersten Rand*/
}

#navcontainer ul li a
{ font-size:1em;
letter-spacing:.1em;
	padding-left:2%;
	padding-right:0%;
	padding-top:3%;
text-decoration: none;
text-align:left;
vertical-align:center;
color:#C1C1C1;
}

#navcontainer ul li a:hover
{
color:#fff;
}

/************************************************************************************
LISTEN 
Fornmatierungen für ul li in der Sidebar
*************************************************************************************/
ul.sidebar { 
list-style-type:circle;
line-height:.9em;
color:#069;
}

li.sidebar { 
font-family:'Helvetica';
font-size:0.75em;
text-align:left;
color:#333;
margin-left:0%;
margin-right:4%;
}

ul.content { 
list-style-type:circle;
line-height:1.0em;
}

li.content { 
font-family:'Helvetica';
font-size:0.9em;
text-align:justify;
color:#333;
margin-left:0%;
margin-right:2%;
}

/* Linie für Sidebar */

hr { 
	  width: 81%; 
	  height: 1px; 
      margin: 0 auto;
	  color: #69f;
	
    }


/************************************************************************************
Schriftformatierungen p - h6
Schriftart ist Vagrounded Lt, 
*************************************************************************************/

p { font-family:'Helvetica';
	font-size:1em;
    color: #000;
	letter-spacing:.05em;
	line-height:1.4em;
    text-decoration: none;
	text-align:left;
	margin-top:2%;
	margin-left:2%;
	margin-right:2%;
   }

p.kleiner {
	font-size:.9em;
   }
p.klein {
	font-size:.8em;
   }
p.hell{
	font-size:.7em;
    color: #666;
   }
 
p.header {
	padding-top:5px;
	font-size:.9em;
    color: #069;
	float:right;
	text-align:justify;
   }
   
p.footer {
	padding-top:12px;
	padding-bottom:7px;
	font-size:1em;
	font-style:normal;
    color: #111;
	text-align:center;
   }

.red {
color: #900;
text-decoration: none;
}

.blue {
color: #069;
font-weight:800;
text-decoration: none;
}

.notfall {
	font-size:1.2em;
	font-weight:200;
	color:#900;
	float:left;
	letter-spacing:0.1em;
	line-height:1.4em;
}

.side {  
	margin-left:4%;
	margin-right:4%;
   }


h1 {
	font-family:Helvetica;
	font-size:1.2em;
	font-weight:300;
	letter-spacing:.05em;
    color: #069;
    text-decoration: none;
	margin-bottom:2%;
	margin-top:2%;
	margin-left:2%;
	margin-right:2%;
   }
h1.blog {
	font-family:Helvetica;
	font-size:1.2em;
	font-weight:300;
	letter-spacing:.05em;
    color: #069;
    text-decoration: none;
	margin-bottom:2%;
	margin-top:2%;
	margin-left:2%;
	margin-right:2%;
   }
h2 {
	font-family:Helvetica;
	font-size:1.1em;
	font-weight:200;
	letter-spacing:.07em;
    color: #069;
    text-decoration: none;
	padding-top:2%;
	margin-left:2%;
	margin-right:2%;
	margin-top:4%;
	margin-bottom:1%;
   }    
  
h3 {
	font-family:Helvetica;
	font-size:1em;
	font-weight:100;
	letter-spacing:.03em;
    color: #069;
	line-height:1.2em;
    text-decoration: none;
	margin-left:2%;
	margin-right:2%;
	margin-top:3%;
	margin-bottom:1%;
   }         
  
h4 {
	font-family:Helvetica;
	font-size:0.9em;
	font-weight:100;
	letter-spacing:.03em;
    color: #069;
    text-decoration: none;
	margin-left:2%;
	margin-right:2%;
	margin-top:3%;
	margin-bottom:1%;
   }         


/************************************************************************************
LINK - Formatierungen a, a:hover etc.
Schriftart ist Vagrounded Lt, 
*************************************************************************************/

a {
	font-family:Helvetica;
	letter-spacing:.05em;
    color: #069;
    text-decoration: none;
   }

a:hover {
font-weight:500;
color: #009;
}

a.phone {
	font-family:Helvetica;
	font-weight:300;
	letter-spacing:.05em;
    color: #900;
    text-decoration: none;
   }
   
a:hover.phone {
font-weight:400;
color: #090;
}

a.header {
	font-family:Helvetica;
	font-weight:500;
	letter-spacing:.06em;
    color: #069;
    text-decoration: none;
   }

a:hover.header {
	font-family:Helvetica;
	font-weight:300;
	letter-spacing:.06em;
    color: #069;
    text-decoration: none;
   }
.right {
	
	text-align: right;
}

/************************************************************************************
Bild
Das Bild im Text wird relativ skaliert (80%). 
Wir benötigen aber die Angabe einer maximalen Breite, damit es unser Maximal-Layout 
auf einem grossen Bildschirm nicht "verreist".
*************************************************************************************/
.textbild {
text-align: center;
max-width: 900px;
}

.textbild img{
width: 80%;
}
 
img.standard {
max-width:45%;
clear:both;
float: right;
margin-right:1%;
margin-top:1%;
margin-bottom:2%;
margin-left:1%;
border-radius: 25px;
}

img.sidefull {
max-width:100%;
clear:both;
float: right;
margin-right:1%;
margin-top:1%;
margin-bottom:1%;
margin-left:2%;
border-radius: 25px;
}


/************************************************************************************
Media queries
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

/* Hier fängt die Magic an... Alles wird in Prozentwerten angegeben */ 
#pagewrap {
width: 94%;
}
#content {
width: 63%;
}
#sidebar {
width: 34.5%;
}

}

/* for 700px or less */
@media screen and (max-width: 700px) {

/* Hier fängt die Magic an... Immer noch Prozente, aber der Content und der Box-Bereich
werden übereinander gestapelt (float:none) und gleich breit gemacht (width: auto) 
Auch das Navigationsmenü wird übereinander (display: block) gestapelt */ 

#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
#navcontainer ul li
{
display: block; 
width: auto;
} 

#navcontainer ul li a
{
width: auto;
display: block;
}

img.standard {
max-width:100%;
clear:both;
float:none;
margin-right:1%;
margin-top:1%;
margin-bottom:2%;
margin-left:1%;
border-radius: 25px;            
}

}

/* for 480px or less */
@media screen and (max-width: 480px) {
/* Für ganz kleine Displays machen wir die H1-Überschrift noch kleiner */ 

p { font-family:'Helvetica';
	font-size:1em;
    color: #333;
	letter-spacing:.05em;
    text-decoration: none;
	margin-left:2%;
	margin-right:2%;
   }

p.header {
	padding-top:18px;
	font-size:.9em;
    color: #069;
	float: none;
	text-align:justify;
   }


h1 {
	font-family:'Helvetica';
	font-size:1.2em;
	font-weight:400;
	letter-spacing:.05em;
    color: #069;
    text-decoration: none;
	margin-left:2%;
	margin-right:2%;
   }
h2 {
	font-family:'Helvetica';
	font-size:1.1em;
	font-weight:300;
	letter-spacing:.05em;
    color: #069;
    text-decoration: none;
	margin-left:2%;
	margin-right:2%;
   }    
  
h3 {
	font-family:'Helvetica';
	font-size:1em;
	font-weight:100;
	letter-spacing:.03em;
    color: #069;
    text-decoration: none;
	margin-left:2%;
	margin-right:2%;
   }         
  
h4 {
	font-family:'Helvetica';
	font-size:.8em;
	font-weight:100;
	letter-spacing:.03em;
    color: #069;
    text-decoration: none;
	margin-left:2%;
	margin-right:2%;
   } 
 
img.standard {
max-width:100%;
clear:both;
float: none;
margin-right:1%;
margin-top:1%;
margin-bottom:2%;
margin-left:1%;
border-radius: 25px;             
}