/* ===== Default stylesheet for the FIT Web site ===== */
/* ===== Main components ===== */
/* ===== Copyright 2005 Fraunhofer FIT ===== */

/* ===== Overall page division ===== */

#page {
	padding: 0;
	margin: 0;
}

/* ========== Page Header ===================*/ 
#menuright a, .topmenu .linklist a {
	display: list-item;
	color: black;
	font-weight: bold;
	margin: 0px 1.9em;
	vertical-align: middle;
	list-style-image:url('/lenya/fit2006/live/images/pfeils.gif');
}

.topmenu .institute {
	text-align: right;
	font-weight: bold;
	padding-top: 1em;
	margin-right: .5em;
}

.topmenu .linklist a, #menuright a {
	color: white;
    	list-style-image:url('/lenya/fit2006/live/images/pfeilw.gif');
}

.linklist a.inactive, .linklist a.inactive:hover {
	color: black;
}

#menuright p, .linklist p{
	padding: 0;
	margin: 0;
}

.topmenu {
	margin: 0px;
	padding: 0px;
	/*padding-bottom: 1em;*/
	width: 45.5em;
	color: white;
	background-color: #009474;
	margin-left: 19em; /* TODO remove */
	overflow: hidden;
}

.topmenu h1 {
	color: white;
}

#menuleft {
	float: left;
	width: 15em;
	display: block;
}

#menumiddle {
	width: auto;
	margin-left: 18.3em;
	margin-right: 18.3em;
	display: block;
}

.mitte {
	width: auto;
	margin-left: 18.3em;
	margin-right: 18.3em;
	display: block;
}

#menu2cols {
	width: 25.6em;
	margin-left: 17.16em;
	display: block;
}

#menuright {
	float: right;
	width: 17em;
}

.rechtsklein {
	float: right;
	width: 17em;
}

/* ========= SERVICECOLUMN =========== */
.servicecolumn {
	overflow: hidden; /* servicecolumn must be a block formatting context */
	float: left;
	width: 18em;
}

.textbox {
	margin-bottom: 2em;
	margin-left: 1em;
	width: 16.83em;
	float: left;
	background-color: white;
}

.textbox .textbox-head {
	background-color: #a5d2d9;
	margin-bottom: 0;
	/*width: 15.83em;*/
}

.textbox p, .textbox h3 {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0 1em;
}

.textbox .textbox-head h3 {
	color: white;
}

#vignettes {
	color: white;
}

/* default bg-color for vignettes = oceanblue */
#vignettes span { background: #296478; }
/* specified bg-colors for vignettes */
#vignettes .oceanblue span { background: #44a6b8; }
#vignettes .oceanblue-wai span { background: #00768c; }
#vignettes .corporategreen-wai span { background: #009474; }
#vignettes .petrol-wai span { background: #296478; }
#vignettes .blue-wai span { background: #0162a4; }
#vignettes .brown-wai span { background: #732812; }
#vignettes .yellow-wai span { background: #ffff5c; }
#vignettes .orange span { background: #ed8000; }
#vignettes .orange-wai span { background: #a65900; }
#vignettes .maygreen span { background: #83cc0f; }
#vignettes .maygreen-wai span { background: #61970b; }
#vignettes .purple span { background: #990099; }
#vignettes .purple-wai span { background: #800080; }
#vignettes .strawberry-wai span { background: #cc0000; }
/* correct font color for yellow and orange vignettes */
#vignettes .yellow-wai, #vignettes .yellow-wai a { color: #000; }
/* linklist list item icon (white arrow) for all vignettes */
#vignettes ul.linklist li {
	background-position: left -996px;
	clear: none;
	list-style: none;
	margin: 0;
	padding-left: 14px;
}
/* linklist list item icon (black arrow) for yellow vignette */
#vignettes .yellow-wai ul.linklist li { background-position: left -796px; }

div#vignettes {
	margin-bottom:1.6em;
	overflow:visible;
	position:relative;
	width:14.615em;
	z-index:1000;
}

#vignettes .vignette {
	margin-bottom:1em;
	min-height:17.462em;
	overflow:hidden;
	padding:1.846em 0 0.923em;
	position:relative;
	z-index:1000;
}

#vignettes .first {
	left:1.8em;
}

#vignettes .second {
	left:-0.6em;
	margin-bottom:-1.23em;
	top:-2.461em;
}

#vignettes .top {
	z-index:2000;
}

