/* mystyle.css by WM Harris 2012 */

/**** This section
 **** borrowed from http://FluidBaselineGrid.com
 **** 2011 Created by Josh Hopkins & 40 Horse
 **** with few modifications (e.g. removing font specs, adding new selectors).
 ****/
/* HTML5 DECLARATIONS */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog, embed {display: block}

body {width: 92%; margin: 0 auto} /* Center page without wrapper */

/* HYPERLINKS */
a {text-decoration: none;}
a:hover {text-decoration: underline}
a:focus {outline: thin dotted}
a:hover, a:active {outline: none} /* Better CSS Outline Suppression */

/* DEFAULT FONT SETTINGS */
/* 16px base font size with 150% (24px) friendly, unitless line height and margin for vertical rhythm */
/* Font-size percentage is based on 16px browser default size */
body, button, input, select, textarea {font-size: 100%; line-height:1.5;} 
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, figure, article, nav, iframe, aside, embed {margin: 0 0 1.5em 0; padding: 0}

/* TYPOGRAPHY */
/* Composed to a scale of 12px, 14px, 16px, 18px, 21px, 24px, 36px, 48px, 60px and 72px */
h0 {margin: 0; font-size: 3.75em; line-height: 1.2em; margin-bottom: 0.4em} /* 60px / 72px */
h1 {margin: 0; font-size: 3em; line-height: 1em; margin-bottom: 0.5em} /* 48px / 48px */
h2 {margin: 0; font-size: 2.25em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 0.6667em} /* 36px / 48px */ 
h3 {margin: 0; font-size: 1.5em; line-height: 1em; margin-bottom: 1em} /* 24px / 24px */
h4 {margin: 0; font-size: 1.3125em; line-height: 1.1428571428571428571428571428571em; margin-bottom: 1.1428571428571428571428571428571em} /* 21px / 24px */
h5,h6 {margin: 0; font-size: 1.125em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 1.3333333333333333333333333333333em} /* 18px / 24px */
p, ul, blockquote, pre, td, th, label {margin: 0; font-size: 1em; line-height: 1.5em; margin-bottom: 1em} /* 16px / 24px */
small, p.small {margin: 0; font-size: 0.875em; line-height: 1.7142857142857142857142857142857em; margin-bottom: 1.7142857142857142857142857142857em} /* 14px / 24px */

/* OTHERS */
strong, b, dt { font-weight: bold}
dfn {font-style: italic}
var, address {font-style: normal}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline} /* Position 'sub' and 'sup' without affecting line-height */
sup {top: -0.5em} /* Move superscripted text up */
sub {bottom: -0.25em} /* Move subscripted text down */

/************** End of borrowing from FluidBaselineGrid *********************/


/* NOTES: ****************************************************************************
 * To maintain "the grid," padding, width, and margins for figure is the same as for
   global nav items. To further unify, the same background color, box-shadow, and border
   radius are used for all.
 * Grid along 256px+1.5em or halve as 128px+.75em.
*/

html {
	background-color: #eed;
}

body {
	font-family: Verdana, Geneva, san-serif;
	background-color: #ffe; 
}

a {
	color: #756212;
}

/* Rules for header & footer *********** 
 * The header and footer both have the same curve-tipped border 
 * with 1px shadow treatment (mirrored). Their bg-color is the same as the
 * html element.
*/

header, footer {
	padding-left: 10px;
	background-color: #eed;
}

header {
	border-bottom: 6px solid #4DA8A0;
	border-bottom-left-radius: 20px;
	margin-bottom: 1.5em;
	box-shadow: 0px 1px 0px #A8974D;
}
	
footer {
	border-top: 6px solid #4DA8A0;
	border-top-right-radius: 20px;
	box-shadow: 0px -1px 0px #A8974D;
}

/* Headings highlighted with 1px blur shadow.
*/
h1, h2, h3, h4, h5, h6 {
	font-family: "Cardo Regular", "Bodoni", "Palatino Linotype", Georgia, serif;
	letter-spacing: .04em;
	font-weight: normal;
	color: #4DA8A1;
	text-shadow: -1px 1px 1px #A8974D;
}	

/* Maintain readable line lengths for lowest-level elements likely to go too
 * long on a wide screen.
*/
p, li, figcaption, address {
	max-width: 60em;
}
	
header p { /* Size like an h6 */
	font-size: 1.125em;
	line-height: 1.3333333333333333333333333333333em;
	margin-bottom: 1.3333333333333333333333333333333em;
}
/* Rules for general page navigation **********
*/

