/* css/main.css 20240307
 20240307 post election cleanup
 20240209 added larger and smaller classes
 20240205 separating out endorsers and letters in nav
 20240204 letters formatting
 20240201 supporters formatting
 20240131 letters changes
 20240131 fixing some missed .homeEvents -> #homeEvents changes
 20240130 adding organizations to supporters
 20240130 add sign up page
 20240127 add styling for flyer thumbnail on home page
 20240121 add Stripe to donate page
 20240112 more sidebar styling
 20240110 events image
 20240108 voter info page
 20231227 accomplishments page
 20231222 add styling for "you didn't check any boxes" error on ev page
 20231216 updates to get ready for 2024
 20210115 virtual coffee additions
 20210113 adding voting info to sidebar
 20191124 update social media icons
 20191123 added home page twitter feed
 20180404 post-election changes
 20171218 home page sidebar and FB changes
 20171214 news/letters additions
 20171209 PayPal and events changes
 */


/* colors
   logo blue: (0,58,99)
   logo red: (188, 20, 26)
 */

/*
   responsive breaks at 750, 970, and 1170px
 */


/* reset default margins / paddings */
*
{
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5
{
  margin: 1.5ex 0;
}

p
{
  margin: 1ex 0;
}

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

li
{
  margin: .75ex 0;
}

body
{
  line-height: 1.5;
  font-family: Raleway, Verdana, Helvetica, sans-serif;
  background-color: rgb(240,240,240);
}

/* default paragraph, bullet list, header,etc. font colors and sizes */
p
{ 
  color: rgb(32,32,32);
  /* font-size: 80%; */
}

li
{ 
  color: rgb(32,32,32);
  /* font-size: 80%; */
}

.embeddedList li
{
  font-size: 100%;  /* use this with embedded lists */
}

label
{ 
  color: rgb(32,32,32);
}

h1, h2, h3, h4, h5
{ 
  color: rgb(32,32,32);
}


/* links (except for nav) */
a
{
  color: rgb(40,0,200);
  text-decoration: none;
}

/* text bolding */
.boldText
{ 
  font-weight: bold;
}

.unBoldText
{ 
  font-weight: normal;
}

/* italics */
.italicsText
{
  font-style: italic;
}

/* underline */
.underlineText
{
  text-decoration: underline;
}

/* center */
.centerText
{
  text-align: center;
}

/* larger/smaller (use in span) */
.larger
{
  font-size: larger;
}
.smaller
{
  font-size: smaller;
}

/* draw attention text: red */
.specialAttention
{
  color: rgb(175,5,0);  /* red text */
}

/* clear everything at the bottom of a div */
.bottomOfDiv
{
  clear: both;
}

/* each page's content is framed within a fixed div in the browser window */
#pageWrapper
{
  /* fill to top/bottom of the browser window */
  margin-right: auto;
  margin-left: auto;
  width: 1170px;
  background-color: rgb(240,240,240);
  padding-bottom: 1ex;
}

/* 1170 < pixels: fill window horizontally */
@media screen and (max-width: 1190px) /* firefox on mac OS not reacting at 1170? */
/*@media screen and (max-width: 1170px) */
{
  #pageWrapper
  {
    width: 100%;
    margin: 0;
  }
} /* max-width 1170px */

#topstuff
{
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  margin: auto;
  margin: 0;
  background-color: rgb(0,58,99);
}

#topstuffBuffer /* to align rest of page after static header */
{
  height: 80px;
}

#topstuff #graphics
{
  width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

#topstuff img
{
  display: block;
  float: left;
  height: 80px;
}

#topstuff img#banner1
{
  height: 70px;
  margin-top: 7px;
  margin-right: 1%;
  margin-left: 7%;
}

#topstuff img#banner2
{
  height: 56px;
  margin-top: 12px;
  margin-bottom: 12px;
}

#topstuff img#banner3
{
  height: 60px;
  margin-top: 10px;
  margin-left: 1%;
}

#topstuff img#banner4
{
  height: 70px;
  margin-top: 7px;
  margin-left: 1%;
}

/* items moved below topstuff on narrow screens */
#topstuff2
{
  display: none;
  background-color: rgb(0,58,99);
}

#topstuff2 img#banner2a
{
  display: none;
  padding-left: 5%;
  padding-right: 5%;
  background-color: rgb(188,20,26);
}

#topstuff2 img#banner4a
{
  display: none;
}

@media screen and (max-width: 1170px)
{
  #topstuff #graphics { width: 100%; }
  #topstuff img {
    height: 70px;
    margin-top: 5px;
  }
  #topstuff img#banner1
  {
    height: 65px;
    margin-top: 9px;
    margin-left: 5%;
  }
  #topstuff img#banner2 {
    height: 50px;
    margin-top: 15px;
  }
  #topstuff img#banner3
  {
    height: 56px;
    margin-top: 12px;
  }
  #topstuff img#banner4
  {
    height: 65px;
    margin-top: 6px;
  }
}

