/* all the syle sheet stuff for the main page setup and header block */
/* Newman Parish */

.hamburger {
  display: none;
}

body {
margin:0px;
padding:0px;
font-family:arial,helvetica,sans-serif;
font-size:12pt;
text-align:center; /*so the container div centers itself in IE5/win */
background:#e8e9e9;
}

.background_block {
position:absolute;
top: 0px;
left: 0px;
height: 170px;
width: 100%;
background: url("body-bg.gif");
}

#fullsizeImage {
  display: none;
  position: fixed;
  padding-top: 15px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 50;
  color: #fff;
  font-weight: bold;
  transition: all 0.5s ease-in-out; 
  padding-bottom: 100%;
}

#fullsizeImage img {
  max-width: 100%;
  height: auto;
  transition: all 0.5s ease-in-out; 
}

.banner-img {
  width: 100%;
}

ul {
padding-left:40px;
}

.innerpage ul {
list-style-image: url("list_icon.gif");
}

.PageTitle {
width:100%;
clear: both;
}

.PageDetail {
width:100%;
clear: both;
}


#container {
text-align:left;
margin:auto; /* ignored by IE5/win */
width: 100%;
max-width:966px;
position:relative;
padding: 0px;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
color: #fff;
background: url("back.png");
}

header {
display:block;
width: 100%;
max-width:966px;
left: 0px;
top: 0px;
position:relative;
height:170px;
color: #ffffff;
}

header span{
display:block;
position:absolute; left:0; top:0; z-index:1;
margin:0; padding:0;
width: 100%;
max-width:966px;
height:170px;
background:url("header.webp") top left no-repeat;
}

 


H1 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 16pt;
color: #8E2241;
margin-bottom: 13px;
margin-top: 13px;
}

H2 {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:14pt;
font-weight: bold;
color: #8E2241;
margin-bottom: 13px;
margin-top: 13px;
}

H3 {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:14pt;
font-weight: bold;
color: #8E2241;
margin-bottom: 13px;
margin-top: 13px;
}

textarea {
font-size:9pt;
}

.innerpage  {
padding: 22px;
padding-top:8px;
}

.innerpage H1 {
font-weight: bold;
font-size: 16pt;
  color : #024b4e;
}

.innerpage H2 {
font-size:14pt;
font-weight: bold;
  color : #024b4e;
}

.innerpage H3 {
font-size:14pt;
font-weight: bold;
  color : #024b4e;
}

.innerpage a:link {
color : #024b4e;
#color: #23898E;
}

.innerpage a:visited {
color: #8E2241;
}

.innerpage a:hover {
color: #FF2B06;
}

.storyblock {
    display: block;
    padding-bottom: 5px;
    border-bottom: 1px dashed #b7b7b7;
    margin-bottom: 10px;
}

table {
font-size:10pt;
background-color: #fff;
}


.table1 {
  border-collapse: collapse;
  border: 2px solid #22898e;
}

.table1 th {
  background: #8e2241;
  border: 1px solid #22898e;
  color: #ffffff;
  padding: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: bold;
  font-size: 16px;
}

.table1 td {
  background: #ffffff;
  border: 1px solid #22898e;
  color: #000000;
  padding: 8px;
}

.table1 td:first-child {
  background: #d0d0d0;
}
input {
font-size:9pt;
}

img {
border: 0px;
}

.bold_text {
font-weight: bold;
color : #024b4e;
}

.italic_text {
font-style: italic;
}

.ul_text {
font-style: normal;
text-decoration: underline;
}

.blogpost {
padding-bottom: 5px;
border-bottom: 1px #9c945e solid;
}

.blogbits {
font-size: 12pt;
color: #990002;
}

.blogbits h2 {
font-size: 12pt;
color: #990002;
}

.blogbits a {
font-size: 12pt;
color: #8E2241;
}

.blogposted {
font-size:12px;
}

#headerblock1 {
display: none;
position: absolute;
z-index:1;
top: 20px;
left: 50px;
width: 150px;

background-color: red;
}

#headerblock2 {
display: block;
position: absolute;
z-index:1;
top: 130px;
right: 10px;
}

#herographic {
  height: 100%;
  padding: 0px;
  margin-bottom: -5px;
  border: 0px;
}

