body {
  font-family: sans-serif;
  padding: 0;
  max-width:960px;
  margin: 0 auto 0 auto;
}

p { margin-left:1em;
}

h1,h2,h3,h4,h5,h6 {
  text-align:center;
}
img { /*z-index:6;*/}

.header {
  width:100%;
/*  background:#800000 -webkit-linear-gradient(top right, #400000, #c00000); */
  background:#800000 linear-gradient(to bottom left, #400000, #c00000);
  color:white;
  height:50px;
/*  padding-top:30px; */
  border: none;
  font-family:"Comic Sans MS",sans-serif;
  font-size:200%;
  font-weight:600;
  overflow:hidden;
  text-align:center;
}

.subhead {
  width:100%;
/*  background:#800000 -webkit-linear-gradient(bottom right,#400000, #c00000); */
  background:#800000 linear-gradient(to top left,#400000, #c00000);
  color:white;
  visibility:hidden;
  height:0px;
  border: none;
  font-family:sans-serif;
  overflow:hidden;
  text-align:center;
}

.mnthyr {
  color:black;
  font-weight:bold;
  text-align:center;
  border-top:2px solid brown;
  margin-top:1em;
  padding-top:1em;
}
.content
 {
  background-color:#F9E2A6;
  width:320px;
  margin: 0 auto 1em auto;
  overflow:hidden;
}
img {
  margin-right:1em;
}
.eventitem {
  clear:both;
  overflow:auto;
  margin-left:10%;
  padding:2px 0 2px 0;
  text-align:left;
}
.newdiv {
  width:318px;
  height:320px;
  float:left;
  margin: 0 auto 0 auto;
  padding-top:0.5em;
  border-bottom:1px solid brown;
  border-right:1px solid brown;
  text-align:center;
/*  z-index:6;*/
  background-color:#F9E2A6;
  overflow:hidden;
}
.clickdiv {
  width:1px;
  height:1px;
  float:left;
  margin: 0;
  padding:0;
  border:none;
/*  z-index:6;*/
  background-color:#F9E2A6;
  overflow:hidden;
}
.linkdiv {
  width:300px;
  margin: 0 auto 0 auto;
  padding:0.5em;
  border:2px solid brown;
/*  border-right:2px solid brown;*/
/*  z-index:6; */
  background-color:#F9E2A6;
  overflow:hidden;
}

.fmg {
/*  width:95%;*/
  height:240px;
/*  border:.2em solid #F9E2A6;
*/
  margin: 0 auto 0 auto;
/*  z-index:6; */
}
.fbimg {
  float:right;
}
@media (min-width:350px) {
  body {
  background-image:url("images/bubbles.png");
  }
  .fmg {
    width:95%;
    height:220px;
  }
  .eventitem {
    margin:0 2em 0 2em;
  }
}
@media (min-width:600px) {
  .content {
    width:640px;
    margin: 0 auto 0 auto;
  }
  .eventitem {
    margin:0 3em 0 3em;
  }
  .linkdiv {
    width:620px;
  }
}

