This is the side listing.
**
**
The relevant CSS:
html,body
{
margin: 0px 0px 0px 0px;
}
div, p, a, body, td, select
{
font-family: helvetica;
font-size: 12px;
padding-top: 3px;
padding-bottom: 3px;
}
DIV.session_debug
{
padding-left: 5px;
padding-right: 5px;
border: black dashed 1px;
font-family: Arial;
z-index: 9;
background: yellow;
}
DIV.debug_header
{
position: absolute;
top: 0px;
float: left;
width:100%;
z-index: 9;
}
DIV.main_body_debug
{
position: absolute;
top: 40px;
width: 100%;
height: 100%;
font-family: "Arial sans-serif";
}
DIV.main_body
{
position: absolute;
top: 0px;
font-family: "Arial sans-serif";
}
DIV.sc_logo
{
margin: 0px 0px 0px 0px;
height: 100px;
float: left;
}
DIV.status_info
{
padding: 10px;
}
DIV.sc_header
{
width: 100%;
height: 100px;
}
DIV.sc_body
{
height: 100%;
}
DIV.side_listing
{
width: 100px;
float: left;
background: white;
width: 20%;
}
DIV.main_listing
{
margin-left: auto;
margin-right: auto;
width: 90%;
padding: 0px;
}
DIV.main_listing_container
{
background:white none repeat scroll 0%;
float:right;
padding:0px;
width:80%;
}
DIV.filename_display
{
background: white;
clear: both;
float: left;
width: 20%;
}
DIV.file_display
{
background: white;
float: left;
width: 10%;
}
a.marginleft
{
margin-left:10px;
text-decoration: none;
}
DIV.filestatus_display
{
background: white;
padding: 0px;
float: left;
width: 20%;
}
DIV.md5_passed
{
background:#66FF66;
float: left;
width: 30%;
text-align: center;
}
DIV.md5_failed
{
background:red;
float: left;
width: 30%;
text-align: center;
}
DIV.loading
{
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.notes
{
background: #FFFF66;
border:1px solid black;
z-index:2;
display: none;
position: absolute;
}
DIV.notes_wrapper
{
background: yellow;
float: left;
clear: right;
width: 20%;
}
select
{
font-size: 10px;
background: #CCCCCC;
border: 0;
}
DIV.linecontainer
{
background: black;
padding: 1px;
float: left;
width: 100%;
}
.closebox
{
float: right;
width: 10px;
height: 10px;
color: red;
position: relative;
top: -3px;
text-align: center;
padding: 0px;
}
.updatenotes
{
border: black dashed 1px;
font-family: arial;
background: yellow;
float: right;
}
The javascript to toggle the visibility of the notes div:
function toggleNotes(div)
{
if ((document.getElementById(div).style.display == '') || (document.getElementById(div).style.display == 'none'))
{
document.getElementById(div).style.display = 'block';
}
else
{
document.getElementById(div).style.display = 'none';
}
}