/* 
2025-02-23 RMcQ
Elements on Maps pages.

*/

/* 2023-09-16 RMcQ: For the street map */
/* START: MainMap styles ------------------------------------- */
/* DESIGN NOTE: DON'T use a 'parent' style that combines left and right columns, DO just use separate left and right styles ans list both for common styles (pattern used below) ------------------------------------- */


.tblMainMap {
    width: 100%;
    height: 100%;
    border: 4px solid var(--str-tetradic-1-darker-20); /* navy; */
    margin: 0;

    vertical-align:top;

    border-collapse:collapse;

    background-color: #cacacd;

}

.tdMainMapStreetSideLeft, .tdMainMapStreetSideRight {

    /* 45%/10%/45% layout; good for cellphone */
    width: 45%;

    vertical-align: top;
    margin: 0;

}

.tdMainMapStreetSideLeft {
    border: 0; /* 0px solid red; */
    margin: 0;
}

.tdMainMapStreetSideRight {
    border: 0; /* 0px solid blue; */
    margin: 0;
}

.tdMainMapCenterStreet {

    /* 45%/10%/45% layout; good for cellphone */
    width: 10%;

    height: 100%;
    border: 0; /* 0px solid #ddd; */
    padding: 8px;
    margin: 0;

    background-color: #cacacd;

    text-align:center;
    vertical-align:top;

    font: bold 120% arial;

    /* NOTE: Not really useful here; only the third one (word-break) seems to matter, and then the street name is too hard to read. */
    word-wrap:      break-word; 
    overflow-wrap:  break-word; 
    word-break:     normal; /* break-all; */  


/*
    FOR ROTATION; DOESN"T WORK IN FIREFOX:

    text-align: left;
    vertical-align: middle;

    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -webkit-transform: rotate(-0deg);
    -moz-transform: rotate(-0deg);
    -o-transform: rotate(-0deg);
    transform: rotate(-0deg);
*/

}


.tblLocationBlockSetLeft, .tblLocationBlockSetRight {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    vertical-align:middle;
    background-color: #79b954;  /* some grass green colors: #3f9b0b hex #52a523, #65af3c, #79b954, #8cc36d, #9fcd85, #b2d79d, #c5e1b6, #d9ebce, #ecf5e7 */
    border-radius: 8px;
}

.tblLocationBlockSetLeft {
    padding: 2% 0% 2% 2%;
    border: 0; /* 2px solid yellow; */
    margin: 0;
}

.tblLocationBlockSetRight {
    padding: 2% 2% 2% 0%;
    border: 0; /* 2px solid orange; */
    margin: 0;
}


/* NON-block elements */
/* Boundary, CrossStreet, MapLink */


.divBoundaryLeft, .divBoundaryRight {
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
    font-weight:bold;
    background-color:peachpuff; /* lightcoral; */
}
.divBoundaryLeft {
}
.divBoundaryRight {
}


.divMapLinkLeft, .divMapLinkRight {
}
.divMapLinkLeft {
}
.divMapLinkRight {
}


.tblCrossStreetLeft, .tblCrossStreetRight {
    background-color: #cacacd;
    border:0;
    font-weight: bold;
    font-size:120%;
    height: 32px;
    margin: 0;
    text-align:center;
    width: 100%;
}
.tblCrossStreetLeft {
    border:0;
    margin: 0; 
}
.tblCrossStreetRight {
    border:0;
    margin: 0; 
}
.tblCrossStreetLeft td, .tblCrossStreetRight td {
    border:0;
    height: 32px;
    margin: 0; 
}
.tblCrossStreetLeft td {
    border:0;
    margin: 0; 
}
.tblCrossStreetRight td {
    border:0;
    margin: 0; 
}


/* Location _BLOCK_ elements */
/* Address, Easement, Multiple, Residence, Space, TeeStreet */


