/**
 * This file is an attempt to consolidate all styles for strfri into this 
 * one css file
*/

/** Drop Down menu from the web... 
http://javascript-array.com/scripts/jquery_simple_drop_down_menu
*/
#jsddm
{   margin: 0;
	float: left;
	margin: 90px 0 0 75px;
    padding: 0}

    #jsddm li
    {   float: left;
        list-style: none;
		color: #fff;
        font: 12px Tahoma, Arial;
		font-weight: bold}

    #jsddm li a
    {   display: block;
        /* background: #324143;
        background: #BCD43A; 
		background: #555; */
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        /* width: 70px;
        color: #EAFFED;
		color: #fff; */
        white-space: nowrap}

    #jsddm li a:hover
    {   background: #24313C;
		background: #555}

    #jsddm li ul
    {   margin: 0;
        padding: 0;
        position: absolute;
        visibility: hidden;
		z-index: 100;
        border-top: 1px solid white}

        #jsddm li ul li
        {   float: none;
            display: inline}

          	#jsddm li ul li a
            {   width: auto;
                background: #A9C251;
                background: #BCD43A;
                color: #24313C}

            #jsddm li ul li a:hover
            {   background: #8EA344;
				background: #555;
				color: #fff}


/** 
 * Override strfri1.css (from Sid)
 */

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

	line-height: 1.8;
	list-style: none;
	font-size: 10pt;
	color: #000;
}
h2 {
	line-height: 1.23;
	text-transform: lowercase;
}

h3 {
	line-height: 1.23;
	text-transform: lowercase;
}
#main-wrapper {
	min-height: 650px;
}
#main-container {
	overflow: visible;
}
#top a {
	color: #ffffff;
}

#navigation a {
	color: #ffffff;
	text-decoration: none;
}

#footer-wrapper {
	min-height: 20px;
	margin-top: 40px;
	margin-bottom: 21px;
	padding-top: 10px;
}

#footer {
	min-height: 20px;
	margin-top: 20px;
	margin-bottom: 21px;
	padding-top: 10px;
	color: #333;
	text-align: center;
	font-size: 11px;
	letter-spacing: 1px;
}
#footer p {
	margin-bottom: 15px;
	font-size: 11px;
	
}

/** End OVerride strfri1.css */


/** HTML Elements **/

/*
body {
	background: #ffffef;

	color: #555;

	font-size: 9pt;
	font-variant: normal;
	font-size-adjust: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

	line-height: 1.8;

	margin: 0;
	padding: 0;
	text-align: center;
}


div, span, p, ul, ol, li, 
form, label, input, select, button, textarea, 
h1, h2, h3, h4, h5,
table, td, tr, th 
{
	margin: 0;
	padding: 0;
}


h1 {
	letter-spacing: -1px;
	font-size: 32px;
	font-weight: normal;
	color: #250;
}

h2 {
	font-size: 23px;
	font-weight: normal;
	color: #250;
}

h3 {
	font-weight: normal;
	color: #250;
}
*/

/**
 * Link Handling 
 */

/*
a, a:visited {
	color: #250;	
}
*/
a {
	font-weight: bold;
}
a:hover {
	background: #555;
	color: #ffffff;
	/*text-decoration: none;*/
}
/**
 * Lists
 */
ul {
	margin: 0 0 2em 0;
	list-style-type: none;
}

ul.squareInside {
	list-style: square inside;
	color: #FFC61A;
}
ul.circleInside {
	list-style: circle inside;
	color: #FFC61A;
}
ul.discInside {
	list-style: disc inside;
	color: #FFC61A;
}

/**
 * Table
 */
table {
	border-collapse: collapse;
}

td, th {
	border: 1px solid #ddd;
}

.trLight {
	background: #fff;
}
.trDark {
	background: #eee;
}

/** Legend - Used?? */
legend {
	font-size: 1.3em;
}

/*************************************************************************** 
 * Basic Widgets... form elements,  
 **************************************************************************/
/*
#content form {
	color: #fff;
}
*/
input, select, textarea {
/*
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
*/
	border: 1px solid #555;
	padding: 3px 5px;
/*
	background: #555;
	color: #fff;
*/
	margin-right: 4px;
	padding: 3px;
}

