/* CSS Document */
<style type="text/css">

  body{
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;  /* Font to use */
      background-color: black;
  }
  #footer{
    height:30px;
    vertical-align:middle;
    text-align:right;
    clear:both;
    padding-right:3px;
    background-color:#317082;
    margin-top:2px;
    width:780px;
  }
  #footer form{
    margin:0px;
    margin-top:2px;
  }
  #dhtmlgoodies_dragDropContainer{  /* Main container for this script */
    width:780px;
    height:520px;
    border:0px;
    background-color:#FFF;
    -moz-user-select:none;
  }
  #dhtmlgoodies_dragDropContainer ul{  /* General rules for all <ul> */
    margin-top:0px;
    margin-left:0px;
    margin-bottom:0px;
    padding:2px;
  }
  
  #dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{  /* Movable items, i.e. <LI> */
    list-style-type:none;
    height:30px;
    background-color:#FFFF99;
    border:1px solid #000;
    padding:2px;  
    margin-bottom:2px;
    cursor:pointer;
    font-size:20px;
  }
  
  li#indicateDestination{  /* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
    border:1px dotted #600;  
    background-color:#FFF;
  }
  
  #dhtmlgoodies_dragDropContainer ul li.correctAnswer{  /* Correctly moved item */
    background-color:green;
    color:#FFF;
  }
  #dhtmlgoodies_dragDropContainer ul li.wrongAnswer{  /* Item moved to wrong box */
    background-color:red;
    color:#FFF;
  }
  
  
  /* LEFT COLUMN CSS */
  div#dhtmlgoodies_listOfItems{  /* Left column i.e. "Characters" */
    float:left;
    padding-left:25px;
    padding-right:15px;
    
    /* CSS HACK */
    width: 180px;  /* IE 5.x */
    width/* */:/**/160px;  /* Other browsers */
    width: /**/160px;
        
  }
  #dhtmlgoodies_listOfItems ul{  /* Left(Sources) column <ul> */
    height:560px;  

  }
    
  div#dhtmlgoodies_listOfItems div{
    border:0px solid #999;    
  }
  div#dhtmlgoodies_listOfItems div ul{  /* Left column <ul> */
    margin-left:10px;  /* Space at the left of list - the arrow will be positioned there */
  }

  #dhtmlgoodies_listOfItems div p{  /* Heading above left column */
    margin:0px;  
    font-weight:normal;
    padding-left:12px;
    background-color:#317082;  
    color:#FFF;
    margin-bottom:5px;
    margin-top:5px;
  }

/* END LEFT COLUMN CSS */
  
  #dhtmlgoodies_dragDropContainer .mouseover{  /* Mouse over effect DIV box in right column */
    background-color:#E2EBED;
    border:1px solid #317082;
  }
  
  /* Start main container CSS */
  
  div#dhtmlgoodies_mainContainer{  /* Right column DIV i.e. "Tone" boxes container */
    width:550px;
    padding-right:25px;
    float:right;
    margin-top:5px;
  }
  #dhtmlgoodies_mainContainer div{  /* Parent <div> of small boxes */
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    margin-top:0px;
    border:1px solid #999;

    /* CSS HACK */
    width: 172px;  /* IE 5.x */
    width/* */:/**/170px;  /* Other browsers */
    width: /**/170px;
        
  }
  #dhtmlgoodies_mainContainer div ul{
    margin-left:10px;
  }
  
  #dhtmlgoodies_mainContainer div p{  /* Heading above small boxes on right-hand side */
    margin:0px;
    padding:0px;
    padding-left:12px;
    font-weight:normal;
    background-color:#317082;  
    color:#FFF;  
    margin-bottom:5px;
  }
  
  #dhtmlgoodies_mainContainer ul{  /* Small box in right column ,i.e <ul> */
    width:152px;
    height:80px;  
    border:0px;  
    margin-bottom:0px;
    overflow:hidden;

    
  }

  #dragContent{  /* Drag container */
    position:absolute;
    width:150px;
    height:15px;
    display:none;
    margin:0px;
    padding:0px;
    z-index:2000;
  }

  #dragDropIndicator{  /* DIV for the small arrow */
    position:absolute;
    width:7px;
    height:10px;
    display:none;
    z-index:1000;
    margin:0px;
    padding:0px;
  }
</style>

  <style type="text/css" media="print">

  div#dhtmlgoodies_listOfItems{
    display:none;
  }
  body{
    background-color:#FFF;
  }

  #dhtmlgoodies_dragDropContainer{
    border:0px;
margin-left:auto;
margin-right:auto;
width:800px;
  }
</style>