/* Fix a silly bug in Mozilla; thanks, Carey Evans */
html { min-width: 944px; }


/* Helpers and base rules */
img	{ border: 0; }
.hide	{ display: none; }
a { color: #cc0000; text-decoration: none; }
a:hover { text-decoration: none; color: #ff0000; }

/* Primary layout divisions */
body	{
	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;	
	background: #fff;
	color: #000;
	font: small/1.4 Arial, Helvetica, sans-serif;
	}

div#wrapper	{
	/* hack to center well and re-leftify text */
	width: 944px;
	margin: 0 auto;
	padding: 0;
	margin-top: 15px;
	text-align: left;
	}

div#well 	{
	float: left;
	padding: 0;
	border: 0;
	margin-top: 10px;
	}

#wellTitle {
	padding-top: 5px;
}
		
#wellTitle #breadcrumbs, #footer, #subFooter, .recipeAltUnits {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#footer {
	margin-top: 12px;
}

#wellTitle h2 {
	font-size: 20px;	
	margin: 0px 0px 0px 0px;
}

#wellTitle #bug {
	float: right;
	margin-left: 10px;
}

#wellTitle #pageInstructions {
	font-family: Georgia, Palatino, "Times New Roman", Times, serif;
	font-size: 11px;
}
		

#content {
	border: 1px solid #999999;
	width: 920px;
	padding: 12px 12px 0px 12px;
	margin: 10px 0px 10px 0px;
	font-family: Georgia, Palatino, "Times New Roman", Times, serif;
	font-size: 13px;
	color: #666666;
}

#content table {
	border-collapse: collapse;
	border-spacing: 1px;
	empty-cells: show;
	width: 920px;
}

#content > .results tr:hover {
	background-color: #FFEFEA;
}

#content > table td {
	border-bottom: 1px solid #999999;
	padding: 8px 10px 8px 0px;
	margin-right: 10px;
}

/* the column for little glassware pix */
#content td.ic { text-align: center; padding-right: 10px; }

/* these things govern the forms on the search page, for example... */
#content div.left {
	width: 558px;
	margin-right: 10px;
}

#content div.right {
	width: 350px;
}

#content div.left, #content div.right {
	/* both kinds of divs need margins on the bottom so they stack better */
	margin-bottom: 15px;
	float: left;
}

/* the form bits need some spacing */
#content div.left .input_text, #content div.left .input_select {
	/* margin-bottom: 10px; */
	}

/* forms use sans-serif by default, also headers in rest-enabled blocks */
#content div.form, #content div.instructions, #content .document h3 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#content h3 {
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 0px;
}

/* h3 that comes right after iconContainer (the right block with the pix) should not have top margin */
#iconContainer + h2, #iconContainer + h3 { margin-top: 0px; }

/* h3 that are the first one inside of something else, also don't have top margin */
h2:first-child, h3:first-child { margin-top: 0px; }

/* the ingredient photos on recipe pages */
#iconContainer {
	width: 550px;
	float: right;
}


/* space below the buttons on search pages */
/* #ingredients #content .input_submit { margin-bottom: 15px; } */

#content div.form { font-size: 14px; }

#content div.instructions { font-size: 12px; }

#content span.error {
	color: red;
	font-size: 11px;
}


/* the bottom collection navigational stripe (inside of footer now) */
#collectionNav { text-align: center; padding: 4px 0px 4px 0px; }  /* make the middle one stay in the middle */
#collectionNav .prev { float: left; width: 300px; text-align: left; }
#collectionNav .next { float: right; width: 300px; text-align: right; }


/* style stuff for the form on the recipe_search page... */
#field_name { 	width: 345px; }
#field_base { 	width: 135px; margin-right: 10px;}
#field_type { 	width: 135px; }

#field_inclusion1, #field_inclusion2, #field_inclusion3 { width: 75px; margin-bottom: 10px; }
#field_ingredient1, #field_ingredient2, #field_ingredient3 { width: 140px; margin-right: 5px; margin-bottom: 10px;  }
#field_comparison1, #field_comparison2, #field_comparison3 { width: 100px; margin-bottom: 10px; }
#field_quantity1, #field_quantity2, #field_quantity3 { width: 80px; margin-bottom: 10px; }

/* some top margin for the first one */
#field_inclusion1, #field_ingredient1, #field_comparison1, #field_quantity1 {
	margin-top: 10px;
}

/* style stuff for the form on the ingredient search page... */
#ingredients .left div { float: left; }

/* ----------------------------------------------------- */
		
div#subFooter {
	width: 734px;
	text-align: center;
	padding-top: 10px;
	margin-left: 75px;
}

div.subFooterRight {
	width: 325px;
	float: right;
	text-align: right;
}

div.subFooterLeft {
	width: 325px;
	float: left;
	text-align: left;
}

div#motacdiv {
	clear:left;
	float:left;
	width:75px;
	height:100px;
}

div#talesdiv {
	/*clear:right;*/
	float:right;
	width:110px;
	height:100px;
}

h1	{
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	border: 0;
	}
	
h1 a:link, h1 a:visited	{
	display: block;	
	width: 944px;
	height: 94px;
	background: #990000 url(/static/gfx/banner.global.png) top left no-repeat;
	margin: 0px;
	padding: 0;
	border: 0;
	}
	/* turn off underlining on hovering this pooch */
	h1 a:hover { text-decoration: none; }
	
	
