@charset "utf-8";
/* ==========================================================================
   DJM Systems - layout / overflow fixes
   --------------------------------------------------------------------------
   The pages are fixed-width (1260px) table layouts. On any screen narrower
   than 1260px the browser had no choice but to show a horizontal scrollbar.

   This file fixes that WITHOUT rewriting the tables: HTML width/height
   attributes are "presentational hints" that sit at the very bottom of the
   CSS cascade, so every rule below overrides them.

   >>> Load this file LAST, after djm.css and font.css. <<<
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sane box model - padding and borders count inside a declared width
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   2. Nothing may push the page wider than the window
   -------------------------------------------------------------------------- */
html,
body {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden; /* safety net for the runs of &nbsp; that cannot wrap */
}


/* --------------------------------------------------------------------------
   3. Fixed-width tables become "up to this wide, never wider than the space"
      Covers every width="1260" / "1160" / "814" / "778" ... in the markup.
   -------------------------------------------------------------------------- */
table {
	max-width: 100%;
}


/* --------------------------------------------------------------------------
   4. Cells shrink instead of forcing a scrollbar
   -------------------------------------------------------------------------- */
td,
th {
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   5. Images scale down with their column and keep their aspect ratio
   -------------------------------------------------------------------------- */
img {
	max-width: 100%;
	height: auto;
}

/* Exception: line.jpg is a 1x3px sliver stretched across the page. With
   height:auto a 100%-wide 1x3 image would compute a gigantic height, so it
   keeps its explicit size. */
img[src$="line.jpg"] {
	width: 100%;
	height: 3px;
}


/* --------------------------------------------------------------------------
   6. Embeds (the Google map on the contact page)
   -------------------------------------------------------------------------- */
iframe {
	max-width: 100%;
}


/* --------------------------------------------------------------------------
   7. The 50px spacer cells collapse to nothing once a table narrows.
      Give them a floor so text never touches the window edge.
   -------------------------------------------------------------------------- */
td[width="50"] {
	min-width: 12px;
}


/* --------------------------------------------------------------------------
   8. Header bar. bg-header.jpg is a 1x52px strip that was tiled. Once the
      nav wraps onto two lines the strip must stretch, not repeat downwards.
   -------------------------------------------------------------------------- */
td[background$="bg-header.jpg"] {
	height: auto;
	background-repeat: repeat-x;
	-webkit-background-size: auto 100%;
	        background-size: auto 100%;
}


/* --------------------------------------------------------------------------
   8c. projects.html intro band.

   project01.jpg has a solid purple strip built into its lower third, and the
   white intro text is meant to sit on it. Cropping the image with "cover"
   throws that strip away and drops white text onto a busy photo, so this one
   image is scaled to the width instead and the matching purple fills
   whatever height is left over.
   -------------------------------------------------------------------------- */
td[background$="project01.jpg"] {
	background-color: #781d7e;
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 100% auto;
	        background-size: 100% auto;
}

.project {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}


/* --------------------------------------------------------------------------
   8b. The rule that actually does the work.

   Below the 1260px design width, drop the hard-coded pixel widths entirely.

   Why the max-width rules above are not enough on their own: nearly every
   one of these tables is nested inside ANOTHER table's cell. A percentage
   max-width resolves against its containing block, but an auto-width table
   CELL sizes itself to the preferred width of its contents - so the cell
   grows to fit the 1260px table it holds, "100%" then evaluates to 1260px,
   and the cap does nothing at all. That is why the site still scrolled
   sideways even with max-width set on every table.

   Removing the width attributes lets the browser size each column from its
   content instead, which is what makes the layout genuinely fluid. Above
   1260px nothing here applies and the site renders exactly as designed.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1259px) {

	/* Give every fixed-width table a DEFINITE percentage width. That is the
	   whole trick: once the table width is definite, auto table layout scales
	   the columns' specified pixel widths down proportionally to fit it. The
	   designed proportions are kept exactly; only the scale changes.

	   Note what is deliberately NOT done here: clearing the cells' width
	   attributes. That sounds like the obvious fix and it is the wrong one -
	   the columns then size themselves from their content instead of the
	   design, so a text column swallows the space and the photo beside it is
	   crushed to a sliver. */
	table[width] {
		width: 100% !important;
	}

	/* Once the nav wraps onto two or three lines the header bar has to grow
	   with it, otherwise the last row of links is cut off by the 52px height
	   the markup asks for. */
	#header td,
	#header2 td {
		height: auto !important;
		padding-top: 9px;
		padding-bottom: 9px;
	}

	/* Keep the two social icons on one line AND at a usable size - the
	   proportional scaling above would otherwise squeeze their 70px column
	   down to about 20px on a phone. */
	#header td[width="70"],
	#header2 td[width="70"] {
		white-space: nowrap;
		min-width: 62px;
	}
}


/* --------------------------------------------------------------------------
   8d. projects.html - the project / scope-of-work pair tables.
   One row per project, so name and description can never drift apart. Below
   700px the pair stacks: project name, then what was done.
   -------------------------------------------------------------------------- */
table.pairs > tbody > tr > td {
	padding-bottom: 6px;
}

table.pairs .pairs_head {
	padding: 34px 0 18px 40px;
}

table.pairs .pairs_name {
	padding-right: 8px;
}

