/*  STYLE NOTES

colors:
	orange #cc851f
	green #2a673a
	dark background #323834
structure:
	structure 1 (Home, News home, About, Membership (above form), and Resources)
		- structure 1: 2 equal divs (#leftSide and #rightside), all of these two div's children are divs (level2 divs)
		- all level2 divs have margin: 0; padding: 1.5 em 0 1em 0; border-top: 1px solid  except for level2 column at top of column 
		which is padding-top 0 and ; all level2 divs not at top of column have JS-generated border:0 and padding-top: 0
		- try to avoid have third-level divs
	
	structure 2  (History, News articles)
	full size photo width="544"
	
	
misc:
	exLink class is for links that should open in a new tab
	captions should NOT have periods after them.
	
*/

/*POSITIONING*/
body, #outerContent, #innerContent, #imageMap {position: relative;}
#largePhotoContainer, #photoBox, #subName, #subTagline, #subPhoto {position: absolute;}
#largePhotoContainer  {top: 0;}
#photoBox {top: 0; left: 50%;}
#subName {top: 25px; left: 20px;}
#subTagline {top: 50px; left: 230px;}
#subPhoto {top: 10px; right: 63px;}

/*DISPLAY*/
#global_nav li, #lower_nav li {display: inline;}
.show , #localNav span, .withinTextPhoto span, h2 img, .centerResources li span, #closeLargePhoto {display: block;}
.hide, .printLogo, .printOnly, .printClr, #printURL  {display: none;}
.centerResources li span.printLink {display: inline;}


/*FLOATS*/
#leftSide, #rightSide,  #localNav, #textWithLocalNav, #article, .pub img, .pub div, #newsItems {float: left;}
.withinTextPhoto {float: right;}
/*div.floatLeft {float: left;}  /*same as .withinTextPhoto except floated left instead of right*/
div.centeredPhoto {float: none;}
.clr, .jumpLinks {clear: both;}

/*HEIGHTS AND WIDTHS*/
#outerContent {width: 800px;}
#innerContent, #subMasthead, #global_nav, #page_content, #timelineDiv, #membershipForm, #subPageHeader {width: 737px;}
#subPageHeader {height: 140px;}
h2 img {width: 220px; height: 30px;}
#leftSide, #rightSide {width: 48%;}  
table {width: 100%;}
#centerBuildingPhoto {width: 300px;}
.spacerDiv {height: 75px;}
.printLogo {width: 150px; height: 95px;}
#largePhotoContainer {width: 100%; height: 100%;}
#photoBox {width: 1600px;}

/*history page*/
#localNav, #newsItems {width: 20%;}
#textWithLocalNav {width: 544px;}
/*#largePhoto {width: 1000px;}*/
/*membership page*/
#memDues td {width: 157px;}
#membershipForm td {width: 300px;}
#membershipForm td.box {width: 500px;}
/*newsletter page*/
#adobeLink {width: 100px;}
#newsletterList {width: 200px;}
.jumpLinks img {width: 8px; height: 8px;}
#petersPhoto {width: 200px;}
.pub div {width: 62%;}
.pub div.pubImg {width: 30%;}
.also table {width: 410px;}
.also th.price, .also td.price {width: 10px;}
/*.withinTextPhoto span{max-width: 200px;}*/
.narrowCaption {max-width: 200px;}
.mediumCaption {max-width: 300px;}
.wideCaption {max-width: 400px;}

