/* ********************************************************************************
 * design.css
 *
 * Farbschema:
 * 
 * #333333	- background
 * #7F0800	- rot
 *
 * Styles zur allgemeinen Gestaltung und Formatierung der Seite
 */

html, body {
	margin: 0;
	padding: 0;
	position: relative;
	
	background: #eee;
	color: #333;
	
	font-family: verdana, Helvetica, sans-serif;
	font-size: 11px;
}

/*********************************************************************************
 *	style.css
 *
 *	globale Tags und Klassen
 *********************************************************************************
 */

ul {
	margin: 0px;
	padding: 0px;
	position: relative;
	
	list-style: none;
}

h1 {
	margin: 0;
	padding: 0;
	
	font-size:		14px;
	font-weight:	bold;
}
h2 {
	margin: 0;
	padding: 0;
	
	font-size:		12px;
	font-weight:	bold;
}
h3 {
	margin: 0;
	padding: 0;
	
	font-size:		10px;
	font-weight:	bold;
}

a {
	margin: 0px;
	padding: 0px;
	
	border: 0;
	}
	a:link, a:visited {
		color: #05a;
		text-decoration: none;
	}
	a:hover, a:active {
		color: #05a;
		text-decoration: underline;
	}
	a.white {
		color: #fff;
		}
		a.white:link, a.white:visited {
			color: #fff;
			text-decoration: none;
		}
		a.white:hover, a.white:active {
			color: #fff;
			text-decoration: underline;
		}
	a.red {
		color: #7F0800;
		}
		a.red:link, a.red:visited {
			color: #7F0800;
			text-decoration: none;
		}
		a.red:hover, a.red:active {
			color: #7F0800;
			text-decoration: underline;
		}

img {
	margin: 0px;
	padding: 0px;
	
	border: 0;
}

p {
	width: auto;
	
	margin: 0;
	padding: 0;
}

span {
	color: #000;
	}
	span.info {
		
		color: #888;
		font-size: 12px;
		
	}

br {
	margin: 0px;
	padding: 0px;
	position: relative;
}

input {
	width: 100%;
	
	border: 1px solid #aaa;
	
	vertical-align: middle;
}

textarea {
	width: 100%;
	
	border: 1px solid #ccc;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	overflow: auto;
}

.clear {
	height: 1px;
	line-height: 1px;
	
	font-size: 1px;
	
	float: none;
	clear: both;
}

.print {
	display: none;
}

.line {
	height: 1px;
	line-height: 1px;
	
	background: none;
	border-top: 1px solid #ccc;
	
	color: #ccc;
	font-size: 1px;
}

.noborder {
	border: none;
}

.serif {
	font-family: serif;
}
.s08 {
	font-size: 8px;
}
.s09 {
	font-size: 9px;
}
.s10 {
	font-size: 10px;
}
.s11 {
	font-size: 11px;
}
.s12 {
	font-size: 12px;
}
.s13 {
	font-size: 13px;
}
.s14 {
	font-size: 14px;
}
.s15 {
	font-size: 15px;
}
.s16 {
	font-size: 16px;
}
.s18 {
	font-size: 18px;
}
.s20 {
	font-size: 20px;
}
.s24 {
	font-size: 24px;
}
.s28 {
	font-size: 28px;
}
.s32 {
	font-size: 32px;
}
.s38 {
	font-size: 38px;
}

.chr2 {
	width: 18px;
}
.chr4 {
	width: 32px;
}

/* Positionierung */
.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.justify {
	text-align: justify;
}

.bold {
	font-weight: bold;
}
.kursiv {
	font-style: italic;
}

/* Colors */
.white {
	color: #fff;
}
.gray {
	color: #999;
}
.black {
	color: #000;
}
.red {
	color: #7F0800;
}
.green {
	color: #00AA00;
}
.orange {
	color: #f60;
}
.blue {
	color: #05a;
}

.hidden {
	visibility: hidden;
}

ul.square {
	margin-left: 30px;
	
	list-style-type: square;
	}
	ul.square li {
		margin: 3px 0;
	}

ul.decimal {
	margin-left: 30px;
	
	list-style-type: decimal;
	}
	ul.decimal li {
		margin: 3px 0;
	}

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

#container {
	width: 800px;
	
	margin: 0 auto;
	padding: 0px;	
	position: relative;
	}
	
	#header {
		width: 100%;
		height: 120px;
		
		margin: 0;
		padding: 0;
		position: relative;
		
		background: #05a;
		}
		#logo {
			width: 200px;
			height: 120px;
			
			position: relative;
			
			background: url("../images/logo.jpg") no-repeat center left;
		}
	
	#wrapper {
		width: 100%;
		
		margin: 0px;
		padding: 0px;
		position: relative;
		
		background: #fff;
		}
		
		#navi {
			width: 190px;
			
			margin: 0px;
			padding-right: 5px;
			position: relative;
			
			float: left;
		}
		
		#path {
			height: 12px;
			
			margin: 0px;
			padding: 8px 5px;
			position: relative;
			
			border-bottom: 1px solid #05a;
			}
			#feedback {
				float: left;
			}
		
		#content {
			height: 100%;
			min-height: 400px;
			
			margin-left: 200px;
			padding: 10px 20px 30px 0px;
			position: relative;
		}

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

