/* CSS - Style Sheet for Karmic Star
   selector { Property: value; }
   element#id { Property: value; }
           eg div#impnote (color:red;} <div id="impnote"></div>
   element.class { Property: value; }
           eg div.news {color:black;} <div class="news"></div>
   element:pseudo-class { Property: value; } eg a:link {color: #FFF;}
   
   margin and padding shorthand, get it right or there'll be TRouBLe */
/* */
/* ================================================================== */
/* Standard HTML Tag styles */
body {
  margin: 0px;
  padding: 0px;
  /* always force margin and padding to 0 - Opera has default values */
  /* background-color: #333333; */
  background-image: url(images/bg/wp_damask_2225.gif);
  background-repeat: repeat;    /* tiled */
  background-attachment: fixed; /* not scroll */
  background-position: top left;
  text-align: center; }

h1 {
  font-size: 2.5em;
  letter-spacing: 0.33em;
  font-family: Verdana,Helvetica,sans-serif;
  color: #FFCCFF;  /* test colors: AA77AA #FFCCFF; */
  background-color: #666666;
  text-align: center;
  text-decoration: none;
  border: 3px ridge #CCCCCC;
  padding-bottom: 4px; }
h1 img{ 
  float:right;
  border: none;
  margin-top: 10px; margin-right: 5px;
  background-color: transparent; }

h2 {
  font-size: 2.0em;
  letter-spacing: 0.15em;
  margin-top: 80px;
  height: 33px;
  font-family: Verdana,Helvetica,sans-serif;
  color: #CC99CC;  /* color: #FFCCFF; */
  background-color: #666666;
  text-align: left;
  text-decoration: none;
  border: 3px ridge #CCCCCC;
  padding-left: 5px;
  padding-right: 1px;
  padding-bottom: 2px;}
h2 img{ 
  float:right; border:none; background-color:transparent; } /* margin-top: 110px;*/

h3 { font-size:1.7em; }
/* h3:first-letter { font-weight: bold; font-size: 170%; } */

p {
  margin-top: 2px;
  line-height: 125%;
   /* a paragraph's leading space between each line, multiplied by font-size */
}

i { font-weight:bold; }
form { margin:0px; padding:0px; }

abbr{ border-bottom:1px dotted #666666; }
/* where title attribute contents are displayed as a tooltip via mouse hover - 
  eg <abbr title="Cascading Style Sheets">CSS</abbr> */

dt { font-weight:bold; margin-top:10px; }

sup { font-size:70%; }

/* ================================================================== */
/* MENU & FOOTER Links :pseudo-class selectors */
a {font-weight:bold; text-decoration:none; font-style:normal; }
a:link {color:#000; }       /* -links that haven't been visited */
a:visited {color:#000; }    /* -links previously visited */
a:hover {color:#FFFFFF; }   /* -links pointed to by the mouse */
a:active {color:#000; }     /* -change appearance when clicked */
                         /* -> MUST be in the above "LoVe-HAte" order */

/* ================================================================== */
/*  #Id Selectors
    The id selector applies to only ONE element within each document,
    where the id will be unique on a page.
     eg. the header, menu and footer                                  */
#page {
  /* position: relative; */
/* shift element from the starting pt of its default pos on the page */
/* future positions will now be based on edges of the parent element */
  width: 918px;
  margin: 0px auto; /* centred */
  padding: 0px 0px 0px 0px;
  font-size: 85%;
  font-family: Verdana, Helvetica, sans-serif;
  /* font-family: Georgia, "Times New Roman", serif; */
  /* font-family: Courier, "Courier New", Monaco, monospace; */
  text-align: left;
  color: #DDDDDD;
  background-color: #000000;
}

#header {
  position: fixed;
  width: 918px;
  margin: 0px auto;
  margin-bottom: 3px;
/*  margin-bottom: 0px; */
  /* display: block; */
  top: 0px;
  /* height: 110px; */
  padding: 0px;
  background-color: #800080;
  border-left: 3px solid #666666;
  border-right: 3px solid #666666;
  border-bottom: 3px solid #666666;  }
/* border: 3px solid #800080 */
#header img#ksLogo {float:left; border:3px solid #800080; width:75px; height:75px; margin:0px;}
#header img#ksTitle {float:left; border:3px solid #800080; width:725px; height:75px; margin:0px;}
#header img#ksOffers {border:3px solid #800080; width:100px; height:75px; margin:0px;}

/* Horizontal Menu for site navigation */
#nav, #nav ul {
  margin: 0px;
  padding: 2px 2px 0px 2px;
  height: 1.4em;
  border-top: 3px solid #800080;
  /* border-bottom: 3px solid #666666; -now in header */
  list-style-type: none;
  /* display: inline; -refer to li float: - otherwise colors screw up */
  font-weight: normal;
  font-size: 1.27em;
  letter-spacing: 0.07em;
  font-family: Verdana, Helvetica, sans-serif;
  color: black;
  background-color: #CC99CC;
}
#nav li {
  float: left;  /* horizontal inline top menu */
  display: block; 
  /* width: 130px; */
  margin: 0px;
  padding: 0px 17px 0px 2px;
  text-align: left;
}

#content {
  width: 918px;
  margin-top: 120px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  /* display: block; */
/**/
  padding: 0px;
  border: 3px solid #666666;
  background-color: #000000;
}
/*
#content a:link {font-weight:bold; color:#FFFFFF; text-decoration:none; font-style:normal;}
#content a:visited {font-weight:bold; color:#FFFFFF; text-decoration:none; font-style:normal;}
#content a:hover {font-weight:bold; color:#999999; text-decoration:underline; font-style:normal;}
#content a:active {font-weight:bold; color:#EEDDEE; text-decoration:none; font-style:normal;}
*/
#content a:link {font-weight:bold; color:#FFFFFF; text-decoration:none; font-style:normal;}
#content a:visited {font-weight:bold; color:#FFFFFF; text-decoration:none; font-style:normal;}
#content a:hover {font-weight:bold; color:#FFCCFF; background-color:#666666; font-style:normal;}
#content a:active {font-weight:bold; color:#FFFFFF; text-decoration:none; font-style:normal;}

#welcome {
  font-size: 1.5em;
  margin: 0px;
  padding: 10px 30px 10px 30px;
  font-family: Tahoma, Verdana, Helvetica, sans-serif;
  color: #CC99CC;
  text-align: center;}