/* MARGINS AND PADDING*/
body, #innerContent, #global_nav a, #page_content, #localNav li, #textWithLocalNav h3, #membershipForm, .memAddress p , #lower_nav, #lower_nav, #footer p, #textWithLocalNav  {margin: 0;}
body, h2, #global_nav a, #page_content, #leftSide, #localNav, #localNav a, .memAddress p, #lower_nav, h4, .eventsTable, #newsItems  {padding: 0;}
#outerContent {margin: 0 auto; padding: 0 0 0 63px;} /*33px background image plus 30px of padding*/
#innerContent{padding: 10px 63px 0 0;}
#global_nav, #annBar {margin: 1em 0;}
#global_nav {padding: 1em 0;}
#annBar {padding: 0 1em;}
#annBar p, #annBar a {margin: 0; padding: 0;}
#global_nav li {padding: 0 1.5em;}
h1 {margin: 20px 0 0 0;}
h2 {margin: 20px 0;}
h3 {margin: 0 0 5px 0;}
thead th {padding: 0 0 5px 0;}
h4 {margin: 10px 0;}
#leftSide, #rightSide {margin: 0 0 0 0;}
#rightSide {padding: 0 0 0 4%;}  
#leftSide p, #rightSide p {margin: 0 0 15px 0;}
li {margin-bottom: 10px;}
#footer {margin: 30px auto 0 auto; padding: 10px 0 10px 10px;}
#footer div {margin: 30px 0;}
#footer div p {margin: 0 0 2px 0;}
/*#bottom_contact {margin: 30px 0;}
#bottom_contact p {margin: 0 0 2px 0;}*/
#lower_nav li#first {padding: 0 10px 0 0;}
#lower_nav li {padding: 0 10px;}
#rightSide #visit p {margin: 5px 0;}
.thumbnailRight {padding: 0 0 1em 1em;}
#leftSide div, #rightSide div {margin: 0; padding: 1.5em 0 1em 0;}
#leftSide div.topOfSide, #rightSide div.topOfSide {padding-top: 0;}
/*history  and news page*/
#localNav {margin: 0 0 0 0; padding: 0;}
#history {border-top: 1px solid #000; margin-top: 7em;}
/*history page*/
#localNav li {padding: .5em 0;}
#localNav span {margin-top: 3px;}
#textWithLocalNav h4 {margin-top: 3px;}
#textWithLocalNav {padding: 0 0 10px 30px;}
#textWithLocalNav p {margin-bottom: 15px; padding: 0;}
#textWithLocalNav p.year {margin-bottom: 5px;}
#textWithLocalNav p.jumpLinks {margin: 0 0 3px 0;}
.withinTextPhoto {margin: 0; padding: 15px 0 15px 15px;}
/*div.floatLeft {padding: 15px 15px 15px 0;}  /*same as .withinTextPhoto except floated left instead of right*/
.withinTextPhoto span {margin: 0 auto; padding: 0;}
.eventsTable {margin: 0 0 1.5em 0;}
#largePhoto {margin: 0 auto;}
/*membership page*/
#membershipForm {padding: 30px 0 10px 0;}
.memAddress {margin-top: 1em;}
#addressStart {margin-top: 10px;}
#printForm input {margin-right: 40px;}
#memDues td {padding-top: 10px;}
.memType {padding-right: 20px;}
#address p {margin: 0;}
#aboutMember {margin-top: 10px;}
/*about page*/
#rightSide #centerBuildingPhoto {margin: 0 auto 1em auto;}
/*news page*/
#newsItems {margin: 0 1em 1em 0; padding: 0;}
#newsItems h3 {margin: 0; padding: .5em 0;}
#newsItems div {margin: 0 .5em 0 0; padding: 0 0 1em 0;}
#newsItems div p {margin: 0; padding: 0;}
#newsNav {margin: 0 .5em 0 0; padding: 0 0 1em 0;}
/*#article {margin: 0; padding: 0 0 1em 0;}*/
.notFirst {padding: 1em 0;}
/*div#1890Map {margin: 0; padding: 0;}*/
/*largePhoto*/
#largePhoto, #largePhoto h1 {margin: 0;}
#largePhoto {padding: 0;}
#largePhoto h1 {padding: 30px;}
.asteriskNote {padding-left: 20px;}
#bothColumns {padding: 15px;}
h2 img {margin-left: 60px;}
h2 span {margin-left: 150px;}
p#viewTimeline {margin: 10px 20px;}
#officers {margin: 15px 0; padding: 15px 0;}
#officers ul, #officers li{margin: 0; padding: 0;}
#officers li {margin-bottom: 2px;}
#mailingAddress {padding-left: 20px;}
.pub {margin: 10px 0; padding: 10px 0;}
.pub div  {margin: 0; padding: 0 0 0 10px;}
.pub img {margin: 0; padding: 0;}
.also .price {padding-left: 10px;}
.also td.price {padding-right: 15px;}
.centerResources li span {padding-top: 5px;}
div.centeredPhoto {padding: 0;}
#largePhotoContainer {margin: 0;}
#photoBox {margin: 0 20px 20px -800px;}
#photoBox h1 {margin: 20px 0 5px 0;}
#closeLargePhoto {margin: 0 0 20px 0; padding: 0;}
.boxText {padding: 15px 15px 0 15px;}  /* #textWithLocalNav p already has 15px bottom margin*/ 
.pub img{height: 223px; width: 155px;}

