/*                                                                 
   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 {
  font-family:"Verdana",sans-serif;
  font-size:11px;
  line-height: 15px;
}
a {
	text-decoration: none;
}
a.more {
	color: #676767;
	border-bottom: none !important;
	background: url(../img/moreArrow.gif) 100% 80% no-repeat;
	padding-right: 10px;
}
a.more:hover {
  border-bottom:none !important;
  text-decoration:underline;
}

img {
  border:0;
}

UL {
	list-style-type: square;
	list-style-image: url(../img/bullet.gif);
	margin-top: 0;
	margin-left: 15px;
	margin-bottom: 5px;
	padding-left: 0;
	text-indent: 0;
	line-height: 155%;
}


/*                                                */
/* forms                                          */
/*                                                */
FORM { display: inline; margin: 0px; }

/*
   Using a three column layout the following field sizes result:
	                                                      
   |1|10|  168   |17|  168   |17|  168  |  11| = 566px
	 |1|          table 555                 |10| 10 is "automatic" padding              
   |1|10 formfd  7|10 formfd 7|10 formfd 7|
	 formfd = 168 (164input+4border) + 10+7 padding = 185
*/

INPUT, SELECT, TEXTAREA {
	width: 164px;
	padding: 2px 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	margin-bottom: 2px;
	background-color: #fff;
	border-width: 2px;
}

/* standard form fields for content, real widths are "width"+ border */
.formS, .formM, .formN, .formL, formXL
{ padding: 2px 0px; } /* IE adds padding to width, so we remove padding here */
.formS { width: 48px; }
.formM { width: 112px; }
.formN { width: 164px; }
/* .formL { width: 440px; } */
INPUT.radio { vertical-align: middle; }



/*                                                */
/* main layout classes                            */
/* lh = large header version (magazine)           */
/* sh = small header version (all other nodes)    */

/* date for large head                            */
#currentDate {
  position: absolute;
	top: 45px;
	left: 27px;
}

/* miniLogo for small head                        */
#miniLogo { position: absolute; top: 8px; left: 24px; }
/* pngfix for the logo                          */
* html DIV#miniLogo img { behavior: url("css/iepngfix.htc"); }


/* menu                                     */

/* a menu block with line on the left */
#menu div {
	width: 128px;
	height: 64px;
	margin-bottom: 18px;
	float: left;
	padding-left: 7px;
	border-left: 1px dotted #333333;
	overflow: hidden;
}
* html #menu div {
	background: url(../img/dottedLine.gif) repeat-y;
	padding-left: 8px;
	border: 0;
}
#menu div:hover { background-color: #efefef; }


/* search and language link                       */
div#metaNav {
	position: absolute; 
	top: 248px;
	left: 18px;
}
#seaField { width: 136px; float: left; margin-right: 8px; }
#seaField fieldset { margin: 0; padding: 0; border: 0; }
#seaField input { width: 122px; font-size: 10px; }
.english { font-size: 9px; text-decoration: none; }


/* feature and banner area                        */
#adbox { /* see: "Ad-Spaces"-Section */
  position: absolute;
	top: 328px;
	left: 18px;
}

/* main content area                              */
#content {
	position: absolute;
	top: 0px;
	left: 330px;
	width: 566px;
	background-color: #efefef;
	overflow: hidden;
}


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

/* common navigation definitions            */
.navigation {
	/* see: "menu styles"-Section */
	position: absolute;
	top: 78px;
	left: 18px;
	width: 272px;
}
.navigation a {
	line-height: 16px;
	color: #000;
}
.navigation a:active,
.navigation a.active {
	padding-left: 8px;
	color: #cb022e;
}
.navigation a:hover { color: #cb022e; }


/* feature bar                                    */
#feature { width: 128px; margin-right: 8px; float: left; }
#feature .banner { margin-bottom: 10px; }
#feature .banner a { text-decoration: none; color: #676767; }
#feature .banner a:hover { color: #cb022e; }
#feature .banner img { margin-bottom: 4px; border: none; }


/* skyscraper banner                              */
.bannerSky { width: 160px; float: left; overflow: hidden; }

/* skyscraper on right side */
#bannerSky2 {
	width: 120px;
	height: 600px;
	position: absolute;
	top: 10px;
	left: 908px;
}

