/* This explains how to do a tooltip in CSS.
 *
 * Alain D D Williams <addw@phcomp.co.uk> August 2013
 * SCCS: @(#)CSSforOverlib.css	1.1 08/30/13 22:23:58
 */

/* Hover over tooltip */
.tooltip_demo {
 position:absolute;        /* Ensure that it does not take space on the web page */
 visibility:hidden;        /* Normally it is invisible */
 background-color:yellow;  /* Something that contrasts with the rest of the web page */
 border-color:#000;        /* Black border, 1px wide */
 border-width:1px;
 border-style:solid;
 z-index:12;               /* Ensure that it hides anything that it where it pops up */
}
a:hover + .tooltip_demo {  /* Select for the item (span) that follow a link (<a>) that the mouse is hovering over */
 visibility:visible;       /* Make the text in class tooltip_demo visible */
}



/* Positioned tooltips */

.tooltipContainer {
 position:relative;        /* Arrow tooltips relative to this */
 max-width:500px;
 margin:0 auto 0 auto;
 text-align:center;
}
.tooltipContainer img {
 display:block;            /* So that the image tooltip is relative */
 margin:0 auto 0 auto;
}
.tooltipImageArrow {       /* For the arrows */
 font-size:200%;           /* Big enough to see */
 margin: 0;
 float:right;              /* Move to right of containing tooltipContainer */
}
.tooltipImageArrowLeft {
 float:left;               /* Move to left of containing tooltipContainer */
}
.tooltipImageArrow > a {
 text-decoration:none;     /* Stop the arrow being underlined */
}
.tooltipImageCaption {
 font-size:200%;
}

.tooltip_demo_p {          /* Positioned tooltip */
 position:absolute;        /* Ensure that it does not take space on the web page */
 visibility:hidden;        /* Normally it is invisible */
 background-color:yellow;  /* Something that contrasts with the rest of the web page */
 border-color:#000;        /* Black border, 1px wide */
 border-width:1px;
 border-style:solid;
 z-index:12;               /* Ensure that it hides anything that it where it pops up */
 top:+3em;
}
/* Select for the item (span) that follow a link (<a>) that the mouse is hovering over */
a:hover + .tooltip_demo_p, img:hover + .tooltip_demo_p {
 visibility:visible;       /* Make the text in class tooltip_demo & tooltip_demo_p visible */
}
/* duration, delay, and timing */

.tooltipr {                /* For the arrow on the RH size, position differently*/
 left:auto;
 right:2em;
}

/* A new class that is the same as tooltip_demo except for the transition property.
 * The notes claim that this is the same class, but create a new one else we muck
 * up the earlier demo.
 */
.tooltip_demo_delay {
 position:absolute;        /* Ensure that it does not take space on the web page */
 visibility:hidden;        /* Normally it is invisible */
 background-color:yellow;  /* Something that contrasts with the rest of the web page */
 border-color:#000;        /* Black border, 1px wide */
 border-width:1px;
 border-style:solid;
 z-index:12;               /* Ensure that it hides anything that it where it pops up */
 transition-property:visibility;
 transition-delay:0.2s;
}
a:hover + .tooltip_demo_delay {  /* Select for the item (span) that follow a link (<a>) that the mouse is hovering over */
 visibility:visible;       /* Make the text in class tooltip_demo visible */
 transition-property:visibility;
 transition-delay:0.2s;
}


/* end */