body{
height: 100%;
overflow: hidden;
width: 100%;
background: #C0C0C0;
text-align: center;
}

#body{
width: 100%;
margin: 0px auto 0px auto;
border: 0px solid #FFF;
background: #000;
}

#demosContainer{
position:relative;
width: 1000px;
height: 65px;
margin: 0px auto 0px auto;
background-repeat: no-repeat;
background-color:#000;
}
#demosContainer #logo{
  display:block;
  float:left;
  width:50px;
  height:63px;
  background: url('jlogosmall.png') no-repeat;
}



.demos li{
position: absolute;
float:left;
margin:0px;
padding:2px;
border:0px solid #C0C0C0;
bottom: 20px;
cursor: pointer;
z-index: 10;
}

.demos li img{
position: relative;
bottom: 0px;
z-index: 15;
}

#demosContainer a{
text-decoration: none;
height:25px;
width:80px;
background: #000;
color: #C0C0C0;
z-index: 20;
}

#listCont{
font-family: Arial;
text-align:left;
position: absolute;
bottom: 20px;
left: 80px;
width: 290px;
color: #ccc;
font-size: 12px;
padding: 3px 0px 3px 0px;
background: #111;
cursor: pointer;
border: 1px solid #222;
background: url('selbkg.jpg') top center no-repeat;
}


.joinContainer{
position: absolute;
top: 19px;
left: 800px;
width: 125px;
color: #ccc;
padding: 3px 10px 3px 10px;
cursor: pointer;
z-index:99;
border:0px solid;
}


#listCont:hover{
color:#efda76 !important;

}

#list{
list-style: none;
top: 24px;
left: 0px;
width: 260px;
color: #ccc;
font-size: 12px;
background: #111;
border: 0px solid #FFF;
padding: 5px 5px 5px 5px;
_padding-left:10px;
_padding-right:10px;
margin: 0px;
opacity: 1;
text-align: left;
float:left;
}

#list li{
width: 250px;
border-bottom: 1px solid #222;
padding:5px;
cursor: pointer;
}

#list li:hover{
width: 250px;
border-bottom: 1px solid #222;
cursor: pointer;
background-color:#333333;
}

#list li img{
  display:inline;
  height:16px;
  margin:0px;
  line-height:16px;
}

#listCont2{
font-family: Arial;
text-align:left;
position: absolute;
bottom: 20px;
left: 420px;
width: 370px;
color: #ccc;
font-size: 12px;
padding: 3px 0px 3px 0px;
background: #111;
cursor: pointer;
border: 1px solid #222;
background: url('selbkg.jpg') top left no-repeat;
}

#listCont2:hover{
color:#efda76 !important;

}

#list2{
list-style: none;
float:left;
top: 24px;
left: 0px;
width: 340px;
color: #ccc;
font-size: 12px;
background: #111;
border: 0px solid #FFF;
padding: 5px 5px 5px 5px;
_padding-left:10px;
_padding-right:10px;
margin: 0px;
text-align: left;
}

#list2 li{
width: 330px;
border-bottom: 1px solid #222;
padding:5px;
cursor: pointer;
}

#list2 li:hover{
border-bottom: 1px solid #222;
cursor: pointer;
background-color:#333333;
}

#area3, #area2{
float:right;
height: 340px;
width: 20px;
background: url('area.gif') top left no-repeat;
}
 
#knob3, #knob2{
height: 106px;
width: 20px;
background: url('knob.gif') top left no-repeat;
}

#listd{
display:none;
position:absolute;
overflow:hidden;	
height:340px;
width:290px;
margin:0px;
margin-top: 4px;
/*_margin-left: -145px;*/
}
#listd li img, 
#listd2 li img{
  *margin-top:-14px;
}

#listd2{
display:none;
position:absolute;
overflow:hidden;	
height:340px;
width:370px;
margin:0px;
margin-top: 4px;
/*_margin-left: -145px;*/
}

#current, #current2{padding-left:2px; padding-right:28px;}