/* Primary nav 	*/
div#navBar	{
	height: 35px;
	width: 944px;
	margin: 0px;
	padding: 0;
	border: 0;
	background: #ff6633;
	}

div#navBar ul#menu	{
	height: 35px;
	width: 944px;
	background: url(/static/gfx/nav.global.png) top left no-repeat;
	margin: 0;
	padding: 0;
	position: relative;
	}

div#navBar ul#menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
	
ul#menu li, ul#menu a {
	height: 35px;
	display: block;
	}
	
div#navBar ul#menu li a {
	text-indent: -9999px;
	text-decoration: none;
	}

#navHome	{left: 17px; width: 125px;}
#navHome.on { background: url(/static/gfx/nav.global.png) -17px -35px; }
#navRecipes	{left: 143px; width: 125px;}
#navRecipes.on { background: url(/static/gfx/nav.global.png) -143px -35px; }
#navIngredients	{left: 268px; width: 125px;}
#navIngredients.on { background: url(/static/gfx/nav.global.png) -268px -35px; }
#navBarware	{left: 393px; width: 125px;}
#navBarware.on { background: url(/static/gfx/nav.global.png) -393px -35px; }
#navLibrary {left: 518px; width: 125px;}
#navLibrary.on { background: url(/static/gfx/nav.global.png) -518px -35px; }
#navMixilator	{left: 643px; width: 125px;}
#navMixilator.on { background: url(/static/gfx/nav.global.png) -643px -35px; }
#navAbout	{left: 814px; width: 103px;}


/* style stuff for recipe detail pate */
.recipeMeasure {
	margin-left: 15px;
	font-style: italic;
	line-height : 18px;
}

.recipeAltUnits {
	color: rgb( 180, 180, 180 );
}

.recipeDirection { margin-top: 15px; }

/* except the one that comes first... */
#iconContainer + .recipeDirection { margin-top: 0px; }
	
div#errors {
	font-weight: bold;
	font-size: 14px;
	color: red;
}

div#messages {
	color: blue;
	font-weight: bold;
	font-size: 14px;
}


#recipeScaleForm .fieldDiv {
	float:left;
	margin-right: 10px;
}

#scalingFeatures {
	background-color: rgb( 245, 245, 245 );
	padding: 10px;
	width: 300px;
	margin-top: 20px;
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#scalingFeatures h3 { font-size: 12px; }
#scalingFeatures h4 { margin-bottom: 0px; }
#scalingFeatures ul { padding-left: 15px; margin-top: 0px; }

/* nudge the button down a bit */
#scalingFeatures .input_submit { margin-top: 15px; }


#ingredients ul li { list-style-type: none; margin-top: 15px; }

#licensing {
	text-align: right;
}

/* icons on home page */
#homeIcons img {
	margin-left: 40px;
}

/* home page gallery box */
#homeGallery {
	padding:15px; 
	border: 1px solid black; 
	margin: auto;
	margin-bottom: 25px;
	text-align: center;
}

/* home page form */
#field_simpleSearch {
	width: 300px;
}


/* library page */
img.book {
	margin: 25px 12px 25px 12px;
}

/* gallery detail stuff */
.altView {
	width:102px;
	height:102px;
	text-align:center;
	border:1px solid gray;
}


/* ************** gallery grids **************** */
/* required structural css properties for the grid */
.cel { float: left; }
.cel .pic { display: inline; }
.cel .pic img { vertical-align: bottom; }

/* decorative treatment for cels */
.cel {
	padding: 10px;
	text-align: center;
}
.cel .cap { 
	/* caption decoration */
	padding-top: 10px;
}

/* the below is example of final stuff needed to make this trick work;
 we're doing it inline in all cases, but this is here as a reminder */
/* #ingredients .cel {
	/* need a width and height */
	/* take padding into account, or it won't flow right */
	/*width: 270px; 
	height: 440px;
}

#ingredients .cel .pic {
	/* should be the same as height from (.cel minus padding) */
	/*line-height: 420px;
}*/


/* gallery detail stuff */
.altView {
	width:102px;
	height:102px;
	text-align:center;
	border:1px solid gray;
}

/* special table handling for the usage examples on ingredient detail and recipe detail */
#content table.recipeSamples, table.ingrCategories {
	border-collapse: collapse;
	border-spacing: 1px;
	empty-cells: show;
}

#content table.recipeSamples {
	width: 300px;
}

#content table.recipeSamples tr:hover, table#ingrCategories tr:hover {
	background-color: white;
}

#content table.recipeSamples td, table#ingrCategories td {
	border-bottom: none;
	padding: 1px 0px 0px 0px;
	margin-right: 0px;
}

.similarRecipes {
	float:left; width:300px;
}

/* "Microsoft Sucks" Hacks to follow */
.png {
        /* this one is because MS can't follow the damn spec for PNG alpha channels...
        they'd rather use a complicated directX filter, than simply following the rules
        like everybody else */
        behavior: url("/static/gfx/pngbehavior.htc");
}

/* Do I seem bitter? Hmmm.... */

img.right {
	float: right;
	margin-left: 10px;
}