/*

Hypsometry.com
By Christopher Boone: http://hypsometry.com/

*/


body {
  padding-bottom: 4.5em;
  
	color: #000;
  background: #fff url("/images/site-wide/page-border-top.png") center 36px no-repeat;
  
	font-size: 100%; /* 16px */
	line-height: 1; /* 16px */
  font-family: "OFL Sorts Mill Goudy TT", "Goudy Bookletter 1911", "GoudyBookletter1911", "Goudy Old Style",
    "Cambria", "Georgia", serif;
}

#everything {
  width: 79em; /* 790px */
  margin: 0 auto; /* centered */
  padding: 0 5em; /* 0, 50px */
  
  background: url("/images/site-wide/page-border-bottom.png") center bottom no-repeat;
  
  font-size: 0.625em; /* 10px */
  line-height: 1; /* 10px */
}


/* Links */

a {
  color: #26217A;
  
  text-decoration: none;
  
  -webkit-transition: color 0.175s;
	-moz-transition: color 0.175s;
	-o-transition: color 0.175s;
	transition: color 0.175s;
}

nav a,
body.portfolio#index section a,
body.portfolio#project article footer a {
  color: inherit;
}

a:focus, a:hover, a:active,
body.portfolio#index section a:focus, body.portfolio#index section a:hover, body.portfolio#index section a:active,
body.portfolio#project article footer a:focus, body.portfolio#project article footer a:hover,
body.portfolio#project article footer a:active {
  color: #ac241f;
}


/* Machine readable headings */

.for-machines {
  display: none;
}


/* Special characters */

.ampersand {
  color: inherit;
  
  font-size: 0.9em; /* 90% = fudge becuause the italic ampersand is bigger than the regular one */
  font-style: italic;
}


/* Printer's mark */

a.printer-mark {
  display: block;
  
  width: 7.2em; /* 72px = 4 lines */
  height: 7.2em; /* 72px */
  margin: 0 auto; /* centered */
  
  background: #fff url("/images/site-wide/hpm-mark-white.png") center top no-repeat;
}

a.printer-mark img {
  -webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s; 
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

a.printer-mark:focus img, a.printer-mark:hover img, a.printer-mark:active img {
  opacity: 0;
}


/* Flourishes */

img.section-border,
img.flourish {
  display: block;
  margin: 0 auto; /* centered */
}

img.section-border.up {
  padding-bottom: 0.6em; /* 6px = 36px (2 lines) - 30px (image height) */
}

img.section-border.down {
  padding-top: 0.6em; /* 6px = 36px (2 lines) - 30px (image height) */
}


/* Site heading */

#everything > header {
  padding-top: 3.6em;
}

header hgroup {
  width: 59em; /* 590px = 6 columns */
  margin: 0 auto; /* centered */
  padding-bottom:  1.8em; /* 18px = 1 line */
  
  text-align: center;
}

body.home hgroup {
  padding-top: 7.2em; /* 72px = 4 lines */
}

header hgroup h1 {
  padding-bottom: 1.8em; /* 18px = 1 line */
}

header hgroup h2,
body.home header hgroup h1 {
  color: #ac241f;
  
  font-family: "GoudyTrajanRegular", "Trajan Pro", "OFL Sorts Mill Goudy TT", "Goudy Bookletter 1911",
    "GoudyBookletter1911", "Goudy Old Style", "Cambria", "Georgia", serif;
  font-size: 7.2em; /* 72px */
  line-height: 1;
  text-transform: uppercase;
}

body.home header hgroup h1 {
  padding-bottom: 0.25em; /* 18px = 1 line */
}

body.home header hgroup h2 {
  padding-bottom: 0.5em; /* 12px = 36px (2 lines) - 24px (line height) &*/
  
  color: inherit;
  
  font-family: inherit;
  font-size: 2.4em; /* 24px */
  line-height: 1;
  font-style: italic;
  text-transform: inherit;
}


/* Table of contents */

nav {
  width: 59em; /* 590px = 6 columns */
  margin: 0 auto; /* centered */
  padding: 1.8em 0 3.6em; /* 18px = 1 line, 0, 36px = 2 lines */
  
  text-align: center;
}

nav img.section-border {
  display: none;
}

body.home nav img.section-border {
  display: block;
}

nav p {
  padding: 0.5em 0; /* 9px = 1/2 line, 0 */
  
  font-size: 1.8em; /* 18px */
  line-height: 1.3333; /* 24px */
  font-style: italic;
}

nav p a {
  font-style: italic;
}

body.portfolio nav p a.portfolio {
  color: #ac241f;
}


/* Content */

body.home article,
body.portfolio article {
  width: 59em; /* 590px = 6 columns */
  margin: 0 auto; /* centered */
  
  text-align: center;
}


/* Home page content */