.oneColumnForm {
	margin-top: 3px;
	margin-bottom: 1px;
}

.oneColumnForm label {
	display: block;
	text-align: left;
}

/** 
   A two column form will show the label on the left of the form input 
   This is done by floating the labelHelper element to the left and assigning
   it a fixed width of 15em and then making sure to clear the float for the
   next label.
*/

.twoColumnForm {
	margin-top: 5px;
	margin-bottom: 3px;
}

.twoColumnForm div {
	margin-top: 2px;
	clear: both; 
}

/** Style the label and any other text */
.twoColumnForm .labelHelper { 
	float: left;
	width: 15em; 
	text-align: right;
	font-weight: bold;
	margin-left: 1px;
	margin-right: 10px;
	padding-right: 8px;
	clear: left;
}


/** Help text for a form element - shows up below the label */
.twoColumnForm .labelHelper p {
	font-size: .9em; 
	margin-top: 1px;
	padding-top: 0px;
	font-weight: normal;
}

.formLabel {
	letter-spacing: 0px;
	padding: 0px;
	width: 10em;
	float: left;
	text-align: right;
	clear: left;
	font-weight: bold;
	margin-right: 10px; 
}

p.formError {
	background: none;
	border: none;

	color: #880000;

	margin-top: 12px;
	margin-left: 14em;
	margin-bottom: 2px;

	padding-top: 2px;
	padding-left: 10px; 
	padding-bottom: 2px;
}


/**
 * Page Structure Elements
 */

/*
#banner {
	background: transparent url(images/my-blue-bg.jpg);
	border-bottom: 10px solid #a0d103;

	height: 60px;
	margin: 0;
	padding: 0;
}
*/

/* 
To change the page width of the site:
	change the width in the #header, #page styles.
	change the width in the #content and #sidebar styles

*/

/*
#header {
	height: 60px;

	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;

	text-align: left;
	width: 900px;
}
#logo {
	float: left;
	height: 60px;
	line-height: normal;
	margin-bottom: 5px;
	width: 300px;
}
#logo h1 {
	font-size: 42px;
	letter-spacing: 3px;
}

#logo a h1, #header h2, #header h3 {
	color: #fefefe;

	text-decoration: none;
	text-transform: lowercase;
}

#logo h2 {
	color: #a0d103;

	font-size: 12px;
	font-weight: normal;

	margin-top: -7px;
}

#topSearchBar {
	color: #fefefe;
	float: right;
	margin-top: 2px;
	padding-right: 10px;
	text-transform: lowercase;
}

div#searchBar {
	border-bottom: 1px dashed #c1d11c;

	color: #333;

	padding-left: 10px;
	padding-right: 10px;
}

div#signinbar a {
	color: #efefef;
}

div#signinbar {
	font-style: italic;

	margin-top: 10px;

	text-transform: lowercase;
	text-align: right;
}
*/

/**
 * Menu Stuff
 */
#menu {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
}

#menu ul {
	display: inline;
}

#menu .otherLinks {
	float: right;
	margin-right: 10px;
}
.otherLinks a {
	color: #fff;
	font-size: 150%;
}
#menu ul a {
	background: #333;
	color: #fff;

	display: block;
	float: left;
	text-decoration: none;
}

#menu a:hover {
	color: #FFC61A;
}

/* YUI specific styles - this should go to another file... */
/* using yui-drop-down menu */
.yui-skin-sam .yuimenubar {
	background: none;
	border: none;
}
.yuimenu {
	background: #333;
}

/* YUI Tab Customization  */
.yui-skin-sam .yui-navset .yui-content {
	background:#fdfdfd none repeat scroll 0 0;
}



body.recipes #recipeMenu,
body.cookbook #cookbookMenu,
body.home #homeMenu,
body.foods #nutritionLabelMenu,
body.diet #dietMenu,
body.menu #menuMenu,
body.health #healthMenu,
body.calculators #calculatorMenu,
body.myStuff #myStuffMenu,
body.login #loginMenu
{
	background: #efefef;
	color: #555;
}

/**
 * Page Elements.
 */