/* ********************************************************************************
 * Das Such-Formular
 */
	#logo a {
		width: 200px;
		height: 120px;
		
		top: 0;
		right: 0;
		position: absolute;
		
		display: block;
	}
	#logo a:hover {
		text-decoration: none;
	}

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

/* ********************************************************************************
 * Das Such-Formular
 */
	#path {
		color: #999;
		}
/* ******************************************************************************** */

/* ********************************************************************************
 * Die Navigation und die SubNavigation
 */
 	#navi a, #navi a:link, #navi a:active, #navi a:visited {
		color: #000;	
	}
	#navi a.active, #navi a.active:link, #navi a.active:active, #navi a.active:visited {
		color: #05a;
		
		font-weight: bold;
	}
	
	#navi a:hover {
		text-decoration: underline;
		color: #000;
	}
	#navi a.active:hover {
		text-decoration: underline;
		color: #05a;
		
		font-weight: bold;
	}
	
	#navi ul {
		margin: 5px 0 5px 0;
		padding: 0 5px;
		
		text-align: right;
		}
		#navi ul li {
			padding: 2px 3px;
			
			font-size: 11px;
		}
	
	#navi ul ul {
		margin-right: 5px;
		
		text-align: right;
		
		border-right: 1px solid #05a;
		}
		#navi ul ul li {
			margin: 3px 0;
			}

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

/* ********************************************************************************
 * Die Message-Box
 */
	#message {
		padding: 5px;
		
		background: #05a;
		color: #fff;
	}
		
/* ******************************************************************************** */

/* ********************************************************************************
 * Der Popup
 */
	#popup {
		width: auto;
		height: auto;
		
		top: 80px;
		left: 50%;
		margin: 0px;
		padding: 0px;
		position: absolute;
		z-index: 5;
		}
		#headPopup {
			width: 310px;
			height: 17px;
			
			margin-left: -170px;
			padding: 6px 10px;
			position: relative;
			z-index: 6;
			
			background: #333;
			border: 5px solid #fff;
			border-bottom: none;
		}
		#contentPopup {
			width: 310px;
			height: auto;
			
			margin-left: -170px;
			padding: 10px;
			position: relative;
			z-index: 6;
			
			background: #05a;
			border: 5px solid #fff;
			border-top: none;
			}
			#contentPopup form {
				margin: 0px;
				padding: 0px;
			}
			#contentPopup input {
				border: none;
			}
			/* weil der IE6 mal wieder ... */
			#contentPopup ul {
				width: 305px;
			}
			#contentPopup .button {
				border: 1px solid #fff;
			}
		
/* ******************************************************************************** */

/* ********************************************************************************
 *	Der Content und der Container im Content-Frame
 */
	
	#content div.floatBox_left {
		width: 50%;
		
		padding-left: 50%;
		position: relative;
		}
		#content div.floatBox_left .float {
			width: 50%;
			
			top:	0;
			left:	0;
			position: absolute;
		}
	
	#content div.floatBox_right {
		width: 50%;
		
		position: relative;
		}
		#content div.floatBox_right .float {
			width: 100%;
			
			top:	0;
			left:	100%;
			position: absolute;
		}

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

/* ********************************************************************************
 * editor
 */

div#editor {
	width: auto;
	
	padding: 10px;
	position: relative;
	
	background: #555;
	color: #fff;
}

div#editor .date {
	width: 72px;
}
div#editor .time {
	width: 38px;
}

div#editor textarea {
	height: 400px;
}

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

/* ********************************************************************************
 * Der Mitglieschafts-Antrag
 */

div#vorstandImage {
	width: 100%;
	
	text-align: center;
	}

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

/* ********************************************************************************
 * Der Mitglieschafts-Antrag
 */
	
	input.checkbox {
		width: 20px;
		
		margin: 5px;
		
		border: none;
	}
	input.button {
		width: 120px;
		
		padding: 1px;
		
		background: #05a;
		border: none;
		
		display: inline;
	}
	
	ul.antrag {
		width: 100%;
		}
		ul.antrag li {
			width: 100%;
			
			margin: 5px 0px;
			padding: 0px;
			position: relative;
			}
			ul.antrag li select {
				width: 100%;
			}
			ul.antrag li .short {
				width: 60px;
			}
			
			ul.antrag li div.left {
				width: auto;
				
				margin-right: 50%;
				padding-right: 10px;
			}
			ul.antrag li div.left_short {
				width: 100px;
				
				top: 0px;
				left: 0px;
				margin: 0px;
				padding: 0px;
				position: absolute;
			}
			
			ul.antrag li div.right {
				width: 50%;
				
				top: 0;
				left: 50%;
				margin: 0px;
				padding: 0px;
				position: absolute;
				
				text-align: left;
			}
			ul.antrag li div.right_long {
				width: auto;
				
				right: -110px;
				margin-right: 100px;
				padding-right: 10px;
				position: relative;
			}
	
