/* CSS Tooltips */
/* ++++ Original Tooltip Coding ++++
.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
*/

/* +++ TOOLTIP for TASK +++ */
/* create the tooltip class */
 .ttTask{
    display: inline;
    position: relative;
}
/* define tooltip contents & style it */
.ttTask:after{
    content: "Click here for task";
    width: 9em;
    position: absolute;
    top: 2px; 
    left: 113%;

    background: mistyrose;
    background: rgba(255,228,225,.15);
    border-radius: 5px;
    color: navy;
    color: rgba(0,0,128,.4);
    padding: 3px 8px;
    z-index: 98;
    border: solid;
    border-color: navy;
    border-color: rgba(0,0,128,.3);
    border-width: 1px 1px 1px 1px ;
    font-size: .7em;
    font-style: italic;
    text-align:center;
    box-shadow:5px 2px 5px lightgrey ;
    box-shadow:5px 2px 5px rgba(200,200,200,1) ;
    text-decoration:none;
    -moz-text-decoration-line:none;
}

/*  creates an "arrow" effect with borders */
.ttTask:before{
    bottom: 6px;
    top: 7px;
    content: "";
    left: 104%;

    position: absolute;
    border: solid;
    border-color: transparent navy transparent transparent;
    border-color: transparent rgba(0,0,128,.4) transparent transparent;
    border-width: 6px 6px 6px 6px;
    z-index: 98;
} 
/* +++ TOOLTIP for TASK ends here +++ */ 

/* +++ TOOLTIP for RECOMMENDED MATERIALS +++ */
/* create the tooltip class */
 .ttRec{
    display: inline;
    position: relative;
}
/* define tooltip contents & style it */
.ttRec:after{
    content: "Click for more";
    width: 7em;
    position: absolute;
    top: 2px; 
    left: 110%;
    background: mistyrose;
    background: rgba(255,228,225,.15);
    border-radius: 5px;
    color: navy;
    color: rgba(0,0,128,.4);
    padding: 1px 2px;
    z-index: 98;
    border: solid;
    border-color: navy;
    border-color: rgba(0,0,128,.3);
    border-width: 1px 1px 1px 1px ;
    font-size: .7em;
    font-style: italic;
    text-align:center;
    box-shadow:5px 2px 5px lightgrey ;
    box-shadow:5px 2px 5px rgba(200,200,200,1) ;
    text-decoration:none;
    -moz-text-decoration-line:none;
}

/*  creates an "arrow" effect with borders */
.ttRec:before{
    bottom: 6px;
    top: 7px;
    content: "";
    left: 105%;
    position: absolute;

    border: solid;
    border-color: transparent navy transparent transparent;
    border-color: transparent rgba(0,0,128,.4) transparent transparent;
    border-width: 6px 6px 6px 6px;
    z-index: 98;
} 
/* +++ TOOLTIP for RECOMMENDED MATERIALS ends here +++ */
  

/* +++ TOOLTIP for ADDITIONAL MATERIALS +++ */
/* create the tooltip class */
 .ttAdd{
    display: inline;
    position: relative;
}
/* define tooltip contents & style it */
.ttAdd:after{
    content: "Click for even more";
    width: 10em;
    position: absolute;
    top: 2px; 
    left: 110%;

    background: mistyrose;
    background: rgba(255,228,225,.15);
    border-radius: 5px;
    color: navy;
    color: rgba(0,0,128,.4);
    padding: 1px 2px;
    z-index: 98;
    border: solid;
    border-color: navy;
    border-color: rgba(0,0,128,.3);
    border-width: 1px 1px 1px 1px ;
    font-size: .7em;
    font-style: italic;
    text-align:center;
    box-shadow:5px 2px 5px lightgrey ;
    box-shadow:5px 2px 5px rgba(200,200,200,1) ;
    text-decoration:none;
    -moz-text-decoration-line:none;
}

/*  creates an "arrow" effect with borders */
.ttAdd:before{
    bottom: 6px;
    top: 7px;
    content: "";
    left: 103%;

    position: absolute;
    border: solid;
    border-color: transparent navy transparent transparent;
    border-color: transparent rgba(0,0,128,.4) transparent transparent;
    border-width: 6px 6px 6px 6px;
    z-index: 98;
} 
/* +++ TOOLTIP for ADDITIONAL MATERIALS ends here +++ */
  
    
/* +++ TOOLTIP for STUDY QUESTIONS +++ */
/* create the tooltip class */
 .ttSQs{
    display: inline;
    position: relative;
}
/* define tooltip contents & style it */
 .ttSQs:after{
    content: "Click to Reveal";
    width: 9em;
    position: absolute;
    top: 0px; 
    left: 110%;

    background: mistyrose;
    background: rgba(255,228,225,.15);
    border-radius: 5px;
    color: navy;
    color: rgba(0,0,128,.4);
    padding: 2px 3px;
    z-index: 98;
    border: solid;
    border-color: navy;
    border-color: rgba(0,0,128,.3);
    border-width: 1px 1px 1px 1px ;
    font-size: .7em;
    font-style: italic;
    text-align:center;
    box-shadow:5px 2px 5px lightgrey ;
    box-shadow:5px 2px 5px rgba(200,200,200,1) ;
    text-decoration:none;
    -moz-text-decoration-line:none;
}

/*  creates an "arrow" effect with borders */
 .ttSQs:before{
    bottom: 2px;
    top: 7px;
    content: "";
    left: 102%;
    position: absolute;
    border: solid;
    border-color: transparent navy transparent transparent;
    border-color: transparent rgba(0,0,128,.4) transparent transparent;
    border-width: 6px 6px 6px 6px;
    z-index: 96;
} 
/* +++ TOOLTIP for STUDY QUESTIONS ends here +++ */