#vignettes .top span {
	opacity:0.9;
	filter: alpha(opacity=90);
}

#vignettes .bottom span {
	opacity:0.7;
	filter: alpha(opacity=70);
}

v\: * {
	behavior: url(#default#VML);
	display: inline-block;
	height: 98% !important;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

#vignettes .top canvas {
	opacity:0.8;
}
#vignettes .bottom canvas {
	opacity:0.5;
}

#nav span, #vignettes span, #vignettes canvas, #nav canvas {
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:0;
}

#vignettes h3, #vignettes blockquote, #vignettes p, #vignettes ul {
	line-height:1.2;
	padding:0 0.923em;
	position:relative;
	z-index:100;
}

#vignettes h3 {
	font-weight:bold;
	margin-bottom:0.923em;
}

#vignettes .top span {
	opacity:0.9;
}

#vignettes .bottom span {
	opacity:0.7;
}
/* ========== CONTENTBLOCK =========== */
.contentblock {
	overflow: hidden; /* contentblock must be a block formatting context */
	background-color: white;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: .5em;
	padding-bottom: .5em;
	padding-left: .5em;
	padding-right: .5em;
	display: block;
	width: 44.5em;
	margin-left: 19em; /* TODO remove */
}

.contentblock .intro {
	font-weight: bold;
}

.contentblock dl {
	max-width: 182px;
	float: left;
	display: block;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 0;
}

.contentblock p {
	color: #555555;
}

.contentblock p a {
	display: inline;
	color: #555555; 
	padding: 0px;
}

.context {
	background-color: #a5d2d9;
	color: black;
}

.context h2, .context h3, .context h4, .context h5 {
	color: white;
}

.context p {
	color: black;
}

.contentblock dd {
	color: #555555;
	font-weight: bold;
	margin-left: 0;
}

/* the classes ".links" and ".rechts" are deprecated */
/* TODO remove links and rechts above */
.contentblock .links h2 {
	font-size: 1em;
	max-width: auto;
	width: auto;
}

.contentblock .links {
	float: left;
	width: 15em;
	display: block;
	padding: 0;
	margin: 0;
}

.contentblock .rechts {
	width: auto;
	margin-left: 17.16em;
	display: block;
}
/* TODO remove links and rechts above */

.contentblock:after, .topmenu:after, .clearcols:after, .servicecolumn:after, .contentcolumn:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	position: relative;
}

.contentblock a {
	color: black;
}

ul.linklist {
	padding: 0;
	margin: 0;
}

ul.linklist li {
	margin: 0;
	list-style-position:outside;
	list-style: none;
}

.contentblock .linklist a, .contentblock ul li a {
	display: list-item;
	color: black;
	margin: 0px 1.9em;
	padding: 0px;
	vertical-align: middle;
	list-style-image:url('/lenya/fit2006/live/images/pfeils.gif');
}

.vignette a {
	display: list-item;
	color: white;
	vertical-align: middle;
	list-style-image:url('/lenya/fit2006/live/images/pfeilw.gif');
}

.contentblock span.pfeil a {
	display: list-item;
	/*vertical-align: middle;*/
	color: gray;
	margin: 0px 1.9em;
	list-style-image:url('/lenya/fit2006/live/images/pfeils.gif');
}


/* indented links */
.rechtsblock {
	margin-top: .5em;
	padding-bottom: .5em;
}


/* ===== Footer ===== */
#footer {
	margin: 0;
	padding: 0;
	width: 100%;
	clear: both;
}



/* ===== Navigation bar ===== */
#navbar {
	width: 15.83em;
	margin: 0;
	padding: 0;
	margin-top: 1.67em;
	float: left;
	margin-left: 3.4em;
}

#navbar ul {
	margin: 0;
	padding: 0;
}

#navbar li.active, #navbar li.unfoldable {
	font-weight: normal;
}

#navbar li.inactive, #navbar li.unfolded {
	font-weight: bold;
}

#navbar a {
	padding: 0;
	margin: 0;
	color: black;
	text-decoration: none;
	display: list-item;
	vertical-align: middle;
}

/* top level navigation elements */
#navbar ul li ul li {
	background-color: white;
	padding: 0;
	margin-left: 0;
	margin-top: 0.25em;
}

#navbar ul li ul li.inactive, #navbar ul li ul li a:hover {
	color: white;
	background-color: #009474;
}

#navbar ul li ul li .navlabel {
	padding: 0;
	padding-left: 0.83em;
	display: block;
}

