/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
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;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;}
:focus {outline: 0;}
body {
line-height: 1;
color: black;
background: white;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
/*end reset*/


.cf{display:block;clear:both;}
.right{float:right;}
.left{float:left;}
#facade{width: 96%; max-width: 900px; margin:0 auto; padding-bottom: 0.5em;}
#facade img{width: 100%;}
body{font-family: georgia; font-size: 32px; color: #222; background: #fff;}
/*#040129*/
a{color:#BF2C2C;}
a:hover{color:#A42525; text-decoration:none;}

p{font-size: 62%; margin-bottom: 2em; line-height: 1.6;}
.section p{margin: 0.5em 0.5em 2em 0.5em;}
.small{font-size:50%; color: #777;}
em{font-style:italic;}

.divider{
width:100%;
height: 3px;
border-top:solid 1px;
border-bottom:solid 1px;
border-color: #eee;
position: relative;
top: 0.65em;
z-index: 1;
}

#masthead{padding-top:0.25em;}
	
#masthead .divider, #footer .divider{ border-style: dashed; top: 0.2em; border-color:#BF2C2C;}

h1, h2, h3, h4, h5{ text-align:center;position:relative;z-index: 2; }
h1{font-size:154%; color: #000;}
h2{font-size:48%; background: #fff; max-width: 250px; margin:auto; padding: 0 2.5%; color: #6f6f6f;}
h3{font-size:100%; background: #fff; max-width: 225px; margin:auto; padding: 0 2.5%; color: #BF2C2C;}
h4{font-size:72%; color: #000; text-align:left; line-height: 1.2;}
h5{ text-align:left; line-height: 1.2; }
#secondary h3{width: 60%; max-width: 164px;}

h1 a{text-decoration:none; color:#000;}

#nav, h1, h2, h3, h4, h5{font-family: 'Quando', sans-serif;}

#nav a{
display:block; 
float:left;
width: 25%; 
padding: 1em 0;
color: #000; 
text-decoration:none; 
text-transform:uppercase; 
font-size: 42%; 
text-align:center;
}

#nav a:hover{background: #dedede; color: #BF2C2C;}
#hero{clear:both;}
#hero img{width:100%; border-top:solid 1px; border-bottom:solid 1px; border-color: #222;}

.section{margin: 0em 0 2em 0; clear:both;}

#thePlaces .data{margin-top: 1em;}

.section img.right, .section img.left{
width:30%;
max-width: 160px;
margin: 0.5em 0.25em;
border:solid 2px #333;
}

.section img.right{border-right:none; margin-right: 0; border-radius: 4px 0 0 4px;}
.section img.left{border-left:none; margin-left: 0; border-radius: 0 4px 4px 0;}

#main{margin-top: 1em;}

#secondary{
margin: 1em 0 2em 0; clear:both;
}

#photos a{display:block; width: 28.33333%; float:left;  margin: 1em 2.5% 0 2.5%; text-decoration:none;}
#photos a img{width: 100%; border-radius: 2px; border:solid 1px #000;}
#photos a:hover img{border-color:#BF2C2C;}

.pictitle{
clear:both;
font-size: 46%;
display: block;
padding-top:2px;
min-height: 48px;
display:block;
}

.fullWidth{
padding:0.5em 0;
width: 100%;
display:block;
clear:both;
}

.fullWidth img{
width: 100%;
border-top:solid 2px #000;
border-bottom:solid 2px #000;
}

#close{
height: 30px;
width: 30px !important;
position: absolute;
margin:0 !important;
background: #000;
font-size: 14px;
text-align: center;
line-height: 30px;
font-family: arial;	
cursor:pointer;
}

ul{font-size: 16px; margin: 1em 0 2em 0;}
ul h5{text-align:left; margin-bottom: 4px; border: none;}
ul .light{color: #777;}
li{margin: 0 0 1em 1em; border-left: solid 3px #BF2C2C; padding-left: 2px;}

#progress p{font-size: 12px; margin:0.5em 0 1em 0; color: #666;}
#progress a{font-size: 16px;}
#progress p a{font-size: 12px; }

#progress h4{
padding-right: 20px;
}

.game h4{
background: url('../imgs/ballfield.png') no-repeat top right;
background-size:18px 16px;
}

.info h4{
background: url('../imgs/info.png') no-repeat right 4px;
background-size:18px 18px;
}

.cooperstown h4{
background: url('../imgs/hof.png') no-repeat right 4px;
background-size:18px 18px;
}

.vs{font-size: 40%; color: #777;}

#showAllSteps{
display: block;
margin: 0.5em auto;
text-align: center;
background: #fff;	
position: relative;
z-index: 999;	
width:132px;
}

#footer{padding:1em 0; clear:both;}
#footer .links{text-align:center; font-size: 18px; margin: 2em 0;}
/*map*/

#map-canvas, #frameMap { 
height:40px;
border-color:#BF2C2C;
border-top:solid 1px;
border-bottom:solid 1px;
width: 100% !important;
}

.tall #map-canvas, .tall #frameMap{height: 320px; }

.stop{
clear:both;
padding:1em 0.25em 1em 0.25em;
margin: 0.5em 0;
}

.stop.complete + .stop.complete{
background: #eaeaea;
border:solid 1px #cecece;
color: #aaa;
opacity:0.8;
}
.stop.complete + .stop.complete .vs{color: #aaa;}
.stop.complete + .stop.complete h4{color: #888;}

.stop a{display:block;  clear:both; margin-top: 12px;}

.date{font-size: 14px; margin: 0.5em 0;}

#theAuthor img{border-radius:50%; margin-right: 4px;}

.loading{width:28px !important;}

.footnotes{padding-left: 0.5em;border-top:dotted 1px #eaeaea;}

.footnotes h5{font-size:64%; color: #777; margin-bottom: 12px; padding-top: 24px; }

sup{font-size: 80%; padding:0 1px;}
sup a{text-decoration:none;}


.inline{display:inline !important;}

#showMap{height: 40px; background: rgba(0,0,0,0.8); color:#fff; text-align:center; border-top:solid 1px #000;border-bottom:solid 1px #000; position:absolute; width: 100%; font-size: 50%; line-height: 40px;}

/*keep page scrollable on landscape phone*/
@media only screen and (max-device-width : 600px) and (orientation : landscape) {
	#map-canvas, #frameMap { height: 204px; }
}

/*bigger*/
@media screen and (min-width: 640px) {
	#main{
	clear:none;
	float:left;
	width: 55%;
	}
	
	#secondary{
	clear:none;
	float:right;
	width: 40%;
	}
	
	#map-canvas, #frameMap { 
	height: 380px; 
	border:solid 1px;
	border-left:none;
	border-right:none;
	}
	
	#showMap{display:none;}
	
	.section img.right{border-right: solid 2px #000; margin-right: 0; border-radius: 4px;}
	
	.fullWidth img{border:solid 2px #000;}
}


@media screen and (min-width: 800px) {
	.inner{margin:auto; max-width: 1024px;}
	
	#main{
	clear:none;
	float:left;
	width: 60%;
	}
	
	#secondary{
	clear:none;
	float:right;
	width: 35%;
	}
	h1{font-size:184%;}
	
	#photos a{width: 20%;}
}

@media screen and (min-width: 1025px) {
	#map-canvas, #frameMap { height: 420px;}
	.section img.left{border-left: solid 2px #000; margin-left: 0; border-radius: 4px;}
}