/* 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.
   26Mar2007: Use with bernie4balance.com site
   18Jul2007: The page size is fixed. Use what I learned with qtantra here.

  Standard Colors:
    blue:  #1F15AA old as of 19jul2007
    
    darkest: #120094
    darker:  #1F15AA
    dark:    #3D4FE4
    light:   #A3C7FD
    lightest:#CBE8FF

*/

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

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

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

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

img {
  float:left;
  margin-right:1.2em;
}
img.right {
  border:none;
  float:right;
  margin-left:1.2em;
  margin-right:0;
}

/* -------------- h1 ---------------------
*/
h1 {
  background-color: inherit;
  color: #1F15AA;
  font-size: 1.1em;
  font-weight: bold;
  margin: 1em 0 .5em 0;
  text-align:center;
}
/* -------------- h2 ---------------------
*/
h2 {
  background-color: inherit;
  color: black;
  font-size: 1em;
  font-weight: bold;
  margin: .5em 0 .5em 0; 
  text-align:center;
}
/* -------------- h3 ---------------------
*/
h3 {
  background-color: inherit;
  color: black;
  font-size: .75em;
  font-weight: normal;
  margin: .3em 0 .5em 0;
  text-align:left;
}
/* -------------- h4 ---------------------
*/
h4 {
  background-color: inherit;
  color: black;
  font-size: 1em;
  margin: .3em 0 .5em 0;
  text-align:left;
}
/*-------------- 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; */
}

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


/* --------------- header ---------------------
  This defines the space above container_all
*/
#header {
  /* orig:19Jul2007 background: #FFFFFF url(./graphics/balogo.gif) no-repeat top; */
  background: #FFFFFF url(./graphics/Bernie_logo-blue_v1_72dpi.jpg) no-repeat top left;
  color:inherit;
  height: 160px;
}

#header h1 {
  background-color:transparent;
  color:#120094;
  font-family:'times new roman', times, serif;
  font-size:1.4em;
  font-style:italic;
  margin-left: 220px;
  margin-right: 50px;
  margin-top:0px; /* make sure there is no top */
  padding-top: 40px;
  text-align:center;
  width:480px;
}

/* -------- container_all -----------------
  contains all 3 columns.
  The graphic is 200 x 12. The line is at 190 pixels.
*/
#container_all {
  float:left;
  width:100%;
  border-top:1px solid silver;
  background-image: url(./graphics/leftline.gif);
  background-repeat: repeat-y;
  background-position:0px 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.
  18Jul2007: Fixed width! 600px leaving 200px for the sidebar.
*/
#container_left {
  float:left;
  width:600px;
}
/* ---------- container_mergeright -------------
  Replace container_left & maincontent with 
  container_mergeright if you will not have a sidebar
  (only navigation).
  width: 800 - totalwidth of navigation (200px)
*/
#container_mergeright {
  float:right;
  display:inline;
  width: 610px;
  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).
  18Jul2007: Fixed with. Easier to calculate.
*/
#maincontent {
  margin: 0px 0px 0px 190px; /* header is not hidden. Don't need a top margin */
}

/* ----------- thecontent ----------------
  nice little class that will contain the floats/clears.
*/
.thecontent {
  overflow:hidden;
}
.thecontent p {
  margin-left:10px;
}
#container_mergeright div.thecontent div.left p.center {
	font-size: 20px;
	line-height: 35px;
  text-align:center;
}
#container_mergeright div.thecontent div.left h1 {
	font-size: 24px;
  text-align:center;
}
#container_mergeright div.thecontent div.left{
	float:left;
	margin-left: 20px;
	width: 265px;
}

/* ---------- navigation ----------------
  column1 is the navigation column.
  The amount of space required is:
    width+margin-left + margin-right + padding-left + padding-right
*/
#navigation {
	width: 175px;
	float:left;
	display:inline;
	margin-top: 20px;
	overflow: hidden;
	/* border: 1px solid #000; */
}

/* -------------- adbar -------------------
  for use when no borders are needed. 
  Nice with graphics that are 175px wide.
*/
#ad_bar {
  float:right;
  width:175px;
}

