/* General Patterns 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: #ffffff;
}

.background_block {
position:absolute;
top: 0px;
left: 0px;
height: 210px;
width: 100%;
text-align: center;
display: none; /* remove when live */
}

#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 {
  height: 92vh;
  transition: all 0.5s ease-in-out; 
}

.banner-img {
  width: 100%;
}

ul {
padding-left:40px;
}

.smaller {
font-size: 9pt;
}

#container {
text-align:left;
top: 0px;
margin:auto; /* ignored by IE5/win */
max-width:1200px;
min-width:320px;
position:relative;
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
background: transparent;
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:135px;
color: #ffffff;
}

header span{
display:block;
position:absolute; left:0; top:0; z-index:1;
margin:0; padding:0;
width:100%;
height:125px;
}

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

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

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

textarea {
font-size:9pt;
}

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

input {
font-size:9pt;
}

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: #FF791D;
}

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

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

.blogposted {
font-size:10px;
}

#headerblock1 {
display: block;
position: absolute;
z-index: 1;
top: 20px;
right: 20px;
width: 400px;
color: #0357DE;
font-size: 22px;
font-weight: bold;
}

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

a:link {
color: #2118e8;
}

a:visited {
color: #9A1C1D;
}

a:hover {
color:#ff7200;
}

nav {
position: relative;
clear:both;
left: 0px;
max-width: 100%;
height: 50px;
max-height: 70px;
padding: 0px;
padding-left: 11px;
margin: 0px;
text-align: left;
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:px;
color: #fcf7e7;
  height: 30px;
}

#menu li div{
  height: 30px;
  background:#116BFA;
}

#menu a:link,
#menu a:visited {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
color:#116BFA;
padding:7px 12px 0px 12px;
background: #FFFFFF;
height: 30px;
float:left;
margin: 2px 5px 4px 5px;
width:auto;
border: 1px solid #333;
box-shadow: 4px 4px 4px #757575;
text-decoration: none;
   -webkit-transition:all 0.4s ease-in-out;  
   -moz-transition:all 0.4s ease-in-out;  
   -o-transition:all 0.4s ease-in-out;  
   transition:all 0.4s ease-in-out; 
}


#menu a:hover {
font-size: 18px;
color:#FF0000;
background: #FFFFFF;
border: 1px solid #333;
box-shadow: 2px 2px 4px #757575;
   -webkit-transition:all 0.4s ease-in-out;  
   -moz-transition:all 0.4s ease-in-out;  
   -o-transition:all 0.4s ease-in-out;  
   transition:all 0.4s ease-in-out; 
}

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



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


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

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

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

#Heroes {
  top: 0px;
  height: 330px;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;  
}

#pagecontent {
float: left;
position: relative;
max-width: 100%;
clear: both;
left:0px;
color: #333333;
background: rgba(255,255,255,1);
font-size: 14pt;
display: flex;
align-items: stretch;
}

.innerpage {
margin-top: 20px;
max-width:700px;
min-width:250px;
margin-left:10px;
margin-right:20px;
box-shadow: 10px 10px 15px #757575;
padding: 10px;
}

.innerpage H1 {
font-weight: bold;
font-size: 18pt;
}

.innerpage H2 {
font-size:16pt;
font-weight: bold;
}

.innerpage H3 {
font-size:14pt;
font-weight: bold;
}

aside {
display: block;
float: left;
position: relative;
max-width:440px;
min-width: 240px;
padding-right: 15px;
padding-left: 10px;
padding-bottom: 4px;
font-size: 12pt;
background: #ededed;
border: 1px solid #b7b7b7;
margin-top: 20px;
margin-left:15px;
margin-right: 5px;
}

aside H1 {
font-weight: bold;
font-size: 16pt;
color: #FF0000;    
}

aside H2 {
font-size:14pt;
font-weight: bold;
color: #FF0000;
}

aside H3 {
font-size:12pt;
font-weight: bold;
color: #FF0000;
}

/* 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;
width: 100%;
}

.IconBARE img {
border: 0px;
width: 100%;
}

.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;
}

.IconNONE img {
border: 0px;
}

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

.gallerythumb img:hover {
    width: 110%;
    left: -5px;
    transition: all 0.5s ease-in-out;
}

.galleryprogress {
  height: 50vh;
  top: 25vh;
  opacity: 0.2;
  z-index: 2;
  position: absolute;
}

.galleryprogress img {
  height: 50vh;
}

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

.galleryprevious {
  left: 0px;
}

.gallerynext {
  right: 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: #FFFFFF;
border: 1px solid #FF0000;
margin-right: 20px;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 0px;
box-shadow: 5px 5px 10px #757575;
}

.boxbodyRIGHT {
background: #FFFFFF;
border: 1px solid #FF0000;
margin-right: 0px;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 20px;
box-shadow: 5px 5px 10px #757575;
}

.boxbodyNONE {
background: #FFFFFF;
border: 1px solid #FF0000;
margin: 0px;
box-shadow: 5px 5px 10px #757575;
}

.boxhead {
background: #FF0000;
border: 0px solid #FF0000;
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: #333333;
font-size: 12pt;
background: #FFFFFF;
}

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

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

.boxfoot a {
color: #fff;
}

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

.OpeningHighlight {
  color: #FF0000;
}
/* 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 #FF0000;
background-color: #FFFFFF;
font-size: 10px;
color: #FF0000;
padding: 5px;
padding-bottom: 0px;
width: 175px;
height: 45px;
text-align: center;
vertical-align: middle;
box-shadow: 3px 3px 5px #757575;
#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("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 #FF791D;
  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: 1px solid #FF0000;
background-color: #FFFFFF;
top: 25px;
margin-bottom: 10px;
text-align: center;
max-width: 952px;
margin: auto;
color: #000000;
box-shadow: 5px 5px 10px #757575;
}

footer a {
 color: #fcf7e7;
}

footer a:hover {
 color: #fbf362;
}

.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: 700px) {
  
  
  .webdisplay {
    display: none;
  }
  
  .mobdisplay {
    display: block;
  }
  
  header {
      height:70px;
  }
  
  header h1 {
    font-size: 8px;
    margin: 0px;
  }
    
  header h2 {
    font-size: 8px;
    margin: 0px;
  }
    
  header span {
    height:70px;
  }
  
  #headerblock1 {
    top: 5px;
    right: 3px;
    width: 170px;
    color: #0357DE;
    font-size: 10px;
    font-weight: bold;
  }

  #herographic span {
    display: none;
  }
  #container {
    top: 0px;
  }
  
  #pagecontent {
    display: block;
  }
  
  .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: 20px;
    min-width: 200px;
    text-align: left;
  }

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