/*The side column width can be modified by resetting three indicated critical values in the stylesheet. The same goes for the borders between the cols, which have their own critical value sets. */

html, body, ol, ul, li, dl, dt, dd, img {
  margin: 0; 
  padding: 0;
  border: 0;
	list-style: none;
}

body {
  padding: 0 395px; /* the critical side padding that sets the natural min-width! */ 
	background: url(images/staples.png); /* this BG tiles the area outside and behind the columns */
	color: #000; 
  font-family: Georgia, Times New Roman, serif; 
  font-size: 100.01%; /* this body font-size fixes an IE bug and maintains x-browser uniformity */ 
  text-align: center; /* centers the #sizer element in IE5.x/win */
}

.topfoot {
  height: 25px;
}

#sizer {
  margin: 0 auto; /* centers #sizer in standard browsers */
  padding: 0;
  width: 50%; /* this value controls liquidity; 0% = full rigid, 100% = full liquid */
  text-align: left; /* resets the default text alignment for the page */
	max-width: 120px;
}

#expander { /* Any % height here causes IE to lose the neg right margin */
	margin: 0 -365px; /* neg side margin values should be < or = to side body padding */
	min-width: 750px; /* This prevents Safari from losing the negative margins in narrow windows */ 
	position: relative; /* makes #expander visible outside #sizer in IEwin */
        background-image: url(images/parchment.jpg); 
} 

/*\*/
* html #expander {height: 0;} 
/* #expander must have "height: 0" in IEwin bug fixing */

/* The above is a modified Holly hack for #expander, with zero substituted for the 
usual 1% height value. Any % value on this element causes a horrendous IE bug! */ 


#wrapper1 {
  position: relative;
  /*background: url(images/someimage.img); */ /* this BG tiles the left column */
  font-size: .9em; /* set global font-size here */ 
  border: 0px solid #da5;
  border-width: 0px 0px;
} /* this positioning may be needed for IEwin if page is to contain positioned elements */

#wrapper2 {  
  position: relative; /* extra insurance against bugs in IEwin */
  /* background: url(images/ltleaves.jpg) 100% 0 repeat-y right; this BG tiles the right column with a right-aligned image*/
}


/****************** Main Page Structure *****************/

/* To modify the side column widths and the col divider widths, the values that are 
marked "critical" and also refer to the desired mod MUST be changed as a group. */


.outer {
    background-image: url(images/parchment_lt.jpg);
  border-left: 0px solid #da5; /*** Critical left divider dimension value ***/
  border-right: 0px solid #da5; /*** Critical right divider dimension value ***/
  margin-left: 130px;    /*** Critical left col width value ***/
  margin-right: 220px;    /*** Critical right col width value ***/
}

.float-wrap {
  float: left;
  width: 100%;
}

.center {
  float: right;
  width: 100%;
}

.left {
  float: left;
  position: relative; /* Needed for IE/win */
  width: 130px;    /*** Critical left col width value ***/
  margin-left: -132px;    /*** Critical left col width value ***/ /*** Critical left divider dimension value ***/
}

.right {
  float: right; 
  position: relative; /* Needed for IE/win */
  width: 220px;    /*** Critical right col width value ***/
  margin-right: -222px;    /*** Critical right col width value ***/ /*** Critical right divider dimension value ***/
  margin-left: 2px;   /*** Critical right divider dimension value ***/
}

.centerbox {
  font-weight: normal;
  text-align: left;
  overflow: visible;
  width: 100%;
  padding-bottom:158px;  /* makes room for the foot image */
  
}