#navbar ul li ul li ul li {
	margin: 0;
	padding: 0;
	padding-top: 0.25em;
}

#navbar ul li ul li ul li a:hover {
	color: black;
	background-color: white;
	text-decoration: underline;
}

#navbar ul li ul li ul li div.navlabel {
	margin: 0;
	padding: 0;
	padding-left: 1.66em;
}

#navbar ul li ul li ul li ul li {
	background-color: #cce9e3;
	margin: 0;
	padding: 0;
	padding-top: 0.25em;
}

#navbar ul li ul li ul li ul li div.navlabel {
	margin: 0;
	padding: 0;
	padding-left: 2.49em;
}

#navbar ul li ul li ul li ul li a:hover {
	background-color: #cce9e3;
}

#navbar ul li ul li ul li ul li ul li {
	background-color: #ebf6f4;
	margin: 0;
	padding: 0;
	padding-top: 0.25em;
}

#navbar ul li ul li ul li ul li ul li div.navlabel {
	margin: 0;
	padding: 0;
	padding-left: 3.32em;
}

#navbar ul li ul li ul li ul li ul li a:hover {
	background-color: #ebf6f4;
}

/* service menu */
#navbar #sitemenu {
	width: auto;
	text-decoration: none;
	margin-top: 9.3em;
}

#navbar #sitemenu div.navbutton {
	width: 100%;
	background-color: white;
	padding: 0;
	margin: 0;
	margin-top: 0.25em;
	color: gray;
}

#navbar #sitemenu a.navbutton {
	display: block;
	color: black;
	padding: 0;
	margin: 0;
	font-weight: normal;
}

#navbar #sitemenu div.navbutton span {
	padding-left: 0.83em;
}
	
#navbar #sitemenu a.navbutton:hover {
	color: white;
	background-color: #009474;
}
/* TODO */

#navbar li {
	font-size : 12px;
	font-family : Arial, Helvetica, Geneva, sans-serif;
	list-style: none;
	list-style-image: none;
}


#navbar li.mainnavnode {
	background-color: white;
	font-weight: normal;
  }

#navbar li.mainnavnode a {
	padding-left: 0.83em;
}

#navbar li.mainnavnode a:hover {
	color: white;
	background-color: #009474;
}  
	
#navbar li.navbarlogo {
	margin: 0;
	margin-bottom: 1.1em;
}



/* ===== Wrappers and content ===== */
#container {
	padding: 0;
	margin: 0;
	/*width: 100%;*/
	width: 70em;
	float: left;
}

#content {
	margin: 0;
	margin-top: 2.83em;
	padding: 0;
	background-color: #e9edeb;
	background-image:url('/lenya/fit2006/live/images/background.png');
	background-repeat: no-repeat;
	/*height: 100%;*/
	width: 85em;
	float:left;
}

#main {
	width: 61em;
	margin: 0 auto 0 20em;
	left: 22em;
}

/* ===== Body ===== */
#body {
	padding:0;
	margin:0;
	width: 83em;
}

/* ===== Breadcrumb ===== */
#breadcrumb {
	font-family: Arial, Sans-serif;
	font-size: 11px;
	margin: 0;
	margin-left: 19em;
	height: 2.90em;
}

#breadcrumb a {
	margin-top: 0.58em;
	text-decoration: none;
	color: gray;
}

#breadcrumb a:hover {
	text-decoration: underline;
	color: gray;
}

.skiplink {
	position: absolute;
	top: -1000px;
	left: -1000px;
}
/* show skiplinks if focused, e.g. when stepping throug the navigation w/ TAB*/
.skiplink:active,
.skiplink:focus
{
	position: absolute;
	top: -9em;
	left: 1.3em;
	border: 1px solid gray;
	background-color: lightgray;
	font-weight: bold;
	color: red;
	list-style: none;
}

/* ===== Special classes ===== */

/* Workaround for escaping floats bug IE 5/6/7 */
#navbar ul li, .contentblock, .rechts, .topmenu, #menumiddle, #menu2cols, .rechts, .rechtsklein, .mitte, .rechtsblock, .active, .inactive, .unfoldable, .unfolded, .textbox, .textbox-head{
	height: 1%;
}

/* the imagemap styles are used for the "usability services navigator" */
a.imagemap {
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: -1000px;
	position: absolute;
}

a.imagemap:hover {
	background-position: 0;
	background-color: transparent;
}

#usabilitynavigator {
	background-color: #e9edeb;
}