/*****************************************************************
 * HTML ELEMENTS
 *****************************************************************/

body {
	margin:0;
	padding:0;
	color:#333;
	background-color:#797c8a;
	font-size:13px;
	font-family:verdana, tahoma, arial, helvetica, sans-serif;
	text-align:center;
}
table {
	font-size:13px;
}
h1, h2, h3, h4, h5, h6 {
	margin:0 0 0.5em;
	padding:0;
	font-weight:normal;
}
h1 { font-size:18px; }
h2 { font-size:16px; }
h3 { font-size:14px; font-weight:bold; }
h4 { font-size:13px; font-weight:bold; }
p {
	font-size:13px;
	margin:0 0 1em;
	padding:0;
}
a { color:#000; font-size:13px; }
a:visited { color:#a5b3ef; }
a:hover { background-color:#d5f4f3; }

/*****************************************************************
 * MAIN PAGE SECTIONS
 *****************************************************************/

#container {
	width:1000px;
	margin:20px auto;
	background-color:#fff;
	text-align:left;
}
#header {
	position:relative;
	height:110px;
	border-bottom:1px solid #808080;
	background-color:#fff;
}
#header .logo {
	position:absolute;
	left:10px;
	top:10px;
	width:260px;
	height:98px;
	border:0;
}
#header .banner {
	position:absolute;
	right:10px;
	top:10px;
}
#headline {
	padding:4px;
	border-bottom:1px solid #808080;
	background-color:#c1ffbf;
	font-style:italic;
}
#content {
	background:#fff url(/images/background.gif) left top repeat-y;
}
#navigation {
	float:left;
	width:190px;
	height:100px;
	padding:5px;
}
#navigation ul {
	list-style:none outside none;
	margin:0 0 1em;
	padding:0;
}
#navigation ul li {
	margin:0 0 0 10px;
	padding:0;
}
#content-inner {
	margin-left:201px;
	padding:10px;
}
#banner {
	float:right;
	width:120px;
	padding:5px 10px;
	text-align:center;
}
#footer {
	padding:4px;
	border-top:1px solid #808080;
	background-color:#c1ffbf;
}

/*****************************************************************
 * RECIPE PAGE
 *****************************************************************/

.leftcol {
	float:left;
	width:260px;
}
.rightcol {
	margin-left:300px;
}

.leftcol,
.leftcol p,
.leftcol a {
	font-size:16px;
}

.register-title {
	background-color:#f6b010;
	margin:0px 0px 15px;
	padding:20px 25px;
	font-size:26px;
	font-weight:bold;
}

.register-form {
	margin:0 0 1.5em;
}
.register-form .input label {
	display:block;
	color:#777;
}
.register-form .input input {
	display:block;
	width:250px;
	font-size:20px;
}

.recipe {
	line-height:1.1em;
	font-size:13px;
}
.recipe img.recipe-photo {
	position:static;
	float:left;
	margin:0 15px 0 0;
	padding:5px;
	width:120px;
	height:90px;
	background-color:#fff;
	border:2px solid #ccc;
	-webkit-box-shadow:1px 1px 3px rgba(128, 128, 128, 0.5);
	   -moz-box-shadow:1px 1px 3px rgba(128, 128, 128, 0.5);
	        box-shadow:1px 1px 3px rgba(128, 128, 128, 0.5);
}
.recipe .recipe-header {
	margin:0 0 1em;
	overflow:hidden;
}
.recipe .recipe-title {
	display:block;
	color:black;
	margin:0 0 5px;
	line-height:1.2em;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
}
.recipe .rating {
	color:#777;
	margin:0 0 5px;
	height:20px;
	line-height:20px;
	font-size:0.8em;
}
.recipe dl {
	font-size:11px;
}
.recipe dt {
	float:left;
	width:85px;
	font-weight:bold;
	white-space:nowrap;
}
.recipe dd {
	white-space:nowrap;
}
.recipe .recipe-body p {
	margin:0 0 1em;
	font-size:1.2em;
	line-height:1.25em;
}
.recipe .recipe-body .ingredients,
.recipe .recipe-body .directions {
	margin:0 0 2em;
}
.recipe .recipe-body .ingredients h2,
.recipe .recipe-body .directions h2 {
	cursor:pointer;
	padding:0 0 0 20px;
	background:transparent url(/images/compactable.png) left center no-repeat;
}
.recipe .recipe-body .ingredients ul {
	list-style:none outside none;
	margin:0 1em 1em;
	padding:0;
	font-size:0.9em;
	color:#666;
}
.recipe .recipe-body .ingredients ul li {
	float:left;
	width:32%;
	margin:0 1% 0.8em 0;
	padding:0;
}
.recipe .recipe-body .ingredients.hidden h2,
.recipe .recipe-body .directions.hidden h2 {
	background-image:url(/images/compacted.png);
}
.recipe .recipe-body .ingredients.hidden ul,
.recipe .recipe-body .directions.hidden ol {
	display:none;
}

/*****************************************************************
 * CLEARFIX
 *****************************************************************/

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* \*/ .clearfix { display:block; } /* */

/*****************************************************************
 * FOTT BUTTON
 *****************************************************************/

.fott-button {
	display:-moz-inline-stack;
	display:inline-block;
	*display:inline;
	zoom:1;
	padding:6px 12px;
	color:#333;
	background-color:#bbb;
	background:-webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#bbbbbb));
	background:-moz-linear-gradient(top, #eeeeee, #bbbbbb);
	-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#bbbbbb')
	           progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	    filter:alpha(opacity=80);
	    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#bbbbbb')
		       progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	-moz-opacity:0.8;
	     opacity:0.8;
	outline-width:0;
	border:1px solid #999;
	-webkit-border-radius:5px;
	 -khtml-border-radius:5px;
	   -moz-border-radius:5px;
	        border-radius:5px;
	font-size:0.8em;
	font-weight:bold;
	text-align:center;
	text-decoration:none!important;
	text-overflow:clip;
	text-shadow:0 1px 0 #fff;
	text-transform:capitalize;
	overflow:hidden;
	vertical-align:middle;
	white-space:nowrap;
	cursor:pointer;
}
.fott-button:hover {
	-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#bbbbbb')
	           progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	    filter:alpha(opacity=100);
	    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#bbbbbb')
		       progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-moz-opacity:1;
	     opacity:1;
  color:#333;
  text-decoration:none;
}
.fott-button:active {
	-ms-filter:none;
	    filter:none;
	background:#bbb none center center no-repeat;
}
.fott-button.fott-button-primary {
	background-color:#fa2;
	background:-webkit-gradient(linear, left top, left bottom, from(#ffee66), to(#ffaa22));
	background:-moz-linear-gradient(top, #ffee66, #ffaa22);
	-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffee66', EndColorStr='#ffaa22')
	           progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	    filter:alpha(opacity=80);
	    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffee66', EndColorStr='#ffaa22')
		       progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	border-color:#fa2;
	text-shadow:0 1px 0 #fe6;
}
.fott-button.fott-button-primary:hover {
	-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffee66', EndColorStr='#ffaa22')
	           progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	    filter:alpha(opacity=100);
	    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffee66', EndColorStr='#ffaa22')
		       progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.fott-button.fott-button-primary:active {
	-ms-filter:none;
	    filter:none;
	background:#fa2 none center center no-repeat;
}
.fott-button.fott-button-large {
	padding:5px 15px;
	font-size:1.1em;
}