@import url('reset.css');

/*
COLORS
Define main colors used in a site here for easy reference

Blue = 0066cc
Lt Blue = CFF7FF
Dk Blue = 00849F

*/

html {
	height: 100%;
}

body {
	height: 100%;
	font: 62.5%/1.5em arial, helvetica, sans-serif;
	color: #666;
	text-align: center;
	background: #9fc365 url(../images/design/bg_tile_pattern.gif);
}

/* ----------------
	DEFAULTS
    ------------- */
h1, h2, h3, h4, h5, h6 {
	/* letter-spacing: 0.05em; */
	text-transform: lowercase;
	line-height: 1em;
	color: #86b33c; 
	margin: 0.5em 0;
}  

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited  {
    color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #999;
} 

h1 { font-size: 2.1em; margin: 0.5em 3em 0.2em 0; font-weight: bold; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; margin-bottom: 0; }
h5 { font-size: 1em; margin-bottom: 0.3em; }
h6 { font-size: 1em; } 

dt {
}
dd {
}
	dd p:first-child {
	}
 
a,
a:link,
a:visited { 
	color: #000; 
	text-decoration: none;
	border-bottom: 1px solid #000;
}
a:hover,
a:active {
    color: #000;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

p { 
	line-height: 1.3em; 
	margin: 0 0 1em 0;
	font-size: 13px;
}

/* For HR's with background images */	
div.hr {
  	height: 3px;
  	margin: 10px 0;
  	background: #fff url() 0 0 repeat-x;
}
	div.hr hr {
	  	display: none;
	}
	
ul {
	list-style: disc;
}

ul, ol {
	padding: 1em;
}

ol {
}
	ol ul,
	ol ol {
	}

/* orderedList class can be assigned manually, or with jQuery method. 
Intended to style bullets differently than text.  */
ol.orderedList li span { color: #666; }
ol.orderedList { color: #000; }

blockquote, q {
    margin: 1em 2em;
    padding: 1em;
    border-left: 1px solid #dcd6c6;
    font-style: italic; 
    font-size: 1.2em;   
    color: #666; 
}   

small,
.small { font-size: .8em; }

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


/* ----------------
	PAGE STRUCTURE
	Elements that make up the skeleton of the layout and holds things together
	
	html, body, page, wrapper, and footer rules are designed to fix footer's at the bottom of the page.
	Wrapping the site in the page div also allows for double background images.
    ------------- */
#page {
	position: relative;
	min-height: 100%;
	padding: 0;
	font-size: 1.2em; /* Render type approximately 12px in size across all browsers */
	background: url(../images/design/shadow_tile.png) 50% 0 repeat-y;
}

#wrapper {
	position: relative;
	min-height: 100%;
	width: 945px;
	margin: 0 auto;	
	text-align: left;
	padding-bottom: 10px;
/*	background-color: #fff;*/
}

#header {
	position: relative;
	height: 92px;
	padding-top: 17px;
	background: url(../images/design/bg_header.gif) 287px 20px no-repeat;
}

#footer {
	position: relative;
	margin-top: 0; /* when using footer stick, you need a negative margin equal to the bottom padding on #wrapper */
	height: 10px;
	clear: both;
	background: url() 0 0 repeat-x;
}

#colContent {
	/* main site content area */
	position: relative;
	float: left;
	width: 630px;
	margin-left: 28px;
	z-index:0 !important;
}
object,
embed{
z-index:1 !important;
}
#colNav {
	position: relative;
	float: left;
	width: 246px; /* 274 + 14 + 14 */
	margin-left: 14px;
}

/* ----------------
	PAGE LAYOUT VARIENTS
    ------------- */
body.popup,
body.popup #page {
	background: none;
	background-color: #fff;
}
body.popup #wrapper {
	width: auto;
}
body.popup #colContent {
	width: auto;
	float: none;
	margin: 20px;
}



/* ----------------
	PAGE STRUCTURE ELEMENTS
	Elements  such as logos, search bars, and any other design element repeated throughout the site, 
	but doesn't effect the structural layout
    ------------- */

#social {
	width: 229px;
	height: 25px;
	display: block;
	top: 88px;
	position: absolute;
	left: 193px;
	margin: 0;
	padding: 0;
	font-size: 1em;
}

#social a{
	border:none !important;
	text-decoration:none;
}


