/* History:
    05Sep2006: Switch to using relative font sizing as recommended
              in "Stylin' with CSS" by Charles Wyke-Smith.
              1em==16px (approximately).
              
              order for a:link, a:visited, a:hover, a:active
              
              Vertical Margins Collapse!!
    08Sep2006: Add the styles for implementing the Alsett Clearing method
              for a 3-column layout with Header and Footer. Left it without
              all the desired formatting because the next chapter goes into
              the style where the column order does not matter.


  Standard Colors from logo:
  	0d6362   deep green
  	12457d   deep blue
  	b6b7b5   grey

*/

/* ----------- body --------------
  This describes the basic font and color information
*/
body { 
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 100%;
	text-align:center;
  background-color: #CCCCCC;
  color:black;
}

/* -------------- * -----------------
  recommended to be placed after the body declaration
  to eliminate the default margins and padding for all 
  elements. */
* {
  margin: 0;
  padding: 0;
  /* uncomment the following line for debugging styles. */
  /* border: 1px solid #000; */
}
li{list-style:none;}

/* -------------- pagewrapper ------------------
  Keeping the min & max widths the same simply centers the display
   on the screen if the browser window is wider than 800px.
   Setting the width, and removing auto margins keeps the display left justified.
*/
#pagewrapper {
  width: 800px;
 /*  min-width:478px;
  max-width:800px; */
  margin-left:auto;
  margin-right:auto;
  text-align: left; 
	background: #FFFFFF url(./graphics/logo.png) no-repeat top left;  
	color: black;
}

/* --------------- common tag styles -------------- */
/* --------------- a (lvha order) --------- */
a:link {
  background-color: inherit;
  color: #0d6362;
  text-decoration: none;
} 
a:visited {
  background-color: inherit;
  color: #12457d;
  text-decoration: none;
}
a:hover {
  background-color: inherit;
  color: #12457d;
  text-decoration:underline;
}

/* --------------- img -----------------------
  the basic image has a border and top,left & right margins.
*/

img {
  float:left;
  margin-right: 10px;
  margin-top:5px;
  margin-left:5px;
  border: 1px solid #000;
}

/* -------------- h1 ---------------------
*/
h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.3em;
  font-weight: normal;
  background-color: inherit;
  color: #0d6362;
  font-style: italic;
  border-bottom-style:solid;
  border-bottom-color: silver;
  border-bottom-width: 1px;
  padding-bottom: 5px;
  margin-top:.5em;
  margin-left: .8em;
  /* text-align:right; */
}
/* -------------- h2 ---------------------
*/
h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.1em;
  font-weight: bold;
  background-color: inherit;
  color: #12457d;
  letter-spacing: 3px;
  font-style: italic;
  border-bottom-style:solid;
  border-bottom-color: #12457d;
  border-bottom-width: 1px;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: .5em;
  padding-top: 10px;
  padding-left:10px;
}
/* -------------- h3 ---------------------
*/
h3 {
	font-family: verdana, arial, helvetica, sans-serif;
  font-size: 1.0em;
  font-weight: normal;
  background-color: inherit;
  color: #12457d;
  letter-spacing: 1px;
  border-bottom-style:solid;
  border-bottom-color: #12457d;
  border-bottom-width: 1px;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 1.5em;
  margin-right: 1.5em;
  padding-top: 10px;
  text-align:center;
}
/*-------------- p ---------------
  site-wide font size. don't include
  paragraph margins because of odd
  side-effects on the whole page.
*/
p {
font-size: 0.75em;  /* font-size: 12px; */
}

p a:link {
	color: #0d6362;
}

/*-------------- p.quote ---------------
*/
p.quote {
font-style:italic;
padding: 15px;
background-color: inherit;
color: #999900;
}

/* -------------- em -------------------------
*/
em {
	background-color:inherit;
	color:#009933;
}
/* --------------- header ---------------------
  This defines the space above container_all
*/
#header {
 /*  height: 145px; */
  margin:0px;
  padding:0px;
  text-align: right;
  /* visibility: hidden; */
}
#header h1 {
  font-family: arial, helvetica, sans-serif;
  font-size: 2.3em;
  font-weight: normal;
  background-color: inherit;
  color: #0d6362;
  font-style: italic;
  border:none;
  padding-bottom: 5px;
  padding-right:50px;
  padding-top:20px;
	margin-left:0px;
	margin-top:0px;
}
#header h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.0em;
  font-weight: normal;
  background-color: inherit;
  color: #12457d;
  letter-spacing: 3px;
  font-style: italic;
  border:none;
  margin-bottom: 10px;
  margin-top: 0px;
  margin-right: 50px;
  text-align:right;
}
#header h2 span {
	font-size:.7em;
}
#header img {
	border: none;
	float: left;
	margin-left:330px;
	margin-right:0px;
	margin-top: 0px;
	
}

/* -------- container_all -----------------
  contains all 3 columns.
*/
#container_all {
  float:left;
  width:100%;
}
/* --------- container_left ----------------
  contains the left and center columns. The right column (sidebar)
  is placed outside container_left, but inside container_all.
  For pages with only 2 columns, this structure can be left out.
  THE RIGHT MARGIN must match the margin of MAINCONTENT in some way.
*/
#container_left {
  float:left;
  width:615px;
}
/* ---------- container_mergeright -------------
  Replace container_left & maincontent with 
  container_mergeright if you will not have a sidebar
  (only navigation).
  width: 800 - totalwidth of navigation (205px)
*/
#container_mergeright {
  float:left;
  display:inline;
  width: 595px;
  margin-bottom:20px;
}
/* ---------- maincontent ----------------
  The right margin must relate correctly to
  the container_left margin-right otherwise
  the side bar will not display to the right
  of maincontent. 
  The left margin must handle the width of the
  first column (navigation).
*/
#maincontent {
  margin: 0px 0px 20px 180px; 
}