/* contains the horizontal banner iframe */
#bannerDiv {
 	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 120px;
	background-color: white;
	border-top: 3px solid black; 
	z-index: 1;
}
#bannerIFrame {
	width: 100%; height: 120px; background-color: transparent;
}

/* used in adframe.php only */
TABLE.bannerImageContainer {
	position: relative;
	top: 3px;
	width: 100%;
}
TABLE.bannerImageContainer TD {
	height: 90px;
	vertical-align: middle;
	text-align: center;
}

/* header context classes                         */

/* the top box of header w/image */
#header { color: #fff; }
#header.large { height: 327px; }
#header.banner { height: 65px; }

/* logo in the large header */
#logo { position: absolute; top: 21px; left: 15px; }
/* pngfix for the logo                          */
* html DIV#logo img { behavior: url("css/iepngfix.htc"); }


/* small header date */
#headerDate {
	position: absolute;
	left: 12px;
	top: 45px;
	margin: 0;
	font-weight: bolder;
}

/* text header made with a table */
/* idltflt stands for: I don't like tables for layout, too.
   If you know about a way to bottom-align                 
	 this headline regardless of the amount of text          
	 let me know about it <coenen@meso.net>                */
#idltflt,
#idltflt tbody,
#idltflt tr,
#idltflt td {
	height: 310px;
	width: 10px;
	margin: 1px;
	padding: 0;
	border: 0;
	left: 0;
	top: 0;
}
#idltflt td h3 {
	position: relative;
	left: 8px;
	margin: 0;
	color: #fff;
	font-family: "Arial","Helvetica",sans;
	font-size: 45px;
	font-weight: normal;
	line-height: 47px;
	text-transform: lowercase;
	letter-spacing: 0.02em;
}


/* subheader: red box below image */
h2.subheader {
	position: relative;
	width: 255px;
	margin: 0;
	margin-bottom: 40px;
	padding: 13px 12px;
	background-color: #d40017;
	color: #fff;
	font-size: 11px;
	font-weight: normal;
	line-height: 14px;
}
* html h2.subheader { width: 279px; w\idth: 255px; /* IE5/6 */ }
h2.subheader a#upOneLevel {
	display: block;
	position: absolute;
	left: 225px;
	top: 0;
	width: 54px;
	height: 39px;
	background: url(../img/up.gif) no-repeat center;
}


/*                                                */
/* w3 aspects                                     */
/* we have so many in this project so we need     */
/* an extra css-comment container for them ;-)    */
/*                                                */

/* basic definitions for content aspects          */
#elements, .elements, #seaRes {
  background: url(../img/dottedLine.gif) repeat-y;
  width:100%;
	height:100%;
	padding-bottom: 100px;
	padding-left: 1px;
	width: 565px;
}

/* issue toc (table of content)                  */
/* puts its output into elements as a container  */
.issueToc { margin-left: 10px; width: 546px; }
.issueToc h3 { margin-top: 10px; margin-bottom: 0; }
.issueToc h2,
.issueToc h3
{ font-size: 11px; font-weight: bold; border: 0; }
/* issue toc entry (detail page)                 */
.issueTocEntry {
	margin-left: 10px;
	margin-bottom: 15px;
	width: 361px;
}
.issueTocEntry h3
{ font-size: 11px; font-weight: bold; border: 0; }

/* seaRes search result aspect                    */
#seaRes { padding-left: 9px; width: 549px; }
#seaRes h2 { font-size: 11px; margin-top: 20px; margin-bottom: 5px; }
#seaRes p { margin-top: 0; margin-bottom: 5px; }

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

.module { margin-bottom: 21px; }

/* in a list (maybe without images) use this version */
.compact { margin-bottom: 1em; }

/* general layout for figures (that is an image with a caption or similar. will be used in mdTextImg and mdImgText) */
.figure { padding-bottom: 14px; }
.figure img { display: block; border: 0; }
.figure p.caption { margin: 3px 0 0 0; padding-right: 5px; }

