/* EZ Grill global CSS */

html, body{ height: 100%; }
body{
 margin: 0;
 padding: 0;
 background: url(images/bg.jpg) top center repeat-x #aeaeae;
 color: #000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
form{ margin: 0; padding: 0; }
img{ border: 0; }
.clear{ clear:both; }
.leftImg{ display: block; position: relative; float: left; }
.pad6{ padding: 6px; }
.pad10{ padding: 10px; }

a{ color: #e00120; text-decoration: none; }
a:hover{ text-decoration: underline; }
h1{
  font-size: 22px;
  font-weight: bold;
  margin: 0px 0px 12px 0px;
  padding: 4px 0px;
  color: #890114;
  border-bottom: 1px solid #b1b1b1;
}
h2{ font-size: 14px; font-weight: bold; margin: 0px 0px 8px 0px; padding: 0px; color: #e00120; }
h3{ font-size: 14px; font-weight: bold; margin: 0px; padding: 0px; }
h4{ font-size: 14px; font-weight: bold; margin: 0px 0px 8px 0px; padding: 0px 0px 4px 0px; border-bottom: 1px solid #aaa; }
h4 span{ font-weight: bold; color: #e00120; }
ul, ol{ margin: 6px 0px 6px 16px; padding: 0px;  }
ul li, ol li{ padding-bottom: 2px; }


/* --- grid containers --- */
.container{ position: relative; width: 1000px; margin: 0px auto; }
.gridThin{ position: relative; width: 256px; }
.gridMid{ position: relative; width: 456px; }
.gridWide{ position: relative; width: 720px; }
.gridFull{ position: relative; width: 984px; margin: 0px auto; padding: 14px 0px; }
.float{ float: left; }
.float8{ float: left; margin-right: 8px; }
.centered{ margin: 0px auto; }
.center{ text-align: center; }
#bgImage{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 640px;
  background: url(images/charflame_bg.jpg) top center no-repeat;
}


/* ----- Header Stuff ----- */
#header{ height: 201px; }
#logo{ position: absolute; top: 42px; left: 22px; display: block; }
#pros{ position: absolute; top: 0px; right: 0px; height: 201px; width: 556px; overflow: hidden;}
.pro{ position: absolute; bottom: 0px; left: 0px; }
.proTxt{ position: absolute; top: -201px; left: 0px; z-index: 2; }
.proImg{ position: absolute; top: 201px; right: 0px; z-index: 1; }
.curProTxt, .curProImg{ top: 0px; }
#promoTrans{
  position: absolute;
  top: 16px;
  right: 60px;
  height: 168px;
  width: 400px;
  opacity: 0.7;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  background: #000;
}
#promoBG{ position: absolute; top: 16px; right: 60px; height: 168px; width: 400px; }
#promoStuff{
  position: absolute;
  top: 26px;
  right: 80px;
  height: 148px;
  width: 360px;
  overflow: hidden;
  color: #fff;
}


/* ----- Nav ----- */
#navbar{
  position: relative;
  height: 38px;
  font-size: 18px;
  font-weight: bold;
  background: url(images/nav_bg.jpg);
  z-index: 10;
}
.navMenu{ position: relative; float: left; height: 32px; margin-top: 6px; }
#navbar a{ color: #fbbf00; padding: 0px 8px; }
#navbar a:hover{ color: #fff; text-decoration: none; }
#home{ font-size: 16px; font-weight: normal; vertical-align: middle; }
a#home span{ visibility: hidden; }
a#home:hover span{ visibility: visible; }
#buynow{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 199px;
  height: 46px;
  background: url(images/buynow.png);
  text-align: center;
}
a#buy{ color: #890114; display: block; float:none; padding: 6px 0px; width: 126px; margin: 0px auto; }
.navDrop{
  display:none;
  position:absolute;
  top:32px;
  left:0px;
  width:124px;
  background: #890114;
  font-size:13px;
  font-weight: bold;
}
#navbar a.drop{ color:#fbbf00; display:block; padding:4px 0px; position:relative; border-bottom: 1px solid #780c1c; }
#navbar a.drop:hover{ background: #fbbf00; color: #890114; text-decoration:none; }
#navbar p{ margin: 0px; padding: 0px 6px; }


/* ----- Main ----- */
#main{ background: #d8d8d8; z-index: 2; }
#breadcrumb{ font-size: 11px; margin-bottom: 10px; }
.vidbox{ margin-bottom: 8px; }
.heading{ display: block; }


