/* popbox.css ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/balloons.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.balloon { position:relative; display:block; overflow:visible;
width:240px;  margin:auto; 
padding:0 0 .8em 0;
text-align:center;
font-size:1em; font-weight:normal;
border:0;
}

/* margin-bottom:1.1em; */
ul.balloonlist { display:block; overflow:visible; width:200px;
margin:0 0 1.1em 0;
padding:0;  
border:0;
list-style-type: none;
font-size:1em;
}
ul.balloonlist li { display:block; width:200px;
text-align:center;
margin:0;
padding:0;
font-size:1em;
color:#fff; 
height:1em;  
}

/*  Show the box at right or left side of div.center 
   (WHICH IS HOVERED OVER TO GET THE POPUP) */
ul.balloonlist li#LHScallout, ul.balloonlist li#LHScallout2, ul.balloonlist li#LHScallout3  { display:block; width:200px;
float:left;  
margin:0 -8em 1em 0;
padding:.2em .5em;
font-size:1.4em; font-weight:normal;
}

/* FONT-SIZE OF LINK TO WHICH BUBBLE APPLIES  */
ul.balloonlist li#LHScallout a, 
ul.balloonlist li#LHScallout a:visited, 
ul.balloonlist li#LHScallout a:hover, 
ul.balloonlist li#LHScallout a:active, 

ul.balloonlist li#LHScallout2 a, 
ul.balloonlist li#LHScallout2 a:visited, 
ul.balloonlist li#LHScallout2 a:hover, 
ul.balloonlist li#LHScallout2 a:active, 

ul.balloonlist li#LHScallout3 a, 
ul.balloonlist li#LHScallout3 a:visited, 
ul.balloonlist li#LHScallout3 a:hover, 
ul.balloonlist li#LHScallout3 a:active { 
display:block; overflow:visible;
width:8em;
height:1em;
margin:0;
padding:0;
font-size:1.2em; font-weight:normal; text-decoration:none; 
border:0;
outline:none;
}

ul.balloonlist li#LHScallout a:hover, 
ul.balloonlist li#LHScallout2 a:hover, 
ul.balloonlist li#LHScallout3 a:hover { height:auto; }  
/*  ul li a   
ul.balloonlist li a, ul.balloonlist li a:visited {
display:block;
text-decoration:none; 
padding:.2em 0 1em 0;
color:#fff; 
border:none;
height:1.1em; 
background:transparent;
font-size:1em;
}
*/ 
ul.balloonlist li a img, ul.balloonlist li a:visited img { border:0; outline:none;}
 
.balloon table  { display:block; overflow:visible; 
width:200px; height:auto;
border-collapse:collapse;
}

/* TEXT IN BALLOON HEADER */
.balloon dt  { display:block; width:200px; margin:0;
padding:5px 2px 0 2px; font-weight:bold; color: #fff; background:transparent url(http://kids.inmatlock.com/images/balloon-top.gif) no-repeat top left; text-align:center;
font-size:.6em; font-weight: bold;
} 

/* TEXT INSIDE BALLOON - ON WHITE */
.balloon dd { margin:0; padding:5px 7px; color:#000; 
 border:none;
background:#fff;
font-size:.5em; font-weight: normal;
}
.balloon dd a, .balloon dd a:visited, .balloon dd a:hover, .balloon dd a:active, .balloon dd a:focus { color:#606; background:transparent;
font-size:.5em; font-weight: normal;
text-decoration:none; 
outline:none;
} 

/*            POINTER 
 DL CONTAINS ALL, INCLUDING POINTER */
ul.balloonlist li dl { position:absolute; visibility:hidden; }

.balloon dl { display:block; width:200px;
 padding:0 0 28px 0; 
background:transparent url(http://kids.inmatlock.com/images/balloon-bottom.gif) no-repeat bottom left; 
height:auto;
} 

/* specific to 
non-IE browsers + IE7 first, 
with IE5.5 + IE6 second */
ul.balloonlist li:hover,
ul.balloonlist
 li a:hover { position:relative; visibility:visible;
color:#fff; 
cursor:default;
}

ul.balloonlist li:hover dl,
ul.balloonlist li a:hover dl {
visibility:visible;
color:#fff;
top:-40px; 
right:-20px;
cursor:default;
}
/* MAKE  POINTER  */
ul.balloonlist li:hover dl.pointright,
ul.balloonlist li a:hover dl.pointright {
visibility:visible;
color:#fff;
top:-90px;
left:110px;  
cursor:default;
}

/*
~~~~~  P O S I T I O N   P O I N T E R ~~~~~
	   Just before close of final </dd> 
	   ADD an  EMPTY <em></em>
*/
ul.balloonlist li:hover dl em,
ul.balloonlist li a:hover dl em { position:absolute; display:block; 
left: -35px; top: 75px;
width: 36px; height: 36px;
color:#fff;
background:transparent url(http://kids.inmatlock.com/images/bubble-pointer.gif);
}

/*  ~~~  E N D   O F 
  P O S I T I O N I N G   P O I N T E R ~~~ */
ul.balloonlist li:hover dl a,
ul.balloonlist li a:hover dl a { display:block;
height:1em;
color:#606;
background:transparent;
}
 

p.sk { display:block; width:1px; height:1px; }