/* general mods */
html {
    background: transparent url('../img/bg-nyl-rock-diagonal.png') repeat scroll 0 0;
}
body {
    background: transparent;
    font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia',serif;
    font-weight: normal;
}

h1 {
    font-size: 28px;
}
hr { border-color: #ccc; }

a, a:visited {
    color: #007AC2;
    font-weight: bold;
}
a:hover, a:visited:hover {
    color: #4ca2d4;
    text-decoration: none;
}


/* pictogram element placement */

#pictogram-map {
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
    margin-top: 0;
    position: relative;}

#pictogram-map {
    background: url('../img/roadmap-980x2.jpg') no-repeat left top;
    background-size: 100%;
    height: 812px;
}

.pictogram-target {
    background-color: transparent;
    background-clip: content-box;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 200%;
    position: absolute;
    border: none;
    padding: 0;
    display: block;
    cursor: pointer;
}
.pictogram-target:hover {
    background-position: right top;
    cursor: pointer;
    /* opacity: 0.85; */
}
#benefit0 { /* 250px x 140px */
    width: 20.425%;
    height: 17.241%;
    background-image: url('../img/benefit-0-2016.png');
    top: 11.5%; left: 1%;
}
#benefit1 { /* 150px x 250px */
    width: 14.297%;
    height: 30.788%;
    background-image: url('../img/benefit-1-health.png');
    top: 11.8%; left: 23.5%;
}
#benefit1A { /* 90px x 100px */
    width: 7.352%;
    height: 12.315%;
    background-image: url('../img/benefit-1-medical.png');
    top: 12.5%; left: 38%;
}
#benefit1B { /* 110px x 90px */
    width: 8.987%;
    height: 11.084%;
    background-image: url('../img/benefit-1-prescription.png');
    top: 23.25%; left: 38%;
}
#benefit1C { /* 110px x 90px */
    width: 8.987%;
    height: 11.084%;
    background-image: url('../img/benefit-1-dental.png');
    top: 29%; left: 15%;
}
#benefit1D { /* 110px x 100px */
    width: 8.987%;
    height: 12.315%;
    background-image: url('../img/benefit-1-vision.png');
    top: 38.5%; left: 20.5%;
}
#benefit2 { /* 315px x 300px */
    width: 25.735%;
    height: 36.946%;
    background-image: url('../img/benefit-2-incentives.png');
    top: 51.3%; left: 5.5%;
}
#benefit2A { /* 120px x 110px */
    width: 9.804%;
    height: 13.547%;
    background-image: url('../img/benefit-2-screenings.png');
    top: 81%; left: 9.5%;
}
#benefit2B { /* 110px x 110px */
    width: 8.987%;
    height: 13.547%;
    background-image: url('../img/benefit-2-activities.png');
    top: 65.25%; left: 8.25%;
}
#benefit3 { /* 175px x 250px */
    width: 14.297%;
    height: 30.788%;
    background-image: url('../img/benefit-3-accounts.png');
    top: 35%; left: 38.25%;
}
#benefit3A { /* 100px x 90px */
    width: 8.170%;
    height: 11.084%;
    background-image: url('../img/benefit-3-HRA.png');
    top: 38.75%; left: 48.25%;
}
#benefit3B { /* 110px x 120px */
    width: 8.987%;
    height: 14.778%;
    background-image: url('../img/benefit-3-FSA1.png');
    top: 58.25%; left: 29.75%;
}
#benefit3C { /* 130px x 120px */
    width: 10.621%;
    height: 14.778%;
    background-image: url('../img/benefit-3-FSA2.png');
    top: 62.25%; left: 43%;
}
#benefit4 { /* 175px x 275px */
    width: 14.297%;
    height: 33.867%;
    background-image: url('../img/benefit-4-protection.png');
    top: 7.25%; left: 64%;
}
#benefit4A { /* 110px x 90px */
    width: 8.987%;
    height: 11.084%;
    background-image: url('../img/benefit-4-lifeins.png');
    top: 14.75%; left: 56%;
}
#benefit4B { /* 130px x 100px */
    width: 10.621%;
    height: 12.315%;
    background-image: url('../img/benefit-4-dlifeins.png');
    top: 14.25%; left: 78%;
}
#benefit4C { /* 100px x 100px */
    width: 8.170%;
    height: 12.315%;
    background-image: url('../img/benefit-4-add.png');
    top: 28%; left: 78%;
}
#benefit4D { /* 100px x 100px */
    width: 8.170%;
    height: 12.315%;
    background-image: url('../img/benefit-4-ldd.png');
    top: 36%; left: 62%;
}
#benefit5 { /* 300px x 220px */
    width: 24.510%;
    height: 27.094%;
    background-image: url('../img/benefit-5-other.png');
    top: 52%; left: 55.5%;
}
#benefit5A { /* 100px x 100px */
    width: 8.170%;
    height: 12.315%;
    background-image: url('../img/benefit-5-vacation.png');
    top: 59%; left: 69.5%;
}
#benefit5B { /* 100px x 100px */
    width: 8.170%;
    height: 12.315%;
    background-image: url('../img/benefit-5-legal.png');
    top: 72.5%; left: 68%;
}
#benefit5C { /* 110px x 100px */
    width: 8.987%;
    height: 12.315%;
    background-image: url('../img/benefit-5-commuter.png');
    top: 75.25%; left: 52.5%;
}
#benefit6 { /* 200px x 275px */
    width: 16.340%;
    height: 33.870%;
    background-image: url('../img/benefit-6-enroll.png');
    top: 61%; left: 83%;
}
#benefit6A { /* 100px x 156px */
    width: 8.170%;
    height: 19.212%;
    background-image: url('../img/benefit-6-tools.png');
    top: 74.5%; left: 77%;
}
#benefit6B { /* 100px x 190px */
    width: 8.170%;
    height: 23.399%;
    background-image: url('../img/benefit-6-2017.png');
    top: 71%; left: 91%;
}

