body {background-color: #aaffaa;}
table {background-color: #aaffaa;}
tr {background-color: #dddddd; color:#aaa}
td {background-color: #dddddd; color:#aaa}

#graybar {
        background-color:#888888;
}
	
#hlight {
        font-size:16px;
        font-weight:bold;
        background-color:#ffffff;
        text-align:right;
}

#hlight2 {
	margin: 0;
	padding: 10;
        font-size:16px;
        font-weight:bold;
        background-color:#ffffff;
        text-align:left;
        vertical-align:middle;
}

#hlight3 {
	margin: 0;
	padding: 0;
        font-size:16px;
        font-weight:bold;
        background-color:#ffffff;
        text-align:left;
        vertical-align:middle;
}

.hlight tr td {
#        background-color:white;
        font-weight:bold;
        width:40px;
		color:#aaa
}

#keypad {margin:auto; margin-top:40px;}
#keypad1 {margin:auto; margin-top:20px;}

#keypad tr td {
        vertical-align:middle;
        text-align:center;
        border:1px solid #000000;
        font-size:38px;
        font-weight:bold;
        width:40px;
        height:30px;
        cursor:pointer;
        background-color:white;
        color:black;
}
#keypad1 tr td {
        vertical-align:middle;
        text-align:center;
        border:1px solid #000000;
        font-size:18px;
        font-weight:bold;
        width:300px;
        height:30px;
        cursor:pointer;
        background-color:white;
        color:black;
}

.input {
    border: 5px solid #006;
    background: #ffc;
}
.input:hover {
    border: 1px solid #f00;
    background: #ff6;
}
#input:hover {
    border: 1px solid #f00;
    background: #ff6;
}
button {
        background: url('images/up.png') no-repeat top left;
	border: 0;
	display: block;
	height: 30px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	width: 81px;
	}
button:hover {
        background: url('images/down.png') no-repeat top left;
	}
/*
.button {
    background: url('images/up.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    background: url('images/down.png') no-repeat top left;
    padding: 2px 8px;
}
*/
label {
    display: block;
    width: 150px;
    float: left;
    margin: 2px 4px 6px 4px;
    text-align: right;
}
br { clear: left; }

#content {
margin: 0;
padding: 15px;
font-family: Georgia, "Book Antiqua", palatino, serif;
}

h1  { text-align: center; margin: 0; }
h2  {  margin: 0; }
h2l  { text-align: left; margin: 0; }
h2c  { text-align: center; margin: 0; }
h2r  { text-align: right; margin: 0; }
h3l { text-align: left;   margin: 0; font-size: 120%; font-weight: bold; }
h4  { text-align: center; margin: 0; }
h4l { text-align: left; margin: 0; }
h5  { text-align: center; margin: 0; font-size-adjust: 0.30; font-family: times; }

#img {border: 9;}
img
  {
  border: 0px solid #00ff00;
  }

.pinecone{
background: #000 url(images/pineconedk.jpg);
}

a span {display: none;}

a:hover span {display: block; border: 5px inset #483db8;
   position: absolute; top: 400px; left: 100; width: 275px;
   padding: 5px; margin: 10px; z-index: 100;
   color: black; background: url('images/pinecone2.jpg');
   font: 20px Verdana, sans-serif; text-align: left; font-weight: bold;}

li
{
   font-size: 90%;
   font-weight: bold;
   padding-left: 0.5em;
   color: #000; background: #ffffcc);
}

li1
{
//   font-size: 90%;
//   font-weight: bold;
//   padding-left: 0.5em;
//   text-align: left;
//   color: #000; background: #ffffcc);
}

li2
{
   font-size: 90%;
   font-weight: bold;
   padding-left: 0.5em;
   text-align: left;
   color: #000; background: #ffffcc);
}
li3
{
   font-size: 80%;
   font-weight: bold;
   padding-left: 0.5em;
   text-align: left;
   color: #000; background: #ffffcc);
}


.yellow {background: #FFE;}
.black  {background: #000;}

.wauto {width: auto;}
.w22 {width: 22em;}
.w33 {width: 33em;}
.w40p {width: 40%;}

.bb5 {border: 5px inset #483db8;}
.bp5 {border: 5px inset #9040d3;}
.bs5 {border: 5px inset #0a0;}
.bs2 {border: 2px inset #0a0;}

.m0 {margin: 0em;}
.m1 {margin: .5em;}
.m2 {margin: 2em;}
.m2a {margin: 2em;}
.mt1 {margin-top: 1em;}
.mb1 {margin-bottom: 1em;}
.mr1 {margin-right: 1em;}
.ml1 {margin-left: 2em;}
.mb2 {margin-bottom: 2em;}

.l {float: left; clear: left;}
.c {float: center; clear: center;}
.r {float: right; clear: right;}

.cp {color: #9040d3;}
.cb {color: #483db8;}

div.p1c {padding: 1em; text-align: center;}
.myButton {
	-moz-box-shadow: 4px 4px 3px 1px #519c5a;
	-webkit-box-shadow: 4px 4px 3px 1px #519c5a;
	box-shadow: 4px 4px 3px 1px #519c5a;
	background-color:#bfdbc5;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	border:2px solid #3d1715;
	display:inline-block;
	color:#852c39;
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	padding:6px 12;
	text-decoration:none;
	text-shadow:1px 1px 0px #1c0705;
	width:100px;
	height:14px;	
}
.myButton:hover {
	background-color:#74f04a;
}.myButton:active {
	position:relative;
	top:1px;
}

.myButton2 {
	-moz-box-shadow: 4px 4px 3px 1px #519c5a;
	-webkit-box-shadow: 4px 4px 3px 1px #519c5a;
	box-shadow: 4px 4px 3px 1px #519c5a;
	background-color:#bfdbc5;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	border:2px solid #3d1715;
	display:inline-block;
	color:#852c39;
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	padding:6px 12;
	text-decoration:none;
	text-shadow:1px 1px 0px #1c0705;
	width:100px;
	height:30px;	
}.myButton2:hover {
	background-color:#74f04a;
}.myButton2:active {
	position:relative;
	top:1px;
}
div.floating-menu {position:fixed;right:5;top:5;:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;} 

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}