.container-left {color: #000; padding-bottom:10px} /* makes room for the foot image */

.container-right {color: #000; padding-bottom: 100px;} /* makes room for the foot image */


img.singer {margin:4px 10px 4px 0px; float:left;}

/*************** Header and Footer elements *****************/

.header {
  width: 100%;
  background-color: #FFFFFF;  
  height: 136px;
  color: #b33;
  padding: 5px 0;
  background: url(images/smbird.png) no-repeat 29px 2px;

} /* BG is made to be in fixed position here */

/*\*/
* html .header {background-position: 29px 2px;} /* Must match .header background position if IE is to match compliant browsers */
/* IEwin hack needed because the BG is in a positioned wrapper and shows
variance. IEwin does not support fixed backgrounds on elements other than the body */

.header-img {
position: absolute;
top: 80px;
left: 130px;
}

.righthead-staple {
position: absolute;
top: 16px;
right: 12px;
}

.lefthead-staple {
position: absolute;
top: 7px;
left: 9px;
}

.header span {color: #373;} 

.header h1 {display:none;}

.footer {
  width: 100%;
  font-size: 1.8em;
  font-weight: bold;
  clear: both;
  padding: 5px 0 15px;
  position: relative;
/* background: url(images/ltleaves.jpg); */
}

.footer p {margin: 10px 0 0 20px; color: #764a2f; z-index:2;}

.footer hr {
  color: #944;
	margin: 0;
	background: #944;
	height: 4px;
}

.rightfoot-img {
position: absolute;
top: -70px;
right: 22px;
}

.leftfoot-img {
position: absolute;
top: -185px;
left: 340px;
}

.rightfoot-staple {
position: absolute;
top: 16px;
right: 12px;
}

.leftfoot-staple {
position: absolute;
top: -17px;
left: 9px;
}

/************** Spacing Controls for various column contents ***************/

.outer ul {
  text-align: center;
  margin: 5px 0;
}

.textpadder {padding: 12px;}


/************** Generic Rules *************/

a {/* color: #000; */ vertical-align: bottom;}

p  {margin: .8em 0;}

h1 {margin: 70px 0 10px 190px;}

h2 {
  font-size: 1.6em; 
  /* text-align: center; */
  padding: 5px 0; 
  margin: 0; 
  border: 0px solid #dcd3c2;
  /*  border-color: #fef5e4 #d4cab9 #c2b9a8 #ece3d2; */
  color: #764A2F;
  /* background: "#FFF";  url(images/ltleaves.jpg); */
  font-family: Georgia, Times New Roman, serif;
}

h3 {
margin: 1em 0 .3em;
}

.alignright {margin: 0 10px 10px 0; text-align: right;}

.small {font-size: .8em;}

.subhead {font-size:50%; vertical-align:top; padding-left:30px;}

/************** Fancy Nav Buttons *************/

.sidenav li a {
  display: block; 
  border: 2px solid #d4cab9;
  color: #764A2F;
  text-decoration: none;
    background-image: url(images/parchment_lt.jpg);
  padding: 4px 5px 4px 10px;
  font-family: Georgia, Times New Roman, serif;
  font-size: 1.1em;
  font-weight: bold;
}

#home .home, #links .links, #events .events, #contact .contact, #singers .singers, #about .about, #thanks .thanks {
  color: #611;
  font-weight: bolder;  
  text-decoration: overline underline; 
}

.sidenav li a:hover {
  border-color: #fef5e4 #d4cab9 #c2b9a8 #ece3d2;
  background-position: -1px -1px;
  padding: 3px 6px 5px 9px;
}

.sidenav li a:active {
  border-width: 3px 1px 1px 3px;
  border-color: #c2b9a8 #ece3d2 #fef5e4 #d4cab9;
  background-position: 0 0;
  padding: 4px 5px 4px 10px;
}


/************** Special Fixes *************/

.outer {word-wrap: break-word;}
/* Prevents long urls from breaking layout in IE, must 
be hidden in a conditional comment for CSS to validate */

img {max-width: 100%;} 
/* prevents oversize images from breaking layout in browsers that support max-width */

/* \*/
* html #wrapper1,
* html #wrapper2,
* html .outer a, 
* html .container-left, 
* html .container-right,
* html .outer,
* html h2,
* html .sidenav li a 
{height: 1%;}
/* Holly hack */


/*** Variance fixes for IEwin ***/

/*\*/
* html .outer p {margin-right: -6px;}
/* */


/**************** Utility Rules *******************/

/*\*/ /*/
.sidenav a:hover {position: relative;}
/* this fixes an IEmac hover bug in the left column, hidden from other browsers */


.brclear { /* Use a break with this class to clear float containers */
  clear:both;
  height:0;
  margin:0;
  font-size: 1px;
  line-height: 0;
}

.hidden {display: none;}