/* Styling for LenihanForLexington.org 

css/style.css 20240307
 20240307 post election cleanup
 20240214 added sidebar image styling
 20240209 adding organizations
 20240130 change nav background to banner color
 20240117 sidebar styling
 20240109 catch case where no boxes are checked
 20240108 2024 content
 20231222 style for home content block h2
 20230911 padding around submit buttons
 20190429 reCaptcha for contact page
 20171218 fix alignment of topstuff on narrow screens, javascript error messages
 20171215 multiple homeContent blocks (fixed width)

   colors
   lawn sign medium blue: #005198 (0 81 152)
   lawn sign light blue:  #83b7e3 (132 184 227)

 */

/* HTML5 fixup for new block elements that may be unrecognized by older browsers */
article, aside, figure, figcaption, footer,
header, main, nav, section, summary
{
  display: block;
}

/* override browser defaults for margins, padding */

html, body, h1, h2, h3, h4, p, hr, br, ul, li
{
  margin: 0;
  padding: 0;
}

body
{
  line-height: 1.5;
}

h1, h2, h3, h4
{
  margin: 1ex 0;
  color: #005197;
}

p
{
  margin: 1em 0;
}

ul
{
  margin: 1em 0;
  padding: 0 0 0 4ex;
}

li
{
  margin: .75em 0;
}

body
{
  color: black;
  /* background-color: #F3F2EB; */
  /* background-color: #FBFBFB; */
  background-color: #D3E5F3;
  font-family: verdana, helvetica, arial, sans-serif;
}

a
{
  text-decoration: none;  /* no underline */
  color: #336699;
}
/* content width default - for > 1000 pixel windows */

/* each page's content is framed within a fixed div in the browser window */
#pageWrapper
{
  /* fill to top/bottom of the browser window */
  position: relative;  /* so absolute can be used within */
  margin: 0;
  padding: 0;
  margin-right: auto;
  margin-left: auto;
  width: 1000px;
  background-color: #FBFBFB;
}

/* 1000 < pixels: fill window horizontally */
@media screen and (max-width: 1000px)
{
  #pageWrapper
  {
    width: 100%;
    margin: 0;
  }
} /* max-width 1000px */


/* top of all web pages */

#topstuff
{
  clear: both;
  position: relative;  /* so we can position absolute within */
  width: 100%;
  margin: 0;
/*  padding-top: 3ex; */ /* add in this padding for sticky nav bar */
}

#topstuff a
{
  text-decoration: none;
}

#topstuffBuffer /* to align rest of page after static header (narrow screen) */
{
  height: 0;
}

#headShot
{
  display: block;
  float: left;
  width: 20.35%;
}

#banner
{
  display: block;
  float: right;
  width: 79.65%;
}

#lawnSign
{
  display: none;
}

/* narrow phone / iPod etc. screens (700px and under) */
@media screen and (max-width: 700px)
{
  #topstuffBuffer /* to align rest of page after static header (narrow screen) */
  {
    height: 57.75px;
  }

  #headShot
  {
    clear: both;
    margin: /* 4ex */ 0;
    bottom: 0;
    width: 42.81%;
 }
  #lawnSign
  {
    display: block;
    float: right;
    margin: /* 4ex */ 0;
    bottom: 0;
    width: 57.19%;
  }

  #banner
  {
    display: none;
  }
} /* narrow screen */

/* navigation */
nav
{
  z-index: 10;
/*  position: fixed; */  /* uncomment for sticky nav bar */
  width: 1000px;

  /* 
  position: fixed;
  top: .1ex;
  right: 10%;
*/
  background-color: #005197;
/*  background-color: #83b7e3; */
}

@media screen and (max-width: 1000px)
{
  nav
  {
    width: 100%;
  }
}


/*
@media screen and (min-width: 1200px)
{
  nav
  {
    right: 20%;
  }
}

@media screen and (min-width: 1650px)
{
  nav
  {
    right: 30%;
  }
}
 */

#navWrapper
{
}

#navLinks
{
  text-align: center;
}