.pictogram-target img {
  display: none;
}

/* modal */
.modal-content {
    border-radius: 0;
}
.modal-backdrop {
    background-color: #fff;
}
.pictogram-modal a {
    font-weight: bold;
}
.pictogram-modal .modal-dialog {
    width: 750px;
}
.modal-header {
    border-top: 4px solid #527064;
    border-bottom: none;
}
.modal-title {
    display: none;
}
.close {
    font-size: 14px;
    font-weight: normal;
    height: 24px;
}
.close-label {
    display: inline-block;
    margin-top: 6px;
    vertical-align: top;
}
.modal-body {
    color: #404040;
    min-height: 350px;
}
.modal-primary-content {
    min-height: 250px;
    max-height: 550px;
    overflow-y: auto;
}
.modal-body .hed {
    margin-top: 0;
}
.modal-body .subhed {
    margin-top: 1.4em;
}
.modal-footer {
    border: none;
}

/* data table customization */
.nyl-table-container {
    margin: 2em 0;
    overflow-x: auto;
}
.nyl-table {
    min-width: 530px;
}
.nyl-table > thead > tr > th,
.nyl-table > tbody > tr > th,
.nyl-table > tbody > tr > td {
    border-color: #849437;
    border-width: 2px;
    border-left: 2px solid #849437;
}

.nyl-table > thead > tr > th:first-child,
.nyl-table > tbody > tr > th  {
    border-left: none;
}

.nyl-table-note {
    color: #808080;
    display: block;
    font-weight: normal;
    font-size: 12px;
    margin-top: 1em;
}
.nyl-table-help {
    background-color: #f0f0f0;
    color: #808080;
    font-size: 12px;
    font-style: italic;
    margin-top: -2em;
    padding: 4px;
    text-align: center;
}
/* sidebar links & big primary content links */

