/*
	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:	2. Saving and loading items
	Example URI:	http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/2-saving-and-loading-items/index.html
*/

/*
	Typography
------------------------------------------------------------------- */

p {margin-bottom: 1em;}


/*
	Forms
------------------------------------------------------------------- */

.input-button {
	background-color: #E2E2E2;
	border: 1px outset #AAA;
	color: #123;
	font-weight: bold;
	padding: 4px 5px;
}
.input-button:active {border-style: inset;}


/*
	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: 800px;
}


/* Columns */

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


/* Sortable items */

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


/* Disabled list */

#example-2-4 .sortable-list {background-color: #CCC;}
#example-2-4 .sortable-item {cursor: default;}