/* error message in a form */
div.formError { border: 5px solid #d40017; padding: 10px; }


/*                                                */
/* modules                                        */
/*                                                */

/*
	 In the content area we have a width of 566px
	 177*3+17*2 + 1px dotted line 
	 For the modules there are 565px available.       
	 Left image columns are 371px wide, text columns
	 only have 361px width, with 9px padding on the left.
	 Between both columns is a margin of 17px.
	 The right column is 177px wide starting at the
	 right border of elements. Text columns on the
	 right are only 174px wide because they need padding
	 on the right.
	 
	 Text columns:
	 border | padding | colL | margin | colR | pad.|
	 1      | 9       | 362  | 17     |  172 | 5   |
	 
	 Image Columns:
	 border | colL           | margin | colR       |
	 1      | 371            | 17     |  177       |
*/


/* mdTextText: two column text module             */
.mdTextText {
	background-image: url(../img/dottedLine.gif);
	background-position: 378px 0;
	background-repeat: repeat-y;
	padding-left: 9px;
	width: 565px;
}
.mdTextText h2,
.mdTextText h3,
.mdTextText h4 { font-size: 11px; margin: 0; color: #333; }
.mdTextText DIV.colL { float: left; width: 362px; }
.mdTextText DIV.colR { float: left; width: 172px; margin-left: 17px; }


/* mdTextImg                                      */
.mdTextImg { width: 565px; }
.mdTextImg .img { float: right; width: 177px;  }
.mdTextImg .text { width: 362px; margin-left: 9px; }
.mdTextImg h2 {
	margin-top: 0;
	margin-bottom: 7px;
	padding-top: 0px;
	font-size: 11px;
	color: #333;
}


/* mdImgText                                      */
.mdImgText { width: 565px; }
.mdImgText .img { width: 177px; float: left; }
.mdImgText .text { float: left; width: 366px; margin-left: 17px; } /* text margin right 5px (371-5=366) */
.mdImgText h2 { margin: 0; font-size: 11px; color: #333; }
.mdImgText p.excerpt { margin: 0; margin-bottom: 1em; color: #676767; }
.mdImgText p.caption { padding-left: 5px; }

/* mdFile                   */
.mdFile { width: 360px; margin-left: 9px; }
.mdFile h2 { font-size: 11px; margin: 0; color: #333; }
#content .mdFile a { color: #000; }

/* mdTextImg2Col                                  */
/* | 9 | 265 | 17 | 265 | 9 |                     */
.mdTextImg2Col { width: 565px; padding-left: 9px; }
.mdTextImg2Col .colL {
	float: left;
	width: 265px;
}
.mdTextImg2Col .colL IMG {
	position: relative;
	left: -9px;
}
.mdTextImg2Col .colR {
	float: left;
	width: 265px;
	margin-left: 17px;
}

.mdTextImg2Col h2 {
	margin: 18px 0;
	font-size: 11px;
	color: #333;
}
#content .mdTextImg2Col a { border: none; }


/* mdSubNode                                      */
.mdSubNode { width: 565px; }
.mdSubNode h2 {
	font-size: 11px;
	margin-top: 0;
	margin-bottom: 7px;
	padding-top: 0px;
}
.mdSubNode h2,
#content .mdSubNode h2 a {
	display: inline;
	text-decoration: underline;
	color: #333;
	margin-bottom: 0;
}
.mdSubNode .imgR { float: right; }
.mdSubNode .textL { width: 362px; margin-left: 9px; }
.mdSubNode .imgL { float: left;  width: 371px;  }
.mdSubNode .textR { float: left; width: 174px; margin-left: 17px; }


/* mdShortlist                                       */
/* This module exists only inside w3-aspect "shortlist"
   This aspect does not have a dotted line on the left 
	 so here we've got 1px more space! Yippieyeah!     */
.mdShortlist { width: 564px; padding-left: 2px; }
.mdShortlist .portrait,
.mdShortlist .landscape {
	padding-top: 20px;
	padding-bottom: 20px;
	background-image: url(../img/dottedLineHorizontal.gif);
	background-position: left bottom;
	background-repeat: repeat-x;
	width: 564px;
}
.mdShortlist .first { padding-top: 0; }
.mdShortlist .meta,
.mdShortlist .description,
.mdShortlist .imagecredit
{ width: 177px; margin: 0; float: right; }
.mdShortlist .meta
{ float: left; margin-right: 17px; }
.mdShortlist .imagecredit {
	color: #8a8a8a;
	padding-top: 8px;
	width: 175px;
	padding-right: 2px;
}

/* declarations for portrait image format */
.mdShortlist .portrait .description { float: left; }
.mdShortlist .portrait img { width: 177px; float: right; }
/* declaration for landscape image format */
.mdShortlist .landscape .meta { width: 369px; }
.mdShortlist .landscape .description
{ float: right; width: 175px; padding-right: 2px; }
.mdShortlist .landscape img {
	display: block;
	position: relative;
	left: -1px;
	width: 369px;
	float: left;
	margin-top: 25px;
}


/* mdAboForm: see top of this file for more form definitions */
.mdAboForm { }

/* the main form */
div.mdAboForm table { width: 561px; }
/* standard table fields for form elements */
div.mdAboForm td.formFd,
div.mdAboForm td.formFdText {
	padding: 3px 7px 7px 10px;
	vertical-align: top;
	text-align: left;
	font-size: 11px;
	color: #333;
}

/* table within table fields for grouping small fields */
div.mdAboForm td.noFd { padding: 2px 7px 7px 10px; vertical-align: top; }
div.mdAboForm td.noFd table { width: 170px; }
div.mdAboForm td.noFd td { vertical-align: middle; }
div.mdAboForm td.noFd td.formFd { padding: 1px 0 0 0; }

/* selects, radios and checkboxes */
div.mdAboForm td select { background-color: #fff; }
div.mdAboForm td input.radio,
div.mdAboForm td input.checkbox
{ padding: 0; width: auto; border: 0; background: transparent; color: Black; }
/* a list of radiobuttons */
div.mdAboForm ul.radioList { margin: 0; }
div.mdAboForm ul.radioList li {
	list-style-type: none;
	margin-left: 20px;
	text-indent: -24px;
	margin-bottom: 7px;
}


/*                                                */
/* formatting classes                             */
/*                                                */

#content a { color: #676767; }
#content a:hover { color: #cb022e; text-decoration: underline; }












   /*                                                */
/* unsorted and uncommented stuff, but may still be used ! */
   /*                                                */

/* event-list-view */
#eventsSyn td {
  vertical-align: top;
	padding:0;
}
#eventsSyn h3 {
  margin:0;
  font-size:11px;
}
#eventsSyn abbr {
  border:0;
  font-weight:bolder;
}
#eventsSyn td.data {
  width:177px;
  padding-right:15px;
}
#eventsSyn td.description {
  width:371px;
}
#eventsSyn td {
  margin:0;
  padding-top:16px;
  padding-bottom:16px;
  background:url(../img/dottedLineHorizontal.gif) bottom left repeat-x;
}

