/*-----------------------------------------
CSS for Ute Lemmp
date:	12/2012
author: alexander matschos
-----------------------------------------*/

/*-----------------------------------------
Grundfarben:
headline, nav 2level:	#8e0606
nav 2level hover: 		#fcbebe
copylink: 						#ae0808
logo: 								#fff
-----------------------------------------*/
@media screen {
	/*--------------------------------basic--*/
	body							{ overflow-y:scroll;}
	*									{ padding:0; margin:0;}
	html, body				{ height:100%;}
	body 							{ color:#353535; font-size:16px; font-family:Arial,Verdana,Helvetica,Sans-Serif; background:url("../img/system/main-bg-01.png") repeat 0 0;}
	h1, h2, h3, h4, h5, h6, .like-headline	{ font-size:26px; line-height:28px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; font-style:italic; margin:15px 0 6px 0; text-align:left; color:#8e0606;}
	h2, h3, h4, h5, h6											{ font-size:20px; margin:5px 0 10px 0; font-weight:normal; font-style:italic;}
	h3, h4, h5, h6, .like-headline					{ font-size:18px;}
	p									{ padding-bottom:25px; line-height:24px;}

	/*--------------------------------skeleton--*/
	#top-wrapper			{ background:url("../img/system/header-bg-01.png") repeat-x 0 0; height:auto; min-height:100%;}
	/*.pattern					{ background:url("../img/system/main_bg.png") repeat 0 0;}*/
	.wrapper					{ width:960px; padding:0 10px; margin:0 auto; text-align:left; display:table;  position:relative; /*min-height:450px;*/}
	#header,
	#nav,
	#main 						{ float:left; width:960px; position:relative;}
	#nav							{ width:auto;}
	#header						{ height:250px;}
	#main							{ padding:0 0 150px 0; margin:0 0 165px 0; margin:0 auto;}
	#main .column			{ padding:10px;}
	#footer						{ height:62px; background:url("../img/system/footer-bg-01.png") repeat-x 0 0; text-align:center; margin:-62px auto 0; padding:0; position:relative;}

	/*--------------------------------navigation--*/
	#header .nav			{ position:absolute; bottom:27px; left:280px; margin:0;}
	.nav ul 					{ list-style-type:none; /*overflow:hidden;*/}
	.nav li 					{ display:inline; float:left; position:relative; text-align:center;}
	.nav a						{ display:table-cell; color:#fff; padding:2px 15px 14px; text-decoration:none; width:100%; font-size:18px; letter-spacing:0.015em; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; }
	.nav .active a,
	.nav a:hover			{ background:url("../img/system/nav-active-01.png") no-repeat bottom center;}
	.nav ul ul				{ display:none;}
	/*
	.nav ul ul 				{ display:none; position:absolute; z-index:999; left:0; top:26px; width:250px; background:#fff;}
	.nav li li 				{ float:none;}
	.nav li li a 			{ background:#fff; color:#8e0606; font-size:16px; width:241px; text-align:left; height:auto; padding:5px 15px 5px; margin-right:0; }
	.nav li li a:hover	{ background-color:#fcbebe; background-image:none;}
	.nav li li.active a	{ background-image:url("../img/system/nav-2level-active-01.png"); background-repeat:no-repeat; background-position:194px center;}
	*/
	#main .nav							{ display:block; clear:both; float:left; width:100%; margin-top:-15px;}
	#main .nav ul 					{ padding-left:280px;}
	#main .nav li 					{ display:inline; float:left; position:relative; text-align:center; margin-left:5px;}
	#main .nav a						{ font-size:16px; color:#8e0606; padding:2px 5px 14px; text-decoration:none;}
	#main .nav .active a,
	#main .nav a:hover			{ background:url("../img/system/nav-2level-active-01.png") no-repeat bottom center;}


	/*--------------------------------lists--*/
	dl								{ float:left; width:100%; padding-bottom:20px;}
	dt,dd							{ float:left; width:160px; margin-bottom:12px;}
	dd								{ clear:right; width:800px;}
	dt span, dd span	{ font-weight:bold;}
	dl.kontakt dt 		{ font-weight: bold; margin-bottom: 20px;}
	dl.kontakt dd			{ margin-bottom:0;}
	#main ul					{ padding:0 0 15px 0; /*list-style-image:url("../img/system/list-item-01.png")*/;}
	#main ul.normal		{ list-style-image:none;}
	#main li					{ list-style-position:outside; margin:0 0 5px 25px; padding-left:5px; line-height:22px}

	/*--------------------------------images--*/
	#header img 			{ border:none;}
	#main p img				{ margin:0;}
	#main table img		{ margin:0; text-decoration:none; border-color:#000;}

	/*--------------------------------forms--*/
	form							{ float:left; width:100%; margin-bottom:25px;}
	form div					{ float:left; width:100%; margin-bottom:12px;}
	label							{ float:left; width:150px; clear:left; padding:2px 0;}
	input							{ float:left; width:250px; clear:right;}
	textarea					{ float:left; width:400px; clear:right; padding:2px 2px; font-family:Arial, Verdana, Helvetica, Sans-Serif; font-size:12px; line-height:19px;}
	input, textarea, select			{ padding:2px 4px; border:1px solid #aaa; border-bottom:1px solid #f1f1f1; border-right:1px solid #f1f1f1; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px;}
	select option			{ padding:0px 4px;}
	form p, form h2		{ display:block; clear:both;}
	.f_submit					{ float:right; width:125px; height:32px; border:1px solid #d1d1d1; background:#f1f1f1; color:#646464; clear:both; cursor:pointer; font-weight:bold; margin-right:40px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

	/*--------------------------------other modules--*/
	table							{ margin-bottom:10px;}
	.small, .small p	{ font-size:12px; line-height:18px;}
	.small p 					{ padding-bottom:5px;}
	.highlight				{ color:#518DC5;}
	a img							{ border:none;}
	.last							{ margin-bottom:20px;}
	.trenner					{ margin-bottom:26px;}
	.abstand 					{ border-bottom: 1px solid #fff; margin-bottom: 20px;}
	.center 					{ text-align: center;}
	.right 						{ text-align: right;}
	.clearfix					{ display:block;}
	.clear						{ clear:both;}
	.hidden 					{ position:absolute; left:-1000em; display:none;}
	.box							{ float:left; margin-bottom:15px; width:100%;}
	.block						{ display:block;}
	.img-box-01				{ float:left; margin:15px 20px 20px 0; padding:5px; background:#fff; -webkit-box-shadow: 0px 0px 7px 1px #777; box-shadow: 0px 0px 7px 1px #777; -webkit-border-radius: 3px; border-radius: 3px;}
	.teaser-box 		{ float:left; width:100%; margin-bottom:35px;}
	.teaser-box img		{ float:left; width:30%; margin-right:3%; }
	.teaser-box div			{ float:left; width:67%;}

	#main a						{ color:#ae0808; text-decoration:underline; }
	#main a:active, #main a:hover	{ text-decoration:none; color:#ae0808;}
	#main a.gallery-link	{ background:url("../img/content/ute-lempp-zu-den-galerien-01.png") no-repeat left center; padding:35px 10px 35px 180px; float:left;}
	#main p,
	#main li,
	#main dl,
	#main a,
	#main td,
	#main th					{ font-size:17px; font-style:italic;}
	.pattern .wrapper { padding:25px 10px;}

	#header .logo-wrapper				{ position:absolute; bottom:22px; left:0; margin:0;}
	#header-img				{ position:absolute; right:0; top:0;}

	#footer .wrapper	{ text-align:center;}
	#footer .wrapper span {float: left;}
	#footer a					{ color:#fff; padding-top:15px; }
	#footer .wrapper span a { xpadding: 20px 35px 25px 0;}

	/*--------------------------------gallery--*/
	#main .gallery 		{ list-style:none; padding:0;}
	#main .gallery-float-cont	{ float:left; width:100%; margin-bottom:25px;}
	#main .gallery-float			{ float:left;}
	#main .gallery li	{ margin:0 20px 20px 0; padding:5px; background:#fff; float:left; -webkit-box-shadow: 0px 0px 7px 1px #777; box-shadow: 0px 0px 7px 1px #777; -webkit-border-radius: 3px; border-radius: 3px;}
	.gallery li a			{ height:140px; width:140px; overflow:hidden;}
	.gallery li a,
	.gallery li a img						{ float:left; position:relative; height:200px;}
	.gallery.gallery-overview li a,
	.gallery.gallery-overview li a img			{ height:140px;}
	/*
	.gallery li a span.s1				{ display:none; position:absolute; top:0; left:0; float:left; height:140px; width:140px; padding:0;}
	.gallery li a:hover span.s1	{ background:url(../img/system/gallery-anchor-hover-01.png) repeat 0 0;}
	.gallery li a span.s2				{	display:none;}
	.gallery li a:hover span.s2	{ display:block; float:left; padding:55px 0 0 12px; font-family:Georgia,"Times New Roman",Times, serif; font-size:18px;}
	*/
	.gallery li a span.s1				{ display:block; position:absolute; top:0; left:0; float:left; height:140px; width:140px; padding:0;}
	.gallery li a:hover span.s1	{ background:url(../img/system/gallery-anchor-hover-01.png) repeat 0 0;}
	.gallery li a span.s2				{	display:none;}
	.gallery li a:hover span.s2	{ display:block; float:left; padding:55px 0 0 12px; font-family:Georgia,"Times New Roman",Times, serif; font-size:18px;}

	body #fancybox-buttons ul 					{ background: #8f0707; /* Old browsers */
																				background: -moz-linear-gradient(top,  #8f0707 0%, #ac0808 50%, #8f0707 51%, #ac0808 100%); /* FF3.6+ */
																				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8f0707), color-stop(50%,#ac0808), color-stop(51%,#8f0707), color-stop(100%,#ac0808)); /* Chrome,Safari4+ */
																				background: -webkit-linear-gradient(top,  #8f0707 0%,#ac0808 50%,#8f0707 51%,#ac0808 100%); /* Chrome10+,Safari5.1+ */
																				background: -o-linear-gradient(top,  #8f0707 0%,#ac0808 50%,#8f0707 51%,#ac0808 100%); /* Opera 11.10+ */
																				background: -ms-linear-gradient(top,  #8f0707 0%,#ac0808 50%,#8f0707 51%,#ac0808 100%); /* IE10+ */
																				background: linear-gradient(to bottom,  #8f0707 0%,#ac0808 50%,#8f0707 51%,#ac0808 100%); /* W3C */
																				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f0707', endColorstr='#ac0808',GradientType=0 ); /* IE6-9 */
																				border:1px solid #8f0707;
																				border-radius:3px;
	}
	body #fancybox-buttons a.btnToggle 	{ border-left:1px solid #8f0707; border-right:1px solid #8f0707;}
	body #fancybox-buttons a.btnNext 		{ border-right:1px solid #6B0505;}
	body #fancybox-buttons a.btnClose 	{ border-left: 1px solid #6B0505;}
	body .fancybox-lock .fancybox-overlay { overflow:visible;}

	.box-big-50		{ width:50%;}
	#main .gallery p { padding: 0; text-align: center; clear:left; font-size:14px;}
}

@media screen and ( max-width: 480px) {
	.teaser-box 		{ margin-bottom:20px;}
	.teaser-box img		{ width:100%;}
	.teaser-box div			{ width:100%;}
	.box-small-100		{ width:100%; clear:both;}
}

@media screen and ( max-width: 768px ) {
	#top-wrapper							{ background:url("../img/system/header-bg-01.png") repeat-x 0 -25px;}
	#header										{ height:215px;}
	.wrapper,
	#header,
	#main,
	#footer		 								{ width:100%; }
	#footer										{ height: 122px; background-color: #b00808;}
	#footer span 	{ float: left; width: 100%;}
	.wrapper									{ width:90%; padding:0 5%;}
	#header .logo-wrapper 								{ top:12px;}
	#header .logo-wrapper img						{ width:70%;}
	#header .nav							{ position:relative; left:auto; bottom:auto; padding-top:56px;}
	#header-img								{ display:none;}
	.nav ul 									{ list-style-type:none; /*overflow:hidden;*/}
	.nav li 									{ display:block; width:90%; clear:both; padding-bottom:1px}
	.nav a										{ display:block; color:#fff; padding:5px 0; text-align:left;}
	.nav .active a,
	.nav a:hover							{ background:none;}
	.nav .active a						{ font-weight:bold;}

	#main .nav								{ border-bottom:1px solid #ccc; padding-bottom:6px; margin-bottom:10px;}
	#main .nav ul 						{ padding-left:0; margin-bottom:7px;}
	#main .nav li,
	#main .nav a							{ padding:0; margin:0; text-align:right;}
	#main .nav .active a,
	#main .nav a:hover				{ background:none;}

	dt,dd											{ width:30%;}
	dd												{ width:70%;}

	.gallery li a							{ height:100px; width:100px; overflow:hidden;}
	.gallery li a,
	.gallery li a img					{ float:left; position:relative; height:150px;}
	.gallery.gallery-overview li a,
	.gallery.gallery-overview li a img			{ height:100px;}
	.gallery li a span.s1,
	.gallery li a span.s2			{ display:none;}
}

/* Changes for Coast CMS */
#main .gallery li 					{ max-width: 140px;}
.bildunterschrift						{float:none; display:block; clear:both; padding:5px 5px 0 5px; font-size:12px; font-style: normal; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis;}
.bildunterschrift.cms_editablearea {text-overflow: inherit;}

@media screen and ( max-width: 768px ) {
	#main .gallery li 					{ max-width: 100px;}
}