/*
	style_global.css
	Stylesheet for panyaclarkespinal.com
	
	Copyright (c) 2011 Gordon Hicks, all rights reserved	
*/	


/* General */

	div {
		position: relative;
		margin: 0;
		padding: 0;
	}

	img {
		position: relative;
		display: block;
		border: 0;
		margin: 0;
		padding: 0;
	}

	ul {
		position: relative;
		margin: 0;
		padding: 0;
		text-indent: 0;
		list-style: none;
	}

	li {
		position: relative;
		margin: 0;
		padding: 0;
	}

	form {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
	}

	object,
	embed,
	iframe {
		position: relative;
		margin: 0;
		padding: 0;
	}


/* Typeface */

	body,
	input,
	textarea {
		font-family: Verdana,sans-serif;
		font-size: 12px;
		line-height: 19px;
		color: #181d1f; /* cool black L=10  */
		text-align: left;
	}

	p {
		position: relative;
		margin: 0 0 10px 0;
	}

	img {
		text-align: left;
		font-size: 10px;
		line-height: 15px;
		background-color: #f0f2f2; /* very light grey L=95 */
		color: #a6acaf; /* grey L=70 */
	}

	em {
		font-style: italic;
		font-weight: normal;
	}

	strong {
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
		text-transform: uppercase;
	}
	
	cite {
		font-style: italic;
		font-weight: normal;
	}

	em cite {
		font-style: normal;
		font-weight: normal;
	}


/* headings */

	h1, h2, h3, h4 {
		margin: 0;
		padding: 0;
		font-size: 12px;
		line-height: 19px;
		font-weight: bold;
		color: #181d1f; /* cool black L=10  */
	}

	h1 {} /* see #logo */

	h2 {
		font-size: 15px;
		line-height: 21px;
		font-weight: normal;
		margin-bottom: 19px;
	}



/* Links */

	a {
		cursor: pointer;
		text-decoration: none;
	}

	a:link,
	a:visited {
		color: #181d1f; /* cool black L=10  */
	}
	
	a:hover,
	a:active {
		color: #e62000; /* warm red L=50  */
	}

	a:focus {
		outline: none;
	}


/* Form */

	form {
		background-color: #f0f2f2; /* very light grey L=95 */
	}

	input {
		background-color: #f5f7f7; /* very light grey L=97 */
		border: 1px solid #c3c6c7; /* very light grey L=80 */
	}

	textarea {
		background-color: #f5f7f7; /* very light grey L=97 */
		border: 1px solid #c3c6c7; /* very light grey L=80 */
	}

	label {
		font-size: 11px;
		line-height: 22px;
		text-transform: uppercase;
		color: #5a5f61; /* grey L=40 */
	}


/* End (ensures floated layouts fill their enclosing container) */

	.end { 
		clear: both;
		border-bottom: solid 1px white;
		/* border-bottom: dashed 1px #7ce1ed;  dashed blue */
	}

/* Page Structure */

	html,
	body  {
		margin: 0;
		padding: 0;
		background-color: white;
	}

	.page {
		width: 1050px;
		margin: 0 auto;
	}

	.header {
		width: 100%;
		height: 93px;
		margin-top: 32px;
	}

	.footer {
		width: 100%;
		height: 30px;
		clear: both;
		margin-top: 50px;
	}

	.content {
		min-height: 400px;
	}

/* Logo (Panya Clark Espinal) */

	#logo {
		display: block;
		position: relative;
		width: 212px;
		height: 27px;
		margin-left: 16px; 
	}

	#logo a,
	#logo a.animate span {
		display: block;
		position: absolute;
		width: 212px;
		height: 27px;
		background-image: url(../img/global/nav_retina.png); /* Panya Clark Espinal */
		background-size: 510px 290px;
		background-repeat: no-repeat;
		background-color: white;
	}

	#logo a.animate { background: none; }


	#logo a:link,
	#logo a:visited,
	#logo a.animate span.normal {
		background-position: -1px -4px; /* black */
	}
	
	#logo a:hover,
	#logo a:active,
	#logo a.animate span.hot {
		background-position: -251px -4px; /* red */
	}
	
	#logo em { visibility: hidden; }