#herographic span {
  background: url("bannerbackground.png") top left no-repeat;
  z-index: 2;
  position: absolute;
  top: 170px;
  height: 330px;
  width: 960px;
}

#menupanel {
position: relative;
float: left;
left: 3px;
width: 220px;
padding: 0px;
margin: 0px;
text-align: left;
color: #2e2e2e;
background: #8e2241;
text-transform:uppercase
}

#crest {
  text-align: center;
}
  
#menu {
padding: 0px;
margin: 0px;
top: 0px;
text-align: left;
}

#menu ul{
list-style-image: url("../../images/trans_pixel.gif");
}

#menu li{
list-style-image: url("../../images/trans_pixel.gif");
font-size:14px;
padding: 0px;
padding-top: 9px;
padding-bottom: 10px;
height: 14px;
margin: 0px;
border: 0px;
padding-left: 10px;
border-bottom: 1px solid #8e2241;
color: #2e2e2e;
background: #d0d0d0;
font-family: "Times New Roman","FreeSerif", sans-serif;
}

#menu a:link,
#menu a:visited {
color:#2e2e2e;
height: 14px;
width:auto;
font-weight: bold;
text-decoration: none;
}

#menu a:hover {
color:#024b4e;
text-decoration: underline;
}

#menu a:active {
color:#024b4e;
text-decoration: none;
}

a:link {
color: #23898E;
}

a:visited {
color: #8E2241;
}

a:hover {
color:#FF2B06;
}

#rightpanel {
float: left;
top: 0px;
left: 0px;
width: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 4px;
border-left: 0px solid #6b6432;
font-size: 12pt;
background:url("right-background.gif") top left no-repeat;
}

html>body #rightpanel {
width: 130px;
}

#pagecontent {
position: relative;
float: right;
display: block;
padding-left: 0px;
width: 100%;
max-width: 740px; 
top:0px;
right:3px;
background: #fff;
color: #000;
}

.PageBottom {
font-size: 10pt;
color: #777;
}

#footer {
position: relative;
clear: both;
padding: 0px;
padding-top: 20px;
left: 0px;
text-align: center;
width: 100%;
max-width: 966px;
height: 60px;
color: #fff;
background: url("bottom-bg.png");
margin: auto;
}

#footer a {
color: #fff;
}

#footer a:hover {
color: #C1C1C1;
}

/* Graphic Boxes have a blank SPAN element so you can add a background graphics over the text 
This is currently only used on the links page and hand coded home pages, it will be expanded */

.graphicboxcontainer{
width: 290px;
padding:5px
}

html>body .graphicboxcontainer {
width: 280px;
padding:5px
}

.graphicboxhead {
margin:0; padding:0;
position:relative;
width:280px; height:29px;
margin:0; padding:0;
overflow:hidden;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:13pt; font-weight:bold;
color: yellow;
background-color: navy;
}

.graphicboxhead span{
display:block;
position:absolute; left:0px; top:0px; z-index:1;
width:280px; height:29px;
margin:0; padding:0;
}

.graphicboxbody{
position:relative; left:4px; top:0px;
width:272px;
margin:0px; padding:5px 0px 5px 5px;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:11pt;
color: black;
background-color: #F0F8FF;
}

/* Special Cases based on the ID of the graphic box 
In the case of the links.php page each link category is indicated as "lickcat#" 
where the # is the numebr of that category*/

#linkcat1 span{
background:url("../images/linkcat1.jpg") top left no-repeat;
}

#linkcat2 span{
background:url("../images/linkcat2.jpg") top left no-repeat;
}

#linkcat3 span{
background:url("../images/linkcat3.jpg") top left no-repeat;
}

#linkcat4 span{
background:url("../images/linkcat4.jpg") top left no-repeat;
}

/* Icons Setup as Icons are displayed at the native size of the pic there should be NO width or height info here!!! */

.IconLEFT {
float:LEFT;
margin-left:0px;
margin-right:12px;
margin-top:5px;
margin-bottom:5px;
}

.IconLEFT img {
border: 0px;
}

.IconBARE {
margin:0px;
}

.IconBARE img {
border: 0px;
}

.IconRIGHT {
float:RIGHT;
margin-left:12px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}

