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

    08Jul2007: Trying for an underlying 4 column layout of 200 pixels each.
                with 25px gutters between columns. The margin-left is the
                gutter.
                Navigation: 5px margin-left and 195px for the navbar (total 200)
                Center column (maincontent) is 375px wide with a margin-left:25px
                Sidebar: is 171px wide to accommodate 2px right&left borders as well
                          as the 25px margin-left. (200-25-(2*2)=>171)
                The Center Column can be split into 2 columns where the left
                column does not need a margin-left setting because it inherits
                that. Each column is 175px wide, and the right column has the
                margin-left setting of 25px.
     23Jul2007: Implementing new color scheme. Taking the Text Color to be for the headings only,
                 and not for the body text.
     24Jul2007: Text color is for the body. Set headings to chocolate.
     28Jan2008: Center the page within the browser window.
     11Feb2008: remove centering. change color back

  Standard Colors:
    orange: F93
    brown: C60
    green: 990
    
    23Jul2007: New colors:
      Background color: #F3FECC  light green.
      Text color:       #454545 gray
      
      Link colors:
        active: #66230D  chocolate
        visited:#807F00  dark green
        hover:  #B06410  tan


*/

/* ----------- body --------------
  This describes the basic font and color information
*/
body { 
  background-color: #d3e9dd; /* try this with a white page background */
  /*background-color:#66230D;   */
  color:black;
  font-family: verdana, arial, helvetica, sans-serif;
	font-size: 100%;
	text-align:center;	/* 20080128: added */
}

/* -------------- * -----------------
  recommended to be placed after the body declaration
  to eliminate the default margins and padding for all 
  elements. */
* {
  margin: 0;
  padding: 0;
}

/* -------------- 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: #FFFFFF url(./graphics/qtantrabackground_white.jpg) no-repeat top left;
	/* background: #F3FECC url(./graphics/qtantrabackground.jpg) no-repeat top left;   */
	color: #000000;
  margin-left:auto;  	/*  20080128: added */
  margin-right:auto;	/*  20080128: added */
  text-align: left; 
  width: 800px;
}

/* --------------- common tag styles -------------- */
/* --------------- a (lvha order) --------- */
a:link {
  background-color: inherit;
  color: #66230D;
  /* font-weight:bold; */
  text-decoration: none;
} 
a:visited {
  background-color: inherit;
  color: #807F00;
  /* font-weight:bold; */
  text-decoration: none;
}
a:hover {
  background-color: inherit;
  color: #B06410;
  /* font-weight:bold; */
  text-decoration:underline;
}

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

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

/* -------------- h1 ---------------------
*/
h1 {
  background-color: inherit;
  border-bottom-color: #66230D;
  border-bottom-style:dotted;
  border-bottom-width: 2px;
  color: #66230D;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 2px;
  padding-bottom: 5px;
}

h1#graphic {
  padding-bottom:0px;
}
h1.graphic {
  padding-bottom:0px;
}
/* -------------- h2 ---------------------
*/
h2 {
  background-color: inherit;
  border-bottom-color: #66230D;
  border-bottom-style:solid;
  border-bottom-width: 1px;
  color: #66230D;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.0em;
  font-style: italic;
  font-weight: normal;
  letter-spacing: 3px;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-top: 10px;
}
/*-------------- 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 ---------------
*/
p.quote {
  background-color: inherit;
  color: #66230D;
  font-style:italic;
  padding: 5px 15px;
}

span.q_author {
  color: #454545;
  background-color:inherit;
}

div#sidebar p.bigquote {
  font-size:18px;
  font-style:italic;
  font-weight:bold;
  line-height:28px;
  margin: 10px 10px;
  text-align:center;
}
div#sidebar p.q_author {
  text-align:center;
}

/* --------------- header ---------------------
  This defines the space above container_all
*/
#header {
  height: 200px;
  position:relative;
  text-align: center;
  /* visibility: hidden; */
}

form#search {
	position:absolute;
	left:600px;
	top:125px;
}

#header p{
	visibility:hidden;
}

/* -------- 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:600px;  /* trying for 4 columns of 200 each */
}
/* ---------- container_mergeright -------------
  Replace container_left & maincontent with 
  container_mergeright if you will not have a sidebar
  (only navigation).
 22Jun2007: need a bit of space for IE to work properly. Is this 
  because there is a border to the left of the background image
  on the page in IE?
*/
#container_mergeright {
  display:inline;
  float:left;
  margin-left:25px;
  margin-bottom:20px;
  width: 575px;
}
/* ---------- 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).
  
  600px - 225px = 375px
*/
#maincontent {
  margin: 0px 0px 20px 225px; 
}