@media screen and (max-width: 970px)
{
  #topstuff img {
    height: 60px;
    margin-top: 10px;
  }
  #topstuff img#banner1
  {
    height: 60px;
    margin-top: 12px;
  }
  #topstuff img#banner2 {
    height: 46px;
    margin-top: 17px;
  }
  #topstuff img#banner3
  {
    height: 50px;
    margin-top: 15px;
  }
  #topstuff img#banner4
  {
    height: 60px;
    margin-top: 12px;
  }
}

@media screen and (max-width: 875px)
{
  #topstuff img {
    height: 50px;
    margin-top: 15px;
  }

  #topstuff img#banner1
  {
    height: 50px;
    margin-top: 16px;
    margin-left: 9%;
  }
  #topstuff img#banner2 {
    height: 36px;
    margin-top: 22px;
  }
  #topstuff img#banner3
  {
    height: 40px;
    margin-top: 20px;
  }
  #topstuff img#banner4
  {
    height: 50px;
    margin-top: 15px;
  }
}

@media screen and (max-width: 750px)
{
  #topstuff { height: 60px; }
  #topstuff img#banner1
  {
    height: 60px;
    padding-top: 0;
    margin-top: 0;
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding-right: 12%;
  }
  #topstuffBuffer { height: 60px; }
  #topstuff img#banner2,
  #topstuff img#banner3,
  #topstuff img#banner4
  {
    display: none;
  }

  #topstuff2
  {
    width: 100%;
    display: block;
  }

  #topstuff2 img#banner2a,
  #topstuff2 img#banner3a,
  #topstuff2 img#banner4a
  {
    display: block;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
  }

  #topstuff2 img#banner4a
  {
    height: 30px;
  }
}

@media screen and (max-width: 570px)
{
  #topstuff img#banner1 { padding-right: 15%; }
}

@media screen and (max-width: 500px)
{
  #topstuff img#banner1 { padding-right: 18%; }
}

@media screen and (max-width: 400px)
{
  #topstuff img#banner1,
  #topstuff2 img#banner2a,
  #topstuff2 img#banner3a,
  #topstuff2 img#banner4a
  {
    float: right;
    padding: 0;
    margin-right: 5%;
  }

  #topstuff2 img#banner2a,
  #topstuff2 img#banner4a
  {
    margin-right: 6%;
  }
}


/* navigation menu (narrow screens) */
#menu
{
  display: none;
  height: 60px;
  float: left;
  background-color: rgb(0,58,99);
  text-align: left;
  cursor: pointer;
}

@media screen and (max-width: 750px)
{
  #menu { display: block; }
  nav { display: none; }
}

#menu p
{
  font-size: 125%;
  margin-top: 1.5ex;
  margin-left: 1em;
  color: rgb(250,250,250);
  text-shadow: 1px 1px 1px black;
}

/* navigation
   Appears as horizontal bar on wider screens, comes under Menu for small screens
 */
nav
{
  background-color: rgb(0,58,99);
  background: linear-gradient(rgba(0,58,99,0.95), rgba(0,116,188,0.6));
  position: fixed;
  top: 80px;
  text-align: center;

  /* wide screen defaults */
  width: 100%;
} /* nav */

nav ul
{
  list-style: none;

  /* wide screen defaults */
  position: relative; /* needed because absolute below is relative to first non-fixed
                         ancestor */
  display: inline-table;
  padding: 0;
}

