@media (hover: hover) {
   /* when hover is supported */
   #tip1div:hover #tip1info {visibility: visible;}
   #tip2div:hover #tip2info {visibility: visible;}
   #tip3div:hover #tip3info {visibility: visible;}
   #tip4div:hover #tip4info {visibility: visible;}
   #contactdiv:hover #contactinfo {visibility: visible;}
   #buscontact:hover #buscontactinfo {visibility: visible;}
 }

/*input[type=checkbox] {position: absolute;clip: rect(0 0 0 0);}*/

/*make outer tip div universal - this contains the info symbol*/

#tip1div, #tip2div, #tip3div, #tip4div, #buscontact, #contactdiv {position:relative;width:2em;display:inline-block;text-align:center;}
#tip1symbol a, #tip2symbol a, #tip3symbol a, #tip4symbol a {color:#ff3300;font-weight:bold;text-decoration:none;}
/*set position of tooltip box for email*/

#buscontactclose a {color:#ff3300;font-weight:bold;text-decoration:none;}
#contactclose a {color:#ff3300;font-weight:bold;text-decoration:none;}

#tip1close, #tip2close, #tip3close, #tip4close, #buscontactclose, #contactclose  {visibility:hidden;width:1em;position: absolute;
  z-index: 1;
  left:15em;
  top:-8.4em;
  background-color:#ececec;
  font-size:1.2em;
  }
  
#tip1symbol, #tip2symbol, #tip3symbol, #tip4symbol {font-style:italic;}  

#tip1info, #tip2info, #tip3info, #tip4info, #contactinfo {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width:40em;
  text-align:left;
  padding:0.3em 1.5em;
  left:-15em;
  top:-10em;
  background-color:#ececec;
  margin-top:-0.5em;
  border:0.1em solid #0000cc;
  border-radius:0.5em;
  font-weight:normal;
  font-size:0.8em;
}

#buscontactinfo, #contactinfo {
font-size:1.0em;
visibility: hidden;
  position: absolute;
  z-index: 1;
  width:30em;
  text-align:left;
  padding:0.3em 1.5em;
  left:-15em;
  top:-10em;
  background-color:#ececec;
  margin-top:-0.5em;
  border:0.1em solid #0000cc;
  border-radius:0.5em;
  font-weight:normal;}