/*
Theme Name:     Twenty Seventeen Child 1
Theme URI:      https://www.philipnewton.me
Description:    Child theme for twentyseventeen
Author:         Philip Newton
Author URI:     https://www.philipnewton.me
Template:       twentyseventeen
Text Domain: 	twentyseventeen-child
Version:        1.0.0
License: 		GNU General Public License v2 or later
License URI: 	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

*/

body,
button,
input,
select,
textarea {
color: #333;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
}




/*------------ stick top menu to top...
see:
https://wordpress.org/support/topic/twenty-seventeen-move-nav-menu-to-top/
https://www.saotn.org/twenty-seventeen-theme-full-width-wordpress/
--------------*/

@media (min-width: 760px) {

.navigation-top {
position: absolute;
top: 0px;
width: 100%;
height: 70px;
}

}


@media (min-width: 760px) {

.custom-header {
position: relative;
padding-top: 70px;
margin-bottom:10px !important;
}


}


@media screen and (min-width: 48em) {	/* 768px */
.site-header .navigation-top .menu-scroll-down {
top: 0;
}


}

body {
background-image: url('images/paper.png');
}


/*Having stripped images out of paragraph tags with the regex function in functions.php, images are too close to paragraphs below them.  A margin-bottom fixes that, but causes a dead bottom to the link...*/

div.post-thumbnail {
margin-bottom: 0px !important;
}

img.size-medium {
margin-bottom:1.1em !important;
margin-bottom: 0px !important;
}

img.size-pkn_medium_plus {
margin-bottom:1.1em !important;
margin-bottom: 0px !important;
}

img.size-pkn_medium_plus_more {
margin-bottom:1.1em !important;
margin-bottom: 0px !important;
}


img.size-large {
margin-bottom:1.3em !important;
margin-bottom: 0px !important;
}

img.attachment-twentyseventeen-featured-image {
margin-bottom:0em !important;
}


img.caught-image {
margin-bottom:1.3em !important;
margin-bottom: 0px !important;
}


/*------------------------------------*/

/*This was to transform the home page to look like a regular page - without the giant image, but I used the plug-in.  It was based on the answer by "Ralph" here:
https://wordpress.stackexchange.com/questions/259007/how-do-i-change-the-header-image-height-in-twenty-seventeen
But this method didn't work properly - I couldn't position the image correctly behind the newly-resized div/panel/thingy...
*/

/*.has-header-image.home.blog .custom-header {
height: 26vh;
}
*/

/*------------------------------------*/





li.menu-item a:link, li.menu-item a:visited {
color:#0000ff !important;
text-decoration:none !important;
}

li.menu-item a:hover, li.menu-item a:active {
color:#0000ff !important;
text-decoration:underline !important;
}



li.current-menu-item a:link, li.current-menu-item a:visited {
color:#767676 !important;
text-decoration:none !important;
}

li.current-menu-item a:hover, li.current-menu-item a:active {
color:#767676 !important;
text-decoration:none !important;
}


/*form placeholders text colour...*/
::-webkit-input-placeholder {
color:#707070 !important;
}

:-moz-placeholder {
color:#707070 !important;
}

::-moz-placeholder {
color:#707070 !important;
}

:-ms-input-placeholder {
color:#707070 !important;
}





.search-form {
/*margin-left:50px!important;*/
margin-top:-5px !important;
}

.search-submit {
background-color:rgb(118, 118, 118);
}

.search-submit:hover  {
background-color:rgb(0, 0, 0);
}


.search-field {
font-size: 14px;
font-weight: 600;
line-height: 21px;
color: rgb(118, 118, 118);
}



figure {
margin:0px auto 0px auto;
}


.site-content {
background-image: url('images/paper.png') !important;
padding-top:10px !important;
}


header.site-header {
background-image: url('images/paper.png') !important;
}

.navigation-top {
background-image: url('images/paper.png') !important;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.29) !important;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.60) !important;
}

.main-navigation ul {
text-align:center !important;
margin:0px auto 0px auto !important;
}