.tdLocationLeft, .tdLocationRight {
    width:100%;
    border: 0;
    margin: 0;
    
    /* Used on every 'location-type' td to assure 45/10/45 layout for cell phone */
    /* NOTE: This one is different from the others; seems to work OK with 'normal' settings; may not break inside words as much. */
    word-wrap:      normal;   /* :break-word; */
    overflow-wrap:  normal;   /* :break-word; */
    word-break:     normal    /* :break-all;  */

}
.tdLocationLeft {
    text-align:right;
/*    border-right: 4px solid #79b954; */
    padding: 2px 5px 2px 2px;
}
.tdLocationRight {
/*    border-right: 4px solid #79b954; */
    padding: 2px 2px 2px 5px;
}

/* Just copied over from tdLocation styles, to be customized: */
.tdEasementLeft, .tdEasementRight {
    width:100%;
    border: 0;
    margin: 0; 
    
    /* Used on every 'location-type' td to assure 45/10/45 layout for cell phone */
    word-wrap: break-word;
    overflow-wrap:break-word;
    word-break:break-all;

}
.tdEasementLeft {
    text-align:right;
/*    border-right: 4px solid #79b954; */
    padding: 2px 5px 2px 2px;
}
.tdEasementRight {
/*    border-right: 4px solid #79b954; */
    padding: 2px 2px 2px 5px;
}


/* Just copied over from tdLocation styles, to be customized: */
.tdMultipleLeft, .tdMultipleRight {
    width:100%;
    border: 0;
    margin: 0; 
    
    /* Used on every 'location-type' td to assure 45/10/45 layout for cell phone */
    word-wrap: break-word;
    overflow-wrap:break-word;
    word-break:break-all;

}
.tdMultipleLeft {
    text-align:right;
/*    border-right: 4px solid #79b954; */
    padding: 2px 5px 2px 2px;
/*    border: 2px solid #dddddd; */
}
.tdMultipleRight {
/*    border-right: 4px solid #79b954; */
    padding: 2px 2px 2px 5px;
}


/* Just copied over from tdLocation styles, to be customized: */
.tdResidenceLeft, .tdResidenceRight {
    width:100%;
    border: 0;
    margin: 0; 
    
    /* Used on every 'location-type' td to assure 45/10/45 layout for cell phone */
    word-wrap: break-word;
    overflow-wrap:break-word;
    word-break:break-all;

}
.tdResidenceLeft {
    text-align:right;
/*    border-right: 4px solid #79b954; */
    padding: 2px 5px 2px 2px;
}
.tdResidenceRight {
/*    border-right: 4px solid #79b954; */
    padding: 2px 2px 2px 5px;
}


/* Just copied over from tdLocation styles, to be customized: */
.tdSpaceLeft, .tdSpaceRight {
    width:100%;
    border: 0;
    margin: 0; 
    
    /* Used on every 'location-type' td to assure 45/10/45 layout for cell phone */
    word-wrap: break-word;
    overflow-wrap:break-word;
    word-break:break-all;

}
.tdSpaceLeft {
    text-align:right;
/*    border-right: 4px solid #79b954; */
    padding: 2px 5px 2px 2px;
}
.tdSpaceRight {
/*    border-right: 4px solid #79b954; */
    padding: 2px 2px 2px 5px;
}


.tdTeeStreetLeft, .tdTeeStreetRight {
    height: 36px;
    width:100%;
    border-top: 6px solid #79b954;
    border-bottom: 6px solid #79b954;
    border-left:0;
    border-right:0;
    background-color: #cacacd;
    text-align:center;
    font-weight: bold;
    font-size:120%;
    margin: 8px; 
    
    /* Used on every 'location-type' td to assure 45/10/45 layout for cell phone */
    word-wrap: break-word;
    overflow-wrap:break-word;
    word-break:break-all;

}
.tdTeeStreetLeft {
}
.tdTeeStreetRight {
}


/* END: MainMap styles ------------------------------------- */