body {
	color: #ffffff; background: url(images/bckgrnd_3.gif); font-size: medium; font-family:Arial, Helvetica, sans-serif;
}
#content {background-color:#000000;
font-family:"Courier New", Courier, mono;
color: #FFFFFF;
width:80%;
height: 100%;
margin: 0 8% 5% 8%;
padding:2%;
}
a {font-family:"Courier New", Courier, mono;
color:#33ccFF;
text-decoration: none;
}
a:visited {
color:#9999FF;
}
a:hover {
color:#CCFF99;
}
a:active {
color:#CC6633;
}
#main p { font-family:Arial, Helvetica, sans-serif;
font-size: small;
line-height: 1.4;
}
#intro p, #maingal p, #maincal p {font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size: small;
margin: 30px 50px 10px 50px;
line-height: 1.4;}
#intro ul {margin-left: 50px;}
#intro li {font-family: "Courier New", Courier, mono;
list-style: none;
}
#intro a {font-family:Arial, Helvetica, sans-serif;
font-size: small;}
#intro h2.tarot {
background: url(images/tarot.jpg) 6% 100% no-repeat;
}
#intro h2 span {display: none;
}
#intro h2.tarot{font-size: 100%; text-align: center;
color: #ffffff;
border: none; 
margin-bottom:1.5em;
margin-top: 2.5em;
height: 68px;
}
#intro h1{ font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight: bold; ; text-align: center;
color: #ffffff;
border: none; 
margin-bottom: .5em;
margin-top: .5em;
height: 30px;
}
#navigation li{
float: left;
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
background: url(images/nav_graph3d.gif) no-repeat left top;
}
#navigation ul {
padding: 0px 0px 50px 0px;
margin: 25px 0px 50px 0px;
list-style: none;
}
#navigation a{
font-weight:bold;
font-size:small;
font-family:"Courier New", Courier, mono;
text-transform: lowercase;
color: #ffffff;
text-decoration: none;
display: block;
padding:7px 0px 0px 20px;
height: 30px;
width: 140px;
voice-family: "\"}\"";
voice-family:inherit;
height: 23px;
width: 100px;
}
/*IE 5.0 doesn't support the text-transform/voice-family at all*/
#navigation a{
text-transform: lowercase;
}
#navigation a:hover {
background: url(images/nav_graph3d.gif) 0px -42px;
}
#navigation a:active {
background: url(images/nav_graph3d.gif) 0px -82px;
}
#main h1 {font-size: 150%; text-align: center;
color: #000000;
border: none; 
margin-bottom: 0.25em;
height: 101px;
background: url(images/banner_deck.jpg) 50% 100% no-repeat;
}
#main h1 span {position: absolute; left: -50em; width: 50em;
}
#main h5{font-family:Arial, Helvetica, sans-serif; text-align:center;}
#main h2{font-family:Arial, Helvetica, sans-serif; font-size:medium;text-align:center;}
#mainhome h1 {font-size: 150%; text-align: center;
color: #000000;
border: none; 
margin-bottom: 0.25em;
height: 101px;
background: url(images/banner_leslie.jpg) 50% 100% no-repeat;
}
#mainhome h1 span {position: absolute; left: -50em; width: 50em;
}
#maingal h1, #maincal h1, #mainlinks h1 {font-size: 150%; text-align: center;
color: #000000;
border: none; 
margin-bottom: 0.25em;
height: 101px;}
#maingal h1 { background: url(images/banner_port.jpg) 50% 100% no-repeat;
}
#maincal h1 { background: url(images/banner_calendar.jpg) 50% 100% no-repeat;
}
#mainlinks h1 { background: url(images/banner_links2.jpg) 50% 100% no-repeat;
}
#maingal h1 span, #maincal h1 span, #mainlinks h1 span {position: absolute; left: -50em; width: 50em;
}
#maingal h5, #maincal h5 {display: block; font: 85% Verdana, sans-serif; text-align:center; 
}

#mainabout h1 {font-size: 150%; text-align: center;
color: #000000;
border: none; 
margin-bottom: 0.25em;
height: 101px;
background: url(images/banner_about.jpg) 50% 100% no-repeat;
}
#mainabout h1 span {position: absolute; left: -50em; width: 50em;
}

div.deck { width: 554px; height:530px; margin: 10px auto; background: #FFFFFF;
border: 1px solid black;}

div.foolpic {background-image: url(images/dreamythology.gif);
background-repeat: no-repeat;}
div.foolpic img {border: 0px none; width: 75px; height: 125px; margin: 0px 2px 0px 0px;}
div.foolpic li {float:none;
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;}
div.foolpic ul{padding: 4px 0px 10px 200px;
margin: 0px;
list-style: none;}

/* code for bottom centered fool
div.foolpic2 {background-image: none;
}
div.foolpic2 img {border: 0px none; width: 75px; height: 125px; margin: 1px 239px 2px 239px;}*/
/* tn refers to the thumbnails*/
div.tn {margin-right:0px; margin-bottom:0px;}
div.tn img {border: 0px none; height: 125px; width:75px; margin-left:2px; margin-right:2px;}
div.tn li {float: left;
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;}
div.tn ul{padding: 0px 0px 0px 0px;
margin: 0px;
list-style: none;}
.card li {float: left; margin: 10px 0 0 25px; list-style: none;}
.card ul {padding: 0px 0px 50px 0px;
margin: 0px;
list-style: none;}
/*the boxout is for the images on the infocard pages, large versions of each card*/
#boxout 
{
background:#336699;
float: right;
width: 170px;
margin-top: 30px;
margin-left: 20px;
margin-bottom: 20px;
padding-top: 10px;
}
#boxout img 
{
width: 150px; height: 244px;
border:none;
margin-bottom: 0.5em;
}
#boxout img { 
margin-left: 10px;
margin-right: 10px;
}
#boxout p {
margin-right: 10px;
padding-bottom: 10px;
font-weight: bold;
font-size: 80%;
line-height: 1.2em;
color:#990066;
}
/* pages which include large images for each card and info on Tarot meaning*/
#infoCard 
{
float: left;
width: 95%;
padding-top: 10px;
margin-right: 1%;
margin-left: 1%;
}
#infoCard p{
color:#ffffff;
background-color:#000000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align:justify;
margin-top: 0;
margin-left:20px;
line-height: 1.4em;
}

#infoCard ul {
padding: 0px 0px 2px 0px;
margin: 0 0 0 8px;
}
#infoCard li{float: left;
display: inline;
list-style-type: none;
font-size: small;
margin: 1px 0px 2px 8px;
padding: 0;}
div#footer {clear: both; padding-top: 3em;}
div#footer p {font: small Arial, Helvetica, sans-serif;}
div#footer h5 {display: block; font: 85% Verdana, sans-serif; }