.thecontent {
 overflow:hidden; 
}

/* ---------- navigation ----------------
  column1 is the navigation column.
  The amount of space required is:
    width+margin - left + margin-right + padding-left + padding-right
*/
#navigation {
	display:inline;
	float:left;
	margin-bottom:20px;
	margin-right:0;
	margin-top: 30px;
	overflow: hidden;
	padding-right:0;
	text-transform:uppercase;
	width: 200px;
}
/* -------------- ad_bar ----------------
  2007Jul10: This is meant to be a sidebar that
  consists of an image that is 175px wide. 
  No borders or anything that might cause it
  to slip below the maincontent.
*/
#ad_bar {
  float:right;
  width:175px;
}
#ad_bar img {
  border:none;
  margin:0 0 10px 0;  /* must get rid of any margins */
  padding:0; /* must get rid of any padding */
}
/* -------------- 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;
  border-bottom-color: #66230D;
  border-bottom-style: solid;
  border-bottom-width: thick;
  border-left-color: silver;
  border-left-style: dotted;
  border-left-width: 2px;
  border-right-color: silver;
  border-right-style: dotted;
  border-right-width: 2px;
  border-top-color: #66230D;
  border-top-style: solid;
  border-top-width: thick;
  margin-right:5px;
  width: 165px;
}		
/* -------------- sidebar_noborder ----------------
  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_noborder {
  float:right;
  /* width: 150px;
  margin-right:25px; */
  text-align:left;
}		

.next {
  margin-right:0;
  margin-top:20px;
  
}
.next img {
  border:none;
  float:right;
}
.next a {
  background-color:inherit;
  color:#B4612B;
  float:right;
  font-size:.8em;
  font-weight:normal;
  letter-spacing:1px;
  margin-bottom:20px;
  margin-right:10px;
}
#sidebar_noborder .thecontent .sale p {
	color: red;
	font-size: 1.0em;
	
}

/* --------------- 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 {
  border-top-color: silver;
  border-top-style: dotted;
  border-top-width: 2px;
  clear:both;  
  margin-left: 225px;
  margin-top: 5px;
  /* padding: 4px 0; */
  text-align: center;
  /* width: 80%; */
  width:575px;
}

/* ----------- 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: .75em;   /* 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;
} 

div#subscribe_buttons {
  position:relative;
  text-align:right;
}
div#subscribe_buttons img{
  border: none;
  margin-top: 0px;
  margin-right:0px;
}
div#subscribe_buttons #yahoobutton {
  float:right;
}
div#subscribe_buttons #emaillistbutton {
  float:right;
}
div#subscribe_buttons #emaillistbutton img{
  margin-top: 0px;
}
div#subscribe_buttons #yahoobutton img{
  margin-top: 15px;
}
div#subscribe_buttons #sslbutton {
  float:right;
  margin-top:55px;
}


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

div#maincontent div.bkgimage h1{
  color:#66230D;
  /* background: #F3FECC url(./graphics/TT_montage2.jpg) no-repeat top left;  */
  background: #FFFFFF url(./graphics/TT_montage2.jpg) no-repeat top left;  
  text-align:right;
}

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

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

#container_mergeright h1 {
  margin-right: 75px;
}
#container_mergeright h2 {
  margin-right: 75px;
}

#container_mergeright p{
  margin-top: .75em; 
}
/* ------------- table.vocabulary --------------
*/
table.vocabulary{
  font-size: .75em;
  margin-right:25px;
  /* width:100%; */
}
table.vocabulary tr{
  padding-top:10px;
}
table.vocabulary td {
  padding-left:20px;
  padding-top:10px;
  vertical-align:text-top;
}
table.vocabulary td:first-child {
  padding-left:10px;
  vertical-align:text-top;
}
table.vocabulary thead {
  background-color:inherit;
  color: #66230D;
  font-size: 1em;
  font-weight:bold;
}

table td.label{
  background-color: inherit;
  color: #66230D;
  letter-spacing: 3px;
  padding-right: 5px;
}

/* --------------- whatsnew styles --------------
*/
#whatsnew {
  /* border-left-color: silver;
  border-left-style: dotted;
  border-left-width: thin; */
  /* display:inline; */
  float:left;
  width:375px;
 /* margin-bottom:20px; */
 /*  overflow:hidden; */
}

#whatsnew h1 {
  background-color: inherit;
  border-bottom: none;
  color: #ed018a;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 1.6em;
  font-style: normal;
  font-weight: normal;
  letter-spacing: .2em;
  margin-left: 0;
  margin-bottom:0;
  padding-bottom: 0;
  padding-left: .3em;
  padding-top: .6em;
  text-align:center;
}

