/* Main container for this script */
#dragDropContainer
{
	margin: 10px 0 0 0;
	width: 100%;
	background-color:#FFF;
	-moz-user-select:none;
}

/* General rules for all <ul> */
#dragDropContainer ul
{
	margin-top: 0 0 0 0;
	padding:2px;
}

/* Movable items, i.e. <LI> */
#dragDropContainer li,#dragContent li,li#indicateDestination
{	
	list-style-type:none;
	height:20px;
	background-color: #e3e2e0;
	border:1px solid #000;
	padding:2px;
	margin-bottom:2px;
	cursor:pointer;
}

/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
li#indicateDestination
{	
	border:1px solid #000;	
	background-color:#FFF;
}
	
/* LEFT COLUMN CSS (available things) */
div#listOfItems
{	
	float:left;
	padding: 0 10px 10px 10px;
	width: 154px;
}

/* Left(Sources) column <ul> */
#listOfItems ul
{	
	/*	height:560px;	todo removed */
	margin: 0;
}
	
div#listOfItems div
{
	border:1px solid #000;		
}

/* Left column <ul>		- Space at the left of list - the arrow will be positioned there */
div#listOfItems div ul
{
	padding: 1px;
}

div#listOfItems div ul li
{
	padding: 0 0 8px 8px;
}

/* Heading above left column */
#listOfItems div p
{
	margin:0px;	
	font-weight:bold;
	padding-left:12px;
	background-color:#ff9933;	
	color:#FFF;
	margin-bottom:5px;
}
/* END LEFT COLUMN CSS */

/* Mouse over effect DIV box in right column */
#dragDropContainer .mouseover
{	
	background-color:#ff9933;
	border:1px solid #000;
}

/* Start main container CSS		- Right column DIV */
div#mainContainer
{
	width:680px;
	float:left;	
}

/* Parent <div> of small boxes */
#mainContainer div
{
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	margin-top:0px;
	border:1px solid #000;
}

#mainContainer div ul
{
	padding: 1px;
}

#mainContainer div li
{
	padding: 0 0 8px 8px;
}

/* Heading above small boxes */
#mainContainer div p
{	
	margin:0px;
	padding:0px;
	padding-left:12px;
	font-weight:bold;
	background-color:#ff9933;	
	color:#FFF;	
	margin-bottom:5px;
	clear: both;
}

/* Small box in right column ,i.e <ul> */
#mainContainer ul
{	
	width:154px;
	border: 0;	
	margin-bottom:0px;
	/*overflow:hidden;	todo: removed this	*/
	
}

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

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