/*
   ***************************************************************************************
   note: several of the comments make reference to PHP the variables and formulas that 
         are visible only in main.css.php (and not in the final css rendered to the browser).
         on the other hand, main.css.php might be difficult for the reader unfamiliar with
         PHP. it might be useful to have on had both main.css.php and the rendered CSS 
         (point browser to the stylesheet link)
   ***************************************************************************************
*/

/*
   ***************************************************************************************
   reference of variables whose values are computed by css_engine.php:

$page_width=1023px (= max of total_header_width, total_col_width, total_footer_width)

$page_to_cols_dist=0px

$page_to_cols_dist_left=0px

$page_to_cols_dist_right=0px

$header_bar_height=101px

$total_header_width=804px

$header_bottom_spacer_width=1023px

$total_col_width=1023px

$footer_bar_height=86px

$footer_top_spacer_width=1023px

$total_footer_width=916px


   ***************************************************************************************
*/

/*
   ***************************************************************************************
   structure-specific styles (those that apply to all browsers)
   ***************************************************************************************
*/

* 
{
   /*
      initialize margin (and padding, just to be safe) to zero for all structures.
      this is essential for keeping Chrome and Safari from falling short of the
      100% height setting at the bottom of the viewport when the content is less
      than a full page (IE7+ and Firefox get along with or without this setting)
   */
   margin: 0;
   padding: 0;
}

html
{
   /*
      note: these settings not required for our dynamic 3-column structure or "lead footer" feature
   */

   /*
      force browser to show vertical scroll bar even if page fits within viewport, thus 
      preventing (what some consider to be) disconcerting horizontal shift when moving from 
      short to long page or vice versa
   */
   overflow-y: scroll;

   /*
      force browser to hide horizontal scroll bar, forcing user to widen browser window 
      to view entire width of page
   overflow-x: hidden;
   */

}

.clearer
{
   clear: both;
}

html, body
{
   /*
      this height setting, for each of these sectors, is essential for 
      the "lead footer" feature
      (reference: http://ryanfait.com/resources/footer-stick-to-bottom-of-page)
   */
   height: 100%;
}

body
{
   min-width: 1023px; /* does not seem to hurt. not sure it is needed */
}

#page
{
   /*
      change default position ("static") to "relative" so that the absolute-position structures, 
      [left,center,right]_bgcol will be positioned relative to the #page container
   */
   position: relative;

   /*
      center alignment of page
   */
   margin-left: auto;
   margin-right: auto;

   /*
      these height settings for #page are essential for the "lead footer" feature
      (reference: http: //ryanfait.com/resources/footer-stick-to-bottom-of-page)
   */
   min-height: 100%;
   height: auto;

   /*
      width-wise, the page-div encloses header, footer and content columns, wrapping the widest 
      of these ($page_width is not set by the user, but calculated in css_engine.php)

      we use the php strval() ("string-value") function when we echo a numeric value (i.e., 
      a number value you set *without* quotation marks) or a calculated combination of such 
      variables (e.g., #header margin-bottom) to make absolutely sure that php echos only text
      to this file.

      (actually, php will automatically do the number-to-text conversion, but we retain an old-school 
       coding mentality about making sure all data-types are the same before combining them)
   */
   width: 1023px;
   /*
      the min-width seems to be needed only by the browsers that use the Webkit layout engine, namely Safari 
      and Chrome. without the min-width setting these browsers will push the right side of the page div 
      leftward when the viewport is narrowed from the right to the point where the page div is not fully in view
   */
   min-width: 1023px;
   max-width: none;

   /*
      we would like to be able to set #page's top and bottom border here as well, that causes the #page div to overfill the viewport, so 
      the upper and lower borders are worked into #top_margin and #bottom_margin respectively
   */
   border-left: 0px dashed #0099ff;
   border-right: 0px dashed #0099ff;
}

