﻿/*

    MULTI FORMAT PRODUCT PAGE CSS

*/

/* these styles overwrite styles in marketmaps-product.css*/
div.breadcrumbline {
    /*border: 0px;*/
    padding-left: 10px;
}
div.breadcrumbline .breadcrumblinks a {
    color: #666666;
    font-size: 12px;
    text-decoration: none;
    display: inline;
    white-space: nowrap;
}
div.breadcrumbline .breadcrumblinks a:hover {
    text-decoration: underline;
}

.largebluetextheader
{
    width: 770px; 
    font-size: 26px;
    font-weight: bold;
    color: #1C4C7B;
    margin-top: 0px;
    margin-left: 8px;
}
.largebluetextheader h1 {
    color: #1C4C7B;
}

.productimage { width: 240px; float: left; }
.productimage .exampleimage { width: 240px; float: left; }
.productimage .mapbookexampleimage {width: 240px; height: 250px; float: left; }
.productimage .mapbookformatexampleimage { width: 240px; float: left; }
.productimage .closeupzoomin  
{
    width: 240px; 
    float: left; 
    margin-top: 15px; 
}
/* end overwriting styles */

.productfloatleft { float: left; }
.productfloatright { float: right; }
.productfloatnone { float: none; }

.boldfont { font-weight: bold; }
.multiwidth { width: 770px; }
.mapstylewidth { width: 150px; }

.stepheaders  
{
    background-color: #f4f4f4;
    border-bottom: 1px solid #acacac;
    color: #6096cc; 
    font-size: 16px;
    font-weight: bold;
    height: 21px;
    line-height: 21px;
    padding-left: 10px;
    width: 760px;
}