/* ---------- navigation ----------------
  column1 is the navigation column.
  The amount of space required is:
    width+margin - left + margin-right + padding-left + padding-right
*/
#navigation {
	width: 160px;
	float:left;
	display:inline;
	margin-top: 30px;
	margin-left: 10px;
	/* margin-bottom:50px; */
	overflow: hidden;
	/* border: 1px solid #000; */
}
/* -------------- sidebar ----------------
  This is the right-most column of the 3-column
  display. Make sure that the width is less than
  the margin-right found in container_left.
*/
#sidebar {
  float:right;
  width: 170px;
  margin-top:40px;
}		
/* --------------- footer --------------
  The footer is outside the container_all and must be
  after it. It is located within the page wrapper.
  The footer will appear below all three of the columns.
  The left margin is set so that the text is mainly below
  the right two columns. The graphic is of some consideration
  with the margin for content that is short.
*/
#footer {
clear:both;  
/* width: 100%; */
margin-top: 10px;
margin-left: 180px;
padding: 4px 0;
text-align: center;
border-top-style: solid;
border-top-width: 1px;
border-top-color: silver;
}

/* ----------- navigation list styles ---------------
  These are the styles needed to have the navigation
  bar display the way we want.
*/
div#navigation ul {
  float: right;
  list-style-type: none;
  width: 160px;
}

div#navigation ul li {
  font-size: .9em;   /* font-size: 13px; */
  text-align: right;
  /* letter-spacing: -.02em; */
}

div#navigation ul li.dots{
  border-bottom-style: dotted;
  border-bottom-color: silver;
  border-bottom-width: 1px;
  padding-bottom: .5em;
  margin-bottom: .5em;
} 

/* ----------- maincontent styles ---------------
These are the styles needed to have the navigation
bar display the way we want.
*/
div#maincontent p {
margin-left: 1em;
margin-top: .75em; 
}

div#maincontent.contact p {
	margin-left:2em;
}
#maincontent ul {
  margin-top: .5em;
  margin-left: 2em;
  font-size: .75em;
}
#maincontent table {
  font-size: .75em;
  margin: 15px;

}
#maincontent h2+ul {
  margin-top: .5em;
  margin-left: 4em;
  font-size: .75em;
}
#maincontent div {
display:block;
margin: 5px 0px 10px 10px;
}
.small {
	font-size:10px;
	font-style:italic;
}

/* ---------------- productlist -----------------
*/
.productlist {
	font-size:22px;
	font-family:serif;
	margin-left:15px;
	width:420px;
}
#maincontent .productlist ul {
	margin:0;
}
#maincontent ul.list1 {
	float:left;
	width:140px;
}
* html ul.list1 {
  display:inline;
}
ul.list2 {
	float:left;
	width:140px;
}
* html ul.list2 {
  display:inline;
}
ul.list3 {
	float:left;
	width:140px;
}
* html ul.list3 {
  display:inline;
}

#sidebar div.products {
	margin-top:10px;
}
#sidebar div.products img{
	margin-bottom:20px;
}


#sidebar h1 {
	font-size: 1.2em;
	text-align: left;
	padding-right: 5px;
	padding-bottom: 0px;
	margin-left: 5px;
	margin-right: 10px;
  background-color: inherit;
  color: #000066;
}
#sidebar p {
  font-size: .7em;
  margin-left: 5px;
  margin-right: 2px;
  margin-top: 1em;
  background-color: inherit;
  color: #003399;
}
#sidebar div {
	margin-left:10px;
}
#sidebar img {
	border:none;
	margin-right:15px;
}

#footer ul {
  margin: 2px 0;
  font-size: .65em;
}

#footer li {
  display: inline;
  border-left: 1px solid;
  padding: 0 5px 0 9px;
}

#footer li:first-child {
  border-left: 0;
}

#footer ul li a {
  background-color: inherit;
  color: black;
}


#footer ul.address {
  margin: 5px 0;
  font-size: .75em;
  letter-spacing: 1px;
  background-color: inherit;
  color: #12457d;
}

#footer ul.address li {
  display: inline;
  border: 0;
  /* border-left: 3px dotted #ff0000; */
  padding: 0 1px 0 0px;
}

#footer ul.address li:first-child {
  border-left: 0;
}

#footer ul.address li strong {
  font-weight: normal;
  background-color: inherit;
  color: #C60;
}

#footer ul.address li a {
  text-decoration: underline;
  background-color: inherit;
  color: #12457d;
}

.copyright {
  margin-top: 10px;
  font-size: .65em;
  background-color: inherit;
  color: #12457d;

}



.clearme {
  clear:both;
}
/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */


/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
/*
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}*/
/* line to handle fix for IE Mac */
/*.clearfix {display: inline-block;} */
/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
/*
* html .clearfix {height: 1%;}
.clearfix {display:block;} */
/* End hide from IE-Mac */
/* end of "no-extra-markup" clearning */