/*

Darko Bunic
http://www.redips.net/
Apr, 2017.

*/

body {
	font-family: arial;
	margin: 0px;
}

/* main container */
#main-container {
	margin: auto;
	width: 670px;
}

/* make drag container visible */
#redips-drag {
	border: 2px dashed LightBlue;
	display: table;
	float: left;
}

/* tables */
div#redips-drag table {
	border-collapse: collapse;
	margin: 15px;
	font-size: 20pt;
	text-align: center;
}

/* table cells */
div#redips-drag td {
	border: 1px solid navy;
	height: 50px;
	padding: 2px;
}

/* DIV elements */
.redips-drag {
	margin: auto;
	margin-bottom: 1px;
	margin-top: 1px;
	font-size: 20pt;
	text-align: center;
	width: 56px;
	height: 40px;
	line-height: 40px;
	background-color: white;
	/* round corners */
	border-radius: 4px; /* Opera, Chrome */
	-moz-border-radius: 4px; /* FF */
	background-color: #CDE1F2;
	border: 2px solid SteelBlue;
}

/* button class */
.button {
	margin: 15px 0px 0px 15px;
	background-color: #6A93D4;
	color: white;
	width: 60px;
	order-width: 1px;
	border-radius: 5px;
}

/* set background color for clear button */
.clear {
	background-color: #ef2929;
}

/* text fied */
.text {
	margin: 15px 0px 0px 15px;
	width: 347px;
}

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

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

/* blue objects */
.blue {
	border: 2px solid SteelBlue;
}

/* trash cell */
.redips-trash {
	color: white;
	background-color: SteelBlue;
	font-size: 15pt;
}

/* instructions  */
.instructions {
	float: left;
	border: 2px dashed LightBlue;
	display: table;
	margin-left: 15px;
	width: 220px;
	padding: 15px;
	color: #555;
	font-size: 12px;
	text-align: justify;
	background-color: #eee;
}