.site-content-contain {
background-image: url('images/paper.png') !important;
padding-top:10px !important;
}



/*------------ centering "loop" posts page ------------*/



#primary article {
float:none !important;
margin:0px auto 0px auto;
}

.navigation.pagination {
float:none !important;
margin:0px auto 0px auto !important;
}

header.page-header {
text-align:center !important;
margin:0px auto 0px auto !important;
margin-left:auto !important;
margin-right:auto !important;
float:none !important;
font-size:1rem !important;
font-weight:400 !important;
line-height:1.6 !important;
padding:0 0 0.3em 0 !important;
}



/*------------ centering single post pages ------------*/

.entry-content {
text-align:center !important;
margin:0px auto 30px auto !important;
}

.entry-content h1 {
/*text-align:left !important;*/
}

.entry-content h2 {
/*text-align:left !important;*/
}




.entry-content p {
/*Remember to compare with style-loops.css (for home/posts page, search results page and archive/category page) as well...*/
text-align:left !important;
font-size:1em !important;

margin-left:10em !important;
margin-right:10em !important;


margin-left:10vw !important;
margin-right:10vw !important;

padding-left:0px !important;
padding-right:0px !important;
margin-bottom:1.2em !important;
/*text-indent:0.5em;*/
color:#1b1b1b;
}


nav.navigation {
margin:2em 12em 0 12em !important;
border-top:0px !important;
}

.panel-content .wrap {
padding-top:0px !important;
}


@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
  

article {
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
float:none !important;
}

header.entry-header {
/*This 100% width is essential for full-width post thumbnails ("featured images") on mobile...*/
width:100% !important;
margin:0px auto 0px auto !important;
}

h2.entry-title {
padding-left:0.2em !important;
padding-right:0.2em !important;
margin-top:0px !important;
font-family: 'Special Elite', cursive !important;
color:#242424 !important;
font-size: 26px !important;
font-weight: 300 !important;
text-transform: none !important;
letter-spacing: 0.08em !important;
padding-left:0.3em !important;
padding-right:0.3em !important;
}

header.entry-header h2.entry-title {
padding-left:0.2em !important;
padding-right:0.2em !important;
margin-top:0px !important;
font-family: 'Special Elite', cursive !important;
color:#242424 !important;
font-size: 26px !important;
font-weight: 300 !important;
text-transform: none !important;
letter-spacing: 0.08em !important;
padding-left:0.3em !important;
padding-right:0.3em !important;
}



.entry-content p {
margin-left:0.9em !important;
margin-right:0.9em !important;

/*margin-left:2em !important;
margin-right:2em !important;*/

/*text-indent:1em !important;*/
margin-bottom:1em !important;
/*This is the paragraph indent for mobile posts...*/
text-indent:0em !important;
}


/*zub*/
.wrap, .entry-content {
width:100% !important;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px !important;
border:0;
text-align:center !important;
}


/*Original:
img {
width: 100%!important
}
*/

img.attachment-twentyseventeen-featured-image,
img.size-large,
img.size-medium,
img.size-pkn_medium_plus_more,
img.size-pkn_medium_plus {
width: 100%!important;
}

img.attachment-twentyseventeen-featured-image {
margin-bottom:0em !important;
}

nav.navigation {
margin:2em 0em 0em 0em !important;
text-align:center !important;
}



div.nav-links {
/*display:none !important;*/
width:90% !important;
height:auto !important;
margin:3em auto 3em auto !important;
padding:0px 0px 0px 0px !important;
}

div.nav-previous {
margin:2em 0px 2em 0px !important;
}

div.nav-next {
margin:2em 0px 2em 0px !important;
}


/*I think this is where the problem with the "extra spacing" in the pagination numbers lies...*/

.page-numbers {
display: none !important;
/*padding:0.5em 0.75em 0.5em 0.75em !important;*/
}

