/* @override http://alxknts-mbp.local/0113%20alexkent.net/lib/display.css */

/* @group RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

	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, 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,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
/* @end */

/* first: layout one column and common elements */
@media screen { /* and (max-width: 320px) */
	a
	{
		color: black;
		text-decoration: none;
		border-bottom: 1px dotted black;
	}
	a:hover
	{
		border-bottom: 1px solid black;
	}
	
	img { vertical-align: middle; /* gap under images begone */ }
	
	hr
	{
		max-width: 580px;
		border-width: 0px 0px 1px 0px;
		border-color:black;
		border-style:dashed;
		margin: 0px;
	}
	
	i { font-style:italic; }
	b { font-weight:bold; }
	.dead { text-decoration:line-through; }
	
	body
	{
		font-family: 'Times New Roman', Times, serif;
		background-color:#f9f9f9;
	}
	
	div#pagewrapper
	{
		width: 320px;
		margin: 20px auto;
		
		/* to Id responsive changes */
		/*border-top-width: 2px;
		border-top-style: solid;
		border-top-color: #c30;*/
	}
	
	#hair
	{
		background-color: #224b78;
		height: 50px;
		position: relative;
	}
	
	#hair h1
	{
		position: absolute;
		bottom: -11px;
		/*line-height:53%;*/
		font-size: 300%;
		letter-spacing: 4px;
		/*background-color: #a10;*/
		padding: 6px 20px 4px 20px;
		text-transform: lowercase;
		color: white;
	}
	#hair h1 a { border: none; color: white;}
	
	#header
	{
		position: relative;
		/* fancy page border */
		border-width: 0px 1px 0px 1px;
		border-style: solid;
		border-color: #eee;
		/* end page border */
		
		padding: 20px 20px 20px 20px;
		background-color:white;
	}
	
	#header #introtext p
	{
		font-size: 120%;
		line-height: 120%;
		margin: 10px 0px;
		max-width: 580px;
	}
	
	#header p.backLink { font-size: 200%; }

	#content
	{
		position: relative;
		
		/* fancy page border */
		border-width: 0px 1px 2px 1px;
		border-style: solid;
		border-color: #eee #eee #ddd #eee;
		/* end page border */
		
		background-color: white;

		padding-bottom: 18px;
		
		overflow:hidden;
		clear:both;
	}

/* @group content filter */
	#contentFilter {
		border-top: 1px dotted lightgray;
		padding-top: 5px;
		border-bottom: 1px dotted lightgray;
		padding-bottom: 5px;
	}
	
	#contentFilter h3
	{
		font-weight: normal;
		font-size: 100%;
		margin: 0px 0px 5px 4px;
		color: gray;
	}
	
	#contentFilter button
	{
		font-family: 'Times New Roman', Times, serif;
		font-size: 100%;
		color: gray;
		text-shadow: 0px 1px #eee;
		background-color: #eee;
		margin: 4px;
		padding: 2px 8px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius: 10px;
		border-width: 0px;
		cursor: pointer;
		max-width: 100px;
	}

	.filterButtonDown
	{
		/* not sure why !IMPORTANT is necessary here */
		background-color: #aaa !IMPORTANT;
		color: white !IMPORTANT;
		text-shadow: 0px 1px black !IMPORTANT;
	}
/* @end */
	
/* @group front page masonry */
	#articles.masonry
	{ margin-top: 18px; }

	.article
	{
		width: 280px;
		margin: 0px 0px 20px 18px;
		float: left;
		background-color:none;
	 	overflow: hidden;
	}

	.article div.info
	{
		padding: 3px 5px 5px 5px;
	 	font-size: 80%;
	}
	
	.article div.info h1
	{
		font-style:italic;
		font-weight:normal;
		font-size:160%;
	}
	
	.article a.blockClicker
	{
		position:absolute;
		top:0px; bottom:0px; left:0px; right:0px;
		display:block;
		background-color: rgba(0,0,0,0); /* if no colour IE won't click :( */
		border: none;
	}

	.animate
	{
		/* add to div.brick to get animated transitions */
		-webkit-transition-duration: 0.4s;
		-webkit-transition-property: left, right, top, opacity, height;
		-webkit-transition-timing-function: ease-in-out;

		-moz-transition-duration: 0.4s;
		-moz-transition-property: left, right, top, opacity, height;
		-moz-transition-timing-function: ease-in-out;
		
		-ms-transition-duration: 0.4s;
		-ms-transition-property: left, right, top, opacity, height;
		-ms-transition-timing-function: ease-in-out;
		
		-o-transition-duration: 0.4s;
		-o-transition-property: left, right, top, opacity, height;
		-o-transition-timing-function: ease-in-out;

		transition-duration: 0.4s;
		transition-property: left, right, top, opacity, height;
		transition-timing-function: ease-in-out;
	}
