/* BODY ----------------------------------------------------------*/

body {
/*background: #fff url(grad1.jpg) repeat-x fixed bottom; */
background-color: #fff;
}

/* MAIN CONATAINER ----------------------------------------------------------*/

#MainContainer {
	position:absolute;
	left:50%;
	width: 710px;
	margin-left:-355px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #23a;
	letter-spacing: 0.1em;
	/* margin:0px auto; */
	/* margin-top: 20px; */
	/* margin-bottom: 20px; */
	text-align:left;
	margin-top: 10px;
  /* background-image: url(BigShadow1.jpg); */

}

p {
  line-height: 1.7em;
}

a:link {
color: #79e;
text-decoration: none;
}

a:visited {
color: #79e;
text-decoration: none;
}

a:hover {
color: #23a;
text-decoration: none;
}

a:active {
color: #23a;
text-decoration: none;
}


/* HEADER ----------------------------------------------------------*/

#Header {
background-image: url(NewBanner1.jpg);
float: left;
height: 116px;
width: 700px;
}

/* TEXT MENU ----------------------------------------------------------*/

#TextMenu {
background-color: #eee;
float: left;
height: 18px;
width: 690px;
padding-top: 5px;
padding-left: 10px;
color: #888;
font-size: 12px;
letter-spacing: 0;
}

/* MAIN BODY HEADER ---------------------------------------------------*/

#MainBodyHeader {
  width: 650px;
  margin-left: 10px;
  height: 50px;
}

/* MAIN BODY ----------------------------------------------------------*/

#MainBody {
background: #fff;
float: left;
height: 460px;
width: 708px;
}

#MainBody h1 {
  font-size: 16px;
  font-weight: normal;
  margin-top: 20px;
  margin-bottom: 5px;
}

/* FOCALS ----------------------------------------------------------*/

#BigFocalFrame {
  background-image: url(FBBigShadow1.jpg);
  height: 240px;
  width: 280px;
  float: left;
}

#BigFocalPicture {
  background-color: #fff;
  height: 220px;
  width: 265px;
}

#BigFocalText {
  margin-top: -20px;
  margin-left: 10px;
  font-size: 11px;
  color: #aaa;     
}

.FocalFrame {
  background-image: url(FBShadow1.jpg);
  height: 120px;
  width: 141px;
  float: left;
}

.FocalFrame img {
  vertical-align: middle;
  position: absolute;
  margin-top: -65px;
  margin-left: -75px;
  clip: rect(65px 200px 165px 75px);
  /*
  Clip to see center of image.
  Desired image size is width:125px, height:100px.
  
  The BigFocalFrame where the full image is displayed is height:240px.
  The margin_top:-70px centers the 240px full image height in the 100px
  small frame: 240px - 2*70px = 100px.
  
  Same for left-right. The BigFocalFrame where the full image is displayed
  is width:280px. The margin_left:-83px centers the 280px full image height
  in the 125px small frame: 280px - 2*83px = 125px.
  
  Clip dimensions (top right bottom left) as follows:
    top = -margin_top
    right = width - margin_left
    bottom = height - margin_top
    left = -margin_left
  */
 
}

/* BEAD SETS ----------------------------------------------------------*/

#BigBeadSetText {
  font-size: 11px;
  /*
  margin-top: -10px;
  padding-left: 5px;
  */
  margin-left: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  color: #aaa;     
}

#BigBeadSetFrame {
  background: url(BSBigShadow1.jpg) -190px no-repeat;
  height: 90px;
  width: 550px;
  margin-bottom: 15px;     
}

#BigBeadSetCorner {
  background: #fff url(BSShadowBL2.jpg) right no-repeat;
  margin-top: -30px;  
  height: 18px;
  width: 35px;
  margin-bottom: 5px;     
}

#BigBeadSetPicture {
  /* background: url(image/bs111.jpg) 0% 50% no-repeat; */
  height: 75px;
  width: 530px;
  margin-bottom: 15px;
}

.BeadSetFrame {
  background: url(BSShadow1.jpg) no-repeat;
  height: 70px;
  width: 100px; 
  float: left; 
}

.BeadSetFrame img {
  position: absolute;
  margin-top: -15px;
  margin-left: -50px;
  clip: rect(15px 130px 75px 50px);
  /*
  Clip to see image vertical center and far enough right to not see the
  left image edge. Desired image size is width:80px, height:60px.
  The BigBeadSetFrame where the full image is displayed is height:90px.
  The margin_top:-15px centers the 90px full image height in the 60px
  small frame: 90px - 2*15px = 60px.
  Clip dimensions (top right bottom left) as follows:
    top = -margin_top
    right = width - margin_left
    bottom = height - margin_top
    left = -margin_left
  */
}

/* FOOTER ----------------------------------------------------------*/

#Footer {
  height: 40px;
  width: 700px;
  float: left;
  padding-top: 20px;
  color: #aaa;
  font-size: 11px;
  letter-spacing: 0;
}

#Footer a:link {
color: #aaa;
text-decoration: none;
}

#Footer a:visited {
color: #aaa;
text-decoration: none;
}

#Footer a:hover {
color: #444;
text-decoration: none;
}

#Footer a:active {
color: #444;
text-decoration: none;
}

/* END ----------------------------------------------------------*/