ul.plugins { margin: 0; padding: 0; }
ul.plugins li { margin: 0 12px 12px 0;
	list-style-type: none; width: 210px; height: 220px; float: left;
	color: white; border: 1px solid gray; text-align: center; font-weight: bold; }

#accordion, #draggable,
#resizable, #selectable, #sortable, #tabs {
	margin: 10px;
	width: 190px; height: 180px;
	text-align: center;
	background: #FFFFFF; color: white; font-weight: bold;
}
#selectable div {
	width: 45px; height: 45px; float: left; margin: 6px;
	border: 1px solid white;
}
#selectable .ui-selecting {
	background: gray;
}
#selectable .ui-selected {
	background: black;
}
#sortable div {
	width: 45px; height: 45px; float: left; margin: 6px;
	border: 1px solid white;
}
#sortable .ui-sortable-helper {
	background: black;
}

.draggable { margin: 10px; width: 32px; height: 30px; float: left; background: #FF9C08; }
#droppable { margin: 10px; width: 190px; height: 130px; float: left; border: 1px solid #FF9C08; overflow: hidden; }
#droppable .draggable { margin: 7px; }

.ui-dialog { background-color: #f0ede6;border:solid 1px #777777;color:black;text-align:center; height:400px}
.ui-dialog .ui-dialog-titlebar { background: #700000;border-bottom:solid 1px #931787;padding: 5px 0 0 0; height: 28px; font-size: 11px; line-height: 11px; }
.ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }

.ui-dialog .ui-dialog-titlebar-close {
    width: 27px; height: 27px; position: absolute; top: 3px; right: 0px;
    background: url(../images/deco/dialog-close-btn.jpg) no-repeat left 3px;
    cursor: pointer;
}
.ui-dialog .ui-dialog-titlebar-close:hover { color: #FFFFFF;
    background: url(../images/deco/dialog-close-btn-over.jpg) no-repeat left 3px;
}
.ui-dialog .ui-dialog-title {
	margin-left: 5px; color: white; font-weight: bold;
	position: relative; top: 7px; left: 4px;
}
.ui-dialog .ui-dialog-content {
	margin: 1.2em;
}
.ui-dialog .ui-dialog-buttonpane {
    position: absolute;
    bottom: 8px;
    right: 12px;
    height: 30px;
    top: 115px;
    clear: left;
    border: 0px solid red;
    text-align: right;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: 6px;
    font-family: Tahoma, Times, serif;
    font-weight:bold;
    color: #FFFFFF;
    border: none;
    background: #700000;
    cursor: pointer;
    font-size: 12px;
    width: 67px;
    height: 21px;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
    margin: 6px;
    color: #FFFFFF;
     font-family: Tahoma, Times, serif;
    font-weight:bold;
    background: #b09c76;
    font-size: 12px;
    cursor: pointer;
    width: 67px;
    height: 21px;
}

/* Dialog handle styles */
.ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%; bottom: 0px; left: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: 0px; bottom: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 29px; left: 0px; top: 0px; background: gray !important; border: none !important; }
.ui-dialog .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 29px; right: 0px; top: 0px; background: gray !important; border: none !important; }

.ui-slider { margin: 10px; background: #FF9C08; height: 15px; position: relative; }
.ui-slider-handle { width: 10px; height: 15px; background: white; position: absolute; top: 0px; left: 0px; }