/* widp-css */

/*** fonts */
body {
   font-family:      Palatino, serif;
   font-size:        16px;
}

/*** structural */
h1, .h1 {
   font-size:        2.5em;
   font-weight:      lighter;
   font-style:       italic;
   color:            #143D66;
}
h2, .h2 {
   font-size:        1.75em;
   color:            #133149;
}
h3, .h3 {
   font-size:        1.375em;
   color:            #133149;
}
h4, .h4 {
   font-size:        1.25em;
   font-weight:      lighter;
   color:            #133149;
   margin-top:       0;
   margin-bottom:    0;
}
h5, .h5 {
   font-size:        1.375em;
   color:            #133149;
   margin-bottom:    5px;
}
h6, .h6 {
   font-size:        1.125em;
   color:            #133149;
}

/*** general elements */
/*quote*/
q { 
	display:          inline;
   font-size:        1.25em;
   font-style:       italic;
   color:            #133149; 
}
q:before {
    content:         no-open-quote;
}
q:after {
    content:         no-close-quote;
}

hr.style1{
	border-top:       12px solid #BBC7D3;
}
hr.style2{
	border-top:       4px solid #D6D7D8;
}

hr.style3{
	border-top:       1px solid #D6D7D8;
}

/*links*/

a:link {
    color:           #739F3A;
    text-decoration: underline;
}

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

a:hover {
    color:           #739F3A;
    text-decoration: underline;
    font-weight:     bold;
}

a:active {
    color:           #739F3A;
    text-decoration: underline;
    font-weight:     bold;
}



/*** colors */

.widp-header-blue {
   background-color: rgb(16,60,103);
}
.widp-header-blue-text {
   color:            rgb(16,60,103);
}
.widp-footer-blue {
   background-color: rgb(20,49,71);
}
.widp-footer-blue-text {
   color:            rgb(20,49,71);
}
.widp-hover-green {
   background-color: rgb(162,219,70);
}
.widp-hover-green-text {
   color:            rgb(162,219,70);
}
.widp-header-hbar-blue {
   background-color: rgb(187,199,214);
}
.widp-hero-area-gray {
   background-color: rgb(241,241,241)
}

.widp-body-text, .widp-body, .widp-panel-text, .widp-body-li  {
   font-size:        1em;
   color:            black;
   line-height:      1.5;
}

/*** responsive breakpoints */
@media (min-width: 1024px) {
   .widp-header-logo, .widp-header-menu-mobile, .widp-header-menu-wide {
      display:        inline-block;
   }
   .widp-header-menu-wide {
      margin-top:       50px;
   }
   .widp-header-menu {
      display:          inline-block;
   }
   .widp-header-menu-item {
      display:          inline-block;
   }
   .widp-current.widp-header-menu-item  > a {
      color:            rgb(16,60,103);
   }
   .widp-header-menu-divider {
      display:          none;
   }
   .widp-header-menu-item:hover .widp-header-menu-subitem {
      margin-left:      -5px;
   }
   .widp-current, .widp-header-menu-item:hover, .widp-header-menu-subitem-item:hover {
      background-color: rgb(162,219,70);
      color:            rgb(16,60,103);
   }
   .widp-header-menu-subitem a:hover {
      color:            rgb(16,60,103);
   }
   .widp-header-menu-item:hover .widp-header-menu-subitem {
      left:             auto;
      background-color: rgb(16,60,103);
      width:            300px;
      margin-top:       5px;
   }
   .widp-header-menu-icon {
      display:          none;
   }
   .widp-hero-image-wide {
      display:          inline-block;
   }
   .widp-hero-image-mobile {
      display:          none;
   }
   .widp-content-panel {
      width:            192px;
   }
   .widp-hero-half {
      width:            50%;
   }
}
   .widp-page-content {
      margin-bottom:    -12.8em;
   }
   .widp-page-content {
      min-height:       calc(100% - 10.5em);
   }