#navMenuHeader
{
  display: none;
}

nav li,
nav a,
nav p
{
  /* color: #F3F2EB; */
  color: #FFFFEB;
  text-decoration: none;
  /* font-weight: bold; */
}

nav p
{
  text-align: center;
}

nav ul
{
  margin: 0;
  padding: 0;
  /* padding-top: .5ex; */
  list-style: none;
  position: relative; /* needed because absolute below is relative to first non-fixed
                         ancestor - if we use it.... */
  display: inline-table;
}

nav ul li
{
  position: relative;
  float: left;
  /* background-color: #005198; */
/*
  background-color: #83b7e3;
  border-radius: .3em;
  padding: .2ex .4em .5ex .4em;
  margin: 0 .1em;
 */
  font-size: 100%;
}

/*
@media screen and (max-width: 800px)
{
  nav { right: 5%; }
  nav ul li { padding-left: .3em; padding-right: .3em; font-size: 99%; }
}
*/

nav ul li a
{
/*
  display: block;
 */
}

/* wide computer / tablet screens */
@media screen and (min-width: 701px)
{
  #navMenuHeader { display: none; }
}

/* narrow phone / iPod etc. screens (700px and under) */
@media screen and (max-width: 700px)
{
  nav
  {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(0);

    background-color: #83b7e3;
    /* border-radius: .3em; */
    padding: 0;
    width: 100%;
    text-align: left;
    margin-left: 0;
  }

  #navWrapper
  {
/*    height: auto; */
    padding: 0;
    margin: 0;
    width: 100%;
  }

  #navMenuHeader
  {
    display: block;
    cursor: pointer;
    font-size: 110%;
    margin: 0;
    padding: 0;
  }

  #navLinks
  {
    clear: both;
    text-align: left;
  }

  nav ul
  {
    position: static;
    display: none;
    float: none;
    clear: both;
    margin: 0;
    padding: 0;
  }

  nav ul li
  {
    float: none;
    clear: both;
    border-radius: 0;
    display: block;
    font-size: 120%;
    padding: .5ex 0;
    margin: 0;
    padding: 0;
  }

  nav a,
  nav ul li
  {
    padding: 1ex 0 1ex 1em;
  }

  nav ul li a
  {
    clear: both;
    float: left;
  }
} /* 700px and less */

/* navigation bar special effect for current link */
body#homePage a.homeLink,
body#aboutPage a.aboutLink,
body#evPage a.evLink,
body#donatePage a.donateLink,
body#supportersPage a.supportersLink,
body#contactPage a.contactLink
{
  font-weight: bold;
}


/* basic information section of a page */
#info
{
  margin: 1ex 2em;
  clear: both;
  /* float: left; */
}


/* home page */
#homeContent
{
  width: 100%;
}

#homeContent hr
{
  height: 1px;
  background-color: #005197;
}

.homeContentBlockMain
{

/*
   margin: 0;
   width: 60%;
   padding: 0.5ex 1em;
   float: left;
 */
  margin: 0 auto;
  width: 95%;
  padding: 0;
}

.homeContentBlockSidebar
{
  width: 30%;
  padding: 0.5ex 1em;
  margin: 0;
  float: right;
  background-color: #FFFFFF;
}

.homeContentBlockSidebar img
{
  display: block;
  width: 80%;
  margin: 1ex auto;
}

.homeContentBlock h2
{
  margin: 1ex 0;
}

.homeContentBlock h3
{
  margin: 2ex 0;
}

.homeContentBlockSidebar h2
{
  text-align: center;
}

@media screen and (max-width: 700px)
{
  .homeContentBlockMain,
  .homeContentBlockSidebar
  {
    width: 95%;
    padding: 0;
    float: none;
    clear: both;
  }
}

/* events on home page */
#homeEvents
{
}

#homeEvents p
{
  line-height: 1.2;
  margin: .5ex 0 .5ex 3em;
}

#homeEvents p.eventFirst
{
  margin-top: 1ex;
  margin-left: 0;
  font-weight: bold;
}


