/* Infos
-----------------------------------------------------
Seite:  Fotorado.de / Fotorado.com
Autor:	MZ
Date: 	05.05.08 @ 11.15 Uhr
Update: 3.Juni 09/
User: IK	/
*/

/* Farben 
-----------------------------------------------------
   Body Background:       Grau #ededed
   Main Text:             Weiß #000000
   Links:                 Orange #e57c04 Underlined
   Links Hover:			  Orange #e57c04 Underlined
   Button:				  Orange
*/

/* Index
-----------------------------------------------------

	1.0 Basics
	
	2.0 Generelle Definitionen

	3.0 Header
	--3.1 Logo
	--3.2 Mainnavi
	--3.3 Teaser
	
	4.0 Content
	--4.1 Link
	--4.2 Kolumne
	--4.3 Seitenbox
	
	5.0 Footer

*/	



/* 1.0 +Basics
---------------------------------------------------*/
@import "reset.css";

@media print {
	* {background: #fff; color: #000;}
	html {font: 100%/1.5 georgia, serif;}
	#fr-mainnavi, #fr-footer, #fr-topnavi {display: none;} /* Projektnamen anpassen! */
	}

.clear:after 
			{
			content: ".";
			visibility: hidden;			
			height:     0;
			display:    block;
			clear: both; 
			}

* html .clear
			{
			height: 1%;
			}

/* 2.0 +Generelle Definitionen
---------------------------------------------------*/
html {
    height: 100%;
    width: 100%;
	}
	
.clear {
	clear:both;
	}

body {
	background:#ededed url('/buttons/sitebg.gif') repeat-x top;
	color:#000;
	font:normal 62.5%/1.3em Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;

	}
	
#wrapper{
	width:902px;
	margin:0 auto;
	position:relative;
	}

span.nowrap {
	white-space:nowrap;
	}


.noclear {
	clear:none!important;
	}
	
/* 3.0 +Content
---------------------------------------------------*/	

/* 3.1 +Logo
---------------------------------------------------*/
#logo {
	margin:20px 0 10px;
	}	

#newsletter {
	width:300px;
	height:50px;
	position:absolute;
	top:20px;
	right:0;
	}

	#newsletter fieldset {
		display:block;
		padding:5px;
		border:1px solid #9c9c9c;
		background:#eee;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		}
	
	#newsletter h3 {
		margin:0 0 2px;
		}	

	#newsletter #email {
		width:193px;
		color:#9c9c9c;
		float:left;
		border:1px solid #9c9c9c;
		padding:4px 5px 5px;
		margin-right:5px;
		}
		
/* 3.2 +Mainnavi
---------------------------------------------------*/
#mainnavi {
	width:902px;
	height:50px;
	background:transparent url('/buttons/mainnavi-bg.gif') no-repeat;
	}
		
			
#dropdown {	
	width:880px;
	margin: 0 auto;
	padding: 10px 0 0;
	}

	#dropdown li {
		float: left;
		list-style: none;
		color:#fff;
		padding:5px 18px;
		font:bold 1.6em Arial, Helvetica, sans-serif;
		}

	#dropdown li a {
		display: block;
		text-decoration: none;
		color: #fff;
		white-space: nowrap;
		font:bold 1em Arial, Helvetica, sans-serif;
		}


		#dropdown li ul {
			margin: 14px 0 0 -35px;
			padding: 0;
			position: absolute;
			visibility: hidden;
			z-index:1000;
			}
		
			#dropdown li ul li{	
				float: none;
				display: block;
				background:#FF8015;
				border:1px solid #9c9c9c;
				border-top:none!important;
				border-bottom:none;
				}

			#dropdown li ul li.last{	
				border-bottom:1px solid #9c9c9c!important;
				}
			
			#dropdown li ul li a {
				display:block;
				width: auto;
				font:bold 0.5em Arial, Helvetica, sans-serif!important;
				color:#fff;
				padding:5px 10px;
				}
			#dropdown li ul li a:hover {
				background:#ed6f04;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				}
			
			
			
/* 3.3 +Teaser
---------------------------------------------------*/			

#teaser-wrapper {
	clear:both;
	width:900px;
	height:240px;
	border:1px solid #9c9c9c!important;
	border-top:none;
	}