/* ----- Right Column ----- */
#accordion{ position: relative; height: 358px; margin-bottom: 8px; overflow: hidden; }
.accHeading{
  position: relative;
  height: 46px;
  background: url(images/accordion_head_bg.jpg) repeat-x;
  cursor: pointer;
}
.accHeading p{ margin: 0px; padding: 12px 8px 0px 8px; font-size: 18px; color: #e00120; }
.accContent{
  position: relative;
  background: #fff;
  height: 175px;
  border-left: 1px solid #8d8c8c;
  border-right: 1px solid #8d8c8c;
  border-bottom: 1px solid #8d8c8c;
  padding: 0px 6px;
  display: none;
  overflow: auto;
}
.accArrow{ display: block; margin-top: 0px; float: right; }
.accItem{
  position: relative;
  background: #dae3da;
  padding: 6px;
  font-size: 11px;
  margin-bottom: 6px;
}
#accordion a{ font-weight: bold; }
.itemdate{ text-align: right; font-style: italic; padding-top: 2px; }
.moreitem{ text-align: right; }

#recipeCard{
  position: relative;
  width: 256px;
  height: 111px;
  background: url(images/recipecard.png);
  overflow: hidden;
  margin-bottom: 10px;
}
#recipeCard a{ color: #000; }
#recPad{ padding: 6px 10px 0px 12px; }
.recHead{ width: 150px; float: left; font-size: 16px; font-weight: bold; color: #e00120; margin-bottom: 6px; }
.recMore{ width: 76px; float: right; font-size: 11px; font-style: italic; }
.recImg{ display: block; float: right; margin: 0px 0px 10px 10px; }
.recTitle{ font-size: 12px; font-weight: bold; margin-bottom: 6px; }
.recAuthor{ font-size: 11px; font-style: italic; }


/* ----- Footer & Bottom Nav ----- */
#footer{ height: 47px; z-index: 10; background: url(images/footer.png); }
#match{
  position: absolute;
  top: -117px;
  left: 0px;
  width: 59px;
  height: 151px;
  background: url(images/match.png);
}
#findStore{
  position: absolute;
  top: -6px;
  left: 630px;
  width: 282px;
  height: 54px;
  background: url(images/findstore.png);
}
#findPad{ position: relative; width: 198px; margin: 8px auto 0px auto; }
#findTxt{ position: relative; float: left; width: 68px; font-size: 16px; color: #890114; }
#findForm{ position: relative; float: right; width: 128px; font-size: 11px; color: #890114; }
#findForm input{ vertical-align: middle; }
input.findzip{ width: 86px; }
#stores{
  position: absolute;
  top: 0px;
  left: 18px;
  font-size: 14px;
  font-weight: bold;
  color: #fbbf00;
}
#stores img{ vertical-align: middle; }
#social{ position: absolute; top: 14px; right: 14px; }
#bottomNav{
  padding: 10px 0px;
  color: #333;
  font-size: 11px;
  line-height: 1.4em;
}
#bottomNav a{ color: #333; }
#bottomNav a.invest{ color: #890114; }
.investor{
  position: relative;
  float: left;
  padding: 0px 12px;
  margin-right: 16px;
  font-weight: bold;
  border-right: 2px solid #666;
}


/* ----- Misc Interior ----- */
.photoArea{ position: relative; width: 432px; height: 274px; margin-bottom: 12px; }
.photoFrame{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 432px;
  height: 274px;
  z-index: 2;
  background: url(images/photo_frame.png);
}
.photoImg{ position: absolute; display: block; top: 3px; left: 3px; }

a.btn{ display: block; background-position: top left; }
a.btn:hover{ background-position: bottom left; }