#logo {
	width: 229px;
	height: 62px;
	display: block;
	background: url(../images/design/logo.gif) 0 0 no-repeat;
	position: absolute;
	top: 15px;
	left: 14px;
	margin: 0;
	padding: 0;
	font-size: 1em;
}
	#logo a {
		width: 229px;
		height: 62px;
		display: block;
		text-indent: -9999px;
		border: 0;
	}
	
#tagline {
	position: absolute;
	bottom: 16px;
	left: 287px;
	height: 80px;
	width: 633px;
}
	#tagline p {
		margin: 15px 0 0 0;
		text-align: center;
		font-size: 3em;
		letter-spacing: 0.03em;
		color: #e84626;
	}
	
.col {
	float: left;
}

.listingSummary {
	list-style: none;
	margin: 1.5em 3em;
	padding: 0;
}

.recipe {
	border-bottom: 1px solid #e5e5e5;
}
	.recipe .image {
		float: right;
		display: block;
		width: 145px;
		height: 85px;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}

.more{
	position:relative;
	top:-15px;
}

a.expand {
	color: #e95d22;
	font-weight: bold;
	font-size: 1.2em;
	border: 0;
	text-transform: lowercase;
}
	
.features{
	position:relative;
	top:-17px;
	left:100px;
	height:18px;
	overflow:hidden;
}
.features a,
.features a img{
	border:none !important;
	text-decoration:none;
}
.share,
.printThis{
	float:left;
}
.printThis{
	padding-left:20px;
}

/* ----------------
	NAVIGATION
    ------------- */
#divider {
	height: 100px;
	background: url(../images/design/bg_nav_bottom_right.gif) 100% 0 no-repeat;
}
#colNav {
	padding: 0 0 4em 0;
}
#colNav ul {
	list-style: none;
	padding: 5px 0;
}
#colNav ul#stories {
	padding-top: 0;
	margin-top: -13px;
}
	.navMain a {
		display: block;
		font-size: 1.3em;
		color: #797979;
		border: 0;
		text-transform: lowercase;
		/* letter-spacing: 0.05em; */
		padding: 0.1em 0 0.1em 32px;
		background: url(../images/design/icon_arrow_grey.gif) 12px 55% no-repeat;
		font-weight: bold;
	}
	.navMain a:link, 
	.navMain a:visited,
	.navMain a:hover,
	.navMain a:active {
		border: 0;
	}
		.navMain a:hover {
			color: #eb5d1f;
			background-image: url(../images/design/icon_arrow_orange.gif);
		}
	.navMain li ul {
		padding: 2em 0;
		margin-top: 0.5em;
		background: url(../images/design/bg_sub_nav.gif) 32px 0 no-repeat;
	}
	#colNav ul.navMain li ul {
		padding: 1em 0;
	}
		.navMain li ul a {
			padding: 0.2em 0 0.2em 55px;
			background: none;
			letter-spacing: -0.01em;
		}
			.navMain li ul a:hover {
				background: none;
				display: inline-block; /* needed for IE 7 */
			}
		.navMain li.active a {
			color: #eb5d1f;
			background: url(../images/design/icon_arrow_orange.gif) 12px 50% no-repeat;
		}
			.navMain li.active ul,
			.navMain li.here ul {
				padding: 1em 0;
			}
			.navMain li ul a {
				font-size: 14px;
				text-decoration: underline;
				background: none;
			}
			.navMain li.active ul a {
				color: #666;
				background: none;
				text-decoration: underline;
			}
				.navMain li.active ul li.active a {
					color: #eb5d1f;
				}
				
	.navMain li ul ul {
		margin-top: 0;
		padding: 0;
		background: none;
	}
		.navMain li ul ul a {
			padding-left: 80px;
		}
				
	li.category {
		color: #86b33c;
		text-transform: lowercase;
		font-weight: bold;
		font-size: 1em;
		line-height: 2em;
		border-bottom: 1px solid #e5e5e5;
		margin: 1.5em 0 1em 0;
		position: relative;
	}
		li.category span {
			display: inline-block;
			position: absolute;
			bottom: -1em;
			background-color: #fff;
			padding-right: 0.8em;
		}
		
	li.flash {
		height: 150px;
		text-align: center;
	}
	
	li.back {
		margin-top: 1.5em;
	}
	li.back a {
		color: #86b33c;
		font-size: 0.9em;
		background: none;
		font-weight: bold;
	}
		li.back a:hover {
			background: none;
		}

#navSub {
	text-align: right;
	font-size: 0.8em;
	margin: 0;
	text-transform: uppercase;
	color: #666;
}
	#navSub a {
		color: #666;
		border-color: #666;
	}

	