#teaser-big {
	width:570px;
	float:left;
	height:210px;
	padding:15px;
	}
	
	.teaser-portal {	
		background:#fff url('/buttons/teaser/teaserbig-portal-personello.jpg') no-repeat right;
		}

	.teaser-jobs {	
		background:#fff url('/buttons/teaser/teaserbig-jobs.jpg') no-repeat right;
		}
		
	.teaser-kontakt {	
		background:#fff url('/buttons/teaser/kontakt.jpg') no-repeat right;
		}
		
	.teaser-kooperation {	
		background:#fff url('/buttons/teaser/kooperationen.jpg') no-repeat right;
		}
		
	.teaser-ueberuns {	
		background:#fff url('/buttons/teaser/ueber-uns.jpg') no-repeat right;
		}

	.teaser-experten {	
		background:#fff url('/buttons/teaser/experten.jpg') no-repeat right;
		}

	.teaser-schulfotografie {	
		background:#fff url('/buttons/teaser/schulfotografie.jpg') no-repeat right;
		}
		
	.teaser-fotobranding {	
		background:#fff url('/buttons/teaser/fotobranding.jpg') no-repeat right;
		}
	.teaser-index {	
		background:#fff url('/buttons/teaser/index.jpg') no-repeat right;
		}
	.teaser-presse {	
		background:#fff url('/buttons/teaser/teaserbig-presse.jpg') no-repeat right;
		}

	.teaser-fotocard {	
		background:#fff url('/buttons/teaser/fotocard.jpg') no-repeat right;
		}
	.teaser-referenzen{	
		background:#fff url('/buttons/teaser/referenzen.jpg') no-repeat right;
		}

	.teaser-staedte{	
		background:#fff url('/buttons/teaser/teaser_staedte.jpg') no-repeat left;
		}



#teaser-big h1{
	font:bold 3em Arial, Helvetica, sans-serif;
	color:#999999;
	margin:0 0 5px;
	}


	#teaser-big h2{
	margin:0 0 10px;
	width:300px;
	font:bold 1.8em/1.3em Arial, Helvetica, sans-serif;
	color:#666666;
	}
	
	#teaser-big h1.invert {
	color:#ffffff;
	width:100%;
	}
	
	#teaser-big h2.invert {
	color:#ffffff;
	font:bold 2.4em Arial, Helvetica, sans-serif;
	width:60%;
	}

	#teaser-big a.button {
		background: transparent url('/buttons/button-left.gif') no-repeat left; 
		display: block;
		float: left;
		height: 45px;
		margin-right: 6px;
		padding-left: 11px; 
		text-decoration: none;
		font:bold 1.6em Arial, Helvetica, sans-serif;
		color:#fff;
		}
	
			#teaser-big a.button span {
			background:transparent url('/buttons/button-right.gif') no-repeat right; 
			display:block;
			line-height:45px;
			padding:0 11px 0 0;
			}


.teaser-small {
	width:289px;
	float:left;
	height:120px;
	background:#f5f5f5 url('/buttons/teaser-small-bg.gif') repeat-x left;
	border-left:1px solid #9c9c9c;
	position:relative;
	padding:0 0 0 10px;
	}
	
		.teaser-small img.pic {
			position:absolute;
			top:0;
			right:0;
			}
		
		.teaser-small h3 {
			font:bold 1.6em Arial, Helvetica, sans-serif;
			color:#333;
			margin:20px 0 5px 5px;
			}
		
		.teaser-small p {
			width:180px;
			font:normal 1.2em Arial, Helvetica, sans-serif;
			color:#555;
			margin:0 0 10px 5px;
			}

		.teaser-small p strong {
			color:#000;
			}



/* 4.0 +Content
---------------------------------------------------*/	
#content {
	clear:both;
	width:900px;
	border:1px solid #9c9c9c;
	border-top:none;
	background:#fff;
	overflow:hidden;
	padding:10px 0 0!important;
	}

/* 4.1 +Link
---------------------------------------------------*/	

a {
	font:bold 1.1em Arial, Helvetica, sans-serif;
	color:#e57c04;
	}
	
/* 4.2 +Kolumne
---------------------------------------------------*/	
		.onecolumn {
			width:880px;
			float:left;
			padding:10px;
			}
		
		.twocolumns-left {
			width:580px;
			float:left;
			padding:10px;
			}
		
		.twocolumns-right {
			width:300px;
			float:left;
			}
		
		#content .threecolumns {
			width:280px;
			float:left;
			padding:10px;
			}
			
	

	

