﻿html,body { margin:0; padding: 0; border: 0; background: transparent; font-size: 10px; }

div, span, article, aside, footer, header, hprog, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, table, tr, th, td, tbody, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
}
img		{
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

table, tr, th, td, tbody, tfont, thead {
	margin:0; padding:0; border:0;
		vertical-align:middle;
		background:transparent;font-family:Verdana, Geneva, Tahoma, sans-serif; 
		font-align:right; padding:10px; font-size:12px; font:caption; font-weight:bold;
		}
		
table { border-collapse:collapse; border-spacing:0; }

input, select, textarea, form, fieldset {
	margin:0; padding:0; border:0;
	}
	
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block; }
	
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
	font-family:Verdana, Geneva, Tahoma, sans-serif
	font-size:100%;
	font-weight:normal;
	font-style:normal;
	line-height:100%;
	text-indent:0;
	text-decoration:none;
	text-align:left;
	color:#000;
	}
ol, ul {list-style:none; }

/* Global */

html	{	}
body	{background-color:#C2D8BA;	}

/*headings */

h1,h2,h3,h4,h5,h6  { font-weight:bold; color:#000; }

h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5  { font-size:12px; }
h6  { font-size:10px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0; }


/* 'Text Elements  */

p			{ color:#000; font-size:12px; line-height:150%; }
p .left		{ margin:1.5 em 1.5em 1.5em 0; padding:0; }
p .right	{ margin:1.5 em 1.5em 1.5em 0; padding:0; }
a			{   }
a:link		{ color:#00f; }
a:visited	{ color:#0f0; }
a:focus		{ color:#666; }
a:hover		{ color:#f00; }

blockquote	{ color:#000; font-size:12px; }

strong		{ font-weight:bold; }
em			{ font-style:italic; }

/*  Images  */

/*  Lists  */

ul		{  }
ol		{list-style-type:decimal; }
ul li	{ color:#000; font-size:12px; }
ol li	{ color:#000; font-size:12px; }

dl		{	}
dt		{	}
dd		{	}

/* Tables */

table		{
	background: #C0C0C0;
	width: 100%;
	background-color: #FFFFFF;
}

tr			{
	background: #FFFFCC;
	background-color: #FFFFFF;
}
.odd		{ background-color:#eee;   }
.even		{ background-color:#fff;    }	

th			{ font-weight:bold;    }
thead, th	{ background-color:#ccc;     }

tbody				{     }

th,td, caption		{     }
caption				{     }

tfont				{     }
.tfooter			{ background-color:#AEC094; text-align:center; font-style:italic;    }

caption				{ background:#efefef;    }

/*  Containers  */

#wrapper			{ width:900px; margin:0px auto; background-color:#ffffff;}

#top				{ background-color:#000000; width:100%;padding:20px 0; overflow: hidden; 
					 }

#logo				{ margin:0 0 0 10px;  float:left;  }
	
#social-media		{ float:right; margin:0 10px 0 0;     }
#social-media p		{ color:#ffffff; font-size:11px; margin:4px 10px 4px 0px;  }
#social-media img 	{ width:24px; height:24px;     }
#social-media ul li { display:inline;   }

#topnav				{background-color:#333333; clear:both;     }
#topnav ul			{width:100%; float:left; margin:0px; background-color:#333333; border-bottom:3px #cccccc solid;}
#topnav ul li		{display:inline;  }
#topnav ul li a 	{float:left; padding:10px 20px; }

#topnav a:link		{color:#ffffff; }
#topnav a:visited	{color:#ffffff; }
#topnav a:active	{color:#ffffff; }
#topnav a:hover		{color:#ffffff;  background:#549857; }

#topnav a:focus		{color:#ffffff; }



#banner				{     }

#subbanner			{width:100%; background-color:#555555; padding:10px 0; 
					overflow:hidden;   }
#subbanner h3		{ color:#ffffff; font-size:18px; font-weight:bold;
						text-align:center; line-height:180%;}

#content		{ float:left; width:650px; padding:20px;   }
#content h1		{margin: 0 0 20px 0; font-size:28px;
					border-bottom:1px #777777 solid; padding:20px 0;}

#content p		{margin:16px 0; line-height:140%;}
#content h2		{margin:20px 0 0; }
#content img	{padding:4px; border:1px #888888 solid; margin:4px; }
#team			{	}
#team td th		{font-size:14px; text-align:right; font-weight:bold;
				}
#team td		{font-size:12px; text-align:right;
				}
#events td th	{font-size:14px; text-align:left; 
				}

#zeiten td		{
	background: #FFFFFF;
	font-size: 14px;
	text-align: center;
}
				
#rightside		{padding:20px; margin-left:675px; background-color:#FFFFCC;  }
#rightside h2	{
	margin: 20px 0 10px 0;
	background-color: #FFFFCC;
}
#rightside p	{
	margin: 8px 0;
	line-height: 140%;
	background-color: #FFFFCC;
}


#footer			{ clear:both; background-color:black; padding:10px 0;   }
#footer p		{  text-align:center; color:white; }

#box1		{     }
#box2		{     }
#box3		{     }
#box4		{     }
#box5		{     }
#box6		{     }

/*layout extra */

/*Navigation Extra  */

/* Forms */

form  { text-align:left; margin:20px;    }

label, submit, input, textarea  {
		border:0; padding:0; margin:0; background:none;
		}

label { float:left; width:150px;
		text-align:right; display:block;
		}
		
input, textarea   {
		border:1px #333 solid; margin-left:10px;
		}
input	{ 
		width:280px; margin-buttom:16px;
		}
textarea {
		width:280px; height:150px;
		}

select	{    }

		{ margin-bottom:16px;
		}
select  {    }

.submit   {
		width:90px; height:25px;
		margin-left:150px;
		font-size:12px;
		}
	
br		{ clear: left; }

div.imageHold {
  padding: 0px 0px 10px; margin:top-left; background-color:#FFFFCC; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}

div.imageHold div {
	float: left;
	width: 150px;
	height: 80px; /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */;
	margin-left: 0px;
	background-color:#FFFFCC; 
}

div.imageHold img {
  width: 150px;  /* wir skalieren das große bild auf die kleine größe */
  height: 80px; /* um verpixelung beim vergößern zu verhindern  
     */ background-color:#FFFFCC;  
}

div.imageHold img:hover {
	border-color: #C0C0C0;
	position: absolute;
	margin-left: -200px; /* die hälfte des größenunterschiedes der bilder */;
	margin-top: -55px; /* hier genau so */;
	width: 400px; /* die weite beim vergrößern */;
	height: 260px;      /* die höhe beim vergrößern */
	background-color:#FFFFCC; 
