/* ==========================================================================
   SteakandSeafood.com - site stylesheet
   Base layer written 2026-10-11 for SteakandSeafood.com.
   Palette: link blue #059BD8, text grey #666666, panel grey #F6F6F6,
            rule grey #E3E3E3, frame grey #C7C5C8.
   Type:    Georgia serif throughout, 13px body.
   The component layers that follow (mobile, content, charts, logo, search,
   ebook) build on this base.
   ========================================================================== */

/* ---- 1. Page defaults ---------------------------------------------------- */
body{
	margin:0; padding:0;
	font:13px Georgia, "Times New Roman", Times, serif;
	color:#666666; background:#FFFFFF;
	}
img{display:block; margin:0; padding:0; border:0;}
a{color:#059BD8; background-color:#FFFFFF; text-decoration:none; outline:none;}
form, fieldset, legend{margin:0; padding:0; border:0;}
input, textarea, select{font-size:12px; font-family:Georgia, "Times New Roman", Times, serif;}

/* floats and clearing helpers used by the page markup */
.fl_left{float:left;}
.fl_right{float:right;}
.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}

/* framed images (homepage intro photos) */
.imgl, .imgr{padding:5px; border:1px solid #C7C5C8;}
.imgr{float:right; clear:right; margin:0 0 8px 8px;}

/* ---- 2. Tables ----------------------------------------------------------- */
table{width:100%; margin-bottom:15px; border-collapse:collapse; table-layout:auto; vertical-align:top;}
table thead th,
table tbody td{padding:5px; border-collapse:collapse;}
table tbody td{vertical-align:top;}

/* ---- 3. Page bands --------------------------------------------------------
   Every band (header, menu bar, breadcrumb, main area, footer) spans the
   full window with a hairline under it; its contents sit in a centred
   960px column. */
div.wrapper{display:block; width:100%; margin:0; text-align:left; border-bottom:1px solid #E3E3E3;}
div.wrapper.col2{color:#FFFFFF; background-color:#F6F6F6;}   /* the grey menu bar */
div.wrapper.col8{border:0;}                                   /* last band: no rule */
div.wrapper h1, div.wrapper h2, div.wrapper h3,
div.wrapper h4, div.wrapper h5, div.wrapper h6{
	margin:0 0 15px 0; padding:0;
	font-size:20px; font-weight:normal; line-height:normal;
	}

#header, #topbar, #breadcrumb, .container, #footer, #copyright,
#topline, #hpage_cats, #adblock, #socialise{
	position:relative; display:block; width:960px; margin:0 auto;
	}
#header{padding:2px 0 20px 0;}
#header .fl_left{display:block; float:left; margin-top:7px; overflow:hidden;}
#topbar{padding:20px 0; z-index:1000;}
#breadcrumb{padding:20px 0;}
#breadcrumb ul{margin:0; padding:0; list-style:none;}
#breadcrumb ul li{display:inline;}
.container{padding:20px 0;}
#copyright{padding:15px 0;}
#copyright p{margin:0; padding:0;}

/* two-column main area: 630px content, 300px side column */
.content{display:block; float:left; width:630px;}
.column{display:block; float:right; width:300px;}

/* homepage side column: three category teasers */
.column .latestnews{display:block; width:100%; margin:0; padding:0; list-style:none;}
.column .latestnews li{
	display:block; width:100%; height:99px; overflow:hidden;
	margin:0 0 11px 0; padding:0 0 21px 0;
	border-bottom:1px dotted #C7C5C8;
	}
.column .latestnews li.last{margin-bottom:0;}
.column .latestnews img{float:left; clear:left; margin:0 10px 0 0; padding:4px; border:1px solid #C7C5C8;}
.column .latestnews p{display:inline;}

/* ---- 4. Main menu ---------------------------------------------------------
   Uppercase blue links on the grey bar; the current section turns grey.
   Each section can open a dropdown of 170px with a blue edge. */
#topnav{display:block; float:left; width:700px; margin:5px 0 0 0; padding:0; list-style:none;}
#topnav ul,
#topnav li{float:left; margin:0; padding:0; list-style:none;}
#topnav li:hover{position:static;}

#topnav li a:link,
#topnav li a:visited,
#topnav li a:hover{
	display:block; margin:0 35px 0 0; padding:0;
	font-size:14px; text-transform:uppercase;
	color:#059BD8; background-color:#F6F6F6;
	}
#topnav li.last a{margin-right:0;}
#topnav li a:hover,
#topnav ul li.active a{color:#666666; background-color:#F6F6F6;}

/* dropdown panel: parked off-screen until its section is hovered */
#topnav li ul{
	position:absolute; left:-999em; z-index:9999;
	width:170px; height:auto;
	border-left:1px solid #059BD8; border-bottom:1px solid #059BD8;
	}
#topnav li:hover ul,
#topnav li li:hover ul{left:auto;}
#topnav li ul a{width:140px;}
#topnav li li a:link,
#topnav li li a:visited{
	float:none; width:150px; margin:0; padding:7px 10px;
	font-size:12px; font-weight:normal;
	color:#059BD8; background-color:#F6F6F6;
	}