/*
   the (100% wide) #header_bar div precedes the (pixel-width) #page div in html so that it can occupy the entire 
   screen width (#page div has width equal to the maximum of header-width, total-column-width, footer-width), 
   and the reason for *that* is that we want be able to have the header_bar's bg image to exactly coincide with 
   the body bg image
*/
#header_bar
{
   /*
      z-index must be high enough so that this div's background image will cover the 
      columns
   */
   z-index: 2;

   position: relative;

   height: 101px;
	width: 100%;
   /*
      the min-width setting comes into play only if you disable html {overflow-x: hidden;}
   */
	min-width: 1023px;

	margin-left: auto;
	margin-right: auto;
   /*
      the negative-valued top margin pulls header_bar up the viewport into page-div by exactly the correct amount
   */
   margin-bottom: -101px;
}

#header_wrapper
{
   /*
      this is a structure-only container for the page's top margin, the header and header's bottom spacer
   */

   /*
      z-index must equal or exceed that of #header_bar
   */
   z-index: 2;

   position: absolute;
   top:0; left: -0px;

   /*
      $header_bar_height is computed in css_engine.php
   */
   height: 101px;
   width: 1023px;

   border-left: 0px solid transparent;
   border-right: 0px solid transparent;
}

#top_margin
{
   position: relative;

   /*
      margin settings for centering with relative position
   */
   margin-right: auto;
   margin-left: auto;

   height: 25px;
   width: 1023px;

}

#header
{
   /*
      margin settings for centering with relative position
   */
   margin: 0px auto;

   height: 30px;
   width: 798px;

   border-top: 3px solid #cde;
   border-right: 3px solid #89a;
   border-bottom: 3px solid #789;
   border-left: 3px solid #bccdef;

   padding-top: 10px;
   padding-right: 0px;
   padding-bottom: 10px;
   padding-left: 0px;
}

#header_bottom_spacer
{
   /*
      separates header section from columns
   */

   margin: 0px auto;

   height: 20px;

   /*
      $header_bottom_spacer_width is computed as a numeric-string value in css_engine, according 
      to the phrase that was assigned to it in the css_vars file
   */
   width: 1023px;

}

#footer_bar
{
   /*
      z-index must be high enough so that this div's background image will cover the 
      columns. in particular, without z-index setting #footer_bar will be masked on 
      right by right column
   */
   z-index: 2;

   position: relative;

   height: 86px;
	width: 100%;
   /*
      the min-width setting comes into play only if you disable html {overflow-x: hidden;}
   */
	min-width: 1023px;

	margin-left: auto;
	margin-right: auto;
   /*
      the negative-valued top margin is the magic behind the "lead footer" feature. the 
      relative-position footer_bar-div occurs just after the page-div in html, but the 
      page's negative bottom margin pulls footer_bar up the viewport into page-div by 
      exactly the correct amount
   */
   margin-top: -86px;
}

#footer_wrapper
{
   /*
      this is a structure-only container for the footer, its top spacer and the page's bottom margin
   */

   /*
      z-index must exceed (equality will not do) that of #footer_bar
   */
   z-index: 3;

   position: absolute;
   bottom: 0px;

   /*
      $footer_bar_height is computed in css_engine.php
   */
   height: 86px;
   width: 1023px;
}

#footer_top_spacer
{
   /*
      same idea as #$header_bottom_spacer 
   */

   margin-right: auto;
   margin-left: auto;

   height: 20px;

   /*
      $footer_top_spacer_width is computed as a numeric-string value in css_engine, according 
      to the phrase that was assigned to it in the css_vars file
   */
   width: 1023px;

}

#footer
{
   margin-right: auto;
   margin-left: auto;

   height: 30px;
   width: 900px;

   border-top: 3px solid #cde;
   border-right: 3px solid #89a;
   border-bottom: 3px solid #789;
   border-left: 3px solid #bccdef;

   padding-top: 5px;
   padding-right: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
}

#bottom_margin
{
   /*
      same idea as #top_margin 
   */

   margin-right: auto;
   margin-left: auto;

   height: 20px;
   width: 1023px;

}

/*
   ***************************************************************************************
   background-style columns #[left,center,right]_bgcol

   the top and bottom border-div for a layout in which the columns do not extend to full screnn 
   in one or both vertical directions is inspired by the absolute positioning idea found at:

     http://www.chilipepperdesign.com/2009/05/03/css-equal-height-columns-with-bottom-border-and-margin

   we have extended the idea to provide true border properties (styles, diagonal border intersections)
   ***************************************************************************************
*/

