/*************************************************************
*                          GENERAL                           *
*************************************************************/
body {
  /* Set margin, ?padding? so content extends to edge of
   * window.  Also, set min-width to avoid problems with
   * some browsers when the window is resized to be narrower
   * than the main div.
   */
  margin:			0;
  padding:			0;
  background:			#333;
  min-width:			744px;
}

#main {
  /* Set background color to the same as the shortest
   * column, i.e. left or right.  Also, center the page
   * horizontally.
   */
  background:			#ccc;
  margin:			0 auto;
  width:			744px;
}

.sect_title {
  /* Set font and margins for section headings */
  font-family:		"Palatino Linotype";
  font-size:		18px;
  font-variant:		small-caps;
  font-weight:		bold;
  color:		#996600;
  margin:		15px 10px 0px 10px;
}

p {
  /* Set font, margins, line-spacing for all paragraphs */
  font-family:		"Verdana";
  font-size:		12px;
  margin:		0px 10px 10px 20px;
  line-height:		18px;
}

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

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

/*************************************************************
*                           HEADER                           *
*************************************************************/
#header h1 {
  /* Set margin so there's no gap at top of page.  Set height
   * equal to height of background image so full image shows.
   * Set font and padding to desired look.  Set line-height
   * equal to height so text is vertically centered.
   */
  margin:			0;
  padding:			0 0 0 20px;
  height:			39px;
  background-image:		url(images/header.jpg);
  background-repeat:		no-repeat;
  color:			#555;
  font-size:			16px;
  font-family:			Verdana;
  font-variant:			small-caps;
  font-weight:			normal;
  line-height:			39px;
}

#header img {
  /* Set img tag to block display to remove gap below pic */
  display:			block;
}


/*************************************************************
*                           NAVBAR                           *
*************************************************************/
#navbar {
  /* Set background color and height of navbar */
  background:			#999;
  height:			22px;
}

#navbar ul {
  /* Set margin so there's no gap above navbar.  Set padding
   * so links look centered.  Remove bullets.
   */
  margin:			0;
/*  padding:			0 0 0 110px;*/
  padding:			0 0 0 46px;
  list-style:			none;
}

#navbar li {
  /* Make links side by side, instead of stacked */
  display:			inline;
}

#navbar a {
  /* Set padding to space out links a little.  Set font and
   * color of links.  Also, remove underline from links.
   */
  padding:			0px 15px;
  color:			#000;
  font-size:			16px;
  font-variant:			small-caps;
  font-weight:			bold;
  font-family:			"Palatino Linotype";
  text-decoration:		none;
}

#navbar a:hover {
  /* Change background color when link is rolled over */
  background:			#960;
}


/*************************************************************
*                        LEFT COLUMN                         *
*************************************************************/
#left {
  /* Set background color and width for left column.  Also,
   * float left to give a two column layout.
   */
  background:			#fff;
  width:			230px;
  float:			left;
}

#blkBlockContainer {
  /* Remove margin/padding from list containing links.  Also,
   * remove bullets.
   */
  margin:		0px;
  padding:		0px;
  list-style:		none;
}

#blkBlockContainer a {
  /* Set the width and height of each link.  Make them display
   * as blocks, so they fill the full width and height, and set
   * the background color.  Set the font and line-height, so
   * text is centered vertically.  Set text align so it's
   * centered horizontally.  Add a bottom border to make each
   * link stand out and remove link underline.
   */
  width:		230px;
  height:		50px;
  display:		block;
  background-color:	#000000;
  color:		#fff;
  font-size:		18px;
  font-variant:		small-caps;
  font-weight:		bold;
  font-family:		"Palatino Linotype";
  line-height:		50px;
  text-align:		center;
  border-bottom:	1px solid #333333;
  text-decoration:	none;
}

#blkBlockContainer a:hover {
  /* Change background color of link when rolled over. */
  background-color:	#996600;
}

#locations {
  /* Set margin and padding for list of locations.  Also, set
   * style of bullet.
   */
  margin:		0px;
  padding:		0px 5px 0px 25px;
  list-style:		disc;
}

#locations ul {
  /* Set margin/padding for sublist within locations list. */
  margin:		0px;
  padding:		0px;
}

#locations li ul li {
  /* Set bottom margin for sublist elements to space things
   * out a little.  Set font and line-height for desired
   * line spacing between list and sublist.  Also, remove
   * bullets from sublist elements.
   */
  margin:		0px 0px 5px 0px;
  font-size:		10px;
  font-family:		"Verdana";
  line-height:		10px;
  list-style:		none;
}


/*************************************************************
*                       RIGHT COLUMN                         *
*************************************************************/
#right {
  /* Set width of right column and float it to the right.  Set
   * background color and padding.
   */
  width:			514px;
  padding:			15px 0 0 0;
  background:			#ccc;
  float:			right;
}

#sig {
  /* Make signature image a block element instead of inline
   * and center it within it's containing div.
   */
  margin:			0 auto;
  display:			block;
}

#left_list {
  /* Set width of the left bulleted list of service hightlights
   * and float it left.  Also, set it's left padding.
   */
  padding:		0 0 0 25px;
  width:		217px;
  float:		left;
}

#right_list {
  /* Set width of the right bulleted list of service
   * highlights and float it right.  Also, set it's right
   * padding.
   */
  padding:		0 25px 0 0;
  width:		217px;
  float:		right;
}

.services {
  /* Remove the bullets and margin/padding of the unordered
   * lists of service highlights.
   */
  list-style-type:	none;
  margin:		0;
  padding:		0;
}

.services li {
  /* Set the background image (bullets) of the list elements
   * and don't repeat them.  Set the position so that the
   * bullets are aligned well with the line of text.  Also,
   * set the left padding to give space between bullet and
   * text.
   */
  background-image:	url(images/diamond_bullet4.jpg);
  background-repeat:	no-repeat;
  background-position:	0 3px;
  padding-left:		25px;
}


/*************************************************************
*                          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:		70px;
  }

#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:		68px;
  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;
  text-align:center;
}

#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;
}