@media (max-width: 1023px) {
   body {
      font-size:        32px;
   }
   .widp-header-menu-wide:not(.widp-header-menu-show) {
      display:          none;
   }
   .widp-header-menu-wide.widp-header-menu-show {
      display:          block;
      position:         absolute;
      background-color: rgb(16,60,103);
      color:            white;
      width:            calc(100% - 15px);
      top:              185px;
   }
   .widp-hero-image-mobile {
      display:          inline-block;
   }
   .widp-header-menu-divider {
      margin-left:      -40px;
   }
   .widp-header-logo {
      margin-right:     5%
   }
   .widp-header-menu-mobile {
      display:          inline-block;
      margin-left:      5%
   }
   .widp-header-menu-item, .widp-header-menu-subitem {
      display:          block;
      text-align:       left;
   }
   .widp-current {
      font-weight:      bold;
   }
   .widp-current li {
      font-weight:      normal;
   }

   .widp-header-menu-item:hover .widp-header-menu-subitem {
      margin-left:      20px;
   }
   .widp-menu-accordion {
      width:            100%;
      position:         relative;
      padding:          10px 0;
      margin:           20px 0;
   }
   .widp-menu-accordion .widp-accordion-button {
      right:            40px;
      font-size:        48px;
   }
   .widp-menu-accordion.widp-accordion-open .widp-accordion-button::before {
      content:          "\2013";    /* n-dash */
   }
   .widp-menu-accordion .widp-accordion-button::before {
      content:          "+";
   }
   .widp-menu-accordion.widp-accordion-open .widp-header-menu-subitem {
      position:         relative;
      left:             auto;
   }
   
   .widp-hero-image-wide {
      display:          none;
   }
   .widp-hero-image-mobile {
      display:          inline-block;
   }
   .widp-content-panel {
      width:            80%;
   }
   .widp-hero-half {
      width:            100%;
   }
}
/*** full height window (footer sticks to bottom)
   several things necessary - all elements parents to expandable content area must have height 100%
   expandable area has height calc(100% - footer height), margin-bottom: -footer height
 */
html, body, .widp-page {
   height:           100%;
}

.widp-body-li {
   margin-bottom:    10px;
   line-height:      1.4;
}

/*** page header   */

.widp-header {
   padding-top:      10px;
   height:           110px;
   padding-bottom:   10px;
}

.widp-header-content {
   /* max-width:        1024px; */
   margin-left:      auto;
   margin-right:     auto;
   text-align:       center;
   /*
   display:          flex;
   justify-content:  space-evenly;
   */
}

.widp-header-logo {
   display:          inline-block;
   padding-bottom:   10px;
}
.widp-header-logo img {
   height:           100px;
}

.widp-header-menu-icon {
   color:            rgb(162,219,70);
   text-align:       center;
   font-size:        26px;
   cursor:           pointer;
   width:            60px;
}
.widp-header-menu-icon-open {
   transform:        rotate(90deg);
}
.widp-header-menu-icon img {
   margin-top:       5px;
   margin-left:      1px;
}

/* make the header and logo bigger on mobile */
@media (max-width: 1023px) {
   .widp-header {
      height:           185px;
   }
   .widp-header-logo {
      padding-top:      10px;
   }
   .widp-header-logo img {
      height:           150px;
   }
   .widp-header-menu-icon {
      font-size:        36px;
      width:            100px;
   }
   .widp-header-menu-mobile {
      padding-top:      20px;
   }
}

.widp-header-menu {
	list-style:			none;
   color:            white;
   vertical-align:   bottom;
   /* font-size:        1.125em; */
}
.widp-menu-accordion-title {
   cursor:           pointer;
}
.widp-header-menu-item {
   padding:          5px;
}
.widp-header-menu-item a {
   text-decoration:  none;
}
.widp-header-menu-item:not(:first-child) {
   margin-left:      5px;
}
.widp-header-menu-item{
   font-size:        1.1em;
}

.widp-header-menu-subitem {
}

.widp-header-menu-subitem { /* technique from http://www.htmldog.com/articles/suckerfish/dropdowns/ */
   position:         absolute;
   left:             -9999px;
   line-height:      2;
   padding-left:     10px;
   padding-right:    10px;
   padding-top:      15px;
}
.widp-header-menu-item a, .widp-header-menu-subitem a {
   text-decoration:  none;
   color:            white;
   padding:          5px 0;
   
}
.widp-header-menu-subitem li {
   list-style:       none;
}
.widp-header-border-bar {
   background-color: #bbc7d3;
   height:           12px;
   width:            100%;

}

/*** content area   */
@media (min-width: 1024px) {
   .widp-content-text {
      max-width:        670px;
      margin-left:      auto;
      margin-right:     auto;
   }
}
@media (max-width: 1023px) {
   .widp-content-text {
      margin-left:      10px;
      margin-right:     10px;
   }
}

.widp-page-content {
   /* max-width:        1024px; */
   margin-left:      auto;
   margin-right:     auto;
   background-color: white;
}

