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

body {
margin:0px;
padding:0px;
font-family:arial,helvetica,sans-serif;
font-size:10pt;
text-align:center; /*so the container div centers itself in IE5/win */
background:url("red-background.gif") top left repeat;
}

.background_block {
position:absolute;
top: 0px;
left: 0px;
height: 210px;
width: 100%;
background:url("green-background.gif") top left repeat;
}

ul {
padding-left:40px;
}

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

.smaller {
font-size: 8pt;
}


#container {
text-align:left;
top: 22px;
margin:auto; /* ignored by IE5/win */
width:758px;
position:relative;
padding: 5px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
border-top: 5px solid #4b1212;
border-bottom: 5px solid #4b1212;
border-radius: 7px;
background-color: #990002;
color: black;
background:url("content_bg.gif") top left repeat;
}

html>body #container {
width:758px;
}

#header {
display:block;
width:758px;
left: 0px;
top: 0px;
position:relative;
height:180px;
color: #ffffff;
border-bottom: 1px solid #6b6432;
}

#christmas {
width:758px;
left: 0px;
top: 0px;
position:absolute; left:0; top:0; z-index:2;
height:180px;
background:url("../images/christmas.gif") top left no-repeat;
}

#header span{
display:block;
position:absolute; left:0; top:0; z-index:1;
margin:0; padding:0;
width:758px;
height:150px;
background:url("templedene-header.gif") top left no-repeat;
}

 


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

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

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

textarea {
font-size:9pt;
}

.innerpage H1 {
font-weight: bold;
font-size: 14pt;
  color : #57612a;
}

.innerpage H2 {
font-size:12pt;
font-weight: bold;
  color : #57612a;
}

.innerpage H3 {
font-size:11pt;
font-weight: bold;
  color : #57612a;
}

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

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 #9c945e 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: none;
position: absolute;
z-index:1;
top: 20px;
left: 50px;
width: 150px;

background-color: red;
}

#headerblock2 {
display: none;
position: absolute;
z-index:1;
top: 135px;
left: 0px;
}

#menupanel {
position: absolute;
top: 150px;
left: 0px;
width: 758px;
height: 30px;
padding: 0px;
padding-left: 11px;
margin: 0px;
text-align: left;
background:url("menu-background.gif") top left no-repeat;
}

html>body #menupanel {
width: 747px;
}
#menu {
padding: 0px;
margin: 0px;
top: 0px;
text-align: center;
}

#menu li{
display: inline;
padding:0px;
margin:0px;
color: #fcf7e7;
}

#menu a:link,
#menu a:visited {
color:#fcf7e7;
padding:7px 10px 0px 10px;
height: 30px;
float:left;
width:auto;
}

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

#menu a:hover {
color:#fff;
background:#635e3c;
}

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

a:link {
color: #990002;
}

a:visited {
color: #635e3c;
}

a:hover {
color:#fff;
background:#635e3c;
}

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

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

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

#pagecontent {
float: left;
position: relative;
padding-left: 20px;
padding-right: 20px;
padding-top: 4px;
padding-bottom: 7px;
width: 592px; 
top:0px;
left:0px;
background:url("background-content.gif") top right no-repeat;
color: #4d4930;
}

html>body #pagecontent {
width: 568px;
}

#footer {
position: relative;
clear: both;
padding: 0px;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid #6b6432;
left: 0px;
text-align: center;
width: 758px;
color: #fcf7e7;
background: #56602a;
}


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

.IconNONE img {
border: 0px;
}


/* Styling for Picture Boxes */

.PictureBoxLEFT {
padding-bottom:5px;
padding-left:5px;
border-right:12px solid #fcf7e7;
font-size:9pt;
background-color: #b2b580;
float: LEFT;
}

.PictureBoxRIGHT {
padding-bottom:5px;
padding-right:5px;
border-left:12px solid #fcf7e7;
font-size:9pt;
background-color: #b2b580;
float: RIGHT;
}

.PictureBoxNONE {
padding-bottom:5px;
border-left:12px solid #fcf7e7;
border-right:12px solid #fcf7e7;
font-size:9pt;
background-color: #b2b580;
float: NONE;
}

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

.PictureBoxLEFT IMG {
width:320px;
border: 5px solid #b2b580;
border-left: 0px;
border-bottom: 0px;
}

.PictureBoxRIGHT IMG {
width:320px;
border: 5px solid #b2b580;
border-right: 0px;
border-bottom: 0px;
}

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

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

.boxbodyLEFT {
background: #f6e69c;
margin: 8px;
margin-left: 0px;
}

.boxbodyRIGHT {
background: #f6e69c;
margin: 8px;
margin-right: 0px;
}

.boxbodyNONE {
background: #f6e69c;
margin: 0px;
}

.boxhead {
background: #87903e;
color:#990002;
font-weight: bold;
padding-top:3px;
padding-left:5px;
padding-bottom:3px;
}

.boxinner {
padding:5px;
background:  #f6e69c;
}

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

.boxfoot {
clear:both;
background: #b2b580;
padding-top:3px;
padding-left:5px;
padding-bottom:3px;
font-size:11px;
}

/* 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 #635E3C;
border-radius: 5px;
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 #E2DBA8 -5px -5px 3px, inset white 5px 5px 3px;
}

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

.sharediv {
  height: 16px;
  width: 16px;
  background: url("/buttons/sharepanel.gif");
  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;
}