nav ul li
{
  position: relative;
  float: left;
  margin-top: 1ex;
  margin-left: .5em;
  margin-right: .5em;
  font-size: 110%;
}

nav ul li a
{
  display: block;
}

/* navigation dropdown bits */
nav ul ul
{
  display: none;
  margin-top: 0;
  position: absolute;
  padding-bottom: .5ex;
  top: 100%;
  left: -1em;
  border-radius: 5px; /* round the corners */
  background: linear-gradient(rgba(0,58,99,0.95), rgba(0,116,188,0.8));
  width: 8em;
}

nav ul ul li,
nav ul ul ul li
{
  position: relative;
  float: none;
  text-align: center;
  font-size: 100%; /* don't increase again... */
}

nav ul ul li a,
nav ul ul ul li a
{
}

nav ul:after
{
  content: "";
  clear: both;
  display: block;
}

nav ul ul ul
{
  display: none;
  position: absolute;
  top: 0;
  left: 98%;
}

nav ul li ul li
{
  clear: both;
}

nav a,
nav li
{
  text-decoration: none;
  color: rgb(250,250,250);
  font-weight: normal;
  text-shadow: 1px 1px 1px black;
}

nav ul li a.dropdownClose
{
  display: none;
  float: right;
}

/*
nav .dropdownArrow
{
  display: none;
}
 */

#navBuffer /* to align rest of page after horizontal navigation bar */
{
  height: 65px;
}


@media screen and (max-width: 750px)
{
  nav
  {
    top: 60px;
    width: 15em;
    background: linear-gradient(rgba(0,58,99,1), rgba(0,87,149,0.9));
  }

  #navWrapper
  {
    height: auto;
    width: 100%;
  }

  navMenuHeader
  {
  }

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

  nav ul ul,
  nav ul ul ul
  {
    display: none;
    position: static;
    top: 0;
    font-size: 100%;
    margin: 0;
    padding: 0;
  }

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

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

  nav ul li a,
  nav ul li span.dropdownOpen
  {
    clear: both;
    float: left;
  }

  nav ul li a.dropdownClose
  {
    display: none;
    clear: none;
    float: left;
    padding-right: 1em;
  }

  nav ul ul li
  {
    clear: both;
    font-size: 100%;
  }

  nav ul ul li a,
  nav ul ul li span.dropdownOpen
  {
    padding: 1ex 0 1ex 2em;
  }

  nav ul ul ul li
  {
    clear: both;
    font-size: 100%;
  }

  nav ul ul ul li a,
  nav ul ul ul li span.dropdownOpen
  {
    padding: 1ex 0 1ex 3em;
  }

  #navBuffer /* to align rest of page after horizontal navigation bar */
  {
    display: none;
  }
} /* navigation - narrow screen */


/* navigation bar special effect for current link */
body#homePage a.homeLink,
body#aboutPage a.aboutLink,
body#aboutTeamPage a.aboutLink,
body#evPage a.evLink,
body#prioritiesPage a.prioritiesLink,
body#accomplishmentsPage a.accomplishmentsLink,
body#donatePage a.donateLink,
body#supportersPage a.supportersLink,
body#lettersPage a.lettersLink,
body#votePage a.voteLink,
body#contactPage a.contactLink,
body#signUpPage a.signUpLink
{
  font-weight: bold;
}


/* footer */

#footer
{
  margin-top: 1ex;
  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;
}


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


/* home page */
.homeMainContentBlock
{
/*
  width: 65%;
  padding: 0.5ex 1em;
  margin: 0;
  float: left;
 */

  width: 95%;
  margin: 0 auto;
}

.homeMainContentBlock
{
  overflow: hidden; /* gets bullets to line up if floated image present */
}

.homeSideContentBlock
{
  width: 25%;
  padding: 0.5ex 1em;
  margin: 0;
  float: left;
  border-left: .1em solid black;
  background-color: #f8f8f8;
}

.homeSideContentBlock h2,
.homeSideContentBlock hr
{
  margin: 2ex 0 0.5ex;
}

.bottomLawnSign
{
  display: block;
  clear: both;
  margin: 5ex auto 1ex;
  width: 25%;
}

