/*************************************************************
*                          GENERAL                           *
*************************************************************/
body {
  /* Set margin so page is horizontally centered.  Set width
   * and background color.
   */
  margin:			0 auto;
  background:			#333;
  width:			744px;
}


/*************************************************************
*                           HEADER                           *
*************************************************************/
#header {
  /* Set margin to remove gap between header and top of page.
   * Use padding to position header text over the image.  Set
   * the height [114 (image size) - 73 (padding) = 40] and
   * background image.  Set font properties of header text.
   */
  margin:			0;
  padding:			73px 20px 0 0;
  height:			40px;
  background-image:		url(images/subpage_banner.jpg);
  color:			#555;
  font-size:			16px;
  font-family:			Verdana;
  font-variant:			small-caps;
  font-weight:			normal;
  text-align:			right;
}


/*************************************************************
*                           NAVBAR                           *
*************************************************************/
#navbar {
  /* This is the unordered list containing the main nav links.
   * Remove the margin and bullets.  Set the padding so the
   * links appear to be centered.  Set the height and
   * background color.
   */
  margin:			0;
/*  padding:			0 0 0 40px;*/
  padding:			0 0 0 16px;
  height:			22px;
  list-style:			none;
  background:			#999;
}

#navbar li {
  /* The list elements contain the links and the links need
   * to be displayed as blocks (see below).  This causes the
   * links to be displayed vertically so we float the li left
   * so that the links are displayed horizontally.
   */
  float:			left;
}

#navbar a {
  /* Set the padding to space out the links.  Set the display
   * to block so that sublists (drop-down links) appear below
   * the parent link instead of beside it.  Set the height to
   * the same as that of the containing ul so that sublists
   * start below the containing ul instead of below the link.
   * Otherwise, the sublists would overlap the the main list
   * slightly.  Set the font properties and remove the
   * underline.
   */
  /*padding:			0 15px;*/
  padding:			0 10px;
  display:			block;
  color:			#000;
  font-size:			16px;
  font-variant:			small-caps;
  font-weight:			bold;
  font-family:			"Palatino Linotype";
  text-decoration:		none;
}

#navbar ul {
  /* This is the unordered list containing sublists/sublinks.
   * Remove the margin/padding.  Use absolute positioning and
   * set the left position so the sublinks are normally off
   * of the page.
   */
  margin:			0;
  padding:			0;
  position:			absolute;
  left:				-999em;
  background:			#fff;
  list-style:			none;
  border:			3px solid #960;
}

#navbar ul li {
  /* These are the sublist elements.  Remove the float that
   * would normally be inherited from the previous rule
   * applied to the main list elements (see #navbar li).
   * Also, due to a weird bug with ie6 the height and width
   * had to be set explicitly.  See the notes in navbar.php
   * for more information.
   */
  float:			none;
  height:			22px;
  width:			200px;
}

#navbar ul li a {
  /* These are the actual sublist links or sublinks.  They
   * inherit the padding applied to the main list links
   * (see #navbar a) which is too much due to the border
   * of the sublist elements.  So we adjust the padding as
   * such [15 (main link padding) - 3 (sublist border) = 12].
   */
  padding:			0 12px;
}

#navbar li:hover ul, #navbar li.sfhover ul {
  /* Normally the unordered list containg the sublinks is
   * displayed off the page (see #navbar ul, left: -999em).
   * To acheive the drop-down effect we change the left
   * position to auto when the link is moused over.  Note
   * that for ie this depends on the sfhover javascript file
   * which appends .sfhover to the sublist elements
   */
  left:				auto;
}

#navbar li:hover, #navbar li.sfhover {
  /* Change the background color of both the main list and
   * sublist elements when moused over.  We change the li
   * background color instead of the link background color
   * so that the main link stays highlighted when we mouse
   * over it's sublinks.  Note that for ie this depends on
   * the sfhover javascript file which appends .sfhover to
   * the sublist elements.
   */
  background:			#960;
}


/*************************************************************
*                          CONTENT                           *
*************************************************************/
#content {
  /* This is the main content div.  Set the background color
   * and padding.
   */
  background:			#ccc;
  padding:			15px 20px;
}

.sect_title {
  /* Remove the margin from the section titles and set the
   * font properties.
   */
  margin:			0;
  color:			#960;
  font-size:			18px;
  font-family:			"Palatino Linotype";
  font-weight:			bold;
  font-variant:			small-caps;
}

p {
  /* Set the left margin of the paragraphs so they are
   * slightly indented under the section titles.  Set the
   * font properties and line height.
   */
  margin:			0 0 10px 10px;
  font-size:			12px;
  font-family:			"Verdana";
  line-height:			18px;
}

.fl_ind {
  /* Used for indenting first line of paragraph.*/
  text-indent:		15px;
}

.clearing_div {
  /* Used for clearing below a floated element. */
  clear:		both;
}

.left {
  /* This is the div for left content boxes.  Set the
   * padding to space things out within the box and set
   * margin to space things out outside the box.  Width is
   * [744 (page) - 40 (content padding) = 704 / 2 = 352],
   * this is the total width allowed for each (left/right)
   * box.  Actual width with padding/margin/border is
   * [352 - 20 (padding) - 2 (margin) - 4 (border) = 326.
   * Float the div to the left and set the background
   * color and border.
   */
  padding:			5px 10px;
  margin:			2px 2px 2px 0;
  width:			326px;
  float:			left;
  background:			#eee;
  border:			2px ridge;
}