#ad_bar img {
  border:none;
  margin:0;
  padding:0;
}

/* -------------- 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 {
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: silver;
  border-bottom-style: solid;
  border-bottom-width: .15em;
  border-bottom-color: #1F15AA;
  border-left-style: solid;
  border-left-width: thin;
  border-left-color: silver;
  border-right-style: solid;
  border-right-width: .15em;
  border-right-color: #1F15AA;
  float:right;
  /* margin-top:10px; */
  width: 170px;
}		
/* -------------- centerbox-------------*/

div#container_mergeright div.centerbox {
	margin-left: 20px;
	width: 350px;
}
div#container_mergeright div.centerbox div.course {
	margin-top:20px;
}
div#container_mergeright div.centerbox div.title {
	font-weight: bold;
}
div#container_mergeright div.centerbox div.info {
	font-size: 12px;
	margin-left: 10px;
}
div#container_mergeright div.contact {
	font-size: 14px;
	margin-left: 20px;
	margin-top: 20px;
}

/* --------------- contactinfo ----------

*/
#contactinfo {
  border-top: 1px solid silver;
  margin-top: 2em;
  padding: 1em 0 2em 1em;
}

#contactinfo img {
  float: left;
  margin-right: 1.2em;
}

#contactinfo h3 {
  background-color:inherit;
  color: #1F15AA;  
  font-size: .75em;
  font-weight:bold;
}

#contactinfo p {
  font-size: .75em;
  margin-top: 1em;
  padding-left: 1em;  
}

div#contactinfo p.tagline {
  font-size: .75em;
  margin-top: 1em;
  padding-left: 0em;
  text-align:center;
}

/* --------------- flyer ---------------
  Special formating for pages that are really flyers.
*/
#flyer {
  margin-left:10px;
}
#flyer h2 {
  font-weight:bold;
}
#flyer h2.leadin {
  font-weight:bold;
  margin: 1em 0 1em .3em;
  text-align:left;
}
#flyer h3 {
  background-color: inherit;
  color: #1F15AA;
  font-size: 1em;
  font-weight: bold;
  margin: 1em 0 1em 0;
  text-align:center;
}
#flyer h4 {
  margin: .3em 0 .5em 0;
  text-align:center;
}

#flyer h5 {
  margin: .3em 0 .5em 0;
  text-align:center;
}

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

/* ----------- 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;
  letter-spacing: -.02em;
  margin-bottom:1em;
  text-align: left;
}

div#navigation ul ul {
  float:none;
  font-size:.85em;
  list-style-type:none;
  margin-left:15px;
  margin-top:5px;
}

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

}
div#maincontent p {
  margin-left: 10px;
  margin-top: .75em; 
  text-align:left;
}
 
#maincontent ul {
  margin-top: 10px;
  margin-left:30px;
  font-size: .75em;
}
#maincontent ol {
  margin-top: 10px;
  margin-left:30px;
  font-size: .75em;
}
#maincontent table {
  font-size: .75em;
  margin: 15px;

}
#maincontent h2+ul {
  margin-top: .5em;
  margin-left: 4em;
  font-size: .75em;
}

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

}
div#container_mergeright p {
  margin-left: 10px;
  margin-top: .75em; 
  text-align:left;
}
 
#container_mergeright ul {
  margin-top: 10px;
  margin-left:30px;
  font-size: .75em;
}
#container_mergeright ol {
  margin-top: 10px;
  margin-left:30px;
  font-size: .75em;
}
#container_mergeright table {
  font-size: .75em;
  margin: 15px;

}
#container_mergeright 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 {
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #1F15AA;
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: #1F15AA;
  margin-bottom: 2px;
  margin-top: 2px;
  padding-bottom: 5px;
	padding-top: 20px;
}
#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 #1F15AA;
  background-color: inherit;
  color: #1F15AA;
}
#sidebar p {
  font-size: .7em;
  margin-left: 5px;
  margin-right: 2px;
  margin-top: 1em;
  background-color: inherit;
  color: #3D4FE4;
}
#sidebar #notes {
  margin-top: 2px;
  margin-bottom: 2px;
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: #09C;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #1F15AA;
	/* 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 */