/* 4.3 +Seitenbox
---------------------------------------------------*/	
	.sbox {
		background:#f2f2f2;
		padding-bottom:5px;
		margin:10px 0;
		}
	
			.sbox h3 {
				font:bold 1.6em Arial, Helvetica, sans-serif;
				padding:10px 0;
				color: #666666;
				border-bottom:1px dotted #666666;
				margin:0 10px;
				}

	.sbox p{
		padding:10px;
		margin:10px 0;
		font:normal 1.4em Arial, Helvetica, sans-serif;
		color: #666666
		}

			

	.sbox-important {
		background:#f2f2f2;
		color: #666666;
		padding:5px;
		margin:10px 0;
		}
	
			.sbox-important h3 {
				font:bold 1.6em Arial, Helvetica, sans-serif;
				padding:5px;
				}
			
			.sbox-important p {
				display:block;
				font:bold 1.2em Arial, Helvetica, sans-serif;
				color:#666666;
				margin:5px 5px 10px;
				}
			
			.sbox-important p a{
				display:block;
				font:bold 1em Arial, Helvetica, sans-serif;
				color:#666666;
				margin:5px 0 10px;
				text-decoration:none;
				}
			
			.sbox-important a {
				display:block;
				font:bold 1.2em Arial, Helvetica, sans-serif;
				color:#666666;
				margin:5px 5px;
				}


			.sbox-important a span {
				font:bold 1.3em Arial, Helvetica, sans-serif;
				}
		
			.sbox-important div {
				margin:0 5px 0 5px;
				font:normal 1.2em/1.4em Arial, Helvetica, sans-serif;
				}
			
			.sbox-important hr {
				margin:10px 0;
				padding:0;
				height:0;
				border-top:1px solid #ffffff;
				border-bottom: none;
				}
				
			.sbox-important img.ico {
				padding-bottom:40px;
				float:left;
				margin-right:10px;
				}
/* 5.0 +Footer
---------------------------------------------------*/	
#footer {
	width:900px; 
	text-align:center; 
	margin:10px 0;
	}
		
		#footer a:link, #footer a:visited {
			color:#000000;
			text-decoration:none;
			}

/* 6.0 Content */
#teaserlogo {
	clear:left;
	float:left;
	margin:30px 0 30px 15px;
	}

#teaserimage {
	float:left;
	margin:-15px 0 30px!important;
	border:none!important;
	}
	
#teaserimage .caption{
	font:normal 0.9em Arial, Helvetica, sans-serif;
	margin:3px 0 0;
	text-align:right;
	} 

	
		
.content-box{
	width:100%;
	clear:both;
	border:1px solid #999;		
	margin:0 0 40px;
	}
	
.content-box img {
	clear:left;
	float:left;
	margin:15px 15px 10px 10px!important;
	}

.content-box img.fr {
	clear:left;
	float:right;
	margin:15px 10px 10px 15px!important;
	border:1px solid #bfbfbf;
	}

.content-box p {
	width:95%;
	margin:0 0 20px 10px!important;
	}


.content-box h4 {
	clear:both;
	float:left;
	font:bold 1.3em Arial, Helvetica, sans-serif;
	margin:25px 0 5px;
	padding:10px;
	color:#333;
	}

.content-box ul {
	clear:both;
	margin:0 0 10px 40px;
	padding:0;
	font:normal 1.3em Arial, Helvetica, sans-serif;
	list-style:outside square;
	}	
	
.content-box ul li{
	margin:5px 0;
	line-height:20px;
	}	

.content-box h3 {
	font:bold 1.6em Arial, Helvetica, sans-serif;
	margin:-10px 0 15px 5px;
	background:#fff;
	padding:0 5px;
	float:left;
	color:#666666;
	position:relative!important;
	}

.content-box h3 span{
	font:normal 0.8em Arial, Helvetica, sans-serif;
	}


.content-box img.inlineimg {
	float:none;
	margin:0!important;
	vertical-align:text-bottom;
	}

#leftcolumn h1 {
	font:bold 1.8em Arial, Helvetica, sans-serif;
	color:#ED7C04;
	margin:0 0 20px;
	}

	