.modal-sidebar-links, .modal-primary-content-links {
    color: #007AC2;
    cursor: pointer;
    font-weight: bold;
    list-style: none;
    padding-left: 0;
}
.modal-primary-content-links li {
    display: inline-block;
    vertical-align: top;
}
.modal-sidebar-link {
    background: url('../img/icon-dental.png') left center no-repeat;
    background-size: 24px 24px;
    border-bottom: 1px dashed #ebebeb;
    display: block;
    padding: 16px 0 16px 36px;
}
.modal-primary-content-link {
    background: url('../img/icon-dental.png') left top no-repeat;
    background-size: 96px 96px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    padding-top: 102px;
    text-align: left;
    width: 96px;
}
.modal-sidebar-link:hover,
.modal-primary-content-link:hover {
    color: #4ca2d4;
    opacity: 0.9;
}
.sidebar-link-dental { background-image: url('../img/icon-dental.png'); }
.sidebar-link-medical { background-image: url('../img/icon-medical.png'); }
.sidebar-link-prescription { background-image: url('../img/icon-prescription.png'); }
.sidebar-link-vision { background-image: url('../img/icon-vision.png'); }
.sidebar-link-screenings { background-image: url('../img/icon-screening.png'); }
.sidebar-link-activities { background-image: url('../img/icon-activities.png'); }
.sidebar-link-HRA { background-image: url('../img/icon-HRA.png'); }
.sidebar-link-FSA1 { background-image: url('../img/icon-FSA1.png'); }
.sidebar-link-FSA2 { background-image: url('../img/icon-FSA2.png'); }
.sidebar-link-lifeins { background-image: url('../img/icon-lifeins.png'); }
.sidebar-link-dlifeins { background-image: url('../img/icon-dlifeins.png'); }
.sidebar-link-ADD { background-image: url('../img/icon-add.png'); }
.sidebar-link-LDD { background-image: url('../img/icon-disability.png'); }
.sidebar-link-vacation { background-image: url('../img/icon-vacation.png'); }
.sidebar-link-legal { background-image: url('../img/icon-legal.png'); }
.sidebar-link-commuter { background-image: url('../img/icon-commuter.png'); }
.sidebar-link-tools { background-image: url('../img/icon-tools.png'); }
.sidebar-link-2016 { background-image: url('../img/icon-2016.png'); }
.sidebar-link-2017 { background-image: url('../img/icon-2017.png'); }
.sidebar-link-enroll { background-image: url('../img/icon-enroll.png'); }

.pictogram-modal-content .popover {
    color: #fff;
    font-size: 12px;
}
.pictogram-modal-content .popover p {
    background-color: inherit;
    padding: 0;
    text-align: left;
}
.pictogram-modal-content .popover a {
    color: #fff;
}
.pictogram-modal-content .popover-title {
    display:none;
}
.pictogram-modal-content-hsa .popover.top>.arrow:after {
    border-top-color: #00a9e0;
}
.pictogram-modal-content-fsa .popover.top>.arrow:after {
    border-top-color: #512d6d;
}
.pictogram-modal-content-rhsp .popover.top>.arrow:after {
    border-top-color: #007377;
}
ul.pictogram-keypoints li {
    margin-bottom: 1em;
}


/* responsive breakpoint tweaks */


@media screen and (min-width: 768px) {
    #pictogram-map {
        height: 497px;
    }
}

@media screen and (min-width: 992px) {
    #pictogram-map {
        height: 643px;
    }
}

@media screen and (min-width: 1224px) {
    .container { width: 1224px; }
    #pictogram-map {
        height: 812px;
    }
}

