body {
font-size: 16px;
background-image: none;
color: #333;
}
.mobhide {
display: block;
}
.mobshow {
display: none;
}
.edit-link {
display: none;
}
.tdd-hide {
display: none;
}
img {
max-width: 100%;
} #tdd-header {
position: fixed;
width: 100%;
height: 280px;
background: url(/wp-content/themes/pnp/img/paper-bg.jpg) center no-repeat;
background-size: cover;
z-index: 1000;
transition: 0.3s;
}
#tdd-header.sti {
height: 130px;
}
#shadowbox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
box-shadow: inset 0px -25px 154px rgba(0,0,0,0.8);
}
#slidearea {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 6;
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
}
#slidearea>div {
width: 20%;
margin: 0;
box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
height: 280px;
border: 10px solid #fff;
background-image: url(//www.burypastandpresent.org.uk/wp-content/themes/pnp/img/slides/slide0.jpg);
background-color: #ccc;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
top: 50%;
transform: rotate(0deg) translateY(-50%);
transition: 0.5s ease-out;
cursor: pointer;
}
#slidearea .slide1 { transform: rotate(10deg) translateY(-50%); }
#slidearea .slide2 { transform: rotate(-5deg) translateY(-50%); z-index: 10; }
#slidearea .slide3 { transform: rotate(5deg) translateY(-50%); opacity: 0 }
#slidearea .slide4 { transform: rotate(-10deg) translateY(-50%); z-index: 10; }
#slidearea .slide5 { transform: rotate(7deg) translateY(-50%); }
.sti #slidearea .slide3 { opacity: 1; }
#logoarea {
position: absolute;
top: 0;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: url(/wp-content/themes/pnp/img/pastandpresent-logo-modern.png) center no-repeat;
background-size: contain;
z-index: 10;
cursor: pointer;
width: 271px;
}
#footerarea {
background: url(/wp-content/themes/pnp/img/paper-bg.jpg) center no-repeat;
background-size: cover;
box-shadow: inset 0px 99px 132px rgba(0,0,0,0.8);
padding: 40px 0;
}
#footerarea .flexme {
display: flex;
flex-direction: row;
}
#footerarea .flexme>div {
width: 23%;
margin: 0 1%;
}
#footerarea img {
display: block;
}
#footer {
border: none;
width: 100%;
text-align: center;
background: #222;
color: #999;
margin-top: 40px;
}
#footer a, #footer strong {
color: #999;
text-decoration: none;
}
#footerarea .fbox {
position: relative;
background: rgba(255,255,255,0.5);
border-top: 1px solid #7fa4bf;
color: #222;
}
#footerarea .fbox h3 {
background: #004a80;
text-align: left;
color: #fff;
margin: 0;
padding: 10px 20px;
}
#footerarea .fbox .textwidget {
padding: 10px 20px 10px;
}
#footerarea .media_image-2 img {
margin: 14px 5%;
box-sizing: border-box;
width: 90%;
}
#footerarea .fbox ul {
margin: 10px 10px 10px 20px;
padding-left: 20px;
}
#footerarea .fbox ul li {
list-style: disc outside;
}
#footerarea .fbox ul li a {
background: transparent;
color: #222;
font-weight: normal;
text-decoration: none;
border: none;
padding: 0;
} #tdd-nav {
position: absolute;
bottom: 0;
width: 100%;
z-index: 20;
}
#tdd-nav ul {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
list-style: none;
margin: 0;
}
#tdd-nav ul>li {
margin: 0 0.5%;
}
#tdd-nav ul li a {
background: #fff;
border: 1px solid #ccc;
padding: 12px 10px;
position: relative;
transform: translateY(50%);
text-decoration: none;
color: #757575;
font-weight: normal;
transition: 0.3s;
}
#tdd-nav ul li a:hover, #tdd-nav ul li.current-menu-item a {
background: #004a80;
color: #fff;
border-color: #004a80;
} #sitecontent {
padding-top: 280px;
transition: padding-top 0.3s;
}
#sitecontent.sti {
padding-top: 130px;
}
#sitecontent h1, #sitecontent h2 {
width: 100%;
text-align: center;
color: #fff;
padding: 10px 10px;
background: #004a80;
font-weight: 500;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 40px;
font-size: 1.9em;
}
#sitecontent h2, #sitecontent h3 {
margin-bottom: 20px;
}
#sitecontent h3 {
font-size: 1.9em;
}
.strip {
padding: 40px 0;
}
#sitecontent .strip:first-child {
padding-top: 60px;
}
.strip img {
max-width: 100%;
display: block;
}
.strip a.fancybutton {
position: relative;
padding: 10px 60px 10px 20px;
background: #004a80;
font-weight: 500;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1.3em;
text-decoration: none;
color: #fff;
transition: 0.3s;
border-radius: 5px;
display: block;
text-align: left;
}
.strip a.fancybutton:after {
content: '\f0a9';
position: absolute;
right: 20px;
color: #fff;
font-family: FontAwesome;
}
.strip a.fancybutton:hover {
background: #825381;
}
a.fancybutton {
position: relative;
padding: 10px 60px 10px 20px;
background: #004a80;
font-weight: 500;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1.3em;
text-decoration: none;
color: #fff;
transition: 0.3s;
border-radius: 5px;
display: block;
text-align: left;
}
a.fancybutton:after {
content: '\f0a9';
position: absolute;
right: 20px;
color: #fff;
font-family: FontAwesome;
}
.strip a.fancybutton:hover {
background: #825381;
}
#content {
padding-top: 60px;
}
#searchform #searchsubmit {
background: #004a80;
}
#searchform>div {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#searchform input#s {
flex-grow: 1;
}
.form50 {
width: 50%;
float: left;
margin-right: 0;	
}
.form50:nth-child(odd) {
margin-right: 0;
}
.form50 input, .form50 textarea {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form50 input[type=checkbox],form50 input[type=radio] {
width: auto;
}
.form50 input[type=submit] {
position: relative;
padding: 10px 60px 10px 20px;
background: #004a80;
font-weight: 500;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1.3em;
text-decoration: none;
color: #fff;
transition: 0.3s;
border-radius: 5px;
display: block;
text-align: left;
}
.form50 input[type=submit]:after {
content: '\f0a9';
position: absolute;
right: 20px;
color: #fff;
font-family: FontAwesome;
}
.form50 select {
padding: 9px 12px 9px 12px;
border-color: #ccc #efefef #efefef #ccc;
border-width: 1px;
border-style: solid;
width: 100%;
}
@media only screen and (max-width: 1200px) {
.container {
width: 95%!important;
}
#content {
width: 100%!important;
margin: 0!important;
}
}
@media only screen and (max-width: 1050px) {
#slidearea>div {
width: 25%;
}
#slidearea .slide4 {
display: none;
}
#slidearea .slide3 { opacity: 1; }
}
@media only screen and (max-width: 768px) {
#footerarea .flexme {
flex-direction: column;
}
#footerarea .flexme>div {
width: 100%;
margin: 0 0 15px;
}
.mobshow {
display: block;
}
.mobhide {
display: none;
}
#tdd-nav div.mobshow li {
width: 100%;
text-align: center;
}
.strip, #footerarea {
padding-bottom: 20px;
}
#footer {
margin-top: 20px;
}
#slidearea>div {
width: 50%;
}
#slidearea .slide4 {
display: block;
}
#slidearea .slide2, #slidearea .slide5, #slidearea .slide1 {
display: none;
}
#wpadminbar {
position: fixed!important;
}
#mobileMenu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #004a80;
color: #fff;
overflow: hidden;
z-index: 10000;
}
#mobileMenuHeader {
height: 20vh;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#mobileLogo img {
max-width: 100%;
max-height: 100%;
}
#mobileMenuClose {
font-size: 3em;
padding: 15px 20px 20px;
cursor: pointer;
}
#mobileMenuInner {
position: absolute;
height: 70vh;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
#mobileMenuInner ul {
width: 93%;
margin: 0 3.5%;
}
#mobileMenuInner ul li {
}
#mobileMenuInner ul li a {
border: 3px solid #fff;
border-radius: 10px;
background: #004a80;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
display: block;
margin-bottom: 10px;
padding: 15px 20px;
text-decoration: none;
color: inherit;
transition: 0.3s;
}
#mobileMenuInner ul li a:after {
content: '\f0a9';
position: absolute;
right: 40px;
font-size: 2em;
color: #fff;
font-family: FontAwesome;
}
#mobileMenuInner ul li a:hover {
background: #825381;
}
}
@media only screen and (max-width: 550px) {
#slidearea>div {
width: 50%;
}
#slidearea .slide4 {
display: block;
}
#slidearea .slide2, #slidearea .slide5 {
display: none;
}
}