#left_bgcol
{
   position: absolute;
   top: 0px; left: 0px;

   min-height: 100%;
   width: 300px;

   border-left: 4px solid #efd200;
   border-right: 4px solid #d5be00;

   /*
      if layout you want will have the column extend to the top of the viewport then you can simplify the system by un-commenting the following 
      border-top code (in main.css.php) and eliminating #left_bgcol_top_border in main.css.php and the left_bgcol_top_border div in html.

   border-top: 4px solid #e7cf00;

      similarly, if layout you want will have the column extend to the bottom of the viewport then you can simplify the system by un-commenting the 
      following border-top code (in main.css.php) and eliminating #left_bgcol_bottom_border in main.css.php and the left_bgcol_bottom_border div in html.

   border-bottom: 4px solid #b4a100;

      the above remarks apply similarly to center and right columns
   */

   white-space: nowrap;
}
#left_bgcol_top_border
{
	position: absolute; /* relative to the #page container, not the column */


   top: 0;
   
   left: 0px;

	height: 0px;
   width: 300px;


   border-top: 4px solid #e7cf00;
   border-left: 4px solid #efd200;
   border-right: 4px solid #d5be00;
   }
#left_bgcol_bottom_border
{
	position: absolute; /* relative to the #page container, not the column */


   bottom: 0;
   
   left: 0px;

	height: 0px;
   width: 300px;


   border-bottom: 4px solid #b4a100;
   border-left: 4px solid #efd200;
   border-right: 4px solid #d5be00;
   }

#center_bgcol
{
   position: absolute;
   top: 0px;
   left: 323px;

   min-height: 100%;
   width: 450px;

   border-left: 4px solid #99b2b7;
   border-right: 4px solid #99b2b7;

   white-space: nowrap;
}
#center_bgcol_top_border 
{
	position: absolute; /* relative to the #page container, not the column */


   top: 0;
   
   left: 323px;

	height: 0px;
   width: 450px;


   border-top: 4px solid #99b2b7;
   border-left: 4px solid #99b2b7;
   border-right: 4px solid #99b2b7;
   }
#center_bgcol_bottom_border 
{
	position: absolute; /* relative to the #page container, not the column */


   bottom: 86px;
   
   left: 323px;

	height: 0px;
   width: 450px;


   border-bottom: 4px solid #99b2b7;
   border-left: 4px solid #99b2b7;
   border-right: 4px solid #99b2b7;
   }

#right_bgcol
{
   position: absolute;
   top: 0px;
   left: 796px;

   min-height: 100%;
   width: 215px;

   border-left: 6px ridge #0af505;
   border-right: 6px ridge #0af505;

   white-space: nowrap;
}
#right_bgcol_top_border 
{
	position: absolute; /* relative to the #page container, not the column */


   top: 0;
   
   left: 796px;

	height: 0px;
   width: 215px;


   border-top: 6px ridge #0af505;
   border-left: 6px ridge #0af505;
   border-right: 6px ridge #0af505;
   }
#right_bgcol_bottom_border 
{
	position: absolute; /* relative to the #page container, not the column */


   bottom: 0;
   
   left: 796px;

	height: 0px;
   width: 215px;


   border-bottom: 6px ridge #0af505;
   border-left: 6px ridge #0af505;
   border-right: 6px ridge #0af505;
   }

/*
   ***************************************************************************************
   foreground-column ("fgcol") containment
   the three nested content-column containment divs, together with negatively margined
   content divs contained in the inermost container are the wish-i-had-thought-of-that 
   magic that makes the html page grow dynamically in response to content in any of 
   the three content divs
   ***************************************************************************************
*/

#fgcol_hood
{
   /*
      this outermost of the three nested column containers (1) wraps the three columns widthwise 
      (i.e., defines a width equal to the total width of the three columns, with borders and separation
      widths, and centers it in the #page-div, (2) creates, by means of padding-top, the vertical 
      separation between the (absolute-positioned) #header_wrapper and the page content, and (3), for 
      browsers built on the Webkit layout engine (Chrome, Safari), the left and right padding keeps the content 
      from drifting leftward out of the columns when the browser window is narrowed in the horizontal direction

      we named the outermost fgcol_ container "hood" to evoke both the notion of "neighborhood" 
      and "top-and-sides-covering": the fgcol_hood div defines the area in which the three content 
      columns live ("neighborhood") and it uses padding on top and sides to do so (the side padding comes into play 
      when either the header or footer is wider than the total width of the columns)
   */
   position: relative;

   margin-left: auto;
   margin-right: auto;

   min-height: 100%;
   width: 1023px;

   padding-left: 0px;
   padding-right: 0px;

   padding-top: 101px;
}

