/* Mail Art Chro No Logy - project styles */

body {
	background-color:#d0d0d0;
	margin:0;
}
a {color:black;}
a:hover {
	color:black;
	text-decoration:none}
.container {
	max-width:660px;
	padding:0.5em;
	margin:0 auto
}
.nowrap {
	white-space: nowrap;
}
img.chrono {
	width: auto;
	height: auto;
	max-width: 100%;
}
.project-container {
	clear: both;
	overflow: hidden;
	border: 1px solid #999999;
	padding: 1em;
	background-color: white;
	color:#333333;
	font: 0.95rem Verdana, Helvetica, Arial, Geneva, sans-serif;
	line-height: 1.3rem;
	margin-bottom: 1rem;}
.project {
	float:left;
	max-width:400px;
	margin-bottom:1em;
	line-height:1.5em}
.project strong {
	font-size:1.1em;}
.project a {
	color:black;
	text-decoration:none;
	border-bottom:1px dotted black}
.project a:hover {
	text-decoration:none;
	border-bottom:1px solid black}
.thumbnail {
	text-align:left;
	float:right;}
.thumbnail img {
	border:1px solid #999999;
	opacity:.8;
	}
.thumbnail img:hover {
	border:1px solid black;
	opacity:1;
}


.project-category {
	margin: 0;
	padding: 0;
}

.project-category em {
	color:#999999; 
	font-style: normal;
	font: 0.9em Verdana, Helvetica, arial, san-serif;
}



.quotes {
	font-size:0.8em;
	margin:0;
	background-color:#ebebeb;
	padding:1em}











/* Menus, Menu styles */
	
.years {
	display: flex;
	justify-content: space-evenly;
	flex-direction: row;
	font: 0.9rem 'Special Elite', 'Book Antiqua', Palatino, serif;
	margin: 2rem auto 0 auto;
}
.years a, .years b {
	margin: 0 0 1.5rem 0;
}
.year a, .year b {
	margin: 0 0 1.75rem 0;
}
.year {
	margin-top: 1rem;
	margin-bottom: 0rem;
	display: flex;
	justify-content: space-evenly;
	margin-left: auto;
	margin-right: auto;
	font: 0.9rem 'Special Elite', 'Book Antiqua', Palatino, serif;
}
.year > strong,
.year > strong,
.years > strong {
	background-color:white;
	font-weight:normal;
	padding-top:3px;
}
.year a,
.years a {
	color:#555555;
	text-decoration:none;
	border-bottom: 2px solid transparent;
}
.year a:hover,
.years a:hover {
	color:black;
	text-decoration:none;
	border-bottom: 2px solid black;
}

.menu br,
.menu-bottom br,
.artpool br {
	display:none}
.menu b,
.menu-bottom b {
	margin:1em 1em;}
.menu-bottom b.br {
	display:block}
.menu, .menu-bottom {
	text-align:center;
	font:0.9em 'Special Elite', Verdana, Geneva, sans-serif;
	padding:0;
	margin:0em 0 3em 0;
	color:#333333;
	line-height:2em}
.menu a, 
.menu-bottom a {
	color:#555555;
	text-decoration:none;
	border-bottom:1px dotted black}
.menu strong {
	font-weight:normal;color:white;}
.menu a:hover, 
.menu-bottom a:hover {
	color:black;
	text-decoration:none;
	border-bottom:1px solid black}
.artpool {
	text-align:center;
	background-color:#aaaaaa;
	color:white;
	padding:2em;
	margin:0;
	font:0.8em Verdana, Geneva, sans-serif;
	line-height:2em;}
.artpool a {
	color:white;
	text-decoration:none;}
.artpool a:hover {
	color:black;
	text-decoration:none;}

/* Content - styles for texts */

.content {
	background-color:#ffffff;
	margin-bottom:2rem; 
	padding-bottom:2em	}
.navi{
	text-align:right;
	padding:1em;
	margin:0;
	font:0.8em Verdana, Geneva, sans-serif}
.title {
	padding:1em 2em 0em 2em;
	margin:0;
	text-align:center;
	font:1.2em Arial, Geneva, sans-serif;
	line-height:1.6em}
