#rule-info {
    position: absolute ; top: 5px ; left: 5px ; bottom: 5px ; right: 5px ;
    overflow-y: auto ;
    z-index: 10 ;
    border: 1px solid #444 ; border-radius: 5px ; background: white ;
}
#rule-info-overlay {
    position: absolute ; top: 0 ; left: 0 ; bottom: 0 ; right: 0 ;
    background: white ;
    z-index: 5 ;
}
#nav img.close-rule-info {
    position: absolute ; top: 1px ; right: 1px ; z-index: 15 ;
    height: 18px ; cursor: pointer ;
}

/* This transition was originally a slide, but it proved to be quite distracting, since the user will be looking at
 * the content pane (after having clicked on a link), but there's stuff whizzing around in their peripheral vision.
 * Having a slow fade-in is far more unobtrusive.
 */
.ruleinfo-slide-enter-active { transition: opacity 1s linear ; }
.ruleinfo-slide-enter-from { opacity: 0 ; }
.ruleinfo-slide-leave-active  { transition: opacity .1s linear ; }
.ruleinfo-slide-leave-to { opacity: 0 ; }

/* NOTE: Rule info entries can appear in the rule info popup *and* search results, so the following rules need to be global. */

.rule-info { padding: 5px ; }
.rule-info p { margin-top: 5px ; }
.rule-info br { margin-top: 3px ; }
.rule-info .quote { font-style: italic ; color: #406040 ; }
.rule-info .caption .auto-ruleid { color: inherit ; }
.rule-info .caption .auto-ruleid:hover { background: inherit ; }

.qa img.icon { float: left ; margin: 0 6px 0 0 ; height: 18px ; }
.qa .content { clear: left ; margin-top: 5px ; }
.qa .caption { margin-bottom: 2px ; background: #60b0ff ; border: 1px solid #50a0f0 ; border-radius: 3px ; padding: 2px 5px ; font-weight: bold ; color: #002850 ; }
.qa .collapser { height: 16px ; float: right ; margin: 1px 2px 1px 0 ; }
.qa .question { margin-bottom: 5px ; color: #002850 ; }
.qa .question img { float: right ; margin: 0 0 5px 5px ; height: 100px ; }
.qa .answer { clear: left ; padding-bottom: 2px ; font-style: italic ; color: #0c6905 ; }
.qa .answer em, .qa .answer i { font-style: normal ; }
.qa .answer .note { font-size: 80% ; font-style: italic ; color: #666 ; }
.qa .info { margin-bottom: 8px ; color: #2050a0 ; }
.qa .info .note { font-size: 80% ; font-style: italic ; color: #666 ; }
.qa .info .note a { color: #666 ; }
.qa .see-other { font-size: 80% ; font-style: italic ; color: #0c6905 ; }

.anno img.icon { float: left ; margin: 0 6px 0 0 ; height: 18px ; }
.anno .caption { margin-bottom: 2px ; border-radius: 3px ; padding: 2px 5px ; font-weight: bold ; }
.anno .caption.errata { background: #ffc020 ; border: 1px solid #f0b010 ; }
.anno .caption.user-anno { background: #20ff20 ; border: 1px solid #10f010 ; }
.anno .collapser { height: 16px ; float: right ; margin: 1px 2px 1px 0 ; }
.anno .content { clear: left ; margin-top: 5px ; }