.widp-hero-image-wide, .widp-hero-image-wide img, .widp-hero-image-mobile, .widp-hero-image-mobile img, .widp-content-panel-area {
   width:            100%;
}
.widp-content-separator {
   height:           2px;
   background-color: lightgray;
   width:            100%;
}
.widp-content-separator-5 {
   height:           5px;
   background-color: lightgray;
   width:            100%;
}
.widp-content-panel-array {
   text-align:       center;
}
.widp-content-panel {
   display:          inline-block;
   vertical-align:   top;
   background-color: white;
   margin:           10px;
   border:           solid 4px #bbc7d3;
}
.widp-content-panel img {
   width:            100%;
}
.widp-content-panel h4 {
   text-align:       left;
}
.widp-panel-text {
   margin-top:       5px;
   text-align:       left;
}
.widp-content-panel-margin {
   margin:           10px;
}
.widp-content-panel-link {
   text-decoration:  none;
   color:            rgb(162,219,70);
   text-align:       right;
}
.widp-hero-area {
   width:            100%;
   display:          flex;
   justify-content:  space-evenly;
   flex-wrap:        wrap;
   align-items:      flex-start;
}
.widp-hero-half-text-margin {
   margin:           0 50px;
}
.widp-survey-button {
   text-align:       center;
   margin-bottom:    20px;
   background-color: rgb(162,219,70);
   height:           5.7em;
   line-height:      5.7em;
   font-size:        1.5em;
   width:            15em;
   text-align:       center;
   display:          block;
   margin:           3em auto;
}
.widp-survey-button-sm {
   height:           4em;
   line-height:      4em;
   font-size:        1em;
   font-weight:      bold;
   width:            13em;
   margin:           1em auto;
}
.widp-survey-button-sm a {
   margin-left:      15px;
}
.widp-survey-button img {
   height:           60%;
   float:            right;
   margin:           1em;
}
.widp-survey-button a {
   color:            rgb(16,60,103);
   text-decoration:  none;
}
.widp-citation-list li {
   margin-top:       20px;
   line-height:      1.5;
}

.widp-get-book-button {
   background-color: rgb(162,219,70);
   color:            rgb(16,60,103);
   height:           2.5em;
   /*
   font-size:        2em;
    */
   line-height:      1.8;
   width:            10em;
   text-align:       center;
   display:          block;
   cursor:           pointer;
   margin:           0 auto 2em auto;
}
@media (min-width: 1024px) {
   .widp-get-book-title {
      margin-top:    2em;
      margin-bottom: .5em;
   }
   .widp-get-book-author {
      margin-bottom: 1em;
   }
}
.widp-get-book-popup {
   position:         absolute;
   left:             -9999px;
   line-height:      1.1;
   background-color: white;
   text-align:       center;
   border:           1px solid gray;
   width:            10em;
   padding-bottom:   10px;
}
.widp-get-book-popup a {
   text-decoration:  none;
   color:            rgb(16,60,103);
   padding:          5px;
   margin-top:       10px;
   display:          inline-block;
   font-size:        1em;
}

/* No pseudo class seems to make Safari on iPhone 6 enable the popup.
   Android has no problem. We will go with Javascript and add
   an explicit class on the click event.
   */