.bibl {
	padding:1em 2em 2em 2.4em;
	margin:0;
	color:#555555;
	font:0.8em Arial, Geneva, sans-serif;
	line-height:1.6em}
.texts p, 
p.texts {
	padding:1em 2em;
	margin:0;
	font:1em Verdana, Geneva, sans-serif;
	line-height:1.6em}
.texts a {
	color:#003399;
	text-decoration:none;
	border-bottom:1px dotted black}
.texts a:hover {
	text-decoration:none;
	border-bottom:1px solid black}
ol.texts {
	margin-left:3em; 
	list-style:outside; 
	list-style-type:decimal}
.texts-date {
	padding:1em 0.5em 0 0;
	margin:0;
	font:1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#d0d0d0;
	line-height:0em;
	text-align:right;}
.texts-listed {
	padding:1em 2em 0em 2em;
	margin:0;
	color:#333333;
	font:1em "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	line-height:1.6em}
.texts-listed a {
	text-decoration:none;
	border-bottom:1px dotted black}
.texts-listed a:hover {
	text-decoration:none;
	border-bottom:1px solid black}
.texts-listed small {
	color:#666666;
	font:0.8em Arial, Geneva, sans-serif}
.image, 
.texts .image {
	margin:1rem 2.75em;
	padding: 0;
	text-align:left;
	font-size:0.75em;
	color:#777777;

	line-height:2em}
.image img {
	width:100%;
	margin:0.5em auto;
	display:block;}
.image br {
	display: none;
}
.textquote {
	padding:0 2em;
	font:1em Times, "Times New Roman", serif;
	font-weight:bold;
	color:#666666;
	text-align:center}

/* Footer */

.fns p {
	margin:0;
	padding:0em;}
#footnotes {
	padding:0 2.4em;
	text-align:left;
	font-size:0.8em;
	line-height:1.8em}
.notelink, 
.texts .notelink, 
.texts .notelink:hover, 
sup .notelink, 
.notelink sup {
	color:#0033FF;
	text-decoration:none;
	font-style:normal;
	border:0;
	font-size: smaller;}
sup {
	vertical-align: middle;
}
#footnotes a.notelink {
	font-size: 1em;
}
#footnotes a {
	color:#0033FF;
	text-decoration:none;
	font-style:normal;
	border:0;}
	
/* Misc */

u {
	text-decoration:none;
	border-bottom:1px dashed #000000}
.hr {
	height: 1px;
	border: none;
	background-color: black;}

/* Hide/show blocks for archival purposes */

.hidden {
	display: none;
}

div:hover > div.show {
	visibility:visible;
	transition-delay:0;}
#hide {
	display:none}
.show > img {
	margin-right:19px;
	margin-top:19px}
.show > img:nth-child(3n+3) {
	margin-right: 0;}
.show > img:nth-child(1n) {
	margin-left: 0;}
.show > img {
	max-height:200px;
	display:inline-block;
	width: 200px;
	height: 200px;
	background-position: center center;
	background-size: cover;}
.show {
	visibility:hidden;
	text-align:center;
	clear:both;
	position:absolute;
	width:100%;
	left:0px;
	max-width:658px;
	border:1px solid #999;
	border-top:0;
	padding-bottom:10px;
	background-color:#fff;
	transition:0.2s 0.5s;}

/* Responsive styles for smaller screens */

@media screen and (max-width: 660px) {
	.years, .year {flex-wrap: wrap; max-width: 300px;}
	.years * {width: 100px;text-align: center;}
	.year * {width: 60px;text-align: center;}
	img.chrono {
		margin-top: -1rem;
	}
	.menu br,
	.menu-bottom br,
	.artpool br {
		display:block;
		}
	.menu b,
	.menu-bottom b,
	.menu-bottom strong,
	.artpool b {
		display:none;
		}
	.menu br,
	.menu-bottom br {
		margin-top:1em;
		}
	.menu {
		margin:1em 0 3em 0;
		}
	.menu-bottom {
		margin:0em 0 3em 0;
		}
	}