/* -----------------------------------------------------------------------

 Product page css with the slider

----------------------------------------------------------------------- */

/* Main Layout */
div.wrapper { overflow: hidden; width: 950px; margin: 0 auto; margin-top: 20px; }
div.content { overflow: hidden; float: left; width: 710px; padding: 10px 0; margin-bottom: 10px; }
div.sub-content { overflow: hidden; float: left; width: 680px; background-color: #f0f0f2; padding: 15px; margin-bottom: 10px; -moz-border-radius: 5px; border-radius: 5px; }
div.contentLeftCol { overflow: hidden; float: left; width: 250px; margin-right: 5px; text-align: center; }
div.contentRightCol { width: 430px; float: right; overflow: hidden; padding: 5px; margin-bottom: 40px;}
label {
    width: 150px;
}

label.error { color: #900; float: left; }

/* Main Column */
h1, h2 {
    font-size: 20px;
    line-height: 1em;
    color: #333;
    padding-bottom:5px;
    font-weight: bold;
}
h2 {
    margin: 0;
}
h2.item-number-label {
    font-size: 12px;
    font-weight: normal;
    padding: 0;
}
p {
    color: #333;
}
p.product_points_styles {
    font-weight: bold;
    color: #668cb3;
    border-top: 1px dotted #666;
    border-bottom: 1px dotted #666;
    padding: 2px 5px;
    display: inline;
}
.price {
    background-color: #F0F0F2;
    padding: 5px;
    width: 100px;
}

.contentLeftCol a.enlarge-img {
    background: url("/images/icon-magnifying-glass.png") no-repeat scroll 0 2px transparent;
    padding-left: 15px;
}

.contentRightCol .options  {
    margin-top: 15px;
    position: relative;
}

.contentRightCol .options strong.selections {
    position: absolute;
    display: block;
    background-color: #fff;
    top: -8px;
    left: 10px;
    padding: 2px;
}

.contentRightCol .options input.quantity-input {
    padding: 5px;
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    border: 1px solid #ccc;
    float: left;
}
/* spinner styles */
.contentRightCol div.options div.sections span.qtylabel,
.contentRightCol div.options div.sections span.spinnerlabel,
.contentRightCol label, .contentRightCol .label {
    margin: 3px 5px 0 0;
    padding: 0;
    width: 60px;
    text-align: right;
    display: inline-block;
        /* hack to make ie7 display them as if they were inline-block */
        zoom:1;
        *display: inline;
}
.contentRightCol div.options div.sections input#qtyfield2.ui-spinner-input,
.contentRightCol div.options div.sections input#qtyfield2 {
    width: 50px !important;
}
.contentRightCol div.options div.sections span.ui-spinner div.ui-spinner-buttons {
    margin-top: -3px;
    *margin-top: 1px; /* IE7 hack */
    top: 0 !important;
}
.contentRightCol div.options div.sections span#per-item-price {
    margin-left: 5px;
    color: #333;
}
    /* multisize styles area ... part of the spinner styles stuff. Had to use important tag to overwrite some inline styles for now... Ugh. */
.contentRightCol div.options div.sections div#multisize_table span.ui-spinner {
    left: 0 !important;
    top: 9px !important;
    display: inline-block;
        /* hack to make ie7 display them as if they were inline-block */
        zoom:1;
        *display: inline;
}
.contentRightCol div.options div.sections div#multisize_table input.quantity_input_elem {
    width: 30px !important;
}
.contentRightCol div.options div.sections div#multisize_table div.ui-spinner-buttons {
    top: -25px !important;
    margin-top: 0;
    *margin-top: -2px; /* IE7 hack */
}

.contentRightCol div.options div.sections div#priceMessage {
    background-color: #FFFDF2;
    border: 1px solid #f1eddb;
    padding: 5px 10px;
    font-size: 12px;
    margin-left: 10px;
    color: #5a5a5a;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 10px\0/; /* IE8+ hack */
    display: inline-block;
        /* hack to make ie7 display them as if they were inline-block */
        zoom:1;
        *display: inline;
}