.right {
  /* This is the div for right content boxes.  Set the
   * padding to space things out within the box and set
   * margin to space things out outside the box.  Width is
   * [744 (page) - 40 (content padding) = 704 / 2 = 352],
   * this is the total width allowed for each (left/right)
   * box.  Actual width with padding/margin/border is
   * [352 - 20 (padding) - 2 (margin) - 4 (border) = 326.
   * Float the div to the right and set the background
   * color and border.
   */
  padding:			5px 10px;
  margin:			2px 0 2px 2px;
  width:			326px;
  float:			right;
  background:			#eee;
  border:			2px ridge;
}

.center {
  padding:			5px 10px;
  margin:			0 auto;
  width:			360px;
  background:			#eee;
  border:			2px ridge;
}

.left ul, .right ul, .center ul {
  /* Remove the margin and set the bottom and left padding
   * of the main lists.
   */
  margin:			0;
  padding:			0 0 10px 25px;
}

.left li ul, .right li ul, .center li ul {
  /* Remove the margin and set the left padding of the
   * sublists.
   */
  margin:			0;
  padding:			0 0 0 15px;
}
/*************************************************************
*                          FOOTER                            *
*************************************************************/
#footer {
  /* Clear div on both sides so it starts below both left and
   * right columns.  Set background color.  Set height to
   * eliminate ie6 bug (see "hasLayout bug").
   */
  clear:		both;
  background:		#000;
  height:		40px;
}

#disclaimer {
  /* Remove bullets and margin/padding of unorder list wich
   * contains the disclaimer link and the disclaimer text.
   * Set it's width/height and float it to the left.
   */
  margin:		0;
  padding:		0;
  float:		left;
  width:		100px;
  height:		40px;
  list-style:		none;
}

#disclaimer a {
  /* Set disclaimer link to display as a block element so
   * the disclaimer text will start below the link instead
   * of beside it.  Use relative positioning and set the
   * top position so the link is vertically centered in ie6.
   * (Setting margin/padding didn't work properly in ie6.)
   * Set the font properties of the link and center it
   * horizontally.  Use the border to get the vertical bar.
   */
  display:		block;
  position:		relative;
  top:			10px;
  color:		#999;
  font-family:		"Verdana";
  font-size:		14px;
  border-right:		1px solid #999;
  text-align:		center;
}

#disclaimer li ul {
  /* This is the ul that contains the disclaimer text. Use
   * absolute positioning and set the left position so the
   * text is displayed off screen (hidden for pop-up trick).
   * Use the margin to push the text all the way below the
   * footer div.  Set the padding and remove the bullets.
   * Set the width [744 - 20 (padding) - 4 (border) = 720].
   * Set the background color and border.
   */
  position:		absolute;
  left:			-999em;
  margin:		21px 0 0 0;
  padding:		10px 10px;
  list-style:		none;
  width:		720px;
  background-color:	#999;
  border:		2px solid #000;
}

#disclaimer li ul li {
  /* This is the actual list element which is the 
   * disclaimer text.  Set the font properties of the text
   * and the line spacing.
   */
  font-size:		0.8em;
  font-family:		"Times New Roman";
  line-height:		1em;
  color:		#000;
}

#disclaimer li:hover ul, #disclaimer li.sfhover ul {
  /* This gives us the pop-up effect.  When the disclaimer
   * link is moused over, change the left position of the
   * disclaimer text from -999em (hidden) to auto (visible).
   * For ie this depends on the sfhover javascript file
   * which appends .sfhover to the end of the li.
   */
  left:			auto;
}

#links_1, #links_2 {
  /* Remove the bullets and margin/padding of the unordered
   * lists which contain the top and bottom line of links.
   * Set the width [744 - 100 (disclaimer width) = 644] and
   * float them to the right.  Also, set the height for each
   * line [40 / 2 = 20].  Center the lines horizontally.
   */
  margin:		0;
  padding:		0;
  float:		right;
  width:		644px;
  height:		20px;
  list-style:		none;
  text-align:		center;
}

#links_1 a, #links_2 a {
  /* Set the font properties for the links in both lines.
   * Remove the underline and use the margin to space out
   * the hyphen between each link.
   */
  color:		#fff;
  font-family:		"Verdana";
  font-size:		10px;
  text-decoration:	none;
  margin:		0 4px 0 0;
}

#links_1 a:hover, #links_2 a:hover {
  /* When a link is moused over, show the underline. */
  text-decoration:	underline;
}

#links_1 li, #links_2 li {
  /* Set the display to inline so the list elements
   * (links + hyphens) display as a horizontal list.  Set
   * the size and color of the hyphen between each link.
   */
  display:		inline;
  font-size:		10px;
  color:		#fff;
}

#links_1 li {
  /* Set the vertical alignment to bottom so that the
   * top line of links is pushed down to the middle of
   * the containing block.
   */
  vertical-align:	bottom;
}

#links_2 li {
  /* Set the vertical alignment to top so that the bottom
   * line of links is pushed up to the middle of the
   * containing block.
   */
  vertical-align:	top;
}

#copyright {
  /* This is the paragraph containing the copyright.
   * Clear in both sides so that it starts below the
   * disclaimer and links blocks.  Remove the margin.
   * Set the background color equal to the background
   * color of the whole page so that the copyright doesn't
   * appear to be part of the footer (Otherwise it's
   * background color would be the same as that of the
   * disclaimer and links i.e. black).  Set the width
   * and text-align so the paragraph is center horizontally
   * on the whole page.
   */
  margin:		0;
  clear:		both;
  background:		#333;
  color:		#fff;
  width:		744px;
  text-align:		center;
}