/* ******************************************************************************** */

/* ********************************************************************************
 *	Die Liste
 */

ul.list {
	margin: 5px 0;
	padding: 0;
	}
	ul.list li {
		margin: 5px 0;
		padding: 0;
		}
		ul.list li img {
			padding: 5px 10px;
		}
		ul.list li div.left {
			width: 50%;
			
			margin-right: 50%;
			position: relative;
		}
		ul.list li div.right {
			width: 50%;
			
			top: 0;
			right: 0;
			position: absolute;
		}
		
		ul.list li div.head {
			width: 100%;
			
			position: relative;
		}		
		ul.list li div.body {
			margin-top: 5px;
			}
			ul.list li div.body div.image {
				width: 163px;
				
				float: left;
				
				text-align: center;
			}
			ul.list li div.body div.text_image {
				margin-left: 170px;
			}
			
		ul.list li div.pos {
			width: 140px;
			height: 32px;
			
			float: left;
		}

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

	ul.eventList {
		margin: 0;
		padding: 0;
		position: relative;
		}
		ul.eventList li {
			margin: 0px;
			padding: 5px 5px;
			position: relative;
			}
			ul.eventList li .type {
				width: auto;
				
				top: 3px;
				right: 0px;
				margin: 0px;
				padding: 0px;
				position: absolute;
				
				background: #fff;
			}
			ul.eventList li .text {
				margin: 0px;
				padding: 10px 0px;
				
				font-size: 12px;
				text-align: justify;
				line-height: 18px;
			}
			ul.eventList li .images {
				width: 120px;
				
				margin: 0 0 20px 30px;
				padding: 0;
				
				float: right;
				}
				ul.eventList li .images .singleImage {
					width: 120px;
					
					margin: 0 0 5px 0;
					padding: 0;
					position: relative;
					
					border: 1px solid #05a;
					
					text-align: center;
					}
					ul.eventList li .images .singleImage img {
						margin: 3px 0px;
						padding: 0px;
					}
					ul.eventList li .images .singleImage .delete {
						width: 18px;
						height: 20px;
						
						bottom: 0px;
						right: 0px;
						position: absolute;
						
						background: #f00 url("../images/delete.gif") no-repeat center center;
						
						display: block;
						
						text-decoration: none;
					}
			ul.eventList li .contact {
				width: 100%;
				
				margin: 0px;
				
				border: 1px solid #ccc;
				}
				ul.eventList li .contact p {
					margin: 5px;
				}
			
		ul.eventList li.toolbar {
			width: auto;
			
			padding: 5px;
			
			background: #fff;
			border: 1px solid #ccc;
			
			vertical-align: middle;
			}
			ul.eventList li.toolbar .button {
				width: auto;
				
				background: #fff;
				border: 1px solid #999;
				
				display: inline;
			}
	
	div#eventEntry {
		margin: 0;
		padding: 0;
		position: relative;
		}
		div#eventEntry .images {
			width: 130px;
			
			margin-left: 10px;
			padding: 0;
			
			float: right;
			}
			div#eventEntry .images img {
				margin: 4px;
				padding: 0;
				
				border: 1px solid #05a;
			}
			
/* ******************************************************************************** */

/* ********************************************************************************
 * Eine Anfrage auf Spende oder Mitgliedschaft
 */
 
	ul#requests {
		width: 100%;
		
		position: relative;
		}
		ul#requests li {
			width: 100%;
			
			margin: 5px 0;
			padding: 5px 0px;
			position: relative;
			}
			ul#requests li div.fields {
				width: 120px;
				
				float: left;
			}
			ul#requests li div.values {
				padding-left: 120px;
			}
		ul#requests li.toolbar {
			width: auto;
			
			padding: 5px;
			
			background: #fff;
			border: 1px solid #ccc;
			}
			ul#requests li.toolbar img {
				margin: 0 3px;
			}

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

/* ********************************************************************************
 * Die komplette ChronicleList
 */

	ul.chronicleList {
		width: auto;
		
		margin: 0px;
		padding: 0px;
		position: relative;
		}
		ul.chronicleList ul {
			margin: 5px 0px 5px 20px;
		}
		ul.chronicleList li {
			width: 100%;
			
			padding: 5px 0px;
			position: relative;
			
			border-top: 1px solid #ccc;
			}
			ul.chronicleList li p.date {
				height: 16px;
				
				top: 5px;
				right: 0px;
				position: absolute;
			}

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

/* ********************************************************************************
 * Der Footer
 */
 
#footer {
	width: 100%;
	
	margin: 0px 0px;
	padding: 10px 0px;
	position: relative;
	
	background: #05a;
	}
	#footer p {
		padding: 0px 10px;
	}

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