body {
font-family: "Arial";
font-size: 12px;
}

#desktop {
background: url('desktop.jpg');
width: 640px;
height: 480px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -320px;
margin-top: -240px; 
border: 1px solid black;
}

#taskbar {
background: url('taskbar.gif');
position: absolute;
bottom: 0;
width: 100%;
height: 23px;
}

#start {
display: block;
background: url('start_off.gif');
width: 75px;
height: 23px;
}

#start:hover {
background: url('start_on.gif');
}

#start:focus {
background: url('start_act.gif');
}

#start #startmenu {
display: none;
}

#start_menu  {
background: url('start_menu.gif');
width: 304px;
height: 414px;
}

#start_menu  img {
position: absolute;
left: 22px;
top: 5px;
}

#start_menu  h1 {
position: absolute;
color: white;
left: 70px;
top: 15px;
font-size: 15px;
margin: 0px;
padding: 0px;
}

#ver {
color: black;
font-weight: 900;
font-size: 9px;
text-align: right;
position: absolute;
width: 99%;
bottom: 25px;
clear: both;
}

#systemtray {
position: absolute;
right: 0px;
top: 0px;
height: 23px;
padding: 0px 10px;
line-height: 23px;
color: white;
font-family: "Arial";
font-weight: 900;
font-size: 10px;
background: url('tray.gif') no-repeat left;
}












.sub1 {
background: white url('sub_bg.gif');
height: 300px;
display: block;
}

.sub2 {
background: white url('sub_bg.gif');
height: 300px;
display: block;
left: 300px;
}

.allprog {
position: absolute;
bottom: -380px;
color: white;
font-weight: 900;
text-decoration: none;
font-family: "Arial";
font-size: 12px;
margin: 5px;
background: url('arr.gif') no-repeat right;
}

.allprog:hover {
background: #5b5b5b url('arr.gif') no-repeat right;
}



#dsfsdf{
width: 18px;display: block;
background: url('compy.gif') no-repeat;
}

.mycomp {
position: absolute;
bottom: -80px;
left: 152px;
color: white;
font-weight: 900;
text-decoration: none;
font-family: "Arial";
font-size: 12px;
margin: 5px;
background: url('arr.gif') no-repeat right;
}

.mycomp:hover {
background: #5b5b5b url('arr.gif') no-repeat right;
}

.contpanel {
position: absolute;
bottom: -103px;
left: 152px;
color: white;
font-weight: 900;
text-decoration: none;
font-family: "Arial";
font-size: 12px;
margin: 5px;
background: url('arr.gif') no-repeat right;
}

.contpanel:hover {
background: #5b5b5b url('arr.gif') no-repeat right;
}












.menu {
width:750px; 
font-size:0.85em;
position:absolute;
bottom: 0px;
z-index:100;
}

.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:304px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display: block;
width: 75px;
height: 23px;
}


/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
margin-left: 7px;
padding-left: 18px;
width: 182px;
color: black;
text-decoration: none;
font-weight: 900;
background: url('ff.gif') no-repeat left;
}

/* style the third level hover */
.menu ul ul ul a:hover {
background:#dddddd url('ff.gif') no-repeat left;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:-414px;
left:0; 
}


/* position the third level flyout menu */
.menu ul ul ul{
background: white url('sub_bg.gif');
border: 1px solid black;
border-width: 1px 0px;
width: 219px;
display: block;
}

.menu ul ul ul.allprogsub {
left:120px; 
top:95px;
height: 285px;
}

.menu ul ul ul.mycompsub {
left:290px; 
top:55px;
height: 285px;
}

.menu ul ul ul.contpanelsub {
left:290px; 
top:78px;
height: 125px;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:120px;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}

#leftside {
width: 146px;
height: 295px;
position: absolute;
top: 52px;
left: 2px;
}

#leftside a {
text-decoration: none;
color: white;
text-decoration: none;
font-weight: 900;
padding: 3px 0px 3px 20px;
font-size: 12px;
margin: 0 2px 4px 2px;
background: url('ff.gif') no-repeat left;
}

#leftside a:hover {
}

#leftside .sep {
background: url('sep_drk.gif') no-repeat;
display: block;
height: 3px; 
width: 148px;
margin: 0px;
}

#leftside .ff { background: url('ff.gif') no-repeat left; }
#leftside .world { background: url('world.gif') no-repeat left; }
#leftside .puzzle { background: url('puzzle.gif') no-repeat left; }
#leftside .photo { background: url('photo.gif') no-repeat left; }












a.icons,
 a.icons:visited {
display:block; 
display:inline-block; 
color:#fff; 
font-weight: 900; 
text-decoration:none; 
height:32px; 
float:left; 
margin:4px; 
z-index:50;
padding-top: 36px; 
text-align: center; 
font-size: 9px;
}
a.trash {background:url('trash.gif') no-repeat top center;}
a.mypc {background:url('mypc.gif') no-repeat top center;}
a.mydoc {background:url('docs.gif') no-repeat top center;}
a.icons em {display:none;}

#icon_collection { margin: 20px; }

#icon_collection a.icons:active, 
#icon_collection a.icons:focus {
border:0px;
}

#icon_collection a.icons:active em, 
#icon_collection a.icons:focus em {
background: url('error.gif') no-repeat center;
display:block; 
text-align: center; 
position:absolute; 
width:215px; 
height:122px; 
top:160px; 
left:220px; 
padding:5px; 
color:#000; 
z-index:50;
}