/* CSS Document */
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin: 0;
	padding:0;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

h3 {
	
	font-size: 18px;
	font-weight: bold;
}

div.workarea {
	padding:10px;
	float:left;
	width: 259px;
}

ul li div{
	display:inline;
}
ul.draglist { 
	width: 269px; 
	height:270px;
	list-style: none;
	margin:0;
	padding:0;
	float: left;
	display:block;
	overflow:auto;

}

ul.draglist li {
	margin: 0px;
	cursor: move;
	padding:3px 3px 3px 6px; 
	font-size:11px;
	width: 242px;
	height: 26px;
}

ul.draglist_alt { 
	position: relative;
	width: 200px; 
	list-style: none;
	margin:0;
	padding:0;
	/*
	   The bottom padding provides the cushion that makes the empty 
	   list targetable.  Alternatively, we could leave the padding 
	   off by default, adding it when we detect that the list is empty.
	*/
	padding-bottom:20px;
}

ul.draglist_alt li {
	margin: 1px;
	cursor: move; 
}


li.list1 {
	background-image:url(../images/recipe_builder/product_ingredient_bk.jpg);
	background-repeat:no-repeat;
	font-size: 14px;
	font-weight: normal;
}

li.list2 {
	background-image:url(../images/recipe_builder/ingredient_bk.jpg);
	background-repeat:no-repeat;
	font-size: 14px;
	font-weight: normal;
}

li.list3 {
	background-image:url(../images/recipe_builder/ingredient_bk.jpg);
	background-repeat:no-repeat;
	font-size: 14px;
	font-weight: normal;
}

li.list4 {
	background-image:url(../images/recipe_builder/ingredient_bk.jpg);
	background-repeat:no-repeat;
	font-size: 14px;
	font-weight: normal;
}

#user_actions {
}

#user_actions_btn {
	width: 5em;
	height: 2em;
}

ul.sortable li {
	position: relative;
}

ul.boxy {
	list-style-type: none;
	padding: 4px 4px 0 4px;
	margin: 0px;
	width: 10em;
	font-size: 13px;
	font-family: Arial, sans-serif;
        border: 1px solid #ccc;
}
ul.boxy li {
	cursor:move;
	margin-bottom: 4px;
	padding: 2px 2px;
	border: 1px solid #ccc;
	background-color: #eee;
}

.ingredient{
	visibility:hidden;
	margin:0 0 18px 0;
	height: 23px;
	padding: 0;
	display: none;
}

.ingredient img{
	background-image:url(../images/recipe_builder/buttons/instructions_hi.gif);
	background-repeat:no-repeat;
	width:18px;
	height:23px;
	float: left;
}

.ingredient a:hover img{
	background-image:url(../images/recipe_builder/buttons/instructions_hi.gif);
	background-repeat:no-repeat;
	cursor:pointer;
}


#recipe_builder {
	background-image: url(../images/panels/recipe_builder.jpg);
	background-repeat: no-repeat;
	height: 352px;
	width: 572px;
}
#recipe_builder_header {
	background-image: url(../images/panels/login_bk.gif);
	background-repeat: no-repeat;
	height: 142px;
	width: 376px;
	padding: 12px 0 0 12px;
}
#ingredients_header {
	width: 572px;
	margin: 0 0 5px 0;
}
#ingredients_header h3 {
	font-size: 14px;
	font-weight: bold;
	float: left;
	margin: 12px 0 0 12px;
}

#ingredients_header #saverecipe, #ingredients_header #cancelrecipe  {
	float: left;
	margin: 12px 0 0 12px;
}

#saverecipe {

}

#saverecipe img {
	background-image:url(../images/recipe_builder/buttons/save_recipe_low.jpg);
	background-repeat:no-repeat;
	width:70px;
	height:21px;
}

#saverecipe a:hover img{
	background-image:url(../images/recipe_builder/buttons/save_recipe_hi.jpg);
	background-repeat:no-repeat;

}

#cancelrecipe img {
	background-image:url(../images/recipe_builder/buttons/cancel_recipe_low.jpg);
	background-repeat:no-repeat;
	width:70px;
	height:21px;
}

#cancelrecipe a:hover img {
	background-image:url(../images/recipe_builder/buttons/cancel_recipe_hi.jpg);
	background-repeat:no-repeat;
}
#ingredients_header #publish_recipe {
	width: 110px;
	margin: 4px 0 0 413px;
	font-size: 10px;
}
.ingredient_name {
	display: inline;
	margin: 16px 0 0 4px;
	padding: 0;
	vertical-align: middle;
}