body, *{
    font-family:Helvetica, Arial, sans-serif;
}

body{
	min-height:520px;
	width:100%;	
	overflow-x:hidden;
}

h1, h2, h3, h4, h5, h6{
    font-weight:bold;
}

h1{ font-size:24px; }

h2{ font-size:20px; }

.header{
    position:relative;
    height:40px;
    color:#fff;
    background-color:#444;
    text-align:center;
    line-height:40px;	
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	border-top:1px solid #888;
	z-index:98;
}

.header button{
    cursor:pointer;
    position:absolute;
    z-index:100;
    top:4px;
    padding:0 10px;    
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#888));    
}

button{
    display:inline-block;
    height:30px;
    background-color:#ddd;    
    border:none;
    color:#333;
	text-shadow:0 1px 0px #fff;
    font-weight:bold;    
    -webkit-border-radius:5px;
	border-top:1px solid #fff;
	-webkit-box-shadow:0 1px 0px #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#bbb));
}

.editing button#edit_list{
    color:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#69f), to(#36c));
	text-shadow:none;
}

.header button.left{
    left:10px;
}

.header button.right{
    right:10px;
}

ul.sorting{
    display:table;
    width:100%;
    background-color:#aaa;	
	position:relative;
	z-index:100;	
	-webkit-box-shadow:0px 3px 3px #aaa;
}

.sorting li{
    display:table-cell;
    width:33%;
    text-align:center;
    line-height:30px;
	position:relative;
}

.sorting li:last-child a{
	width:100%;
}

.sorting li a{
    display:block;
    margin:0 1px 1px 0;
    background-color:#ddd;
    text-decoration:none;
    color:#666;
}

.sorting li a:active{
    background-color:#999;
    color:#fff;
}

.sorting li a.selected{
    background-color:#333;
    color:#fff;
}

.sorting li a .order{
	display:inline-block;
	position:relative;
	left:5px;
	top:-3px;
}

.sorting li a.selected .order{
}

.sorting li a.selected .order[rel="ASC"]{
	border-bottom:5px solid #ccc;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
}

.sorting li a.selected .order[rel="DESC"]{
	border-top:5px solid #ccc;
	border-left:5px solid transparent;
	border-right:5px solid transparent;	
}

/* Task List Items */

.task_list li{
	position:relative;
	padding:10px;
	min-height:30px;
	border-bottom:1px solid #ddd;
}

.task_list .item_description{
    z-index:1;
    margin-right:10px;
}

.task_list .detail{
    display:inline-block;
    font-size:10px;
    color:#666;
    display:none;
}

.sortby_position .position, .task_list .tag, .sortby_created_at .created_at, .sortby_completed_at .completed_at{
    display:inline-block;
}

.task_list .tag{
	color:#fff;
	background-color:#444;
	padding:2px 5px;
	font-weight:bold;
	-webkit-border-radius:4px;
	margin-right:10px;
}

.task_list button.complete, .task_list button.delete{	
	float:left;
	margin:0 10px 5px 0;
	display:inline-block;
	-webkit-border-radius:15px;
	width:30px;
	height:30px;
	-webkit-box-shadow:0 0 6px #888;
	color:#fff;
	border:3px solid #fff;
	position:relative;
}

.task_list button span{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:30px;
	height:22px;
	text-align:center;	
	line-height:24px;
	text-indent:3px;
}

.task_list button.complete{    
	color:#493;
}

.editing .task_list button.delete{
	color:#800;
}

.editing .task_list button.delete, .task_list button.complete{    
	display:inline-block;	
}

.editing .task_list button.complete, .task_list button.delete{
	display:none;
}

/* Sortable lists */

.sortable_list{
	background-color:#ccc;
}

.sortable_list li{
	position:relative;
	background-color:#fff;
}

.sortable_list li.inactive{
	background-color:#fff;
	-webkit-transition-duration: 0.4s;	
	-webkit-transition-property:top;
}

.dragging{
	-webkit-box-shadow:0 0 10px #777;
	position:relative;
	z-index:100;
	border-color:#777;
}

.dragger{
	display:block;    
	cursor:move;
    position:absolute;
    right:0;
	top:0;
	background-color:#fff; /* #def; */
	height:100%;
	display:table-cell;
	vertical-align:middle;
	line-height:100%;
	width:0;
	overflow:hidden;
	z-index:1;
	text-align:center;
	line-height:45px;
	color:#ccc;
	text-shadow:0 -1px 0px #999;
	font-size:40px;
	border-left:1px solid #ddd;
	-webkit-box-shadow:-5px 0 0 #fff;
	-webkit-transition-duration: 0.4s;	
}

.dragging .dragger{
	background-color:#000;
	z-index:99 !important;
}

.editing .dragger{
	width:45px;
}

/* Form */

#edit_item_form{
    background-color:#eee;
	height:0;
	overflow:hidden;
	padding:0;
}

#edit_item_form.transition
{
	-webkit-transition-duration: 0.4s;
}

#edit_item_form.visible{
	height:130px;
    padding-bottom:10px;
}

#edit_item_form textarea{
    display:block;
    width:100%;
}

#edit_item_form fieldset{
    margin:10px;   
}

fieldset.form_submit_set{
    text-align:right;
}