/* about page */
#aboutContent
{
  width: 95%;
  margin: 0 auto;
}

/* endorse / volunteer page */

.endorseCheckBox
{
  width: 5%;
  float: left;
  margin: 2ex 0 0 0;
}

.endorseCheckBox input
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.endorseText
{
  width: 92%;
  float: right;
}

.evEndorseRadioLabel /* for radio button labels */
{
  font-weight: bold;
  margin-left: 1em;
  margin-right: 1em;
}

.evEndorseNameLabel,
.evEndorsePublicLabel,
.evContactLabel
{ 
  margin-left: 2em;
  float: left;
  clear: left;
}

.evContactLabel
{ 
  width: 12em;
}

input#evEndorseName,
input#evFirstName,
input#evMiddleName,
input#evLastName,
input#evSuffix,
input#evAddress,
input#evZip,
input#evPhone,
input#evEmail
{ 
  background-color: rgb(220,220,220);
  font-family: "Gill Sans", Tahoma, Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: rgb(32,32,32);
  /* margin-top: -2px; */
  width: 45%;
  margin-right: 2em;
  margin-left: 2em;
}

input#evEndorseName
{
  width: 40%;
}


.volunteerChecklist label
{
  margin-left: 2em;
}


/* effect for input field when being typed in */
#evContactSection input:focus,
#evEndorseFields input:focus
{ 
  background-color: rgb(240,240,240);
}

input#evMessage
{ 
  visibility: hidden;
  display: none;
}

/* submit button */
.evButtons
{ 
  clear: both;
}

input#evSubmit
{ 
  font-family: "Gill Sans", Tahoma, Arial, Helvetica, sans-serif;
  border-radius: 15px;
  background-color: rgb(20,13,71);
  background: linear-gradient(rgba(40,26,142,1), rgba(20,13,71,1));
  background: linear-gradient(rgba(50,33,163,1), rgba(20,13,71,1));
  background: linear-gradient(rgba(60,39,213,1), rgba(20,13,71,1));
  color: rgb(240,240,240);
  font-size: 125%;
  cursor: pointer; /* hand-shaped cursor */
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-right: .5em;
  padding-left: .5em;
}

/* narrow screen */
@media screen and (max-width: 700px)
{
  .evEndorseNameLabel,
  .evEndorsePublicLabel,
  .evContactLabel
  { 
    margin-left: .5em;
    float: none;
    clear: none;
  }

  .evEndorseRadioLabel /* for radio buttons */
  {
    display: block;
    clear: both;
    margin: 2ex .5em;
  }

  input#evEndorseName,
  #evContactSection input
  {
    margin: 2ex .5em;
    width: 100%;
  }

  .volunteerChecklist label
  {
    margin-left: .5em;
  }

  .volunteerChecklist p
  {
    margin: 1.5ex 0;
  }
} /* narrow screen */

/* endorse/volunteer form error messages */
/* javascript */
#evErrorMessage
{
  /* margin-left: 5em; */
  margin-bottom: 0;
  padding-bottom: 0;
  display: none;
}

#evErrorMessage h2
{
  color: rgb(175,5,0);  /* red text */
}

#evCheckboxErrorMessage
{
  margin-left: 5em;
  margin-bottom: 0;
  padding-bottom: 0;
  display: none;
}

#evCheckboxErrorMessage p
{
  margin: 2ex 0 4ex 0;
  color: rgb(175,5,0);  /* red text */
}

#ev label.error
{
  color: rgb(175,5,0);  /* red text */
  font-weight: bold;
  display: block;
  margin-left: 16em;
  width: 40em;
}

#ev input.error,
#ev select.error {
  color: rgb(175,5,0);  /* red text */
}

/* narrow screen */
@media screen and (max-width: 700px)
{
  #ev label.error
  {
    margin-left: .5em;
    width: 80%;
  }
} /* narrow */


/* PHP */
.evErrors
{
  margin-left: 2em;
}

.evErrors p
{ 
  color: rgb(175,5,0);  /* red text */
  font-weight: bold;
}

