body {
  font-family: arial, helvetica, serif;
  text-align: center;
  margin: 0;
  background-color: white;
}
.squish {padding: 5px;}

#banner {
  background: right top url(images/BigFatLink.jpg) no-repeat;
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 980px;
}
#banner a h1, #banner a h2 {
  display: none;
}
#banner a {
  position: absolute;
  top: 0;
  left: 0;
  width: 350px;
  height: 180px;
}
#banner span a {
  position: absolute;
  top: 180px !important;
  left: 0;
  width: 300px;
  height: 20px;
}

#images  {
  position: relative;
  padding-top: 7px;
  float: left;
  width: 342px !important;
  width: 300px !important;    /*  3/24  */
  width: 300px !important;    /*  3/24  */

  margin-left: 50px !important;   /* 3/24   */
  margin-left: 25px;  /* 3/24 new makes IE6 work but might bork IE7????    */
}

.bigLeftImage {
  position: relative;
/*   background: #000 top left url(images/WhiteCurveTop.gif) no-repeat;      going in template!!   */
  float: left;
/*    height: 300px;     dave comment out to allow for several pics and different length  */   
/*  margin-left: 50px !important;      3/24 */
/*  margin-left: 25px;     3/24  makes IE6 work but might bork IE7????    */
  padding: 0 !important;

  width: 450px;
  width: 320px;   /* adjust for right and left margin  */
  width: 325px !important;  /* 3/24   to scooch over content  */
  width: 300px;   /* 3/24  */ 
}

#homeLeftText  {      /* 3/24  */
  position: relative;
  top: -19px !important;
  top: -18px;
  font-size: 11px;
  width: 250px;
  color: #625a43;
  background-color: #EBE9E4;
}

#flash {     /*  3/24  */
  height: 250px;
  width: 250px;

  top: -15px !important; 
  top: -18px;  

  position: relative;
  z-index: 0;
}

.flashBigLeftImage {     /* 3/24  */
  position: relative;
/*   background: #000 top left url(images/WhiteCurveTop.gif) no-repeat;      going in template!!   */
  float: left;
/*    height: 300px;     dave comment out to allow for several pics and different length  */   
/*   margin-left: 50px !important;       3/24  */
/*  margin-left: 25px;   3/24    */
  padding: 0;
  width: 450px;
  width: 320px;   /* adjust for right and left margin  */
  width: 325px;  /* to scooch over content  */
  width: 300px;   /* 3/24  */ 
}

#flashHiZLow  {     /*  3/24  */
  top: -33px !important;
/*  top: -36px;   */
  height: 15px;
  width: 250px;
  position: relative;
  z-index: 1;
}

#holdmenus {position: relative;  width: 980px;}
#menu1 li {position: relative;}
.box {
  display: inline;
}
/*  #menu1 .box {  height: 30px;}  /* was for IE   */