/* mobile version */
@media screen and (max-width: 767px) {
    body {  }
    h1 {  }
    h3 {  }

    #pictogram-map {
        background: url('../img/roadmap-360x2.jpg') no-repeat left top;
        background-size: 100%;
        width: 360px;
        height: 1860px;
        margin: 0 auto;
        float: none;
    }
    .pictogram-modal-content p {}

    #benefit0 { /* 250px x 140px */
        width: 69.444%;
        height: 7.527%;
        top: 4%; left: 2%;
    }
    #benefit1 { /* 150px x 250px */
        width: 41.667%; /* 150 / 360 */
        height: 13.441%; /* 250 / 1860 */
        top: 13.1%; left: 26.5%;
    }
    #benefit1A { /* 90px x 100px */
        width: 25%; /* 90 / 360 */
        height: 5.376%; /* 100 / 1860 */
        top: 12.5%; left: 64%;
    }
    #benefit1B { /* 110px x 90px */
        width: 30.556%; /* 110 / 360 */
        height: 4.839%; /* 90 / 1860 */
        top: 17.25%; left: 67%;
    }
    #benefit1C { /* 110px x 90px */
        width: 30.556%; /* 110 / 360 */
        height: 4.839%; /* 90 / 1860 */
        top: 17%; left: 1%;
    }
    #benefit1D { /* 110px x 100px */
        width: 30.556%; /* 110 / 360 */
        height: 5.376%; /* 100 / 1860 */
        top: 23%; left: 20.5%;
    }
    #benefit2 {
        background-image: url('../img/benefit-2-incentives-mobile.png');
        width: 46.667%;
        height: 14.286%;
        left: 51%;
        top: 26.5%
    }
    #benefit2A {
        width: 33.333%; /* 120 / 360 */
        height: 5.914%; /* 110 / 1860 */
        top: 35%; left: 22%;
    }
    #benefit2B {
        width: 30.556%; /* 110 / 360 */
        height: 5.914%; /* 110 / 1860 */
        top: 29%; left: 23%;
    }
    #benefit3 { /* 175px x 250px */
        width: 48.611%;
        height: 13.441%;
        top: 41.5%; left: 1.25%;
    }
    #benefit3A { /* 100px x 90px */
        width: 27.778%; /* 100 / 360 */
        height: 4.839%;
        top: 41.5%; left: 38.25%;
    }
    #benefit3B { /* 120px x 120px */
        width: 33.333%; /* 120 / 360 */
        height: 6.452%;
        background-image: url('../img/benefit-3-FSA1-mobile.png');
        top: 43.25%; left: 59.75%;
    }
    #benefit3C { /* 140px x 110px */
        width: 38.889%; /* 140 / 360 */
        height: 5.914%; /* 110 / 1860 */
        background-image: url('../img/benefit-3-FSA2-mobile.png');
        top: 49.25%; left: 50%;
    }
    #benefit4 { /* 175px x 275px */
        width: 48.611%;
        height: 14.785%;
        top: 56%; left: 25%;
    }
    #benefit4A { /* 110px x 90px */
        width: 30.556%; /* 110 / 360 */
        height: 4.839%; /* 90 / 1860 */
        top: 59.5%; left: 2%;
    }
    #benefit4B { /* 130px x 100px */
        width: 36.111%; /* 130 / 360 */
        height: 5.376%; /* 100 / 1860 */
        top: 58%; left: 63%;
    }
    #benefit4C { /* 140px x 140px */
        width: 27.778%; /* 100 / 360 */
        height: 5.376%; /* 100 / 1860 */
        top: 66.5%; left: 71%;
    }
    #benefit4D { /* 100px x 100px */
        width: 27.778%; /* 100 / 360 */
        height: 5.376%; /* 100 / 1860 */
        top: 66.5%; left: 2%;
    }
    #benefit5 { /* 190px x 220px */
        width: 52.778%;
        height: 11.828%;
        background-image: url('../img/benefit-5-other-mobile.png');
        top: 73.5%; left: 12%;
    }
    #benefit5A { /* 100px x 100px */
        width: 27.778%; /* 100 / 360 */
        height: 5.376%; /* 100 / 1860 */
        top: 77%; left: 60%;
    }
    #benefit5B { /* 100px x 100px */
        width: 27.778%; /* 100 / 360 */
        height: 5.376%; /* 100 / 1860 */
        top: 82%; left: 61%;
    }
    #benefit5C { /* 110px x 100px */
        width: 30.556%; /* 110 / 360 */
        height: 5.376%; /* 100 / 1860 */
        top: 83%; left: 7%;
    }
    #benefit6 { /* 140px x 175px */
        background-image: url('../img/benefit-6-enroll-mobile.png');
        width: 38.889%; /* 140 / 360 */
        height: 9.409%; /* 175 / 1860 */
        top: 90%; left: 34%;
    }
    #benefit6A { /* 100px x 156px */
        width: 27.778%; /* 100 / 360 */
        height: 8.387%; /* 156 / 1860 */
        top: 90%; left: 7%;
    }
    #benefit6B { /* 100px x 190px */
        width: 27.778%; /* 100 / 360 */
        height: 10.215%; /* 190 / 1860 */
        top: 89.5%; left: 72%;
    }

    /* modal behavior */
    .modal {
        overflow: inherit;
        position: absolute;
    }
    .modal-primary-content {
        max-height: inherit;
        overflow-y: inherit;
    }
    .modal-primary-content-links {
        max-width: 300px;
    }
    .modal-primary-content-link {
        margin-bottom: 30px;
    }
    .modal-sidebar {
        background-color: #e4efff;
        border: solid #c0c0c0;
        border-width: 1px 0;
        padding-top: 1em;
        margin: 1em 0;
    }
}