﻿/* Frame Categry list styles */
ul.frameCatgeory li {
    margin: 3px 0 !important;   
}
ul.frameCatgeory a
{
	font-weight:bold;	
}

div#frameCatalog,
div#frameOptions,
div#framePrescription {
    margin: 20px 0 0 0;    
}
div#frameOptions,
div#framePrescription { display:none; }
/* Drop Shadow styles */
div.dropShadowRight {
    float: left;
    background-image: url(../images/common/bgDropShadowRight.png);
    width: 8px;
}
div.dropShadowBottom {
    float: left;
    background-image: url(../images/common/bgDropShadowBottom.png);
    height: 8px;
    clear: left;
}
div.dropShadowBottomRight {
    float: left;
    background-image: url(../images/common/bgDropShadowBottomRight.png);
    width: 8px;
    height: 8px;   
}
/*
div.dropShadowRight,
div.dropShadowBottom,
div.dropShadowBotRight {
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    opacity:0.75;
}*/
div#frameContainerLarge div.dropShadowRight{
    height: 302px;
}
div#frameContainerLarge div.dropShadowBottom{
    width: 552px;
}

div#frameContainerLarge {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 560px;
    height: 310px;
    display: none;
}
div#frameImageLarge 
{
    float: left;
    width: 550px;
    height: 300px;
    background-color: #ffffff;
    border: 1px solid #6f8b9c;
    background-image: none;
}
div#frameImageLarge div#frameImageLargeCode {
    float: left;
    width: 300px;
    /*color: #6f8b9c;*/
    color: #f68b1f;
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0 0 5px; 
    text-transform:uppercase;
}
div#frameImageLarge div#frameImageLargeClose {
    float: right;
    width: 12px;
    height: 13px;
    color: #6f8b9c;
    font-size: 10px;
    font-weight: bold;
    margin: 5px 5px 0 0;
    padding: 0 0 0 4px;
    text-transform: uppercase;
    border: 1px solid #6f8b9c;
    cursor: pointer;
}
div#frameImageLarge div#frameImageLargeClose:hover {
    color: #f13c05;
    border: 1px solid #f13c05;
}

div#frameImageLarge div.frameDescription {
    padding: 4px 15px;
    font-size: 11px;
    text-align:justify;
    
}

div#frameImageLarge div.frameDimensions {
    padding: 4px 8px;
    font-size: 11px;    
    text-align:center;
}

div#frameImageLarge div.frameWarranty {
    padding: 4px 8px;
    font-size: 9px;
    font-style:italic;
    text-align:center;
}


div.frameContainer
{
    float:left;
    width: 281px;
    overflow: hidden;
    margin: 0 0 30px 60px;
}
div.frameContainer fieldset.frameItem {
    float: left;
    clear: left;
    width: 275px;
    border: 1px solid #cedfe9;
}

/* Fieldset style */
fieldset.frameItem 
{
	float: left;
    clear: left;
    width: 275px;
    border:1px solid #8db1c6;	
}
fieldset.frameItem legend
{
	width:85%;
	color: #f68b1f;
    font-family: Century Gothic, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight:bold;
    padding:0 4px;	
    border:0px solid red;
}

div.frameContainer fieldset.frameItem div.frameHeader {
    float: left;
    width: 275px;
    height: 17px;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    background-color: #c0d6e3;
}
div.frameContainer fieldset.frameItem div.frameHeader div.frameCode {
    float: left;
    padding: 1px 0 0 5px;
    text-transform:uppercase;
}
div.frameContainer fieldset.frameItem div.frameHeader div.framePrice {
    float: right;
    padding: 1px 5px 0 0; 
}
/* Frame Item Sub Header Styles */
div.frameContainer fieldset.frameItem div.frameSubHeader {
    float: left;
    width: 275px;
    height: 20px;
}
div.frameContainer fieldset.frameItem div.frameSubHeader div.frameColor{
    float: left;
}
div.frameContainer fieldset.frameItem div.frameSubHeader div.frameColor img.frameColorSwatch,
div.frameContainer fieldset.frameItem div.frameSubHeader div.frameColor div.frameColorSwatch {
    float: left;
    width: 12px;
    height: 12px;
    margin: 4px 0 1px 4px;
    border: 1px solid #ffffff;
    /*filter:alpha(opacity=50);
    -moz-opacity:0.50;
    opacity:0.50;*/
    border: 1px solid #b8d0de;
}
div.frameContainer fieldset.frameItem div.frameSubHeader div.frameColor img.frameColorSwatch:hover,
div.frameContainer fieldset.frameItem div.frameSubHeader div.frameColor div.frameColorSwatch:hover {
    border: 1px solid #8daec2;
    cursor:pointer;
}
div.frameContainer fieldset.frameItem div.frameSubHeader div.frameEnlarge {
    float: right;
    margin: 2px 5px 0 0;
    font-size: 9px;
}
div.frameContainer fieldset.frameItem div.frameSubHeader div.frameEnlarge a {
    color: #94b3c6 !important;
    text-decoration: none;   
}
div.frameContainer fieldset.frameItem div.frameSubHeader div.frameEnlarge a:hover {
    color: #f24713 !important;   
}