.IconRIGHT img {
border: 0px;
}

.IconNONE {
float:NONE;
margin-left:12px;
margin-right:12px;
margin-top:5px;
margin-bottom:5px;
clear: both;
}

.IconNONE img {
border: 0px;
}

.gallerythumb {
  float: left;
  width: 100px;
  height: 100px;
  display: block;
  padding: 5px;
}

.galleryprogress {
  top: 40px;
  opacity: 0.3;
  z-index: 2;
  position: absolute;
}

.galleryprogress:hover {
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.galleryprevious {
  left: 0px;
}

.gallerynext {
  right: 0px;
}
/* Styling for events diary */

.eventdateline {
border: 3px solid #8E2241;
padding: 5px;
border-radius: 5px;
margin-bottom: 7px;
font-weight: bold;
}

.eventbox {
border: 1px solid #8E2241;
padding: 3px;
border-radius: 3px;
margin-bottom: 3px;
}

.eventtitle {
font-weight: normal;
font-style: italic;
}

.eventtitle em {
font-weight: bold;
font-size: 12pt;
font-style: normal;
}

.eventtitle a:visited {
color: #8E2241;
}

.eventdescription {
font-size: 12pt;
margin: 5px;
color: #414141;
}

.eventreminder {
border: 1px solid #6e6e6e;
padding: 3px;
border-radius: 3px;
font-size: 12pt;
}
/* Styling for Picture Boxes */

.PictureBoxLEFT {
margin-right:15px;
margin-bottom:5px;
border: 1px solid #d0d0d0;
font-size:11pt;
border: 1px solid #8e2241;
background-color: #fff;
padding:5px;
float: LEFT;
}

.PictureBoxRIGHT {
margin-bottom:5px;
margin-left:15px;
border: 1px solid #d0d0d0;
font-size:11pt;
border: 1px solid #8e2241;
background-color: #fff;
padding:5px;
float: RIGHT;
}

.PictureBoxNONE {
margin: 5px;
border: 1px solid #d0d0d0;
font-size:11pt;
border: 1px solid #8e2241;
background-color: #fff;
padding:5px;
float: NONE;
}

/* Styling for the image inside the Picture Box */

.PictureBoxLEFT IMG {
width:320px;
border: 1px solid #d0d0d0;
}

.PictureBoxRIGHT IMG {
width:320px;
border: 1px solid #d0d0d0;
}

.PictureBoxNONE IMG {
width:320px;
border: 1px solid #d0d0d0;
}
/* Box Stlye (Note, do NOT use a width parameter in these following) */

.boxbodyLEFT {
background: #ffffff;
border: 1px solid #8E2241;
margin: 8px;
margin-left: 0px;
}

.boxbodyHLEFT {
background: #ffffff;
border: 1px solid #8E2241;
margin: 8px;
margin-left: 0px;
clear: left;
}

.boxbodyRIGHT {
background: #ffffff;
border: 1px solid #8E2241;
margin: 8px;
margin-right: 0px;
clear: right;
}

.boxbodyNONE {
background: #ffffff;
border: 1px solid #8E2241;
margin: 0px;
clear:both;
}
 .white {
border: 0px;
}

.black {
border: 5px solid black;
font-weight: bold;
color: black;
font-size: 16px;
}

.boxhead {
background: #8E2241;
color:#fff;
font-weight: bold;
padding-top:3px;
padding-left:5px;
padding-right:5px;
padding-bottom:3px;
border: 2px solid white;
}

.boxhead h2 {
color:#fff;
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
}

.boxinner {
padding:10px;
color: #000;
background: #fff;
margin-top: 1px;
border: 1px solid white;
}

.smaller {
font-size: 11px;
color: #606060;
}

.boxinner H2 {
margin-top: 6px;
}

.boxfoot {
clear:both;
background: #777;
color: #fff;
padding-top:3px;
padding-left:5px;
padding-bottom:3px;
font-size:12px;
border: 2px solid white;
margin-top: 1px;
}

.boxfoot a:link {
color: #000000;
}

.boxfoot a:visited {
color: #FF2B06;
}

.boxfoot a:visited {
color: #ffffff;
}

.whitebox {
 border: 0px solid white;
}
/* Special Boxes (Here is where you can put widths and special cases) */

/* On the "links.php" page this can be used to specify the width and any "special cases just for the list box 
Now defunct due to the new graphicbox used on links.php and other pages*/

.linkbox {
width:275px;
}


.shopcontent {
position: relative;
background-color:#fcf7e7;
top:0px;
left:145px;
width: 603px;
}

.inputlabel {
color: black;
background-color:#e1e1e1;
border:0px;
}

.shopfooter {
position:relative;
top:0px;
width: 603px;
}

.shopmenu {
position:relative;
top:0px;
left:0px;
width: 140px;
background: silver;
margin-bottom: 5px;
}

.shopmenu {
padding: 0px;
margin: 0px;
top: 10px;
}

.shopmenu li{
list-style-type:none;
padding:5px;
padding-right: 10px;
margin:0px;
color: red;
}

.shopsubmenu {
padding: 0px;
margin: 0px;
top: 0px;
}

.shopsubmenudiv {
padding: 0px;
margin: 0px;
top: 0px;
}

.shopsubmenu li{
list-style-type:none;
padding:0px;
padding-left:10px;
padding-right: 10px;
font-size: 80%;
margin:0px;
color: blue;
}

.shopfooter {
width:100%;
border: 5px;
clear: both;
}

.shoppricegrid TD {
text-align: right;
}

#messageBox {
padding:10px;
background: #e1e1e1;
}

