@font-face { font-family: HelveticaLTStdBold; src: url("../fonts/HelveticaLTStd-Bold.otf"); }

* { margin: 0; padding: 0; }

/* POP-OVER */
.pop-over { position: absolute; z-index: 10; visibility: hidden; opacity: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-border-radius: 7px; border-top: 1px solid rgba(255, 255, 255, 0.7); background-color: #121b28; background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.3))); background-position: top left; background-repeat: no-repeat; background-size: 100% 44px; }
.pop-over.visible { visibility: visible; opacity: 1; }
.pop-over header { display: -webkit-box; -webkit-box-pack: start; -webkit-box-orient: vertical; padding-top: 14px; padding-bottom: 7px; text-align: center; font-family: HelveticaLTStdBold; font-size: 14pt; color: white; -webkit-text-stroke: 1px transparent; /* anti-aliasing trick */ }
.pop-over header::before { position: absolute; width: 45px; height: 30px; top: -27px; left: 150px; content: url("../images/popover-callout.png"); }
.pop-over header::after { position: absolute; top: 31px; display: -webkit-box; -webkit-box-align: stretch; -webkit-box-orient: horizontal; -webkit-border-radius: 7px; margin: 4px; width: 98%; display: block; content: ''; height: 0; border: 1px solid transparent; -webkit-box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.6); }
.pop-over section { display: -webkit-box; -webkit-box-align: stretch; -webkit-box-pack: start; -webkit-box-orient: vertical; -webkit-border-radius: 7px; -webkit-box-flex: 1; margin: 4px; padding: 4px; background: #DCDFE5; }
.pop-over section nav { display: -webkit-box; -webkit-box-align: stretch; -webkit-box-orient: vertical; -webkit-box-flex: 1; margin: 6px; background-color: #f7f7f7; -webkit-border-radius: 7px; border: solid 1px #bbbbbb; }
.pop-over section nav ul { display: -webkit-box; -webkit-box-align: stretch; -webkit-box-orient: vertical; -webkit-box-flex: 1; }
.pop-over section nav ul li { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-flex: 1; font-family: HelveticaLTStdBold; font-size: 12pt; color: #040404; padding-top: 17px; padding-left: 17px; padding-right: 17px; background-repeat: no-repeat; background-position: right 15px; background-size: 10px 13px; background-image: url("../images/list-chevron.png"); }
.pop-over section nav ul li.selected { background-image: url("../images/list-chevron-selected.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0.25, #7c8490), color-stop(0.5, #68707c), color-stop(0.85, #545d6a)); background-position: right 15px,top left; background-size: 10px 13px,100% 100%; color: white; }
.pop-over section nav ul li:not(:last-child) { border-bottom: solid 1px rgba(187, 187, 187, 0.8); }
.pop-over section nav ul li:first-child.selected { -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; }
.pop-over section nav ul li:last-child.selected { -webkit-border-bottom-left-radius: 7px; -webkit-border-bottom-right-radius: 7px; }
.pop-over.webdood-example { left: 177px; /* This positions the pop-over */ top: 60px; width: 300px; /* This sets the size of the pop-over */ height: 204px; }
.pop-over.webdood-example header::before { left: 200px; /* This positions the callout */ }
.pop-over.webdood-example li { background-position-x: 244px; /* This position the chevron nicely */ }
.pop-over.webdood-example li.selected { background-position: 244px 15px,top left; }