div.frameContainer fieldset.frameItem div.frameImage {
    float: left;
    width: 275px;
    height: 90px;
    cursor: pointer;
    border: 0px solid green; 
    /*filter:alpha(opacity=86);
    -moz-opacity:0.86;
    opacity:0.86;*/
    text-align:center;
}
/* Frame Item Footer Styles */
div.frameContainer fieldset.frameItem div.frameFooter {
    float: left;
    width: 275px;
    height: 27px;
    color: #b4cddc;
    font-size: 11px;
    background-color: #ffffff;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameMore {
    float: left;
    clear: left;
    font-size: 10px;
    margin: 10px 0 0 5px;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameMore a {
    color: #94b3c6 !important;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameMore a:hover {
    color: #f24713 !important;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect{
    float: right;
    clear: right;
    width: 120px;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect div.frameSelectAdd {
    float:right;
    padding: 8px 5px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect div.frameSelectAdd a {
    color: #f29376 !important;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect div.frameSelectAdd a:hover {
    color: #f24713 !important;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect:hover div.frameSelectAdd a {
    color: #f24713 !important;
    text-decoration: underline !important;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect div.frameSelectIcon {
    float: right;
    width: 25px;
    height: 25px;
    margin: 0 5px 0 0;
    background-image: url(../images/common/icons/icon_sml_cart.png);
    cursor: pointer;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect:hover div.frameSelectIcon {
    background-image: url(../images/common/icons/icon_sml_cart_over.png);
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect div.frameSelectIcon {
    float: right;
    width: 25px;
    height: 25px;
    margin: 0 5px 0 0;
    background-image: url(../images/common/icons/icon_sml_cart.png);
    cursor: pointer;
}
div.frameContainer fieldset.frameItem div.frameFooter div.frameSelect:hover div.frameSelectIcon {
    background-image: url(../images/common/icons/icon_sml_cart_over.png);
}

/* Frame Item Drop Shadow Styles */
div.frameContainer fieldset.frameItemShadowRight {
    float: left;
    background-image: url(../images/common/bgDropShadowRight.gif);
    width: 4px;
    height: 150px;
}
div.frameContainer fieldset.frameItemShadowBottom {
    float: left;
    background-image: url(../images/common/bgDropShadowBottom.gif);
    width: 277px;
    height: 4px;
    clear: left;
}
div.frameContainer fieldset.frameItemShadowBottomRight {
    float: left;
    background-image: url(../images/common/bgDropShadowBottomRight.gif);
    width: 4px;
    height: 4px;   
}
div.frameContainer fieldset.frameItemShadowRight,
div.frameContainer fieldset.frameItemShadowBottom,
div.frameContainer fieldset.frameItemShadowBottomRight {
    filter:alpha(opacity=20);
    -moz-opacity:.20;
    opacity:.20;
}
div.frameContainer:hover fieldset.frameItemShadowRight,
div.frameContainer:hover fieldset.frameItemShadowBottom,
div.frameContainer:hover fieldset.frameItemShadowBottomRight {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
}
/* Frame Item Hover Styles */
div.frameContainer:hover fieldset.frameItem
{
    border: 1px solid #8daec2;
    border-right: 1px solid #8daec2;
    border-bottom: 1px solid #8daec2;
}
div.frameContainer:hover fieldset.frameItem div.frameHeader {
    background-color: #8daec2;
}
div.frameContainer:hover fieldset.frameItem div.frameImage,
div.frameContainer:hover fieldset.frameItem div.frameSubHeader div.frameColor img.frameColorSwatch {
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
}

div.frameSpecial
{
	color: Red;
	font-weight: bold;
	float: left;
	border: 0px solid red;
	width: 150px;
	margin: 7px 0 0 5px;
	/*opacity: 0.60;*/
}