/*
 * Turn each li into an inline-block for flexible horizontal flow
 * and anticipate width+margins based on that of gallery figure images.
*/
nav > ul > li {  
	display: inline-block; 
	width: 266px; /* figures' + gap */
	margin: 0 .5em .75em 0;
	padding: 0;
} 
 
/* At the level of a's within each li, set font, background-color,
 * rounded corners, and blurred shadow. Pad top+bottom within box.
 * Centered horizontally for even left+right spacing.
*/
nav > ul > li a {  
	display: block;  
	font-family: 'MolengoRegular', 'Lucida Grande', sans-serif;
	margin: 0;
	text-align: center;
	padding: 6px 0 6px 0;
	background-color: rgba(219,181,122,.50);
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow:-2px 2px 3px #aaaab9;
}  

/* darken bg-color if hover state
*/
nav > ul > li a:hover, nav > ul > li.selected a:hover {
	background-color: rgba(219,181,122,.80);
}


/* Rules for global navigation (nav class="global") **********
 * If the current page = nav item, should have li class="selected"
*/

/*
 * Turn each li into an inline-block for flexible horizontal flow
 * and anticipate width+margins based on that of gallery figure images.
*/
nav.global > ul > li {  
	width: 128px; /* half of figures' */
	margin: 0 .75em 0 0; /* half of figures' */
} 
 
/* At the level of a's within each li, set font, background-color,
 * rounded corners, and blurred shadow. Pad top+bottom within box.
 * Centered horizontally for even left+right spacing.
*/
nav.global > ul > li a {  
	font-size: 1.5em;
}  

/* Slight change of nav.global colors if current page is "selected"
*/
nav.global > ul > li.selected a {
	background-color: rgb(219,181,122);
}



/* Rules for gallery of figures for detail work page navigation *****
 * Target 256px width
 * Margins, backgrounds, shadows, curved border match that of nav.global items.
 * Turn each figure into an inline block for flexible horizontal flow.
*/

/* Left-pad the figures' nav container a bit, same as footer & header.
*/
body > nav {
	padding-left: 10px;
	padding-right: 10px;
}

/* most properties echoed from nav.global li a's.
*/
nav figure {
	display: inline-block;
	margin: 0 1.5em 1.5em 0;  /* same spacing H and V */
	width: 256px;
	padding: 0px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: rgba(219,181,122,.50);
	box-shadow:-2px 2px 3px #aaaab9;
}

/* Make the whole figure block behave as if interactive
*/
nav figure:hover {
	background-color: rgba(219,181,122,.80);
}
    	
figcaption, aside {
	font-family: 'MolengoRegular', 'Lucida Grande', sans-serif;
	padding: 0 10px;
}

/* Rules for body > article **********************
 * Use float positioning to style dl like 2-column table, with
 * width/margins matching figures'.
*/

/* Left-pad the article container a bit, same as footer & header.
*/
body > article {
	padding-left: 10px;
	padding-right: 10px;
}
/* most properties echoed from nav.global li a's.
*/
figure.box {
	float: left;
	margin: 0 1.5em 1.5em 0;  /* same spacing H and V */
	width: 256px;
	height:256px;
	padding: 0px;
	box-shadow:-2px 2px 3px #aaaab9;
}

/* Match margins to that of figures'
*/
body > article dt, body > article dd {
	margin: 0 1.5em 1.5em 0;  /* same spacing H and V */
}

/* Use float to style dt+dd like a table cells, but wrap as needed.
 * Clear left so dt always start on new line.
*/
body > article dt {
	color: #4DA8A1; /* same as headings */
	width: 256px; /* same as figures' */
	margin-bottom: 0;
	font-weight: normal;
	text-align: right;
	clear: left;
	float: left;
}

/* add a flourish before each dl item
*/
body > article dt:before {
	content: "~ ";
}

/* Use float to style dt+dd like a table cells, but wrap as needed.
*/
body > article dd {
	float: left;
	max-width: 512px;
}

dd p {
	margin-bottom: .5em;
}

/* Don't get pushed by the floaters above. Start new line.
*/
aside, body > article p, body > article figure, footer, section {
 	clear: left;
}

/* Bring left edge of big media in half-a-figure's worth
*/
article.detail iframe, article.detail figure, article.detail embed {
	margin-left: 128px;
	padding-left: .75em;
}

 /* Bring sides of blockquotes in somewhat
 */
 blockquote {
 	padding: 0 40px;
}