@media (min-width:900px) {
  .content {
    width:960px;
    margin: 0 auto 0 auto;
  }
  .fmg {
    width:95%;
    height:220px;
  }
  .eventitem {
    display:table;
    margin:.5em 5em 0 5em;
/*    width:85%; */
  }
  .linkdiv {
    width:940px;
  }
  .column {
    display:table-cell;
    vertical-align:top;
}
  .column1 {
    display:table-cell;
    vertical-align:top;
    width:8em; 
}
  .subhead {
    visibility:visible;
    height:30px;
  }
}
button {
  background-color:yellow;
  float:right;
  position:relative;
  font-size:14px;
  bottom: 30%;
  right:6%;
 /* margin: -300px 20px 0 0; */
  z-index:6;
}
button a {
  text-decoration:none;
  color:black;
}
.btn {
  background-color:yellow;
  float:right;
  color:black;
  position:relative;
  font-size:14px;
  border:outset 2px white;
  padding:2px .6em 2px .6em;
  bottom: 34%;
  right:6%;
 /* margin: -300px 20px 0 0; */
  z-index:6;
}
.btn a {
  text-decoration:none;
  color:black;
}
.sbtn {
  background-color:yellow;
  float:right;
  color:black;
  position:relative;
  font-size:14px;
  border:outset 2px white;
  padding:2px .6em 2px .6em;
  bottom: 0%;
  right:6%;
 /* margin: -300px 20px 0 0; */
  z-index:6;
}
.sbtn a {
  text-decoration:none;
  color:black;
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    width:100%;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
    overflow: hidden;
    background-color: #F9E2A6;
/*    z-index:-1; */
    border-bottom:.1em solid brown;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
/*    -webkit-transition: 0.3s; */
    transition: 0.3s;
    font-size: 17px;
}
/* Change background color of links on hover*/
  ul.topnav li a:hover {background-color: #C98763;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the 
link to open and close the
topnav (li.icon) */
@media screen and (max-width:640px) {
/*  ul.topnav li:not(:first-child) {*/
    ul.topnav {
      width:12em;
      text-align:left;
    }
    ul.topnav li {
    /*display: none; */
    float:none;
    width:12em;
    padding:0px;
  }
  ul.topnav li a {padding:0 0 0 1em;}
  .header {
  font-size:120%;
  }
/*  ul.topnav li a:hover {background-color: blue}
  ul.topnav li:not(:first-child) {
    margin-top:-2em;
  }*/
/*  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }*/
/* Change background color of links on hover */
/*  ul.topnav li a:hover {
    background-color: #F9E2A6;
    color: red;
  }*/
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on 
small screens */
/*@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}*/
.container {
  margin-left: auto;
  margin-right: auto;
/* margin-top: 30px;*/
  max-width: 980px;
}
.special{
  background-color:#FFFF80;
}
/*Now, we can define styles for top level elements:
 common and top level styles */
.nav span {
display: none;
}
.nav, .nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.nav {
background-color: #F9E2A6;
border-bottom: .1em solid brown;
float: left;
margin-left: 1%;
margin-right: 1%;
position: relative;
width: 98%;
}
.nav ul.subs {
background-color: #F5D480 /*#E9E2C6*/;
/*box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);*/
color: black;
display: none;
/*left: 0;*/
padding: 0 2% 0 2%;
margin-top:2%;
position: absolute;
top: 30px;
/* width: 20%;*/
}
.nav > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
/* -moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s; */
transition: all 300ms ease-in-out 0s;
}
.nav li a {
display: block;
text-decoration: none;
/* -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; */
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
.nav > li > a {
color: black;
display: block;
font-size: 20px;
line-height: 49px;
padding: 0 15px;
/*text-transform: uppercase;*/
}
.nav > li:hover > a, .nav > a:hover {
background-color: #C98763;
color: black;
z-index: 15;
}
.nav li.active > a {
background-color: #C98763;
color: black;
}
/* And now - styles for drop down (submenu):
submenu */
.nav li:hover ul.subs {
display: block;
z-index: 15;
}
.nav ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
/* width: 33%; */
}
.nav ul.subs > li a {
color: black;
/*line-height: 20px;*/
}
.nav ul li a:hover {
color: black;
font-size:16px;
z-index: 15;
}
.nav ul li a {
color: black;
}
.nav ul.subs > li > a {
font-size: 10%;
/* margin-bottom: 10px; */
/* text-transform: uppercase;*/
}
.nav ul.subs > li li {
/*font-size: 80%;*/
float: none;
/*padding-left: 15px;
/* -moz-transition: padding 150ms ease-out 0s;
-ms-transition: padding 150ms ease-out 0s;
-o-transition: padding 150ms ease-out 0s;
-webkit-transition: padding 150ms ease-out 0s; */
transition: padding 150ms ease-out 0s;
}
.nav ul.subs > li li:hover {
/*padding-left: 15px;*/
background-color:#C98763;
z-index: 15;
}
@media all and (max-width : 630px) {
.nav > li {
float: none;
border-bottom: 0;
margin-bottom: 0;
}
.nav ul.subs {
position: relative;
top: 0;
}
.nav li:hover ul.subs {
display: none;
}
.nav li #s1:target + ul.subs,
.nav li #s2:target + ul.subs {
display: block;
}
.nav ul.subs > li {
display: block;
width: auto;
}
.nav ul.subs li ul li{
display: block;
width: auto;
padding:0.5em 1em 0.5em 1em;
}
}
/***********************/
/*{
  padding: 0;
  margin: 0;
}
body {
  position: relative;
} */
input {
  display: none;
}
input:checked + label {
  position: absolute;
/*  left: 300px;
  top: 60px;*/
  width: 320px;
  height: 300%;
  background-color: rgba(0, 0, 0, .6);
  z-index:9;
  margin-top:-19em;
}
input:not(:checked) + label {
  display: none;
}
.m-window {
  background-color: yellow;
/* for transparent?  
  background-color: #00000000;*/
  width:350px;
  height:380px;
  padding: 0em 1em 1em 1em;
  display: inline-block;
/*  border-radius: 4px;
  box-shadow: 0 0 7px rgba(0, 0, 0, .8);*/
  position: absolute;
  left: 0;
  top: 0;
  margin-top:19em;
/*  transform: translate(-10%, -10%);*/
  z-index:9;
}
@media (min-width:600px) {
  input:checked + label {
    width: 640px;
    height:100%;
    margin-top:-6.2em;
    padding-bottom:21em;
  }
  .m-window {
    width:60%;
    left: 20%;
    top: 10%;
    height:300px;
    margin-top:6.2em;
  }
}
@media (min-width:900px) {
  input:checked + label {
    width: 960px;
    height:60%;
    margin-top:-5em;
  }
  .m-window {
    width:40%;
    left: 32%;
    top: 10%;
  }
}
 /* Container holding the image and the text */
.img-container {
  position: relative;
  text-align: center;
  color: yellow;
}

/* Bottom left text */
.img-btm-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.img-top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.img-top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.img-btm-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centred text */
.img-centred {
  position: absolute;
  top: 1em;
  left: 10%;
  transform: translate(-5%, -5%);
}
div.across {
/*  width: 200%; */
  position:absolute;
  height: 20px;
  top:50px;
  font-size: 140%;
  font-weight:bold;
-ms-transform: rotate(-30deg); /* IE 9 */
  transform: rotate(-30deg);
}
.centred2
{ 
  display: block;
  margin-left: auto;
  margin-right: auto;
}