/*                                                                 
   Because IE MAC seems to ignore class name differences after the 
   6th letter (e.g. get confused by "module" and "moduleFilter" we 
   need to establish a naming scheme for classes:                  
                                                                   
   mdXyz: a style for a a:r module named arXyz                     
   md_xyz: a style for a function used in several modules. "xyz"   
     tells us what this style is being used for, e.g. "md_filter"  
                                                                 */

/*                                                */
/* tags                                           */
/*                                                */

BODY, TD, DIV, UL, A {
	font: normal 11px Georgia, Verdana, Arial, Helvetica, sans-serif;
	color: #666;
}
BODY {
	margin: 0;
	padding: 0;
	background-color: #c5c6c7;
	background-image: url(../img/bg.gif);
	background-repeat: repeat-x;
}
A { 
	font-weight: bold;
	text-decoration: none;
	color: #666;
	font-size: inherit;
}
A:hover { text-decoration: underline; }

IMG { border: none; }

/*                                                */
/* forms                                          */
/*                                                */
FORM { display: inline; margin: 0px; }
INPUT, SELECT, TEXTAREA {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
	color: #666;
	margin-bottom: 2px;
	margin-right: 12px; /* used in mdMailForm */
}
INPUT.radio { vertical-align: middle; }
HR {
	background: #743958;
	color: #743958;
	border: none;
	height: 1px;
}

/* standard form fields for content, real widths are "width"+ border */
.formS, .formM, .formN, .formL, formXL
{ padding: 2px; } /* IE adds padding to width, so we remove padding here */
/*.formS { width: 58px; }*/
/*.formM { width: 117px; }*/
.formN { width: 229px; }
.formL { width: 478px; }





/*                                                */
/* main layout classes                            */
/*                                                */

/* menu, left column with levels 1+2                   */
DIV#menuL12 { position: fixed; left: 15px; top: 20px; }
DIV#menuL3 { position: fixed; left: 193px; top: 20px; }
DIV#menuL4 {
	position: absolute;
	left: 174px;
	top: 549px;
	width: 183px;
	min-height: 150px;
	padding-left: 13px; /* this menu also exists with a left-border, so we need 12+1px pad here */
}

DIV#menuL5 {
	position: fixed;
	left: 853px;
	top: 167px;
	padding-left: 12px;
}


/* the logo                                       */
DIV#logo { position: fixed; left: 17px; top: 448px; }
/* pngfix                                       */
* html DIV#logo img {
	behavior: url("css/iepngfix.htc");
}
/* IE-Fixes for position: fixed */
* html DIV#menuL12, 
* html DIV#menuL3,
* html DIV#menuL5,
* html DIV#logo
{ position: absolute;} 


/* the main content area, doing the positioning   */
DIV#cont {
	position: absolute; 
	left: 342px;
	top: 165px;
	width: 512px;
	text-align: left;
	padding-bottom: 70px;
}
DIV#cont A {
	font-weight: normal;
	text-decoration: underline;
}

/* transparent images in content area (IE)   */
* html DIV#cont img {
	behavior: url("css/iepngfix.htc");
}

/* margin supercontainer                          */
DIV#margin {
	position: absolute; 
	left: 853px;
	top: 165px;
	width: 230px;
	text-align: left;
	z-index: 10;
}

/* date container                          */
DIV#date {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
	font-weight: bold;
	position: absolute; 
	left: 853px;
	top: 20px;
	width: 216px;
	padding: 0 0 0 13px;
	margin: 0;
}

/* a variant of cont for list aspect              */
DIV.list { width: 747px; /*background: #fca;*/ }


/* startpage gallery                              */


/*DIV.startGal {
  position: absolute; 
  left: 219px;
  top: 109px;
  width: 634px;
  height: 469px;
}*/

DIV.startGal {
  position: absolute; 
  left: 0px;
  top: 0px;
  width: 1072px;
  height: 578px;
  text-align: center;
}

DIV.startGal IMG { 
/*  display: block; */
}

