/*
* Screen styles for Ingredient Mixer Application
* Date: January 2009
* Author: Scott Jehl, Filament Group (www.filamentgroup.com)
* Notes:
*/


/* reset styles */
@import url(screen_reset.css);

/* setting the font to 62.5% sets 1em equal to 10px: */
body { font-size:62.5%; }

/* content only relevant to noscript should be given a noscript class name */
body.enhanced .noscript { display: none; }
body .script { display: none; }
body.enhanced .script { display: block; }

/* general text styles */
h1 { font-weight: bold; font-size: 1.8em; margin-bottom: 1em; display: block; }
h2 { font-weight: bold; font-size: 1.4em; margin: 2em 0; display: block; }
p.intro { font-size: 1.2em; line-height: 1.5; margin-bottom: 2em; width: 70%;}

dl { padding: 1em 0; }
dt { font-weight: bold; float: left; margin-right: .5em; clear: left; }
dt, dd { font-size: 1em; }

/* links and buttons */
#page button { cursor:pointer; padding: .4em 1em; font-size: 1.4em; text-align:center; float: right; margin: 50px 0 0; clear: both; position: relative; }

/* page layout & components */
#page { width:940px; margin:100px auto; font-size: 1em; }


/*ingredients list styles*/
body.enhanced #ingredients-list { float: left;}
body.enhanced .ingredient-group { cursor: move; }
body.enhanced .ingredient-info { position: absolute; left: -99999999px; width: 0; height: 0; overflow: hidden; }

h3 span.count { font-size: .9em; font-weight: normal; }

.ingredient-name-amount { padding: .2em 10px; margin: 0 0 .2em; position: relative; }
.add-to-mixer h4 {
  font-weight: normal;
  font-size: 1em;
  line-height: 17px;
}
._add-to-mixer {
  position: absolute;
  right: .2em;
  top: .2em;
  font-size: 1em;
  text-indent: -999999px;
  overflow: hidden;
  width: 16px;
  height: 16px;
  text-decoration: none;
  padding: 0;
}

.add-to-mixer .ui-icon { top:0; left:0; margin:0; }

/*ingredient mixer styles*/
#ingredients-mixer { }
#ingredients-mixer-content { padding: 10px 304px 0 160px; min-height: 270px;}
.drop-here { padding: 10px; opacity: 0.6; filter: Alpha(Opacity=60);  font-size: 1.5em; font-weight: bold; }

/*mixer form elements*/
#ingredients-mixer-content fieldset { margin: 0 0 2.5em; height: 5em; }
#ingredients-mixer-content .ui-slider { margin-top: .5em; }
#ingredients-mixer input { width: 2em; padding: 2px 5px; }
.remove-from-mixer, .lock-slider { float: left; width: 16px; height: 16px; margin: 3px 5px 0 -8px;  position: relative; border: 1px solid transparent; _border-color: #fff; /*IE6 doesn't support transparent borders*/  }
.lock-slider { float: right; margin: 3px 5px 0 0;  }

.ingredient-amt-widget { float: right; position: relative; top: -15px; }

/*framework overrides */
#page .ui-widget-content .ui-state-disabled { opacity: 1; filter: Alpha(Opacity=100); }
#page .ui-widget-content input.ui-state-disabled { border-color: transparent; _border-color: #fff; /*IE6 doesn't support transparent borders*/   }
#page div.ui-state-disabled .ui-slider-handle { display: none; }

/*animation styles*/
.ui-effects-transfer { border: 2px dotted gray; }

/*dialog styles*/
.ui-dialog p { margin: 10px; line-height: 1.5; }

/* nutrition table */
div#totals_data { float: right;  }
div#nutrition_facts { padding: 5px; border: 1px solid #333; }
table { border-collapse: collapse; display: block; width: 100%; }
table caption { font-size: 1.5em; font-weight: bold; padding: .2em 0; border-bottom: 3px solid #333; }
table caption em { font-size: .7em; font-weight: normal; display: block; padding: .4em 0; }
table thead { display: none; }
table th { width: 170px; }
table td { width: 80px; text-align: right; }
table th, table td { padding: .3em .5em; font-size: 1.2em; border-bottom: 1px solid #333; }
table th { font-weight: bold; }
table tr.subnutrient th { padding-left: 1.2em; font-weight: normal; }

/*console - dev only */
#console { padding: 10px; margin: 20px 0; }
#console h2 { margin-bottom: .5em; }

/*form other stuff*/
#mixer-form-other {display:none;}