#menu1 #myajaxmenu .active .box img {
  padding-top: 3px !important;   /* today  push FF text down a little.     dave was pushing down FF menu items, see plain menu1 padding.  */
  padding-bottom: 20px;    /* 3/25    key to safari tab touching bottom  */
}
#menu1 .active .box {
  height: 15px;  /* needed for IE  */

  position: relative;
  top: 0 !important;
  top: -4px !important;  /* today   moves tab up to top of div   */

  top: -12px;  /* today IE  k, at -12 we IE hits the top!    */

  z-index: 0;
  background: url(images/pathTabLeft.gif) no-repeat left top;   

  margin: 0 !important;

  margin: -5px -5px 0 0px;   /* right padding IE shows right tab  */
  margin: 0 -5px 10px 0;     /* today  IE  */

  padding: 13px 0 10px 5px !important; 
  padding: 13px 0 14px 5px !important;  /*    today   whoa changing top borked left curve.    3rd parm is key for reaching bottom   */

  padding: 5px 0px 0px 5px;   /* left padding makes left curve visible.  */ 
  padding: 0px 0px 0px 5px;    /* today  IE   top padding maybe not needed for height here (see below), and may be bad.    bottom padding not working well cuz bleeds into div below   */  
}
#menu1 .active .box a {
  height: 15px;  /* needed for IE    height change did not make this bigger in IE!    */
  position: relative;
  z-index: 1;
  background: url(images/pathTabRight.gif) no-repeat right top; 

  margin: 0 -5px 0 0 !important;     /* neg part shows tab better  */

  margin: -5px -5px 0px 0;     /*  top margin interacts with other div   */
  margin: 0 -5px 10px 0;     /*  today IE   wow, 3rd parm key to pushing bottom down, unlike padding for FF   */ 

  padding: 8px 5px 9px 0 !important; 
  padding: 8px 5px 12px 0 !important; 
  padding: 8px 5px 13px 0 !important;   /* today whoa changing top borked right curve.  */

  padding: 10px 7px 0 0;   /*  top padding here bleeds into other div.  */
  padding: 12px 7px 10px 0;    /* today  Wow, top padding pushed IE text img down nice.    IE  extra bottom padding bad, pushes down lower divs    */
}
#menu1 #myajaxmenu li  {
/*  padding-top: 20px;     wow padding and margin top here did not push anything down   */
  margin-right: 10px !important;
  margin-right: 15px;
}
#menu2 #myajaxmenu li  {       /* 3/31  */
  padding-right: 5px;
}
#menu3 #myajaxmenu li  {       /* 3/31  */
  padding-right: 3px;
}
#hiZHigh  {
  height: 15px;
  width: 250px;
  position: relative;
  z-index: 1;
}
#midZ  {
  top: -15px !important;
  top: -18px;
  position: relative;
  z-index: 0;
}
#hiZLow  {  
  top: -30px !important;
  top: -36px;
  height: 15px;
  width: 250px;
  position: relative;
  z-index: 1;
}

#donateNow  {
  z-index: 4;
  position: absolute;
  right: 0;
  top: 248px !important;

  top: 249px !important;   /* for new image  */
  top: 247px;
}
#oneStone  {
  position: absolute;
  right: 10px;
  bottom: 19px !important;
  bottom: 10px;
}

#menu2 a   {
  color: #fff;
}

/*   #menu1 .active  {
  background-image: url(images/SomethingHere.gif);
  background-repeat: no-repeat;
  background-position: 0 5px;
}     */

#menu1 img, #menu2 img, #menu3 img, #footer img  {
vertical-align: top;
}

#menu1 .active a {
/*  background-color: #e25e21;  */
/*  padding: 3px 4px 3px 4px;    */
}

/*    #menu4 ul ul .active a, #menu3 ul ul .active a, #menu2 .active a   {    handling menu3 below     */
#menu4 ul ul .active a, #menu2 .active a   {
  color: #F0A982;    /* dave  1st part is the key to getting the last row to display right  */ 
}

#menu3 .category, #menu4 .category {
  display:none;  
}

#menu3 .active, #menu4 .active {
  display:inline;
}

#menu3 span, #menu4 span {
  display: none;
}

#menu1  {
  position: relative;
  overflow: hidden;     /* today   */
  padding-top: 2px;   /* dave IE push down menu items a little  */
  background-color: #553d6e;
  color: #fff;
  height: 40px;
  width: 980px;
}
#menu1 ul {
  padding: 10px 0 0 40px;    /* indents and places line   */
}
#menu1 #myajaxmenu a  {
  font-size: 18px;
}

#menu2  {
  position: relative;
  overflow: hidden;
  top: 0;
  background-color: #e25e21;
  color: #fff;
  height: 40px;   /* will be shorter, as slice of orange plus IMG to right will make up menu3 below  */
  width: 980px;
}
#menu2  ul {
  padding: 10px 0 0 40px;    /* indents and places line   */
}
#menu2 #myajaxmenu a  {
  font-weight: bold;
  font-size: 13px;
}

#menu3  {
  position: relative;
  overflow: hidden;
  z-index: 0;
  text-transform: uppercase;
