/*

Darko Bunic
http://www.redips.net/
Feb, 2010.

*/

body{
	font-family: arial;
	margin: 0px; /* for IE6 / IE7 */
}


/* drag container */
#main_container{
	margin: auto;
	width: 570px;
}
		/* container for the left table */
		.dragDropListWidget #left{
			/*float: left;*/
			width: 500px;
			/*height: 200px;*/
		}
		/* container for the right table */
		.dragDropListWidget #right{
		  	display: table;
		    table-layout: auto;
			padding-left: auto;
			padding-right: 0px;
			margin-right: 20px;
			/* align div to the right */
			margin-left: auto;
			
		}


/* drag objects (DIV inside table cells) */
.drag{
	cursor: move;
	margin: auto;
	z-index: 10;
	background-color: white;
	text-align: center;
	font-size: 25pt; /* needed for cloned object */
	opacity: 0.7;
	filter: alpha(opacity=70);
	/* without width, IE6/7 will not apply filter/opacity to the element ?! */
	/* IE needs element layout */
	/*width: 87px;*/
	height: 35px;
	line-height: 35px;
	/* round corners */
	border-radius: 4px; /* Opera, Chrome */
	-moz-border-radius: 4px; /* FF */
}


/* tables */
div#drag table {
	background-color: #eee;
	border-collapse: collapse;
}
		/* timetable */
		div#drag #table2 {
			/* align table to the right */
			margin-left: auto;
		}


/* table cells */
div#drag td,th{
	border-style: solid;
	height: 50px;
	text-align: center;
	font-size: 10pt;
	padding: 2px 7px;
}
		/* left table - td */
		div#drag #table1 td{
			border-width: 0px 0px 1px 0px;
			border-color: white;
		}
		
		/* right table - td */
		div#drag #table2 td{
			border-width: 0px 3px 3px 0px;
			border-color: #DDC5B5;
			font-weight: normal;
		}

		/* right table - th */
		div#drag #table2 th{
			border-width: 3px 0px 0px 3px;
			border-color: #DDC5B5;
			font-weight: normal;
		}
		
		/* right table - upper right cell */
		div#drag #table2 .upper_right{
			border-width: 0px;
		}

		/* right table - lower left cell */
		div#drag #table2 .lower_left{
			border-width: 0px;
		}



/* last row and last column without border */
.noborder{
	border-width: 0px;
}


/* green objects */
.green {
	border: 2px solid #499B33;
}


/* orange objects */
.orange {
	border: 2px solid #BF6A30;
}


/* last row background color */
.last {
	background-color: #e0e0e0;
}


/* message line */
#message{
	color: white;
	background-color: #aaa;
	text-align: center;
	margin-top: 10px;
}


/* dark cells (first column and table header) */
.dark{
	color: #444;
	background-color: #e0e0e0;
}

/* trash cell */
.trash {
	color: white;
	background-color: SteelBlue;
}


.dragDropListWidget table{
    background: red;
}

.dragDropListWidget table td{
	width: 250px;
}