/* MZ styles for Product view ************************************** */

.outerOptionDiv  /* contains the option description, link, and image */
{
    height: 45px; 
    width: 45px; 
    text-align: center; 
    margin: auto; 
    border: 0px solid black;
 
}

.outerOptionDiv A  /* special formatting for a linked option */
{
    color: Blue;
    font-weight: bold;
    text-decoration: underline;   
}

#optionscontainer 
{
    position: relative;
    text-align: left;
    height: 165px;
    /* background-color: Red; */
}

#optionsdiv 
{
    position: absolute;
    width: 570px;
    height: 210px;
    text-align: left;
    top: 0px;
    left: 0px;
    /*background-color: Green;*/
}

.optiondiv 
{
    display: inline;
    float: left;
    margin-right: 4px;
	padding-bottom:8px;
   /* background-color: Silver; */
    
}

#PersonalizationOptions
{
    clear: left;
    margin-bottom: 4px;
    display: block;
    float: none;
}

#btnStones 
{
    margin-top: 10px;
}

#Entercustomlettering
{
    float: none;
    clear: left;
    display: block;
}

#fontpreviewheader /* text introduction before the letter preview */
{
    font-size: 7pt;
}

#fontpreview  /* the div that holds the letter preview */
{

    border: dashed 1px black;
    height: 47px;
    width: 100%;
}



#proddetails 
{
       width: 100%;
       height: 125px;
       overflow: auto;
}

img.imageSwatch { /* I changed this to apply to the img tag, because javscript is looking for A as parent */
	margin-bottom: 15px;
	border: none;
	margin-left: 1px;
}

   /* this is to override the CSS setting from gallerystyle2 ? */
#motioncontainer a img {
        border: none;
    }
    
#motioncontainer a:hover img {
        border: none;  /* Set image border hover color */
    }