/*TEXT*/
/*font */
body {font-family: verdana, geneva, lucida, arial, sans-serif;}
h1, h2, h3, h4, thead th, #global_nav li, #localNav li, #aboutMember {font-family: georgia, serif;} 
/*font size*/
body {font-size: 80%;}
h1 {font-size: 160%;}
h2, #news h3 {font-size: 150%;}
h3, thead th {font-size: 140%;}
h4 {font-size: 120%;}
#global_nav, #localNav {font-size: 110%;}
#footer, #center_hours, #page_content .backToTop {font-size: 80%;}
/*letter-spacing*/
h1, h2, .year{letter-spacing: 3px;}
#subPageHeader p, #global_nav li, #localNav, #localNav a {letter-spacing: 2px;}
/*line-height*/
body {line-height: 1.3;}
#global_nav li, #localNav, #localNav a {line-height: 1.5;}
/*font-weight and style*/
h1, h2, h3, h4, thead th, #extraDonation {font-weight: normal;}
#global_nav li.current, .labelCell {font-weight: bold;}
#global_nav a, #localNav a {text-decoration: none;}
#global_nav, #localNav li {font-variant: small-caps;} 
.year {font-style: italic;}
/*colors*/
body, a, #leftSide a {color: #333333;}
#subPageHeader p, #largePhoto h1 {color: #fff;}
#global_nav li.current, a:hover, #leftSide a:hover, #localNav a:hover span{color: #cc851f;}
h3, h4, thead th, .year, #localNav li, #annBar, #annBar a {color: #2a673a;}
#annBar a:hover {color: #cc851f;}
.pub h4, .also h4 {color: #000; font-size: 110%; font-weight: bold;}
.current a {color: #cc851f; font-weight: bold;}
noscript p {font-weight: bold; text-align: center; color: #f00;}

/*alignment*/
.eventsTable td, #membershipForm td.box, #memDues td, .newsNav h3  {text-align: left;}
#page_content .backToTop, #membershipForm td, #adobeLink, #memDues td.memType, p.jumpLinks {text-align: right;}
#homeHiddenHeader, h1, h3, #contact, #global_nav, #footer, #photo_section
	.photo, .withinTextPhoto, #memDues,  #membershipForm, 
	#largePhoto, #largePhoto h1, .textBox h3, #textWithLocalNav h3, .back, #directions, #memDues h3, 
	#membershipForm td#extraDonation, #annBar, .pub div.pubImg, #thankYou, #largePhotoContainer, #photoBox {text-align: center;}
td.labelCell {vertical-align: top;}
/*decoration*/
.accessKey {text-decoration: underline;}
.displayPhotos {color: #cc851f;}
.asteriskNote {font-style: italic; font-size: 90%;}
#aboutMember {text-align: center; color: #2a673a;}
#viewTimeline {font-style: italic; font-size: 85%;}
#officers {text-align: center;}
#largePhoto p {text-align: right;}
#largePhoto a {color: #fff;}
#centerBuildingPhoto {text-align: right; font-size: 90%;}
#annBar {font-size: 105%; font-weight: bold;}
#annBar a {font-size: 85%; font-weight: normal;}
.also td {text-align: right;}
#thankYou {font-weight: bold;}
div.centeredPhoto {text-align: center;}

.enlargeLink {text-decoration: underline; display: block; cursor: pointer;}
#photoBox h1, #closeLargePhoto {color: #fff;}
#closeLargePhoto {font-size: 120%; text-decoration: underline;}
#localNav.newsNav li {font-variant: normal; font-size: 90%;}


/*BORDERS*/
#global_nav {border-top: 1px solid #333; border-bottom: 1px solid #333;}
#localNav li {border-bottom: 1px solid #cc851f;}
#footer {border-top: 1px solid #333;}
#lower_nav li {border-right: 1px solid #333;}
.last, #lower_nav li.last, #localNav li.last {border: 0;}
#membershipForm {border-top: 1px solid #333;}
#bothColumns {border: 1px solid #2a673a;}
input[type="text"] {border: 1px solid #333;}
#leftSide div, #rightSide div {margin: 0; padding: 1.5em 0 1em 0; border-top: 1px solid #2a673a;}
#leftSide div.topOfSide, #rightSide div.topOfSide {border-top: 0;}
img {border: 0;}
.homeNews img {border: 1px solid #323834;}
.pub {border-bottom: 1px solid #000;}
.boxText {border: 1px solid #323834;}

/*BACKGROUNDS*/
body {background-image: url(images/background_lighter_green.gif);}
#outerContent {background: #ffffff url(images/leftBorderWhite.gif) top left repeat-y;}
#innerContent {background: #ffffff url(images/rightBorderWhite.gif) top right repeat-y;}
#homeMasthead, #subPageHeader {background: #323834;}
#largePhotoContainer {background: #323834; opacity: .8; filter: alpha(opacity=80);}
#photoBox {background: #323834;}


/*LISTS*/
li {list-style: none;}
.bulleted li {list-style: url(images/subListBullet.gif);}
/*#global_nav li, #lower_nav li, ul#localNav li, #newsletterList li, #officers li {list-style: none;}
#newsletterList li.collapsed {list-style: url(images/collapsed.gif);}
#newsletterList li.expanded {list-style: url(images/expanded.gif);}
li {list-style: url(images/subListBullet.gif);}
ul#localNav li {list-style-image: none;}
#officers li {list-style-image: none;}*/

#closeLargePhoto {cursor: pointer;}

/*FOR EDITING PURPOSES ONLY--THIS CLASS SHOULD NEVER BE USED ON THE LIVE SITE*/
.myText, .myText a, #leftSide.myText a {color: #00c;}
.myDeletion, .myDeletion a {color: #00c; text-decoration: line-through;}

#findTransPhoto {position: relative; height: 500px; border-bottom: 1px solid #2a673a; margin-bottom: 20px;}
#findTransPhoto p {color: #2a673a; font-weight: bold;}
#mainTransPhoto {position: absolute; top: 70px; left: 0; width: 543px; height: 384px;}
#overlayPhotos img, #overlayPhotos p {position: absolute; top: -9999px;}
#overlayPhotos img {opacity: .6; filter: alpha(opacity=60);}
#overlayPhotos img.label {opacity: 1; filter: alpha(opacity=100);}
#overlayPhotos p {color: #fff; padding: 2px 5px; font-size: 90%;}

#auto {left: 215px;}
#autoLabel {left: 238px; background: #919201;}
#auto.clickedOverlay {top: 123px;}
#autoLabel.clickedOverlay {top: 116px;}

#railroad {left: 210px;}
#railroadLabel {left: 269px; background: #d33e32;}
#railroad.clickedOverlay {top: 90px;}
#railroadLabel.clickedOverlay {top: 65px;}

#streetcar1 {left: 202px;}
#streetcar2 {left: 320px;}
#streetcarLabel {left: 356px; background: #972ca1;}
#streetcar1.clickedOverlay {top: 136px;}
#streetcar2.clickedOverlay {top: 186px;}
#streetcarLabel.clickedOverlay {top: 310px;}

#bicycle1 {left: 182px;}
#bicycle2 {left: 206px;}
#bicycleLabel {left: 177px; background: #2a673a;}
#bicycle1.clickedOverlay {top: 306px;}
#bicycle2.clickedOverlay {top: 333px;}
#bicycleLabel.clickedOverlay {top: 334px;}

#horse1 {left: 161px;}
#horse2 {left: 204px;}
#horse3 {left: 105px;}
#horseLabel {left: 202px; background: #cc851f;}

#horse1.clickedOverlay {top: 247px;}
#horse2.clickedOverlay {top: 247px;}
#horse3.clickedOverlay {top: 161px;}
#horseLabel.clickedOverlay {top: 235px;}

#walkers1 {left: 92px;}
#walkers2 {left: 122px;}
#walkers3 {left: 245px;}
#walkersLabel {left: 78px; background: #2c73a1;}
#walkers1.clickedOverlay {top: 253px;}
#walkers2.clickedOverlay {top: 276px;}
#walkers3.clickedOverlay {top: 283px;}
#walkersLabel.clickedOverlay {top: 283px;}

#overlayPhotos img#tester {top: 255px; left: 155px;}

#findTransPhoto form {position: absolute; bottom: 10px; right: 0;}

		/*#imageMap div img {position: absolute;}
		#imageMap img#mainImagePhoto {top: 0; left: 0; opacity: 10; filter: alpha(opacity=100);}
		#streetCarLabel {position: absolute; left: 190px; top: -9999px; border: 5px solid #000; width: 92px; height: 129px; text-align: center;}
		#streetCarLabel.clicked {top: 105px;}*/