/* Main Nav */

	.main-nav {
		display: block;
		width: 922px;
		height: 16px;
		margin: 9px 0 0 15px;
	}

	.main-nav li {
		display: block;
		float: left;
		height: 16px;
		margin-right: 19px;
		overflow: hidden;
	}

	.main-nav a,
	.main-nav a.animate span {
		position: absolute;
		width: 100%;
		height: 16px;
		background-image: url(../img/global/nav_retina.png); /* nav sprites */
		background-size: 510px 290px;
		background-repeat: no-repeat;
	}

	.main-nav a.animate { background: none; }

	.main-nav em { visibility: hidden; }

	#main-nav-works { width: 60px; }
	#main-nav-works a:link, #main-nav-works a:visited, #main-nav-works span.normal { background-position: -1px -42px; }
	#main-nav-works a:hover, #main-nav-works a:active, #main-nav-works span.hot,
	#main-nav-works a.here, #main-nav-works a.here span.normal { background-position: -251px -42px; }

	#main-nav-publications { width: 112px; }
	#main-nav-publications a:link, #main-nav-publications a:visited, #main-nav-publications span.normal { background-position: -1px -62px; }
	#main-nav-publications a:hover, #main-nav-publications a:active, #main-nav-publications span.hot,
	#main-nav-publications a.here, #main-nav-publications a.here span.normal { background-position: -251px -62px; }

	#main-nav-writing { width: 70px; }
	#main-nav-writing a:link, #main-nav-writing a:visited, #main-nav-writing span.normal { background-position: -1px -82px; }
	#main-nav-writing a:hover, #main-nav-writing a:active, #main-nav-writing span.hot,
	#main-nav-writing a.here, #main-nav-writing a.here span.normal { background-position: -251px -82px; }

	#main-nav-biography { width: 95px; }
	#main-nav-biography a:link, #main-nav-biography a:visited, #main-nav-biography span.normal { background-position: -1px -102px; }
	#main-nav-biography a:hover, #main-nav-biography a:active, #main-nav-biography span.hot,
	#main-nav-biography a.here, #main-nav-biography a.here span.normal { background-position: -251px -102px; }

	#main-nav-contact { width: 81px; }
	#main-nav-contact a:link, #main-nav-contact a:visited, #main-nav-contact span.normal { background-position: -1px -122px; }
	#main-nav-contact a:hover, #main-nav-contact a:active, #main-nav-contact span.hot,
	#main-nav-contact a.here, #main-nav-contact a.here span.normal { background-position: -251px -122px; }

/* Footer Nav */

	.footer-nav {
		display: block;
		height: 14px;
		margin-left: 17px; /* default: left side of page */
	}

	.footer-nav li {
		display: block;
		float: left;
		width: 100px; /* default */
		height: 14px;
		margin-right: 12px;
		overflow: hidden;
	}

	.footer-nav a,
	.footer-nav a.animate span {
		position: absolute;
		width: 100%;
		height: 14px;
		background-image: url(../img/global/nav_retina.png); /* nav sprites */
		background-size: 510px 290px;
		background-repeat: no-repeat;
	}

	.footer-nav a.animate { background: none; }

	.footer-nav em { visibility: hidden; }

	#footer-nav-home { width: 43px; }
	#footer-nav-home a:link, #footer-nav-home a:visited, #footer-nav-home span.normal { background-position: -1px -199px; }
	#footer-nav-home a:hover, #footer-nav-home a:active, #footer-nav-home span.hot,
	#footer-nav-home a.here, #footer-nav-home a.here span.normal { background-position: -251px -199px; }

	#footer-nav-copyright { width: 78px; }
	#footer-nav-copyright a:link, #footer-nav-copyright a:visited, #footer-nav-copyright span.normal { background-position: -1px -214px; }
	#footer-nav-copyright a:hover, #footer-nav-copyright a:active, #footer-nav-copyright span.hot,
	#footer-nav-copyright a.here, #footer-nav-copyright a.here span.normal { background-position: -251px -214px; }

	#footer-nav-credits { width: 56px; }
	#footer-nav-credits a:link, #footer-nav-credits a:visited, #footer-nav-credits span.normal { background-position: -1px -229px; }
	#footer-nav-credits a:hover, #footer-nav-credits a:active, #footer-nav-credits span.hot,
	#footer-nav-credits a.here, #footer-nav-credits a.here span.normal { background-position: -251px -229px; }

	#footer-nav-contact { width: 66px; }
	#footer-nav-contact a:link, #footer-nav-contact a:visited, #footer-nav-contact span.normal { background-position: -1px -244px; }
	#footer-nav-contact a:hover, #footer-nav-contact a:active, #footer-nav-contact span.hot,
	#footer-nav-contact a.here, #footer-nav-contact a.here span.normal { background-position: -251px -244px; }

	#footer-nav-top { width: 44px; display: none; }
	#footer-nav-top a:link, #footer-nav-top a:visited, #footer-nav-top span.normal { background-position: -2px -259px; }
	#footer-nav-top a:hover, #footer-nav-top a:active, #footer-nav-top span.hot,
	#footer-nav-top a.here, #footer-nav-top a.here span.normal { background-position: -252px -259px; }