/* events / office hours on home page */
#homeEvents,
#homeNews,
#homeVolunteer,
#homeOfficeHours,
#homeVoteInfo,
#homeCoffee
{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#homeEvents,
#homeNews
{
}

@media screen and (min-width: 751px)
{
  .newsItems,
  .eventItems
  {
    max-height: 70vh;
    overflow: scroll;
    padding-left: 1em;
    padding-right: 1em;
  }
}

#homeEvents h2,
#homeNews h2
{
  background-color: #256088;
  color: #FEFEFF;
  text-align: center;
  margin-top: 0;
  font-size: 175%;
}

#homeEvents h3,
#homeNews h3
{
  text-align: center;
}

.homeEventsImage,
.homeNewsImage,
.homeVolunteerImage
{
  display: block;
  margin: 2ex auto 0.5ex;
  width: 90%;
}

#homeVolunteer p
{
  font-size: 175%;
}

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

#homeOfficeHours p,
#homeEvents p.homeZoom
{
  margin: .5ex 0;
}

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

@media screen and (max-width: 750px)
{
  .homeMainContentBlock,
  .homeSideContentBlock
  {
    width: 95%;
    float: none;
    clear: both;
    border-right: none;
    border-left: none;
  }

  .homeMainContentBlock
  {
    padding: 0;
  }

  #homeEvents,
  #homeNews,
  #homeVolunteer,
  #homeOfficeHours
  {
    width: 100%;
  }

  .homeEventsImage,
  .homeNewsImage,
  .homeVolunteerImage
  {
    width: 70%;
  }
}

#homeHeadShot
{
  width: 30%;
  max-width: 250px;
  float: right;
  margin: 0 1em 1ex;
}

#homeFlyerThumb
{
  width: 30%;
  max-width: 250px;
  float: left;
  margin: .5ex 2em 1ex 0;
}

#homeFlyerThumb img
{
  width: 100%;
}

figcaption
{
  font-style: italic;
  text-align: center;
  font-size: small;
}

.sidebarButton
{
  text-align: center;
  margin-top: 3ex;
  margin-bottom: 1ex;
}

/*
.sidebarButton img
{
  display: block;
  margin-right: auto;
  margin-left: auto;
}
*/
/* facebook badge on sidebar */
.facebookFollowButton
{
  width: 60%;
}

/* twitter feed */
#homeTwitter
{
  margin: 0 auto;
}

/* endorse / volunteer page */

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

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

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

.endorseText p
{
  margin-top: .4ex;
}

.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
{ 
  border-radius: 15px;
  background: linear-gradient(rgba(0,58,99,1), rgba(0,116,188,0.9));
  color: rgb(240,240,240);
  font-size: 125%;
  cursor: pointer; /* hand-shaped cursor */
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: .5ex .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-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 */
.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 */
}

/* 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;
}

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

input#contactSubmit
{ 
  border-radius: 15px;
  background: linear-gradient(rgba(0,58,99,1), rgba(0,116,188,0.9));
  color: rgb(240,240,240);
  font-size: 125%;
  cursor: pointer; /* hand-shaped cursor */
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: .5ex .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 */

/* contact 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 */
}

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

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

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

input#zoomName,
input#zoomEmail
{
  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#zoomName:focus,
input#zoomEmail:focus
{ 
  background-color: rgb(240,240,240);
}

input#zoomPhone,
input#zoomDate
{ 
  visibility: hidden;
  display: none;
}

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

input#zoomSubmit
{ 
  border-radius: 15px;
  background: linear-gradient(rgba(0,58,99,1), rgba(0,116,188,0.9));
  color: rgb(240,240,240);
  font-size: 125%;
  cursor: pointer; /* hand-shaped cursor */
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: .5ex .5em;
}

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

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

  input#zoomName,
  input#zoomEmail
  {
    margin: 2ex .5em;
    width: 100%;
  }
} /* narrow screen */

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

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

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

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

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

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

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

p.zoomError
{ 
  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.zoomErrorInput
{
  color: rgb(175,5,0);  /* red text */
}

/* supporters page */

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

#supportersContent h1
{
  text-align: center;
}

#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 */
}

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