#fgcol_lot
{
   /*
      though the three columns are centered as a group in the #page-div, it is not necessarily the 
      case that the center column is centered among them (because the left and right columns, as well as
      vertical borders and separators, need not be the same width). the fgcol_lot container finds the 
      center column by padding-out the areas to the left and right of it

      in our "hood"-"lot"-"home" analogy, this container is named "_lot" because its left and right 
      padding areas define something like a front and back "yard" on which the left and right content
      columns will respectively *appear*, while the unpadded center area defines the footprint of the 
      "home"

      predecessors of this layout (e.g., http://www.brunildo.org/test/three-cols-gen.html) use 
      this container (differently named) not only for structure but also to set the background 
      colors of the three content columns. in the brunildo example, this sector includes the 
      background-color property which serves as the color of the center column, and it uses 
      border-[left,right] with colors (instead of our padding-[left,right]) to color the side 
      columns (wihtot!). in this layout it is not merely more natural to set the colors in the 
      _bgcol_ sectors (where one also sets background images) but in fact the brunildo technique 
      would fail. reason: our encorporation of the "lead footer" feature will result in unclolored 
      space between the fgcol_lot-div and the bottom of the viewport if the content is too sparse 
      to fill at least one entire screen
   */

   min-height: 100%;

   padding-left: 323px;
   padding-right: 242px;
}

#fgcol_home
{
   /*
      in our "hood"-"lot"-"home" analogy, this container is named "_home" because all three content columns "live" 
      here, as left-floated divs. negative margining makes them *appear* to be outside in the left and right "yard" 
      respectively. thus, from the html point of view, there is only one dynamic column, not three.

      the home, lot and hood all grow vertically to accomodate the longest occupant, but not before the bottom of the 
      content disappears behind the (negative-margined) footer area. the following bottom-padding setting 
      takes care of this content-footer overlap (this is the "push" idea in the code where we picked up the stick-to-bottom 
      footer, http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
   */

   padding-bottom: 86px;
}

/*
   ***************************************************************************************
   fgcol ("foreground" column) sectors
   from the html perspective the [left,center,right]_fgcol divs hold the content. from css 
   perspective it seems appropriate to name them "foreground", in contrast to the bgcol 
   ("bacground" column) sectors
   ***************************************************************************************
*/

#left_fgcol
{
   float: left;
   position: relative;

   /*
      negative left margin pulls the #left_fgcol content out of its html-flow location 
      (inside fgcol_home) and places it exactly in the viewport's left-column area

      note on source-code ordering of columns
      the generally agreed-upon preference among designers seems to be that the center column should 
      come first in the html source code (see, for example: http://www.alistapart.com/articles/holygrail)
      our css/html follows this preference. if you prefer to make the left column first in the source code, 
      then move the left_fgcol div and its contained divs into first place after the opening of the fgcol_home div
      and change the active margin-left setting in this sector to

      margin-left: -319px;

   */
   margin-left: -777px;

   width: 300px;

}

#center_fgcol
{
   float: left;

   /*
      left and right margins keep the left/right content out of center-left/center-right border
      these margin formulas would remain the same if you make the html margin changes (described 
      above) to render the left column first in html source
   */
   margin-left: 4px;
   margin-right: 4px;

   width: 450px;


   padding-bottom: 4px;
   }

#right_fgcol
{
   z-index: 2;

   float: left;
   position: relative;

   /*
      the combination of negative right and positive left margins pulls the #right_fgcol content out of 
      its html-flow location (inside fgcol_home) and places it exactly in the viewport's right-column area

      these margin formulas would remain the same if you make the html margin changes (described 
      above) to render the left column first in html source

todo: need a css-knowledgeable person to tell us why we need the left margin in addition to the negative right margin,
      and why 2*($right_col_left_border_thickness+$center_right_spacer_width) in the right margin does not work instead
   */
   margin-right: -694px;
   margin-left: 21px;

   width: 215px;

}

