/* TempleDene Stylesheet */

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

#snow{
	background: none;
	background-image: url('s1.png'), url('s2.png'), url('s3.png');
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:100;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}	

.background_block {
position:absolute;
top: 0px;
left: 0px;
height: 210px;
width: 100%;
}

ul {
padding-left:40px;
}

.smaller {
font-size: 12pt;
}

#container {
text-align:left;
top: 22px;
margin:auto; /* ignored by IE5/win */
max-width:952px;
min-width:320px;
position:relative;
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
border: 3px solid #2E7029;
border-radius: 5px;
background-color: #ffffff;
background: #2F702A;
color: #211F50;
}

.PageTitle {
}

.PageDetail {
font-size: 11px;
font-style: italic;
}

.PageBottom {
font-size: 11px;
font-style: italic;
}

header {
display:block;
max-width:100%;
left: 0px;
top: 0px;
position:relative;
height:125px;
color: #ffffff;
border-bottom: 3px solid #2E7029;
background: #211F50;
}

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

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

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

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

textarea {
font-size:9pt;
}

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

input {
font-size:9pt;
}

input[type="number"] {
    font-size: 12pt;
    padding: 5px;
    border: 1px solid black;
}

img {
border: 0px;
}

.bold_text {
font-weight: bold;
}

.italic_text {
font-style: italic;
}

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

.blogpost {
padding-bottom: 5px;
border-bottom: 1px #2E7029 solid;
}

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

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

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

.blogposted {
font-size:10px;
}

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

background-color: red;
}

#headerblock2 {
display: block;
position: absolute;
z-index:1;
top: 10px;
right: 15px;
width:250px;
height: 125px;
font-size: 20px;
}
#headerblock2 span {
font-size: 20px;
background: none;
height: 20px;
position: relative;
}

#headerblock2 a:link {
color: white;
text-decoration: none;
}

#headerblock2 a:hover {
color: white;
text-decoration: none;
}

a:link {
color: #2118e8;
}

a:visited {
color: #9A1C1D;
}

a:hover {
color:#ff7200;
}

nav {
position: sticky;
top: 0px;
z-index: 2;
clear:both;
left: 0px;
max-width: 100%;
height: 35px;
max-height: 70px;
padding: 0px;
padding-left: 11px;
margin: 0px;
text-align: left;
background: #2F702A;
display: block;
}
#sparenavelement {
background:url("menupanel.jpg") top left repeat;
}

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

#menu li{
display: inline;
#list-style-image: url("menulist.jpg");
list-style: none;
padding:0px;
margin:0px;
color: #fcf7e7;
  height: 35px;
}

#menu li div{
  height: 30px;
  background:#2F702A;
}

#menu a:link,
#menu a:visited {
font-size: 14px;
text-transform: uppercase;
background: url("menulist.jpg") 0% 35% no-repeat transparent;
color:#ffffff;
padding:5px 10px 0px 10px;
height: 30px;
float:left;
width:auto;
text-decoration: none;
   -webkit-transition:all 0.8s ease-in-out;  
   -moz-transition:all 0.8s ease-in-out;  
   -o-transition:all 0.8s ease-in-out;  
   transition:all 0.8s ease-in-out; 
transform: rotate(-6deg);
}

html>body #menu a:link, #menu a:visited {
height: 30px;
}

#menu a:hover {
color:#ff0;
background: url("menulisthover.jpg") 0% 35% no-repeat transparent;
   -webkit-transition:all 0.8s ease-in-out;  
   -moz-transition:all 0.8s ease-in-out;  
   -o-transition:all 0.8s ease-in-out;  
   transition:all 0.8s ease-in-out; 
}

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



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


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

#pagecontent {
float: left;
position: relative;
width: 100%;
clear: both;
left:0px;
color: #333333;
background: #FFFFFF;
font-size: 17px;
display: flex;
align-items: stretch;
}

.innerpage {
max-width:630px;
min-width:250px;
margin-left:20px;
margin-right:10px;
}

.innerpage H1 {
font-weight: bold;
font-size: 20pt;
color : #9A1C1D;
}

.innerpage H2 {
font-size:19pt;
font-weight: bold;
color : #9A1C1D;
}

.innerpage H3 {
font-size:18pt;
font-weight: bold;
  color : #9A1C1D;
}

aside {
display: block;
float: left;
position: relative;
max-width: 260px;
min-width:80px;
padding-right: 15px;
padding-left: 10px;
padding-bottom: 4px;
font-size: 15px;
background: #ededed;
border-left: 1px solid #b7b7b7;
margin-left:10px;
}

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

aside .blogblock {
    max-width: 260px;
}

.blogblock {
    display: block;
    float: left;
    padding-bottom: 5px;
    border-bottom: 1px dashed #b7b7b7;
    margin-bottom: 10px;
    font-size: 14px;
}

.blogblock span {
    font-size: 14px;
}

/* 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;
}


/* Styling for Picture Boxes */

.PictureBoxLEFT {
padding:10px;
background: #ededed;
border: 1px solid #d9d9d9;
border-radius: 5px 5px 5px 5px;
font-size:9pt;
background-color: #ECECEC;
margin-right: 20px;
float: LEFT;
}