.sharepanel {
position: relative;
border: 1px solid #635E3C;
border-radius: 5px;
background: #E7E7E7;
font-size: 10px;
color: #635E3C;
padding: 5px;
padding-bottom: 0px;
width: 175px;
height: 45px;
text-align: center;
vertical-align: middle;
#box-shadow: 0 0 10px 5px black, 20px -15px lime, 20px 15px 25px red, -20px 15px yellow, -20px -15px 25px blue,inset #E2DBA8 -5px -5px 3px, inset white 5px 5px 3px;
box-shadow: inset #B5C3D1 -5px -5px 3px, inset white 5px 5px 3px;
}

.sharebutton {
margin-right: 5px;
text-decoration: none;
}

.sharediv {
  height: 16px;
  width: 16px;
  background: url("/buttons/sharepanel.png");
  margin: 5px;
-moz-transition:-moz-transform 0.5s cubic-bezier(0.42, 0, 1, 1) ; /*animate transform property */
-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.42, 0, 1, 1) ; /*animate transform property */
-o-transition:-o-transform 0.5s cubic-bezier(0.42, 0, 1, 1) ; /*animate transform property in Opera */
transition:transform 0.5s cubic-bezier(0.42, 0, 1, 1) ; /*animate transform property in Opera */
}

.sharediv:hover {
-moz-transform:rotate(360deg) scale(1.8); /*scale up image 1.8x*/
-webkit-transform:rotate(360deg) scale(1.8);
-o-transform:rotate(360deg) scale(1.8);
transform:rotate(360deg) scale(1.8);
}

#sharefacebook {
  position: absolute;
  top: 17px;
  left: 10px;
  background-position: 0px -16px;
}

#sharefacebook:hover {
  background-position: 0px 0px;
}

#sharetwitter {
  position: absolute;
  top: 17px;
  left: 30px;
  background-position: -26px -16px;
}

#sharetwitter:hover {
  background-position: -26px 0px;
}

#sharereddit {
  position: absolute;
  top: 17px;
  left: 50px;
  background-position: -52px -16px;
}

#sharereddit:hover {
  background-position: -52px 0px;
}

#shareyahoo {
  position: absolute;
  top: 17px;
  left: 70px;
  background-position: -78px -16px;
}

#shareyahoo:hover {
  background-position: -78px 0px;
}

#sharedigg {
  position: absolute;
  top: 17px;
  left: 90px;
  background-position: -104px -16px;
}

#sharedigg:hover {
  background-position: -104px 0px;
}

#sharegoogle {
  position: absolute;
  top: 17px;
  left: 110px;
  background-position: -130px -16px;
}

#sharegoogle:hover {
  background-position: -130px 0px;
}

#sharestumble {
  position: absolute;
  top: 17px;
  left: 130px;
  background-position: -156px -16px;
}