/*  background: #e25e21 bottom left url(images/orangeSlice.gif) repeat-x; */
  background: #e25e21 bottom left url(images/orange-shim.gif) repeat-x;
  color: #fff;
  height: 50px;
  width: 980px;
}
#menu3  ul {
  padding: 0 0 0 40px;    /* indents and places line   */
}
#menu3 ul ul {
  padding: 0;    /* second bunch not indented   */
}
#menu3 #myajaxmenu .active a {
 color: #553d6e;
  font-weight: bold;
}
#menu3 #myajaxmenu #myajaxmenu .active a {
  color: #F0A982;
}

#menu4  {
  text-transform: uppercase;
  background-color: #e25e21;
  color: #fff;
  height: 20px;
  width: 980px;
}

#menu1 ul, #menu2 ul, #menu3 ul, #menu4 ul   { 
  margin: 0;
}

#title   {
  color: #625a43;
  margin: 15px 0 15px 50px;  /* left should match just below  */
  font-size: 30px;
}



#pushCurveDown  {
/*  margin-top: -15px;   */

  margin-top: 270px;    /* for some reason 5 extra px for FF  */
  margin-bottom: 0 !important; 
  margin-bottom: -3px;   /* for IE  */

/*  position: relative;     would have worked, but extra added to img messes up IE
left:0px;
top:270px !important;   /* seems to take 15 from top curve  */
top:267px;    IE  */

  height: 15px !important;
  width: 250px;
/*   background-color: black;   /*  test only   */
}

#footer  {
  position: relative;
   text-transform: uppercase;
  color: #fff;
  background-color: #e25e21;
  padding-top: 25px !important;
  padding-top: 20px;
  width: 980px;
  height: 40px !important;
  height: 50px;

  text-align: center;
  font-size: 12px;
}
#footer .active a {
  color: #F0A982;
}
#footer a {
/*  font-weight: bold; */
  color: #fff;
}
#footer #myajaxmenu li {
  padding-right: 40px;
  color: #fff;
}

h1  {
  font-size: 20px;
  margin: 0;
}

h2  {
  font-size: 17px;
  margin: 0;
}

p  {
  margin-top: 4px;
  padding: 0;  /* dave  */
}

#rightit {
  float: right;
}

.squish {
  padding: 20px;
}

.diffcolor  {
  background-color: #3493A7;
}

.menucolor  {
  background-color: #156F89;
}

#myajaxmenu ul  {
/*   padding-left: 30px;   tried using this to indent all menus.  only worked for one!  */
  list-style: none;
  display: inline;   /* dave  the Magic key to fully vanishing the span!!!!   */
}

#myajaxmenu li  {
  margin-right: 10px;
  display: inline;
}

a {
  color: #fff;
  text-decoration: none;
}

#content  {      /* wrapper width 980  */
/*  height: 350px;    */
  float: left;
  font-size: 12px;
  color: #625a43;

  text-align: left;
  width: 580px !important;
  width: 610px;    /* for IE7 4/4  */
  padding-top: 0px;

  display: block;
  list-style-type: disc;

}

#content a, #homeLeftText a  {
  color: #e25e21;
}

#content li   {
  padding-left: 5px;    /* fixes invisible FF bullets caused by float left in content!  */
}

#myajaxmenu  {
  position: relative;
  margin: 0;
  height: 20px;
  font-size: 12px;
  padding-left: 5px;  /* key to fixing over wideness.  WEIRD... I adjusted this and the line below, but the IE line wanted to be the same!  Same with height line below!!!!  */ 
}

#wrapper  {
  position: relative;
  width: 980px !important;

  text-align: left;
  margin: 0 auto; 
  background-color: #fff;
  
  border-bottom: 1px solid #625a43;
  border-left: 1px solid #625a43;
  border-right: 1px solid #625a43;
}

.cls  { clear: both;}

.styleheader {
font-size: 14px;
font-family: arial, helvetica, serif;
font-weight:bold;
 color: #625a43; 

}