.page-numbers.prev {
display: inline-block !important;
padding:0.5em 0.5em 0.5em 0.5em !important;
margin-right:0px !important;
/*margin-bottom:0.5em !important;*/
/*background-color:transparent !important;*/
}

.page-numbers.next {
display: inline-block !important;
padding:0.5em 0.5em 0.5em 0.5em !important;
margin-right:0px !important;
/*margin-bottom:0.5em !important;*/
/*background-color:transparent !important;*/
}

.page-numbers.current {
display: inline-block !important;
/*color:#ccc !important;*/
/*padding:0.5em 0.75em 0.5em 0.75em !important;*/
}


span.page-numbers.current {
display: inline-block !important;
color:#000 !important;
/*padding:0.5em 0.75em 0.5em -0.75em !important;*/
margin-left:-2.5em !important;
}

p.form-submit {
text-align:center !important;
}


div.post-thumbnail {
margin-bottom: 0px !important;
width: 100%!important;
}

img.caught-image {
margin-bottom:1.3em !important;
}


img.size-large {
margin-bottom:0em !important;
}

img.size-medium {
margin-bottom:1.1em !important;
}


img.size-pkn_medium_plus_more {
margin-bottom:1.1em !important;
}

img.size-pkn_medium_plus {
margin-bottom:1.1em !important;
}

img.attachment-twentyseventeen-featured-image {
margin-bottom:0em !important;
}



figcaption {
width:100% !important;
max-width:100% !important;
background-color:#e9eae9;
text-align:left;
margin:0px 0px 0em 0px;
padding:0.5em 0.5em 0.5em 0.5em !important;
display:block !important;
}



.wp-caption-text {
margin-top:0em !important;
padding-left:1.2em !important;
padding-right:0.7em !important;
/*So that captions under photos on mobile have a height of at least two lines of text:*/
/*min-height:3.2rem !important;*/
font-style: normal !important;
font-size:0.8500rem !important;
}


.figcaption-fix {
margin-top:0px !important;
/*padding-top:1.3em;*/

}


div.noresults {
width:80% !important;
}

.noresultshere p {
width:90% !important;
}

header.page-header {
margin-bottom: 1em !important;
}

div.not-found {
margin-top:-2em !important;
padding-top:0em !important;
}

.not-found p {
margin:0px auto 0px auto !important;
text-align:center !important;
}

.no-result ul {
margin-top:1em !important;

}

.no-result li {
text-align:left !important;
}

.lift-no-result-header {
margin-top:0px !important;
}

button.menu-toggle {
background-color:transparent !important;
}



a.foobox img {
/*margin:5px auto 5px auto !important;*/
/*float:none !important;*/
padding:0px !important;
}



.left-smaller-image {
float:none !important;
}

.right-smaller-image {
float:none !important;
}




figure.alignleft {
float:none !important;
/*background-color:red !important;*/
margin-bottom: 1em !important;
}

.alignleft img {
width: 100% !important;
max-width:100% !important;
margin:0px auto 0px auto !important;
float:none !important;
}

/*img.alignleft {
margin-left:0px !important;
margin-right:0px !important;
}

img.alignright {
margin-left:0px !important;
margin-right:0px !important;
}
*/

figure.alignleft > figcaption.wp-caption-text {
width:100% !important;
max-width:100% !important;
background-color:#e9eae9;
text-align:left;
margin:0px 0px 0px 0px !important;
padding:0.5em 0.5em 0.5em 1.2em !important;
display:block !important;
float:none !important;

}

figcaption.alignleft {
width:100% !important;
max-width:100% !important;
float:none !important;
margin:0px 0px 0em 0px !important
}




figure.aligncenter {
float:none !important;
}

.aligncenter img {
width: 100% !important;
margin:0px auto 0px auto !important;
float:none !important;
}

figure.aligncenter > figcaption.wp-caption-text {
width:100% !important;
max-width:100% !important;
background-color:#e9eae9;
text-align:left;
margin:0px 0px 0em 0px;
padding:0.5em 0.5em 0.5em 1.2em !important;
display:block !important;
float:none !important;
}

