/****************************************************************************
 *
 * File name: 	sel.css
 * Description:	Base style sheet for strandberg.com
 * Last update:	12-Jan-2010
 *
 ****************************************************************************/




			/* Maintenance notes */

/*

General CSS boxes:

   ------------------------------
  |           margin             |
  |  --------------------------  |
  | |         border           | |
  | |  ----------------------  | |
  | | |       padding        | | |
  | | |  ------------------  | | |
  | | | |     content      | | | |
  | | |  ------------------  | | |
  | | |                      | | |
  | |  ----------------------  | |
  | |                          | |
  |  --------------------------  |
  |                              |
   ------------------------------


Layout template:

   --------------------------------------------
  |              minimumWidthBox               |
  |  ----------------------   --------------   |
  | | mastheadLeft         | | mastheadRight | |
  |  ----------------------   --------------   |
   --------------------------------------------

   --------------------------------------------------------------------
  | canvas                                                             |
  |  ------------------    ------------------------------------------  |
  | | leftColumn       |  | rightColumn                              | |
  | |  ------------    |  |  --------------------------------------  | |
  | | | navigation |   |  | | content                              | | |
  | |  ------------    |  | |  ----------------------------------  | | |
  | |                  |  | | | footer                           | | | |
  | |  ------------    |  | | |  -------------   --------------  | | | |
  | | | copyright  |   |  | | | | contactLeft | | contactRight | | | | |
  | |  ------------    |  | | |  -------------   --------------  | | | |
  |  ------------------   | |  ----------------------------------  | | |
  |                       |  --------------------------------------  | |
  |                        ------------------------------------------  |
   --------------------------------------------------------------------

*/





		/* General text and background appearance */

body
{
  background-color: 	#ffffff;
  color: 		#000000;

  padding:		0;
  margin:		0;
  border:		none;


  /* Allow the user's browser settings to dictate font size, so vision 
     impaired folks can read the text. However, since the default font size
     for most browsers is so funkily large, we'll size it down a bit... */
  font-size:		.75em;
  font-family: 		Arial, Helvetica, sans-serif;


  /* Use a background image to make the masthead appear to stretch across 
     any size browser... */
  background-image:	url(backgroundBlock.jpg);
  background-repeat:	repeat-x;
}







			/* Layout boxes */


/* This box will set the minimum page width allowed before scroll bar appear 
in the user's browser. It also prevents the multi-part masthead from 
breaking into goofy looking pieces. */
#minimumWidthBox
{
  clear:		both;
  float:		left;

  /* Careful here. This must be at least as wide as the graphics contained 
  in "mastheadLeft" and "mastheadRight". */
  width:		720px;
}


/* Box into which the left piece of the masthead will be placed. */
#mastheadLeft
{
  float:		left;

  /* Width here must match "leftColumn" width. */
  width:		140px;

  border:		none;
  padding:		0;
  margin:		0;
}

/* Box into which the right piece of the masthead will be placed. */
#mastheadRight
{
  float:		left;

  border:		none;
  padding:		0;
  margin:		0;
}


/* Box into which all content below the masthead will be rendered. */
#canvas
{
  clear:		both;
  float:		left;

  width:		100%;
  background-color:	#ffffff;

  border:		none;
  padding:		0;
  margin:		0;
}


/* Box establishing the left column. */
#leftColumn
{
  clear:		both;
  float:		left;

  /* Width here must match "mastheadLeft" width. */
  width:		140px;

  background-color: 	#c0c0ff;
  color: 		#000000;

  border-top-style:	none;
  border-top-color:	#ffffff;
  border-top-width:	0px;

  border-right-style:	solid;
  border-right-color:	#909090;
  border-right-width:	2px;

  border-bottom-style:	solid;
  border-bottom-color:	#909090;
  border-bottom-width:	2px;

  border-left-style:	none;
  border-left-color:	#ffffff;
  border-left-width:	0px;

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

  margin-top: 		0px;
  margin-bottom:	0px;
  margin-left: 		0px;
  margin-right:		0px;
}


