/* Infos
-----------------------------------------------------
Autor:	Lichtahtlet.de // Michael Zimmer
Date: 	14.06.09 @ 22:50 Uhr
Update: News-Überschriften als H4 setzen
*/

/* ========================================================
	Index
===========================================================

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Um direkt zum jeweiligen Bereich zu springen, benutzen 
Sie in der Suche ein "+"-Zeichen vor dem Abschnittsnamen.

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

	1.0 Wichtige Farben
	
	2.0 Basis Definitionen
	
	3.0 Layout
		3.1 Topnavigation
		3.2 Logo
		3.3 Hauptnavigation
		3.4 Subnavigation
		3.5 Sidebar
		3.6 Footer
	
	4.0 Content
		4.1 Headlines	
		4.2 Aktuelles	
		4.3 a) Über mich - Leistungen	
		4.3 b) Über mich - Ausrüstung	
		4.3 c) Über mich - Lichtathlet
		4.3 d) Über mich - Vita
		4.4 a) Portfolio - Fotos	
		4.4 b) Portfolio - Webdesign		
		4.5 Kontakt		
		4.6 Impressum		
		4.7 Sitemap		
						
	5.0 Sonstiges
		5.1 Action Elemente
		5.2 Sidebar Adbox	
		5.3 Sidebar Twitterbox
		5.4 Success / Error Meldungen	
		5.5 Crashkurs Fotografie			
		5.6 Specialteaser
*/	


/* ========================================================
	1.0 +Wichtige Farben
===========================================================
   Content Background:    Weiß			#2F2C22
   Main Text:             Dunkelgrau	#333333
   Links:                 Dunkelblau	#375163
   Links Hover:			  Dunkelblau	#375163 Underlined
*/


/* ========================================================
	2.0 +Basis Definitionen
=========================================================*/

@import "reset.css";

@media print {
	* {background: #fff; color: #000;}
	html {font: 100%/1.5 georgia, serif;}
	#mainnavi, #footer ul li a, #topnavi, #subnavi, #angebot, #logo, #action {display: none;}
	}

a:link, a:active, a:visited {
	font-weight:bold;
	color:#375163;
	text-decoration:none;
	}
	
strong {
	font-weight:bold;
	}
	
a:hover {
	text-decoration:underline;
	}

a span {
	font-size:1.3em;
	}
	
.clear {
	clear:both;
	}

img {
	border:none;
	}

img.ifl {
	float:left;
	margin:0 10px 0 0;
	}

/* ========================================================
	3.0 +Layout
=========================================================*/
html {
	height:100%;
	margin-bottom:1px;
	}

body {
		background:url('/images/wrapper-bg.gif') repeat-x top;
		font:normal 62.5%/1.4em Arial, Helvetica, sans-serif;
		color:#333;
		margin:0;
		padding:0;
		overflow: -moz-scrollbars-vertical;
		}

#wrapper {
	width:800px;
	margin:0 auto;
	}


/* ========================================================
	3.1 +Topnavigation
=========================================================*/

#topnavi {
	width:800px;
	height:30px;
	background:#375064;
	margin:0;
	float:right;
	text-align:right;
	}

	#topnavi li{
		display:inline;
		padding:0 2px;
		color:#fff;
		}

	#topnavi li img{
		vertical-align:text-bottom;
		}

		#topnavi li a{
			font:bold 1em Arial, Helvetica, sans-serif;
			text-decoration:none;
			color:#fff;
			line-height:30px;
			}

		#topnavi li a:hover{
			text-decoration:underline;
			}			


/* ========================================================
	3.2 +Logo
=========================================================*/

#logo {
	clear:both;
	height:120px;
	width:350px;
	margin:0;
	padding:0;
	}	
	
	
/* ========================================================
	3.3 +Hauptnavigation
=========================================================*/

#mainnavi {
	clear:both;
	width:800px;
	margin:0;
	padding:0;
	}
	
	#mainnavi li {
		display:inline;
		margin:0 161px 0 0;	
		height:35px;
		}

		#mainnavi li.last {
			display:inline;
			margin:0;
			height:35px;
			}
	
	#mainnavi li a {
		font:bold 1.4em Arial, Helvetica, sans-serif;
		color:#fff;
		text-decoration:none;
		height:35px;
		padding:8px 7px 7px;
		line-height:32px;	
		}

	#mainnavi li a:hover {
		background:#415563;
		}
/* ========================================================
	3.4 +Subnavigation
=========================================================*/

#subnaviwrapper {
	width:235px;
	float:left;
	margin-right:15px;
	}