.formCol{ position: relative; float: left; width: 340px; }
input.txtin, textarea.txtin{ width: 320px; }
input.submitter, a.txtbtn{
  border: 1px solid #eee;
  background: #ba191f;
  color: #fbbf00;
  font-size: 13px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  padding: 4px 8px;
  cursor: pointer;
}
input.submitter:hover, a.txtbtn:hover{ background: #47801f; text-decoration: none; }

.alert{ margin: 10px 0px; background: #aaa; border: 1px solid #333; padding: 4px 0px; color: #e00120; font-weight: bold; text-align: center; }


#testimonials{ margin: 20px 0px; }
.testimo{ position: relative; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #b1b1b1; }
.testimoHead{ font-size: 16px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #b1b1b1; color: #333; }
.testimoTitle{ font-weight: bold; margin-bottom: 2px; }
.testimoTitle span{ color: #890114; }
#addTestimo{
  position: relative;
  border: 1px solid #555;
  background: #aaa;
  padding: 10px;
  margin: 10px 0px;
  display: none;
}


/* ----- Home Page ----- */
#featureArea{ position: relative; width: 456px; height: 254px; margin-bottom: 8px; }
#featureArea img{ display: block; }
#featureSlides{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 450px;
  height: 220px;
  background: url(images/feature_bg.jpg);
  z-index: 1;
}
#featureSlides img { position: absolute; width:450px; height:220px; }
#featureArea .next { display: none; }
#featureFrame{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 456px;
  height: 254px;
  z-index: 2;
  background: url(images/feature_frame.png);
}
#featureNums{ position: absolute; top: 223px; left: 6px; width: 94px; padding-top: 6px; }
#featureNums a{ background: #fff; color: #000; font-size: 11px; font-weight: bold; padding: 1px 4px; }
#featureNums a:hover, #featureNums a.active{ background: #b90f26; color: #fff; text-decoration: none; }
#featureTxt{
  position: absolute;
  top: 230px;
  right: 0px;
  width: 356px;
  font-size: 11px;
  font-weight: bold;
}

#learnMoreBtn{ position: absolute; top: 0px; right: 0px; }

.midBox{ position: relative; width: 456px; margin-bottom: 8px; line-height: 1.4em; }
.midBoxTop{ position: relative; height: 25px; background: url(images/midBox_top.png); }
.midBoxTop p{ margin: 0px; padding: 6px 8px 0px 8px; font-size: 14px; font-weight: bold; color: #fff; }
.midBoxLnk{ width: 80px; float: right; font-size: 11px; padding-top: 6px; }
.midBoxLnk a{ color: #faba12; }
.midBoxMid{ position: relative; padding: 8px; background: url(images/midBox_line.png) repeat-y; }
.midBoxFoot{ position: relative; height: 8px; background: url(images/midBox_foot.png); }
img.callout{ display: block; margin-bottom: 10px; }
div.callout{ position: relative; width: 224px; height: 110px; margin-bottom: 10px; cursor: pointer; font-size: 11px; }

#bundle{ display: block; margin-left: 56px; }
#bundleTxt1{ position: absolute; top: 0px; left: 464px; font-weight: bold; font-style: italic; color: #e00120; }
#bundleTxt2{ position: absolute; top: 0px; left: 532px; width: 180px; font-size: 11px; }
#kcbs{
  position: relative;
  margin: 20px auto 0px auto;
  width: 200px;
  font-size: 13px;
}
.ezbig{ font-size: 15px; font-weight: bold; }
#kcbs img{ float: right; margin: 4px 0px 0px 10px; }


/* ----- EZ Pros ----- */
#prosMenu{ position: relative; padding: 0px 12px 12px 12px; border-right: 1px solid #b1b1b1; }
.proMenu{ position: relative; margin-bottom: 32px; }
#prosMenu img{ display: block; margin-bottom: 4px; border: 1px solid #9f9f9f; }
#prosMenu a{ font-size: 14px; font-weight: bold; text-transform: uppercase; }
#prosContent{ padding: 0px 8px; }
.proCol1{ position: relative; width: 246px; float: left; margin-right: 8px; }
.proCol2{ position: relative; width: 178px; float: left; font-size: 11px; }

/* ----- EZ Products ----- */
.prodCol1{ position: relative; width: 284px; float: left; margin-right: 16px; text-align: right; }
.prodCol2{ position: relative; width: 400px; float: left; }
.prodCol1 a{ margin-left: auto; }
.ezprod{ position: relative; float: left; width: 220px; margin: 0px 20px 30px 0px; font-size: 15px; font-weight: bold; }
.ezprod img{ display: block; }

/* ----- Store ----- */
#storeNav{ float: right; width: 440px; font-size: 13px; font-weight: bold; text-align: right; padding-top: 6px; }
.product{ position: relative; width: 340px; float: left; margin: 0px 20px 20px 0px; }
.prodPad{ background: #bbb; border: 1px solid #999; padding: 10px; }
.prodTitle{ font-size: 14px; font-weight: bold; }
.prodDesc{ margin: 6px 0px; }
.prodPrice{ float: right; font-size: 18px; font-weight: bold; padding: 0px 0px 10px 10px; color: #e00120; }
form.addcart input{ vertical-align: middle; }

table.cartTable{ background: #eee; border: 1px solid #333; border-collapse: collapse; }
table.cartTable th{ background: #333; color: #fff; padding: 3px 0px; }
table.cartTable td{ padding: 4px; border-bottom: 1px solid #999; }
.cartAlt{ background: #d2d2d2; }

.label{ position: relative; float: left; clear: left; width: 90px; margin-bottom: 8px; }
.field{ position: relative; float: left; width: 300px; margin-bottom: 8px; }
.fieldset{ position: relative; width: 410px; }
#verify fieldset, #orderInfo fieldset{ background: #ccc; margin-bottom: 10px; }
#orderInfo{ margin-top: 40px; }
table.payment{ width: 320px; float: left; margin-right: 20px; }
#payNow{ background: #DAE3DA; border: 1px solid #91a891; }
.afterSubmit{ display: none; }

/* ----- Find a Store ----- */
#map_cont{ position: relative; float: right; width: 440px; }
#map_canvas{ height: 400px; width: 440px; }
.store{ position: relative; background: #bbb; border: 1px solid #999; padding: 10px; margin-bottom: 10px; }
img.pin{ float: left; margin-right: 20px; }
.distance{ float: right; font-size: 14px; font-weight: bold; color: #e00120; }
.storeSide{ position: relative; float: right; width: 180px; }
input.zipIn{ font-size: 15px; font-weight: bold; font-family: Arial, sans-serif; padding: 2px 4px; }

/* ----- Recipes ----- */
#recipeCats{ position: relative; margin: 12px 0px; }
#recipeCats a{ display: block; font-size: 11px; color: #000; padding: 2px 0px; font-weight: normal; text-transform: none; }
#recipeCats a:hover{ color: #e00120; text-decoration: none; }
#recipeCats a.recActive{ color: #e00120; }
.recipeCat{ font-size: 14px; font-weight: bold; padding: 4px; border-bottom: 1px solid #b1b1b1; text-transform: uppercase; }
.recipeCat span{ font-weight: normal; color: #e00120; }
.recipeCatHead{ cursor: pointer; }
.recipeCatSub{ display: none; padding: 0px 4px; }

#recipeCardBig{ position: relative; width: 436px; margin-left: 8px; }
#recipeCardTop{
  position: relative;
  width: 436px;
  height: 50px;
  background: url(images/recipeTop.png);
}
#recipeCardMid{
  position: relative;
  width: 436px;
  min-height: 356px;
  height: auto !important;
  height: 356px;
  background: url(images/recipeBG.png);
  font-size: 11px;
  padding-bottom: 1px;
}
#recipeCardMid img{ display: block; float: right; margin: 0px 0px 10px 10px; }
#recipeCardGradient{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 436px;
  height: 356px;
  background: url(images/recipeMid.png);
}
#recipeCardBottom{
  position: relative;
  width: 436px;
  height: 11px;
  background: url(images/recipeBottom.png);
}
.recipeHead{
  position: relative;
  width: 312px;
  float: left;
  font-size: 14px;
  font-weight: bold;
  color: #e00120;
  margin-top: 6px;
}
.recipeHead span{ color: #666; font-size: 11px; font-weight: normal; font-style: italic; }
.recipePad{ position: relative; padding: 0px 12px; }
#recipeBtn{
  position: absolute;
  top: 12px;
  right: 32px;
  width: 68px;
  height: 20px;
  background-image: url(images/btn_recipe.png);
}


/* ----- Fan Feedback ----- */
.fanCol1{ position: relative; width: 366px; float: left; margin-right: 12px; }
.fanCol2{ position: relative; width: 322px; float: left; }
.subbtn{ width: 89px; height: 42px; float: left; margin-right: 8px; }
#mediaBox{ position: relative; border: 1px solid #999; background: #fff; }
#mediaBoxHead{ position: relative; width: 320px; height: 76px; background: url(images/mediabox_head.jpg); }
#mediaBoxTitle{ position: absolute; top: 8px; right: 20px; font-size: 22px; font-weight: bold; color: #e00120; }
#mediaBoxLinks{ position: absolute; bottom: 18px; right: 20px; }
#mediaBoxLinks a{
  color: #333;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  padding: 2px 16px;
  font-weight: bold;
}
#mediaBoxLinks a:hover{ color: #e00120; text-decoration: none; }
#mediaBoxLinks a.mActive{ background: #fff; color: #e00120; }
.mediaBoxContent{ position: relative; padding: 12px; }
#mediaMenu{ margin: 20px 0px 8px 0px; }
#mediaMenu a:hover{ text-decoration: none; }
#mediaBoxVideosWindow, #mediaBoxPhotosWindow{ position: relative; width: 228px; height: 44px; float: left; overflow: hidden; }
#mediaBoxVideosWindow img, #mediaBoxPhotosWindow img{ display: block; float: left; margin-right: 6px; border: 2px solid #fff; }
#mediaBoxVideosWindow img:hover, #mediaBoxPhotosWindow img:hover{ border: 2px solid #e00120; }
#mediaBoxVideoThumbs, #mediaBoxPhotoThumbs{ position: absolute; top: 0px; left: 0px; }
.mediaBoxArrow{
  position: relative;
  width: 32px;
  float: left;
  padding-top: 10px;
  font-size: 20px;
  font-weight: bold;
}