body {background-color:#cc99ff; font-family:Geneva, Arial, Helvetica, sans-serif;text-align: center; line-height:1.2em}
ul li {text-align:left;}
a img {border:none;}
a {color:#800080;}
.boldh3 {font-weight:bold; align:center;}
.divider {border-top:1px solid #cc99ff; height:2px;}
/** header CSS **/
#header{display:block; clear:both; height:95px; background-image:url(images/header1.png); background-repeat:no-repeat;}
/** Rounded corner box. Large bullet points making up the rounded corners **/
.curveBox {position:relative; width:1000px; background:#FFFFFF; margin:auto; margin-top:30px; text-align:left; height:auto; background-image:url(images/logosf.jpg); background-repeat:no-repeat; }
#cv1, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#3399FF; background:#cc99ff; overflow:hidden; font-style:normal;  z-index:1;}
#cv1 {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curveBox em b {position:absolute; font-size:150px; font-family:arial; color:#FFFFFF; line-height:40px; font-weight:normal;}
#cv1 b {left:-8px; color:#ebe587;}
#ctr b {left:-25px; color:#ebe587;}
#cbl b {left:-8px; top:-17px; color:#ebe188;}
#cbr b {left:-25px; top:-17px;color:#ebe188;}
/**Left column CSS **/
#leftcol {width:215px; margin-top:15px;float:left; height:auto;}
#logo {position:relative; margin:0px 10px 10px 20px; width:160px; height:160px;}
#nav {float:left;margin-top:3px;margin-left:20px; width:205px; }
#nav ul li {list-style-image:url(images/bp3.png);}
#nav h3 {font-size:100%;} 
#nav a {text-decoration:none;}
a:hover {color:#000000;}
/** full column for where the right hand column is not needed **/
#fullcol {width:740px; min-height:650px; float:right; margin:15px 15px 10px 20px; padding-left:10px; height:auto; text-align:center;}
#fullcol p {font-size:80%;}
#fullcol ul li {font-size:12px;}
#poem {text-align:center; background-image:url(images/poemback.png); background-repeat:repeat-y;}
#poem p {font-style:italic; line-height:0.8em;}
#titlefull {position:relative; text-align:center;}
.rodentpic {padding:5px; border:1px solid #9933CC; margin:5px; width:200px; background-color:#FFFFFF;}
.rodenttitle {background-image:url(images/divider1.png); height:64px; background-position:center; background-repeat:no-repeat; text-align:center;clear:both;}
.residentbox {margin-bottom:40px; width:650px; margin-left:50px;}
.picsuccessl {float:left; display:block; margin-right:10px;}
.picsuccessr {float:right;display:block; margin-left:10px;}
.picsuccessl, .picsuccesr {width:300px;}
.caption {font-style:italic; width:250px; text-align:center; margin-left:auto; margin-right:auto; margin-top:0;}
.picalign {height:200px; width:650px; margin-left:50px;}
/** adopting and help page CSS tab **/
ul#tabnav { /* general settings */
text-align: right; margin: 1em 0 1em 0; /* set margins as desired */
font: bold 12px verdana, arial, sans-serif; border-bottom: 1px solid #cc99ff; list-style-type: none;
padding: 3px 10px 3px 10px;} /* THIRD number must change with respect to padding-top (X) below */
ul#tabnav li {display: inline;}
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #000000; /* set border color to page background color */
background-color: #000000;} /* set background color to match above border color */
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #cc99ff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative; top: 1px;
padding-top: 4px;} /* must change with respect to padding (X) above and below */
ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #8B2A7E; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #ffff; /* set unselected tab background color as desired */
color: #000; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;border-bottom: none;}
ul#tabnav a:hover { background: #cc99ff;}
ul#tabnav a.selected {background: #cc99ff;}
/** middle column CSS **/
#midcol {width:740px;float:left; padding:5px 10px; }
#midcol p {text-align:center;}
#title {position:relative; width:400px; height:64px; margin:0 17% 0 17%;}
#intro {margin:0 18% 0 7%;}
#promo1{width:220px;margin-left: 30px;}
#promo2 {text-align:center; margin-top:20px;}
#rodentbox {position:relative; margin-top:100px; display:block; text-align:center; height:350px; left:100px;}
.rb-single img, .rb-double img {padding:2px;border:1px dotted #808080; margin: 5px auto;}
#rodentbox a:hover img{border:1px solid #000000;}
#rodentbox h2 {color:#8f3e91; font-size:18px; height:27px; margin-top:30px;}
.rb-single, .rb-double {float:left;}
.rb-single {width:220px; height:300px; background-image:url(images/sticky1.png); }
.rbsing-img {width:inherit; height:130px; margin-top:-20px;}
.rbdoub-img {width:inherit;height:135px;margin-top:-20px;}
.rb-double {width:500px;background-image:url(images/sticky2.png); height:300px; }
#rbs-content{margin:10% 12%;}
#rbd-content {margin:5% 12%;}
.rb-text {margin-right:28px;}
#rbtitle {margin-right:100px; margin-bottom:15px;}
/** Newsblog section on front page **/
#blognews {height:200px; width:450px; font-size:80%; position:relative; left:110px;}
.nbline, .nbline1, .nbline2 {background-image:url(images/nbleft.png); background-position:left; background-repeat:no-repeat; width:auto; height:32px; background-color:#FFFFFF; border-right:1px solid #C5C5C5;}
.nbline1 {border-top:1px solid #e3e3e3;}
.nbline2 {border-bottom:1px solid #C5C5C5; height:20px;}
.nbline p {border-bottom:1px solid #c7dbf3; margin:0 5px 5px 35px; padding-top:1px;}
#nbcontent {margin:5px 10px 0 40px;}
#nbtopper {position: relative; top:31px; left:110px;}
/** Organising the two columns of links on the links page **/
.linksleft {float:left;}
.linksright {float:right;}
.linksleft, .linksright {width:350px; margin-bottom:10px;}
/** CSS for things used with the adoption section **/
.adoptmpic {float:left; margin:20px 10px 0 27px; border:1px dotted #C5C5C5;float:left;}
.adoptsticky {width: 120px; height:110px; background-image:url(images/sticky3.jpg); margin:-35px 0 0 -10px; float:left;}
.adoptintro {margin: 10px 0 30px 100px;}
#rosettebox {float:left;left:10px;margin-top:-25px;position:relative;top:10px;z-index:10;white-space:nowrap;}
.rosette {float:left;}
#rosettebox #rosettetitle {text-align:left; color:#7c1e7f; font-weight:bolder; font-size:110%;}
/** Adopting us table styles **/
.pretty-table { border-collapse: collapse;   background: url(images/table-bg.jpg) bottom left repeat-x; font-size:12px; margin:0 auto 25px; }
.pretty-table th, .pretty-table td { padding: 0.5em;color: #632a39;}
/** Resident title needs extra padding **/
#restitle {margin-left:15px;}
/** Footer CSS **/
#footer {display:block; clear:both; height:134px; background-image:url(images/footer1.jpg); background-repeat:no-repeat;}      
#copy {padding:55px 25px 0 0; text-align:right;}
#contact {margin-right:30px; position:relative; margin-top:10px; float:right;width:253px; height:40px; overflow:hidden;}
#contact a {display:block; width:253px; height:40px;}
#contact a:hover {text-indent:-253px;}
#footlinks {float: left; position:relative; top:70px; left:80px}
#tag {bottom:-20px;float:left;font-size:x-small;position:absolute;right:30px;}
.emptytext{width: 400px; margin: 0 auto 20px;}
<style type="text/css">
.ToolText{position:relative; }
.ToolTextHover{position:relative;}
.ToolText span{display: none;}

.ToolTextHover span{
  display:block;
  position:absolute;
  border:1px solid black;
  top:1.3em;
  left:5px;
  background-color:white; color:black;
  text-align: left;
}
</style>