.widp-get-book-button:hover .widp-get-book-popup,
.widp-get-book-button:active .widp-get-book-popup,
.widp-get-book-button:focus .widp-get-book-popup 
.widp-get-book-button.popup-open .widp-get-book-popup {
   left:             auto;
   position:         relative;
   top:              -1.25em;
}
.widp-embed-book {
   float:            left;
   width:            210px;
   padding-right:    20px;
   padding-bottom:   20px;
   -webkit-filter:   drop-shadow(10px 10px 10px #888);
   filter:           drop-shadow(10px 10px 10px #888);
}
.widp-book-title {
   font-size:        1.25em;
   font-weight:      lighter;
   font-style:       italic;
   color:            #133149;
   margin-top:       0;
   margin-bottom:    -15px;
   line-height:      1.5;
}
.widp-book-author {
   
}
.widp-support-group-cycle {
   max-width:        792px;
}
/*** videos  **/

.widp-video-frame {
   text-align:       center;
   margin-bottom:    20px;
}
.widp-video-cover {
   cursor:           pointer;
}
.widp-video-cover img {
   /*   width:            100%;  */
}
.widp-video-hide {
   display:          none;
}

/*** accordion */
.widp-accordion {
   width:            100%;
   border:           solid 1px #143e66;
   position:         relative;
   padding:          10px 0;
   margin:           20px 0;
}
.widp-accordion h3 {
   margin:           0;
}
.widp-accordion-button {
   font-size:        2.25em;
   font-weight:      bold;
   position:         absolute;
   right:            10px;
   top:              0;
   line-height:      1;
   color:            #739F3A;
   cursor:           pointer;
}
.widp-accordion.widp-accordion-open ul,
.widp-accordion.widp-accordion-open h3,
.widp-accordion.widp-accordion-open h5,
.widp-accordion.widp-accordion-open p,
.widp-accordion.widp-accordion-open div.widp-accordion-content  {
   display:          block;
}
.widp-accordion.widp-accordion-open .widp-accordion-button::before {
   content:          "\2013";    /* n-dash */
}
.widp-accordion .widp-accordion-button::before {
   content:          "+";
}
.widp-accordion ul,
.widp-accordion p,
.widp-accordion h5,
.widp-accordion div.widp-accordion-content {
   display:          none;
}
.widp-accordion ul, .widp-accordion p {
   padding-right:    10px;  
}
.widp-accordion h3, .widp-accordion h5 , .widp-accordion p {
   padding-left:     10px;  
}
.widp-accordion li {
   line-height:      1.8;
}

.widp-next-page-button {
   width:            80px;
   height:           80px;
   line-height:      80px;
   border-radius:    40px;
   margin-left:      auto;
   margin-right:     40px;
   margin-top:       20px;
   margin-bottom:    20px;
   background-color: rgb(163,214,95);  /* bright green */
   color:            rgb(19,49,73);    /* dark blue */
   text-align:       center;
   font-size:        64px;
   cursor:           pointer;
}
.widp-next-page-button-arrow {
   margin-left:      8px;
}
.widp-next-page-button-arrow:after {
   content:          '\25ba';
}


/*** footer   */

.widp-footer {
   color:            white;
}
@media (max-width: 1023px) {
   .widp-footer-height {
      height:           24em;
   }
   .widp-page-content {
      margin-bottom:    -11.25em;
   }
   .widp-page-content {
      min-height:       calc(100% - 12.8em);
   }
}
.widp-footer-shim {
   height:           12.8em;
}
.widp-footer-row {
   /*
   display:          flex;
   flex-wrap:        wrap;
   justify-content:  center;
   */
   padding-top:      20px;
   padding-bottom:   10px;
   margin-left:      auto;
   margin-right:     auto;
   max-width:        670px;
}
.widp-footer-donate {
   background-color: rgb(162,219,70);
   height:           2em;
   line-height:      2em;
   margin:           1.5em auto 2em auto;
   width:            9em;
   text-align:       center;
}
.widp-footer-donate a {
   text-decoration:  none;
   padding:          0 20px;
   color:            rgb(16,60,103);
   font-size:        1.5em;
}
.widp-footer-logos {
   padding:          0 40px;
}
.widp-footer-logos img {
   height:           5em;
}
.widp-footer-share-icons  {
   padding:          20px;
}
.widp-footer-share-icons a {
   margin-top:       10px;
}
.widp-footer-share-icons a:not(:first-child) {
   padding-left:     10px;
}
.widp-footer-share-icons img {
   height:           2.5em;
}
.widp-footer-text {
   text-align:       center;
   padding-bottom:   20px;
   line-height:      1.7;
}

@media (min-width: 1024px) {
   .widp-footer-sm-block {
      display:          inline-block;
      vertical-align:   middle;
   }
}
@media (max-width: 1023px) {
   .widp-footer-sm-block {
      display:          block;
      margin-left:      auto;
      margin-right:     auto;
      width:            18.75em;
      text-align:       center;
   }
}

/** for CMS login and editing */
.login-box {
   max-width:        640px;
   margin:           40px auto;
   // padding:          40px;
}
.login-intro {
   margin:           0 40px 30px 40px;
}
.login-input-box {
   margin:           20px;
   padding-right:    45px;
}
.login-input-box input {
   border:           solid 4px rgb(100, 56, 148);
   font-size:        32px;
   width:            100%;
   height:           40px;
   padding:          20px;
}
.login-submit, .log-submit {
   padding:          5px 20px;
   float:            right;
}

.login-submit button:not(:disabled), .log-submit button:not(:disabled) {
   cursor:           pointer;
}

#login-submit-button {
   padding:          5px 25px;
}

button.cms-preview, button.cms-save {
   margin:           20px;
   height:           30px;
   font-size:        16px;
   line-height:      24px;
   background-color: rgb(162,219,70);
   color:            rgb(16,60,103);
}

.cms-editable {
   margin:           20px auto;
}
.cms-editable p, .cms-editable h1, .cms-editable h2, .cms-editable h3 {
   margin:           0;
   padding:          0;
}
.cms-edit-container .cms-editable, .cms-edit-container .cms-editable .ql-editor {
   height:           auto;
}
.widp-header-menu-item:hover .widp-header-menu-subitem.cms-menu-subitem {
   width:            auto;
}


/* Quill overrides */
.ql-editor .ql-font-serif, .ql-container {
   font-family:      Palatino, serif;
   font-size:        1em;
}

.ql-container.ql-snow.cms-edit-preview {
   border:           none;
}