/*-------------
	LOGIN 
-------------*/
.printRecipe{
	cursor:pointer;
}
.stbuttontext{
	color:#a6c75c;
	text-transform:uppercase;
	font:bold 9px Verdana,sans-serif;
}
#loginButton{
	height:16px !important;
	width:44px !important;
	border:none !important;
	padding:0 !important;
	float:left !important;
	margin:4px 0 0 80px !important;
	overflow:hidden !important;
	background:black url(../images/design/btn_login_btn.gif) no-repeat;
	display:inline;
}
#loginButton span{
	height:16px !important;
	width:44px !important;
	display:block;
	text-indent:-9999px;
}
#login{
	display:block;
	text-indent:-9999px;
	height:15px;
	width:89px;
	position:absolute;
	bottom:0;
	right:24px;
	background:url(../images/design/btn_login.gif) no-repeat;
	border:none;
	cursor:pointer;
	/*display:none;*/
}
#loginForm{
	height:141px;
	width:202px;
	position:absolute;
	right:120px;
	top:100px;
	z-index:1000 !important;
	background:url(../images/design/login-shadow.png) no-repeat;
	padding: 3px 25px 25px 3px;
	display:none;
}
.loginField{
	width:181px;
	height:14px;
}
.loginLabel{
	width:100%;
	color:#E95D22;
	font-weight:bold;
	font-size:10px;
}
#connectMexican{
	height:20px;
	padding-left:6px;
}
#connectMexican label,
#connectMexican input{
	float:left;
	display:inline;
}
#connectMexican label{
	color:#a1bc52;
	font-weight:bold;
	font-size:9px;
	line-height:18px;
	padding-right:11px;
}
#loginTextFields{
	padding:0 6px 3px 6px;
	background:url(../images/design/login-grad.png) repeat-x;
}
#forgotPW span,
#forgotPW a,
#rememberMeLabel{
	text-decoration:none;
	color:#666;
	font-size:8px;
	border:none;
}
#rememberMeLabel{
	height:12px;
	display:inline-block;
	line-height:12px;
	padding-left:3px;
	float:left;
	vertical-align:text-top;
}
#rememberMe{
	padding:0;
	margin:0;
	float:left;	
}
#search {
	margin-top: 2em;
	margin-left: 20px;
/*	text-align: center;*/
}
	#search p.input input,
	#search p.input select,
	#search p.submit {
		width: 180px;
	}
	#search p.input input {
		width: 170px;
	}
	#search label {
		display: block;
		text-align: left;
		text-transform: lowercase;
		font-weight: bold;
		color: #666666;
		font-size: 11px;
	}
	#search p.submit {
		text-align: right;
	}

#flashPlayer .nav a {
	width: 25px;
	height: 10px;
	float: left;
	margin-right: 5px;
	background-color: #97be4b;
	z-index: 10;
	text-indent: -9999px;
	border: 0;
}
	#flashPlayer .nav a.activeSlide {
		background-color: #f47320;
	}
	#flashPlayer .image {
		text-align: left;
		margin-bottom: 5px;
		height: 133px;
	}
		#flashPlayer .image img {
			height: 133px;
			width: 235px;
		}
		#flashPlayer .image img.clickable {
			cursor: pointer;
		}



/* ----------------
	TYPEOGRAPHY
    ------------- */
.summary p,
h4 {
	font-weight: bold;
	color: #666;
	font-size: 14px;
	text-transform: none;
	margin-top: 1em;
}

h4 {
	margin-bottom: 1em;
}

.editor-button {
	width: 30px;
	height: 30px;
}
	.editor-button a {
		display: block;
		width: 30px;
		height: 30px;
		background-color: #000;
		padding: 0;
	}
	
.extra ul {
	padding-top: 0;
}

a.enterNow {
	font-weight: bold;
	color: #eb5d1f;
	border-color: #eb5d1f;
}

.error_page {
    width: 825px;
    padding: 3em 60px;
}
.error_page h1 {
    margin: 0;
}


/* ----------------
	FORM ELEMENTS
	Label widths are set via jQuery autoWidth, unless you want to set them manually.
    ------------- */
fieldset {clear: both;}
legend {padding: 0 0 1.286em; font-size: 1.167em; font-weight: 700;}
fieldset fieldset legend {padding: 0 0 1.5em; font-size: 1em;}
* html legend {margin-left: -7px;}
*+html legend {margin-left: -7px;}

