/* 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.
   21Mar2007: Convert to Bernie Austin's BodyTalk East Bay site.

  Standard Colors:
    brown: #B3730D
    blue:  #086296

*/

/* ----------- 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: white;
  /* background-color: #086296;  */
  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; */
}

/* -------------- 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:600px;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  text-align: left; 
	background: #FFFFFF;  
	color: black;
}

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

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

img {
  float:left;
  margin-top:5px;
  width: 200px;
}

/* -------------- h1 ---------------------
*/
h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.4em;
  font-weight: normal;
  text-align:center;
  background-color: inherit;
  color: #086296;
  /* margin: 1em 0 .5em 0; */
}
/* -------------- h2 ---------------------
*/
h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1em;
  font-weight: normal;
  background-color: inherit;
  color: black;
  /* margin: .3em 0 .5em 0; */
  text-align:center;
}
/* -------------- h3 ---------------------
*/
h3 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: .75em;
font-weight: normal;
text-align:center;
background-color: inherit;
color: black;
/* margin: .3em 0 .5em 0; */
}
/*-------------- p ---------------
  site-wide font size. don't include
  paragraph margins because of odd
  side-effects on the whole page.
*/
p {
font-size: .75em;  /* font-size: 12px; */
}

/*-------------- p.quote ---------------
*/
h1.quote {
font-style:italic;
padding: 15px;
background-color: inherit;
color: #000000;
text-align:center;
}


/* --------------- header ---------------------
  This defines the space above container_all
*/
#header {
  /* background: #FFFFFF url(./graphics/bt_logo_color_tag.gif) no-repeat top; */
  /*
  background-image:url(./graphics/bt_logo_color_tag.gif);
  background-repeat:no-repeat;
  background-position:220px 0px; */
  height: 195px;
  text-align: center; 
}

#header img {
   margin-left:220px;
   margin-top:0px;
   height: 190px;
   width: 148px;
}

#header h1 {
  /* text-align:right; */
  padding-top: 50px;
  margin-left: 500px;
  margin-right: 50px;
  width:130px;
  background-color: transparent;
}

/* -------- container_all -----------------
  contains all 3 columns.
*/
#container_all {
  float:left;
  width:100%;
  border-top:1px solid silver;
  background-image: url(./graphics/leftline.gif);
  background-repeat: repeat-y;
  background-position:20px 0px;
}
/* --------- 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:100%;
  display:inline; 
  /* margin-right:-170px; */
}
/* ---------- 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: 10px 0px 20px 222px; /* header is not hidden. Don't need a top margin */
}

/* ---------- navigation ----------------
  column1 is the navigation column.
  The amount of space required is:
    width+margin-left + margin-right + padding-left + padding-right
*/
#navigation {
	width: 180px;
	float:left;
	display:inline;
	margin-top: 30px;
	margin-left: 5px;
	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:left;
  width: 165px;
  border-top-style: solid;
  border-top-width: thick;
  border-top-color: #990;
  border-bottom-style: solid;
  border-bottom-width: thick;
  border-bottom-color: #990;
  border-left-style: dotted;
  border-left-width: .15em;
  border-left-color: silver;
  border-right-style: dotted;
  border-right-width: .15em;
  border-right-color: silver;
}		

/* --------------- 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;  
font-size: .75em;
color:#CCCCCC;
background-color:inherit;
width: 100%;
padding: 1em 0;
text-align: center;
border-top:1px solid 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: 195px; */
}

div#navigation ul li {
  font-size: .9em;
  text-align: left;
  letter-spacing: -.02em;
  margin-bottom:1em;
}

/* ----------- maincontent styles ---------------
These are the styles needed to have the maincontent
 display the way we want.
*/
div#maincontent h1 {

}
div#maincontent p {
margin-left: .5em;
margin-top: .75em; 
text-align:center;
}
 
#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;
}

/* ----------- sidebar styles ---------------
These are the styles needed to have the sidebars
display the way we want.
*/

#sidebar #tips {
  margin-top: 2px;
  margin-bottom: 2px;
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: #990;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #990;
	/* background: #FFFFFF url(./graphics/tips.gif) no-repeat top right;  */
	padding-top: 20px;
  padding-bottom: 5px;
}
#sidebar h1 {
	font-size: 1.2em;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 0px;
	margin-left: 5px;
	margin-right: 10px;
	border-bottom: 1px solid #990;
  background-color: inherit;
	color: #999900;
}
#sidebar p {
  font-size: .7em;
  margin-left: 5px;
  margin-right: 2px;
  margin-top: 1em;
  background-color: inherit;
  color: #930;
}
#sidebar #notes {
  margin-top: 2px;
  margin-bottom: 2px;
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: #990;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #990;
	/* background: #FFFFFF url(./graphics/notes.gif) no-repeat top right; */ 
	padding-top: 20px;
  padding-bottom: 20px;
}

#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: 10px 0;
  font-size: .75em;
  letter-spacing: 1px;
  background-color: inherit;
  color: #990;
}

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

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

}



.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 */