figcaption.aligncenter {
width:100% !important;
max-width:100% !important;
float:none !important;
}






figure.alignright {
float:none !important;
}

.alignright img {
width: 100% !important;
max-width:100% !important;
margin:0px auto 0px auto !important;
float:none !important;
}

figure.alignright > figcaption.wp-caption-text {
width:100% !important;
max-width:100% !important;
background-color:#e9eae9;
text-align:left;
margin:0px 0px 0em 0px;
padding:0.5em 0.5em 0.5em 1.2em !important;
display:block !important;
float:none !important;
}

figcaption.alignright {
width:100% !important;
max-width:100% !important;
float:none !important;
}


div.justified-image-grid {


}



/**************Here ends mobile CSS portrait.*/
}


@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
  
 
a.foobox img {
margin:5px 0px 5px 0px; !important;
}

}





.figcaption-fix-non-mob {
/*margin-top:0.8075em !important;*/
/*padding-top:1.3em;*/

}

/*h2.entry-title {
font-weight:350;
font-weight:300;
}
*/

.wp-caption-text {
margin-top:0px;
}


div.nav-links {
/*display:none !important;*/
margin:4em auto 3em auto !important;
padding:0px 30px 0px 30px !important;
}

p.form-submit {
text-align:left !important;
margin-left:0.5em !important;
}


.entry-content p a:link, .entry-content p a:visited {
color:#0000ff !important;
text-decoration:none !important;
box-shadow:none !important;
-webkit-box-shadow:none !important;
}

.entry-content p a:hover, .entry-content p a:active {
color:#0000ff !important;
text-decoration:underline !important;
box-shadow:none !important;
-webkit-box-shadow:none !important;
}



.entry-summary {
text-align:center !important;
margin:0px auto 30px auto !important;
}

.entry-summary p {
/*Remember to compare with style-loops.css as well...*/
text-align:left !important;
font-size:1em !important;
margin-left:2.5em !important;
margin-right:2.5em !important;
margin-bottom:1em !important;
text-indent:0.5em;
color:#1b1b1b;
}

.entry-summary p a:link, .entry-summary p a:visited {
color:#0000ff !important;
text-decoration:none !important;
box-shadow:none !important;
-webkit-box-shadow:none !important;
}

.entry-summary p a:hover, .entry-summary p a:active {
color:#0000ff !important;
text-decoration:underline !important;
box-shadow:none !important;
-webkit-box-shadow:none !important;
}


header.entry-header {
text-align:center !important;
margin:0px auto 0px auto !important;
padding-bottom:0.3em !important;
/*display:none !important;*/
}

.entry-header .entry-meta {
/*("posted by author on [etc]")*/
display:none !important;
}


.center-extra-title {
text-align:center !important;
margin:0px auto 12px auto !important;
padding:3px 0px 0px 0px;
}

.page-center-extra-title {
text-align:center !important;
padding:3px 0px 0px 0px;
margin:0px auto 12px auto !important;
font-size: 24px !important;
font-size: 1.5rem !important;
font-weight: 800 !important;
text-transform: none !important;
letter-spacing: 0.08em !important;
line-height:1.25 !important;
}


.single-featured-image-header {
margin:0px 0px 0px 0px;
padding:1.2em 0px 0px 0px;
border:0px !important;
}


.continue-reading {
font-style:italic;
}

span.continue-reading a:hover {
color:#0000ff !important;
font-style:italic;
}

a.continue-anyway {
display:inline !important;
color:#0000ff !important;
box-shadow:none !important;
}

a.continue-anyway:hover {
text-decoration:underline !important;
}




.entry-title a:link, .entry-title a:visited {
color:#0000ff;
text-decoration:none;
}

.entry-title a:hover, .entry-title a:active {
color:#0000ff;
text-decoration:underline;
}

