/*
	Stylesheet for examples by DevHeart.
	http://devheart.org/

	Article title:	jQuery: Customizable layout using drag n drop
	Article URI:	http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop/

	Example title:	1. Getting started with sortable lists
	Example URI:	http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/index.html
*/

/*
	Alignment
------------------------------------------------------------------- */

/* Floats */

.left {float: left;}
.right {float: right;}

.clear,.clearer {clear: both;}
.clearer {
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
}


/*
	Example specifics
------------------------------------------------------------------- */

/* Layout */

#center-wrapper {
	margin: 0 auto;
	width: 920px;
}


/* Columns */

.column {
	margin-left: 2%;
	width: 32%;
}
.column.first {margin-left: 0;}


/* Sortable items */

.sortable-list {
	background-color: #F93;
	list-style: none;
	margin: 0;
	//min-height: 60px;
	padding: 5px;
	padding-bottom: 1px;
}
.sortable-item {
	background-color: #FFF;
	border: 1px solid #000;
	cursor: move;
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
	padding: 1px 0;
	text-align: center;
}

/* Containment area */

#containment {
	background-color: #FFA;
	height: 230px;
}


/* Item placeholder (visual helper) */

.placeholder {
	background-color: #BFB;
	border: 1px dashed #666;
	height: 58px;
	margin-bottom: 5px;
}