DIV.startGal DIV#loading {
	width: 1072px;
	height: 578px;
	background: url(../img/loading.gif) no-repeat 50% 50%;
}

/*                                                */
/* project page                                   */
/*                                                */

/* project gallery                                */
div#projGal {
	position: absolute; 
	left: 0px;
	top: 0px;
	width: 1026px; /* this is modified for boxed layouts */
	text-align: center;
}

div#projGal div#loading {
  width: 1026px;
	height: 469px;
	background: url(../img/loading.gif) no-repeat 55% 60%;
}

div#projGal #stage #flashbox{
  width: 511px;
  height: 287px;
  position: absolute;
  left: 343px;
  top: 217px;
}

div#projInfo a#videolink {
  position: absolute;
  width: 35px;
  height: 35px;
  left: 456px;
}
div#projInfo a#videotextlink {
  position: absolute;
  width: 75px;
  height: 35px;
  left: 378px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-weight: bold;
	margin-top: 1px;
}

/* project infos (text and thumbnails            */
DIV#projInfo, DIV#projContext {
	position: absolute;
	top: 549px;
	min-height: 150px;
	border-left: 1px solid #e5e5e5;
	padding-left: 12px;
}
div#projInfo.boxed, div#projContext.boxed {
	padding-top: 12px;
	top:537px;
	height: 150px;
	overflow:hidden;
}
DIV#projInfo, DIV#projInfo A, DIV#projContext A, DIV#projText {
	font: 11px Georgia, Arial, Helvetica, sans-serif;
	/* font: 11px Arial, Helvetica, sans-serif; */
	line-height: 15px;
}
DIV#projInfo { left: 343px; width: 486px; padding-right: 12px; }
DIV#projInfo H1 {
	margin-top: 13px;
	margin-bottom: 5px;
	font: 11px Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}
DIV#projInfo A {
	text-decoration: underline;
}
DIV#projText { margin-top: 10px; width:340px;}
DIV#projContext { left: 853px; }
DIV#projContext A { color: #666; font-weight: bold; }
DIV#projContext A:hover { color: #000; text-decoration: none; }
DIV.projMenuL4 { padding-left: 12px; border-left: 1px solid #e5e5e5; }
DIV#menuL4.boxed { border:0; }

/* Project info with box around it                 */
div#boxedMenu{
	position: absolute;
	left: 174px;
	top: 537px;
	width: 847px;
	height: 162px;

	background-color: #c9cbcb;
	opacity:0.8;
	-moz-opacity:0.8;
	filter:alpha(opacity=80);
}



/*                                                */
/* main layout context classes                    */
/*                                                */