h1.page-title, h2.page-title, h1.entry-title, h2.entry-title {
font-family: 'Special Elite', cursive !important;
color:#242424 !important;
font-size: 26px !important;
font-weight: 300 !important;
text-transform: none !important;
letter-spacing: 0.08em !important;
padding-left:0.3em !important;
padding-right:0.3em !important;
margin-top:0px !important;
}


h2.entry-title, h3.entry-title {
margin-bottom:10px !important;
}

h2.entry-title a {
box-shadow: none !important;
font-size: 22px !important;
font-size: 1.375rem !important;
margin-top:0px !important;
margin-bottom:10px !important;
padding-bottom:0px !important;
padding-top:0px !important;
}


h3.entry-title a {
box-shadow: none !important;
font-size: 22px !important;
font-size: 1.375rem !important;
margin-top:0px !important;
margin-bottom:10px !important;
padding-bottom:0px !important;
padding-top:0px !important;
}



.caught-image {
max-width:100%;
}

a.caught-link img {
cursor:pointer;
}


div.site-branding-text {
visibility:hidden !important;
}


p.link-more {
margin-top:-1em !important;
font-style:italic !important;
}



.nav-next a:link {
box-shadow: none !important;
}

.nav-previous a:link {
box-shadow: none !important;
}



span.nav-subtitle {
color:#767676 !important;
box-shadow: none !important;
}


span.nav-subtitle a {
color:#767676 !important;
box-shadow: none !important;
text-decoration:none !important;
}

span.nav-subtitle:hover {
color:#767676 !important;
box-shadow: none !important;
text-decoration:none !important;
}



span.nav-title {
color:#0000ff !important;
box-shadow: none !important;
}

span.nav-title a {
color:#0000ff !important;
box-shadow: none !important;
text-decoration:none !important;
}

span.nav-title:hover {
color:#0000ff !important;
box-shadow: none !important;
text-decoration:underline !important;
}


span.nav-title-icon-wrapper {
color:#0000ff !important;
}

span.nav-title-icon-wrapper:hover {
color:#0000ff !important;
}


svg.icon-arrow-right {
color:#0000ff !important;
}

svg.icon-arrow-right:hover {
color:#0000ff !important;
}

svg.icon-arrow-left {
color:#0000ff !important;
}

svg.icon-arrow-left:hover {
color:#0000ff !important;
}



div#comments  {
margin:0 12em 0 12em !important;
padding:0.5em 0 0 0;
}



@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
  

div#comments  {
text-align:center !important;
width:90% !important;
margin:0.5em auto 0em auto !important;
padding:0 0 0 0 !important;
}


#comments  {
text-align:left !important;
width:90% !important;
margin:0.5em auto 0em auto !important;
padding:0 0 0 0 !important;
}

.comment-content p {
text-align:left !important;
color:#222222 !important;
}


h2.comments-title {
margin:0px 0px 0.8em 0px;
color:#1b1b1b;
text-align:left !important;
}

h3.comment-reply-title {
margin-top:2em !important;
text-align:left !important;
color:#1b1b1b;
}

li.comment {
margin:0px 0px 0.5em 0px;
}

article.comment-body {
background-color:#fffdf7;
padding:0.6em 0.6em 0.6em 0.6em;
border-radius:0.5em;
margin:4px 0px 3em 3em;
border:1px solid #dbd6ca;
color:#222222 !important;
}

img.avatar {
position:relative !important;
left:0.3em !important;
margin-right:0em !important;
float:left !important;
}

svg.icon.icon-mail-reply {
position:relative !important;
left:0.8em !important;
margin-right:0.8em !important;
}

a.comment-reply-link {
box-shadow:none !important;
color:#0000ff !important;
}

a.comment-reply-link:hover {
box-shadow:none !important;
color:#0000ff !important;
text-decoration:underline !important;
}

div.reply {
text-align:left !important;
}


.comment-author {
text-align:left !important;
}

div.comment-metadata {
margin:0.3em 0px 0px 0.3em !important;
text-align:left !important;
clear:left !important;
}

p.comment-form-comment {
text-align:left !important;
}


#comment textarea {

}

}