#topnav ul ul li a:link,
#topnav ul ul li a:visited{border:0;}
#topnav li li a:hover{color:#FFFFFF; background-color:#059BD8;}

/* ---- 5. Homepage photo slider ---------------------------------------------
   Markup is generated by the GalleryView script (.gallery, .panel,
   .filmstrip, .frame, .pointer); these rules give it the site look. */
#featured_slide{
	display:block; width:630px; height:385px; overflow:hidden;
	margin:0; padding:0;
	font-family:Georgia, "Times New Roman", Times, serif;
	}
#featured_slide a, #featured_slide ul, #featured_slide img{
	margin:0; padding:0; border:0; outline:none; list-style:none; text-decoration:none;
	}
#featured_slide ul{margin:15px 0 0 0;}
#featured_slide h1, #featured_slide h2, #featured_slide h3,
#featured_slide h4, #featured_slide h5, #featured_slide h6,
#featured_slide p{margin:0 0 4px 0; padding:0; font-size:20px; font-weight:normal; line-height:normal;}

.gallery{padding:15px; color:#000000; background:#EFEFEF;}
.loader{background:url("../images/galleryviewthemes/loader.gif") no-repeat center center;}
.panel .panel-overlay,
.panel .overlay-background{height:60px; padding:10px;}
.panel .overlay-background{background:#222222;}
.panel .panel-overlay{font-size:0.7em; color:#FFFFFF;}
.filmstrip{margin:15px 0 0 0; padding:0;}
.filmstrip .img_wrap{margin:0; padding:0;}
.frame .img_wrap{border:1px solid #AAAAAA;}
.frame.current .img_wrap{border-color:#000000;}
.frame img{border:0;}
.pointer{border-color:#000000;}

/* ------------------------------------------------------------------
   Responsive / mobile layer  -  added 2026-09-09
   The template was built at a fixed 960px with no media queries.
   These rules relax the fixed widths only; colours, type and the
   desktop appearance above 1000px are unchanged.
   ------------------------------------------------------------------ */

img{max-width:100%; height:auto;}

#header, #topline, #topbar, #breadcrumb, .container, #adblock, #socialise, #footer, #copyright{
	width:auto;
	max-width:960px;
	padding-left:15px;
	padding-right:15px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	}

#featured_slide{max-width:100%; overflow:hidden;}

@media screen and (max-width:1000px){
	.content{width:64%;}
	.column{width:33%;}
	.column .holder, .column #featured, .column #featured li, .column .subnav{width:auto; max-width:100%;}
	#topnav{width:auto;}
	#topnav li a:link, #topnav li a:visited, #topnav li a:hover{margin-right:22px;}
	}

@media screen and (max-width:860px){
	.content, .column, #header .fl_left, #header .fl_right,
	.column .holder, .column #featured, #topbar #search{
		float:none;
		width:auto;
		max-width:100%;
		}
	#header .fl_right{margin-top:12px;}
	#featured_slide{width:auto; height:auto;}
	br.clear{margin-top:0;}

	/* the dropdown is hover-only, which is unreachable on touch: show it inline */
	#topnav{float:none; width:auto; margin:0;}
	#topnav ul, #topnav li{float:none;}
	#topnav li ul{position:static; left:auto; width:auto; border:none;}
	#topnav li ul a, #topnav li li a:link, #topnav li li a:visited{width:auto;}
	#topnav li ul ul{margin:0;}
	#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
		margin:0;
		padding:11px 0;
		border-bottom:1px solid #E4E4E4;
		}
	#topnav li li a:link, #topnav li li a:visited{padding-left:20px;}

	#topline ul, #topline p{float:none;}
	#topline li{display:inline-block; margin-bottom:4px;}
	.column .latestnews li, .column .latestnews li.last{width:auto;}
	#copyright p.fl_left, #copyright p.fl_right{float:none; text-align:left;}
	#copyright p.fl_right{margin-top:6px;}
	}

@media screen and (max-width:520px){
	body{font-size:15px; line-height:1.55;}
	#header h1, #header h1 a{font-size:26px;}
	.section h3{font-size:20px;}
	.section ul li, .section p{line-height:1.6;}
	#breadcrumb{padding:12px 0;}
	.container{padding:12px 0;}
	}

/* tap targets and keyboard focus */
#topnav a, #topline a, #breadcrumb a{min-height:24px;}
a:focus{outline:2px solid #059BD8; outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
	*{animation:none !important; transition:none !important;}
	}

/* ------------------------------------------------------------------
   Content layer  -  added 2026-10-08 (recipes, guides, AdSense build)
   The site name moved from <h1> to <div class="sitename"> so each
   page can carry its own descriptive <h1>; it is styled identically.
   ------------------------------------------------------------------ */

#header .sitename{margin:0; padding:0; line-height:normal;}
#header .sitename a{font-size:46px; color:#999999; background-color:#FFFFFF;}
#header .sitename strong{font-weight:normal; color:#059BD8; background-color:#FFFFFF;}

.section.recipe, .section.article, .section.home-intro{max-width:720px; font-size:14px; line-height:1.65;}
.section.recipe p, .section.article p, .section.home-intro p{margin:0 0 14px 0;}
div.wrapper .section h1{font-size:28px; color:#555555; margin:0 0 10px 0; line-height:1.25;}
div.wrapper .section h2{font-size:21px; color:#444444; margin:30px 0 12px 0; padding:0 0 6px 0; border-bottom:1px dotted #CCCCCC;}
div.wrapper .section h2 a{color:#444444;}
div.wrapper .section h3{font-size:16px; color:#444444; margin:16px 0 6px 0;}

.recipe-summary{font-size:16px; font-style:italic; color:#555555;}
.recipe-photo{margin:6px 0 18px 0; padding:5px; border:1px solid #C7C5C8;}
.imgr{background-color:#FFFFFF;}

ul.recipe-meta{display:flex; flex-wrap:wrap; list-style:none; margin:0 0 14px 0; padding:12px 0; border-top:1px solid #E3E3E3; border-bottom:1px solid #E3E3E3;}
ul.recipe-meta li{margin:0 28px 6px 0; color:#444444;}
ul.recipe-meta li span{display:block; font-size:12px; color:#999999;}
.jumplinks{font-size:13px; color:#999999;}

ul.ingredients{margin:0 0 10px 0; padding-left:22px;}
ul.ingredients li{margin-bottom:4px;}
ol.steps{margin:0; padding-left:24px;}
ol.steps li{margin-bottom:12px; padding-left:4px;}
ol.steps li strong{color:#444444;}
ul.tips, ul.related{padding-left:22px;}
ul.tips li, ul.related li{margin-bottom:6px;}

dl.faq, dl.cuts, dl.methods{margin:0;}
dl.faq dt, dl.cuts dt, dl.methods dt{margin:14px 0 2px 0; font-weight:bold; color:#444444;}
dl.faq dd, dl.cuts dd, dl.methods dd{margin:0;}

ul.recipe-cards{list-style:none; margin:0; padding:0;}
ul.recipe-cards li{padding:12px 0; border-bottom:1px dotted #CCCCCC;}
ul.recipe-cards li a{font-size:17px;}
ul.recipe-cards .facts{display:block; margin:2px 0 4px 0; font-size:12px; color:#999999;}
ul.recipe-cards p{margin:0;}

.tablewrap{overflow-x:auto; margin:0 0 14px 0;}
table.chart{width:100%; border-collapse:collapse; font-size:14px;}
table.chart th, table.chart td{padding:7px 10px; border:1px solid #E3E3E3; text-align:left; vertical-align:top;}
table.chart th{font-weight:normal; color:#444444; background-color:#F6F6F6;}
.note, .backlinks{font-size:13px; color:#888888;}

@media screen and (max-width:520px){
	/* the 09-09 layer set these to 12px 0, which dropped the 15px side gutter on phones */
	#breadcrumb{padding:12px 15px;}
	.container{padding:12px 15px;}
	#header .sitename a{font-size:26px;}
	div.wrapper .section h1{font-size:23px;}
	div.wrapper .section h2{font-size:19px;}
	.section.recipe, .section.article, .section.home-intro{font-size:15px;}
	ul.recipe-meta li{margin-right:20px;}
	}

@media print{
	.col0, .col2, #breadcrumb, .col8, .jumplinks, .related, .backlinks, .adsbygoogle{display:none !important;}
	div.wrapper{border:none;}
	body, .section.recipe{color:#000000; font-size:12pt;}
	.recipe-photo{max-width:320px;}
	a{color:#000000; text-decoration:none;}
	}

/* ---- Charts layer - added 2026-10-08 (cooking times, doneness, beef cuts, fish) ---- */
.chartbox{margin:6px 0 20px 0; padding:10px; border:1px solid #E3E3E3;}
.chart-svg{display:block; width:100%; height:auto;}
.chart-svg a .cut:hover, .chart-svg a:focus .cut{opacity:0.82;}
.table-sub{color:#666666;}
table.times td:first-child{white-space:nowrap; color:#444444;}
.timecalc{margin:10px 0 24px 0; padding:4px 18px 10px 18px; border:1px solid #059BD8; background-color:#F5FAFD;}
.timecalc a{background-color:transparent;}
.tc-row{margin:0 0 10px 0;}
.tc-row label{display:inline-block; min-width:170px; color:#444444;}
.tc-row select{font-size:14px; padding:4px; max-width:100%;}
dl.tc-result{margin:6px 0 10px 0; overflow:hidden;}
dl.tc-result dt{float:left; clear:left; width:44%; margin:0 0 6px 0; color:#666666;}
dl.tc-result dd{margin:0 0 6px 46%; color:#222222; font-size:16px;}
.tc-heat, .tc-temp{font-size:13px; color:#666666;}
.chartnav, .timelink{padding:10px 0 0 0; border-top:1px dotted #CCCCCC;}
@media screen and (max-width:520px){
	table.times td:first-child{white-space:normal;}
	dl.tc-result dt{float:none; width:auto; margin:0;}
	dl.tc-result dd{margin:0 0 8px 0;}
	}
@media print{
	.timecalc, .chartnav{display:none !important;}
	}

/* ---- Recipe photos layer - added 2026-10-08 ---- */
.recipe-photo{-webkit-box-sizing:border-box; box-sizing:border-box;}
ul.recipe-cards li.has-thumb{overflow:hidden;}
ul.recipe-cards img.card-thumb{float:left; width:96px; height:96px; margin:3px 14px 4px 0; padding:2px; border:1px solid #E3E3E3;}
@media screen and (max-width:520px){
	ul.recipe-cards img.card-thumb{width:72px; height:72px; margin-right:10px;}
	}

/* ---- Navigation layer - added 2026-10-08 ----
   The grey #topline bar repeated the main menu and was removed from every page.
   On phones the main menu wraps into compact rows instead of a long stacked list;
   the sub-menus are hidden there (every sub-page is linked from Recipes and Cooking Guide). */
@media screen and (max-width:520px){
	#topbar{padding-top:10px; padding-bottom:6px;}
	#topnav ul{text-align:left;}
	#topnav ul li{display:inline-block; float:none; margin:0 0 6px 0;}
	#topnav li a:link, #topnav li a:visited, #topnav li a:hover{display:inline-block; margin:0 16px 0 0; padding:6px 0; border:none;}
	#topnav li ul, #topnav li:hover ul{display:none;}
	}

/* header spacing after removing the grey #topline bar; homepage slider hidden on phones,
   where its script-fixed 600px width overflowed the screen (the category tiles still show) */
#header{padding-top:26px;}
@media screen and (max-width:520px){
	#header{padding-top:14px;}
	#featured_slide{display:none;}
	}

/* ---- Recipe credit line - added 2026-10-08 (family recipe book) ---- */
.credit{margin:-6px 0 14px 0; font-size:14px; color:#059BD8;}

/* ---- Logo mark - added 2026-10-10: S&S fork icon to the left of the wordmark ---- */
#header .sitename a{display:inline-block; white-space:nowrap;}
#header .sitename .logo-mark{display:inline-block; width:56px; height:56px; margin:0 14px 0 0; vertical-align:-10px; border:none; background:transparent;}
/* the template sets img{display:block} globally (line ~364); the mark must stay inline beside the text */
@media screen and (max-width:520px){
	#header .sitename .logo-mark{width:34px; height:34px; margin-right:9px; vertical-align:-6px;}
	}

/* ---- Site logo (Option B lockup) and search page - added 2026-10-11 ---- */
#header{padding-top:18px; padding-bottom:16px;}
#header .sitename a{display:inline-block; line-height:0;}
#header .sitename img.site-logo{display:block; height:92px; width:auto; max-width:100%; border:none;}
#header .fl_left{margin-top:0;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.site-search{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 8px 0;}
.site-search input{flex:1 1 260px; font-size:17px; padding:10px 12px; border:1px solid #CCCCCC; border-radius:4px; font-family:inherit;}
.site-search button{font-size:16px; padding:10px 18px; border:1px solid #059BD8; background:#059BD8; color:#FFFFFF; border-radius:4px; cursor:pointer; font-family:inherit;}
.site-search .voice-btn{background:#FFFFFF; color:#059BD8;}
.search-status{color:#666666; margin:6px 0 14px 0;}
.search-data{margin-top:24px; font-size:13px; color:#888888;}
@media screen and (max-width:520px){
	#header{padding-top:10px; padding-bottom:8px;}
	#header .sitename img.site-logo{height:54px;}
	}

/* ---- Header search box and What Can I Make? page - added 2026-10-11 ---- */
#header .header-search{float:right; margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; max-width:440px;}
#header .header-search input{width:230px; font-size:15px; padding:8px 10px; border:1px solid #CCCCCC; border-radius:4px; font-family:inherit;}
#header .header-search button{font-size:14px; padding:8px 14px; border:1px solid #059BD8; background:#059BD8; color:#FFFFFF; border-radius:4px; cursor:pointer; font-family:inherit;}
#header .header-search .header-pantry{flex-basis:100%; text-align:right; font-size:14px; color:#059BD8;}
.pantry-chips{list-style:none; margin:4px 0 10px 0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.pantry-chips li{background:#E8F5FB; color:#035F86; border:1px solid #B9E1F2; border-radius:16px; padding:4px 6px 4px 12px; font-size:15px;}
.pantry-chips button{border:none; background:transparent; color:#035F86; font-size:17px; cursor:pointer; padding:0 4px;}
.pantry-opts{font-size:14px; color:#555555;}
.pantry-miss{display:block; font-size:13px; color:#8A5A00; margin-top:3px;}
.pantry-ok{display:block; font-size:13px; color:#2E7D32; margin-top:3px; font-weight:bold;}
@media screen and (max-width:760px){
	#header .header-search{float:none; clear:both; margin-top:12px; max-width:none;}
	#header .header-search input{flex:1 1 160px; width:auto;}
	#header .header-search .header-pantry{text-align:left;}
	}

/* result cards: contain the floated thumbnail so short cards do not step to the right */
#pantry-results li, #search-results li{overflow:hidden; clear:both;}

/* ---- Pizza ebook promo on Pasta and Pizza - added 2026-10-11 ---- */
.ebook-promo{display:flex; gap:18px; align-items:flex-start; margin:22px 0 26px 0; padding:16px 18px; border:1px solid #B9E1F2; background:#F2FAFD; border-radius:6px;}
.ebook-promo img{display:block; width:85px; height:150px; max-width:none; border:1px solid #DDDDDD; flex:0 0 auto;}
.ebook-promo h2{margin:0 0 6px 0; font-size:19px;}
.ebook-promo p{margin:0 0 8px 0;}
.ebook-promo .ebook-btn{display:inline-block; padding:7px 14px; background:#059BD8; color:#FFFFFF; border-radius:4px; text-decoration:none;}
@media screen and (max-width:520px){ .ebook-promo{flex-direction:column;} }

/* ---- Menus: two-column Recipes dropdown, tap to open - added 2026-10-11 ----
   Desktop: hover (or keyboard focus) opens a dropdown as before; the Recipes
   list is laid out in two columns, read top to bottom.
   Touch screens and phones: the first tap opens the dropdown (class "open"
   set by the small script after the menu); a second tap follows the link. */
#topnav li ul.cols2{width:340px; column-count:2; column-gap:0;}
#topnav li ul.cols2 li{float:none; display:block; break-inside:avoid; -webkit-column-break-inside:avoid;}
#topnav li.open > ul,
#topnav li:focus-within > ul{left:auto;}
@media screen and (max-width:520px){
	#topnav li.open > ul{display:block; left:0; right:0; width:auto; border-right:1px solid #059BD8;}
	#topnav li.open > ul.cols2{width:auto;}
	#topnav li.open > ul li a:link,
	#topnav li.open > ul li a:visited{display:block; width:auto; margin:0; padding:9px 10px; font-size:14px;}
	}