/* popup button styles */
div.popoverButton {
    overflow: hidden;
    
    position: relative; /* needed by elements */
    
    height: 38px;
    width: 340px;
    
    border-radius: 3px;
    border: 1px solid #979797;
    
    margin: 0 0;
    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: allr 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    
    cursor: pointer;
}

div.popoverButton * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.popoverButton:hover {
    box-shadow: 0 0 3px rgba(98, 165, 232, 0.5);
    border: 1px solid #5099e2;
}

div.popoverButton.expanded,
div.popoverButton.expanded:hover {
    overflow: visible;    
    box-shadow: none;
    border: 1px solid #979797;
}

div.popoverButton.expanded[orientation='bottom'],
div.popoverButton.expanded[orientation='bottom']:hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

div.popoverButton.expanded[orientation='top'],
div.popoverButton.expanded[orientation='top']:hover {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

div.popoverButton[orientation='top'].expanded div.selectedItem {
    border-top: 1px solid rgb(151, 151, 151);
    top: -1px;
    z-index: 200;
}

div.popoverButton[orientation='top'] div.items {
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    bottom: calc(100%);
    left: -1px;
}

div.popoverButton[orientation='bottom'] div.items {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    top: 0;
    left: -1px;
}

/* ELEMENT - LIST */
div.popoverButton div.items {
    border-radius: 3px;
    border: 1px solid #979797;
    background-color: white;
    position: relative;
    width: 100%;
    z-index: 200;
}

div.popoverButton div.items a,
div.popoverButton div.items a:hover,
div.popoverButton div.items a:active,
div.popoverButton div.items a:visited,
div.popoverButton div.items a:focus {
    width: calc(100% - 16px);
    padding: 0 8px;
    display: block;
    text-decoration: none;
}

div.popoverButton div.items a:hover {
    background: #c9e4ff;
}

/* placeholder is hidden */
div.popoverButton div.items a.placeholder {
    display: none;
}

div.popoverButton div.items a h2 {
    font-weight: 400;
    font-size: 2.0rem;
    line-height: 38px;
}

div.popoverButton div.items a p {
    color: #aaa;
    font-size: 1.6rem;
    margin: 0 0;
    padding: 0 0;
    padding-bottom: 6px;
}

div.popoverButton div.selectedItem {
    position: relative; /* needed by after block */
}

div.popoverButton div.selectedItem:after {
    display: block;
    content: ' ';
    height: 100%;
    width: 38px;
    
    position: absolute;
    top: 0;
    right: 0;
    
    pointer-events: none;
    
    background-color: #62a5e8;
    background-image: url("../../Images/buttons/popoverbutton-disclosure.png");
    background-position: center center;
    background-size: 38px 38px;
    background-repeat: no-repeat;
    
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

div.popoverButton:hover div.selectedItem:after,
div.popoverButton.expanded div.selectedItem:after {
    background-color: #5099e2;
}

div.popoverButton div.selectedItem h2 {
    font-size: 2.0rem;
    line-height:  38px;
    padding: 0 8px;
}

div.popoverButton[orientation='bottom'].expanded div.selectedItem {
    border-bottom: 1px solid #979797;
}

/* retina overrides */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)  {
    
    div.popoverButton div.selectedItem:after {
        background-image: url("../../Images/buttons/popoverbutton-disclosure@2x.png");
    }
}