div.site-info {
width:70% !important;
text-align:center !important;
margin:0px auto 0px auto !important;
/*display:none;*/
float:none !important;
font-size:0.8em !important;
}


/*The "good" footer, which can contain the privacy, contact, etc., links, found in template-parts/footer/site-info.php...*/
.site-footer {
border-top:0px !important;
}

.site-footer a:link, .site-footer a:visited {
color:#0000ff !important;
box-shadow:none !important;
text-decoration:none !important;
}

.site-footer a:hover, .site-footer a:active {
color:#0000ff !important;
box-shadow:none !important;
text-decoration:underline !important;
}


/*The "bad" footer, which intrudes in posts...*/
.entry-footer {
width:80% !important;
background-color:#e5d8d0;
/*margin-top:0 !important;*/
margin:0px auto 0px auto !important;
padding: 1em !important;
border-radius:1em;
display:none;
}



.comment-content p a:link, .comment-content p a:visited {
box-shadow:none !important;
color:#0000ff !important;
text-decoration:none;
}

.comment-content p a:hover, .comment-content p a:active {
box-shadow:none !important;
color:#0000ff !important;
text-decoration:underline;
}

input.submit {
border-radius:10px;
}

input.wpcf7-submit {
border-radius:10px;
}


.ellipsis {
width:90% !important;
margin:0px auto 0px auto !important;
text-align:center !important;
padding:0px 0px 0px 0px !important;
display:block !important;
font-size: 2rem !important;
}

p.divider {
width:80% !important;
text-align:center !important;
font-size: 2rem !important;
margin:0px auto 0px auto !important;
font-weight:800 !important;
color:#ccc !important;
letter-spacing:0.2em;
text-indent:0em !important;
padding:0px 0px 0px 0px !important;
display:inline !important;
}

.end-of-search {
width:90% !important;
margin:1em auto 0px auto !important;
text-align:center !important;
padding:0px 0px 0px 0px !important;
display:block !important;
font-size: 1rem !important;
}

p.end-of-search {
width:80% !important;
text-align:center !important;
font-size: 1rem !important;
margin:0px auto 0px auto !important;
font-weight:600 !important;
color:#1b1b1b !important;
text-indent:0em !important;
padding:0px 0px 0px 0px !important;
display:inline !important;
}


article.post {
padding-bottom:0px !important;
}

.divider-graphic {
max-width:100% !important;
height:auto;
}



h2.comments-title {
margin:0px 0px 0.8em 0px;
color:#1b1b1b;
}

h3.comment-reply-title {
margin-top:2em !important;
text-align:left !important;
color:#1b1b1b;
}

li.comment {
margin:0px 0px 0.5em 0px;
}

article.comment-body {
background-color:#fffdf7;
padding:0.6em 0.6em 0.6em 0.6em;
border-radius:0.5em;
margin:4px 0px 3em 3em;
border:1px solid #dbd6ca;
color:#222222 !important;
}

img.avatar {
position:relative !important;
left:5px !important;
margin-right:0.8em !important;
float:left !important;
}

svg.icon.icon-mail-reply {
position:relative !important;
left:3px !important;
margin-right:0.8em !important;
}

a.comment-reply-link {
box-shadow:none !important;
color:#0000ff !important;
}

a.comment-reply-link:hover {
box-shadow:none !important;
color:#0000ff !important;
text-decoration:underline !important;
}


b.fn {
font-weight:600 !important;
position:relative !important;
top:0.6em !important;
}

div.comment-metadata {
margin:0.3em 0px 0px 5px !important;
}

.not-found {
width:70% !important;
height:auto !important;
margin:0px auto 5em auto !important;
padding:0px 0px 0px 0px !important;
}

.noresults {
width:40% !important;
height:auto !important;
margin:0px auto 5em auto !important;
padding:0px 0px 0px 0px !important;
text-align:center;
}

.noresults p {
width:80%;
margin:1em auto 2em auto;
text-align:left;
}