/* Box into which navigation links will be rendered. */
#navigation
{
  background-color:	#d0d0d0;
  color:		#000000;

  border-top-style:	ridge;
  border-top-color:	#b0b0ff;
  border-top-width:	3px;

  border-right-style:	ridge;
  border-right-color:	#b0b0ff;
  border-right-width:	3px;

  border-bottom-style:	ridge;
  border-bottom-color:	#b0b0ff;
  border-bottom-width:	3px;

  border-left-style:	ridge;
  border-left-color:	#b0b0ff;
  border-left-width:	3px;

  padding-top:		2px;
  padding-bottom:	2px;
  padding-left:		2px;
  padding-right:	2px;

  margin-top: 		0px;
  margin-bottom:	8px;
  margin-left: 		8px;
  margin-right:		8px;

  font-size:		.9em;
}


/* Box into which copyright notice will be rendered. */
#copyright
{
  padding-top:		2px;
  padding-bottom:	2px;
  padding-left:		2px;
  padding-right:	2px;

  margin-top: 		0px;
  margin-bottom:	8px;
  margin-left: 		8px;
  margin-right:		8px;

  font-size:		.75em;
  color:		#606060;
  text-align:		center;
}


/* Box establishing the right column. */
#rightColumn
{
  width:		580px;
  float:		left;

  background-color: 	#ffffff;
  color:		#000000;

/*
  border-top-style:	solid;
  border-top-color:	#909090;
  border-top-width:	2px;
*/

  border-right-style:	none;
  border-right-color:	#ffffff;
  border-right-width:	0px;

  border-bottom-style:	none;
  border-bottom-color:	#c0c0c0;
  border-bottom-width:	0px;

  border-left-style:	none;
  border-left-color:	#ffffff;
  border-left-width:	0px;

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

  margin-top: 		0px;
  margin-bottom:	0px;
  margin-left: 		0px;
  margin-right:		0px;
}


/* Box into which the page's content will be rendered. */
#content
{
  background-color: 	#ffffff;
  color:		#000000;

  border:		none;

  padding-top:		12px;
  padding-bottom:	1px;
  padding-left:		28px;
  padding-right:	12px;

  margin-top: 		0px;
  margin-bottom:	0px;
  margin-left: 		0px;
  margin-right:		0px;
}


/* Box into which the page's footer will be rendered. */
#footer
{
  clear:		both;

  font-size:		.75em;

  border-top-style:	dashed;
  border-top-color:	#b0b0b0;
  border-top-width:	1px;

  border-right-style:	none;
  border-right-color:	#ffffff;
  border-right-width:	0px;

  border-bottom-style:	none;
  border-bottom-color:	#c0c0c0;
  border-bottom-width:	0px;

  border-left-style:	none;
  border-left-color:	#ffffff;
  border-left-width:	0px;


  padding-top:		12px;
  padding-bottom:	1px;
  padding-left:		12px;
  padding-right:	12px;

  margin-top: 		0px;
  margin-bottom:	0px;
  margin-left: 		0px;
  margin-right:		0px;
}


/* Boxes into which contact information will be rendered. */
#contactLeft
{
  clear:		both;
  float:		left;
}

#contactRight
{
  float:		right;

  text-align:		right;
}


/* Boxes used for floating graphics within the content. */
.photoLeft
{
  float:		left;

  border:		none;
  padding:		0;
  margin:		6px;
}

.photoRight
{
  float:		right;

  border:		none;
  padding:		0;
  margin:		6px;
}

.photoLeftFramed
{
  float:		left;

  background-color: 	#d0d0d0;
  color:		#000000;

  border-style:		ridge;
  border-color:		#a0a0a0;
  border-width:		5px;
  padding:		0px;
  margin:		6px;
}

.photoRightFramed
{
  float:		right;

  background-color: 	#000000;
  color:		#000000;

  border-style:		inset;
  border-color:		#a0a0a0;
  border-width:		5px;
  padding:		1px;
  margin:		6px;
}



		/* Text Decoration */

/* Decoration for navigation link lists: */
#navigation ul
{
  padding:		0;
  margin-left:		1.5em;
  margin-top: 		0;
  margin-bottom: 	0;

/*  display: 		block;*/
}

#navigation li
{
  margin-left:		.25em;
}

#navigation li li
{
  list-style-type:	square;
}


/* Decoration for headlines: */
.majorHeadline
{
  color:		#1010a0;
  font-size:		1.5em;
  font-weight:		bold;
  margin-top:		.75em;
}

.minorHeadline
{
  color:		#000000;
  font-size:		1.25em;
  font-weight:		bold;
  margin-top:		.75em;
}

.eyeCatcher
{
  color:		#ff0000;
}