/**
 * @todo yabs > : this needs sorting out once everything works
 */
#save_layout{
float:left;
margin:0 2em 0 0;
}

.widget_container{
	margin:0;
	padding:0;
	list-style:none;
	border: 1px solid #9DB0BC;
	display: table;
	width: 100%;
}

.widget_container li{
	margin:0;
	padding: 3px 10px;
	display: table-row;
}
.widget_container li > span {
	display: table-cell;
	width: 1%;
	white-space: nowrap;
}
.widget_container li > span.widget_title {
	width: 100%;
	white-space: normal;
}

.widget_state, .widget_checkbox {
	border-right: 1px solid #9DB0BC;
	margin-right: 10px;
	padding-right: 10px;
}

.widget_actions, span.widget_cache_status {
	border-left:1px solid #9DB0BC;
	margin-left:10px;
	padding-left:10px;
	cursor:default;
}
#customizer_wrapper .widget_container li > span.widget_actions {
	white-space: normal;
	text-align: center;
}
td.widget_cache_status, span.widget_cache_status {
	width: 40px;
	text-align: center;
}

.widget_actions img{
margin:0 2px;
}

.odd{
background-color:#F1F6F8;
color:#444;
}

.even{
background-color:#fff;
color:#444;
}

.odd:hover{
background-color:#eef;
color:#444;
}

.even:hover{
background-color:#dde;
color:#444;
}

/*
#current_widgets .droppable-hover,
#current_widgets .droppable-hover .fieldset_title_right,
#current_widgets .droppable-hover .fieldset_title_bg
{
color:#444;
background:#ee8;
}
*/
.widget_container li.droppable-hover > span,
#current_widgets div.ui-droppable.droppable-hover {
	position: relative;
}
.widget_container li.droppable-hover > span:first-child::before,
div.ui-droppable.droppable-hover:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left-color: #f00;
	border-right: none;
	left: 0;
	bottom: -7px;
}
.widget_container li.droppable-hover > span:after,
div.ui-droppable.droppable-hover:after {
	content: "";
	position: absolute;
	width: 102%;
	height: 2px;
	background: #F00;
	left: 0;
	bottom: -2px;
}
div.ui-droppable.droppable-hover:after {
	width: 100%;
}

.add_widget{
	background:#ddd;
}

.add_new_widget{
cursor:pointer;
margin:0 0 0 1em;
}

.draggable_widget{
cursor:move;
}

#current_widgets{
padding:0;
border:0;
clear:both;
}

.available_widgets{
	top: 40px;
	left: 5%;
	right: 5%;
	bottom: 5%;
	position: fixed;
	background:#f1f6ff;
	display:none;
	border: 1px solid #9DB0BC;
	margin:0;
	padding:0;
	z-index: 999;
}

.available_widgets_active{
display:block;
}

.available_widgets_toolbar{
	background:#B7CBDA;
	font-weight: bold;
	padding: 2px 1ex;
	border-bottom: 1px solid #9DB0BC;
}

#available_widgets_inner{
	padding: 1em;
	overflow: auto;
	position: fixed;
	top: 62px;
	left: 5%;
	right: 5%;
	bottom: 5%;
}

.available_widgets h2 {
	display:none;
}

/**
 * Widget settings page
 */
#screen_mask{
position:fixed;
top: 0;
left: 0;
background: #000;
height: 100%;
width: 100%;
display:none;
z-index:998;
}

#widget_settings{
display:none;
}

#widget_settings.widget_settings_active{
position:fixed;
top:40px;
bottom:5%;
right:5%;
left:5%;
overflow:auto;
z-index:999;
background:#f1f6f8;
border:1px solid #ccc;
display:block;
}

.widget_settings_active form{
padding:1em;
}

#widget_postback{
position:absolute;
top:-1000em;
left:-1000em;
}

/**
 * widget help
 */
#widget_help{
float:right;
position:relative;
}

#widget_help dl{
position:absolute;
width:40em;
padding:1em;
display:none;
border:1px solid #ccc;
background:#f1f6ff;
right:0;
top:-1em;
}

#widget_help:hover dl{
display:block;
}

#widget_help dt{
font-weight:bold;
}

#widget_help dd{
margin:0;
padding:0 0 10px 10px;
}

.pending_update{
background-color:#fdd;
}

.server_updating{
background-color:#dfd;
}