.noresultshere {
width:60% !important;
height:auto !important;
margin:0px auto 5em auto !important;
padding:0px 0px 0px 0px !important;
text-align:center;
}

.noresultshere p {
width:80%;
margin:0em auto 2em auto;
text-align:left;
}


.no-result a:link, .no-result a:visited {
color:#0000ff !important;
text-decoration:none !important;
}

.no-result a:hover, .no-result a:active {
color:#0000ff !important;
text-decoration:underline !important;
}

.lift-no-result-header {
font-family: 'Special Elite', cursive !important;

margin:-0.5em auto 0em auto;
font-weight:500 !important;
}






.cookie-banner {
position: fixed;
bottom: 40px;
left: 10%;
right: 10%;
width: 80%;
width:66vw;
margin:0px auto 0px auto;
padding:10px 10px 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(196, 196, 196, 0.96);
border-radius: 10px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
}

.cookie-banner p {
margin:0px 0px 0px 0px;
}

.cookie-banner p a {
color:#00f !important;
text-decoration:none;
}

.cookie-banner p a:hover {
color:#00f !important;
text-decoration:underline;
}

.close {
padding:8px 9px 8px 9px;
background-color: #00f !important;
border: none;
color: #fff;
border-radius: 10px;
cursor: pointer;
font-weight:bold;
}

.close:hover {
background-color:#389c36ff !important;
color: #fff;
}

mark {
background-color:#ffd400 !important;
z-index:99999 !important;
}

mark,
ins {
background: #ffd400 !important;
text-decoration: none;
z-index:99999 !important;
background-blend-mode: multiply;
animation-delay: 0s;
animation-composition: replace;
}

.hilite {
background-color:#ffd400 !important;
z-index:99999 !important;
animation-play-state: running !important;
background-blend-mode: multiply;
}





.remove-highlight {
width:50% !important;
width:max-content !important;
text-align:center !important;
margin:1.5em auto 1.8em auto !important;
border-radius:0.2em !important;
padding:0px!important;
}

.remove-highlight:hover {
/*background-color:transparent !important;*/
}

.remove-highlight p {
color:#000 !important;
font-style:italic !important;
font-size:0.7em;
padding:0.05em 0em 0.05em 0em !important;
padding:0.05em 0em 0.05em 0em !important;
font-weight:600 !important;
}

.remove-highlight p a:link, .remove-highlight p a:visited {
color:#000 !important;
text-decoration:none !important;
/*background-color:#ffd400 !important;*/
}

.remove-highlight p a:hover, .remove-highlight p a:active {
color:#0000ff !important;
text-decoration:none !important;
background-color:transparent !important;
}

span.rh {
background-color:#ffd400 !important;
}

span.rh:hover {
background-color:transparent !important;
}




.hide-highlighting {
width:max-content !important;
margin:0px auto 1em auto !important;
}

.hide-highlighting-button {
font-size:0.7em !important;
font-weight:600 !important;
width:max-content !important;
display:inline !important;
margin:1em auto 0em auto !important;
padding:0.1em 0.5em 0.1em 0.5em !important;
border-radius:0.5em !important;
background-color:#ffd400 !important;
color:#000;
border:1px solid #969696;
}

.hide-highlighting-button:hover {
background-color:transparent !important;
cursor:pointer;
}




/*"navx" was for the "WP-Paginate" plugin, now deactivated...*/
.navx {
width:98% !important;
margin:0px auto 0px auto !important;
text-align:center !important;
}

.navx a.prev {
color:#0000ff !important;
}

.navx a.next {
color:#0000ff !important;
}


.navx a.prev:hover {
color:#0000ff !important;
background-color:#dddddd !important;
}

.navx a.next:hover {
color:#0000ff !important;
background-color:#dddddd !important;
}


.pkn-nav {
width:98%;
max-width:100% !important;
height:auto;
margin:1em auto 3rem auto !important;
background-color:#ebebeb;
background-color:transparent;
text-align:center;
}

.pkn-nav ol {
/*position: relative !important;*/
margin:0px 0px 0px 0px !important;
}


