/* Reset */
      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
      }
      body {
        line-height: 1;
      }
      ol, ul {
       list-style: none;
      }
      
/* A white page centered on a light gray background. */

  body { 
    margin: 0pc; background: #D4D2D4; }
  
  #page { 
    position: relative; /* anchor */ width: 43pc; margin: auto; /* centering */ padding: 18pt 4pc 2pc; background: white; }
        
/* The page extends to the full height of the browser window. */

  html, body { 
    height: 100%; }
  
  #page {
    min-height: 100%; }
    
  * html #page { 
    height: 100%; } /* IE-6 and earlier. */

/* The working width is 43pc. The grid is three 13pc columns with 2pc gutter; the two-column block is 28pc. As of now I use only some predefined classes. */
      
  .full-page {
    position: relative; width: 43pc; }
    
  .two-thirds {
    position: relative; width: 28pc; }
    
  /* Inside header and title I use two elements with absolute positioning. */  
  
  .two-thirds-left {
    position: absolute; width: 28pc; }

  .one-third-right {
    position: absolute; left: 30pc; width: 13pc; }

/* Each page has header, footer, navigation bar and a large colored ‘title’ strip that goes across the page. The strip contains page title, subtitle, tabs and some custom content, e.g. major links for the page. */ 

  #header, #footer {
    height: 18pt; }

  #navigation_bar {
    display: block; width: 43pc; padding: 6pt 0pt; margin: 1pc 0pc; border-top: solid 1px gray; border-bottom: solid 1px gray; }
  
  #title {
    position: relative; /* anchor */ left: -54pt; width: 43pc; height: 126pt; margin: 16pt 0pc 2pc; padding: 1pc 54pt 18pt; }
  
  #tabs{
    display: block; position: absolute; left: 54pt; top: 138pt; width: 43pc; height: 18pt; font-size: 10pt; }

/* The tabs inside the #tabs element are links (a) and the curren tab is span. They are all alike except that the current tab has white background. */  
  
  #tabs * {
    display: block; float: left; padding: 3pt 9pt 0pt; height: 15pt; }
  
  #tabs span {
    background: white; }

/* Floats */

.sidebar { float: right; width: 138pt; padding: 9pt; border: 1px solid gray; font-size: 10pt; line-height: 11pt; margin: 0pc 0pc 1pc 0pc; clear: right; }

/* Some paragraphs have a ‘start-here’ mark, which is a colored box that extends to the left. */

.mark { 
  display: block; /* because it's a span */ position: absolute; left: -1.5pc; top: 2.5pt; width: 9pt; height: 9pt; }

/* Text may have small notes in the right margin. They're not expected to contain multiple lines, because they could overlap. */

.marginalia {
  display: block; position: absolute; left: 30pc; width: 13pc; }
        
/* The main typeface is serif (preferably Georgia), 12/14.4pt */

p { 
  font-family: Georgia, serif; font-size: 12pt; line-height: 14.4pt; }

p.note { 
  font-size: 10pt; line-height: 12pt; }

/* The auxiliary typeface in sans-serif, preferably Lucida Grande. */

h1, h2, h3, table, #title *, #subtitle, #header, #footer, .sidebar, #navigation_bar, .marginalia {
  font-family: "Lucida Grande", Arial, sans-serif; }

table, #header, #footer, #navigation_bar, .sidebar, sidebar p {
  font-size: 10pt; line-height: 11pt; }  

.marginalia, .mark {
  font-size: 9pt; line-height: 10pt; }  

.mark {text-align: center;}

/* Text paragraphs */
h2 {
  position: relative; margin: 2pc 0pc 1pc; }

p { 
  position: relative; /* may have marginalia */ margin: 1pc 0pc; }

.sidebar .list-item {
  margin: 6pt 0pt; }
  
li {
  list-style: disc outside; }

/* pictures */

.figure dt { 
  font-family: 'Lucida Grande'; font-size: 9pt; line-height: 11pt; float: right; width: 13pc; border-top: solid 2px lightgray; padding-top: .5pc; clear: right; margin-bottom: 1pc; }

.figure dd { 
  width: 28pc;
  text-align: center; }


#footer, #navigation_bar {
  color: gray; }
      
/* Links are set in light blue. */
      
a {
  color: #708CB8; }
a:visited {
  color: #BA8CB8; }

/*  Links don't show underline until hovered. */
a { 
  text-decoration: none; }
a:hover { 
  text-decoration: underline; }

/* I make sure inline icons have one extra pixel at the bottom; if an icon has a shadow, this area is occupied by the shadow. */

.fugue-icon {
   vertical-align: baseline; position: relative; top: 1px;
}


/* The title has special typesetting. The text remains black, but links become white. */

#title a, .mark a {
  color: white; }

#title h1 {
  font-size: 48pt; line-height: 48pt; font-weight: normal; letter-spacing: -2pt; }

#subtitle {
  font-size: 12pt; line-height: 16pt; }

#title p {
  margin: 0pt; }

#title ul {
  margin: 3pt 0pt 9pt 0pt; line-height: 120%; list-style: disc inside; }

      /* Typical table rows */      
      td {
        padding: 6pt; }
        
@media print {
  #tabs, #header, #navigation_bar, .sidebar, .one-third-right {
    display: none;
  }

}