.supportersSecondLine
{
}

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

.supporterImage
{
  vertical-align: middle;
  height: 10ex;
}

#supporterOrganizations
{
  padding-bottom: 2ex;
  max-width: 700px;
  margin: 0 auto;
}

#supporterOrganizations p
{
  text-align: center;
  font-weight: bold;
  padding: 0;
}
  

/*
@media screen and (max-width: 750px)
{
  .supporterImage
  {
    width: 80%
  }
}
 */

.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: 860px)
{
  .supporters4Columns,
  .supporters2Columns,
  .supporters1Columns
  {
    display: none;
  }

  .supporters3Columns
  {
    display: block;
  }

  .supporterColumn
  { 
    width: 31%;
  }
}

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

  .supporters2Columns
  {
    display: block;
  }

  .supporterColumn
  { 
    width: 45%;
  }
}

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

  .supporters1Columns
  {
    display: block;
  }

  .supporterColumn
  { 
    width: 95%;
  }
}

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

/* donate page */
#donateContent
{
}

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

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

.donateColumn
{
  float: left;
  width: 44%;
}

.donateDivider
{
  float: left;
  width: 10%;
  text-align: center;
}

.donateDivider h3
{
  padding-top: 3ex;
}

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

.paypalSection form p
{
  clear: both;
  padding-top: 1ex;
}
 */

/* use same button styling for stripe and sign up page */
.stripeSection,
.signUpSection
{
}

.stripeSection .stripeButtons,
.signUpSection .signUpButtons
{
  width: 55%;
  margin: 2ex auto 0;
}

.signUpSection .signUpButtons
{
  width: 40%;
}

@media screen and (max-width: 750px)
{
  .signUpSection .signUpButtons
  {
    width: 75%;
    margin: 2ex auto 0;
  }
}

.stripeSection .stripeButton,
.signUpSection .signUpButton
{
  background: linear-gradient(rgba(0,58,99,0.95), rgba(0,116,188,0.8));
  display: block;
  float: left;
  width: 40%;
  max-width: 5em;
  margin: 0.5ex 0;
  padding: 0.5ex 0.5em;
  border-radius: 15px;
  cursor: pointer; /* hand-shaped cursor */
}

.signUpSection .signUpButton
{
  max-width: 8em;
}

.stripeSection .stripeButtonLeft,
.signUpSection .signUpButtonLeft
{
  clear: both;
}

.stripeSection .stripeButtonRight,
.signUpSection .signUpButtonRight
{
  float: right;
}

