@font-face {
    font-family: semibold;
    src: url('/National_Library/oe_/https://maps.metmuseum.org/fonts/TheMetSans-Semibold.otf');
}

@font-face {
    font-family: regular;
    src: url('/National_Library/oe_/https://maps.metmuseum.org/fonts/TheMetSans-Regular.otf');
}

@font-face {
    font-family: tabFont;
    src: url('/National_Library/oe_/https://maps.metmuseum.org/fonts/TheMetSans-Medium.otf');
}

#modal {
    cursor: default;
    z-index: 4;
    width: 20.5em;
    margin-left: -20.5em;
    height: 100%;
    position: absolute;
    background-color: #f4f4f4;
    overflow: hidden;

    -webkit-transition: margin-left 500ms ease;
    -moz-transition: margin-left 500ms ease;
    -o-transition: margin-left 500ms ease;
    transition: margin-left 500ms ease;
}

#modal.active {
    margin-left: 0px;
    box-shadow: 3px 0px 0px rgba(0, 0, 0, 0.2);
}

#tab-nav {
    background-color: #EAEAEA;
    width: 100%;
    float: right;
    height: 42px;
}

#tab-nav.notembed {
    background-color: #f4f4f4;
}

#tab-nav > ul {
    height: 43px;
    width: 50%;
    margin: 0;
    padding: 0;
    display: -webkit-inline-flex;
    display: inline-flex;
    list-style: none;
    float: right;
}

#tab-nav > ul.notembed {
    display:none;
}

#tab-nav > ul li{
    cursor: pointer;
    text-align: center;
    width: 50%;
    line-height: 41px;
    border: 1px solid #c8c8c8;
    border-top: 0;
    border-left: 0;
    font-family: tabFont;
    font-size: 20px;
    color: #E3002A;
    line-height: 45px;
}

#tab-nav > ul li.current{
    border-bottom: 0;
    background-color: #f4f4f4;
    color: #000;
}

#close-share {
    cursor: pointer;
    border-bottom: 1px solid #c8c8c8;
    float: right;
    width: 50%;
    height: 42px;
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/embed-close_DEF.svg");
    background-repeat: no-repeat;
    background-position: right;
}

#close-share.notembed {
    border: 0px;
}

#close-share:hover {
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/embed-close_HOV.svg");
}

#close-share:active {
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/embed-close_CLI.svg");
}

.content {
    padding-bottom: 40px;
    padding-top: 40px;
    height: 100%;
    float: left;
}

.content h2 {
    font-family: semibold;
    line-height: 24px;
    color: #E3002A;
    padding: 0px 30px 15px 30px;
    margin-top: 0;
}

.description {
    padding: 0px 30px 30px 30px;
    font-family: regular;
    font-size: 16px;
    line-height: 19px;
}

.copy_link {
    text-align: center;
}

#input_copy {
    width: calc(100% - 47px);
    border: 1px solid #c8c8c8;
    margin-left: 15px;
    margin-right: 15px;
    height: 42px;
    font-size: 16px;
    font-family: regular;
    margin: 0;
    padding: 0px 0px 0px 15px;
    line-height: 3.1em;

    -webkit-transition: background-color 250ms ease;
    -moz-transition: background-color 250ms ease;
    -o-transition: background-color 250ms ease;
    -ms-transition: background-color 250ms ease;
    transition: background-color 250ms ease;
}

#input_copy.blink {
    background-color: rgba(0, 144, 209, 0.4);
}

.copy_link > button {
    cursor: pointer;
    width: calc(100% - 30px);
    height: 42px;
    line-height: 2.1em;
    border: none;
    background-color: #E3002A;
    font-family: tabFont;
    font-size: 20px;
    color: #fff;
}

.copy_link > button.copied {
    color: #000;
    background-color: #c8c8c8;
}

.copy_link > button.copied:hover {
    color: #000;
    background-color: #c8c8c8;
}

.copy_link > button:hover {
    background-color: #A51837;
}

.copy_link > button:active {
    color: rgba(255, 255, 255, 0.6);
    background-color: #A51837;
}

#option-menu {
    font-family: regular;
    list-style: none;
    font-size: 16px;
    list-style: none;
    height: 42px;
    overflow: hidden;
    margin-top: 0px;
    padding-left: 30px;
    margin-bottom: 30px;
    border: 1px solid #c8c8c8;
    border-left: 0;
    border-right: 0;

    -webkit-transition: height 300ms ease;
    -moz-transition: height 300ms ease;
    -o-transition: height 300ms ease;
    transition: height 300ms ease;
}

#option-menu > ul {
    list-style: none;
    padding-left: 15px;
}

#option-menu.open {
    height: 19em;
    background-color: #EBEBEB;
}

#advanced {
    font-family: tabFont;
    cursor: pointer;
    height: 42px;
    letter-spacing: 0.03em;
    line-height: 45px;
}

.checkoption > label {
    font-family: regular;
    font-size: 16px;
    line-height: 19px;
}

#expand-advance {
    cursor: pointer;
    background-image: url("/National_Library/oe_/https://maps.metmuseum.org/img/iconsSVG/expand-list-advanced.svg");
    height: 42px;
    float: right;
    width: 42px;
    -webkit-animation-name: collapse;
    -webkit-animation-duration: 300ms;
    animation: collapse 300ms;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

#expand-advance.open {
    -webkit-animation-name: expand;
    -webkit-animation-duration: 300ms;
    animation: expand 300ms;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.child {
    color: rgba(0, 0, 0, 0.5);
    padding: 6px 4px 0px 14px;
}

.parent {
    padding-top: 6px;
}

#copy_safari {
    padding: 15px 30px 0px 30px;
    text-align: left;
    font-family: regular;
    font-size: 16px;
    line-height: 19px;
    color: rgba(0, 0, 0, 0.6);
}

#tooltip {
    opacity: 0;
    padding: 5px 0px 5px 0px;
    position: absolute;
    width:140px;
    color: #FFFFFF;
    background: #282C32;
    height: 30px;
    font-size: 18px;
    font-family: tabFont;
    line-height: 35px;
    text-align: center;

    -webkit-transition: opacity 250ms ease-in;
       -moz-transition: opacity 250ms ease-in;
         -o-transition: opacity 250ms ease-in;
}

#tooltip.share:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -8px;
    width: 0; height: 0;
    border-right: inherit;
    border-left: 8px solid #000000;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

#tooltip.show {
    opacity: 1;
}

#tooltip.embed:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -8px;
    width: 0; height: 0;
    border-right: 8px solid #000000;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

#reset {
    margin-top: 30px;
    background-color: #c8c8c8;
}

#reset:hover {
    background-color: #A0A0A0;
}

#reset:active {
    color: rgba(255, 255, 255, 0.6);
    background-color: #A0A0A0;
}