/****************************************************************************************************/
/* YorkerStyle.css																					*/
/*																									*/
/* General purpose style sheet for YorkNeighborhood.org "Yorker On-Line" web site.					*/
/* Includes menu settings.																			*/
/* Includes styles for different screen widths to be tablet and mobile friendly.					*/
/*																									*/
/* Copyright (c) 2004 to present, York Neighborhood Association										*/
/*																									*/
/* 2016-11-17 Thomas R. Scott	Created.															*/
/* 2016-12-20					Centered H1.														*/
/****************************************************************************************************/
/*                                    General Page Display											*/
body{
 font-family: Arial,sans-serif;
 color: #333333;
 line-height: 1.4;
 margin: 0px;
 padding: 0px;
}

body.watermark1 { vertical-align: central; background:url(images/York_houses_w_trees_browns_10.png) fixed center no-repeat white; }
body.watermark2 { vertical-align: central; background:url(images/York_brown_houses_w_green_trees_15.png) fixed center no-repeat white; }
body.watermark3 { vertical-align: central; background:url(images/York_houses_brown_15.png) fixed center no-repeat white; }
body.watermark4 { vertical-align: central; background:url(images/YNA_watermark1_aug17_15.png) fixed center no-repeat white; }
body.watermark5 { vertical-align: central; background:url(images/YNA_watermark2_aug17_10_fade.png) fixed center no-repeat white; }
body.watermarkornaments { vertical-align: central; background:url(images/ornamentcluster_lightened.png) fixed center no-repeat white; }

a{
	color: #006699;
	text-decoration: none;
}

a:link{
	color: #006699;
	text-decoration: none;
}

a:visited{
	color: #006699;
	text-decoration: none;
}

.plainlink { text-decoration: none !important; }