.stripeSection .stripeButtonCenter,
.signUpSection .signUpButtonCenter
{
  float: none;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.stripeButton p,
.signUpButton p
{
  color: rgb(240,240,240);
  text-align: center;
  font-weight: bold;
  font-size: 125%;
  margin: 0;
  padding-bottom: 0;
  line-height: 2ex;
}

.checkSection
{
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

/*
.paypalSection input.paypalButton
{
  display: block;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5ex;
  width: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;  hand-shaped cursor
}

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

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

input#donateEmployer,
input#donateOccupation
{ 
  float: left;
  background-color: rgb(220,220,220);
  font-size: 100%;
  width: 18em;
}

@media screen and (max-width: 1040px)
{
  input#donateEmployer,
  input#donateOccupation
  { 
    width: 100%;
  }
  .paypalSection input.paypalButton
  {
    width: 70%;
  }
}
*/

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

  .donateDivider
  {
    width: 100%;
    margin-top: 3ex;
    margin-bottom: 1ex;
  }
  
  .donateDivider h3
  {
    padding-top: 0;
    text-align: center;
  }
}

/* campaign team */

#campaignTeam
{ 
  clear: both;
}

#campaignTeam h1
{ 
  text-align: center;
}

#campaignTeam p
{ 
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}


/* news / letters page */
/* news and letters formatting - multiple stories on page */
#newsPage h1,
#lettersPage h1
{
/*  text-align: center; */
}

#newsLettersMultiStory
{ 
/*  font-family: "Times New Roman", Times, serif; */
  /* font-size: 105%; */
  margin-left: auto;
  margin-right: auto;
/*  width: 850px; */
}

#newsLettersMultiStory h1
{
  font-size: 140%;
  text-align: center;
}

#newsLettersMultiStory h2
{ 
  font-size: 135%;
}

#newsLettersMultiStory h2 a
{ 
  font-weight: bold;
}

#newsLettersMultiStory p
{ 
  margin-left: 0;
}

.newsLetterColumn
{ 
  float: left;
  margin-right: 10px;
  margin-left: 0px;
  /*  width: 270px; */
  width: 30%;
}

.newsLetterBlock
{ 
  margin: 5px;
  margin-bottom: 25px;
}

.newsLetterBlock h1
{ 
  font-size: 125%;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.newsLetterBlock h2
{ 
  font-size: 115%;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.newsLetterBlock p
{ 
  text-align: justify; /* newspaper-like, stretch to margins */
}

.newsLetterByline
{ 
  font-weight: bold;
  font-size: 75%;
  margin: 0;
}

/* news and letters formatting - single story on page */
#newsLettersSingleStory
{ 
}

#newsLettersSingleStory h1
{ 
  font-size: 125%;
  text-align: center;
}

#newsLettersSingleStory h2
{ 
  font-size: 110%;
  text-align: center;
}

#newsLettersSingleStory p
{ 
  text-align: justify;
}

#newsLettersSingleStory li
{ 
  margin-bottom: 1ex;
  list-style-type: disc;
}

.newsLettersTeaser
{
}

.newsLettersPopUpStory
{
  display: none;
  border-bottom: 2px solid;
  margin-bottom: 2ex;
}

.letterSignature
{ 
  font-weight: bold;
  margin: 0;
}

.letterSignatureMulti
{ 
  font-weight: bold;
  margin: 0;
  margin-top: 1ex;
}

/* for link to original story */
.linkToOriginal
{
  clear: both;
  margin-left: auto;
  margin-right: auto;
/*  margin-top: 2ex; */
/*  border-top: 2px solid; */
  padding-top: 1ex;
  padding-bottom: 1ex;
  text-align: center;
  font-size: 80%
}

/* news and letters: if a multiple line headline is needed */
.headlineFirstLine
{
  margin-bottom: 0;
  padding-bottom: 0;
}

.headlineMidLine
{
  margin-bottom: 0;
  padding-bottom: 0;
  margin-top: 0;
  padding-top: 0;
}

.headlineLastLine
{
  margin-top: 0;
  padding-top: 0;
}

/* about page */
#aboutPage #aboutPhoto
{
  float: right;
  margin: 1ex 2em;
  width: 200px;
}

@media screen and (max-width: 750px)
{
  #aboutPage #aboutPhoto
  {
    width: 30%;
  }
}

/* accomplishments page */
#accomplishmentsPage ol
{
  margin-left: 2em;
}

#accomplishmentsPage ol li
{
  font-weight: bold;
}

#accomplishmentsPage ol li p
{
  font-weight: normal;
  margin-left: 2em
}

#accomplishmentsPage ol > li::marker {
  font-weight: bold;
}

/* how to vote page */

#votePage h1
{
  font-size: 200%;
}
#votePage h2
{
  margin-top: 0;
  font-size: 180%;
  color: #BD141B
}
/*
#votePage h2 span
{
  background-color: #256088;
  color: #FEFEFF;
  padding: 0 1em;
}
*/
#votePage h3
{
  font-size: 160%;
  color: #BD141B
}
#votePage h4
{
  font-size: 140%;
}
#votePage h5
{
  font-size: 120%;
}

.votePageBlock
{
  clear: both;
  margin: 2ex 0;
}

.votePageImage
{
  float: left;
  width: 20%;
}

.votePageImage img
{
  display: block;
  margin: 0 auto;
  width: 80%;
}

.votePageText
{
  float: left;
  width: 75%;
}

/* sign up page */
#signUpPage .volunteerBanner
{
  display: block;
  width: 100%;
}


@media screen and (max-width: 750px)
{
  .votePageImage,
  .votePageText
  {
    width: 100%;
    float: none;
  }

  h1, h2
  {
    text-align: center;
  }

  .votePageBlock
  {
    margin: 5ex 0;
  }
}

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

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