/* Works Nav */

	.works-nav {
		height: 17px;
		width: 100%;
		margin: 11px 0 17px 16px;
	}

	.works-nav li {
		display: block;
		width: 17px;
		height: 17px;
		float: left;
		overflow: hidden;
	}

	.works-nav a,
	.works-nav a.animate span {
		display: block;
		position: absolute;
		width: 100%;
		height: 17px;
		overflow: hidden;
		background-image: url(../img/global/bullet_retina.png);
		background-size: 17px 200px;
		background-repeat: no-repeat;
	}

	.works-nav a.animate { background: none; }

	.works-nav em { visibility: hidden; }


	.works-nav a:link, .works-nav a:visited, .works-nav span.normal { background-position: 0 0; }
	.works-nav a:hover, .works-nav a:active, .works-nav span.hot,
	.works-nav a.here, .works-nav a.here span.normal { background-position: 0 -100px; }

	.works-nav .prev a:link, .works-nav .prev a:visited, .works-nav .prev span.normal { background-position: 1px -20px; }
	.works-nav .prev a:hover, .works-nav .prev a:active, .works-nav .prev span.hot,
	.works-nav .prev a.here, .works-nav .prev a.here span.normal { background-position: 1px -120px; }

	.works-nav .next a:link, .works-nav .next a:visited, .works-nav .next span.normal { background-position: 0 -40px; }
	.works-nav .next a:hover, .works-nav .next a:active, .works-nav .next span.hot,
	.works-nav .next a.here, .works-nav .next a.here span.normal { background-position: 0 -140px; }

	
	
	/*
	.works-nav .dot { background-position: 0 0; }
	.works-nav .prev { background-position: 0 -20px; margin-left: 2px;}
	.works-nav .next { background-position: 0 -40px; width: 25px; }

	.works-nav .dot a { background-position: 0 -100px; }
	.works-nav .prev a { background-position: 0 -120px; }
	.works-nav .next a { background-position: 0 -140px; width: 25px; }
	*/



