/*   css layout formatting for http://primel.net *\
\*                  2008-07-22                   */

* { margin: 0; border: 0; padding: 0; }
html { overflow-y: scroll; }
body {
	height:100%;
	font-family: verdana, lucida sans, georgia, serif;
	font-size:12px;
	color: #808169;
	background: fixed center 367px no-repeat url(../images/ajax-loader.gif);
}
#index
{
	position: absolute;
	width: 100%;
	height: 100%;
}
#teasergallery
{
	position: relative;
	padding: 0 0 40px 0;
	background: bottom left repeat-x url(../images/primel_hr.gif);
}
#index #cols
{
	position:relative; 
	top: 20px;
	background:#fff;
	border-left:380px solid #fff; 
	border-right:380px solid #fff; 
	overflow:visible;
	width: 16px;
}
#index #left
{
	float:left;
	position:relative;
	width:380px;
	margin-left:-380px;
	display:inline;
}
#index #right {
	float:right;
	position:relative;
	width:380px;
	margin-right:-380px;
	display:inline;
}
#index #left h1		{ font-size: 12px; margin: 0 0 16px 0; color: #fff; background: #ff00cc; }
#index #right h1	{ font-size: 12px; margin: 0 0 16px 0; color: #fff; background: #ffbd03; }
#index h2 { display: block; font-size: 12px; }
#index h2,
#index .tx-prmstartseite-pi1,
#index p { margin: 0 0 0 16px; }
#index .clear {
	clear:both;
	height:1px;
	overflow:hidden;
}
#index #left a:hover	{ color: #ff00cc; }
#index #right a:hover	{ color: #ffbd03; }

#index #teasergallery .content-element { padding: 0; background: none; }

#index #left .content-element ,
#index #right .content-element { background: none; }
#passepartout
{
	position: absolute;
	/* top: 302px; */
	width: 100%;
	/* height: 100%; only4ie! */
	min-height: 100%;
}
	#canvas
	{
		position: relative;
		margin: 303px auto 156px auto;
		padding: 0;
		width: 776px;
		line-height: 1.7;
		/* min-height: 333px; */
	}
	#content
	{
		background: #fff;
		padding: 0 0 84px 0;
	}
		
		.content-element
		{
			position: relative;
			top: -2px;
			width: 100%;
			padding: 20px 0 40px 0;
			background: top left repeat-x url(../images/primel_hr.gif);
			clear: both;
		}
		#content .csc-header { margin: 0 0 16px 0; }
		.content-element h2,
		.content-element h3,
		.content-element h4 
		{ margin: 0 0 0 16px; }
		#projects #content .csc-header h1	{ display: inline; font-size: 12px; line-height: 1; color: #fff; background: #ff00cc; }
		#agency #content .csc-header h1		{ display: inline; font-size: 12px; line-height: 1; color: #fff; background: #ffbd03; }
		.content-element ol { margin: 0 0 0 40px; }
		.content-element ul { margin: 0 0 0 20px; list-style: none; }
		.content-element ul li { background: 0 7px no-repeat url(../images/ce-ul-bullet.gif); margin: 6px 0; padding: 0 0 0 12px; }
		#content p { margin: 0 16px 16px 16px; }
		#content a { color: #808169; }
		div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-firstcol { margin: 0 0 16px 16px !important; }

		div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-lastcol { margin: 0 0 16px 11px; }

