/*  GENERICS : BODY FONTS LINKS  */
      /* ***************************** */
               
         body          {
               margin:0; padding:0; }
            
         /* font-sizes */   
         body, body div, body p, body td, body li   {               /* the so-called box-model-hack - explained */
               font-family: verdana, helvetica, arial, sans-serif;      /* more specific to override rule in importing sheet */
               font-size:    x-small;                           /* false value for WinIE4/5 */
               voice-family: "\"}\"";                           /* trick WinIE4/5 into thinking the rule is over */
               voice-family: inherit;                           /* recover from trick */
               font-size:    small;      }                     /* intended value for better browsers */
            html>body, html>body div, html>body p, html>body td, html>body li {
               font-size:    small;                           /* be nice to Opera */
               }
            
         body h1         {                     
               font-family: verdana, helvetica, arial, sans-serif; font-size: x-large; 
               voice-family: "\"}\""; voice-family: inherit; font-size: xx-large; }
            html>body h1 {font-size: xx-large; }
            
         body h2         {                     
               font-family: verdana, helvetica, arial, sans-serif; font-size: large; 
               voice-family: "\"}\""; voice-family: inherit; font-size: x-large; }
            html>body h2 {font-size: x-large; }
            
         body h3         {                     
               font-family: verdana, helvetica, arial, sans-serif; font-size: medium; 
               voice-family: "\"}\""; voice-family: inherit; font-size: large; }
            html>body h3 {font-size: large; }
            
         body h4         {                     
               font-family: verdana, helvetica, arial, sans-serif; font-size: small; 
               voice-family: "\"}\""; voice-family: inherit; font-size: medium; }
            html>body h4 {font-size: medium; }
            
         .smalltext      {                     
               font-size: xx-small; 
               voice-family: "\"}\""; voice-family: inherit; font-size: x-small; }
            html>body .smalltext {font-size: x-small; }
            
         /* general link-rules - special rules hidden in the following prose */
         a            {
               text-decoration:none; }
         a:link         {
               color: #003399; }
         a:hover         {
               color: #cc0033 !important; text-decoration: underline; }
         a:visited      {
               color: #663366; }
         a:visited :hover      {
               color: #cc0033; text-decoration: underline; }
            
         /* title and background */      
         body          { 
               background-color: #fff; 
               background-image: none; 
               background-repeat: repeat; 
               background-attachment: scroll; }
         #startpage #logo   { 
               background-image: url(/style/contrast/logo0.gif); }   
               
      /* ******************************************************************************* */   
      /*  STARTPAGE POSITIONING : THE MAIN PARTS : TOP BODYBAG LEFT MIDDLE RIGHT BOTTOM  */
      /* ******************************************************************************* */   
            
               /* 
               the logic behind this mess goes like this:
               the top is positioned absolutely - no tricks. the body is surrounded by one div called "bodybag" 
               that has only one purpose: to keep the body content below the top - very simple too.
               then the trickery begins! the aim is to order the content on the page in a way that is meaningfull for
               text-mode-browsers, screenreaders, poor old netscape 4 etc. therefor, e.g., the newswire should come before
               the features, but the breaking news should come before the newswire and the navigation and the features. 
               the footer should of course be on the end of the page.
               to achieve this the left and the right columns are positioned absolutely, while the middle column stays 
               relative. the middle column consists of several parts. these part(s) flow into the page just as they are, 
               one after another. first the breaking news, then the features, then the footer. these parts all have 
               wide margins to the left and right. this prevents them from overlapping with the left and right columns.
               the left and right columns are both positioned absolutely. so they are not part of the flow, and no matter 
               at what part of the source-code they appear: they will be positioned at the top-left and top-right of the 
               bodybag. they dont overlap with the middle column because there width is specified - according to the 
               margins of the middle column. look at the code below to see how exactly this is done - css is astonishingly
               flexible: e.g. the middle column uses px to specify the left margin (or position, if you want) but percent 
               to specify the right side.
               so, finally: the middle column is split into two parts, because after the first part (breaking news) there 
               is the absolutely positioned left column (navigation), then the absolutely positioned right coloumn (newswire)
               and then the middle column continues with features and footer. 
               it would be possible to split the middle column into three parts ( e.g. middle column part 1, left column
               middle column part 2, right column, middle column part 3) but it didn't make sense here. 
               but then the flexibility stops. it's not possible to split the left or right columns as well, unless you 
               know the exact hight of the upper part. or use some heavy scripting that gets the height dynamically and 
               positions the second part on the fly - but this doesn't work reliably on slow machines.
               */
               /* 
               credits:
               i took the basic page-formatting from http://www.wired.com. they recently upgraded their site to CSS. 
               to take it from them had some advantages: 
               1) they already must have done extensive testing to make sure that everything works on a vast majority of 
               available browsers - and indeed i ran into no trouble with the basic structure which was very comfortable ;-)
               2) they use tricks... it really pays if you  u n d e r s t a n d  css!
               3) in an interview they explain roughly what they did - nice to read:
               http://devedge.netscape.com/viewsource/2002/wired-interview/
               */ 
         
         /* Top */
         #top         {          
               position: absolute; top: 0px; left: 0px; width:100%; height:136px; }
         
         /* a special bag carries the whole main body */      
         #bodybag       {    
               position: absolute; top: 156px; left: 0px; width:100%; }          /* max-width:1000px; */
               
         /* Left Column */
         #left          {    
               position: absolute; top: 0px; left: 16px; width: 170px; overflow: hidden; }
         
         /* Middle Column Top Special Boxes */
         #middle       { 
               position: relative; margin-left: 206px; margin-right: 28%; }
         
         /* archive pages middle column is actually middle+right because archive-pages don't contain the newswire */
         #archivepage #middle { 
               position: static; margin-left: 206px; margin-right: 1%; }
         
         /* Right Column */
         #right          { 
               position: absolute; top: 0px; left: 74%; right: 1%; }
               
               /* following a complicated trickery: because IE5win doesn't get the width of the right
                  column as it should. therefor it is served a "width: 50%"- which is sort of approximately 
               what he should show... */
         #right          { 
               width: 50%; }
               
               /* this is then overridden in a further rule which is hidden from IE5win 
                  by some comments-trickery. 
                Line 1 is hidden from IE5.x/Win. But because there is whitespace inside the comment 
                adjacent to width IE5.0/Win will also ignore the declaration that immediately follows. 
                Therefore, line 2 is hidden from it as well. 
                for further information see http://css-discuss.incutio.com/?page=BoxModelHack */     
         #right         {
               width/* */:/**/25%; 
                 width: 25%;
               }
         
         /* Middle Column Main Content */
         #main          {    
               position: relative; margin-left: 206px; margin-right: 28%; margin-top: -1.2em; clear: both; }  
               /* not sure if clear:both is really necessary */


      /*  STARTPAGE SECONDARY PARTS : TOP NAVIGATION LINKS BREAKINGNEWS SPECIAL FEATURES NEWSWIRE  */
      /* ***************************************************************************************** */   
            
            
         /* TOP  */
         /********/         
         
         #logo         { 
               position:absolute; top: 16px; left: 46px; width: 470px; height: 120px; }   
         #statics-a       { 
               position:absolute; bottom: 0px; left: 0px; width: 100%; }
               /* 
               this code elegantly puts the statics-box (the static-links besides the logo)at the bottom of the head. 
               when the text in the box expands in two lines the box expands to the top, leaving the design visually intact.
               but this code breaks in opera 5 and 6. they put the statics-box at the top of the page - ugly!
               the only way out i can think of is to position the statics absolutely  and prevent them from expanding 
               into 2 lines ( nobr ) thus discriminating small displays - even uglier...
               */
         #statics-i      {    
               position:relative; margin-left: 186px; margin-right: 1%; padding: 4px 10px 4px 20px; 
               font-size: 10px; font-weight: bold; color: #ddd; background-color: #036; }      
         #satz         {    
               position:absolute; top: 16px; right: 1%; width: 23%; padding: 2px 1%; font-size: 10px; }
               
         /* transparency */     
         div #satz      {
               background-color: transparent; background-image: url(/img/trans-ccc-60.png); }
         
         /* links */      
         #statics-i a:link   { color: #ddd; }
         #statics-i a:hover   { color: #c03; }
         #statics-i a:visited { color: #ddd; }
         a:link#satz-i, a:link.publishlink
                         { color: #003366; }
         a:visited#satz-i, a:visited.publishlink
                         { color: #003366; }
         a:hover#satz-i      { color: #cc0033; text-decoration: none; }
         a:hover.publishlink   { color: #cc0033; }
         
          
         /*  LEFT COLUMN (NAVIGATION)  */
         /* ************************** */
         
         /* generics - used in almost all nav-boxes - and very often overridden ;-) */
         .navtitle      { 
               padding: 1px 6px 2px 4px; margin: 0;
               font-size: 18px; line-height: 18px; font-weight: bold; text-align: right; }
         .navbox         {    
               padding: 6px 10px 6px 10px; 
               font-size: 12px; text-align: right; }
               
         /* navigation boxes colors */
         .navtitle      { 
               background-color: #888; color: #ddd; }
         .navbox         {    
               background-color: #ddd; }
         #topictitle, .topicitem, .topicitemtitle, .archivenav { 
               background-color: #CADFE0; background-image: none; background-repeat: no-repeat; color: #036; } 
         .searchcheck, #searchbox, #searchhelp {
               background-color: #ddd; }
         #transbox, #stylebox {  
               background-color: #ddd; }
         #uptitle      { 
               background-color: #F5F7D0; background-image: none; background-repeat: no-repeat; color: #036; }
         #upbox         { 
               background-color: #F5F7D0; background-image: none; background-repeat: no-repeat;}
         #linkstitle      { 
               background-color: #E7F5D7; background-image: none; background-repeat: no-repeat; color: #036; }
         #linksbox      { 
               background-color: #E7F5D7; background-image: none; background-repeat: no-repeat; }
         #publishtitle   { 
               background-color: #cfc; }         
         
         /* topics and search - this is the most complicated section of the style sheet... */      
         #topictitle      { 
               margin-left: 30px; padding-bottom: 6px;}                                          
         .topicline      { 
               position: relative; display: block; }                              
         .topicline6      { 
               position: relative; line-height: 4px; display: block; }                     
         .topicsubtitle   { 
               position: relative; display: block; }                              
         .searchcheck   { 
               position: absolute; left: 0px; top: 0px; width: 20px; height: 50px; padding-top: 4px;
               text-align: center;  overflow: hidden; display: block;   } 
         .topicitem      { 
               position: relative; padding: 4px 10px 0px 10px; margin-left:30px; 
               font-size: 11px; text-align: right; display: block;   }                  
         .topicitemtitle   { 
               position: relative; padding: 12px 10px 0px 10px; margin-left:30px; 
               text-align: right; font-size: 12px; font-weight: bold;
               display: block; }      
         #topiclistend   {
               padding-bottom: 8px; }                                       
               
         #searchtitle-a    { 
               position: relative; display: block;  }
         #searchtitle   { 
               margin-left:30px; }                                           
         #searchbox      { 
               padding-left: 30px; margin-bottom: 0px;}                           
         .searchblock   { 
               display: block; text-align: right; height: 24px; }
         #searchfield    { 
               width: 115px; font-size: 10px; }
         .searchpulldown { 
               width: 120px; font-size: 10px; }
         #searchbutton   { 
               width: 120px; font-size: 10px; text-align: right; }
         .checker      {    
               width: 12px; height:12px; margin-top: 2px; }
         #searchhelp      {
               font-size: 9px; margin-top: -10px; }
               
         /* translation */
         #transtitle      { 
               font-size: 14px; line-height: 14px; }
         #transbox      { 
               font-size: 12px; }                                             
         #transbox .smalltext   {
               font-size: 9px; }
         
         /* stylechooser */
         #styletitle      { 
               font-size: 14px; line-height: 14px;}
         #stylebox      { 
               padding: 4px 10px; 
               font-family: monospace; font-size:11px; background-color: #bbb; }
         #stylebox a:link, #stylebox a:visited   {
               color: #003399; }   
         #stylebox a:hover{ 
               color: #cc0033; text-decoration: underline;}   
         .norm         { 
               background-color: #ccc; }
         #styletext      {
               display: block; font-size: 9px; font-family: sans-serif; text-align: left; }
         pre            {
               margin: 0; padding: 4px 0 8px 0; }
               
         /* upcoming */      
         .upblock      { 
               display: block; text-align: right; margin-bottom: 4px; font-size: 12px; }
         
         /* links */
         .link         { 
               display: block; text-align: right; margin-bottom: 2px; font-size: 12px; }
         
         /* imc's */
         #imctitle      { 
               background-color: #036; }
         #imcbox         { 
               background-color: transparent; margin-top: 10px; }
         .imcregion      { 
               display: block; text-align: right; margin-top: 0px; margin-bottom: 6px; font-weight: bold; font-size: 14px; }
         .imc         { 
               display: block; text-align: right; margin-bottom: 2px; font-size: 12px; }
            
            
         /*  CENTER COLUMN (CENTERBOX BREAKING NEWS SPECIAL FEATURE FOOTER  */
         /* *************************************************************** */   
         
         /* boxes */   
         #centerbox      { padding: 6px 9px; background-color: #fff; border: 1px solid #ff0; }
         #breakingbox   { padding: 6px 9px; background-color: #ddd; border: 1px solid #903; }
         #breakingtitle   { color: #903; font-weight: bold; }
         .breakingdate   { color: #903; font-size: x-small; }
         .breakingtext   { color: #000; }
         
         /* special + features */
         #special      { padding: 4px 12px; border: 1px solid #036; background-color: #eee; background-image: none; background-repeat: no-repeat; }
         #s-title      { margin: 0px 0px 0px 0px; padding: 6px 0px 0px 0px; font-size: 24px; }
         .f-title      { padding: 1px 12px; margin-top: 10px; margin-bottom: 0px; font-size: 18px; background-color:#eee;}
         .s-ad         { padding: 4px 12px; margin-top: -4px; }
         .f-ad         { padding: 4px 12px; margin-top: -4px; }
         .s-abstract      { padding: 4px 12px; }
         .f-abstract      { padding: 4px 12px; }
         .s-link         { padding: 4px 12px; } 
         .f-link         { padding: 4px 12px; }
         .feature      { padding: 4px 12px; }
         .ad            { font-size: x-small; color: #333; margin: 1px; }
         
         
         /*  RIGHT COLUMN - OPEN POSTING + NEWSWIRE  */
         /* **************************************** */   
         
         /* generics - don't forget to synchronize them with their left-column-counterparts! */
         .navtitle-r      { 
               padding: 1px 2% 2px 10px; margin: 0; font-size: 18px; line-height: 18px; font-weight: bold; color: #036;  }
         .navbox-r      { 
               padding: 4px 10px; font-size: 10px;  }
               
         /* publish + open posting */
         #publishtitle   { background-color: #888; font-size: 14px; line-height: 14px; color: #ddd; font-weight: bold; }         /* B8003D f99  */
         #publishbox      { background-color: #ccc; background-image: none; background-repeat: no-repeat; } 
         #publishlink      { display: block; padding: 4px 0px 4px 20px; margin: 0; font-size: 12px; font-weight: bold; line-height: 12px; }
         #publishsublink      { display: block; padding: 0px 0px 2px 20px; margin: 0; font-size: 10px; }
         #opbox         { background-color: #ccc; background-image: none; background-repeat: no-repeat; }
         #nwlink         { display: block; padding: 0px 0px 2px 20px; margin: 0; font-size: 12px; font-weight: bold; line-height: 12px; }
         #oplink         { display: block; padding: 1px 0px 2px 20px; margin: 0; font-size: 12px; font-weight: bold; line-height: 12px; }
         #opsublink      { display: block; padding: 0px 0px 2px 20px; margin: 0; font-size: 10px; }
         
         /* newswire */
         #newswiretitle   { background-color: #036; color: #ddd; }
         #newswirebox   { background-color: #bbb; padding: 4px 10px 4px 10px; font-size: 10px; }
         
         #newswirebody   { background-color: transparent; }
         .nw-item      { margin: 10px 0;  padding: 0;  }
         .nw-title      { font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body .nw-title {font-size: small; }
         .nw-date      { color: #555;  }
         #newswirearchivetitle   
                     { background-color: #bbb; margin-top: 30px; font-size: 14px; }
         
            
         /*  WORKAROUNDS + SPECIALITIES  */
         /* **************************** */   
         
         /* needed only once ... */
         .red         { 
               color: #c03; }
         /* content that's only intended for text-mode browsers is hidden in newer browsers */
         .hide         { 
               display: none; }
         /* for the special blocks to have text-color only in old browsers... */
         .blacktext      { 
               color: #000; font-weight: normal; }
      
      
      /* *************************** */   
      /*    ARCHIVE PAGE SPECIFICS   */
      /* *************************** */
         
         
         #archivepage #top   {
               position: absolute; left: 0; top: 0; width: 100%; height: 56px; }
         #archivepage #logo    {
               position: absolute; left: 46px; top: 16px; width: 140px; height: 40px; background-color: #036; }
         #logo #logoimg      { 
               position: absolute; left: 108px; top: 0; }
         #logo #textlink      { 
               position: absolute; left: 4px; top: 2px; width: 136px; display: block;font-size: 10px; font-weight: bold; }
         #logo a:link      { 
               color: #ddd; }
         #logo a:hover      { 
               color: #c03; }
         #logo a:visited      { 
               color: #ddd; }
         #toptitle         {
               position: absolute; left: 206px; top: 16px; font-size: 12px; color: #036; margin: 0; }
         #topop            {
               position:absolute; top: 16px; right: 1%; font-size: 12px; padding: 0 10px; text-align: right; }
         #archivetitle       {
               font-size: 36px; font-weight: bold; color: #c03; padding: 0px 10px 4px 10px; margin: 10px 0;}
         #archivepage #bodybag {
               position: absolute; top: 76px; }
         #archivepage #main    {
               position: relative; margin-left: 206px; margin-right: 1%; clear:both; }
         #archivenavtitle     {
               display: block; margin: 0 10px; font-weight: bold; font-size: 12px; }
         .archivenav         {
               padding: 2px 10px; margin: 0; font-weight: bold;   
               font-size: small; 
               voice-family: "\"}\""; voice-family: inherit; font-size: medium; }
            html>body .archivenav    {
               font-size: medium; }
         .archivechooser      { 
               display: inline; }
         
            
         
      /* ************************** */   
      /*    ARTICLE PAGE SPECIFICS  */
      /* ************************** */
               
         #articlepage         { 
               background-image: none; } 
         #articlepage #top      { 
               position: absolute; left: 0; top: 0; height: 56px; }
         #articlepage #logo       { 
               position: absolute; left: 46px; top: 16px; width: 140px; height: 40px; background-color: #036; }
         
         #articlepage #transbox  { 
               position: absolute; left: 46px; top:62px; background-color: transparent; 
               font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body #articlepage #transbox {font-size: small;  }
         
         #articlepage #bodybag   { 
               position: absolute; left: 0px; top: 110px; width: 100%; }
         #article            { 
               margin-left: 50px; margin-right: 10%; margin-bottom: 20px; }
         #children            { 
               margin-left: 50px; margin-right: 10%; margin-bottom: 50px;
               clear: both; }
         #pdfmail            { 
               margin-left: 50px; margin-right: 10%; }
         #goodcom            { 
               margin-left: 50px; margin-right: 10%; margin-bottom: 50px; }
         #badcom               { 
               margin-left: 100px; margin-right: 15%; margin-bottom: 100px; }
         
         #a-title            { 
               padding: 0 20px 10px 0; margin: 0; font-size: 24px; font-weight: bold; } 
         #a-ad               { 
               padding: 0 10px 0 0; margin: 0; font-weight: bold; }
         #a-abstract            { 
               padding: 10px 10px 20px 0;
                font-size: small; voice-family: "\"}\""; voice-family: inherit; font-size: medium; } html>body #c-abstract {font-size: medium; }
         #a-media            { 
               padding: 0px 10px 0px 40px; }
         .a-desc               { 
               padding: 20px 10px 20px 0; }
         #a-contact            { 
               padding: 20px 10px 20px 0; }
         
         #children            { 
               padding: 6px 10px 6px 10px; background-color: #eee; border: 1px solid #aaa; }
         #children h4         { 
               margin:  4px 0; }
         
         #pdfmail            { 
               padding: 2px 10px; background-color: #bbb; }
         
         #newcom               { 
               padding: 0 10px 7px 50px; font-size: small; voice-family: "\"}\""; voice-family: inherit; font-size: medium; } html>body #newcom {font-size: medium; }
         #goodcomhead         { 
               padding: 2px 10px; margin-bottom: 40px; line-height: 18px; font-size: 18px; font-weight: bold; background-color: #036; color: #ddd;  clear:both; }
         .goodcombody         { 
               padding: 0px 10% 0px 50px; }
         
         .goodcomtitle         { 
               font-size: small; voice-family: "\"}\""; voice-family: inherit; font-size: medium; } html>body .goodcomtitle {font-size: medium; }
         .goodcomad            { 
               font-style: italic; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } html>body .goodcomad {font-size: small; }
         .goodcomdesc         { 
               color: #000; }
         .goodcomadress         { 
               color: #000; }
         #goodcom hr            { 
               color: #aaa; text-align: left; }
         
         #badcomhead            { 
               padding: 2px 10px; font-size: 12px; line-height: 12px; font-weight: bold; background-color: #699; color: #ddd; }
         .badcombody            { 
               padding: 0px 10% 0px 50px; color: #999;
               font-size: xx-small; voice-family: "\"}\""; voice-family: inherit; font-size: x-small; } html>body .badcombody {font-size: x-small; }
         
      .article_spamnote {
          background: #D0D0D0;
          border: 1px dashed #e40b00;
          padding: 6px;
          font-size: 0.9em;'>
      }
      
      .article_licencenote {
          border-left: 1px solid #bbb ;
     border-top : 1px solid #bbb ;
     border-right: 1px solid #eee;
     border-bottom: 1px solid #eee;
     margin: 8px;
     margin-right: 1px;
     padding: 6px;
     padding-left: 0px;
     font-size: 0.8em;
          float:right;
      }      
         
      
      
      /* TESTING CHAOS     */
      
         /* macIE needs this... should we use a browser-detection? */
         #left   { 
               overflow: hidden; }