/* Bonbons */	

	div.bonbon,
	ul.bonbons li {
		display: block;
		width: 122px;
		height: 122px;
		float: left;
		margin: 0 25px 25px 0;
		background: url(../img/bonbon/bonbon_bg.gif) no-repeat 0 0; /* plain grey circle */
	}

	ul.bonbons li.end {
		height: 0;
		float: none;
		clear: left;
		color: red;
		background: none;
	}


	div.bonbon div,
	ul.bonbons li div { /* holds image */
		width: 122px;
		height: 122px;
		background-position: 0 0;
		background-repeat: no-repeat;
		overflow: hidden;
	}


	div.bonbon a, /* link */
	ul.bonbons li a,
	div.bonbon a.animate span.hot, /* for roll-over using jquery animation */
	ul.bonbons li a.animate  span.hot {
		display: block;
		position: absolute;
		width: 122px;
		height: 122px;
		background-position: -122px 0;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	div.bonbon a.animate,
	ul.bonbons li a.animate { /* supress css roll-over when animated */
		background: none;
	}

	div.bonbon a.animate span.hot,
	ul.bonbons li a.animate  span.hot { /* for roll-over using jquery animation */

	}


	div.bonbon a:link,
	ul.bonbons li a:visited {
		background-image: inherit;
	}

	div.bonbon em,
	ul.bonbons li em {
		visibility: hidden
	}

	/* bonbon images */

	#bonbon-ancestral-patterns div, #bonbon-ancestral-patterns a:hover, #bonbon-ancestral-patterns a:active, #bonbon-ancestral-patterns .hot  { background-image: url(../img/bonbon/bonbon_ancestral_patterns.jpg); }
	#bonbon-between-stories div, #bonbon-between-stories a:hover, #bonbon-between-stories a:active, #bonbon-between-stories .hot  { background-image: url(../img/bonbon/bonbon_between_stories.jpg); }
	#bonbon-building-colour div, #bonbon-building-colour a:hover, #bonbon-building-colour a:active, #bonbon-building-colour .hot  { background-image: url(../img/bonbon/bonbon_building_colour.jpg); }
	#bonbon-drawing-sculptures div, #bonbon-drawing-sculptures a:hover, #bonbon-drawing-sculptures a:active, #bonbon-drawing-sculptures .hot  { background-image: url(../img/bonbon/bonbon_drawing_sculptures.jpg); }
	#bonbon-felted-garments div, #bonbon-felted-garments a:hover, #bonbon-felted-garments a:active, #bonbon-felted-garments .hot  { background-image: url(../img/bonbon/bonbon_felted_garments.jpg); }
	#bonbon-material-redistribution div, #bonbon-material-redistribution a:hover, #bonbon-material-redistribution a:active, #bonbon-material-redistribution .hot  { background-image: url(../img/bonbon/bonbon_material_redistribution.jpg); }
	#bonbon-rawhide-works div, #bonbon-rawhide-works a:hover, #bonbon-rawhide-works a:active, #bonbon-rawhide-works .hot  { background-image: url(../img/bonbon/bonbon_rawhide_works.jpg); }
	#bonbon-spin div, #bonbon-spin a:hover, #bonbon-spin a:active, #bonbon-spin .hot  { background-image: url(../img/bonbon/bonbon_spin.jpg); }
	#bonbon-two-equal-volumes-series-one div, #bonbon-two-equal-volumes-series-one a:hover, #bonbon-two-equal-volumes-series-one a:active, #bonbon-two-equal-volumes-series-one .hot  { background-image: url(../img/bonbon/bonbon_two_equal_volumes_series_one.jpg); }
	#bonbon-two-equal-volumes-series-two div, #bonbon-two-equal-volumes-series-two a:hover, #bonbon-two-equal-volumes-series-two a:active, #bonbon-two-equal-volumes-series-two .hot  { background-image: url(../img/bonbon/bonbon_two_equal_volumes_series_two.jpg); }
	#bonbon-weaving-twenty-twenty div, #bonbon-weaving-twenty-twenty a:hover, #bonbon-weaving-twenty-twenty a:active, #bonbon-weaving-twenty-twenty .hot  { background-image: url(../img/bonbon/bonbon_weaving_twenty_twenty.jpg); }
	#bonbon-weaving-twenty-twenty-one div, #bonbon-weaving-twenty-twenty-one a:hover, #bonbon-weaving-twenty-twenty-one a:active, #bonbon-weaving-twenty-twenty-one .hot  { background-image: url(../img/bonbon/bonbon_weaving_twenty_twenty_one.jpg); }
	#bonbon-wet-felting div, #bonbon-wet-felting a:hover, #bonbon-wet-felting a:active, #bonbon-wet-felting .hot  { background-image: url(../img/bonbon/bonbon_wet_felting.jpg); }


	#bonbon-fibonacci-feedback div, #bonbon-fibonacci-feedback a:hover, #bonbon-fibonacci-feedback a:active, #bonbon-fibonacci-feedback .hot  { background-image: url(../img/bonbon/bonbon_fibonacci_feedback.jpg); }
	#bonbon-toronto-scene-and-unseen div, #bonbon-toronto-scene-and-unseen a:hover, #bonbon-toronto-scene-and-unseen a:active, #bonbon-toronto-scene-and-unseen .hot  { background-image: url(../img/bonbon/bonbon_toronto_scene_and_unseen.jpg); }
	#bonbon-generations div, #bonbon-generations a:hover, #bonbon-generations a:active, #bonbon-generations .hot  { background-image: url(../img/bonbon/bonbon_generations.jpg); }
	#bonbon-meeting div, #bonbon-meeting a:hover, #bonbon-meeting a:active, #bonbon-meeting .hot  { background-image: url(../img/bonbon/bonbon_meeting.jpg); }
	#bonbon-vagabond-vitrine div, #bonbon-vagabond-vitrine a:hover, #bonbon-vagabond-vitrine a:active, #bonbon-vagabond-vitrine .hot  { background-image: url(../img/bonbon/bonbon_vagabond_vitrine.jpg); }
	#bonbon-bubble div, #bonbon-bubble a:hover, #bonbon-bubble a:active, #bonbon-bubble .hot  { background-image: url(../img/bonbon/bonbon_bubble.jpg); }
	#bonbon-sweetspot div, #bonbon-sweetspot a:hover, #bonbon-sweetspot a:active, #bonbon-sweetspot .hot  { background-image: url(../img/bonbon/bonbon_sweetspot.jpg); }
	#bonbon-froebel-house div, #bonbon-froebel-house a:hover, #bonbon-froebel-house a:active, #bonbon-froebel-house .hot  { background-image: url(../img/bonbon/bonbon_froebel_house.jpg); }
	#bonbon-chio-tv-party div, #bonbon-chio-tv-party a:hover, #bonbon-chio-tv-party a:active, #bonbon-chio-tv-party .hot  { background-image: url(../img/bonbon/bonbon_chio_tv_party.jpg); }
	#bonbon-chio-book div, #bonbon-chio-book a:hover, #bonbon-chio-book a:active, #bonbon-chio-book .hot  { background-image: url(../img/bonbon/bonbon_chio_book.jpg); }
	#bonbon-second-occupation div, #bonbon-second-occupation a:hover, #bonbon-second-occupation a:active, #bonbon-second-occupation .hot  { background-image: url(../img/bonbon/bonbon_second_occupation.jpg); }
	#bonbon-froebel-inspired-books div, #bonbon-froebel-inspired-books a:hover, #bonbon-froebel-inspired-books a:active, #bonbon-froebel-inspired-books .hot  { background-image: url(../img/bonbon/bonbon_froebel_inspired_books.jpg); }
	#bonbon-occupational-travel-kit div, #bonbon-occupational-travel-kit a:hover, #bonbon-occupational-travel-kit a:active, #bonbon-occupational-travel-kit .hot  { background-image: url(../img/bonbon/bonbon_occupational_travel_kit.jpg); }
	#bonbon-terrarium-project div, #bonbon-terrarium-project a:hover, #bonbon-terrarium-project a:active, #bonbon-terrarium-project .hot  { background-image: url(../img/bonbon/bonbon_terrarium_project.jpg); }
	#bonbon-first-occupation div, #bonbon-first-occupation a:hover, #bonbon-first-occupation a:active, #bonbon-first-occupation .hot  { background-image: url(../img/bonbon/bonbon_first_occupation.jpg); }
	#bonbon-unknown-kindergartner div, #bonbon-unknown-kindergartner a:hover, #bonbon-unknown-kindergartner a:active, #bonbon-unknown-kindergartner .hot  { background-image: url(../img/bonbon/bonbon_unknown_kindergartner.jpg); }
	#bonbon-manchester-letherium div, #bonbon-manchester-letherium a:hover, #bonbon-manchester-letherium a:active, #bonbon-manchester-letherium .hot  { background-image: url(../img/bonbon/bonbon_manchester_letherium.jpg); }
	#bonbon-jetstream div, #bonbon-jetstream a:hover, #bonbon-jetstream a:active, #bonbon-jetstream .hot  { background-image: url(../img/bonbon/bonbon_jetstream.jpg); }
	#bonbon-jack-pine-remembered div, #bonbon-jack-pine-remembered a:hover, #bonbon-jack-pine-remembered a:active, #bonbon-jack-pine-remembered .hot  { background-image: url(../img/bonbon/bonbon_jack_pine_remembered.jpg); }
	#bonbon-four-men div, #bonbon-four-men a:hover, #bonbon-four-men a:active, #bonbon-four-men .hot  { background-image: url(../img/bonbon/bonbon_four_men.jpg); }
	#bonbon-from-here-right-now div, #bonbon-from-here-right-now a:hover, #bonbon-from-here-right-now a:active, #bonbon-from-here-right-now .hot  { background-image: url(../img/bonbon/bonbon_from_here_right_now.jpg); }
	#bonbon-the-visitor div, #bonbon-the-visitor a:hover, #bonbon-the-visitor a:active, #bonbon-the-visitor .hot  { background-image: url(../img/bonbon/bonbon_the_visitor.jpg); }
	#bonbon-first-snow-tokyo div, #bonbon-first-snow-tokyo a:hover, #bonbon-first-snow-tokyo a:active, #bonbon-first-snow-tokyo .hot  { background-image: url(../img/bonbon/bonbon_first_snow_tokyo.jpg); }
	#bonbon-first-snow div, #bonbon-first-snow a:hover, #bonbon-first-snow a:active, #bonbon-first-snow .hot  { background-image: url(../img/bonbon/bonbon_first_snow.jpg); }
	#bonbon-silence-and-storm div, #bonbon-silence-and-storm a:hover, #bonbon-silence-and-storm a:active, #bonbon-silence-and-storm .hot  { background-image: url(../img/bonbon/bonbon_silence_and_storm.jpg); }
	#bonbon-northern-night div, #bonbon-northern-night a:hover, #bonbon-northern-night a:active, #bonbon-northern-night .hot  { background-image: url(../img/bonbon/bonbon_northern_night.jpg); }
	#bonbon-central-neighbourhood-house div, #bonbon-central-neighbourhood-house a:hover, #bonbon-central-neighbourhood-house a:active, #bonbon-central-neighbourhood-house .hot  { background-image: url(../img/bonbon/bonbon_central_neighbourhood_house.jpg); }
	#bonbon-captured-and-escaped div, #bonbon-captured-and-escaped a:hover, #bonbon-captured-and-escaped a:active, #bonbon-captured-and-escaped .hot  { background-image: url(../img/bonbon/bonbon_captured_and_escaped.jpg); }
	#bonbon-at-this-point div, #bonbon-at-this-point a:hover, #bonbon-at-this-point a:active, #bonbon-at-this-point .hot  { background-image: url(../img/bonbon/bonbon_at_this_point.jpg); }
	#bonbon-covenant-house div, #bonbon-covenant-house a:hover, #bonbon-covenant-house a:active, #bonbon-covenant-house .hot  { background-image: url(../img/bonbon/bonbon_covenant_house.jpg); }
	#bonbon-like-ancient-pots div, #bonbon-like-ancient-pots a:hover, #bonbon-like-ancient-pots a:active, #bonbon-like-ancient-pots .hot  { background-image: url(../img/bonbon/bonbon_like_ancient_pots.jpg); }
	#bonbon-re-appearances div, #bonbon-re-appearances a:hover, #bonbon-re-appearances a:active, #bonbon-re-appearances .hot  { background-image: url(../img/bonbon/bonbon_re_appearances.jpg); }
	#bonbon-nature-of-giving div, #bonbon-nature-of-giving a:hover, #bonbon-nature-of-giving a:active, #bonbon-nature-of-giving .hot  { background-image: url(../img/bonbon/bonbon_nature_of_giving.jpg); }
	#bonbon-punti-di-vista div, #bonbon-punti-di-vista a:hover, #bonbon-punti-di-vista a:active, #bonbon-punti-di-vista .hot  { background-image: url(../img/bonbon/bonbon_punti_di_vista.jpg); }
	#bonbon-aqueduct div, #bonbon-aqueduct a:hover, #bonbon-aqueduct a:active, #bonbon-aqueduct .hot  { background-image: url(../img/bonbon/bonbon_aqueduct.jpg); }
	#bonbon-patterns-of-commitment div, #bonbon-patterns-of-commitment a:hover, #bonbon-patterns-of-commitment a:active, #bonbon-patterns-of-commitment .hot  { background-image: url(../img/bonbon/bonbon_patterns_of_commitment.jpg); }
	#bonbon-collectors-rockefeller div, #bonbon-collectors-rockefeller a:hover, #bonbon-collectors-rockefeller a:active, #bonbon-collectors-rockefeller .hot  { background-image: url(../img/bonbon/bonbon_collectors_rockefeller.jpg); }
	#bonbon-decalog div, #bonbon-decalog a:hover, #bonbon-decalog a:active, #bonbon-decalog .hot  { background-image: url(../img/bonbon/bonbon_decalog.jpg); }
	#bonbon-research-and-discovery div, #bonbon-research-and-discovery a:hover, #bonbon-research-and-discovery a:active, #bonbon-research-and-discovery .hot  { background-image: url(../img/bonbon/bonbon_research_and_discovery.jpg); }
	#bonbon-old-ideas div, #bonbon-old-ideas a:hover, #bonbon-old-ideas a:active, #bonbon-old-ideas .hot  { background-image: url(../img/bonbon/bonbon_old_ideas.jpg); }
	#bonbon-lost-in-the-wood div, #bonbon-lost-in-the-wood a:hover, #bonbon-lost-in-the-wood a:active, #bonbon-lost-in-the-wood .hot  { background-image: url(../img/bonbon/bonbon_lost_in_the_wood.jpg); }


/* Title Area (i.e: Title of Work; contains Title, Category, media, blurb)  */

	.lede {
		margin-bottom: 19px;
	}

	.lede h2 {
		margin-bottom: 5px;
	}

	.lede .category { /* eg: collaborative project, public commission */
		font-size: 11px;
		line-height: 18px;
		text-transform: uppercase;
		margin-bottom: 5px;
	}

	.lede .media {
		line-height: 18px;
	}

	.lede .blurb {
		line-height: 18px;
	}


/* Caption - captions for photos or videos */

	.caption {
		text-align: right;
		font-size: 11px;
		line-height: 15px;
		padding-top: 4px;
		margin-bottom: -1px;
		color: #444748; /* cool black L=30  */
	}



/* Quotation */

	.quote { font-style: italic; }
	.quote em { font-style: normal; }
	.quote cite { font-style: normal; }


/* Attribution */

	.attribution {
		white-space: nowrap;
		font-style: normal;
	}

	.attribution:before { content: "\A0\A0\2014\202F"; } /* non-breaking space, non-breaking space, m-dash, thin space */

	.attribution cite {
		font-style: italic;
	}

/* Lead-in - first part of first paragraph */

	.lead-in {
		font-size: 13px;
		text-transform: uppercase;
		font-style: normal;
	}


/* Link Area */

	ul.links {
		/* font-size: 11px; */
		line-height: 14px;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	ul.links li {
		margin-bottom: 6px;
	}

	ul.links strong {
		font-size: 11px;
		text-transform: uppercase;
		font-weight: normal;
		color: inherit;
	}

	ul.links a,
	a.bullet.animate span {
		padding-left: 14px;
		background-repeat: no-repeat;
		background-image: url(../img/global/bullet_retina.png);
		background-size: 17px 200px;
		background-color: white;
		white-space: nowrap;
	}

	ul.links a.animate {
		padding-left: 0;
		background: none;
	}

	ul.links a:link,
	ul.links a:visited,
	a.bullet.animate span.normal {
		color: #444748; /* cool black L=30  */
		background-position: -4px -61px; /* grey bullet */
	}

	ul.links a:hover,
	ul.links a:active,
	a.bullet.animate span.hot {
		color: #e62000; /* warm red L=50  */
		background-position: -4px -161px; /* red bullet */
	}


	a.bullet.animate span.normal,
	a.bullet.animate span.hot {
		position: absolute;
	}

	a.bullet.animate span.placeholder { /* holds open <a>; needed because .normal and .hot are position:relative */
		position: relative;
	}

/* Bullet link on Form background */

	form a.bullet.animate span {
		padding-left: 17px;
		background-color: #f0f2f2; /* very light grey L=95 */
	}

	form a.bullet.animate span.normal {
		color: #444748; /* dark grey L=30 */
		background-position: -2px -79px; /* grey bullet */
	}

	form a.bullet.animate span.hot {
		color: #e62000; /* warm red L=50  */
		background-position: -2px -179px; /* red bullet */
	}




/* Video */

	.video {
		margin-top: 26px;
		margin-bottom: 23px;
		padding-left: 4px; /* tweak */
	}
	
	.video iframe { /* used by vimeo */
		background-color: #f0f2f2; /* very light grey L=95 */
	}

	.text-area .video {
		margin-top: 23px;
	}



/* Home */


	.page.home .content {
		/* margin-left: 49px; */
		margin-left: 10px;
	}


	.page.home #logo {
		background-image: url(../img/global/nav_retina.png); /* Panya Clark Espinal - red */
		background-size: 510px 290px;
		background-repeat: no-repeat;
		background-position: -251px -4px;
	}

	.page.home .footer-nav {
		margin-left: 15px;
	}

/* Works */
	
	.works .content {
	}
	
	.works .footer-nav {
		margin-left: 290px;
	}

/* Work */

	.work {
		height: 147px;
		margin-left: 152px;
	}
	
	.work .bonbon {
		float: left;
		margin: 0 20px 0 0;
	}

	.work .lede  {
		width: 390px;
		float: left;
		margin-top: 6px; /* controls vertical centring */
		margin-bottom: 0;
	}

	.work .lede .blurb {
		margin-bottom: 0;
	}



/* Publications */

	.publications .content {
		margin-top: 2px;
	}
	
	.publications .lede {
		margin-bottom: 8px;
	}
	
	.publications .footer-nav {
		margin-left: 310px;
	}

/* Publication */

	.publication {
		width: 100%;
		margin: 0 0 28px 20px;
	}
	
	.publication .photo {
		width: 269px; /* = max width for photo */
		float: left;
		margin: 3px 25px 0 0;
	}

	.publication .photo img {
		float: right;
	}

	.publication .photo .end {
		clear: right;
	}

	.publication .text-area {
		width: 410px;
		float: left;
		margin: 0 0 0 0;
	}

	.publication h2 {
		margin: -2px 0 5px 0;
	}

	.publication .description {
		margin-bottom: 8px;
	}

	.publication .isbn {
		margin-bottom: 8px;
		white-space: nowrap;
		font-size: 11px;
	}

	.publication ul.links {
		margin: 0;
	}

	.publication ul.links li {
		margin-bottom: 5px;
	}

/* Text Area */

	.text-area {}
	
	.text-area p a {
		border-bottom-width: 2px;
		border-bottom-style: dotted;
	}

	.text-area p a:link,
	.text-area p a:visited {
		border-color: #c3c6c7; /* very light grey L=80 */
	}

	.text-area p a:hover,
	.text-area p a:active {
		border-color: #ff6638; /* warm red L=70  */
	}


/* Speaker (for interviews) */

	.speaker {
		text-transform: uppercase;
		font-size: 11px;
		font-weight: bold;
		color: #444748; /* cool black L=30  */
	}

	.speaker:after {
		content: ":";
	}

	.speaker.lead-in {
		font-size: 12px;
		font-weight: normal;
		color: #181d1f; /* cool black L=10  */
	}


/* References (end-notes) */

	a.reference {
		position: relative;
		border: none;
		font-weight: bold;
		font-size: 10px;
		top: -3px;
		padding-left: 4px;
	}

	a.reference:link,
	a.reference:visited {
		border: none;
		color: #444748; /* cool black L=30  */
	}

	a.reference:hover,
	a.reference:active {
		border: none;
		color: #e62000; /* warm red L=50  */
	}

	ul.references {
		margin-top: 15px;
		margin-bottom: 15px;
		font-size: 11px;
		line-height: 17px;
	}

	ul.references li {
		margin-bottom: 5px;
		margin-left: 14px;
		text-indent: -14px;
	}

	span.reference {
		font-weight: bold;
		font-size: 11px;
		top: -0px;
		padding-right: 2px;
		color: #444748; /* cool black L=30  */
	}




/* Slideshow */

	.slideshow {
		width: 100%;
		height: 400px; /* default, recalculated by script or overridden by inline style */
		overflow: visible;
		margin-bottom: 23px;
	}

	.slideshow .slide {
		position: absolute;
		right: 0;
	}

	.slideshow .slide + .slide { /* all .slide except first */
		display: none; 
	}

	.slideshow img { z-index: 1; }


	.slideshow .nav {
		position: absolute;
		width: 100%;
		height: 21px;
		right: 0;
		top: 0;
		background: url(../img/global/slideshow_nav_retina.png) repeat-x 0 -60px; /* transparent grey */
		background-size: 40px 100px;
		z-index: 2;
	}

	.slideshow .nav .dot,
	.slideshow .nav .next,
	.slideshow .nav .prev {
		width: 14px;
		height: 20px;
		float: right;
		cursor: pointer;
	}


	.slideshow .nav .next { margin-right: 8px; }
	.slideshow .nav .prev { margin-right: 1px; margin-left: 1px; }


	.slideshow .nav .hot,
	.slideshow .nav .normal {
		position: absolute;
		width: 14px;
		height: 20px;
		background-image: url(../img/global/slideshow_nav_retina.png);
		background-size: 40px 100px;
		background-repeat: no-repeat;
	}

	.slideshow .nav .dot .normal { background-position: -3px 0px; }
	.slideshow .nav .dot .hot, .slideshow .nav .dot.here .normal { background-position: -23px 0px; }

	.slideshow .nav .next .normal { background-position: -3px -40px; }
	.slideshow .nav .next .hot { background-position: -23px -40px; }

	.slideshow .nav .prev .normal { background-position: -3px -20px; }
	.slideshow .nav .prev .hot { background-position: -23px -20px; }

	/* Slideshow with vert-rule: connect slideshows together with a dotted line */

	.vert-rule .slideshow {
		border-right: dotted #cdcfd0 4px;
		margin-bottom: 15px;
	}

	.vert-rule .slideshow:last-child {
		border-right: none;
	}
	.vert-rule .slideshow .slide {
		margin-right: -4px;
	}

	.vert-rule .slideshow .caption {
		background-color: white;
		padding-bottom: 12px;
	}

/* Layout 1: single wide column with visuals contained within column; */

	.layout-1 .content {
	}

	.layout-1 .footer-nav {
		margin-left: 150px;
	}

	.layout-1 .text-area {
		margin-left: 154px;
		width: 480px;
	}

	.layout-1 h2 {
		margin-bottom: 14px;
		color: #f53914; /* warm red L=55  */
	}

	.layout-1 h3 {
		margin-top: 9px;
		margin-bottom: 9px;
		font-size: 12px;
		text-transform: uppercase;
		font-weight: normal;
	}

	.layout-1 .text-area p {
		text-align: justify;
	}

	.layout-1 .visuals-area {
		width: 480px;
		margin-left: 154px;
		margin-top: 22px;
		margin-bottom: -4px;
	}

	.layout-1 .photo,
	.layout-1 .slideshow {
		/* margin-bottom: 23px; */
	}

	.layout-1 .visuals-area .caption {
		/* text-align: right; */
	}

	.layout-1 .text-intro {
		/* color: #5a5f61; grey L=40 */
		margin-bottom: 14px;
		font-size: 11px;
		line-height: 18px;
	}

	.layout-1 .text-end {
		font-style: italic;
		margin-top: 19px;
		margin-bottom: 19px;
	}

	.layout-1 .end-matter {
		margin-top: 38px;
		margin-bottom: 45px;
	}

	.layout-1 .copyright-notice {
		font-size: 11px;
	}

/* Layout 2: wide central text column with room for smaller visuals on left; */

	.layout-2 .content {
	}

	.layout-2 .footer-nav {
		margin-left: 348px;
	}

	.layout-2 .text-area {
		margin-left: 352px;
		width: 480px;
	}

	.layout-2 .visuals-area {
		width: 309px;
		margin-left: 20px;
		margin-top: 5px; /* brings into alignment with top-of-text */
		margin-bottom: 40px;
		float: left;
		clear: left;
	}

	.layout-2 .photo,
	.layout-2 .slideshow {
		/* margin-bottom: 23px; */
	}

	.layout-2 img {
		float: right;
	}

	.layout-2 .visuals-area .caption {
		/* text-align: right; */
		clear: right;
	}

/* Layout 3 visuals column on left (565px) and narrow text column on right (330px) */

	.layout-3 .content {
	}

	.layout-3 .footer-nav { margin-left: 604px; }

	.layout-3 .text-area {
		width: 330px;
		margin-left: 608px;
	}

	.layout-3 h2 {
		color: #f53914; /* warm red L=55  */
	}

	.layout-3 .visuals-area {
		margin-left: 20px;;
		margin-bottom: 23px;
		margin-top: 5px; /* brings into alignment with top-of-text */
		float: left;
		clear: left;
	}

	.layout-3 .visuals-area { width: 565px; }

	.layout-3 .visuals-area .photo,
	.layout-3 .visuals-area .slide {
		right: 0;
	}

	.layout-3 .visuals-area .caption {
		right: 0;
		/* text-align: right; */
	}

	.layout-3 .slideshow {
		width: 100%;
		right: 0;
		/* margin-bottom: 23px; */
	}

	/* vert-rule tweak */
	.layout-3 .visuals-area.vert-rule {
		margin-left: 16px;;
	}



/* Contact */

	.contact .content {
	}


	.contact .text-area {
		margin-left: 154px;
		width: 480px;
	}

	.contact h2 {
		margin-bottom: 12px;
	}

	.contact .msg {
		font-size: 13px;
		line-height: 20px;
	}

	.contact .footer-nav {
		margin-left: 150px;
	}


/* Contact Form */

	#contact-form {
		width: 520px;
		padding: 32px 10px 40px 10px;
		margin-top: 5px;
		margin-left: 154px;
	}

	.field {
		margin-bottom: 10px;
		clear: both;
	}

	#contact-form input {
		display: block;
		width: 236px;
		height: 16px;
		margin-left: 84px;
		line-height: 16px;
		padding: 2px 3px;
	}

	#contact-form textarea {
		display: block;
		width: 365px;
		height: 300px;
		margin-left: 84px;
		line-height: 18px;
		padding: 2px 3px;
	}

	#contact-form label {
		display: block;
		width: 80px;
		float: left;
		height: 16px;
		padding-top: 3px;
		line-height: 16px;
		text-align: right;
	}

	#contact-form .to label {
		height: 20px;
		line-height: 18px;
		padding-top: 0;
	}

	#contact-form .to .name {
		display: block;
		height: 20px;
		margin-left: 87px;
		font-size: 13px;
		line-height: 16px;
		text-transform: uppercase;
		color: #444748; /* dark grey L=30 */
	}

	#contact-form  .field.add {
		margin-top: 14px;
		margin-bottom: 6px;
	}

	#contact-form .field.add input,
	#contact-form .field.remove input {
		display: block;
		width: 15px;
		height: 15px;
		float: left;
	}

	#contact-form .field.add label,
	#contact-form .field.remove label {
		width: auto;
		float: none;
		padding-top: 3px;
		margin-left: 105px;
		text-align: left;
		text-transform: none;
	}

	
	#contact-form #button-send {
		width: 58px;
		height: 18px;
		margin-left: 84px;
		margin-top: 28px;
		margin-bottom: 0;
		font-size: 13px;
		line-height: 16px;
		text-transform: uppercase;
	}

	#contact-form #button-send span {
		background-color: #f0f2f2; /* very light grey L=95 */
	}










/* Panyarama-theme */



	.panyarama-theme {
		width: 330px;
		height: 164px;
		margin-top: 5px;
		margin-left: 154px;
		margin-bottom: 20px;
		background: url(../img/other/panyarama_theme.jpg) no-repeat 0 0 #f0f2f2; /* very light grey L=95 */
	}