#welcome a:link {font-weight:normal; color:#FFFFFF; text-decoration:none; font-style:normal;}
#welcome a:hover {font-weight:normal; color:#FFCCFF; background-color:#666666; font-style:normal;}
#welcome a:visited {font-weight:normal; color:#FFFFFF; text-decoration:none; font-style:normal;}
#welcome a:active {font-weight:normal; color:#FFFFFF; text-decoration:none; font-style:normal;}
  /* #welcome p:first-letter { color: #BBAABB; font-family: cursive;
                          font-size: 350%; font-weight: bold; } */ 

#blurb {
  float:none;
  text-align: left;
  margin-left: 320px;
  padding: 25px 30px 30px 30px;
  }

#slideshow {
  float:left;
  width:290px;
  margin: 10px 10px 30px 30px;  }
/* #slideshow img {border:5px ridge #999999; float:left; width:280px; height:280px;} */
#slideshow img {border:none #999999; float:left; width:280px; height:280px;}
#slideshow hr {height:3px; width:100%; }

#about {
  float:left;
  width:290px;
  margin: 40px 10px 30px 30px;  }
/* #about img {border:5px ridge #999999; float:left; width:280px; height:373px;} */
#about img {border:none #999999; float:left; width:280px; height:280px;}

#fblikebox { padding:20px 0px 0px 0px; }

#products {
  /* position: relative; */
  /* font-size: 1em; */
  font-family: Verdana, Helvetica, sans-serif;
  color: #DDDDDD;
  text-align: left;
  margin-top: 10px;
  padding: 10px 35px 10px 35px; }
#products p {padding: 0px 3px; }
#products a:link {font-weight:bold; color:#FFFFFF; text-decoration:none; font-style:normal;}
#products a:visited {font-weight:bold; color:#996699; text-decoration:none; font-style:normal}
#products a:hover {font-weight:bold; color:#FFCCFF; background-color:#666666; font-style:normal;}


#targets, #targets ul { list-style-image: url(buttons/Bullet.gif); padding-top:15px;}
#targets li { margin:0; padding: 0px 0px 5px 0px; }
#targets a:link, #targets a:visited {
  font-weight: bold;
  font-style: normal;
  color: #FFFFFF;
  text-decoration: none;
}
#targets a:hover {
  color: #FFCCFF;
  background-color: #666666;
}

#properties {
  /* position: relative; */
  font-size: 1.2em;
  font-family: Verdana, Helvetica, sans-serif;
  color: #DDDDDD;
  text-align: left;
  margin-top: 0px;
  padding: 10px 35px 10px 35px;
  border: 3px solid #666666;
}
#properties p {padding: 5px 3px; }

#closeup { padding:50px 20px 10px 20px; text-align:center; }
#closeup img { margin:15px 0px 15px 0px; border:7px ridge #CCCCCC; }
#closeup p { margin-top:15px; }




#icons { text-align:center; padding:30px 0px 40px 0px; }
#icons img { padding:0px 20px 0px 20px; }
#icons a:hover { text-decoration:none; background-color:#000; font-style:normal;}

#footer {
  position: absolute; /*relative will lose wallpaper between */
  width: 918px;
  height: 1.5em;
  margin: 6px auto 0px auto;
  padding: 3px 0px 0px 0px;
  font-size: 89%;
  font-family: Verdana, Helvetica, sans-serif;
  color: #000000;
  background-color: #CC99CC;
  border: 3px solid #666666;
}
#footer span.left{ float: left; padding-left: 3px; }
#footer span.right{ float: right; padding-right: 1px; }
#footer ul {
  display: inline;
  list-style-type: none;
}
#footer li {
  float: right;  /* horizontal inline top menu RIGHT JUSTIFIED */
  display: block; 
  margin: 0px;
  padding: 0px 2px 0px 10px;
  text-align: left;
}