.hline
{
	position: relative;
	top: -1px; /* prevent double hr lines  */
	width: 100%;
	line-height: 23px;
	background: bottom left repeat-x url(../images/primel_h1.gif);
	font-size: 11px;
	color: #808169;
	clear: both;
}
.rootline { display: inline; margin: 0 0 0 16px; background: #fff; }
.comfort-print { position: absolute; width: 82px; text-align: center; top: 0; right: 82px; }
.comfort-totop { position: absolute; width: 82px; text-align: center; top: 0; right: 0; }
#projects .comfort-print a,
#projects .comfort-totop a { color: #FF00aa; text-decoration: none; }
#agency .comfort-print a,
#agency .comfort-totop a { color: #e4a900; text-decoration: none; }

#projects .comfort-print a:hover,
#projects .comfort-totop a:hover,
#agency .comfort-print a:hover,
#agency .comfort-totop a:hover { color: #808169 !important; text-decoration: underline !important; }

#projects #content a:hover	{ color: #ff00cc; }
#agency #content a:hover	{ color: #e4a900; }

#footer
{
	position: absolute;
	bottom: 1px;
	width: 100%;
	height: 155px;
	background: #b5b6a8;
}
	#footerlinks
	{
		position: relative;
		width: 777px;
		height: 156px;
		margin: 0 auto;
		background: top right no-repeat url(../images/footer_bg.gif);
		color: #fff;
		font-size: 11px;
		line-height: 1.6;
	}
	#footerlinks .content-element { padding: 0; background: none; }
		#fl1
		{
			position: absolute;
			top: 0;
			left: 0;
			height: 156px;
			width: 253px;
			background: top left no-repeat url(../images/footer_bg.gif);
		}
		#fl2
		{
			position: absolute;
			top: 0;
			left: 253px;
			height: 156px;
			width: 256px;
			background: top left no-repeat url(../images/footer_bg.gif);
		}
		#fl3
		{
			position: absolute;
			top: 0;
			left: 508px;
			height: 156px;
			width: 269px;
			background: top left no-repeat url(../images/footer_bg.gif);
		}
	#footerlinks p { margin: 0; padding: 3px 0 0 0; clear: both; }
	#footerlinks em, #footerlinks i { font-style: normal; }
	#footerlinks a { color: #fff; text-decoration: none; }
	#footerlinks a:hover { color: #808169; }
	#footerlinks ul { margin: 20px 0 0 1px; padding: 0; list-style: none; }
	#footerlinks ul ul { margin: 0 0 0 0; list-style: none; }
	#footerlinks li { padding: 0 0 4px 30px; text-transform: uppercase; font-weight: bold; background: 0 3px no-repeat url(../images/primel_bullet.gif); }
	#footerlinks li li { padding: 0; text-transform: none; font-weight: normal; background: none; }
	#footerlinks li li a { color: #fff; text-decoration: underline; }
	#footerlinks .content-element ul li { margin: 0; }
	#mtness{}
#header
{
	position: absolute;
	width: 100%;
	height: 256px;
}
	#toplinks
	{
		position: relative;
		width: 777px;
		height: 256px;
		margin: 0 auto;
	}
		#logo
		{
			position: absolute;
			top: 48px;
			left: 17px;
			width: 777px;
			height: 34px;
		}
		#menu
		{
			position: absolute;
			top: 106px;
			width: 777px;
			height: 151px;
			/* background: #eee; */
		}
		
		#menu * :focus { outline: 0; }

/* menu setup */
/* ************************************************************************** */
		.inactive { z-index: 2; }
		.xactive { z-index: 3; }
		.active { z-index: 4; }
		#nav
		{
			display: inline;
			text-align: center;
			line-height: 21px;
		} 
		#nav #projekte		{ position: absolute; width: 87px; height: 38px; top: 0; left:  16px; text-align: center; background: #ff00cc; z-index: 1;}
		#nav #agentur		{ position: absolute; width: 87px; height: 22px; top: 0; left: 107px; text-align: center; background: #ffbd03; }
		#nav #kontakt		{ position: absolute; width: 87px; height: 21px; top: 0; left: 673px; text-align: center; background: #CCCDC3; }

/* preparation for possible language menu
		#nav #kontakt		{ position: absolute; width: 87px; height: 21px; top: 0; left: 642px; text-align: center; background: #CCCDC3; }
		#nav #langswitch	{ position: absolute; width: 30px; height: 21px; top: 0; left: 730px; text-align: center; background: #CCCDC3; }
 */
/* 		#agency #nav #agenturContainer {z-index: 4;}
		#projects #nav #projekteContainer {z-index: 4;}
 */
		#nav a { color: #fff; padding: 3px 4px; text-decoration: none; }
		#agency #nav a.selected		{ color: #ffbd03; background: #fff; text-decoration: none; }
		#projects #nav a.selected	{ color: #ff00cc; background: #fff; text-decoration: none; }

		#nav #agentur a		{ }
		#nav #projekte a	{ }
		#nav #kontakt a		{ }

		#nav #agentur a:hover	{ color: #ff00cc; }
		#nav #projekte a:hover	{ color: #ffbd03; }
		#nav #kontakt a:hover	{ color: #808169; }


		#nav #langswitch a	{ }

		#nav li ul
		{
			display: block;
		}
		
		#nav *:focus { outline: 0; }
		
		#agenturContainer
		{
			display: block;
			position: absolute;
			top: 22px;
			left: 0;
			width: 728px;
			height: 99px;
			padding: 7px 16px 7px 16px;
			line-height: 0;
			text-align: left;
			background: #ffbd03;
		}
		#projekteContainer
		{
			display: block;
			position: absolute;
			top: 38px;
			left: 16px;
			width: 728px;
			height: 99px;
			padding: 7px 16px 7px 16px;
			line-height: 0;
			text-align: left;
			background: #ff00cc;
			z-index: 1;
		}
		#agenturContainer ul,
		#agenturContainer2 ul,
		#projekteContainer ul { list-style: none; display: inline; position: relative; top: -6px; left: 0; }
		#agenturContainer li,
		#agenturContainer2 li,
		#projekteContainer li { display: inline-block; }
		#agenturContainer li a,
		#agenturContainer2 li a,
		#projekteContainer li a { margin: 0 16px 0 4px; text-transform: uppercase; position: relative; top:0; left:0; }

		#tab_bg_projekte	{ position: absolute; display: block; top: -16px; left: -16px; width: 776px; height: 130px; background: transparent; }
		#tab_bg_agentur		{ position: absolute; display: block; top:     0; left:     0; width: 776px; height: 130px; background: transparent; }

/* specific extensions setup */
/* ************************************************************************** */

.tx-prmfelatestproject-pi1 {}
/* this setup was inspired by http://www.cssplay.co.uk/layouts/3cols2.html */
.tx-prmfelatestproject-pi1 .latest-project
{
	position:relative;
	display:block;
	margin: 0 0 1px 16px;
	border-left:84px solid #fff;
	border-right:264px solid #fff;
	overflow:visible;
	
	width: 0px;
}
.tx-prmfelatestproject-pi1 .latest-project .prj-date
{
	float:left;
	position:relative;
	width:84px;
	margin-left:-84px;
	display:inline;
}
.tx-prmfelatestproject-pi1 .latest-project .prj-link
{
	float:right;
	position:relative;
	width:264px;
	margin-right:-264px;
	display:inline;
}
.clear
{
	clear:both;
	height:1px;
	overflow:hidden;
}

/* see primel_4ie.css line 10 & 11 for ie-specific adjustments! */
/* ************************************************************************** */

#index .csc-header-date,
#projects .csc-header-date,
#agency .csc-header-date,
.content-element .csc-header-date { display: none; }
#contact .csc-header { margin: 16px 0; }
#contact iframe { margin: 0 0 16px 0; }
.contact-element
{
	position: absolute;
	top: 76px;
	left: 500px;
}
.contact-element .content-element
{
	position: relative;
	top: 0;
	width: 100%;
	padding: 0;
	background: none;
	clear: both;
}

a[title] {  }