/*                                                */
/* menu context classes                           */
DIV.menuItem A { font: bold 12px Arial, Helvetica, sans-serif; color: #868686; }
DIV.menuItem.active A { color: #000 !important; }

DIV.menuItem A.active,
DIV.menuItem A:hover { color: #000 !important; text-decoration: none; }

DIV.menuL2 { /*height: 0;*/ overflow: hidden; }
DIV.menuL2 DIV.menuItem { width: 170px; padding-left: 13px; } /* width is necessary for blinddown, jumps otherwise */
DIV.menuL2 DIV.menuItem.active A { color: #000; }
DIV.menuL2 DIV.menuItem.last { padding-bottom: 1em; }
DIV#menuL4 DIV.menuItem A,
DIV#menuL5 DIV.menuItem A { font-size: 11px; color: #666; }
DIV#menuL3 DIV.menuItem DIV.menuItem A { color: #868686 !important; }
DIV#menuL3 DIV.menuItem DIV.menuItem { padding-left: 13px; }
DIV#menuL3 DIV.menuItem DIV.active A { color:#000 !important; }
DIV#menuL3 DIV.menuItem DIV.last { padding-bottom: 1em;}

/*                                                   */
/* the modules container giving borders and paddings */
DIV.modules {
	position: relative;
	min-height: 450px;
	padding-bottom: 50px;
	/*background-color: #eef;*/
}
/* margin has no min height and border-right */
DIV#margin DIV.modules { min-height: 1px; border-right: none; border-left: none; }

/* modules container in stdLineVert Ratios */
DIV.lineVertical DIV.modules {
	border-left: 1px solid #fbfcfc;
	border-right: 1px solid #fbfcfc;
}
/* modules container in stdLineHoriz Ratios          
   The top line of this container must be 6px        
   less wide on each side, compared to lineVertical, 
	 for design reasons. So we add 6px (+1px for the   
	 missing border) margin here, and remove 6px       
	 padding in DIV.module, so that even though we     
	 reduce the modules's container width, the content 
	 width inside is still the same. That way we are   
	 able to reuse all modules.                      */
DIV.lineHorizontal DIV.modules {
	margin-left: 7px;
	margin-right: 7px;
	padding-top: 10px;
	border-top: 1px solid #dadada;
}

/*                                                   */
/* the margin container, giving borders and paddings */
DIV.margin {
	position: absolute;
	left: 510px;
	top: 0px;
	background-color: #ffe;
}
/* margin container in stdLineVert Ratios */
DIV.lineVertical DIV.margin {}
/* margin container in stdLineHoriz Ratios */
DIV.lineHorizontal DIV.margin { padding-left: 12px; }

/*                                                */
/* the footer at the bottom of the modules        */
DIV.footer {
	position: relative;
	margin-bottom: 50px;
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #696969;
	/*background-color : #0000ff;*/
}
/* the footer container in stdLineHoriz Ratios */
DIV.lineHorizontal DIV.footer {
	margin-left: 7px; /* see div.modules */
	margin-right: 7px;
	padding-left: 6px;
	padding-top: 12px;
	border-top: 1px solid #e3e3e5;
}
/* the footer container in stdLineVert Ratios */
DIV.lineVertical DIV.footer {
	border-left: 1px solid #fbfcfc;
	border-right: 1px solid #fbfcfc;
	padding-left: 12px;
}

DIV.list DIV.footer {
	padding-left: 0;
	padding-top: 50px;
}


/*                                                */
/* list aspect classes                            */


/* CHECK WIDTHS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */


/* list line containers */
DIV.listHeader, DIV.listRowT, DIV.listRowInact {
  position: relative;
	left: 7px;
	width: 745px;
	overflow: hidden;
}
DIV.listHeader {
	margin-top: 16px;
	background-color: transparent;
}
DIV.listRowT { cursor: pointer; }

/* list columns */
DIV.col1, DIV.col2, DIV.col3 {
	/* background color see also JS definition invertRow() */
	color: #666;
	padding: 0px 6px 1px 6px;
	width: 223px;
	line-height: 16px;
	border-bottom: 1px solid #F9F9F9;
}
DIV.listHeader DIV.col1,
DIV.listHeader DIV.col2,
DIV.listHeader DIV.col3 {
	color: #000;
	font: 11px Arial, Helvetica, sans-serif;
}

DIV.col1 { position: relative; }
DIV.col2 { position: absolute; left: 255px; top: 0; }
DIV.col3 {
	position: absolute;
	left: 510px;
	top: 0;
}
/* this keeps the height of the line, even though we use a smaller font here */
DIV.col3 SPAN { font: 9px Arial, Helvetica, sans-serif; font-weight: bold; }







/*                                                */
/* module classes used in several modules         */
/*                                                */

/* module:                                                      
   Put floating content (e.g. text) into a div inside this div, 
   because then the IE width/padding problem does not apply!    
	 The resulting content width is 486px                       */
DIV.module { padding: 0 0 27px 12px; /*background: #dde;*/ }

/* lineVertical: width = cont.width - 2px border - module.paddingleft */
DIV.lineVertical DIV.module { width: 498px; }
/* module: width = cont.width - modules.margin - module.paddingleft   
/* In stdLineHoriz Ratios a margin is added to "modules" to reduce the
   top line's width by 2*6px. So here the padding-l is reduced by 6px 
	 to keep the content size constant.                               */
DIV.lineHorizontal DIV.module { width: 492px; padding-left: 6px; }

/* headlines inside modules                      */
DIV.module H1,
DIV.module H2 {
	margin-top: 2px;
	margin-bottom: 5px;
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #000;
}
DIV.module H2 { margin-bottom: 0; color: #666; }

/* clear floats */
BR.clear { clear: both; }


/*                                                */
/* module specific classes                        */
/*                                                */

/* mdTitle only consists of a headline                   */
DIV.mdTitle { padding-bottom: 0px; }

/* the single text column in mdText               */
DIV.mdText DIV.colL {
	width: 340px;
	line-height: 15px;
	/*background: #aaa;*/
}

/* md3Col: three div columns                      */
DIV.mdText3Col DIV {
	float: left;
	width: 152px;
	padding-right: 12px;
	line-height: 15px;
}
DIV.mdText3Col DIV A { text-decoration: none !important; }
DIV.mdText3Col DIV A:hover { text-decoration: underline !important; }

/* mdImg: 1 column with only image                */
DIV.lineHorizontal DIV.mdImg,
DIV.lineVertical DIV.mdImg { padding-bottom: 15px; } /* see .module for the desired padding-bottom and substract the margin-bottom of IMG to get this value */
/* images in mdImg need some margin below */
DIV.mdImg IMG {
	display: block;
	margin-bottom: 12px;
}

/* mdTextImg2Col: 1 or 2 img columns, 2 text cols */
DIV.mdTextImg2Col {	 }
DIV.mdTextImg2Col IMG { margin-top: 2px; margin-bottom: 13px; }
DIV.mdTextImg2Col DIV.colL {
	float: left;
	width: 237px;
	line-height: 15px;
}
DIV.mdTextImg2Col DIV.colR {
	float: left;
	width: 237px;
	margin-left: 12px;
	line-height: 15px;
}
DIV.mdTextImg2Col IMG { display: block; }

/* mdImg2Col: two colums with images, horiz. lines in between */
DIV.mdImg2Col { width: 498px !important; padding-left: 0 !important; }
DIV.mdImg2Col TABLE {}
DIV.mdImg2Col TD {
	/* desired width = 243 (= 512 - 2 (border) - 2*6 (modules.margin) - 12 (td.margin) / 2 ) so width = 243 - 2*6 px padding */
	width: 231px;
	border-top: 1px solid #f6f6f6;
	padding: 12px 6px;
}
DIV.mdImg2Col TD.mrg { width: 12px; border-top: none; }
DIV.mdImg2Col TD.last { border-bottom: 1px solid #f6f6f6; }


/* mdPortrait: an image with words on the right    */
/* works only with lineHoriz (width of cont 504)  */
/* has a different bottom padding to bring images nearer together */
DIV.mdPortrait { padding-top: 6px; padding-bottom: 6px; }
DIV.mdPortrait A.anchor {	position: relative; top: -9px; text-decoration: none !important; } /* misplacing the anchor targets */

DIV.mdPortrait TD { vertical-align: bottom; text-align: left; }
TABLE.mdPortrait TD IMG {
	display: block;
	margin-right: 12px;
}
DIV.mdPortrait TD.info {
	/* width: 146px; this leaves 6px margin right (but we solved this with padding here */
	padding-right: 12px;
	font: 11px Arial, Helvetica, sans-serif;
}

/* mdNews (only for margin)                   */
DIV.mdNews { line-height: 15px; padding-bottom: 14px; margin-bottom: 14px; }
DIV.mdNews A { font-weight: normal; text-decoration: underline; }
DIV.lineVertical DIV.mdNews { width: 216px; }
DIV.lineHorizontal DIV.mdNews { width: 210px; border-bottom: 1px solid #dadada; }
DIV.mdNews IMG { padding-bottom: 6px; }
DIV.mdNews H2 { margin-bottom: 5px; }
DIV.mdNews H2 A {	font-family: Arial,Helvetica,sans-serif; font-weight: bold; }


/* mdMailForm                                     */
DIV.mdMailForm TD {
	padding-bottom: 3px;
	font: bold 11px Arial, Helvetica, sans-serif;
}

DIV.mdMailForm TD.label {
	padding-top: 4px;
}