/*main.css Stylesheet for Diverse Diversity website (c) 2017-23 K J Petrie*/

@font-face{font-family:divdivserif;src:url(/layout/fonts/VeraSe.ttf)}
@font-face{font-family:divdivserif;src:url(/layout/fonts/VeraSeBd.ttf);font-weight:bold}
@font-face{font-family:divdivserif;src:url(/layout/fonts/FreeSerifBoldItalic.ttf);font-weight:bold;font-style:italic}
@font-face{font-family:divdivserif;src:url(/layout/fonts/FreeSerifItalic.ttf);font-style:italic}
@font-face{font-family:divdivsans;src:url(/layout/fonts/Vera.ttf)}
@font-face{font-family:divdivsans;src:url(/layout/fonts/VeraBd.ttf);font-weight:bold}
@font-face{font-family:divdivsans;src:url(/layout/fonts/FreeSansBoldOblique.ttf);font-weight:bold;font-style:oblique}
@font-face{font-family:divdivsans;src:url(/layout/fonts/FreeSansOblique.ttf);font-style:oblique}
@font-face{font-family:headlinesans;src:url(/layout/fonts/FreeSans.ttf)}
@font-face{font-family:headlinesans;src:url(/layout/fonts/FreeSansBold.ttf);font-weight:bold}
body{position:relative;z-index:10}
article{color:#4C61A5;font-family:divdivserif,serif;font-size:80%}
article em{font-size:110%}
article>p{color:#33418D;margin-top:0em;margin-bottom:1em}
footer{clear:both}
h1{font-size:2em;margin-bottom:1em}
h1, h2, h3,h4, h5, h6, dt{font-family:divdivsans,sans-serif}
h2, h3, h4, h5, h6{page-break-after:avoid !important;break-after:avoid;margin-bottom:0em;padding-bottom:0em}
/*h2{margin-bottom:0.1em;padding-bottom:0em}*/
article p{text-align:justify}
dl{-webkit-column-break-before:avoid;page-break-before:avoid !important;break-before:avoid;margin-top:0em}
label{display:inline-block}
/*nav styles also dynamically set in header.php */
nav p{padding:0px;padding-bottom:0px;border:solid 2px #FFF;margin:0px;margin-bottom:2px;border-top:none;border-left:none;font-weight:bold;font-size:100%;font-family:Arial,Helvetica,sans-serif}
nav a{text-decoration:none}
nav a:link{color:#FFF}
nav a:visited{color:#DDD}
nav a:active{color:#FF0}
nav a:hover{text-decoration:underline}
dt{font-size:120%;font-weight:bolder}
dd{margin-bottom:1em}
/*label{display:inline-block;width:5em}*/
p{margin-top:0.5em}
p, dd{font-size:100%}
p sup{font-size:50%}

.assentrequest{width:auto}
.button{background-color:#4C61A5;color:#FFF;width:auto;padding:1em;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:1em;margin:1em;margin-top:2em;border:solid 0.2em #8990A5;border-bottom-color:#0930A5;border-right-color:#0930A5;border-radius:0.5em}
form a.button{line-height:3em}
.buttonlist{list-style-type:none;margin:1em}
.buttonlist li a{display:inline-block;margin:1em}
.centred{text-align:center}
.classinputs{display:none}
.closebutton a{text-decoration:none}
.closebutton a:link{color:#4C61A5}
.closebutton a:hover{color:#CCCCFF}
.columnar, .columnarbox, #columnar{clear:left;-moz-column-width:400px;-webkit-column-width:400px;column-width:400px}
.columnarbox{background-color:#F0F0FF;padding-bottom:0.5em}
.columnarbox>ul{margin:0em}
.dateadopted{font-family:divdivsans,sans-serif;margin-top:0em}
.discussionbox{display:none;position:fixed;top:10%;bottom:10%;left:10%;right:10%;color:#FFF;background-color:#4C61A5;border:solid 0.1em #0930A5;border-radius:0.5em}
.discussionbox label{display:block;width:100%;height:100%}
.discussionbox .button{position:static;display:inline;margin-top:0em;margin-bottom:0em}
.discussionbox .reply{position:static;width:80%;height:100%;box-sizing:border-box}
.discussionboxleft{position:absolute;top:1%;left:1%;height:98%;width:48%;background-image:linear-gradient(#4C61A5, #B8C2E6);overflow:auto;text-shadow:0em 0em 0.1em #4C61A5}
.discussionboxleft .discussionitem h3{font-size:90%;margin-bottom:0em;margin-top:1em}
.discussionboxleft .discussionitem p{margin-bottom:0.2em;margin-top:0em}
.discussionboxleft .discussionitem .date{font:lighter 90% divdivserif,serif}
.discussionboxright{position:absolute;top:1%;right:1%;height:98%;width:48%}
.discussionboxright fieldset{position:absolute;bottom:1em;right:1em;border:none 0px}
.discussionboxright form{position:static;height:100%}
.discussionboxright p{height:60%}
.discussionboxright textarea{background-image:linear-gradient(#919FCE, #B8C2E6);text-shadow:0em 0em 0.1em #B8C2E6}
.endnote{font-size:90%}
.foottable{font-size:12px;line-height:14px;text-align:center}
.foottable a img{border:none 0px}
.foottable a:hover img{border:solid 2px}
.foottable p.rightal>sup{font-size:75%}
.foottable div{display:inline-block}
.foottable .rightal{text-align:right}
.formheading{font-family:divdivsans,sans-serif;font-size:1.5em;clear:left}
.groupeditem{display:inline-block;margin-right:2em}
.groupeditem h3{margin-bottom:0em}
.groupeditem h3 img{border:solid 0.01em #DDD}
.headlines{width:13em;max-width:100%;float:left;font:175%/1.75em headlinesans,sans-serif}
.incoming{color:#000000;background-color:#FFE}
.leftbox{float:left;clear:left;border:solid 0.1em #777;width:30%;padding:0.3em;margin-right:0.5em;margin-bottom:1em;text-align:justify}
.leftbox h2, .rightbox h2{margin-top:0.2em}
.leftbox li{width:87%}
.leftbox :last-child, .rightbox :last-child{margin-bottom:0.2em}
.leftpicture{float:left;margin-right:0.5em;margin-bottom:0.5em}
.linkspagelogo{margin-top:0.3em;height:3em}
.masthead{border:solid 0.1em #777;margin-right:1em;margin-bottom:1em;background-color:#4C61A5;width:700px;height:324px;float:left;position:relative}
.masthead .mainlogo{float:left;margin-right:1%;width:500px}
.masthead .socmedlinks{position:absolute;top:0px;right:200px}
.masthead .socmedlinks img{margin-right:10px}
.masthead .subslogan{font:italic 150%/50% arial,helvetica,sans-serif;position:absolute;top:275px;left:70px}
.memberform{clear:left;margin-left:auto;margin-right:auto;width:35em}
.posterlink, .showdemo{clear:left;float:left;margin-right:0.5em;margin-bottom:1em}
.outgoing{color:#000000;background-color:#F7FFF7}
.rightal{text-align:right}
.rightbox{float:right;clear:right;border:solid 0.1em #777;width:30%;padding:0.3em;margin-left:0.5em;margin-bottom:1em;text-align:justify}
.smallprint{font-size:90%}
.subscription{display:none}
.warning{color:#F00}
.whydiverse, .comment, .news, .whymatters{color:#020;background-color:#F7FFF7;border-radius:1em;padding-left:0.5em;padding-right:0.5em}
.comment{color:#440;background-color:#FFE;background-image:linear-gradient(#FFFFF7, #FFFFE0)}
.news{color:#000;background-color:#DDD;background-image:linear-gradient(#EEE, #CCC)}
.whydiverse{padding-bottom:0.01em;background-image:linear-gradient(#EFE, #FFF)}
.whymatters{color:#000;background-color:#FFF4EC;background-image:linear-gradient(#FFFBF7, #FFDFC0, #FFEFDF, #F7FFE3)}
.firstlevellist{font-size:1.5em}
.firstlevellist h2{font-size:1em}
.firstlevellist h3{font-size:0.675em}
.firstlevellist p{font-size:0.667em}
.firstlevellist > li > p.motion{font-size:1em}
.firstlevellist .secondlevellist{list-style-type:upper-alpha;font-size:0.667em}
.firstlevellist .secondlevellist h2{font-size:1.5em}
.firstlevellist .secondlevellist h3{font-size:1.175em}
.firstlevellist .secondlevellist p{font-size:1em}
.shortquote{font-style:italic;font-size:115%}
.thirdlevellist{list-style-type:upper-roman}
.fourthlevellist{list-style-type:lower-alpha}
.fifthlevellist{list-style-type:lower-roman}
.sixthlevellist{list-style-type:lower-alpha}


#appformselect{clear:left}
#declaration{width:90%;vertical-align:top}
#demoimage{position:absolute}
#demolayer{position:fixed;z-index:20;background-color:rgba(0,0,0,0.7);background-position:50% 50%;top:0px;left:0px;width:100%;height:100%;visibility:hidden}
#demolayer .closebutton{position:absolute;top:0px;right:0px;width:1em;background-color:#FFFFFF;font-family:divdivsans,sans-serif;font-size:200%}

/* for membership processes that take time */
.rummageframe img{background-color:#4C61A5}


@media screen and (max-width:760px){
  .masthead{width:500px;max-width:95%;height:400px}
  .masthead .mainlogo{max-width:100%;height:auto;float:none}
  .masthead .socmedlinks{position:absolute;top:0px;right:0px}
  nav p{display:inline-block;padding-right:0.3em;height:32px;line-height:36px}
  nav{position:absolute;top:325px;height:auto;width:100%;text-align:center}
}
@media screen and (max-width:500px){
  .masthead{max-width:100%;height:400px;margin-right:0em}
  .masthead .mainlogo{max-width:100%;height:auto;float:none}
  .masthead .subslogan{top:250px;left:15%;font-size:100%;line-height:100%;background-color:#FFF}
  nav{position:absolute;top:305px;height:auto;max-width:100%;text-align:center}
}
@media screen and (max-width:410px){
  .masthead .subslogan{top:200px}
  nav{position:absolute;top:250px;height:auto;max-width:100%;text-align:center}
  .leftbox, .rightbox{float:none;width:100%}
}
@media screen and (max-width:300px){
  .masthead{height:360px}
  .masthead .subslogan{top:142px}
  nav{position:absolute;top:180px;height:auto;max-width:100%;text-align:center}
}