/* $Id: layout-fixed.css,v 1.2 2010/08/02 19:43:24 aross Exp $ */

/**
 * @file
 * Layout Styling (DIV Positioning)
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout is based on the Zen Columns layout method.
 *   http://drupal.org/node/201428
 *
 * Only CSS that affects the layout (positioning) of major elements should be
 * listed here.  Such as:
 *   display, position, float, clear, width, height, min-width, min-height
 *   margin, border, padding, overflow
 */


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *  The SAMI Page Layout
 *
 *  The page is designed to fit on half of a 1920x1080 pixel wide screen by
 *  default (this is excluding the optional second side bar). Therefore, the
 *  largest content area is 1090 pixels (that's with 40 pixels for browser
 *  chrome.)
 *
 *  This is made more complicated because we want to support two different
 *  layouts. If the first (internal) sidebar is empty, then we don't want the
 *  content column to expand into this space (too wide). 
 *
 *  page-wrapper: Outer container, set to 1090px with auto margins (such that
 *  the central content box is centered in very large browser windows.)
 *
 *  The page-wrapper contains #header, #navigation, #main-wrapper, and
 *  #footer, which all should clear the space around them, i.e. they are "full
 *  width".
 */

#page-wrapper,
.region-page-closure {
  /*
   * If you want to make the page a fixed width and centered in the viewport,
   * this is the standards-compliant way to do that. See also the ie6.css file
   * for the necessary IE5/IE6quirks hack to center a div.
   */
  margin-left: auto;
  margin-right: auto;
  width: 1090px;
}

/* Set the width of all the main containers */
#header, #navigation, #title, #main-wrapper, #footer {
  width: 865px;
  margin-left: 75px; /* half of (#page-wrapper width - this width) */
  position: relative;
}

/* Content within the #main-wrapper is all floating, not sure why */
#main > * {
  float: left;
}

/*
 *   |---------------------------------------------------|
 *   |                  <--865-->                        |
 *   |-------------------------------------|---|---------|---|-----------|
 *   |           <-- 615 -->               |50 |   200   |50 |   200     |
 *   |                                     |   |         |   |           |
 *   |                                     |   |         |   |           |
 *   |-------------------------------------|---|---------|---|-----------|
 */


#content { width: 615px; }
.region-sidebar-first { width: 200px; margin-left: 50px; } 

.region-sidebar-second {
  width: 200px; 
  position: absolute;
  top: 0px;
  left: 915px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 *   The rest of the file is for smaller fix ups to the layout
 */

/*
 * Header
 */

.region-header {
  clear: both; /* Clear the logo */
}

#search-box {
  position: absolute;
  margin-bottom: 20px;
  bottom: 0;
  right: 0;
}


/*
 * Navigation and title region
 */
#navigation {
  /* float: left; */ /* LTR */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
  height: auto; /* The navigation can have any arbritrary height.*/
}

#navigation .section {
/*  padding-top: 10px; */
  padding-bottom: 5px;
}


/*
 * Content
 */

#content .section {
  margin-top: 0px;
  margin-bottom: 20px;
  padding: 0;
}


.region-sidebar-first .section {
  margin: 0; /* LTR */
  padding: 0;
}


.region-sidebar-second .section {
  margin: 0; /* LTR */
  padding: 0;
}


#footer .section {
  padding-left: 0;
  padding-right: 0;
}


/*
 * Prevent overflowing content
 */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer,
.region-page-closure {
  overflow: visible;
  word-wrap: break-word; /* A very nice CSS3 property */
}


.submitted {
  margin-top: 15px;
  float: right;
  clear: both;
}


/*
 * If a div.clearfix doesn't have any content after it and its bottom edge
 * touches the bottom of the viewport, Firefox and Safari will mistakenly
 * place several pixels worth of space between the bottom of the div and the
 * bottom of the viewport. Uncomment this CSS property to fix this.
 * Note: with some over-large content, this property might cause scrollbars
 * to appear on the #page-wrapper div.
 */
/*
#page-wrapper {
  overflow-y: hidden;
}
*/


/* Special instructions to layout the "not_live" banner if present */

div#not-live {
  background: red;
  border: 0;
  font-weight: bold;
  font-size: larger;
  color: white;
/*  position: absolute;*/
  top: 0px;
  width: 100%;
  text-align: center; 
}

div#not-live + div {

}