#buffer { padding:30px 0px; }
  /* used becuase footer bottom margin not working!!! */

#assorted {
  font-size: 1.25em;
  letter-spacing: 0.1em;
  margin: 0px;
  padding: 10px 35px 10px 35px;
  font-family: Tahoma, Verdana, Helvetica, sans-serif;
  color: #CC99CC;
  text-align: left;
}
#assorted p { padding:0px 0px 8px 0px; clear:both; }
#assorted dd { color:#DDDDDD; }
#assorted p:first-letter { 
  font-size: 150%; font-weight: bold;
}

#notices {
  margin-top: 10px;
  padding: 10px 35px 10px 35px;
}
#notices th { background-color:#CC99CC; color:#000;
  font-weight:bold; font-size:1.25em; padding:0px 7px 0px 10px;
  text-align:left;}
#notices th.date { width:100px; }
#notices th.deets { width:715px; text-align:center; }
#notices td { padding:25px 5px 0px 5px; }
#notices td.date { width:100px; vertical-align:top; font-weight:bold; }
#notices td.deets { width:715px; }

#contform {
  margin: 30px 0;
  padding: 20px;
  background-color: #CCCCCC;
  color: #000000;
  border: 3px ridge #CCCCCC;
  font-family: Verdana, Helvetica, sans-serif;
  text-align: left;
}

/* ================================================================== */
/*  .Class Selectors
  The Class selector can be used to select Any/Multiple element/s
  within that class.
  eg. within the page content, when used multiple times               */

ul.itemlist {
  list-style-type: none;
  width: 848px;
  margin-left: 0px;
  padding-left: 0px;
}
ul.itemlist li {
  float: left; /* create a grid style layout */
  vertical-align: top;
  height: 350px;
  width: 399px;
  margin: 0px 10px 20px 0px;
  padding-right: 15px;
}
.itemlist img {
  /* display: block; /* force captions below thumbnail images */
  /* margin-right: 190px; /* force captions below thumbnail images */
  float: left;
  margin-right: 0.5em; 
  width: 160px;
  height: 160px;
  border: 3px solid; /* NO Color due to thumbnail link */
            /* Bug with IE - had to set <body link=> tags HUMPH!!! */
}
.itemlist a { font-size:110%; }
.itemlist dl { margin:0px 0px; padding:0px 0px 0px 0px; }
.itemlist dd { margin:0px 0px; padding:0px 0px 10px 0px; }
.itemlist img:hover { border:3px solid #FFCCFF; }

img.landscape { width:700px; height:525px; }
img.portrait {  width:525px; height:700px; }

a.goto { padding-top:65px; }
hr.nextprod { color:#111111; width:100%; clear:both; } /* clear .itemlist two-column */
hr.buffer { padding:30px 0px 30px 0px; border:none; clear:both; } /* large space between sections */
hr.gap { padding:10px 0px 0px 0px; border:none; clear:both; } /* small gap between */

tr.center { text-align:center; }

.gsp { font-size:80%; padding-left:25px; } /* no need for &nbsp;&nbsp;... */
.price { display:block; color:#CC99CC; font-weight:bold; margin: 7px 0px 5px 3px; } /* FFCCFF 66CC66 */
.oldprice { float:none; color:#999999; font-size:75%; margin: 10px 0px 0px 3px; }
.sold { display:block; color:#666666; text-decoration:line-through; font-weight:bold; margin: 7px 0px 0px 0px; }
.text { float:inherit; text-decoration:none; }
.gemstone { float:inherit; color:#CC99CC; font-weight:bold; }
.desc { display:block; clear:both; font-size:95%; padding:0px; margin:1px 0px 19px -2px; }
.moreinf { display:block; clear:both; font-size:75%; padding:0px;  }
.match { font-weight:normal; font-size:80%; padding:0px; margin:0px 0px 1px -1px; /*clear:both;*/ }
.item { color:#FFFFFF; font-weight:bold; }
.closedesc { text-align:center; margin: auto; padding-bottom: 5px; width:704px; font-size:95%; }
.closematch { text-align:center; font-weight:normal; font-size:80%; line-height:0; padding:0px; margin:0px 0px 0px 0px;}

.link img { float:left; padding:3px 8px 12px 0px; border:none; clear:none; }
.linktext { float:left; color:#FFF; padding:7px 0px 0px 0px; }
.linkblurb { font-size:80%; color:#BBB; }

.white { color:#FFFFFF; }
.bold { font-weight:bold; }
.center { text-align:center; }
.left { text-align:left; }
.right { text-align:right; }
.mid { margin-left:50%; text-align:left; }

/*  */
/* ================================================================== */