.pkn-nav li {
font-size:1rem !important;
display:inline-block !important;
padding:0em 0.3em 0em 0.3em !important;
border:1px solid #d8d6d7 !important;
margin:0px 0.3em 0px 0.3em;
border-radius:0.2em;
background-color:transparent;
}

.pkn-nav li a {
color:#0000ff !important;
}


.pkn-nav li:hover {
background-color:#dddddd !important;
}

.pkn-li-no-bgnd li:hover {
background-color:transparent !important;
}


span.pkn-current-page {
color:#1b1b1b !important;
}


.pkn-nav-dead {
color:#b1b1b1 !important;
}

button.search-submit {
background-color:#e6e6e6 !important;
}

button.search-submit:hover {
background-color:#7ccdff !important;
}

.edit-link {
display:none !important;
}

.centralised {
text-align:center !important;
width:max-content !important;
padding:0px 2em 0px 2em;
margin:2em auto 1em auto !important;

}

.centralised p {
/*min-width:60%;*/
text-align:left;
/*margin:0px auto 0px auto;*/
margin:0px 2em 1em 0px !important;

}

/*This prevents an unsightly border around any image given the .foobox class, which also pokes the captions downwards in mobile...*/

/*.foobox img {
box-shadow:0px 0px 0.3em 0.1em #888888 !important;
}

.foobox img a:hover {
box-shadow:0px 0px 0.8em 0.8em #888888 !important;
}


a.foobox img {
cursor: url('images/magnificon.png'), auto !important;
}
*/


a.foobox img, a.jigfbx img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.25) !important;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-out;
/*cursor: url('images/magnificon.png'), pointer !important;*/
cursor:zoom-in;
text-decoration:none !important;
outline-style:none !important;
outline-color:#fff !important;
/*border:0px !important;
border:5px solid #fff !important;*/
}

a.foobox img:hover, a.jigfbx img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.80) !important;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-out;

/*cursor: url('images/magnificon.png'), pointer !important;*/
cursor:zoom-in;

text-decoration:none !important;
outline-style:none !important;
/*border:0px !important;
border:5px solid #fff !important;*/
}


a.foobox, a.jigfbx {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.25) !important;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-out;
/*cursor: url('images/magnificon.png'), pointer !important;*/
cursor:zoom-in;
text-decoration:none !important;
outline-style:none !important;
outline-color:#fff !important;

/*box-shadow:none !important;*/
/*margin:0px 0px 0px 0px !important;*/
}

a.foobox:hover, a.jigfbx:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.80) !important;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-out;

/*cursor: url('images/magnificon.png'), pointer !important;*/
cursor:zoom-in;

text-decoration:none !important;
outline-style:none !important;
}





.left-smaller-image {
margin:0px 1em 0px 12.5em !important;
max-width:100% !important;
}


figure.alignleft > figcaption {
margin-left:13em !important;
}

figure.wp-caption {
margin-bottom:0.5em !important;
}

figcaption.wp-caption-text {
margin-bottom:0.3em !important;
}


.right-smaller-image {
margin:0px 12.5em 0px 1em !important;
max-width:100% !important;
}

figure.alignright > figcaption {
margin-right:13em !important;
}

figure.aligncenter {
margin-top:2.5em !important;
}


div.justified-image-grid {
/*margin-left:10em !important;
margin-right:10em !important;*/
}

/*a.fbx-link {
max-width:840px !important;
}
*/

a.fbx-instance {
display:inline-block;
max-width:840px !important;
height:auto !important;
margin-bottom:0px !important;
}

/*
This doesn't work because it applies to the whole viewport, yet only the part of the viewport OUTSIDE the photo collapses the image...
div.fbx-modal {
cursor:zoom-out;
}*/

pre {
display:inline !important;
text-align:left !important;
padding-left:1em !important;
padding-right:1em !important;
}

.jig-caption-wrapper, .jig-caption, .jig-caption-title {
z-index:0 !important;

}