#subnavi {
	width:220px;
	padding:5px;
	background:#375163;
	margin:20px 0 0 0;
	border:1px solid #375163;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}

	#subnavi dl {
		width:220px;
		}
	
		#subnavi dl dt {
			font:bold 1.2em Arial, Helvetica, sans-serif;
			background:#fff;
			padding:10px;
			margin:10px 0 0;
			color:#333;
			text-decoration:none;
			}

			#subnavi dl dt a {
				color:#375163;
				text-decoration:none;
				}
				
			#subnavi dl dt a.cursor {
				cursor:default;
				outline:none;
				}	


		#subnavi dl dd {
			margin:0;
			padding:0;
			}

		
			#subnavi dl ul li{
				background:#e1e1e1;
				}				
			
			#subnavi dl ul li.active {
				background:#e1e1e1 url('/images/subnavi-active.gif') no-repeat left;
				}
				
				
			#subnavi dl ul li a {
				font:bold 1.2em/3em Arial, Helvetica, sans-serif;
				color:#333;
				text-decoration:none;
				display:block;
				padding:0 10px;
				margin:0;
				}
				
			#subnavi dl ul li a:hover {
				background:#f0f0f0 url('/images/subnavi-hover.gif') no-repeat left;
				display:block;
				}

				#subnavi dl ul li.active a:hover {
					background:#f0f0f0 url('/images/subnavi-active-hover.gif') no-repeat left;
					display:block;
					}

/* ========================================================
	3.5 +Sidebar
=========================================================*/

#sidebar {
	width:220px;
	padding:0;
	margin:20px 0 0 0;
	float:left;
	padding:0;
	}


/* ========================================================
	3.6 +Footer
=========================================================*/					

#footer {
	width:100%;
	clear:both;
	float:left;
	border-top:1px solid #375163;
	padding:5px 0;
	list-style:none;
	text-align:center;
	margin:15px 0 0;
	}
	
		#footer li {
			display:inline;
			color:#333;
			}
		
		#footer li a {
			font:bold 1em Arial, Helvetica, sans-serif;
			color:#333;
			}
		
		#footer li a:hover {
			text-decoration:none;
			}
		
		#footer li p {
			text-align:center;
			font-size:1em;
			margin:5px 0 0;
			}


/* ========================================================
	4.0 +Content
=========================================================*/					

#content {
	width:540px;
	float:left;
	margin:20px 0 0;
	}

#content p{
	font:normal 1.2em/1.4em Arial, Helvetica, sans-serif;
	margin:5px 0 15px;
	}
	

/* ========================================================
	4.1 +Headlines
=========================================================*/	

#content h1 {
	width:100%;
	font:bold 1.8em Arial, Helvetica, sans-serif;
	border-bottom:1px solid #375163;
	padding-bottom:5px;
	margin:0 0 10px;
	color:#375163;
	}

#content h2 {
	font:bold 1.4em Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	color:#375163;
	}

#content h3 {
	font:bold 1.6em Arial, Helvetica, sans-serif;
	text-align:center;
	margin:10px 10px 0 0;
	color:#375163;
	width:30px;
	float:left;
	color:#375163;
	}

#content h3 span {
	font:bold 0.8em Arial, Helvetica, sans-serif;
	color:#888;
	text-align:center;
	text-transform:uppercase;
	}	

#content h4 {
	font:bold 1.4em Arial, Helvetica, sans-serif;
	margin:0;
	color:#375163;
	}


/* ========================================================
	4.2 +Aktuelles
=========================================================*/

#content .aktuelles div {
	width: 500px;
	float:left;
	margin:10px 0;
	padding:0;
	}

#content .aktuelles div p{
	margin:3px 0 10px;
	}


/* ========================================================
	4.3 a) +Über mich - Leistungen
=========================================================*/

#vorteile {
	clear:left;
	margin:0;
	padding:0;
	font:normal 1.2em Arial, Helvetica, sans-serif;
	list-style:circle;
	}

#vorteile li {
	margin:0 0 0 15px;
	line-height:1.6em;
	}

#vorteile li.title {
	list-style:none;
	margin:0;
	}	

/* ========================================================
	4.3 b) +Über mich - Ausrüstung
=========================================================*/	

.ausruestung {
	width:540px;
	margin:15px 0 0;
	}

	.ausruestung td {
		width:264px;
		margin:0 0 15px;
		text-align:center;
		border-bottom:1px solid #e1e1e1;
		vertical-align:top;
		padding:20px 0;
		}

	.ausruestung td.last {
		border-bottom:none;
		}

	.ausruestung td p {
		width:264px!important;
		margin:0!important;
		text-align:left;
		}


