/* Directory pages: Canada (allProvinces.aspx), the cities of a province (provinceCities.aspx)
   and the providers in a city (cityDaycares.aspx). Loaded by Classes.DirectoryStyles.Use().
   Everything is scoped to div.dirPage so the older dcDesign.css heading, link and table styles don't leak in.
   Layout: the list on the left, the 160x600 AdSense unit on the right.
   Breakpoints: 980px (tablet: the ad moves below the list) and 600px (phone). */

.dirPage
{
	--plum: #5B2E57;
	--teal: #0F7C80;
	--tealDark: #0B6266;
	--lilac: #F6F1F7;
	--border: #D9CCE0;
	--line: #EEE8F1;
	--text: #3F3F46;
	--muted: #6B6B73;

	padding: 32px 0 48px;
	font-family: verdana, helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
}

.dirPage *,
.dirPage *::before,
.dirPage *::after
{
	box-sizing: border-box;
}

.dirPage a,
.dirPage a:link,
.dirPage a:visited
{
	color: var(--teal);
	text-decoration: none;
}

.dirPage a:hover,
.dirPage a:focus
{
	color: var(--tealDark);
	text-decoration: underline;
}

.dirPage h1,
.dirPage h2,
.dirPage p,
.dirPage ul
{
	margin: 0;
	padding: 0;
}

.dirPage ul
{
	list-style: none;
}

.dirPage h1
{
	font: bold 30px/1.25 verdana, helvetica, sans-serif;
	color: var(--plum);
}

.dirPage .lead
{
	max-width: 780px;
	margin-top: 10px;
	font-size: 15px;
	color: #52525B;
}

.dirPage .card
{
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(91, 46, 87, .06);
}

/* ---------- breadcrumb ---------- */

.dirPage .crumb
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--muted);
}

.dirPage .crumb svg
{
	color: #9A8FA3;
}

/* the current page: a HyperLink with no address renders as a plain <a> */
.dirPage .crumb .here,
.dirPage .crumb a.here:hover
{
	color: var(--muted);
	text-decoration: none;
}

/* ---------- list + ad ---------- */

.dirPage .layout
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 160px;
	gap: 32px;
	align-items: start;
	margin-top: 28px;
}

.dirPage .adRail
{
	width: 160px;
	min-height: 600px;
}

/* ---------- Canada: provinces in two columns ---------- */

.dirPage .provs
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px;
	padding: 8px 28px;
}

.dirPage a.prov
{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 4px;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
}

.dirPage a.prov:hover
{
	text-decoration: none;
}

.dirPage a.prov:hover .nm
{
	text-decoration: underline;
}

.dirPage .prov .abbr
{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--lilac);
	color: var(--plum);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .5px;
}

.dirPage .prov .nm
{
	flex: 1 1 auto;
}

.dirPage .prov svg
{
	flex: 0 0 auto;
}

/* ---------- province: filter, A to Z, cities in columns ---------- */

.dirPage .filter
{
	margin-bottom: 14px;
}

.dirPage .filter label
{
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: bold;
}

.dirPage .filter .box
{
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 420px;
	height: 44px;
	padding: 0 14px;
	background: #ffffff;
	border: 1px solid #C9BCD2;
	border-radius: 8px;
	color: var(--muted);
}

.dirPage .filter .box:focus-within
{
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(15, 124, 128, .15);
}

.dirPage .filter input
{
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	color: var(--text);
}

.dirPage .noMatch
{
	margin-top: 8px;
	color: var(--muted);
}

.dirPage .azbar
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 24px;
	padding: 12px;
}

.dirPage a.az
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #ffffff;
	font-size: 13px;
	font-weight: bold;
}

.dirPage a.az:hover
{
	border-color: var(--teal);
	background: #E7F4F4;
	text-decoration: none;
}

.dirPage .groups
{
	column-count: 4;
	column-gap: 32px;
	padding: 24px 28px;
}

