SupportCasts™ - Rapidweaver Screencasts

<h2>By Default</h2>
<a title="RW Screencast Training" href="supportcasts.com">SupportCasts</a>
<h2>For an Active Link</h2>
<a class="tip" href="http://myrapidweaver.us">myRapidWeaver<span>Put Info Here</span></a>
<h2>Just for Information</h2>
<a class="tip" href="#">This is a tooltip<span>add text that appears just when you roll on with the mouse</span></a>
<h2>Just for Information</h2>
<a class="tip" href="#">What about an Image?<span><img src="assets/Beaker_512x512.png" alt="" width="108px" height="108px" /></span></a>

a.tip {
	position: relative;
         text-decoration: none;
}
 
a.tip span {
	display: none;
	position: absolute;
	top: -10px;
	left: 100px;
	width: 150px;
	z-index: 100;
	background: #ccc;
	border: 2px solid red;
	padding: 10px 0 10px 20px;
	color: #000;
	font-weight: bold;
	-moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */
	-webkit-box-shadow: -5px -5px 15px #222;
	-moz-box-shadow: 10px 10px 15px #ccc;
	box-shadow: 10px 10px 15px #ccc;
}
 
a:hover.tip {
	font-size: 99%; /* this is just for IE */
}
 
a:hover.tip span {
	display: block;
}
 
/*pageHeader CSS*/
 
#pageHeader h2 {
color: #000;
text-shadow: 2px 2px 2px #ddccb5;
}
 
/*footer CSS*/
#footer p {
font-size: 14px;
color: #000;
font-weight: bold;
text-shadow: 4px 4px 4px #ddccb5;
}
 
a:link {
text-decoration: none
}