/*
   ***************************************************************************************
   decorative properties for layout components
   ***************************************************************************************
*/

/*
   do not set margin, padding, height, width, border size, or any other dimensional/layout 
   values for the essential structural elements (#page, #header_bar, etc.) here. these are 
   done in the css_vars file. additionally, all borders for those elements are styled in the 
   structure section above instead of here
*/

body
{
   font-size: 100%;
   font-family: georgia,"times new roman",sans-serif;
   color: #000;

   background-color: lavender;

   background-image: url('texture_1.jpg');
   background-position: left top;
   background-attachment: scroll;
   background-repeat: repeat;
}

#page
{

}

#header_bar
{
   /*
      leave this sector empty if you want the columns to start at top of viewport.
      to cover columns, use background-color, background-image settings (e.g., that match those of body)

      you can experiment with variations by styling/un-styling #top_margin and #header_bottom_spacer
   */
}

#top_margin
{

}

#header
{
   /*
      no dimension, margin, border or padding settings here
      dimension and area properties (and border style, for convenience) are set in the css_vars file
      so that their values can be taken into account in the layout computations
   */
   white-space: nowrap;
   text-align: center;
   background-color: #aabbbf;
}

#header_bottom_spacer
{

}

#footer_bar
{
   /*
      leave this sector empty if you want the columns to start at top of viewport.
      to cover columns, use background-color, background-image settings (e.g., that match those of body)

      you can experiment with variations by styling/un-styling #bottom_margin and #footer_bottom_spacer
   */
}

#footer
{
   /*
      no dimension, margin, border or padding settings here
      dimension and area properties (and border style, for convenience) are set in the css_vars file
      so that their values can be taken into account in the layout computations
   */
   background-color: #aabbbf;
}

#left_bgcol
{
   background-image: url('texture_3.jpg');
   background-position: left top;
   background-attachment: scroll;
   background-repeat: repeat;
}

#left_fgcol
{
   /*
      content-specific styles for left column (e.g., padding) should be set here
   */
   white-space: normal;
   text-align: left;
}

#center_bgcol
{
   background-image: url('texture_4.jpg');
   background-position: left top;
   background-attachment: scroll;
   background-repeat: repeat;
}

#center_fgcol
{
   /*
      content-specific styles for center column (e.g., padding) should be set here
   */
   white-space: normal;
   text-align: left;
}

#right_bgcol
{
   background-image: url('texture_2.jpg');
   background-position: left top;
   background-attachment: scroll;
   background-repeat: repeat;
}

#right_fgcol
{
   /*
      content-specific styles for right column (e.g., padding) should be set here
   */
   white-space: normal;
   text-align: left;
}

/*
   ***************************************************************************************
   content-specific (non-layout) styles
   ***************************************************************************************
*/

/*
   begining here you set the styles for content tags
*/

h1 
{
   margin: 0px;
   text-align: center;
   font-size: 1.6em;
   color: #3f3f3f;
}

h2 
{
   margin: 0px;
   text-align: center;
   font-size: 1.4em;
   color: #3f3f3f;
}

.goldish { background: #efca00; }
.greyish { background: #aabbbf; }
.greenish { background: #82df00; }
.purplish { background: #a68fb9; }

.section 
{
   border: 3px solid #789;
   margin: 20px;
   padding: 15px 5px 0px 5px;
   background: #ccc none repeat scroll 0% 0%;
   font-weight: normal;
   overflow: hidden;
}

p
{
   padding: 0px 0px 15px 0px;
}

ul 
{
   margin: 1em 0;
   padding: 0;
   border-top: 1px solid #ab5;
   font-weight: bold;
}
li 
{
   list-style-type: none;
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #ab5;
}
li a, .urhere
{
   padding: 0.25em;
   display: block;
   text-decoration: none;
   background-color: #ccc;
}
.urhere 
{
   color: #777;
}
li a:hover 
{
   background-color: #bbb;
}
li button 
{
   margin: 2px 0.5em;
}

.download_link
{
   font-weight: bold;
   text-decoration: none;
}
.download_link:hover 
{
   color: #a8ff49;
}

.superscript { font-size:xx-small; vertical-align:top; }

.fineprint { font-size: 0.8em; }