.dirPage .grp
{
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 18px;
}

.dirPage .grp h2
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 4px;
	border-radius: 8px;
	background: var(--lilac);
	font: bold 15px/1 verdana, helvetica, sans-serif;
	color: var(--plum);
	scroll-margin-top: 16px;
}

.dirPage .grp li
{
	padding: 2px 0;
}

/* ---------- city: provider cards, two up ---------- */

.dirPage .listings
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.dirPage .dc
{
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 6px 18px;
	align-content: start;
	padding: 18px 20px;
}

.dirPage .dc .ph a
{
	display: block;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 10px;
	/* house icon for providers with no photo; a photo covers it */
	background: var(--lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9A6C4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center / 32px no-repeat;
}

.dirPage .dc .ph img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.dirPage .dc .info
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.dirPage .dc h2
{
	font: bold 17px/1.35 verdana, helvetica, sans-serif;
}

.dirPage .dc h2 a,
.dirPage .dc h2 a:link,
.dirPage .dc h2 a:visited
{
	color: var(--plum);
}

.dirPage .dc .addr
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
}

.dirPage .dc .desc
{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	font-size: 13px;
	color: #52525B;
}

.dirPage .dc .foot
{
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.dirPage .facts
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dirPage .fact
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--lilac);
	font-size: 12px;
}

.dirPage .fact b
{
	color: var(--plum);
}

.dirPage .fact.open
{
	background: #E7F4F4;
}

.dirPage .fact.open b
{
	color: #0B5F62;
}

.dirPage a.btn,
.dirPage a.btn:link,
.dirPage a.btn:visited
{
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 18px;
	border-radius: 8px;
	background: var(--teal);
	color: #ffffff;
	font-size: 13px;
	font-weight: bold;
	white-space: nowrap;
}

.dirPage a.btn:hover,
.dirPage a.btn:focus
{
	background: var(--tealDark);
	color: #ffffff;
	text-decoration: none;
}

.dirPage .noResults
{
	padding: 24px 28px;
	color: var(--text);
}

/* ---------- tablet ---------- */

