/*
 * Copyright 2012 The Board of Regents of the University of Wisconsin System.
 * Contributors: Jason Shao, James McCurdy, Enhai Xie, Adam G.W. Halstead,
 * Michael H. Whitney, Nathan DiPiazza, Trey K. Sato and Yury V. Bukhman
 *
 * This file is part of GCAT.
 *
 * GCAT is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * GCAT is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with GCAT.  If not, see <http://www.gnu.org/licenses/>.
 */

/*.tooltip:hover:after { content: attr(data-tooltip);
position: absolute; white-space: nowrap; background: rgba(0, 0, 0, 0.85); padding: 3px 7px; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-left: 7px; margin-top: -3px;font-size:10px;}
*/


  /* Make tooltip "links" have a different pointer (as the tooltip uses the "help" cursor by default) */      
  a[data-tooltip]
        {
        cursor:pointer !important;
        }
  /* Styles for elements having a data-tooltip attribute - using the star selector is processor intensive
     so you may wish to change this to list a known, limited set of tags instead */
  *[data-tooltip]
        {
        /* Relativly position the tooltip to enable us to position:absolute 
           the generated content */
        position:relative;        
        /* Links inherit the !important cursor rule from above */
        cursor:help;
        /* Moz requires the text-decoration here (as it won't allow the use of
          text-decoration:none on generated content) which is why I use the bottom 
          border to display a more accessible underline */
        text-decoration:none;   
        border-bottom:1px dotted #aaa; 
        /* Remove the styles for IE7 and below - could be passed using conditional comments */
        *text-decoration:inherit;   
        *border-bottom-width:inherit;
        *border-bottom-style:inherit;        
        *cursor:inherit;
        *position:inherit;            
        }
  /* Default :before & :after values */     
  *[data-tooltip]:after,
  *[data-tooltip]:before
        {
        content:"";
        /* Don't show tooltip by default */
        opacity:0;  
        /* Set a high z-index */
        z-index:999;
        
        /* Animations won't (yet) work on pseudo elements - shame really as this should fade the tooltip in 
           after one second - but I'll leave the rules for posterity */
        -moz-transition-property: opacity;
        -moz-transition-duration: 2s;
        -moz-transition-delay: 1s;
        
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 2s;
        -webkit-transition-delay: 1s;
        
        -o-transition-property: opacity;
        -o-transition-duration: 2s;
        -o-transition-delay: 1s;
        
        transition-property: opacity;
        transition-duration: 2s;
        transition-delay: 1s;  
        
        /* -moz won't understand the text-decoration here but inherits the parent value of "none" successfully */
        text-decoration:none !important;
        outline:none;
        }
  /* Tooltip arrow - shown on hover or focus */
  *[data-tooltip]:hover:before,
  *[data-tooltip]:focus:before
        {
        /* Slightly opaque arrow */
        opacity:0.94;
        outline:none;
        content:"";  
        display:block;        
        position:absolute;
        top:20px;
        left:50%;
        margin:0 0 0 -5px;
        width:0;
        height:0;
        line-height:0px; 
        font-size:0px;       
        /* This sets the tooptip pointer color */
        border-bottom:5px solid #33acfc;
        border-left:5px solid transparent;
        border-right:5px solid transparent;        
        border-top:transparent;
        /* Border gradient */        
        -webkit-border-image:-webkit-gradient(linear, left top, left bottom, from(#33ccff), to(#33acfc));                        
        }
  /* Tooltip body - shown on hover or focus */
  *[data-tooltip]:hover:after,
  *[data-tooltip]:focus:after
        {
        /* Slightly opaque tooltip */
        opacity:0.94;
        /* Set display to block (or inline-block) */
        display:block;
        /* Use the data-tooltip attribute to set the content*/
        content:attr(data-tooltip);
        /* Position the tooltip body under the arrow and in the middle of the text */
        position:absolute;
        top:25px;
        left:50%;
        margin:0 0 0 -150px;
        /* Set the width */
        width:290px;
        /* Pad */
        padding:5px;
        /* Style the tooltip */
        line-height:18px;
        /* min-height */
        min-height:18px; 
        /* Set font styles */  
        color:#fcfcfc;
        font-size:16px;        
        font-weight:normal;
        font-family:helvetica neue, calibri, verdana, arial, sans-serif;
        /* Fallback background color */
        background:#3198dd; 
        text-align:center;        
        outline:none;        
        /* Moz doesn't recognise the following... */
        text-decoration:none !important;                  
        /* Background gradient */        
        background:-webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
        background:-moz-linear-gradient(top,#33acfc,#3198dd);         
        /* Round the corners */
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        border-radius:10px;        
        /* Add a drop shadow */
        -moz-box-shadow:2px 2px 4px #ccc;
        -webkit-box-shadow:2px 2px 4px #ccc;
        box-shadow:2px 2px 4px #ccc;        
        /* Add a Text shadow */
        text-shadow:#2187c8 0 1px 0px; 
        }