#ticketID, #chargesList, #loadEntry, #baleList, #loadList {

	/*border: 2px #ffaaff solid;*/
	margin-top: 10px;
	margin-bottom: 10px;
} 

/* TODO check colors, see if we like them
	this is a nice default that makes it easy to visualize the panels*/
.sbPanel {
	background-color: #cccccc;
	padding: 5px;
	position: relative;
}


/* This effectively minimizes the grid, allowing the load Edit form to slide up*/
.hasItem#loadList {
	float: left;
	width: 200px;
	height: 500px;
}

/* This keeps the load entry form from spilling over to the left under the load list.*/
.hasItem#loadEntry{
	margin-left: 220px;
}
	
/* To hide the Load entry form when no row is selected, use the .hideEmpty class*/
.hasItem.hideEmpty#loadEntry {

	visibility: visible;
}

.hideEmpty#loadEntry {
	visibility: hidden;
}

/* Controls the layout of the inputs*/
.detailGroup/*, .control-group*/ {
	display: inline-block;
	vertical-align: top;
}

/* Adds padding for appearance*/
/* TODO think about coloring this,
	it might look a little over done though*/
.detailGroup {
	padding: 0px 3px 0px 3px;
}

/* This styles the detail group headings/labels*/
.detailGroup p {
	font-weight: bold;
	border-bottom: 2px gray solid;

}

/* This coloring was to help me visualize the .detailGroup divs*/
.detailGroup {
	/*background-color: #d7d7d7;*/
}

/* This is necessary to properly align buttons in the detail forms */

.detailGroup .btn {
	margin-bottom: 10px;
}

/* TODO remove the arbitrary height,
	I'm only using it in order to visualize the layout.*/

	/*Load list actualy needs an arbitrary height.*/
#loadList {

	height: 300px;

}

#baleList {
	height: 500px;

}


/* Bootstrap defined style that I didn't see any reason to change.*/
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

/*.with-divider {
	border-right: 2px #aaaaaa;
}
*/