.secondstepformats { border-top: 1px solid #717171; }

.multiformatproduct { 
    border: 1px solid #717171;
    float: left;
    margin-bottom: 12px;
    margin-left: 8px;
    width: 770px;
}

.wallmapzoomin 
{
    margin-top: 15px;
    float: right;
    text-align: right;
}

.multimapstylespadding { padding: 2px 0px 10px 0px; }
.multimapstylecopy { padding: 15px 0px 0px 10px; }
.mapstyle { color: #1C4C7B; font-size: 20px; font-weight: bold; }
.chooseyour { font-weight: bold; }
.multieditionradiobutton { color: #000000; font-size: 12px; font-weight: bold; }
.multieditiondescription { padding-left: 21px; font-size: 11px; color: #898989; }
.multiwallmapsection { padding: 10px 0px 10px 0px; }
.multimapimage { width: 180px; margin: 0px 5px 0px 0px; padding-left: 5px; }
.multirightsection { margin-left: 5px; width: 505px; }

/* Wall Map Section */
.wallmaptext {
    float: left;
    width: 370px;
    height: 28px;
    line-height: 28px;
}
                    
.matrixheading .nowallmap { margin-top: 20px; }
.matrixheading .nowallmap .sap-content { font-weight: bold; }
    
.wallmapquantityarea {
    float: left; 
    font-weight: bold; 
    margin-top: 6px; 
    margin-left: 114px;
    padding-bottom: 10px; 
}

.wallmapquantityareaquantity {
    float: right; 
    font-weight: bold; 
    margin-top: 6px; 
    /*margin-left: 114px;*/
    padding-bottom: 10px; 
    padding-right:0px;
}
.wallmapquantitybox { width: 30px; }

.mapbookquantity {width:63px; float:right;text-align:right;margin-top:38px;}

.ie9 .mapbookquantity {width:75px;}

.digitalquantity {padding-left: 105px;}

.ie9 .digitalquantity {padding-left: 102px;}

.matrixcontainer { border: 1px solid #ababab; float: left; }
.matrixcontainer .column1 { float: left; }
.column1 div.row1 { float: left; }
.column1 div.row1 #calendarsizetext
{
    padding-left: 205px;
    color: #707070;
    font-size: 14px;
    font-weight: bold;
} 
.leftborder 
{
    border-left: 2px solid #ababab; 
    padding-left: 5px;
}
.column1 div.row2 
{
    float: left;
    clear: left;
    width: 769px;
}
.column1 div.row2 #finishingoptiontext
{
    color: #707070;
    font-size: 14px;
    font-weight: bold;
    width: 195px;
    padding: 13px 5px 7px 5px;
}


div.row4, div.row6 { 
    background-color: #ebebeb;
    border-bottom: 0px;
    border-top: 0px;
    clear: both;
    float: left;
    height: 55px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-top: 0px;
    width: 747px;
}

div.row4test, div.row6test { 
    background-color: #e3edf6;
    border-bottom: 0px;
    border-top: 0px;
    clear: both;
    float: left;
    height: 55px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-top: 0px;
    width: 747px;
}

div.row4 {
    border-top: 1px solid #ababab;
}

div.row4test {
    border-top: 1px solid #ababab;
}

div.row8, div.row10, div.row12, div.row14 { 
    background-color: #ebebeb;
    border-bottom: 0px;
    border-top: 0px;
    clear: both;
    float: left;
    height: 55px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-top: 0px;
    width: 747px;
}

div.row8test, div.row10test, div.row12test, div.row14test { 
    background-color: #e3edf6;
    border-bottom: 0px;
    border-top: 0px;
    clear: both;
    float: left;
    height: 55px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-top: 0px;
    width: 747px;
}

div.row5, div.row7, div.row9, div.row11, div.row13 {
    clear: both;
    height: 55px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-top: 0px;
    width: 747px;
}

/* Format of the text within the price matrix */
.rightborder
{
    width: 104px;
    border-right: 2px solid #ababab;
    margin-right: 5px;
    height:53px;
}
div.pricematrixtext
{
    color: #707070;
    font-size: 14px;
    padding: 2px 3px 0px 5px;
    width: 195px;
}
div.pricematrixtext a
{
    color: #707070;
}
.priceadj { padding-top: 5px; }
.size1 { float: left; width: 63px; }
.size1test { float: left; width: 113px; }

.size1ff { float: left; width: 68px; }

div.size1 { 
    color: #707070;
    font-size: 12px;
    font-weight: normal;
}

div.size1test { 
    color: #707070;
    font-size: 14px;
    font-weight: normal;
}

.matrixradio { margin-left: -5px; }
.matrixpricetext 
{
    color: #000000;
    font-weight: bold;
    font-size: 11px;
}
.addtocartanchor
{
    display: block;
    color: #000000;
    font-size: 10px;
}
.textsize { font-size: 12px; color: #707070; }
.textsize2
{
    font-size: 11px;
    color: #000000;
    font-weight: bold;
    padding-top: 2px;
}

.textsize2-test
{
    font-size: 12px;
    font-family:Verdana;
    color: #000000;
    font-weight: bold;
    padding-top: 17px;
}

.textsize2-testff
{
    font-size: 12px;
    font-family:Verdana;
    color: #000000;
    font-weight: bold;
    padding-top: 17px;
}
div.finishingoption { float: left; }
.mapsizeimagefaded { opacity: .5; filter: alpha(opacity=50); }

/* Map Book & Digital Map Section */
.priceindent { padding-left: 20px; padding-bottom: 5px; font-weight: bold; }
.pdffiletype { padding-left: 13px; }
.digitalseperator { width: 460px; border-top: 1px dotted #acacac; clear: both; }
.digitalicons { display: inline; }
.digitalsteps { color: #1C4C7B; font-weight: bold; }
.digitalsubsection { padding: 5px 0px 5px 0px; }

.multiaddtocartdiv  
{
    height: 22px;
    width: 110px;
    line-height: 22px;
    background-color: #ff0000;
    border: 1px solid #406080;
    text-align: center;
}

.multiaddtocartdiv a {
    text-decoration: none;
}
.multiaddtocartdiv a:hover {
    text-decoration: none;
}

.multiaddtocart
{
    color: #ffffff;
    font-weight: bold;
    display: block;
}
.finishingoptionlink { text-decoration: underline; }

.verisign100percent { float: right; }

.finishingthumbnails
{
    float:left;
    padding-top:3px;
    padding-right:5px;
}
div.otherfinishoptionsheader {
    float: left;
    border-top: solid 1px #B1B1B1;
    padding-right: 10px;
    width: 740px;
}
div.otherfinishoptionsheader .extended {
    display: none;
    float: left;
    width: 735px;
    margin-top: 15px;
}
div.otherfinishoptionsheader .extended .headertext {
    font-size: 14pt;
    font-weight: bold;
    float: left;
}
div.otherfinishoptionsheader .extended .hidebutton {
    float: right;
}
div.otherfinishoptionsheader .intro {
    margin-top: 15px;
    float: left;
    width: 830px;
}

div.otherfinishoptionsheader .intro .imagerow {
    float:left;
    padding-left: 72px;
}

div.otherfinishoptionsheader .intro .imagerow .img {
    margin-right: 3px;
}

div.otherfinishoptionsheader .intro .headertext {
    float: right;
    font-size: 15px;
    font-weight: bold;
    width: 270px;
}

div.otherfinishoptionsheader .intro .headertext .showbutton {
    margin-top: 2px;
    float: right;
}
div.otherfinishoptionsheader .intro .imagerow .rowimage {
    float: left;
    margin-right: 3px;
    width: 78px;
}
div.otherfinishoptionsheader .intro .imagerow .rowimage .rowimagetext {
    text-align: center;
    font-family: arial;
    font-size: 8.5pt;
    color: #4A4646;
    width: 78px;
}
div.otherfinishoptionsheader .intro .imagerow .rowimage > a {
    display: block;text-align: center;
}
.otherfinishoptionsmatrix {
    display: none;
    border-top: solid 1px #B1B1B1;
    margin-top: 15px;
    float: left;
    width: 749px;
}

.finishinglearnmore {
    color: #1c4c7b;
    float: left;
    font-weight: bold;
    margin-left: 75px;
    margin-top: 0px;
    width: 152px;
}

.finishinglearnmore .finishingoptiontextlink {
    text-decoration: underline;
}

.finishinglearnmore .button {
    margin-top: 15px;
    border: 0px;
}
span.pmfinishingoption, span.selFrameColor {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial;
    font-size: 10.5px;
    background-color: #f8f8f8;
    background-image: linear-gradient(180deg,#fff,#d1d1d1);
    border: 1px solid #b1b1b1!important;
    width: 60px;
    height: 12px;
    margin-top: 11px;
    cursor: pointer;
    letter-spacing: .3px;
    color: #666;
    font-weight: 400;
}
span.selFrameColor {
    width: 100px;
    margin: 2px 0 0 auto;
}
.closepopupbutton>span {
    font-family: Arial;
    font-weight: 700;
    color: #a0a0a0;
    display: flex;
    align-items: center;
    font-size: 12px;
}
.closepopupbutton>span>span {
    font-weight: bolder;
    font-size: 14px;
    padding-left: 4px;
}