#footpanel ul li{
padding: 0; margin: 0;
float: left;
position: relative;
list-style-type:none;
}
#footpanel ul li a{
padding: 5px;
float: left;
text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
height: 16px; width: 16px;
text-decoration: none;
color: #333;
position: relative;
}
html #footpanel ul li a:hover{	background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
background-color: #fff;
height: 17px;
margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
border: 1px solid #555;
border-top: none;
z-index: 200; /*--Keeps the active link on top of the sub-panel--*/
position: relative;
}
#footpanel a.home{
background: url(home.png) no-repeat 15px center;
width: 100px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.awam{ 
background: url(awam.png) no-repeat 15px center;  
width: 100px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.pelanggan{ 
background: url(pelanggan.png) no-repeat 15px center;  
width: 100px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.wargakklw{ 
background: url(kklw.png) no-repeat 15px center;  
width: 100px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
a.directory{ background: url(directory.png) no-repeat center center; }
a.cadangan{ background: url(mail.png) no-repeat center center; }
a.photo{ background: url(photo.png) no-repeat center center; }
a.videos{ background: url(film.png) no-repeat center center; }
a.alerts{ background: url(newspaper.png) no-repeat center center; }
#footpanel a.chat{
background: url(balloon.png) no-repeat 15px center;
width: 126px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
padding-left: 40px;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel {	float: right; }  /*--Right align the chat and alert panels--*/
#footpanel a small {
text-align: center;
width: 200px;
background: url(pop_arrow.png) no-repeat center bottom;
padding: 5px 5px 11px;
display: none; /*--Hide by default--*/
color: #fff;
font-size: 1em;
text-indent: 0;
}
#footpanel a:hover small{
display: block; /*--Show on hover--*/
position: absolute;
top: -35px; /*--Position tooltip 35px above the list item--*/
left: 50%;
margin-left: -40px; /*--Center the tooltip--*/
z-index: 9999;
}
#footpanel {
position: fixed;
bottom: 0; left: 0;
z-index: 9999; /*--Keeps the panel on top of all other elements--*/
/*background: #e3e2e2;*/
background: url(/html/themes/jheoa/images/main/bar_bg_red.jpg);
border: 1px solid #666666;
border-bottom: none;
width: 94%;
margin: 0 3%;
height:35px;
}
#footpanel ul li a{
padding: 5px;
float: left;
text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
height: 16px; 
width: 16px;
text-decoration: none;
color:#2D2D2D;
font-weight:bold;
position: relative;
}