@media (max-width: 980px)
{
	.dirPage .layout
	{
		grid-template-columns: minmax(0, 1fr);
	}

	.dirPage .adRail
	{
		margin: 8px auto 0;
	}

	.dirPage .groups
	{
		column-count: 3;
	}

	.dirPage .listings
	{
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- phone ---------- */

@media (max-width: 600px)
{
	.dirPage
	{
		padding: 20px 0 32px;
	}

	.dirPage h1
	{
		font-size: 23px;
	}

	.dirPage .lead
	{
		font-size: 14px;
	}

	.dirPage .layout
	{
		margin-top: 20px;
	}

	.dirPage .provs
	{
		grid-template-columns: minmax(0, 1fr);
		padding: 4px 18px;
	}

	.dirPage .filter .box
	{
		max-width: none;
	}

	/* one scrolling row of letters that stays at the top while the list scrolls */
	.dirPage .azbar
	{
		position: sticky;
		top: 0;
		z-index: 2;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 10px;
	}

	.dirPage a.az
	{
		flex: 0 0 auto;
		min-width: 40px;
		height: 40px;
	}

	.dirPage .grp h2
	{
		scroll-margin-top: 76px;
	}

	.dirPage .groups
	{
		column-count: 2;
		column-gap: 20px;
		padding: 18px;
	}

	.dirPage .dc
	{
		grid-template-columns: 64px minmax(0, 1fr);
		padding: 16px;
	}

	.dirPage .dc .ph a
	{
		width: 64px;
		height: 64px;
	}

	.dirPage a.btn
	{
		align-self: stretch;
	}
}

/* ---------- provider details (daycareDetails.aspx): div.dirPage.dcDetail ----------
   The listing parts are the old table-based user controls (WebUserControls/SummaryDisplays/Listing,
   Inquiry/FormDCRequestInformation), so these rules restyle their tables and classes inside .dcDetail only. */

.dcDetail .dtHead
{
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 22px 24px;
}

.dcDetail .dtPhoto
{
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 12px;
	/* house icon when there's no photo; the photo covers it */
	background: var(--lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9A6C4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center / 44px no-repeat;
}

.dcDetail .dtPhoto img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.dcDetail h1
{
	font-size: 28px;
}

.dcDetail .dtAddr
{
	margin-top: 6px;
	color: #52525B;
}

.dcDetail .dtAddr a
{
	font-weight: bold;
	white-space: nowrap;
}

.dcDetail .dtTitle .facts
{
	margin-top: 10px;
}

.dcDetail .dtActs
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 200px;
}

.dcDetail .dtActs a.btn
{
	align-self: stretch;
	height: 44px;
	font-size: 14px;
}

.dcDetail .dtActs a.btn.ghost,
.dcDetail .dtActs a.btn.ghost:link,
.dcDetail .dtActs a.btn.ghost:visited
{
	background: #ffffff;
	border: 1px solid var(--teal);
	color: var(--teal);
}

.dcDetail .dtActs a.btn.ghost:hover
{
	background: #E7F4F4;
	color: var(--tealDark);
}

/* "edit listing" (DCListingEditListingLink) */
.dcDetail .dtActs div
{
	font-size: 12px;
}

.dcDetail .dtCols
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 24px;
	align-items: start;
	margin-top: 24px;
}

.dcDetail .dtMain,
.dcDetail .dtSide
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.dcDetail .dtCard
{
	padding: 22px 24px;
}

.dcDetail .dtCard table
{
	width: 100%;
	border-collapse: collapse;
}

.dcDetail .dtCard td
{
	padding: 0;
	vertical-align: top;
	text-align: left;
}

/* the old grey heading bars become card headings */
.dcDetail .dtCard td.formHeading
{
	height: auto;
	padding: 0 0 12px;
	background: none;
	font: bold 17px/1.35 verdana, helvetica, sans-serif;
	color: var(--plum);
}

.dcDetail .daycareDescription
{
	font-size: 14px;
	color: var(--text);
	overflow-wrap: anywhere;
}

/* Info: label / value rows */
.dcDetail .dtCard td.formDetail
{
	width: 40%;
	padding: 8px 12px 8px 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
}

.dcDetail .dtCard td.formDetail + td
{
	padding: 8px 0;
	border-top: 1px solid var(--line);
}

.dcDetail .dtCard .formData
{
	font-weight: bold;
	color: var(--text);
}

.dcDetail .dtCard a.formData
{
	color: var(--teal);
}

/* Hours: the inner table's first row is the Open / Close header */
.dcDetail .dtCard table table tr:first-child td
{
	border-top: 0;
	padding-top: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: normal;
}

.dcDetail .dtCard table table td
{
	padding: 7px 12px 7px 0;
	border-top: 1px solid var(--line);
}

.dcDetail .dtCard table table td.formDetail
{
	color: var(--text);
	font-weight: bold;
}

/* Pictures (DataList, 3 across) */
.dcDetail .dtCard td.formData > table td
{
	width: 33%;
	padding: 0 12px 14px 0;
	border: 0;
	font-weight: normal;
}

.dcDetail a.thumbPic
{
	display: block;
	overflow: hidden;
	border: 0;
	border-radius: 10px;
	background: var(--lilac);
}

.dcDetail a.thumbPic img
{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
}

.dcDetail .caption
{
	display: block;
	width: auto !important;
	height: auto !important;
	margin-top: 4px;
	font-size: 12px;
	color: var(--muted);
}

/* Request information form (FormDCRequestInformation, table.reqInfo) */
.dcDetail .dtForm td
{
	padding: 0 0 12px;
	border: 0;
}

.dcDetail .dtForm td.formDetail
{
	width: auto;
	padding: 0 0 12px;
	border: 0;
	color: var(--text);
	font-size: 13px;
	font-weight: bold;
}

.dcDetail .dtForm input[type="text"],
.dcDetail .dtForm textarea
{
	box-sizing: border-box;
	width: 100% !important;
	margin-top: 4px;
	padding: 0 12px;
	border: 1px solid #C9BCD2;
	border-radius: 8px;
	background: #ffffff;
	font: 14px verdana, helvetica, sans-serif;
	color: var(--text);
}

.dcDetail .dtForm input[type="text"]
{
	height: 42px;
}

.dcDetail .dtForm textarea
{
	height: 110px !important;
	padding: 10px 12px;
	resize: vertical;
}

.dcDetail .dtForm input[type="text"]:focus,
.dcDetail .dtForm textarea:focus
{
	outline: 0;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(15, 124, 128, .15);
}

.dcDetail .dtForm .error
{
	font: normal 12px verdana, helvetica, sans-serif;
	color: #B42318;
}

.dcDetail .dtForm input[type="submit"]
{
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: 8px;
	background: var(--teal);
	color: #ffffff;
	font: bold 14px verdana, helvetica, sans-serif;
	text-transform: none;
	cursor: pointer;
}

.dcDetail .dtForm input[type="submit"]:hover
{
	background: var(--tealDark);
}

.dcDetail .dtForm input[type="submit"]:disabled
{
	background: #9CA3AF;
	cursor: default;
}

/* the 300x250 ad (DCListingSponsorLeft) */
.dcDetail .dtAd
{
	padding: 16px;
}

.dcDetail .dtAd td.formHeading
{
	padding: 0 0 8px;
	font: normal 11px verdana, helvetica, sans-serif;
	color: #8A8A93;
	text-align: center;
}

.dcDetail .dtAd td
{
	text-align: center;
	padding-top: 0 !important;
}

/* Basic (free) listings (div.dtBody.basic): no details column, so the form and the ad sit side by side */
.dcDetail .basic .dtCols
{
	grid-template-columns: minmax(0, 1fr);
}

.dcDetail .basic .dtSide
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	align-items: start;
}