body.home article img.flourish {
  display: block;
  
  margin: 0 auto; /* centered */
  padding: 0.9em 0 3.1em; /* 9px = 1/2 line, 0, 31px = 72px (4 lines) - 50px (image height) + 9px (1/2 line) */
}

body.home article p {
  width: 27.857143em; /* 390px = 4 columns */
  margin: 0 auto; /* centered */
  padding-bottom: 1.285714em; /* 18px (1 line) */
  
  font-size: 1.4em; /* 14px */
  line-height: 1.285714; /* 18px */
  text-align: justify;
}

body.home article p.pull {
  width: 100%;
  padding-bottom: 1.333333em; /* 24px = 72px (4 lines) - 48px (2 line heights) */
  
  text-align: center;
  font-size: 1.8em; /* 18px */
  line-height: 1.333333; /* 24px */
}

body.home article p.pull.highlight {
  padding-bottom: 0.666667em; /* 12px = 36px (2 lines) - 24px (line height) */
  
  color: #ac241f;
}


/* Portfolio index content */

body.portfolio#index article img.section-border.up {
  padding-bottom: 4.2em; /* 42px = 72px (4 lines) - 30px (image height) */
}

body.portfolio#index article img.section-border.down {
  padding-top: 4.2em; /* 42px = 72px (4 lines) - 30px (image height) */
}

body.portfolio#index article div {
  clear: left;
}

body.portfolio#index article section {
  position: relative;
  float: left;
  
  width: 19em; /* 390px (2 columns) */
  margin-top: 1.8em; /* 18px (1 line) */
}

body.portfolio#index article section.first-column {
  margin-right: 1em;
}

body.portfolio#index article section.third-column {
  float: right;
}

body.portfolio#index article div.first-row section {
  margin-top: 0;
}

body.portfolio#index article section a {
  display: block;
}

body.portfolio#index article section img {
  display: block;
  
  width: 18.8em; /* 188px */
  height: 12.4em; /* 124px */
  border: 0.1em solid #ccc; /* 1px */
}

body.portfolio#index article section img.blur {
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

body.portfolio#index article section a:focus img.blur, body.portfolio#index article section a:hover img.blur,
body.portfolio#index article section a:active img.blur {
  opacity: 0;
}

body.portfolio#index article section h1 {
  padding: 0.5em 0; /* 9px (1/2 line), 0 */
  
  font-size: 1.8em; /* 18px */
  line-height: 1;
}

body.portfolio#index article section h2 {
  font-size: 1.4em; /* 14px */
  line-height: 1.285714; /* 18px */
  font-style: italic;
}


/* Portfolio project content */

body.portfolio#project article header {
  padding-top: 3.6em; /* 36px (2 lines) */
}

body.portfolio#project article header h1 {
  font-family: "GoudyTrajanRegular", "Trajan Pro", "OFL Sorts Mill Goudy TT", "Goudy Bookletter 1911",
    "GoudyBookletter1911", "Goudy Old Style", "Cambria", "Georgia", serif;
  font-size: 3.6em; /* 36px */
  line-height: 1;
  text-transform: uppercase;
}

body.portfolio#project article header img.flourish {
  padding: 0.9em 0 1.3em; /* 9px (1/2 line), 0, 13px = 18px (1 line) - 14px (image height) + 9px (1/2 line) */
}

body.portfolio#project article section {
  padding-bottom: 0.9em; /* 9px (1/2 line); paired with first paragraph top padding */
}

body.portfolio#project article section p {
  width: 27.857143em; /* 390px (4 columns) */
  margin: 0 auto; /* centered */
  
  font-size: 1.4em; /* 14px */
  line-height: 1.285714; /* 18px */
  text-align: justify;
  text-indent: 1em;
}

body.portfolio#project article section p.services + p,
body.portfolio#project article section p.link + p {
  padding-top: 0.642857em; /* 9px (1/2 line); paired with section bottom padding */
  
  text-indent: 0;
}

body.portfolio#project article section p.services {
  font-style: italic;
  text-align: center;
  text-indent: 0;
}

body.portfolio#project #everything article section p.link {
  padding-top: 0;
  
  text-align: center;
}

body.portfolio#project article section img {
  display: block;
  
  margin: 3.6em auto 0; /* 36px (2 lines), centered */
  
  border: 0.1em solid #ccc; /* 1px */
}

body.portfolio#project article section p + img {
  margin-top: 1.8em; /* 18px (1 line) */
}

body.portfolio#project article footer {
  padding: 1.8em 0; /* 18px (1 line), 0 */
}

body.portfolio#project article footer img.flourish {
  padding-bottom: 2em; /* 20px = 54px (3 lines) - 34px (image height) */
}

body.portfolio#project article footer a {
  font-size: 1.8em; /* 18px */
  line-height: 1;
  font-style: italic;
}

body.portfolio#project article footer a img {
  padding: 0 0.222222em; /* 0, 4px */
}