body {
margin: 0;
padding: 0;
background: white url(../images/back.gif) repeat left top; 
color: black;
font-family: Constantia, "Palatino Linotype", Palatino, Georgia, Times, "Times New Roman", serif;
font-size: 98%;
}
/* ================= END VIEWPORT SETUP =================== */

#header {  /* contains header graphic  */
margin: 0;
padding: 0;
width: 100%;
padding-top: 1em;
}

/* place the risk bar (logo) on top */
#logo{
margin: auto;
text-decoration: none;
background: transparent;
width: 782px;
height: 135px;
}

#logo a:link, #logo a:visited, #logo a:hover {
text-decoration: none;
border: none;
background:  transparent;
}

#wrapper {  /* start after header closes, sets pages width */
width: 96%;
max-width: 44em;
margin: 0 auto;
background-color: white;
padding: 1em;
border: 2px solid #cdb38b;
}

#page {  /* start (immediately) after wrapper, sets text width  */
max-width: 42em;
font-family: Constantia, "Palatino Linotype", Palatino, Georgia, Times, "Times New Roman", serif;
line-height: 1.2;
margin: 0 auto;
font-size: 110%;
width: 100%;
background-color: white;
}


/* ==========  box for Jonkro intro text  ========== */

.introbox {
background: white url(../images/notepaper.gif) repeat left top; 
position: relative;
width: 620px;
height: auto;
margin: 1.6em auto 1.2em auto;
padding: 0.4em;
font-size: 116%;
line-height: 1.2;
border-top: 1px solid #CDAA7D;
border-right: 4px outset #8B795E;
border-bottom: 2px solid #363636;
}

.introbox p {
padding-left: 85px;
line-height: 1.3;
}

/* ======== end intro text ========= */

#main-text {
text-align: left;
font-size: 100%;
width: 100%;
background-color: white;
padding: 1em;
}

/* ======== Animated tabs ============ */
#nav-bar {
font-family: Constantia, "Palatino Linotype", Palatino, Georgia, Times, "Times New Roman", serif;
line-height: 1.2;
margin: 1em auto 0.1em auto;
font-size: 110%;
width: 96%;
max-width: 42em;
background-color: white;
border: 2px solid #cdb38b;
border-bottom: 2px solid #8b4513;
}

.animatedtabs{
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
margin-top: 0.5em;
padding-top: 0.4em;
height:  30px;
}

.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(../images/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(../images/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */

.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
/* ======== end Animated tabs ============ */


/* ======== PayPal Order block ============ */
#paypal-block td {
vertical-align: middle;
text-align: center;
border: none;
}
/* ======== End PayPal Order block ===========*/

.center {
text-align: center;
margin-right: auto;
margin-left: auto;
}

#cover-pic { /* place cover graphic in text on left  */
float: left;
width: 284px;
padding: 2px;
}

.brdr {
margin: 2px 4px;
border: 4px solid #708090; 
padding: 2px;
}

.nobrdr {
border: none;
margin: 2px 4px;
}

.pic-right { /* float any graphic in text on right  */
float: right;
margin: 2px 2px 2px 6px;
text-align: center;
font-size: 90%;
font-style: italic;
}

.right {
float: right;
}

.clear {
clear: left;
clear: right;
}

.pic-left { /* float any graphic in text on left  */
float:  left;
margin: 2px 6px 2px 2px;
text-align: center;
font-size: 90%;
font-style: italic;
}



/* ==========  the divider bar ======== */
div.hr {
	height: 30px;
	background: url(../images/bar.gif) no-repeat center;
	margin: 5px auto 2px auto;
}  /* art/blue-bar.jpg */
div.hr hr {
  display: none;  }
/* end divider bar */


#paypal-block {
width: 80%;
margin-right: auto;
margin-left: auto;
}

.book-link {
width: 30%;
font-family:  Corbel, Calibri, Arial, Verdana, "Bitstream Vera Sans", sans-serif;
font-size: 80%;
}

#footer {
margin-top: 1em;
margin-right: auto;
margin-bottom: 1em;
margin-left: auto;
}

.copyright {
text-align: center;
font-size: 80%;
color: #DEB887;
}

.copyright a:link, .copyright a:visited, .copyright a:hover {
text-decoration: none;
color: #DEB887;
}

.copyright a:hover {
text-decoration: underline;
}


/* ====== Ball lists including  print directions ===== */

.smallball { 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

.smallball li { 
background: #ffffff url(../images/bullet.gif) no-repeat left center; 
padding: 0 0 0 1em; 
margin-left: 6em; 
font-size: 90%;
line-height: 1.3;
} 

@media print { 
.smallball { 
  list-style-type: circle; 
  padding: 0 0 0 2em; 
} 


/* ====end ball list  ===== */