#whatsnew .newitem {
  border-top:thin dotted silver; 
  clear:both;
  margin-top: 10px;
}

#whatsnew .newitem_noborder {
  border-top:none; 
  clear:both;
  margin-top: 10px;
}

#whatsnew img {
  border:none;
}
#whatsnew .newitem img {
  border: 0;
  /* display:inline; */
  float:left;
  margin-bottom:10px;
  margin-right: 10px;
}
#whatsnew .newitem .head {
	display:block;
	overflow:hidden;
	width:375px;
}
#whatsnew .newitem h2 {
  background-color: inherit;
  border: none; 
  color: #66230D;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0;
  margin: 10px 0px 10px 0px;
  padding: 0;
}
#whatsnew .newitem p {
  font-size: 11px;
  margin-bottom: 10px;
  margin-top: 0px;
}

p.intro {
  color: #454545;
  font-family:'times new roman', times, serif;
  font-size:.95em;
  font-weight:bold;
  margin: 0 30px 0 30px;
  padding:0;
  text-align:center;
}

p.intro strong {
  font-size:1.5em;
}

/* --------------- items styles -----------------
*/
/* This section styles the items and the individual item. Right now
   I'm using the generic terms rather than "courses/course" or "techniques/technique"
   which would be specific to the pages these items are on.
*/

#items {
 /* border-top-color:silver;
  border-top-style:dotted;
  border-top-width:2px; */
  margin-top: 5px;
  overflow:hidden; /* allows clearfix to work only on data in this container */
}

#items .item {
  margin-left: .5em;
  margin-top: .6em; 
  padding-top: 5px;
}

#items .item h3 {
  font-size: .8em;
  font-weight: normal;
	margin-bottom:5px;
  padding: 0;
}

#items .item h3 a:link {
  background-color: inherit;
  color: #66230D;
  font-size: inherit;
  /* font-weight: bold; */
	letter-spacing: 1px;
  text-decoration: underline;
}

#items .item h3 a:visited {
  background-color: inherit;
  color: #807F00;
  /* font-weight: bold; */
	letter-spacing: 1px;
  text-decoration: underline;
}

#items .item h3 a:hover {
  background-color: inherit;
  color: #B06410;
  /* font-weight: bold; */
	letter-spacing: 1px;
  text-decoration: underline;
}
#items .item img {
  margin-top:0;
}

#items .item p {
  line-height:1.3em;
  margin: 0;
  padding: 0;
}

#items .item p a:link {
  background-color: inherit;
  color: #66230D;
  font-size:.9em;
  font-weight: normal;
	letter-spacing: 2px;
  text-decoration: none;
} 

#items .item p a:visited {
  background-color: inherit;
  color: #807F00;
  font-size:.9em;
  font-weight: normal;
	letter-spacing: 2px;
  text-decoration: none;
}

#items .item p a:hover {
  background-color: inherit;
  color: #B06410;
  font-size:.9em;
  font-weight: normal;
	letter-spacing: 2px;
}

#items .item ul {
  background-color: inherit;
  color: gray;
  font-size: .6em;
  list-style-type: none;
  padding-top: 1em;
}

#items .item ul li strong {
  background-color: inherit;
  color: #66230D;
}
/* 2007Jul23: is this used? */
#items .item table {
  font-size: .6em;
  margin: 10px;
}
#items .item table thead {
  background-color: inherit;
  color: #66230D;
  font-weight: bold;
}
#items .item table tbody {
  background-color: inherit;
  color: gray;
}
#items .item table tbody td {
  padding-left: 8px;
}
#items .item table.datetime td.column1 {
  width: 180px;
}
#items .item table.costs td.column1 {
  width: 100px;
}

p.feedback {
  background-color: inherit;
  color: #990;
  font-weight: bold;
  padding-left: 50px;
  padding-top: 20px;
}

p.feedback a:link {
  background-color: inherit;
  color: inherit;
}
div.register p a {
	background-color:inherit;
	color:#66230D;
}

/* --------- footer ------------ */

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

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

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

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


#footer ul.address {
  background-color: inherit;
  color: #66230D;
  font-size: .75em;
  font-weight:bold;
  /* letter-spacing: 1px; */
  margin: 10px 0;
  padding: 0;
}

#footer ul.address li {
  border: 0;
  display: inline;
  padding: 0 1px 0 0px;
}

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

#footer ul.address li strong {
  background-color: inherit;
  color: #66230D;
  font-weight: bold;
}

#footer ul.address li a {
  background-color: inherit;
  color: #66230D;
  font-weight: bold;
  text-decoration: underline;
}

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



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