/* event-detail-view */
#eventsSyn div.data {
	float:right;
	width:177px;
}
#eventsSyn div.description {
	width:361px;
	padding-left:10px;
	overflow:hidden;
}
* html #eventsSyn div.description {
	width:371px; w\idth:361px; /* IE5/6 */
}
#eventsSyn div.description img {
  position:relative;
	padding:0;
	margin:0;
  left:-10px;
}
#eventsSyn div.description h3 {
	margin-top:12px;
}

/* books-detail-view (looks a little like eventsSyn) */
#bookDetail h3 {
  margin:0;
  font-size:11px;
}

#bookDetail div.data {
	float:right;
	width:177px;
}
#bookDetail div.description {
	width:361px;
	padding-left:10px;
	overflow:hidden;
}
* html #bookDetail div.description {
	width:371px; w\idth:361px; /* IE5/6 */
}
#bookDetail div.description img {
  position:relative;
	padding:0;
	margin:0;
  left:-10px;
}
#bookDetail div.description h3 {
	margin-top:12px;
}

ul#archive {
  margin:0;
	padding:0;
	border:0;
	list-style:none;
	width:590px;
}
ul#archive li {
  display:block;
  float:left;
	width:275px;
	height:104px;
	background:url(../img/dottedLineHorizontal.gif) repeat-x 0 0;
	padding-top:8px;
	margin-right:17px;
	line-height: 15px;
}
ul#archive a,
ul#archive a:hover {
  display:block;
  width:277px;
  height:104px;
  text-decoration: none;
}
ul#archive img {
  float:left;
	margin-right:8px;
}
ul#archive strong {
  padding-top:52px;
  color:#000;
}


.clear {
  clear:both;
  display:block;
	height:0px;
	line-height:2px;
}