/*
#page {
	text-align: left;
	border-left: 1px solid #250;
	border-right: 1px solid #250;
	min-height: 650px;
	width: 900px;
	margin: 10px auto;
}

#page h1 {
	margin-bottom: 10px;
}

#breadCrumbs {
	margin: 0;
	padding: 0;
	font-size: 95%;
}
#content {
	margin-top: 5px;
	margin-left: 10px;
	float: left;
	width: 850px;
}
#sidebar {
	float: right;
	width: 200px;
}

#sidebar ul li {
	margin-top: 6px;
	margin-bottom: 0px;
}

#footer {
	min-height: 20px;
	margin-top: 20px;
	margin-bottom: 21px;
	padding-top: 10px;
	border-top: 5px solid #c1d11c;
	background: #250;
	background: #FFC61A;
	color: #333;
	text-align: center;
	font-size: 11px;
	letter-spacing: 1px;
}
#footer p {
	margin-bottom: 15px;
	
}
*/

/* emphasise using color + space */
.emC {
	border: 1px solid #250;
	color: #c33;
	margin: 10px;
	padding: 3px;
}	

/* emphasise by changing font characteristics */
.emB {
	font-weight: bold;
}
.emSmall {
	margin: 1px;
	font-size: .9em;
	color: #b20;
}

/**
 * Home Page specific styles
 */
ul#homePageNutLinks {
	margin: 0;
}

#homePageNutLinks li {
	float: left;
	margin-right: 30px;
}
#homePageNutLinks a {
	text-decoration: none;
}

#homePageOptions {
}
#homePageOptions li {
	margin-bottom: 20px;
}

.iblock h3 {
	width: auto;
}
/**
 * Food Entry Stuff - used in DietPlanning, FoodDiary and Ingredients entry.
 */
.timeDiv {
	margin-bottom: 20px;
}
.timeDiv h4 {
	font-size: 1.1em;
}
.timeDiv div {
	margin-left: 10px;
}
/**
 * recipe and food elements
 */
#recipeNameSplit {
	border-bottom: 2px solid #c1d11c;
	margin-bottom: 7px;
	padding-bottom: 3px;
}
.recipeName h2 a {
	text-decoration: none;
	text-transform: lowercase;
}
.recipeImage {
	float: left;		
	margin: 0 auto 0 auto;
}
.submittedBy {
	font-size: .9em;
	font-style: italic;
}
#content p.description {
	margin-bottom: 10px;
	margin-left: 20px;
	font-style: italic;
}
.foodGroup {
	font-size: .95em;
}
.foodTags {
	font-size: .95em;
}
.alternateNameDiv {
	font-style: italic;
	font-size: 11px;
}

/**
 * Ingredient Panel
 */
.ingredients {
	background: #efefef;
	font-size: .95em;
	padding-left: 10px;
	padding-right: 10px;
}



.ingredients .ingredientFoodGroup {
	color: #666;
	float: right;
	font-size: .9em;
	text-align: right; 
	text-decoration: none;
	padding-right: 8px;
}

a.ingredientFoodGroup {
	color: #666;
}
a.ingredientFoodGroup:hover {
	background: #555;
	color: #ffffff;
}

.preparation {
	padding-left: 10px;
	padding-right: 10px;
}

.ingredients ol, .preparation ol {
	margin-top: 10px;
	list-style-type: decimal;
	list-style-position: outside;	
	margin-left: 1em;
	padding-left: 1em;
}
	.ingredients ol li, .preparation ol li {
		list-style-type: decimal;
		list-style-position: outside;	
		margin-left: 0em;
		padding-left: 1em;
	}

.timeInfo {
	font-style: italic;
}
.timeInfo span {
	font-style: normal;
	font-weight: bold;
	padding-left: 2em;
}


/**
 * Nutrition Label Styling - as given by US FDA
 */
#content .nutritionLabel {
	line-height: normal;
	text-align: left;
	letter-spacing: 0px;
	padding-right: 2px;
	padding-left: 2px;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 2px;

font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:9pt;
}

#nutrition-info {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: none;
	border-left: 2px solid #bcd43b;
	width: 260px;
	padding: 0;
	padding-left: 10px;
	padding-right: 10px;
	float: left;
	margin: 25px 0 0 25px;
	margin: 0;
	margin-left: 10px;
	margin-right: 10px;
}