p.evError
{ 
  text-indent: 60px;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* change the label color if the field was in error */
label.evErrorInput
{
  color: rgb(175,5,0);  /* red text */
}


/* contact page */
.contact
{
  margin-top: 2ex;
}

.contact form
{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.contactLabel
{
  margin-left: 2em;
  float: left;
  clear: left;
  width: 8em;
}

input#contactName,
input#contactEmail,
input#contactSubject,
textarea#contactMessage
{
  background-color: rgb(220,220,220);
  font-family: "Gill Sans", Tahoma, Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: rgb(32,32,32);
  width: 55%;
  /*
  margin-right: 2em;
  margin-left: 2em;
   */
}

/* effect for input field when being typed in */
input#contactName:focus,
input#contactEmail:focus,
input#contactSubject:focus,
textarea#contactMessage:focus
{ 
  background-color: rgb(240,240,240);
}

input#contactPhone
{ 
  visibility: hidden;
  display: none;
}

/* reCAPTCHA */
.g-recaptcha > div
{
  margin: 1ex auto;
}

/* submit button */
.contactButtons
{ 
  clear: both;
}

input#contactSubmit
{ 
  font-family: "Gill Sans", Tahoma, Arial, Helvetica, sans-serif;
  border-radius: 15px;
  background-color: rgb(20,13,71);
  background: linear-gradient(rgba(40,26,142,1), rgba(20,13,71,1));
  background: linear-gradient(rgba(50,33,163,1), rgba(20,13,71,1));
  background: linear-gradient(rgba(60,39,213,1), rgba(20,13,71,1));
  color: rgb(240,240,240);
  font-size: 125%;
  cursor: pointer; /* hand-shaped cursor */
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: .5em;
  padding-right: .5em;
}

/* narrow screen */
@media screen and (max-width: 700px)
{
  .contact form
  {
    width: 100%;
  }

  .contactLabel
  { 
    margin-left: .5em;
    float: none;
    clear: none;
  }

  input#contactName,
  input#contactEmail,
  input#contactSubject,
  textarea#contactMessage
  {
    margin: 2ex .5em;
    width: 100%;
  }
} /* narrow screen */

/* endorse/volunteer form error messages */
/* javascript */
#contactErrorMessage
{
  /* margin-left: 5em; */
  margin-bottom: 0;
  padding-bottom: 0;
  display: none;
}

#contactErrorMessage h3
{
  color: rgb(175,5,0);  /* red text */
}

#contact label.error
{
  color: rgb(175,5,0);  /* red text */
  font-weight: bold;
  display: block;
  margin-left: 10em;
  width: 20em;
}

#contact input.error,
#contact select.error {
  color: rgb(175,5,0);  /* red text */
}

/* narrow screen */
@media screen and (max-width: 700px)
{
  #contact label.error
  {
    margin-left: .5em;
    width: 80%;
  }
} /* narrow */

/* PHP */
.contactErrors
{
  margin-left: 2em;
}

.contactErrors p
{ 
  color: rgb(175,5,0);  /* red text */
  font-weight: bold;
}

p.contactError
{ 
  text-indent: 3em;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* change the label color if the field was in error */
label.contactErrorInput
{
  color: rgb(175,5,0);  /* red text */
}


/* donate page */

.treasurerAddress
{
  margin-left: 2em;
  line-height: 1.25;
}

.treasurerAddress p
{
  margin-top: 0;
  margin-bottom: 0;
}

.paypalSection
{
  clear: both;
/*  margin-left: auto;
   margin-right: auto; */
  width: 45%;
}

@media screen and (max-width: 950px)
{
  .paypalSection
  {
    width: 50%;
  }
}

@media screen and (max-width: 900px)
{
  .paypalSection
  {
    width: 60%;
  }
}

@media screen and (max-width: 900px)
{
  .paypalSection
  {
    width: 80%;
  }
}

@media screen and (max-width: 700px)
{
  .paypalSection
  {
    width: 100%;
  }
}

.paypalButton
{
  display: block;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  background: transparent;
  cursor: pointer; /* hand-shaped cursor */
}

.paypalImage
{
  margin-top: 1ex;
  width: 221px;
  height: 71px;
}

.paypalSection p
{
  font-weight: bold;
  font-style: italic;
  margin-top: 1ex;
  margin-bottom: 1ex;
}

.paypalSection form
{
  margin-top: 1ex;
}

.paypalSection label
{
  clear: both;
  float: left;
  font-weight: bold;
  margin-top: .5ex;
  margin-bottom: .5ex;
}

.paypalSection input
{
  margin-top: .5ex;
  margin-bottom: .5ex;
}

input#donateEmployer,
input#donateOccupation
{ 
  float: right;
  background-color: rgb(220,220,220);
  font-family: "Gill Sans", Tahoma, Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: rgb(32,32,32);
  width: 18em;
}

@media screen and (max-width: 920px)
{
  input#donateEmployer,
  input#donateOccupation
  { 
    float: none;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}

input#donateEmployer:focus,
input#donateOccupation:focus
{ 
  background-color: rgb(240,240,240);
}


/* supporters page */

/* supporter listings */
#supportersContent
{ 
  width: 100%;
  padding: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 2ex;
}

#supportersContent h2
{ 
  text-align: center;
  margin-bottom: 0;
}

#supportersContent h3
{ 
  text-align: center;
}

#supportersContent p
{
  padding: 0;
  margin: 0;
  padding-left: 1em; /* for hanging indent */
}

#supporterOrganizations
{
  padding-top: 1ex;
  padding-bottom: 2ex;
}

#supporterOrganizations p
{
  text-align: center;
}

.supportersFirstLine
{
  text-indent: -1em; /* for hanging indent */
}

.supportersSecondLine
{
}

.supporterBlock
{
  width: 100%;
  float: left;
  clear: both;
}


.supporterColumn
{ 
  float: left;
  width: 23%;
  padding: 0;
  padding-left: .5em;
  padding-right: .5em;
  margin: 0;
  margin-bottom: 2ex;
}

/* responsive column layout */

/* default display 4 columns */
.supporters3Columns,
.supporters2Columns,
.supporters1Columns
{
  display: none;
}

@media screen and (max-width: 900px)
{
  .supporters4Columns,
  .supporters2Columns,
  .supporters1Columns
  {
    display: none;
  }

  .supporters3Columns
  {
    display: block;
  }

  .supporterColumn
  { 
    width: 31%;
  }
} /* < 890px */

@media screen and (max-width: 800px)
{
  .supporters4Columns,
  .supporters3Columns,
  .supporters1Columns
  {
    display: none;
  }

  .supporters2Columns
  {
    display: block;
  }

  .supporterColumn
  { 
    width: 45%;
  }
} /* < 750px */

@media screen and (max-width: 700px)
{
  .supporters4Columns,
  .supporters3Columns,
  .supporters2Columns
  {
    display: none;
  }

  .supporters1Columns
  {
    display: block;
  }

  .supporterColumn
  { 
    width: 95%;
  }
} /* < 700px */


/* don't display anything that has to do with solicitation
   on the supporters page */
#supportersPage .solicitation
{
  display: none;
}



/* footer */

#footer
{
  margin-top: 3ex;
  margin-bottom: 0;
  clear: both;
}

#copyright
{
  color: black;
  background-color: #f0f0f0;
  border: .1em solid black;
  font-size: 92%;
  text-align: center;
  line-height: 1.25em;
  margin: 1ex 0 0 0;
  padding: 1ex 1em;
  clear: both;
}



/* general purpose hidden content */
.hideMe
{
  display: none;
}

/* misc */
.unBoldText
{ 
  font-weight: normal;
}


/* narrow / wide screen hide / show */
@media screen and (min-width: 701px)
{
  /* hide things that should only show on narrow screens */
  .showNarrow
  {
    display: none;
  }
}

@media screen and (max-width: 700px)
{
  /* hide things that should only show on wider screens */
  .showWide
  {
    display: none;
  }
}


/* general purpose "clear both" div */
.bottomOfDiv
{
  clear: both;
}