.contentRightCol div.options div.sections div#savingsMessage {
    background-color: #FFFDF2;
    border: 1px solid #f1eddb;
    padding: 5px 10px;
    font-size: 12px;
    margin-left: 65px;
    color: #5a5a5a;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 10px\0/; /* IE8+ hack */
    display: inline-block;
        /* hack to make ie7 display them as if they were inline-block */
        zoom:1;
        *display: inline;
}
.contentRightCol div.options div.sections div#savingsMessage p {
    margin: 2px 0;
    color: #5a5a5a;
}
.contentRightCol div.options div.sections div#savingsMessage span:hover {
    color: #000;
}
.contentRightCol .options textarea, .contentRightCol .options input {
    border: 1px solid #bbb;
    padding: 2px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.contentRightCol .options textarea:focus, .contentRightCol .options input:focus {
    border: 1px solid #000;
    padding: 2px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.contentRightCol div.options div.sections {
    display: block;
    border:2px solid #a1a1a1;
    background-color: #fff;
    padding: 20px 15px 15px;
    overflow: hidden;
}
.contentRightCol div.options div.sections #sliderInput {
    float: left;
    width: 100%;
}
.contentRightCol div.options div.sections #sliderInput a.ui-slider-handle {
    background: url("../promolabs/ui-lightness/images/ui-bg_glass_85_dfeffc_1x400.png") repeat-x scroll 50% 50% #DFEFFC;
    border: 1px solid #C5DBEC;
    color: #2E6E9E;
}

.contentRightCol div.options div.sections #sliderInput a.ui-slider-handle:hover {
    background: url("../promolabs/ui-lightness/images/ui-bg_glass_75_d0e5f5_1x400.png") repeat-x scroll 50% 50% #d0e5f5;
    border: 1px solid #79b7e7;
    color: #1d5987;
}
.contentRightCol div.options div.sections #mainCanvas{
    position:relative;
    background-color:#E1E1E1;
    margin: 5px 0 0 65px;
    overflow: hidden;
    float: left;
    width: 330px;
}
.contentRightCol div.options div.sections #mainCanvas .amount {
    padding-right: 10px;
    text-align: left;
    width: 65px;
    background-color: #fff;
    line-height: 1.75em;
}
.contentRightCol div.options  div.sections span {
    /* float: right;
    background-color: #e1e1e1;
    padding: 10px;
    width: 125px;
    -moz-border-radius: 20px;
    border-radius: 20px; */
}
.contentRightCol div.options div.sections div#mainCanvas div#floater {
    position: absolute;
    left: 130px;
    position:absolute;
    padding: 0 10px;
    text-align: center;
    top: 0;
    line-height: 1.75em;
    background-color: #DFEFFC;
    border-left: 1px solid #C5DBEC;
    border-right: 1px solid #C5DBEC;
    color: #1d5987;
}
.contentRightCol div.options div.sections span.cap-left {
    background-color: #E1E1E1;
    border-radius: 0 20px 20px 0;
    float: right;
    padding: 10px;
        width: 0.5em;
        height: 13px;
}
.contentRightCol div.options div.sections span.cap-right {
    background-color: #E1E1E1;
    border-radius: 20px 0 0 20px;
    float: right;
    padding: 10px;
        width: 0.5em;
        height: 13px;
}
#slider-block {
    margin-left: 65px;
    background-color: #e1e1e1;
    overflow: hidden;
    padding: 10px;
    text-align: right;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff;
}
.contentRightCol div.options div.sections #slider-block ul {
    float: left;
    margin: 0;
    list-style: none outside none;
    padding: 5px 10px;
}
.contentRightCol div.options  div.sections #slider-block #inner-slider-block {
    background-color: #5f5f5f;
    overflow: hidden;
    text-align: center;
}
.contentRightCol div.options  div.sections #slider-block #inner-slider-block ul {
    background-color: #f0f0f2;
    margin: 0;
    list-style: none outside none;
    padding: 5px 10px;
    border-top: 1px solid #ccc;
}
.contentRightCol div.options div.sections div#multisize_table {
    text-align: center;
    overflow: hidden;
    margin-bottom: 15px;
}
.contentRightCol div.options div.sections div#multisize_table table.apparel_pricing_items {
    width: 90%;
}
.contentRightCol div.options div.sections div#multisize_table table#apparel_prices {
    width: 33%;
}
.contentRightCol div.options div.sections div#multisize_table th {
    font-size: 12px;
}
.contentRightCol div.options div.sections div#multisize_table td, .contentRightCol div.options div.sections div#multisize_table td.price {
    text-align: center;
    background-color: #fff;
    border-top: 1px solid #ccc;
    height: 30px;
    padding: 0px;
}
.contentRightCol div.options div.sections div#multisize_table span {
    padding: 0;
}
.contentRightCol div.options div.sections div#multisize_table span.price {
    padding: 0;
}
.contentRightCol p.costs {
    line-height: 1.50em;
    float: left;
    margin: 0;
}
.contentRightCol .grp-container {
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}
.contentRightCol .grp-container .sample-message {
    margin: 10px 0 5px;
}
.contentRightCol .grp-container .green-star-promo-points {
    background: url("/images/green-star-promo-points-bg.png") no-repeat scroll 0 0 transparent;
    width: 240px;
    display: block;
    height: 30px;
    padding: 8px 0 0 40px;
    text-decoration: none;
    cursor: pointer;
    color: #3d5f09;
    float: left;
    position: absolute;
    bottom: 0;
    right: 0;
}
.contentRightCol .grp-container a#opener.green-star-promo-points:hover {
    text-decoration: underline;
}
.ui-dialog {
    padding: 5px;
}
.ui-corner-all {
    border-radius: 10px;
}
.ui-widget-content {
    border: 3px solid #ccc;
}
.ui-widget-header {
    background-image: none;
    background-color: #c4df9b;
    border: none;
    color: #333;
}
.ui-draggable .ui-dialog-titlebar {
    cursor: default;
}
.ui-widget-overlay  {
    background: url("images/ui-bg_flat_0_333333_40x100.png") repeat-x scroll 50% 50% #333333;
    opacity: 0.5;
}
.contentRightCol .grp-container strong.total {
    font-size: 18px;
}
.contentRightCol div.options .ui-slider-range {
    background-color: #357ae8;
    background-image: none;
}
#slider.ui-slider .ui-slider-handle {
    width: 4.2em;
    margin-left: -2.3em;
    cursor: pointer;
}
.sub-content ul li {
    list-style: none outside none;
    text-align: center;
    width: 152px;
    vertical-align: top;

    display: inline-block;
    /* hack to make ie7 display them as if they were inline-block */
    zoom:1;
    *display: inline;
}
.sub-content ul li a {
    border: 1px solid #fff;
    text-decoration: none;
    display: block;
    padding: 5px;
}
.sub-content ul li a:hover {
    border: 1px solid #666;
    display: block;
}
.sub-content ul li a span {
    color: #333;
}


