/* Author information for screen.css
-----------------------------------------------
   Version 1.00 | Monday, October 19, 2009
   Style sheet by Keith W Bell
   www.december14.biz
   --------------------------------------------
   These style sheets, associated graphics and
   web page design are copyrighted materials
   and may not be copied or reproduced by any
   party for any reason whatsoever.
----------------------------------------------- */


/* Imported style sheets
----------------------------------------------- */
/* Serve only to adequate browsers   \*/
	@import "reset.css";
	@import "base.css";
	@import "menus.css";
/* No styles for MacIE, WinIE4-, NN4- */


/* Layout notes
-----------------------------------------------
   Version 1.00 | Monday, October 19, 2009
   --------------------------------------------
   The 'Saltire' edition
   --------------------------------------------
   Welcome, curious viewer! Here's how it's all
   stuck together. Glued & screwed; no nails.
   --------------------------------------------
   The fully styled screen layout is a centred,
   elastic design sized comfortably for screens
   of 800px or wider. Or even a bit smaller.
   --------------------------------------------
   The background colour and image on the BODY
   element provides the blue-to-grey graduated
   background for the page.

   The first child of the BODY element is the
   #wrapper DIV, which centres and sizes the
   layout. The DIV will expand to 90% of the
   screen width, unless that is greater than
   76em at the user's font size.

   The first child of #wrapper is the #header
   DIV, which has a fixed height and gives the
   blue border to the top of the page. #header
   contains the logo image, the absolutely
   positioned p#skip element which contains the
   "skip" link to the main navigation, and the
   absolutely positioned UL which contains
   links to the secondary "info" pages. The
   "skip" link is styled so that it is not
   visible until it receives focus.

   The next child of #wrapper is the #hed DIV,
   the background colour and image of which
   provide the graduated blue background for
   the H1 page title/headline and the H2#h2-dek
   declaration. #hed is followed by the #lede
   DIV, the background colour and image of
   which give the graduated grey background for
   the lead paragraph. Both #hed and #lede have
   minimum heights set, and will expand to
   enclose the text as necessary. The widths of
   the text elements are fixed to avoid text
   clashing with the photograph.

   The next child of #wrapper is the #body
   DIV, which is floated left and is 62.5% of
   the width of #wrapper and resizes
   accordingly. This DIV contains all of the
   body copy.

   The next child of #wrapper is the #sidebar
   DIV. This floated right and is 30% of the
   width of the #wrapper and resizes accordingly
   while leaving a comfortable gutter between
   it and #body. #sidebar contains the UL#nav
   and UL.subnav navigation menu lists.

   The penultimate child of #wrapper is the
   #footer DIV, which clears the previous
   floats, gives the blue border to the bottom
   of the page, and contains the copyright note
   etc.

   The final child of #wrapper is the #postcard
   DIV, which is absolutely positioned with
   respect to #wrapper, and is sized to reveal
   its background image, which provides the
   "picture postcard" photograph below the
   header. #wrapper then closes out to the BODY
   element.
-----------------------------------------------
   Version 1: The 'Saltire' edition
              Launched 2008
              Designed & built by Keith W Bell
-----------------------------------------------
-> DECEMBER14 Web Design Studio :: Edinburgh <-
----------------------------------------------- */