/* The trick: we create an empty floated div which forces the rendering engine to flow text around the space where'll we put the actual sidebar. We call the empty float "placeholder-sidebar" and the actual sidebar "real-sidebar".

Mark L. Irons
2003-12-28 */



/*--------------------------------------------------------------------
  The section-container class is used to contain and align the
  placeholder and real sidebars, so its position attribute is set to
  relative.
  --------------------------------------------------------------------*/

.section-container {
  position:         relative
}



/*--------------------------------------------------------------------
  The sidebar class contains attributes common to both the real and
  placeholder sidebars (n.b. the width is set here). The real-sidebar
  and placeholder-sidebar classes specialize the sidebar class. Note
  that both have identical border widths.
  --------------------------------------------------------------------*/

.sidebar {
  width:            20em;
  padding:          0em;
  font-size:        smaller;
  background:       #FFFFF0
}



/*--------------------------------------------------------------------
  The real-sidebar class is positioned absolutely at the top right
  corner of the container div.
  --------------------------------------------------------------------*/

.real-sidebar {
  position:         absolute;
  right:            0em;
  top:              0em;
  margin:           0em;
  border:           2px solid #E0E0B0;
}



/*--------------------------------------------------------------------
  The placeholder sidebar forces the rendering engine to reserve space
  for the real sidebar. Because placeholder-sidebar is floated right,
  text flows around where the real sidebar will be.

  Note that we give the placeholder sidebar larger bottom and right
  margins than the real sidebar. This prevents overlap with body text.
  --------------------------------------------------------------------*/

.placeholder-sidebar {
  float:            right;
  margin:           0em 0em 1.5em 2em;
  border:           2px solid #FFFFF0;
}



/*--------------------------------------------------------------------
  When the rendering engine lays out the placeholder sidebar, it needs
  to know how long to make it. We don't want to put the placeholder
  sidebar's contents in the HTML file, as that would show up on
  non-CSS browsers. Instead, we put dummy elements in the HTML that
  match those in the real sidebar, and move the text here as generated
  content.

  A consequence is that we don't have much flexibility in styling
  sidebar content, but that's not a big penalty.
  --------------------------------------------------------------------*/

#placeholder-title:before {
  content:          "Duis autem vel eum iriure dolor"
}

#placeholder-para1:before {
  content:          "Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."
}

#placeholder-para2:before {
  content:          "Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis."
}



/*--------------------------------------------------------------------
  Force the horizontal rule below the section & sidebar.
  --------------------------------------------------------------------*/

hr { clear: both }




/*--------------------------------------------------------------------
  The rest is just for pretty.
  --------------------------------------------------------------------*/

.sidebar h3 {
  background:             #E0E0B0;
  margin:                 0em;
  padding:                0.25em 2em;
  text-align:             center
}

.filler     { color:      #B0B0B0 }
.readable   { color:      #000000 }

.sidebar p  { padding:    0em 1em }
p           { text-align: justify }
body        { margin:     0em 2em }