.dcDetail .basic .dtForm input[type="submit"]
{
	width: auto;
	padding: 0 28px;
}

@media (max-width: 980px)
{
	.dcDetail .dtCols,
	.dcDetail .basic .dtSide
	{
		grid-template-columns: minmax(0, 1fr);
	}

	.dcDetail .dtHead
	{
		grid-template-columns: 96px minmax(0, 1fr);
	}

	.dcDetail .dtPhoto
	{
		width: 96px;
		height: 96px;
	}

	.dcDetail .dtActs
	{
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.dcDetail .dtActs a.btn
	{
		align-self: auto;
	}
}

@media (max-width: 600px)
{
	.dcDetail h1
	{
		font-size: 21px;
	}

	.dcDetail .dtHead
	{
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;
		padding: 18px;
	}

	.dcDetail .dtPhoto
	{
		width: 72px;
		height: 72px;
		background-size: 32px;
	}

	.dcDetail .dtActs
	{
		flex-direction: column;
		align-items: stretch;
	}

	.dcDetail .dtCard
	{
		padding: 18px;
	}

	.dcDetail .dtCard td.formData > table td
	{
		padding-right: 8px;
	}

	.dcDetail .basic .dtForm input[type="submit"]
	{
		width: 100%;
	}
}

/* picture carousel (daycareDetails.aspx #lb) */
.dcDetail a.thumbPic
{
	cursor: zoom-in;
}

html.lbOpen,
html.lbOpen body
{
	overflow: hidden;
}

.lb
{
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 56px 16px 24px;
	background: rgba(24, 16, 26, .92);
}

.lb[hidden],
.lb button[hidden]
{
	display: none;
}

.lbFig
{
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: 0;
}

.lbImg
{
	display: block;
	max-width: min(1000px, calc(100vw - 160px));
	max-height: calc(100vh - 140px);
	border-radius: 10px;
	background: #ffffff;
}

.lbFig figcaption
{
	margin-top: 12px;
	font: 14px verdana, helvetica, sans-serif;
	color: #ffffff;
	text-align: center;
}

.lbCount
{
	margin-left: 8px;
	color: #C9BCD2;
	font-size: 12px;
}

.lb button
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #ffffff;
	cursor: pointer;
}

