/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	DMB
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	A few resets
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, figcaption, figure, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;}

article, aside, figure, footer, header, hgroup, nav, section {display:block;}

* 						{box-sizing:border-box;}


/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Uncomment to reveal structure
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

/* *, div				{outline:#ff00ff solid 1px;} */


/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Global
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

body 					{line-height:1.4; font-size:62.5% /* 1em=10px */; font-family:Arial, sans-serif; color:#777777; background:#f7f7f5;}

a						{border-bottom:1px solid #ffdd44; text-decoration:none; color:#777777;}
a:link,
a:visited,
a:focus					{color:#777777;}
a:hover					{border-bottom:1px solid #ffcc00; color:#555555; background:#ffcc00;}
a:active				{border-bottom:1px solid #ffcc00; color:#555555; background:#ffcc00;}	

img						{display:block; max-width:100%; height:auto;}
.reader					{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}


/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Structure
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


#headerbar				{background:#ffffff;}
header					{width:100%; height:120px; max-width:738px; overflow:hidden; margin:0 auto; background:transparent;}

#imagebar				{position:relative; padding:100px 0; background:#000000;}
.logoimage				{display:block; max-width:400px; margin:auto;}

#contentbar				{position:relative; background:#ffffff;}
#content				{width:100%; max-width:738px; overflow:hidden; margin:0 auto; padding:50px 0; background:#ffffff;}

#footerbar				{background:#f7f7f5;}
footer					{width:100%; max-width:738px; margin:0 auto; padding:30px 0; color:#999999; background:#f7f7f5;}

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Header (logo and navigation)
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

header p				{line-height:120px; text-align:center; font-size:145%; font-weight:normal; font-family:"Roboto Mono", Courier, monospace; color:#777777;}
header h1 a				{border-bottom:none; text-decoration:none; color:#333333;}
header h1 a:link,
header h1 a:visited,
header h1 a:focus		{color:#333333;}
header h1 a:hover		{color:#222222; background:#ffcc00;}
header h1 a:active		{color:#222222; background:#ffcc00;} 

header nav				{float:right; padding-top:6px; line-height:175px; color:#999999;}
header nav ul			{font-size:115%; font-family:"Roboto Mono", Courier, monospace; font-weight:700; text-transform:uppercase; letter-spacing:.3em; color:#aaaaaa;}
header nav li			{display:inline-block; margin-left:8px;}

header nav li.here::after{padding:0 0px 0 5px; color:#ffcc00; content:"∨"}
header nav a			{border-bottom:1px solid #ffdd44; text-decoration:none; color:#333333;}
header nav a:link,
header nav a:visited,
header nav a:focus		{color:#333333;}
header nav a:hover		{border-bottom:1px solid #ffcc00; color:#222222; background:#ffcc00;}
header nav a:active		{border-bottom:1px solid #ffcc00; color:#222222; background:#ffcc00;}	


/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Content
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */


section					{width:100%; overflow:hidden; margin:0 auto 0px auto; text-align:center;}
section h1				{margin-bottom:15px; line-height:1.75; text-align:center; font-size:145%; font-weight:normal; font-family:"Roboto Mono", Courier, monospace; color:#777777;}
section h1 em			{font-style:italic; letter-spacing:-.03em;}
section h1 a			{border-bottom:1px solid #ffdd44; text-decoration:none; color:#333333;}
section h1 a:link,
section h1 a:visited,
section h1 a:focus		{color:#333333;}
section h1 a:hover		{border-bottom:1px solid #ffcc00; color:#222222; background:#ffcc00;}
section h1 a:active		{border-bottom:1px solid #ffcc00; color:#222222; background:#ffcc00;} 
section h2				{display:inline-block; margin:15px 0; padding:0 3px 2px 3px; line-height:1.75; font-weight:normal;  font-size:145%; font-family:"Roboto Mono", Courier, monospace; color:#ffffff; background:#000000;}
section p				{margin-bottom:15px; line-height:1.75; font-size:145%; font-family:"Roboto Mono", Courier, monospace; color:#777777;}
section .testimonial	{text-align:left; font-size:120%;}
section p a				{border-bottom:none; color:#777777;}
section p a:link,
section p a:visited,
section p a:focus		{color:#777777;}
section p a:hover,	
section p a:active		{border-bottom:1px solid #dddddd; background:#ffffff;} 
.emdash					{font-family:Arial, sans-serif; color:#777777;}

mark					{color:#666666; background:#eeeeee;}
.arrow					{padding:0 3px; line-height:0; font-size:100%; color:#ffffff; background:#ffcc00;}
.arrow:hover			{color:#ffcc00; background:#555555;}

section .imgframe		{width:110px; height:110px; padding:4px; border:1px solid #eeeeee; background:#ffffff;}
section img				{}
section img:hover		{opacity:0.6;}

section figcaption 		{line-height:1.5; font-size:100%; font-family:Merriweather, Georgia, serif; font-weight:normal; font-style:italic; color:#666666;}
section .columnimg		{float:left; width:110px; overflow:hidden; margin:0 50px 0 0;}
section .columntxt		{overflow:hidden; font-size:100%;}
.credits				{line-height:1.5; font-size:100%; font-family:Merriweather, Georgia, serif; font-weight:normal; font-style:italic; color:#666666;}
.credits em				{font-style:normal;}
.credits span			{color:#111111;}

.colimgabout			{float:right; width:110px; overflow:hidden; margin:0 0 0 50px;}
.colimgabout .imgframe	{width:110px; height:110px; padding:4px; border:1px solid #eeeeee; background:#ffffff;}
.colimgabout img		{}
.colimgabout ul			{margin-top:15px; line-height:1.2; font-size:100%; font-family:Merriweather, Georgia, serif; font-weight:normal; font-style:italic; color:#666666;}
.colimgabout li			{margin-bottom:5px;}

.coltxtabout			{float:left; max-width:578px; overflow:hidden; font-size:100%;}
.coltxtabout p			{line-height:1.75; margin-bottom:20px; font-size:145%; font-family:"Roboto Mono", Courier, monospace; color:#777777;}
.coltxtabout h1			{margin:40px 0 20px 0; font-size:235%; font-family:"Playfair Display", Georgia, serif; font-weight:800; letter-spacing:.01em; color:#333333;}
.coltxtabout .headline	{margin:0 0 20px 0; }

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Inside footer elements
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

footer p				{text-align:center; margin:30px 0; line-height:1.75; font-size:130%; font-family:"Roboto Mono", Courier, monospace; color:#999999;}
footer p span			{font-size:150%;}


/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	767 or narrower
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

/* 1024 to 600 */
@media (max-width:1024px) and (min-width:600px) {
	body 				{font-size:70%;}
}


/* 599 or narrower */
@media (max-width:599px) {
	body 				{font-size:70%;}

	header				{max-width:290px; height:120px;}
	.logoimage			{max-width:290px;}
	#contentbar			{}
	#content			{max-width:290px;}
	footer				{max-width:290px;}
	
	header h1			{float:none; line-height:85px; font-size:230%;}
	header nav			{float:none; padding-top:0; line-height:1; text-align:right;}
	
}