form .field, form .buttons, form ul.fields li {clear: both; margin: 0 0 1em;}
form .field label, form ul.fields label {display: block; margin-right: 1em;}
form ul.fields { margin: 0; padding: 0; }
form ul.fields li {list-style-type: none;}
form ul.inline li, form ul.inline label {display: inline;}
form ul.inline li {padding: 0 .75em 0 0;}
li.error label {
	color:#BC1212;
	font-weight:bold;
}
input.error {
    border: 1px solid red;
}

input.radio, input.checkbox {margin: 3px; vertical-align: bottom;}
label, button, input.submit, input.image {cursor: pointer;}
* html input.radio, * html input.checkbox {margin: 0; vertical-align: middle;}
*+html input.radio, *+html input.checkbox {margin: 0; vertical-align: middle;}

textarea {overflow: auto;}
input.text, input.password, textarea, select {margin: 0; font: 1em/1.3 Helvetica, Arial, sans-serif; vertical-align: bottom;}
input.text, input.password, textarea {border: 1px solid #444; border-bottom-color: #666; border-right-color: #666; padding: 2px;}

* html button {margin: 0 .34em 0 0;}
*+html button {margin: 0 .34em 0 0;}

form.horizontal .field, form.horizontal ul.fields li {  }
form.horizontal .field label, form.horizontal ul.fields label  { display: inline; float: left; }
/* --------- */

form input {
	padding: 3px;
}
form ul.fields li {
	position: relative;
}
	form ul.fields label.overlap {
		position: absolute;
		top: 3px;
		left: 3px;
		color: #999;
	}

div.errors {
	background: #FEFF9F url(../images/bg_error.gif) 0 0 repeat-x;
	border: 1px solid #E0D75F;
	margin: 1em 0;
	width: 100%;
}
	div.errorsInner {
		padding-left: 80px;
		background: url(../images/big_error.gif) 15px 1em no-repeat;
	}

.message {
	margin: 2.5em 0;
}
	.message p {
		margin: 1em 0;
	}
	.message.notice,
	.message.notice a {
		color: #c64b1d;
	}
	.message.error {
		color: #fff;
		background-color: #ab2828;
		padding: 1em;
	}
		.message.error a {
			color: #fff;
		}
/* -------------------
	Submit Receipt Form
	------------------ */
#submit-recipe-form ul.form {
    font-size: 12px;
    width:275px;
    padding-left:20px;
    padding-right:20px;
    position:relative;
    top:-20px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;		
}

#submit-recipe-form u{
	text-decoration:none;

}

#submit-recipe-form  {
    margin-left:165px;
}

#submit-recipe-form  .formcontent {
    width:320px;
    background:#fff;
}


#submit-recipe-form .clippedheader {
    background:  url(../../images/design_bighit/buttons_headlines.png) no-repeat -440px -418px;
    width:300px;
    height:30px;
}


#submit-recipe-form .form li {
    margin: 0 0 5px 0;
}

#submit-recipe-form .form label {
    font-weight: bold;
    font-size:11px;
    float:left;
    margin-top:2px;
}

#submit-recipe-form .form input, 
#submit-recipe-form .form textarea {
    border:1px solid #969696;
    width: 255px;
    display: block;
    float:left;
    clear:left;
}

#submit-recipe-form .form input.submit {
    border:none;
    width:157px;
    height:26px;
    background:url(../images/design/btn_submit_recipe.gif) no-repeat;
    cursor:pointer;
	margin-top:10px;

}

#submit-recipe-form .checkboxinstructions {
    width:275px;
    position:relative;
    right:0;
    display:inline-block;
	margin-top:5px;
}
#submit-recipe-form .checkboxinstructions input.radio, input.checkbox {
	margin:0 !important;
}
#submit-recipe-form span.instructions {
    float:left;
    clear:left;
    color:#666666;
    font-size: 11px;
}

#submit-recipe-form .hiddenFields {
    display:none;
}

#submit-recipe-form .form .checkbox {
    width: 15px;
    display: inline;
    border:0px;
}

#submit-recipe-form .form .for-checkbox {
    font-weight: normal;
}

#submit-recipe-form .form .submit {
    width: 75px;
}	
		

/* ----------------
	MISC
    ------------- */
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alighRight {text-align: right;}
.alignCenter {text-align: center;}
.clear {clear: both;}


.w-05 { width: 5%; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-66 { width: 66%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-100 { width: 100%; }


/* ----------------
	CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
	add this class to the element that needs to be cleared, or add the element's class or id to the declaration below
    ------------- */ 
.clearFix:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}