/* @end */

/* @group article */
	div#article
	{}

/* @end */

/* @group article body */
	.articleText
	{
		padding: 0px 20px 30px 20px;
	}
	.articleText h1
	{
		font-style:italic;
		font-weight: normal;
		font-size: 200%;
		line-height: 50px;
		margin-bottom: 10px;
		word-wrap: break-word;
	}
	.articleText h2
	{
		margin-top: 0px;
		margin-bottom: 20px;
		
		font-style: normal;
		font-weight: normal;
		font-size: 120%;
	}
	
	.articleText p {
		font-size: 100%;
		line-height: 120%;
		margin: 10px 0px;
		max-width: 580px;
	}
/* @end */

/* @group app store link */
	div.appStoreLink
	{
		/* float: right; */
		text-align: center;
	}
	div.appStoreLink img
	{
		margin:0px auto;
		display: block;
		margin-bottom: 10px;
	}
/* @end */

/* @group logo */
	div.logo
	{
		float: right;
	}
/* @end */

/* @group gallery */
	div#galleryScrollInfo { display:none; } /* hide on small screen */

	div#full.gallery li
	{
		margin-bottom: 50px;
	}
	div#full.gallery li div {
		text-align: center;
	}
	div#full.gallery li div img 
	{
		max-width: 100%;
		max-height: 750px;
		height: auto;
		width: auto;
	}
	
	div#small.gallery ul
	{
		margin-left: 18px;
	}
	div#small.gallery li
	{
		float: left;
		margin-right: 16px;
		clear: none;
	}
	div#small.gallery li img
	{
		/* this seems nuts. */
		max-width: 282px;
		max-height: 450px;
		
		height: auto;
		width: auto;
	}
	div.gallery p.caption {
		font-size: 90%;
		margin-top: 4px;
		margin-left: 18px;
		max-width: 580px;
		font-style: italic;
		line-height: 120%;
	}
/* @end */

/* @group video, youtube embed */
	.video {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
	}
	
	.video iframe,  
	.video object,  
	.video embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
/* @end */



	#footer
	{
		clear:both;
		padding: 10px 20px;
		border-top: 1px solid #eee;
	}
	
	#footer p
	{
		font-size: 80%;
		color: gray;
		padding-bottom: 10px;
	}
}

/* two column */
@media screen and (min-width: 620px) {
	div#pagewrapper { /* border-top-color: green; */ }
	div#pagewrapper { width: 616px; }	
	div.appStoreLink { float: right; }
}
/* three column */
@media screen and (min-width: 920px) {	
	div#pagewrapper { /* border-top-color: #c30; */ }
	div#pagewrapper { width: 916px; }

	/* move content filter buttons up to right side */
	#contentFilter {
		position: absolute;
		right: 8px;
		top: 30px;
		display: block;
		width: 190px;
		padding-left: 5px;
		border-left: 1px dotted lightgray;
		
		border-top: none;
		border-bottom: none;
	}
	
	#contentFilter button:hover
	{ background-color: #ddd; }
	
	
	div#galleryScrollInfo
	{
		display:block;
		float: right;
		background-color: #eee;
		color: #999;
		font-size: 80%;
		padding: 5px 8px;
		margin-top: -20px;
		margin-bottom: 10px;
		margin-right: 18px;
		right: 0px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius:10px;
	}
}

/* four column */
@media screen and (min-width: 1220px) {
	div#pagewrapper { /* border-top-color: red; */ }
	body.frontPage div#pagewrapper { width: 1216px; }
	body.articlePage div#pagewrapper { width: 916px; }
}