/* ========================================================
	4.3 c) +Über mich - Lichtathlet
=========================================================*/
img.myself {
	float:left;
	margin:0 10px 5px 0;
	}


/* ========================================================
	4.3 d) +Vita
=========================================================*/	

#vita {
	float:left;
	vertical-align:top;
	width:400px;
	}

	#vita td {
			font:normal 1.2em/1.5em Arial, Helvetica, sans-serif;
			margin-bottom:20px;
			display:block;
			}
		
	#vita td.left {
		font-weight:bold;
		width:100px;
		margin:0;
		}
	
	#vita tr {
		padding-bottom:20px;
		}
		
		
/* ========================================================
	4.4 a) +Portfolio - Fotos
=========================================================*/

p.portfoliohint {
	padding:10px 0;
	}


.box-fotos {
	margin:10px 0 0;
	}
		
.box-fotos img {
	width:528px;
	margin-bottom:10px;
	border:1px solid #e1e1e1;
	}

	img.imgcap{
		margin-bottom:0!important;
		}
	
	p.caption {
		width:528px;
		text-align:right;
		margin-top:0!important;
		margin-bottom:20px;	
		font-size:1em!important;
		}
	
			
/* ========================================================
	4.4 b) +Portfolio - Webdesign
=========================================================*/	

.box-web {
	width:248px;
	float:left;
	border:1px solid #375163;
	text-align:center;
	padding:5px;
	margin:0 10px 10px 0;
	background:#eee;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}	

.box-right {
	float:left;
	margin:0 0 10px 0;
	}
				
	.box-web img  {	
		border:1px solid #e1e1e1;
		margin:5px 0;
		}
	
	.box-web table {
		padding:0;
		border-collapse:collapse;
		}
	
	.box-web table td{
		font:normal 1.2em Arial, Helvetica, sans-serif;
		text-align:left;
		padding:4px 5px 2px;
		}
	
	.box-web table td.left {
		font-weight:bold;
		width:50px;
		}

span.online {
		font-weight:bold;
		color:#00FF00;
		}
	
span.offline {
		font-weight:bold;
		color:#FF0000;
		}


/* ========================================================
	4.5 +Kontakt
=========================================================*/	

#kontakt {
	width:530px;
	margin:20px 0 0;
	padding:0;
	}
	
	#kontakt li {
		margin:0 0 10px;
		}

	#kontakt fieldset {
		border:none;
		padding:0;
		margin:0;
		}	

	#kontakt label {
		clear:both;
		display:block;
		width:50px;
		float:left;
		padding:5px 0 0;
		font:normal 1.2em Arial, Helvetica, sans-serif;
		}
	
	#kontakt select {
		width:100px;
		margin:0 0 0 12px;
		}
		
	#kontakt input.text {
		width:200px;
		margin:0 10px 0 10px;
		}

	#kontakt label.lang {
		width:120px;
		}

	#kontakt textarea {
		width:260px;
		margin:0 0 10px;
		min-height:100px;
		height:100px;
		}	

	#kontakt input.captcharesult {
		width:75px;
		margin:0 0 0 20px ;
		}

	#kontakt p.captchatext {
		clear:both;
		margin:0 0 10px 0;
		font:normal 1.2em Arial, Helvetica, sans-serif;
		}
	#kontakt p {
		clear:both;
		margin:0 0 10px 0;
		font:normal 1em Arial, Helvetica, sans-serif;
		}

#subnavi #impressum dd {
	background:#eceded;
	padding:0 10px;
	}

#subnavi #impressum dd.first {
	padding:10px 10px 0;
	}

#subnavi #impressum dd.last {
	padding:0 10px 10px;
	}

#subnavi #impressum dd.break {
	margin:0;
	padding-bottom:10px;
	}

/* ========================================================
	4.6 +Impressum
=========================================================*/	

#impressum {
	margin:0 0 15px;
	padding:0;
	}

	#impressum dt {
		font:bold 1.4em/1.6em Arial, Helvetica, sans-serif;
		}
	
	#impressum dd {
		font:normal 1.2em/1.4em Arial, Helvetica, sans-serif;
		margin:0;
		}

	#impressum dd img.mail {
		vertical-align:text-bottom;
		}
	
	#impressum dd.break {
		margin-bottom:12px;
		}	


/* ========================================================
	4.7 +Sitemap
=========================================================*/	

