/* This file is for the printable timeline: adams_timeline_printable
 * NOT for the simile timeline: adams_timeline.php
 */

.main {
	width:600px;
	margin:25px auto;
}

.yearAnchors {
	background-color:#9CA6B7;
	margin:0;
	padding:7px 7px 0 0;
	text-align:right;
	font-family: Arial,Verdana,sans-serif;
	font-size: 11px;
	font-weight: bold;
	height:40px;
}

.yearAnchors a {
	width:30px;
	color: #72829C;
	padding:3px 7px;
	text-align:center;
	background-color:#DEE0E9;
	text-decoration:none;
	margin-left:3px;
}

.yearAnchors a:hover {
	color: #FFFFFF;
	background-color:#9CA6B7;
	text-decoration:underline;
}

.yearAnchors p {
	color: #FFFFFF;
	padding:0;
	margin:0;
}

.content {
	border-top:1px solid #808080;
}

.yearName {
	font-family:Times, "Times New Roman", sans-serif;
	font-size:16px;
	width:24%;
	float:left;
	color:#000040;
}

.yearName h4 {
	margin-left:5px;
	margin-top:0px
}

.yearWrap {
	border-left:1px solid #808080;
	border-right:1px solid #808080;
	border-bottom:1px solid #808080;
}

.events {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	width:75%;
	float:left;
	border-left:1px solid #808080;
}

.events p {
	margin:2px 5px 27px;
}

.events p.firstP {
	margin-bottom:7px;
}

.clear {
	clear:both;
}

.date {
	color:purple;
}

.events img
{
	float:right;
	margin:5px 0 5px 5px;
	outline:none;
}


a.returnLink
{
	float:right;
}

@media print
{
	header, .breadcrumbs, nav, .topNav, footer, .mobileToTop, .yearAnchors
	{
		display:none;
	}
	
	.main, .content, .yearWrap, .events, .yearName, .events img
	{
		margin:0;
		float:none;
	}
	
	.yearName
	{
		border-bottom:1px solid #808080;
		border-right:1px solid #808080;
	}
	
	.events
	{
		border-left:none;
	}
	
	.events img
	{
		margin:1px;
	}
	
	
}

@media (max-width: 600px)
{
	.main
	{
		width:100%;
	}
	
	.main img
	{
		max-width: 50%;
	}
	
	.events img+img
	{
		clear:right;
	}
	
	.yearAnchors a:hover
	{
		width:30px;
		color: #72829C;
		padding:3px 7px;
		text-align:center;
		background-color:#DEE0E9;
		text-decoration:none;
		margin-left:3px;
	}
	
	.events:after
	{
		content: <p>hi!</p>;
	}
}