#leftcolumn h2 {
	font:bold 1.6em Arial, Helvetica, sans-serif;
	color:#666666;
	margin:0 0 30px;
	}

#leftcolumn p {
	clear:left;
	margin:20px 10px 10px;
	font:normal 1.2em/1.5em Arial, Helvetica, sans-serif;
	}

#leftcolumn #intro {
	font:bold 1.6em Arial, Helvetica, sans-serif;
	color:#666666;
	margin:0 0 30px;
	}
	



.sbox h4 {
	font:bold 1.2em Arial, Helvetica, sans-serif;
	margin:0;
	color:#333;
	}

			.sbox ul {
				margin:0 5px;
				}
			
			.sbox li {
				margin:10px 5px 20px;
				}
			
				.sbox li a {
					font:normal 1.2em Arial, Helvetica, sans-serif;
					text-decoration:none;
					color: #666666;
					}
						.sbox li a:hover {
							text-decoration:underline;
							}
			
	#portaluebersicht li#moreportale, li#moreportale ul {
		padding:0;
		margin:0;
		}

	li#moreportale ul li {
		margin:0 5px 20px;
		}

	#referenzen img {
		margin:5px 0;
		}


.team {
	margin:0 0 15px 10px;
	}	
	
.team dd {
	font:normal 1.2em/1.5em Arial, Helvetica, sans-serif;
	}	

.team dt {
	font:bold 1.2em Arial, Helvetica, sans-serif;
	margin-bottom:5px;
	}

p.important-hint {
	width:530px;
	padding:5px;
	font:bold 1.2em Arial, Helvetica, sans-serif!important;
	border:2px solid red;
	color:red;
	background:#fff5f5;
	}

p.important-hint span {
	text-transform:uppercase;
	line-height:2em;
	}
	
ol {
	clear:both;
	list-style:outside decimal;
	margin:0 0 0 30px;
	}

ol li {
	font:normal 1.2em Arial, Helvetica, sans-serif;
	margin:0 0 10px;
	}
ol li.nls {
	list-style:none;
	margin:0 0 0 -30px;
	}	
	
	
#topnavi {
	position:absolute;
	top:5px;
	right:5px;
	}

#topnavi li {
	display:inline;
	}

.feedback {
	margin:10px 0;
	border:1px solid #9c9c9c;
	border-right:none;
	padding:10px;
	}

	.feedback h5 {
		font:bold 1.4em Arial, Helvetica, sans-serif;
		color:#666;
		margin:0 0 5px;
		}

	.feedback h5 img{
		margin:3px 7px 0 2px;
		vertical-align:baseline;
		}
	
	.feedback p.quote {
		font:italic 1.2em/1.3em Arial, Helvetica, sans-serif;
		margin:0 0 5px;
		}
	.feedback p.quote span {
		color:#666;
		}		
	
	.feedback p {
		font:normal 1.2em Arial, Helvetica, sans-serif;
		color:#666;
		}
		.feedback p span {
		font:bold 1em Arial, Helvetica, sans-serif;
		}
		
img.fl {
	float:left!important;
	margin:0 5px 0 0!important;
	}

img.fr {
	float:right!important;
	margin:0 0 0 5px!important;
	}	

.samplepics{
	clear:both;
	margin:-20px 0 0;
	}

.samplepics img{
	clear:none!important;
	margin:5px 0 10px 10px !important
	}
	
#breadcrumb {
	clear:both;
	display:block;
	background:#fff;
	font-size:0.9em;
	}

	#breadcrumb p {
		padding:5px 10px;
		margin:0;
		border:1px solid #9c9c9c;
		border-top:none;
		border-bottom:none;
		display:block;
		}
	#breadcrumb a {
		text-decoration:none;
		}
		
		
	#boxleft, #boxright {
		width:260px;
		float:left;
		padding:0 10px;
		background:#f5f5f5;
		margin:0 5px 15px;
		}		

#boxleft p, #boxright p {
	margin-bottom:0!important;
	}

#boxleft img, #boxright img {
	border:1px solid #eceded;
	}
		
#boxleft h4, #boxright h4 {
	margin:0 0 5px;
	}		

		
#boxleft .boxlink, #boxright .boxlink {
	font:bold 12px Arial, Helvetica, sans-serif;
	margin:10px 0;
	float:left;
	}