#sitemap {
	margin:0 0 15px;
	padding:0;
	}

	#sitemap dt.home {
		font:bold 1.4em/1.6em Arial, Helvetica, sans-serif;
		background:url('/images/sitemap_home.gif') no-repeat left;
		padding:0 0 0 20px;
		}

	#sitemap dt {
		font:bold 1.4em/1.6em Arial, Helvetica, sans-serif;
		margin:15px 0 0;
		background:url('/images/sitemap_dt.jpg') no-repeat left;
		padding:0 0 0 20px;
		}

	
	#sitemap dd {
		font:bold 1.2em/1.4em Arial, Helvetica, sans-serif;
		margin:5px 0 0 25px;
		background:url('/images/sitemap_dd.gif') no-repeat left;
		padding:0 0 0 18px;
		}

	#sitemap dd.sub {
		margin:5px 0 0 50px;
		background:url('/images/sitemap_dd_sub.gif') no-repeat left;
		padding:0 0 0 20px;
		}




/* ========================================================
	5.1 +Action Elemente
=========================================================*/	
a.action {
	margin:10px 0 0;
	float:left;
	width:220px;
	padding:10px 5px;
	font:bold 1.8em Arial, Helvetica, sans-serif;
	background:#375163;
	color:#fff;
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}

a.action_small {
	margin:10px 0 0;
	float:left;
	padding:10px;
	font:bold 1.4em Arial, Helvetica, sans-serif;
	background:#375163;
	color:#fff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}
	
a.action_news {
	float:left;
	margin:5px 0 0;
	padding:5px 10px;
	font:bold 1em Arial, Helvetica, sans-serif;
	color:#fff;
	background:#275163;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}

		
		a:hover.action_small, a:hover.action, a:hover.action_news {
			background:#0B283D;
			text-decoration:none;
			}
	


	
/* ========================================================
	5.2 +Sidebar Adbox
=========================================================*/				

 ul.adbox {
	width:236px;
	background:#375163;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}
	
ul.adbox li {
	text-align:center;
	}
		
ul.adbox li h2 {
	font:bold 2.8em Arial, Helvetica, sans-serif;
	color:#fff;
	text-transform:uppercase;
	margin:0;
	padding:5px 12px;
	text-align:center;
	}	

ul.adbox li img {
	margin:5px 0 0;
	}

		ul.adbox ul li{
				margin:0;
				padding:5px;
				background:#0b283d;
				color:#fff;
				font:bold 1.6em Arial, Helvetica, sans-serif;
				text-align:left;
				}

		ul.adbox ul li img {
			margin:3px 10px;
			vertical-align:middle;
			}


/* ========================================================
	5.3 +Sidebar Twitterbox
=========================================================*/		
			
#twitterbox {
	width:225px;
	height:72px;
	margin:15px 0 0;
	}
	
	#twitterbox a {
		background:url('/images/twitterbg.gif') no-repeat top left;
		display:block;
		width:152px;
		height:72px;
		font:bold 1.8em/1.5em Arial, Helvetica, sans-serif;
		color:#fff;
		padding:15px 0 0 80px;
		}
		
	#twitterbox a:hover {
		background:url('/images/twitterbghover.gif') no-repeat top left;
		color:#fff;
		text-decoration:none;
		}					
		
/* ========================================================
	5.4 +Success / Error Meldungen
=========================================================*/	
p.success {
	background: url('/images/success.gif') no-repeat left;
	padding:12px 10px 10px 40px;
	font:normal 1.2em Arial, Helvetica, sans-serif;
	border:2px solid #82a20f;
	}
	
p.error {
	background: url('/images/error.gif') no-repeat left;
	padding:12px 10px 10px 40px;
	font:normal 1.2em Arial, Helvetica, sans-serif;
	border:2px solid #e63f16;
	}
	
/* ========================================================
	5.5 +Crashkurs Fotografie
=========================================================*/	
#crashkursfotografie {
	width:530xp;
	height:180px;
	margin:0;
	background:url('/images/crashkursfotografie.jpg') no-repeat;
	padding:40px 0 0 165px;
	list-style:circle;
	}

#crashkursfotografie li {
	font:bold 1.2em/1.6em Arial, Helvetica, sans-serif;
	}

#crashkursfotografie li.download {
	list-style:none;
	margin:0 0 0 -15px;
	font:bold 1em/1.6em Arial, Helvetica, sans-serif;
	}

/* ========================================================
	5.6 +Specialbox
=========================================================*/	
#special {
	width:87px;
	height:85px;
	position:absolute;
	top:0;
	right:0;	
	z-index:5;
	}