/*
     * ==================================
     * THE INTERESTING STUFF STARTS HERE!
     * ==================================
     */

    /* The main diagram container needs to be positioned relatively, so that
       it's children can be positioned within it. */
    #diagram {
      position: relative;
      margin:   0 auto; /* Sorry, IE5.x/Win. */

      height:  90em;
    }

    /* Turn off this Opera/Mozilla feature. */
    #diagram abbr, #diagram acronym { border-bottom: 0 }

    /* The top-level DIVs are the state boxes, which should have a border.
       We need to use ems, because the border width counts in the box size
       (except in IE5.x/Win, of course).  It will affect arrow lengths. */
    #diagram div {
      border: 1px solid #000;
    }

    /* All DIVs and list items in the diagram are absolutely positioned. */
    #diagram div, #diagram li {
      position: absolute;
      margin:   0;
      padding:  0;
    }

    /* State names will be centered within their boxes. */
    #diagram h3 {
      margin:      0;
      padding:     0;
      font-size:   1em;
      font-weight: normal;
      line-height: 2;
      text-align:  center;
    }


    /* "Linked" states are indicated visually as state boxes. */
    #diagram div li a {
    
      margin-top:  -1.0em;
      display:          block;
      position:         absolute;
      border:           1px dotted #666;
      background-color: #eee;
      line-height:      2;
      text-align:       center;
      
    }

    /* We'll use unordered lists for the transitions. */
    #diagram ul {
      margin:     0;
      padding:    0;
      list-style: none inside;
    }

    /* IE6/Win completely freaks out without this. */
    * html #diagram ul { width: 0 }

    /* Transition lines. */

    #diagram .down { /* Straight vertical transition, top to bottom. */
      top:         100%;
      left:        100%;
      margin-top:  0.05em;
      border-left: 1px solid #000;
    }
    #diagram .down a {
      top:  100%;
      left: 0;
    }

    #diagram .down-right { /* Angled transition, down and right. */
      top:           100%;
      left:          100%;
      margin-bottom: 0.05em;
      margin-left:   -1em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }
    #diagram .down-right a {
      bottom: -1em;
      left:   100%;
    }

    #diagram .right { /* Straight horizontal transition, left to right. */
      top:           50%;
      left:          100%;
      margin-left:   0.05em;
      border-bottom: 1px solid #000;
    }
    #diagram .right a {
      top:  0;
      left: 100%;
    }

    /* Arrowheads */
    #diagram .down-right span, #diagram .right span {
      right:         0;
      bottom:        -0.3em;
      border-top:    0.3em solid #fff;
      border-bottom: 0.3em solid #fff;
      border-left:   0.5em solid #000;
    }
    * html #diagram .down-right span, * html #diagram .right span {
      bottom:        -4px;
      b\ottom:       -0.3em;
      border-width:  4px 0 4px 4px;
      b\order-width: 0.3em 0 0.3em 0.5em;
    }

    /* Rows, columns, heights, widths, and sizes. */
    .row1 { top: 3em }
    .row2 { top: 22em }
    .row3 { top: 38em }
    .row4 { top: 58em }
    .row5 { top: 61em }
    .row6 { top: 68em}

    .col1 { left: 0em }
    .col2 { left: 12em }
    .col3 { left: 24em }
    .col4 { left: 36em }

    .size1 { width: 4em }
    .size2 { width: 8em }

    .size3  { width: 10em }
    a.size3 { margin-left: -5em }

    .size4 {
      width:  6.95em;
      height: 1.95em;
    }

    .size5 {
      width:  5.95em;
      height: 1.95em;
    }

    .size6 {
      width:  16em;
      height: 1.95em;
    }
    
    .size7 {
      height: 16em;
    }
    
    .size8 {
      height: 7em;
    }

    .size9 {
      width:  16em;
      height: 3.95em;
    }

    .size10 {
      height:  4em;
    }

    .size11 {
      width:  21em;
      height: 1.95em;
    }
 
    .size12 {
      width:  10em;
      height: 1.95em;
    }   
    .height1 { height: 3.9em }

    .width1 { width: 4.9em }
    .width2 { width: 5.9em }

        #diagram .down-right1 { /* Angled transition, down and right. */
      top:           3%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }     
    
        #diagram .down-right2 { /* Angled transition, down and right. */
      top:           21%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }

        #diagram .down-right3 { /* Angled transition, down and right. */
      top:           39%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }
    
        #diagram .down-right4 { /* Angled transition, down and right. */
      top:           57%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }    

        #diagram .down-right4a { /* Angled transition, down and right. */
      top:           75%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }    

        #diagram .down-right4b { /* Angled transition, down and right. */
      top:           93%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }    
    
       #diagram .down-right5 { /* Angled transition, down and right. */
      top:           43%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }  

       #diagram .down-right6 { /* Angled transition, down and right. */
      top:           84%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }  

      #diagram .down-right7 { /* Angled transition, down and right. */
      top:           75%;
      left:          100%;
      margin-left:   -0.07em;
      margin-top:    1.00em;
      border-bottom: 1px solid #000;
      border-left:   1px solid #000;
    }