#info {
	padding-right: 10px;
}

#content .nutritionLabel h3 {
	width: auto;
}

#content .nutritionLabel .rightCol {
	text-align: right;
}
#content .nutritionLabel h2 {
	background: none;
	padding: 0;
	height: auto;
	width: auto;

	font-size: 12pt;
	font-weight: normal;
	line-height: 120%;
	text-align: center;
	margin: 0px;
	padding-left: 3px;
	font-family: "Arial Black";
	color: #fff;
	background: #bcd43b;
	border-bottom: 1px solid;
}

#content .nutritionLabel p {
	margin: 0px;
	padding: 0px;
}

#content .nutritionLabel h4 {
	font-size: 8pt;
	padding: 0px;
	margin: 0px;
	padding-left: 2px;
}

.nutritionInfoTable {
	padding: 0;
	border-collapse: collapse;
	font-size: 95%;
}
td, th {
	border: 1px solid #ccc;
}
div.nutritionTablePanel th {
	background: #999;
	border-bottom: 1px solid;
	font-size: 95%;
}
div.nutritionTablePanel td {
	text-align: center;
	
}
div.nutritionTablePanel td.leftAlign {
	text-align: left;
	max-width: 15em;
	min-width: 10em;
}

#content #nutritionPanel .nutritionLabel {
	width: 40%;
	float: left;
}


.allFoodsLink {
	margin-top: 15px;
}

#content .caloriePanel {
	font-size: 8pt;
	font-family: "Arial Black";
	margin: 0px;
	padding: 0px;
	padding-left: 1px;
	border-bottom: 3pt solid #000;
	border-top: 7pt solid #000;
}

#content .caloriePanel p {
	font-size: 8pt;
	margin: 0;
}
.caloriePanel p {
	font-size: 8pt;
}

#content .dvPanel {
	font-family: "Arial Black";
	font-size: 8pt;
	border-bottom: 7pt solid #000;
}
.indent {
	padding-left: 1em;
	font-family: Arial;
}
#content .dvPanel .twocol {
	margin: 0px;
	border-top: 1px solid #999; 
	padding-top: 0px;
	padding-bottom: 0px;
}

#content .dvPanel .twocol {
	padding-top: 2px;
	padding-bottom: 2px;
}


#content .vitaminPanel {
	border-bottom: .25px solid #999;
	font-family: "Arial";
	font-size: 8pt;
}

#content .daPanel {
	margin-top: 2px;
	padding-left: 1px;
}
#content .daPanel p {
	font-size: 8pt;
	font-family: "Arial";
}
#content .daPanel .twocol {
	border-top: none;
	border-bottom: 1px solid #999;
}

/*
      address {
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        height:1.8em;
        padding:0;
        background:#fe9;
        color:#666;
        border-top:1px solid #666;
        font-size:x-small;
        font-style:normal;
        text-align:center;
      }
*/
#bottomMenu {
	position: fixed;
	background: #ececec;
	border-top: 1px solid;
	bottom: 0;
	left: 0;
	min-height: 1.8em;
	height: 1.8em;
	min-width: 100%;
	width: 100%;
}

/** Special styles for add food widget only...*/
#myAutoComplete {
    width:20em; /* set width to stop widget from expaning to fit container */
    padding-bottom:2em;
}
.ingleft {
	float: left;
	margin-right: 10px;
}

.separator{
	margin-top: 7px;
	border-top: 1px solid;
	padding-top: 3px;
	border-bottom: 1px solid;
	padding-bottom: 3px;
}

#myAutoComplete .yui-ac-content {
    max-height:20em;
    overflow:auto;
    overflow-x:hidden; /* set scrolling */
}

/**
 * Utility styles and classes
 */

/* Used to clear floats */
.clearBoth { clear: both; }
.clearRight { clear: right; }
.clearLeft { clear: left; }

.twocol {
	margin: 0;
	padding: 0;
	width: 100%;
}
.leftCol {
	float: left;
	padding: 0;
	margin: 0;
}
.rightCol {
	padding: 0;
	margin: 0;
}

.ui-widget-content a:hover {
	background: #555;
	color: #ffffff;
}