/* Side Bar */
.sideBar h3 {
    font-size: 12px;
    margin-bottom: 5px;
    color: #333;
    letter-spacing: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #ccc;
}
.sideBar {
    overflow: hidden;
    width: 230px;
    float:right;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1.25em;
    margin-top: 10px;
}
.sideBar .sections {
    float: left;
    overflow: hidden;
    background-color: #F0F0F2;
    padding: 10px 15px 15px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 198px;
    border: 1px solid #ddd;
    border-bottom: 1px solid #ccc;
}
.sideBar .sections h3, .sideBar span.cart-header {
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}
.sideBar .sections span.icon-sample {
    background: url("/images/icon-sample.png") no-repeat scroll 0 0 transparent;
    padding: 5px 0 15px 50px;
    margin-left: 10px;
    display: block;
}
.sideBar .sections span.icon-lock {
    background: url("/images/icon-lock.png") no-repeat scroll 0 0 transparent;
    padding: 10px 0 15px 50px;
    margin-left: 10px;
    display: block;
}
.sideBar .sections span.icon-boxes {
    background: url("/images/icon-boxes.png") no-repeat scroll 0 0 transparent;
    padding: 10px 0 12px 50px;
    margin: 0 0 10px 10px;
    display: block;
}
.sideBar .sections span.icon-chatbubbles {
    background: url("/images/icon-chatbubbles.png") no-repeat scroll 0 0 transparent;
    padding: 0 0 10px 50px;
    margin: 0 0 10px 10px;
    display: block;
}
.sideBar .sections span strong {
    text-transform: uppercase;
}
.sideBar .sections p#chat-info {
    font-family: Georgia,"Times New Roman",Times,serif;
    text-align: center;
    font-size: 10px;
    font-style: italic;
    letter-spacing: 0;
}
.sideBar .sections em {
    font-size: 14px;
    font-weight: bold;
}
.sideBar .sections em span {
    font-size: 12px;
}
.sideBar .sections hr, .sub-content hr {
    background: #ccc;
    color: #ccc;
    clear: both;
    float: none;
    width: 100%;
    height: 1px;
    margin: 0 0 1.420em;
    border: none;
}
.sideBar .sections hr.hrspace, .sub-content hr.hrspace {
    background: #fff;
    color: #fff;
    visibility: hidden;
}
.sideBar .sections .item-order {
    overflow: hidden;
    float: left;
    width: 100%;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1;
    color: #333;
    margin-bottom: 10px;
}
.sideBar .item-desc {
    overflow: hidden;
}
.sideBar .sections .item-order span {
    float: right;
}
.sideBar .sections form strong {
    font-size: 12px;
    letter-spacing: 0;
}
.sideBar .checkout_btn {
    font-size: 12px;
    letter-spacing: 0;
    margin-top: 20px;
}


