@charset "utf-8";
body {margin: 0; background-color: #c8d3ff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000;}

/*common page elements */
#container {width: 800px; position: absolute; left: 50%; margin-left: -400px; background-color: #FFF; border-left: 1px solid #a6c0e0; border-right: 1px solid #a6c0e0; border-bottom: 1px solid #a6c0e0; }
#logo {width: 350px; height: 128px; float: left; border-right: 1px solid #a6c0e0; background-image: url(images/logo.gif); background-repeat:no-repeat;}
#topImage {width: 449px; height: 128px; float: left;}
#content {clear: both; width: 800px; position: relative; border-top: 1px solid #a6c0e0;}
#navbar {width: 175px; float: left; position: relative; z-index: 10;}
#copyright {width: 175px; clear: both; padding: 45px 20px 45px 20px; border-bottom: 1px solid #a6c0e0; font-size: 10px;}
#bodytext {width: 584px; float: right; border-left: 1px solid #a6c0e0; min-height:700px; height:auto !important; height: 700px;}
.details {width: 552px; padding: 32px 15px 0px 15px;}
.details a:link {border: none; color: #000; text-decoration: underline;}
.details a:visited {border: none; color: #000; text-decoration: underline;}

/* featured box styles */
#featured {width: 584px; height: 140px; height: 150px; border-top: 1px solid #a6c0e0;}
#featured img {border: 1px solid #000;}
.featured1 {width: 144px; float: left; padding-top: 10px; }
.featured2 {width: 144px; border-left: 1px solid #a6c0e0; float: left; padding-top: 10px;}
.featuredtext {border-left: 4px solid #a6c0e0; border-bottom: 1px solid #a6c0e0; font-size: 12px; color: #000; margin: 10px 15px 15px 15px; padding-left: 10px;}
.spacer {clear: both; height: 10px;}

/* product summary styles */
#summaryBox {width: 584px; padding-top: 51px; min-height:600px; height:auto !important; height: 600px; z-index: 0;}
.summary {clear: both; width: 569px; border-top: 1px solid #a6c0e0; position: relative; padding-left: 15px; padding-top: 10px;} 
.prodThumb {padding: 0px 10px 10px 0px; text-align:center; float: left; position: relative;}
.prodThumb img {border: 1px solid #000;}
.prodText {width: 475px; float: left; position: relative;}
.prodText p {padding-top: 0px;}
.prodText a:link {color: #000; text-decoration: underline;}
.prodText a:visited {color: #000; text-decoration: underline;}
.prodText a:hover {color: #000; background-color: #a6c0e0;}

.title {font-size:14px; font-weight:bold;}
.title a:link {color: #000; text-decoration: none;}
.title a:visited {color: #000; text-decoration: none;}
.title a:hover {color: #000; text-decoration: underline;}

.subtitle {font-size: 12px; font-weight: bold; font-style: italic;}

/*birthstones table */
#stones {width: 500px; padding-left: 40px;}
.row {width: 500px; clear: both;}
.rowblue {width: 500px; clear: both; left: 120px;}
.columnblue {width: 120px; float: left; height: 20px; padding-top: 5px;  background-color: #DDE6FB;}
.column {width: 120px; float: left; height: 20px; padding-top: 5px;}

/* details page */
#prodPhoto {width: 300px; float: left; border: 1px solid #000;}
#prodDetails {width: 225px; float: left; padding: 0px 10px 10px 10px;}

/* schedule page */
.leftcol {width: 260px; float: left;}
.rightcol {width: 260px; float: left;}

/* pagination */
#pages {clear: both; width: 554px; border-top: 1px solid #a6c0e0; padding: 15px; min-height:15px; height:auto !important; height: 15px;}
.pagelink {width: 25px; padding-left: 1px; padding-right: 1px; float: left; text-align: center;}
.pagelink a:link {color: #000; text-align: center;}
.pagelink a:visited {color: #000;}
.pagelink a:hover {color: #000; background-color: #a6c0e0;}
.showall {width: 100px; padding-left: 20px; padding-right: 1px; float: left; text-align: center;}
.showall a:link {color: #000; text-align: center;}
.showall a:visited {color: #000;}
.showall a:hover {color: #000; background-color: #a6c0e0;}

#spacer {clear: both; width: 554px; border-top: 1px solid #a6c0e0; padding: 15px;}

/*navigation styles */
#nav {width: 175px; float: left; border-bottom: 1px solid #a6c0e0; padding: 45px 20px 45px 20px;}

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical {margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 170px;}

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive {z-index: 3000;}

/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li {margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 170px; border-left: 4px solid #a6c0e0; border-bottom: 1px solid #a6c0e0; font-size: 12px; color: #000;}

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul {margin: -5% 10% 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 3020; cursor: default; width: 170px; left: -1000em; top: 0; background-color: #FFF;}

/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible {left: 0;}

/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li {width: 170px;}

/* Outermost menu container has borders on all sides */ 
/*ul.MenuBarVertical {border: 1px solid #CCC;}*/

/* Submenu containers have borders on all sides */ 
/*ul.MenuBarVertical ul {border: 1px solid #CCC;}*/

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a {display: block; cursor: pointer; background-color: #FFF; padding: 0.5em 0.75em; color: #333; text-decoration: none;}

/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus {background-color: #a6c0e0; color: #000;}

/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible {background-color: #a6c0e0; color: #000;}

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image: url(images/SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%;}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover {background-image: url(images/SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%;}

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe {position: absolute; z-index: 1010;}

/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE {display: inline; float: left; background: #FFF;}
}


/* stones list styles */
.stone {cursor: pointer;}
.hover {background-color: #C8D3FF;}
.selected {background-color: #CCCCCC;}
#description {opacity: 0; filter: alpha(opacity=0); background-color: white; width: 350px; float:left;}
#stoneList {width: 170px; float: left; margin-right: 10px;}