/*
 * $Id: content.css,v 1.3.2.9 2008/02/08 21:02:35 gontran Exp $
 *
 * PLEASE ALLOW EXISTING WHITESPACE AND INDENTING STYLE TO PERSIST
*/

/*
 * Browser specific hax
 *
 * Please do not modify below here through 'XXX' to tweak or improve styles,
 * these fixes below are for browser compatibility, and include odd-looking
 * hacks to evoke specific behavior from specific versions of browser.
*/

/* hack for Opera 7+ */
@media all and (min-width: 0px)
{
  .verticalalign
  {
    width: 100% !important;
  }
  /* But Opera 9 does it right, so CSS3 hax to the max */
  div[id^="topfold"] #above .verticalalign
  {
    width: 48% !important;
  }
  div[id^="topfold"] #below .verticalalign
  {
    width: 48% !important;
  }
}


/* hack for IEs of all persuasions before IE7 */
* html .verticalalign 
{
  width: 100% !important;
}

.verticalalign p
{
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
}
/* IE Win can be a bit out - you might need to adjust  bottom value by -1px or
.verticalalign
{
  position: absolute;
  bottom: 0;
}
  ...as required */

/* containers for equal height rows */

/* both #above and #below should have the same properties as topfold.
/* container for top half: presses + comments */
/* container for bottom half: presses + comments */

#topfold, #above, #below
{
/*  width: 100%;*/
  position: relative;
  /*overflow: hidden;*/   /* This hides the excess padding in non-IE browsers */
  margin-bottom: 1em;
}


/* easy clearing and hiding */
#topfold:after, #above:after, #below:after
{
  content: '[DO NOT LEAVE IT IS NOT REAL]'; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
#topfold, #above, #below
{
  display: inline-block;
}
/*\*/
#topfold, #above, #below
{
  display: block;
}
/* end easy clearing */

/* 
 * Safari needs this - otherwise the ghost overflow, though painted 
 * correctly obscures links and form elements that by rights should be
 * above it.  An unintended side-effect is that it cause such elements to
 * vanish in IE 5.01 and 5.5, hence the child selector hack 
*/
* > #foot, * > form, * > #notes, * > .output
{
  position: relative;
  z-index: 1000;
}

div#below div#comment,
div#above div#story 
{
	float: left;
	width: 588px;
}

div#above div#util,
div#below div#util
{
  display: inline;
	float: left;
  margin-left: 1em;
}

.sbody,
.sbody p {
  font-size:12px;
  line-height:1.5em;
}
.sbody a {
  text-decoration:underline;
}

/* User Tools for Sidebar */
#util
{
  font-size: xx-small;
  width:180px;
}

/* the section div allows the black bar with red bottom border, overlayed
 * with the h1 with a white background.
*/
div.sectitle
{
/*  width: 100%;
  background: black;
  line-height: 1em;
  margin-bottom: 0.5em;
  margin-top: 1em;*/
}

/* taller line for the breaking news */
div#comment div.sectitle
div#comment div.sectitle h1
{
/*  margin-top:0;
  line-height: 1.4em;*/
}

/* we want a red line below the black stripe, but IE shows it under the
 * h1...
*/
* div#comment div.sectitle
{
/*  border-bottom: 1px solid #dc0000;*/
}

h1
{
  /*font-size: 1.4em;*/
/*  text-transform: uppercase;
  color: #dc0000;
  font-weight: bold;

  padding-right: 1em;
  display: inline;*/
}

/* hack around */
/*
* FIXME: need a hack for IE 7 and IE 5 to not show the border under the
* h1..
* hide from ie 7
* see: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
* */
* html div#comment h1, html div.sectitle h1
{
/*  border: 0;
  background: white;
  zoom:1;*/
}

/* ie fix to get styles applicabble to all elements:
 * http://msdn2.microsoft.com/en-us/library/bb250481.aspx
.getlayout
{
  zoom: 1;
}
 */
/* reduce the font size for the section title headers */
div.sectitle h1
{
/*  font-size: 1em;*/
}

div#util span.plus
{
  color: #dc0000;
  font-weight: bold;
  font-size: x-large;
}

/* position images when not specified in the story */
div.ContentImage {
  float:right;
  width:200px;
  margin:10px 0 10px 10px;
}

div.ContentImage .imageCaption {
  line-height:1.2em;
}