.lb button:hover,
.lb button:focus-visible
{
	background: var(--teal);
	outline: 0;
}

.lb .lbClose
{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
}

@media (max-width: 600px)
{
	.lb
	{
		padding: 60px 8px 24px;
	}

	.lbImg
	{
		max-width: calc(100vw - 16px);
		max-height: calc(100vh - 160px);
	}

	/* swipe on a phone; the arrows sit under the picture */
	.lb .lbNav
	{
		position: absolute;
		bottom: 16px;
	}

	.lb .lbPrev
	{
		left: calc(50% - 60px);
	}

	.lb .lbNext
	{
		right: calc(50% - 60px);
	}

	.lbFig
	{
		margin-bottom: 56px;
	}
}

.lb
{
	/* a sideways swipe moves the carousel, not the browser's history */
	touch-action: pan-y;
	overscroll-behavior: contain;
}

/* the thumbnails show captions capitalized (.caption in the old stylesheets) */
.lbCap
{
	text-transform: capitalize;
}

/* map overlay (daycareDetails.aspx #mapLb) */
.mapLb
{
	touch-action: auto;
}

.mapBox
{
	display: flex;
	flex-direction: column;
	width: min(900px, 100%);
	height: min(640px, calc(100vh - 80px));
	overflow: hidden;
	border-radius: 14px;
	background: #ffffff;
}

.mapHead
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 20px;
	border-bottom: 1px solid var(--line);
}

.mapHead h2
{
	flex: 1;
	min-width: 0;
	margin: 0;
	font: bold 16px verdana, helvetica, sans-serif;
	color: var(--plum);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lb .mapClose
{
	width: 40px;
	height: 40px;
	background: var(--lilac);
	color: var(--plum);
}

.lb .mapClose:hover,
.lb .mapClose:focus-visible
{
	background: var(--teal);
	color: #ffffff;
}

.mapFrame
{
	display: block;
	flex: 1;
	width: 100%;
	border: 0;
}

@media (max-width: 600px)
{
	.mapLb
	{
		padding: 12px 8px;
	}

	.mapBox
	{
		height: calc(100vh - 24px);
	}
}

/* the map's listing window (listing.aspx, body.dcPopup): no site header, so the page sets its own background */
body.dcPopup
{
	margin: 0;
	background: #F6F6F7;
}

.dcPopup .dirPage
{
	padding: 16px;
}

.dcPopup .dcDetail .dtCols
{
	margin-top: 16px;
	gap: 16px;
}

.dcPopup .dcDetail .dtMain,
.dcPopup .dcDetail .dtSide
{
	gap: 16px;
}

.dcPopup .dcDetail h1
{
	font-size: 22px;
}

.dcPopup .dcDetail .dtHead
{
	grid-template-columns: 96px minmax(0, 1fr) auto;
	padding: 18px 20px;
}

.dcPopup .dcDetail .dtPhoto
{
	width: 96px;
	height: 96px;
}

@media (max-width: 980px)
{
	.dcPopup .dcDetail .dtHead
	{
		grid-template-columns: 96px minmax(0, 1fr);
	}
}

@media (max-width: 600px)
{
	.dcPopup .dirPage
	{
		padding: 12px;
	}

	.dcPopup .dcDetail .dtHead
	{
		grid-template-columns: 72px minmax(0, 1fr);
		padding: 18px;
	}

	.dcPopup .dcDetail .dtPhoto
	{
		width: 72px;
		height: 72px;
	}
}