table.pairs .pairs_desc {
	padding-left: 8px;
}

@media screen and (max-width: 700px) {

	table.pairs,
	table.pairs > tbody,
	table.pairs > tbody > tr,
	table.pairs > tbody > tr > td {
		display: block;
		width: 100% !important;
	}

	table.pairs > tbody > tr {
		margin-bottom: 16px;
	}

	table.pairs > tbody > tr > td {
		text-align: left !important;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
	}

	table.pairs .pairs_name {
		font-weight: bold;
	}

	table.pairs .pairs_head {
		padding: 26px 0 14px 0;
	}
}


/* --------------------------------------------------------------------------
   8e. service.html overview grids hold image / label pairs across four
   columns. They read fine down to phone size, so they stack later than the
   rest - at 900px they would break into a scattered single column while
   there is still plenty of room for two.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 620px) {

	table.stack_sm,
	table.stack_sm > tbody,
	table.stack_sm > tbody > tr,
	table.stack_sm > tbody > tr > td {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	table.stack_sm > tbody > tr > td[width="50"] {
		display: none;
	}

	table.stack_sm > tbody > tr > td > img {
		display: block;
		margin: 0 auto 6px auto;
	}
}


/* ==========================================================================
   9. Narrow screens - stack the multi-column rows
   --------------------------------------------------------------------------
   Only tables carrying class="stack" are affected, so the header, footer and
   spacer tables keep behaving exactly as they always have.
   ========================================================================== */
@media screen and (max-width: 900px) {

	table.stack,
	table.stack > tbody,
	table.stack > tbody > tr,
	table.stack > tbody > tr > td {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	/* empty gutter cells are pointless once everything is stacked */
	table.stack > tbody > tr > td[width="50"],
	table.stack > tbody > tr > td[width="30"] {
		display: none;
	}

	/* cell background art was cropped for a 778px-wide column */
	table.stack > tbody > tr > td[background] {
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		        background-size: cover;
	}

	/* keep the projects intro on its purple band rather than cropping to it.
	   The percentage padding resolves against the cell WIDTH, so it tracks
	   the scaled height of the photo above it at any screen size. */
	table.stack > tbody > tr > td[background$="project01.jpg"] {
		background-position: center top;
		-webkit-background-size: 100% auto;
		        background-size: 100% auto;
		padding-top: 22%;
	}

	/* a photo that used to sit beside a text column now centres under it */
	table.stack > tbody > tr > td > img {
		display: block;
		margin: 0 auto;
	}

	/* breathing room down the sides of stacked content */
	table.stack > tbody > tr > td {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* 50px line-height was built for single-line list items; once they wrap
	   it leaves huge gaps */
	.list1,
	.list2 {
		font-size: 18px;
		line-height: 28px;
	}

	.title1,
	.title2,
	.title3 {
		font-size: 24px;
	}

	.project {
		font-size: 15px;
		line-height: 24px;
	}

	/* wrapped nav needs room to breathe */
	#header td,
	#header2 td {
		line-height: 28px;
	}
}


/* --------------------------------------------------------------------------
   10. Phones - drop the "FIND US AT" label so the nav keeps the full width
   -------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {

	/* Hidden with the same specificity as the display:block rule below,
	   otherwise that rule wins and "FIND US AT" reappears. */
	#header > tbody > tr > td.header_find,
	#header2 > tbody > tr > td.header_find {
		display: none;
	}

	/* At phone width the nav needs the whole bar to itself, so the header
	   row becomes blocks and the social icons drop onto their own line
	   underneath rather than being crushed against the right edge. */
	#header,
	#header2,
	#header > tbody,
	#header2 > tbody,
	#header > tbody > tr,
	#header2 > tbody > tr,
	#header > tbody > tr > td,
	#header2 > tbody > tr > td {
		display: block;
		width: 100% !important;
	}

	#header > tbody > tr > td[width="50"],
	#header2 > tbody > tr > td[width="50"] {
		display: none;
	}

	#header > tbody > tr > td,
	#header2 > tbody > tr > td {
		padding-left: 14px;
		padding-right: 14px;
	}

	#header > tbody > tr > td[width="70"],
	#header2 > tbody > tr > td[width="70"] {
		min-width: 0;
		text-align: left !important;
		padding-top: 0;
		padding-bottom: 10px;
	}

	/* The nav items are separated by runs of four &nbsp; in the markup.
	   Non-breaking spaces are "glue": the browser may not break at them, so
	   those runs set a floor on how narrow the nav can get - and on a phone
	   that floor is wider than the screen. Collapsing the cell's font-size
	   to zero removes the runs (they are bare text nodes) and the links get
	   their size back explicitly, with real margins doing the spacing. */
	#header > tbody > tr > td[width="990"],
	#header2 > tbody > tr > td[width="990"] {
		font-size: 0;
	}

	#header .header_text,
	#header2 .header_text {
		font-size: 12px;
		display: inline-block;
		margin: 0 14px 0 0;
	}

	/* The "|" dividers are <span class="header_text"> while the links are
	   <a class="header_text">, so the separators can be dropped on their own.
	   Without this a wrapped line can start with a stray "|". */
	#header span.header_text,
	#header2 span.header_text {
		display: none;
	}

}