.PictureBoxRIGHT {
padding:10px;
background: #ededed;
border: 1px solid #d9d9d9;
border-radius: 5px 5px 5px 5px;
font-size:9pt;
background-color: #ECECEC;
margin-left: 20px;
float: RIGHT;
}

.PictureBoxNONE {
padding:10px;
background: #ededed;
border: 1px solid #d9d9d9;
border-radius: 5px 5px 5px 5px;
font-size:9pt;
background-color: #ECECEC;
margin-left: 20px;
float: NONE;
}

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

.PictureBoxLEFT IMG {
width:320px;
border: 2px solid #000;
}

.PictureBoxRIGHT IMG {
width:320px;
border: 2px solid #000;
}

.PictureBoxNONE IMG {
width:320px;
border: 2px solid #000;
border-bottom: 0px;
}

/* Box Stlye (Note, do NOT use a width parameter in these following) */

.boxbodyLEFT {
background: #ededed;
border: 1px solid #d9d9d9;
border-radius: 5px 5px 5px 5px;
margin-right: 20px;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 0px;
}

.boxbodyRIGHT {
background: #ededed;
border: 1px solid #d9d9d9;
border-radius: 5px 5px 5px 5px;
margin-right: 0px;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 20px;
}

.boxbodyNONE {
background: #ededed;
border: 1px solid #d9d9d9;
border-radius: 5px 5px 5px 5px;
margin: 0px;
clear: both;
}

.boxhead {
background: #5aa455;
border: 0px solid #5aa455;
border-radius: 5px 5px 0px 0px;
color:#fff;
font-weight: bold;
padding-top:3px;
padding-left:5px;
padding-bottom:3px;
}

.boxhead h2 {
color:#fff;
margin-top:3px;
margin-bottom:3px;
font-weight: bold;
font-size:14px;
}

.boxinner {
padding:10px;
color: #444085;
background: #ededed;
}

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

.boxfoot {
clear:both;
background: #5e5c8e;
border: 1px solid #5e5c8e;
border-radius: 0px 0px 5px 5px;
color: #fff;
padding-top:3px;
padding-left:5px;
padding-bottom:3px;
font-size:11px;
}

.boxfoot a {
color: #fff;
}

.boxfoot a:hover {
color:#ff0;
}

.blankbox {
    border: 0px;
    background: transparent;
    color: #333333;
}

.table1 {
  border-collapse: collapse;
  border: 2px solid #1c3568;
  background: #ededed;
}

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

.table1 td {
  background: #ededed;
  border: 1px solid #1c3568;
  color: #000000;
  padding: 8px;
  text-align: center;
}

.table1 td:first-child {
  background: #5e5c8e;
  color: #fff;
  text-align: left;
}
/* 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;
}

.sharepanel {
position: relative;
#border: 1px solid #211F50;
border: 2px solid #2E7029;
border-radius: 5px;
font-size: 10px;
color: #fff;
background: #211f50;
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 #211F50 -5px -5px 3px, inset #a8e1ff 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;
}

.adminpopup {
  display: none;
  position: absolute;
  background: #FCF7E7;
  border: 2px solid #990002;
  box-shadow: 7px 7px 4px #C6C6C6;
  border-radius: 8px;
  padding: 5px 5px 5px 5px;
}

footer {
position: relative;
clear: both;
padding: 0px;
padding-top: 5px;
padding-bottom: 5px;
border: 3px solid #2E7029;
border-radius: 5px;
top: 25px;
margin-bottom: 0px;
text-align: center;
max-width: 952px;
margin: auto;
color: #fcf7e7;
background-color: #211F50;
}

footer a:link {
 color: #fcf7e7;
}

footer a:hover {
 color: #fbf362;
}

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

  .webdisplay {
    display: block;
  }
  
  .mobdisplay {
    display: none;
  }
  
  .widescreen {
      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;
  }
  
  aside {
    max-width: 500px;
  }
  
  aside .blogblock {
      max-width: 240px;
      margin-right: 10px;
  }
  
  #container {
    max-width: 1200px;
  }
  
  .widescreen {
      display: block;
  }
}


/* 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: 600px) {
  
  #headerblock2 {
  
    width: 112px;
    height: 70px;
    
  }
  
  .webdisplay {
    display: none;
  }
  
  .mobdisplay {
    display: block;
  }
  
  .widescreen {
      display: none;
  }
  
  header {
      height:70px;
  }
  
  header h1 {
    font-size: 8px;
    margin: 0px;
  }
    
  header h2 {
    font-size: 8px;
    margin: 0px;
  }
    
  header span {
    height:70px;
    background:url("mobileheader.png") top left no-repeat #211F50;
  }
  
  #container {
    top: 0px;
  }
  
  #pagecontent {
    display: block;
  }
  
  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;
  }
    
  #menu {
    display: none;
    z-index: 5;
    top: 10px;
  }
  
  #menu li {
    width: 200px;
  }
  #menu a:link,
  #menu a:visited {
    padding-right: 200px;
  }

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

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

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