/*** Product Page Gradients ***/
/* Buttons */
.gradient-buttons {
    color: #fff;
    cursor: pointer;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bold;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #357ae8;
    text-shadow: 0 1px 1px #1f5aed;

    /* fallback */
    background-color: #4d90fe;

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(100% 100% 90deg, #357ae8, #4d90fe);

    /* Safari 4-5, Chrome 1-9 */
    /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#357ae8), to(#4d90fe));

    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(#4d90fe, #357ae8);

    /* Opera 11.10+ */
    background: -o-linear-gradient(#4d90fe, #357ae8);

    /* Internet Explorer */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d90fe', endColorstr='#357ae8');
}
.gradient-buttons:hover {
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: none;
    background-color: #357ae8;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#357ae8', endColorstr='#357ae8');
}
.gradient-buttons2 {
    color: #2E6E9E;
    cursor: pointer;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: normal;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #C5DBEC;

    /* fallback */
    background-color: #DFEFFC;

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(100% 100% 90deg, #DFEFFC, #ffffff);

    /* Safari 4-5, Chrome 1-9 */
    /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFEFFC), to(#ffffff));

    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(#ffffff, #DFEFFC);

    /* Opera 11.10+ */
    background: -o-linear-gradient(#ffffff, #DFEFFC);

    /* Internet Explorer */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#DFEFFC');
}
.gradient-buttons2:hover {
    /* fallback */
    background-color: #DFEFFC;

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(100% 100% 90deg, #DFEFFC, #DFEFFC);

    /* Safari 4-5, Chrome 1-9 */
    /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFEFFC), to(#DFEFFC));

    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(#DFEFFC, #DFEFFC);

    /* Opera 11.10+ */
    background: -o-linear-gradient(#DFEFFC, #DFEFFC);

    /* Internet Explorer */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFEFFC', endColorstr='#DFEFFC');
}

/* Backgrounds */
.gradient-bg {
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(100% 100% 90deg, #e3e3e7, #f0f0f2);

    /* Safari 4-5, Chrome 1-9 */
    /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e3e3e7), to(#f0f0f2));

    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(#f0f0f2, #e3e3e7);

    /* Opera 11.10+ */
    background: -o-linear-gradient(#f0f0f2, #e3e3e7);

    /* Internet Explorer */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f2', endColorstr='#e3e3e7');
}
.gradient-bg2 {
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(100% 100% 90deg, #eeeeee, #e1e1e1);

    /* Safari 4-5, Chrome 1-9 */
    /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#e1e1e1));

    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(#e1e1e1, #eeeeee);

    /* Opera 11.10+ */
    background: -o-linear-gradient(#e1e1e1, #eeeeee);

    /* Internet Explorer */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e1e1', endColorstr='#eeeeee');
}
.gradient-bg3 {
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(100% 100% 90deg, #e1e1e1, #ffffff);

    /* Safari 4-5, Chrome 1-9 */
    /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e1e1e1), to(#ffffff));

    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(#ffffff, #e1e1e1);

    /* Opera 11.10+ */
    background: -o-linear-gradient(#ffffff, #e1e1e1);

    /* Internet Explorer */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e1e1e1');
}


/*** Curved Corners ***/
.curved-corners {
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.curved-corners-top {
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.curved-corners-bottom {
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
.curved-corners-inputfields {
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.cart-header {
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
    letter-spacing: 0;
    padding-bottom: 5px;
    display: block;
    width: 100%;
}

.cartTotalsTable td {
    width: 150px;
}