.plainlink_bodytext { text-decoration: none !important; color: #333 !important; }

.plainlink_bold { text-decoration: none !important; font-weight: bold; color: #72582c !important; }

p{
	font-family: Arial,sans-serif;
	color: #333333;	
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 text-align: center;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font-family: Arial,sans-serif;
 font-size: 114%;
 color: #006699;
 margin: 0px;
 margin-top: 24px;
 padding: 0px;
}

th{
 font-family: Arial,sans-serif;
 font-size: 114%;
 color: #006699;
 margin: 0px;
 padding: 0px;
 vertical-align: text-bottom;
}

td{
 vertical-align: text-top; padding: 0px !important; margin: 0px !important;
}

h3{
 font-family: Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: normal;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font-family: Verdana,Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

label{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: bold;
 color: #334d55;
}

.darkbrown { color: #72582c; }

.lightbrown { color: #b0986c; }

.blue { color: #334d55; }

.red { color: #d23338; }

.green { color: #a6a311; }


.nopadding { margin: 0px !important; padding: 0px !important; }



p.page_title { font-size: 26px; font-weight: bold; color: #006699; text-align: center; margin-top: 48px; }

p.revisedate { font-size: 8pt; text-align: center; letter-spacing: 1px; color: #b0986c; margin-top: 0px; }

p.caption { font-style: italic; font-size: 8pt; text-align: right; margin-right: 12px; }

p.event_listing_main { color: #72582c; font-size: 15pt; margin-bottom: 0px !important; margin-top: 12px; padding: 0px !important; }

p.event_listing_sub { font-size: 12pt; margin-top: 6px; margin-bottom: 0px; padding: 0px; }

p.event_intro { font-style: italic; font-size: 11pt; margin-left: 12px; margin-bottom: 12px; margin-top: 9px; padding-top: 0px; color: #72582c; }

p.event_detail_I { margin-left: 24px; margin-top: 9px; font-size: 10pt; margin-bottom: 4px; }

p.event_detail_II { margin-left: 36px; font-size: 9pt; margin-top: 0px; margin-bottom: 6px; }


div.event_panel { background-color: rgba(255,241,178,0.85); border-radius: 12px; padding: 12px; margin: 12px; border: none; }

li.feature { margin-left: 24px; list-style: none; }



div.content-pane { border: none; padding: 18px; }

p.pane-title { text-align: center; color: white; letter-spacing: 12px; font-family: sans-serif; font-size: 26pt; text-transform: uppercase; text-shadow: black 0px 5px 10px; margin-top: 0px !important; }

p.white-text-head { text-align: center; color: white; font-style: italic; font-weight: bold; font-family: serif; font-size: 18pt; text-shadow: black 0px 5px 10px; }

p.white-text { text-align: center; color: white; font-family: sans-serif; font-size: 14pt; }

p.pane-head { font-size: 18pt; font-weight: bold; }

p.pane-big { font-size: 15pt; }



p.mapnote { font-style: italic; }

p.newsletter_issue { font-family: Arial,sans-serif;  color: #333333;  margin-top: 6px; padding: 0px; font-weight: bold; }

p.newsletter_summary { font-size: 9pt; margin-left: 12px; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; line-height: 180%; }

ul.newsletter { color: inherit; margin: 0px !important; padding: 0px !important; }

li.item { color: inherit; margin-top: 0px; margin-bottom: 6px; margin-left: -20px !important; margin-right: 0px; padding: 0px !important; list-style: "- " ; }

.instruction { font-weight: normal; font-style: italic; color: #72582c; padding-left: 24px; font-size: 75%; }

p.mission_head { text-align: center; font-size: 11pt; margin-top: 0px; padding-top: 0px; font-weight: bold; }

p.mission_item { text-align: left; font-size: 9pt; margin-top: 0px; padding-top: 0px; }

p.content_lead { font-style: italic; font-weight: bold; font-size: 11pt; }

p.about_jump { margin-bottom: 0px; margin-top: 6px; padding-bottom: 0px; margin-left: 18px; font-style: italic; font-size: 12pt; font-weight: bold; color: #72582c; }

p.sectionjump { margin-bottom: 0px; margin-top: 6px; padding-bottom: 0px; margin-left: 36px; font-style: italic; color: #72582c !important; text-decoration: none !important; }

span.sectionjump { margin-bottom: 0px; margin-top: 6px; padding-bottom: 0px; font-style: italic; color: #72582c !important; text-decoration: none !important; }

p.sectionjumpindent { margin-left: 36px; }

p.about_section { font-weight: bold; color: #72582c !important; font-size: 13pt; margin-top: 36px; border-top: 2px dotted #c7bcab; }

p.about_feature_head { font-weight: bold; margin-bottom: 0px; padding-bottom: 0px; color: #72582c !important; text-decoration: none !important; }

p.about_feature { text-align: justify; margin-left: 12px; }

p.neighborhood_head { margin-left: 24px; font-size: 14px; font-weight: bold; font-style: italic; margin-bottom: 0px; }

p.neighborhood_body { margin-top: 0px; padding-top: 0px; text-align: justify; }

p.formstatement { font-family: Arial,sans-serif;  font-size: 114%;  color: #006699;  margin: 0px;  margin-top: 24px;  padding: 0px; }

p.formfield { font-weight: bold; }

.explanation { font-size: 75%; font-style: italic; color: #b0986c; padding-left: 12px; }



p.boardhead { font-family: Arial,sans-serif;  font-size: 114%;  color: #72582c;  margin-bottom: 0px; margin-top: 36px; padding: 0px; font-weight: bold; border-top: 2px dotted #c7bcab; }

p.boardgroup { font-family: Arial,sans-serif;  color: #b0986c;  margin-bottom: 0px;  margin-top: 14px; padding: 0px; font-weight: bold; letter-spacing: 1; font-style: italic; }

p.boarditem { margin-left: 18px; margin-top: 0px; margin-bottom: 0px; padding: 0px; line-height: 160%; }

p.boardmember_head { font-family: Arial,sans-serif;  font-size: 150%;  color: #72582c;  margin-bottom: 0px; margin-top: 36px; padding: 0px; font-weight: bold; }

p.boardmember_blurb {   }

span.YNA_role { padding-left: 18px; color: #b0986c; }

img.boardmember_headshot_L { width: 150px; float: left !important; padding: 0px !important; margin-right: 24px; margin-bottom: 48px; margin-top: 12px; border: 10px solid #72582c; border-radius: 20%;}

img.boardmember_headshot_R { width: 150px; float: right !important; padding: 0px !important; margin-left: 24px; margin-bottom: 48px; margin-top: 12px; border: 10px solid #72582c; border-radius: 20%; }



p.documentgroup { font-family: Arial,sans-serif;  font-size: 114%;  color: #72582c;  margin-bottom: 9px; margin-top: 32px; padding: 0px; font-weight: bold; border-top: 2px dotted #c7bcab; }

p.documentname { color: #006699; margin-top: 0px; padding-top: 0px; }

p.committee-tab { color: #72582c; }

.carolingbumpgreen { color: green; font-weight: bold; font-size: larger; }

.carolingbumpred { color: #d23338; font-weight: bold; font-size: larger; }

p.YNA_story_year { margin-top: 24px; border-bottom: solid 2px #72582c; }

p.YNA_story { }


p.topmenubar_item { font-size: 9pt; text-align: center; font-weight: bold; }


li.menu { text-align: right; }

li.bullet_spacing { margin-top: 9px; }

li.locallink { padding-bottom: 7px; }

.inactive { color: #72582c; font-variant: small-caps; }

img.yorkercover { width: 200px; height: 258px; margin-right: 10px; padding-right: 0px!important; padding-top: 0px !important; border: solid black 1px; }

img.captioned { margin-bottom: 6px; margin-right: 0px; padding: 0px; float: right; }

img.rounded { border-radius: 12px !important; }

img.picture_pad_left_bottom { margin-bottom: 9px; margin-left: 9px; }

img.thin_gold_border { border: 4px solid #ffa02f !important; border-radius: 12px !important; margin: 6px; }

img.thin_evergreen_border { border: 4px solid #006227 !important; border-radius: 12px !important; margin: 6px; }

.pdf_icon { width: 47px; height: 53px; text-decoration: none; float: right; }

.blockletter { background-color: #72582c !important; padding: 9px !important; font-weight: bold !important; font-family: Arial Black, Arial !important; color: white !important; !important; text-decoration: none !important; }

.entrynumber { padding: 9px; font-weight: bold; font-family: Arial Black, Arial;  }


/*================================================================================================*/
/*                                         Layout                                                 */
#masthead{
 padding: 10px 0px 0px 0px;
 border-bottom: 1px solid #cccccc;
 width: 100%;
}

#SiteName{
 margin: 0;
 padding: 0 0 0 10px;
}

#headlines{
 float:right;
 width: 20%;
 border-left: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 padding-right: 10px;
}

#content{
 float: left;
 width: 55%;
}

#content-panel{
 float: left;
 margin-right: 2px;
}

.feature{
 padding: 0px 0px 10px 10px;
 font-size: 80%;
}

.feature h3{
 padding: 30px 0px 5px 0px;
 text-align: center;
}

.feature img{
 float: left;
 padding: 10px 10px 0px 0px;
}

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 80%;
}

.story p{
	padding: 0px 0px 10px 0px;
}

hr.newsletteryearbreak { color: #b0986C; size: 1px; margin-top: 28px; width: 60%; margin-right: 40%; }

.indented { margin-left: 24px; }

iframe.menu { width: 185px; height: 600px; float: left; border: none; margin: 0px; padding: 0px; background-color: #e7e8af; text-align: right; }

/*================================================================================================*/
/*                              Menu and Device Friendly Display                                  */

#MenuRegion{
 float: left;
 width: 185px;
 margin: 0px;
 padding: 0px;
}

ul.MenuNav {
 text-align: right;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 185px;
 background-color: #e7e8af;
 position: fixed;
 height: 100%;
 overflow: auto;
}

ul.MenuNav li a {
 text-align: right;
 display: block;
 color: #000;
 padding: 8px 16px;
 text-decoration: none;
}
 
ul.MenuNav li a.active {
 text-align: right;
 background-color: #aa713c;
 color: white;
}

ul.MenuNav li a:hover:not(.active) {
 text-align: right;
 background-color: #a93226;
 color: white;
}

@media screen and (max-width: 1050px){
 ul.MenuNav {
 text-align: right;
  width:100%;
  height:auto;
  position:relative;
 }
 ul.MenuNav li a {
 text-align: right;
  float: left;
  padding: 15px;
 }
 div.content {margin-left:0;}
}

@media screen and (max-width: 400px){
 ul.MenuNav li a {
  text-align: right;
  margin-right: 8px;
  float: none;
 }
}

#MenuItems{
 position: relative;
 margin: 0px;
 padding: 0px;
 border-bottom: 1px solid #cccccc;
 font-size: 90%;
}

#MenuItems li {
	border-bottom: 1px solid #ccc; padding-top: 5px; padding-bottom: 5px;
}

#MenuItems h3{
 padding: 10px 0px 2px 10px;
}

#MenuItems a {
 display: block;
 padding: 2px 0px 2px 10px;
}

#MenuItems a:hover{
 background-color: #a93226;
}

div.content {
 margin-left: 25%;
 padding: 1px 16px;
 height: 1000px;
}