#sharestumble:hover {
  background-position: -156px 0px;
}

#shareslashdot {
  position: absolute;
  top: 17px;
  left: 150px;
  background-position: -182px -16px;
  margin-right: 0px;
}

#shareslashdot:hover {
  background-position: -182px 0px;
}

.novisit a:visited {
color: #8E2241;
}



.hamburger {
  display: none;
  height: 0px;
  width: 0px;
}

.webdisplay {
  display: block;
}

.mobdisplay {
  display: none;
}

.telnum {
  margin: 0px;
  float: left;
}
  /* Responsive Forms */

form header {
  margin: 0 0 20px 0; 
}
form header div {
  font-size: 90%;
  color: #999;
}
form header h2 {
  margin: 0 0 5px 0;
}
form > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
  width: 20%;
  float: left;
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
  width: 75%;
  float: left;
}

form > div > div > div {
  width: 45%;
  float: right;
  text-align: left;
}

form > div > fieldset label {
	font-size: 90%;
}
fieldset {
	border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
  width: 50%;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password] {
  width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #2E7029;
}

@media (max-width: 600px) {
  form > div {
    margin: 0 0 15px 0; 
  }
  form > div > label,
  legend {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  
  form > div > div > div {
    display: none;
  }
  
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
}
@media (min-width: 1200px) {
  form > div > label,
	legend {
  	text-align: right;
  }
}

/* End of responsive forms */


@media (max-width: 600px) {
  form > div {
    margin: 0 0 15px 0; 
  }
  form > div > label,
  legend {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
}
@media (min-width: 1200px) {
  form > div > label,
	legend {
  	text-align: right;
  }
}

@media screen and (max-width: 950px) {
  #menupanel {
    min-width:200px;
    width: 30%;
  }
  
  #pagecontent {
    width:70%;
    min-width: 450px;
  }
}

@media screen and (max-width: 700px) {
  
  #headerblock2 {
  
    width: 180px;
    height: 70px;
    top: 68px;
    z-index:3;
    
  }
  
  .webdisplay {
    display: none;
  }
  
  .mobdisplay {
    display: block;
  }
  
  header {
      height:70px;
      width: 100%;
      background-color: #369398;
  }
  
  header h1 {
    font-size: 8px;
    margin: 0px;
  }
    
  header h2 {
    font-size: 8px;
    margin: 0px;
  }
    
  header span {
    height:70px;
    width: 100%;
    background:url("mobileheader.webp") top left no-repeat #369398;
  }
  
  #container {
    top: 0px;
    width: 100%;
  }
  
  #pagecontent {
    display: block;
    float:left;
    width:100%;
    min-width:100px;
  }
  
  input[type="submit"] {
      margin: 5px;
      padding: 10px;
  }
  
  .hamburger {
    display: block;
    height: 30px;
    width: 50px;
    top: -5px;
    margin-bottom: 10px;
  }
  
  .hamburger button {
    border: 0px;
    margin: 0px;
    padding:0px;
    background: transparent;
  }
  
  #menupanel {
    height: 32px;
    width:100%;
    z-index:2;
  }
    
  #menu {
    display: none;
    z-index: 5;
    top: 10px;
  }
  
  #menu li {
    width: 100%;
  }
  #menu a:link,
  #menu a:visited {
    padding-right: 0px;
  }
  
  #crest {
    display: none;
  }
  
  aside {
   max-width:100%;
   border: 1px solid #b7b7b7;
   margin-right: 10px;
  }
  
      .googlemaps {
        position: relative;
        padding-bottom: 100%;
        height: 0;
        overflow: hidden;
	width: 95%;
    }
    .googlemaps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    
  #footer {
    width:100%;
  }
  
  .boxbodyLEFT {
    width:100% !important;
    margin-left: 2px;
    margin-right: 2px;
  }

  .boxbodyRIGHT {
    float: left !important;
    width:100% !important;
    margin-left: 2px;
    margin-right: 2px;
  }
}

@media screen and (max-width: 370px) {
  
  #headerblock2 {
    display: none;
  }
}

width:100%;
   border: 1px solid #b7b7b7;
   margin-right: 10px;
  }
}